/* ═══════════════════════════════════════════════════════════════════════════
   O Theory — design system v3. Chaptered reading experience. Light-first.
   Type (3 families): Young Serif (display) · Newsreader (reading) · Hanken Grotesk (UI).
   Self-contained (fonts vendored, SIL OFL).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Young Serif';
  src: url('fonts/young-serif.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight: 300 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken-grotesk-italic-var.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: italic; font-display: swap;
}

:root {
  --display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Hanken Grotesk', ui-monospace, monospace;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── light (default) ─────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #faf7f1;
  --bg-2: #f3efe6;
  --panel: rgba(46, 38, 20, 0.035);
  --panel-solid: #fffdf8;
  --border: rgba(46, 38, 20, 0.13);
  --border-strong: rgba(46, 38, 20, 0.26);
  --text: #23201a;
  --text-dim: #5c564a;
  --text-faint: #948d7c;
  --accent: #8a6a1c;
  --accent-2: #4c55a8;
  --interp-tint: rgba(90, 82, 180, 0.045);
  --canvas-bg: radial-gradient(120% 100% at 50% 0%, #14161f, #090a10);
  --shadow: 0 14px 44px rgba(48, 38, 16, 0.11);
  --shadow-soft: 0 4px 18px rgba(48, 38, 16, 0.07);
  color-scheme: light;
}
/* ── dark (toggle) ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0a0b10;
  --bg-2: #10121a;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-solid: #14161f;
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.2);
  --text: #e9eaf0;
  --text-dim: #a5aaba;
  --text-faint: #6f7488;
  --accent: #ffd479;
  --accent-2: #9db4ff;
  --interp-tint: rgba(150, 130, 255, 0.05);
  --canvas-bg: radial-gradient(120% 100% at 50% 0%, #10121a, #08090d);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
/* Tier badges keep readable ink on their chip color in both themes */
[data-theme="dark"] .badge.tier, [data-theme="dark"] .ek-badge, [data-theme="dark"] .mini-tier { color: #06070c; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-optical-sizing: auto; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 44% at 12% -4%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 70%),
    radial-gradient(46% 38% at 102% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -0.006em; margin: 0 0 0.5rem; font-synthesis: none; }
h3, h4 { font-family: var(--serif); font-weight: 560; line-height: 1.22; letter-spacing: -0.004em; margin: 0 0 0.5rem; }
h3 { font-size: 1.5rem; }
code { font-family: var(--mono); font-size: 0.85em; background: var(--panel); padding: 0.1em 0.35em; border-radius: 5px; }
button { font-family: var(--sans); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 0.6em 1em; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

.kicker {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 0.9rem;
}
.section-sub { color: var(--text-dim); max-width: 62ch; font-size: 0.95rem; }

/* ── header ──────────────────────────────────────────────────────────────── */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 0.65rem clamp(1rem, 3.5vw, 2.2rem);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 0.4rem; color: var(--text); font-family: var(--display); font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-o { color: var(--accent); font-size: 1.45rem; font-weight: 560; }
.brand-word { letter-spacing: 0.02em; }
.site-nav { display: flex; gap: 1.35rem; margin-left: auto; }
.nav-chapter { display: flex; align-items: baseline; gap: 0.4rem; color: var(--text-dim); font-size: 0.82rem; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; }
.nav-chapter:hover { color: var(--text); text-decoration: none; }
.nav-chapter.is-active { color: var(--text); border-bottom-color: var(--accent); }
.nav-num { font-family: var(--mono); font-size: 0.62rem; color: var(--text-faint); }
.theme-toggle {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  width: 2.1rem; height: 2.1rem; border-radius: 50%; cursor: pointer; font-size: 0.95rem;
  transition: border-color 0.25s, transform 0.25s;
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(24deg); }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .site-nav {
    position: fixed; top: 52px; right: 0; left: 0; flex-direction: column; gap: 0;
    background: var(--panel-solid); border-bottom: 1px solid var(--border);
    padding: 0.4rem 1.2rem 0.9rem; transform: translateY(-130%); transition: transform 0.35s var(--ease);
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { transform: translateY(0); }
  .nav-chapter { padding: 0.55rem 0; font-size: 0.95rem; border-bottom: 1px solid var(--border); }
  .nav-chapter.is-active { border-bottom-color: var(--accent); }
  .nav-toggle {
    display: block; margin-left: auto; width: 2.1rem; height: 2.1rem; position: relative;
    background: var(--panel); border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 50%; width: 14px; height: 1.6px; background: var(--text);
    transform: translateX(-50%); transition: transform 0.3s var(--ease);
  }
  .nav-toggle span { top: 50%; }
  .nav-toggle span::before { top: -5px; left: 0; transform: none; }
  .nav-toggle span::after { top: 5px; left: 0; transform: none; }
  .theme-toggle { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
}

/* ── chapters ────────────────────────────────────────────────────────────── */
main { display: block; }
.chapter {
  min-height: 100vh; padding: calc(56px + clamp(1.6rem, 5vh, 3.6rem)) clamp(1.1rem, 4vw, 2.6rem) clamp(2.4rem, 6vh, 4rem);
  max-width: var(--maxw); margin-inline: auto;
}
.chapter[hidden] { display: none; }
.chapter.is-entering { animation: chapterIn 0.55s var(--ease) both; }
@keyframes chapterIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chapter-head { max-width: 760px; margin-bottom: 2rem; }
.chapter-head h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 500; }
.chapter-foot { margin-top: 4rem; display: flex; justify-content: flex-end; }
.next-link { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; padding: 1rem 0; }
.next-link:hover { text-decoration: none; }
.next-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.next-title { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text); transition: color 0.25s, transform 0.35s var(--ease); }
.next-link:hover .next-title { color: var(--accent); transform: translateX(6px); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── landing ─────────────────────────────────────────────────────────────── */
.chapter[data-chapter="synthesis"] { max-width: none; padding-left: 0; padding-right: 0; padding-top: 56px; }
.landing { display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 53%); min-height: calc(100vh - 56px); }
.landing-art {
  position: sticky; top: 56px; height: calc(100vh - 56px);
  display: flex; flex-direction: column; padding: clamp(1rem, 2.5vw, 2rem);
}
#portrait-canvas {
  flex: 1; min-height: 0; border-radius: 20px; overflow: hidden;
  background: var(--canvas-bg); box-shadow: var(--shadow); border: 1px solid var(--border);
}
#portrait-canvas canvas { display: block; }
.art-bar { padding-top: 0.9rem; }
.art-toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 100px; padding: 3px; }
.art-mode {
  border: none; background: transparent; color: var(--text-dim); font-size: 0.8rem; font-weight: 550;
  padding: 0.4rem 1rem; border-radius: 100px; cursor: pointer; transition: background 0.3s, color 0.3s;
}
.art-mode.is-on { background: var(--text); color: var(--bg); }
.art-caption { font-family: var(--serif); font-style: italic; color: var(--text-dim); font-size: 0.92rem; margin: 0.7rem 0 0.2rem; min-height: 1.3em; }
.art-note { font-family: var(--sans); font-size: 0.76rem; color: var(--text-faint); margin: 0.15rem 0 0; line-height: 1.45; }
.art-note a { font-weight: 600; white-space: nowrap; }
.art-stamp { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); margin: 0.5rem 0 0; }
.art-stamp strong { color: var(--accent); font-weight: 600; }
.art-prompt-drawer { margin: 0.7rem 0 0.2rem; border-top: 1px solid var(--border); }
.art-prompt-drawer summary { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; list-style: none; padding: 0.6rem 0 0.2rem; font-family: var(--sans); font-size: 0.78rem; color: var(--text-dim); }
.art-prompt-drawer summary::-webkit-details-marker { display: none; }
.art-prompt-drawer summary:hover { color: var(--text); }
.apd-label { font-weight: 600; letter-spacing: 0.02em; }
.apd-hint { margin-left: auto; color: var(--text-faint); font-size: 0.72rem; }
.art-prompt-drawer[open] .apd-hint::after { content: ""; }
.art-prompt { max-height: 30vh; overflow-y: auto; padding: 0.3rem 0 0.5rem; font-size: 0.85rem; }
.art-prompt.prose { color: var(--text-dim); }
.art-prompt.prose p { margin: 0.5rem 0; }
.art-prompt.prose blockquote { font-size: 0.85rem; border-left-width: 2px; margin: 0.4rem 0; padding-left: 0.9rem; }

.landing-text { padding: clamp(2rem, 5vh, 4rem) clamp(1.4rem, 4vw, 4.2rem) 4rem; max-width: 720px; }
.landing-title {
  font-size: clamp(3.6rem, 8.5vw, 6.6rem); font-weight: 400; line-height: 0.94;
  letter-spacing: -0.02em; margin: 0 0 0.5rem;
}
.landing-tagline {
  font-family: var(--serif); font-size: clamp(1.06rem, 2vw, 1.3rem); font-weight: 400;
  font-style: italic; color: var(--text-dim); line-height: 1.42; margin: 0 0 2.1rem; max-width: 40ch;
}
.intro-lead { margin-bottom: 0.5rem; }
.intro-lead p:first-of-type strong:first-child { color: var(--accent); font-variation-settings: 'wght' 560; }
.intro-aside { font-size: 0.92rem; color: var(--text-faint); font-style: italic; margin-top: 0.6rem; }
.synthesis-marker {
  display: flex; align-items: center; gap: 0.9rem; margin: 3rem 0 0.7rem;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint);
}
.synthesis-marker::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.essay-title {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 400; line-height: 1.0;
  margin: 0 0 1.5rem; letter-spacing: -0.014em;
}
.prose { color: var(--text-dim); }
.prose p { margin: 0.85rem 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose h2, .prose h3 { color: var(--text); margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: 0.4rem 0; }
.prose blockquote { border-left: 2px solid var(--accent); margin: 1.1rem 0; padding: 0.2rem 0 0.2rem 1.2rem; font-style: italic; color: var(--text); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2rem auto; width: 38%; }
.prose-serif { font-family: var(--serif); font-size: 1.14rem; line-height: 1.72; color: var(--text); font-weight: 380; }
.prose-serif p { margin: 1.05rem 0; }
.overview > p:first-of-type::first-letter {
  font-family: var(--display); font-size: 3.4em; float: left; line-height: 0.82;
  padding: 0.06em 0.12em 0 0; color: var(--accent); font-weight: 500;
}

.key-fold { margin-top: 2.6rem; padding: 1.4rem 1.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; }
.key-h { font-size: 1.15rem; margin-bottom: 0.9rem; }
.prompt-details { margin-top: 1.2rem; border: 1px solid var(--border); border-radius: 14px; padding: 0.3rem 1.1rem; background: var(--panel); }
.prompt-details summary { cursor: pointer; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--text-dim); padding: 0.6rem 0; }
.prompt.prose blockquote { font-size: 0.95rem; }
.landing-text .next-link { align-items: flex-start; margin-top: 2.2rem; }
.landing-text .next-link .next-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

@media (max-width: 980px) {
  .landing { grid-template-columns: 1fr; }
  .landing-art { position: relative; top: 0; height: auto; }
  /* flex:1 from the base rule sets flex-basis:0 which, in an auto-height column,
     collapses the canvas to 0px (art invisible on mobile) — pin an explicit height. */
  #portrait-canvas { flex: 0 0 auto; height: min(64vh, 460px); min-height: 320px; }
  .landing-text { padding-top: 1.4rem; }
}

/* ── evidence key ────────────────────────────────────────────────────────── */
.ek-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; }
.ek { display: flex; gap: 0.65rem; align-items: flex-start; }
.ek-badge { flex: none; font-family: var(--mono); font-weight: 700; font-size: 0.74rem; color: #fff; background: var(--tc); padding: 0.16rem 0.44rem; border-radius: 6px; }
.ek-body { display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.45; }
.ek-body strong { color: var(--text); }
.ek-body span { color: var(--text-dim); }
.evidence-key h4 { margin: 1.5rem 0 0.6rem; font-size: 1rem; }
.rk-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.55rem; font-size: 0.88rem; color: var(--text-dim); }
.rk { display: flex; gap: 0.6rem; align-items: center; }
.rk-swatch { flex: none; width: 32px; height: 0; border-top: 3px solid var(--rc, var(--border-strong)); }
.rk-swatch.reg-dashed { border-top-style: dashed; }
.rk-swatch.reg-dotted { border-top-style: dotted; }
.rk-swatch.reg-wavy { border-top: none; height: 7px; background: repeating-linear-gradient(90deg, var(--rc) 0 4px, transparent 4px 8px); }

/* ── badges & chips ──────────────────────────────────────────────────────── */
.badge { display: inline-block; font-size: 0.68rem; padding: 0.14rem 0.5rem; border-radius: 20px; border: 1px solid var(--border-strong); white-space: nowrap; }
.badge.tier { color: #fff; background: var(--tc); border: none; font-weight: 700; font-family: var(--mono); }
.badge.status { text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.06em; align-self: center; }
.status-disputed { color: #a86a10; border-color: #a86a1055; }
.status-rejected { color: #bb3a3a; border-color: #bb3a3a55; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-dim);
  background: var(--panel-solid); border: 1px solid var(--border); border-left: 3px solid var(--dc, var(--border-strong));
  border-radius: 9px; padding: 0.22rem 0.6rem; cursor: pointer; transition: border-color 0.2s, transform 0.2s;
}
.chip:hover { border-color: var(--border-strong); transform: translateY(-1px); color: var(--text); }
.mini-tier { font-family: var(--mono); font-size: 0.62rem; color: #fff; background: var(--tc); border-radius: 4px; padding: 0 0.26rem; }

/* ── graph ───────────────────────────────────────────────────────────────── */
.graph-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 0 0 0.9rem; }
.ctl { display: inline-flex; flex-direction: column; font-size: 0.72rem; color: var(--text-faint); gap: 0.25rem; letter-spacing: 0.04em; }
.ctl select { font-size: 0.88rem; padding: 0.4rem 0.6rem; background: var(--panel-solid); color: var(--text); border: 1px solid var(--border); border-radius: 9px; }
.ctl.switch { flex-direction: row; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--text); letter-spacing: 0; }
.ctl.switch input { accent-color: var(--accent); }
.ctl-btn, .geo-btn {
  font-size: 0.83rem; padding: 0.45rem 0.95rem; background: var(--panel-solid); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.ctl-btn:hover, .geo-btn:hover { border-color: var(--accent); }
.geo-btn.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ctl.grow { flex: 1 1 200px; min-width: 150px; }
.ctl input[type="search"] { font-family: var(--sans); font-size: 0.9rem; padding: 0.42rem 0.65rem; background: var(--panel-solid); color: var(--text); border: 1px solid var(--border); border-radius: 9px; width: 100%; }
.ctl input[type="search"]:focus { outline: none; border-color: var(--accent); }
.graph-wrap { position: relative; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--canvas-bg); box-shadow: var(--shadow); }
#cy { width: 100%; height: min(74vh, 720px); }

/* legend overlay */
.graph-legend {
  position: absolute; top: 12px; left: 12px; max-width: 244px; z-index: 15;
  background: color-mix(in srgb, #0b0d14 78%, transparent); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 0.7rem 0.85rem;
  font-size: 0.68rem; color: #b8c0d2; box-shadow: 0 8px 26px rgba(0,0,0,0.4);
  max-height: calc(100% - 24px); overflow-y: auto;
}
.legend-group { margin-bottom: 0.6rem; }
.legend-group:last-child { margin-bottom: 0; }
.legend-group h4 { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7f88a0; margin: 0 0 0.35rem; font-weight: 700; }
.lg-items { display: flex; flex-wrap: wrap; gap: 0.28rem 0.7rem; }
.lg-item { display: inline-flex; align-items: center; gap: 0.32rem; white-space: nowrap; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c); }
.lg-rim { width: 11px; height: 11px; border-radius: 50%; background: transparent; border: 2px solid var(--c); }
.lg-line { width: 16px; height: 0; border-top: 2px solid #9aa2b5; align-self: center; }
.lg-line.thin { border-top-width: 1px; opacity: 0.55; }
.lg-line.dashed { border-top-style: dashed; }

/* hover tooltip */
.graph-tip {
  position: absolute; z-index: 20; pointer-events: none; max-width: 218px;
  background: rgba(11,13,20,0.96); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  padding: 0.5rem 0.65rem; box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.tip-title { display: block; font-family: var(--serif); font-size: 0.9rem; font-weight: 560; color: #eef1f8; line-height: 1.24; margin-bottom: 0.35rem; }
.tip-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.67rem; color: #aeb6c8; }
.tip-tier { color: #06070c; background: var(--tc); border-radius: 4px; padding: 0.03rem 0.34rem; font-weight: 700; }
.tip-dom { color: var(--dc); text-transform: capitalize; }
.tip-deg { color: #858ea3; }

/* stats line */
.graph-stats { position: absolute; bottom: 9px; right: 14px; margin: 0; z-index: 15; font-size: 0.7rem; color: #aab2c4; font-family: var(--sans); text-align: right; pointer-events: none; text-shadow: 0 1px 5px rgba(0,0,0,0.7); }
.graph-stats .gs-hint { color: #8891a5; }
@media (max-width: 640px) { .graph-legend { font-size: 0.62rem; max-width: 190px; } .graph-stats .gs-hint { display: none; } }

/* ── evidence chapter ────────────────────────────────────────────────────── */
.evidence-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.domain-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 0.3rem; }
.rail-item {
  display: flex; align-items: center; gap: 0.6rem; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 11px;
  padding: 0.5rem 0.75rem; cursor: pointer; color: var(--text-dim); font-size: 0.88rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rail-item:hover { background: var(--panel); color: var(--text); }
.rail-item.is-on { background: var(--panel-solid); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-soft); }
.rail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dc, var(--text-faint)); flex: none; }
.rail-name { flex: 1; }
.rail-count { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); background: var(--panel); border-radius: 20px; padding: 0.06rem 0.5rem; }
.domain-panel { display: none; }
.domain-panel.is-on { display: block; animation: chapterIn 0.4s var(--ease) both; }
@media (max-width: 880px) {
  .evidence-layout { grid-template-columns: 1fr; }
  .domain-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .rail-item { border: 1px solid var(--border); }
}

/* claim cards */
.claim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0.9rem; }
.claim-card {
  display: flex; flex-direction: column; gap: 0.45rem; text-align: left;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 15px;
  padding: 1.05rem 1.15rem; cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.2s;
}
.claim-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--border-strong); }
.cc-top { display: flex; gap: 0.4rem; align-items: center; }
.cc-type { font-size: 0.68rem; color: var(--text-faint); text-transform: lowercase; margin-left: auto; }
.cc-title { font-family: var(--serif); font-size: 1rem; font-weight: 560; line-height: 1.32; color: var(--text); letter-spacing: -0.005em; }
.cc-steel { font-family: var(--serif); font-size: 0.88rem; line-height: 1.5; color: var(--text-dim); }
.cc-more { font-size: 0.74rem; font-weight: 600; color: var(--accent); letter-spacing: 0.03em; margin-top: 0.2rem; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s; }
.claim-card:hover .cc-more { opacity: 1; transform: none; }

/* landscape */
.landscape-block { margin-top: 3rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-solid); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); }
thead th { color: var(--text-dim); font-weight: 600; font-size: 0.8rem; }
.landscape td { text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.landscape .ls-dom { white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; border-bottom: none; }
.landscape .corner { background: transparent; }
.ls-th { font-family: var(--mono); color: var(--tc); }

/* ── interpretations chapter ─────────────────────────────────────────────── */
.chapter-interp { position: relative; }
.chapter-interp::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--interp-tint), transparent 40%);
}
.interp-kicker { color: var(--accent-2); }

/* registers key — how to read a connection */
.registers-key-block { margin: 0 0 3rem; }
.rk-key { margin-top: 1.1rem; gap: 0.7rem 1.6rem; }
.rk-key .rk { align-items: baseline; }
.rk-key .rk-swatch { margin-top: 0.5em; }

/* the bridges — editorial entries grouped by register */
.bridges-block { margin-top: 3.4rem; }
.register-block { margin: 2.4rem 0; }
.register-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
.register-swatch { width: 46px; height: 0; border-top: 3px solid var(--rc); align-self: center; }
.register-swatch.reg-dashed { border-top-style: dashed; }
.register-swatch.reg-dotted { border-top-style: dotted; }
.register-swatch.reg-wavy { border-top: none; height: 7px; background: repeating-linear-gradient(90deg, var(--rc) 0 4px, transparent 4px 8px); }
.register-name { margin: 0; font-size: 1.25rem; color: var(--rc); }
.register-blurb { margin: 0.05rem 0 0; font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--text-faint); }
.register-count { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--text-faint); }
.bridge-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1.5rem 2.4rem; margin-top: 1.5rem; }
.bridge-entry { border-left: 2px solid var(--rc); padding-left: 1.2rem; }
.be-ceiling { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.be-ceiling strong { color: var(--rc); font-weight: 700; }
.be-title { font-family: var(--display); font-size: 1.35rem; font-weight: 500; line-height: 1.14; margin: 0 0 0.6rem; color: var(--text); letter-spacing: -0.01em; }
.be-narrative { font-family: var(--serif); font-size: 1rem; line-height: 1.62; color: var(--text-dim); margin: 0 0 0.9rem; }
.be-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.be-links-label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-right: 0.2rem; }

.chord-block { margin-top: 3rem; }
#chord { width: 100%; max-width: 620px; margin: 1.2rem auto 0; aspect-ratio: 1; }
#chord svg { width: 100%; height: 100%; }
.layer-block { margin-top: 3.4rem; }

.layer-stack { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1rem; }
.layer { border: 1px solid var(--border); border-left: 4px solid var(--lc); border-radius: 13px; background: var(--panel-solid); }
.layer summary { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.05rem; cursor: pointer; font-family: var(--display); font-size: 1.02rem; list-style: none; }
.layer summary::-webkit-details-marker { display: none; }
.layer-title { flex: 1; }
.layer-tiers { font-family: var(--mono); font-size: 0.72rem; color: var(--lc); }
.layer-body { padding: 0 1.05rem 1rem; }
.layer-blurb { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 0.6rem; }
.layer-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.geo-block { margin-top: 3rem; }
#geo { width: 100%; height: min(52vh, 460px); margin-top: 0.9rem; border: 1px solid var(--border); border-radius: 20px; background: var(--canvas-bg); box-shadow: var(--shadow); overflow: hidden; }
.geo-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.geo-caption { color: var(--text-dim); font-size: 0.88rem; font-family: var(--serif); font-style: italic; margin-top: 0.6rem; min-height: 1.3em; }

.interp-claims-block { margin-top: 3rem; }
.interp-group { border: 1px solid var(--border); border-radius: 13px; background: var(--panel-solid); margin: 0.55rem 0; }
.interp-group summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.05rem; cursor: pointer; font-family: var(--display); font-size: 1rem; list-style: none; }
.interp-group summary::-webkit-details-marker { display: none; }
.interp-group .claim-grid { padding: 0.2rem 1.05rem 1.05rem; }

.synth-fold { margin-top: 2.6rem; border: 1px solid var(--border); border-radius: 14px; padding: 0.3rem 1.15rem; background: var(--panel); }
.synth-fold summary { cursor: pointer; font-family: var(--display); font-size: 1.12rem; padding: 0.65rem 0; color: var(--text); }

/* ── questions chapter ───────────────────────────────────────────────────── */
.questions-prose { max-width: 74ch; }
.questions-prose ol > li { margin: 1.1rem 0; }
.predictions-block { margin-top: 3rem; }
.predictions-block table { font-size: 0.84rem; }

/* ── method chapter ──────────────────────────────────────────────────────── */
.chapter[data-chapter="method"] .prose-serif { max-width: 74ch; }
.method-prose { max-width: 70ch; margin-bottom: 2rem; }
.assembly { max-width: 74ch; margin-top: 2.8rem; }
.map-intro { margin-top: 3.4rem; }
.map-intro h3 { margin-bottom: 0.5rem; }
.method-process { margin-top: 2.4rem; }
.method-process p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.72; color: var(--text-dim); max-width: 72ch; }
.method-process strong { color: var(--text); }
.key-block { margin-top: 2.6rem; padding: 1.5rem 1.6rem; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; }
.video-block { margin-top: 2.6rem; max-width: 860px; }
.video-frame { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: #000; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-foot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.86rem; }
.site-foot code { color: var(--accent); }
.foot-note { color: var(--text-faint); }

/* ── claim drawer ────────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--text) 22%, transparent);
  backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s;
}
.drawer-backdrop.is-open { opacity: 1; }
.claim-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(460px, 94vw);
  background: var(--panel-solid); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 1.6rem 1.7rem 2.2rem; overflow-y: auto;
  transform: translateX(102%); transition: transform 0.45s var(--ease);
}
.claim-drawer.is-open { transform: none; }
.cd-close { position: absolute; top: 0.9rem; right: 1rem; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); width: 2rem; height: 2rem; border-radius: 50%; font-size: 1rem; cursor: pointer; }
.cd-close:hover { border-color: var(--accent); color: var(--text); }
.cd-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.8rem; }
.cd-title { font-size: 1.4rem; font-weight: 500; line-height: 1.22; margin-bottom: 0.4rem; }
.cd-domains { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
.dom-tag { font-size: 0.7rem; color: var(--text-dim); border: 1px solid var(--dc); border-radius: 20px; padding: 0.06rem 0.55rem; }
.cd-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin: 1.1rem 0 0.25rem; }
.cd-v { font-family: var(--serif); font-size: 0.95rem; line-height: 1.62; color: var(--text); }
.cd-sources { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.cd-sources li { font-size: 0.85rem; margin: 0.45rem 0; padding-left: 1rem; text-indent: -1rem; }
.src-kind { font-size: 0.66rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; }
.src-ok { color: #1b7f4d; }
.cd-related { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.cd-maplink { display: inline-block; margin-top: 1.4rem; font-size: 0.84rem; font-weight: 600; }

/* ── misc ────────────────────────────────────────────────────────────────── */
.geo-caption:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}