/* Release detail. Tokens only — nothing here introduces a new value. */
.crumb { padding-block: var(--s-4); border-bottom: var(--hairline) solid var(--border-default);
         display: flex; gap: var(--s-2); align-items: center;
         font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
         letter-spacing: var(--track-label); color: var(--text-muted); }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--accent); }
.crumb .here { color: var(--text-primary); }

.rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-5); }
@media (min-width: 900px) {
  .rel { grid-template-columns: 480px minmax(0, 1fr); gap: var(--s-12); padding-block: var(--s-12); }
}
.rel-art  { display: flex; flex-direction: column; gap: var(--s-6); }
.rel-body { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }

.rel-id { display: flex; flex-direction: column; gap: var(--s-2); }
.rel-id h1 { margin: 0; font-size: 40px; line-height: 44px; }
@media (min-width: 900px) { .rel-id h1 { font-size: 72px; line-height: 72px; } }
.rel-by { color: var(--text-muted); }

.panel-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.panel h2 { margin: 0; font-size: 28px; line-height: 32px; }

.buy { border-top: var(--hairline) solid var(--border-default);
       border-bottom: var(--hairline) solid var(--border-default);
       padding-block: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.fmts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Sized to content, one line, 48px. The previous 72px full-width slabs read as
   primary actions competing with Add to Cart — this is a picker, not a CTA. */
.fmt { display: inline-flex; align-items: center; gap: var(--s-2);
       height: var(--control-h); box-sizing: border-box; padding-inline: var(--s-4);
       background: none; cursor: pointer; color: var(--text-muted);
       border: var(--hairline) solid var(--border-default); }
.fmt:hover { border-color: var(--border-strong); color: var(--text-primary); }
.fmt:focus-visible { outline: var(--rule) solid var(--focus-ring); outline-offset: var(--rule); }
/* Selection carries three signals: a tick, a heavier border, and colour —
   never colour alone. */
.fmt .fmt-tick { opacity: 0; flex-shrink: 0; margin-right: calc(var(--s-1) * -1); }
.fmt.is-on { border: var(--rule) solid var(--accent); color: var(--text-primary);
             padding-inline: calc(var(--s-4) - 1px); }
.fmt.is-on .fmt-tick { opacity: 1; color: var(--accent); margin-right: 0; }
.fmt-n { font-family: var(--font-mono); font-size: var(--step-mono); line-height: var(--lh-mono);
         font-weight: 600; letter-spacing: var(--track-button); }
.fmt-d { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
         color: var(--text-muted); }
.vo { margin: 0; font-size: var(--step-body-s); line-height: var(--lh-body-s); }

.buy-row { display: flex; flex-direction: column; gap: var(--s-4); align-items: stretch; }
.buy-p { font-size: 40px; line-height: 44px; }
.buy-note { color: var(--text-muted); }
@media (min-width: 900px) {
  .buy-row { flex-direction: row; align-items: center; gap: var(--s-4); }
  .buy-p { font-size: 56px; line-height: 56px; flex-shrink: 0; }
  .buy-note { flex-grow: 1; text-align: right; }
}

.tracks { display: flex; flex-direction: column; gap: var(--s-3); }
.tracks-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.tracks-hd p { margin: 0; }
.trks { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--border-default); }
/* Row height is set on the box, not built up from padding. Previously a 44px
   play button plus 16px padding block gave 77px rows on the one release with
   audio, while the other 79 came out at 57px — inconsistent AND tall. A fixed
   52px with box-sizing makes every row identical whether or not it has a play
   button, and keeps the button's 44px touch target intact. 52 is on the 4px
   grid; box-sizing absorbs the hairline rather than compensating with odd
   padding (standing rule 3). */
.trk { display: flex; align-items: center; gap: var(--s-3);
       min-height: 52px; padding-block: 0; box-sizing: border-box;
       border-bottom: var(--hairline) solid var(--border-default); }
@media (min-width: 900px) { .trk { gap: var(--s-5); padding-inline: var(--s-2); } }
.trk-n { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-body);
         color: var(--text-muted); width: 24px; flex-shrink: 0; }
/* Track titles use the display face, like every other title on the site --
   catalogue card titles, the player header, all headings. Previously this had
   no font-family at all, so it fell through to --font-body (IBM Plex Sans),
   which is used nowhere else deliberately. Anton is condensed, so this does not
   wrap or clip at 1280px or 390px -- checked on the served page. */
.trk-t { font-family: var(--font-display); text-transform: uppercase;
         font-size: var(--step-body-s); line-height: var(--lh-body-s);
         flex-grow: 1; min-width: 0; }
@media (min-width: 900px) { .trk-t { font-size: var(--step-body); line-height: var(--lh-body); } }
.trk-d { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-body);
         color: var(--text-muted); flex-shrink: 0; }

.more { border-top: var(--rule) solid var(--border-strong); border-bottom: 0; }
.more-all { font-family: var(--font-mono); font-size: var(--step-micro); line-height: var(--lh-micro);
            letter-spacing: var(--track-label); white-space: nowrap; }
a.card { color: inherit; }
a.card:hover .h3 { color: var(--accent); }
.card .h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
            font-size: var(--step-heading); line-height: var(--lh-heading); }
.card .sleeve { display: block; }

/* ── Vinyl page ─────────────────────────────────────────────── */
.vgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 768px)  { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vcard { display: flex; flex-direction: column; color: inherit;
         border: var(--hairline) solid var(--border-default); background: var(--surface-raised); }
.vcard:hover { border-color: var(--border-strong); }
.vcard:focus-visible { outline: var(--rule) solid var(--focus-ring); outline-offset: var(--rule); }
.vcard .sleeve { display: block; border: 0; border-bottom: var(--hairline) solid var(--border-default); }
.vbody { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.vhd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.vcard .h2 { font-size: 28px; line-height: 32px; }
.vcard:hover .h2 { color: var(--accent); }
.vfmt { color: var(--text-muted); }
.vfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
         border-top: var(--hairline) solid var(--border-default); padding-top: var(--s-3); margin-top: var(--s-1); }
.vlead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vships { color: var(--text-muted); }
.vcta { margin-top: 0; justify-content: center; }

/* ── Merch page ─────────────────────────────────────────────── */
.sub-inline { gap: var(--s-2); }
.sub-row { display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 768px) { .sub-row { flex-direction: row; max-width: 480px; } }
.slot { opacity: 0.92; }
.slot-art { display: flex; align-items: center; justify-content: center;
            background: var(--surface-sunken);
            background-image: repeating-linear-gradient(45deg,
              transparent 0 10px, var(--border-default) 10px 11px); }
.slot-mark { height: 44%; width: auto; opacity: 0.45; }
.slot .ph { position: absolute; left: var(--s-3); bottom: var(--s-3); top: auto; }
.slot-note-s { color: var(--text-muted); }
.slot-note { margin-top: var(--s-6); max-width: 720px; font-size: var(--step-body-s);
             line-height: var(--lh-body-s); text-wrap: pretty; }

/* ── Artists page ───────────────────────────────────────────── */
.agrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 600px)  { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 1200px) { .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acard { display: flex; align-items: center; gap: var(--s-4); color: inherit; padding: var(--s-4);
         border: var(--hairline) solid var(--border-default); background: var(--surface-raised); }
.acard:hover { border-color: var(--border-strong); }
.acard:focus-visible { outline: var(--rule) solid var(--focus-ring); outline-offset: var(--rule); }
/* Overlapped covers — a stack of sleeves reads as a body of work at a glance. */
.astack { display: flex; flex-shrink: 0; }
.astack-i { display: block; width: 64px; height: 64px; border: var(--hairline) solid var(--border-default);
            background: var(--surface-sunken); }
.astack-i + .astack-i { margin-left: -32px; }
.astack-i img { width: 100%; height: 100%; display: block; object-fit: cover; }
.abody { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.acard .h3 { font-size: var(--step-heading); line-height: var(--lh-heading); }
.acard:hover .h3 { color: var(--accent); }

.names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.names li { font-family: var(--font-mono); font-size: var(--step-mono); line-height: var(--lh-mono);
            padding: var(--s-2) var(--s-3); border: var(--hairline) solid var(--border-default);
            color: var(--text-primary); }

/* ── Legal / prose pages ────────────────────────────────────── */
.prose { max-width: 720px; padding-block: var(--s-8); }
@media (min-width: 768px) { .prose { padding-block: var(--s-12); } }
.prose h1 { margin: 0 0 var(--s-2) 0; font-size: 40px; line-height: 44px; }
@media (min-width: 768px) { .prose h1 { font-size: 56px; line-height: 56px; } }
.prose h2 { margin: var(--s-8) 0 var(--s-3) 0; font-size: var(--step-display-s);
            line-height: var(--lh-display-s); }
.prose p { margin: 0 0 var(--s-4) 0; text-wrap: pretty; }
.prose .upd { margin-bottom: var(--s-8); color: var(--text-muted); }
.draft { border: var(--rule) solid var(--accent); padding: var(--s-4);
         font-size: var(--step-body-s); line-height: var(--lh-body-s);
         margin-bottom: var(--s-8); }
.tbc { font-family: var(--font-mono); font-size: var(--step-body-s);
       background: var(--accent-surface); color: var(--accent);
       padding: 0 var(--s-1); white-space: nowrap; }
.note-live { border-left: var(--rule) solid var(--accent); padding-left: var(--s-4); }