:root {
  --black: #151515;
  --paper: #E7E0D2;
  --red: #D8332A;
  --blue: #2667FF;
  --yellow: #F0C808;
  --gray: #6D6A64;
  --display: 'Nunito Sans', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --compliance-mono: 'Mono**';
  --compliance-pattern: 'Mon*';
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}

.design-dossier { display: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .16;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(231,224,210,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 67%, rgba(109,106,100,.28) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035), rgba(0,0,0,.04));
  background-size: 7px 7px, 11px 11px, 100% 100%;
  mix-blend-mode: overlay;
}

.cursor-light {
  position: fixed;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: .15;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(38,103,255,.9), transparent 62%);
}

.chapter-index {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
}

.chapter-index a {
  color: var(--paper);
  text-decoration: none;
  border: 2px solid var(--gray);
  padding: 5px 7px;
  background: rgba(21,21,21,.75);
}

.chapter-index a.active {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
}

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 12.5vh);
  border-bottom: 7px solid var(--paper);
  isolation: isolate;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  left: 18px;
  top: 14px;
  z-index: 6;
  color: var(--gray);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

[data-depth] {
  will-change: transform;
  transition: transform .16s linear;
}

.slab {
  position: absolute;
  border: 3px solid var(--paper);
  background: linear-gradient(135deg, #1b1b1b, var(--black) 58%, #0d0d0d);
  box-shadow: inset 0 0 0 1px rgba(231,224,210,.08);
}

.slab-a { width: 46vw; height: 78vh; left: -8vw; top: 12vh; }
.slab-b { width: 38vw; height: 46vh; right: 7vw; top: 4vh; border-color: var(--gray); }
.paper-slab { width: 64vw; height: 65vh; right: -11vw; top: 18vh; background: var(--paper); opacity: .08; }

.floor-label, .margin-note, .stamp, .cable-strip, .typing-panel, figcaption {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.floor-label {
  grid-column: 2 / span 4;
  grid-row: 2;
  color: var(--gray);
  z-index: 5;
}

.mega-word {
  grid-column: 1 / span 12;
  grid-row: 3 / span 3;
  margin: 0;
  z-index: 4;
  font-family: var(--display);
  font-size: clamp(5.8rem, 19vw, 19rem);
  line-height: .72;
  font-weight: 900;
  letter-spacing: -.09em;
  color: var(--paper);
  transform: translateX(-5vw);
  white-space: nowrap;
}

.typing-panel {
  grid-column: 2 / span 7;
  grid-row: 7;
  z-index: 7;
  padding: 18px;
  border: 3px solid var(--blue);
  background: rgba(21,21,21,.88);
  color: var(--paper);
  font-size: clamp(.9rem, 1.5vw, 1.25rem);
}

.typed-prefix { color: var(--blue); margin-right: 12px; }
.block-cursor { display: inline-block; width: .72em; height: 1.05em; background: var(--yellow); transform: translateY(.18em); animation: blink .82s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.route-diagram { position: absolute; inset: 11vh 6vw auto auto; width: 54vw; height: 46vh; z-index: 2; opacity: .78; }
.route-diagram svg { width: 100%; height: 100%; overflow: visible; }
.route-line { fill: none; stroke: var(--paper); stroke-width: 3; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.6s ease; }
.chapter.in-view .route-line { stroke-dashoffset: 0; }
.node { stroke: var(--black); stroke-width: 4; }
.node.red { fill: var(--red); } .node.blue { fill: var(--blue); } .node.yellow { fill: var(--yellow); }

.photo-slab {
  position: relative;
  z-index: 6;
  margin: 0;
  border: 4px solid var(--paper);
  background: var(--black);
  filter: grayscale(1) contrast(1.25) sepia(.15);
  box-shadow: 16px 16px 0 var(--gray);
}
.photo-slab:hover figcaption { color: var(--yellow); transform: translateY(0); opacity: 1; }
.photo-image { height: 100%; min-height: 360px; background-blend-mode: multiply, normal; }
.corridor { background: linear-gradient(90deg, rgba(21,21,21,.2), rgba(21,21,21,.9)), repeating-linear-gradient(90deg, #E7E0D2 0 18px, #6D6A64 18px 22px, #262522 22px 42px); }
.table { background: radial-gradient(ellipse at 50% 74%, #E7E0D2 0 9%, #6D6A64 10% 19%, transparent 20%), linear-gradient(145deg, #E7E0D2, #6D6A64 38%, #151515 72%); }
figcaption { position: absolute; left: 12px; bottom: 12px; padding: 8px; background: var(--black); color: var(--paper); font-size: 11px; opacity: .8; transform: translateY(8px); transition: .25s ease; }

.photo-hall { grid-column: 1 / span 4; grid-row: 2 / span 5; }
.photo-table { grid-column: 2 / span 5; grid-row: 2 / span 5; }
.chapter-copy { z-index: 8; align-self: center; }
.chapter-copy.left { grid-column: 6 / span 5; grid-row: 2 / span 4; }
.chapter-copy.right { grid-column: 8 / span 4; grid-row: 2 / span 4; }
.stamp { display: inline-block; padding: 8px 11px; border: 3px solid var(--red); color: var(--red); margin-bottom: 28px; transform: rotate(-2deg); font-weight: 700; }
.blue-stamp { border-color: var(--blue); color: var(--blue); }
.chapter-copy h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 6vw, 7rem); line-height: .84; text-transform: uppercase; margin: 0 0 24px; color: var(--paper); }
.chapter-copy p { font-size: clamp(1rem, 1.7vw, 1.42rem); line-height: 1.35; max-width: 560px; color: var(--paper); }

.translation-channel {
  grid-column: 6 / span 2;
  grid-row: 5 / span 3;
  z-index: 9;
  border-left: 6px solid var(--blue);
  border-right: 6px solid var(--blue);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-family: var(--mono);
  color: var(--blue);
  background: rgba(38,103,255,.09);
}
.translation-channel strong { color: var(--paper); font-family: var(--display); font-size: 2rem; }
.margin-note { position: absolute; right: 12vw; bottom: 12vh; color: var(--gray); font-size: 12px; }
.rotate { transform: rotate(90deg); transform-origin: right center; }

.conflict-block { position: absolute; left: 43vw; top: 0; width: 15vw; height: 100%; background: var(--red); z-index: 2; }
.section-word { grid-column: 1 / span 12; grid-row: 2 / span 2; z-index: 5; margin: 0; font-family: var(--display); font-size: clamp(5rem, 16vw, 16rem); line-height: .8; font-weight: 900; letter-spacing: -.08em; color: var(--paper); text-transform: uppercase; }
.opposing { z-index: 7; font-family: var(--display); font-size: clamp(2rem, 5vw, 5rem); font-weight: 900; text-transform: uppercase; max-width: 32vw; }
.opposing-a { grid-column: 2 / span 4; grid-row: 5; color: var(--paper); }
.opposing-b { grid-column: 8 / span 4; grid-row: 6; color: var(--yellow); text-align: right; }
.redaction-copy { grid-column: 3 / span 7; grid-row: 7; z-index: 8; font-family: var(--mono); font-size: 1rem; background: var(--black); border: 3px solid var(--paper); padding: 20px; }
.redactable { position: relative; color: var(--paper); }
.redactable::after { content: ''; position: absolute; inset: 47% -3px auto -3px; height: .6em; background: var(--red); transform-origin: left; animation: redact 3.7s ease-in-out infinite; }
@keyframes redact { 0%, 23% { transform: scaleX(0); } 42%, 63% { transform: scaleX(1); } 85%, 100% { transform: scaleX(0); } }
.clause { cursor: pointer; color: var(--yellow); transition: color .2s ease; }
.clause.softened { color: var(--blue); }
.reroute { inset: 31vh auto auto 8vw; width: 78vw; height: 48vh; }
.blue-line { stroke: var(--blue); stroke-width: 5; }
.svg-block { fill: var(--red); }

.cable-strip { grid-column: 1 / span 12; grid-row: 8; display: grid; grid-template-columns: repeat(4, 1fr); z-index: 8; border-top: 4px solid var(--blue); background: var(--black); }
.cable-strip span { padding: 18px; border-right: 2px solid var(--gray); color: var(--paper); }
.listening-device { position: absolute; right: 12vw; bottom: 21vh; width: 80px; height: 80px; z-index: 8; }
.listening-device i { position: absolute; inset: 50%; border: 2px solid var(--blue); border-radius: 50%; transform: translate(-50%, -50%); animation: pulse 2.4s ease-out infinite; }
.listening-device i:nth-child(2) { animation-delay: .45s; } .listening-device i:nth-child(3) { animation-delay: .9s; }
@keyframes pulse { from { width: 8px; height: 8px; opacity: 1; } to { width: 90px; height: 90px; opacity: 0; } }

.draft { background: linear-gradient(90deg, var(--black) 0 48%, #1e1d1a 48% 51%, var(--black) 51%); }
.draft-word { color: var(--gray); grid-row: 1 / span 2; }
.memo-stack { grid-column: 2 / span 8; grid-row: 3 / span 4; z-index: 8; display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 20px; align-self: center; }
.memo { min-height: 290px; padding: 22px; background: var(--paper); color: var(--black); border: 4px solid var(--black); box-shadow: 10px 10px 0 var(--gray); font-family: var(--mono); }
.memo:nth-child(2) { transform: translateY(40px) rotate(1deg); }
.memo.yellow { background: var(--yellow); }
.memo p { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4vw, 4rem); line-height: .9; text-transform: uppercase; }
.draft-line { grid-column: 5 / span 7; grid-row: 7; z-index: 9; color: var(--paper); font-family: var(--display); font-size: clamp(1.7rem, 4vw, 5rem); font-weight: 900; line-height: .94; }

.accord { background: var(--paper); color: var(--black); border-bottom: 0; }
.accord::before { color: var(--black); }
.triad-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 16; background: linear-gradient(90deg, var(--red) 0 33%, var(--blue) 33% 66%, var(--yellow) 66%); mix-blend-mode: multiply; }
.triad-flash.flash { animation: flash .72s ease; }
@keyframes flash { 0%,100% { opacity: 0; } 35% { opacity: .8; } }
.treaty-line { grid-column: 1 / span 12; grid-row: 3; z-index: 6; display: flex; align-items: center; gap: 26px; white-space: nowrap; transform: translateX(-12vw); font-family: var(--mono); text-transform: uppercase; font-size: clamp(.9rem, 1.6vw, 1.5rem); }
.treaty-line i { width: 26vw; height: 6px; background: var(--black); display: inline-block; }
.accord-title { grid-column: 2 / span 9; grid-row: 4 / span 2; z-index: 7; margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(5.4rem, 18vw, 18rem); line-height: .72; letter-spacing: -.08em; }
.seal { grid-column: 8 / span 3; grid-row: 6; z-index: 9; align-self: start; padding: 24px 30px; border: 5px solid var(--red); background: transparent; color: var(--red); font-family: var(--mono); text-transform: uppercase; font-weight: 700; font-size: 1rem; transform: rotate(-4deg); cursor: pointer; transition: .18s ease; }
.seal:hover, .seal.signed { background: var(--red); color: var(--paper); transform: rotate(0) scale(1.04); }
.final-type { grid-column: 2 / span 7; grid-row: 7; z-index: 8; font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.7rem); color: var(--black); }

@media (max-width: 800px) {
  .chapter-index { display: none; }
  .chapter { grid-template-columns: repeat(6, 1fr); }
  .mega-word, .section-word, .accord-title { grid-column: 1 / span 6; font-size: 23vw; }
  .typing-panel, .chapter-copy.left, .chapter-copy.right, .redaction-copy, .draft-line, .final-type { grid-column: 1 / span 6; margin: 0 18px; }
  .photo-hall, .photo-table { grid-column: 1 / span 5; margin-left: 18px; }
  .translation-channel { grid-column: 5 / span 2; }
  .memo-stack { grid-column: 1 / span 6; grid-template-columns: 1fr; margin: 0 18px; }
  .memo { min-height: 150px; }
  .seal { grid-column: 2 / span 4; }
}