/* A record rack made from local artwork and CSS geometry. */
.vinyl-deck{--vd-paper:var(--paper,#f6f1e6);--vd-ink:var(--ink,#33231c);--vd-yellow:var(--yellow,#ffcb01);--vd-size:clamp(190px,23vw,310px);--vd-step:clamp(148px,23vw,310px);position:relative;color:var(--vd-ink);background:var(--vd-paper);width:100%;isolation:isolate}
.vinyl-deck *{box-sizing:border-box}
.vinyl-deck button,.vinyl-deck a{-webkit-tap-highlight-color:transparent}
.vinyl-deck button{color:inherit;font:inherit}
.vinyl-deck .vd-figure{margin:0;min-height:78svh;padding:22px clamp(18px,4vw,72px) 25px;display:flex;flex-direction:column;align-items:center}
.vd-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid color-mix(in srgb,var(--vd-ink) 22%,transparent);padding-top:17px}
.vd-eyebrow,.vd-edition,.vd-count,.vd-help,.vd-caption,.vd-source,.vd-player-status{font-family:var(--font-sans,'Geist',Arial,sans-serif);font-size:10px;line-height:1.45;letter-spacing:.06em}
.vd-eyebrow{text-transform:uppercase;font-weight:600}
.vd-edition{font-size:9px;letter-spacing:.1em}
.vd-rack{position:relative;width:calc(100% + clamp(36px,8vw,144px));height:clamp(330px,47svh,560px);flex:none;perspective:1200px;perspective-origin:50% 46%;overflow:hidden;touch-action:pan-y;cursor:grab;outline-offset:-5px;--drag:0px;user-select:none;-webkit-user-select:none}
.vd-rack:focus-visible{outline:2px solid var(--vd-ink)}
.vd-rack.is-dragging{cursor:grabbing}
.vd-axis{position:absolute;left:50%;top:12px;width:1px;height:12px;background:var(--vd-ink);opacity:.35}
.vd-album{--position:0;--distance:0;position:absolute;left:50%;top:47%;width:var(--vd-size);height:var(--vd-size);padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;transform:translate(-50%,-50%) translateX(calc(var(--position)*var(--vd-step) + var(--drag))) translateY(calc(var(--distance)*10px)) translateZ(calc(var(--distance)*-112px)) rotateY(calc(var(--position)*-23deg)) rotateZ(calc(var(--position)*1.5deg));transition:transform .85s cubic-bezier(.19,1,.22,1),opacity .6s;opacity:calc(1 - var(--distance)*.1);will-change:transform;outline-offset:7px}
.vd-album:focus-visible{outline:2px solid var(--vd-ink)}
.vd-rack.is-dragging .vd-album{transition:none}
.vd-sleeve{position:absolute;inset:0;z-index:2;display:block;background:#e7dcc5;transform:translateZ(4px);box-shadow:-2px 2px 0 #d1c6af,-4px 4px 0 #e4d9c2,0 25px 35px -23px #28170f80;overflow:hidden;border-radius:1px}
.vd-sleeve img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.85);transition:filter .55s}
.vd-album.is-active .vd-sleeve img{filter:saturate(1)}
.vd-sleeve-edge{position:absolute;inset:0;background:linear-gradient(100deg,#ffffff26 0%,transparent 4%,transparent 48%,#0000000a 100%);border:1px solid #ffffff22;box-shadow:inset 3px 0 6px #00000025;pointer-events:none}
.vd-lp{position:absolute;inset:3%;display:block;z-index:1;border-radius:50%;background:repeating-radial-gradient(circle at center,#12110f 0px,#12110f 2px,#2b2925 2.5px,#12110f 3px,#12110f 4px);box-shadow:inset 0 0 0 3px #171614,inset 0 0 0 5px #393632,2px 5px 8px #0000002b;transform:translateX(15%) translateZ(1px);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.vd-lp::before{content:'';position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 45deg,transparent,#ffffff12 10%,transparent 24%,transparent 46%,#ffffff1a 58%,transparent 71%);pointer-events:none}
.vd-album.is-active .vd-lp{transform:translateX(43%) translateZ(1px)}
.vd-album:not(.is-active):hover .vd-lp{transform:translateX(25%) translateZ(1px)}
.vd-lp-label{position:absolute;inset:34%;border-radius:50%;overflow:hidden;display:block;background:var(--vd-yellow);border:1px solid #776719;animation:vd-record-spin 15s linear infinite;animation-play-state:paused}
.vd-lp-label img{display:block;width:100%;height:100%;object-fit:cover;opacity:.82;filter:saturate(.65)}
.vd-spindle{position:absolute;left:50%;top:50%;width:7%;height:7%;transform:translate(-50%,-50%);border-radius:50%;background:var(--vd-paper);box-shadow:0 0 0 2px #201d17}
.vinyl-deck[data-playback=playing] .vd-album.is-active .vd-lp-label{animation-play-state:running}
.vinyl-deck[data-playback=playing] .vd-album.is-active .vd-lp::before{animation:vd-record-light 15s linear infinite}
.vd-album-number{position:absolute;left:3px;top:calc(100% + 14px);font-family:var(--font-sans,'Geist',Arial,sans-serif);font-size:9px;letter-spacing:.14em;opacity:.7}
.vd-floor{position:absolute;left:13%;right:13%;bottom:9%;height:1px;background:linear-gradient(90deg,transparent,#33231c1a,transparent);pointer-events:none}
.vd-selection{display:flex;align-items:center;justify-content:center;gap:clamp(30px,7vw,100px);width:100%;position:relative;margin:0 auto 16px}
.vd-track{max-width:600px;min-width:230px;text-align:center}
.vd-count{display:block;margin:0 0 7px;font-size:9px;letter-spacing:.16em}
.vinyl-deck .vd-track h2{font-family:var(--font-display,'Bodoni Moda',Georgia,serif);font-weight:400;font-size:clamp(36px,4.3vw,64px);letter-spacing:-.055em;line-height:1.1;margin:0;text-transform:none;color:var(--vd-ink)}
.vinyl-deck .vd-song{font-family:var(--font-sans,'Geist',Arial,sans-serif);font-weight:400;font-size:clamp(13px,1.1vw,16px);margin:9px 0 0;line-height:1.4;letter-spacing:0;color:var(--vd-ink)}
.vd-arrow{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--vd-ink) 38%,transparent);border-radius:50%;background:transparent;font-size:22px!important;cursor:pointer;transition:background .25s,transform .25s}
.vd-arrow:hover{background:var(--vd-yellow);transform:scale(1.06)}
.vd-arrow:active{transform:scale(.96)}
.vd-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin:8px 0 12px}
.vd-listen{min-height:46px;display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 24px;border:1px solid var(--vd-ink);background:var(--vd-ink);color:var(--vd-paper)!important;border-radius:30px;cursor:pointer;font-family:var(--font-sans,'Geist',Arial,sans-serif)!important;font-size:11px!important;letter-spacing:.03em;transition:background .25s,color .25s,transform .25s}
.vd-listen:hover{background:var(--vd-yellow);color:var(--vd-ink)!important;transform:translateY(-2px)}
.vd-listen:disabled{cursor:progress;opacity:.65;transform:none}
.vd-play-icon{display:block;font-size:10px;width:11px;text-align:center}
.vd-youtube-link{font-family:var(--font-sans,'Geist',Arial,sans-serif);font-size:10px;letter-spacing:.02em;color:var(--vd-ink);text-underline-offset:4px;text-decoration-thickness:1px}
.vd-youtube-link span{display:inline-block;margin-left:6px}
.vd-help{font-size:9px;opacity:.65;text-align:center;margin:12px 0 0;letter-spacing:.025em}
.vd-player-panel[hidden]{display:none}
.vd-player-panel{margin:26px auto 14px;width:min(830px,100%);display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:center;padding:20px 0;border-block:1px solid color-mix(in srgb,var(--vd-ink) 20%,transparent)}
.vd-player-copy p{font-family:var(--font-display,'Bodoni Moda',Georgia,serif);font-size:28px;line-height:1.2;letter-spacing:-.035em;max-width:310px;margin:10px 0 15px}
.vd-player-status,.vd-source{display:block;font-size:10px;letter-spacing:0}
.vd-source{margin-top:7px;opacity:.6;font-size:9px}
.vd-player{position:relative;aspect-ratio:16/9;background:#181510;min-width:0;border:1px solid #33231c20}
.vd-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vd-close-player{border:0;background:transparent;padding:0 0 3px;margin-top:15px;border-bottom:1px solid #33231c66;cursor:pointer;font-family:var(--font-sans,'Geist',Arial,sans-serif)!important;font-size:9px!important}
.vd-close-player span{font-size:14px;display:inline-block;margin-left:10px}
.vd-caption{margin:28px auto 0;max-width:560px;text-align:center;font-size:9px;line-height:1.6;letter-spacing:0;opacity:.58}
.vinyl-deck button:focus-visible,.vinyl-deck a:focus-visible{outline:2px solid var(--vd-ink);outline-offset:5px}
@keyframes vd-record-spin{to{transform:rotate(360deg)}}
@keyframes vd-record-light{to{transform:rotate(360deg)}}
@media(min-width:1600px){.vinyl-deck{--vd-size:340px;--vd-step:345px}.vd-rack{height:540px}}
@media(max-width:700px){.vinyl-deck{--vd-size:clamp(190px,52vw,270px);--vd-step:clamp(140px,42vw,200px)}.vinyl-deck .vd-figure{min-height:75svh;padding-top:15px}.vd-heading{padding-top:12px;gap:10px}.vd-eyebrow{font-size:8px}.vd-edition{font-size:7px}.vd-rack{height:340px;perspective:850px;perspective-origin:50% 45%}.vd-album{top:46%;transform:translate(-50%,-50%) translateX(calc(var(--position)*var(--vd-step) + var(--drag))) translateY(calc(var(--distance)*6px)) translateZ(calc(var(--distance)*-135px)) rotateY(calc(var(--position)*-29deg)) rotateZ(calc(var(--position)*1.5deg))}.vd-selection{gap:19px;margin-bottom:10px}.vd-track{min-width:205px;max-width:250px}.vd-arrow{width:35px;height:35px;font-size:18px!important}.vinyl-deck .vd-track h2{font-size:39px}.vd-actions{gap:17px}.vd-listen{min-height:44px;padding:12px 20px}.vd-youtube-link{font-size:9px}.vd-player-panel{grid-template-columns:1fr;gap:15px;width:100%;max-width:440px;margin-top:24px}.vd-player-copy{display:grid;grid-template-columns:1fr auto;gap:4px 15px;align-items:start}.vd-player-copy .vd-eyebrow,.vd-player-copy p,.vd-player-status,.vd-source{grid-column:1}.vd-player-copy p{font-size:25px;margin:5px 0 7px}.vd-close-player{grid-column:2;grid-row:1/5;margin-top:0;white-space:nowrap}.vd-player{width:100%}.vd-caption{font-size:8px;margin-top:23px;max-width:340px}.vd-help{max-width:290px;font-size:8px;line-height:1.6}}
@media(max-width:360px){.vd-track{min-width:180px}.vinyl-deck .vd-track h2{font-size:34px}.vd-selection{gap:12px}.vd-rack{height:310px}}
@media(prefers-reduced-motion:reduce){.vinyl-deck *,.vinyl-deck *::before,.vinyl-deck *::after{animation:none!important;transition:none!important}.vd-album{will-change:auto}}
