/**
 * Retro About — "retro" variant
 *
 * A record package: B&W-leaning cover photo, a band in the artist's brand
 * color carrying the name / socials / bio, and a brand-color vinyl with a
 * black center peeking out behind.
 *
 * Contrast: the band IS the template color, so its text uses the
 * auto-contrast --on-template token (flips black/white with the brand
 * color). The vinyl carries no text. See COMPONENT_GUIDE.md.
 */

.retro-about[data-variant="retro"] {
  --r-paper:   #f3ecdb;
  --r-paper-2: #e7dcc3;
  --r-ink:     #2a2018;

  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);
}

/* ---- cover ---- */

.retro-about[data-variant="retro"] .retro-about__cover {
  border: 0.4rem solid var(--r-paper);
  outline: 2px solid var(--r-ink);
  outline-offset: -0.4rem;
}

.retro-about[data-variant="retro"] .retro-about__cover-img {
  filter: grayscale(0.55) contrast(1.05) sepia(0.12);
}

/* ---- colored band ---- */

.retro-about[data-variant="retro"] .retro-about__band {
  color: var(--on-template);
}

/* the panel surface (a layer, so the vinyl can tuck behind it) */
.retro-about[data-variant="retro"] .retro-about__band::before {
  background-color: var(--template);
  border: 2px solid var(--r-ink);
}

.retro-about[data-variant="retro"] .retro-about__name {
  color: var(--on-template);
}

.retro-about[data-variant="retro"] .retro-about__bio {
  color: var(--on-template);
}

/* socials sit on the colored band — restyle the shared stamps to read on
   the template fill: outline in --on-template, invert on hover */
.retro-about[data-variant="retro"] .retro-about__band .social-links-item {
  background-color: transparent;
  color: var(--on-template);
  border-color: var(--on-template);
  box-shadow: none;
}

.retro-about[data-variant="retro"] .retro-about__band .social-links-item:hover {
  background-color: var(--on-template);
  color: var(--template);
}

/* ---- vinyl: brand-color record, black center ---- */

.retro-about[data-variant="retro"] .retro-about__record {
  background:
    /* spindle hole */
    radial-gradient(circle at center, var(--r-paper) 0 1.5%, transparent 1.7%),
    /* black center label */
    radial-gradient(circle at center, #0d0d0d 1.7% 33%, transparent 33.3%),
    /* grooved brand-color vinyl */
    repeating-radial-gradient(circle at center,
      color-mix(in srgb, var(--template) 82%, #000) 0 0.18rem,
      var(--template) 0.18rem 0.44rem);
  border: 1px solid color-mix(in srgb, var(--template) 65%, #000);
}