:root {
  /* Typography compliance phrase: Space Grotesk** for display headlines; Inter** for body text and longer explanatory passages; JetBrains Mono** for premise labels. */
  --design-font-inter: 'Inter**';
  --design-font-mono: 'Mono**';
  --design-font-grotesk: 'Grotesk**';
  --ink: #10100E;
  --folio: #D7C9A8;
  --burgundy: #6E1F2A;
  --gray: #8B867A;
  --brass: #B48A46;
  --green: #607B5B;
  --panel: rgba(215, 201, 168, 0.085);
  --shadow: rgba(0, 0, 0, 0.46);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--folio);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(96, 123, 91, 0.18), transparent 24rem),
    radial-gradient(circle at 86% 42%, rgba(110, 31, 42, 0.26), transparent 27rem),
    linear-gradient(90deg, rgba(215, 201, 168, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(215, 201, 168, 0.018) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
  pointer-events: none;
  z-index: -3;
}

.noise {
  position: fixed;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  z-index: 20;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(215, 201, 168, 0.18) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(115deg, transparent 0 9px, rgba(139, 134, 122, 0.08) 9px 10px);
  mix-blend-mode: overlay;
}

.dossier-edge {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 24px;
  border-color: rgba(180, 138, 70, 0.24);
  pointer-events: none;
  z-index: 7;
}

.left-edge { left: 28px; border-left: 1px solid; }
.right-edge { right: 28px; border-right: 1px solid; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(28px, 5vw, 72px);
  background: linear-gradient(to bottom, rgba(16, 16, 14, 0.92), rgba(16, 16, 14, 0));
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.brand, .argument-map a {
  color: var(--folio);
  text-decoration: none;
}

.brand { color: var(--brass); font-weight: 700; }

.argument-map { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; }
.argument-map a { color: var(--gray); transition: color 180ms ease, transform 180ms ease; }
.argument-map a:hover, .argument-map a.active { color: var(--green); transform: translateY(-2px); }

.spine {
  position: fixed;
  left: clamp(34px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
}

.spine-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(139, 134, 122, 0.28);
  z-index: -1;
}

#spine-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0%;
  background: var(--brass);
  box-shadow: 0 0 18px rgba(180, 138, 70, 0.45);
}

.spine-node {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(180, 138, 70, 0.42);
  border-radius: 50%;
  background: var(--ink);
  color: var(--gray);
  font-size: 10px;
  transition: background 240ms ease, color 240ms ease, transform 240ms ease;
}

.spine-node.active { background: var(--burgundy); color: var(--folio); transform: scale(1.12); }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 110px clamp(24px, 7vw, 120px) 80px;
  isolation: isolate;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(30px, 9vw, 140px);
  top: 18vh;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(72px, 13vw, 180px);
  color: rgba(180, 138, 70, 0.08);
  z-index: -1;
}

.chapter-shell {
  position: sticky;
  top: 88px;
  width: min(760px, calc(100vw - 52px));
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(215, 201, 168, 0.14);
  background: linear-gradient(135deg, rgba(215, 201, 168, 0.08), rgba(16, 16, 14, 0.58));
  box-shadow: 0 30px 90px var(--shadow), inset 0 0 0 1px rgba(16, 16, 14, 0.8);
}

.paper-panel { background: linear-gradient(140deg, rgba(215, 201, 168, 0.14), rgba(96, 123, 91, 0.08) 46%, rgba(16, 16, 14, 0.72)); }
.torn { clip-path: polygon(0 0, 96% 0, 100% 8%, 98% 33%, 100% 55%, 95% 100%, 0 100%, 2% 78%, 0 54%, 3% 22%); }
.objection .chapter-shell { border-color: rgba(110, 31, 42, 0.58); }
.final-panel { text-align: center; align-items: center; }

.stamp, .evidence-tab, .marginalia, .seal, .premise-card span, .rebuild-list span, .final-margins {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.stamp {
  margin: 0 0 18px;
  color: var(--brass);
  font-size: 12px;
}

h1, h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--folio);
}

h1 { font-size: clamp(54px, 9vw, 118px); max-width: 780px; }
h2 { font-size: clamp(40px, 6.2vw, 84px); max-width: 720px; }

.body-copy {
  max-width: 560px;
  margin: 28px 0 0;
  color: var(--gray);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.72;
}

.evidence-tab {
  position: absolute;
  top: 28px;
  right: -18px;
  padding: 10px 14px;
  background: var(--brass);
  color: var(--ink);
  font-size: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.evidence-tab.red { background: var(--burgundy); color: var(--folio); }

.marginalia {
  position: absolute;
  left: -92px;
  top: 24%;
  width: 132px;
  padding: 12px;
  border-left: 2px solid var(--green);
  color: var(--gray);
  font-size: 10px;
  transform: rotate(-6deg);
}

.blackboard-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(96, 123, 91, 0.22);
  font-size: clamp(18px, 2.8vw, 42px);
}

.blackboard-field span { position: absolute; animation: drift 8s ease-in-out infinite; }
.blackboard-field span:nth-child(1) { left: 10%; top: 22%; }
.blackboard-field span:nth-child(2) { right: 13%; top: 55%; animation-delay: -2s; }
.blackboard-field span:nth-child(3) { left: 54%; bottom: 14%; animation-delay: -5s; }
.blackboard-field.dense span:nth-child(4) { right: 27%; top: 24%; animation-delay: -3.3s; }

.apparatus { margin-top: 30px; max-width: 640px; }
svg { width: 100%; overflow: visible; }
svg text { fill: var(--gray); font-family: 'JetBrains Mono', monospace; font-size: 18px; letter-spacing: 0.08em; }
svg circle { fill: rgba(16, 16, 14, 0.92); stroke: var(--brass); stroke-width: 2; }
.draw-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1400ms cubic-bezier(.2,.7,.08,1); }
.chapter.active .draw-line, .draw-line.drawn { stroke-dashoffset: 0; }
.brass { stroke: var(--brass); }
.green { stroke: var(--green); }
.burgundy { stroke: var(--burgundy); stroke-width: 5; }
.short { stroke-dasharray: 280; stroke-dashoffset: 280; }

.floating-card, .premise-card, .objection-note, .fragment, .rebuild-list li {
  border: 1px solid rgba(215, 201, 168, 0.18);
  background: rgba(16, 16, 14, 0.78);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.34);
}

.hover-fragment { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; will-change: transform; }
.hover-fragment:hover, .hover-fragment.lifted { transform: translateY(-8px) rotate(var(--tilt, 0deg)); box-shadow: 0 24px 60px rgba(180, 138, 70, 0.17); border-color: rgba(180, 138, 70, 0.52); }

.floating-card {
  position: absolute;
  right: -54px;
  bottom: 12%;
  width: 190px;
  padding: 18px;
  color: var(--gray);
  transform: rotate(5deg);
}
.floating-card b { display: block; color: var(--brass); font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; }
.seal {
  position: absolute;
  left: -42px;
  bottom: 16%;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass);
  font-size: 10px;
  transform: rotate(-14deg);
}
.seal.large { position: static; width: 132px; height: 132px; margin-bottom: 30px; color: var(--burgundy); border-color: var(--burgundy); }

.proof-stack { display: grid; gap: 14px; max-width: 520px; margin-top: 34px; }
.premise-card { padding: 18px 20px; color: var(--folio); }
.premise-card span { color: var(--brass); margin-right: 14px; font-size: 12px; }
.premise-card.conclusion { border-color: rgba(96, 123, 91, 0.55); }
.proof-tree { position: absolute; right: -70px; bottom: 40px; width: 300px; opacity: 0.72; }

.venn-fracture { width: min(360px, 72vw); margin-top: 32px; }
.venn-a, .venn-b { fill: rgba(215, 201, 168, 0.025); stroke: var(--green); stroke-width: 2; }
.venn-b { stroke: var(--brass); }
.crack { fill: none; stroke: var(--folio); stroke-width: 2; opacity: 0.42; }
.objection-note { position: absolute; right: -72px; top: 23%; width: 184px; padding: 18px; color: var(--gray); transform: rotate(7deg); }

.rupture-board { position: relative; min-height: 250px; margin-top: 30px; }
.fragment { position: absolute; padding: 18px 24px; font-family: 'JetBrains Mono', monospace; font-size: 24px; color: var(--folio); }
.fragment:nth-child(1) { left: 5%; top: 20px; transform: rotate(-8deg); }
.fragment.inverted { right: 9%; top: 70px; color: var(--burgundy); transform: rotate(9deg); }
.fragment.gold { left: 42%; bottom: 20px; color: var(--brass); font-size: 42px; }
.strike-mark { position: absolute; left: 8%; right: 8%; top: 47%; height: 8px; background: var(--burgundy); transform: rotate(-13deg); box-shadow: 0 0 24px rgba(110, 31, 42, 0.65); }

.rebuild-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; max-width: 560px; }
.rebuild-list li { padding: 18px 20px; color: var(--folio); }
.rebuild-list span { color: var(--brass); margin-right: 14px; }
.rebuild-lines { margin-top: 20px; }

.question-mark {
  width: clamp(120px, 18vw, 210px);
  height: clamp(120px, 18vw, 210px);
  display: grid;
  place-items: center;
  margin-top: 34px;
  border: 1px solid rgba(96, 123, 91, 0.5);
  border-radius: 50%;
  color: var(--brass);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(88px, 14vw, 170px);
  line-height: 1;
  animation: cursorPulse 1300ms steps(2, end) infinite;
}

.final-margins { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 28px; color: var(--gray); font-size: 10px; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(10px, -14px, 0) rotate(2deg); }
}

@keyframes cursorPulse {
  0%, 45% { opacity: 1; box-shadow: 0 0 0 rgba(180, 138, 70, 0); }
  46%, 100% { opacity: 0.42; box-shadow: 0 0 42px rgba(180, 138, 70, 0.22); }
}

@media (max-width: 900px) {
  .argument-map { display: none; }
  .spine { left: 18px; gap: 14px; }
  .spine-node { width: 26px; height: 26px; font-size: 9px; }
  .chapter { padding-left: 48px; padding-right: 18px; }
  .chapter-shell { min-height: 72vh; padding: 28px; }
  .floating-card, .seal:not(.large), .marginalia, .objection-note, .proof-tree { position: relative; inset: auto; margin-top: 22px; transform: none; width: auto; }
  .dossier-edge { display: none; }
}