/* ============================================================================
   tokens.css — the ONLY file in this project that may contain a literal colour,
   font name, size, spacing or gradient value.
   Re-skinning the site for another book should require editing this file and
   site.config.js, and nothing else.
   ========================================================================== */

:root {
  /* ---------- palette ---------- */
  --bg:            #05080c;
  --bg-alt:        #080d13;
  --bg-panel:      #0b1017;
  --bg-card:       #0d151f;
  --ink:           #f2ece2;
  --accent:        #e0872f;
  --accent-bright: #f2b06a;
  --muted:         #5f6f7e;

  /* ---------- ink ladder (text hierarchy) ---------- */
  --ink-100: rgba(242,236,226,1);
  --ink-80:  rgba(242,236,226,.8);
  --ink-72:  rgba(242,236,226,.72);
  --ink-62:  rgba(242,236,226,.62);
  --ink-55:  rgba(242,236,226,.55);
  --ink-45:  rgba(242,236,226,.45);
  --ink-40:  rgba(242,236,226,.4);
  --ink-34:  rgba(242,236,226,.34);

  /* ---------- scrim ladder ---------- */
  --scrim-88: rgba(5,8,12,.88);
  --scrim-72: rgba(5,8,12,.72);
  --scrim-60: rgba(5,8,12,.6);
  --scrim-34: rgba(5,8,12,.34);
  --scrim-00: rgba(5,8,12,0);

  /* ---------- hairlines & borders ---------- */
  --line-24: rgba(242,236,226,.24);
  --line-18: rgba(242,236,226,.18);
  --line-14: rgba(242,236,226,.14);
  --line-12: rgba(242,236,226,.12);
  --line-10: rgba(242,236,226,.1);
  --accent-line: rgba(224,135,47,.55);
  --accent-wash: rgba(224,135,47,.08);

  /* ---------- gradient recipes ---------- */
  --wash-base:     linear-gradient(180deg, rgba(5,8,12,.62) 0%, rgba(5,8,12,.18) 38%,
                                   rgba(5,8,12,.66) 84%, var(--bg) 100%);
  --wash-vignette: radial-gradient(120% 80% at 50% 40%, rgba(5,8,12,0) 34%, rgba(5,8,12,.5) 100%);
  --wash-stage:    linear-gradient(100deg, rgba(5,8,12,.62) 0%, rgba(5,8,12,.3) 34%,
                                   rgba(5,8,12,0) 66%);
  --wash-beat:     linear-gradient(96deg, rgba(5,8,12,.88) 0%, rgba(5,8,12,.6) 38%,
                                   rgba(5,8,12,0) 74%);
  --wash-rail:     linear-gradient(90deg, rgba(5,8,12,.72) 0%, rgba(5,8,12,.34) 55%,
                                   rgba(5,8,12,0) 100%);
  --wash-featured: linear-gradient(180deg, rgba(224,135,47,.09), rgba(5,8,12,.75) 42%);
  --glow-section:  radial-gradient(90% 60% at 20% 0%, rgba(224,135,47,.09), rgba(5,8,12,0) 70%);
  --wash-chrome:   linear-gradient(180deg, rgba(5,8,12,.9), rgba(5,8,12,0));

  /* ---------- shadows ---------- */
  --text-shadow:  0 2px 14px rgba(5,8,12,.85);
  --cover-shadow: 0 40px 90px rgba(0,0,0,.7);

  /* ---------- typefaces ---------- */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    Barlow, system-ui, sans-serif;
  --font-prose:   Spectral, Georgia, serif;

  /* ---------- type scale (fluid; display face) ---------- */
  --fs-hero:      clamp(52px, min(11.5vw, 19vh), 178px);
  --fs-beat-h:    clamp(30px, 4.6vw, 70px);
  --fs-beat-h-sm: clamp(28px, 4.1vw, 60px);
  --fs-section-h: clamp(30px, 4.2vw, 62px);
  --fs-finale-h:  clamp(36px, 6vw, 88px);
  --fs-statement: clamp(19px, 2.1vw, 28px);
  --fs-price:     clamp(44px, 5.4vw, 76px);
  --fs-quote:     clamp(17px, 1.6vw, 21px);

  /* ---------- type scale (fixed; body face) ---------- */
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-prose:   18.5px;
  --fs-label:   12px;
  --fs-micro:   11px;

  /* ---------- leading ---------- */
  --lh-display: 1;
  --lh-hero: .86;
  --lh-statement: 1.2;
  --lh-body: 1.8;
  --lh-body-loose: 1.85;
  --lh-prose: 1.9;

  /* ---------- tracking (all text <=16px uses --ls-label or less) ---------- */
  --ls-hero:    .06em;
  --ls-eyebrow: .24em;
  --ls-label:   .1em;
  --ls-heading: .01em;
  --ls-wordmark: .1em;

  /* ---------- layout ---------- */
  --gutter:        244px;
  --gutter-mobile: 20px;
  --edge:          34px;
  --rail-w:        238px;
  --rail-display:  block;
  --sticky-cta-h:  76px;

  /* ---------- measures ---------- */
  --measure-heading: 19ch;
  --measure-body:    46ch;
  --measure-prose:   60ch;

  /* ---------- section rhythm ---------- */
  --pad-section:   clamp(70px, 8vw, 120px);
  --pad-section-l: clamp(80px, 10vw, 150px);
  --pad-section-s: clamp(60px, 7vw, 100px);

  /* ---------- flight stage ---------- */
  --stage-controls-gap: 10px;
  --stage-copy-pad:     clamp(22px, 4vh, 54px);
  --hit-min:            38px;
  --flight-control-size: 42px;
  --flight-progress-w:  120px;
  --flight-progress-w-mobile: 48px;
  --flight-progress-w-short: 20px;
  --flight-progress-h:  1px;
  --flight-progress-gap: 12px;
  --flight-progress-bottom: 38px;
  --flight-mobile-top:  66px;
  --rail-gap:           18px;
  --rail-link-gap:      12px;
  --rail-tick-w:        14px;
  --rail-tick-w-active: 34px;
  --rail-tick-h:        1px;
  --rail-transition:    .5s ease;
  --fs-short-body:      14px;
  --lh-short-body:      1.55;
  --progress-h:         2px;
  --progress-gap:       18px;
}

@media (max-width: 900px) {
  :root {
    --gutter: var(--gutter-mobile);
    --edge: 20px;
    --rail-display: none;
    --fs-body: 16px;
  }
}

/* Short viewports: the flight stage is pinned, so copy that overflows is lost
   content rather than a scrollbar. Compact rather than clip. */
@media (max-height: 700px) {
  :root {
    --fs-beat-h: clamp(26px, 3.4vw, 40px);
    --fs-statement: clamp(15px, 1.5vw, 18px);
    --stage-copy-pad: clamp(14px, 2vh, 26px);
  }
}

@media (max-height: 430px) {
  :root {
    --sticky-cta-h: 56px;
    --fs-hero: 40px;
    --fs-statement: 14px;
    --fs-short-body: 12px;
    --lh-short-body: 1.4;
    --stage-copy-pad: 10px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* MUST be `clip`, never `hidden`: `overflow-x: hidden` computes overflow-y to
     `auto`, which makes this element a scroll container and silently breaks
     `position: sticky` on the flight stage. */
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
img, video { display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}