:root {
  --navy: #171b2e;
  --navy-deep: #0d101b;
  --navy-soft: #242a43;
  --paper: #eee7d5;
  --paper-hi: #f7f0df;
  --smoke: #aaa9a3;
  --smoke-dark: #676b68;
  --red: #dc493f;
  --red-dark: #8d2d2a;
  --yellow: #f5df49;
  --ink: #20243a;
  --body-muted: #d4d0c4;
  --mono: 'Space Mono', monospace;
  --hand: 'Caveat', cursive;
  --body: 'Archivo', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--navy); scrollbar-width: thin; scrollbar-color: var(--red) var(--navy-deep); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--navy); color: var(--paper); font-family: var(--body); font-kerning: normal; text-rendering: optimizeLegibility; letter-spacing: .003em; transition: background .7s ease, color .7s ease; }
::selection { background: var(--yellow); color: var(--ink); text-shadow: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb { border: 2px solid var(--navy-deep); background: var(--red); }
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .22; 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='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
body.side-b { --navy: #090b13; --navy-deep: #05060b; --navy-soft: #181b27; --paper: #c9c3b5; --paper-hi: #ddd6c7; --red: #ef574d; --yellow: #d2c342; --body-muted: #bbb6aa; }
a { color: inherit; }
button { font: inherit; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 300; background: var(--yellow); color: var(--ink); padding: .8rem 1rem; transform: translateY(-170%); transition: transform .2s; }
.skip:focus { transform: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.room-glow { position: absolute; width: 74vw; height: 58rem; right: 0; top: -15rem; pointer-events: none; background: radial-gradient(ellipse at 90% 8%, rgba(244, 212, 123, .15), transparent 64%); filter: blur(12px); transition: opacity .7s; }
.side-b .room-glow { opacity: .35; }
.load-curtain { position: fixed; inset: 0; z-index: 250; pointer-events: none; display: grid; place-items: center; color: var(--yellow); font: 700 .62rem var(--mono); letter-spacing: .2em; animation: curtainAway 1.15s cubic-bezier(.76,0,.24,1) .18s forwards; }
.load-curtain::before, .load-curtain::after { content: ""; position: absolute; inset-block: 0; width: 51%; background: #0a0d18; }
.load-curtain::before { left: 0; transform-origin: left; animation: curtainLeft .95s cubic-bezier(.76,0,.24,1) .22s forwards; }
.load-curtain::after { right: 0; transform-origin: right; animation: curtainRight .95s cubic-bezier(.76,0,.24,1) .22s forwards; }
.load-curtain span { position: relative; z-index: 1; border: 1px solid rgba(245, 223, 73, .5); padding: .6rem .8rem; animation: counterBlink .55s steps(2) 2; }
.flip-flash { position: fixed; inset: 0; z-index: 240; pointer-events: none; display: grid; place-items: center; background: #070910; color: var(--yellow); font: 700 .68rem var(--mono); letter-spacing: .2em; transform: translateY(-102%); }
.flip-flash::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--red); box-shadow: 0 16px 0 rgba(245,223,73,.3); }
body.is-flipping .flip-flash { animation: flipShutter .85s cubic-bezier(.76,0,.24,1); }
body.is-flipping main { animation: pageJolt .85s ease; }

.topbar { height: 96px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1rem, 5vw, 5rem); position: relative; z-index: 20; border-bottom: 1px solid rgba(238,231,213,.17); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 700 .68rem/1.05 var(--mono); letter-spacing: .17em; }
.brand-spark { width: 12px; height: 12px; position: relative; transform: rotate(45deg); background: var(--red); clip-path: polygon(48% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); transition: transform .45s cubic-bezier(.16,1,.3,1),background .3s; }
.brand:hover .brand-spark,.brand:focus-visible .brand-spark { transform: rotate(225deg) scale(1.18); background: var(--yellow); }
.topbar nav { display: flex; align-items: center; gap: clamp(.35rem, 1.8vw, 1.7rem); }
.topbar nav > a { min-width: 48px; min-height: 44px; display: grid; place-items: center; text-decoration: none; text-transform: uppercase; font: 700 .61rem var(--mono); letter-spacing: .13em; position: relative; }
.topbar nav > a::after { content: ""; height: 2px; background: var(--yellow); position: absolute; left: 8px; right: 8px; bottom: 8px; transform: scaleX(0); transition: transform .25s; }
.topbar nav > a:hover::after,.topbar nav > a:focus-visible::after { transform: scaleX(1); }
.side-switch { min-height: 48px; min-width: 174px; border: 1px solid rgba(238,231,213,.5); background: rgba(5,7,13,.12); color: var(--paper); font: 700 .59rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 3.4rem 0 .9rem; position: relative; cursor: pointer; transition: background .25s, color .7s; }
.side-switch:hover { background: rgba(245,223,73,.1); border-color: var(--yellow); }
.switch-notch { position: absolute; right: 5px; top: 5px; width: 34px; height: 36px; background: var(--red); box-shadow: inset 0 -5px rgba(0,0,0,.3), -2px 0 rgba(255,255,255,.15); transition: transform .55s cubic-bezier(.2,.8,.2,1), background .7s; }
.side-b .switch-notch { transform: translateX(-128px); background: var(--yellow); }

.hero { min-height: calc(100svh - 96px); max-width: 1530px; margin: auto; padding: clamp(4.5rem, 8vw, 8.5rem) clamp(1rem, 5vw, 5rem) 6.5rem; display: grid; grid-template-columns: minmax(300px,.67fr) minmax(650px,1.5fr); gap: clamp(2rem,5vw,6rem); align-items: center; position: relative; isolation: isolate; }
.tape-thread { position: absolute; inset: 6% -7% auto; width: 114%; height: 84%; z-index: -1; opacity: .22; }
.tape-thread path { fill: none; stroke: #080a10; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 16 8; animation: threadDrift 18s linear infinite; }
.hero-copy { align-self: center; position: relative; z-index: 2; }
.eyebrow { font: 700 clamp(.61rem,.85vw,.72rem) var(--mono); letter-spacing: .17em; line-height: 1.55; color: var(--yellow); text-transform: uppercase; }
.hero h1 { margin: 1.25rem 0 2.3rem; font: 600 clamp(4.8rem,7.1vw,7.8rem)/.73 var(--hand); letter-spacing: -.055em; transform: rotate(-2deg); white-space: nowrap; text-shadow: 0 3px 20px rgba(0,0,0,.18); }
.hero h1 em { color: var(--red); font-style: normal; margin-left: .36em; }
.dedication { width: max-content; max-width: 80%; margin: 0 0 0 20%; color: var(--paper); font: 600 clamp(1.4rem,2vw,2.05rem)/1.04 var(--hand); transform: rotate(-4deg); }
.scribble-arrow { display: block; width: 125px; margin: .5rem 0 -2.5rem 57%; transform: rotate(9deg); }
.scribble-arrow path { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 190; animation: drawArrow 1s ease 1.25s both; }
.case-code { position: absolute; left: -1.2rem; top: -5.2rem; padding-left: .85rem; border-left: 3px solid var(--red); display: grid; font: 700 .47rem/1.7 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: #96978f; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.case-code b { color: var(--paper); }

.deck-wrap { position: relative; transform: rotate(.65deg); filter: drop-shadow(0 42px 50px rgba(0,0,0,.48)); }
.deck { color: #15191a; position: relative; padding: 16px; border: 1px solid #d0d1ca; border-radius: 8px; background: linear-gradient(118deg,#6a6e6d 0,#aeb0aa 19%,#898c88 47%,#b6b6af 61%,#6d706e 100%); box-shadow: inset 0 0 0 5px #555957, inset 0 0 35px rgba(255,255,255,.2), inset 0 -10px 22px rgba(0,0,0,.17), 0 6px 0 #303332; }
.deck::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(0,0,0,.55); }
.deck::after { content: "PROPERTY / E. ROWAN"; position: absolute; right: 20px; top: -15px; background: #ece4cf; color: #222638; padding: .18rem .48rem; font: 700 .43rem var(--mono); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.deck-header { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font: 700 .66rem var(--mono); letter-spacing: .1em; }
.deck-header b { font-size: 1.02rem; }
.deck-header small { margin-left: .9rem; font-size: .48rem; }
.power { font-size: .55rem; }
.power i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #ed4638; box-shadow: 0 0 9px #ff5547; }

.meter-bank { height: 126px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 9px 14px; padding: 7px; background: #3a3d3c; box-shadow: inset 0 6px 12px rgba(0,0,0,.35); }
.meter { position: relative; overflow: hidden; background: linear-gradient(180deg,#e9e1c8,#d8cda9); box-shadow: inset 0 0 26px rgba(120,77,34,.22); }
.meter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 20%,rgba(255,255,255,.32) 40%,transparent 58%); pointer-events: none; }
.meter-scale { display: flex; justify-content: space-around; padding: 10px 8% 0; font: 700 .46rem var(--mono); position: relative; z-index: 2; }
.meter-lines { position: absolute; left: 17%; right: 17%; top: 31px; height: 50px; background: repeating-conic-gradient(from -54deg at 50% 100%,#303432 0 .35deg,transparent .45deg 8deg); opacity: .65; }
.needle { position: absolute; left: 50%; bottom: 17px; width: 2px; height: 74px; background: #b82f29; transform-origin: 50% 100%; transform: rotate(-32deg); transition: transform .07s linear; z-index: 3; }
.needle::after { content: ""; position: absolute; left: -4px; bottom: -5px; width: 10px; height: 10px; border-radius: 50%; background: #282b2a; }
.meter-label { position: absolute; left: 8%; right: 8%; bottom: 6px; display: flex; justify-content: space-between; align-items: center; font: 700 .48rem var(--mono); }
.meter-label strong { font-size: .68rem; }

.cassette-bay { height: 318px; position: relative; display: grid; place-items: center; margin: 0 9px; padding: 23px 6%; background: radial-gradient(circle at 50% 35%,#3d4241,#222625 72%); box-shadow: inset 0 10px 23px #111414; }
.bay-shadow { position: absolute; inset: 12px; border: 1px solid #555b58; box-shadow: inset 0 0 20px rgba(0,0,0,.25); }
.cassette { width: 100%; max-width: 535px; aspect-ratio: 1.58; position: relative; overflow: hidden; border: 2px solid #c3c4bd; border-radius: 13px; background: linear-gradient(135deg,rgba(214,215,206,.86),rgba(129,133,130,.88)); box-shadow: inset 0 0 0 5px rgba(55,59,58,.35),inset 0 -22px 25px rgba(47,51,51,.18),0 12px 17px #111; }
.cassette-edge { position: absolute; inset: 10px; border: 1px solid rgba(39,43,43,.48); border-radius: 9px; }
.cassette-label { position: absolute; left: 8%; right: 8%; top: 8%; height: 45%; overflow: hidden; border-top: 8px solid var(--red); border-radius: 3px; background: var(--paper-hi); color: var(--ink); box-shadow: 0 2px 2px rgba(0,0,0,.2); transition: filter .7s, background .7s; }
.side-b .cassette-label { filter: brightness(.72) saturate(.72); }
.label-corner { position: absolute; right: 8px; top: 3px; font: 700 .95rem var(--mono); }
.tape-title { margin: .08rem 2.7rem 0 1rem; font: 700 clamp(1.2rem,2vw,1.8rem) var(--hand); transform: rotate(-1deg); white-space: nowrap; }
.tape-sub { margin: -.2rem 0 0 2rem; font: 600 .95rem var(--hand); }
.label-lines { position: absolute; left: 5%; right: 5%; bottom: 4px; height: 1px; background: #879ba6; box-shadow: 0 -22px #879ba6; }
.tape-window { position: absolute; left: 18%; right: 18%; top: 48%; height: 27%; display: flex; align-items: center; justify-content: space-between; padding: 0 7%; overflow: hidden; border: 4px solid #696d6b; border-radius: 30px; background: #303535; }
.reel { width: 61px; aspect-ratio: 1; position: relative; z-index: 3; border: 7px solid #dedfd8; border-radius: 50%; background: repeating-conic-gradient(#d8d9d2 0 12deg,#707470 12deg 27deg); will-change: transform; }
.reel i { position: absolute; inset: 27%; border: 4px dashed #c9cbc4; border-radius: 50%; background: #333836; }
.tape-fill { position: absolute; top: 50%; width: 115px; aspect-ratio: 1; border: 2px solid #181310; border-radius: 50%; background: radial-gradient(circle,#37271f 0 58%,#1d1511 60%); transform: translateY(-50%); will-change: transform; }
.tape-left { left: -18px; }
.tape-right { right: -18px; }
.tape-path { height: 2px; position: absolute; left: 22%; right: 22%; bottom: 4px; background: #17110f; box-shadow: 0 -1px rgba(255,255,255,.1); }
.cassette-screws { position: absolute; inset: 7%; display: flex; justify-content: space-between; align-items: flex-end; }
.cassette-screws i { width: 7px; height: 7px; border-radius: 50%; background: #3e4241; box-shadow: 0 -235px #3e4241; }
.cassette-bottom { position: absolute; bottom: -1%; left: 26%; right: 26%; height: 20%; border: 1px solid #4f5250; background: #777a76; clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); }
.cassette-bottom span { display: inline-block; width: 10px; height: 10px; margin: 16% 15%; border-radius: 50%; background: #202423; }
.fingerprint { position: absolute; right: 13%; bottom: 11%; width: 29px; height: 38px; opacity: .12; border: 1px solid #6b2925; border-radius: 50%; background: repeating-radial-gradient(ellipse at center,transparent 0 2px,#6b2925 3px 4px); transform: rotate(23deg); }

.deck-controls { display: flex; align-items: stretch; gap: 17px; padding: 16px 9px 6px; }
.counter-panel { min-width: 126px; padding: 7px 10px; border: 4px solid #505451; background: #303432; color: #efefdc; text-align: center; }
.counter { display: block; padding: 2px 5px; background: #111513; color: #ece5bf; font: 400 1.46rem var(--mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .16em; text-shadow: 0 0 7px rgba(245,223,73,.45); box-shadow: inset 0 0 10px #000; }
.counter-panel small { font: 700 .43rem var(--mono); letter-spacing: .1em; }
.transport { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; flex: 1; }
.transport-btn { min-width: 0; height: 66px; display: grid; place-items: center; padding: 7px 2px 1px; border: 0; border-top: 3px solid #d3d4cc; border-bottom: 7px solid #363a38; background: linear-gradient(#929591,#626663); color: #111514; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,.36); transition: transform .08s,box-shadow .08s,border-width .08s,filter .2s; font: 700 .7rem var(--mono); }
.transport-btn:hover { filter: brightness(1.09); }
.transport-btn span { font-size: .92rem; }
.transport-btn small { font-size: .43rem; letter-spacing: .08em; }
.transport-btn:active,.transport-btn.active { transform: translateY(5px); border-bottom-width: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.transport-btn.play { background: linear-gradient(#e9db4d,#a99e2d); }
.transport-btn.stop { background: linear-gradient(#d6534b,#91312d); color: #f3ebdd; }
.cue-window { height: 29px; margin: 4px 9px 0; padding: 0 9px; display: flex; align-items: center; gap: .75rem; overflow: hidden; background: #242927; color: #d8d4c7; font: 700 .45rem var(--mono); letter-spacing: .08em; }
.cue-window span { color: var(--yellow); white-space: nowrap; }
.cue-window strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-hint { margin: .9rem .7rem 0; color: #aaa99d; text-align: right; font: 400 .6rem var(--mono); letter-spacing: .04em; }
.sound-hint span { color: var(--yellow); font-weight: 700; text-transform: uppercase; }

.track-section { min-height: 820px; position: relative; display: grid; grid-template-columns: minmax(160px,220px) minmax(0,920px); justify-content: center; gap: clamp(3rem,7vw,8rem); padding: clamp(7rem,10vw,10rem) max(5vw,calc((100vw - 1350px)/2)); background: var(--paper); color: var(--ink); transition: background .7s; }
.track-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 31px,rgba(40,62,87,.065) 32px),linear-gradient(90deg,rgba(220,73,63,.08),transparent 16%); }
.track-margin { position: relative; align-self: center; }
.section-stamp { width: 150px; display: grid; gap: .52rem; padding: 1.15rem .8rem; border: 3px solid var(--red); color: var(--red); text-align: center; transform: rotate(-7deg); font: 700 .65rem var(--mono); letter-spacing: .1em; }
.margin-note { margin: 4rem 0 1rem .5rem; font: 700 1.8rem/1.02 var(--hand); color: #3a3a4b; transform: rotate(-5deg); }
.margin-arrow { margin: -1rem 0 2rem 7rem; color: var(--red); font: 700 3rem var(--hand); transform: rotate(24deg); }
.case-facts { border-top: 2px solid var(--ink); margin: 2rem 0 0; font: 700 .5rem var(--mono); text-transform: uppercase; }
.case-facts div { display: grid; grid-template-columns: 1fr 1fr; padding: .55rem 0; border-bottom: 1px solid rgba(32,36,58,.3); }
.case-facts dd { margin: 0; text-align: right; }
.track-paper { position: relative; padding: clamp(2rem,5vw,4.5rem); background: var(--paper-hi); box-shadow: 18px 22px 0 rgba(24,28,43,.14); transform: rotate(-.6deg); transition: background .7s; }
.track-paper::before { content: ""; position: absolute; left: 7%; right: 6%; top: -10px; height: 24px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 28px,transparent 28px 42px); transform: rotate(.4deg); }
.paper-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 3px solid var(--ink); }
.paper-head p { margin: 0; font: 600 1.35rem var(--hand); }
.paper-head p b { color: var(--red); font-size: 2.8rem; }
.paper-head h2 { margin: -.35rem 0 0; font: 700 clamp(2.6rem,4.2vw,4.35rem)/.88 var(--hand); letter-spacing: -.03em; }
.paper-note { max-width: 250px; color: #5d5955; text-align: right; font-size: 1.06rem!important; transform: rotate(2deg); }
.tracks { list-style: none; padding: 0; margin: 1rem 0; counter-reset: tracks; }
.tracks li { border-bottom: 1px solid rgba(32,35,58,.22); }
.tracks button { width: 100%; min-height: 72px; position: relative; display: grid; grid-template-columns: 38px 1.4fr 1fr 54px; align-items: center; padding: .35rem .45rem; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tracks button::before { content: ""; position: absolute; inset: 7px 0; z-index: 0; background: var(--yellow); transform: scaleX(0) rotate(-.5deg); transform-origin: left; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.tracks button::after { content: "CUE"; position: absolute; left: 48%; top: 4px; z-index: 2; opacity: 0; color: var(--red); font: 700 .46rem var(--mono); letter-spacing: .1em; transform: rotate(-5deg); transition: opacity .2s; }
.tracks button:hover::before,.tracks button:focus-visible::before,.tracks button.active::before { transform: scaleX(1) rotate(-.5deg); }
.tracks button.active::after { opacity: 1; }
.tracks button > * { position: relative; z-index: 1; }
.tracks span,.tracks time { font: 700 .66rem var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.tracks strong { font: 700 clamp(1.34rem,2.1vw,1.9rem) var(--hand); }
.tracks i { color: #5d5a55; font: 400 .72rem var(--mono); font-style: normal; }
.tracks time { text-align: right; }
.run-time { margin-top: 1.5rem; font: 700 .61rem var(--mono); letter-spacing: .06em; }
.run-time span { padding: .18rem .35rem; background: var(--red); color: white; }
.coffee-ring { position: absolute; right: 0; bottom: -25px; width: 122px; height: 122px; border: 8px double rgba(116,66,39,.17); border-radius: 50%; transform: translateX(16%) scaleY(.55) rotate(25deg); }

.liner { max-width: 1370px; min-height: 920px; margin: auto; padding: clamp(8rem,11vw,11rem) 5vw; display: grid; grid-template-columns: minmax(230px,.75fr) minmax(380px,1.25fr) minmax(150px,.48fr); gap: clamp(2.5rem,6vw,7rem); align-items: start; position: relative; }
.liner::before { content: ""; position: absolute; width: 70%; height: 8px; left: -12%; top: 52%; background: #080a10; opacity: .32; transform: rotate(-12deg); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.liner-heading { position: sticky; top: 2rem; padding-top: 2rem; }
.liner-heading h2,.bedroom h2,.anatomy h2 { margin: .9rem 0; font: 600 clamp(3.2rem,5.3vw,5.9rem)/.82 var(--hand); letter-spacing: -.04em; }
.pocket-label { width: max-content; margin-top: 4rem; padding: .5rem .7rem; border: 1px solid rgba(238,231,213,.4); color: #aaa69b; font: 700 .51rem var(--mono); letter-spacing: .12em; transform: rotate(-3deg); }
.letter { position: relative; padding: clamp(2.2rem,5vw,4.7rem); background: #e8e0ce; color: var(--ink); font: 400 clamp(.98rem,1.2vw,1.1rem)/1.78 var(--body); box-shadow: -15px 17px 0 var(--red),0 25px 50px rgba(0,0,0,.2); transform: rotate(.75deg); }
.letter::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 31px,rgba(76,101,126,.13) 32px); }
.letter::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,255,255,.75) 34px 52px); transform: translateY(-45%); }
.letter p { position: relative; }
.letter > p:first-of-type,.letter-end { font: 600 1.85rem/1.08 var(--hand); }
.paperclip { position: absolute; z-index: 2; right: 15%; top: -28px; width: 20px; height: 72px; border: 3px solid #787b78; border-radius: 12px; transform: rotate(6deg); box-shadow: inset 0 0 0 3px #e8e0ce; }
.found-stack { margin-top: 8rem; transform: rotate(4deg); }
.date-card { padding: 1rem; border: 2px solid var(--paper); text-align: center; font: 700 .59rem var(--mono); letter-spacing: .1em; }
.date-card strong { display: block; color: var(--yellow); font: 700 5rem/.82 var(--hand); }
.found-stack > p { padding: 1.1rem .4rem; border-bottom: 1px solid rgba(238,231,213,.45); font: 600 1rem/1.2 var(--hand); }
.catalogue { display: block; color: #9e9b91; font: 700 .47rem var(--mono); letter-spacing: .1em; }

.bedroom { min-height: 820px; position: relative; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; background: var(--navy-deep); transition: background .7s; }
.bedroom-scene { min-height: 820px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 45% 42%,rgba(223,204,135,.08),transparent 37%); }
.window-frame { position: absolute; left: 6%; top: 9%; width: 63%; height: 56%; overflow: hidden; border: 15px solid #111521; box-shadow: inset 0 0 70px #05070c,0 30px 70px rgba(0,0,0,.45); }
.moon { position: absolute; left: 10%; top: 12%; width: 24vw; max-width: 360px; aspect-ratio: 1; border-radius: 50%; background: #e4d99a; box-shadow: 0 0 95px rgba(230,221,169,.24); }
.moon::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 40% 30%,#c4ba85 0 5%,transparent 6%),radial-gradient(circle at 62% 68%,#c4ba85 0 9%,transparent 10%); }
.blind-lines { position: absolute; inset: -10%; background: repeating-linear-gradient(0deg,#0c101b 0 20px,transparent 22px 68px); transform: skewY(-7deg); opacity: .92; }
.radio { position: absolute; z-index: 4; left: 13%; bottom: 116px; width: 265px; height: 145px; padding: 18px; border: 6px solid #3b3e3d; background: linear-gradient(130deg,#878985,#4f5351); box-shadow: 10px 15px 24px rgba(0,0,0,.45),inset 0 0 18px rgba(255,255,255,.12); transform: rotate(-2deg); }
.antenna { position: absolute; width: 210px; height: 4px; left: 35px; top: -57px; background: #767975; transform: rotate(-24deg); transform-origin: left; }
.dial { height: 24px; padding: 5px 7px; background: #d8ceb0; color: #242827; font: 700 .42rem var(--mono); display: flex; justify-content: space-between; }
.dial i { width: 1px; background: #8f352e; }
.radio-face { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #161918; }
.radio-face b { font: 800 1.1rem var(--body); letter-spacing: .08em; }
.radio-face span { font: 700 .52rem var(--mono); }
.desk-lamp { appearance: none; position: absolute; z-index: 8; right: 14%; bottom: 120px; width: 150px; height: 230px; padding: 0; border: 0; border-left: 13px solid var(--red-dark); background: transparent; color: inherit; cursor: pointer; transform: rotate(9deg); transform-origin: bottom; transition: filter .3s,transform .35s cubic-bezier(.16,1,.3,1); }
.desk-lamp i { position: absolute; left: -74px; top: -52px; width: 148px; height: 88px; background: var(--red); clip-path: polygon(17% 0,83% 0,100% 100%,0 100%); transition: transform .35s cubic-bezier(.16,1,.3,1),background .35s,filter .35s; }
.desk-lamp i::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 32px; height: 16px; border-radius: 50%; background: #44321f; opacity: .55; transform: translate(-50%,45%); transition: background .25s,box-shadow .35s,opacity .25s; }
.desk-lamp span { position: absolute; left: -55px; bottom: -3px; width: 110px; height: 19px; border-radius: 50%; background: var(--red-dark); }
.desk-lamp:hover { filter: brightness(1.15); transform: rotate(7deg) translateY(-2px); }
.desk-lamp:hover i { transform: translateY(3px); }
.lamp-beam { position: absolute; z-index: 2; right: -10%; bottom: 52px; width: 66%; height: 505px; opacity: 0; pointer-events: none; clip-path: polygon(49% 0,66% 0,100% 100%,0 100%); background: linear-gradient(180deg,rgba(255,232,131,.25),rgba(245,205,84,.08) 68%,transparent); filter: blur(9px); transform: rotate(5deg) scaleY(.86); transform-origin: 55% 100%; transition: opacity .55s ease,transform .75s cubic-bezier(.16,1,.3,1); }
.light-pool { position: absolute; z-index: 2; right: -4%; bottom: 23px; width: 62%; height: 290px; background: radial-gradient(ellipse at 60% 100%,rgba(245,223,73,.19),transparent 68%); filter: blur(8px); transition: opacity .5s,filter .5s,transform .75s cubic-bezier(.16,1,.3,1); }
.lamp-instruction { position: absolute; z-index: 9; right: 2.5%; bottom: 365px; margin: 0; display: grid; gap: .22rem; color: #a9a69a; font: 700 .45rem var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: right bottom; transition: color .35s,opacity .35s; }
.lamp-instruction b { color: var(--yellow); font: inherit; }
.lamp-instruction span { letter-spacing: .04em; }
.desk-confession { position: absolute; z-index: 7; left: 45%; bottom: 65px; width: min(270px,43%); min-height: 122px; padding: 1.15rem 1.25rem; background: #e7deca; color: var(--ink); box-shadow: 7px 9px 0 rgba(220,73,63,.8),0 15px 28px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transform: translateY(30px) rotate(-4deg) scale(.93); transition: opacity .45s,transform .75s cubic-bezier(.16,1,.3,1); }
.desk-confession::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 23px,rgba(76,101,126,.13) 24px); }
.desk-confession small,.desk-confession p,.desk-confession > span { position: relative; }
.desk-confession small { color: var(--red); font: 700 .42rem var(--mono); letter-spacing: .09em; }
.desk-confession p { margin: .65rem 0 .2rem; font: 600 1.4rem/.92 var(--hand); letter-spacing: -.015em; }
.desk-confession > span { display: block; text-align: right; font: 600 1.15rem var(--hand); }
.bedroom.lamp-on .lamp-beam { opacity: 1; transform: rotate(5deg) scaleY(1); }
.bedroom.lamp-on .light-pool { opacity: 1; filter: blur(4px); transform: scale(1.13); }
.bedroom.lamp-on .desk-lamp { filter: brightness(1.1) drop-shadow(0 0 18px rgba(245,223,73,.28)); }
.bedroom.lamp-on .desk-lamp i { background: #e95147; }
.bedroom.lamp-on .desk-lamp i::after { background: var(--yellow); opacity: 1; box-shadow: 0 7px 24px 10px rgba(245,223,73,.58); }
.bedroom.lamp-on .lamp-instruction { color: var(--paper); opacity: .65; }
.bedroom.lamp-on .desk-confession { opacity: 1; transform: translateY(0) rotate(-4deg) scale(1); }
.desk-edge { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 125px; border-top: 20px solid #5a463d; background: #322927; box-shadow: 0 -16px 40px rgba(0,0,0,.32); }
.pencil { position: absolute; z-index: 6; right: 4%; bottom: 92px; width: 260px; height: 11px; background: var(--yellow); transform: rotate(-8deg); }
.pencil span { position: absolute; right: -22px; border-left: 23px solid #d6b69a; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.bedroom-copy { position: relative; padding: 9rem max(5vw,calc((100vw - 1370px)/2 - 7vw)) 7rem 5vw; }
.bedroom-copy > p:not(.eyebrow) { max-width: 560px; color: #c5c1b5; font-size: .96rem; line-height: 1.78; }
.bedroom-copy dl { margin-top: 2.6rem; border-top: 1px solid rgba(255,255,255,.18); }
.bedroom-copy dl div { display: grid; grid-template-columns: 95px 1fr; padding: .86rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.bedroom-copy dt { color: var(--yellow); font: 700 .52rem var(--mono); text-transform: uppercase; }
.bedroom-copy dd { margin: 0; color: #d7d3c8; font-size: .79rem; }

.anatomy { padding: clamp(7rem,10vw,10rem) max(5vw,calc((100vw - 1350px)/2)) clamp(9rem,12vw,12rem); background: var(--paper); color: var(--ink); transition: background .7s; }
.anatomy header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 5rem; border-bottom: 4px solid var(--ink); }
.anatomy header .eyebrow { color: var(--red); }
.memory-timeline { position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: auto auto; gap: 1.4rem 1rem; }
.memory-timeline::before { content: ""; position: absolute; left: 2%; right: 2%; top: 50%; height: 8px; background: #1e1a18; transform: rotate(-2deg); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.memory-entry { position: relative; z-index: 1; display: grid; grid-template-columns: 65px 1fr; min-height: 185px; padding: 1.5rem; border: 1px solid #b9b09e; background: #d8d0bf; box-shadow: 7px 8px 0 rgba(28,33,55,.14); transform: rotate(-1.5deg); }
.memory-entry > span { height: max-content; width: max-content; padding: .3rem; background: var(--ink); color: var(--paper); font: 700 .57rem var(--mono); }
.memory-entry h3 { margin: .2rem 0 .8rem; font: 700 2rem/1 var(--hand); }
.memory-entry p { margin: 0; font-size: .82rem; line-height: 1.62; }
.memory-entry.first { grid-column: 1/6; grid-row: 1; }
.memory-entry.second { grid-column: 7/13; grid-row: 1; transform: translateY(32px) rotate(1.2deg); background: #e8e0ce; }
.memory-entry.third { grid-column: 2/8; grid-row: 2; transform: translateY(25px) rotate(.5deg); background: var(--red); color: white; border-color: var(--red-dark); }
.memory-entry.fourth { grid-column: 9/13; grid-row: 2; transform: translateY(-7px) rotate(-2deg); }

.end-note { min-height: 650px; display: grid; place-items: center; align-content: center; padding: 7rem 1rem; text-align: center; background: radial-gradient(circle at center,rgba(220,73,63,.16),transparent 60%); }
.end-note p { max-width: 1250px; margin: 0; font: 600 clamp(3.8rem,6.7vw,6.9rem)/.78 var(--hand); transform: rotate(-1.7deg); }
.coda-label { margin-bottom: 2.6rem; padding: .58rem .85rem; border: 1px solid rgba(245,223,73,.45); color: var(--yellow); font: 700 .6rem var(--mono); letter-spacing: .18em; }
.big-flip { min-height: 60px; margin-top: 3.5rem; padding: 1rem 2rem; border: 0; background: var(--yellow); color: var(--ink); cursor: pointer; box-shadow: 8px 8px 0 var(--red); font: 700 .68rem var(--mono); letter-spacing: .12em; transition: transform .2s,box-shadow .2s; }
.big-flip span { margin-left: 1rem; font-size: 1.2rem; }
.big-flip:hover,.big-flip:focus-visible { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 11px 11px 0 var(--red); }

footer { min-height: 150px; padding: 2rem 5vw; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.2); color: #d1cdc1; font: 500 .6rem var(--mono); letter-spacing: .05em; }
footer nav { display: flex; gap: 1.8rem; }
footer a { min-height: 44px; display: grid; place-items: center; text-decoration: none; }
footer a { position: relative; }
footer a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.16,1,.3,1); }
footer a:hover,footer a:focus-visible { color: var(--yellow); }
footer a:hover::after,footer a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.toast { position: fixed; z-index: 210; left: 50%; bottom: 24px; padding: .8rem 1.2rem; background: var(--yellow); color: var(--ink); box-shadow: 6px 6px 0 var(--red); font: 700 .63rem var(--mono); transform: translate(-50%,170%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.toast.show { transform: translate(-50%,0); }

.load-piece { opacity: 0; transform: translateY(22px); animation: loadPiece .82s cubic-bezier(.16,1,.3,1) var(--load-delay) forwards; }
.deck-wrap.load-piece { transform: translateY(34px) rotate(.1deg) scale(.985); animation-name: loadMachine; animation-duration: .95s; }
.reveal { opacity: .84; transform: translateY(14px); transition: opacity .7s ease var(--delay,0s),transform .78s cubic-bezier(.16,1,.3,1) var(--delay,0s); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.liner-heading h2,.bedroom h2,.anatomy h2,.end-note p { text-wrap: balance; }
.letter p,.bedroom-copy > p,.memory-entry p { text-wrap: pretty; }

@keyframes curtainAway { 0%,55% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes curtainLeft { to { transform: translateX(-101%); } }
@keyframes curtainRight { to { transform: translateX(101%); } }
@keyframes counterBlink { 50% { opacity: .35; } }
@keyframes loadPiece { to { opacity: 1; transform: translateY(0); } }
@keyframes loadMachine { to { opacity: 1; transform: rotate(.65deg) scale(1); } }
@keyframes drawArrow { from { stroke-dashoffset: 190; } to { stroke-dashoffset: 0; } }
@keyframes threadDrift { to { stroke-dashoffset: -240; } }
@keyframes flipShutter { 0% { transform: translateY(-102%); } 38%,60% { transform: translateY(0); } 100% { transform: translateY(102%); } }
@keyframes pageJolt { 40% { transform: scale(.985); filter: brightness(.45); } }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 5rem; }
  .hero-copy { max-width: 700px; }
  .hero h1 { font-size: clamp(5rem,11vw,7.2rem); }
  .dedication { margin-left: 54%; }
  .deck-wrap { width: min(100%,780px); margin-inline: auto; }
  .case-code { display: none; }
  .track-section { grid-template-columns: 135px minmax(0,1fr); gap: 3rem; }
  .liner { grid-template-columns: .8fr 1.3fr; }
  .liner-heading { grid-column: 1; grid-row: 1; position: static; }
  .letter { grid-column: 2; grid-row: 1 / span 2; }
  .found-stack { grid-column: 1; grid-row: 2; width: 170px; margin: 1rem 0 0 auto; }
  .bedroom { grid-template-columns: .88fr 1.12fr; }
  .radio { left: 6%; transform: scale(.88) rotate(-2deg); transform-origin: left bottom; }
  .memory-entry.first { grid-column: 1/7; }
  .memory-entry.second { grid-column: 7/13; }
  .memory-entry.third { grid-column: 1/8; }
  .memory-entry.fourth { grid-column: 8/13; }
}

@media (max-width: 700px) {
  .topbar { height: 92px; padding: .55rem .75rem; }
  .brand { font-size: .55rem; letter-spacing: .12em; gap: .42rem; }
  .brand-spark { width: 9px; height: 9px; }
  .topbar nav { gap: .1rem; }
  .topbar nav > a { min-width: 46px; font-size: .48rem; letter-spacing: .04em; }
  .side-switch { min-width: 92px; width: 92px; padding: 0 2.25rem 0 .3rem; font-size: 0; }
  .side-switch-label::after { content: "SIDE B"; font: 700 .5rem var(--mono); letter-spacing: .08em; }
  .side-b .side-switch-label::after { content: "SIDE A"; }
  .switch-notch { width: 28px; height: 36px; }
  .side-b .switch-notch { transform: translateX(-54px); }
  .hero { min-height: auto; padding: 4.3rem 1rem 5.3rem; gap: 2.8rem; }
  .hero h1 { white-space: normal; font-size: clamp(4.25rem,20vw,5.3rem); }
  .hero h1 em { margin-left: .07em; }
  .hero-copy .eyebrow { max-width: 290px; }
  .dedication { margin-left: 44%; font-size: 1.38rem; max-width: 55%; }
  .scribble-arrow,.tape-thread { display: none; }
  .deck-wrap { transform: none; }
  .deck-wrap.load-piece { transform: translateY(22px); animation-name: loadPiece; animation-duration: .82s; }
  .deck { padding: 9px; border-radius: 4px; }
  .deck::after { right: 10px; font-size: .37rem; }
  .deck-header { height: 38px; padding-inline: 7px; }
  .deck-header small { display: none; }
  .meter-bank { height: 88px; gap: 4px; margin: 0 2px 7px; padding: 4px; }
  .meter-scale { padding-top: 7px; font-size: .33rem; }
  .meter-lines { top: 23px; height: 36px; }
  .needle { height: 50px; bottom: 12px; }
  .meter-label { bottom: 3px; font-size: .37rem; }
  .cassette-bay { height: 218px; margin: 0 2px; padding: 14px 4%; }
  .cassette { max-width: 330px; }
  .tape-title { margin-top: .15rem; font-size: 1.1rem; }
  .tape-sub { font-size: .72rem; }
  .reel { width: 42px; border-width: 5px; }
  .tape-fill { width: 80px; }
  .cassette-screws i { box-shadow: 0 -150px #3e4241; }
  .cassette-bottom span { margin-top: 8%; }
  .deck-controls { gap: 6px; padding: 9px 2px 3px; }
  .counter-panel { min-width: 74px; padding: 5px 4px; }
  .counter { font-size: .92rem; letter-spacing: .08em; }
  .counter-panel small { font-size: .33rem; }
  .transport { gap: 2px; }
  .transport-btn { height: 58px; }
  .transport-btn small { font-size: .36rem; }
  .cue-window { margin-inline: 2px; gap: .42rem; font-size: .35rem; }
  .sound-hint { text-align: center; font-size: .51rem; line-height: 1.5; }
  .track-section { min-height: auto; display: block; padding: 6rem 1rem 7rem; }
  .track-margin { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 1.2rem; margin-bottom: 2.4rem; }
  .section-stamp { width: 115px; padding: .8rem .4rem; font-size: .53rem; }
  .margin-note { margin: 0; font-size: 1.55rem; }
  .margin-arrow,.case-facts { display: none; }
  .track-paper { padding: 2rem 1.05rem; box-shadow: 10px 13px 0 rgba(24,28,43,.14); }
  .paper-head { display: block; }
  .paper-note { margin-top: .7rem!important; text-align: left; }
  .tracks button { grid-template-columns: 29px 1fr 42px; min-height: 82px; padding-inline: .2rem; }
  .tracks strong { font-size: 1.36rem; }
  .tracks i { grid-column: 2; font-size: .58rem; }
  .tracks time { grid-column: 3; grid-row: 1 / span 2; }
  .tracks button::after { left: auto; right: 1px; }
  .coffee-ring { right: 0; transform: translateX(8%) scaleY(.55) rotate(25deg); }
  .liner { min-height: auto; padding: 6.5rem 1rem 7rem; grid-template-columns: 1fr; gap: 3rem; }
  .liner::before { width: 105%; top: 31%; }
  .liner-heading h2,.bedroom h2,.anatomy h2 { font-size: 3.45rem; }
  .pocket-label { margin-top: 2rem; }
  .liner-heading,.letter,.found-stack { grid-column: auto; grid-row: auto; }
  .letter { padding: 2rem 1.35rem; box-shadow: -8px 10px 0 var(--red),0 20px 35px rgba(0,0,0,.2); }
  .found-stack { grid-column: auto; grid-row: auto; width: 165px; margin: 1rem 0 0 auto; }
  .bedroom { grid-template-columns: 1fr; }
  .bedroom-scene { min-height: 465px; }
  .window-frame { left: 0; top: 9%; width: 76%; height: 52%; }
  .moon { width: 60vw; }
  .radio { left: -4%; bottom: 70px; transform: scale(.68) rotate(-2deg); }
  .desk-lamp { right: 5%; bottom: 69px; transform: scale(.73) rotate(9deg); transform-origin: bottom; }
  .desk-lamp:hover { transform: scale(.73) rotate(7deg) translateY(-2px); }
  .lamp-beam { right: -29%; bottom: 30px; width: 95%; height: 340px; }
  .lamp-instruction { right: .3rem; bottom: 257px; font-size: .39rem; }
  .desk-confession { left: 38%; bottom: 41px; width: 210px; min-height: 106px; padding: .85rem 1rem; }
  .desk-confession p { font-size: 1.17rem; }
  .desk-edge { height: 78px; border-top-width: 13px; }
  .pencil { width: 190px; bottom: 58px; }
  .bedroom-copy { padding: 4.7rem 1rem 6.5rem; }
  .anatomy { padding: 6.8rem 1rem 8rem; }
  .anatomy header { display: block; margin-bottom: 3rem; }
  .memory-timeline { display: block; padding-left: 1.2rem; }
  .memory-timeline::before { left: 0; right: auto; top: 0; bottom: 0; width: 7px; height: auto; transform: rotate(.5deg); }
  .memory-entry,.memory-entry.second,.memory-entry.third,.memory-entry.fourth { min-height: 165px; margin: 0 0 1.3rem; transform: rotate(-1deg); grid-template-columns: 55px 1fr; padding: 1.25rem; }
  .memory-entry.second,.memory-entry.fourth { transform: rotate(1deg); }
  .end-note { min-height: 540px; padding-block: 6rem; }
  .end-note p { font-size: 3.65rem; }
  .coda-label { margin-bottom: 1.5rem; font-size: .52rem; }
  footer { display: block; padding: 2rem 1rem; text-align: center; }
  footer nav { display: grid; gap: 0; margin-top: .7rem; }
  footer a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .load-curtain { display: none; }
  .load-piece,.reveal { opacity: 1; transform: none; }
  .tape-thread { display: none; }
  .lamp-beam { display: none; }
}