/* Spin · a turntable in a listening room.
   Law: the deck is the interface. The record really turns (33⅓ rpm = 1.8 s a revolution), the light on
   the grooves stays still like a real lamp, and the tonearm IS the progress bar: it drops onto the lead-in
   and creeps toward the label as the mix plays. Each crate has one label ink; everything else is walnut,
   brass, cream and dark. */
:root{
  --bg:#120d0a; --ink:#f2e6d3; --ink-2:rgba(242,230,211,.72); --ink-3:rgba(242,230,211,.46);
  --brass:#c9a15b; --brass-2:#f0d59a; --line:rgba(242,230,211,.12);
  --label:#d0583a;
  --display:'Big Shoulders Display',sans-serif; --serif:'Fraunces',serif; --sans:'Figtree',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --W:min(92vw,560px,calc(42svh / .9));   /* phone: the deck sticks at the top, so it never takes more than ~42% of the screen */
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:clip;background:var(--bg)}
body{min-height:100svh;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px;border-radius:8px}
.k{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}

/* the room: blurred shelves and a lamp, then a vignette, then paper grain */
.room{position:fixed;inset:0;z-index:0;background:url(img/room.webp) center/cover no-repeat;opacity:.55}
.room::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 35%,transparent,rgba(12,8,6,.78) 70%,#0c0806),linear-gradient(180deg,rgba(18,13,10,.2),rgba(18,13,10,.85))}
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1080px;margin:0 auto;padding:max(env(safe-area-inset-top),16px) 20px 8px}
.mark{display:inline-flex;align-items:center;gap:10px;font:900 26px/1 var(--display);letter-spacing:.06em;text-decoration:none}
.mark-disc{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,var(--label) 0 26%,#0c0c0c 27% 100%);box-shadow:0 0 0 1px rgba(255,255,255,.12);animation:spin 1.8s linear infinite;animation-play-state:paused}
body.playing .mark-disc{animation-play-state:running}
.clock{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lab:hover{color:var(--ink)}

.stage{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:10px 20px 40px;display:flex;flex-direction:column;align-items:center;gap:26px}

/* ---------------- the deck ---------------- */
.deck{width:var(--W)}
/* The player stays: sticky deck on phone and desktop. On a phone the list scrolls up under it,
   through a fade (no backdrop-filter: Safari pins fixed/sticky children with it). */
.deck{position:sticky;top:max(env(safe-area-inset-top),8px);z-index:3}
.deck::before{content:"";position:absolute;z-index:-1;left:calc((var(--W) - 100vw) / 2);right:calc((var(--W) - 100vw) / 2);top:calc(-1 * max(env(safe-area-inset-top),8px));bottom:-26px;
  background:linear-gradient(180deg,#0c0806 0,rgba(12,8,6,.96) 78%,rgba(12,8,6,0));pointer-events:none}
.plinth{position:relative;width:var(--W);aspect-ratio:1/.9;border-radius:26px;background:#2a1a12;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 40px 80px -30px rgba(0,0,0,.85),0 12px 24px -12px rgba(0,0,0,.6);overflow:hidden}
.plinth::before{content:"";position:absolute;inset:10px;border-radius:18px;border:1px solid rgba(240,213,154,.28);pointer-events:none;z-index:6}
.wood{position:absolute;inset:0;z-index:1;background:#3a2419 url(img/walnut.webp) center/cover}   /* opaque: the YouTube player sits UNDER this */
.plinth-top{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 20% 0%,rgba(255,220,170,.16),transparent 55%),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28))}
/* the hidden YouTube player lives under the walnut (opaque = never throttled, never seen) */
.yt{position:absolute;left:12px;bottom:12px;width:120px;height:120px;z-index:0;overflow:hidden}

.platter{position:absolute;z-index:2;left:4.5%;top:5.5%;width:79%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#2a2a2a 0 70%,#1a1a1a 71% 100%);box-shadow:0 18px 40px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06),0 0 0 6px #1d1d1d,0 0 0 7px rgba(255,255,255,.08)}
.mat{position:absolute;inset:1.2%;border-radius:50%;background:repeating-radial-gradient(circle,#161616 0 3px,#1c1c1c 3px 6px)}
.record,.strobe{position:absolute;border-radius:50%;will-change:transform}
.record{inset:2.6%;background:#0d0d0d;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.grooves{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 33%,rgba(255,255,255,.05) 33.2% 33.6%,transparent 34%),
    radial-gradient(circle,transparent 0 60%,rgba(0,0,0,.6) 60.4% 61%,transparent 61.6%),
    radial-gradient(circle,transparent 0 78%,rgba(0,0,0,.6) 78.4% 79%,transparent 79.6%),
    repeating-radial-gradient(circle,#0b0b0b 0 1.2px,#151515 1.2px 2.1px,#0e0e0e 2.1px 2.8px);
  box-shadow:inset 0 0 0 2px #1b1b1b,inset 0 0 0 4px #0b0b0b}
.label{position:absolute;left:50%;top:50%;width:35%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in oklab,var(--label) 80%,#fff 20%),var(--label) 60%,color-mix(in oklab,var(--label) 80%,#000 20%));
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16%;color:#fbf2e4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transition:background .6s var(--ease)}
.label svg{position:absolute;inset:0;width:100%;height:100%}
.label .ring{font:600 9.6px var(--mono);letter-spacing:.08em;fill:rgba(251,242,228,.72)}
.lab-crate{font:600 calc(var(--W)*.017)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.lab-title{font:800 calc(var(--W)*.034)/.95 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:5px 0 4px;max-height:2.9em;overflow:hidden}
.lab-ch{font:500 calc(var(--W)*.016)/1.1 var(--sans);opacity:.8;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spindle{position:absolute;left:50%;top:50%;width:3.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#a9a39a 55%,#4b4742);box-shadow:0 1px 2px rgba(0,0,0,.6)}
/* the lamp's reflection: two soft wedges of light that do NOT turn with the record */
.sheen{position:absolute;inset:2.6%;border-radius:50%;pointer-events:none;z-index:3;
  background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,236,210,.10) 11%,rgba(255,236,210,.02) 17%,transparent 22% 54%,rgba(255,236,210,.08) 60%,rgba(255,236,210,.015) 66%,transparent 71% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 18%,#000 18.5%);mask:radial-gradient(circle,transparent 0 18%,#000 18.5%)}
.strobe{inset:-1.2%;background:repeating-conic-gradient(from 0deg,rgba(240,213,154,.55) 0 .6deg,transparent .6deg 3.6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 98.4%,#000 98.6% 99.6%,transparent 99.8%);mask:radial-gradient(circle,transparent 0 98.4%,#000 98.6% 99.6%,transparent 99.8%);opacity:.8}

/* the tonearm: pivot top-right; rotation is set by JS (rest → lead-in → run-out) */
.arm{position:absolute;z-index:4;width:22%;right:4%;top:2%;overflow:visible;transform-origin:50% 14.44%;transform:rotate(var(--arm,-6deg));transition:transform 1.1s var(--ease);filter:drop-shadow(-10px 16px 10px rgba(0,0,0,.55))}
body.scrubbing .arm,body.tracking .arm{transition:transform .5s linear}

.controls{position:absolute;z-index:5;right:5%;bottom:6%;display:flex;align-items:center;gap:10px}
.startstop{width:86px;height:44px;border-radius:10px;background:linear-gradient(180deg,#f3dca6,#c9a15b 55%,#9b7738);color:#2a1d10;font:800 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 8px 16px -6px rgba(0,0,0,.7);transition:transform .12s}
.startstop:active{transform:translateY(1px) scale(.98)}
.knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3a2e,#1d1611);color:var(--brass-2);font-size:13px;box-shadow:0 0 0 1px rgba(240,213,154,.25),0 6px 12px -4px rgba(0,0,0,.7)}
.speed{position:absolute;z-index:5;left:5.5%;bottom:5%;display:flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.1em;color:rgba(240,213,154,.65)}
.speed i{width:7px;height:7px;border-radius:50%;background:#3a2b20;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.speed i.on{background:#ff7a3c;box-shadow:0 0 8px #ff7a3c}
body.playing .speed i.on{animation:led 2.4s ease-in-out infinite}
@keyframes led{50%{opacity:.55}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- now playing + crates ---------------- */
.side{width:var(--W)}
.np-crate{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--label);transition:color .6s}
.np-title{font:400 clamp(32px,7vw,46px)/1.02 var(--serif);letter-spacing:-.02em;margin:10px 0 8px;text-wrap:balance}
.np-sub{color:var(--ink-2);font-size:15px;min-height:1.5em}
.np-time{display:flex;align-items:center;gap:12px;margin-top:16px;font:500 11.5px/1 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.track{flex:1;height:18px;position:relative;cursor:pointer}
.track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line);border-radius:2px}
.track i{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-2));border-radius:2px}
.track i::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--brass-2);box-shadow:0 0 0 4px rgba(240,213,154,.14)}
.np-extra{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.pill{padding:8px 13px;border-radius:99px;border:1px solid var(--line);font-size:13px;color:var(--ink-2);text-decoration:none;background:rgba(18,13,10,.4)}
.pill[aria-pressed="true"]{border-color:rgba(240,213,154,.45);color:var(--brass-2)}
.pill.ghost:hover{color:var(--ink)}

.crates{display:flex;gap:6px;margin-top:28px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.crates::-webkit-scrollbar{display:none}
.crate{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(18,13,10,.45);font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.crate i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.crate small{font:500 10px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em}
.crate.on{background:var(--ink);color:#1a120c;border-color:transparent}
.crate.on small{color:rgba(26,18,12,.55)}
.crate-line{color:var(--ink-3);font-size:14px;margin:12px 2px 10px;font-style:italic;font-family:var(--serif)}

.sleeves{list-style:none;display:grid;gap:4px}
.sleeve{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 8px;border-radius:14px;cursor:pointer;transition:background .3s}
.sleeve:hover,.sleeve.on{background:rgba(242,230,211,.06)}
.cover{position:relative;width:64px;height:64px}
.cover::before{content:"";position:absolute;top:3px;left:8px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 22%,#0c0c0c 23% 100%),#0c0c0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:transform .5s var(--ease)}
.sleeve:hover .cover::before{transform:translateX(12px)}
.sleeve.on .cover::before{transform:translateX(16px);animation:spin 1.8s linear infinite}
.cover img{position:relative;width:64px;height:64px;object-fit:cover;border-radius:4px;box-shadow:0 8px 14px -6px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1)}
.cover::after{content:"";position:absolute;left:0;top:0;width:64px;height:64px;border-radius:4px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 40%,rgba(0,0,0,.25))}
.sl-t{font:500 16px/1.2 var(--sans);color:var(--ink);display:block}
.sl-c{font-size:13px;color:var(--ink-3);display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqs{display:flex;align-items:flex-end;gap:2px;height:16px;opacity:0}
.eqs b{width:3px;height:4px;background:var(--brass-2);border-radius:1px}
.sleeve.on .eqs{opacity:1}
body.playing .sleeve.on .eqs b{animation:eq 1s ease-in-out infinite}
.eqs b:nth-child(2){animation-delay:.2s}.eqs b:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:15px}}
.foot{margin-top:26px;font-size:12.5px;color:var(--ink-3)}

@media (min-width:980px){
  :root{--W:min(46vw,560px)}
  .stage{display:grid;grid-template-columns:minmax(0,560px) minmax(0,440px);justify-content:center;align-items:start;gap:56px;padding-top:26px}
  .deck{top:24px}
  .deck::before{display:none}   /* side by side: nothing scrolls under the deck */
  .side{width:100%;padding-top:10px}
}
@media (max-width:420px){ .startstop{width:74px;height:40px} .knob{width:34px;height:34px} }
@media (prefers-reduced-motion:reduce){ .arm{transition:none} .sleeve.on .cover::before,.mark-disc{animation:none} }