/* ==========================================================================
   Tokens

   The site runs on the hero's palette, measured out of the mockup: a warm
   near-black ground with cream and bronze ink. Median luminance across that
   reference is 18/255 -- it is a genuinely dark, cinematic piece.

   Paper survives as a material rather than a background. The boarding passes
   and the photo tiles keep the cream stock sampled from the pass Fingken
   designed himself, so they read as real paper objects lying on a dark
   surface. That contrast is what gives scrolling somewhere to go.
   ========================================================================== */

/* Playfair Display, SIL OFL, fetched by tools/prepare-media.sh and served from
   this repo -- the published page makes no external request for it. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-600-italic.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* ---- measured from the hero mockup ----------------------------------- */
  --ground: #0f0f0f;    /* the page */
  --ground-2: #191816;  /* torn paper, mid */
  --ground-3: #24211c;  /* torn paper, lifted */
  --ground-4: #413730;  /* warm brown, card surfaces */
  --cream: #ebd9c3;     /* display type */
  --tan: #cfbba1;       /* body */
  --bronze: #a8814f;    /* the "Sagai" italic, bright form */
  --bronze-deep: #7b5a3a;
  --label-ink: #ba9d7c;
  --cue: #dec8ab;       /* scroll cue */

  /* Phase 1 stock, kept for the paper interludes */
  --paper: #e5e5db;
  --ink: #171d1c;
  --gold: #907858;

  /* Charge stays the one saturated colour on the site, so it always means the
     same thing: energy moving. 9.3:1 on the new ground. */
  --charge: #f2a416;
  --charge-soft: #ffcf72;

  /* ---- semantic --------------------------------------------------------- */
  --bg: var(--ground);
  --bg-raised: var(--ground-2);
  --bg-sunk: #0a0a0a;
  --fg: var(--cream);
  --fg-muted: var(--tan);
  --fg-faint: #96826c;
  --rule: rgba(235, 217, 195, 0.13);
  --rule-strong: rgba(235, 217, 195, 0.28);
  --accent: var(--bronze);
  --accent-fg: #c79a5e;
  --hand: #8a735a;      /* handwritten annotations sit back on purpose */
  --dot: rgba(235, 217, 195, 0.66);
  --scrim: rgba(0, 0, 0, 0.6);

  --glass: rgba(25, 24, 22, 0.66);
  --glass-edge: rgba(235, 217, 195, 0.12);
  --glass-blur: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.55), 0 32px 72px rgba(0, 0, 0, 0.6);

  /* ---- type -------------------------------------------------------------
     Playfair carries the display; the mockup's high-contrast didone is the
     whole character of the hero and Georgia does not stand in for it. The
     stack behind it degrades in order of how close each face gets. */
  --font-display: 'Playfair Display', 'Bodoni MT', Didot, 'Big Caslon',
    Constantia, Georgia, serif;
  --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo,
    Consolas, monospace;
  --font-hand: 'Ink Free', 'Segoe Script', 'Bradley Hand', 'Snell Roundhand',
    'Lucida Handwriting', cursive;

  /* Tracking is size-specific. Playfair is a display face -- it wants real
     negative tracking large, and none at all small. */
  --fs-display: clamp(3rem, 11vw, 9rem);
  --tr-display: -0.022em;
  --lh-display: 0.88;

  --fs-h1: clamp(2rem, 5.2vw, 3.6rem);
  --tr-h1: -0.018em;
  --lh-h1: 1.04;

  --fs-h2: clamp(1.45rem, 3vw, 2.2rem);
  --tr-h2: -0.012em;
  --lh-h2: 1.14;

  --fs-h3: clamp(1.1rem, 1.6vw, 1.3rem);
  --tr-h3: -0.006em;

  --fs-lead: clamp(1.05rem, 1rem + 0.5vw, 1.4rem);
  --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;
  --tr-label: 0.14em;

  /* ---- space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --page: 78rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --z-nav: 60;
  --z-reticle: 90;
  --z-overlay: 80;
  --z-spine: 40;
}

/* ---- paper interludes ---------------------------------------------------
   Applied to the boarding-pass deck and the photo tiles. Same mechanism as
   Phase 1's `.lights-out`, pointed the other way: the page is dark now, so
   these are where it goes light. */
.on-paper {
  color-scheme: light;
  --bg: #e8e4d8;
  --bg-raised: #f2efe5;
  --bg-sunk: #d8d3c3;
  --fg: var(--ink);
  --fg-muted: #4e5451;
  --fg-faint: #616763;
  --rule: rgba(23, 29, 28, 0.16);
  --rule-strong: rgba(23, 29, 28, 0.3);
  --accent: #7b5a3a;
  --accent-fg: #5f452c;
  --hand: #7b5a3a;
  --dot: rgba(23, 29, 28, 0.78);
  --glass: rgba(242, 239, 229, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(23, 29, 28, 0.4);
  --shadow-sm: 0 1px 2px rgba(23, 29, 28, 0.08), 0 2px 6px rgba(23, 29, 28, 0.05);
  --shadow-md: 0 2px 6px rgba(23, 29, 28, 0.1), 0 12px 28px rgba(23, 29, 28, 0.12);
  --shadow-lg: 0 4px 12px rgba(23, 29, 28, 0.12), 0 28px 64px rgba(23, 29, 28, 0.18);
  color: var(--fg);
}

/* ---- daylight edition ---------------------------------------------------
   The alternate, and strictly opt-in from the colophon. It is deliberately
   NOT wired to prefers-color-scheme: this site is a dark cinematic piece and
   most people run a light OS, so honouring that preference automatically
   would hand the majority a version of the design nobody asked for. The
   toggle is still there for anyone who wants it.

   The cover stays dark in both -- it is a photograph, and a photograph does
   not have a light mode. */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #ece9df;
  --bg-raised: #f4f2ea;
  --bg-sunk: #ded9cb;
  --fg: var(--ink);
  --fg-muted: #4e5451;
  --fg-faint: #616763;
  --rule: rgba(23, 29, 28, 0.14);
  --rule-strong: rgba(23, 29, 28, 0.28);
  --accent: #7b5a3a;
  --accent-fg: #5f452c;
  --hand: #7b5a3a;
  --dot: rgba(23, 29, 28, 0.78);
  --glass: rgba(244, 242, 234, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(23, 29, 28, 0.42);
  --shadow-sm: 0 1px 2px rgba(23, 29, 28, 0.07), 0 2px 6px rgba(23, 29, 28, 0.05);
  --shadow-md: 0 2px 6px rgba(23, 29, 28, 0.08), 0 12px 28px rgba(23, 29, 28, 0.1);
  --shadow-lg: 0 4px 12px rgba(23, 29, 28, 0.1), 0 28px 64px rgba(23, 29, 28, 0.16);
}

/* ---- preference overrides ---------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--bg-raised);
    --glass-blur: 0px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --fg-muted: var(--fg);
    --fg-faint: var(--fg);
    --hand: var(--fg);
    --rule: rgba(235, 217, 195, 0.4);
    --rule-strong: var(--fg);
    --glass: var(--bg-raised);
    --glass-blur: 0px;
  }
}

/* ---- variant cover ------------------------------------------------------
   Every run gets one. Same layout, alternate printing: the bronze goes red
   and the ground goes cold. */
:root[data-variant='on'] {
  --bronze: #c2564a;
  --bronze-deep: #8d3b32;
  --accent: #c2564a;
  --accent-fg: #d96f60;
  --charge: #ff5f4d;
  --charge-soft: #ffa08f;
  --label-ink: #c98b80;
  --hand: #9a6258;
  --ground: #0c0b10;
  --ground-2: #16131b;
  --ground-3: #201b26;
  --bg-sunk: #070609;
}

:root[data-variant='on'] .on-paper {
  --accent: #a8443a;
  --accent-fg: #8d3b32;
  --hand: #a8443a;
}