:root {
  --blue: #2f78c7;
  --blue-deep: #14518f;
  --blue-soft: #eaf3fc;
  --paper: #fffefb;
  --ink: #103b6c;
  --line: 3px;
  --shadow: 7px 7px 0 var(--ink);
  --story-shift: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--blue) var(--paper); }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; cursor: default; }
body.ignite { animation: page-shiver .16s steps(2) 5; }
body.ignite .orbit-ring { animation-duration: .75s; }
body.ignite .portrait { animation: hot-wobble .28s steps(2) 7; }
body[data-mood="2"] { --blue: #2368ae; }
body[data-mood="3"] { --blue: #367fce; }
body::before { content: ""; pointer-events: none; position: fixed; z-index: 80; inset: 0; opacity: .1; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(20,81,143,.09) 3px 4px); mix-blend-mode: multiply; }
::selection { color: var(--paper); background: var(--blue); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { max-width: 100%; }

.boot { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; justify-items: center; gap: 24px; padding: 8vw; color: white; background: var(--blue); transition: opacity .6s ease, visibility .6s ease; }
.boot.done { opacity: 0; visibility: hidden; }
.boot-mark { display: grid; place-items: center; width: 110px; aspect-ratio: 1; background: white; border-radius: 44% 53% 46% 54% / 51% 44% 57% 48%; animation: boot-wobble .6s steps(2) infinite; }
.boot-mark span { width: 44px; height: 64px; border: 7px solid var(--blue); border-radius: 70% 30% 60% 40% / 66% 38% 62% 34%; transform: rotate(8deg); }
.boot p { margin: 0; font: 900 clamp(11px, 2vw, 15px)/1 system-ui, sans-serif; letter-spacing: .14em; text-align: center; }
.boot-line { width: min(380px, 72vw); height: 8px; border: 2px solid white; transform: rotate(-1deg); }
.boot-line i { display: block; height: 100%; width: 0; background: white; animation: boot-load 1.35s ease forwards; }

.spark-canvas { pointer-events: none; position: fixed; z-index: 90; inset: 0; width: 100%; height: 100%; }
.cursor { pointer-events: none; position: fixed; z-index: 200; left: 0; top: 0; width: 28px; height: 28px; border: 2px solid var(--blue); border-radius: 50% 45% 53% 47%; opacity: 0; transform: translate(-50%, -50%); transition: width .16s ease, height .16s ease, background .16s ease, opacity .2s ease; mix-blend-mode: multiply; }
.cursor.visible { opacity: 1; }
.cursor.hovering { width: 52px; height: 52px; background: rgba(47,120,199,.12); }
.cursor span { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: var(--blue); border-radius: 50%; transform: translate(-50%, -50%); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 25px; padding: 13px 19px; color: white; background: var(--blue); border: 2px solid white; border-radius: 49% 44% 54% 45% / 51% 58% 44% 49%; font: 900 11px/1 system-ui, sans-serif; letter-spacing: .14em; opacity: 0; transform: translate(-50%, 30px) rotate(-2deg); transition: .3s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }
.page-progress { position: fixed; z-index: 51; left: 0; top: 0; right: 0; height: 4px; background: transparent; }
.page-progress span { display: block; width: 0; height: 100%; background: var(--blue); }

.nav { position: fixed; z-index: 50; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 80px; padding: 12px 3vw; background: rgba(255,254,251,.9); border-bottom: var(--line) solid var(--blue); backdrop-filter: blur(14px); transition: transform .35s ease; }
.nav.hidden { transform: translateY(-110%); }
.brand { display: flex; align-items: center; gap: 10px; width: max-content; font: 900 12px/.87 system-ui, sans-serif; letter-spacing: .09em; }
.brand img { width: 39px; height: 39px; object-fit: cover; border-radius: 46% 53% 43% 57%; }
.nav nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); font: 850 10px/1 system-ui, sans-serif; letter-spacing: .14em; }
.nav nav a { position: relative; padding: 10px 0; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--blue); transition: right .25s ease; }
.nav nav a:hover::after { right: 0; }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.sound-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; background: transparent; border: 0; font: 850 9px/1 system-ui, sans-serif; letter-spacing: .08em; }
.sound-bars { display: flex; align-items: end; gap: 2px; height: 13px; }
.sound-bars i { display: block; width: 2px; background: var(--blue); }
.sound-bars i:nth-child(1) { height: 5px; }
.sound-bars i:nth-child(2) { height: 12px; }
.sound-bars i:nth-child(3) { height: 8px; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: sound-bars .5s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.2s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.35s; }

.scribble-button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 21px; border: var(--line) solid var(--blue); border-radius: 43% 55% 47% 52% / 55% 44% 58% 45%; color: white; background: var(--blue); font: 900 11px/1 system-ui, sans-serif; letter-spacing: .1em; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.scribble-button:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: var(--shadow); }
.scribble-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.scribble-button.ghost { color: var(--blue); background: var(--paper); }
.x-button { min-width: 45px; padding: 0; }

.scene { position: relative; overflow: hidden; isolation: isolate; }
.scene::after { content: attr(data-scene); pointer-events: none; position: absolute; z-index: -1; right: -2vw; bottom: -5vw; color: transparent; -webkit-text-stroke: 2px rgba(47,120,199,.1); font: 900 clamp(150px, 30vw, 500px)/.75 Georgia, serif; letter-spacing: -.08em; }
.reveal { opacity: 0; transform: translateY(38px) rotate(.3deg); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0) rotate(0); }

.hero { min-height: 100svh; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 4vw; padding: 124px 6.5vw 78px; }
.hero-grid { position: absolute; z-index: -3; inset: 100px 1.5vw 20px; background-image: radial-gradient(circle, rgba(47,120,199,.23) 1.5px, transparent 1.5px); background-size: 27px 27px; border: var(--line) solid var(--blue); border-radius: 3% 2% 4% 3% / 2% 4% 2% 4%; }
.hero::before { content: "LIVE / UNSTABLE / LIVE / UNSTABLE /"; position: absolute; z-index: -2; left: -2vw; bottom: 6vh; color: transparent; -webkit-text-stroke: 2px rgba(47,120,199,.15); white-space: nowrap; font: 900 clamp(48px, 7.4vw, 124px)/1 system-ui, sans-serif; letter-spacing: -.07em; transform: rotate(-4deg); }
.margin-code { position: absolute; z-index: -1; right: 2.4vw; top: 105px; margin: 0; writing-mode: vertical-rl; color: var(--blue); font: 800 8px/1 system-ui, sans-serif; letter-spacing: .16em; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-block; margin: 0; padding: 8px 13px; border: 2px solid var(--blue); border-radius: 50%; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .16em; transform: rotate(-1.5deg); background: var(--paper); }
h1 { margin: 24px 0 23px; max-width: 780px; color: var(--blue); font: 950 clamp(49px, 7vw, 112px)/.79 "Arial Black", Impact, system-ui, sans-serif; letter-spacing: -.07em; }
h1 em { position: relative; font-family: Georgia, serif; font-weight: 500; }
h1 em::after { content: ""; position: absolute; left: -1%; right: -2%; bottom: -8px; height: 13px; border-top: 4px solid var(--blue); border-radius: 50%; transform: rotate(-2deg); }
.dek { max-width: 580px; margin: 0; font: italic clamp(18px, 1.55vw, 25px)/1.42 Georgia, serif; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.text-link { position: relative; padding: 9px 0 6px; border-bottom: 2px solid currentColor; font: 900 11px/1.1 system-ui, sans-serif; letter-spacing: .11em; }
.text-link span { display: inline-block; font-size: 17px; transition: transform .2s ease; }
.text-link:hover span { transform: translate(5px, 5px); }
.portrait-wrap { position: relative; justify-self: center; width: min(42vw, 590px); }
.portrait { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; filter: contrast(1.03); transform: rotate(2deg); animation: float 5s ease-in-out infinite; }
.orbit-ring { position: absolute; z-index: -1; inset: 6%; border: 3px solid var(--blue); border-radius: 52% 48% 45% 55% / 47% 52% 48% 53%; animation: orbit 9s linear infinite; }
.ring-two { inset: -1%; border-style: dashed; opacity: .35; animation-direction: reverse; animation-duration: 13s; }
.orbit-note { position: absolute; z-index: 3; padding: 8px 10px; color: var(--blue); background: white; border: 2px solid var(--blue); border-radius: 50%; font: 900 9px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-align: center; box-shadow: 3px 3px 0 var(--blue); }
.note-a { top: 7%; left: -7%; transform: rotate(-10deg); }
.note-b { right: -7%; bottom: 16%; transform: rotate(8deg); }
.note-c { left: 7%; bottom: -1%; transform: rotate(-4deg); }
.dial { cursor: pointer; position: absolute; z-index: 3; right: 2.5vw; bottom: 3.4vh; display: flex; align-items: center; gap: 10px; padding: 0; color: var(--blue); background: transparent; border: 0; }
.dial-number { display: grid; place-items: center; width: 58px; aspect-ratio: 1; color: white; background: var(--blue); border: 2px solid var(--blue-deep); border-radius: 48% 53% 46% 52%; font: 900 18px/1 Georgia, serif; transition: transform .35s ease; }
.dial:hover .dial-number { transform: rotate(35deg); }
.dial small { text-align: left; font: 800 8px/1.35 system-ui, sans-serif; letter-spacing: .08em; }
.dial small b { font-size: 9px; }
.scroll-note { position: absolute; left: 2.7vw; bottom: 3.3vh; display: flex; align-items: center; gap: 9px; font: 900 8px/1 system-ui, sans-serif; letter-spacing: .12em; transform: rotate(-90deg); transform-origin: left center; }
.scroll-note i { display: block; width: 45px; height: 2px; background: var(--blue); animation: scroll-line 1.5s ease infinite; }

.ticker { overflow: hidden; border-block: var(--line) solid var(--paper); color: white; background: var(--blue); transform: rotate(-1deg) scale(1.015); }
.ticker div { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.ticker span { padding: 18px 22px; white-space: nowrap; font: 950 clamp(17px, 2vw, 29px)/1 "Arial Black", system-ui, sans-serif; letter-spacing: -.02em; }

.incident { min-height: 1040px; padding: 150px 6vw 120px; background: var(--paper); }
.section-intro { display: grid; grid-template-columns: 1fr minmax(320px, 2fr) minmax(220px, .8fr); gap: 3vw; align-items: end; max-width: 1540px; margin: 0 auto 65px; }
.section-kicker { align-self: start; margin: 9px 0 0; font: 900 9px/1.4 system-ui, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.section-intro h2, .hotline h2, .secret h2, .transmission h2 { margin: 0; color: var(--blue); font: 950 clamp(48px, 6.7vw, 106px)/.82 "Arial Black", Impact, sans-serif; letter-spacing: -.065em; }
.section-intro h2 i { font-family: Georgia, serif; font-weight: 500; }
.section-intro > p:last-child { max-width: 320px; margin: 0; font: italic 18px/1.45 Georgia, serif; }
.story-console { position: relative; max-width: 1540px; margin: 0 auto; outline: none; user-select: none; touch-action: pan-y; }
.story-track { display: flex; gap: 24px; transition: transform .7s cubic-bezier(.17,.84,.34,1); transform: translateX(var(--story-shift)); }
.story-card { position: relative; flex: 0 0 min(65vw, 820px); min-height: 540px; display: grid; align-content: end; padding: clamp(28px, 5vw, 70px); overflow: hidden; color: var(--blue); background: var(--blue-soft); border: var(--line) solid var(--blue); border-radius: 5% 3% 6% 2% / 4% 5% 2% 5%; box-shadow: 9px 10px 0 var(--blue); }
.story-card:nth-child(even) { transform: rotate(.55deg); }
.story-card:nth-child(odd) { transform: rotate(-.45deg); }
.story-card.inverted { color: white; background: var(--blue); border-color: var(--blue-deep); }
.story-card h3 { max-width: 650px; margin: 0 0 19px; font: 950 clamp(33px, 4vw, 62px)/.92 "Arial Black", Impact, sans-serif; letter-spacing: -.05em; }
.story-card > p:not(.story-year):not(.margin-note):not(.giant-glyph):not(.name-split) { max-width: 630px; margin: 0; font: 18px/1.56 Georgia, serif; }
.story-stamp { position: absolute; left: 36px; top: 34px; padding: 7px 11px; border: 2px solid currentColor; border-radius: 50%; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .15em; transform: rotate(-2deg); }
.story-year { position: absolute; right: 45px; top: 25px; margin: 0; font: 950 clamp(70px, 10vw, 145px)/.7 "Arial Black", sans-serif; letter-spacing: -.1em; opacity: .13; text-align: right; }
.margin-note { position: absolute; right: 22px; bottom: 28px; max-width: 180px; margin: 0; padding-left: 13px; border-left: 2px solid currentColor; font: 800 9px/1.35 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.card-image { position: absolute; width: 280px; right: 15px; top: 15px; opacity: .16; transform: rotate(9deg); mix-blend-mode: screen; }
.giant-glyph { position: absolute; right: 2%; top: 1%; margin: 0; font: 400 230px/1 Georgia, serif; opacity: .13; transform: rotate(-18deg); }
.name-split { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px 30px; margin: 30px 0 38px; }
.name-split b { font: 950 clamp(37px, 5vw, 66px)/.9 "Arial Black", sans-serif; letter-spacing: -.06em; }
.name-split em { max-width: 350px; font: italic 16px/1.35 Georgia, serif; }
.story-controls { display: flex; align-items: center; gap: 17px; width: min(65vw, 820px); padding: 32px 2px 0; }
.story-controls button { cursor: pointer; display: grid; place-items: center; width: 52px; height: 43px; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); background: var(--paper); font: 25px/1 Georgia, serif; transition: .2s ease; }
.story-controls button:hover { color: white; background: var(--blue); transform: rotate(-5deg); }
.story-controls p { display: flex; flex: 1; align-items: center; gap: 12px; margin: 0; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .13em; }
.story-controls p i { flex: 1; height: 2px; background: rgba(47,120,199,.28); }

.hotline { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 1050px; border-block: var(--line) solid var(--blue); background: var(--blue-soft); }
.hotline-art { position: relative; min-height: 820px; overflow: hidden; border-right: var(--line) solid var(--blue); }
.hotline-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.05); transition: transform 1.2s cubic-bezier(.2,.7,.1,1); }
.hotline-art:hover img { transform: scale(1.055) rotate(-.8deg); }
.art-label { position: absolute; left: 30px; bottom: 30px; max-width: 270px; padding: 12px 15px; color: white; background: var(--blue); border: 2px solid white; font: 900 9px/1.4 system-ui, sans-serif; letter-spacing: .12em; transform: rotate(-2deg); }
.hotline-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 120px clamp(35px, 6vw, 110px); }
.hotline-copy h2 { margin: 25px 0; font-size: clamp(48px, 5.6vw, 88px); }
.hotline-copy > p:not(.section-kicker) { max-width: 530px; margin: 0 0 38px; font: italic 19px/1.5 Georgia, serif; }
.phone { width: min(100%, 510px); padding: 18px; border: var(--line) solid var(--blue); border-radius: 7% 5% 8% 4% / 4% 7% 5% 8%; background: var(--paper); box-shadow: 10px 12px 0 var(--blue); transform: rotate(1deg); }
.phone-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 3px 15px; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .12em; }
.phone-top span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.phone-top i { font-style: normal; letter-spacing: -1px; }
.phone-screen { min-height: 235px; display: grid; place-content: center; justify-items: center; padding: 25px; border: 2px solid var(--blue); background-image: linear-gradient(rgba(47,120,199,.1) 1px, transparent 1px); background-size: 100% 6px; text-align: center; }
.phone-time { margin: 0 0 15px; font: 950 45px/.9 "Arial Black", sans-serif; letter-spacing: -.06em; }
.phone-status { min-height: 56px; margin: 0; font: 900 11px/1.5 "Courier New", monospace; letter-spacing: .08em; }
.waveform { display: flex; align-items: center; gap: 5px; height: 35px; margin-top: 17px; }
.waveform i { display: block; width: 3px; height: 5px; background: var(--blue); }
.phone.ringing .waveform i { animation: wave .5s ease-in-out infinite alternate; }
.phone.ringing .waveform i:nth-child(2n) { animation-delay: -.24s; }
.phone.ringing .waveform i:nth-child(3n) { animation-delay: -.39s; }
.call-button { cursor: pointer; width: 100%; margin-top: 14px; padding: 14px; color: white; background: var(--blue); border: 2px solid var(--blue); font: 900 11px/1 system-ui, sans-serif; letter-spacing: .12em; }
.call-button span { display: inline-block; margin-right: 8px; }

.atlas { min-height: 1180px; padding: 150px 5vw 130px; color: white; background: var(--blue); }
.atlas::after { -webkit-text-stroke-color: rgba(255,255,255,.1); }
.section-intro.light h2, .section-intro.light { color: white; }
.atlas-board { position: relative; max-width: 1420px; margin: 0 auto; overflow: hidden; border: 3px solid white; border-radius: 3% 6% 3% 5% / 5% 3% 6% 3%; background: white; box-shadow: 12px 14px 0 var(--blue-deep); }
.atlas-board > img { display: block; width: 100%; }
.hotspot { cursor: pointer; position: absolute; display: grid; place-items: center; width: 43px; height: 43px; padding: 0; color: white; background: var(--blue); border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 3px var(--blue); animation: hotspot 1.4s ease-in-out infinite; }
.hotspot span { font: 400 24px/1 Georgia, serif; transition: transform .2s ease; }
.hotspot:hover span, .hotspot.active span { transform: rotate(45deg); }
.hotspot.active { color: var(--blue); background: white; }
.hotspot-beanie { left: 13%; top: 15%; }
.hotspot-phone { left: 29%; top: 20%; animation-delay: -.3s; }
.hotspot-cross { left: 67%; top: 18%; animation-delay: -.6s; }
.hotspot-headphones { right: 12%; top: 17%; animation-delay: -.9s; }
.hotspot-tape { left: 16%; bottom: 15%; animation-delay: -.2s; }
.hotspot-pin { right: 6%; bottom: 20%; animation-delay: -.5s; }
.atlas-detail { position: absolute; left: 50%; bottom: 4%; width: min(430px, 42%); padding: 22px 25px; color: white; background: var(--blue); border: 2px solid white; border-radius: 4% 7% 3% 8% / 8% 4% 6% 3%; box-shadow: 7px 7px 0 var(--blue-deep); transform: translateX(-50%) rotate(-1deg); }
.atlas-detail > p:first-child { margin: 0 0 8px; font: 900 8px/1 system-ui, sans-serif; letter-spacing: .16em; }
.atlas-detail h3 { margin: 0 0 9px; font: 950 clamp(19px, 2vw, 30px)/.95 "Arial Black", sans-serif; letter-spacing: -.04em; }
.atlas-detail > p:last-child { margin: 0; font: 14px/1.45 Georgia, serif; }

.roadmap { min-height: 1150px; padding: 150px 5vw 130px; background: var(--paper); }
.signal-map { position: relative; max-width: 1450px; height: min(66vw, 820px); min-height: 680px; margin: 0 auto; border: var(--line) solid var(--blue); border-radius: 5% 2% 7% 3% / 3% 8% 2% 6%; background-image: radial-gradient(circle, rgba(47,120,199,.18) 1.5px, transparent 1.5px); background-size: 25px 25px; }
.signal-path { position: absolute; inset: 7% 5%; width: 90%; height: 86%; overflow: visible; }
.signal-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.path-shadow { stroke: rgba(47,120,199,.14); stroke-width: 24; }
.path-live { stroke: var(--blue); stroke-width: 5; stroke-dasharray: 14 16; animation: dash 1.1s linear infinite; }
.signal-node { cursor: pointer; position: absolute; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 132px; padding: 0; color: var(--blue); background: transparent; border: 0; text-align: center; }
.signal-node span { display: grid; place-items: center; width: 70px; aspect-ratio: 1; background: var(--paper); border: 3px solid var(--blue); border-radius: 48% 54% 44% 57% / 52% 44% 58% 46%; box-shadow: 5px 5px 0 var(--blue); font: 900 19px/1 Georgia, serif; transition: .25s ease; }
.signal-node b { padding: 5px 7px; background: var(--paper); font: 900 9px/1.15 system-ui, sans-serif; letter-spacing: .1em; }
.signal-node:hover span, .signal-node.active span { color: white; background: var(--blue); transform: scale(1.12) rotate(-7deg); }
.node-1 { left: 4%; top: 58%; }
.node-2 { left: 23%; top: 23%; }
.node-3 { left: 43%; top: 45%; }
.node-4 { right: 22%; top: 16%; }
.node-5 { right: 4%; top: 50%; }
.phase-card { position: absolute; left: 50%; bottom: 5%; width: min(480px, 44%); padding: 27px 31px; color: white; background: var(--blue); border: 3px solid var(--blue-deep); border-radius: 4% 7% 3% 6% / 7% 4% 6% 3%; box-shadow: 8px 9px 0 var(--blue-deep); transform: translateX(-50%) rotate(.8deg); }
.phase-card > p:first-child { margin: 0 0 11px; font: 900 8px/1 system-ui, sans-serif; letter-spacing: .15em; }
.phase-card h3 { margin: 0 0 10px; font: 950 clamp(23px, 3vw, 36px)/.95 "Arial Black", sans-serif; letter-spacing: -.04em; }
.phase-card > p:nth-child(3) { margin: 0; font: 15px/1.48 Georgia, serif; }
.phase-meter { height: 7px; margin-top: 20px; border: 1px solid white; }
.phase-meter i { display: block; width: 20%; height: 100%; background: white; transition: width .5s ease; }

.secret { min-height: 900px; display: grid; grid-template-columns: .74fr 1.26fr; align-items: center; gap: 6vw; padding: 150px 7vw; color: white; background: var(--blue); }
.secret::after { -webkit-text-stroke-color: rgba(255,255,255,.1); }
.secret h2 { margin: 23px 0; color: white; }
.secret-copy > p:not(.section-kicker):not(.scratch-help) { max-width: 430px; font: italic 20px/1.5 Georgia, serif; }
.scratch-help { margin-top: 28px; padding-left: 45px; position: relative; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .12em; }
.scratch-help::before { content: "↝"; position: absolute; left: 4px; top: -13px; font: 38px/1 Georgia, serif; }
.scratch-card { position: relative; width: 100%; min-height: 510px; border: 4px solid white; border-radius: 4% 7% 3% 8% / 7% 4% 8% 3%; overflow: hidden; background: white; box-shadow: 13px 15px 0 var(--blue-deep); transform: rotate(1deg); touch-action: none; }
.scratch-reveal { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 60px; overflow: hidden; color: var(--blue); text-align: center; }
.scratch-reveal img { position: absolute; z-index: 0; right: -9%; bottom: -25%; width: 53%; opacity: .11; transform: rotate(13deg); }
.scratch-reveal p, .scratch-reveal h3, .scratch-reveal small { position: relative; z-index: 1; }
.scratch-reveal p { margin: 0 0 17px; font: 900 11px/1.2 system-ui, sans-serif; letter-spacing: .16em; }
.scratch-reveal h3 { margin: 0; font: 950 clamp(41px, 5vw, 78px)/.87 "Arial Black", sans-serif; letter-spacing: -.055em; }
.scratch-reveal small { margin-top: 23px; font: 800 9px/1.3 system-ui, sans-serif; letter-spacing: .1em; }
#scratchCanvas { cursor: crosshair; position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; transition: opacity .6s ease; }
#scratchCanvas.cleared { opacity: 0; pointer-events: none; }

.transmission { min-height: 1000px; display: grid; place-items: center; padding: 140px 6vw; background: white; }
.transmission-wallpaper { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.transmission-wallpaper img { width: 100%; height: 100%; object-fit: cover; opacity: .2; transform: scale(1.08); filter: contrast(1.15); }
.transmission::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,.5), white 72%); }
.transmission-card { width: min(960px, 92vw); padding: clamp(35px, 7vw, 95px); color: white; background: var(--blue); border: 4px solid var(--blue-deep); border-radius: 7% 3% 6% 4% / 3% 7% 4% 6%; box-shadow: 15px 17px 0 var(--blue-deep); text-align: center; transform: rotate(-.7deg); }
.transmission-card .section-kicker { margin: 0 0 29px; }
.transmission h2 { color: white; font-size: clamp(54px, 8vw, 118px); }
.transmission-card > p:not(.section-kicker) { max-width: 650px; margin: 30px auto; font: italic 19px/1.48 Georgia, serif; }
.contract { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: min(700px, 100%); margin: 35px auto; padding: 10px 10px 10px 17px; border: 2px solid white; text-align: left; transform: rotate(.6deg); }
.contract span { font: 900 9px/1 system-ui, sans-serif; letter-spacing: .12em; }
.contract code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/1 "Courier New", monospace; }
.contract button { cursor: pointer; min-height: 39px; padding: 0 15px; color: var(--blue); background: white; border: 0; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .1em; }
.final-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 17px; }
.transmission .scribble-button { border-color: white; box-shadow: 5px 5px 0 var(--blue-deep); }
.transmission .scribble-button:first-child { color: var(--blue); background: white; }
.transmission .scribble-button.ghost { color: white; background: transparent; }

footer { min-height: 160px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; padding: 35px 4vw; color: white; background: var(--blue); border-top: 3px solid var(--blue-deep); }
footer > p { margin: 0; text-align: center; font: 900 10px/1.55 system-ui, sans-serif; letter-spacing: .1em; }
footer small { opacity: .7; font-size: 7px; }
footer > a:last-child { justify-self: end; font: 900 9px/1.2 system-ui, sans-serif; letter-spacing: .1em; border-bottom: 1px solid white; padding-bottom: 4px; }
.footer-brand img { border: 2px solid white; }

@keyframes boot-wobble { 50% { transform: rotate(4deg) scale(.97); } }
@keyframes boot-load { to { width: 100%; } }
@keyframes page-shiver { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes hot-wobble { 25% { transform: rotate(-4deg) scale(1.04); } 75% { transform: rotate(5deg) scale(.99); } }
@keyframes sound-bars { to { height: 3px; } }
@keyframes float { 50% { transform: translateY(-14px) rotate(-1deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes scroll-line { 50% { transform: scaleX(.35); transform-origin: left; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes wave { to { height: 31px; } }
@keyframes hotspot { 50% { box-shadow: 0 0 0 9px rgba(47,120,199,.25); transform: scale(1.07); } }
@keyframes dash { to { stroke-dashoffset: -30; } }

@media (max-width: 1100px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav nav { display: none; }
  .sound-label { display: none; }
  .hero { grid-template-columns: 1fr 1fr; padding-inline: 5vw; }
  .section-intro { grid-template-columns: 1fr 3fr; }
  .section-intro > p:last-child { grid-column: 2; }
  .signal-map { height: 760px; }
  .node-2 { left: 18%; }
  .node-4 { right: 17%; }
}

@media (max-width: 780px) {
  .cursor { display: none; }
  .nav { min-height: 69px; padding: 9px 4vw; }
  .brand span { display: none; }
  .brand img { width: 37px; height: 37px; }
  .sound-toggle { padding-inline: 3px; }
  .buy-button { min-height: 40px; padding-inline: 13px; font-size: 9px; }
  .x-button { min-width: 39px; min-height: 40px; }
  .hero { grid-template-columns: 1fr; gap: 18px; padding: 95px 6vw 105px; text-align: center; }
  .hero-grid { inset: 83px 2vw 14px; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; order: 2; }
  .portrait-wrap { order: 1; width: min(70vw, 390px); margin-top: 4px; }
  h1 { font-size: clamp(47px, 14.3vw, 79px); margin-top: 17px; }
  .dek { max-width: 520px; font-size: 18px; }
  .hero-actions { justify-content: center; margin-top: 25px; }
  .dial { right: 6vw; bottom: 25px; }
  .dial small { display: none; }
  .dial-number { width: 49px; }
  .scroll-note, .margin-code, .note-c { display: none; }
  .orbit-note { font-size: 7px; }
  .ticker span { padding-block: 14px; }
  .incident { min-height: 910px; padding: 105px 5vw 90px; }
  .section-intro { display: block; margin-bottom: 45px; text-align: center; }
  .section-intro .section-kicker { margin-bottom: 20px; }
  .section-intro h2, .hotline h2, .secret h2 { font-size: clamp(45px, 12vw, 73px); }
  .section-intro > p:last-child { margin: 25px auto 0; }
  .story-track { gap: 13px; }
  .story-card { flex-basis: 84vw; min-height: 570px; padding: 33px 27px; border-radius: 4%; }
  .story-card h3 { font-size: 37px; }
  .story-card > p:not(.story-year):not(.margin-note):not(.giant-glyph):not(.name-split) { font-size: 16px; }
  .story-year { top: 80px; right: 25px; }
  .story-stamp { left: 25px; top: 24px; }
  .margin-note { position: static; margin-top: 22px; }
  .name-split { grid-template-columns: 1fr; gap: 8px; }
  .name-split b { font-size: 42px; }
  .name-split em { margin-bottom: 12px; }
  .story-controls { width: 84vw; }
  .hotline { grid-template-columns: 1fr; }
  .hotline-art { min-height: 65vw; border-right: 0; border-bottom: 3px solid var(--blue); }
  .hotline-copy { align-items: center; padding: 90px 6vw 105px; text-align: center; }
  .phone { text-align: initial; }
  .atlas { min-height: auto; padding: 105px 4vw 90px; }
  .atlas-board { min-height: 670px; background: white; }
  .atlas-board > img { height: 440px; object-fit: cover; }
  .hotspot { width: 36px; height: 36px; }
  .hotspot-beanie { left: 10%; top: 8%; }
  .hotspot-phone { left: 29%; top: 12%; }
  .hotspot-cross { left: 64%; top: 10%; }
  .hotspot-headphones { right: 7%; top: 10%; }
  .hotspot-tape { left: 11%; top: 43%; bottom: auto; }
  .hotspot-pin { right: 4%; top: 41%; bottom: auto; }
  .atlas-detail { left: 5%; right: 5%; bottom: 25px; width: auto; transform: rotate(-1deg); }
  .roadmap { min-height: auto; padding: 105px 4vw 90px; }
  .signal-map { min-height: 900px; height: 900px; }
  .signal-path { transform: rotate(90deg) scale(.85, 1.15); }
  .signal-node { width: 120px; }
  .signal-node span { width: 59px; }
  .node-1 { left: 8%; top: 9%; }
  .node-2 { left: auto; right: 7%; top: 23%; }
  .node-3 { left: 8%; top: 39%; }
  .node-4 { left: auto; right: 7%; top: 54%; }
  .node-5 { left: 8%; right: auto; top: 67%; }
  .phase-card { left: 5%; right: 5%; bottom: 26px; width: auto; transform: rotate(.8deg); }
  .secret { grid-template-columns: 1fr; gap: 45px; padding: 105px 6vw; text-align: center; }
  .secret-copy { display: flex; flex-direction: column; align-items: center; }
  .scratch-card { min-height: 470px; }
  .scratch-reveal { padding: 35px 22px; }
  .scratch-reveal h3 { font-size: clamp(35px, 9.5vw, 58px); }
  .transmission { min-height: 900px; padding: 100px 3vw; }
  .transmission-card { width: 94vw; padding: 55px 22px; }
  .transmission h2 { font-size: clamp(50px, 13.5vw, 81px); }
  .contract { grid-template-columns: auto minmax(0, 1fr); }
  .contract button { grid-column: 1 / -1; }
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  footer > a:last-child { justify-self: center; }
}

@media (max-width: 430px) {
  .nav-actions { gap: 5px; }
  .sound-toggle { display: none; }
  .hero { padding-top: 87px; }
  .portrait-wrap { width: 68vw; }
  .note-a { left: -13%; }
  .note-b { right: -14%; }
  .hero-actions { flex-direction: column; gap: 12px; }
  .story-card { flex-basis: 85vw; }
  .scratch-card { min-height: 420px; }
}

@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, #scratchCanvas { cursor: none; }
}

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