/* === FUENTES LOCALES === */
@font-face {
  font-family: "Geraldyn Brushko";
  src: url("assets/fonts/GeraldynBrushko-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geraldyn Brushko";
  src: url("assets/fonts/GeraldynBrushko-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ADega Serif";
  src: url("assets/fonts/ADegaSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   VARIABLES & RESET
   ============================================ */
:root {
  --sand: #F4EDE3;
  --sand-soft: #FBF6EF;
  --ocean-deep: #1E3A5F;
  --ocean-mid: #3A6B8C;
  --ocean-soft: #7FA8C9;
  --coral: #D97D6A;
  --text: #2C3E50;
  --border: #D6CFC2;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ============================================
   BODY & LAYOUT
   ============================================ */
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 3.2vw, 24px);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--sand);
}

.invitation {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--sand);
}

@media (min-width: 1025px) {
  body {
    background-color: var(--sand-soft);
  }
  .invitation {
    box-shadow: 0 0 40px rgba(30, 58, 95, 0.06);
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.script-title {
  font-family: "Geraldyn Brushko", "Cormorant Garamond", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 80px);
  line-height: 1;
  color: var(--ocean-deep);
  margin-bottom: 4px;
}

.subtitle-upper {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(16px, 3vw, 18px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocean-mid);
  margin-bottom: 18px;
}

.body-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(20px, 3.2vw, 24px);
  line-height: 1.6;
  color: var(--text);
}

/* ============================================
   SECTIONS
   ============================================ */
section {
  padding: clamp(48px, 8vw, 72px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 641px) and (max-width: 1024px) {
  section {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.section-divider {
  display: none;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 24px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-primary {
  background-color: var(--ocean-deep);
  color: var(--sand-soft);
}

.btn-primary:hover {
  background-color: #254a75;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.2);
}

.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  background-color: transparent;
  color: var(--ocean-deep);
  border: 1px solid var(--ocean-deep);
}

.btn-outline:hover {
  background-color: var(--ocean-deep);
  color: var(--sand-soft);
}

.btn:focus-visible {
  outline: 2px solid var(--ocean-mid);
  outline-offset: 3px;
}

.btn-full { width: 100%; text-align: center; }

/* ============================================
   HERO
   ============================================ */
#hero {
  min-height: 100vh;
  min-height: var(--vh-fix, 100vh);
  justify-content: flex-start;
  /* chandelier is 52vw wide × 1.33 ratio = 69vw tall, offset -60px from top.
     Visible bottom = 69vw - 60px. Add 30px gap below. */
  padding-top: calc(69vw - 30px);
  padding-bottom: clamp(200px, 46vw, 280px);
  position: relative;
  overflow: hidden;
}

/* Hero typography — "Nos casamos" and the date both use
   .subtitle-upper, matching every other section's subtitle pattern.
   Double-class selectors so these win specificity ties against
   the #hero .subtitle-upper reset that sits later in the file. */
#hero .subtitle-upper.hero-eyebrow {
  margin-top: 0;
  margin-bottom: 18px;
}

#hero .subtitle-upper.hero-date {
  margin-top: -4px;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: clamp(16px, 3vw, 20px);
}

/* ============================================
   CHANDELIER — hangs from top of hero
   ============================================ */
.chandelier {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
  width: clamp(200px, 52vw, 300px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  animation: chandelier-sway 6.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes chandelier-sway {
  0%, 100% { transform: translateX(-50%) rotate(-1.4deg); }
  50%      { transform: translateX(-50%) rotate(1.4deg); }
}

/* ============================================
   BEACH — static sand + surf band behind the palms.
   Shifted DOWN so the watercolor's transparent bottom margin
   clips off the visible area, leaving the painted sand band
   meeting the section's bottom edge cleanly. The sand-tinted
   strip on #hero::after picks up any tiny remaining gap with
   the same warm beach-sand tone (not the page's cooler --sand).
   ============================================ */
.beach {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -42px;
  width: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.beach img {
  width: 100%;
  height: auto;
  display: block;
}

/* warm sand band that extends the beach color down to
   the very bottom edge of the hero, in case the asset's
   sand line doesn't quite reach */
#hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: #f4e8d0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   PALMS — bottom-corner decoration
   The asset is full coconut palms with tall trunks,
   so we crop to just the canopy via overflow:hidden
   on a short wrapper, and pin the image to the top
   so the leaves peek up from the bottom edge.
   ============================================ */
.palm {
  position: absolute;
  display: block;
  width: clamp(280px, 76vw, 460px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.palm img {
  width: 100%;
  height: auto;
  display: block;
}

/* Anchor with negative offsets so the trunk falls below the section
   and the outer fronds bleed past the side edge. The section's
   overflow:hidden clips the bleed cleanly. */
.palm--left.palm--back {
  left: -90px;
  bottom: -100px;
  width: clamp(220px, 60vw, 360px);
  opacity: 0.85;
  z-index: 1;
  transform-origin: 50% 100%;
  animation: palm-sway-left 7s ease-in-out infinite;
  animation-delay: -1.2s;
  will-change: transform;
}

.palm--right.palm--back {
  right: -90px;
  bottom: -100px;
  width: clamp(220px, 60vw, 360px);
  opacity: 0.85;
  z-index: 1;
  transform: scaleX(-1);
  transform-origin: 50% 100%;
  animation: palm-sway-right 7.6s ease-in-out infinite;
  animation-delay: -2.4s;
  will-change: transform;
}

.palm--left.palm--front {
  left: -50px;
  bottom: clamp(-120px, -16vw, -60px);
  z-index: 2;
  transform-origin: 50% 100%;
  animation: palm-sway-left 8.2s ease-in-out infinite;
  will-change: transform;
}

.palm--right.palm--front {
  right: -50px;
  bottom: clamp(-120px, -16vw, -60px);
  z-index: 2;
  transform: scaleX(-1);
  transform-origin: 50% 100%;
  animation: palm-sway-right 9s ease-in-out infinite;
  animation-delay: -0.6s;
  will-change: transform;
}

/* Palms sway from the trunk base, like a breeze nudging the canopy.
   Right-side palms preserve the scaleX(-1) flip throughout. */
@keyframes palm-sway-left {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

@keyframes palm-sway-right {
  0%, 100% { transform: scaleX(-1) rotate(-1.6deg); }
  50%      { transform: scaleX(-1) rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chandelier,
  .palm {
    animation: none !important;
  }
}

/* Desktop: invitation is capped at 640px, but vw-based sizes blow up
   based on the wider window. Pin hero decorations to fixed sizes that
   fit cleanly inside the 640px container. */
@media (min-width: 641px) {
  #hero {
    /* Desktop: chandelier 240px wide × 1.33 = 319px tall - 60px offset + 30px gap */
    padding-top: 289px;
    padding-bottom: 220px;
  }
  .chandelier {
    width: 240px;
  }
  .palm--left.palm--back,
  .palm--right.palm--back {
    width: 240px;
  }
  .palm--left.palm--front,
  .palm--right.palm--front {
    width: 260px;
  }
}

/* smaller, softer for the closing section */
#farewell .palm {
  width: clamp(110px, 28vw, 180px);
  opacity: 0.9;
}

#farewell .palm--left,
#farewell .palm--right {
  bottom: -70px;
}

#farewell .palm--left { left: -20px; }
#farewell .palm--right { right: -20px; }

/* keep hero text above palms (excluding the chandelier and beach,
   which have their own absolute positioning) */
#hero > :not(.palm):not(.chandelier):not(.beach),
#farewell > :not(.palm) {
  position: relative;
  z-index: 2;
}

.hero-floral {
  width: clamp(240px, 70vw, 400px);
  height: auto;
  margin-bottom: 40px;
  object-fit: contain;
}

#hero .subtitle-upper {
  /* don't let the global subtitle-upper margin-bottom: 32px collapse the rhythm */
  margin-bottom: 0;
}

#hero .script-title {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  font-size: clamp(58px, 16vw, 120px);
  padding: 0 8px;
}

.hero-venue {
  font-size: clamp(14px, 2vw, 16px);
  letter-spacing: 0.05em;
  margin-top: 8px;
}

/* ============================================
   DETAILS
   ============================================ */
.details-card {
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}

/* Ornamental cartouche backing for the venue/time info.
   Asset (post-crop): 714×868 transparent PNG of the embossed
   paper cartouche, with no surrounding whitespace. */
.details-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 714 / 868;
  background-image: url("assets/images/details-frame.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-frame-inner {
  width: 78%;
  text-align: center;
}



.detail-item { margin-bottom: 10px; }
.detail-item--last { margin-bottom: 0; }

.detail-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocean-soft);
  margin-bottom: 6px;
}

.detail-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(22px, 4vw, 28px);
  color: var(--ocean-deep);
  line-height: 1.3;
}

.details-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 8px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon svg { flex-shrink: 0; }

.kids-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.55;
  color: var(--ocean-mid);
  max-width: 380px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.kids-note__label {
  display: block;
  font-style: normal;
  font-size: clamp(11px, 1.8vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocean-deep);
  margin-bottom: 4px;
}

@media (max-width: 380px) {
  .details-buttons .btn {
    padding: 14px 16px;
    font-size: 11px;
  }
}

/* ============================================
   SCHEDULE (centered)
   ============================================ */
.schedule-gramophone {
  display: block;
  width: clamp(140px, 38vw, 200px);
  height: auto;
  margin: 0 auto 24px;
  pointer-events: none;
  user-select: none;
}

.timeline {
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
  position: relative;
  text-align: center;
}

.timeline-start-time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(18px, 3vw, 22px);
  color: var(--ocean-mid);
  margin-bottom: 16px;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 16px;
  position: relative;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item + .timeline-item::before {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background-color: var(--ocean-soft);
  opacity: 0.5;
  margin: 0 auto 12px;
}

.timeline-dot { display: none; }

.timeline-content { flex: 1; text-align: center; }

.timeline-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(20px, 3.5vw, 24px);
  color: var(--ocean-deep);
  line-height: 1.3;
  margin-bottom: 4px;
}

.timeline-content .body-text {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--ocean-mid);
}

/* ============================================
   DRESS CODE
   ============================================ */
.dress-code-stack {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 8px;
}

.dress-code-figures {
  width: 75%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto -22px;     /* overlap the card's top edge */
  position: relative;
  z-index: 2;               /* sit IN FRONT of the card */
  pointer-events: none;
  user-select: none;
}

.dress-code-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(28px, 5vw, 44px) clamp(24px, 4vw, 36px);
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(22px, 4vw, 28px);
  color: var(--ocean-deep);
  margin-bottom: 16px;
}

.dress-code-card .body-text { margin-bottom: 12px; }

.dress-code-roles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.dress-code-role__label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ocean-deep);
  margin-bottom: 4px;
}

.dress-code-role .body-text {
  margin-bottom: 0;
  font-size: clamp(15px, 2.2vw, 17px);
  color: var(--text);
}

.note {
  color: var(--coral);
  font-size: clamp(14px, 2vw, 16px);
}

/* ============================================
   GIFTS
   ============================================ */
#gifts .body-text {
  max-width: 420px;
  margin-bottom: 0;
}

.section-illustration {
  width: clamp(160px, 50vw, 280px);
  height: auto;
  margin-bottom: 32px;
  object-fit: contain;
}

.gifts-envelope {
  display: block;
  width: clamp(140px, 38vw, 200px);
  height: auto;
  margin: -8px auto 16px;
  pointer-events: none;
  user-select: none;
}

#gifts .subtitle-upper {
  margin-bottom: 8px;
}

.gifts-signature {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 2.4vw, 19px);
  color: var(--ocean-mid);
  margin-top: 4px;
}

/* ============================================
   COUNTDOWN
   ============================================ */
#countdown {
  min-height: auto;
  padding-top: clamp(48px, 8vw, 72px);
  padding-bottom: clamp(48px, 8vw, 72px);
}

.countdown-card {
  background: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 36px);
  width: 90%;
  max-width: 480px;
  text-align: center;
}

.countdown-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(16px, 3vw, 19px);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ocean-mid);
  margin-bottom: 16px;
}

.countdown-divider-short {
  width: 80px;
  height: 1px;
  background: var(--border);
  margin: 0 auto 16px;
}

#countdown .script-title {
  font-family: "Geraldyn Brushko", "Cormorant Garamond", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 68px);
  color: var(--ocean-deep);
  margin-bottom: 20px;
}

.countdown-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0;
}

.countdown-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 clamp(8px, 2vw, 16px);
}

.countdown-sep {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

.countdown-number {
  font-family: "ADega Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 8vw, 48px);
  line-height: 1;
  color: var(--ocean-deep);
  margin: 0 0 6px 0;
}

.countdown-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ocean-mid);
  margin-top: 4px;
}

.countdown-message {
  margin-top: 24px;
  font-style: italic;
  color: var(--ocean-mid);
}

.yoshi {
  display: block;
  width: clamp(140px, 38vw, 200px);
  height: auto;
  /* pull up close to the countdown above; nudge right to optically
     center the dog's body since the bouquet weight is on the left */
  margin: -32px auto 4px;
  transform: translateX(8%);
}

#details {
  /* yoshi pulls up over countdown, so collapse the top padding
     and let the dog illustration carry the visual gap */
  padding-top: 0;
}

#details .script-title {
  margin-top: 16px;
}

/* RSVP is all-caps in a brush script that paints wider per character
   than the mixed-case section titles, so at the same nominal size it
   reads as bigger and the leading swash on R nudges the optical
   center to the right. Shrink slightly + nudge left to match. */
#rsvp .script-title {
  font-size: clamp(40px, 6.5vw, 56px);
  transform: translateX(-4px);
}

/* ============================================
   ACCOMMODATIONS
   ============================================ */
#accommodations {
  position: relative;
  overflow: hidden;
}

.accommodations-hotel {
  display: block;
  width: clamp(140px, 38vw, 200px);
  height: auto;
  margin: 0 auto 24px;
  pointer-events: none;
  user-select: none;
}

.accommodations-intro {
  max-width: 460px;
  margin: 0 auto 28px;
}

.hotel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hotel-card {
  background-color: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hotel-card__body {
  width: 100%;
}

.hotel-card__zone {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ocean-soft);
  margin-bottom: 4px;
}

.hotel-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 2.8vw, 20px);
  color: var(--ocean-deep);
  line-height: 1.25;
  margin-bottom: 4px;
}

.hotel-card__desc {
  font-size: clamp(13px, 1.9vw, 15px);
  color: var(--ocean-mid);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.45;
}

.hotel-card__cta {
  font-size: 12px;
  padding: 6px 14px;
}

.accommodations-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.55;
  color: var(--ocean-mid);
  max-width: 460px;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.accommodations-note__label {
  display: block;
  font-style: normal;
  font-size: clamp(11px, 1.8vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocean-deep);
  margin-bottom: 6px;
}

/* ============================================
   RSVP
   ============================================ */
.rsvp-form {
  width: 100%;
  max-width: 420px;
  text-align: left;
  margin-top: 8px;
}

.form-group {
  margin-bottom: 16px;
  border: none;
  padding: 0;
}

.form-label {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(15px, 2.2vw, 17px);
  color: var(--text);
  margin-bottom: 6px;
}

.required { color: var(--coral); }

.rsvp-form input[type="text"],
.rsvp-form input[type="tel"] {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rsvp-form input[type="text"]::placeholder,
.rsvp-form input[type="tel"]::placeholder {
  color: var(--border);
}

/* Override browser autofill blue background */
.rsvp-form input:-webkit-autofill,
.rsvp-form input:-webkit-autofill:hover,
.rsvp-form input:-webkit-autofill:focus,
.rsvp-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sand) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

.rsvp-form input[type="text"]:focus,
.rsvp-form input[type="tel"]:focus {
  outline: none;
  border-color: var(--ocean-mid);
  box-shadow: 0 0 0 3px rgba(58, 107, 140, 0.12);
}

.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  color: var(--text);
}

.radio-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ocean-mid);
  cursor: pointer;
}

.rsvp-form .btn { margin-top: 8px; }

.companion-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  color: var(--ocean-mid);
  margin-bottom: 8px;
}

.companion-card {
  background-color: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.companion-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.companion-card-header h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ocean-deep);
  margin: 0;
}

.companion-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ocean-mid);
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.companion-remove:hover { color: var(--coral); }

.companion-card label {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  margin-top: 10px;
}

.companion-card input[type="text"] {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.companion-card input[type="text"]::placeholder { color: var(--border); }

.companion-card input[type="text"]:focus {
  outline: none;
  border-color: var(--ocean-mid);
  box-shadow: 0 0 0 3px rgba(58, 107, 140, 0.12);
}

.btn-add-companion {
  background: transparent;
  color: var(--ocean-deep);
  border: 1px solid var(--ocean-deep);
}

.btn-add-companion:hover {
  background-color: var(--ocean-deep);
  color: var(--sand-soft);
}

.rsvp-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  color: var(--text);
  resize: vertical;
  min-height: 90px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rsvp-form textarea::placeholder { color: var(--border); }

.rsvp-form textarea:focus {
  outline: none;
  border-color: var(--ocean-mid);
  box-shadow: 0 0 0 3px rgba(58, 107, 140, 0.12);
}

/* ============================================
   FAREWELL
   ============================================ */
#farewell {
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  /* tighten the gap from the RSVP button */
  padding-top: clamp(20px, 4vw, 36px);
  /* let the vista bleed to the very bottom edge */
  padding-bottom: 0;
}

#rsvp {
  padding-bottom: clamp(20px, 4vw, 36px);
}

.rsvp-roses {
  display: block;
  width: clamp(140px, 38vw, 200px);
  height: auto;
  margin: 0 auto 24px;
  pointer-events: none;
  user-select: none;
}

.farewell-message {
  max-width: 420px;
  margin-bottom: 28px;
}

.farewell-names {
  font-size: clamp(40px, 7vw, 60px);
  margin-bottom: 0;
  color: var(--ocean-deep);
}

.farewell-vista {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  margin: clamp(-32px, -4vw, -16px) -24px 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ============================================
   RSVP — validation & success
   ============================================ */
.form-error {
  color: var(--coral);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  margin-top: 6px;
}

.form-group--error input,
.form-group--error textarea {
  border-color: var(--coral);
}

.form-message {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ocean-mid);
  text-align: center;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* RSVP already confirmed — inline version of modal content */
.rsvp-confirmed[hidden] {
  display: none;
}

.rsvp-confirmed {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 6vw, 48px) 0;
}

/* Submit button states */
#rsvp-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#rsvp-submit .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sand-soft);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

/* ============================================
   RSVP SUCCESS MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 58, 95, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  animation: modal-fade-in 0.3s ease forwards;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: var(--sand-soft);
  border-radius: 10px;
  padding: clamp(36px, 8vw, 56px) clamp(28px, 6vw, 48px);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(30, 58, 95, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scale(0.92);
  animation: modal-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.modal__flourish {
  display: none;
}

.modal__title {
  font-size: clamp(52px, 12vw, 72px);
  margin-bottom: 8px;
  padding: 0;
}

.modal__subtitle {
  text-transform: none;
  margin-bottom: 16px;
}

.modal__message {
  max-width: 340px;
  margin: 0 auto 28px;
  color: var(--ocean-mid);
}

.modal__close {
  min-width: 180px;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-overlay--closing {
  animation: modal-fade-out 0.25s ease forwards;
}

.modal-overlay--closing .modal {
  animation: modal-pop-out 0.25s ease forwards;
}

@keyframes modal-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modal-pop-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

body.modal-open {
  overflow: hidden;
}

/* ============================================
   RSVP SUMMARY RECEIPT
   ============================================ */
.rsvp-receipt {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 20px auto 24px;
  text-align: left;
  width: 100%;
  max-width: 360px;
}

.rsvp-receipt__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocean-mid);
  margin-bottom: 14px;
  text-align: center;
}

.rsvp-receipt__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rsvp-receipt__item {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}

.rsvp-receipt__item:last-child {
  border-bottom: none;
}

.rsvp-receipt__label {
  font-weight: 500;
  color: var(--ocean-deep);
}

.confirmation-card {
  background: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 36px);
  width: 100%;
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confirmation-card .rsvp-receipt {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 0 0;
  margin: 16px 0 16px;
}

.modal__note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ocean-mid);
  margin-bottom: 20px;
  max-width: 340px;
}

/* ============================================
   LOCK SCREEN
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body.locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  animation: lock-fade-in 0.3s ease forwards;
}

.lock-screen[hidden] {
  display: none;
}

.lock-screen__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 360px;
}

.lock-screen__title {
  font-size: clamp(4.5rem, 14vw, 7rem);
  margin-bottom: 16px;
}

.lock-screen__subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--ocean-mid);
  margin-bottom: 28px;
}

.lock-screen__input {
  width: 100%;
  background: var(--sand-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  color: var(--text);
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lock-screen__input::placeholder {
  color: var(--border);
}

.lock-screen__input:focus {
  outline: none;
  border-color: var(--ocean-mid);
  box-shadow: 0 0 0 3px rgba(58, 107, 140, 0.12);
}

.lock-screen__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sand-soft) inset;
  -webkit-text-fill-color: var(--text);
}

.lock-screen__error {
  color: var(--coral);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  margin-top: 10px;
  margin-bottom: 0;
}

.lock-screen__error[hidden] {
  display: none;
}

.lock-screen__btn {
  width: 100%;
  margin-top: 16px;
  padding: 16px 28px;
  font-size: 1.2rem;
}

.lock-screen__hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--text);
  opacity: 0.5;
  margin-top: 20px;
}

/* Lock screen animations */
@keyframes lock-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lock-screen--exit {
  animation: lock-exit 0.6s ease forwards;
}

@keyframes lock-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}

.lock-screen__input--shake {
  animation: lock-shake 0.4s ease;
  border-color: var(--coral);
}

/* Hero reveal after lock screen */
.hero--reveal {
  animation: hero-reveal 0.8s ease-out forwards;
}

@keyframes hero-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}