@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root { --cream:#f2e5cb; --amber:#efc57c; --ink:#130e0b; --mono:"DM Mono",monospace; --serif:"Libre Baskerville",Georgia,serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--ink); }
body { color:var(--cream); font-family:var(--serif); }
.scene { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; }
.scene__image,.scene__scrim { position:absolute; inset:0; }
.scene__image { z-index:-3; background:center/cover no-repeat; transform:scale(1.015); transition:transform 1.25s cubic-bezier(.2,.75,.15,1),filter .9s ease; }
.scene__image--door { background-image:url('assets/bar-exterior.png'); }
.scene__image--lobby { background-image:url('assets/bar-interior-v3.png'); background-position:right top; }
.scene__scrim { z-index:-2; background:linear-gradient(90deg,rgba(8,5,4,.88),rgba(8,5,4,.38) 43%,rgba(8,5,4,.14) 68%,rgba(8,5,4,.5)); }
.scene__scrim--lobby { background:linear-gradient(90deg,rgba(7,4,3,.73),transparent 48%,rgba(7,4,3,.54)); }
.door-copy { position:absolute; left:clamp(1.4rem,7vw,8rem); top:clamp(5.8rem,19vh,13rem); max-width:min(36rem,73vw); text-shadow:0 2px 20px rgba(0,0,0,.8); }
.eyebrow { margin:0 0 .8rem; color:#f0bd72; font:500 clamp(.6rem,.72vw,.74rem)/1.5 var(--mono); letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.8rem,6.5vw,6rem); font-weight:400; letter-spacing:-.04em; line-height:.99; }
.lede { margin:1.5rem 0 .4rem; font-size:clamp(1rem,1.55vw,1.35rem); font-style:italic; }
.note { max-width:28rem; margin:0; color:rgba(242,229,203,.75); font-size:clamp(.78rem,1.05vw,.93rem); line-height:1.65; }
.door-hit { position:absolute; z-index:2; top:7%; bottom:17%; left:44%; width:23%; border-radius:8px; }
.door-hit:hover,.door-hit:focus-visible { background:rgba(235,158,61,.09); box-shadow:inset 0 0 44px 12px rgba(236,156,56,.38); outline:2px solid rgba(242,229,203,.7); outline-offset:5px; }
.invitation { position:absolute; z-index:2; left:53%; bottom:10%; transform:translateX(-50%); color:#f7d99e; font-size:clamp(.9rem,1.25vw,1.1rem); font-style:italic; text-shadow:0 1px 13px #000; }
.skip { position:absolute; z-index:2; right:1.5rem; bottom:1.4rem; color:rgba(242,229,203,.77); font:.72rem var(--mono); letter-spacing:.06em; text-underline-offset:.32em; }
.front-house--door.is-entering .scene__image { transform:scale(1.34); filter:brightness(1.38) saturate(1.1); }
.front-house--door.is-entering .door-copy,.front-house--door.is-entering .door-hit,.front-house--door.is-entering .invitation,.front-house--door.is-entering .skip { opacity:0; transition:opacity .4s ease; }
.lobby-copy { position:absolute; z-index:1; left:clamp(1.25rem,4.5vw,5rem); top:clamp(1.5rem,4.6vh,4rem); text-shadow:0 2px 20px rgba(0,0,0,.8); }
.lobby-copy h1 { max-width:min(38rem,57vw); font-size:clamp(2rem,3.8vw,4rem); }
.lobby-nav { position:absolute; z-index:2; inset:0; }
.object { position:absolute; display:grid; gap:.35rem; min-width:8.8rem; color:var(--cream); opacity:.92; text-decoration:none; text-shadow:0 1px 12px #000; transition:transform .25s,color .25s,opacity .25s; }
.object span { font-size:clamp(1.02rem,1.45vw,1.42rem); font-style:italic; }
.object small { color:var(--amber); font:.61rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.object em { max-width:13rem; color:var(--amber); font-size:clamp(.68rem,.9vw,.84rem); line-height:1.38; }
.object:hover,.object:focus-visible { color:#fff6e3; opacity:1; outline:0; transform:translateY(-5px); }
.object--jukebox { left:5.5%; bottom:26%; }.object--memories { right:6%; bottom:16%; }.object--shop { left:56%; top:38%; }
.top-nav { position:absolute; z-index:3; top:1.3rem; right:clamp(1rem,3vw,3rem); display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; font:.68rem var(--mono); letter-spacing:.08em; text-shadow:0 1px 9px #000; text-transform:uppercase; }
.top-nav a { color:rgba(242,229,203,.84); text-decoration:none; }.top-nav a:hover,.top-nav a:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:.35em; }
@media (max-width:760px) { .scene__image--door { background-position:56% center; }.scene__scrim { background:linear-gradient(180deg,rgba(8,5,4,.45),rgba(8,5,4,.2) 40%,rgba(8,5,4,.91)); }.door-copy { top:auto; bottom:23%; max-width:min(30rem,calc(100vw - 2.8rem)); }.note,.invitation { display:none; }.door-hit { top:4%; bottom:37%; left:18%; width:69%; }.top-nav { left:1rem; right:1rem; justify-content:center; gap:.55rem 1rem; font-size:.59rem; }.lobby-copy { max-width:16rem; }.lobby-copy h1 { font-size:1.7rem; }.scene__image--lobby { background-position:58% center; }.object { min-width:0; }.object span { font-size:.96rem; }.object small { font-size:.54rem; }.object em { max-width:8rem; font-size:.65rem; }.object--jukebox { left:5%; bottom:34%; }.object--memories { right:3%; bottom:19%; }.object--shop { left:43%; top:47%; max-width:7rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* The jukebox is its own freestanding front-house room, not a modal. */
.scene--jukebox { min-height:100svh; overflow:auto; padding:clamp(7rem,12vh,9.5rem) clamp(1rem,5vw,5rem) clamp(2rem,5vh,4rem); }
.scene--jukebox .scene__image--lobby { position:fixed; inset:0; background-position:right top; }
.scene--jukebox .scene__scrim--jukebox { position:fixed; inset:0; }
.scene__scrim--jukebox { background:linear-gradient(90deg,rgba(7,4,3,.88),rgba(7,4,3,.58) 47%,rgba(7,4,3,.78)); }
.jukebox-copy { position:relative; z-index:1; max-width:38rem; text-shadow:0 2px 20px rgba(0,0,0,.8); }
.jukebox-copy h1 { font-size:clamp(2.8rem,6vw,6.3rem); }
.jukebox-back { position:absolute; z-index:3; top:1.3rem; left:clamp(1rem,3vw,3rem); color:rgba(242,229,203,.84); font:.68rem var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.jukebox-back:hover,.jukebox-back:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:.35em; }
.jukebox-room { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(17rem,.85fr); gap:clamp(1rem,3vw,3rem); width:min(76rem,100%); margin:clamp(2.5rem,5vh,4.5rem) auto 0; align-items:start; }
.quarter-prompt { grid-column:1/-1; display:flex; align-items:center; gap:1rem; max-width:27rem; padding:.65rem 1rem .65rem .4rem; border:1px solid rgba(239,197,124,.35); background:linear-gradient(90deg,rgba(46,23,12,.84),rgba(25,14,10,.34)); box-shadow:0 .8rem 2rem rgba(0,0,0,.28); }
.quarter-prompt img { width:clamp(4.5rem,8vw,7rem); height:clamp(4.5rem,8vw,7rem); object-fit:contain; }
.quarter-prompt p { margin:0; color:var(--amber); font-size:clamp(1rem,1.5vw,1.22rem); font-style:italic; }
.quarter-prompt small { display:block; margin-top:.28rem; color:rgba(242,229,203,.72); font:.63rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.record-selector,.now-playing { border:1px solid rgba(239,197,124,.38); background:linear-gradient(145deg,rgba(43,23,15,.92),rgba(17,10,8,.92)); box-shadow:0 1.25rem 3rem rgba(0,0,0,.42); }
.record-selector { padding:clamp(1.1rem,2.4vw,2rem); border:clamp(3.2rem,5vw,5.5rem) solid transparent; border-image:url('assets/jukebox-cabinet-frame-v1.png') 205 185 145 185 fill stretch; background:linear-gradient(145deg,rgba(43,23,15,.92),rgba(17,10,8,.92)); }
.record-selector__header { display:flex; flex-direction:column; align-items:center; gap:.72rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(239,197,124,.22); }
.record-selector__title { text-align:center; }
.record-selector__title .panel-kicker { margin-bottom:.28rem; }
.jukebox-marquee { display:block; width:clamp(10.5rem,19vw,15.5rem); height:auto; margin:0 auto .2rem; filter:drop-shadow(0 .22rem .34rem rgba(0,0,0,.62)); }
.record-selector .quarter-prompt { display:flex; grid-column:auto; justify-content:center; align-items:center; gap:.75rem; width:100%; max-width:none; padding:.1rem 1rem .1rem; border:0; background:none; box-shadow:none; text-align:center; }
.record-selector .quarter-prompt img { width:clamp(3.35rem,4.2vw,4.7rem); height:clamp(3.35rem,4.2vw,4.7rem); }
.quarter-prompt__copy { display:grid; justify-items:center; }
.quarter-prompt__copy p { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.22rem .45rem; }
.quarter-prompt__youtube { color:var(--amber); font:.64rem/1.15 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.quarter-prompt__message { color:#fff0cd; font:italic clamp(.94rem,1.2vw,1.08rem)/1.15 var(--serif); }
.quarter-prompt__copy small { position:relative; display:flex; align-items:center; gap:.55rem; margin-top:.42rem; color:rgba(242,229,203,.74); font:.57rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.quarter-prompt__copy small::before { width:1.8rem; height:1px; background:var(--amber); content:""; }
.panel-kicker { margin:0 0 .45rem; color:var(--amber); font:.62rem/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.record-selector h2,.now-playing h2 { font-size:clamp(1.55rem,2.5vw,2.35rem); }
.record-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.55rem; margin-top:1.25rem; }
.record-button { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.22rem .5rem; align-items:start; min-height:5.15rem; padding:.65rem; border:1px solid rgba(242,229,203,.16); color:var(--cream); background:rgba(5,3,2,.28); cursor:pointer; font-family:var(--serif); text-align:left; transition:background .2s,border-color .2s,transform .2s; }
.record-button b { grid-row:1/3; display:grid; place-items:center; align-self:center; width:1.82rem; aspect-ratio:1; border:1px solid #f2c66f; border-radius:50%; color:#2a1408; background:radial-gradient(circle at 35% 28%,#fff0bb 0 9%,#f6c864 26%,#b86722 63%,#4d210e 100%); box-shadow:inset 0 0 0 2px rgba(62,25,9,.55),0 .12rem .24rem rgba(0,0,0,.52); font:.61rem var(--mono); letter-spacing:0; text-shadow:0 1px rgba(255,241,190,.42); }
.record-button span { min-width:0; color:rgba(242,229,203,.84); font:.62rem/1.25 var(--mono); letter-spacing:.025em; overflow-wrap:anywhere; }
.record-button em { min-width:0; color:#fff0cd; font-size:clamp(.82rem,1vw,.96rem); line-height:1.18; overflow-wrap:anywhere; }
.record-button small { grid-column:3; grid-row:1/3; align-self:center; color:rgba(242,229,203,.56); font:.58rem var(--mono); }
.record-button:hover,.record-button:focus-visible,.record-button.is-selected { border-color:var(--amber); background:rgba(203,133,45,.16); outline:0; transform:translateY(-2px); }
.record-button:hover b,.record-button:focus-visible b,.record-button.is-selected b { background:radial-gradient(circle at 35% 28%,#fffbe4 0 11%,#ffe28a 29%,#e9892d 64%,#6b2d0e 100%); box-shadow:inset 0 0 0 2px rgba(72,27,8,.52),0 0 .7rem rgba(239,197,124,.48); }
.record-button--featured { grid-column:1/-1; grid-template-columns:2.35rem minmax(0,1fr) auto; min-height:6.1rem; padding:1rem 1.1rem; border-color:rgba(239,197,124,.72); background:linear-gradient(100deg,rgba(127,62,18,.52),rgba(58,27,13,.78) 58%,rgba(17,10,8,.86)); }
.record-button--featured b { width:2.15rem; font-size:.68rem; }
.record-button--featured span { align-self:end; color:var(--amber); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.record-button--featured em { align-self:start; color:#fff0cd; font-size:clamp(1.05rem,1.55vw,1.35rem); }
.record-button--featured small { font-size:.66rem; }
.record-button--featured i { grid-column:2/-1; margin-top:.22rem; padding-top:.55rem; border-top:1px solid rgba(239,197,124,.26); color:rgba(242,229,203,.82); font:italic clamp(.84rem,1vw,.97rem)/1.35 var(--serif); }
.now-playing { position:sticky; top:1rem; padding:clamp(1.1rem,2.4vw,2rem); }
.now-playing__artist { min-height:2.5em; margin:.55rem 0 1rem; color:var(--amber); font-size:.93rem; }
.youtube-shell { aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(239,197,124,.32); background:#090604; }
.youtube-shell iframe { width:100%; height:100%; border:0; }
.jukebox-status { display:grid; gap:.24rem; min-height:3.6em; margin:1rem 0 .7rem; padding:.72rem .8rem; border-left:2px solid var(--amber); background:linear-gradient(90deg,rgba(203,133,45,.15),transparent); color:rgba(242,229,203,.82); font-size:.84rem; line-height:1.45; }
.jukebox-status__kicker { color:var(--amber); font:.58rem/1.25 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.jukebox-status strong { color:#fff0cd; font-size:.94rem; font-weight:400; line-height:1.3; }
.now-playing__controls { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.jukebox-button,.youtube-link { border:1px solid rgba(239,197,124,.54); padding:.63rem .78rem; color:var(--cream); background:rgba(15,8,5,.72); font:.62rem var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.jukebox-button { cursor:pointer; }.jukebox-button:disabled,.youtube-link[aria-disabled="true"] { cursor:not-allowed; opacity:.43; }
.jukebox-button:not(:disabled):hover,.jukebox-button:not(:disabled):focus-visible,.youtube-link:not([aria-disabled="true"]):hover,.youtube-link:not([aria-disabled="true"]):focus-visible { border-color:var(--amber); color:#fff6e3; outline:0; }
.music-note { margin:1rem 0 0; color:rgba(242,229,203,.5); font:.62rem/1.5 var(--mono); }
.jukebox-trail { display:grid; gap:.1rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid rgba(239,197,124,.22); }
.jukebox-trail .panel-kicker { margin-bottom:.42rem; }
.jukebox-trail a { display:grid; grid-template-columns:1.7rem 1fr auto; align-items:center; gap:.45rem; padding:.72rem .08rem; border-top:1px solid rgba(242,229,203,.12); color:var(--cream); font-size:1.02rem; text-decoration:none; transition:color .2s,transform .2s; }
.jukebox-trail a span { color:var(--amber); font:.56rem var(--mono); letter-spacing:.08em; }
.jukebox-trail a b { color:var(--amber); font:1rem/1 var(--serif); font-weight:400; transition:transform .2s; }
.jukebox-trail a:hover,.jukebox-trail a:focus-visible { color:#fff6e3; outline:0; transform:translateX(.22rem); }
.jukebox-trail a:hover b,.jukebox-trail a:focus-visible b { transform:translateX(.2rem); }
@media (max-width:760px) { .scene--jukebox { padding-top:5.5rem; }.jukebox-back { top:1rem; }.front-house--jukebox .top-nav { top:3.25rem; }.jukebox-copy h1 { font-size:3rem; }.jukebox-room { grid-template-columns:1fr; margin-top:2rem; }.quarter-prompt { grid-column:auto; }.record-selector { border-width:3.8rem 2.1rem 2.8rem; border-image-slice:205 185 145 185; padding:.95rem .7rem; }.record-selector__header { grid-template-columns:1fr; }.record-selector .quarter-prompt { grid-template-columns:auto minmax(0,1fr); }.now-playing { position:relative; top:auto; }.record-list { grid-template-columns:repeat(auto-fit,minmax(8.6rem,1fr)); } }

/* Cabinet face: the player belongs in the jukebox, with records on either side. */
.jukebox-room { display:block; width:min(98rem,100%); margin:clamp(2.5rem,5vh,4.5rem) auto 0; }
.jukebox-cabinet { padding:clamp(.4rem,.7vw,.75rem) clamp(1.2rem,2vw,2rem) clamp(1.2rem,2vw,2rem); border:clamp(3rem,4.5vw,5rem) solid transparent; border-image:url('assets/jukebox-cabinet-frame-v1.png') 205 185 145 185 fill stretch; background:linear-gradient(145deg,rgba(43,23,15,.93),rgba(17,10,8,.94)); box-shadow:0 1.5rem 3.4rem rgba(0,0,0,.52); }
.jukebox-cabinet__header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1.5rem; padding:0 clamp(.25rem,1vw,.75rem) 1.1rem; border-bottom:1px solid rgba(239,197,124,.22); }
.jukebox-cabinet__header .record-selector__title { grid-column:2; flex:0 0 auto; text-align:center; }
.jukebox-cabinet__header .jukebox-marquee { width:clamp(10rem,16vw,14rem); margin:0 auto .2rem; }
.jukebox-cabinet__header .quarter-prompt { grid-column:3; justify-content:flex-end; justify-self:end; width:auto; max-width:none; padding:0; border:0; background:none; box-shadow:none; }
.jukebox-cabinet__header .quarter-prompt img { width:clamp(3.2rem,4vw,4.5rem); height:clamp(3.2rem,4vw,4.5rem); }
.jukebox-cabinet__header .quarter-prompt__copy { justify-items:start; text-align:left; }
.jukebox-cabinet__header .quarter-prompt__copy p { justify-content:flex-start; }
.jukebox-cabinet__face { display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem,1.12fr) minmax(0,1fr); gap:clamp(.8rem,1.7vw,1.5rem); align-items:stretch; margin-top:1.05rem; }
.record-bank { min-width:0; padding:.82rem; border:1px solid rgba(239,197,124,.26); background:linear-gradient(155deg,rgba(51,27,16,.76),rgba(12,7,5,.74)); }
.record-bank .panel-kicker { margin-bottom:.16rem; font-size:.53rem; }
.record-bank h3 { margin:0; color:#fff0cd; font:italic clamp(1.05rem,1.6vw,1.38rem)/1.1 var(--serif); }
.record-bank .record-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.42rem; margin-top:.7rem; }
.record-bank .record-button { grid-template-columns:1.64rem minmax(0,1fr); min-height:4.08rem; padding:.42rem; gap:.1rem .32rem; }
.record-bank .record-button b { grid-row:1/3; width:1.5rem; font-size:.51rem; }
.record-bank .record-button span { font-size:.51rem; line-height:1.16; }
.record-bank .record-button em { font-size:clamp(.71rem,.82vw,.84rem); line-height:1.06; }
.record-bank .record-button small { display:block; grid-column:2; grid-row:3; align-self:start; padding-top:.08rem; color:rgba(242,229,203,.62); font:.47rem/1 var(--mono); letter-spacing:.06em; }
.record-bank .record-button--featured { grid-column:1/-1; grid-template-columns:1.8rem minmax(0,1fr); min-height:4.15rem; padding:.56rem; }
.record-bank .record-button--featured b { width:1.68rem; }
.record-bank .record-button--featured span { font-size:.58rem; }
.record-bank .record-button--featured em { font-size:clamp(.84rem,1vw,1rem); }
.record-bank .record-button--featured i { display:none; }
.jukebox-cabinet .now-playing { position:relative; top:auto; min-width:0; padding:clamp(.95rem,1.5vw,1.35rem); border:1px solid rgba(239,197,124,.5); background:linear-gradient(165deg,rgba(55,29,17,.96),rgba(13,7,5,.96)); box-shadow:inset 0 0 0 1px rgba(255,233,181,.05),0 .8rem 1.8rem rgba(0,0,0,.26); }
.jukebox-cabinet .now-playing h2 { font-size:clamp(1.45rem,2vw,2.1rem); }
.jukebox-cabinet .now-playing__artist { min-height:0; margin:.38rem 0 .75rem; }
.jukebox-cabinet .youtube-shell { aspect-ratio:16/9; }
.jukebox-cabinet .jukebox-status { min-height:0; margin:.72rem 0 .58rem; padding:.56rem .65rem; }
.jukebox-cabinet .music-note { margin:.75rem 0 0; }
.jukebox-trail--cabinet { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(239,197,124,.3); }
.jukebox-trail--cabinet a { display:block; overflow:hidden; border-radius:.34rem; background:#17100b; box-shadow:0 .42rem .85rem rgba(0,0,0,.36); line-height:0; transition:filter .16s,transform .16s,box-shadow .16s; }
.jukebox-trail--cabinet a img { display:block; width:100%; height:auto; aspect-ratio:3/1; object-fit:cover; }
.jukebox-trail--cabinet a:hover { filter:brightness(1.1); box-shadow:0 .58rem 1rem rgba(0,0,0,.48),0 0 .8rem rgba(239,197,124,.18); transform:translateY(-.12rem); }
.jukebox-trail--cabinet a:focus-visible { outline:2px solid #fff0bb; outline-offset:.18rem; filter:brightness(1.1); }
@media (max-width:980px) { .jukebox-cabinet__face { grid-template-columns:minmax(0,1fr) minmax(18rem,.95fr); }.record-bank--right { grid-column:1/-1; }.record-bank--right .record-list { grid-template-columns:repeat(3,minmax(0,1fr)); }.jukebox-cabinet .now-playing { grid-column:2; grid-row:1; } }
@media (max-width:760px) { .scene--jukebox { padding-bottom:1.5rem; }.jukebox-cabinet { border-width:3.4rem 1.35rem 2.15rem; padding:.25rem .25rem .8rem; }.jukebox-cabinet__header { flex-direction:column; align-items:center; gap:.42rem; padding:0 .25rem .8rem; }.jukebox-cabinet__header .record-selector__title { text-align:center; }.jukebox-cabinet__header .jukebox-marquee { margin:0 auto .14rem; }.jukebox-cabinet__header .quarter-prompt { justify-content:center; }.jukebox-cabinet__header .quarter-prompt__copy { justify-items:center; text-align:center; }.jukebox-cabinet__header .quarter-prompt__copy p { justify-content:center; }.jukebox-cabinet__face { grid-template-columns:1fr; gap:.75rem; }.jukebox-cabinet .now-playing { grid-column:auto; grid-row:auto; order:-1; }.record-bank--right { grid-column:auto; }.record-bank .record-list,.record-bank--right .record-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.record-bank .record-button { min-height:3.85rem; }.jukebox-trail--cabinet { grid-template-columns:1fr; gap:0; }.jukebox-trail--cabinet a { font-size:.95rem; } }
@media (max-width:760px) { .jukebox-cabinet__header { display:flex; } }

/* Phone-first front door: tighten the composition and make the entry action visible. */
@media (max-width: 600px) {
  .scene--door { min-height:100svh; min-height:100dvh; }
  .scene__image--door { background-position:50% center; }
  .scene--door .scene__scrim { background:linear-gradient(180deg,rgba(8,5,4,.35) 0%,rgba(8,5,4,.06) 28%,rgba(8,5,4,.16) 43%,rgba(8,5,4,.82) 100%); }
  body.front-house--door .scene-brand { top:3.8rem; left:50%; right:auto; width:min(10.5rem,48vw); transform:translateX(-50%); }
  .door-copy { left:1.25rem; right:1.25rem; bottom:25%; max-width:30rem; margin-inline:auto; text-align:center; }
  .door-copy .eyebrow { margin-bottom:.55rem; font-size:.62rem; letter-spacing:.13em; }
  .door-copy h1 { max-width:13ch; margin-inline:auto; font-size:clamp(2.25rem,10.5vw,2.9rem); line-height:1.04; letter-spacing:-.045em; }
  .door-copy .lede { margin:.8rem 0 0; font-size:clamp(1rem,4.8vw,1.2rem); line-height:1.4; }
  .door-copy .note { display:none; }
  .door-hit { inset:22% 8% 7%; width:auto; border-radius:12px; }
  .invitation { display:inline-flex; align-items:center; justify-content:center; left:50%; bottom:1.35rem; min-height:2.85rem; padding:.65rem 1.15rem; border:1px solid rgba(239,197,124,.82); border-radius:999px; background:rgba(19,14,11,.72); color:#f7d99e; font-size:.95rem; letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
  .skip { right:.8rem; bottom:.55rem; font-size:.58rem; }
}
@media (max-width:380px) {
  .door-copy { bottom:24%; }
  .door-copy h1 { font-size:clamp(2.05rem,10vw,2.4rem); }
  .invitation { bottom:1.5rem; left:43%; }
  .skip { right:.45rem; bottom:.6rem; font-size:.53rem; }
}