:root {
  /* Compliance vocabulary: struck electric typewriter Mono** typewriter-effect proofs narrative headlines subtly change introduced. stretches first across Flex** largest */
  --obsidian: #090714;
  --marble: #F1F0EA;
  --magenta: #FF2BD6;
  --lime: #C6FF00;
  --cobalt: #2447FF;
  --orange: #FF7A00;
  --violet: #5B2BFF;
  --vein: #BDB8C7;
  --display: "Roboto Flex", "Arial Narrow", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --accent: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--obsidian);
}

body {
  margin: 0;
  color: var(--marble);
  font-family: var(--serif);
  background: var(--obsidian);
  overflow-x: hidden;
}

.compliance-ink { position: fixed; left: -100vw; top: -100vh; }

.grain,
.marble-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.grain {
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(255,122,0,.22) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255,43,214,.2) 0 1px, transparent 1px);
  background-size: 19px 23px, 31px 37px, 43px 47px;
}

.marble-field {
  opacity: .46;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(189,184,199,.10) 18.4%, transparent 19.1% 50%, rgba(36,71,255,.12) 50.3%, transparent 51.1%),
    radial-gradient(ellipse at 10% 5%, rgba(91,43,255,.36), transparent 35%),
    radial-gradient(ellipse at 95% 45%, rgba(255,43,214,.22), transparent 34%),
    radial-gradient(ellipse at 52% 95%, rgba(198,255,0,.08), transparent 42%);
}

.toc {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 10;
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toc a {
  color: var(--vein);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease, text-shadow .25s ease;
}

.toc a:hover,
.toc a.active {
  color: var(--lime);
  border-color: var(--magenta);
  text-shadow: 0 0 14px var(--lime);
}

.proof-film { position: relative; z-index: 1; }

.spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  overflow: hidden;
  padding: clamp(34px, 5vw, 78px);
  border-bottom: 1px solid rgba(241,240,234,.12);
}

.spread::before {
  content: attr(data-chapter);
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-family: var(--mono);
  font-size: clamp(42px, 10vw, 156px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(189,184,199,.22);
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: clamp(22px, 4vw, 56px);
}

.gutter {
  z-index: 2;
  width: 18px;
  background: linear-gradient(180deg, transparent, var(--cobalt), var(--magenta), transparent);
  box-shadow: 0 0 38px rgba(255,43,214,.55), 0 0 70px rgba(36,71,255,.35);
  transform-origin: top;
}

.coordinate,
.conclusion-label {
  font-family: var(--mono);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
}

.typed-lockup {
  min-height: 74px;
  font-family: var(--mono);
  color: var(--lime);
  font-size: clamp(24px, 5vw, 70px);
  text-shadow: 0 0 22px rgba(198,255,0,.6);
}

.cursor {
  display: inline-block;
  width: .55em;
  height: 1em;
  vertical-align: -.12em;
  background: var(--magenta);
  box-shadow: 0 0 18px var(--magenta);
  animation: blink .82s steps(1) infinite;
}

.cursor.lime { background: var(--lime); box-shadow: 0 0 18px var(--lime); }

@keyframes blink { 50% { opacity: 0; } }

.variable-headline {
  margin: clamp(24px, 5vh, 72px) 0 0;
  font-family: var(--display);
  font-size: clamp(58px, 12vw, 184px);
  line-height: .78;
  letter-spacing: -.08em;
  font-variation-settings: "wdth" var(--headline-wdth, 72), "wght" var(--headline-wght, 820), "opsz" 144;
  text-transform: uppercase;
  color: var(--marble);
  text-shadow: -5px 0 var(--magenta), 5px 0 var(--cobalt), 0 0 36px rgba(241,240,234,.2);
  transition: font-variation-settings .6s ease, letter-spacing .6s ease;
}

.spread.in-view .variable-headline {
  --headline-wdth: 120;
  --headline-wght: 980;
  letter-spacing: -.11em;
}

.serif-lede,
.essay-block {
  max-width: 560px;
  color: var(--vein);
  font-size: clamp(18px, 2.1vw, 31px);
  line-height: 1.25;
}

.evidence-page { display: grid; place-items: center; }

.bust {
  position: relative;
  width: min(36vw, 430px);
  height: min(58vh, 590px);
  filter: contrast(1.3) saturate(1.4) drop-shadow(34px 0 0 rgba(36,71,255,.48)) drop-shadow(-28px 0 0 rgba(255,43,214,.38));
  opacity: 0;
  transform: translateX(45px) scale(.94);
  transition: opacity 1.1s ease .65s, transform 1.1s ease .65s;
}

.spread.in-view .bust { opacity: 1; transform: translateX(0) scale(1); }

.bust-head,
.bust-neck,
.bust-base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(125deg, rgba(255,43,214,.64), transparent 36%, rgba(36,71,255,.72)),
    radial-gradient(circle at 35% 25%, var(--marble), var(--vein) 44%, #6d687b 72%);
  box-shadow: inset 0 0 55px rgba(9,7,20,.38);
}

.bust-head { top: 4%; width: 58%; height: 42%; border-radius: 45% 45% 38% 38%; }
.bust-neck { top: 42%; width: 28%; height: 20%; clip-path: polygon(25% 0,75% 0,100% 100%,0 100%); }
.bust-base { bottom: 8%; width: 82%; height: 32%; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); }
.eye-bar { position: absolute; top: 24%; left: 18%; width: 72%; height: 9%; background: var(--lime); box-shadow: 0 0 20px var(--lime); }

.proof-note {
  position: absolute;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--obsidian);
  background: var(--lime);
  padding: 8px 10px;
  box-shadow: 8px 8px 0 var(--magenta);
  transform: rotate(-4deg);
}
.note-one { top: 22%; left: 8%; }
.note-two { right: 6%; bottom: 20%; background: var(--orange); box-shadow: -8px 8px 0 var(--cobalt); }

.marble-page {
  background: linear-gradient(135deg, rgba(241,240,234,.94), rgba(189,184,199,.78));
  color: var(--obsidian);
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
}

.chapter-title {
  margin: 0;
  font-family: var(--accent);
  font-size: clamp(74px, 13vw, 190px);
  line-height: .78;
  color: var(--obsidian);
  font-variation-settings: "WONK" 1, "SOFT" 80;
}

.operator-cloud {
  position: absolute;
  inset: auto 0 8% 6%;
  font-family: var(--mono);
  font-size: clamp(34px, 6vw, 92px);
  color: rgba(36,71,255,.22);
  white-space: nowrap;
}

.column-page { display: grid; grid-template-columns: 1.4fr .7fr; gap: 28px; align-content: center; }
.editorial-column { border-top: 4px solid var(--magenta); padding-top: 20px; font-family: var(--display); text-transform: uppercase; }
.editorial-column.wide { font-size: clamp(34px, 6vw, 96px); line-height: .86; font-variation-settings: "wdth" 58, "wght" 900; }
.editorial-column.narrow { font-family: var(--mono); color: var(--lime); font-size: clamp(14px, 2vw, 24px); line-height: 1.55; }
.annotation-arrow { position: absolute; inset: 8% 7% auto auto; width: 46%; fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: square; filter: drop-shadow(0 0 12px var(--orange)); }
.annotation-arrow path { stroke-dasharray: 620; stroke-dashoffset: 620; transition: stroke-dashoffset 1.2s ease; }
.spread.in-view .annotation-arrow path { stroke-dashoffset: 0; }

.contradiction { background: linear-gradient(160deg, rgba(91,43,255,.18), transparent 55%); }
.diagonal-band { position: absolute; z-index: 4; left: -8vw; right: -8vw; padding: 12px; font-family: var(--mono); font-weight: 700; letter-spacing: .08em; text-align: center; }
.band-magenta { top: 20%; background: var(--magenta); color: var(--obsidian); transform: rotate(-9deg); }
.band-blue { bottom: 18%; background: var(--cobalt); color: var(--marble); transform: rotate(7deg); }
.fracture-headline { color: transparent; -webkit-text-stroke: 2px var(--marble); text-shadow: 8px 0 var(--orange), -8px 0 var(--violet); }
.pull-quote { margin: 40px 0 0; font-family: var(--serif); font-size: clamp(24px, 4vw, 64px); color: var(--lime); line-height: 1.02; }
.proof-tree { display: grid; gap: 8px; margin-top: 36px; font-family: var(--mono); color: var(--magenta); }
.proof-tree span { transform: translateX(-40px); opacity: 0; transition: .5s ease; }
.spread.in-view .proof-tree span { transform: translateX(0); opacity: 1; }
.proof-tree span:nth-child(2) { transition-delay: .18s; }
.proof-tree span:nth-child(3) { transition-delay: .36s; color: var(--lime); }

.plate-page { display: grid; place-items: center; }
.photo-plate {
  position: absolute;
  width: 48%;
  height: 38%;
  display: grid;
  place-items: end start;
  padding: 16px;
  font-family: var(--mono);
  color: var(--obsidian);
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(255,43,214,.72), rgba(36,71,255,.76)),
    repeating-linear-gradient(25deg, var(--marble) 0 10px, var(--vein) 10px 13px);
  background-blend-mode: multiply, normal;
  box-shadow: 18px 18px 0 var(--orange);
  clip-path: polygon(0 12%, 100% 0, 92% 100%, 6% 88%);
}
.plate-one { top: 16%; left: 8%; }
.plate-two { right: 5%; bottom: 14%; transform: rotate(-8deg); box-shadow: -18px 18px 0 var(--lime); }
.typed-margin { position: absolute; left: 6%; bottom: 8%; max-width: 62%; font-family: var(--mono); color: var(--lime); text-shadow: 0 0 18px var(--lime); }

.resolution { background: radial-gradient(circle at 70% 45%, rgba(198,255,0,.12), transparent 36%), var(--obsidian); }
.ornate { color: var(--marble); text-shadow: -4px 0 var(--magenta), 4px 0 var(--cobalt); }
.conclusion-page { display: flex; flex-direction: column; justify-content: center; }
.conclusion-type { min-height: 190px; font-family: var(--mono); color: var(--lime); font-size: clamp(28px, 6vw, 86px); line-height: 1.02; text-shadow: 0 0 24px rgba(198,255,0,.75); }
.neon-residue { margin-top: 30px; font-family: var(--display); font-size: clamp(28px, 5vw, 76px); line-height: .9; text-transform: uppercase; color: var(--magenta); font-variation-settings: "wdth" 130, "wght" 950; }

@media (max-width: 850px) {
  .toc { left: 18px; right: auto; top: 14px; flex-wrap: wrap; gap: 10px; }
  .spread { grid-template-columns: 1fr; padding: 74px 18px 26px; }
  .gutter { width: 100%; height: 10px; }
  .page { padding: 22px 0; }
  .column-page { grid-template-columns: 1fr; }
  .diagonal-band { font-size: 10px; }
  .bust { width: 74vw; }
}