/* ============================================================================
   POST 809 — THE TOKEN SYSTEM  (design-precision.md)
   Built from the ceremonial-gold palette read off Gen. Powell's portrait.
   Nothing on this site is hand-placed; every value traces to a token here.
   Order: fonts -> color -> space -> type -> grid -> radius -> shadow -> motion
          -> reset/base -> the living field -> utilities.
   ========================================================================== */

/* --- The two families, self-hosted (font law; CSP font-src 'self') ---------- */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-900.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/hanken-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/hanken-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/hanken-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/assets/fonts/hanken-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* --- COLOR: one dominant field, one scarce gold accent (60/30/10) ---------
     Neutrals are built FROM the olive-black hue (never flat gray), sampled from
     the portrait: field #010102/#272825/#43483f, gold #ca9b74/#8a6850, ivory #d7d2b8. */
  --void:#050605;                 /* the deepest field, vignette edges (portrait #010102) */
  --surface:#0b0d0b;              /* the dominant field the whole site sits on */
  --surface-raised:#14171380;     /* raised panel over the field (translucent olive-black) */
  --surface-raised-solid:#161a15; /* solid raised (menus, cards when earned) */
  --surface-high:#20241d;         /* highest surface (modals, the one floating panel) */
  --ink:#ece7d6;                  /* ivory type on the field (14:1 on surface) */
  --ink-muted:#a8a594;            /* secondary copy (7.9:1) */
  --ink-dim:#83806f;              /* meta/captions only, large or non-essential (4.6:1) */
  --gold:#c7a24c;                 /* THE accent: the one focal action, one meaning site-wide */
  --gold-bright:#e4c36b;          /* hover / catch-light */
  --gold-deep:#8a6850;            /* bronze secondary: hairlines, the coin's shadow side */
  --accent:var(--gold);
  --accent-ink:#0a0a06;           /* dark ink on a gold surface (6.8:1) */
  --line:color-mix(in srgb, var(--ink) 12%, transparent);   /* the standard hairline */
  --line-gold:color-mix(in srgb, var(--gold) 34%, transparent);
  --focus:var(--gold);
  --danger:#d75151;               /* the safety-net glow (admin), never a base color */
  --danger-ink:#0a0a06;
  /* National tones — the flag, brought in as DEEP cinematic color (not bright primary).
     Woven into the ambient field + section bands + image grades so the site is never
     just black; the bright flag primaries stay reserved for the flag/ribbon motif. */
  --navy:#16213e;                 /* deep Old-Glory navy for section fields + glows */
  --navy-deep:#0b1122;            /* the darkest navy band */
  --crimson:#8f2230;              /* deep flag crimson for accents + grades + embers */
  --crimson-deep:#5e161f;
  --flag-red:#b22234;             /* the bright primaries: flag/ribbon motif only */
  --flag-blue:#3c3b6e;
  --crisis:#e4c36b;               /* the crisis line reads as care, in gold, always reachable */

  /* --- SPACE: one 4-based ramp, verbatim (nothing between, ever) ------------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --space-11:160px; --space-12:224px;
  --section-y:clamp(4rem,3rem + 5vw,9rem);   /* ONE section rhythm, every major band */

  /* --- TYPE: one ratio (1.25), generated; reference tokens, never raw rem ---- */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-text:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ms-0:1rem; --ms-1:1.25rem; --ms-2:1.563rem; --ms-3:1.953rem; --ms-4:2.441rem;
  --ms-5:3.052rem; --ms-6:3.815rem; --ms-7:4.768rem;
  --ms-dn1:0.8rem; --ms-dn2:0.64rem;
  /* Display clamps (poster luxury; the 3x+ jump to body carried by Fraunces 900) */
  --display:clamp(2.9rem,1.6rem + 5.6vw,5.6rem);
  --display-sm:clamp(2.3rem,1.5rem + 3.4vw,3.815rem);
  --measure:64ch;

  /* --- GRID: declared first; ONE shell, ONE measure ------------------------- */
  --edge:clamp(1.15rem,0.7rem + 1.3vw,1.75rem);
  --gutter:clamp(1.25rem,0.8rem + 2vw,2.5rem);
  --shell:min(100% - 2*var(--edge), 74rem);
  --shell-narrow:min(100% - 2*var(--edge), 54rem);
  --shell-wide:min(100% - 2*var(--edge), 84rem);

  /* --- RADIUS: the SHARP house lane (ceremonial precision, engraved) --------- */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --r-full:50%;

  /* --- SHADOW: one light source (down, +Y), ink-tinted, 4 rungs ------------- */
  --e1:0 1px 2px color-mix(in srgb,var(--void) 55%,transparent), 0 1px 1px color-mix(in srgb,var(--void) 40%,transparent);
  --e2:0 1px 2px color-mix(in srgb,var(--void) 55%,transparent), 0 6px 14px color-mix(in srgb,var(--void) 45%,transparent);
  --e3:0 1px 2px color-mix(in srgb,var(--void) 60%,transparent), 0 14px 26px color-mix(in srgb,var(--void) 50%,transparent);
  --e4:0 1px 2px color-mix(in srgb,var(--void) 60%,transparent), 0 26px 48px color-mix(in srgb,var(--void) 55%,transparent);
  --glow-gold:0 0 0 1px var(--line-gold), 0 8px 40px color-mix(in srgb,var(--gold) 22%,transparent);

  /* --- MOTION: two eases, four durations, one reveal verb ("rise") ---------- */
  --ease-standard:cubic-bezier(0.22,0.61,0.36,1);
  --ease-expressive:cubic-bezier(0.16,1,0.30,1);
  --dur-micro:120ms; --dur-element:200ms; --dur-section:320ms; --dur-cinematic:600ms;
  --stagger:75ms;
}

/* --- RESET + BASE --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
:root{font-size:clamp(1rem,0.95rem + 0.28vw,1.1875rem)}  /* 16@360 -> 19@1440, one curve */
body{
  min-height:100svh;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-text);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  text-align:center;                 /* centered is the default; no left-aligned user text */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:normal;
  overflow-x:hidden;                 /* belt + suspenders; every track also gets min-width:0 */
}
/* No-flash guard: a Spanish-first visitor never sees English. Only the page whose
   chosen language differs from the authored English is briefly held (html.i18n-pending,
   set by the head boot snippet); English paints instantly. Failsafes in i18n.js
   guarantee the hold always releases. */
html.i18n-pending body{opacity:0}
html.i18n-ready body{opacity:1;transition:opacity .18s ease}

/* Type roles — one treatment each, identical everywhere -------------------- */
h1,h2,h3{font-family:var(--font-display);font-weight:900;line-height:1.03;
  letter-spacing:-0.02em;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--display-sm)}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.052rem)}
h3{font-size:var(--ms-3);font-weight:600;letter-spacing:-0.01em;line-height:1.12}
p{text-wrap:pretty}
.lead{font-size:var(--ms-1);line-height:1.5;color:var(--ink-muted);font-weight:400}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;height:auto;display:block}
:where(button,input,select,textarea){font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}

/* Tabular figures wherever numbers are compared (stats, dates, prices, tables) */
.tnum,time,.figure{font-variant-numeric:tabular-nums lining-nums}

/* --- THE LIVING FIELD: never flat; a deep ceremonial surface + grain ------- */
/* A slow, low gold aurora over the void, with a fixed grain plate. Calm by
   default: the field breathes, only the hero glows. All decorative, so it is
   pointer-events:none and honors reduced-motion. */
.field-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--surface)}
.field-bg::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 44% at 50% 0%,   color-mix(in srgb,var(--gold) 10%,transparent) 0%, transparent 60%),
    radial-gradient(75% 65% at 10% 100%, color-mix(in srgb,var(--navy) 55%,transparent) 0%, transparent 62%),
    radial-gradient(65% 55% at 94% 90%,  color-mix(in srgb,var(--crimson) 30%,transparent) 0%, transparent 60%),
    radial-gradient(70% 55% at 85% 6%,   color-mix(in srgb,var(--gold-deep) 10%,transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 120%, var(--navy-deep) 0%, transparent 58%);
  animation:fieldDrift 34s ease-in-out infinite alternate}
.field-bg::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes fieldDrift{from{transform:translate3d(-2%,-1%,0) scale(1.04)}to{transform:translate3d(2%,2%,0) scale(1.12)}}

/* --- UTILITIES ------------------------------------------------------------ */
.shell{width:var(--shell);margin-inline:auto;padding-inline:var(--edge)}
.shell-narrow{width:var(--shell-narrow);margin-inline:auto;padding-inline:var(--edge)}
.shell-wide{width:var(--shell-wide);margin-inline:auto;padding-inline:var(--edge)}
.measure{max-width:var(--measure);margin-inline:auto}
.section{padding-block:var(--section-y)}
.stack > * + *{margin-top:var(--space-5)}
.stack-tight > * + *{margin-top:var(--space-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.min0{min-width:0}                 /* the flex/grid text-overflow guard (engineering law) */

/* THE ONE REVEAL VERB — "rise": opacity 0->1 + translateY. Paired transform/opacity only.
   Hiding is gated behind html.js: if the motion script never loads, nothing is
   ever stuck invisible (a JS failure shows all content, un-animated). */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-cinematic) var(--ease-expressive),
             transform var(--dur-cinematic) var(--ease-expressive)}
.reveal.is-in{opacity:1;transform:none}
.js [data-stagger] > *{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-section) var(--ease-expressive),
             transform var(--dur-section) var(--ease-expressive)}
[data-stagger].is-in > *{opacity:1;transform:none}
[data-stagger].is-in > *:nth-child(2){transition-delay:75ms}
[data-stagger].is-in > *:nth-child(3){transition-delay:150ms}
[data-stagger].is-in > *:nth-child(4){transition-delay:225ms}
[data-stagger].is-in > *:nth-child(5){transition-delay:300ms}
[data-stagger].is-in > *:nth-child(6){transition-delay:375ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;
    transition-duration:0.001ms!important;scroll-behavior:auto!important}
  .field-bg::before{animation:none}
  .reveal,[data-stagger] > *{opacity:1;transform:none}
}