@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Mono:wght@300;400;500&family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  --blue: #91aec4;
  --blue-deep: #6f91aa;
  --ink: #101014;
  --paper: #f3ead7;
  --white: #f8f4e9;
  --yellow: #efc928;
  --orange: #f06a28;
  --silver: #b7bbc0;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--ink); overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--blue);
  font-family: "Space Grotesk", Arial, sans-serif;
  overflow-x: hidden;
  cursor: none;
}
button, a { font: inherit; color: inherit; }
button { border: 0; cursor: none; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: var(--yellow); }

.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.cursor {
  position: fixed; z-index: 10000; left: 0; top: 0; width: 30px; height: 30px;
  border: 1px solid var(--yellow); border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); transition: width .18s, height .18s, background .18s, border-color .18s;
  mix-blend-mode: difference;
}
.cursor::before, .cursor::after { content: ""; position: absolute; background: var(--yellow); }
.cursor::before { width: 12px; height: 1px; left: 8px; top: 14px; }
.cursor::after { height: 12px; width: 1px; left: 14px; top: 8px; }
.cursor.is-hover { width: 54px; height: 54px; background: rgba(239,201,40,.4); border-color: var(--paper); }
.cursor.is-down { width: 20px; height: 20px; }

.boot { position: fixed; inset: 0; z-index: 20000; background: var(--ink); color: var(--paper); display: grid; place-content: center; text-align: center; transition: clip-path .9s cubic-bezier(.76,0,.24,1); clip-path: inset(0); }
.boot.is-gone { clip-path: inset(0 0 100% 0); pointer-events: none; }
.boot__mark { font: 8rem/1 "Anton", sans-serif; color: var(--yellow); transform: rotate(-5deg); text-shadow: 7px 7px 0 var(--blue); }
.boot p { font: .75rem "DM Mono", monospace; letter-spacing: .18em; }
.boot__bar { width: 280px; height: 5px; background: #35353b; margin-top: 1rem; overflow: hidden; }
.boot__bar i { display: block; width: 0; height: 100%; background: var(--yellow); animation: load 1.25s forwards cubic-bezier(.5,0,.2,1); }
@keyframes load { to { width: 100%; } }

.wipe { position: fixed; inset: 0; z-index: 15000; background: var(--yellow); pointer-events: none; transform: translateY(101%); }
.wipe.go { animation: wipe .8s cubic-bezier(.8,0,.2,1); }
@keyframes wipe { 0% { transform: translateY(101%); } 45%,55% { transform: translateY(0); } 100% { transform: translateY(-101%); } }

.topbar { position: fixed; z-index: 8000; top: 0; left: 0; right: 0; height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 26px; color: var(--paper); background: rgba(16,16,20,.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.2); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: .75rem; line-height: 1.05; font-weight: 700; letter-spacing: .05em; }
.brand small { opacity: .5; font: .55rem "DM Mono", monospace; }
.brand__scrap { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); background: var(--yellow); font: 1.15rem "Anton", sans-serif; transform: rotate(-6deg); clip-path: polygon(6% 7%,95% 0,100% 87%,12% 100%,0 40%); }
.topbar nav { display: flex; gap: 4px; }
.nav-scrap, .sound-toggle { background: transparent; color: var(--paper); font: .66rem "DM Mono", monospace; letter-spacing: .06em; padding: 12px; opacity: .72; transition: opacity .2s, color .2s; }
.nav-scrap:hover, .sound-toggle:hover { opacity: 1; color: var(--yellow); }
.top-actions { justify-self: end; display: flex; gap: 7px; align-items: center; }
.sound-toggle { border-right: 1px solid #4b4b50; }
.sound-dot { display: inline-block; width: 7px; height: 7px; background: #696970; border-radius: 50%; margin-right: 3px; }
.sound-toggle[aria-pressed="true"] .sound-dot { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.mini-link, .buy-mini { display: grid; place-items: center; min-width: 44px; height: 38px; font: .7rem "DM Mono", monospace; border: 1px solid #55555b; }
.buy-mini { padding: 0 14px; color: var(--ink); background: var(--yellow); border-color: var(--yellow); font-weight: 700; }

.hero { position: relative; height: max(760px, 100svh); min-height: 700px; overflow: hidden; color: var(--paper); background: var(--blue); }
.hero__art { position: absolute; inset: 0; background: url("assets/pank-jean-world.png") center/cover no-repeat; transform: scale(1.02); animation: breathe 12s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.07) translate3d(-.7%,.5%,0); } }
.hero__wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,15,.74) 0, rgba(12,12,15,.25) 43%, transparent 68%), linear-gradient(0deg, rgba(12,12,15,.72), transparent 35%); }
.hero__copy { position: absolute; z-index: 3; left: clamp(24px,6vw,90px); top: 18%; width: min(600px, 48vw); }
.eyebrow { margin: 0 0 14px; font: .75rem "DM Mono", monospace; letter-spacing: .14em; }
.hero h1 { margin: 0; font: clamp(7.8rem,15vw,14.5rem)/.68 "Anton", sans-serif; letter-spacing: -.045em; transform: skewY(-2deg); filter: drop-shadow(5px 7px 0 rgba(0,0,0,.25)); }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: transparent; -webkit-text-stroke: 2px var(--paper); transform: translateX(10%); }
.hero__intro { max-width: 465px; margin: 42px 0 25px; font-size: clamp(1.05rem,1.5vw,1.35rem); line-height: 1.35; text-shadow: 0 2px 8px #000; }
.hero__buttons, .finale__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 210px; padding: 17px 20px; border: 2px solid var(--ink); font: .75rem "DM Mono", monospace; font-weight: 700; box-shadow: 5px 5px 0 rgba(0,0,0,.25); transition: transform .18s, box-shadow .18s; }
.cta:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 rgba(0,0,0,.35); }
.cta--dark { color: var(--paper); background: var(--ink); border-color: var(--paper); }
.cta--paper { color: var(--ink); background: var(--paper); }
.cta--yellow { color: var(--ink); background: var(--yellow); }

.hero__stamp { position: absolute; z-index: 4; right: 5vw; bottom: 14%; width: 140px; height: 140px; border: 3px solid var(--yellow); border-radius: 50%; color: var(--yellow); background: rgba(16,16,20,.62); transform: rotate(10deg); font: 1.05rem "Anton", sans-serif; letter-spacing: .07em; backdrop-filter: blur(5px); }
.hero__stamp::before, .hero__stamp::after { content: ""; position: absolute; inset: 7px; border: 1px dashed currentColor; border-radius: 50%; }
.hero__stamp::after { inset: 48%; border: 0; width: 7px; height: 7px; background: currentColor; }
.hero__stamp span, .hero__stamp small { display: block; }
.hero__stamp small { margin-top: 6px; font: .55rem "DM Mono", monospace; }
.hero__stamp.is-stamped { animation: stamp .5s both; color: var(--ink); background: var(--yellow); }
@keyframes stamp { 45% { transform: rotate(-5deg) scale(1.35); } 100% { transform: rotate(-8deg) scale(1); } }

.frequency { position: absolute; z-index: 5; top: 110px; right: 30px; display: grid; grid-template-columns: 82px auto; align-items: center; gap: 10px; }
.frequency__dial { position: relative; width: 78px; height: 78px; border: 2px solid var(--paper); border-radius: 50%; color: var(--paper); background: rgba(16,16,20,.66); font: 1.5rem "Anton", sans-serif; backdrop-filter: blur(5px); transform: rotate(var(--dial, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.frequency__dial i { position: absolute; top: 3px; left: calc(50% - 1px); width: 2px; height: 15px; background: var(--yellow); }
.frequency p { color: var(--paper); font: .55rem/1.5 "DM Mono", monospace; }
.ticker { position: absolute; z-index: 4; left: -2%; right: -2%; bottom: 0; overflow: hidden; color: var(--ink); background: var(--yellow); border-block: 2px solid var(--ink); transform: rotate(-1deg); }
.ticker div { display: flex; width: max-content; gap: 24px; padding: 10px 0; animation: ticker 28s linear infinite; font: .75rem "DM Mono", monospace; font-weight: 700; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-pad { padding: clamp(80px,10vw,150px) clamp(24px,6vw,90px); }
.section-index { width: max-content; padding: 7px 10px; color: var(--paper); background: var(--ink); font: .65rem "DM Mono", monospace; letter-spacing: .12em; transform: rotate(-1deg); }
.section-head { margin: 28px 0 55px; }
.section-head > p { font: .7rem "DM Mono", monospace; letter-spacing: .16em; }
.section-head h2, .scratch-copy h2, .manifesto h2 { margin: 10px 0; font: clamp(4rem,9vw,9rem)/.82 "Anton", sans-serif; letter-spacing: -.04em; }
.section-head h2 em, .scratch-copy h2 em, .manifesto h2 em { color: transparent; -webkit-text-stroke: 2px var(--ink); font-style: normal; }
.section-head--row { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.section-head--row p { max-width: 420px; font: 1rem/1.5 "Space Grotesk", sans-serif; }

.casefile { background: var(--paper); background-image: linear-gradient(rgba(16,16,20,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,20,.055) 1px, transparent 1px); background-size: 30px 30px; }
.case-board { display: grid; grid-template-columns: 1.1fr .95fr .7fr; gap: clamp(20px,3vw,48px); align-items: start; }
.photo-file { position: relative; padding: 16px 16px 46px; background: #fcf8ee; box-shadow: 10px 14px 0 rgba(16,16,20,.17); transform: rotate(-2deg); }
.photo-file figure { margin: 0; }
.photo-file img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.8) contrast(1.07); }
.photo-file figcaption { margin-top: 15px; font: .64rem "DM Mono", monospace; }
.photo-file__pin { position: absolute; top: -11px; left: 48%; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4f4f4 0 15%, #777 20%, #222 62%, #000); box-shadow: 3px 5px 5px #0005; }
.tape { position: absolute; z-index: 2; padding: 8px 22px; background: rgba(239,201,40,.84); font: .7rem "DM Mono", monospace; font-weight: 700; }
.tape--a { right: -22px; bottom: 70px; transform: rotate(-8deg); }
.story-stack { display: grid; gap: 13px; }
.story-card { position: relative; min-height: 144px; padding: 22px; text-align: left; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.story-card:hover { transform: translate(-4px,-4px) rotate(-1deg); box-shadow: 11px 11px 0 var(--ink); }
.story-card span { font: .58rem "DM Mono", monospace; letter-spacing: .15em; }
.story-card h3 { margin: 8px 0 3px; font: 1.9rem "Anton", sans-serif; }
.story-card p { margin: 0; max-width: 80%; font-size: .8rem; line-height: 1.35; }
.story-card i { position: absolute; right: 15px; bottom: 15px; font: .6rem "DM Mono", monospace; font-style: normal; }
.story-card--black { color: var(--paper); background: var(--ink); }
.story-card--blue { background: var(--blue); }
.story-card--cream { background: #fffaf0; }
.story-card--orange { background: var(--orange); }
.incident { position: sticky; top: 105px; padding: 25px; color: var(--paper); background: var(--ink); border: 2px solid var(--ink); box-shadow: 9px 9px 0 var(--orange); transform: rotate(1.5deg); }
.incident__label { font: .65rem "DM Mono", monospace; color: var(--yellow); }
.incident__big { margin: 10px 0; font: clamp(3.8rem,6vw,6.4rem)/1 "Anton", sans-serif; }
.incident__copy { line-height: 1.55; }
.text-link { padding: 0 0 5px; color: inherit; background: transparent; border-bottom: 1px solid currentColor; font: .67rem "DM Mono", monospace; }

.interlude { overflow: hidden; padding: 23px 0; color: var(--paper); background: var(--ink); transform: rotate(1deg) scale(1.02); }
.interlude__track { display: flex; width: max-content; animation: ticker 35s linear infinite; }
.interlude__track span { font: clamp(3.5rem,8vw,8rem)/1 "Anton", sans-serif; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--paper); padding-right: 80px; }

.relics { background: var(--blue); min-height: 1050px; }
.relic-lab { position: relative; height: 680px; border: 2px dashed rgba(16,16,20,.55); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.22), transparent 50%); overflow: hidden; }
.lab-note { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%) rotate(-6deg); font: clamp(3.2rem,7vw,7rem)/.9 "Anton", sans-serif; color: rgba(16,16,20,.11); text-align: center; }
.relic { position: absolute; z-index: 3; left: var(--x); top: var(--y); padding: 0; background: transparent; transform: rotate(var(--r)); touch-action: none; user-select: none; filter: drop-shadow(12px 15px 4px rgba(16,16,20,.2)); }
.relic.is-dragging { z-index: 20; filter: drop-shadow(20px 26px 8px rgba(16,16,20,.3)); }
.relic em { display: block; margin-top: 7px; padding: 5px 7px; color: var(--paper); background: var(--ink); font: .55rem "DM Mono", monospace; font-style: normal; }
.phone-shape { display: grid; place-items: center; align-content: center; gap: 12px; width: 125px; height: 210px; color: var(--paper); background: var(--ink); border: 7px solid #35353a; border-radius: 15px; outline: 2px solid var(--ink); }
.phone-shape::after { content: ""; position: absolute; inset: 26px 23px 34px; border-top: 2px solid var(--paper); transform: rotate(-25deg); box-shadow: 35px 38px 0 -1px var(--paper), -10px 83px 0 -1px var(--paper); opacity: .55; }
.phone-shape i { color: var(--yellow); font: 1.4rem "Anton", sans-serif; }
.phone-shape b { font: .55rem "DM Mono", monospace; }
.cross-shape { display: grid; place-items: center; width: 120px; height: 180px; font: 12rem/1 Georgia, serif; color: #d9dce0; text-shadow: 4px 4px 0 #676b70, 7px 7px 0 var(--ink); }
.headphones-shape { display: flex; align-items: center; justify-content: center; gap: 0; width: 190px; height: 170px; font-size: 6rem; font-weight: 700; }
.headphones-shape i { position: absolute; width: 125px; height: 115px; top: 4px; border: 18px solid var(--ink); border-bottom: 0; border-radius: 80px 80px 0 0; }
.beanie-shape { display: block; width: 150px; height: 115px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, #3a3a40 6px 10px); border-radius: 80px 80px 12px 12px; clip-path: polygon(9% 100%,0 77%,11% 63%,13% 20%,31% 4%,66% 0,86% 22%,88% 61%,100% 79%,91% 100%); }
.beanie-shape i { position: absolute; left: 9px; right: 9px; bottom: 4px; height: 31px; background: #1c1c20; border: 3px solid #555; }
.pin-shape { display: block; color: var(--ink); font: 12rem/1 Georgia, serif; transform: rotate(45deg); }
.pankophone { position: absolute; z-index: 2; left: 40%; bottom: 5%; width: 280px; color: var(--paper); background: var(--ink); border: 2px solid var(--paper); box-shadow: 10px 10px 0 var(--orange); }
.pankophone__top { display: flex; justify-content: space-between; padding: 10px 14px; font: .6rem "DM Mono", monospace; border-bottom: 1px solid #555; }
.pankophone__screen { min-height: 155px; padding: 18px; background: #20272b; }
.pankophone__screen small { color: var(--blue); font: .55rem "DM Mono", monospace; }
.pankophone__screen p { min-height: 48px; font: 1.35rem "Anton", sans-serif; }
.pankophone__screen button { width: 100%; padding: 9px; color: var(--ink); background: var(--yellow); font: .6rem "DM Mono", monospace; }
.pankophone__keys { display: flex; justify-content: center; gap: 18px; padding: 14px; }
.pankophone__keys i { width: 22px; height: 6px; background: #555; border-radius: 5px; }

.scratch-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px,7vw,100px); align-items: center; color: var(--paper); background: var(--ink); }
.scratch-copy .section-index { color: var(--ink); background: var(--yellow); }
.scratch-copy h2 em { -webkit-text-stroke-color: var(--paper); }
.scratch-copy p { max-width: 460px; line-height: 1.6; }
.scratch-card { position: relative; min-height: 440px; background: var(--yellow); border: 12px solid var(--paper); box-shadow: 15px 15px 0 var(--orange); transform: rotate(1deg); overflow: hidden; }
.scratch-card__truth { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 8%; color: var(--ink); }
.scratch-card__truth small { font: .65rem "DM Mono", monospace; }
.scratch-card__truth p { margin: 30px 0 8px; font: clamp(2rem,4vw,4rem)/.95 "Anton", sans-serif; }
.scratch-card__truth strong { font: clamp(2.2rem,4.5vw,4.5rem)/.95 "Anton", sans-serif; color: var(--orange); }
.scratch-card__truth span { margin-top: 30px; font: 2rem "DM Mono", monospace; }
#scratchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.nightline { position: relative; color: var(--paper); background: #17171b; }
.nightline__top .section-index { color: var(--ink); background: var(--blue); }
.nightline .section-head h2 em { -webkit-text-stroke-color: var(--paper); }
.map-wrap { position: relative; height: 650px; overflow: hidden; border-top: 1px solid #424249; background: linear-gradient(#17171b, #242a2e 68%, #0e0e10); }
.map-sky { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, var(--paper) 0 1px, transparent 2px); background-size: 79px 67px; transform: rotate(-3deg); }
.map-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(135deg, transparent 20%, #000 20% 30%, transparent 30% 38%, #000 38% 52%, transparent 52% 61%, #000 61% 74%, transparent 74%), linear-gradient(45deg,#0c0c0e 20%, transparent 20%); }
.map-line { position: absolute; inset: 5% 0 0; width: 100%; height: 88%; overflow: visible; }
.map-line path { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-dasharray: 8 14; filter: drop-shadow(0 0 8px rgba(239,201,40,.55)); }
.route-runner { position: absolute; z-index: 4; color: var(--yellow); font-size: 2rem; offset-path: path("M40,400 C180,250 260,460 400,295 S655,80 725,245 S940,475 1160,160"); offset-distance: 0%; animation: runRoute 14s linear infinite; filter: drop-shadow(0 0 8px var(--yellow)); }
@keyframes runRoute { to { offset-distance: 100%; } }
.map-stop { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: 156px; padding: 0; color: var(--paper); background: transparent; text-align: left; transform: translate(-50%,-50%); }
.map-stop span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); outline: 2px solid var(--paper); border-radius: 50%; font: 1rem "Anton", sans-serif; transition: transform .25s, background .25s; }
.map-stop:hover span, .map-stop.is-active span { background: var(--yellow); transform: scale(1.25) rotate(-8deg); }
.map-stop b { display: block; font: 1.05rem "Anton", sans-serif; letter-spacing: .03em; }
.map-stop small { font: .52rem "DM Mono", monospace; opacity: .55; }
.map-card { position: absolute; z-index: 6; right: 4vw; bottom: 35px; width: min(380px, 86vw); padding: 26px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 9px 9px 0 var(--orange); transform: rotate(-1deg); }
.map-card small, .map-card span { font: .58rem "DM Mono", monospace; }
.map-card h3 { margin: 8px 0; font: 2.2rem "Anton", sans-serif; }
.map-card p { line-height: 1.45; }

.manifesto { position: relative; min-height: 760px; display: grid; grid-template-columns: 1fr .75fr; gap: 8vw; align-items: center; background: var(--paper); overflow: hidden; }
.manifesto__burst { position: absolute; right: -3vw; top: -16vw; color: transparent; -webkit-text-stroke: 3px rgba(16,16,20,.1); font: 50vw/.9 "Anton", sans-serif; transform: rotate(9deg); }
.manifesto__copy, .deck { position: relative; z-index: 2; }
.manifesto__copy > span { font: .68rem "DM Mono", monospace; letter-spacing: .16em; }
.manifesto__copy p { max-width: 580px; font-size: 1.15rem; line-height: 1.55; }
.deck { padding: 30px; color: var(--paper); background: #25252a; border: 8px solid var(--ink); box-shadow: 14px 14px 0 var(--blue); transform: rotate(2deg); }
.deck__label { display: flex; justify-content: space-between; margin-bottom: 20px; font: .65rem "DM Mono", monospace; }
.cassette { position: relative; height: 150px; display: flex; justify-content: center; align-items: center; gap: 60px; background: var(--paper); border: 6px solid #54545b; border-radius: 8px; }
.cassette i { width: 61px; height: 61px; border: 10px dotted var(--ink); border-radius: 50%; animation: spin 3s linear infinite paused; }
.deck.is-playing .cassette i { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.cassette b { position: absolute; bottom: 18px; width: 120px; height: 30px; background: #38383e; clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); }
.equalizer { display: flex; align-items: end; gap: 4px; height: 48px; margin: 16px 0; }
.equalizer i { flex: 1; height: 15%; background: var(--yellow); }
.deck.is-playing .equalizer i { animation: eq .55s ease-in-out infinite alternate; animation-delay: calc(var(--n, 1) * -.07s); }
.equalizer i:nth-child(2n) { --n: 3; height: 60%; }.equalizer i:nth-child(3n) { --n: 5; height: 35%; }.equalizer i:nth-child(5n) { --n: 7; height: 80%; }
@keyframes eq { to { height: 100%; } }
.deck button { width: 100%; padding: 15px; display: flex; justify-content: space-between; color: var(--ink); background: var(--yellow); font: .7rem "DM Mono", monospace; font-weight: 700; }

.finale { position: relative; min-height: 850px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--paper); background: var(--ink); overflow: hidden; }
.finale__art { position: absolute; inset: 0; opacity: .36; background: url("assets/pank-jean-world.png") center 25%/cover no-repeat; filter: grayscale(1) contrast(1.35); mix-blend-mode: luminosity; }
.finale::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent, #0d0d10 73%); }
.finale > *:not(.finale__art) { position: relative; z-index: 2; }
.finale h2 { margin: 15px 0; font: clamp(8rem,22vw,22rem)/.64 "Anton", sans-serif; letter-spacing: -.05em; text-shadow: 8px 8px 0 var(--blue); }
.finale__tag { font: clamp(1rem,2vw,1.5rem) "DM Mono", monospace; background: var(--yellow); color: var(--ink); padding: 7px 12px; transform: rotate(-2deg); }
.finale__actions { margin-top: 40px; justify-content: center; }
.back-top { margin-top: 50px; padding: 8px; color: var(--paper); background: transparent; border-bottom: 1px solid var(--paper); font: .65rem "DM Mono", monospace; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 5vw; color: var(--paper); background: var(--ink); border-top: 1px solid #3f3f44; font: .58rem "DM Mono", monospace; }

dialog { max-width: min(650px, calc(100vw - 32px)); border: 0; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 16px 16px 0 var(--orange); }
dialog::backdrop { background: rgba(8,8,10,.87); backdrop-filter: blur(7px); }
.file-dialog { width: 650px; padding: clamp(28px,5vw,60px); border: 4px solid var(--ink); }
.dialog-close { position: absolute; top: 13px; right: 15px; width: 40px; height: 40px; color: var(--paper); background: var(--ink); font-size: 1.5rem; }
.dialog-index { display: inline-block; padding: 6px 9px; color: var(--paper); background: var(--ink); font: .63rem "DM Mono", monospace; }
.file-dialog h2, .relic-dialog h2 { margin: 24px 0 15px; font: clamp(2.8rem,6vw,5rem)/.9 "Anton", sans-serif; }
.file-dialog #dialogBody { font-size: 1.1rem; line-height: 1.65; }
.file-dialog #dialogBody p:first-child::first-letter { float: left; font: 4rem/.75 "Anton", sans-serif; margin: 8px 8px 0 0; color: var(--orange); }
.dialog-stamp { margin-top: 30px; width: max-content; padding: 10px; border: 3px solid var(--orange); color: var(--orange); transform: rotate(-4deg); font: 1.1rem "Anton", sans-serif; }
.relic-dialog { width: 480px; padding: 45px; text-align: center; border: 8px solid var(--ink); }
.relic-dialog__icon { font: 6rem/1 "Anton", sans-serif; color: var(--orange); }
.relic-dialog small, .transmission small { font: .6rem "DM Mono", monospace; }
.relic-dialog p { line-height: 1.55; }
.transmission { width: 600px; padding: 55px 45px 35px; color: var(--paper); background: #111; border: 2px solid var(--yellow); box-shadow: 16px 16px 0 var(--blue); }
.transmission p { padding: 14px 0; border-bottom: 1px solid #333; font: .88rem/1.5 "DM Mono", monospace; }
.transmission b { color: var(--yellow); }
.toast { position: fixed; z-index: 12000; left: 50%; bottom: 30px; padding: 12px 18px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--orange); font: .68rem "DM Mono", monospace; transform: translate(-50%,140px) rotate(-2deg); transition: transform .35s; }
.toast.show { transform: translate(-50%,0) rotate(-2deg); }
.reveal { opacity: 0; transform: translateY(50px) rotate(.5deg); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0) rotate(0); }

body.frequency-1 { --blue: #a7b8c0; --yellow: #ff7330; }
body.frequency-2 { --blue: #6e8d84; --yellow: #f2dc55; }
body.frequency-3 { --blue: #8d8ca8; --yellow: #ffb126; }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
  .case-board { grid-template-columns: 1fr 1fr; }
  .incident { position: relative; top: auto; grid-column: 1 / -1; }
  .manifesto { grid-template-columns: 1fr; }
  .deck { max-width: 560px; }
  .relic--phones { left: 62% !important; }
}

@media (max-width: 760px) {
  body { cursor: auto; }
  .cursor { display: none; }
  .topbar { height: 64px; padding: 0 14px; }
  .sound-toggle { display: none; }
  .mini-link, .buy-mini { height: 34px; }
  .brand > span:last-child { display: none; }
  .hero { min-height: 760px; }
  .hero__art { background-position: 57% center; }
  .hero__wash { background: linear-gradient(0deg, rgba(12,12,15,.94) 0, rgba(12,12,15,.58) 48%, rgba(12,12,15,.05) 80%); }
  .hero__copy { left: 20px; right: 20px; top: auto; bottom: 85px; width: auto; }
  .hero h1 { font-size: clamp(6.4rem,32vw,9rem); }
  .hero h1 span:last-child { transform: translateX(6%); }
  .hero__intro { margin: 25px 0 18px; font-size: .98rem; max-width: 85%; }
  .hero__stamp { right: 18px; bottom: 38%; width: 98px; height: 98px; font-size: .75rem; }
  .frequency { top: 80px; right: 15px; grid-template-columns: 58px; }
  .frequency__dial { width: 56px; height: 56px; }
  .frequency p { display: none; }
  .cta { min-width: 0; padding: 14px 15px; gap: 14px; font-size: .65rem; }
  .section-head--row { display: block; }
  .section-head h2, .scratch-copy h2, .manifesto h2 { font-size: clamp(3.5rem,18vw,6rem); }
  .case-board { grid-template-columns: 1fr; }
  .photo-file { width: 90%; margin-inline: auto; }
  .incident { grid-column: auto; }
  .relics { min-height: 1150px; }
  .relic-lab { height: 850px; overflow: hidden; }
  .relic { transform: rotate(var(--r)) scale(.78); transform-origin: top left; }
  .relic--phone { left: 4% !important; top: 8% !important; }
  .relic--cross { left: 48% !important; top: 5% !important; }
  .relic--phones { left: 48% !important; top: 29% !important; }
  .relic--beanie { left: 8% !important; top: 44% !important; }
  .relic--pin { left: 56% !important; top: 48% !important; }
  .pankophone { left: 50%; bottom: 35px; transform: translateX(-50%); width: 260px; }
  .scratch-section { grid-template-columns: 1fr; }
  .scratch-card { min-height: 460px; border-width: 7px; }
  .nightline__top { padding-bottom: 40px; }
  .map-wrap { height: 820px; }
  .map-line, .route-runner { display: none; }
  .map-wrap::before { content: ""; position: absolute; left: 37px; top: 65px; bottom: 310px; border-left: 3px dashed var(--yellow); }
  .map-stop { left: 25px !important; transform: none; width: 240px; display: grid; grid-template-columns: 55px 1fr; }
  .map-stop span { grid-row: 1/3; }
  .map-stop--1 { top: 70px !important; }.map-stop--2 { top: 190px !important; }.map-stop--3 { top: 310px !important; }.map-stop--4 { top: 430px !important; }
  .map-card { bottom: 28px; left: 24px; right: 24px; width: auto; }
  .manifesto { padding-bottom: 110px; }
  .finale { min-height: 760px; padding-inline: 20px; }
  .finale h2 { font-size: clamp(7rem,34vw,12rem); }
  footer { flex-direction: column; text-align: center; }
}

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