/* Shared volume control, aligned with the existing ZEISMAN transport. */
.player-volume{position:relative;display:inline-flex;align-items:center;flex:0 0 32px;min-width:0;z-index:5}
.volume-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--accent,#65bec3);border-radius:3px;cursor:pointer}
.volume-button:hover,.volume-button[aria-expanded="true"]{color:var(--ink,#eff5f4)}
.volume-button svg{display:block;flex:none}
.volume-popover{position:absolute;bottom:calc(100% + 10px);right:0;width:190px;padding:15px;background:#142c33;color:var(--ink,#eff5f4);border:1px solid #3f727b;border-radius:3px 18px 3px 18px;box-shadow:0 10px 30px #0005;display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;line-height:1.4;text-align:left}
.volume-popover[hidden]{display:none!important}
.volume-popover label{font-size:12px;letter-spacing:0;text-transform:none;margin:0;color:var(--ink,#eff5f4)}
.volume-popover output{color:var(--accent,#65bec3);font-variant-numeric:tabular-nums}
.volume-popover input[type="range"]{grid-column:1/-1;width:100%;min-width:0;height:28px;margin:0;padding:0;accent-color:var(--accent,#65bec3);cursor:pointer}
.volume-popover input:disabled{opacity:.4;cursor:default}
.volume-note{grid-column:1/-1;font-size:11px!important;color:var(--muted,#a7bfc2);line-height:1.5!important;margin:0!important}
.zeisman-transport{grid-template-columns:44px minmax(0,1fr) 32px!important}
.zeisman-transport>.transport-toggle{grid-row:1;grid-column:1}
.zeisman-transport>.transport-title{grid-row:1;grid-column:2;min-width:0}
.zeisman-transport>.player-volume{grid-row:1;grid-column:3;align-self:center}
.zeisman-transport>.transport-seek,.zeisman-transport>.transport-times{grid-column:1/-1}
.hero-play-actions{gap:clamp(5px,1vw,12px)!important;flex-wrap:nowrap!important}
.hero-play-actions .hero-next-mix{flex-basis:30px;width:30px}
.hero-play-actions .player-volume .volume-popover{right:-56px}
.hero-play-actions .hero-player-link{font-size:11px;white-space:nowrap}
.hero-open-listen:has(#hero-consent:not([hidden])) .hero-listen-default .player-volume{visibility:hidden;pointer-events:none}
@media(max-width:380px){.hero-play-actions{gap:5px!important}.hero-play-actions .hero-player-link{font-size:10px}.hero-play-actions .hero-next-mix{flex-basis:27px;width:27px}.hero-play-actions .player-volume{flex-basis:28px}.hero-play-actions .volume-button{width:28px}.hero-play-actions #hero-latest-play{gap:5px}}

/* Match the hero Next icon; give the modal icon a little more presence. */
.hero-play-actions .volume-button svg{width:26px;height:26px}
.zeisman-transport .volume-button svg{width:28px;height:28px}
/* Align the controls and the visible Play circle with the text above. */
.hero-listen-default>.hero-play-actions{justify-content:flex-start;margin-inline:0;padding-inline:0;text-align:left}
.hero-play-actions #hero-latest-play{margin-inline:0;padding-inline:0;border-inline-width:0;justify-content:flex-start}
/* Circle's visible edge is 1.3 units inside its 38-unit SVG viewBox. */
.hero-play-actions #hero-latest-play>svg{transform:translateX(-3.4210526%)}

/* A compact, aligned transport; the archive link ends at the row's right edge. */
.hero-listen-default>.hero-play-actions{display:grid;grid-template-columns:max-content 36px 36px minmax(0,1fr);column-gap:8px!important;align-items:center;width:100%;max-width:380px}
.hero-play-actions #hero-latest-play>span{min-width:40px;justify-content:flex-start}
.hero-play-actions #hero-next-mix,.hero-play-actions>.player-volume,.hero-play-actions .volume-button{width:36px;min-width:0;height:44px}
.hero-play-actions>.player-volume{justify-self:stretch}
.hero-play-actions .hero-player-link{justify-self:end;text-align:right;white-space:nowrap;font-size:11px;line-height:1.4;margin:0;padding:0;min-height:44px}
@media(max-width:380px){
 .hero-listen-default>.hero-play-actions{grid-template-columns:max-content 32px 32px minmax(0,1fr);column-gap:6px!important}
 .hero-play-actions #hero-next-mix,.hero-play-actions>.player-volume,.hero-play-actions .volume-button{width:32px}
 .hero-play-actions #hero-latest-play{gap:6px}
 .hero-play-actions .hero-player-link{font-size:10px}
}

/* Version belongs to the quiet copyright line, without another footer column. */
.site-footer .site-version{display:inline-block;margin-inline-start:10px;padding-inline-start:10px;border-inline-start:1px solid var(--line,#2b4850);color:var(--muted,#a7bfc2);font-size:10px;line-height:1.2;letter-spacing:.03em;vertical-align:baseline}

/* Publication date shares the genre row; stats retain their own row below. */
#player .player-metadata{margin-top:9px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-width:0}
#player .player-metadata .genre-badge{margin:0;flex:0 0 auto}
#player .player-release{margin:0;color:var(--muted,#a7bfc2);font-size:11px;font-weight:400;line-height:1.5;letter-spacing:0;white-space:nowrap}
#player .player-release[hidden]{display:none}
#player .player-release time{font-variant-numeric:tabular-nums}

/* The full link owns an intrinsic grid column and cannot cover the volume control. */
.hero-open-listen{container-type:inline-size}
.hero-listen-default>.hero-play-actions{grid-template-columns:max-content 36px 36px minmax(max-content,1fr)}
.hero-play-actions .hero-player-link{min-width:max-content}
@container (max-width:340px){
 .hero-listen-default>.hero-play-actions{grid-template-columns:max-content 32px 32px minmax(max-content,1fr);column-gap:6px!important}
 .hero-play-actions #hero-latest-play{gap:6px}
 .hero-play-actions #hero-latest-play>svg{width:32px;height:32px}
 .hero-play-actions #hero-next-mix,.hero-play-actions>.player-volume,.hero-play-actions .volume-button{width:32px}
 .hero-play-actions .hero-player-link{font-size:10px}
}
@media(min-width:601px) and (max-width:1200px){
 .hero-bottom-grid{grid-template-columns:minmax(0,1.6fr) minmax(268px,1fr)}
}
/* Smaller, rectangular release badge, sharing the existing 9px title spacing. */
#player .player-release{padding:3px 8px;border:1px solid #65bec338;border-radius:0;background:#65bec310;color:var(--muted,#a7bfc2);font-size:11px;line-height:1.5}
#player .player-release time{color:var(--ink,#eff5f4)}
/* Fade the existing mobile artwork itself, including its lower edge. */
@media(max-width:700px){
 #player #player-cover{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 32%,#000b 57%,#0004 79%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 32%,#000b 57%,#0004 79%,transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
}
@container (max-width:280px){
 .hero-listen-default>.hero-play-actions{grid-template-columns:max-content 30px 30px minmax(max-content,1fr);column-gap:4px!important}
 .hero-play-actions #hero-latest-play{gap:5px}
 .hero-play-actions #hero-latest-play>svg{width:30px;height:30px}
 .hero-play-actions #hero-latest-play>span{min-width:36px}
 .hero-play-actions #hero-next-mix,.hero-play-actions>.player-volume,.hero-play-actions .volume-button{width:30px}
}