/* Heartin: a neighbourhood radio, with the controls kept in reach. */
:root{--gold:#e0b45f;--paper:#fff2d8;--fg-rgb:255,242,216;--bg-rgb:35,18,16;--glass:rgba(42,23,19,.8);--glass-brd:rgba(237,204,151,.35)}
body.nostalgia{background:#291714}
.nostalgia .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);grid-template-rows:auto 1fr;column-gap:clamp(30px,7vw,120px);row-gap:38px;padding:26px clamp(24px,5vw,90px) 48px;align-items:center;min-height:100svh}
.nostalgia .topbar{grid-column:1/-1;align-self:start}
.nostalgia .gbtn{border-radius:6px;background:rgba(43,24,20,.84);font-size:14px;min-height:44px;box-shadow:0 3px 0 #21120e;color:#fff2d8}
.nostalgia .ganesha-btn svg{animation:none}
.nostalgia .mood-menu{background:#32201b;max-height:70svh;overflow:auto;border-radius:8px}
.nostalgia .mitem .men{font-size:14px}
.nostalgia .mood-menu .mhead{font-size:12px;color:#d1b394}
.nostalgia .scrim{background:linear-gradient(90deg,rgba(37,17,14,.62),rgba(37,17,14,.12) 58%,rgba(37,17,14,.25)),linear-gradient(0deg,rgba(24,12,10,.62),transparent 65%)}
.room-intro{padding:30px 0 70px;max-width:660px}
.room-kicker{font:600 12px/1.6 system-ui,sans-serif;letter-spacing:.2em;color:#f2d9ab;text-shadow:0 2px 10px #23120d}
.room-kicker span{padding:0 9px;color:#e0b45f}
.nostalgia .title{margin:24px 0 30px;padding:0;text-align:left;font-size:clamp(64px,8.6vw,140px);line-height:1.02;color:#fff0cf;text-shadow:2px 4px 0 #743329,0 8px 32px #26140e}
.room-memory{font:italic clamp(20px,2.1vw,29px)/1.5 Georgia,serif;color:#fff4e1;max-width:430px;text-wrap:balance;text-shadow:0 2px 8px #20100a}
.room-caption{margin-top:18px;font-size:14px;line-height:1.5;color:#f1d3ad;text-shadow:0 2px 8px #20100a}
.nostalgia .deck{width:100%;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px;border:1px solid #ab795b;border-radius:16px;background:repeating-linear-gradient(0deg,rgba(255,214,143,.035) 0 1px,transparent 1px 5px),linear-gradient(135deg,#603329,#321d19);box-shadow:inset 0 1px 0 #d6aa7a,inset 0 -5px 0 #231713,0 20px 50px #1d0d0bbb;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;color:#f4dfbb}
.deck-brand{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 15px}
.deck-brand>span:first-child{font:italic bold 25px/1 Georgia,serif;letter-spacing:-1px;color:#f5dbab}
.brand-star{font-style:normal;font-size:20px;padding-left:5px;color:#d39e4a}
.deck-brand>span:last-child{font:500 10px/1.4 system-ui,sans-serif;letter-spacing:.15em;text-align:right;max-width:125px}
.cassette{position:relative;padding:12px 13px 0;background:linear-gradient(150deg,#ddd0b0,#bbae8e);border:2px solid #251e19;border-radius:11px;box-shadow:0 3px 0 #251711,inset 0 0 0 3px #f0dfb7;color:#33231d}
.cassette::before,.cassette::after{content:'+';position:absolute;bottom:7px;font:14px/1 monospace;color:#4b4034}.cassette::before{left:8px}.cassette::after{right:8px}
.cassette-label{display:flex;align-items:center;gap:10px;padding:10px 9px 12px;border-radius:5px 5px 0 0;background:repeating-linear-gradient(0deg,transparent 0 23px,#5a382014 23px 24px),#f8edcd;border-bottom:9px solid #8c3c31}
.tape-side{font:700 21px/1 Georgia,serif;align-self:flex-start;border:1px solid #a59878;padding:4px}
.tape-type{font:bold 11px/1 monospace;align-self:flex-start;white-space:nowrap}
.nostalgia .meta{gap:4px}
.nostalgia .d-title{font:italic bold 21px/1.18 Georgia,serif;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:25px;color:#34211a}
.nostalgia .d-sub{font-size:12px;line-height:1.35;color:#675340;white-space:normal;overflow-wrap:anywhere}
.tape-window{display:flex;align-items:center;justify-content:space-around;gap:12px;margin:13px 10px 10px;padding:9px 12px;background:linear-gradient(#201a16,#3e3127);border-radius:40px;border:2px solid #9d8b69;box-shadow:inset 0 3px 6px #080706}
.reel{flex:none;width:48px;height:48px;border-radius:50%;border:7px solid #a99c80;background:repeating-conic-gradient(#f0e6cd 0deg 28deg,#564738 28deg 60deg);position:relative;animation:reel-turn 4s linear infinite;animation-play-state:paused;box-shadow:0 0 0 3px #16120f}
.reel::after{content:'';position:absolute;inset:11px;border-radius:50%;background:#251e18;box-shadow:0 0 0 3px #f2e8d0}
body:not(.paused) .reel{animation-play-state:running}
@keyframes reel-turn{to{transform:rotate(360deg)}}
.nostalgia .art{width:76px;height:40px;border-radius:3px;border:1px solid #ad9878;background:repeating-linear-gradient(0deg,#6b543d 0 2px,#382c21 2px 3px)}
.nostalgia .art img{border-radius:0;filter:sepia(.25);animation:none!important}
.tape-footer{display:flex;justify-content:space-between;gap:10px;font:600 9px/1.3 system-ui,sans-serif;letter-spacing:.08em;margin:0 4px 8px;color:#514634}
.tape-bottom{margin:0 auto;width:65%;height:22px;background:#b5a888;border:1px solid #928260;border-bottom:0;clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);display:flex;align-items:center;justify-content:space-around}
.tape-bottom i{height:7px;width:7px;background:#3d3228;border-radius:50%;box-shadow:0 0 0 2px #d0c19f}
.transport{padding:12px 6px 16px}
.nostalgia .prog{margin:0 0 11px;gap:12px}.nostalgia .prog .t{font:12px/1.5 monospace;color:#e9cfaa}.nostalgia .bar{height:24px}.nostalgia .bar .track-line{background:#1d1310;box-shadow:0 1px #83644b}.nostalgia .bar .knob{transform:translateX(-50%) scale(1);width:10px;height:10px}
.nostalgia .controls{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px}
.nostalgia .cbtn,.nostalgia .cbtn.play{width:100%;height:58px;border-radius:4px;border:1px solid #d7c4a2;background:linear-gradient(#f3e5c6,#c3b393);color:#3c2b23;box-shadow:0 5px 0 #211512,0 6px 0 #79573f,inset 0 1px #fff4d9;display:flex;flex-direction:column;justify-content:center;gap:6px}
.nostalgia .cbtn.play{background:linear-gradient(#eac479,#c39542);border-color:#e3c888}
.nostalgia .cbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #211512}
.nostalgia .cbtn:hover{filter:brightness(1.08)}
.key-label{font:700 10px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.station-dial{padding:12px 12px 8px;border:1px solid #887355;border-radius:5px;background:#241b16;box-shadow:inset 0 2px 5px #140d0a}
.dial-heading{display:flex;justify-content:space-between;gap:10px;color:#e6c18a;font:500 9px/1.5 system-ui,sans-serif;letter-spacing:.08em}
.dial-ruler{height:17px;margin:9px 2px 3px;background:repeating-linear-gradient(90deg,#bc9e6e 0 1px,transparent 1px 8px);position:relative;border-bottom:1px solid #997a51}
.dial-ruler span{position:absolute;left:var(--tuned,2%);top:-4px;width:3px;height:24px;background:#ee7759;box-shadow:0 0 5px #ee775960;transition:left .3s}
.station-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#7b5c3f #241b16;scroll-snap-type:x proximity;padding:6px 0 8px}
.station-list a{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;gap:3px;color:#cdbb9d;text-decoration:none;font-size:14px;line-height:1.3;padding:5px 10px;min-height:48px;min-width:84px;border-radius:3px;border:1px solid transparent;text-align:center}
.station-list a:hover{background:#493326}.station-list a[aria-current]{background:#e7c587;color:#362319;border-color:#f7dbab}.station-number{font:11px/1 monospace;letter-spacing:.13em}
.station-list a:focus-visible,.memory-trigger:focus-visible{outline:2px solid #f5d59e;outline-offset:2px}
.memory-trigger{width:100%;border:0;border-top:1px solid #9e705540;margin:13px 0 -5px;padding:14px 0 8px;background:none;color:#f3d5a8;cursor:pointer;font:italic 15px/1.4 Georgia,serif;display:flex;justify-content:space-between;text-align:left;gap:10px;min-height:44px}.memory-trigger:hover{color:#fff6e2}
.nostalgia .post{background:#251a15;box-shadow:none;border-top:1px solid #9c7755}.nostalgia .post-title{color:#f6e1ba}.nostalgia .post h2{font-family:Georgia,serif}.nostalgia .tldr{border-color:#997441}.nostalgia .post p{color:#eadbc7}
.memory-dialog{border:1px solid #ac8157;border-radius:14px;background:#f7edd8;color:#39261e;padding:26px;max-width:480px;width:calc(100% - 28px);max-height:calc(100svh - 32px);margin:auto;overflow:auto;box-shadow:0 25px 80px #0008}
.memory-dialog::backdrop{background:#1e100ccc;backdrop-filter:blur(5px)}
.memory-dialog h2{font:italic 30px/1.2 Georgia,serif;margin:8px 30px 14px 0}.memory-dialog p{font-size:14px;line-height:1.5}.memory-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;background:transparent;color:#60392b;font-size:28px;cursor:pointer}
.memory-song{border-block:1px solid #bca888;padding:12px 0;margin-bottom:18px;font-weight:600}.memory-dialog label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.memory-dialog textarea{width:100%;min-height:110px;resize:vertical;padding:12px;border:1px solid #b7a180;border-radius:4px;background:#fff9ed;color:#39261e;font:16px/1.5 Georgia,serif}.memory-dialog textarea:focus{outline:2px solid #8d4936;outline-offset:2px}
.memory-hint{color:#756046;margin:6px 0 14px}.memory-actions{display:flex;flex-wrap:wrap;gap:9px}.memory-actions button,.memory-actions a{padding:12px 15px;min-height:44px;border:1px solid #8d4936;border-radius:5px;background:#783c2f;color:#fff4da;font:600 14px/1.3 system-ui,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.memory-actions .secondary{background:transparent;color:#683829}.memory-status{min-height:21px;margin-top:12px;color:#71513a}.memory-preview{width:100%;height:auto;display:block;border-radius:6px;margin:14px 0}.memory-preview[hidden]{display:none}
@media(min-width:1500px){.nostalgia .hero{padding-inline:max(70px,calc((100vw - 1360px)/2))}}
@media(max-width:860px){.nostalgia .hero{display:flex;gap:0;padding:18px 20px 32px;min-height:100svh}.room-intro{padding:30px 0 24px;max-width:500px;width:100%;text-align:center}.room-kicker{font-size:10px;letter-spacing:.15em}.nostalgia .title{text-align:center;font-size:clamp(54px,11vw,88px);margin:14px 0 14px}.nostalgia .title span{display:inline}.nostalgia .title span+span::before{content:' '}.room-memory{font-size:19px;max-width:340px;margin:auto}.room-caption{font-size:12px;margin-top:8px}.nostalgia .deck{max-width:430px;padding:16px;margin-top:auto}.nostalgia .scrim{background:linear-gradient(0deg,#23120bd9,rgba(38,17,12,.2) 65%,#23120b70)}.nostalgia .topbar{flex:none}.nostalgia .gbtn{font-size:13px;padding:9px 10px}.deck-brand{margin-bottom:12px}.cassette-label{padding:8px}.nostalgia .d-title{font-size:20px}}
@media(max-width:380px){.nostalgia .hero{padding-inline:12px}.nostalgia .deck{padding:13px}.room-intro{padding-top:22px}.room-memory{font-size:17px}.nostalgia .title{font-size:49px}.tape-type{display:none}.dial-heading{font-size:8px}.tape-window{margin-inline:4px}.nostalgia .art{width:58px}.nostalgia .d-title{font-size:19px}}
@media(prefers-reduced-motion:reduce){.reel{animation:none!important}.dial-ruler span{transition:none}}
.memory-actions[hidden]{display:none}
.memory-actions button:disabled{opacity:.65;cursor:wait}
@media(max-width:860px) and (max-height:740px){.room-intro{padding:18px 0}.nostalgia .title{font-size:46px;margin:9px 0}.room-memory{font-size:17px;line-height:1.35}.room-caption{display:none}.nostalgia .deck{padding:13px}.deck-brand{margin-bottom:9px}.tape-window{margin-block:9px}.nostalgia .cbtn,.nostalgia .cbtn.play{height:52px}}

/* Compact deck: retain the cassette and all controls with less vertical space. */
.nostalgia .deck{padding:12px; border-radius:12px}
.nostalgia .deck-brand{margin:0 2px 8px}
.nostalgia .deck-brand>span:first-child{font-size:21px}
.nostalgia .deck-brand>span:last-child{max-width:none;font-size:9px}
.nostalgia .cassette{padding:7px 9px 4px}
.nostalgia .cassette-label{padding:6px 8px;border-bottom-width:5px;gap:8px}
.nostalgia .d-title{font-size:18px;min-height:0;line-height:1.15}
.nostalgia .d-sub{font-size:12px;line-height:1.25}
.nostalgia .meta{gap:2px}
.nostalgia .tape-side{font-size:17px;padding:3px}
.nostalgia .tape-window{padding:5px 12px;margin:6px 18px 3px}
.nostalgia .reel{width:32px;height:32px;border-width:5px}
.nostalgia .reel::after{inset:6px;box-shadow:0 0 0 2px #f2e8d0}
.nostalgia .art{width:64px;height:27px}
.nostalgia .tape-footer,.nostalgia .tape-bottom{display:none}
.nostalgia .transport{display:grid;grid-template-columns:minmax(0,1fr) 154px;align-items:center;gap:12px;padding:9px 1px 12px}
.nostalgia .prog{margin:0;gap:6px}
.nostalgia .controls{grid-template-columns:1fr 1.2fr 1fr;gap:5px}
.nostalgia .cbtn,.nostalgia .cbtn.play{height:44px;gap:4px;min-width:44px}
.nostalgia .key-label{font-size:9px;letter-spacing:.04em}
.nostalgia .station-dial{padding:7px 8px 3px}
.nostalgia .dial-heading{display:none}
.nostalgia .dial-ruler{height:8px;margin:2px 2px 4px}
.nostalgia .dial-ruler span{height:14px;top:-2px}
.nostalgia .station-list{padding:2px 0 4px;gap:4px}
.nostalgia .station-list a{flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:5px 9px;font-size:14px}
.nostalgia .memory-trigger{margin:5px 0 -4px;padding:8px 1px;min-height:44px;font-size:14px;align-items:center}
@media(max-width:380px){.nostalgia .transport{grid-template-columns:minmax(0,1fr) 144px;gap:8px}.nostalgia .prog .t{font-size:11px}.nostalgia .tape-window{margin-inline:10px}}
@media(max-width:330px){.nostalgia .transport{grid-template-columns:minmax(0,1fr) 140px;gap:6px}.nostalgia .prog #dur{display:none}}

/* Slim cassette: song information and reels share one row. */
.nostalgia .deck{padding:9px;border-radius:10px}
.nostalgia .cassette{display:grid;grid-template-columns:minmax(0,1fr) 78px;align-items:center;gap:8px;padding:7px 9px;border-radius:7px}
.nostalgia .cassette-label{padding:5px 6px;gap:6px;border-bottom-width:3px;min-width:0}
.nostalgia .d-title{font-size:17px;line-height:1.15}
.nostalgia .tape-side,.nostalgia .tape-type{display:none}
.nostalgia .tape-window{margin:0;padding:7px 5px;gap:8px;border-width:1px;border-radius:22px}
.nostalgia .reel{width:24px;height:24px;border-width:4px;box-shadow:0 0 0 1px #16120f}
.nostalgia .reel::after{inset:4px;box-shadow:0 0 0 1px #f2e8d0}
.nostalgia .art{display:none}
.nostalgia .cassette::before,.nostalgia .cassette::after{display:none}
.nostalgia .transport{padding:6px 1px 9px;gap:8px}
.nostalgia .station-dial{padding:2px 5px}
.nostalgia .dial-ruler{display:none}
.nostalgia .station-list{padding:0;gap:3px}
.nostalgia .station-list a{padding:4px 7px;min-width:0}
@media(max-width:380px){.nostalgia .cassette{grid-template-columns:minmax(0,1fr) 68px;gap:6px;padding:6px}.nostalgia .tape-window{gap:5px;padding:6px 4px}.nostalgia .reel{width:23px;height:23px}.nostalgia .d-title{font-size:16px}}