:root {
  /* Typography compliance tokens: Space Mono** IBM Plex Mono** `op9.rs` wordmark */
  --black: #050505;
  --paper: #F2F0E8;
  --graphite: #303030;
  --ash: #A8A8A0;
  --red: #D11313;
  --blue: #3D5AFE;
  --rail-x: 43vw;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background: var(--black);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    repeating-linear-gradient(0deg, rgba(242,240,232,.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent 0 14%, rgba(61,90,254,.08) 14.2%, transparent 14.6%, transparent 80%, rgba(209,19,19,.07) 80.2%, transparent 80.6%);
  mix-blend-mode: screen;
  opacity: .45;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 19;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, #F2F0E8 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #A8A8A0 0 1px, transparent 1px);
  background-size: 17px 19px, 23px 29px;
  animation: grainShift 1.2s steps(4) infinite;
}

.timeline {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  width: 2px;
  background: linear-gradient(var(--graphite), var(--ash) 20%, var(--graphite) 60%, var(--black));
  box-shadow: -7px 0 0 rgba(242,240,232,.04), 9px 0 0 rgba(209,19,19,.1);
}

.rail::before {
  content: "";
  position: absolute;
  inset: 0 -16px;
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(242,240,232,.16) 22px 25px, transparent 25px 43px);
  opacity: .25;
}

.progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--red);
  box-shadow: 0 0 18px rgba(209,19,19,.8);
}

.nav-marks {
  position: fixed;
  left: calc(var(--rail-x) - 64px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 7px;
  pointer-events: auto;
}

.nav-marks button {
  width: 37px;
  padding: 2px 0;
  border: 1px solid var(--graphite);
  color: var(--ash);
  background: rgba(5,5,5,.78);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,1.7,.35,1), color .25s, border-color .25s;
}

.nav-marks button.active {
  color: var(--paper);
  border-color: var(--red);
  transform: translateX(9px) skewX(-7deg);
  box-shadow: 0 0 0 2px rgba(209,19,19,.12);
}

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 15vh 8vw 10vh;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.chapter::before {
  content: attr(data-title);
  position: absolute;
  top: 9vh;
  left: calc(var(--rail-x) + 28px);
  color: rgba(168,168,160,.35);
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: .28em;
  font-size: 11px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.chapter.left { justify-content: flex-start; }
.chapter.right { justify-content: flex-end; }
.chapter.paper { background: radial-gradient(circle at 75% 25%, rgba(242,240,232,.08), transparent 30%), var(--black); }
.chapter.dark { background: linear-gradient(115deg, var(--black), #101010 55%, var(--black)); }
.chapter.blackout { background: var(--black); }

.node {
  position: absolute;
  left: calc(var(--rail-x) - 27px);
  top: 50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid var(--graphite);
  background: var(--black);
  color: var(--ash);
  font: 700 14px/1 "Space Mono", ui-monospace, monospace;
  z-index: 17;
  transform: translateY(-50%) rotate(45deg) scale(.84);
  transition: transform .55s cubic-bezier(.18,1.8,.28,1), border-color .35s, color .35s, box-shadow .35s;
}

.node span { transform: rotate(-45deg); }
.chapter.active .node {
  border-color: var(--red);
  color: var(--paper);
  transform: translateY(-50%) rotate(45deg) scale(1.08);
  box-shadow: 0 0 0 8px rgba(209,19,19,.08), 0 0 28px rgba(209,19,19,.42);
}
.node.restless { animation: restless 1.4s cubic-bezier(.2,1.7,.3,1) infinite; }

.cover {
  background: var(--black);
  justify-content: flex-start;
}

.cover-mark {
  position: absolute;
  left: calc(var(--rail-x) + 30px);
  top: 38vh;
  font: 700 clamp(20px, 4vw, 62px)/.9 "Space Mono", ui-monospace, monospace;
  letter-spacing: .23em;
  color: var(--paper);
  text-transform: lowercase;
}

.microcopy {
  position: absolute;
  left: calc(var(--rail-x) + 33px);
  top: calc(38vh + 70px);
  color: var(--ash);
  font-size: 11px;
  letter-spacing: .18em;
}

.spine-line {
  position: absolute;
  left: calc(var(--rail-x) + 14px);
  top: 18vh;
  height: 64vh;
  width: 1px;
  background: linear-gradient(transparent, var(--ash), transparent);
  opacity: .5;
}

.stamp {
  position: absolute;
  left: calc(var(--rail-x) - 120px);
  top: 49vh;
  border: 2px solid var(--red);
  color: var(--red);
  padding: 8px 13px;
  font: 700 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .22em;
  transform: rotate(-8deg);
}
.pulse { animation: pulse 1.5s infinite; }

.sheet, .interlude-card {
  position: relative;
  width: min(560px, 40vw);
  padding: clamp(26px, 4vw, 56px);
  border: 1px solid var(--graphite);
  background: var(--paper);
  color: var(--black);
  box-shadow: 18px 24px 0 rgba(48,48,48,.45), -3px 0 0 var(--red);
  transform: translateY(46px) rotate(var(--tilt, -1.5deg));
  opacity: .62;
  transition: transform .7s cubic-bezier(.18,1.75,.24,1), opacity .45s, filter .45s;
  filter: contrast(.92) saturate(.9);
}

.right .sheet { --tilt: 1.3deg; box-shadow: -18px 24px 0 rgba(48,48,48,.45), 3px 0 0 var(--red); }
.chapter.active .spring { transform: translateY(0) rotate(var(--tilt, -1.5deg)); opacity: 1; filter: contrast(1.06); }

.black-sheet, .interlude-card {
  background: var(--black);
  color: var(--paper);
  border-color: var(--ash);
  box-shadow: 18px 24px 0 rgba(242,240,232,.08), -3px 0 0 var(--red);
}

.kicker {
  margin: 0 0 26px;
  color: var(--red);
  font: 700 12px/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: .22em;
}

h1, h2 {
  margin: 0 0 24px;
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: -.04em;
  line-height: .95;
  text-transform: lowercase;
}

h1 { font-size: clamp(42px, 6vw, 86px); }
h2 { font-size: clamp(30px, 4vw, 58px); }
p, li { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.65; }
blockquote {
  margin: 28px 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
  color: var(--ash);
}

.glitch-word { position: relative; }
.glitch-word::before, .glitch-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.chapter.active .glitch-word::before {
  color: var(--red);
  transform: translate(-3px, 2px);
  clip-path: inset(12% 0 55% 0);
  animation: glitchFlash 2.2s steps(2) infinite;
}
.chapter.active .glitch-word::after {
  color: var(--blue);
  transform: translate(3px, -1px);
  clip-path: inset(58% 0 9% 0);
  animation: glitchFlash 2.2s steps(2) infinite reverse;
}

.split-title { text-shadow: -2px 0 var(--paper), 2px 0 var(--red); }
.index-list { padding: 0; list-style: none; counter-reset: item; }
.index-list li {
  border-top: 1px solid rgba(48,48,48,.36);
  padding: 12px 0;
}
.index-list span { color: var(--red); font-family: "Space Mono", ui-monospace, monospace; margin-right: 16px; }

.redaction, .last-redaction {
  display: inline-block;
  margin-top: 20px;
  padding: 7px 12px;
  color: var(--paper);
  background: linear-gradient(90deg, var(--red) 0 76%, var(--black) 76% 82%, var(--red) 82%);
  font: 700 12px "Space Mono", ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.chapter.active .redaction { animation: redactSlide 1.8s cubic-bezier(.2,1.4,.4,1) both; }

.margin-note, .crawl {
  position: absolute;
  max-width: 200px;
  color: var(--ash);
  font: 12px/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .08em;
}
.margin-note { right: 8vw; bottom: 18vh; transform: rotate(4deg); }
.crawl { left: calc(var(--rail-x) + 38px); bottom: 10vh; writing-mode: vertical-rl; animation: crawl 9s linear infinite; }

.iso-icon.books {
  position: absolute;
  right: 13vw;
  bottom: 16vh;
  width: 150px;
  height: 120px;
  transform: skewY(-16deg) rotate(4deg);
}
.iso-icon.books span {
  position: absolute;
  bottom: 0;
  width: 42px;
  border: 2px solid var(--paper);
  background: repeating-linear-gradient(90deg, var(--paper) 0 4px, var(--black) 4px 9px);
  box-shadow: 10px -10px 0 var(--graphite);
}
.iso-icon.books span:nth-child(1) { left: 0; height: 84px; }
.iso-icon.books span:nth-child(2) { left: 48px; height: 112px; border-color: var(--red); }
.iso-icon.books span:nth-child(3) { left: 96px; height: 68px; }
.chapter.active .iso-icon { animation: iconRebound .8s cubic-bezier(.18,1.8,.28,1); }

.apparatus-visual {
  position: relative;
  height: 230px;
  margin-top: 28px;
}
.lectern {
  position: absolute;
  left: 18%; top: 50px;
  width: 185px; height: 95px;
  background: var(--black);
  border: 2px solid var(--graphite);
  transform: skewY(-18deg) rotate(8deg);
  box-shadow: 28px 20px 0 var(--ash);
}
.lectern::before {
  content: "OP-IX";
  position: absolute;
  inset: 18px;
  color: var(--paper);
  font-family: "Space Mono", ui-monospace, monospace;
}
.wire { position: absolute; height: 2px; background: var(--red); transform-origin: left; }
.w1 { width: 160px; left: 36%; top: 124px; transform: rotate(28deg); }
.w2 { width: 120px; left: 28%; top: 66px; transform: rotate(-20deg); background: var(--blue); }
.lens { position: absolute; right: 12%; top: 22px; width: 72px; height: 72px; border: 3px solid var(--black); border-radius: 50%; box-shadow: 18px 18px 0 rgba(48,48,48,.38); }

.footnotes { padding-left: 0; list-style: none; color: var(--graphite); }
.footnotes li::before { content: "↯ "; color: var(--red); }
.pins { position: absolute; right: 12vw; top: 28vh; display: grid; gap: 38px; }
.pins i { width: 18px; height: 18px; background: var(--red); transform: rotate(45deg); box-shadow: 0 0 0 12px rgba(209,19,19,.1); }
.citation-link { color: var(--paper); text-decoration: none; border-bottom: 2px solid var(--red); font-family: "Space Mono", ui-monospace, monospace; }
.citation-link:hover { color: var(--blue); }

.interlude-card {
  width: min(680px, 48vw);
  margin-left: auto;
  border: 0;
  box-shadow: none;
  background: #050505;
}
.interlude-card p { color: var(--red); letter-spacing: .25em; }
.scanline-block { height: 170px; margin-top: 35px; background: repeating-linear-gradient(0deg, var(--paper) 0 2px, transparent 2px 10px); opacity: .12; clip-path: polygon(0 12%, 92% 0, 100% 82%, 8% 100%); }

.folds { height: 145px; position: relative; margin-top: 28px; }
.folds span { position: absolute; width: 42%; height: 80px; border: 1px solid var(--graphite); background: rgba(242,240,232,.7); transform: skewY(-13deg); }
.folds span:nth-child(1) { left: 0; top: 18px; }
.folds span:nth-child(2) { left: 28%; top: 42px; border-left-color: var(--red); }
.folds span:nth-child(3) { left: 56%; top: 5px; border-top-color: var(--blue); }

.catalog-cube { position: relative; height: 190px; margin-top: 28px; transform: rotate(-8deg); }
.catalog-cube span { position: absolute; width: 138px; height: 86px; background: var(--paper); border: 2px solid var(--black); box-shadow: 18px 18px 0 var(--ash); }
.catalog-cube span::before { content: "DENIED"; position: absolute; left: 15px; top: 18px; color: var(--red); font: 700 12px "Space Mono", monospace; }
.catalog-cube span:nth-child(1) { left: 24px; top: 10px; }
.catalog-cube span:nth-child(2) { left: 116px; top: 48px; }
.catalog-cube span:nth-child(3) { left: 66px; top: 98px; background: var(--black); }

.bibliography { font-family: "Libre Baskerville", Georgia, serif; color: var(--ash); }

@keyframes pulse { 0%,100%{ opacity:.55; transform: rotate(-8deg) scale(.96);} 50%{ opacity:1; transform: rotate(-8deg) scale(1.08);} }
@keyframes grainShift { 0%{ transform: translate(0,0);} 25%{ transform: translate(2%, -1%);} 50%{ transform: translate(-1%,2%);} 75%{ transform: translate(1%,1%);} 100%{ transform: translate(0,0);} }
@keyframes glitchFlash { 0%, 78%, 100%{ opacity:0;} 80%, 84%{ opacity:.75;} 86%{ opacity:.2;} 88%{ opacity:.9;} }
@keyframes redactSlide { 0%{ clip-path: inset(0 100% 0 0); transform: translateX(-14px);} 65%{ clip-path: inset(0 0 0 0); transform: translateX(5px);} 100%{ clip-path: inset(0 0 0 0); transform: translateX(0);} }
@keyframes crawl { from{ transform: translateY(28px);} to{ transform: translateY(-120px);} }
@keyframes iconRebound { 0%{ transform: skewY(-16deg) rotate(4deg) translateY(38px) scale(.8);} 70%{ transform: skewY(-16deg) rotate(4deg) translateY(-8px) scale(1.07);} 100%{ transform: skewY(-16deg) rotate(4deg) translateY(0) scale(1);} }
@keyframes restless { 0%,100%{ filter:none;} 35%{ filter: drop-shadow(5px 0 0 var(--red));} 60%{ filter: drop-shadow(-5px 0 0 var(--blue));} }

@media (max-width: 900px) {
  :root { --rail-x: 24px; }
  .nav-marks { display: none; }
  .chapter { padding: 18vh 7vw 12vh 76px; justify-content: flex-start !important; }
  .sheet, .interlude-card { width: 100%; }
  .chapter::before { left: 54px; }
  .node { left: -3px; }
  .cover-mark, .microcopy { left: 76px; }
  .spine-line { left: 58px; }
  .stamp { left: 88px; top: 58vh; }
  .margin-note, .iso-icon.books, .pins { display: none; }
}