/**
 * Retro Shows — "retro" variant
 *
 * Cream paper store wall; shows are concert ticket stubs. Each ticket is warm
 * paper with a brand edge, a kraft date counterfoil, a punched perforation, and
 * a brand price-tag Tickets button (the hero CTA shape).
 *
 * CONTRAST: all text is ink on paper/kraft. The brand shows through the ticket's
 * left edge, the price-tag button border + hole, and the day. No body text on a
 * raw --template fill — legible at any brand color (checked #ffffff and #111111).
 */

.retro-shows[data-variant="retro"] {
  --r-paper:   #f3ecdb;
  --r-paper-2: #e7dcc3;
  --r-ink:     #2a2018;
  --r-white:   #fcfaf3;
  --r-shade:   color-mix(in srgb, var(--template) 72%, #20160a);
  --r-deep:    color-mix(in srgb, var(--template) 40%, #160f06);
  --r-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  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-shows[data-variant="retro"] .retro-shows__kicker {
  color: var(--r-deep);
}

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

/* ───────────────────────────────────────────────────────── TICKET */

/* warm paper ticket, ink keyline, brand left edge, soft shadow */
.retro-shows[data-variant="retro"] .retro-shows__ticket {
  background-color: var(--r-white);
  border: 2px solid var(--r-ink);
  border-left: 0.5rem solid var(--template);
  border-radius: 12px;
  box-shadow: 0 5px 12px rgba(20, 12, 4, 0.14);
}

.retro-shows[data-variant="retro"] .retro-shows__ticket:hover {
  box-shadow: 0 12px 24px rgba(20, 12, 4, 0.22);
}

/* date counterfoil — kraft tint so it reads as a torn-off stub */
.retro-shows[data-variant="retro"] .retro-shows__stub {
  background-color: var(--r-paper-2);
}

.retro-shows[data-variant="retro"] .retro-shows__day {
  color: var(--r-ink);
}

.retro-shows[data-variant="retro"] .retro-shows__month {
  color: var(--r-shade);
}

.retro-shows[data-variant="retro"] .retro-shows__stub-label {
  color: color-mix(in srgb, var(--r-ink) 55%, transparent);
}

/* ───────────────────────────────────────────────────────── BODY */

.retro-shows[data-variant="retro"] .retro-shows__title {
  color: var(--r-ink);
}

.retro-shows[data-variant="retro"] .retro-shows__desc {
  color: color-mix(in srgb, var(--r-ink) 72%, transparent);
}

/* ticket badge — kraft stamp */
.retro-shows[data-variant="retro"] .retro-shows__ticket-badge {
  background-color: var(--r-paper-2);
  color: var(--r-ink);
  border: 1px solid color-mix(in srgb, var(--r-ink) 45%, transparent);
}

/* ───────────────────────────────────────────────────── BUTTON */

/* brand price-tag — paper plate, ink text, brand left edge + punched hole
   (the hero "Get in touch" CTA shape). Legible on any --template. */
.retro-shows[data-variant="retro"] .retro-shows__button {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  border-left: 0.45rem solid var(--template);
}

.retro-shows[data-variant="retro"] .retro-shows__button-hole {
  background-color: var(--template);
  border: 2px solid var(--r-ink);
}