/**
 * Social Links — "retro" variant
 *
 * Paper sticker stamps: ink icon on cream, the brand color appears only on
 * hover (fill + auto-contrast icon via the global --on-template token, so it
 * stays legible whatever color the artist picks). Matches the retro nav.
 *
 * Note: never set `display` on .social-links-item — the global `.hide`
 * utility toggles these per social link and must win.
 */

/* let stamps wrap to a new row when the container is narrow */
.social-links-wrapper[data-variant="retro"] {
  flex-wrap: wrap;
}

.social-links-wrapper[data-variant="retro"] .social-links-item {
  color: #2a2018;
  background-color: #f3ecdb;
  border: 2px solid #2a2018;
  border-radius: 999px;
  padding: 0.4rem;
  box-shadow: 1px 2px 0 color-mix(in srgb, var(--template) 38%, #140d05);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease,
    color 0.2s ease;
}

/* normalise the smaller icon (bandsintown) to match the rest */
.social-links-wrapper[data-variant="retro"] .icon-embed-xxsmall {
  width: 1.5rem;
  height: 1.5rem;
}

.social-links-wrapper[data-variant="retro"] .social-links-item:hover {
  color: var(--on-template);
  background-color: var(--template);
  transform: rotate(8deg) scale(1.08);
}