:root{
  --hall:#2a1810;
  --wall:#a9714f; --wall-dark:#6e4330; --wall-back:#b67d58;
  --ceil:#4a2d20; --floor-a:#5c361f; --floor-b:#4e2d19;
  --ink:#2a160c; --muted:#5e3f2e; --card:#f4e4d0; --line:#d4b89c;
  --hud:#f8e9d6; --hud-muted:#e2c5a8;
  --sticker:#f0b44a; --sticker-ink:#2a1504;
  --wood:#5e3519; --wood-hi:#8a5228; --wood-lo:#331b0c;
  --glow:rgba(255,190,110,.30); --lamp:rgba(255,175,90,.65); --shadow:rgba(20,8,2,.5);
  --couch:#8e3b2a; --couch-hi:#a3493a; --pillow:#e0a23a;
  --rug-a:#7e2f22; --rug-b:#93402c; --rug-edge:#3e160e; --rug-line:#d39a52;
  --door:#7a4526; --door-lo:#4a2614; --door-hi:#8c5430; --hall-wall:#2f1d14;
  --f-pixel:"Pixelify Sans", "Courier New", ui-monospace, monospace;
  --f-body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hall:#090403;
    --wall:#5a3322; --wall-dark:#2a140c; --wall-back:#653b27;
    --ceil:#1a0d07; --floor-a:#341c0e; --floor-b:#2b170b;
    --ink:#f4e6d6; --muted:#c7a68c; --card:#2a1912; --line:#5a3a2a;
    --hud:#f4e2cc; --hud-muted:#c9a88c;
    --sticker:#f0b44a; --sticker-ink:#2a1504;
    --wood:#4a2913; --wood-hi:#6e4020; --wood-lo:#220f05;
    --glow:rgba(255,170,90,.18); --lamp:rgba(255,160,70,.55); --shadow:rgba(0,0,0,.75);
    --couch:#6e2c1f; --couch-hi:#80382a; --pillow:#c48a2a;
    --rug-a:#5e2219; --rug-b:#6e2c20; --rug-edge:#2a0d07; --rug-line:#a8783c;
    --door:#5c321b; --door-lo:#2f170a; --door-hi:#6a3b21; --hall-wall:#140b07;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --hall:#090403;
  --wall:#5a3322; --wall-dark:#2a140c; --wall-back:#653b27;
  --ceil:#1a0d07; --floor-a:#341c0e; --floor-b:#2b170b;
  --ink:#f4e6d6; --muted:#c7a68c; --card:#2a1912; --line:#5a3a2a;
  --hud:#f4e2cc; --hud-muted:#c9a88c;
  --sticker:#f0b44a; --sticker-ink:#2a1504;
  --wood:#4a2913; --wood-hi:#6e4020; --wood-lo:#220f05;
  --glow:rgba(255,170,90,.18); --lamp:rgba(255,160,70,.55); --shadow:rgba(0,0,0,.75);
  --couch:#6e2c1f; --couch-hi:#80382a; --pillow:#c48a2a;
  --rug-a:#5e2219; --rug-b:#6e2c20; --rug-edge:#2a0d07; --rug-line:#a8783c;
  --door:#5c321b; --door-lo:#2f170a; --door-hi:#6a3b21; --hall-wall:#140b07;
  color-scheme:dark;
}
html,body{height:100%}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow:hidden;background:var(--hall);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sticker);outline-offset:3px}
.px-img{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- 3D room ---------- */
.window{position:fixed;inset:0;overflow:hidden}
.fit{position:absolute;left:50%;top:50%;width:1200px;height:720px;transform-origin:center;transform:translate(-50%,-50%) scale(var(--k,1))}
.scene{position:absolute;inset:0;perspective:900px;perspective-origin:50% 50%;pointer-events:none}
/* layers are stacked full-screen, so only the things you can touch take the pointer */
.rec,.door-btn{pointer-events:auto}
.room{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:transform 2.6s cubic-bezier(.45,0,.2,1)}
.face{position:absolute;transform-style:preserve-3d}
.back{width:800px;height:640px;left:-550px;top:-320px;transform:translateZ(-900px);
  background:radial-gradient(520px 420px at 120px 270px,var(--lamp),transparent 70%),radial-gradient(340px 300px at 740px 240px,var(--lamp),transparent 70%),radial-gradient(60% 55% at 60% 30%,var(--glow),transparent 70%),linear-gradient(var(--wall-back),var(--wall))}
.floor{width:1720px;height:1800px;left:-550px;top:-900px;transform:rotateX(90deg) translateZ(-320px);
  background:radial-gradient(270px 220px at 130px 140px,var(--lamp),transparent),radial-gradient(240px 240px at 682px 150px,var(--lamp),transparent),
    linear-gradient(rgba(0,0,0,.35),transparent 40%),repeating-linear-gradient(90deg,var(--floor-a) 0 108px,var(--floor-b) 108px 110px)}
.ceil{width:1720px;height:1800px;left:-550px;top:-900px;transform:rotateX(-90deg) translateZ(-320px);background:var(--ceil)}
.left{width:1800px;height:640px;left:-900px;top:-320px;transform:rotateY(90deg) translateZ(-550px);
  background:radial-gradient(420px 380px at 60px 270px,var(--lamp),transparent 70%),linear-gradient(90deg,var(--wall-dark),var(--wall) 70%,var(--wall-dark))}
.right{width:1300px;height:640px;left:0;top:-320px;transform-origin:0 50%;transform:translate3d(250px,0,-900px) rotateY(-45deg);
  background:radial-gradient(40% 50% at 55% 30%,var(--glow),transparent 75%),linear-gradient(90deg,var(--wall-dark),var(--wall) 45%,var(--wall-dark))}
.front{height:640px;top:-320px;background:var(--wall-dark)}
.skirt{position:absolute;left:0;right:0;bottom:0;height:22px;background:var(--wood-lo)}

.plank{position:absolute;left:200px;width:1090px;height:0;transform-style:preserve-3d}
.plank .top{position:absolute;left:0;bottom:0;width:100%;height:70px;transform-origin:bottom;transform:rotateX(-90deg);background:linear-gradient(var(--wood-hi),var(--wood))}
.plank .edge{position:absolute;left:0;top:0;width:100%;height:16px;transform:translateZ(70px);background:linear-gradient(var(--wood-hi) 0 3px,var(--wood) 3px 12px,var(--wood-lo) 12px);
  font-family:var(--f-pixel);font-size:12px;line-height:16px;color:#f6e7cf;padding-left:10px}
.plank .shade{position:absolute;left:0;bottom:0;width:100%;height:150px;background:linear-gradient(transparent,rgba(0,0,0,.18));pointer-events:none}

.rec{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;position:absolute;width:124px;height:124px;
  transform-origin:bottom center;transform:translateZ(22px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.rec .cover{position:relative;z-index:1;display:block;width:100%;height:100%;background:#222;pointer-events:none}
.rec::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 40%);pointer-events:none}
.mini{position:absolute;left:4%;top:4%;width:92%;height:92%;border-radius:50%;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle,#151515 0 1px,#1f1f1f 1px 2px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mini-label{position:absolute;inset:33%;border-radius:50%;overflow:hidden}
.mini-label img{width:100%;height:100%;display:block}
.cap{position:absolute;z-index:3;left:50%;bottom:calc(132% + 6px);transform:translateX(-50%);white-space:nowrap;font-family:var(--f-pixel);font-size:15px;background:var(--ink);color:var(--card);padding:3px 9px;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none}
.rec:hover,.rec:focus-visible{transform:translateZ(110px) rotateY(12deg);z-index:5}
.rec:hover .mini,.rec:focus-visible .mini{transform:translateY(-32%) rotate(70deg)}
.rec:hover .cap,.rec:focus-visible .cap{opacity:1}
.right:hover .rec:not(:hover):not(:focus-visible){opacity:.72}
.rec.on{transform:translateZ(150px) rotateY(12deg);opacity:0;pointer-events:none}


/* ---------- furniture ---------- */
.obj{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.f3{position:absolute;image-rendering:pixelated;background-size:100% 100%!important}
.f3.sh1::after,.f3.sh2::after,.f3.shT::after{content:"";position:absolute;inset:0;pointer-events:none}
.f3.sh1::after{background:rgba(0,0,0,.18)}
.f3.sh2::after{background:rgba(0,0,0,.34)}
.f3.shT::after{background:rgba(255,240,210,.10)}
.rug{box-shadow:inset 0 0 0 12px var(--rug-edge),inset 0 0 0 20px var(--rug-line);
  background:repeating-linear-gradient(90deg,var(--rug-a) 0 22px,var(--rug-b) 22px 44px)}
.pool{border-radius:50%;background:radial-gradient(closest-side,var(--lamp),transparent)}
.shade-face{background:linear-gradient(#fbe7bd,#f1c983)!important}
.platter{border-radius:50%;background:radial-gradient(circle,transparent 0 30%,#111 31%),repeating-radial-gradient(circle,#161616 0 1px,#222 1px 2px)}
.platter-spin{position:absolute;inset:0;border-radius:50%}
.platter img{position:absolute;inset:32%;width:36%;height:36%;border-radius:50%;opacity:0;transition:opacity .4s}
body.playing .platter img{opacity:1}
body.playing .platter-spin{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.poster{position:absolute;border:10px solid var(--wood-lo);box-shadow:0 10px 20px -8px var(--shadow);background:#222}
.poster img{display:block;width:100%;height:100%}
.leaf{border-radius:50% 0;background:linear-gradient(135deg,#5f8f4e,#2f5a2b)}

/* ---------- mood ---------- */
.vignette{position:fixed;pointer-events:none;z-index:4}
.vignette.t{inset:0 0 auto 0;height:18vh;background:linear-gradient(rgba(18,7,2,.55),transparent)}
.vignette.b{inset:auto 0 0 0;height:22vh;background:linear-gradient(transparent,rgba(18,7,2,.6))}
.vignette.l{inset:0 auto 0 0;width:14vw;background:linear-gradient(90deg,rgba(18,7,2,.5),transparent)}
.vignette.r{inset:0 0 0 auto;width:14vw;background:linear-gradient(270deg,rgba(18,7,2,.5),transparent)}
.pendant-shade{background:radial-gradient(circle at 50% 100%,#fff3d6,#f2b45e 60%,#b56f2c)!important}
.sprite img{display:block;width:100%;height:100%}
.head{position:absolute;transform-origin:50% 90%}
body.playing .nodder{animation:nod .9s ease-in-out infinite}
@keyframes nod{0%,100%{transform:rotateX(0) rotateZ(-3deg)}50%{transform:rotateX(14deg) rotateZ(3deg)}}
.pose{transition:transform 1s cubic-bezier(.4,0,.2,1)}
.fx{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;contain:strict}
.anchor{position:absolute;width:1px;height:1px}
.steam{display:none;position:absolute;will-change:transform,opacity;margin:-7px 0 0 -7px;width:14px;height:14px;opacity:0;animation:steam 2.2s ease-out infinite}
body:not(.intro) .steam{display:block}
/* lite mode: switched on automatically when the device can't keep up */
body.lite .steam,body.lite .note{display:none!important}
body.lite .nodder,body.lite .platter-spin,body.lite .vinyl-bob{animation:none!important}
@keyframes steam{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}20%{opacity:.75}100%{transform:translate3d(6px,-46px,0) scale(1.4);opacity:0}}
.note{position:absolute;margin:-18px 0 0 -14px;pointer-events:none;will-change:transform,opacity}

/* ---------- HUD ---------- */
.hud{position:fixed;left:clamp(16px,4vw,48px);top:calc(env(safe-area-inset-top,0px) + clamp(16px,3vw,32px));max-width:340px;z-index:10;transition:opacity .6s}
.name{font-family:var(--f-pixel);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1;margin:0 0 6px;color:var(--hud);text-shadow:0 2px 12px rgba(0,0,0,.4)}
.lede{margin:0;color:var(--hud-muted);font-size:15px}
.hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);font-family:var(--f-pixel);background:var(--card);color:var(--ink);padding:6px 14px;border-radius:999px;z-index:10;box-shadow:0 6px 18px -8px var(--shadow);transition:opacity .4s;white-space:nowrap}
body.picked .hint{opacity:0;pointer-events:none}
.intro .hud,.intro .hint,.intro .foot{opacity:0;pointer-events:none}
/* ---------- top bar, CV link, list view ---------- */
.topbar{position:fixed;right:clamp(16px,3vw,32px);top:calc(env(safe-area-inset-top,0px) + clamp(16px,3vw,28px));z-index:21;display:flex;gap:10px;align-items:center}
.topbar .lang{position:static}
.listbtn{appearance:none;border:1.5px solid var(--hud-muted);background:rgba(20,8,2,.6);color:var(--hud);font-family:var(--f-pixel);font-size:14px;padding:5px 14px;border-radius:999px;cursor:pointer;min-height:32px}
.intro .listbtn,body.listing .listbtn{display:none}
.cv{display:inline-block;margin-top:10px;color:var(--sticker);font-family:var(--f-pixel);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.skip{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);z-index:12;appearance:none;border:0;background:none;color:var(--hud-muted);font-family:var(--f-pixel);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
body:not(.intro) .skip,body.door-open .skip{display:none}
.list{position:fixed;inset:0;z-index:20;overflow:auto;background:var(--hall);color:var(--hud);padding:calc(env(safe-area-inset-top,0px) + 72px) clamp(16px,4vw,48px) calc(env(safe-area-inset-bottom,0px) + 40px)}
.list[hidden]{display:none}
.list-inner{max-width:1080px;margin:0 auto}
.list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.list-head .lede{color:var(--hud-muted);max-width:52ch}
.list h2{font-family:var(--f-pixel);font-weight:600;font-size:22px;margin:0 0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start;background:rgba(255,240,220,.06);border:1.5px solid rgba(255,230,200,.12);border-radius:8px;padding:14px;text-align:left;color:inherit;cursor:pointer;appearance:none;font:inherit}
.card:hover{border-color:var(--sticker)}
.card img{width:84px;height:84px;display:block}
.card h3{font-family:var(--f-pixel);font-weight:600;font-size:18px;line-height:1.15;margin:2px 0 6px}
.card p{margin:0;font-size:14px;color:var(--hud-muted)}
.card .kind{font-size:12px;margin:0 0 6px;color:var(--sticker-ink);white-space:nowrap}
.list .btn{color:var(--ink)}

/* ---------- front door intro ---------- */
.door-btn{appearance:none;border:0;padding:0;margin:0;cursor:pointer;display:block;position:absolute;
  background:
    linear-gradient(var(--door-hi),var(--door-hi)) 18% 9%/64% 36% no-repeat,
    linear-gradient(var(--door-hi),var(--door-hi)) 18% 88%/64% 36% no-repeat,
    linear-gradient(90deg,var(--door) 0,var(--door-lo) 100%);
  box-shadow:inset 0 0 0 6px var(--door-lo)}
.door-btn::after{content:"";position:absolute;right:22px;top:52%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe3a1,#b8862f 60%,#6b4a14)}
.door-btn:focus-visible{outline:4px solid var(--sticker);outline-offset:6px}
.door-pivot{transition:transform 1.3s cubic-bezier(.5,0,.2,1)}
body.door-near .door-pivot{transform:translate3d(-125px,92px,900px) rotateY(4deg)!important}
body.door-open .door-pivot{transform:translate3d(-125px,92px,900px) rotateY(104deg)!important}
.leak{background:#ffd391}
.spill{border-radius:50%;background:radial-gradient(closest-side,var(--lamp),transparent)}
.hallway{background:linear-gradient(var(--hall-wall),var(--hall))}
.trim{background:var(--door-lo)}
.knock{font-family:var(--f-pixel);font-size:30px;color:var(--hud);white-space:nowrap;text-align:center;
  text-shadow:0 0 18px rgba(255,190,110,.7);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
body.door-near .knock{opacity:1;transform:none}
@media (hover:none){ body.intro:not(.door-open) .knock{opacity:1;transform:none} }
body.door-open .knock{opacity:0!important}
/* while the door is shut only the hallway exists, so nothing inside can leak through */
body:not(.door-open) .room>:not(.door-part){visibility:hidden}
.leak{transition:opacity 1.4s ease .5s}
body.door-open .leak{opacity:0}

.lang{position:fixed;right:clamp(16px,3vw,32px);top:calc(env(safe-area-inset-top,0px) + clamp(16px,3vw,28px));z-index:11;display:flex;border:1.5px solid var(--hud-muted);border-radius:999px;overflow:hidden;background:rgba(20,8,2,.6)}
.lang button{appearance:none;border:0;background:transparent;color:var(--hud);font-family:var(--f-pixel);font-size:14px;padding:5px 12px;cursor:pointer;min-width:44px;min-height:32px}
.lang button[aria-pressed="true"]{background:var(--sticker);color:var(--sticker-ink)}
.foot{position:fixed;right:clamp(16px,3vw,32px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:10;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--hud-muted)}
.foot button{appearance:none;border:1.5px solid var(--line);background:var(--card);padding:2px 9px;border-radius:999px;cursor:pointer;font-family:var(--f-pixel);font-size:12px;color:var(--muted)}
.foot button[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* ---------- stage (floating record + info) ---------- */
.scrim{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s;
  background:linear-gradient(90deg,var(--card) 0,color-mix(in srgb,var(--card) 70%,transparent) 30%,transparent 55%)}
body.picked .scrim{opacity:1}
.stage{position:fixed;z-index:8;left:clamp(16px,4vw,48px);top:50%;transform:translateY(-44%);width:min(440px,33vw);pointer-events:none}
.stage.has-pick{pointer-events:auto}
.deck{position:relative;width:100%;aspect-ratio:16/10}
.sleeve,.vinyl-pos{position:absolute;aspect-ratio:1/1;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.sleeve{left:2%;top:15%;height:70%;z-index:2;box-shadow:0 14px 30px -10px var(--shadow);background:#222}
.sleeve img{display:block;width:100%;height:100%}
.sleeve::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 35%,transparent 70%,rgba(0,0,0,.18));pointer-events:none}
.vinyl-pos{left:3.25%;top:17%;height:66%;z-index:1}
.vinyl-bob{position:relative;width:100%;height:100%}
.vinyl-disc{width:100%;height:100%;border-radius:50%;position:relative;
  background:radial-gradient(circle,transparent 0 33%,rgba(255,255,255,.04) 33.5% 34%,transparent 34.5%),repeating-radial-gradient(circle,#151515 0 1.5px,#1f1f1f 1.5px 3px);
  box-shadow:0 18px 40px -12px var(--shadow),inset 0 0 0 2px #0c0c0c}
.label{position:absolute;inset:33%;border-radius:50%;overflow:hidden;background:#333}
.label img{width:100%;height:100%;display:block}
.label::after{content:"";position:absolute;left:50%;top:50%;width:12%;height:12%;transform:translate(-50%,-50%);border-radius:50%;background:#0c0c0c}
.sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,255,255,.10) 12%,transparent 18% 50%,rgba(255,255,255,.07) 62%,transparent 68%)}
.stage[data-state="idle"] .sleeve,.stage[data-state="idle"] .vinyl-pos{opacity:0;transform:translateX(30px) scale(.9)}
.stage[data-state="in"] .sleeve,.stage[data-state="in"] .vinyl-pos{opacity:1;transform:none}
.stage[data-state="out"] .sleeve{opacity:1;transform:none}
.stage[data-state="out"] .vinyl-pos{opacity:1;transform:translateX(62%)}
.stage[data-state="float"] .sleeve{opacity:1;transform:translateX(-3%) rotate(-3deg) scale(.95)}
.stage[data-state="float"] .vinyl-pos{opacity:1;transform:translate(118%,-5%) scale(1.05);transition-duration:.7s}
.stage[data-state="float"] .vinyl-bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3%)}}
.info{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.stage[data-state="float"] .info{opacity:1;transform:none}
.kind{display:inline-block;font-family:var(--f-pixel);font-size:14px;background:var(--sticker);color:var(--sticker-ink);padding:2px 10px 3px;border-radius:999px;margin:0 0 10px}
.info h2{font-family:var(--f-pixel);font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.08;margin:0 0 6px}
.album{margin:0 0 12px;color:var(--muted);font-size:14px}
.album em{font-style:normal;color:var(--ink)}
.short{margin:0 0 18px;max-width:44ch}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:2px solid var(--ink);background:var(--card);padding:9px 16px;font-weight:600;cursor:pointer;border-radius:4px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{box-shadow:none;border-color:var(--line)}
.btn.ghost:hover{transform:none;box-shadow:none;border-color:var(--ink)}

/* ---------- liner notes ---------- */
dialog{border:0;padding:0;background:var(--card);color:var(--ink);width:min(720px,calc(100% - 24px));max-height:calc(100% - 48px);border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(10,6,3,.7)}
.notes{padding:clamp(20px,4vw,36px);position:relative}
.close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;background:transparent;font-size:26px;cursor:pointer;border-radius:4px}
.notes-head{display:grid;grid-template-columns:clamp(96px,22vw,160px) 1fr;gap:20px;align-items:end;margin-bottom:22px;padding-right:32px}
.notes-head img{width:100%;display:block;box-shadow:0 10px 20px -10px var(--shadow)}
.notes h2{font-family:var(--f-pixel);font-weight:600;font-size:clamp(24px,4vw,34px);line-height:1.1;margin:0 0 6px}
.notes p{max-width:62ch}
.notes h4{font-family:var(--f-pixel);font-weight:600;font-size:18px;margin:26px 0 8px}
.tracks{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--line)}
.tracks li{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:9px 0;border-bottom:1.5px solid var(--line)}
.tracks span{font-family:var(--f-pixel);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips span{border:1.5px solid var(--line);padding:2px 10px;border-radius:999px;font-size:14px}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.links a{color:var(--ink);font-weight:600}


@media (min-width:821px){
  .scrim{top:auto;height:48vh;background:linear-gradient(0deg,rgba(28,12,5,.9) 0,rgba(28,12,5,.6) 50%,transparent)}
  .stage{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);transform:none;width:min(900px,74vw);display:grid;grid-template-columns:min(320px,26vw) 1fr;gap:28px;align-items:end}
  .info h2{font-size:clamp(24px,2.6vw,32px)}
  .short{margin-bottom:14px}
  .info h2,.album em{color:var(--hud)}
  .album,.short{color:var(--hud-muted)}
  .notes .album{color:var(--muted)}
  .notes .album em{color:var(--ink)}
}
/* ---------- phones: record opens as a bottom sheet ---------- */
@media (max-width:820px){
  .scrim{background:color-mix(in srgb,var(--card) 55%,transparent)}
  .stage{left:0;right:0;top:auto;bottom:0;width:auto;transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
    background:var(--card);padding:6px 20px calc(env(safe-area-inset-bottom,0px) + 22px);border-radius:16px 16px 0 0;box-shadow:0 -20px 40px -20px var(--shadow)}
  body.picked .stage{transform:none}
  .deck{width:min(100%,360px)}
  .foot{display:none}
  .hud{max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}