/* /music — releases. Covers carry the page, in their original colours. BRIEF.md §7. */

/* ---------- header ---------- */
.mu-head { padding-block: var(--s-6); }
.mu-head__inner { display: grid; justify-items: center; gap: var(--s-4); }
.mu-head__photo img { width: 180px; height: 180px; }
@media (min-width: 768px) { .mu-head__photo img { width: 240px; height: 240px; } }
.mu-head__link { min-width: 180px; }
@media (min-width: 768px) { .mu-head__link { min-width: 240px; } }

/* ---------- releases ---------- */
.releases { list-style: none; padding: 0; display: grid; gap: var(--s-6); }
.release { display: grid; gap: var(--s-3); scroll-margin-top: calc(var(--nav-h) + var(--s-3)); }
@media (min-width: 900px) {
  .release { grid-template-columns: 420px minmax(0, 1fr); gap: var(--s-5); align-items: center; }
}
.release__art { display: block; aspect-ratio: 1; background: var(--concrete-300); }
.release__art img { width: 100%; height: 100%; object-fit: cover; }
.release__body { display: grid; gap: var(--s-2); align-content: center; }
.release__title { font-size: var(--fs-h2); line-height: 1.2; }

/* ---------- click-to-load player card ---------- */
.sc {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 166px;
  padding: var(--s-3);
  background: var(--void); color: var(--ink-900);
  border: 1px solid var(--concrete-300);
}
.sc.is-live { padding: 0; background: none; border: 0; display: block; }
.sc iframe { display: block; border: 0; }
.sc__play {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 56px; padding: 0 var(--s-4);
  border: 1px solid var(--ink-900);
  font-size: var(--fs-ui); letter-spacing: 0.02em;
}
.sc__play { white-space: nowrap; flex-shrink: 0; }
.sc__play svg { image-rendering: pixelated; }
.sc__play:hover { background: var(--ink-900); color: var(--void); }

/* ---------- earlier tracks ---------- */
.tracks { list-style: none; padding: 0; }
.track {
  display: grid; gap: var(--s-1) var(--s-3); align-items: center;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  padding-block: var(--s-2);
  border-top: 1px solid var(--concrete-700);
}
.track:last-child { border-bottom: 1px solid var(--concrete-700); }
.track__year { color: var(--concrete-500); }
.track__title { font-family: var(--font-display); font-size: var(--fs-ui); letter-spacing: 0.02em; max-width: none; }
.sc--compact { min-height: 0; padding: 0; background: none; border: 0; color: inherit; }
.sc--compact .sc__play { min-height: 40px; padding: 0 var(--s-2); border-color: var(--ink-900); }
.sc--compact .sc__play:hover { background: var(--ink-900); color: var(--void); }
.sc--compact.is-live { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .track { grid-template-columns: 1fr auto; }
  .track__year { grid-column: 1 / -1; }
}