/* =========================================================
   DESIGN TOKENS — shared by the website and the video
   collage generator. Change values here, not in components.
   ========================================================= */
:root {
  /* colour */
  --c-bg: #000;
  --c-fg: #fff;
  --c-line: rgba(255, 255, 255, 0.35);   /* card borders, hairlines */
  --c-dim: rgba(255, 255, 255, 0.5);     /* secondary text (e.g. cities in the about list) */
  --c-glass: rgba(0, 0, 0, 0.78);        /* tooltip / popover surface */
  --c-error: rgba(200, 40, 40, 0.85);

  /* type families */
  --f-display: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --f-label: "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", monospace;
  --f-meta: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* type scale — fluid: phone → 1440px desktop, capped */
  --t-stack: clamp(64px, 10.4vw, 150px);   /* DA / VID / KV / IEN */
  --t-role: clamp(46px, 10.4vw, 150px);    /* VISUAL ARTIST */
  --t-label: clamp(15px, 1.6vw, 26px);     /* contact / about */
  --t-body: clamp(13px, 1.25vw, 18px);     /* about list, email */
  --t-meta: 12px;                          /* filenames */
  --ls-label: 0.17em;                      /* wide-tracked mono */

  /* condensing the serif (Times has no condensed cut) */
  --sx-da: 0.75;
  --sx-vid: 0.63;
  --sx-kv: 0.75;
  --sx-ien: 0.64;
  --sx-role: 0.8;

  /* layout */
  --page-max: 1920px;                      /* content stops widening here (big screens) */
  --gutter: clamp(16px, 5vw, 72px);
  --page-x: clamp(16px, 17vw, 245px);      /* left edge of hero */
  --collage-x: clamp(0px, 11vw, 162px);    /* side margins of collage */

  /* card */
  --card-radius: 6px;
  --card-border: 1.5px;

  /* background grid — same system as the p5 video-collage generator (values in px / 0–1).
     The hero (name, VISUAL ARTIST, contact/about) and the filter row snap to this grid. */
  --grid-cell: 160;              /* crosshair grid spacing = the layout unit (80 on phones, below) */
  --dot-spacing: 80;             /* dots sit between grid points (offset by half a step) */
  --dot-size: 2;                 /* dot diameter */
  --dot-opacity: 0.18;
  --cross-density: 0.4;          /* share of grid points that get a crosshair */
  --cross-arm: 30;               /* arm length from the centre */
  --cross-stroke: 1;
  --cross-gap: 2;                /* empty centre, each side */
  --hero-cols-max: 6;            /* hero width in grid cells on big screens */
  --cross-opacity: 0.28;
  --grid-line-opacity: 0.08;     /* full grid lines through the crosshair points; 0 = off */
  --grid-line-stroke: 1;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* phones: half-size cells, so the hero still gets enough cells to fit (2 big cells would be too few) */
@media (max-width: 640px) {
  :root {
    --grid-cell: 80;
    --dot-spacing: 40;
    --cross-arm: 22;
  }
}