:root {
  /* Design typography tokens: Space Mono* Mono** from Google Fonts only tiny hash fragments; implemented with local/system-safe fallback stack per assignment. */
  --black: #050509;
  --chalk: #F8F4E8;
  --lilac: #B96CFF;
  --vermilion: #FF3B30;
  --mint: #7CFFD4;
  --blue: #172033;
  --yellow: #FFE85A;
  --geo: Jost, Poppins, Futura, "Century Gothic", "Avenir Next", Arial, sans-serif;
  --poster: "League Spartan", "Arial Narrow", Impact, Jost, Poppins, sans-serif;
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--chalk);
  font-family: var(--geo);
  cursor: crosshair;
}

button { font: inherit; }

.concrete-grain,
.wall-walk::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(185, 108, 255, .16), transparent 18rem),
    radial-gradient(circle at 80% 70%, rgba(124, 255, 212, .10), transparent 24rem),
    linear-gradient(112deg, rgba(248,244,232,.035) 0 2px, transparent 2px 22px),
    linear-gradient(28deg, rgba(255,255,255,.025) 0 1px, transparent 1px 13px),
    var(--black);
}

.concrete-grain::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: .34;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(248,244,232,.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(87deg, transparent 0 11px, rgba(248,244,232,.035) 12px, transparent 13px);
  filter: blur(.4px);
  animation: grainDrift 11s steps(4) infinite;
}

.wall-walk { position: relative; z-index: 1; }

.spread {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(4rem, 1fr));
  isolation: isolate;
  border-bottom: 1px solid rgba(248,244,232,.12);
  background:
    radial-gradient(circle at 8% 86%, rgba(255, 59, 48, .15), transparent 16rem),
    linear-gradient(103deg, rgba(23,32,51,.82), rgba(5,5,9,.45) 42%, rgba(5,5,9,.94));
}

.spread::before {
  content: attr(data-word);
  position: absolute;
  left: -3vw;
  top: 4vh;
  font-family: var(--poster);
  font-size: clamp(5rem, 20vw, 22rem);
  font-weight: 900;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(248,244,232,.08);
  transform: rotate(-8deg);
  filter: blur(5px);
  z-index: -1;
}

.spread.is-focused::before { filter: blur(1px); }

.opening { background: radial-gradient(circle at 50% 45%, rgba(185,108,255,.2), transparent 22rem), var(--black); }
.descent { background: linear-gradient(128deg, var(--black), var(--blue) 56%, #090713); }
.compressed { background: radial-gradient(circle at 62% 47%, rgba(124,255,212,.12), transparent 18rem), linear-gradient(96deg, var(--blue), var(--black) 60%); }
.bridge { background: radial-gradient(circle at 74% 25%, rgba(185,108,255,.24), transparent 22rem), linear-gradient(115deg, #07070e, var(--blue)); }
.settle { background: radial-gradient(circle at 55% 66%, rgba(255,232,90,.14), transparent 20rem), linear-gradient(125deg, var(--black), #111018 55%, var(--blue)); }

.escape-lane {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .8;
}

.escape-lane span {
  position: absolute;
  left: -18vw;
  bottom: 6vh;
  width: 150vw;
  height: clamp(4px, .7vw, 10px);
  transform: rotate(-31deg);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--vermilion), var(--mint), transparent);
  box-shadow: 0 0 28px rgba(124,255,212,.55), 0 0 60px rgba(255,59,48,.22);
  mask-image: repeating-linear-gradient(90deg, #000 0 54px, transparent 54px 72px);
}

.progress-rail {
  position: fixed;
  right: clamp(.8rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.progress-mark {
  width: 3.1rem;
  height: 2.1rem;
  border: 1px solid rgba(248,244,232,.35);
  background: rgba(5,5,9,.45);
  color: var(--chalk);
  clip-path: polygon(8% 0, 100% 12%, 91% 100%, 0 86%);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.progress-mark span { font-family: var(--mono); font-size: .75rem; }
.progress-mark.is-active { background: var(--yellow); color: var(--black); transform: translateX(-.55rem) rotate(-5deg); }

.spray-cursor {
  position: fixed;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  opacity: .24;
  background: radial-gradient(circle, rgba(124,255,212,.42), rgba(185,108,255,.16) 36%, transparent 68%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
}

.tag-lockup {
  grid-column: 1 / 10;
  grid-row: 2 / 6;
  align-self: center;
  transform: rotate(-5deg);
  filter: blur(11px);
  opacity: .66;
  animation: openingFocus 2.2s ease forwards .2s;
}

.tag-lockup h1 {
  margin: 0;
  font-family: var(--poster);
  font-size: clamp(4.9rem, 15vw, 16rem);
  line-height: .72;
  letter-spacing: -.08em;
  color: var(--lilac);
  text-shadow: 0 0 26px rgba(185,108,255,.75), .06em .04em 0 var(--mint), -.035em .055em 0 var(--vermilion);
}

.tag-caption {
  margin: 1rem 0 0 7vw;
  max-width: 34rem;
  font-size: clamp(1.1rem, 2vw, 2rem);
  color: var(--chalk);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mono, .margin-stamp, .kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ghost { color: rgba(248,244,232,.56); }

.chapter-title {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  z-index: 4;
  align-self: start;
  transform: rotate(-3deg);
}

.chapter-title span {
  display: inline-block;
  padding: .35rem .6rem;
  margin-bottom: .6rem;
  font-family: var(--mono);
  color: var(--black);
  background: var(--yellow);
}

.chapter-title h2 {
  margin: 0;
  font-family: var(--poster);
  font-size: clamp(3.4rem, 9vw, 11rem);
  line-height: .8;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.slant-left { transform: rotate(4deg); grid-column: 6 / 13; text-align: right; }
.slant-right { transform: rotate(-7deg); grid-column: 1 / 8; }

.paste, .editorial-rail, .final-copy {
  z-index: 5;
  color: var(--black);
  background: var(--chalk);
  padding: clamp(1rem, 2vw, 1.6rem);
  box-shadow: 1rem 1rem 0 rgba(5,5,9,.45), 0 0 22px rgba(248,244,232,.12);
  clip-path: polygon(0 7%, 96% 0, 100% 88%, 4% 100%);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.35;
}

.paste .kicker, .editorial-rail .kicker, .final-copy .kicker { color: var(--vermilion); font-size: .75rem; }
.paste-one { grid-column: 8 / 12; grid-row: 2 / 4; }
.paste-two { grid-column: 2 / 6; grid-row: 6 / 8; transform: rotate(5deg); }
.torn { grid-column: 2 / 6; grid-row: 6 / 8; background: var(--yellow); transform: rotate(-4deg); }
.sticker { grid-column: 8 / 12; grid-row: 6 / 7; background: var(--yellow); transform: rotate(3deg); }
.paste-final { grid-column: 8 / 12; grid-row: 6 / 8; transform: rotate(-3deg); }

.editorial-rail { max-width: 25rem; }
.editorial-rail.left { grid-column: 1 / 5; grid-row: 4 / 7; }
.editorial-rail.right { grid-column: 9 / 13; grid-row: 3 / 6; }
.final-copy { grid-column: 2 / 6; grid-row: 4 / 7; background: var(--chalk); }

.margin-stamp {
  grid-column: 1 / 5;
  grid-row: 8;
  align-self: end;
  color: var(--yellow);
  font-size: .8rem;
  transform: rotate(-2deg);
}

.word-wall {
  position: absolute;
  right: -4vw;
  bottom: 4vh;
  z-index: 2;
  font-family: var(--poster);
  font-size: clamp(7rem, 20vw, 22rem);
  line-height: .7;
  color: rgba(248,244,232,.06);
  -webkit-text-stroke: 2px rgba(124,255,212,.22);
  transform: rotate(-6deg);
}
.bridge-word { color: rgba(185,108,255,.13); -webkit-text-stroke-color: rgba(255,59,48,.38); }
.settle-word { color: rgba(255,232,90,.12); -webkit-text-stroke-color: rgba(248,244,232,.28); }

.fog, .blob {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  filter: blur(28px);
  animation: bloom 7s ease-in-out infinite alternate;
}
.fog-lilac { width: 42vw; height: 42vw; right: 5vw; top: 14vh; background: rgba(185,108,255,.26); }
.fog-mint { width: 38vw; height: 38vw; left: 22vw; top: 18vh; background: rgba(124,255,212,.18); }
.fog-yellow { width: 34vw; height: 34vw; left: 42vw; top: 42vh; background: rgba(255,232,90,.18); }
.portal-a { width: 34vw; height: 24vw; left: 48vw; top: 38vh; background: rgba(185,108,255,.32); border-radius: 57% 43% 61% 39% / 47% 63% 37% 53%; }
.portal-b { width: 36vw; height: 28vw; right: 10vw; top: 18vh; background: rgba(185,108,255,.28); border-radius: 38% 62% 42% 58% / 56% 43% 57% 44%; }

.mural {
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(124,255,212,.18));
}
.mural-surface { grid-column: 5 / 13; grid-row: 2 / 8; }
.mural-ramp { grid-column: 4 / 13; grid-row: 2 / 8; }
.mural-district { grid-column: 2 / 11; grid-row: 2 / 8; }
.mural-bridge { grid-column: 3 / 12; grid-row: 2 / 8; }
.mural-settle { grid-column: 2 / 12; grid-row: 2 / 8; }

svg path, svg rect, svg ellipse, svg circle, svg text { vector-effect: non-scaling-stroke; }
.spray-line, .ribbon, .stencil-arrow, .calldata, .mint-trail, .fog-path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: drawTrail 4s ease forwards; }
.mint-trail { stroke: var(--mint); stroke-width: 9; filter: drop-shadow(0 0 16px var(--mint)); }
.lilac-stroke { stroke: var(--lilac); stroke-width: 24; opacity: .75; filter: blur(1px) drop-shadow(0 0 18px var(--lilac)); }
.yellow-stroke { stroke: var(--yellow); stroke-width: 8; opacity: .9; }
.stencil-arrow, .warning, .vermilion-arrow { stroke: var(--vermilion); stroke-width: 12; fill: none; stroke-linecap: square; filter: drop-shadow(0 0 12px rgba(255,59,48,.5)); }
.bubble-buildings ellipse, .proof-bubble ellipse { fill: rgba(185,108,255,.12); stroke: var(--lilac); stroke-width: 3; }
.bubble-buildings rect, .block-stack rect { fill: rgba(248,244,232,.15); stroke: var(--chalk); stroke-width: 4; }
.bubble-buildings path, .block-stack path { fill: none; stroke: var(--mint); stroke-width: 5; }
.drips path { stroke: var(--lilac); stroke-width: 10; stroke-linecap: round; fill: none; animation: drip 3.8s ease-in-out infinite alternate; }
.stickers rect { fill: var(--yellow); stroke: var(--black); stroke-width: 4; }
.stickers path, .ladder path, .bridge-ladder path { stroke: var(--chalk); stroke-width: 8; fill: none; stroke-linecap: round; }
.proof-bubble ellipse { filter: drop-shadow(0 0 22px rgba(185,108,255,.4)); }
.calldata { stroke: var(--vermilion); stroke-width: 15; opacity: .82; }
.seal, .puddle { fill: rgba(255,232,90,.25); stroke: var(--yellow); stroke-width: 6; }
svg text { font-family: var(--poster); font-size: 58px; fill: var(--black); font-weight: 900; }
.moon-tower circle { fill: var(--yellow); stroke: var(--chalk); stroke-width: 5; filter: drop-shadow(0 0 22px rgba(255,232,90,.5)); }
.moon-tower path { stroke: var(--mint); stroke-width: 7; fill: none; stroke-linecap: round; }
.fog-path { stroke: var(--lilac); stroke-width: 34; opacity: .42; filter: blur(6px); }
.crossout path { stroke: var(--vermilion); stroke-width: 8; fill: none; }
.puddle { fill: rgba(124,255,212,.13); stroke: var(--mint); }
.final-seal circle { fill: rgba(255,232,90,.88); stroke: var(--black); stroke-width: 8; }
.final-seal path { stroke: var(--black); stroke-width: 18; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.final-seal text { font-size: 46px; fill: var(--black); letter-spacing: .08em; }

.reveal-note { opacity: .35; filter: blur(4px); transform-origin: center; transition: opacity .8s ease, filter .8s ease, transform .8s ease; }
.spread.is-focused .reveal-note { opacity: 1; filter: blur(0); }
.spread.is-focused .paste-one { transform: rotate(2deg); }
.spread.is-focused .editorial-rail.left { transform: rotate(-2deg); }
.spread.is-focused .editorial-rail.right { transform: rotate(2deg); }

@keyframes openingFocus { to { filter: blur(0); opacity: 1; transform: rotate(-3deg); } }
@keyframes drawTrail { to { stroke-dashoffset: 0; } }
@keyframes bloom { from { transform: scale(.86) rotate(0deg); opacity: .58; } to { transform: scale(1.18) rotate(12deg); opacity: .9; } }
@keyframes drip { from { stroke-dasharray: 0 120; } to { stroke-dasharray: 80 120; } }
@keyframes grainDrift { 0% { transform: translate(0,0); } 50% { transform: translate(-3%,2%); } 100% { transform: translate(2%,-2%); } }

@media (max-width: 760px) {
  .spread { min-height: 118vh; padding: 2rem 1.1rem; grid-template-columns: repeat(6, 1fr); }
  .progress-rail { right: .35rem; }
  .tag-lockup, .chapter-title, .slant-left, .slant-right, .paste, .editorial-rail, .final-copy, .margin-stamp, .mural { grid-column: 1 / 7; }
  .tag-lockup { grid-row: 2 / 4; }
  .tag-lockup h1 { font-size: clamp(4rem, 22vw, 8rem); }
  .mural { grid-row: 4 / 8; opacity: .9; }
  .paste, .editorial-rail, .final-copy { grid-row: 6 / 8; max-width: calc(100vw - 3rem); }
  .word-wall { font-size: 28vw; bottom: 18vh; }
  .spray-cursor { display: none; }
}