:root {
  /* Design font token guard: Space Grotes Grotesk* Grotesk** for labels */
  --press-black: #111114;
  --proof-paper: #F4F0E6;
  --carbon-ink: #242126;
  --annotation-violet: #6D4AFF;
  --acid-green: #C8FF3D;
  --redaction-rust: #A33A2B;
  --blueprint-blue: #2E5EAA;
  --display: Fraunces, Georgia, 'Times New Roman', serif;
  --serif: Newsreader, Georgia, Cambria, serif;
  --space: 'Space Grotesk', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--proof-paper);
  background:
    radial-gradient(circle at 76% 18%, rgba(109, 74, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 14% 88%, rgba(46, 94, 170, 0.2), transparent 25rem),
    var(--press-black);
  font-family: var(--serif);
  overflow-x: hidden;
}

button, a { font: inherit; }

a { color: inherit; text-decoration: none; }

.scan-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(244,240,230,0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(36,33,38,0.08) 0 1px, transparent 1px 7px);
}

.index-ruler {
  position: fixed;
  top: 4vh;
  left: 22px;
  bottom: 4vh;
  z-index: 30;
  width: 58px;
  border-left: 1px solid rgba(244,240,230,0.35);
  border-right: 1px solid rgba(244,240,230,0.14);
  color: var(--proof-paper);
  font-family: var(--space);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: rgba(17,17,20,0.62);
  backdrop-filter: blur(3px);
}

.ruler-title {
  writing-mode: vertical-rl;
  letter-spacing: .36em;
  font-size: 10px;
  color: rgba(244,240,230,.58);
}

.ruler-mark {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  color: rgba(244,240,230,.68);
}

.ruler-mark span { font-size: 22px; }
.ruler-mark em {
  position: absolute;
  left: 48px;
  opacity: 0;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--carbon-ink);
  color: var(--acid-green);
  padding: 5px 7px;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateX(-6px);
}
.ruler-mark:hover em, .ruler-mark.active em { opacity: 1; transform: translateX(0); }
.ruler-mark.active { color: var(--acid-green); }

.loupe-marker {
  position: absolute;
  left: 11px;
  top: 0;
  width: 34px;
  height: 34px;
  border: 2px solid var(--annotation-violet);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(109,74,255,.55);
  transition: top .18s linear;
}
.loupe-marker:after {
  content: '';
  position: absolute;
  right: -9px;
  bottom: -5px;
  width: 13px;
  height: 2px;
  background: var(--annotation-violet);
  transform: rotate(42deg);
}

.room {
  min-height: 100vh;
  position: relative;
  padding: 7vh 6vw 7vh 112px;
  display: grid;
  align-items: center;
}

.proof-sheet {
  position: relative;
  color: var(--carbon-ink);
  background:
    linear-gradient(90deg, rgba(36,33,38,.04) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(36,33,38,.035) 1px, transparent 1px) 0 0 / 42px 42px,
    var(--proof-paper);
  box-shadow: 0 28px 70px rgba(0,0,0,.48), 14px 14px 0 rgba(109,74,255,.24), -10px -8px 0 rgba(46,94,170,.18);
}

.hero-sheet {
  min-height: 86vh;
  overflow: hidden;
  padding: 42px 48px;
  transform: rotate(-.5deg);
}

.kicker, .plate-label, .specimen-label, .proof-mark, .glossary-ribbon, .footnote-thread, .chapter-symbol {
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.kicker { margin: 0; color: var(--blueprint-blue); font-size: 12px; }

.wordmark {
  font-family: var(--display);
  font-size: clamp(82px, 18vw, 250px);
  line-height: .72;
  letter-spacing: -.095em;
  margin: 5vh 0 0 -4vw;
  max-width: 9ch;
  color: var(--carbon-ink);
}

.crop {
  position: absolute;
  width: 45px;
  height: 45px;
  animation: cropPulse 4s ease-in-out infinite;
}
.crop:before, .crop:after { content: ''; position: absolute; background: var(--carbon-ink); }
.crop:before { width: 45px; height: 1px; top: 0; left: 0; }
.crop:after { width: 1px; height: 45px; top: 0; left: 0; }
.crop-a { top: 24px; left: 24px; }
.crop-b { top: 24px; right: 24px; transform: rotate(90deg); }
.crop-c { bottom: 24px; left: 24px; transform: rotate(-90deg); }
.crop-d { bottom: 24px; right: 24px; transform: rotate(180deg); }

.registration-target {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 1px solid var(--blueprint-blue);
  border-radius: 50%;
  opacity: .7;
}
.registration-target:before, .registration-target:after {
  content: '';
  position: absolute;
  background: var(--redaction-rust);
}
.registration-target:before { left: 50%; top: -10px; width: 1px; height: 82px; }
.registration-target:after { top: 50%; left: -10px; height: 1px; width: 82px; }
.target-one { right: 10%; top: 9%; }
.target-two { left: 26%; bottom: 13%; transform: scale(.65); }

.redaction-slab {
  background: var(--redaction-rust);
  color: var(--proof-paper);
  box-shadow: 6px 6px 0 rgba(36,33,38,.25);
}
.hero-slab {
  position: absolute;
  left: 7%;
  top: 45%;
  width: 46vw;
  height: 30px;
  transform: rotate(-2deg);
  animation: revealBar 5s ease-in-out infinite;
}

.definition-plate {
  position: relative;
  background: rgba(244,240,230,.93);
  color: var(--carbon-ink);
  border: 1px solid rgba(36,33,38,.55);
  padding: 24px;
  box-shadow: 8px 8px 0 rgba(36,33,38,.18);
}
.hero-sheet .definition-plate {
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: min(420px, 42vw);
  transform: rotate(1.6deg);
}
.plate-label, .specimen-label { display: block; color: var(--annotation-violet); font-size: 11px; margin-bottom: 12px; }
.definition-plate h2, .definition-plate h3, .concept-specimen h3, .room-heading h2 {
  font-family: var(--display);
  letter-spacing: -.045em;
  margin: 0;
}
.definition-plate h2 { font-size: clamp(34px, 5vw, 68px); }
.definition-plate h3, .concept-specimen h3 { font-size: clamp(30px, 4vw, 58px); line-height: .9; }
.definition-plate p, .concept-specimen p, .room-heading p { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.28; }

.editorial-button {
  border: 1px solid var(--carbon-ink);
  background: var(--acid-green);
  color: var(--carbon-ink);
  padding: 10px 14px;
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--carbon-ink);
}
.editorial-button:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--carbon-ink); }

.footnote-thread {
  position: absolute;
  left: 9%;
  bottom: 11%;
  display: flex;
  gap: 13px;
  align-items: center;
  color: var(--annotation-violet);
  font-size: 12px;
}
.footnote-thread:before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--annotation-violet); transform: translateY(-50%) scaleX(0); transform-origin: left; animation: threadDraw 4s ease forwards infinite; }
.footnote-thread span { background: var(--proof-paper); z-index: 1; padding: 0 4px; }

.room-heading { max-width: 960px; margin-bottom: 32px; }
.room-heading h2 { color: var(--proof-paper); font-size: clamp(56px, 10vw, 134px); line-height: .82; }
.room-heading p { max-width: 760px; color: rgba(244,240,230,.78); }
.chapter-symbol { color: var(--acid-green); font-size: 18px; }
.skewed { transform: rotate(-1deg); }

.naming-table { min-height: 62vh; padding: 5vw; }
.concept-specimen {
  position: relative;
  display: inline-block;
  background: var(--proof-paper);
  color: var(--carbon-ink);
  border: 1px solid rgba(36,33,38,.7);
  padding: 22px;
  box-shadow: 7px 9px 0 rgba(36,33,38,.18);
}
.specimen-large { width: min(560px, 55vw); transform: rotate(-2deg); }
.specimen-small { width: 340px; margin-left: 5vw; transform: rotate(3deg) translateY(80px); }
.strike { text-decoration: line-through var(--redaction-rust) .18em; }
.proof-mark { color: var(--acid-green); background: var(--carbon-ink); padding: 5px 9px; }
.movable-type { position: absolute; right: 6%; top: 14%; display: grid; grid-template-columns: repeat(3, 56px); gap: 7px; }
.movable-type span { display: grid; place-items: center; height: 56px; background: var(--carbon-ink); color: var(--proof-paper); font-family: var(--display); font-size: 34px; box-shadow: inset 0 0 0 1px rgba(244,240,230,.18); }
.glossary-ribbon { position: absolute; left: 9%; bottom: 7%; background: var(--acid-green); color: var(--carbon-ink); padding: 12px 18px; transform: rotate(.8deg); }

.clipping-stage { min-height: 70vh; position: relative; }
.clipping-stage article { position: absolute; max-width: 360px; }
.rotate-left { left: 5%; top: 10%; transform: rotate(-5deg); }
.rotate-right { right: 9%; bottom: 11%; transform: rotate(5deg); }
.blue-plate { box-shadow: 9px 9px 0 rgba(46,94,170,.38); }
.fossil { left: 38%; top: 35%; width: 370px; background: linear-gradient(180deg, var(--proof-paper), #ded7c9); }
.fossil:before { content: ''; position: absolute; inset: 28% 0 auto 0; height: 20px; background: rgba(163,58,43,.18); }
.citation-lines, .constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.citation-lines path, .constellation path { fill: none; stroke: var(--blueprint-blue); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawPath 7s ease-in-out infinite; }
.citation-lines path:nth-child(2), .constellation path:nth-child(2) { stroke: var(--annotation-violet); animation-delay: .8s; }

.weather-room { overflow: hidden; }
.weather-vellum { position: absolute; inset: 12vh 10vw 8vh 18vw; background: rgba(244,240,230,.08); border: 1px solid rgba(244,240,230,.2); transform: rotate(2deg); }
.weather-map { min-height: 58vh; padding: 46px; overflow: hidden; }
.ink-bloom { position: absolute; right: 12%; top: 13%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(109,74,255,.28), rgba(46,94,170,.17), transparent 70%); filter: blur(1px); }
.isobar { position: absolute; border: 1px solid var(--blueprint-blue); border-radius: 50%; font-family: var(--space); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--blueprint-blue); display: grid; place-items: center; }
.one { width: 55%; height: 38%; left: 8%; top: 17%; transform: rotate(-9deg); }
.two { width: 38%; height: 46%; right: 10%; bottom: 12%; transform: rotate(13deg); }
.three { width: 29%; height: 22%; left: 35%; bottom: 20%; transform: rotate(-22deg); }
.uncover { position: absolute; left: 9%; top: 18%; padding: 14px 22px; font-family: var(--space); text-transform: uppercase; letter-spacing: .13em; animation: uncover 4s ease-in-out infinite; }
.forecast-copy { position: absolute; left: 9%; bottom: 9%; max-width: 640px; font-size: clamp(24px, 3.4vw, 52px); line-height: 1; font-family: var(--display); letter-spacing: -.04em; }

.well-board { position: relative; min-height: 70vh; border: 1px solid rgba(244,240,230,.22); background: rgba(244,240,230,.04); }
.footnote-node {
  position: absolute;
  border: 1px solid var(--proof-paper);
  background: var(--carbon-ink);
  color: var(--proof-paper);
  padding: 12px 15px;
  font-family: var(--space);
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(109,74,255,.35);
}
.footnote-node strong { color: var(--acid-green); margin-right: 8px; }
.node-one { left: 8%; top: 16%; }
.node-two { left: 31%; top: 52%; }
.node-three { right: 30%; top: 26%; }
.node-four { right: 8%; bottom: 22%; }
.note-receipt { position: absolute; left: 8%; bottom: 8%; max-width: 560px; background: var(--proof-paper); color: var(--carbon-ink); padding: 18px; font-size: 22px; box-shadow: 8px 8px 0 var(--annotation-violet); }

.tomorrow-room { background: radial-gradient(circle at 50% 48%, rgba(200,255,61,.12), transparent 35rem); }
.final-room { min-height: 80vh; width: 100%; }
.type-cabinet { display: flex; flex-wrap: wrap; gap: 12px; max-width: 980px; margin: 4vh 0; }
.word-tile { background: var(--carbon-ink); color: var(--proof-paper); border: 1px solid rgba(244,240,230,.3); padding: 18px 20px; font-family: var(--display); font-size: clamp(22px, 3vw, 42px); cursor: pointer; box-shadow: inset 0 -7px 0 rgba(0,0,0,.3); transition: color .2s ease, transform .2s ease, border-color .2s ease; }
.word-tile.active, .word-tile:hover { color: var(--acid-green); border-color: var(--acid-green); transform: translateY(-5px) rotate(-1deg); }
.release-slip { max-width: 680px; transform: rotate(.8deg); }

.is-stamping { animation: stamp .38s ease; }
.is-rewriting { opacity: .28; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }

@keyframes cropPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; filter: drop-shadow(0 0 4px var(--acid-green)); } }
@keyframes revealBar { 0%,100% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 68% 0 0); } }
@keyframes threadDraw { 0% { transform: translateY(-50%) scaleX(0); } 45%,100% { transform: translateY(-50%) scaleX(1); } }
@keyframes drawPath { 0% { stroke-dashoffset: 900; } 48%,100% { stroke-dashoffset: 0; } }
@keyframes uncover { 0%,100% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 0 0 64%); } }
@keyframes stamp { 0% { transform: scale(1) rotate(.8deg); } 45% { transform: scale(.94) rotate(.8deg); box-shadow: 2px 2px 0 var(--redaction-rust); } 100% { transform: scale(1) rotate(.8deg); } }

@media (max-width: 820px) {
  .index-ruler { left: 0; width: 42px; }
  .ruler-mark em, .ruler-title { display: none; }
  .room { padding-left: 58px; padding-right: 18px; }
  .hero-sheet { padding: 28px; }
  .hero-sheet .definition-plate { position: relative; width: auto; right: auto; bottom: auto; margin-top: 16vh; }
  .wordmark { font-size: 24vw; }
  .specimen-small, .specimen-large { width: 100%; margin: 18px 0; transform: none; }
  .movable-type { position: relative; right: auto; top: auto; margin-top: 28px; }
  .glossary-ribbon { position: relative; left: auto; bottom: auto; display: block; margin-top: 22px; }
  .clipping-stage article { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 22px 0; transform: none; }
  .citation-lines { opacity: .25; }
}