/* -----------------------------------------------------------------------------
   VALEON — music
   Thirteen original tracks. The player is intentionally quiet; the point is
   the tracks, not the transport.
   -------------------------------------------------------------------------- */

.music-hero {
  padding: var(--space-8) 0 var(--space-6);
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: var(--space-7);
  align-items: center;
}
.music-hero .cover {
  border-radius: var(--radius-3);
  overflow: hidden;
  border: 1px solid var(--grid-line);
  box-shadow: 0 20px 60px rgba(51, 230, 255, 0.14),
              0 0 0 1px rgba(51, 230, 255, 0.06);
  aspect-ratio: 1;
  background: var(--void);
}
.music-hero .cover img { width: 100%; height: 100%; object-fit: cover; }
.music-hero .meta h1 { margin-bottom: var(--space-3); }
.music-hero .meta .attr {
  color: var(--ink-lo);
  font-family: var(--font-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: 0.85rem;
}
.music-hero .meta p { margin-top: var(--space-4); }

@media (max-width: 720px) {
  .music-hero { grid-template-columns: 1fr; text-align: center; }
  .music-hero .cover { max-width: 260px; margin: 0 auto; }
}

/* ----- Tracklist ------------------------------------------------------- */
.tracklist {
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-3);
  overflow: hidden;
  background: rgba(14, 22, 38, 0.35);
}
.track {
  display: grid;
  grid-template-columns: 42px 1fr auto 42px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--grid-line);
  transition: background var(--dur-1) var(--ease-out);
  cursor: pointer;
}
.track:last-child { border-bottom: none; }
.track:hover { background: rgba(51, 230, 255, 0.05); }
.track.playing { background: rgba(51, 230, 255, 0.08); }
.track.playing .num { color: var(--cryo); }

.track .num {
  font-family: var(--font-mono);
  color: var(--ink-lo);
  text-align: center;
  font-size: 0.9rem;
  tabular-nums: true;
}
.track .title {
  font-family: var(--font-display);
  color: var(--ink-hi);
  letter-spacing: var(--track-wide);
  font-size: 1rem;
}
.track .time {
  color: var(--ink-lo);
  font-family: var(--font-mono);
  font-size: 0.86rem;
}
.track .play {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--grid-line-warm);
  border-radius: 50%;
  color: var(--ink-mid);
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.track:hover .play { color: var(--cryo); border-color: var(--cryo); }
.track .play svg { width: 12px; height: 12px; }

/* Sticky transport lives in base.css now, since the global player
   (player.js) renders it on every page — not just this one. */