:root {
  /* Compliance tokens from DESIGN.md: Interpret black-and-white pattern systems: zebra stair-steps Grotes Grotesk** from summaries */
  --abyss: #050505;
  --ivory: #F4F1E8;
  --graphite: #3A3A36;
  --flash: #FFFFFF;
  --acid: #D7FF2F;
  --charcoal: #111111;
  --split: 43%;
  --lean: 0px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--abyss); color: var(--ivory); overflow-x: hidden; }

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  cursor: crosshair;
}

button { font: inherit; color: inherit; }

.archive-stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(330px, var(--split)) 34px 1fr;
  background:
    radial-gradient(circle at 8% 12%, rgba(244,241,232,.11) 0 2px, transparent 3px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--abyss), var(--charcoal) 43%, var(--ivory) 43%, var(--ivory) calc(43% + 2px), var(--abyss) calc(43% + 2px));
  transition: grid-template-columns 700ms cubic-bezier(.77,0,.18,1);
}

.archive-stage.scene-wide { grid-template-columns: minmax(250px, 32%) 34px 1fr; }
.archive-stage.scene-crush { grid-template-columns: minmax(430px, 61%) 34px 1fr; }

.index-pane, .evidence-pane { min-height: 100vh; position: relative; overflow: hidden; }

.index-pane {
  padding: 24px clamp(18px, 3vw, 42px);
  border-right: 4px solid var(--ivory);
}

.fragment-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--graphite);
  border-bottom: 7px solid var(--ivory);
  padding-bottom: 14px;
}

.scene-index {
  position: absolute;
  inset: 82px clamp(18px, 3vw, 42px) 110px clamp(18px, 3vw, 42px);
  opacity: 0;
  transform: translateX(-15%);
  transition: transform 620ms cubic-bezier(.77,0,.18,1), opacity 280ms linear;
}

.scene-index.active { opacity: 1; transform: translateX(0); }

.chapter-kicker {
  margin: 0 0 18px;
  display: inline-block;
  padding: 8px 12px;
  background: var(--ivory);
  color: var(--abyss);
  font-family: "Archivo Black", Impact, sans-serif;
  letter-spacing: .14em;
  font-size: clamp(11px, 1vw, 15px);
  transform: rotate(-2deg);
}

h1, h2 {
  margin: 0;
  font-family: "Bungee", Impact, fantasy;
  line-height: .82;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

h1 { font-size: clamp(88px, 17vw, 242px); text-shadow: 10px 10px 0 var(--graphite); }
h2 { font-size: clamp(58px, 11vw, 170px); text-shadow: 8px 8px 0 var(--graphite); }

.taxonomy-stack { margin-top: 28px; display: grid; gap: 8px; max-width: 530px; }

.entry-tab {
  appearance: none;
  border: 3px solid var(--ivory);
  background: var(--charcoal);
  color: var(--ivory);
  padding: 13px 14px;
  text-align: left;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(12px, 1.4vw, 18px);
  letter-spacing: .09em;
  text-transform: uppercase;
  transform: translateX(0);
  transition: transform 240ms ease, background 240ms ease, color 240ms ease;
}

.entry-tab b { color: var(--acid); margin-right: 12px; }
.entry-tab.active, .entry-tab:hover { transform: translateX(18px); background: var(--ivory); color: var(--abyss); }
.entry-tab.active b, .entry-tab:hover b { color: var(--abyss); }

.index-copy {
  max-width: 470px;
  margin: 30px 0 0;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.08;
  color: var(--ivory);
  border-left: 12px solid var(--acid);
  padding-left: 18px;
}

.spine {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  background: var(--ivory);
  color: var(--abyss);
  transform: translateX(var(--lean));
  transition: transform 120ms linear;
  box-shadow: -7px 0 0 var(--acid), 7px 0 0 var(--charcoal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.evidence-pane {
  background: var(--charcoal);
  border-left: 2px solid var(--graphite);
}

.photo-mask {
  position: absolute;
  inset: 28px 28px 102px 28px;
  border: 8px solid var(--ivory);
  overflow: hidden;
  background: var(--abyss);
  clip-path: inset(0 0 0 var(--reveal, 0%));
  transition: clip-path 760ms cubic-bezier(.77,0,.18,1);
}

.photo-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(22%);
  transition: opacity 240ms linear, transform 760ms cubic-bezier(.77,0,.18,1);
}
.photo-scene.active { opacity: 1; transform: translateX(0); }

.photo {
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.55);
  background-blend-mode: difference, multiply, normal;
}

.photo-archive { background: linear-gradient(100deg, transparent 0 21%, rgba(255,255,255,.93) 22% 24%, transparent 25%), repeating-linear-gradient(90deg, #050505 0 21px, #F4F1E8 22px 28px, #111111 29px 62px), radial-gradient(circle at 70% 38%, #FFFFFF 0 5%, #3A3A36 6% 14%, #050505 15%); }
.photo-stair { background: repeating-linear-gradient(145deg, #FFFFFF 0 15px, #050505 16px 40px), linear-gradient(50deg, #111111 0 30%, #F4F1E8 31% 35%, #050505 36% 100%); }
.photo-folder { background: linear-gradient(12deg, #050505 0 20%, #F4F1E8 21% 44%, #111111 45%), repeating-linear-gradient(0deg, rgba(255,255,255,.8) 0 3px, transparent 4px 18px); }
.photo-window { background: radial-gradient(circle at 24% 32%, #FFFFFF 0 3%, transparent 4%), repeating-linear-gradient(90deg, #050505 0 48px, #3A3A36 49px 52px), linear-gradient(135deg, #111111, #F4F1E8 50%, #050505 51%); }
.photo-ghost { background: radial-gradient(ellipse at 55% 42%, #F4F1E8 0 10%, transparent 12%), repeating-linear-gradient(20deg, #050505 0 28px, #FFFFFF 29px 33px, #111111 34px 70px); }

.wiki-reveal {
  position: absolute;
  right: clamp(16px, 5vw, 82px);
  top: clamp(18px, 8vw, 90px);
  font-family: "Bungee", Impact, fantasy;
  font-size: clamp(76px, 16vw, 230px);
  letter-spacing: -.09em;
  color: var(--ivory);
  -webkit-text-stroke: 3px var(--abyss);
  clip-path: inset(0 100% 0 0);
  animation: wikiSlide 1600ms 250ms cubic-bezier(.77,0,.18,1) forwards;
}

@keyframes wikiSlide { to { clip-path: inset(0 0 0 0); } }

.evidence-note {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  bottom: clamp(18px, 5vw, 62px);
  width: min(460px, calc(100% - 42px));
  padding: 18px;
  background: var(--ivory);
  color: var(--abyss);
  border: 5px solid var(--abyss);
  box-shadow: 12px 12px 0 var(--acid);
}

.evidence-note b, .margin-note span, .annotation-rail button { font-family: "Archivo Black", Impact, sans-serif; letter-spacing: .12em; }
.evidence-note p { margin: 10px 0 0; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.05; }

.redaction-layer { position: absolute; inset: 28px 28px 102px 28px; pointer-events: none; overflow: hidden; }
.redaction-layer span { position: absolute; left: 0; right: 0; height: 34px; background: var(--charcoal); transform: translateX(0); transition: transform 720ms cubic-bezier(.77,0,.18,1); }
.redaction-layer span:nth-child(1) { top: 16%; width: 72%; }
.redaction-layer span:nth-child(2) { top: 34%; left: 18%; }
.redaction-layer span:nth-child(3) { top: 58%; width: 64%; }
.redaction-layer span:nth-child(4) { top: 78%; left: 36%; }
.archive-stage.unmasked .redaction-layer span { transform: translateX(82%); }

.annotation-rail {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.annotation-rail button {
  border: 3px solid var(--ivory);
  background: var(--abyss);
  color: var(--ivory);
  padding: 12px 14px;
  font-size: 12px;
}
.annotation-rail button:hover, .annotation-rail button.active { background: var(--acid); color: var(--abyss); border-color: var(--acid); }

.margin-note {
  position: absolute;
  right: 24px;
  top: 52%;
  width: 240px;
  padding: 16px;
  background: var(--abyss);
  border: 4px solid var(--acid);
  transform: translateX(calc(100% + 40px)) rotate(2deg);
  transition: transform 520ms cubic-bezier(.77,0,.18,1);
}
.margin-note.visible { transform: translateX(0) rotate(2deg); }
.margin-note span { display: block; color: var(--acid); font-size: 11px; }
.margin-note strong { font-family: "Bungee", Impact, fantasy; font-size: 28px; line-height: .9; display: block; margin-top: 8px; }
.margin-note p { margin: 10px 0 0; line-height: 1.05; }

.flash { position: fixed; inset: 0; background: var(--flash); opacity: 0; pointer-events: none; z-index: 20; }
.flash.hit { animation: flashHit 360ms ease-out; }
@keyframes flashHit { 0% { opacity: 0; } 18% { opacity: .82; } 100% { opacity: 0; } }

.memphis-field i { position: absolute; display: block; pointer-events: none; }
.dot-moon { width: 112px; height: 112px; border-radius: 50%; right: 10%; bottom: 18%; background: radial-gradient(circle, var(--ivory) 0 3px, transparent 4px) 0 0 / 13px 13px; border: 4px solid var(--ivory); animation: rollMoon 9s linear infinite; }
.zigzag { left: 6%; bottom: 8%; width: 160px; height: 40px; background: linear-gradient(135deg, transparent 0 35%, var(--acid) 36% 48%, transparent 49%), linear-gradient(45deg, transparent 0 35%, var(--acid) 36% 48%, transparent 49%); background-size: 42px 40px; }
.checker { right: 14%; top: 24%; width: 116px; height: 116px; background: conic-gradient(var(--ivory) 25%, var(--abyss) 0 50%, var(--ivory) 0 75%, var(--abyss) 0) 0 0 / 29px 29px; transform: rotate(8deg); border: 3px solid var(--ivory); }
.triangle { left: 58%; top: 14%; width: 0; height: 0; border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 58px solid var(--acid); transform: rotate(-18deg); }
.squiggle { left: 48%; bottom: 29%; width: 180px; height: 36px; border-top: 12px solid var(--ivory); border-radius: 50%; transform: rotate(-22deg); }
@keyframes rollMoon { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .archive-stage, .archive-stage.scene-wide, .archive-stage.scene-crush { grid-template-columns: 1fr; grid-template-rows: minmax(54vh, auto) 28px minmax(70vh, auto); }
  .spine { min-height: 28px; writing-mode: horizontal-tb; flex-direction: row; box-shadow: 0 -5px 0 var(--acid), 0 5px 0 var(--charcoal); }
  .index-pane, .evidence-pane { min-height: 54vh; }
  .scene-index { inset: 76px 18px 70px; }
  .photo-mask, .redaction-layer { inset: 18px 18px 90px; }
  .annotation-rail { left: 18px; right: 18px; bottom: 18px; }
}