/**
 * Retro Newsletter — "retro" variant
 *
 * Cream paper store wall; the sign-up is a mail-in coupon. Warm card with a
 * dashed cut-here border, a perforated brand postage stamp, an email fill-in
 * field, and a brand price-tag Subscribe button (the hero CTA / shows shape).
 *
 * CONTRAST: heading/copy/field are ink on paper/white. The brand shows through
 * the kicker, the postage stamp, and the price-tag button edge + hole. No body
 * text on a raw --template fill — legible at any brand color.
 */

.retro-newsletter[data-variant="retro"] {
  --r-paper:   #f3ecdb;
  --r-ink:     #2a2018;
  --r-white:   #fcfaf3;
  --r-deep:    color-mix(in srgb, var(--template) 40%, #160f06);
  --r-success: #3f6b4e;
  --r-error:   #a83a2b;

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

/* ---- coupon card: warm paper, dashed cut-here border ---- */

.retro-newsletter[data-variant="retro"] .retro-newsletter__card {
  background-color: var(--r-white);
  border: 2px dashed var(--r-ink);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(20, 12, 4, 0.14);
}

/* ---- postage stamp: brand fill, auto-contrast icon, perforated white edge ---- */

.retro-newsletter[data-variant="retro"] .retro-newsletter__stamp {
  /* the perforation: white dots punched around the edge */
  background:
    radial-gradient(circle, var(--r-white) 36%, transparent 38%) 0 0 / 0.5rem 0.5rem;
  background-color: var(--template);
  filter: drop-shadow(0 2px 3px rgba(20, 12, 4, 0.22));
}

.retro-newsletter[data-variant="retro"] .retro-newsletter__stamp-inner {
  background-color: var(--template);
  color: var(--on-template);
  border: 1px solid color-mix(in srgb, var(--on-template) 35%, transparent);
}

/* ---- copy ---- */

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

.retro-newsletter[data-variant="retro"] .retro-newsletter__heading {
  color: var(--r-ink);
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--template) 35%, transparent);
}

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

/* ---- field ---- */

.retro-newsletter[data-variant="retro"] .retro-newsletter__input {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
}

.retro-newsletter[data-variant="retro"] .retro-newsletter__input::placeholder {
  color: color-mix(in srgb, var(--r-ink) 45%, transparent);
}

.retro-newsletter[data-variant="retro"] .retro-newsletter__input:focus-visible {
  outline-color: var(--template);
}

/* ---- Subscribe price-tag ---- */

.retro-newsletter[data-variant="retro"] .retro-newsletter__cta {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  border-left: 0.45rem solid var(--template);
}

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

/* ---- status ---- */

.retro-newsletter[data-variant="retro"] .retro-newsletter__status.is-success {
  color: var(--r-success);
  font-weight: 600;
}

.retro-newsletter[data-variant="retro"] .retro-newsletter__status.is-error {
  color: var(--r-error);
  font-weight: 600;
}