/**
 * Retro Bandcamp — "retro" variant
 *
 * Each embed is a card in the bin: a numbered catalog title (display face), the
 * Bandcamp player in a paper-mat keyline frame matching the hero posters, and an
 * uppercase ink credit link. No background of its own — it inherits the section's
 * cream paper so the cells sit on the same ground as the Spotify frame above.
 *
 * CONTRAST: titles/credits are ink on paper; the brand shows through the catalog
 * index and the link underline. Legible at any brand color.
 */

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

  counter-reset: bc-release;
  color: var(--r-ink);
}

/* Catalog title — display face with a numbered index. */
.bandcamp-retro[data-variant="retro"] .bandcamp-retro__player {
  counter-increment: bc-release;
}

.bandcamp-retro[data-variant="retro"] .bandcamp-retro__caption {
  font-family: var(--header);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.05;
  color: var(--r-ink);
}

/* "01 ·" catalog index in the mono/body face before the title. */
.bandcamp-retro[data-variant="retro"] .bandcamp-retro__caption::before {
  content: counter(bc-release, decimal-leading-zero) " \00B7 ";
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--r-deep);
  vertical-align: 0.22em;
}

/* Paper-mat frame around the Bandcamp iframe — hero-poster keyline. */
.bandcamp-retro[data-variant="retro"] .bandcamp-retro__frame {
  background-color: var(--r-paper);
  border: 0.4rem solid var(--r-paper);
  outline: 2px solid var(--r-ink);
  outline-offset: -0.4rem;
}

/* Credit link — uppercase ink micro-link with a brand underline + ↗. */
.bandcamp-retro[data-variant="retro"] .bandcamp-retro__link {
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.bandcamp-retro[data-variant="retro"] .bandcamp-retro__link::after {
  content: " \2197"; /* ↗ */
  letter-spacing: 0;
}

.bandcamp-retro[data-variant="retro"] .bandcamp-retro__link:hover,
.bandcamp-retro[data-variant="retro"] .bandcamp-retro__link:focus-visible {
  border-bottom-color: var(--template);
}

@media (prefers-reduced-motion: reduce) {
  .bandcamp-retro[data-variant="retro"] .bandcamp-retro__link {
    transition: none;
  }
}