:root { color-scheme: light; --paper:#eaddc5; --ink:#bd390f; --bright:#ce3705; --muted:#a07859; --line:#b75a2929; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }


button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; color:inherit; }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
button:focus-visible,a:focus-visible,#track-scroll:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.radio-app { position:relative; }
.hero { min-height:100svh; display:flex; align-items:center; justify-content:center; gap:5vw; padding:8vw; }
h1 { font-size:clamp(90px,11vw,190px); line-height:.95; letter-spacing:-.015em; margin:0; font-weight:900; white-space:nowrap; color:var(--bright); }
.logo-control { display:block; width:min(40vw,550px); flex-shrink:0; padding:0; border:0; border-radius:50%; background:transparent; }
.artwork { display:block; position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; clip-path:circle(49.7%); }
.artwork img { position:absolute; width:206.45%; height:auto; max-width:none; left:-96.77%; top:-26.61%; }
.logo-control:disabled { opacity:1; cursor:default; }
.collection { max-width:780px; margin:auto; padding:64px 30px 70px; }
.collection-label { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.collection-header { margin-bottom:24px; }
.collection-header h2 { font-size:32px; line-height:1; letter-spacing:-1.2px; margin:0; }
#track-count,.collection-footer { font:10px monospace; color:var(--muted); }
#track-scroll { position:relative; min-height:200px; outline-offset:8px; }
#tracks { position:relative; width:100%; overflow-anchor:none; }
.track-row { position:absolute; left:0; right:0; height:132px; border-bottom:1px solid var(--line); }
.track-button { display:flex; align-items:center; gap:18px; width:100%; height:88px; padding:10px 0 0; background:transparent; border:0; text-align:left; }
.cover { display:block; width:68px; height:68px; flex-shrink:0; overflow:hidden; background:radial-gradient(circle,hsl(var(--sleeve) 65% 83%) 0 6%,#322820 7% 12%,transparent 13% 22%,#322820 23% 25%,transparent 26% 36%,#322820 37% 39%,transparent 40%),hsl(var(--sleeve) 48% 57%); }
.cover img { display:block; width:100%; height:100%; object-fit:cover; }
.track-copy { flex:1; min-width:0; }
.track-title { font-size:22px; font-weight:750; letter-spacing:-.6px; line-height:1.12; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.track-mark { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; }
.track-mark svg { width:24px; height:24px; fill:currentColor; }
.track-button[data-playing="true"] .track-mark { background:var(--ink); color:var(--paper); }
.track-links { display:flex; align-items:center; gap:4px; margin-left:82px; height:44px; }
.track-duration { font:10px monospace; color:var(--muted); width:40px; flex-shrink:0; }
.icon-link { width:44px; height:44px; display:grid; place-items:center; text-decoration:none; flex-shrink:0; }
.icon-link svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; }
.youtube svg path { fill:currentColor; stroke:none; }
.row-message { font:10px/1.3 monospace; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.collection-footer { display:flex; justify-content:space-between; margin-top:26px; }
.list-message { padding:28px 0; font-size:16px; }
.retry { background:transparent; border:1px solid var(--ink); padding:10px 16px; }
.deck { position:absolute; z-index:1; left:86px; width:200px; height:200px; background:#21190f; }
#video-slot,#video-slot iframe { display:block; width:200px; height:200px; min-width:200px; min-height:200px; border:0; }

.noscript { padding:24px; }
@keyframes record-turn { to { transform:rotate(360deg); } }
@keyframes ink-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) {
 .logo-control .artwork { animation:record-turn 90s linear infinite; }
 .logo-control.motion-paused .artwork,.hero.offscreen .logo-control .artwork,.tab-hidden .logo-control .artwork { animation-play-state:paused; }
 .hero h1 { transform-origin:center; }
 .collection-header.arrived { animation:ink-arrive .55s ease-out both; }
 .logo-control { transition:scale .5s cubic-bezier(.2,.7,.2,1); }
 .logo-control:not(:disabled):active { scale:.975; }
 .track-title,.track-mark,.icon-link { transition:transform .2s ease,background-color .2s ease; }
 .track-mark { transition:transform .2s ease; }
 .track-button:active .track-mark { transform:scale(.9); }
}
@media(hover:hover) {
 .icon-link:hover { background:#bd390f0b; }
 .track-button:hover .track-title { text-decoration:underline; text-underline-offset:3px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .logo-control:not(:disabled):hover { scale:1.018; }
 .track-button:hover .track-title { transform:translateX(3px); }
 .icon-link:hover { transform:translateY(-2px); }
}
@media(max-width:760px) {
 .hero { flex-direction:column; gap:44px; padding:36px 24px; }
 h1 { font-size:clamp(74px,19vw,140px); }
 .logo-control { width:min(76vw,400px); }
 .collection { padding:42px 23px 50px; }
 .collection-header h2 { font-size:28px; }
 .track-title { font-size:18px; letter-spacing:-.4px; }
 .track-button { gap:12px; }
 .cover { width:56px; height:56px; }
 .track-links { margin-left:64px; }
 .deck { left:68px; }
}
@media(prefers-reduced-motion:reduce) {
 .artwork,.hero h1,.collection-header { animation:none !important; }
 .logo-control,.track-title,.track-mark,.icon-link { transition:none !important; }
}

/* Small listening notes, only when invited. */
.insight { padding:0; border:0; background:transparent; }
.insight[aria-expanded="true"] { background:var(--ink); color:var(--paper); border-radius:50%; }
#dig-popover { position:fixed; inset:auto; margin:0; padding:23px; border:1px solid #bd390f55; background:#f5efdf; color:var(--ink); box-shadow:0 7px 28px #58301116; overflow:auto; overscroll-behavior:contain; }
#dig-popover::backdrop { background:transparent; pointer-events:none; }
#dig-close { position:absolute; top:6px; right:8px; width:32px; height:32px; padding:0; border:0; background:transparent; font:24px Arial,sans-serif; }
.dig-eyebrow { font:9px monospace; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
#dig-title { font-size:16px; line-height:1.2; margin:12px 16px 12px 0; letter-spacing:-.3px; }
.dig-note { font:18px/1.4 Georgia,serif; margin:0 0 19px; }
#dig-content h3 { font:9px monospace; text-transform:uppercase; letter-spacing:.8px; margin:0 0 7px; color:var(--muted); }
.dig-recommendation { margin-bottom:13px; }
.dig-recommendation a,.dig-recommendation button { display:block; font:700 13px/1.3 Arial,sans-serif; text-align:left; border:0; padding:0; background:transparent; text-decoration:underline; text-underline-offset:3px; }
.dig-recommendation span { display:block; font:12px/1.4 Georgia,serif; margin-top:4px; color:#835b43; }
.dig-provenance { font:9px/1.5 monospace; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin:14px 0 5px; }
.dig-sources { display:flex; flex-wrap:wrap; gap:7px 12px; font:9px/1.5 monospace; }
@media(max-width:400px) { #dig-popover { padding:20px; } .dig-note { font-size:17px; } }

.search-suggestions { display:block; width:100%; height:76px; border:0; margin-top:12px; background:transparent; }

/* Ink, paper, and a little physicality. No replacement cursor or scroll hijacking. */
.hero { overflow:clip; }
.hero h1 span { display:inline-block; }
@keyframes letter-settle {
 0% { opacity:0; transform:translateY(80%) rotate(12deg) scale(.72,.85); }
 24% { opacity:1; transform:translateY(-15%) rotate(-9deg) scale(1.06,.94); }
 44% { transform:translateY(7%) rotate(6deg) scale(.97,1.04); }
 64% { transform:translateY(-6%) rotate(-4deg) scale(1.02,.98); }
 82% { transform:translateY(2%) rotate(2deg); }
 100% { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
@keyframes player-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes sleeve-open {
 from { opacity:0; transform:translateY(8px) scale(.97); }
 to { opacity:1; transform:translateY(0) scale(1); }
}
@media(prefers-reduced-motion:no-preference) {
 .motion-ready h1 span { transform-origin:50% 80%; animation:letter-settle 1.35s cubic-bezier(.33,0,.2,1) both; animation-delay:calc(var(--letter) * 85ms); }
 .hero h1,.hero .logo-control { opacity:var(--departure,1); }
 .cover { transition:transform .55s cubic-bezier(.16,1,.3,1); }
 .cover img { transition:transform .7s cubic-bezier(.16,1,.3,1); }
 .track-mark { transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s,color .25s; }
 .track-button[data-playing="true"] .track-mark { transform:scale(1.08); }
 .deck:not([hidden]) { animation:player-arrive .35s ease-out; }
 #dig-popover:popover-open { animation:sleeve-open .3s cubic-bezier(.16,1,.3,1); }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .track-button:hover .cover { transform:translateY(-3px) rotate(-3deg); }
 .track-button:hover .cover img { transform:scale(1.07); }
 .track-button:active .cover { transform:scale(.96); }
}
@media(prefers-reduced-motion:reduce) {
 .hero h1 span { animation:none; }
 .hero h1,.hero .logo-control { transform:none !important; opacity:1; }
}

/* A playback-driven rhythm, not an audio analyser. Keep button geometry stable. */
.artwork-bounce { display:block; }
@keyframes listening-bounce {
 0%,100% { transform:translateY(0) scale(1); }
 28% { transform:translateY(-10px) scale(1.025); }
 55% { transform:translateY(2px) scale(.992); }
 76% { transform:translateY(-3px) scale(1.008); }
}
@keyframes listening-type {
 0%,100% { translate:0 0; }
 30% { translate:0 -3px; }
 58% { translate:0 1px; }
}
@media(prefers-reduced-motion:no-preference) {
 .music-playing .artwork-bounce { animation:listening-bounce 1s cubic-bezier(.35,0,.3,1) infinite; }
 .music-playing .hero h1 { animation:listening-type 1s ease-in-out infinite; }
 .hero.offscreen .artwork-bounce,.tab-hidden .artwork-bounce,.hero.offscreen h1,.tab-hidden .hero h1 { animation-play-state:paused; }
}

/* Shared navigation and long-form listening. */
.site-nav { position:relative; z-index:2; display:flex; justify-content:flex-end; gap:28px; padding:24px 30px; font:12px monospace; }
.site-nav a { padding:8px 0; text-decoration:none; }
 .site-nav a:not(.nav-brand) { position:relative; }
.site-nav a:not(.nav-brand)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; opacity:0; background:url('/assets/nav-zigzag.svg') repeat-x left center; pointer-events:none; }
.site-nav a:not(.nav-brand):hover::after,.site-nav a:not(.nav-brand):focus-visible::after,.site-nav a:not(.nav-brand)[aria-current="page"]::after { opacity:1; }
.radio-app .hero { min-height:calc(100svh - 78px); }
.mixes-page { max-width:1100px; margin:auto; padding:48px 40px 36px; }
.mixes-brand { font-size:24px; font-weight:900; letter-spacing:-1px; text-decoration:none; }
.mixes-heading h1 { margin:28px 0 20px; font-size:clamp(90px,14vw,170px); }
.mixes-heading p { font:14px monospace; color:var(--muted); margin:0 0 54px; }
.mix-release { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:center; gap:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
.mix-art { width:100%; }
.mix-number { font:11px monospace; letter-spacing:1px; color:var(--muted); }
.mix-details h2 { font-size:clamp(28px,4vw,46px); line-height:1.08; letter-spacing:-1px; margin:16px 0 28px; }
.mix-details audio { display:block; width:100%; }
.mix-direct { font:11px monospace; margin:20px 0 0; }
.mixes-footer { font:11px monospace; color:var(--muted); margin-top:28px; }
@media(max-width:760px) {
 .site-nav { padding:18px 24px; }
 .mixes-page { padding:30px 24px; }
 .mixes-heading p { margin-bottom:36px; }
 .mix-release { grid-template-columns:1fr; gap:30px; padding:30px 0; }
 .mix-art { width:min(72vw,300px); margin:auto; }
}

.mix-details h2.sr-only { margin:0; }
.mix-player { display:flex; align-items:center; gap:18px; padding:24px 0; margin-top:18px; border-block:1px solid var(--line); }
.mix-play { display:grid; place-items:center; flex-shrink:0; width:52px; height:52px; border:1px solid var(--ink); border-radius:50%; background:var(--ink); color:var(--paper); font-size:19px; }
.mix-play:hover { background:var(--bright); }
.mix-timeline { flex:1; min-width:0; }
.mix-times { display:flex; justify-content:space-between; font:11px monospace; margin-bottom:12px; }
.mix-seek { --progress:0%; display:block; appearance:none; width:100%; height:24px; margin:0; cursor:pointer; background:transparent; accent-color:var(--ink); }
.mix-seek::-webkit-slider-runnable-track { height:3px; background:linear-gradient(to right,var(--ink) var(--progress),var(--line) var(--progress)); }
.mix-seek::-moz-range-track { height:3px; background:var(--line); }
.mix-seek::-moz-range-progress { height:3px; background:var(--ink); }
.mix-seek::-webkit-slider-thumb { appearance:none; width:12px; height:12px; margin-top:-4.5px; background:var(--ink); border-radius:50%; }
.mix-seek::-moz-range-thumb { width:12px; height:12px; border:0; background:var(--ink); border-radius:50%; }
.mix-seek:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.mix-mute { border:0; background:transparent; color:var(--ink); font:10px monospace; padding:12px 0 12px 4px; min-height:44px; }
.mix-error { font:12px/1.5 monospace; }
@media(max-width:400px) { .mix-player { gap:12px; } .mix-play { width:44px; height:44px; } }

@media(prefers-reduced-motion:no-preference) {
 .mix-art .artwork { animation:record-turn 90s linear infinite; animation-play-state:paused; }
 .mix-art.mix-playing .artwork { animation-play-state:running; }
 .tab-hidden .mix-art .artwork { animation-play-state:paused; }
}

/* The full recording, drawn as ink bars; the native slider handles seeking. */
.mix-waveform { position:relative; height:88px; }
.waveform-image { display:block; width:100%; height:100%; pointer-events:none; }
.waveform-unplayed { fill:var(--ink); opacity:.23; }
.waveform-played { fill:var(--bright); }
.mix-waveform.waveform-ready .mix-seek { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.mix-waveform:focus-within { outline:2px solid var(--ink); outline-offset:5px; }
.mix-waveform:hover .waveform-unplayed { opacity:.35; }
.mix-waveform:not(.waveform-ready) .waveform-image { display:none; }
.mix-waveform:not(.waveform-ready) { height:24px; }
.mix-times { color:var(--muted); }
@media(max-width:400px) { .mix-waveform { height:72px; } .mix-player { flex-wrap:wrap; } .mix-timeline { flex-basis:calc(100% - 56px); } .mix-mute { margin-left:auto; padding-block:0; min-height:28px; } }

.site-nav { align-items:center; }
.site-nav .nav-brand { margin-right:auto; font:900 24px Arial,Helvetica,sans-serif; letter-spacing:-1px; line-height:1; }

.mixes-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 32px; }
.mixes-heading h1 { margin:0; font-size:clamp(64px,12vw,170px); }
.mixes-heading .mix-art { width:clamp(80px,20vw,200px); margin:0; flex-shrink:0; }
.mixes-page .mix-release { display:block; }
@media(max-width:420px) { .mixes-heading { gap:12px; } .mixes-heading h1 { font-size:clamp(56px,17vw,72px); } .mixes-heading .mix-art { width:80px; } }

/* Slightly irregular orange pencil stroke, repeating seamlessly. */
.mixes-page .mix-release { position:relative; border-top:0; border-bottom:0; }
.mixes-page .mix-release::before { content:""; position:absolute; top:-9px; left:0; right:0; height:18px; background:url('/assets/pencil-wave.svg') repeat-x left center; pointer-events:none; }
/* The supplied HTML's table canvas, rendered once and fitted to the viewport.
   A fixed decorative layer matches the reference without a runtime renderer. */
body { isolation:isolate; }
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url('/assets/approved-table-paper.webp') center / 100% 100% no-repeat;
}

 .mix-release.has-music-wave::before { display:none; }
.music-wave { position:absolute; top:-16px; left:0; width:100%; height:32px; overflow:visible; pointer-events:none; }
.music-wave path { fill:none; stroke:var(--ink); stroke-width:3.6; stroke-linecap:round; opacity:.8; filter:url(#ink-wear); vector-effect:non-scaling-stroke; }

.site-nav .nav-brand:hover { text-decoration:none; }
.nav-brand span { display:inline-block; }
@keyframes brand-wave {
 0%,100% { transform:translateY(0) rotate(0); }
 25% { transform:translateY(-4px) rotate(-5deg); }
 75% { transform:translateY(2px) rotate(3deg); }
}
@media(prefers-reduced-motion:no-preference) {
 .nav-brand:focus-visible span { animation:brand-wave 1.1s ease-in-out infinite; animation-delay:calc(var(--wave-letter) * -0.09s); }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .nav-brand:hover span { animation:brand-wave 1.1s ease-in-out infinite; animation-delay:calc(var(--wave-letter) * -0.09s); }
}

/* A handwritten invitation beside the record's top-left. */
@font-face { font-family:'Caveat'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/caveat-medium.ttf') format('truetype'); }
.logo-control { position:relative; }
.play-note { position:absolute; left:max(calc((100% - 100vw) / 2 + 24px), -110px); top:-30px; display:flex; align-items:flex-start; gap:3px; color:var(--ink); pointer-events:none; white-space:nowrap; }
.play-note > span { display:block; width:150px; flex:0 0 150px; font:500 26px/1.1 'Caveat',cursive; transform:rotate(-7deg); }
.play-note svg { width:82px; height:60px; margin-top:14px; overflow:visible; }
.play-note path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:url(#ink-wear); }
@media(max-width:760px) { .play-note { top:-30px; } }

/* Reveal the note only after its handwriting and entrance layout are ready. */
.play-note { visibility:hidden; }
.play-note.note-ready { visibility:visible; }

/* A sleeve-led record grid, with room to read before pressing play. */
.collection { max-width:1240px; padding-inline:32px; }
.track-row { right:auto; border-bottom:1px solid var(--line); padding-bottom:28px; }
.track-button { position:relative; display:block; height:auto; padding:0; }
.track-button .cover { width:100%; height:auto; aspect-ratio:1; background:#e0d7c4; }
.track-button .cover img { object-fit:contain; }
.track-copy { display:block; margin-top:22px; padding-right:0; }
.track-title { font-size:23px; line-height:1.22; -webkit-line-clamp:3; letter-spacing:-.5px; }
.track-button .track-mark { position:absolute; right:14px; top:14px; width:48px; height:48px; background:var(--paper); box-shadow:0 2px 12px #21190f20; }
.track-metadata { font:11px/1.65 monospace; color:var(--muted); margin:14px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.track-note { font:17px/1.55 Georgia,serif; margin:14px 0 0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.track-links { position:absolute; bottom:28px; left:0; right:0; margin:0; flex-wrap:wrap; height:auto; min-height:44px; gap:2px; }
.track-links .insight { width:auto; gap:6px; display:flex; padding:0 8px; font:11px monospace; background:transparent; border:0; }
.row-message { flex-basis:100%; }
@media(max-width:760px) { .collection { padding-inline:24px; } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .track-button:hover .cover { transform:translateY(-3px) rotate(-1deg); } }

/* Consistent sleeve, title, notes and actions within each virtual grid slot. */
.collection-header { padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:32px; }
.track-row { padding-bottom:24px; }
.track-button .cover { position:relative; height:auto; aspect-ratio:1; background:radial-gradient(circle at center,var(--paper) 0 8%,var(--ink) 8.5% 10%,#302c25 10.5% 25%,#494238 25.5% 26%,#302c25 26.5% 38%,#494238 38.5% 39%,#302c25 39.5% 47%,transparent 47.5%),#ded4bf; }
.track-button .cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.track-copy { margin-top:18px; }
.track-title { font-size:21px; line-height:1.25; height:53px; -webkit-line-clamp:2; }
.track-metadata { margin:10px 0 0; height:36px; font:10px/18px monospace; }
.track-note { margin:12px 0 0; height:72px; font:16px/24px Georgia,serif; -webkit-line-clamp:3; }
.track-links { bottom:24px; min-height:44px; flex-wrap:nowrap; gap:2px; }
.track-duration { width:34px; }
.track-links .insight { padding:0 4px; font-size:10px; }
.track-links .row-message { position:absolute; bottom:48px; left:0; right:0; font:10px/14px monospace; }
.track-button[data-playing="true"] .cover { outline:2px solid var(--ink); outline-offset:4px; }
@media(max-width:420px) { .track-title { font-size:20px; } }

/* Fill the sleeve square and keep the reading flow compact. */
.track-button .cover img { object-fit:cover; }
.track-title { height:auto; max-height:53px; }
.track-metadata { height:auto; max-height:36px; }
.track-metadata:empty,.track-note:empty { display:none; }
.track-note { margin-top:10px; }
.deck { width:var(--card-width,200px); height:var(--card-width,200px); }
#video-slot,#video-slot iframe { width:100%; height:100%; min-width:0; min-height:0; }

/* Keep track actions attached to the text rather than the grid slot's bottom. */
.track-note { height:auto; max-height:72px; }
.track-links { position:relative; bottom:auto; margin-top:10px; }
.track-links .row-message { top:100%; bottom:auto; }


/* The shared player replaces the selected sleeve without moving the grid. */
.track-button[data-video-visible="true"] .cover,
.track-button[data-video-visible="true"] .track-mark { visibility:hidden; }
.track-button[data-video-visible="true"] .cover { transform:none; }


/* Crop the player's chrome only during playback; paused controls stay usable. */
.deck { overflow:hidden; }
.deck.is-playing #video-slot iframe { position:absolute; top:-60px; left:0; width:100%; height:calc(100% + 120px); pointer-events:none; }
.video-pause { position:absolute; z-index:2; top:14px; right:14px; display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; color:var(--ink); background:var(--paper); box-shadow:0 2px 12px #21190f20; }
.video-pause svg { width:24px; height:24px; fill:currentColor; }

/* Centred controls: discoverable on touch, quiet until hover on desktop. */
.video-pause,.track-button .track-mark { top:50%; left:50%; right:auto; transform:translate(-50%,-50%); }
.track-button .track-mark { top:calc(var(--card-width,200px) / 2); }
@media(hover:hover) and (pointer:fine) {
 .video-pause,.track-button .track-mark { opacity:0; }
 .deck:hover .video-pause,.deck:focus-within .video-pause,
 .track-button:hover .track-mark,.track-button:focus-visible .track-mark { opacity:1; }
}
.track-button[data-playing="true"] .track-mark { transform:translate(-50%,-50%); }
.track-button:active .track-mark { transform:translate(-50%,-50%) scale(.9); }

/* Reference music cards own their height; virtual rows follow measured paper. */
.track-row { height:auto; padding:0; border:0; }
.music-card__artwork[role="button"] { cursor:pointer; }
.music-card__artwork:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.music-card__sources { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:20px; font:12px/1.5 'MC Arimo',sans-serif; }
.music-card__sources a,.music-card__sources button { padding:8px 0; color:inherit; background:none; border:0; font:inherit; }
.deck { border-radius:calc(var(--card-width) * .0247); }