@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/fonts/notosans.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/fonts/notosans-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--bg:#17111b;--brick:#2b1a22;--gold:#f0a95a;--gold2:#ffd08a;--ink:#f6ead9;--mute:#c9b6a3;--box:#25202a;--chrome:#d9d3cc;--line:rgba(246,234,217,.13);--p:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Noto Sans",system-ui,sans-serif;overflow-x:hidden}
body.dock{padding-bottom:110px}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold)}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:1em;height:1em;fill:currentColor}
.i-pause{display:none}.playing .i-play,.pause .i-play{display:none}.playing .i-pause,.pause .i-pause{display:inline}
.skip{position:absolute;left:-999px;top:0;z-index:60;background:var(--gold);color:var(--bg);padding:.6rem 1rem}.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95}
/* stoop hero: official widescreen art scene that follows the loaded tape */
.stoop{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.4rem clamp(1rem,4vw,3rem) 2rem;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-1}
.sc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s;transform:scale(1.08)}
.sc[data-for="0"]{opacity:1}
.js .sc[data-for="0"]{opacity:0}.js .sc.shown{opacity:1;animation:kb 40s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.16) translateX(-2%)}}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,27,.78) 0%,rgba(23,17,27,.25) 34%,rgba(23,17,27,.35) 60%,rgba(23,17,27,.95) 100%)}
.stoop-top{width:100%;max-width:1240px;display:grid;grid-template-columns:1fr auto;gap:.2rem 2rem;align-items:end;margin-bottom:clamp(1rem,3vh,2rem)}
.tag{grid-column:1/-1;margin:0 0 .6rem;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:.04em;color:var(--gold2)}.tag span{opacity:.6}
.stoop h1{margin:0;font-size:clamp(2.8rem,6.6vw,6rem);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.stoop h1 span{display:block;color:var(--gold2)}
.lede{max-width:24em;margin:0;color:#efe1cf;text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* boombox */
.dock-spot{width:100%;display:flex;justify-content:center}
.box{position:relative;width:min(960px,100%);display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:1.2rem;align-items:center;padding:2.4rem 1.6rem 1.4rem;border-radius:26px;background:linear-gradient(180deg,#3a3340,#25202a 30%,#1b171f);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 0 rgba(0,0,0,.4),0 40px 80px -20px rgba(0,0,0,.85);animation:drop .9s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes drop{from{opacity:0;transform:translateY(40px) scale(.96)}}
.handle{position:absolute;left:24%;right:24%;top:-26px;height:34px;border:8px solid #3a3340;border-bottom:0;border-radius:18px 18px 0 0}
.spk{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#15111a 0 3px,#2a2430 3px 5px);box-shadow:inset 0 0 0 8px #3d3644,inset 0 0 0 10px #0d0b10,0 2px 0 rgba(255,255,255,.08)}
.spk i{width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5a5160,#1a161e 60%,#0b090d);box-shadow:0 0 0 6px #120f15,0 0 0 8px #4a4250;transition:transform .1s}
.is-playing .spk i{animation:thump .52s ease-in-out infinite}
.is-playing .spk.r i{animation-delay:.26s}
@keyframes thump{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}}
.mid{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.lcd{background:linear-gradient(180deg,#2b3a1f,#1f2b16);border-radius:8px;padding:.5rem .8rem;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);color:#c9f28a;font-family:"Bricolage Grotesque",monospace;text-shadow:0 0 8px rgba(201,242,138,.5)}
.lcd p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-t{font-weight:700;font-size:1.1rem}.lcd-s{font-size:.78rem;opacity:.8}.lcd-time{font-size:.78rem;font-variant-numeric:tabular-nums;opacity:.8}
.deck{background:#0f0c12;border-radius:10px;padding:10px;box-shadow:inset 0 3px 10px rgba(0,0,0,.8)}
.cass{position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:6px;padding:10px 14px;border-radius:8px;background:linear-gradient(180deg,#e9dfcf,#d6c8b2);box-shadow:inset 0 0 0 3px #bfae94}
.cass img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;box-shadow:0 0 0 2px #fff6}
.reel{justify-self:center;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f5efe6 0 18%,transparent 19%),conic-gradient(#3b2d24 0 25deg,#d8cbb6 25deg 95deg,#3b2d24 95deg 145deg,#d8cbb6 145deg 215deg,#3b2d24 215deg 265deg,#d8cbb6 265deg 335deg,#3b2d24 335deg);box-shadow:0 0 0 calc(4px + (1 - var(--p))*10px) #3b2d24,0 0 0 calc(5px + (1 - var(--p))*10px) #2a2018;animation:spin 2.4s linear infinite;animation-play-state:paused}
.reel.b{box-shadow:0 0 0 calc(4px + var(--p)*10px) #3b2d24,0 0 0 calc(5px + var(--p)*10px) #2a2018}
.is-playing .reel{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.keys{display:flex;justify-content:center;gap:.5rem}
.keys button{width:3.4rem;height:2.6rem;border:0;border-radius:8px;background:linear-gradient(180deg,#e9e3dc,#b7afa6);color:#1b171f;font-size:1.15rem;display:grid;place-items:center;box-shadow:0 5px 0 #6f6760,0 8px 12px rgba(0,0,0,.4);transition:transform .08s,box-shadow .08s}
.keys button:active{transform:translateY(4px);box-shadow:0 1px 0 #6f6760}
.keys .k-play{width:4.6rem;background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 5px 0 #9a5e22,0 8px 14px rgba(0,0,0,.4)}
input[type=range]{width:100%;accent-color:var(--gold);margin:0}
.st{margin:0;font-size:.75rem;color:var(--gold2);text-align:center}.st:empty{display:none}
/* docked boombox */
body.dock .box{position:fixed;z-index:50;left:50%;bottom:.6rem;transform:translateX(-50%);width:min(760px,calc(100% - 1rem));grid-template-columns:auto 1fr auto;padding:.5rem .8rem;gap:.8rem;border-radius:16px;animation:none}
body.dock .handle,body.dock .spk.r{display:none}
body.dock .spk{width:64px}
body.dock .mid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lcd keys" "seek seek" "st st";gap:.3rem .8rem;align-items:center}
body.dock .lcd{grid-area:lcd;padding:.3rem .6rem}body.dock .keys{grid-area:keys}body.dock input{grid-area:seek}body.dock .st{grid-area:st}
body.dock .deck{display:none}
body.dock .keys button{width:2.6rem;height:2.2rem}body.dock .keys .k-play{width:3.2rem}
/* tape rack */
.rack{width:min(1100px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.tape{position:relative;border:0;padding:10px 10px 30px;border-radius:10px;background:linear-gradient(180deg,#3c3442,#2a2430);box-shadow:0 14px 28px -10px rgba(0,0,0,.8);transform:rotate(var(--r));transition:transform .25s,box-shadow .25s;text-align:left}
.tape:hover{transform:rotate(0) translateY(-6px)}
.tape.picked{transform:rotate(0) translateY(-10px);box-shadow:0 0 0 3px var(--gold),0 20px 30px -10px rgba(240,169,90,.4)}
.t-lab{display:flex;gap:.6rem;align-items:center;background:#f3e9d8;color:#241c22;border-radius:5px;padding:6px}
.t-lab img{width:56px;height:56px;border-radius:3px;flex:none}
.t-tx{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.t-when{font-size:.66rem;font-weight:700;letter-spacing:.12em;color:#b0601a}
.t-n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.05rem}
.t-c{font-size:.72rem;color:#5d4f55}
.t-win{position:absolute;left:28%;right:28%;bottom:8px;height:16px;border-radius:8px;background:#110e13;display:flex;justify-content:space-around;align-items:center}
.t-win i{width:10px;height:10px;border-radius:50%;background:#d6cbb8}
.tape.playing .t-win i{animation:spin 1s linear infinite;background:conic-gradient(#d6cbb8 0 60%,#2a2430 0)}
/* counts */
.counts{list-style:none;margin:0;padding:1.1rem 1rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2.6rem;background:var(--gold);color:#22161c;font-size:.95rem}
.counts b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem}
/* liner notes J-card */
.liner{max-width:1180px;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem) 2rem}
.liner-h{margin-bottom:1.6rem}.kick{margin:0;color:var(--gold);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem}
.liner h2,.about h2,.faq h2{font-size:clamp(2.2rem,5vw,4rem);margin:.3rem 0 0}
.js .jcard{display:none}.js .jcard.shown{display:grid;animation:up .5s both}
@keyframes up{from{opacity:0;transform:translateY(16px)}}
.jcard{grid-template-columns:320px 1fr;gap:clamp(1.2rem,3vw,2.6rem);display:grid;margin-bottom:2rem;padding:clamp(1rem,2.4vw,1.8rem);border-radius:18px;background:linear-gradient(135deg,#2b1f29,#1d1620);border:1px solid var(--line)}
.j-side img{width:100%;border-radius:10px;box-shadow:0 20px 40px -14px rgba(0,0,0,.8)}
.j-when{margin:1rem 0 0;color:var(--gold);font-weight:700;letter-spacing:.14em;font-size:.8rem}
.j-side h3{font-size:2.2rem;margin:.2rem 0 .4rem}.j-side p{color:var(--mute);margin:0 0 1rem}
.j-play{display:inline-flex;align-items:center;gap:.6rem;border:0;border-radius:999px;background:var(--gold);color:#22161c;font-weight:700;padding:.4rem 1.2rem .4rem .4rem}
.j-play span{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#22161c;color:var(--gold)}
.j-list{list-style:none;margin:0;padding:0;columns:2;column-gap:1.4rem}
.j-list li{break-inside:avoid}
.row{width:100%;display:grid;grid-template-columns:2rem 44px 1fr auto 2rem;gap:.7rem;align-items:center;padding:.55rem .4rem;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;border-radius:8px}
.row .n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--gold);font-size:.85rem}
.row img{width:44px;height:44px;border-radius:6px}
.row .tt{font-weight:600;line-height:1.2;min-width:0}.row small{display:block;font-weight:400;color:var(--mute);font-size:.8rem}
.row .d{color:var(--mute);font-size:.85rem;font-variant-numeric:tabular-nums}
.row .ic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:var(--gold);opacity:.6}
.row:hover{background:rgba(240,169,90,.08)}.row:hover .ic{opacity:1}.row.now{background:rgba(240,169,90,.15)}.row.now .ic{opacity:1;background:var(--gold);color:#22161c}
/* about */
.about{max-width:1180px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.about-art img{border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.about p{color:var(--mute)}.cr em{color:var(--ink)}
.copy{border:2px solid var(--gold);background:transparent;color:var(--gold2);border-radius:999px;padding:.55rem 1.3rem;font-weight:700}
.faq{max-width:900px;margin:0 auto;padding:3rem clamp(1rem,4vw,3rem)}
.faq details{border-top:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.25rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--gold)}.faq details[open] summary::after{content:"–"}.faq p{color:var(--mute)}
.foot{text-align:center;color:var(--mute);font-size:.88rem;padding:2rem 1rem;border-top:1px solid var(--line)}
.nf{display:grid;place-items:center;min-height:100vh;text-align:center;padding:2rem}.nf h1{font-size:clamp(2.4rem,7vw,5rem)}
@media (max-width:900px){
 .stoop-top{grid-template-columns:1fr}
 .box{grid-template-columns:minmax(0,1fr);padding:2rem 1rem 1rem}.spk{display:none}body.dock .box{grid-template-columns:minmax(0,1fr)}
 .rack{grid-template-columns:repeat(2,1fr)}
 .jcard{grid-template-columns:1fr}.j-side img{width:180px}.j-list{columns:1}
 .about{grid-template-columns:1fr}
}
@media (max-width:600px){
 body{font-size:16px}
 .stoop{padding-top:1rem}
 .stoop h1{font-size:2.5rem}.lede{font-size:.95rem}
 .handle{left:30%;right:30%}
 .cass{padding:8px}
 .rack{gap:.7rem}.tape{padding:7px 7px 26px}.t-lab img{width:40px;height:40px}.t-n{font-size:.92rem}.t-c{display:none}
 .row{grid-template-columns:40px 1fr auto 1.8rem;gap:.55rem}.row .n{display:none}.row img{width:40px;height:40px}
 body.dock .box{grid-template-columns:minmax(0,1fr)}body.dock .spk{display:none}
 body.dock .lcd-s{display:none}
 body.dock .keys{gap:.3rem}body.dock .keys button{width:2.3rem;height:2.1rem}body.dock .keys .k-play{width:2.8rem}body.dock .lcd-t{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}