/* Artwork and TV share one 1672 × 941 coordinate space. */
.basement{position:relative;isolation:isolate;background:var(--ink-900);color:var(--bone-300);border-bottom:1px solid var(--ink-700)}
.basement + .music-routes{border-top:0}
.basement-label{font:var(--type-label-s)/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-400)}
.basement-heading{display:flex;align-items:center;gap:30px;padding:28px 4vw 24px;background:var(--ink-900);border-bottom:1px solid var(--ink-700)}
.basement-heading h1{font-size:clamp(76px,8vw,132px);line-height:var(--leading-display);margin-top:8px;letter-spacing:-.025em}.basement-heading h1>span{color:var(--accent)}
.basement-heading>p{font-size:12px;color:var(--bone-500);margin-left:auto}.basement-dim{border:1px solid var(--ink-600);background:var(--ink-800);padding:12px 16px;min-height:44px;color:var(--bone-300);font:var(--type-label-s) var(--font-mono)}
.basement-room{overflow:clip;position:relative;max-width:2200px;margin:auto;container-type:inline-size}
.basement-viewport{position:relative;aspect-ratio:1672/941;overflow:hidden;background:var(--ink-900)}
.basement-scene{position:absolute;inset:0;width:100%;aspect-ratio:1672/941}
.basement-backdrop{display:block;width:100%;height:auto;max-width:none;transition:filter var(--dur-base) ease}
.tv-screen{position:absolute;left:0;top:0;width:320px;height:256px;transform-origin:0 0;background:var(--ink-1000);overflow:hidden;border-radius:8% / 10%;isolation:isolate;box-shadow:inset 0 0 0 3px var(--ink-800);visibility:hidden}
.basement-ready .tv-screen{visibility:visible}
.tv-poster{height:100%;width:100%;object-fit:cover;filter:brightness(.48);opacity:1}
.tv-teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.8);pointer-events:none}.has-preview .tv-teaser{opacity:1}
.tv-idle{position:absolute;inset:0;z-index:2;text-align:center;pointer-events:none;background:linear-gradient(#0005,transparent 35%,#0007)}.tv-idle>.basement-label{position:absolute;top:26px;left:20px;right:20px;font-size:var(--type-label-s);color:var(--bone-300);text-shadow:0 1px 5px var(--ink-1000)}.tv-idle>p{position:absolute;top:70%;left:20px;right:20px;font:var(--type-label-s)/1.5 var(--font-mono);color:var(--bone-300);text-shadow:0 1px 5px var(--ink-1000)}
.tv-play{position:absolute;inset:0;width:100%;height:100%;padding:44px 20px 50px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--bone-100);font:500 13px/1.4 var(--font-mono);pointer-events:auto;text-shadow:0 1px 5px var(--ink-1000)}.tv-play svg{width:62px;height:62px;padding:18px;border:1px solid var(--bone-300);border-radius:50%;background:#080808aa;transition:transform var(--dur-fast) ease,background var(--dur-fast) ease}.tv-play:focus-visible{outline:2px solid var(--bone-100);outline-offset:-12px}
.is-playing .tv-teaser{display:none}
.tv-player{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--ink-1000);z-index:3}.tv-player iframe,.tv-player video{width:100%;height:auto;aspect-ratio:16/9;max-height:100%;border:0;display:block;object-fit:contain}.is-playing .tv-player{display:flex}.is-playing .tv-idle{display:none}
.tv-glass{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 8px 3px #0009;background:linear-gradient(130deg,#ffffff09,transparent 45%)}
.is-playing .tv-glass{background:none;box-shadow:inset 0 0 4px 2px #0008}
.tv-screen:fullscreen{visibility:visible;left:0;top:0;border:0;border-radius:0;width:100vw!important;height:100vh!important;transform:none!important;box-shadow:none}
.tv-screen:fullscreen .tv-player iframe,.tv-screen:fullscreen .tv-player video{width:100%;height:100%;aspect-ratio:auto}.tv-screen:fullscreen .tv-glass{display:none}
.tv-exit-fullscreen{display:none;position:absolute;right:16px;top:16px;width:44px;height:44px;place-items:center;border:1px solid var(--ink-500);background:#080808cc;color:var(--bone-100);z-index:5}.tv-exit-fullscreen svg{width:22px;height:22px}.tv-screen:fullscreen .tv-exit-fullscreen{display:grid}
.basement-tv-zone{position:relative}
/* Invisible hit areas sit on the illustrated controls; only the dial symbols persist. */
.tv-dial{position:absolute;z-index:5;width:44px;height:44px;display:grid;place-items:center;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;color:var(--bone-400);cursor:pointer;transition:color 160ms ease,box-shadow 160ms ease}
.tv-dial-fullscreen{left:32.05%;top:33%}.tv-dial-power{left:32.05%;top:49.31%}
.tv-dial svg{width:15px;height:15px;filter:drop-shadow(0 1px 2px var(--ink-1000))}
.tv-dial-outline{stroke:var(--ink-1000);stroke-width:4.5;stroke-linejoin:round}
.tv-dial-label{position:absolute;left:calc(100% + 7px);top:50%;transform:translateY(-50%);padding:8px 10px;background:#090909ed;border:1px solid var(--ink-550);color:var(--bone-300);font:var(--type-label-s)/1.4 var(--font-mono);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-press) ease}
.tv-dial:focus-visible{outline:2px solid var(--bone-300);outline-offset:2px;background:#08080888}.tv-dial:focus-visible .tv-dial-label{opacity:1}
.tv-dial-power[aria-pressed=true]{color:var(--bone-100)}.tv-dial-power[aria-pressed=true]:after{content:'';position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:var(--blood-500);box-shadow:0 0 4px var(--blood-500)}
@media(hover:hover) and (pointer:fine){.tv-dial:hover{color:var(--bone-100);box-shadow:inset 0 0 0 1px #fff7;background:#08080877}.tv-dial:hover .tv-dial-label{opacity:1}}
/* One large sleeve and a spacious release introduction keep the song in focus. */
.basement-copy,.basement-track-picker{transition:opacity var(--dur-base) ease}
.basement-record{display:flex;flex-direction:column;gap:36px}
.basement-art{position:relative;min-width:0;margin:0}.basement-art .record-cover{transform:none}.basement-art .record-cover>img{filter:drop-shadow(5px 8px 6px #0009)}.basement-art figcaption{display:none}
.basement-copy{min-width:0;order:-1}.basement-copy>.basement-label{display:block;font-size:var(--type-label-s);letter-spacing:.08em}.basement-copy h2{font-size:clamp(44px,4vw,76px);line-height:var(--leading-display);letter-spacing:-.02em;margin:18px 0 20px;overflow-wrap:anywhere}.basement-copy p{font-size:15px;color:var(--bone-400);line-height:1.65;max-width:36ch}.basement-copy .actions{margin-top:26px;gap:20px;align-items:center}
.basement-audio{display:block;font:var(--type-label-s) var(--font-mono);margin-top:18px}.basement-audio audio{width:100%;height:38px;margin-top:8px}
.basement-track-picker{display:block;color:var(--bone-400);font:11px/1.5 var(--font-mono);max-width:100%;margin-top:28px}.basement-track-picker select{display:block;width:100%;margin-top:8px;min-height:44px;padding:10px 12px;background:var(--ink-800);color:var(--bone-300);border:1px solid var(--ink-550);border-radius:0;font:13px var(--font-body);color-scheme:dark}
@media(min-width:1101px){
 .basement-record-zone{position:absolute;inset:0;pointer-events:none}
 .basement-selection,.basement-record{display:contents}
 .basement-art{position:absolute;left:69.8%;top:44.5%;width:24.5%;pointer-events:auto}
 .basement-copy{position:absolute;left:71.5%;top:10.8%;width:27%;max-height:31.5%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ink-600) transparent;color-scheme:dark;pointer-events:auto;text-shadow:0 2px 8px var(--ink-1000)}
 .basement-copy h2{font-size:clamp(40px,4cqw,76px);margin:1cqw 0 1.1cqw}.basement-copy p{font-size:clamp(13px,.98cqw,18px)}.basement-copy>.basement-label{font-size:clamp(var(--type-label-s),.65cqw,12px)}
 .basement-copy .actions{margin-top:1.4cqw;gap:20px;flex-wrap:wrap}.basement-copy .actions .button{white-space:nowrap}
 .basement-track-picker{position:absolute;left:71.5%;top:89%;width:23%;margin:0;pointer-events:auto}
}
.lights-down .basement-backdrop{filter:brightness(.35)}.lights-down .basement-copy,.lights-down .basement-track-picker{opacity:.28}.lights-down .basement-copy:focus-within,.lights-down .basement-copy:hover,.lights-down .basement-track-picker:focus-within,.lights-down .basement-track-picker:hover{opacity:1}
.basement button:active{scale:.97}.basement .record-cover:active{scale:1}.tv-screen button:active{scale:.97}
@media(hover:hover) and (pointer:fine){.tv-play:hover svg{background:var(--bone-300);color:var(--ink-1000);transform:scale(1.06)}}
/* Known exception: fine-tunes the copy inside the basement scene; convert to a container query. */
@media(min-width:1101px) and (max-width:1250px){.basement-copy{left:67.5%;top:8%;width:32%;max-height:35%}.basement-copy .actions{gap:12px}}
@media(max-width:1100px){
 .basement-heading{padding:24px}.basement-heading>p{display:none}.basement-dim{margin-left:auto}
 .basement-viewport{aspect-ratio:1.65}.basement-scene{inset:auto;width:180%;left:-4%;top:-18%;height:auto}
 .basement-record-zone{position:relative;padding:48px max(24px,6vw);background:var(--ink-900)}
 .basement-record{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.basement-copy{order:0}.basement-art{width:100%;max-width:420px;justify-self:center}
 .basement-track-picker{max-width:420px;margin-inline:auto}.lights-down .basement-copy,.lights-down .basement-track-picker{opacity:1}
}
@media(max-width:760px){
 .basement-heading{padding:24px 20px 20px;gap:10px}.basement-heading .basement-label{font-size:var(--type-label-s)}.basement-dim{font-size:var(--type-label-s);padding:10px}
 .basement-viewport{aspect-ratio:1.12}.basement-scene{inset:auto;width:360%;left:-23%;top:-44%;height:auto}
 .basement-record-zone{padding:36px 24px 44px}.basement-record{display:flex;gap:36px}.basement-copy{order:-1;width:100%}.basement-copy h2{font-size:clamp(48px,13vw,72px)}.basement-copy p{font-size:14px}.basement-copy .actions{gap:20px}.basement-art{max-width:380px}
}
@media(max-width:360px){.basement-heading{padding-inline:16px}.basement-record-zone{padding-inline:20px}.basement-copy .actions{gap:14px}}
@media(prefers-reduced-motion:reduce){.basement *{transition:none!important;scroll-behavior:auto!important}}
.frank-motion-off .basement *{transition:none!important;scroll-behavior:auto!important}

/* A single arrival: the red window opens the room, then the sleeve settles in. */
@property --basement-light-reach{syntax:'<percentage>';inherits:false;initial-value:0%}
.basement-enter .basement-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--ink-900);mask-image:radial-gradient(ellipse at 58.5% 35%,transparent var(--basement-light-reach),var(--ink-1000) calc(var(--basement-light-reach) + 22%));animation:basement-window-reveal var(--dur-scene) cubic-bezier(.22,1,.36,1) both}
.basement-enter .basement-backdrop{animation:basement-room-arrive var(--dur-scene) cubic-bezier(.22,1,.36,1) both}
.basement-enter .tv-screen,.basement-enter .tv-dial{animation:basement-tv-arrive 700ms 350ms ease-out both}
.basement-art.sleeve-waiting{opacity:0}
.basement-art.sleeve-enter{animation:basement-sleeve-arrive 850ms 300ms cubic-bezier(.22,1,.36,1) both}
.basement-art:focus-within{animation:none!important;opacity:1!important}
@keyframes basement-window-reveal{from{--basement-light-reach:0%;opacity:1}70%{opacity:.9}to{--basement-light-reach:110%;opacity:0}}
@keyframes basement-room-arrive{from{opacity:.12}to{opacity:1}}
@keyframes basement-tv-arrive{from{opacity:0}to{opacity:1}}
@keyframes basement-sleeve-arrive{from{opacity:0;transform:translateX(135%)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1100px){.basement-art.sleeve-enter{animation-delay:0ms;animation-duration:700ms}}
@media(prefers-reduced-motion:reduce){.basement-enter .basement-scene:after{display:none}.basement-enter .basement-backdrop,.basement-enter .tv-screen,.basement-enter .tv-dial,.basement-art.sleeve-enter,.basement-art.sleeve-waiting{animation:none!important;opacity:1!important}}
.frank-motion-off .basement-enter .basement-scene:after{display:none}
.frank-motion-off .basement-enter .basement-backdrop,.frank-motion-off .basement-enter .tv-screen,.frank-motion-off .basement-enter .tv-dial,.frank-motion-off .basement-art.sleeve-enter,.frank-motion-off .basement-art.sleeve-waiting{animation:none!important;opacity:1!important}

/* Match the shop's “Wear the stitches” hero type at each breakpoint. */
@media(min-width:761px) and (max-width:1100px){.basement-heading h1{font-size:8vw}}
@media(max-width:760px){.basement-heading{flex-wrap:wrap}.basement-heading>div{flex:1 1 100%;min-width:0}.basement-heading h1{font-size:clamp(76px,19vw,130px)}}