/* ===========================================================================
   The RSVP page (002 FR-015 to FR-019, research R9).

   The couple's own words on the watercolour garden, as on reference/5.png:
   a very large "RSVP" with a smaller "here" beneath it, a paragraph about the
   two days, the WithJoy button, and one last line pointing to the FAQ.

   NO BOX. The text sits straight on the artwork (visual-rules V1). The garden
   is pale, but its darker hedges sit close in luminance to the olive ink, so
   the ground is faded over the cream field until the worst pixel behind the
   paragraph clears the large-text threshold at every width (the gate measures
   it; see the note beside the opacity).
   =========================================================================== */

.section--rsvp {
  background-color: var(--ground-cream);
  color: var(--ink);
  /* The tab row is absolutely positioned over the top of the page and scrolls
     with it, so the first section clears it (research R3). */
  padding-block-start: calc(var(--section-pad-block) + var(--touch-target));
}

/* Faded over the cream ground. Tuned against check:contrast, not by eye: the
   hedges at full strength sit too close to the olive ink under the text.
   Worst-pixel ratios at 320-1920 px (T029):
     0.85  paragraph 4.48:1   closing line 4.44:1 at 1920 px  <- FAILS 4.5:1
     0.80  paragraph 4.71:1   closing line 4.66:1             <- used: the most
           of the watercolour that still clears every threshold
     0.75  paragraph 4.92:1   closing line 4.88:1
   The closing line is body text (22 px, weight 600), so it is the binding one. */
.section--rsvp .section__ground {
  opacity: 0.80;
}

.rsvp__content {
  text-align: center;
}

.rsvp__heading {
  margin: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.rsvp__heading-main,
.rsvp__heading-sub {
  display: block;
  font-family: var(--font-display);
  color: var(--ink);
}

.rsvp__heading-main {
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.rsvp__heading-sub {
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1;
  /* Tucked up under the main line, as on the original. */
  margin-block-start: calc(-0.05 * var(--fs-xl));
}

.rsvp__paragraph {
  margin: var(--space-xl) auto 0;
  max-width: 46ch;
  font-family: var(--font-body);
  /* Large text (>= 24 px), so it needs 3:1 against the worst pixel, not 4.5. */
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .rsvp__paragraph {
    max-width: 52rem;
    text-align: justify;
    hyphens: auto;
  }
}

.rsvp__action {
  margin-block-start: var(--space-lg);
  /* Paragraphs have a global measure; the button's row spans the column so it
     centres on it. */
  max-width: none;
}

.rsvp__closing {
  margin: var(--space-lg) auto 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.rsvp__closing a {
  color: var(--accent-azulejo-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The WithJoy button. The shared primary style lives with the "Will you join
   us?" section, which this page does not load, and a cream button would vanish
   against the pale garden, so this page sets its own: deep olive with cream
   type (7.54:1), butter on hover, as on the dark RSVP moment (FR-017). */
.rsvp__action .rsvp-link--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--touch-target);
  padding: var(--space-2xs) var(--space-md);
  background: var(--ground-olive-deep);
  border: var(--rule-strong) solid var(--ground-olive-deep);
  color: var(--ink-reversed);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
}

.rsvp__action .rsvp-link--primary:hover,
.rsvp__action .rsvp-link--primary:focus-visible {
  background: var(--accent-butter);
  border-color: var(--accent-butter);
  color: var(--ink);
}

@media (max-width: 26rem) {
  .rsvp__action .rsvp-link--primary {
    /* At 320 px the full label does not fit on one line, and a wrapped CTA is
       broken, so the type steps down rather than the button growing. */
    font-size: var(--fs-sm);
  }
}