/* Simon's Record Room
   Layout: a wide stage (Simon's own listening-room photo) with the now-playing story on the left and a
   top-down turntable on the right; below it, the shelf of 30 sleeves. A slim deck docks to the top of the
   window once the turntable scrolls away, so a record always has somewhere to land.
   One look, deliberately dark: the warm brown of Simon's listening bar, lit by an amber VU lamp. */

@font-face{font-family:'Libre Caslon Display';src:url(fonts/caslon-display.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url(fonts/archivo-var.woff2) format('woff2');font-weight:300 700;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Caveat';src:url(fonts/caveat-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --night:#191411;     /* the room: Simon's original listening-bar brown */
  --felt:#221a15;      /* raised surfaces */
  --felt-2:#2d231c;    /* hover, inputs */
  --rule:#4a3a2c;      /* hairlines */
  --paper:#eddfc4;     /* primary text */
  --dust:#b9a991;      /* secondary text */
  --lamp:#e6aa5c;      /* the one accent: VU-lamp amber, for what is playing */
  --lamp-ink:#1d1206;  /* text on amber */
  --label:#74352c;     /* record-label red from Simon's original Pick a record button */

  --display:'Libre Caslon Display','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --ui:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;

  --ease-out:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--paper);font:400 16px/1.5 var(--ui);overflow-x:clip;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{max-width:100%}
svg{fill:currentColor}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{max-width:1360px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;font:600 15px/1 var(--ui);letter-spacing:.01em}
.mini-record{width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle,var(--night) 0 1.6px,var(--lamp) 2.2px 6.5px,#141312 7px 9px,#2c2926 9.5px 10px,#141312 10.5px 13px,#2c2926 13.5px 14px,#141312 14.5px)}
.masthead-nav{display:flex;gap:28px;font-size:15px}
.masthead-nav a,.masthead-nav button{background:none;border:0;padding:6px 0;text-decoration:none;color:var(--dust)}
.masthead-nav a:hover,.masthead-nav button:hover{color:var(--paper)}

/* ---------- stage ---------- */
.stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px);border:1px solid var(--rule);overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;z-index:-2;background:url(images/listening-bar.jpg) 30% 50%/cover no-repeat;filter:saturate(.75)}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(17 12 9 / .9) 0%,rgb(17 12 9 / .7) 40%,rgb(17 12 9 / .88) 62%,rgb(17 12 9 / .94) 100%),
             radial-gradient(70% 80% at 72% 55%,rgb(230 170 92 / .1),transparent 70%)}

.now{display:flex;flex-direction:column;gap:28px;min-width:0;align-self:stretch;justify-content:center}
.now-cued h1{font:400 clamp(46px,5.4vw,86px)/.94 var(--display);letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.lede{font-size:18px;line-height:1.55;color:var(--dust);max-width:34ch;margin:0 0 28px}
.when-touch{display:none}
@media (hover:none){.when-hover{display:none}.when-touch{display:inline}}

.cue-play{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px 0 18px;border-radius:999px;border:0;
  background:var(--lamp);color:var(--lamp-ink);font-weight:600;font-size:16px;max-width:100%;transition:transform .15s,background .2s}
.cue-play svg{width:18px;height:18px;flex:none}
.cue-play span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cue-play em{font-style:normal}
.cue-play:hover{background:#efbb73}
.cue-play:active,.icon-btn:active,.text-btn:active,.chip:active{transform:translateY(1px) scale(.98)}

/* now playing */
.now-playing{display:flex;flex-direction:column;min-width:0;animation:fadeIn .45s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.np-artist{margin:0 0 6px;font:500 18px/1.3 var(--ui);color:var(--dust)}
.np-title{margin:0 0 14px;font:400 clamp(34px,3.6vw,56px)/1 var(--display);letter-spacing:-.015em;text-wrap:balance}
.np-facts{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 26px;padding:0;font-size:14px;color:var(--dust)}
.np-facts strong{font-weight:500;color:var(--paper)}

.np-track{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--rule)}
.np-track-no{display:block;font-size:13px;color:var(--dust);font-variant-numeric:tabular-nums}
.np-track-name{display:block;font:600 21px/1.25 var(--ui);margin:2px 0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-time{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--dust);font-variant-numeric:tabular-nums}
.np-bar{position:relative;flex:1;height:3px;background:var(--rule);border-radius:3px;overflow:hidden}
.np-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:var(--lamp)}
.vu{width:132px;height:76px;display:block;border-radius:4px}

.np-controls{display:flex;align-items:center;gap:10px;margin:4px 0 20px}
.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--rule);background:transparent;transition:background .2s,border-color .2s}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--felt-2);border-color:#6a5440}
.icon-btn--main{width:56px;height:56px;border:0;background:var(--lamp);color:var(--lamp-ink)}
.icon-btn--main:hover{background:#efbb73;border:0}
.icon-btn--main svg{width:22px;height:22px}
.ic-pause{display:none}
.is-playing .ic-play{display:none}
.is-playing .ic-pause{display:block}
.text-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;margin-left:6px;border-radius:999px;border:1px solid var(--rule);background:none;font-size:14px;color:var(--dust)}
.text-btn svg{width:16px;height:16px}
.text-btn:hover{color:var(--paper);background:var(--felt-2)}

.np-list{list-style:none;margin:0 0 18px;padding:0;max-height:212px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
  -webkit-mask:linear-gradient(#000 85%,transparent);mask:linear-gradient(#000 85%,transparent);padding-bottom:18px}
.np-list button{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:baseline;width:100%;padding:7px 8px 7px 0;
  background:none;border:0;text-align:left;font-size:15px;color:var(--dust);border-radius:4px}
.np-list button:hover{color:var(--paper)}
.np-list .n,.np-list .len{font-size:13px;font-variant-numeric:tabular-nums}
.np-list .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-list [aria-current="true"]{color:var(--lamp)}
.np-full{margin:0;font-size:13px;color:var(--dust);line-height:1.6}
.np-full a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule);white-space:nowrap}
.np-full a:hover{border-color:var(--lamp)}
.np-full svg{width:11px;height:11px;margin-left:2px;vertical-align:-1px}

/* Simon's Pick a record button, kept from the original site */
.pick-area{display:flex;align-items:center;gap:18px}
.pick{width:104px;height:104px;flex:none;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:repeating-radial-gradient(circle,#161918 0 2.5px,#2b302d 3.2px,#161918 4px);
  box-shadow:0 10px 24px rgb(0 0 0 / .55),inset 0 0 0 1px rgb(255 255 255 / .05);transition:transform .6s var(--ease-out)}
.pick:hover{transform:rotate(-28deg)}
.pick:active{transform:rotate(-28deg) scale(.97)}
.pick-label{width:66px;height:66px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:var(--label) url(images/seigaiha.svg) repeat;color:#f9e8c9;font:600 21px/.8 var(--hand);transform:rotate(-13deg);position:relative;
  text-shadow:0 1px 2px #32120e;box-shadow:inset 0 0 0 1px rgb(185 120 81 / .25)}
.pick-label::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#111312}
.pick-area p{margin:0;font-size:14px;color:var(--dust);max-width:15ch;line-height:1.4}

/* ---------- vinyl (shared by sleeves, flight, platter, dock) ---------- */
.vinyl{position:absolute;border-radius:50%;
  background:
    radial-gradient(circle closest-side,transparent 95.8%,rgb(255 244 228 / .32) 96.6%,#1c1d1d 97.6%,#060707 99.2%,transparent 100%),
    var(--bands,linear-gradient(transparent,transparent)),
    radial-gradient(circle closest-side,transparent 33.6%,rgb(255 255 255 / .09) 34.2%,transparent 35.2%),
    repeating-radial-gradient(circle closest-side,#222424 0 .42%,#0b0c0c .42% .84%),
    #0e0f0f;
  box-shadow:0 0 0 1px rgb(0 0 0 / .6),0 8px 22px rgb(0 0 0 / .55)}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    conic-gradient(from 210deg,transparent 0 4%,rgb(255 246 232 / .2) 10%,transparent 17% 49%,rgb(255 246 232 / .15) 60%,transparent 67%),
    radial-gradient(60% 45% at 30% 22%,rgb(255 255 255 / .07),transparent 70%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 35%,#000 36%,#000 96%,transparent 97%);
          mask:radial-gradient(circle closest-side,transparent 35%,#000 36%,#000 96%,transparent 97%)}
.vinyl .label{position:absolute;inset:33%;border-radius:50%;overflow:hidden;background:var(--label);box-shadow:0 0 0 1px rgb(0 0 0 / .4)}
.vinyl .label img{display:block;width:100%;height:100%;object-fit:cover}
.vinyl .label::after{content:"";position:absolute;left:50%;top:50%;width:8%;height:8%;transform:translate(-50%,-50%);border-radius:50%;
  background:#0c0d0d;box-shadow:0 0 0 1px rgb(255 255 255 / .18)}
.vinyl.is-empty{opacity:0}

/* ---------- turntable ---------- */
.deck{min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px;--tt-w:max(min(100%,440px),min(100%,calc((100dvh - 236px) * 1.28)))}
.turntable{position:relative;z-index:1;width:var(--tt-w);aspect-ratio:128/100;container-type:inline-size;
  filter:drop-shadow(0 3cqw 3.6cqw rgb(0 0 0 / .6))}
.plinth{position:absolute;inset:0;border-radius:2.4cqw;
  background:
    linear-gradient(180deg,rgb(255 236 210 / .18),transparent 7%,transparent 90%,rgb(0 0 0 / .38)),
    linear-gradient(90deg,rgb(0 0 0 / .3),transparent 7%,transparent 93%,rgb(0 0 0 / .34)),
    repeating-linear-gradient(90.6deg,rgb(255 214 170 / .055) 0 .18cqw,transparent .18cqw .7cqw,rgb(0 0 0 / .08) .7cqw .95cqw,transparent .95cqw 1.6cqw),
    repeating-linear-gradient(89.3deg,transparent 0 2.6cqw,rgb(255 210 160 / .05) 2.6cqw 3.2cqw,transparent 3.2cqw 5.4cqw),
    linear-gradient(180deg,#784b2c,#57341e 55%,#3f2514);
  box-shadow:inset 0 .2cqw .15cqw rgb(255 240 220 / .28),inset 0 -.4cqw .5cqw rgb(0 0 0 / .55),0 0 0 .1cqw rgb(0 0 0 / .6)}
.topplate{position:absolute;inset:1.5cqw;border-radius:1.3cqw;
  background:
    radial-gradient(90% 70% at 22% 12%,rgb(255 246 232 / .07),transparent 60%),
    repeating-linear-gradient(0deg,rgb(255 255 255 / .022) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#2f2c29,#1c1a18 55%,#252220);
  box-shadow:0 0 0 .14cqw #8d6b44,0 0 0 .26cqw rgb(0 0 0 / .45),inset 0 .4cqw 1cqw rgb(0 0 0 / .6)}
.hinge{position:absolute;top:-.7%;width:7%;height:3.4%;border-radius:.4cqw;background:linear-gradient(180deg,#45413b,#1c1a18);
  box-shadow:inset 0 .1cqw 0 rgb(255 255 255 / .16),0 .25cqw .4cqw rgb(0 0 0 / .5)}
.hinge-l{left:22%}.hinge-r{right:22%}

.platter{position:absolute;left:7.8125%;top:8%;width:65.625%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 20deg,#eceeea,#8b908b 12%,#d8dbd6 25%,#7b807b 38%,#e4e6e2 50%,#899089 62%,#d6d9d4 75%,#828782 88%,#eceeea);
  box-shadow:0 0 0 .22cqw #0c0b0a,0 .7cqw 1.8cqw rgb(0 0 0 / .65),inset 0 0 0 .14cqw rgb(255 255 255 / .45),inset 0 0 0 .5cqw rgb(0 0 0 / .12)}
.platter::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(#2b2f2d 0 .9deg,transparent .9deg 2.4deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 96.4%,#000 96.9%,#000 99%,transparent 99.5%);
          mask:radial-gradient(circle closest-side,transparent 96.4%,#000 96.9%,#000 99%,transparent 99.5%)}
.mat{position:absolute;inset:2.6%;border-radius:50%;
  background:repeating-radial-gradient(circle closest-side,#1e1c1b 0 1.4%,#151413 1.4% 2.8%);box-shadow:inset 0 0 1.4cqw rgb(0 0 0 / .8)}
.platter .vinyl{inset:1.2%;will-change:transform;box-shadow:0 .3cqw .8cqw rgb(0 0 0 / .55)}
.platter .vinyl::before{display:none}
.platter-sheen{position:absolute;inset:1.2%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from 205deg,transparent 0 5%,rgb(255 255 255 / .12) 10.5%,transparent 16% 50%,rgb(255 255 255 / .08) 60.5%,transparent 66%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 34.4%,#000 35.4%,#000 96%,transparent 96.6%);
          mask:radial-gradient(circle closest-side,transparent 34.4%,#000 35.4%,#000 96%,transparent 96.6%)}
.platter.has-record .platter-sheen{opacity:1}
.spindle{position:absolute;left:50%;top:50%;width:1.9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#a3a7a2 55%,#4d514f);box-shadow:0 0 0 .1cqw rgb(0 0 0 / .5)}

.arm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.arm{transform-box:view-box;transform-origin:108px 18px;transform:rotate(-2deg)}
.arm-svg{touch-action:none}
.arm-hit{fill:transparent;stroke:transparent;stroke-width:7;pointer-events:all;cursor:grab}
body.dragging-arm,body.dragging-arm *{cursor:grabbing!important;user-select:none}
.arm-shadow{transform:translate(1.4px,2.2px);transition:transform .45s var(--ease-out),opacity .45s}
.turntable.needle-up .arm-shadow{transform:translate(3.8px,5.6px);opacity:.3}
.cue-handle{transition:transform .3s var(--ease-out)}
.turntable.cue-up .cue-handle{transform:translateY(-6.4px)}
.engrave{font:600 2.1px var(--ui);font-stretch:125%;letter-spacing:.35px;fill:rgb(237 223 196 / .42)}
.tt-cue{position:absolute;left:89.6%;top:33.6%;width:6.4%;height:22%;padding:0;border:0;border-radius:1cqw;background:transparent;cursor:pointer}
.tt-cue:hover{background:rgb(255 255 255 / .04)}
.dust{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;pointer-events:none}
.deck-note{width:var(--tt-w);margin:0;padding-right:24%;min-height:1.45em;font-size:14px;line-height:1.45;color:var(--dust)}

/* the cleaning cloth, tucked under the plinth's corner */
.cloth{position:absolute;z-index:-1;left:90%;top:87%;width:17cqw;aspect-ratio:1;padding:0;border:0;border-radius:.5cqw;cursor:grab;touch-action:none;
  --dx:0px;--dy:0px;--rot:-11deg;--sc:1;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--sc));
  transition:transform .55s var(--ease-out),box-shadow .3s;
  background:
    radial-gradient(130% 100% at 78% 88%,rgb(255 232 205 / .16),transparent 55%),
    repeating-linear-gradient(135deg,rgb(0 0 0 / .08) 0 1px,transparent 1px 3px),
    linear-gradient(155deg,#5a2119,#7a3024 50%,#93402f);
  box-shadow:0 1.2cqw 2.6cqw rgb(0 0 0 / .55),inset 0 0 0 .15cqw rgb(0 0 0 / .25)}
.cloth::before{content:"";position:absolute;inset:8%;border:.2cqw dashed rgb(230 170 92 / .75);border-radius:.3cqw;pointer-events:none}
.cloth::after{content:"";position:absolute;left:-1%;right:-1%;top:44%;height:22%;pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0 / .3),transparent 45%,rgb(255 255 255 / .08) 65%,transparent)}
.cloth-mono{position:absolute;right:15%;bottom:13%;font:400 4.4cqw/1 var(--display);color:rgb(230 170 92 / .95);pointer-events:none}
.cloth:hover{--sc:1.05;--rot:-15deg}
.cloth.is-active{z-index:6;cursor:grabbing;box-shadow:0 3cqw 4cqw rgb(0 0 0 / .55),inset 0 0 0 .15cqw rgb(0 0 0 / .25)}

.pilot{position:absolute;left:4.6%;top:6.4%;width:1.9%;aspect-ratio:1;border-radius:50%;background:#3a2c18;
  box-shadow:inset 0 0 0 .12cqw rgb(0 0 0 / .5);transition:background .3s,box-shadow .3s}
.pilot.on{background:#ffd08a;box-shadow:0 0 1.2cqw .3cqw rgb(240 166 64 / .65),inset 0 0 .3cqw #fff3}

.tt-start,.tt-speed button{position:absolute;border:0;color:#2a2c2b;
  background:repeating-linear-gradient(90deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 3px),linear-gradient(180deg,#f1f2ef,#c9ccc7 55%,#b2b6b0);
  box-shadow:0 .3cqw .5cqw rgb(0 0 0 / .6),0 0 0 .12cqw #4b4f4c,inset 0 .12cqw 0 #fff,inset 0 -.15cqw .2cqw rgb(0 0 0 / .18);
  font:600 1.15cqw/1.15 var(--ui);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;transition:transform .08s,box-shadow .08s}
.tt-start{left:2.8%;top:86%;width:13.4%;height:9.4%;border-radius:.6cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw}
.tt-led{position:absolute;left:12%;right:12%;top:-1.15cqw;height:.38cqw;border-radius:1cqw;background:#3a2c18;transition:background .3s,box-shadow .3s}
.tt-start[aria-pressed="true"] .tt-led{background:#ffd08a;box-shadow:0 0 .9cqw rgb(240 166 64 / .85)}
.tt-start:active,.tt-speed button:active{transform:translateY(.15cqw);box-shadow:0 .1cqw .2cqw rgb(0 0 0 / .55)}
.tt-speed{position:absolute;inset:0;pointer-events:none}
.tt-speed button{pointer-events:auto;top:88.4%;width:5.2%;aspect-ratio:1;border-radius:50%;letter-spacing:.02em;font-size:1.35cqw}
.tt-speed button[data-speed="33"]{left:18%}
.tt-speed button[data-speed="45"]{left:24.4%}
.tt-speed button::before{content:"";position:absolute;left:50%;top:-1.2cqw;width:.8cqw;height:.8cqw;margin-left:-.4cqw;border-radius:50%;background:#3a2c18}
.tt-speed button[aria-pressed="true"]::before{background:#ffd08a;box-shadow:0 0 .8cqw rgb(240 166 64 / .8)}
.tt-brand{position:absolute;right:3.4%;bottom:2.6%;font:600 1.05cqw/1 var(--ui);font-stretch:125%;letter-spacing:.3em;text-transform:uppercase;color:rgb(236 227 208 / .32)}

/* ---------- shelf ---------- */
.shelf{padding:clamp(48px,7vw,88px) 0 0}
.shelf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:40px}
.shelf-title{display:flex;align-items:baseline;gap:18px}
.shelf-title h2{margin:0;font:400 clamp(40px,4.4vw,64px)/1 var(--display);letter-spacing:-.02em}
.shelf-title p{margin:0;color:var(--dust);font-size:15px}
.shelf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;min-width:0}
.genres{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--rule);background:none;font-size:14px;color:var(--dust);transition:background .2s,color .2s,border-color .2s}
.chip:hover{color:var(--paper);border-color:#6a5440}
.chip[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--night)}
.sort{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dust)}
.sort select{height:36px;border-radius:999px;border:1px solid var(--rule);background:var(--night);padding:0 30px 0 14px;font-size:14px;color:var(--paper);
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dust) 50%),linear-gradient(135deg,var(--dust) 50%,transparent 50%);
  background-position:calc(100% - 17px) 15px,calc(100% - 12px) 15px;background-size:5px 5px;background-repeat:no-repeat}

.crate{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:56px 44px}
.record{position:relative;display:flex;flex-direction:column;gap:3px;padding:0;background:none;border:0;text-align:left;min-width:0;cursor:pointer}
.record:hover,.record.peek,.record:focus-visible{z-index:3}
.record:focus-visible{outline:none}
.record:focus-visible .sleeve{outline:2px solid var(--lamp);outline-offset:4px}
.sleeve-wrap{position:relative;display:block;aspect-ratio:1;margin-bottom:14px}
.sleeve-wrap .vinyl{top:2.5%;left:2.5%;width:95%;height:95%;transition:transform .55s var(--ease-out),opacity .3s}
.sleeve{position:relative;display:block;width:100%;height:100%;object-fit:cover;background:var(--felt);
  box-shadow:0 1px 0 rgb(255 255 255 / .06) inset,0 10px 24px rgb(0 0 0 / .45);transition:transform .55s var(--ease-out)}
.record.peek .vinyl{transform:translateX(54%) rotate(70deg)}
.record.peek .sleeve{transform:translateX(-7%) rotate(-1.6deg)}
.record.is-out .vinyl{opacity:0;transition:none;transform:none}
.record.is-out .sleeve{transform:none}
.sleeve-wrap::after{content:"";position:absolute;inset:7%;border-radius:50%;pointer-events:none;opacity:var(--wear,0);mix-blend-mode:soft-light;
  background:radial-gradient(circle closest-side,transparent 84%,rgb(255 250 240 / .95) 92%,transparent 99%),radial-gradient(circle closest-side,rgb(255 250 240 / .35) 0 16%,transparent 28%);
  transition:transform .55s var(--ease-out)}
.record.peek .sleeve-wrap::after{transform:translateX(-7%) rotate(-1.6deg)}
.record:not(.peek):not(.is-out):hover .sleeve{transform:translateY(-3px)}
.rec-artist{font:600 15px/1.3 var(--ui)}
.rec-title{font:400 20px/1.2 var(--display);color:var(--paper);text-wrap:balance}
.rec-meta{display:flex;gap:12px;margin-top:4px;font-size:13px;color:var(--dust)}
.rec-on{display:none;margin-top:4px;font-size:13px;font-weight:600;color:var(--lamp)}
.record.is-current .rec-meta{display:none}
.record.is-current .rec-on{display:block}
.record.is-current .sleeve{box-shadow:0 0 0 1px rgb(240 166 64 / .5),0 10px 24px rgb(0 0 0 / .45)}
.crate-empty{grid-column:1/-1;color:var(--dust)}

/* ---------- flight ---------- */
.flight-layer{position:fixed;inset:0;z-index:50;pointer-events:none}
.flight-layer .vinyl{position:fixed;box-shadow:0 24px 48px rgb(0 0 0 / .55)}

/* ---------- dock ---------- */
.dock{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:rgb(25 20 17 / .9);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule);transform:translateY(-105%);transition:transform .4s var(--ease-out)}
.dock.show{transform:none}
.dock-inner{position:relative;max-width:1320px;margin:0 auto;height:72px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.dock-disc{position:relative;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:repeating-radial-gradient(circle,#1d1b1a 0 2px,#151312 2px 4px)}
.dock-disc .vinyl{inset:0}
.dock-meta{min-width:0;display:flex;flex-direction:column}
.dock-meta strong{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-meta span{font-size:13px;color:var(--dust);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-controls{display:flex;align-items:center;gap:8px}
.dock .icon-btn{width:40px;height:40px}
.dock .icon-btn--main{width:46px;height:46px}
.dock-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.dock-progress i{position:absolute;inset:0;background:var(--lamp);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- toast, dialog, footer ---------- */
.sound-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45;transform:translateX(-50%);animation:fadeIn .4s var(--ease-out)}
.sound-toast button{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;border:0;background:var(--lamp);color:var(--lamp-ink);
  font-weight:600;font-size:15px;box-shadow:0 12px 30px rgb(0 0 0 / .5);white-space:nowrap}
.sound-toast svg{width:20px;height:20px}

.about{max-width:min(560px,calc(100vw - 32px));padding:44px 40px 36px;border:1px solid var(--rule);background:var(--felt);color:var(--paper);box-shadow:0 30px 80px rgb(0 0 0 / .6)}
.about::backdrop{background:rgb(12 9 7 / .72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.about h2{font:400 40px/1.02 var(--display);margin:0 0 18px;letter-spacing:-.015em;text-wrap:balance}
.about p{margin:0 0 14px;line-height:1.65;color:var(--paper);max-width:58ch}
.about .about-small{font-size:13px;color:var(--dust);border-top:1px solid var(--rule);padding-top:16px;margin-top:22px}
.about-close{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:0;background:none;color:var(--dust)}
.about-close svg{width:20px;height:20px}
.about-close:hover{color:var(--paper);background:var(--felt-2)}

.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:96px;padding:28px 0 36px;border-top:1px solid var(--rule);font-size:13px;color:var(--dust)}
.footer a{text-decoration:none;color:var(--paper)}
.footer a:hover{color:var(--lamp)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .crate{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 34px}
}
@media (max-width:980px){
  .stage{grid-template-columns:1fr;padding:28px 24px 32px}
  .deck{order:-1}
  .deck{--tt-w:min(100%,640px)}
  .now-cued h1{font-size:clamp(44px,9vw,68px)}
  .crate{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .masthead{height:64px}
  .masthead-nav{gap:18px;font-size:14px}
  .masthead-nav a{display:none}
  .stage{padding:20px 16px 26px;margin:0 -16px;border-left:0;border-right:0}
  .now{gap:22px}
  .lede{font-size:16px;margin-bottom:22px}
  .np-track{grid-template-columns:minmax(0,1fr)}
  .vu{display:none}
  .text-btn{padding:0 12px}
  .np-list{max-height:180px}
  .cloth{left:86%;top:86%}
  .deck-note{padding-right:22%;font-size:13px}
  .shelf-head{margin-bottom:28px}
  .shelf-tools{width:100%}
  .genres{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;width:calc(100% + 32px)}
  .genres::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .crate{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px}
  .rec-title{font-size:18px}
  .dock-inner{height:64px;gap:12px}
  .dock-disc{width:46px;height:46px}
  .dock .icon-btn[data-action="prev"]{display:none}
  .about{padding:40px 22px 28px}
  .about h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sleeve-wrap .vinyl,.sleeve,.pick,.dock{transition:none}
  .record.peek .vinyl{transform:translateX(20%)}
  .pick:hover{transform:none}
  .now-playing,.sound-toast{animation:none}
}