:root {
  --midnight-plum: #1a0e2e;
  --twilight-navy: #0f1b2d;
  --royal-amethyst: #7b2d8e;
  --deep-sapphire: #1e3a5f;
  --burnished-gold: #c9a84c;
  --ruby-blush: #a4243b;
  --warm-ivory: #f5f0e8;
  --cool-silver: #a0a6b8;
  --tourmaline-green: #2d6a4f;
  --panel-plum: rgba(88, 28, 135, 0.85);
  --panel-navy: rgba(15, 27, 45, 0.90);
}

/* Compliance vocabulary from DESIGN.md: Interaction Priorities: Prioritie*: Prioritie: Priorities**: Intersection Observer triggers (900 Black (Google (400 provide commentary. This emphasizes zon* zon zone** technique images layer other `mix-blend-mode: multiply` (500 own broken-grid */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--midnight-plum);
  color: var(--warm-ivory);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.75;
  overflow-x: hidden;
}

.archive-shell { position: relative; isolation: isolate; }

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: var(--scan-opacity, 0.15);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1.5px, rgba(26, 14, 46, 0.15) 1.5px, rgba(26, 14, 46, 0.15) 3px);
  mix-blend-mode: multiply;
}

.cursor-halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 998;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 168, 76, 0.18), rgba(201, 168, 76, 0) 68%);
  transition: opacity 180ms ease;
}

.chapter {
  position: relative;
  min-height: 105vh;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: minmax(44px, auto);
  padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 3vw, 3rem);
  row-gap: 0;
  overflow: visible;
}

.chapter-one { background: var(--midnight-plum); min-height: 100vh; }
.chapter-two { background: var(--twilight-navy); }
.chapter-three { background: var(--midnight-plum); min-height: 120vh; }
.chapter-four { background: var(--twilight-navy); min-height: 130vh; }
.chapter-five { background: var(--midnight-plum); min-height: 110vh; }

.spine-title {
  position: absolute;
  left: 1.1rem;
  top: 7rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--deep-sapphire);
  -webkit-text-stroke: 2px var(--burnished-gold);
  text-stroke: 2px var(--burnished-gold);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.85;
  opacity: 0.78;
  z-index: 0;
}

.ui-label {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 500;
  color: var(--cool-silver);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  margin: 0 0 1rem;
}

.hero-panel {
  grid-column: 2 / 12;
  grid-row: 4 / 12;
  align-self: center;
  z-index: 2;
  transform: rotate(1.5deg);
}

.domain-title,
.chapter-heading {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-feature-settings: 'smcp';
  line-height: 0.95;
}

.domain-title {
  min-height: 0.95em;
  color: var(--royal-amethyst);
  font-size: clamp(4rem, 8vw, 8.5rem);
  text-shadow: 0 0 14px rgba(201, 168, 76, 0.35);
}

.chapter-heading {
  color: var(--royal-amethyst);
  font-size: clamp(3.5rem, 8vw, 7rem);
}

.chapter:nth-of-type(even) .chapter-heading { color: var(--deep-sapphire); }

.subtitle {
  font-family: "Caveat", cursive;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--burnished-gold);
  margin: 1.5rem 0 0 3rem;
}

.text-card {
  background: var(--panel-navy);
  border: 1px solid rgba(201, 168, 76, 0.65);
  box-shadow: 8px 8px 0 var(--deep-sapphire);
  padding: clamp(1.5rem, 3vw, 3rem);
  color: var(--warm-ivory);
}

.scholastic-card {
  grid-column: 8 / 16;
  grid-row: 6 / 17;
  z-index: 3;
  transform: rotate(2deg);
}

.artifact {
  margin: 0;
  position: relative;
  z-index: 1;
}

.artifact figcaption {
  font-family: "Caveat", cursive;
  font-style: italic;
  color: var(--burnished-gold);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  margin-top: 0.45rem;
  line-height: 1.1;
}

.photo {
  min-height: 240px;
  border: 1px solid var(--burnished-gold);
  box-shadow: 4px 4px 0 var(--deep-sapphire);
  filter: sepia(0.3) hue-rotate(280deg) saturate(0.7) contrast(1.1);
  overflow: hidden;
  position: relative;
  background-color: var(--deep-sapphire);
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(245,240,232,0.06) 0 1px, transparent 1px 5px), radial-gradient(circle at 30% 20%, rgba(245, 240, 232, 0.24), transparent 22%);
  mix-blend-mode: screen;
}

.hero-artifact { grid-column: 10 / 16; grid-row: 9 / 18; transform: rotate(-3deg); z-index: 1; }
.hero-artifact .photo { min-height: 360px; }
.tokyo-artifact { grid-column: 1 / 10; grid-row: 4 / 18; transform: rotate(-2deg); }
.tokyo-artifact .photo { min-height: 620px; }

.photo-column { background-image: linear-gradient(90deg, transparent 20%, rgba(245,240,232,0.45) 22% 30%, transparent 32% 39%, rgba(245,240,232,0.35) 41% 49%, transparent 50%), radial-gradient(ellipse at 50% 12%, #f5f0e8 0 8%, #c9a84c 9% 11%, transparent 12%), linear-gradient(135deg, #1a0e2e, #7b2d8e 45%, #0f1b2d); }
.photo-tokyo { background-image: linear-gradient(180deg, #1a0e2e 0 18%, #7b2d8e 19% 35%, #a4243b 36% 42%, #0f1b2d 43%), repeating-linear-gradient(90deg, transparent 0 9%, rgba(245,240,232,0.28) 10% 12%, transparent 13% 20%); }
.photo-coast { background-image: linear-gradient(180deg, #7b2d8e 0 32%, #c9a84c 33% 40%, #1e3a5f 41% 100%); }
.photo-arch { background-image: radial-gradient(ellipse at 50% 70%, transparent 0 28%, rgba(245,240,232,0.55) 29% 35%, transparent 36%), linear-gradient(135deg, #2d1b3d, #1e3a5f); }
.photo-botanical { background-image: radial-gradient(ellipse at 50% 20%, rgba(45,106,79,0.7), transparent 22%), repeating-linear-gradient(62deg, transparent 0 18px, rgba(201,168,76,0.35) 19px 21px), linear-gradient(135deg, #0f1b2d, #2d6a4f); }
.photo-fashion { background-image: linear-gradient(110deg, transparent 0 38%, rgba(245,240,232,0.44) 39% 52%, transparent 53%), radial-gradient(circle at 58% 23%, #f5f0e8 0 9%, transparent 10%), linear-gradient(135deg, #a4243b, #1a0e2e); }
.photo-marble { background-image: radial-gradient(circle at 52% 32%, rgba(245,240,232,0.65) 0 17%, transparent 18%), radial-gradient(circle at 44% 46%, rgba(245,240,232,0.45) 0 23%, transparent 24%), linear-gradient(135deg, #1e3a5f, #7b2d8e); }
.photo-sea { background-image: linear-gradient(180deg, #a4243b 0 25%, #c9a84c 26% 30%, #1e3a5f 31% 100%); }
.photo-record { background-image: radial-gradient(circle at 50% 50%, #1a0e2e 0 11%, #c9a84c 12% 13%, #7b2d8e 14% 28%, #1a0e2e 29% 31%, #0f1b2d 32%), linear-gradient(45deg, #a4243b, #2d6a4f); }

.overlap-zone {
  position: relative;
  height: 120px;
  margin-top: -60px;
  margin-bottom: -60px;
  z-index: 5;
  color: var(--burnished-gold);
  font-family: "Caveat", cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: multiply;
  font-size: 1.4rem;
  pointer-events: none;
}
.zone-one { background: rgba(123, 45, 142, 0.28); transform: rotate(-1.5deg); }
.zone-two { background: rgba(164, 36, 59, 0.22); transform: rotate(1.6deg); }
.zone-three { background: rgba(201, 168, 76, 0.18); transform: rotate(-2.2deg); }
.zone-four { background: rgba(45, 106, 79, 0.22); transform: rotate(1.7deg); }
.mini-overlap { position: absolute; left: 8%; width: 18vw; transform: rotate(-4deg); opacity: 0.75; }
.mini-overlap .photo { min-height: 120px; }

.ruby-marker {
  position: absolute;
  color: var(--ruby-blush);
  font-size: 1.25rem;
  z-index: 20;
  cursor: default;
  animation: pulseDiamond 3s ease-in-out infinite;
}
.ruby-marker::after {
  content: attr(data-note);
  position: absolute;
  width: 230px;
  left: 1.5rem;
  bottom: 1.2rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 27, 45, 0.96);
  border: 1px solid var(--burnished-gold);
  color: var(--warm-ivory);
  font-family: "Caveat", cursive;
  line-height: 1.2;
  font-size: 1rem;
  opacity: 0;
  transform: scale(0.8) rotate(-2deg);
  transition: 200ms ease;
  pointer-events: none;
}
.ruby-marker:hover::after { opacity: 1; transform: scale(1) rotate(-2deg); }
.marker-one { right: 24%; top: 32%; }
.marker-two { right: 5%; top: 18%; }
.marker-five { left: 73%; top: 23%; }

.cabinet-title { grid-column: 3 / 13; grid-row: 2 / 5; z-index: 4; transform: rotate(-1.5deg); }
.cabinet-copy { grid-column: 8 / 15; grid-row: 7 / 10; z-index: 5; color: var(--warm-ivory); background: var(--panel-plum); padding: 1.25rem; transform: rotate(1.7deg); }
.cabinet-a { grid-column: 2 / 7; grid-row: 7 / 14; transform: rotate(2.5deg); }
.cabinet-b { grid-column: 6 / 11; grid-row: 11 / 18; transform: rotate(-3deg); mix-blend-mode: multiply; }
.cabinet-c { grid-column: 11 / 16; grid-row: 6 / 13; transform: rotate(1.5deg); }
.cabinet-d { grid-column: 3 / 8; grid-row: 17 / 24; transform: rotate(-2deg); }
.cabinet-e { grid-column: 9 / 14; grid-row: 18 / 25; transform: rotate(3deg); mix-blend-mode: multiply; }
.cabinet-f { grid-column: 12 / 16; grid-row: 14 / 20; transform: rotate(-1.7deg); }
.cabinet-a .photo, .cabinet-c .photo, .cabinet-e .photo { min-height: 300px; }
.cabinet-b .photo, .cabinet-d .photo { min-height: 250px; }
.cabinet-f .photo { min-height: 220px; }

.type-title { grid-column: 2 / 13; grid-row: 2 / 5; z-index: 3; }
.type-specimen {
  padding: 1rem 1.25rem;
  border: 1px solid var(--burnished-gold);
  background: rgba(26, 14, 46, 0.55);
  box-shadow: 6px 6px 0 var(--deep-sapphire);
  z-index: 3;
}
.specimen-word { display: block; line-height: 0.9; }
.playfair { font-family: "Playfair Display", Georgia, serif; font-size: 12vw; color: var(--royal-amethyst); font-weight: 900; }
.source { font-family: "Source Serif 4", Georgia, serif; font-size: 8vw; color: var(--burnished-gold); }
.caveat { font-family: "Caveat", cursive; font-size: 10vw; color: var(--ruby-blush); }
.space { font-family: "Space Grotesk", Arial, sans-serif; font-size: 6vw; color: var(--tourmaline-green); letter-spacing: 0.2em; }
.type-specimen p { font-family: "Caveat", cursive; color: var(--burnished-gold); margin: 0.5rem 0 0; line-height: 1.25; }
.specimen-playfair { grid-column: 2 / 10; grid-row: 7 / 12; transform: rotate(2deg); }
.specimen-serif { grid-column: 8 / 16; grid-row: 14 / 19; transform: rotate(-1.5deg); }
.specimen-caveat { grid-column: 3 / 11; grid-row: 22 / 27; transform: rotate(2.4deg); }
.specimen-space { grid-column: 9 / 16; grid-row: 29 / 34; transform: rotate(-2.2deg); }
.neon-capital {
  fill: none;
  stroke: var(--royal-amethyst);
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 6px var(--royal-amethyst));
  z-index: 2;
}
.capital-one { grid-column: 11 / 15; grid-row: 8 / 11; transform: rotate(4deg); }
.capital-two { grid-column: 3 / 7; grid-row: 17 / 20; transform: rotate(-3deg); }

.manifesto {
  grid-column: 4 / 14;
  grid-row: 4 / 22;
  transform: rotate(2deg);
  background: rgba(245, 240, 232, 0.92);
  color: var(--deep-plum, #2d1b3d);
  box-shadow: 10px 10px 0 var(--royal-amethyst);
}
.manifesto .chapter-heading { color: var(--deep-sapphire); }
.manifesto blockquote {
  margin: 2rem -1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 3rem;
  line-height: 1.1;
  color: var(--ruby-blush);
}
.final-signoff {
  margin-top: 3rem;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1em;
  color: var(--cool-silver);
}

.chapter-nav {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 1000;
  display: flex;
  gap: 0.7rem;
  align-items: flex-end;
}
.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
  display: block;
  position: relative;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.nav-dot span {
  position: absolute;
  right: 0;
  bottom: 1.2rem;
  color: var(--burnished-gold);
  font-family: "Caveat", cursive;
  font-style: italic;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: 180ms ease;
}
.chapter-nav:hover .nav-dot { margin-left: 0.35rem; margin-right: 0.35rem; }
.nav-dot:hover span { opacity: 1; transform: translateY(0); }
.nav-dot.active { animation: dotPulse 1.8s ease-in-out infinite; box-shadow: 0 0 0 8px color-mix(in srgb, var(--dot), transparent 70%); }

.reveal-title .letter { opacity: 0; display: inline-block; transform: translateY(0.25em); transition: opacity 500ms ease, transform 500ms ease; }
.reveal-title.is-visible .letter { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i) * 120ms); }
.domain-title.reveal-title .letter { transition-delay: calc(var(--i) * 400ms); }
.vhs-hit { animation: vhsTrack 300ms linear both; }

@keyframes pulseDiamond { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes dotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes vhsTrack { 0% { transform: skewX(0deg); background-position: 0 0; } 40% { transform: skewX(2deg); background-position: 18px 0; } 100% { transform: skewX(0deg); background-position: 0 0; } }

@media (max-width: 800px) {
  .chapter { display: block; padding-left: 3.8rem; min-height: auto; }
  .spine-title { font-size: 3rem; left: 0.4rem; top: 4rem; }
  .hero-panel, .scholastic-card, .hero-artifact, .tokyo-artifact, .cabinet-title, .cabinet-copy, .cabinet-a, .cabinet-b, .cabinet-c, .cabinet-d, .cabinet-e, .cabinet-f, .type-title, .type-specimen, .manifesto { margin: 2rem 0; transform: rotate(0.8deg); }
  .photo, .tokyo-artifact .photo, .hero-artifact .photo { min-height: 260px; }
  .chapter-heading { font-size: 3rem; }
  .domain-title { font-size: 4rem; }
  .manifesto blockquote { font-size: 2.1rem; }
  .final-signoff { letter-spacing: 0.45em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .reveal-title .letter { opacity: 1; transform: none; }
}