/* /music — the records.

   A different discipline from the reel, which is why it is a different page:
   these credits are recording, mixing, producing and cover art. Nothing here is
   a camera.

   The grid is the format, not a slideshow. Seven covers are meant to be seen at
   once — an album grid is how music has always been shown, and there is no
   reason to hide six of them behind a control. */

.doc__main.music {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 8vh 4vw 6vh;
}

.doc__head--sub { min-height: 0; padding-block: 0 clamp(24px, 3.6vh, 40px); text-align: center; }
.doc__head--sub .doc__h1 { max-width: none; margin-inline: auto; }
.doc__head--sub .doc__lede { margin-inline: auto; text-align: center; }

.rels {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(22px, 3vw, 40px) clamp(16px, 2.2vw, 30px);
  /* FOUR columns, capped — auto-fit gave six and orphaned the seventh on a row
     of its own. Seven items read best as 4 + 3; a lone cover under a full row
     looks like a mistake rather than a set. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(92vw, 880px);
}

.rel { text-align: center; }
.rel picture { display: block; }
.rel img {
  display: block; width: 100%; height: auto;
  /* the same feather the reel and the portrait use — a cover should look like
     the phosphor is displaying it, not like a JPEG was dropped on the page */
  filter: saturate(.84) contrast(1.03) brightness(.9);
  -webkit-mask-image: radial-gradient(125% 125% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(125% 125% at 50% 50%, #000 58%, transparent 100%);
  transition: filter .35s ease;
}
.rel:hover img { filter: saturate(1) contrast(1.02) brightness(1.02); }

.rel__t {
  margin: 12px 0 3px !important;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--fg);
}
.rel__a {
  margin: 0 0 5px !important;
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim);
}
.rel__c {
  margin: 0 !important;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber); line-height: 1.5;
}


.doc__foot { padding-block: 0 8vh; text-align: center; }
.doc__foot .links { justify-content: center; }

@media (max-width: 760px) { .rels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .rel img { transition: none; }
}