/**
 * Retro Music — "retro" variant
 *
 * Cream paper store wall; the Spotify embed framed like a record hung on the
 * wall — paper mat + ink keyline (same language as the hero posters + about
 * cover), no drop shadow (the crate/receipt own the only shadows). The kraft
 * "Now Playing" tab carries the brand pop via its offset shadow + spinning disc.
 *
 * CONTRAST: no body text on a raw --template fill. The tab is paper + ink; the
 * brand shows through the tab's offset shadow, the spinning disc, and the mat's
 * inner keyline. Legible at any brand color.
 */

.retro-music[data-variant="retro"] {
  --r-paper:   #f3ecdb;
  --r-paper-2: #e7dcc3;
  --r-ink:     #2a2018;
  --r-shade:   color-mix(in srgb, var(--template) 72%, #20160a);
  --r-deep:    color-mix(in srgb, var(--template) 40%, #160f06);

  color: var(--r-ink);
  background-color: var(--r-paper);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px);
}

/* ───────────────────────────────────────────────────────── HEADER */

.retro-music[data-variant="retro"] .retro-music__kicker {
  color: var(--r-deep);
}

.retro-music[data-variant="retro"] .retro-music__title-h {
  color: var(--r-ink);
  text-shadow: 3px 3px 0 var(--template),
               4px 4px 0 var(--r-deep);
}

/* ───────────────────────────────────────────────── PLAYER FRAME */

/* paper mat + thin ink keyline, exactly like the hero posters */
.retro-music[data-variant="retro"] .retro-music__frame {
  background-color: var(--r-paper);
  border: 0.6rem solid var(--r-paper);
  outline: 2px solid var(--r-ink);
  outline-offset: -0.6rem;
}

/* kraft tab — paper + ink, brand-derived offset shadow (hero/crate language) */
.retro-music[data-variant="retro"] .retro-music__tab {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-shade);
  border-radius: 4px;
  box-shadow: 1px 2px 0 var(--r-deep);
  transform: rotate(-1.5deg);
}

/* the spinning disc on the tab — brand grooves, black center */
.retro-music[data-variant="retro"] .retro-music__tab-disc {
  background:
    radial-gradient(circle at center, var(--r-paper) 0 14%, transparent 15%),
    radial-gradient(circle at center, #0d0d0d 15% 34%, transparent 35%),
    repeating-radial-gradient(circle at center,
      color-mix(in srgb, var(--template) 82%, #000) 0 1px,
      var(--template) 1px 2.5px);
  border: 1px solid color-mix(in srgb, var(--template) 65%, #000);
}

/* recessed screen — a darkened well so the Spotify embed reads as inset */
.retro-music[data-variant="retro"] .retro-music__screen {
  background-color: #161616;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}