:root {
  /* DESIGN.md typography tokens: Roboto Flex** for coordinates; Space Grotesk** for studio statements. */
  --asphalt: #050507;
  --sodium: #F8F4EA;
  --cyan: #00E7FF;
  --magenta: #FF2BD6;
  --green: #B9FF00;
  --violet: #6C2BFF;
  --concrete: #2A2A31;
  --seam-x: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--sodium);
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    repeating-linear-gradient(0deg, rgba(248,244,234,.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at var(--seam-x) 22%, rgba(0,231,255,.2), transparent 32vw);
  mix-blend-mode: screen;
}

.noise {
  position: fixed;
  inset: -50%;
  z-index: 19;
  pointer-events: none;
  opacity: .16;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(248,244,234,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 44%, rgba(0,231,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 39% 82%, rgba(255,43,214,.65) 0 1px, transparent 1.5px);
  background-size: 37px 41px, 53px 47px, 29px 31px;
  animation: staticDrift 1.1s steps(2) infinite;
}

.cursor-halo {
  position: fixed;
  width: 28rem;
  height: 28rem;
  margin: -14rem 0 0 -14rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, rgba(0,231,255,.16), rgba(255,43,214,.08) 34%, transparent 68%);
  mix-blend-mode: screen;
  transform: translate3d(50vw, 50vh, 0);
}

.seam-nav {
  position: fixed;
  top: 50%;
  left: calc(var(--seam-x) - 2.2rem);
  z-index: 30;
  display: grid;
  gap: 1.15rem;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: "Roboto Flex", monospace;
  font-size: clamp(.62rem, .75vw, .8rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.draw-link {
  position: relative;
  display: inline-block;
  color: var(--sodium);
  text-decoration: none;
  text-transform: uppercase;
}

.draw-link::before,
.draw-link::after {
  content: "";
  position: absolute;
  left: -.08em;
  right: -.1em;
  bottom: -.24em;
  height: .18em;
  background: var(--cyan);
  clip-path: polygon(0 38%, 12% 18%, 30% 52%, 49% 26%, 70% 58%, 88% 32%, 100% 45%, 100% 100%, 0 100%);
  transform: scaleX(0) skewX(-9deg);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.9,.1,1.2);
}

.draw-link::after {
  background: var(--magenta);
  bottom: -.34em;
  opacity: .82;
  transition-delay: .08s;
}

.draw-link:hover::before,
.draw-link:hover::after,
.draw-link.active::before,
.draw-link.active::after { transform: scaleX(1) skewX(-9deg); }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
}

.split {
  min-height: 100vh;
  position: relative;
  padding: clamp(2rem, 5vw, 5rem);
}

.asphalt {
  background:
    linear-gradient(135deg, rgba(42,42,49,.72), transparent 38%),
    repeating-linear-gradient(93deg, rgba(248,244,234,.045) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 10% 20%, rgba(248,244,234,.11), transparent 22rem),
    var(--asphalt);
}

.holo {
  background:
    linear-gradient(115deg, rgba(0,231,255,.18), rgba(255,43,214,.2) 36%, rgba(108,43,255,.34) 68%, rgba(185,255,0,.12)),
    radial-gradient(circle at 20% 20%, rgba(248,244,234,.18), transparent 19rem),
    var(--concrete);
}

.holo::after,
.asphalt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-18deg, transparent 0 24px, rgba(248,244,234,.055) 24px 25px, transparent 25px 40px);
  mix-blend-mode: overlay;
}

.seam {
  position: absolute;
  top: -10vh;
  bottom: -10vh;
  left: calc(var(--seam-x) - .55rem);
  width: 1.1rem;
  z-index: 15;
  transform: rotate(var(--seam-rotate, -1.2deg));
  background: linear-gradient(90deg, transparent, rgba(248,244,234,.45), transparent);
  filter: drop-shadow(0 0 18px var(--cyan)) drop-shadow(0 0 26px var(--magenta));
}

.seam span {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, var(--cyan) 0 8px, var(--magenta) 8px 13px, transparent 13px 28px);
  clip-path: polygon(48% 0, 80% 7%, 42% 13%, 65% 22%, 38% 30%, 72% 39%, 44% 48%, 84% 59%, 36% 72%, 61% 83%, 45% 100%, 22% 100%, 58% 84%, 28% 70%, 55% 59%, 24% 48%, 52% 39%, 20% 28%, 58% 19%, 24% 10%, 52% 0);
  animation: seamTear 3.8s ease-in-out infinite alternate;
}

.display-word,
.studio-cut,
.chapter-title,
.fluid-sentence,
.final-word {
  font-family: "Anybody", "Space Grotesk", sans-serif;
  font-variation-settings: "wdth" var(--wdth, 86), "wght" 850;
  line-height: .78;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.display-word {
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  bottom: 18vh;
  font-size: clamp(5rem, 18vw, 19rem);
  margin: 0;
  color: var(--sodium);
  text-shadow: 3px 0 var(--cyan), -4px 0 var(--magenta);
}

.studio-cut {
  position: absolute;
  top: 17vh;
  right: -4vw;
  font-size: clamp(4.5rem, 15vw, 17rem);
  color: transparent;
  -webkit-text-stroke: .04em var(--sodium);
  text-shadow: 0 0 22px rgba(0,231,255,.9), 10px 10px 0 rgba(255,43,214,.28);
  transform: rotate(-4deg);
}

.coordinate,
.vertical-label,
.poster-tab,
.paste-edge,
.floating-note,
.roof-coord {
  font-family: "Roboto Flex", monospace;
  font-variation-settings: "wdth" 72, "wght" 560, "GRAD" 60;
  color: var(--green);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(.65rem, .85vw, .9rem);
}

.manifesto,
.right-copy,
.manifesto-panel p,
.final-manifesto {
  font-size: clamp(1.05rem, 2.3vw, 2.3rem);
  line-height: 1.05;
  max-width: 36rem;
}

.manifesto { position: absolute; bottom: 8vh; left: clamp(2rem, 5vw, 5rem); }
.right-copy { position: absolute; right: clamp(2rem, 5vw, 5rem); bottom: 8vh; }
.poster-tab { position: absolute; top: 16vh; right: 8vw; color: var(--sodium); transform: rotate(4deg); }

.rail { position: absolute; background: var(--sodium); opacity: .28; transform: rotate(-11deg); }
.rail-one { width: 55vw; height: 2px; left: -8vw; top: 27vh; }
.rail-two { width: 31vw; height: 1px; left: 7vw; top: 34vh; }

.holo-field {
  position: absolute;
  inset: 8% 5%;
  clip-path: polygon(8% 0, 92% 7%, 84% 100%, 0 82%);
  background: linear-gradient(124deg, rgba(0,231,255,.7), rgba(255,43,214,.56), rgba(108,43,255,.65), rgba(185,255,0,.34));
  mix-blend-mode: screen;
  opacity: .62;
}

.shard,
.photo-frag,
.evidence-card,
.floating-note {
  transform: perspective(900px) rotateX(calc(var(--tilt-y) * var(--depth, 1))) rotateY(calc(var(--tilt-x) * var(--depth, 1)));
  transition: transform .16s linear;
}

.acetate {
  position: absolute;
  border: 1px solid rgba(248,244,234,.38);
  background: linear-gradient(135deg, rgba(248,244,234,.16), rgba(0,231,255,.18), rgba(255,43,214,.12));
  box-shadow: 0 0 24px rgba(0,231,255,.16), inset 0 0 30px rgba(248,244,234,.08);
  backdrop-filter: blur(6px);
}

.shard { padding: 1rem; font-family: "Roboto Flex", monospace; letter-spacing: .16em; }
.shard-a { top: 12vh; left: 9vw; clip-path: polygon(0 10%, 100% 0, 82% 100%, 8% 84%); }
.shard-b { top: 48vh; right: 14vw; clip-path: polygon(14% 0, 100% 18%, 80% 84%, 0 100%); }
.shard-c { bottom: 18vh; left: 14vw; clip-path: polygon(0 0, 88% 12%, 100% 70%, 10% 100%); color: var(--green); }
.qr-block { position: absolute; right: 8vw; top: 38vh; width: 8rem; height: 8rem; background: repeating-conic-gradient(var(--sodium) 0 25%, transparent 0 50%) 0 0/2rem 2rem; opacity: .23; }

.reverse { --seam-rotate: 8deg; }
.left-holo { background-color: var(--asphalt); }
.collage-stack { position: absolute; inset: 10vh 6vw; }
.photo-frag { width: clamp(12rem, 26vw, 31rem); height: clamp(12rem, 28vw, 34rem); }
.frag-one { left: 0; top: 0; background: repeating-linear-gradient(90deg, var(--sodium) 0 18px, var(--asphalt) 18px 35px); clip-path: polygon(0 8%, 94% 0, 80% 90%, 12% 100%); }
.frag-two { right: 0; top: 18vh; background: radial-gradient(circle, rgba(0,231,255,.6), transparent 35%), repeating-linear-gradient(0deg, #2A2A31 0 14px, #050507 14px 28px); clip-path: polygon(18% 0, 100% 12%, 86% 100%, 0 80%); }
.frag-three { left: 10vw; bottom: 2vh; height: 10rem; background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--violet)); clip-path: polygon(0 30%, 100% 0, 92% 62%, 8% 100%); }
.paste-edge { position: absolute; left: 2rem; bottom: 3rem; color: var(--asphalt); background: var(--sodium); padding: .55rem .75rem; transform: rotate(-3deg); }
.dark-copy { display: flex; flex-direction: column; justify-content: center; }
.vertical-label { position: absolute; right: 2rem; top: 8vh; writing-mode: vertical-rl; }
.chapter-title { font-size: clamp(3.6rem, 9vw, 10rem); max-width: 46rem; margin: 0 0 2rem; color: var(--sodium); }
.wide { position: static; max-width: 44rem; margin: 0 0 2rem; }
.manifesto-link { font-size: clamp(1rem, 1.5vw, 1.6rem); width: max-content; }

.spill { --seam-rotate: -6deg; }
.evidence { display: flex; align-items: center; }
.lime { color: var(--green); left: 2rem; right: auto; }
.evidence-grid { position: relative; width: 100%; min-height: 70vh; }
.evidence-card { position: absolute; width: clamp(12rem, 22vw, 24rem); min-height: 10rem; padding: 1.2rem; font-family: "Space Grotesk"; text-transform: uppercase; }
.evidence-card b { display: block; font-size: clamp(1.6rem, 3vw, 3rem); color: var(--sodium); }
.evidence-card small { color: var(--green); letter-spacing: .12em; }
.evidence-card:nth-child(1) { left: 2vw; top: 8vh; transform: rotate(-7deg); }
.evidence-card:nth-child(2) { right: -5vw; top: 29vh; transform: rotate(5deg); }
.evidence-card:nth-child(3) { left: 10vw; bottom: 4vh; transform: rotate(2deg); }
.manifesto-panel { display: flex; flex-direction: column; justify-content: center; }
.fluid-sentence { font-size: clamp(4rem, 12vw, 14rem); max-width: 55rem; margin: 0; color: transparent; -webkit-text-stroke: 2px var(--sodium); text-shadow: 5px 0 var(--cyan), -6px 4px var(--magenta); }
.slash-row { display: flex; gap: .7rem; margin-top: 2rem; }
.slash-row i { display: block; width: 3rem; height: .65rem; background: var(--green); transform: skewX(-30deg); box-shadow: 0 0 16px var(--green); }
.floating-note { right: 36vw; top: 12vh; padding: 1rem; z-index: 12; color: var(--green); }

.rooftop { display: block; min-height: 100vh; background: var(--asphalt); }
.rooftop-negative { position: relative; min-height: 100vh; display: grid; place-items: center; padding: clamp(2rem, 5vw, 5rem); text-align: center; overflow: hidden; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: linear-gradient(to top, var(--concrete), transparent), repeating-linear-gradient(90deg, #050507 0 7vw, #2A2A31 7vw 9vw, #050507 9vw 14vw); clip-path: polygon(0 55%, 8% 55%, 8% 30%, 16% 30%, 16% 46%, 26% 46%, 26% 18%, 34% 18%, 34% 62%, 44% 62%, 44% 36%, 54% 36%, 54% 20%, 62% 20%, 62% 58%, 74% 58%, 74% 32%, 83% 32%, 83% 50%, 100% 50%, 100% 100%, 0 100%); }
.roof-coord { position: absolute; top: 8vh; color: var(--green); }
.final-word { font-size: clamp(4rem, 14vw, 16rem); margin: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--violet), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(0,231,255,.46)); }
.final-manifesto { margin: -16vh auto 0; max-width: 44rem; }
.final-link { position: absolute; bottom: 13vh; font-size: clamp(1rem, 1.7vw, 1.7rem); color: var(--sodium); }
.underline-wall { position: absolute; left: 6vw; right: 6vw; bottom: 10vh; height: .45rem; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--green)); clip-path: polygon(0 40%, 15% 20%, 28% 54%, 42% 28%, 61% 62%, 78% 25%, 100% 45%, 100% 100%, 0 100%); box-shadow: 0 0 28px var(--cyan); }

@keyframes seamTear { from { transform: translateY(-1.4rem) scaleY(1); } to { transform: translateY(1.2rem) scaleY(1.04); } }
@keyframes staticDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(2%, -1%, 0); } }

@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; }
  .split { min-height: 78vh; }
  .seam { left: 0; right: 0; top: 50%; bottom: auto; width: 100%; height: 1rem; transform: rotate(1deg); }
  .seam-nav { left: 1rem; top: 1rem; transform: none; grid-auto-flow: column; gap: .7rem; font-size: .58rem; }
  .display-word { font-size: 24vw; bottom: 24vh; }
  .studio-cut { font-size: 23vw; right: 2vw; }
  .final-manifesto { margin-top: -10vh; }
}