/* =====================================================================
   Stephanie & Ryan — RSVP
   =====================================================================

   Everything here is namespaced .rsvp-* so it cannot collide with the
   Webflow export. No Webflow class is overridden and no Webflow file is
   modified; this stylesheet only ever adds.

   Type and colour are inherited from the existing site rather than
   invented: The Artisan for the display heading, Gyst for everything
   else, and the six --_colours---* variables already declared in
   stephanie-and-ryan.webflow.css. The fallbacks below matter only if
   this file is ever loaded on its own.

   Breakpoints follow the export exactly: 991 / 767 / 479.
   ===================================================================== */

:root {
  /* ---- The six brand colours, taken straight from index.html ----
     These are the variables declared in stephanie-and-ryan.webflow.css.
     Change one there and this page follows. The hex values are only
     fallbacks, for the case where this stylesheet is loaded on its own. */
  --rsvp-ivory:  var(--_colours---cream,           #ebeae0);
  --rsvp-beige:  var(--_colours---bear,            #d9d1c4);
  --rsvp-taupe:  var(--_colours---mountain,        #bbaf9e);
  --rsvp-grey:   var(--_colours---deep-ocean,      #b5b8bc);
  --rsvp-matcha: var(--_colours---matcha,          #b7bd9f);
  --rsvp-sage:   var(--_colours---wanderlust-green,#929b81);

  /* ---- Everything below is DERIVED from those six ----
     The export defines no text colour and nothing dark enough to read
     at small sizes, so these are mixed from the brand colours rather
     than invented alongside them. Each pair declares a plain hex first and
     the color-mix second: a browser too old for color-mix keeps the hex,
     a current one computes from your variable.

     Deeper sage, for anything that has to be read — captions, the
     attending marker, button fills. The brand sage manages only 2.4:1
     on ivory, well under the 4.5:1 small text needs, and the Confirm
     button was exactly that. 65% of it measures 5.02:1. */
  --rsvp-sage-deep:  #5f6554;
  --rsvp-sage-deep:  color-mix(in srgb, var(--rsvp-sage) 65%, #000);
  --rsvp-sage-hover: #505547;
  --rsvp-sage-hover: color-mix(in srgb, var(--rsvp-sage) 55%, #000);

  /* Text tones — the same sage taken progressively darker, so the type
     sits in the palette rather than beside it. Warm, never black.
     All clear 4.5:1 on ivory except --rsvp-ink-faint, which is only
     ever used for placeholder text. */
  --rsvp-ink:        #3f4337;   /* 8.4:1 */
  --rsvp-ink:        color-mix(in srgb, var(--rsvp-sage) 43%, #000);
  --rsvp-ink-soft:   #636958;   /* 4.68:1 — 70% measured 4.48, just short */
  --rsvp-ink-soft:   color-mix(in srgb, var(--rsvp-sage) 68%, #000);
  --rsvp-ink-faint:  #7b826c;   /* 3.3:1 — placeholders only */
  --rsvp-ink-faint:  color-mix(in srgb, var(--rsvp-sage) 84%, #000);

  /* Hairlines: the brand taupe at partial opacity. */
  --rsvp-line:       rgba(187, 175, 158, 0.55);
  --rsvp-line:       color-mix(in srgb, var(--rsvp-taupe) 55%, transparent);
  --rsvp-line-firm:  rgba(187, 175, 158, 0.95);
  --rsvp-line-firm:  color-mix(in srgb, var(--rsvp-taupe) 95%, transparent);

  /* Barely-there off-whites, mixed up from the ivory rather than picked. */
  --rsvp-paper:      #faf9f7;
  --rsvp-paper:      color-mix(in srgb, var(--rsvp-ivory) 25%, #fff);
  --rsvp-page-alt:   #f3f2ec;
  --rsvp-page-alt:   color-mix(in srgb, var(--rsvp-ivory) 60%, #fff);

  /* Vertical rhythm. */
  --rsvp-space-xs:  8px;
  --rsvp-space-sm:  14px;
  --rsvp-space-md:  24px;
  --rsvp-space-lg:  40px;
  --rsvp-space-xl:  64px;
  --rsvp-space-2xl: 96px;

  --rsvp-measure: 560px;   /* the reading column */

  --rsvp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* How far the torn edge's teeth extend below the header's box.
     The strip is 3.6vw tall and the ragged detail averages ~54% down it
     (it spans 602..702 of the cropped 588..706 viewBox), minus the 2px
     the strip overlaps the band by. Measured at 1024px: 17.9px. */
  --rsvp-teeth-overhang: 1.75vw;
}

/* ---------------------------------------------------------------------
   Page
   ------------------------------------------------------------------ */

.rsvp-page {
  background-color: var(--rsvp-ivory);
  color: var(--rsvp-ink);
  /* Body copy follows .p on the site: Palatino, not Gyst.
     Deliberately NOT justified — the site justifies wide paragraph
     blocks, but justification in a 560px form column opens rivers. */
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  display: flex;
  flex-flow: column;
  margin: 0;
}

.rsvp-main {
  flex: 1 0 auto;
  width: 100%;
  /* Extra top padding clears the torn edge overhanging the header. */
  padding: calc(var(--rsvp-space-xl) + 3.4vw) 28px var(--rsvp-space-2xl);
  box-sizing: border-box;
}

/* The reading column. Deliberately narrow on desktop — the form stays
   centred and letter-like instead of stretching across the screen. */
.rsvp-shell {
  width: 100%;
  max-width: var(--rsvp-measure);
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Header
   ------------------------------------------------------------------

   Just the couple's names, centred, acting as the link home. No RSVP
   button — the reader is already on the RSVP page.

   .rsvp-wordmark is shared with the admin sign-in and setup screens.
   ------------------------------------------------------------------ */

/* A sage band with the torn edge along its bottom, matching the
   green-rough treatment on the site.

   images/green-rough.svg is the site's cream-rough artwork recoloured to
   the brand sage and cropped to just the ragged band (the original is a
   solid block with the raggedness in its bottom ~100 units; the header's
   own background supplies the solid part).

   The artwork's path stops ~125 units short of the left edge of its
   viewBox, so the strip is oversized to 120% and centred — the same
   trick .cream-rough uses on the homepage — to push that gap out of
   sight. Height is in vw so the teeth keep their proportions at every
   width, with a floor so they don't vanish on a small phone. */
.rsvp-header {
  position: relative;
  background-color: var(--rsvp-sage);
  /* Centred against the *visible* green, not the header box.
     Because the teeth hang below the box, the green's optical centre is
     lower than the box's. Solving  PT + textHeight/2 = (H + overhang)/2
     gives  PT - PB = overhang  exactly — so the two paddings straddle
     42px by half the overhang each, which also keeps the band's overall
     height unchanged. */
  padding-top: calc(42px + var(--rsvp-teeth-overhang) / 2);
  padding-bottom: calc(42px - var(--rsvp-teeth-overhang) / 2);
  padding-left: 28px;
  padding-right: 28px;
  text-align: center;
  border-bottom: 0;
}

.rsvp-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* Sits just below the band, so the teeth hang into the page. */
  bottom: -3.4vw;
  height: 3.6vw;
  min-height: 15px;
  background-image: url('../images/green-rough.svg?v=c93bd04e');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 120% 100%;
  pointer-events: none;
}

.rsvp-wordmark {
  font-family: 'The Artisan', Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  /* Ivory, because it now sits on the sage band — the same pairing the
     hero uses over the photograph. Ivory on sage is 2.4:1, which is
     fine here and only here: this is 44px display type, not something
     anyone has to read at size. */
  color: var(--rsvp-ivory);
  text-decoration: none;
  display: inline-block;
}

/* The ampersand is set in Gyst, not the script — the same treatment the
   hero uses on index.html, where .h1 is The Artisan at 218px and .amp is
   Gyst at 140px, nudged up 13px.
   Kept as ratios so the pairing holds at any size, including the admin
   bar: 140/218 = 0.64em.
   The offset needs a second step. `top` in em resolves against this
   element's own font-size, not the parent's, so the hero's 13/218 of the
   *heading* size becomes 13/140 of the ampersand's — 0.093em. Using
   0.06em here would land it about a third short. */
.rsvp-amp {
  font-family: Gyst, Georgia, sans-serif;
  font-size: 0.64em;
  font-weight: 300;
  position: relative;
  top: -0.093em;
}

/* ---------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------ */

/* The display heading, set in Gyst.
   An acronym reads awkwardly in a handwriting script — letters that are
   meant to join have nothing to join to — so RSVP is set in the body
   face instead, widely letterspaced in the light weight. That echoes the
   .h1-sub treatment on the hero (uppercase Gyst, letterspaced, 300). */
.rsvp-display {
  font-family: Gyst, Georgia, serif;
  font-size: 84px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.14em;
  /* Letter-spacing adds a trailing space after the final letter, which
     sits inside the centred line box and pushes the glyphs half a space
     left of true centre. Nudge back by half of it. */
  text-indent: 0.07em;
  color: var(--rsvp-sage);
  text-align: center;
  margin: 0 0 var(--rsvp-space-md);
}

/* The script is kept for actual words — "Thank You" is a phrase, and
   joined letterforms are exactly what it wants. */
.rsvp-display--script {
  font-family: 'The Artisan', Georgia, serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: normal;
  text-indent: 0;
}

/* Section headings — small, letterspaced, uppercase. Borrowed from the
   .h1-sub treatment on the hero so the two pages share a voice. */
.rsvp-label {
  font-family: Gyst, Georgia, serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--rsvp-sage-deep);
  margin: 0 0 var(--rsvp-space-sm);
}

/* Major section headings, in the site's .title treatment — The Artisan
   in sage. The site sets .title at 70px for "The Details" / "Our Story";
   this is the same voice at a size that suits a form. */
.rsvp-section-title {
  font-family: 'The Artisan', Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: var(--rsvp-sage);
  margin: 0 0 var(--rsvp-space-sm);
}

.rsvp-lede {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
  color: var(--rsvp-ink);
  margin: 0 auto var(--rsvp-space-xs);
  max-width: 40ch;
}

.rsvp-lede em {
  font-style: italic;
}

/* The personalised greeting on the invitation — "Paulina & Tom, we'd
   love to celebrate with you." Left-aligned to the form rather than
   centred like .rsvp-lede, so it sits with the questions beneath it. */
.rsvp-greeting {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--rsvp-ink);
  text-align: left;
  max-width: 42ch;
  margin: 0 0 var(--rsvp-space-md);
}

.rsvp-note {
  font-size: 15px;
  color: var(--rsvp-ink-soft);
  text-align: center;
  margin: 0 auto;
  max-width: 44ch;
}

.rsvp-name {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--rsvp-ink);
}

/* The site's divider is .line — a vertical 2px x 100px sage bar, not a
   horizontal rule. Shortened here so it doesn't eat a form's vertical
   space. The horizontal hairline below is kept for separating rows,
   which the site has no equivalent for. */
.rsvp-rule {
  width: 2px;
  height: 72px;
  background-color: var(--rsvp-sage);
  border: 0;
  /* The site centres .title and .line together inside a centred
     wrapper. The form is a left-aligned document, so the bar is aligned
     to the text edge instead — centring a single element in a left-
     aligned column reads as a mistake rather than a device. */
  margin: var(--rsvp-space-lg) 0;
}

.rsvp-rule--full {
  width: 100%;
  background-color: var(--rsvp-line);
  margin: var(--rsvp-space-md) auto;
}

/* ---------------------------------------------------------------------
   Steps
   ------------------------------------------------------------------ */

.rsvp-step {
  display: none;
}

.rsvp-step.is-active {
  display: block;
  animation: rsvp-enter 0.55s var(--rsvp-ease) both;
}

@keyframes rsvp-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.rsvp-section {
  margin-bottom: var(--rsvp-space-lg);
}

/* ---------------------------------------------------------------------
   Name search
   ------------------------------------------------------------------ */

.rsvp-search {
  position: relative;
  margin-top: var(--rsvp-space-lg);
}

/* Underline-only fields. No boxes, no fills, no rounded corners —
   the form should read as ruled paper, not as an app. */
.rsvp-input,
.rsvp-textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rsvp-line-firm);
  border-radius: 0;
  padding: 14px 2px;
  font-family: Gyst, Georgia, serif;
  /* 16px minimum, or iOS zooms the page on focus. */
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--rsvp-ink);
  transition: border-color 0.25s var(--rsvp-ease);
  -webkit-appearance: none;
  appearance: none;
}

.rsvp-search .rsvp-input {
  text-align: center;
  font-size: 20px;
  padding: 16px 2px;
}

.rsvp-input::placeholder,
.rsvp-textarea::placeholder {
  color: var(--rsvp-ink-faint);
  font-weight: 300;
  opacity: 1;
}

.rsvp-input:focus,
.rsvp-textarea:focus {
  outline: none;
  border-bottom-color: var(--rsvp-sage-deep);
}

.rsvp-textarea {
  resize: vertical;
  min-height: 76px;
}

/* Results. A quiet panel with a hairline, no shadow, no rounding. */
.rsvp-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--rsvp-paper);
  border: 1px solid var(--rsvp-line-firm);
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.22s var(--rsvp-ease), transform 0.22s var(--rsvp-ease);
}

.rsvp-results.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rsvp-result {
  padding: 15px 20px;
  font-size: 17px;
  color: var(--rsvp-ink);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--rsvp-taupe) 28%, transparent);
  /* Comfortable target on a phone. */
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: background-color 0.18s var(--rsvp-ease);
}

.rsvp-result:last-child {
  border-bottom: 0;
}

.rsvp-result:hover,
.rsvp-result.is-highlighted {
  background-color: color-mix(in srgb, var(--rsvp-matcha) 28%, transparent);
}

.rsvp-result-empty {
  padding: 18px 20px;
  font-size: 16px;
  color: var(--rsvp-ink-soft);
  cursor: default;
}

.rsvp-searching {
  text-align: center;
  font-size: 14px;
  color: var(--rsvp-ink-faint);
  margin-top: var(--rsvp-space-sm);
  min-height: 22px;
}

/* ---------------------------------------------------------------------
   Arriving with an invitation already in hand

   From the home page's search, or from a link in a confirmation email.
   The page has nothing to ask — it's fetching — so the asking half of
   the search step is left undrawn and the heading stands over a line
   saying what's happening. The mark is put on by the script in the head
   of index.php and taken off the moment rsvp.js shows a step, so a link
   that turns out to be stale still lands on a working search.
   ------------------------------------------------------------------ */

.rsvp-arriving #step-search .rsvp-note,
.rsvp-arriving #step-search .rsvp-search,
.rsvp-arriving #step-search .rsvp-message {
  display: none;
}

/* Only while the script hasn't spoken yet: it writes the same sentence
   into this line as soon as it runs, and :empty stops matching then. */
.rsvp-arriving #search-status:empty::before {
  content: 'Opening your invitation\2026';
}

/* ---------------------------------------------------------------------
   A person, and their answer
   ------------------------------------------------------------------ */

.rsvp-person {
  padding: var(--rsvp-space-md) 0;
  border-top: 1px solid var(--rsvp-line);
}

.rsvp-person:first-of-type {
  border-top: 0;
}

.rsvp-person-question {
  font-size: 15px;
  color: var(--rsvp-ink-soft);
  margin: 4px 0 var(--rsvp-space-sm);
}

/* Real radios, visually hidden. Keyboard users get arrow-key movement
   within the group for free, and the labels stay clickable. */
.rsvp-choices {
  display: flex;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}

.rsvp-choice {
  flex: 1 1 0;
  position: relative;
}

.rsvp-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.rsvp-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 12px 10px 12px 16px;
  box-sizing: border-box;
  border: 1px solid var(--rsvp-line-firm);
  border-radius: 5px;
  background: transparent;
  font-family: Gyst, Georgia, sans-serif;
  font-size: 13px;
  font-weight: 400;
  /* Well under the site's 11px — "Regretfully declines" is a long label
     and has to survive a 280px phone. */
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--rsvp-ink-soft);
  cursor: pointer;
  transition: background-color 0.25s var(--rsvp-ease),
              border-color 0.25s var(--rsvp-ease),
              color 0.25s var(--rsvp-ease);
}

.rsvp-choice span:hover {
  border-color: var(--rsvp-taupe);
  color: var(--rsvp-ink);
}

.rsvp-choice input:checked + span {
  background-color: var(--rsvp-sage-deep);
  border-color: var(--rsvp-sage-deep);
  color: var(--rsvp-ivory);
}

.rsvp-choice input:focus-visible + span {
  outline: 1px solid var(--rsvp-sage-deep);
  outline-offset: 3px;
}

/* Fields that appear once an answer is given. */
.rsvp-reveal {
  overflow: hidden;
  animation: rsvp-reveal 0.45s var(--rsvp-ease) both;
}

@keyframes rsvp-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.rsvp-field {
  margin-top: var(--rsvp-space-md);
}

.rsvp-field-label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rsvp-ink-soft);
  margin-bottom: 2px;
}

.rsvp-field-help {
  font-size: 14px;
  color: var(--rsvp-ink-soft);
  margin: 6px 0 0;
}

.rsvp-select {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rsvp-line-firm);
  border-radius: 0;
  padding: 14px 2px;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--rsvp-ink);
  -webkit-appearance: none;
  appearance: none;
}

.rsvp-select:focus {
  outline: none;
  border-bottom-color: var(--rsvp-sage-deep);
}

/* ---------------------------------------------------------------------
   Review
   ------------------------------------------------------------------ */

.rsvp-review-block {
  padding: var(--rsvp-space-md) 0;
  border-top: 1px solid var(--rsvp-line);
}

.rsvp-review-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.rsvp-review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 5px 0;
}

.rsvp-review-name {
  font-size: 18px;
  color: var(--rsvp-ink);
}

.rsvp-review-value {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rsvp-ink-soft);
  white-space: nowrap;
}

.rsvp-review-value.is-attending {
  color: var(--rsvp-sage-deep);
}

.rsvp-review-detail {
  font-size: 15px;
  color: var(--rsvp-ink-soft);
  padding: 2px 0 6px;
}

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.rsvp-actions {
  margin-top: var(--rsvp-space-lg);
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--rsvp-space-sm);
}

.rsvp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  /* .button-primary pads asymmetrically (25px left, 10px right) so the
     trailing letter-space doesn't push the label off-centre. Same
     trick, scaled to this tracking. */
  padding: 15px 20px 15px 26px;
  box-sizing: border-box;
  border: 1px solid var(--rsvp-sage-deep);
  border-radius: 5px;
  background-color: var(--rsvp-sage-deep);
  color: var(--rsvp-ivory);
  font-family: Gyst, Georgia, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s var(--rsvp-ease),
              border-color 0.25s var(--rsvp-ease),
              color 0.25s var(--rsvp-ease),
              opacity 0.25s var(--rsvp-ease);
}

.rsvp-btn:hover {
  background-color: var(--rsvp-sage-hover);
  border-color: var(--rsvp-sage-hover);
}

.rsvp-btn:focus-visible {
  outline: 1px solid var(--rsvp-ink);
  outline-offset: 3px;
}

.rsvp-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.rsvp-btn--ghost {
  background: transparent;
  color: var(--rsvp-ink);
  border-color: var(--rsvp-line-firm);
}

.rsvp-btn--ghost:hover {
  background: transparent;
  border-color: var(--rsvp-taupe);
}

/* A text link masquerading as a button — for "go back". */
.rsvp-btn--quiet {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 8px 4px;
  color: var(--rsvp-ink-soft);
  letter-spacing: 2.2px;
  border-bottom: 1px solid transparent;
}

.rsvp-btn--quiet:hover {
  background: transparent;
  color: var(--rsvp-ink);
  border-bottom-color: var(--rsvp-taupe);
}

/* ---------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------ */

.rsvp-message {
  margin: var(--rsvp-space-md) 0;
  padding: 14px 18px;
  border-left: 2px solid var(--rsvp-taupe);
  background-color: color-mix(in srgb, var(--rsvp-beige) 35%, transparent);
  font-size: 16px;
  line-height: 1.65;
  color: var(--rsvp-ink);
}

.rsvp-message--quiet {
  border-left-color: var(--rsvp-matcha);
  background-color: color-mix(in srgb, var(--rsvp-matcha) 22%, transparent);
}

.rsvp-message[hidden] {
  display: none;
}

/* Screen-reader-only, for the live region announcing result counts. */
.rsvp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Confirmation
   ------------------------------------------------------------------ */

.rsvp-confirmation {
  text-align: center;
}

.rsvp-confirmation .rsvp-review-block {
  text-align: left;
}

/* ---------------------------------------------------------------------
   Breakpoints — matching the Webflow export
   ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .rsvp-display          { font-size: 66px; }
  .rsvp-display--script  { font-size: 84px; }
  .rsvp-main             { padding-top: calc(var(--rsvp-space-lg) + 3.4vw); }
}

@media screen and (max-width: 767px) {
  .rsvp-display         { font-size: 54px; }
  .rsvp-display--script { font-size: 72px; }
  .rsvp-lede    { font-size: 18px; }
  .rsvp-main    { padding-left: 24px; padding-right: 24px; }
  .rsvp-wordmark { font-size: 38px; }
  .rsvp-section-title { font-size: 32px; }
}

@media screen and (max-width: 479px) {
  /* 320px minus 40px of padding leaves 280px; RSVP at 0.14em tracking
     needs to come down a long way to sit inside that. */
  .rsvp-display         { font-size: 40px; letter-spacing: 0.18em; }
  .rsvp-display--script { font-size: 58px; letter-spacing: normal; }
  .rsvp-main     { padding: calc(var(--rsvp-space-md) + 3.4vw) 20px var(--rsvp-space-xl); }
  .rsvp-header   { padding: 31px 18px 25px; }
  .rsvp-wordmark { font-size: 28px; }
  .rsvp-section-title { font-size: 28px; }
  .rsvp-lede     { font-size: 17px; }

  /* Stack the accept/decline pair rather than squeezing two lots of
     letterspaced uppercase into 280px. */
  .rsvp-choices  { flex-flow: column; gap: 10px; }
  .rsvp-choice span { min-height: 50px; }

  .rsvp-btn      { width: 100%; padding: 16px 20px; }

  .rsvp-review-row {
    flex-flow: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .rsvp-step.is-active,
  .rsvp-reveal {
    animation: none;
  }
  .rsvp-page *,
  .rsvp-page *::before,
  .rsvp-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---------------------------------------------------------------------
   The wordmark outside the sage band
   ------------------------------------------------------------------
   The admin sign-in and setup screens use .rsvp-wordmark on plain ivory,
   where ivory type would be invisible. Sage there instead.
   ------------------------------------------------------------------ */

.rsvp-page > .rsvp-main .rsvp-wordmark,
.adm-body .rsvp-wordmark {
  color: var(--rsvp-sage);
}


/* =====================================================================
   The invitation
   =====================================================================

   The public RSVP page dressed as the invitation it answers, following
   the Webflow reference page (webflow-export/rsvp.html): the whole page
   in sage, one cream-bordered card, the cream logo at its head, titles in
   The Artisan, names in letterspaced Gyst, and a pair of buttons for each
   guest's answer.

   Scoped to .rsvp-invite, which only the public page carries. The admin
   sign-in and setup screens share this stylesheet and .rsvp-page, and
   keep the look above.

   Every step sits in the same card — search, the email check, the
   invitation, review and thank you — so it reads as one invitation from
   the first name typed to the last line.

   Colour. Cream on this sage is 2.4:1, the site's own pairing, and it's
   kept for everything that is the design: titles, greeting, names, the
   answer buttons and the actions. Two things are held to a readable
   standard instead, because a guest has to act on them — anything typed
   into is solid cream with dark green text (4.59:1), and error messages
   sit on the same cream as a small chip. Routine search progress stays
   in the page's cream.
   ===================================================================== */

.rsvp-invite {
  --inv-ground: var(--rsvp-sage);
  --inv-ink:    var(--rsvp-ivory);
  --inv-read:   var(--_colours---dark-green, #646b57);
  --inv-hair:   rgba(235, 234, 224, 0.38);
  --inv-hair:   color-mix(in srgb, var(--rsvp-ivory) 38%, transparent);

  background-color: var(--inv-ground);
  color: var(--inv-ink);
  font-size: 16px;
}

/* The card, centred in the page. min-height rather than height, so a
   long reply — three guests, a plus one and a note — grows the page
   instead of spilling out of it. */
.rsvp-invite .rsvp-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 56px 20px;
}

.rsvp-invite .rsvp-shell {
  /* Wider than the old 560px reading column: two answer buttons side by
     side need about 520px between the card's own padding. */
  max-width: 640px;
  padding: 44px 40px;
  box-sizing: border-box;
  border: 1px solid var(--inv-ink);
  border-radius: 5px;
}

.rsvp-invite-logo {
  display: block;
  width: 70px;
  margin: 0 auto 43px;
}

.rsvp-invite-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.rsvp-invite-logo:focus-visible {
  outline: 1px solid var(--inv-ink);
  outline-offset: 6px;
  border-radius: 3px;
}

/* ---- Words ---------------------------------------------------------- */

/* Every step's title — RSVP, One moment, Your Invite, Your RSVP, Thank
   You — in the site's .title voice: The Artisan, 70px, centred. */
.rsvp-invite .rsvp-display,
.rsvp-invite .rsvp-display--script,
.rsvp-invite .rsvp-section-title {
  font-family: 'The Artisan', Georgia, serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
  text-indent: 0;
  text-align: center;
  color: var(--inv-ink);
  margin: 0 0 30px;
}

.rsvp-invite .rsvp-lede,
.rsvp-invite .rsvp-greeting,
.rsvp-invite .rsvp-note {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
  color: var(--inv-ink);
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

.rsvp-invite .rsvp-greeting {
  margin-bottom: 0;
}

.rsvp-invite .rsvp-review-intro {
  margin-bottom: 32px;
}

.rsvp-invite .rsvp-label,
.rsvp-invite .rsvp-field-label {
  font-family: Gyst, Georgia, sans-serif;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--inv-ink);
}

.rsvp-invite .rsvp-field-label {
  margin-bottom: 8px;
}

.rsvp-invite .rsvp-field-help {
  font-size: 14px;
  text-align: center;
  color: var(--inv-ink);
}

/* The reference has no divider under the greeting or the thank-you; the
   guests follow straight on. Full-width hairlines between sections stay,
   in cream. */
.rsvp-invite .rsvp-rule {
  display: none;
}

.rsvp-invite .rsvp-rule--full {
  height: 1px;
  /* An <hr> keeps its default inset border unless told otherwise, which
     drew this as a bevelled double line on the sage. */
  border: 0;
  background-color: var(--inv-hair);
}

/* ---- A guest, and their answer ------------------------------------- */

.rsvp-invite .rsvp-person {
  padding: 0;
  margin-top: 30px;
  border-top: 0;
  text-align: center;
}

.rsvp-invite .rsvp-name {
  font-family: Gyst, Georgia, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--inv-ink);
}

.rsvp-invite .rsvp-person-question {
  font-size: 14px;
  text-align: center;
  color: var(--inv-ink);
  margin: 10px 0 0;
}

.rsvp-invite .rsvp-choices {
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 24px;
}

.rsvp-invite .rsvp-choice {
  flex: 1 1 220px;
  max-width: 250px;
}

/* Both answers start as cream outlines on the sage. Choosing one fills
   it cream, exactly the accept button in the reference — so the fill
   means "this is my answer", and changing your mind moves it across. */
.rsvp-invite .rsvp-choice span {
  min-height: 52px;
  padding: 15px 20px 15px 21px;
  border: 1px solid var(--inv-ink);
  border-radius: 5px;
  background-color: transparent;
  color: var(--inv-ink);
  font-size: 14px;
  letter-spacing: 1px;
}

.rsvp-invite .rsvp-choice span:hover {
  border-color: var(--inv-ink);
  background-color: rgba(235, 234, 224, 0.12);
  color: var(--inv-ink);
}

.rsvp-invite .rsvp-choice input:checked + span {
  background-color: var(--inv-ink);
  border-color: var(--inv-ink);
  color: var(--inv-ground);
}

.rsvp-invite .rsvp-choice input:focus-visible + span {
  outline: 1px solid var(--inv-ink);
  outline-offset: 3px;
}

/* ---- Fields — held to a readable standard -------------------------- */

.rsvp-invite .rsvp-input,
.rsvp-invite .rsvp-textarea,
.rsvp-invite .rsvp-select {
  background-color: var(--inv-ink);
  border: 1px solid var(--inv-ink);
  border-radius: 5px;
  padding: 13px 16px;
  color: var(--inv-read);
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  /* 17px: never below 16, or iOS zooms the page on focus. */
  font-size: 17px;
  font-weight: 400;
  transition: box-shadow 0.25s var(--rsvp-ease);
}

.rsvp-invite .rsvp-search .rsvp-input {
  font-size: 18px;
  padding: 15px 16px;
}

.rsvp-invite .rsvp-input::placeholder,
.rsvp-invite .rsvp-textarea::placeholder {
  color: rgba(100, 107, 87, 0.7);
  color: color-mix(in srgb, var(--inv-read) 72%, var(--inv-ink));
}

/* A cream ring just outside the field: on sage it can't be missed, and
   it doesn't change the field itself. */
.rsvp-invite .rsvp-input:focus,
.rsvp-invite .rsvp-textarea:focus,
.rsvp-invite .rsvp-select:focus {
  border-color: var(--inv-ink);
  box-shadow: 0 0 0 3px var(--inv-ground), 0 0 0 4px var(--inv-ink);
}

/* appearance:none takes the select's arrow away with its chrome. */
.rsvp-invite .rsvp-select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23646b57' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.rsvp-invite .rsvp-results {
  background-color: var(--inv-ink);
  border: 1px solid var(--inv-ink);
  border-radius: 5px;
}

.rsvp-invite .rsvp-result,
.rsvp-invite .rsvp-result-empty {
  color: var(--inv-read);
}

.rsvp-invite .rsvp-result {
  border-bottom-color: rgba(100, 107, 87, 0.16);
}

/* ---- Messages ------------------------------------------------------- */

.rsvp-invite .rsvp-searching {
  color: var(--inv-ink);
}

/* An error in the search's live region, and every .rsvp-message: a
   small cream chip, centred, dark green words. display:table shrinks it
   to its text. */
.rsvp-invite .rsvp-searching.is-error {
  display: table;
  margin: 14px auto 0;
  padding: 8px 14px;
  border-radius: 5px;
  background-color: rgba(235, 234, 224, 0.95);
  color: var(--inv-read);
  font-size: 15px;
}

.rsvp-invite .rsvp-message,
.rsvp-invite .rsvp-message--quiet {
  border: 0;
  border-radius: 5px;
  background-color: rgba(235, 234, 224, 0.95);
  color: var(--inv-read);
  font-size: 15px;
  text-align: center;
}

/* ---- Actions -------------------------------------------------------- */

/* The main action is the reference's accept button — solid cream, sage
   Gyst — turning to an outline on hover. */
.rsvp-invite .rsvp-btn {
  min-height: 52px;
  padding: 15px 40px 15px 42px;
  border: 1px solid var(--inv-ink);
  background-color: var(--inv-ink);
  color: var(--inv-ground);
  font-size: 14px;
  letter-spacing: 2px;
}

.rsvp-invite .rsvp-btn:hover {
  background-color: transparent;
  border-color: var(--inv-ink);
  color: var(--inv-ink);
}

.rsvp-invite .rsvp-btn:focus-visible {
  outline: 1px solid var(--inv-ink);
  outline-offset: 3px;
}

.rsvp-invite .rsvp-btn--ghost {
  background-color: transparent;
  color: var(--inv-ink);
}

.rsvp-invite .rsvp-btn--quiet,
.rsvp-invite .rsvp-btn--quiet:hover {
  min-height: 0;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  color: var(--inv-ink);
  letter-spacing: 2px;
}

.rsvp-invite .rsvp-btn--quiet:hover {
  border-bottom-color: var(--inv-ink);
}

/* The hint under "A note for us" wants a breath before the field. */
.rsvp-invite [data-decline-note] .rsvp-person-question {
  margin-bottom: 14px;
}

/* ---- Review and thank you ------------------------------------------ */

/* Centred like everything else on the card. Name-then-answer rows stack
   rather than spreading to the card's edges, which in a centred card read
   as a table dropped in from somewhere else. */
.rsvp-invite .rsvp-review-block,
.rsvp-invite .rsvp-confirmation .rsvp-review-block {
  text-align: center;
}

.rsvp-invite .rsvp-review-row {
  flex-flow: column;
  align-items: center;
  gap: 2px;
}

.rsvp-invite .rsvp-review-block {
  border-top-color: var(--inv-hair);
}

.rsvp-invite .rsvp-review-name,
.rsvp-invite .rsvp-review-value,
.rsvp-invite .rsvp-review-value.is-attending,
.rsvp-invite .rsvp-review-detail {
  color: var(--inv-ink);
}

.rsvp-invite .rsvp-review-value {
  font-family: Gyst, Georgia, sans-serif;
}

/* ---- Narrower screens ---------------------------------------------- */

@media screen and (max-width: 767px) {
  .rsvp-invite .rsvp-shell { padding: 36px 24px; }
  .rsvp-invite .rsvp-display,
  .rsvp-invite .rsvp-display--script,
  .rsvp-invite .rsvp-section-title { font-size: 56px; }
}

@media screen and (max-width: 479px) {
  .rsvp-invite .rsvp-main  { padding: 20px 12px; }
  .rsvp-invite .rsvp-shell { padding: 30px 18px; }
  .rsvp-invite-logo { margin-bottom: 30px; }
  .rsvp-invite .rsvp-display,
  .rsvp-invite .rsvp-display--script,
  .rsvp-invite .rsvp-section-title { font-size: 46px; margin-bottom: 22px; }

  /* One answer above the other, full width, rather than two squeezed. */
  .rsvp-invite .rsvp-choices { flex-flow: column; gap: 12px; }
  .rsvp-invite .rsvp-choice  { flex: none; max-width: none; }
  .rsvp-invite .rsvp-btn     { width: 100%; padding: 15px 16px; }
}

/* =====================================================================
   "Regretfully declines"
   =====================================================================

   A word back, under the answer that prompted it. Set apart from the
   form's own voice: italic, a little quieter, and never more than one on
   the page however many people on the invitation can't come (rsvp.js
   decides which). */

.rsvp-sorry {
  max-width: 34em;
  margin: 16px auto 0;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  color: var(--rsvp-ivory);
}

.rsvp-sorry[hidden] {
  display: none;
}

.rsvp-invite .rsvp-sorry {
  color: var(--inv-ink);
}

/* ---------------------------------------------------------------------
   The site's mark under a heading
   ---------------------------------------------------------------------

   A hairline with a small ring at its foot — the device the home page
   puts under every section title. Same measurements as .line and
   .circle there: 1px wide, 100px tall, a 10px ring with a 1px edge, so
   the sign-in page reads as part of the same site rather than as the
   admin door it is.
   ------------------------------------------------------------------ */

.rsvp-mark {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.rsvp-mark-line {
  width: 1px;
  height: 100px;
  background-color: var(--rsvp-sage);
}

.rsvp-mark-dot {
  width: 10px;
  height: 10px;
  /* The site's ring is 10px across including its edge; without this the
     border is added outside it and it comes out 12. */
  box-sizing: border-box;
  border: 1px solid var(--rsvp-sage);
  border-radius: 50%;
}