/* ── RUNWAY — Shared Design System ────────────────────────────────────────
   All pages import this file. Page-specific CSS builds on top of these
   tokens. Never define font-size in px without a corresponding token here.
   ──────────────────────────────────────────────────────────────────────── */

/* ── COLOR TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Backgrounds — paper scale */
  --bg:#F8F7F4; --bg2:#F0EDE8; --bg3:#E8E4DE; --bg4:#DDD9D2; --bg5:#D0CBC3;

  /* Surface — card / input fill (white in light, lifted in dark) */
  --surface:#FFFFFF;

  /* Text */
  --ink:#16181C; --ink-dim:#4A4A4A; --ink-muted:#6B6B6B; --ink-sub:#C0BCB6;

  /* Blue accent */
  --blue:#3F6FD0; --blue-bright:#5B8DEF; --blue-pale:#D6E4FB;
  /* --blue-text: darker blue for small text on light bg — meets WCAG AA 4.5:1 on --bg */
  --blue-text:#2E5BA8;

  /* Rules */
  --rule:#D8D4CE; --rule-light:#E4E0DA;

  /* Amber — traffic-light "within 5%" / caution signal */
  --amber:#D97706; --amber-bright:#B45309;   /* fill / text, both WCAG AA on Paper */

  /* Green — success signal (sig-ok) */
  --green-ok:#15803D; --green-ok-bg:#22c55e;

  /* Red — unchanged */
  --red:#B83A1A; --red-bright:#D45030;
}

/* ── DARK MODE TOKENS ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds — ink scale */
    --bg:#16181C; --bg2:#1E2024; --bg3:#252A2F; --bg4:#2C3238; --bg5:#353B42;

    /* Surface — lifted card/input fill on dark base */
    --surface:#1E2024;

    /* Text — paper scale */
    /* --ink-muted lifted #7A7875 → #8A8884 for WCAG AA: ~5.0:1 on --bg (was ~4.0:1, failing). */
    --ink:#F8F7F4; --ink-dim:#B8B4AE; --ink-muted:#8A8884; --ink-sub:#4A4845;

    /* Blue — pale flips to dark tint; blue-text must lighten for AA on the dark base.
       The light-mode #2E5BA8 is only ~2.7:1 on --bg here; #5B8DEF (= --blue-bright)
       gives ~5.5:1, fixing every blue-text label (eyebrows, nav active, odds Δ/chips). */
    --blue-pale:#0D1A3D;
    --blue-text:#5B8DEF;

    /* Amber — brighter in dark for contrast */
    --amber-bright:#F59E0B;

    /* Rules */
    --rule:#2A2E33; --rule-light:#353B42;
  }
}

/* ── FONT STACKS ──────────────────────────────────────────────────────── */
:root {
  --ui:'Figtree',sans-serif;            /* brand mark, nav, buttons, UI labels */
  --serif:'Crimson Pro',Georgia,serif;  /* editorial headlines + prose */
  --mono:'DM Mono',monospace;           /* data output only */
}

/* ── TYPE SCALE ───────────────────────────────────────────────────────── */
/* All font sizes defined here. Pages use these vars — no raw px values.  */
:root {
  /* Display */
  --fs-hero: clamp(40px, 6vw, 50px);   /* h1 hero headlines              */
  --fs-h2:   clamp(28px, 3vw, 36px); /* section headings               */
  --fs-h3:   22px;                      /* sub-section headings           */

  /* Prose */
  --fs-lede:    20px; /* hero subhead / intro paragraph                   */
  --fs-body:    22px; /* main prose (default body size)                   */
  --fs-body-sm: 20px; /* secondary prose, card body text                  */
  --fs-pull:    clamp(22px, 3vw, 26px); /* pull quotes across essay pages  */

  /* Mono — UI chrome */
  --fs-mono-lg: 15px; /* choice titles, large mono labels                 */
  --fs-mono-md: 13px; /* nav, eyebrows, section numbers                   */
  --fs-mono-sm: 12px; /* hints, footnotes, muted labels                   */
  --fs-mono-xs: 11px; /* brand footer, tiny admin text                    */
}

/* ── SPACING TOKENS ───────────────────────────────────────────────────── */
:root {
  --px: 20px;  /* horizontal page padding (overridden at desktop breakpoint) */
  --gap: 16px; /* standard gap between elements                              */
}
@media (min-width: 900px) {
  :root {
    --px: 40px;
    --fs-h3:      26px;   /* desktop h3 */
    --fs-lede:    24px;   /* essays: editorial lede */
    --fs-body:    20px;   /* desktop: tighter for reading density */
    --fs-body-sm: 18px;   /* desktop: body(20px) - 2px */
    --fs-mono-lg: 15px;
    --fs-mono-md: 13px;
    --fs-mono-sm: 12px;
    --fs-mono-xs: 11px;
  }
}

/* ── GLOBAL RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── TOUCH INPUT ──────────────────────────────────────────────────────── */
/* Eliminates 300ms double-tap-to-zoom delay on interactive controls.
   Scoped to buttons + form controls only — <a> tap-zoom is left intact. */
button,
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── SHARED HEADER ────────────────────────────────────────────────────── */
.hdr {
  background: rgba(248,247,244,0.97);
  border-bottom: 1px solid var(--rule);
  padding: 14px var(--px);
  display: flex; align-items: center; justify-content: space-between;
}
.hdr-brand {
  font-family: var(--ui);
  font-style: normal;
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
}
.hdr-nav { display: none; gap: 24px; align-items: center; }
.hdr-nav a {
  font-family: var(--ui);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hdr-nav a:hover { color: var(--ink); }
.hdr-nav a.active { color: var(--blue-text); }

/* ── BRAND WORDMARK & TOPIC MARK ──────────────────────────────────────── */
/* ● bead is always blue (#5B8DEF) in both modes; slashes are ink → paper. */
.wm-bead  { color: var(--blue-bright); }
.wm-slash { color: var(--ink); margin: 0 -0.08em; }  /* hug the bead — locked-glyph feel */

.wordmark {
  font-family: var(--ui);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.26em;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .wm-w   { letter-spacing: -0.02em; margin: 0 0.20em; display: inline-block; }
.wordmark .wm-bead { font-size: 1.08em; }

/* Larger hero brand moment */
.hero-mark {
  font-family: var(--ui);
  font-weight: 500;
  font-size: clamp(40px, 8vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 20px;
}
.hero-mark .wm-bead { font-size: 1.1em; }

/* Inline topic / new-section marker (eyebrow prefix) */
.topic-mark {
  font-family: var(--ui);
  letter-spacing: -0.02em;
  margin-right: 0.6em;
  font-size: 0.9em;
}
.topic-mark .tm-slash { color: var(--ink-muted); margin: 0 -0.05em; }
.topic-mark .tm-bead  { color: var(--blue-bright); }

@media (max-width: 599px) {
  .wordmark { letter-spacing: 0.16em; }
}

/* ── SHARED FOOTER ────────────────────────────────────────────────────── */
.page-footer {
  border-top: 1px solid var(--rule);
  padding: 28px var(--px);
  max-width: 1100px;
  margin: 0 auto;
}
.page-footer .footer-disc {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  line-height: 1.65;
}
.page-footer .footer-disc a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-footer .footer-brand {
  font-family: var(--mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 10px;
  display: block;
  color: var(--ink-muted);
}

/* ── SHARED HERO ──────────────────────────────────────────────────────── */
.page-hero { padding: 56px 0 48px; border-bottom: 1px solid var(--rule); }
.page-hero .hero-eye {
  font-family: var(--ui);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin-bottom: 20px;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 20px;
}
.page-hero h1 em { font-style: italic; color: var(--blue-bright); }
.page-hero .hero-lede {
  font-size: var(--fs-lede);
  color: var(--ink-dim);
  font-weight: 300;
  line-height: 1.6;
}

/* ── SHARED PROSE SECTIONS ────────────────────────────────────────────── */
.prose-section { padding: 48px 0; border-bottom: 1px solid var(--rule); }
.prose-section:last-of-type { border-bottom: none; }
.prose-section .section-num {
  font-family: var(--ui);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.prose-section h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.prose-section h2 em { font-style: italic; color: var(--blue-bright); }
.prose-section p {
  font-size: var(--fs-body);
  color: var(--ink-dim);
  line-height: 1.75;
  margin-bottom: 18px;
}
.prose-section p:last-child { margin-bottom: 0; }
.prose-section p strong { color: var(--ink); font-weight: 500; }

/* ── MOBILE OVERRIDES (max-width: 599px) ─────────────────────────────── */
@media (max-width: 599px) {
  .page-hero { padding: 36px 0 32px; }
  .prose-section { padding: 32px 0; }
  .page-footer { padding: 24px var(--px); }
}

/* ── HAMBURGER NAV (mobile) ───────────────────────────────────────────── */
.hdr-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.hdr-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-muted);
  transition: all 0.2s;
  border-radius: 1px;
}
.hdr-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--ink); }
.hdr-menu-btn.open span:nth-child(2) { opacity: 0; }
.hdr-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

/* Mobile nav drawer */
.hdr-nav-drawer {
  display: none;
  position: fixed;
  top: 49px; /* below sticky header */
  left: 0; right: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--rule);
  z-index: 49;
  padding: 12px 0;
  flex-direction: column;
}
.hdr-nav-drawer.open { display: flex; }
.hdr-nav-drawer a {
  font-family: var(--ui);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  transition: color 0.15s, background 0.15s;
}
.hdr-nav-drawer a:last-child { border-bottom: none; }
.hdr-nav-drawer a:hover { color: var(--ink); background: var(--bg3); }
.hdr-nav-drawer a.active { color: var(--blue-text); }

@media (min-width: 600px) {
  .hdr-menu-btn { display: none; }
  .hdr-nav-drawer { display: none !important; }
  .hdr-nav { display: flex; }
}

@media (prefers-color-scheme: dark) {
  .hdr { background: rgba(22,24,28,0.97); }
}