/* =========================================================
   MUSIC — /music on aesv.io
   Album-cover-as-the-design. Mirrors the section idiom on /work and
   /activities: <h2> heading, content below, no per-section eyebrow.
   ========================================================= */

/* Section + h2 styles live in foundation under :where(.work-section, ...). */

/* ---------- Music to me. — three short statements arranged as
   a staggered three-column composition. Each block descends a step
   so the eye drops through them like a quote ladder. */
.music-to-me {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.music-to-me p {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.music-to-me p:nth-child(2) {
  margin-top: var(--s-4);
}
.music-to-me p:nth-child(3) {
  margin-top: var(--s-8);
}
@media (max-width: 720px) {
  .music-to-me {
    grid-template-columns: 1fr;
  }
  .music-to-me p:nth-child(n) {
    margin-top: 0;
  }
}

/* ---------- Albums I've been enjoying. — art-led grid.
   2 cols on phone → 3 tablet → 4 desktop. Album art is the design;
   no card chrome around the meta below it. */
.album-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Albums tile in multiples of 4 (4) with graceful downsteps
     (2 / 1) on narrower screens. Never 3, 5, 6, 7 — covers should
     pack as a square-or-rectangular block, not a ragged row.
     The 64rem inner content band tops us out at 4 cols regardless
     of viewport. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
@media (max-width: 640px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
@media (max-width: 280px) {
  .album-grid {
    grid-template-columns: 1fr;
  }
}

.album-cell {
  min-width: 0;
}
.album-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-press) var(--ease-press);
}
.album-link:hover {
  transform: translate(-2px, -2px);
  color: var(--ink);
}
.album-link:hover .album-art {
  box-shadow: var(--shadow-lg);
}
.album-link:active .album-art {
  transform: translate(6px, 6px);
  box-shadow: var(--shadow-pressed);
}
.album-art {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: var(--border-thin);
  box-shadow: var(--shadow-md);
  background: var(--ink);
  overflow: hidden;
  transition:
    transform var(--dur-press) var(--ease-press),
    box-shadow var(--dur-press) var(--ease-press);
}
.album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-meta {
  min-width: 0;
}
.album-name {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}
.album-artist {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Recent ledger (Just heard).
   Compact numbered list; ink rules between rows. Lead row + recents
   share this layout — no separate hero card. The list is capped at
   a comfortable reading width so a 4K monitor doesn't stretch each
   row to 1500px. */
.ledger {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--border-thin);
}
.ledger-row {
  display: grid;
  grid-template-columns: 2rem 3rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 0.75rem;
  border-bottom: var(--border-thin);
}
.ledger-num {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.ledger-art {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--ink);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.ledger-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ledger-meta {
  min-width: 0;
}
.ledger-track {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  line-height: 1.15;
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}
.ledger-artist {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin: 0;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.ledger-album {
  color: var(--ink-mute);
}
.ledger-link {
  --tile-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 12px;
  transition: color var(--dur-press) var(--ease-press);
}
.ledger-link:hover {
  --tile-bg: var(--lavender);
  color: var(--offwhite);
}

/* ---------- Wrist (≤280px) — tighter ledger row spacing.
   Album grid collapses to one column in the .album-grid block above. */
@media (max-width: 280px) {
  .ledger-row {
    grid-template-columns: 22px 32px 1fr auto;
    gap: 8px;
    padding: 8px 4px;
  }
}

/* Tier-specific type sizing rides the html font-size knob in
   foundation.css — no per-element overrides needed at billboard. */