/* ==========================================================================
   RSVP page — loads after style.css and reuses its tokens, nav, buttons and
   footer. Everything here is scoped to the RSVP hero and the reply form.
   ========================================================================== */

.rsvp-page {
  /* ink on cream for the form half of the page */
  --ink-soft: rgba(25, 49, 34, .78);
  --bronze-soft: rgba(77, 62, 19, .82);
  --gold-deep: #b98d2f;   /* the gold used for accents on cream elsewhere */
  --rule: rgba(77, 62, 19, .45);
}


/* ---------- Hero ---------- */

.rhero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + clamp(10px, 2vw, 30px)) 20px clamp(100px, 11vw, 150px);
  overflow: hidden;
  isolation: isolate;
}

.rhero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/Hero_Banner.webp") center 40% / cover no-repeat;
}

.rhero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(0, 0, 0, .58), rgba(0, 0, 0, .16) 72%),
    linear-gradient(180deg, rgba(8, 10, 8, .66) 0%, rgba(8, 10, 8, .24) 28%, rgba(6, 12, 8, .52) 74%, rgba(4, 8, 6, .8) 100%);
}

.rhero__content {
  position: relative;
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.rhero__logo {
  position: relative;
  margin: 0 auto clamp(10px, 1.4vw, 18px);
  width: min(80%, 620px);
}

.rhero__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .55));
}

/* A soft warm spotlight behind the mark, as on the home hero. */
.rhero__logo::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(239, 231, 214, .18), transparent 66%);
  filter: blur(22px);
}

.rhero .eyebrow { margin-bottom: clamp(12px, 1.6vw, 20px); }

.rhero__initiative {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, .9vw, 12px);
  margin: 0 0 clamp(6px, 1vw, 14px);
  color: rgba(239, 231, 214, .9);
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: 300;
  letter-spacing: .12em;
}

/* Same crop as the home hero: the supplied PNG is a square canvas with the
   wordmark centred inside a wide band of transparent padding, so the box is
   cropped down to the lettering itself. --ncia-h is that lettering's height. */
.rhero__ncia {
  --ncia-h: clamp(13px, 1.4vw, 19px);
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(var(--ncia-h) * 3.42);
  height: var(--ncia-h);
}

.rhero__ncia img {
  position: absolute;
  top: calc(var(--ncia-h) * -1.233);
  left: calc(var(--ncia-h) * -0.086);
  width: auto;
  height: calc(var(--ncia-h) * 3.584);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

.rhero__title {
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 128px);
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em;   /* recentres the block against the trailing letterspace */
  text-transform: uppercase;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .55);
}

.rhero__deadline {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  color: var(--white);
  font-size: clamp(11px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.rhero__date { color: var(--gold); }

.rhero__note {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  color: rgba(239, 231, 214, .78);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12px, 1.15vw, 17px);
  letter-spacing: .02em;
}

/* Hero and form both animate in on load, like the home page. */
.rhero__logo,
.rhero .eyebrow,
.rhero__initiative,
.rhero__title,
.rhero__deadline,
.rhero__note {
  animation: riseIn 1.1s cubic-bezier(.2, .7, .25, 1) both;
}

.rhero .eyebrow      { animation-delay: .16s; }
.rhero__initiative   { animation-delay: .24s; }
.rhero__title        { animation-delay: .32s; }
.rhero__deadline     { animation-delay: .44s; }
.rhero__note         { animation-delay: .54s; }


/* ---------- Cream form band ---------- */

.rform {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding: 0 0 clamp(50px, 6vw, 86px);
  background: var(--cream);
  color: var(--ink);
}

/* The gold arc: a very wide, shallow ellipse in cream that rises out of the
   band into the hero, its top edge drawn as the gold line. The ellipse has to
   be wider than the page to stay shallow, so this box is the viewport-wide
   window it is drawn inside — otherwise it would widen the document. */
.rform__dome {
  position: absolute;
  left: 0;
  right: 0;
  /* Overlaps the band by 2px: butted exactly against it, subpixel rounding
     leaves a hairline seam across the full width. */
  bottom: calc(100% - 2px);
  height: clamp(64px, 7.6vw, 115px);
  overflow: hidden;
  pointer-events: none;
}

.rform__dome::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  /* Exactly viewport-wide: the arc then meets the band's top edge at both
     sides, the way the artwork does, and keeps its full rise in the middle. */
  width: 100%;
  height: 100%;
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.rform__inner {
  position: relative;
  padding-top: clamp(18px, 2.2vw, 30px);
}

.rform__form {
  max-width: 1000px;
  margin: 0 auto;
}

.rform__head {
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 24px);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rform__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(26px, 3.4vw, 46px);
}

.rform__ornament-rule {
  width: clamp(40px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}

.rform__ornament-rule:last-child {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}

.rform__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
}


/* ---------- Custom check mark ---------- *
 * One square control shared by every choice on the page. The three cards, the
 * regrets line and the shirt sizes are radios — the options are mutually
 * exclusive — but they carry the printed form's square box.                */

.mark {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(185, 141, 47, .75);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.mark:hover { border-color: var(--gold-deep); }

.mark:checked {
  border-color: var(--gold-deep);
  background:
    linear-gradient(45deg, transparent 42%, var(--gold-deep) 42%, var(--gold-deep) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--gold-deep) 42%, var(--gold-deep) 58%, transparent 58%);
}

.mark:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}


/* ---------- The three participation cards ---------- */

.choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.choices__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.choice {
  position: relative;
  padding: clamp(34px, 3.4vw, 46px) clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
  border: 1px solid rgba(185, 141, 47, .6);
  background: rgba(254, 251, 245, .5);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.choice:hover {
  border-color: var(--gold-deep);
  box-shadow: 0 14px 30px rgba(77, 62, 19, .12);
  transform: translateY(-3px);
}

/* Dark disc straddling the top border, as on the printed card */
.choice__badge {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(42px, 4.2vw, 54px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-light);
  box-shadow: 0 10px 22px rgba(25, 49, 34, .24);
}

.choice__badge svg {
  width: 56%;
  height: 56%;
}

.choice__label {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.1vw, 14px);
  cursor: pointer;
}

.choice__label .mark { margin-top: 2px; }

.choice__title {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.45;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.choice__copy {
  margin: clamp(10px, 1.2vw, 15px) 0 0;
  padding-left: calc(18px + clamp(10px, 1.1vw, 14px));
  color: var(--ink-soft);
  font-size: clamp(11px, 1.02vw, 13.5px);
  font-weight: 300;
  line-height: 1.65;
}

.choice__times {
  display: grid;
  gap: 4px;
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  padding-left: calc(18px + clamp(10px, 1.1vw, 14px));
  color: var(--gold-deep);
  font-size: clamp(10px, .95vw, 12.5px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ---------- Regrets line ---------- */

.regrets { margin-top: clamp(20px, 2.6vw, 34px); }

/* A second line in the same group sits closer to the first. */
.regrets--tight { margin-top: clamp(12px, 1.4vw, 18px); }

.regrets__label {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.1vw, 14px);
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(12px, 1.25vw, 16px);
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.regrets__label .mark { margin-top: 1px; }

.regrets__note {
  margin: clamp(5px, .7vw, 9px) 0 0;
  padding-left: calc(18px + clamp(10px, 1.1vw, 14px));
  color: var(--bronze-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(10px, 1vw, 13px);
}


/* ---------- Write-in fields ---------- */

.rform__fill {
  margin: clamp(24px, 3vw, 40px) 0 clamp(14px, 1.6vw, 20px);
  color: var(--bronze-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(11px, 1.05vw, 14px);
}

.fields {
  display: grid;
  gap: clamp(12px, 1.5vw, 20px);
}

.field {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 14px);
  margin: 0;
  min-width: 0;
}

.field__label {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.field__label--note {
  font-family: var(--serif);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}

.field__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 4px 4px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(12px, 1.15vw, 16px);
  line-height: 1.4;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.field__input:hover { border-bottom-color: rgba(77, 62, 19, .7); }

.field__input:focus {
  outline: none;
  border-bottom-color: var(--gold-deep);
  box-shadow: 0 1px 0 0 var(--gold-deep);
}

.field-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(14px, 2.4vw, 40px);
}

/* Continuation line — indented under the label it belongs to */
.field--cont { padding-left: clamp(0px, 2vw, 26px); }


/* ---------- Golf registration box ---------- */

.golfbox {
  display: grid;
  gap: clamp(12px, 1.5vw, 20px);
  margin: clamp(28px, 3.4vw, 46px) 0 0;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.4vw, 34px) clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--gold-deep);
  background: rgba(254, 251, 245, .45);
}

/* Floating the legend keeps it in normal flow, so the box keeps an unbroken
   top border and the title sits inside it, laurels either side. */
.golfbox__legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, .8vw, 11px);
  margin: 0 0 clamp(10px, 1.3vw, 18px);
  padding: 0;
  color: var(--gold-deep);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(13px, 1.55vw, 21px);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

/* The pair mirrors around the title: the opening branch is flipped from the
   artwork's own orientation, the closing one keeps it. */
.golfbox__laurel {
  flex: 0 0 auto;
  width: auto;
  height: clamp(26px, 3vw, 40px);
  transform: scaleX(-1);
}

.golfbox__laurel--flip { transform: none; }

/* rsvp-confirm.html: the title heads the form itself rather than a box. */
.golfbox__legend--top {
  float: none;
  margin: clamp(24px, 3vw, 40px) 0 clamp(14px, 1.6vw, 20px);
}

.sizes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 14px) clamp(10px, 1.4vw, 18px);
}

.sizes__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 26px);
}

.size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink);
  font-size: clamp(11px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: .08em;
}

/* rsvp-confirm.html: collapsible size chart under the shirt sizes. */
.sizechart__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--gold-deep);
  font-family: var(--serif);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sizechart__toggle::-webkit-details-marker { display: none; }

.sizechart__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.sizechart[open] .sizechart__toggle::after { transform: translateY(2px) rotate(-135deg); }

.sizechart__img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-top: clamp(10px, 1.3vw, 16px);
  border: 1px solid var(--gold-deep);
}

.sizechart__zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.sizechart__lightbox {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.sizechart__lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sizechart__lightbox::backdrop { background: rgba(10, 10, 10, .85); }

.sizechart__lightbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--gold-deep);
}

.sizechart__close {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.golfbox__note {
  margin: clamp(2px, .5vw, 6px) 0 0;
  color: var(--bronze-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.5;
}


/* ---------- Submit + closing line ---------- */

.rform__actions {
  display: flex;
  justify-content: center;
  margin: clamp(28px, 3.4vw, 46px) 0 0;
}

.rform__actions .btn { border-radius: 0; }

.rform__closing {
  margin: clamp(26px, 3.2vw, 44px) 0 0;
  text-align: center;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: .02em;
}


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

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.rform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rform__status {
  margin: clamp(22px, 2.8vw, 34px) auto 0;
  max-width: 720px;
  padding: 16px 20px;
  border-left: 3px solid var(--gold-deep);
  background: rgba(220, 172, 68, .12);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.6;
  text-align: center;
}

.rform__status[hidden] { display: none; }

.rform__status.is-ok {
  border-left-color: #2f6b45;
  background: rgba(47, 107, 69, .12);
}

.rform__status.is-error {
  border-left-color: #a4362f;
  background: rgba(164, 54, 47, .1);
  color: #7d2a24;
}

/* Server-side rejection: underline the offending write-in line. */
.has-error .field__input,
.field.has-error .field__input { border-bottom-color: #a4362f; }

.has-error .field__label { color: #7d2a24; }


/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .choices__list { grid-template-columns: 1fr 1fr; }
  .choice:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .choices__list { grid-template-columns: 1fr; }
  .choice:last-child { grid-column: auto; }

  .field-row { grid-template-columns: 1fr; gap: clamp(12px, 1.5vw, 20px); }

  /* Labels stack above their rules so long ones stop squeezing the write-in */
  .field {
    flex-wrap: wrap;
    gap: 4px;
  }

  .field__input { flex-basis: 100%; }

  .sizes { align-items: flex-start; flex-direction: column; }
}