/* KLOC design tokens — fork-4. Rebuilt after the design-system audit (28 Sep 2026).
   Every value on the page reads from here: colour by role, type by role, one spacing scale, one motion vocabulary,
   radii, glows, focus. Old names are kept at the bottom as aliases of the new ones, so nothing downstream breaks.
   The specimen is design-system.html. */
:root{
  /* ---- colour: brand ---- */
  --ground:#111; --ground-deep:#0b1214;
  --ink:#ece9e2; --caledon:#baffbf; --crayola:#ff6b35;

  /* ---- colour: roles ---- */
  --text-1:var(--ink);                       /* primary text */
  --text-2:rgba(236,233,226,.62);            /* secondary text: ledes, meta, labels (≈6:1 on ground) */
  --text-3:rgba(236,233,226,.42);            /* tertiary: large text only, or disabled (≈3.5:1) */
  --text-ghost:rgba(236,233,226,.14);        /* decorative only: unlit words, idle cells, never information */
  --line-1:rgba(236,233,226,.14);            /* every hairline */
  --line-2:rgba(236,233,226,.3);             /* strong borders: inputs, nodes, CTA frames, dashed future */
  --surface-0:var(--ground);
  --surface-1:#161919;                       /* cards */
  --scrim:rgba(17,17,17,.72); --scrim-strong:rgba(17,17,17,.9);
  --accent:var(--caledon);
  --accent-wash:rgba(186,255,191,.06);       /* hover tints, glows behind things */
  --accent-halo:rgba(186,255,191,.14);       /* 4–5px rings around dots */
  --accent-line:rgba(186,255,191,.45);       /* resting accent borders and underlines */
  --accent-glow:rgba(186,255,191,.6);        /* light */
  --on-accent:#0b1214; --on-accent-2:rgba(11,18,20,.65);
  --signal:var(--crayola); --signal-glow:rgba(255,107,53,.55);   /* REC dots and "your store" only */
  --glow-sm:0 0 12px var(--accent-glow);                         /* lines and text */
  --glow-md:0 0 0 4px var(--accent-halo),0 0 18px 2px var(--accent-glow);   /* dots and heads */

  /* ---- type: families and weights ---- */
  --f-sans:"Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
  --w-regular:400; --w-medium:500;           /* 400 for running text, 500 for everything else; no 700 */

  /* ---- type: roles (size / line-height / tracking) ---- */
  --t-display:clamp(64px,12vw,220px);     --lh-display:.8;     --ls-display:-.05em;   /* hero only, uppercase */
  --t-title-xl:clamp(40px,6.5vw,100px);   --lh-title-xl:.9;    --ls-title-xl:-.04em;  /* big section titles, item headings */
  --t-statement:clamp(30px,4vw,64px);     --lh-statement:1.12; --ls-statement:-.03em; /* one sentence at a time */
  --t-title:clamp(28px,3vw,44px);         --lh-title:1.05;     --ls-title:-.02em;     /* standard section titles */
  --t-heading:clamp(20px,1.8vw,28px);     --lh-heading:1.1;    --ls-heading:-.02em;   /* card and item titles */
  --t-body-lg:clamp(17px,1.3vw,22px);     --lh-body-lg:1.3;    --ls-body-lg:-.01em;   /* quotes on cards */
  --t-body:16px;                          --lh-body:1.5;
  --t-small:13px;                         --lh-small:1.45;
  --t-label:11px;                         --lh-label:1.4;      --ls-label:.1em;       /* mono, uppercase; the floor: nothing smaller */
  --t-label-lg:13px;                                          --ls-label-lg:.08em;    /* mono, uppercase: CTAs, form heads, clocks */
  --t-stat:var(--t-title-xl);             --lh-stat:.85;       /* numbers, tabular */

  /* ---- space: one 4px scale ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(20px,4vw,60px);
  --section-pad:clamp(64px,7.8vw,150px);     /* above and below every section: 150px at 1920, never under 64px */
  --nav-clear:calc(20px + 6rem);             /* where content starts under the fixed nav, in every pinned section */
  --head-gap:clamp(48px,8vh,96px);           /* section header → its content */
  --col-gap:clamp(24px,3vw,48px);
  --cols:12;                                 /* the page grid: every section header sits on it */
  --max:1920px;

  /* ---- shape ---- */
  --r-1:2px; --r-2:8px; --r-pill:99px;
  --dot-s:7px; --dot-m:11px; --dot-l:13px;
  --focus:2px solid var(--accent); --focus-offset:3px;

  /* ---- motion ---- */
  --dur-1:150ms;                             /* colour / opacity on hover */
  --dur-2:300ms;                             /* UI state: underlines, borders, pills, exits */
  --dur-3:700ms;                             /* content enters */
  --dur-4:1100ms;                            /* headline line reveals, image wipes */
  --ease-out:cubic-bezier(.16,1,.3,1);       /* every enter (GSAP: expo.out) */
  --ease-in:cubic-bezier(.7,0,.84,0);        /* exits (GSAP: power3.in) */
  --ease-move:cubic-bezier(.65,0,.35,1);     /* positional moves, scroll-to (GSAP: power2.inOut) */
  --stagger-line:100ms; --stagger-item:60ms; --stagger-char:30ms;
  --reveal-y:24px; --reveal-blur:8px;        /* the one blur-rise recipe */

  /* ---- aliases (older names, kept so nothing breaks; prefer the role names above) ---- */
  --ink-muted:var(--text-2); --ink-faint:var(--line-1);
  --t-display-2:var(--t-title-xl); --lh-display-2:var(--lh-title-xl); --ls-display-2:var(--ls-title-xl);
  --t-h1:var(--t-title); --t-h2:var(--t-heading); --lh-h:var(--lh-title); --ls-h:var(--ls-title);
  --w-bold:var(--w-medium);
  --dur-fast:var(--dur-2); --dur:var(--dur-3); --dur-slow:var(--dur-4);
}

/* type styles: the roles as classes */
.t-display  {font-family:var(--f-sans);font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--w-medium);text-transform:uppercase}
.t-title-xl {font-family:var(--f-sans);font-size:var(--t-title-xl);line-height:var(--lh-title-xl);letter-spacing:var(--ls-title-xl);font-weight:var(--w-medium)}
.t-statement{font-family:var(--f-sans);font-size:var(--t-statement);line-height:var(--lh-statement);letter-spacing:var(--ls-statement);font-weight:var(--w-medium)}
.t-title    {font-family:var(--f-sans);font-size:var(--t-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:var(--w-medium)}
.t-heading  {font-family:var(--f-sans);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--w-medium)}
.t-body-lg  {font-family:var(--f-sans);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);letter-spacing:var(--ls-body-lg);font-weight:var(--w-medium)}
.t-body     {font-family:var(--f-sans);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:0;font-weight:var(--w-regular)}
.t-small    {font-family:var(--f-sans);font-size:var(--t-small);line-height:var(--lh-small);letter-spacing:0;font-weight:var(--w-regular)}
.t-label    {font-family:var(--f-mono);font-size:var(--t-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--w-medium);text-transform:uppercase}
.t-label-lg {font-family:var(--f-mono);font-size:var(--t-label-lg);line-height:var(--lh-label);letter-spacing:var(--ls-label-lg);font-weight:var(--w-medium);text-transform:uppercase}
/* the serif is a modifier, never a size: accent phrases, eyebrows and quote marks take the size of what they sit in */
.serif      {font-family:var(--f-serif);font-style:italic;font-weight:var(--w-regular)}
/* compat: older class names */
.t-display-2{font-family:var(--f-sans);font-size:var(--t-title-xl);line-height:var(--lh-title-xl);letter-spacing:var(--ls-title-xl);font-weight:var(--w-medium)}
.t-h1{font-family:var(--f-sans);font-size:var(--t-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:var(--w-medium)}
.t-h2{font-family:var(--f-sans);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--w-medium)}
.t-stat{font-family:var(--f-serif);font-style:italic;font-size:var(--t-stat);line-height:1.1;font-weight:var(--w-regular)}