:root {
  /* envelope paper — ivory, so the dark red wax carries the contrast */
  --env-1: #f4eee0;
  --env-2: #e9e0cd;
  --env-3: #d5c8ac;

  /* sage stays the ink palette for the invitation text */
  --sage-1: #93a583;
  --sage-2: #75886a;
  --sage-3: #566249;
  --gold: #c9a866;
  --cream: #fbf7ec;
  --ink: #3d4534;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  height: 100dvh;
  width: 100vw;
  background: radial-gradient(circle at 50% 20%, #fdfaf3 0%, #f3ece0 45%, #e6dcc8 100%);
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
  overflow: hidden;
  position: fixed;
  inset: 0;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1800px;
}

.envelope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* ---------- Card revealed inside ---------- */

.card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cream);
  text-align: center;
  /* padding now lives on .page, which is what actually holds the content */
  opacity: 0;
  transform: translateY(6%) scale(0.94);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: 0.05s;
  z-index: 1;
}

/* Vardzia backdrop */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/vardzia.webp") center / cover no-repeat;
  filter: blur(0.6px);
  /* overscale so the blur's soft edge never reaches the viewport bounds */
  transform: scale(1.04);
  z-index: 0;
}

/* cream veil keeps the invitation legible over a busy painting */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* a gentle wash — softens the painting without washing it out; the headline
     and button carry their own plates, so this is purely atmospheric */
  background: linear-gradient(
    180deg,
    rgba(251, 247, 236, 0.12) 0%,
    rgba(251, 247, 236, 0.16) 45%,
    rgba(251, 247, 236, 0.28) 75%,
    rgba(251, 247, 236, 0.34) 100%
  );
  z-index: 0;
}

.envelope.open .card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.95s;
}

/* ---------- Scrolling screens ---------- */

/* The scroller sits above the card's fixed backdrop, so the painting stays put
   while the invitation and the schedule scroll past it. */
.pages {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* a visible track would slice the full-bleed schedule screen down the edge */
  scrollbar-width: none;
}

.pages::-webkit-scrollbar {
  display: none;
}

/* on a screen too short to hold the schedule the sheet outgrows the viewport,
   and mandatory snapping would strand its bottom out of reach */
@media (max-height: 560px) {
  .pages { scroll-snap-type: y proximity; }
}

.page {
  position: relative;
  min-height: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 9%) 6% calc(env(safe-area-inset-bottom) + 9%);
}

/* ---------- Scroll cue ---------- */

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 26px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--sage-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: 1.4s;
}

.envelope.open .scroll-hint {
  opacity: 0.9;
}

.scroll-hint-text {
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(11px, 3vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(251, 247, 236, 0.9);
}

.chevron {
  width: 20px;
  height: 20px;
  animation: nudge 1.9s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(251, 247, 236, 0.9));
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* the cue has done its job once the schedule is on screen */
.pages.scrolled .scroll-hint {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pages { scroll-behavior: auto; }
  .chevron { animation: none; }

  /* the schedule still reveals, just without the travel */
  .sheet-head,
  .event,
  .sheet-foot {
    transform: none;
  }

  .event:not(:last-child)::before {
    transform: scaleY(1);
  }
}

/* ---------- Music toggle ---------- */

.music-toggle {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 14px);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(201, 168, 102, 0.5);
  border-radius: 50%;
  background: rgba(251, 247, 236, 0.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 3px 10px rgba(61, 69, 52, 0.14);
  color: var(--sage-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 6;
}

/* nothing to control until the envelope is open and the track is playing */
.envelope.open .music-toggle {
  opacity: 0.9;
  pointer-events: auto;
  transition-delay: 1.6s;
}

.music-toggle svg {
  width: 19px;
  height: 19px;
}

.music-toggle .speaker {
  fill: currentColor;
}

.music-toggle .wave,
.music-toggle .slash {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: opacity 0.2s ease;
}

.music-toggle .wave-far {
  opacity: 0.55;
}

.music-toggle .slash {
  opacity: 0;
}

.music-toggle.is-muted .wave {
  opacity: 0;
}

.music-toggle.is-muted .slash {
  opacity: 1;
}

/* Frosted plate lifting the names clear of the painting's rock detail */
.headline {
  /* block + fit-content so the button always sits below, never beside it */
  display: block;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 12px 18px 14px;
  border-radius: 16px;
  background: rgba(251, 247, 236, 0.5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow:
    0 0 0 1px rgba(201, 168, 102, 0.45),
    0 8px 22px rgba(61, 69, 52, 0.16);
}

.card-eyebrow {
  margin: 0 0 8px;
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(15px, 4.4vw, 19px);
  /* too long for one line at this size, so even out the two rather than
     leaving a stranded last word */
  text-wrap: balance;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-3);
}

.card-names {
  margin: 0;
  font-family: 'Marck Script', 'Noto Serif Georgian', cursive;
  font-weight: 400;
  font-size: clamp(27px, 8vw, 42px);
  color: var(--sage-3);
  line-height: 1.2;
}

.card-date {
  /* picks up the gap the divider used to hold */
  margin: 10px 0 0;
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(15px, 4.2vw, 19px);
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* ---------- Schedule sheet — full-bleed second screen ---------- */

/* the sheet is the page here, so the page's own inset would only shrink it */
.page-details {
  padding: 0;
}

.sheet {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 5vh, 44px);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding:
    calc(env(safe-area-inset-top) + 34px)
    clamp(34px, 8vw, 64px)
    calc(env(safe-area-inset-bottom) + 34px);
  /* frosted glass across the whole screen — quiet enough to read the schedule
     on, sheer enough that the rock face is still the thing behind it */
  background: linear-gradient(
    180deg,
    rgba(251, 247, 236, 0.4) 0%,
    rgba(251, 247, 236, 0.72) 32%,
    rgba(251, 247, 236, 0.72) 68%,
    rgba(251, 247, 236, 0.4) 100%
  );
  -webkit-backdrop-filter: blur(8px) saturate(1.06);
  backdrop-filter: blur(8px) saturate(1.06);
}

/* the glass runs the full width, but the invitation column inside it stays a
   readable measure — otherwise the times drift a screen away from the titles */
.sheet-head,
.schedule,
.sheet-foot {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* double gold hairline, the way a printed invitation is bordered */
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(201, 168, 102, 0.55);
}

.sheet::before {
  inset: 12px;
}

.sheet::after {
  inset: 18px;
  border-color: rgba(201, 168, 102, 0.22);
}

/* ---------- Sheet header ---------- */

.sheet-eyebrow {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-variant-numeric: lining-nums;
  font-size: clamp(13px, 3.4vw, 15px);
  letter-spacing: 0.3em;
  /* the tracking adds a phantom space after the last glyph */
  text-indent: 0.3em;
  color: var(--gold);
}

.sheet-title {
  margin: 0;
  font-family: 'Noto Serif Georgian', serif;
  font-weight: 500;
  font-size: clamp(17px, 4.8vw, 23px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-wrap: balance;
  color: var(--sage-3);
}

.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.flourish-line {
  width: min(70px, 16vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 102, 0.9));
}

.flourish-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(201, 168, 102, 0.9));
}

.flourish-mark {
  width: 13px;
  height: 13px;
  fill: var(--gold);
}

/* ---------- Timeline ---------- */

.schedule {
  --event-gap: clamp(16px, 3.4vh, 32px);
  padding: 0;
  list-style: none;
  text-align: left;
}

.event {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
}

.event + .event {
  margin-top: var(--event-gap);
}

/* connector running from one step's medallion down to the next */
.event:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: calc(var(--event-gap) * -1);
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(201, 168, 102, 0.75),
    rgba(201, 168, 102, 0.35)
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s ease;
}

.event-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 102, 0.85);
  background: linear-gradient(160deg, #fdfbf5, #f0e7d3);
  box-shadow:
    0 0 0 4px rgba(251, 247, 236, 0.5),
    0 4px 10px rgba(61, 69, 52, 0.14);
  font-family: 'Cormorant Garamond', serif;
  /* Cormorant defaults to old-style figures, which sit at uneven heights */
  font-variant-numeric: lining-nums;
  font-size: 15px;
  color: var(--sage-3);
}

.event-card {
  position: relative;
  overflow: hidden;
  padding: 13px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 248, 0.92),
    rgba(250, 245, 234, 0.86)
  );
  box-shadow:
    0 0 0 1px rgba(201, 168, 102, 0.35),
    0 6px 18px rgba(61, 69, 52, 0.12);
}

/* gilt spine on the leading edge of each card */
.event-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

.event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.event-title {
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(15px, 4.3vw, 18px);
  color: var(--sage-3);
}

.event-time {
  flex: none;
  /* lining + tabular so the three times align and sit at a uniform height */
  font-variant-numeric: lining-nums tabular-nums;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(14px, 3.9vw, 17px);
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.8;
}

/* the place opens Google Maps — inline-flex keeps the tap target on the text
   rather than stretching across the empty half of the card */
.event-place {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 4px 0 0;
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(12px, 3.4vw, 14px);
  color: var(--ink);
  text-decoration: none;
  opacity: 0.72;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
}

/* the text line is barely 17px tall — this grows the touch target to a
   thumb-sized band without moving anything on the page */
.event-place::after {
  content: "";
  position: absolute;
  inset: -7px -8px -10px;
}

/* a gold hairline is enough to read as tappable without shouting "link" */
.event-place span {
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 102, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.event-place:hover {
  opacity: 0.95;
}

.event-place:hover span {
  text-decoration-color: var(--gold);
}

.event-place:active {
  opacity: 1;
}

.event-place:focus-visible {
  outline: 2px solid var(--sage-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.pin {
  flex: none;
  width: 13px;
  height: 13px;
  fill: var(--gold);
}

/* ---------- RSVP call to action ---------- */

.rsvp-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  margin: 0 auto;
  padding: 12px 26px;
  border: 1px solid rgba(201, 168, 102, 0.85);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 248, 0.95),
    rgba(247, 240, 225, 0.9)
  );
  box-shadow:
    0 0 0 4px rgba(251, 247, 236, 0.35),
    0 6px 18px rgba(61, 69, 52, 0.16);
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(13px, 3.6vw, 15px);
  letter-spacing: 0.05em;
  color: var(--sage-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}

.rsvp-open:hover {
  box-shadow:
    0 0 0 5px rgba(251, 247, 236, 0.45),
    0 8px 22px rgba(61, 69, 52, 0.2);
}

.rsvp-open:active {
  transform: translateY(1px);
}

.rsvp-open-mark {
  flex: none;
  width: 12px;
  height: 12px;
  fill: var(--gold);
}

.sheet-foot {
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(12px, 3.3vw, 14px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--sage-3);
  opacity: 0.85;
}

/* ---------- Sheet reveal, staggered as the screen scrolls in ---------- */

.sheet-head,
.event,
.rsvp-open,
.sheet-foot {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.9, 0.28, 1);
}

.page-details.in-view .sheet-head,
.page-details.in-view .event,
.page-details.in-view .rsvp-open,
.page-details.in-view .sheet-foot {
  opacity: 1;
  transform: translateY(0);
}

.page-details.in-view .event:not(:last-child)::before {
  transform: scaleY(1);
}

.page-details.in-view .sheet-head { transition-delay: 0.06s; }
.page-details.in-view .event:nth-child(1) { transition-delay: 0.22s; }
.page-details.in-view .event:nth-child(2) { transition-delay: 0.36s; }
.page-details.in-view .event:nth-child(3) { transition-delay: 0.5s; }
.page-details.in-view .event:nth-child(1)::before { transition-delay: 0.4s; }
.page-details.in-view .event:nth-child(2)::before { transition-delay: 0.54s; }
.page-details.in-view .rsvp-open { transition-delay: 0.64s; }
.page-details.in-view .sheet-foot { transition-delay: 0.76s; }

/* ---------- Envelope flaps (4 triangles) ---------- */

.flap {
  position: absolute;
  inset: 0;
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.35, 1);
  backface-visibility: hidden;
}

.flap-top {
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  background: linear-gradient(155deg, var(--env-1), var(--env-2) 70%);
  transform-origin: top center;
  z-index: 4;
}

.flap-left {
  clip-path: polygon(0 0, 0 100%, 50% 50%);
  background: linear-gradient(115deg, var(--env-1), var(--env-3) 80%);
  transform-origin: left center;
  z-index: 3;
}

.flap-right {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background: linear-gradient(245deg, var(--env-1), var(--env-3) 80%);
  transform-origin: right center;
  z-index: 3;
}

.flap-bottom {
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
  background: linear-gradient(20deg, var(--env-2), var(--env-1) 65%);
  transform-origin: bottom center;
  z-index: 2;
}

.envelope.open .flap-top {
  transform: rotateX(200deg);
  transition-delay: 0s;
}

.envelope.open .flap-left {
  transform: rotateY(-200deg);
  transition-delay: 0.18s;
}

.envelope.open .flap-right {
  transform: rotateY(200deg);
  transition-delay: 0.18s;
}

.envelope.open .flap-bottom {
  transform: rotateX(-200deg);
  transition-delay: 0.36s;
}

.envelope.open .flap {
  pointer-events: none;
}

/* ---------- Wax seal ---------- */

.seal {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(5.4rem, 28vw, 6.8rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-4deg);
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 20;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  animation: seal-glint 3.2s ease-in-out infinite;
}

.seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* warm brown shadow — a cool one reads grey and dirty against ivory paper */
  filter: drop-shadow(0 8px 13px rgba(88, 62, 40, 0.38));
  pointer-events: none;
  -webkit-user-drag: none;
}

.envelope.open .seal {
  animation: seal-crack 150ms ease-out forwards;
  pointer-events: none;
}

@keyframes seal-glint {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

/* The seal is what the tap is aimed at, so it has to clear out at once —
   any lingering exit reads as lag on the flaps behind it. */
@keyframes seal-crack {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-4deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(2deg) scale(0.72);
  }
}

/* ---------- RSVP dialog ---------- */

/* a <dialog> lives in the top layer, so it escapes the card's overflow and the
   envelope's 3D context without any z-index juggling */
.rsvp {
  position: fixed;
  inset: 0;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: clamp(24px, 6vw, 32px);
  border: 1px solid rgba(201, 168, 102, 0.6);
  border-radius: 20px;
  background: linear-gradient(180deg, #fdfbf5, #f5eede);
  box-shadow: 0 24px 60px rgba(61, 69, 52, 0.32);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}

.rsvp::backdrop {
  background: rgba(61, 69, 52, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.rsvp[open] {
  animation: rsvp-in 0.32s cubic-bezier(0.22, 0.9, 0.28, 1);
}

@keyframes rsvp-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

/* inner gold hairline, echoing the frame on the schedule screen */
.rsvp::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 168, 102, 0.25);
  border-radius: 13px;
  pointer-events: none;
}

.rsvp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sage-3);
  cursor: pointer;
  opacity: 0.6;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}

.rsvp-close:hover {
  opacity: 1;
}

.rsvp-close svg {
  width: 17px;
  height: 17px;
}

.rsvp-form,
.rsvp-done {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.rsvp-done[hidden],
.rsvp-form[hidden] {
  display: none;
}

.rsvp-title {
  margin: 0;
  font-family: 'Noto Serif Georgian', serif;
  font-weight: 500;
  font-size: clamp(17px, 4.6vw, 20px);
  letter-spacing: 0.03em;
  color: var(--sage-3);
}

.rsvp .flourish {
  margin-top: -4px;
}

/* ---------- Fields ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}

.field-label {
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(12px, 3.2vw, 13px);
  letter-spacing: 0.06em;
  color: var(--sage-3);
  opacity: 0.85;
}

.field-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(201, 168, 102, 0.55);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.7);
  font-family: 'Noto Serif Georgian', serif;
  /* anything under 16px makes iOS Safari zoom the page on focus */
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:focus {
  outline: none;
  border-color: var(--sage-2);
  box-shadow: 0 0 0 3px rgba(147, 165, 131, 0.28);
}

.field-input.is-invalid {
  border-color: #b4705c;
  box-shadow: 0 0 0 3px rgba(180, 112, 92, 0.2);
}

/* ---------- Submit + result ---------- */

.rsvp-submit {
  margin-top: 2px;
  padding: 13px 22px;
  border: 1px solid rgba(201, 168, 102, 0.85);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sage-1), var(--sage-2));
  box-shadow: 0 6px 16px rgba(61, 69, 52, 0.22);
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(13px, 3.6vw, 15px);
  letter-spacing: 0.05em;
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s ease, transform 0.15s ease;
}

.rsvp-submit:hover {
  filter: brightness(1.06);
}

.rsvp-submit:active {
  transform: translateY(1px);
}

.rsvp-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.rsvp-error {
  margin: 0;
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(12px, 3.2vw, 13px);
  color: #a05a45;
}

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

.rsvp-check {
  width: 54px;
  height: 54px;
  margin: 4px auto 0;
  color: var(--sage-2);
}

.rsvp-done-text {
  margin: 0;
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(13px, 3.4vw, 14px);
  line-height: 1.6;
  text-wrap: balance;
  color: var(--ink);
  opacity: 0.8;
}

.rsvp-edit {
  padding: 4px;
  border: none;
  background: transparent;
  font-family: 'Noto Serif Georgian', serif;
  font-size: clamp(11px, 3vw, 12px);
  letter-spacing: 0.06em;
  color: var(--sage-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
}

.rsvp-edit:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rsvp[open] { animation: none; }
}