@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 1rem; color:#f0bd72; font:500 clamp(.67rem,.8vw,.83rem)/1.5 var(--mono); letter-spacing:.17em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(3.5rem,8.5vw,8.2rem); font-weight:400; letter-spacing:-.04em; line-height:.99; }
.lede { margin:1.5rem 0 .4rem; font-size:clamp(1.15rem,2vw,1.7rem); font-style:italic; }
.note { max-width:28rem; margin:0; color:rgba(242,229,203,.75); font-size:clamp(.85rem,1.2vw,1.05rem); 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(1rem,1.5vw,1.3rem); 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(2.4rem,5vw,5.6rem); }
.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.12rem,1.75vw,1.65rem); 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(.74rem,1vw,.92rem); 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:2.1rem; }.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:.7rem; }.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(4.3rem,5.4vw,6rem); height:clamp(4.3rem,5.4vw,6rem); }
.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; } }

/* Compact story links under the Jukebox heading */
.jukebox-story-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; width:min(38rem,100%); margin:.85rem 0 0; }
.jukebox-story-link { display:flex; min-width:0; min-height:5.25rem; align-items:center; gap:.55rem; padding:.38rem .55rem; border:1px solid rgba(239,197,124,.54); color:var(--cream); background:rgba(15,8,5,.78); box-shadow:0 .55rem 1.4rem rgba(0,0,0,.24); font:.59rem/1.35 var(--mono); letter-spacing:.065em; text-decoration:none; text-transform:uppercase; transition:border-color .2s,color .2s,background .2s; }
.jukebox-story-link:hover,.jukebox-story-link:focus-visible { border-color:var(--amber); color:#fff6e3; background:rgba(30,15,8,.92); outline:0; }
.jukebox-story-link__copy { min-width:0; flex:1; overflow-wrap:anywhere; }
.jukebox-story-link__cover { display:block; width:2.65rem; height:4.65rem; flex:0 0 2.65rem; border:1px solid rgba(239,197,124,.48); object-fit:cover; object-position:top center; box-shadow:0 .14rem .38rem rgba(0,0,0,.55); }
.jukebox-story-link__book-title { display:block; color:#fff0cd; }
.jukebox-story-link__status { display:block; margin-top:.28rem; color:var(--amber); font:.54rem/1.3 var(--mono); letter-spacing:.13em; }
.jukebox-story-link__arrow { flex:0 0 auto; color:var(--amber); font-size:.95rem; }
@media (max-width:540px) { .jukebox-story-links { grid-template-columns:1fr; }.jukebox-story-link { min-height:4.7rem; }.jukebox-story-link__cover { width:2.35rem; height:4.1rem; flex-basis:2.35rem; } }
/* Featured story cards beneath the bar lobby. */
.lobby-featured-stories { position: relative; z-index: 2; padding: 2rem 1rem 2.6rem; border-top: 1px solid rgba(239,197,124,.35); background: linear-gradient(145deg,#21140e,#130e0b); }
.lobby-featured-stories__inner { width: min(64rem,100%); margin: 0 auto; }
.lobby-featured-stories__eyebrow { margin: 0 0 .45rem; color: #efc57c; font: 500 .62rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lobby-featured-stories h2 { margin: 0; color: #f2e5cb; font: 400 clamp(1.65rem,3vw,2.35rem)/1.15 var(--serif); }
.lobby-featured-stories .jukebox-story-links { width: min(38rem,100%); margin: 1rem 0 0; }
@media (max-width:540px) { .lobby-featured-stories { padding: 1.5rem 1rem 2rem; } }

/* Individual Richmond bars, shown on the lobby between stories and the site footer. */
.lobby-bars { position:relative; z-index:2; padding:clamp(2.5rem,5vw,4.5rem) 1rem; border-top:1px solid rgba(239,197,124,.34); background:linear-gradient(160deg,#2a1810,#130e0b 72%); }
.lobby-bars__inner { width:min(70rem,100%); margin:0 auto; }
.lobby-bars__eyebrow { margin:0 0 .45rem; color:var(--amber); font:500 .62rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.lobby-bars h2 { margin:0; color:var(--cream); font:400 clamp(1.9rem,3.5vw,3rem)/1.1 var(--serif); }
.lobby-bars__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:clamp(1rem,2.4vw,1.7rem); margin-top:1.35rem; }
.bar-card { overflow:hidden; border:1px solid rgba(239,197,124,.38); background:#1b100b; box-shadow:0 1rem 2.25rem rgba(0,0,0,.32); }
.bar-card img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center; }
.bar-card--specs img { object-position:center 22%; }
.bar-card__caption { padding:.85rem 1rem 1rem; border-top:1px solid rgba(239,197,124,.24); background:linear-gradient(90deg,rgba(73,39,19,.94),rgba(25,14,10,.98)); }
.bar-card h3 { margin:0; color:#fff0cd; font:italic clamp(1rem,1.55vw,1.3rem)/1.25 var(--serif); }
@media (max-width:620px) { .lobby-bars { padding:2rem 1rem 2.4rem; }.lobby-bars__grid { grid-template-columns:1fr; }.bar-card img { aspect-ratio:4/3; } }


/* Dedicated directory page for the growing collection of Richmond bars. */
.bars-page { background:var(--ink); }
.bars-page__main { min-height:clamp(30rem,72vh,52rem); padding-top:clamp(5rem,10vh,7rem); background:radial-gradient(circle at top right,rgba(112,58,24,.34),transparent 45%),linear-gradient(160deg,#29170f,#130e0b 72%); }
.bars-page .lobby-bars { min-height:0; border-top:0; background:transparent; }
.bars-page__nav { position:absolute; }
@media (max-width:760px) { .bars-page__main { padding-top:5.4rem; }.bars-page__nav { top:3.25rem; } }