/* ==========================================================================
   tokens.css — the ONLY place for brand values (colours, fonts, spacing).
   main.css references these variables and never hard-codes colour values.
   Design v3 (2026-10-22, DECISIONS 79-80): light. Warm white ground #FAF8F4, charcoal type,
   champagne gold accent (DECISIONS 83, replaces bronze #B08D57): #C9A962 for hairlines and lines, a deepened gold of the
   same hue for small text, a mid gold for large italic emphasis. Contrast figures below are WCAG 2 on --bg / --bg-2.
   ========================================================================== */

/* Self-hosted variable fonts (SIL OFL 1.1 — licences in /assets/fonts/). No CDN. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond.d80df8ff5a.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Italic.6f2f5c3b1a.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/Jost.7726a5cd6f.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Ground (DECISIONS 80: B warm white) */
  --bg: #FAF8F4;
  --bg-2: #F2EEE6;
  --bg-3: #E9E4DA;

  /* Type */
  --ink: #1C1A16;                       /* 16.38:1 on --bg, 15.01:1 on --bg-2 */
  --ink-2: rgba(28, 26, 22, 0.78);      /*  8.23:1 / 7.80:1 */
  --ink-3: rgba(28, 26, 22, 0.66);      /*  5.44:1 / 5.25:1 */

  /* Lines */
  --line: rgba(28, 26, 22, 0.12);
  --line-strong: rgba(28, 26, 22, 0.34);

  /* Champagne gold (DECISIONS 83): hairlines, numerals, underlines, hover. Never a surface. One hue, four depths. */
  --gold: #C9A962;          /* lines: hairlines, underlines, hover grid, progress line, cursor (2.12:1, not used for text) */
  --gold-text: #7A5D28;     /* small gold text: 5.78:1 on --bg, 5.30:1 on --bg-2. Was #85662C (5.03); deepened so it stays >= 4.5 under the cursor halo (gold-fix-2026-10-22.md) */
  --gold-em: #A18038;       /* italic emphasis in headings (all >= 25px, large text): 3.50:1 / 3.21:1 */
  --gold-logo: #AF8B3C;     /* light-ground logo fill (src/assets/logo.svg, logo-vertical.svg, favicon.svg): 3.01:1 on --bg */
  /* cursor (motion.css section 6). Dot, DECISIONS 83/85: solid, translucent 28px champagne gold disc (alpha .45), on top.
     Halo, DECISIONS 85 (boss: copy the TDK proto-v6 halo, a53e0b0, in champagne gold): 820px, stops and alphas as TDK; under the content. */
  --cursor-dot: rgba(201, 169, 98, 0.45);
  --halo-size: 820px;
  --halo-fill: radial-gradient(circle, rgba(201, 169, 98, 0.22) 0%, rgba(201, 169, 98, 0.10) 28%, rgba(201, 169, 98, 0) 62%);
  --tag-ink: #C9A962;       /* small labels on the charcoal tag plate over photos (4.69:1 over a pure white highlight) */

  /* Overlays and fades (warm white = rgb 250, 248, 244 = --bg) */
  --hero-fade: linear-gradient(to bottom, rgba(250, 248, 244, 0) 0%, rgba(250, 248, 244, 0) 55%, rgba(250, 248, 244, 0.35) 78%, #FAF8F4 100%);
  /* <1024px: text runs full width, so a vertical whitening replaces --hero-fade */
  --hero-fade-narrow: linear-gradient(to bottom, rgba(250, 248, 244, 0.12) 0%, rgba(250, 248, 244, 0.22) 26%, rgba(250, 248, 244, 0.80) 38%, rgba(250, 248, 244, 0.92) 55%, #FAF8F4 100%);
  /* <1024px, anchored to the text block (.hero-text::before), not to the hero box: the eyebrow sits anywhere from 23% to 48%
     of the hero height across pages and phone sizes, so a %-stop alone cannot reach it. 0 at the top of .hero-text,
     .88 by 1.5rem above the eyebrow (the eyebrow is 8rem / 7rem / 5rem below that top), .94 under the title and lede. */
  --hero-fade-text: linear-gradient(to bottom, rgba(250, 248, 244, 0) 0, rgba(250, 248, 244, 0.88) 3.5rem, rgba(250, 248, 244, 0.94) 9rem, rgba(250, 248, 244, 0.94) 100%);
  /* >=1024px, behind the hero text block and above the line art (main.css .hero-text::before) */
  --hero-text-veil: rgba(250, 248, 244, 0.55);
  /* photo band (DECISIONS 80 2: whitened too, dark type) */
  --band-fade: linear-gradient(rgba(250, 248, 244, 0.82), rgba(250, 248, 244, 0.82));
  --header-fade: linear-gradient(to bottom, rgba(250, 248, 244, 0.92), rgba(250, 248, 244, 0));
  --bg-glass: rgba(250, 248, 244, 0.86);
  --bg-overlay: rgba(250, 248, 244, 0.97);   /* phone menu */
  --lb-backdrop: rgba(28, 26, 22, 0.94);     /* lightbox stays dark */
  --bg-tag: rgba(28, 26, 22, 0.84);         /* --tag-ink on it stays >= 4.69:1 even over a pure white highlight */
  --cue-line: linear-gradient(#85662C, rgba(133, 102, 44, 0));
  /* warm-white halo behind hero type (replaces the dark text-shadow of v2) */
  --hero-title-glow: 0 1px 2px rgba(250, 248, 244, 0.35), 0 0 28px rgba(250, 248, 244, 0.5);
  --hero-eyebrow-glow: 0 0 2px rgba(250, 248, 244, 0.95), 0 0 8px rgba(250, 248, 244, 0.9), 0 0 18px rgba(250, 248, 244, 0.75);
  /* hero titles sit on a whitened photo, not on --bg: the italic word takes one gold step deeper. Same relative
     luminance as the bronze it replaces (#8C6D3F), never lighter; glyph-pixel figures in review/gold-2026-10-22.md */
  --hero-gold-em: #8B6E30;
  /* hero eyebrow: --gold-text (#85662C) measured 4.18:1 over the gold line art behind it (home 1280), so the hero keeps
     the luminance of the bronze it replaced (#775A31): 5.99:1 on --bg, glyph-pixel worst in review/gold-2026-10-22.md */
  --hero-gold-text: #745C28;
  /* whitened photo band: the band sits on a photo, not on --bg, so its gold type is one step deeper (luminance of the
     bronze it replaces, #634B29 / #7E6136, never lighter). Worst case (a pure black pixel under the .82 white): >= 5.06:1 and 3.56:1 */
  --band-gold-text: #604C21;
  --band-gold-em: #7C622A;
  /* dark islands (lightbox): ivory type on charcoal */
  --ink-on-dark: #F1ECE3;
  --line-on-dark: rgba(241, 236, 227, 0.32);

  /* Typography */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Futura", "Segoe UI", system-ui, sans-serif;
  /* Page titles (inner-page heroes, contact, prose pages). rem-led like the home title (Codex review fix 2), so a
     larger browser text size enlarges them (x1.6 or more at a 32px default) instead of being held by the vw part.
     The viewport only picks the tier: px media queries below, so the tier does not move with text size.
     The vw part stays at or under 40% of the total at every width in its tier (that is what keeps the ratio >= 1.6).
     Default text size: 320 = 47.2px, 390 = 49.7px, 768 = 67.2px, 1024 = 80.5px, 1366 = 87.3px, >=1400 = 88px (5.5rem cap). */
  --fs-h1-page: calc(2.25rem + 3.5vw);
  --fs-h2: clamp(2.25rem, 1.6rem + 2.8vw, 4.25rem);
  --fs-h3: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
  --fs-statement: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.72rem;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(5rem, 12vw, 11rem);
  --max: 1440px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) { :root { --fs-h1-page: calc(3rem + 2.5vw); } }
@media (min-width: 1024px) { :root { --fs-h1-page: min(3.75rem + 2vw, 5.5rem); } }

/* Desktop (>=1024px) side whitening, stacked on --hero-fade. Declared on .hero (not :root) because each stop follows the
   text block: --hero-text-edge (main.css) is the right edge of the title / lede, in rem + vw, so it grows with the
   browser's text size. Each stop is max(the v2 percentage, edge + offset): at the default 16px text size the edge sits
   inside the percentage stops (shift <= 1% of the width at 1280-1440), at 200% text the whitening moves out with the type
   (Codex review of 55de967). */
.hero {
  --hero-fade-side: linear-gradient(90deg,
    rgba(250, 248, 244, 0.94) 0%,
    rgba(250, 248, 244, 0.90) max(30%, var(--hero-text-edge, 0px) - 12rem),
    rgba(250, 248, 244, 0.72) max(44%, var(--hero-text-edge, 0px) + 1rem),
    rgba(250, 248, 244, 0.40) max(56%, var(--hero-text-edge, 0px) + 12rem),
    rgba(250, 248, 244, 0.12) max(68%, var(--hero-text-edge, 0px) + 22rem),
    rgba(250, 248, 244, 0) max(78%, var(--hero-text-edge, 0px) + 31rem));
}