/* Doug · homepage tokens — Opus session, 2026-09-22
   Source: strategy/direction-2026-09-19.md §11 (colour LOCKED) · §12 (type WORKING)
           tools/taste-vault/docs/editorial-color-and-spacing.md Part 2 (spacing rules)
   Every other file in this folder points here. Change a value here, never inline. */

:root {
  /* ── Colour · A · Forest (locked 9/19) ───────────────────────────── */
  --forest:  #394630;   /* ground · dark. Photo-matched 9/22: the tree shadow behind Doug in IMG_1558 (was #2f3a30, hue 125°, bluer than his photos). Cole 13:23: "the photos matched forest does look better." */
  --bone:    #ebe7dc;   /* ground · light. Warm bone, never white. Alt: --paper */
  --paper:   #ebe9e2;   /* the lighter bone Cole can see as the alternative */
  --ink:     #22261f;   /* warm near-black: type on bone */
  --whisper: #c9c3b3;   /* testimonials only. Photo-matched 9/22: IMG_1558's bokeh (was #d5d6c8, 1.19:1 against bone, read as a shadow; now 1.41:1) */
  --accent:  #922d28;   /* PUNCTUATION ONLY: a link, one dot, a label. Never a field, never a button fill. */

  /* Hierarchy by grey, not by weight or colour (rule 6) */
  --ink-2:   #5b6056;   /* secondary text on bone (5.2:1) */
  --ink-2-on-whisper: #4a4e44;   /* secondary text on whisper (#5b6056 fails there at 3.7:1) */
  --ink-3:   #858a7e;   /* tertiary: captions, meta on bone */
  --rule:    rgba(34, 38, 31, .16);   /* a hairline, used for separation of list rows only */
  --bone-on-forest:   #ebe7dc;
  --bone-2-on-forest: #b8bdac;       /* secondary text on forest (5.2:1 on the new forest) */
  --rule-on-forest:   rgba(235, 231, 220, .18);

  /* ── Type · Host Grotesk + Albert Sans (working 9/19) ─────────────── */
  --face-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;  /* wordmark + headlines 30px and up */
  --face-text:    "Albert Sans", ui-sans-serif, system-ui, sans-serif;   /* everything read: body, quotes, numbers, labels, links */
  --w-display: 450;       /* Cole read 500 as heavy, 400 thin against photos. Alt 500. */
  --w-wordmark: 500;
  --w-body: 400;
  --w-link: 500;
  --w-label: 500;

  /* Type scale — SIX steps, one job each (audit 9/22: the page had drifted to twelve sizes).
     Host carries everything 28px and up; Albert carries everything read, never above 28.
     Caps live only in --t-label. Headlines are sentences in mixed case with a full stop. */
  --t-display: clamp(52px, 6.67vw, 96px);   /* 96 · "Stronger, for longer." — hero and close, nothing else */
  --t-h2:      clamp(34px, 3.34vw, 48px);   /* 48 · every section headline; the problem's question and answer; the plan numerals */
  --t-h3:      clamp(22px, 1.95vw, 28px);   /* 28 · door titles, step titles, the problem's truth line, quotes, the price */
  --t-lead:    clamp(18px, 1.39vw, 20px);   /* 20 · subhead and every paragraph */
  --t-small:   15px;                        /* 15 · nav, buttons, captions, facts, footer */
  --t-cap:     14px;                        /* 14 · the quote context lines ("Trains at 5 a.m."), shares the wordmark's size. Cole 14:30: 12 → 14 for the 55+ reader ("fifteen seems like a big jump") */
  --t-label:   12px;                        /* 12 · tracked caps .2em, and captions in sentence case (v2: was 11/600/.14em, read like a form field) */
  /* old names kept as aliases so nothing breaks */
  --t-hero: var(--t-display);
  --t-statement: var(--t-h3);
  --t-price: var(--t-h2);
  --t-body: var(--t-small);

  /* One line height and one tracking per step */
  --lh-display: 1;      --track-display: -.025em;
  --lh-h2: 1.1;         --track-h2: -.015em;
  --lh-h3: 1.25;        --track-h3: -.01em;
  --lh-quote: 1.4;      /* Albert at 28 */
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-tight: var(--lh-display); --lh-head: var(--lh-h2); --lh-state: var(--lh-quote);
  --track-label: .2em;
  --track-head: var(--track-h2);
  --measure: 34em;      /* reading measure for body */
  --measure-state: 22em;/* statements break into 3–4 lines */

  /* ── Space (rules 1 and 5) ────────────────────────────────────────── */
  /* One edge padding, used everywhere: every section's text and every image edge land on the same two lines. */
  --edge: clamp(28px, 8.34vw, 120px);         /* 120 at 1440 · 28 at 390 (Cole 9/22, twice: "bigger margins on the side"; was 48, then 80) */

  /* Small gaps are consistent: 18–30 (image → its label, label → heading, line → line) */
  --g-xs: 12px;
  --g-s:  18px;
  --g-m:  24px;
  --g-l:  30px;
  /* The Direct's middle step (paragraph → attribution 55–60) */
  --g-mid: clamp(40px, 4.2vw, 60px);
  /* Big gaps are big: 110–160 between a block and the next image / section */
  --g-b1: clamp(72px, 7.64vw, 110px);   /* 110 at 1440 */
  --g-b2: clamp(84px, 9.03vw, 130px);   /* 130 at 1440 */
  --g-b3: clamp(96px, 11.1vw, 160px);   /* 160 at 1440 */
  --pad:  clamp(112px, 15.28vw, 220px); /* 220 at 1440 · v2 section padding (Cole 13:26: "we just need more spacing, lets things breath") */

  /* Grid: 12 columns inside the edge */
  --cols: 12;
  --col-gap: clamp(16px, 2.08vw, 30px); /* 30 at 1440 */

  /* ── Shape ────────────────────────────────────────────────────────── */
  --radius-img: 6px;     /* photographs only, softened (Cole 9/22: "chill or soften their corners a little"). Still no boxes around text (refusal 5). */
  --radius-btn: 999px;

  /* ── Motion (only if Cole says; vocabulary from prompts/README) ───── */
  /* 2026-09-26 smoothing pass (DESIGN-GUIDE §3): shorter and closer, so an arriving element has settled within a
     third to a half of a screen of scrolling instead of two thirds. Was 800ms / 24px / photos 900ms / 120ms apart. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 1000ms;       /* text rises (9/26 pm, Cole: "slow down the animations a little bit"; was 700) */
  --dur-img: 1100ms;   /* photos settle (was 800) */
  --dur-fade: 800ms;   /* the mark, the signature, the note */
  --rise: 10px;        /* mostly a fade (Cole: "can just fade in pretty much"; was 16) */
  --settle: .98;
  --stagger: 220ms;    /* a headline, then its text block a beat later (was 100); at most 3 steps (JS caps it) */
}
@media (max-width: 760px) {
  :root {              /* the phone: one column, so something is always arriving; keep each arrival short and near */
    --dur: 900ms;
    --dur-img: 1000ms;
    --rise: 8px;
    --stagger: 200ms;
  }
}