/* ==========================================================================
   PDV — one-page reference site
   Order: tokens · reset · layout · diagrams · components · sections · responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* light surfaces */
  --paper:      #eaf1f8;
  --paper-alt:  #dde8f2;
  --ink:        #14171a;
  --ink-soft:   #3c4045;
  --ink-muted:  #5b5f65;
  --rule:       #cddce9;

  /* dark surfaces */
  --night:      #102844;
  --night-2:    #17334f;
  --night-rule: #23405e;  /* hairlines only — far too dark for text */
  --night-dim:  #8b9199;  /* dim text on dark — 4.7:1 on --night */
  --on-night:      #f2f1ec;
  --on-night-soft: #b4b8bd;

  /* accent — two values, because one gold cannot pass contrast on both grounds */
  --gold:      #c9a24a;  /* on dark  — 7.9:1 on --night */
  --gold-ink:  #7a5e1a;  /* on light — 5.9:1 on --paper, 5.4:1 on --paper-alt */

  /* type — Space Grotesk carries structure, Crimson Pro carries reading,
     JetBrains Mono carries every piece of machine metadata (DOI, version).
     Crimson Pro sets small for its nominal size, so the body scale runs a step
     larger than it would for a grotesque. */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Crimson Pro", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-hero:  clamp(2.75rem, 6vw, 5rem);
  --t-defn:  clamp(1.5rem, 2.6vw, 2.15rem);
  --t-h2:    clamp(1.6rem, 3vw, 2.4rem);
  --t-h3:    1.0625rem;
  --t-body:  clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --t-small: 1.0625rem;
  --t-meta:  0.75rem;

  /* space */
  --gutter:  28px;
  --measure: 66ch;
  --section-pad: clamp(56px, 5.5vw, 88px);
  --radius: 4px;

  /* Anchor landing. A jump scrolls the section's *box* to the top, but the box
     opens with --section-pad of empty padding, and the sticky header covers the
     first --header-h of it. Offsetting by (header + gap - pad) makes the section
     *content* land a constant --anchor-gap below the header instead. */
  --header-h:   68px;
  --anchor-gap: 44px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--anchor-gap) - var(--section-pad));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }
blockquote, figure, dl, dd { margin: 0; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-size: var(--t-small);
}
.skip-link:focus { left: 0; }

.visually-hidden-heading {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* scroll reveal — the only motion on the page */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section padding lives here, once. Vary it with a modifier class, never by
   targeting an element selector. */
.section { padding-block: var(--section-pad); }

.section-band { background: var(--paper-alt); }

.section-dark {
  background: var(--night);
  color: var(--on-night);
}
.section-dark h2 { color: var(--on-night); }
.section-dark a  { color: var(--gold); }

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose p + p { margin-top: 1.2em; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. DIAGRAMS (shared SVG classes)
   -------------------------------------------------------------------------- */

/* Diagram strokes carry meaning, so they answer to WCAG 1.4.11 (3:1), not to
   decoration. Values below are the *composited* result of colour × opacity —
   verified, not eyeballed. */
.d-scaffold circle { fill: none; stroke: #5c6269; stroke-width: 1; }  /* 3.07:1 on night */
.d-ring-dashed {
  fill: none; stroke: var(--gold); stroke-width: 1;
  stroke-dasharray: 3 7; opacity: .8;
}
.d-spokes line { stroke: var(--gold); stroke-width: 1; opacity: .55; }
.d-ticks  line { stroke: var(--gold); stroke-width: 1.5; }
.d-core-halo { fill: rgba(201,162,74,.10); stroke: none; }
.d-core      { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.d-core-dot  { fill: var(--gold); }

.d-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-anchor: middle;
  fill: var(--on-night-soft);
}
.d-label-core { fill: var(--gold); font-size: 12px; }
.d-label-dim  { fill: var(--night-dim); font-size: 11px; }

/* Fig. 2 — supplied photo/graphic, framed to sit inside the light-ground layout */
.shift-photo {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */

/* Sticky, so it sits in normal flow above the hero — it needs an opaque ground
   of its own, otherwise the page background shows through and reads grey. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--night);
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
.site-header.is-scrolled {
  background: rgba(16,40,68,.92);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255,255,255,.09);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px;
}

.header-start { display: flex; align-items: center; gap: 14px; }

.wordmark { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }

.wordmark-abbr {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem; letter-spacing: .04em;
  color: var(--on-night);
}
.wordmark-full {
  font-family: var(--font-mono);
  font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-night-soft);
  padding-left: 14px; border-left: 1px solid var(--night-rule);
}

.site-nav { display: flex; align-items: center; gap: 32px; font-size: 0.9375rem; }

.site-nav a {
  color: var(--on-night-soft); text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.site-nav a:hover { color: var(--on-night); border-bottom-color: var(--gold); }
.site-nav a.is-active { color: var(--on-night); border-bottom-color: var(--gold); }

.nav-cta {
  display: inline-flex; align-items: center;
  min-height: 44px;                     /* WCAG 2.5.8 target size */
  border: 1px solid var(--night-rule) !important;
  border-radius: var(--radius);
  padding: 0 18px !important;
  color: var(--gold) !important;
}
.nav-cta:hover { background: var(--gold); color: var(--night) !important; border-color: var(--gold) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;   /* WCAG 2.5.8 target size, matches .nav-cta */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--on-night);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Above the mobile breakpoint this wrapper is invisible to layout, so its
   <a> children behave exactly as if they were direct .site-nav children —
   desktop/tablet rendering is unaffected by its existence. */
.nav-links { display: contents; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  padding-block: clamp(52px, 5vw, 80px) clamp(64px, 7vw, 104px);
}

.hero-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(58% 46% at 72% 30%, rgba(201,162,74,.16), transparent 70%),
    radial-gradient(46% 40% at 12% 88%, rgba(201,162,74,.07), transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-muted);
  margin-bottom: 26px;
}
.eyebrow-gold { color: var(--gold); }

h1 {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--on-night);
}
.h1-abbr { color: var(--gold); font-weight: 400; }

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--gold);
  max-width: 30ch;
  margin-top: 28px;
  margin-bottom: 1em;
}

.hero-body {
  color: var(--on-night-soft);
  max-width: 54ch;
  margin-bottom: 40px;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--on-night-soft);
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--night-rule);
}
.hero-meta-label { color: var(--night-dim); text-transform: uppercase; letter-spacing: .14em; }
.hero-meta-sep { color: var(--night-dim); margin-inline: 8px; }
.hero-meta a { color: var(--gold); }

.hero-figure { position: relative; }
.diagram-radial { width: 100%; height: auto; max-width: 560px; margin-inline: auto; }

.hero-figure figcaption,
.shift-figure figcaption,
.spectrum figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--ink-muted);
  margin-top: 18px;
  text-align: center;
}
.hero-figure figcaption { color: var(--night-dim); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary  { background: var(--gold); border-color: var(--gold); color: var(--night); }
.btn-primary:hover { background: #dcb862; border-color: #dcb862; }

.btn-ghost    { border-color: var(--night-rule); color: var(--on-night); }
.btn-ghost:hover { border-color: var(--on-night-soft); background: rgba(255,255,255,.04); }

.btn-outline  { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   8. SECTION HEADERS
   -------------------------------------------------------------------------- */

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-muted);
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.section-eyebrow .num { color: var(--gold-ink); font-weight: 500; }
.section-eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 220px;
}
.section-dark .section-eyebrow { color: var(--on-night-soft); }
.section-dark .section-eyebrow .num { color: var(--gold); }
.section-dark .section-eyebrow::after { background: var(--night-rule); }

.section h2 { font-size: var(--t-h2); max-width: 22ch; margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   9. DEFINITION
   -------------------------------------------------------------------------- */

.definition-card {
  position: relative;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-ink);
  border-radius: var(--radius);
  padding: clamp(36px, 5vw, 64px);
  max-width: 900px;
}

.definition-mark {
  font-family: var(--font-display);
  font-size: 5rem; line-height: 1;
  color: var(--gold-ink); opacity: .28;
  margin: 0 0 -18px;
}

.definition p {
  font-family: var(--font-body);
  font-size: var(--t-defn);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  max-width: 42ch;
}

.source-line {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: 1.9;
  color: var(--ink-muted);
  max-width: 62ch;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.source-label {
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-ink); margin-right: 10px;
}
.source-line cite { font-style: normal; }

/* --------------------------------------------------------------------------
   10. SPECTRUM + CARDS
   -------------------------------------------------------------------------- */

.spectrum { margin: clamp(48px, 6vw, 80px) 0; max-width: 900px; }

.spectrum-bar {
  position: relative; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rule) 0%, #cbbf9a 55%, var(--gold-ink) 100%);
}
.spectrum-tick {
  position: absolute; top: 50%; left: var(--at);
  width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper); border: 2px solid var(--gold-ink);
}

.spectrum figcaption { text-align: left; }   /* the bar is full-width; a centred caption fights the left rhythm */

.spectrum-labels {
  display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-muted);
  margin-top: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.65;
  transition: border-color 200ms ease, transform 200ms ease;
}
.card:hover { border-color: #cfc9b4; transform: translateY(-2px); }

.card-index {
  font-family: var(--font-mono);
  font-size: var(--t-meta); letter-spacing: .16em;
  color: var(--gold-ink);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   11. RELATION GRID (dark)
   -------------------------------------------------------------------------- */

.relation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--night-rule);
  border: 1px solid var(--night-rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.relation {
  background: var(--night);
  padding: 36px 28px 40px;
  transition: background 220ms ease;
}
.relation:hover { background: var(--night-2); }

.relation-abbr {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--night-dim);
  margin-bottom: 20px;
  transition: color 220ms ease;
}
.relation:hover .relation-abbr { color: var(--on-night-soft); }

.relation h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--on-night);
  margin-bottom: 12px;
}

.relation-text {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-night-soft);
}

.relation-current { background: var(--night-2); }
.relation-current .relation-abbr { color: var(--gold); }
.relation-current h3 { color: var(--gold); }

.relation-note {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--on-night-soft);
  max-width: 62ch;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   12. PAPER
   -------------------------------------------------------------------------- */

.paper-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.paper-cover { position: relative; }
.paper-cover img { display: none; }
.paper-cover.has-img img { display: block; }
.paper-cover.has-img .cover-fallback { display: none; }

.paper-cover img,
.cover-fallback {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  object-fit: cover;
}

.cover-fallback {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--night);
  padding: 30px 26px;
}
.cover-kicker {
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--gold);
}
.cover-title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-night);
  margin-top: auto;
}
.cover-abbr {
  font-family: var(--font-display);
  font-size: 3.25rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold);
  margin: 10px 0 18px;
}
.cover-foot {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em;
  color: var(--on-night-soft);
  padding-top: 14px;
  border-top: 1px solid var(--night-rule);
}

.paper-body h2 { max-width: 20ch; margin-bottom: 32px; }

.meta-list { border-top: 1px solid var(--rule); margin-bottom: 36px; max-width: 620px; }

.meta-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px; padding-block: 15px;
  border-bottom: 1px solid var(--rule);
}
.meta-row dt {
  font-family: var(--font-mono);
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-muted); padding-top: 3px;
}
.meta-row dd { font-size: var(--t-small); color: var(--ink); }

/* --------------------------------------------------------------------------
   13. ABOUT
   -------------------------------------------------------------------------- */

.about-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.portrait { position: relative; }

.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  object-fit: cover;
}

.about-body h2 { max-width: none; margin-bottom: 8px; }

.about-role {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-ink);
  margin-bottom: 26px;
}

.inline-links {
  font-size: var(--t-small);
  margin-top: 1.6em;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.inline-links .sep { color: var(--rule); margin-inline: 12px; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq-list { max-width: 780px; display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding-inline: clamp(18px, 3vw, 28px);
}

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 22px;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-ink);
  transition: transform 200ms ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-ink); }

/* Open/close is animated in main.js (WAAPI, animates height on the <details>
   itself) — Chrome's internal content-visibility handling on details content
   can't be beaten with a plain CSS `display` override, so this stays plain. */
.faq-answer { padding-bottom: 24px; }
.faq-answer p { color: var(--ink-soft); font-size: var(--t-small); max-width: 62ch; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--night);
  color: var(--on-night-soft);
  padding-block: 64px;
}

.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 28px;
}

.footer-term {
  font-family: var(--font-display);
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.0625rem;
  color: var(--on-night);
  margin: 0 0 6px;
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta); letter-spacing: .08em;
  color: var(--night-dim);
  margin: 0;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.9375rem; }
.footer-links a {
  display: inline-flex; align-items: center;
  min-height: 44px;                     /* these are nav targets, not inline prose links */
  color: var(--on-night-soft); text-decoration: none;
}
.footer-links a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-figure { max-width: 460px; }
  .split { grid-template-columns: 1fr; }
  .relation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
  .paper-layout,
  .about-layout { grid-template-columns: 1fr; }
  .paper-cover { max-width: 220px; }
  .portrait { max-width: 200px; }
  .wordmark-full { display: none; }
  .site-nav { gap: 22px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }

  .nav-toggle { display: flex; }
  /* Scoped with a child combinator so this only matches bare .site-nav
     children — i.e. 403.html/404.html, which never migrated to the
     .nav-links wrapper and still have <a> directly inside .site-nav.
     On index.html the 5 links live at .site-nav > .nav-links > a (two
     levels down), so this selector does not match them; they stay
     reachable via the drawer. This restores the pre-drawer behaviour
     (wordmark + CTA only) on the two pages that never got the drawer. */
  .site-nav > a:not(.nav-cta) { display: none; }
  .header-inner { min-height: 60px; }
  :root { --header-h: 60px; }   /* keeps the anchor-landing maths correct */

  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(78vw, 320px);
    background: rgba(23,51,79,.5);        /* var(--night-2) at 50% */
    backdrop-filter: saturate(160%) blur(14px);
    padding: 84px 28px 28px;
    gap: 4px;
    box-shadow: -8px 0 24px rgba(0,0,0,.35);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms cubic-bezier(.22,.61,.36,1), visibility 260ms;
    z-index: 20;
  }
  .nav-links.is-open { transform: translateX(0); visibility: visible; }
  .nav-links a {
    padding-block: 14px;
    min-height: 44px;
    border-bottom: 1px solid var(--night-rule);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 5;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  body.no-scroll { overflow: hidden; }

  .section h2 { max-width: none; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }

  .relation-grid { grid-template-columns: 1fr; }
  .meta-row { grid-template-columns: 1fr; gap: 4px; }

  .spectrum-labels { flex-direction: column; gap: 6px; }
  .definition-card { padding: 30px 24px; }
  .footer-inner { align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   17. PRINT — the page is a document first
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .skip-link, .actions, .hero-glow, .nav-cta, .nav-backdrop { display: none; }
  body, .hero, .section-dark, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .section-dark h2, .relation h3, .footer-term { color: #000 !important; }
  .lede, .relation-abbr { color: #555 !important; }
  .hero-body, .relation-text, .relation-note, .footer-meta { color: #333 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero, .section { padding-block: 24pt; }
  .section-band { background: none; }
  a { color: inherit; text-decoration: none; }
  .hero-meta a::after, .footer-links a::after { content: " (" attr(href) ")"; font-size: 8pt; }
}