@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: #e7a64d;
  --ink: #130e0b;
  --wine: #62231d;
  --rust: #9e432c;
  --mono: "DM Mono", monospace;
  --serif: "Libre Baskerville", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--serif); }
button, a { font: inherit; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 30; background: var(--cream); color: var(--ink); padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }

.scene { min-height: 100svh; isolation: isolate; overflow: hidden; position: relative; }
.scene-image, .scene-scrim, .wall-backdrop { position: absolute; inset: 0; }
.scene-image { z-index: -3; background-position: center; background-size: cover; transform: scale(1.015); transition: transform 1.9s cubic-bezier(.2,.75,.15,1), filter 1.4s ease; }
.scene-image--exterior { background-image: url("assets/bar-exterior.png"); }
.scene-image--interior { background-image: url("assets/bar-interior.png"); }
.scene-scrim { z-index: -2; background: linear-gradient(90deg, rgba(8,5,4,.88) 0%, rgba(8,5,4,.38) 43%, rgba(8,5,4,.14) 68%, rgba(8,5,4,.5) 100%); }
.scene-scrim--interior { background: linear-gradient(90deg, rgba(7,4,3,.73), transparent 48%, rgba(7,4,3,.54)); }

.entrance-copy { position: absolute; z-index: 1; 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; font: 500 clamp(.67rem, .8vw, .83rem)/1.5 var(--mono); letter-spacing: .17em; text-transform: uppercase; color: #f0bd72; }
h1, h2 { margin: 0; font-weight: 400; letter-spacing: -.04em; line-height: .99; }
h1 { font-size: clamp(3.5rem, 8.5vw, 8.2rem); }
h2 { font-size: clamp(2.4rem, 5vw, 5.6rem); }
.lede { margin: 1.5rem 0 .4rem; font-size: clamp(1.15rem, 2vw, 1.7rem); font-style: italic; }
.time-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-button { position: absolute; z-index: 2; top: 7%; bottom: 17%; left: 44%; width: 23%; border: 0; background: transparent; cursor: pointer; border-radius: 8px; transition: background .35s, box-shadow .35s; }
.door-button:hover, .door-button: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; }
.door-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; pointer-events: none; }
.enter-button, .wall-cta { position: absolute; z-index: 2; left: clamp(1.4rem, 7vw, 8rem); bottom: clamp(4.3rem, 12vh, 8rem); border: 1px solid rgba(242,229,203,.78); padding: .9rem 1.25rem; color: var(--cream); background: rgba(20,12,8,.51); cursor: pointer; font: 500 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
.enter-button:hover, .enter-button:focus-visible, .wall-cta:hover, .wall-cta:focus-visible { background: var(--cream); color: var(--ink); transform: translateY(-2px); }
.text-button { border: 0; background: transparent; color: rgba(242,229,203,.77); cursor: pointer; text-decoration: underline; text-underline-offset: .32em; font: .72rem var(--mono); letter-spacing: .06em; }
.replay-button { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.4rem; }

.interior[hidden] { display: none; }
.interior-intro { 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); }
.object-map { position: absolute; inset: 0; z-index: 2; }
.object { position: absolute; display: grid; gap: .35rem; min-width: 8.8rem; color: var(--cream); text-decoration: none; text-shadow: 0 1px 12px #000; opacity: .92; transition: transform .25s, color .25s, opacity .25s; }
.object span { font-size: clamp(1.12rem, 1.75vw, 1.65rem); font-style: italic; }
.object small { font: .61rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #efc57c; }
.object:hover, .object:focus-visible { color: #fff6e3; opacity: 1; transform: translateY(-5px); outline: 0; }
.object:focus-visible span { outline: 2px solid var(--cream); outline-offset: 6px; }
.object--jukebox { left: 1.4%; bottom: 14%; width: clamp(10rem, 18vw, 20rem); min-height: clamp(19rem, 57vh, 35rem); align-content: end; padding: 0 0 1.3rem 1rem; }
.object--jukebox::before { content: ""; position: absolute; z-index: -1; inset: -.5rem; border: 1px solid transparent; border-radius: 42% 42% 12% 12%; background: radial-gradient(ellipse at center, rgba(246,151,42,.26), rgba(246,151,42,.05) 44%, transparent 70%); box-shadow: inset 0 0 2.5rem rgba(255,165,47,.16), 0 0 1.7rem rgba(255,126,35,.08); opacity: .3; transition: opacity .3s ease, box-shadow .3s ease, border-color .3s ease; }
.object--jukebox:hover::before, .object--jukebox:focus-visible::before { opacity: 1; border-color: rgba(244,196,109,.42); box-shadow: inset 0 0 3.5rem rgba(255,180,56,.4), 0 0 2.8rem rgba(255,126,35,.34); }
.object--bars { right: 6%; top: 29%; }
.object--wall { right: 6%; bottom: 16%; }
.object--shop { left: 56%; top: 38%; }
.replay-button--inside { right: 1.5rem; bottom: 1.4rem; }

.standard-navigation { position: fixed; z-index: 10; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; top: 1.3rem; right: clamp(1rem, 3vw, 3rem); font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 9px #000; }
.standard-navigation a { text-decoration: none; color: rgba(242,229,203,.84); }
.standard-navigation a:hover, .standard-navigation a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .35em; }

.notice { max-width: 26rem; border: 1px solid rgba(242,229,203,.5); color: var(--cream); background: #21120d; box-shadow: 0 1.2rem 4rem rgba(0,0,0,.7); padding: 2.2rem; }
.notice::backdrop { background: rgba(0,0,0,.58); }
.notice p { margin: 0; line-height: 1.6; }
.notice-close { position: absolute; right: .7rem; top: .35rem; border: 0; background: none; color: var(--cream); cursor: pointer; font-size: 1.5rem; }
.memory-panel { width: min(50rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100svh - 2rem)); overflow: auto; border: 1px solid rgba(239,197,124,.46); padding: clamp(2rem, 5vw, 4.5rem); color: var(--cream); background: linear-gradient(125deg, #29140f, #100906 72%); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.75); }
.memory-panel::backdrop { background: rgba(4,2,1,.75); backdrop-filter: blur(3px); }
.panel-close { position: absolute; right: 1rem; top: .7rem; border: 0; color: var(--cream); background: transparent; font-size: 2rem; cursor: pointer; }
.panel-kicker { margin: 0 0 1rem; color: #efc57c; font: .68rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.panel-content h2 { max-width: 30rem; font-size: clamp(2.6rem, 6vw, 5.5rem); }
.panel-content > p:not(.panel-kicker) { max-width: 36rem; color: rgba(242,229,203,.84); line-height: 1.75; }
.panel-list { display: grid; gap: .75rem; margin-top: 2.2rem; }
.panel-list article { border-top: 1px solid rgba(242,229,203,.23); padding: 1rem 0; }
.panel-list h3 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 400; }
.panel-list p { margin: 0; color: rgba(242,229,203,.72); line-height: 1.6; font-size: .92rem; }
.panel-link { display: inline-block; margin-top: 1.7rem; color: #f4ce8e; font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.panel-link:hover, .panel-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .4em; }

.jukebox-focus { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; padding: clamp(1rem, 4vw, 3.5rem); pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 13% 48%, transparent 0 16%, rgba(4,2,1,.2) 52%, rgba(4,2,1,.58)); transition: opacity .55s ease; }
.jukebox-panel { position: relative; width: min(55rem, calc(100vw - clamp(12rem, 23vw, 25rem))); max-height: min(48rem, calc(100svh - 2rem)); margin-left: clamp(10rem, 19vw, 22rem); overflow: auto; pointer-events: auto; border: 1px solid #bc8654; border-radius: .7rem 2.3rem 1rem .7rem; padding: clamp(1.15rem, 2.5vw, 2rem); color: var(--cream); background: linear-gradient(115deg, rgba(45,20,18,.98), rgba(18,10,8,.97) 58%), repeating-linear-gradient(173deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 .2rem #29140e, inset 0 0 2.5rem rgba(0,0,0,.9), 0 1.4rem 4rem rgba(0,0,0,.65); }
.jukebox-panel::before { content: ""; position: absolute; pointer-events: none; inset: .45rem; border: 1px solid rgba(241,195,121,.34); border-radius: .35rem 1.9rem .55rem .35rem; box-shadow: inset 0 0 1.1rem rgba(239,161,61,.09); }
.jukebox-panel__lights { position: absolute; top: .8rem; right: 4rem; display: flex; gap: .4rem; }
.jukebox-panel__lights i { width: .47rem; height: .47rem; border-radius: 50%; background: #d5672f; box-shadow: 0 0 .7rem #e29a4b; }
.jukebox-panel__header, .jukebox-panel__body { position: relative; z-index: 1; }
.jukebox-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: .5rem .4rem 1.45rem; border-bottom: 1px solid rgba(239,197,124,.33); }
.jukebox-panel__header .panel-kicker { margin-bottom: .55rem; }
.jukebox-panel__header h2 { font-size: clamp(2.1rem, 4vw, 4rem); color: #ffe0a4; text-shadow: 0 0 1.1rem rgba(236,143,42,.24); }
.jukebox-panel__line { margin: .75rem 0 0; color: rgba(242,229,203,.74); font-size: .92rem; font-style: italic; }
.jukebox-close { min-height: 2.75rem; flex: 0 0 auto; border: 1px solid rgba(242,229,203,.58); padding: .65rem .8rem; color: var(--cream); background: rgba(7,4,3,.63); cursor: pointer; font: .63rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.jukebox-close:hover, .jukebox-close:focus-visible { color: var(--ink); background: var(--cream); outline: 0; }
.jukebox-panel__body { display: grid; grid-template-columns: minmax(17rem, 1.12fr) minmax(15rem, .88fr); gap: clamp(1rem, 2.5vw, 2rem); padding: 1.4rem .35rem .25rem; }
.jukebox-selector { border: 1px solid rgba(188,134,84,.47); padding: .85rem; background: linear-gradient(135deg, rgba(96,42,29,.5), rgba(20,11,8,.55)); box-shadow: inset 0 0 1rem rgba(0,0,0,.48); }
.jukebox-selector__label, .jukebox-player__label { margin: 0 0 .7rem; color: #f0bd72; font: .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.jukebox-song-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.jukebox-song { position: relative; min-height: 4rem; display: grid; grid-template-columns: 2.25rem 1fr; grid-template-rows: auto auto; gap: 0 .5rem; align-items: center; border: 1px solid #936543; padding: .35rem .45rem; color: #2d2015; text-align: left; cursor: pointer; background: linear-gradient(100deg, #e6d3a8, #bda77b); box-shadow: inset 0 0 .6rem rgba(84,42,22,.32); }
.jukebox-song b { grid-row: 1 / span 2; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; color: #f5e8c7; background: #1a120f; box-shadow: inset 0 0 .35rem #000, 0 0 0 1px #7e5a3e; font: 500 .67rem var(--mono); }
.jukebox-song span { overflow: hidden; color: #5d261f; font: 500 .6rem var(--mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.jukebox-song em { overflow: hidden; font-size: .8rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.jukebox-song:hover, .jukebox-song:focus-visible, .jukebox-song.is-selected { border-color: #ffe0a4; outline: 0; background: linear-gradient(100deg, #f5e4bd, #d5aa62); box-shadow: inset 0 0 .9rem rgba(255,199,89,.47), 0 0 .8rem rgba(229,136,42,.27); }
.jukebox-song.is-selected b { color: #2b130c; background: #ffc05f; box-shadow: 0 0 .7rem rgba(255,177,57,.7); }
.jukebox-song--featured { grid-column: 1 / -1; min-height: 5.35rem; grid-template-columns: minmax(7rem, .72fr) 1fr; border: 2px solid #f0bd72; padding: .55rem .8rem; color: #ffe7b2; background: linear-gradient(100deg, #531e16, #b65a29 52%, #3f1712); box-shadow: inset 0 0 1.15rem rgba(0,0,0,.58), 0 0 .9rem rgba(229,136,42,.28); }
.jukebox-song--featured b { width: auto; height: auto; border-radius: 0; padding: .7rem .8rem; color: #fff0c7; background: transparent; box-shadow: none; font-size: clamp(1.25rem, 2.1vw, 1.8rem); letter-spacing: .13em; }
.jukebox-song--featured span { color: #ffd38c; font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; }
.jukebox-song--featured em { color: #fff0ce; font-family: var(--serif); font-size: 1.15rem; }
.jukebox-song--featured small { grid-column: 1 / -1; margin-top: -.18rem; color: rgba(255,224,164,.8); font: .54rem var(--mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.jukebox-song--featured:hover, .jukebox-song--featured:focus-visible, .jukebox-song--featured.is-selected { border-color: #fff0bd; background: linear-gradient(100deg, #6a2115, #d06c30 52%, #552016); box-shadow: inset 0 0 1.2rem rgba(255,199,89,.38), 0 0 1.25rem rgba(229,136,42,.5); }
.jukebox-song--featured.is-selected b { color: #fff0c7; background: transparent; box-shadow: none; }
.jukebox-player { position: relative; min-width: 0; border: 1px solid rgba(231,166,77,.5); padding: .95rem; background: linear-gradient(145deg, rgba(17,12,10,.88), rgba(60,28,23,.7)); box-shadow: inset 0 0 1.5rem rgba(0,0,0,.62); }
.jukebox-player__title { margin: 0; color: #ffe1a7; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.1; text-transform: uppercase; }
.jukebox-player__artist { min-height: 1.3rem; margin: .38rem 2.75rem .3rem 0; color: rgba(242,229,203,.75); font-style: italic; }
.jukebox-player__code { position: absolute; top: .85rem; right: .9rem; margin: 0; color: #f0bd72; font: .84rem var(--mono); letter-spacing: .1em; }
.youtube-player-frame { aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid #6e4934; background: #080605; box-shadow: 0 0 0 .2rem #1c110d, inset 0 0 1.2rem #000; }
.youtube-player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.jukebox-status { min-height: 2.5em; margin: .75rem 0 .3rem; color: rgba(242,229,203,.67); font-size: .76rem; line-height: 1.45; }
.jukebox-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.jukebox-controls button, .jukebox-mini-player button { min-height: 2.5rem; border: 1px solid #76503a; padding: .4rem .65rem; color: var(--cream); background: #17100d; cursor: pointer; font: .64rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.jukebox-controls button:hover, .jukebox-controls button:focus-visible, .jukebox-mini-player button:hover, .jukebox-mini-player button:focus-visible { border-color: #f0bd72; color: #ffe2ae; outline: 0; }
.jukebox-volume { display: flex; flex: 1 1 7rem; align-items: center; gap: .4rem; color: rgba(242,229,203,.72); font: .58rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.jukebox-volume input { min-width: 4.5rem; flex: 1; accent-color: #e7a64d; }
.interior.has-open-jukebox .scene-image--interior { transform: scale(1.055); transform-origin: 9% 50%; filter: brightness(.83) saturate(.82); transition-duration: .7s; }
.interior.has-open-jukebox .scene-scrim--interior { background: linear-gradient(90deg, rgba(7,4,3,.48), rgba(7,4,3,.52) 52%, rgba(7,4,3,.72)); }
.interior.has-open-jukebox .jukebox-focus { opacity: 1; }
.interior.jukebox-playing .object--jukebox::before, .jukebox-panel.jukebox-playing .jukebox-panel__lights i { animation: jukebox-glow 2.8s ease-in-out infinite; }
.jukebox-mini-player { position: fixed; z-index: 12; left: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: min(38rem, calc(100vw - 2rem)); border: 1px solid rgba(231,166,77,.56); padding: .55rem .65rem; color: var(--cream); background: rgba(18,10,8,.92); box-shadow: 0 .6rem 2rem rgba(0,0,0,.48); backdrop-filter: blur(6px); font: .64rem var(--mono); letter-spacing: .04em; }
.jukebox-mini-player[hidden] { display: none; }
.jukebox-mini-player span { overflow: hidden; flex: 1 1 11rem; text-overflow: ellipsis; white-space: nowrap; }
.jukebox-mini-player button { min-height: 2rem; padding: .3rem .5rem; font-size: .57rem; }
@keyframes jukebox-glow { 0%, 100% { filter: brightness(1); opacity: .75; } 50% { filter: brightness(1.3); opacity: 1; } }

.wall-page { background: #160e0b; }
.wall-gateway { min-height: 100svh; position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; isolation: isolate; }
.wall-backdrop { z-index: -2; background: linear-gradient(rgba(20,10,7,.49), rgba(20,10,7,.82)), url("assets/the-wall.png") center / cover; filter: saturate(.68) sepia(.16); transition: transform .9s cubic-bezier(.2,.75,.15,1), filter .9s ease; }
.wall-backdrop::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#f8e9c9 1px, transparent 1px); background-size: 7px 7px; mix-blend-mode: overlay; }
.wall-content { width: min(41rem, calc(100% - 2.5rem)); padding: 4rem 0; text-shadow: 0 2px 20px #000; }
.back-link { display: inline-block; margin-bottom: clamp(4rem, 13vh, 9rem); color: rgba(242,229,203,.83); font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.back-link:hover, .back-link:focus-visible, .fallback-link:hover, .fallback-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .4em; }
.wall-content h1 { font-size: clamp(4.1rem, 10vw, 9rem); }
.wall-line { margin: 1.5rem 0; font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-style: italic; }
.wall-description { max-width: 34rem; margin: auto; color: rgba(242,229,203,.82); line-height: 1.7; }
.wall-cta { position: static; display: inline-block; margin-top: 2.1rem; }
.fallback-link { display: block; margin-top: 1.55rem; color: rgba(242,229,203,.8); font: .68rem var(--mono); letter-spacing: .05em; text-decoration: none; }

.archive-page { background: #150e0b; }
.archive { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; }
.archive-backdrop { position: fixed; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(12,7,5,.94), rgba(12,7,5,.75) 52%, rgba(12,7,5,.83)), url("assets/bar-interior.png") center / cover; filter: saturate(.65) sepia(.16); }
.archive-content { width: min(76rem, calc(100% - 3rem)); margin: 0 auto; padding: clamp(4.5rem, 12vh, 9rem) 0 5rem; }
.archive-content .back-link { margin-bottom: clamp(3rem, 7vh, 5.5rem); }
.archive-intro { max-width: 37rem; margin: 1.5rem 0 3rem; color: rgba(242,229,203,.85); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.75; }
.bar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bar-card { min-height: 20rem; display: flex; flex-direction: column; border: 1px solid rgba(242,229,203,.28); padding: clamp(1.25rem, 2.3vw, 2rem); background: linear-gradient(145deg, rgba(75,38,23,.55), rgba(16,9,6,.72)); box-shadow: inset 0 0 3rem rgba(0,0,0,.25); transition: transform .25s, border-color .25s, background .25s; }
.bar-card:hover { transform: translateY(-5px); border-color: rgba(239,197,124,.75); background: linear-gradient(145deg, rgba(105,55,31,.64), rgba(16,9,6,.7)); }
.bar-card-number { margin: 0 0 auto; color: #efc57c; font: .69rem var(--mono); letter-spacing: .13em; }
.bar-card h2 { margin: 3rem 0 .75rem; font-size: clamp(1.55rem, 2.2vw, 2.25rem); line-height: 1.1; }
.bar-card p:not(.bar-card-number) { margin: 0; color: rgba(242,229,203,.78); line-height: 1.6; font-size: .92rem; }
.bar-card a { display: inline-block; margin-top: 1.4rem; color: #f4ce8e; font: .66rem var(--mono); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.bar-card a:hover, .bar-card a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .4em; }

.music-page { background: #120d0a; }
.music-room { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; }
.music-backdrop { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(9,5,4,.89) 0%, rgba(9,5,4,.62) 48%, rgba(9,5,4,.44)), url("assets/bar-interior.png") left center / cover; filter: saturate(.82) contrast(1.05); }
.music-content { width: min(40rem, calc(100% - 3rem)); margin-left: clamp(1.5rem, 8vw, 10rem); padding: 4rem 0; text-shadow: 0 2px 19px #000; }
.music-content .back-link { margin-bottom: clamp(3.5rem, 11vh, 8rem); }
.music-lede { max-width: 31rem; margin: 1.5rem 0 2.4rem; color: rgba(242,229,203,.86); font-size: clamp(1.07rem, 1.6vw, 1.34rem); line-height: 1.7; font-style: italic; }
.record-note { max-width: 29rem; border-left: 1px solid rgba(239,197,124,.72); padding: .25rem 0 .25rem 1.2rem; color: rgba(242,229,203,.77); line-height: 1.65; }
.record-note-label { color: #efc57c; font: .67rem var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.record-note p { margin: .65rem 0 0; }
.music-wall-link { display: inline-block; margin-top: 2.2rem; color: #f5cd8a; font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.music-wall-link:hover, .music-wall-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .4em; }

.is-entering .scene-image--exterior { transform: scale(1.34); filter: brightness(1.38) saturate(1.1); }
.is-entering .entrance-copy, .is-entering .door-button, .is-entering .door-invitation, .is-entering .enter-button, .is-entering .entrance .replay-button { opacity: 0; transition: opacity .45s ease; }
.is-crossing-wall .wall-backdrop { transform: scale(1.18); filter: saturate(.94) sepia(.05) brightness(1.55); }
.is-crossing-wall .wall-content { opacity: 0; transform: scale(.98); transition: opacity .55s ease, transform .55s ease; }

@media (max-width: 760px) {
  .scene-image--exterior { 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) 100%); }
  .entrance-copy { top: auto; bottom: 23%; max-width: min(30rem, calc(100vw - 2.8rem)); }
  h1 { font-size: clamp(3.2rem, 14vw, 5.1rem); }
  .time-note { display: none; }
  .door-button { top: 4%; bottom: 37%; left: 18%; width: 69%; }
  .door-invitation { display: none; }
  .enter-button { left: 50%; bottom: 10%; transform: translateX(-50%); white-space: nowrap; }
  .enter-button:hover, .enter-button:focus-visible { transform: translateX(-50%) translateY(-2px); }
  .standard-navigation { left: 1rem; right: 1rem; justify-content: center; gap: .55rem 1rem; font-size: .59rem; }
  .interior-intro { max-width: 16rem; }
  .interior-intro h2 { font-size: 2.1rem; }
  .scene-image--interior { background-position: 58% center; }
  .object { min-width: 0; }
  .object span { font-size: .96rem; }
  .object small { font-size: .54rem; }
  .object--jukebox { left: 1%; bottom: 18%; width: 42%; min-height: 56%; padding: 0 0 .8rem .7rem; }
  .object--bars { right: 3%; top: 28%; }
  .object--wall { right: 3%; bottom: 19%; }
  .object--shop { left: 43%; top: 47%; max-width: 7rem; }
  .archive-content { width: min(100% - 2rem, 35rem); padding-top: 5.5rem; }
  .archive-content .back-link { margin-bottom: 3rem; }
  .bar-cards { grid-template-columns: 1fr; }
  .bar-card { min-height: 15rem; }
  .music-content { width: min(100% - 2rem, 32rem); margin: 0 auto; padding-top: 5.5rem; }
  .music-content .back-link { margin-bottom: 3rem; }
  .jukebox-focus { align-items: stretch; padding: .65rem; background: rgba(4,2,1,.58); }
  .jukebox-panel { width: 100%; max-height: none; margin: 0; border-radius: .6rem; padding: 1rem; }
  .jukebox-panel__lights { right: 1.2rem; }
  .jukebox-panel__header { gap: .75rem; padding-right: 2.8rem; }
  .jukebox-panel__header h2 { font-size: 2.25rem; }
  .jukebox-panel__line { font-size: .8rem; }
  .jukebox-close { position: absolute; top: .85rem; right: .85rem; width: 2.75rem; min-height: 2.75rem; overflow: hidden; padding: 0; color: transparent; }
  .jukebox-close span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream); font: 1.6rem/1 var(--serif); }
  .jukebox-panel__body { grid-template-columns: 1fr; gap: .9rem; padding: .9rem 0 0; }
  .jukebox-song-list { gap: .55rem; }
  .jukebox-song { min-height: 4.35rem; }
  .jukebox-controls button { min-height: 2.75rem; }
  .jukebox-mini-player { right: 1rem; bottom: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .interior.has-open-jukebox .scene-image--interior { transform: scale(1.015); }
}

/* Standalone Jukebox: one illuminated machine in a softly blurred bar. */
.jukebox-site .jukebox-room { min-height: 100svh; display: grid; place-items: center; }
.jukebox-site .scene-image--interior { filter: blur(5px) brightness(.46) saturate(.7); transform: scale(1.06); }
.jukebox-site .scene-scrim--interior { background: radial-gradient(ellipse at center, rgba(31,12,8,.26), rgba(5,3,2,.82)); }
.jukebox-site .interior-intro { left: clamp(1rem, 3vw, 3rem); top: clamp(1rem, 3vh, 2.5rem); }
.jukebox-site .interior-intro h1 { font-size: clamp(2.2rem, 4.8vw, 4.7rem); }
.jukebox-site .interior-intro .lede { margin-top: .65rem; font-size: clamp(.9rem, 1.35vw, 1.2rem); }
.jukebox-back-link { position: absolute; z-index: 5; top: clamp(1rem, 3vh, 2.5rem); right: clamp(1rem, 3vw, 3rem); min-width: 14.5rem; border: 2px solid #f4b24f; padding: .95rem 1.3rem; color: #fff2d1; background: linear-gradient(135deg, #9b451d, #e3742d 55%, #b55320); box-shadow: 0 .35rem 1.4rem rgba(0,0,0,.62), 0 0 1.5rem rgba(235,135,45,.42), inset 0 1px rgba(255,239,193,.45); font: .77rem var(--mono); font-weight: 700; letter-spacing: .12em; text-align: center; text-decoration: none; text-shadow: 0 1px 2px rgba(47,15,5,.75); text-transform: uppercase; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.jukebox-back-link:hover, .jukebox-back-link:focus-visible { color: #2b1007; background: linear-gradient(135deg, #ffe0a1, #f5ae45); box-shadow: 0 .45rem 1.8rem rgba(0,0,0,.7), 0 0 2rem rgba(255,185,71,.6); outline: 0; transform: translateY(-2px); }
.jukebox-wall-link { position: absolute; z-index: 5; top: calc(clamp(1rem, 3vh, 2.5rem) + 4.15rem); right: clamp(1rem, 3vw, 3rem); min-width: 14.5rem; border: 1px solid rgba(244,178,79,.86); padding: .72rem 1.1rem; color: #f8d99c; background: rgba(25,12,8,.82); box-shadow: 0 .25rem 1.1rem rgba(0,0,0,.52), inset 0 1px rgba(255,236,185,.14); font: .67rem var(--mono); font-weight: 700; letter-spacing: .11em; text-align: center; text-decoration: none; text-shadow: 0 1px 2px #000; text-transform: uppercase; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }.jukebox-wall-link:hover,.jukebox-wall-link:focus-visible { color:#2b1007; background:#f4ce8e; box-shadow:0 .35rem 1.5rem rgba(0,0,0,.65),0 0 1.5rem rgba(244,178,79,.42); outline:0; transform:translateY(-2px); }
.jukebox-site .jukebox-focus { position: relative; inset: auto; width: min(62rem, calc(100vw - 2rem)); min-height: 0; padding: 0; opacity: 1; pointer-events: auto; background: none; }
.jukebox-site .jukebox-panel { width: 100%; max-height: min(49rem, calc(100svh - 2rem)); margin: 0; border-radius: 3rem 3rem 1rem 1rem; border-width: 2px; box-shadow: inset 0 0 0 .35rem #29140e, inset 0 0 4rem rgba(0,0,0,.9), 0 1.4rem 5rem rgba(0,0,0,.72), 0 0 4rem rgba(205,97,30,.12); }
.jukebox-site .jukebox-panel::after { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; bottom: -.85rem; height: .85rem; border-radius: 0 0 1rem 1rem; background: linear-gradient(90deg, #3c1a13, #a45229 50%, #3c1a13); box-shadow: 0 .75rem 1.4rem rgba(0,0,0,.55); }
.jukebox-site .jukebox-panel__header { padding-left: 1rem; padding-right: 1rem; }
.jukebox-site .jukebox-panel__body { padding-left: 1rem; padding-right: 1rem; }
.youtube-player-frame.is-unavailable { display: none; }

@media (max-width: 760px) {
  .jukebox-site .jukebox-room { display: block; padding: 5.7rem .65rem 1rem; overflow: auto; }
  .jukebox-site .interior-intro { position: absolute; max-width: none; text-align: center; left: 1rem; right: 1rem; top: .85rem; }
  .jukebox-site .interior-intro .eyebrow { margin-bottom: .3rem; }
  .jukebox-site .interior-intro .lede { display: none; }
  .jukebox-back-link { top: .75rem; right: .75rem; min-width: 0; padding: .65rem .8rem; font-size: .6rem; }
  .jukebox-wall-link { top: 3.8rem; right: .75rem; min-width: 0; padding: .55rem .7rem; font-size: .53rem; }
  .jukebox-site .jukebox-focus { width: 100%; }
  .jukebox-site .jukebox-panel { max-height: none; overflow: visible; border-radius: 1.7rem 1.7rem .7rem .7rem; }
  .jukebox-site .jukebox-song-list { grid-template-columns: 1fr; }
}