/* =====================================================================
   MOHAMMAD & ARWA — WEDDING INVITATION
   Design tokens
   -------------------------------------------------------------
   Color (jewel-tone premium — deep wine + rose gold + berry, used with
   real contrast: light ivory sections alternate with a rich dark-wine
   section so the palette reads as premium rather than all-pastel):
     --ivory        #FFF8F2  base background, warm cream
     --champagne    #F3DEC0  secondary surface / card fill
     --rose         #E28E93  dusty rose accent, saturated not washed out
     --blush        #F2C6C2  soft blush (tints, hovers)
     --berry        #B23A5E  jewel raspberry accent (CTAs, highlights)
     --burgundy     #55182D  deep wine — ceremony emphasis + dark section bg
     --burgundy-2   #3E1022  darker wine, gradient partner for depth
     --gold         #C9A25A  soft gold, primary metal accent
     --gold-deep    #A87D3C  gold, deeper/pressed state
     --gold-light   #EBCB8C  pale gold highlight
     --ink          #3B2E28  warm near-black for body text
   Type:
     --f-script   Allura            decorative names / ampersands
     --f-display  Playfair Display  premium high-contrast display serif
     --f-body     Cormorant Garamond  elegant serif paragraphs
     --f-label    Tenor Sans        small caps / labels / UI
===================================================================== */

:root {
  --ivory: #FFF8F2;
  --ivory-deep: #FBEADD;
  --champagne: #F3DEC0;
  --rose: #E28E93;
  --rose-deep: #D4767C;
  --blush: #F2C6C2;
  --berry: #B23A5E;
  --berry-deep: #8E2C4A;
  --burgundy: #55182D;
  --burgundy-2: #3E1022;
  --burgundy-soft: #7A2745;
  --gold: #D4AF37;
  --gold-deep: #B8860B;
  --gold-light: #F2D488;
  --gold-shine: #FBE7A6;
  --ink: #3B2E28;
  --ink-soft: #6b5c52;

  --f-script: 'Allura', cursive;
  --f-display: 'Playfair Display', serif;
  --f-body: 'Cormorant Garamond', serif;
  --f-label: 'Tenor Sans', sans-serif;

  --radius-card: 16px;
  --shadow-card: 0 16px 30px -20px rgba(85,24,45,.45);
  --container-max: 1140px;
  --ease-lux: cubic-bezier(.22,.61,.36,1);
  --dur-slow: 1.4s;
  --dur-med: .8s;
  --dur-fast: .35s;
}

/* ---------------------------------------------------------------
   RESET & BASE
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Same rich jewel-wine backdrop as the opening card, now carried
     through the whole site instead of a separate light theme. */
  background:
    radial-gradient(90% 60% at 15% 8%, rgba(178,58,94,.45), transparent 55%),
    radial-gradient(90% 60% at 85% 100%, rgba(178,58,94,.4), transparent 55%),
    linear-gradient(180deg, var(--burgundy-2) 0%, var(--burgundy) 50%, #6b2038 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font: inherit; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 48px);
}
::selection { background: var(--rose); color: var(--ivory); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   AMBIENT BACKGROUND LAYER — floating gold particles & petals,
   plus a static gold sparkle texture matching the opening card's
   backdrop, carried through the whole site for consistency.
--------------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 12%, rgba(235,203,140,.7), transparent),
    radial-gradient(1.4px 1.4px at 85% 8%, rgba(235,203,140,.55), transparent),
    radial-gradient(1px 1px at 60% 22%, rgba(235,203,140,.5), transparent),
    radial-gradient(1.4px 1.4px at 25% 38%, rgba(235,203,140,.6), transparent),
    radial-gradient(1px 1px at 92% 40%, rgba(235,203,140,.45), transparent),
    radial-gradient(1.4px 1.4px at 45% 55%, rgba(235,203,140,.55), transparent),
    radial-gradient(1px 1px at 8% 68%, rgba(235,203,140,.5), transparent),
    radial-gradient(1.4px 1.4px at 78% 72%, rgba(235,203,140,.6), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(235,203,140,.45), transparent),
    radial-gradient(1.4px 1.4px at 95% 92%, rgba(235,203,140,.55), transparent),
    radial-gradient(1px 1px at 15% 95%, rgba(235,203,140,.4), transparent);
  background-repeat: repeat-y;
  background-size: 100% 60vh;
}
.particle {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  animation: drift linear infinite;
}
.particle--dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light), transparent 70%);
}
.particle--petal {
  width: 14px; height: 14px;
  color: var(--rose);
  opacity: .55;
}
.particle--petal.hue-berry { color: var(--berry); }
.particle--petal.hue-gold { color: var(--gold-light); }
.particle--petal svg { width: 100%; height: 100%; fill: currentColor; opacity: .5; }

@keyframes drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; }
  8%   { opacity: .6; }
  92%  { opacity: .5; }
  100% { transform: translate3d(var(--dx,20px), 108vh, 0) rotate(200deg); opacity: 0; }
}

/* ---------------------------------------------------------------
   TYPE HELPERS
--------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold-light);
  text-align: center;
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.6rem, 3.8vw, 2.3rem);
  text-align: center;
  color: var(--ivory);
  margin-bottom: clamp(20px, 4vw, 38px);
  letter-spacing: .005em;
}
/* ---------------------------------------------------------------
   COUPLE NAME — single unified treatment used everywhere the couple's
   names appear (opening card, hero, message signature, footer): one
   font, a rich gold-foil fill, and the ampersand as a berry accent.
--------------------------------------------------------------- */
.name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(100deg,
    var(--gold-deep) 0%,
    var(--gold) 22%,
    var(--gold-shine) 42%,
    var(--gold-light) 58%,
    var(--gold) 78%,
    var(--gold-deep) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(235,203,140,.4));
  animation: nameShimmer 5.5s ease-in-out infinite;
}
@keyframes nameShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.amp {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  color: var(--rose);
}

/* ---------------------------------------------------------------
   SCROLL REVEAL — fade-up utility, IntersectionObserver-driven
--------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-lux), transform .7s var(--ease-lux);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }
.delay-1.in-view { transition-delay: .08s; }
.delay-2.in-view { transition-delay: .16s; }
.delay-3.in-view { transition-delay: .24s; }
.delay-4.in-view { transition-delay: .32s; }

/* =================================================================
   1. OPENING SCREEN — premium bordered invitation card on a rich
   jewel-tone wine backdrop with soft gold sparkle texture
================================================================= */
.opening {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1.5px 1.5px at 20% 25%, rgba(235,203,140,.9), transparent),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(235,203,140,.75), transparent),
    radial-gradient(1px 1px at 55% 65%, rgba(235,203,140,.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(235,203,140,.7), transparent),
    radial-gradient(1px 1px at 12% 80%, rgba(235,203,140,.55), transparent),
    radial-gradient(1.5px 1.5px at 40% 90%, rgba(235,203,140,.5), transparent),
    radial-gradient(90% 70% at 15% 10%, rgba(178,58,94,.6), transparent 60%),
    radial-gradient(90% 70% at 85% 95%, rgba(178,58,94,.5), transparent 60%),
    linear-gradient(155deg, var(--burgundy-2) 0%, var(--burgundy) 50%, #6b2038 100%);
  transition: opacity .85s var(--ease-lux);
  will-change: opacity;
}
.opening.is-opening { opacity: 0; pointer-events: none; }
.opening.is-hidden { display: none; }

.opening__card {
  position: relative;
  z-index: 3;
  width: min(92vw, 440px);
  max-height: 94vh;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.55), transparent 55%),
    var(--ivory);
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.6),
    0 0 0 6px var(--gold),
    0 0 50px 4px rgba(235,203,140,.25),
    0 30px 70px -20px rgba(0,0,0,.6);
  animation: cardFloat 6s ease-in-out infinite;
  transition: opacity .7s var(--ease-lux), transform .75s var(--ease-lux);
  will-change: opacity, transform;
}
.opening.is-opening .opening__card {
  animation: none;
  opacity: 0;
  transform: scale(1.06) translateY(-18px);
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.opening__corner {
  position: absolute;
  width: 28px; height: 28px;
  color: var(--gold);
  z-index: 2;
  opacity: .85;
}
.opening__corner--tl { top: 10px; left: 10px; }
.opening__corner--tr { top: 10px; right: 10px; }
.opening__corner--bl { bottom: 10px; left: 10px; }
.opening__corner--br { bottom: 10px; right: 10px; }

.opening__inner {
  position: relative;
  padding: clamp(24px, 5.5vw, 44px) clamp(24px, 6.5vw, 38px) clamp(28px, 6vw, 40px);
  text-align: center;
}

.opening__crest {
  width: 30px; height: 20px;
  color: var(--gold-deep);
  margin: 0 auto 6px;
  opacity: .9;
}

/* This card keeps a light ivory background (unlike the rest of the site),
   so its text needs darker, higher-contrast colors than the gold-light /
   gradient treatment used elsewhere on the dark backdrop. */
.opening .eyebrow { color: var(--berry-deep); opacity: .85; }
.opening .name {
  background-image: linear-gradient(100deg,
    var(--berry-deep) 0%,
    var(--gold-deep) 22%,
    var(--gold) 45%,
    var(--gold-deep) 68%,
    var(--berry-deep) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.opening .amp { color: var(--berry-deep); }

.eyebrow--fade { animation: gentleGlow 4s ease-in-out infinite; }
@keyframes gentleGlow {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

.opening__names {
  font-size: clamp(1.5rem, 7.8vw, 2.5rem);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .22em;
  margin: 4px 0 2px;
  line-height: 1.15;
  white-space: nowrap;
}

.opening__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px auto;
  width: min(100%, 220px);
}
.opening__rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.opening__rule span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.opening__rule i { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

.opening__sub {
  font-family: var(--f-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--berry-deep);
  margin: 0 0 clamp(20px, 4.5vw, 26px);
}

.open-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  color: var(--ivory);
  font-family: var(--f-label);
  letter-spacing: .1em;
  font-size: .78rem;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--berry), var(--burgundy) 75%);
  box-shadow: 0 10px 26px -10px rgba(85,24,45,.55);
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux);
  animation: pulseGlow 3s ease-in-out infinite;
}
.open-btn__icon { color: var(--gold-light); display: inline-flex; }
.open-btn__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmerSweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0% { background-position: 140% 0; }
  55%, 100% { background-position: -60% 0; }
}
.open-btn:hover, .open-btn:focus-visible {
  transform: scale(1.045);
  box-shadow: 0 14px 32px -10px rgba(85,24,45,.65);
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 10px 26px -10px rgba(85,24,45,.55), 0 0 0 0 rgba(201,162,90,.35); }
  50% { box-shadow: 0 10px 26px -10px rgba(85,24,45,.55), 0 0 0 8px rgba(201,162,90,0); }
}

/* =================================================================
   INVITATION MAIN
================================================================= */
.invitation { position: relative; z-index: 3; }

.section { position: relative; padding: clamp(44px, 8vw, 88px) 0; }

/* All sections now share the single dark jewel-wine backdrop from
   `body` — no more per-section light/pastel fills. Each section gets
   only a very subtle glow accent for rhythm as you scroll, and the
   actual content sits in light "cards" that float on top for
   readability (event cards, venue card, countdown boxes, form fields). */
#hero {
  background: radial-gradient(90% 65% at 50% 0%, rgba(235,203,140,.10), transparent 60%);
}
#countdown {
  background: radial-gradient(90% 70% at 15% 100%, rgba(178,58,94,.2), transparent 60%);
}
#message {
  background: radial-gradient(70% 60% at 15% 20%, rgba(235,203,140,.10), transparent 60%);
}
#events { background: radial-gradient(70% 60% at 90% 10%, rgba(178,58,94,.16), transparent 60%); }
#venue {
  background: radial-gradient(65% 55% at 90% 10%, rgba(235,203,140,.10), transparent 60%);
}
.map-section { padding-top: 0; }
#rsvp {
  background: radial-gradient(70% 55% at 10% 10%, rgba(178,58,94,.16), transparent 60%);
}

/* thin gold divider between sections */
.section + .section::before,
.map-section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(70%, 420px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}

/* -----------------------------------------------------------------
   MUSIC BUTTON
----------------------------------------------------------------- */
.music-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251,246,238,.9);
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 18px -8px rgba(59,46,40,.35);
  backdrop-filter: blur(4px);
  transition: transform .3s var(--ease-lux);
}
.music-btn:hover { transform: scale(1.08); }
.music-btn.is-playing svg { animation: notePulse 1.8s ease-in-out infinite; }
.music-btn.pulse-once { animation: musicIntro 1.4s var(--ease-lux); }
@keyframes musicIntro {
  0% { box-shadow: 0 0 0 0 rgba(184,144,90,.5); }
  70% { box-shadow: 0 0 0 16px rgba(184,144,90,0); }
  100% { box-shadow: 0 6px 18px -8px rgba(59,46,40,.35); }
}
@keyframes notePulse {
  0%, 100% { opacity: 1; } 50% { opacity: .55; }
}

/* -----------------------------------------------------------------
   HERO
----------------------------------------------------------------- */
.hero {
  padding-top: clamp(28px, 5vw, 44px);
  padding-bottom: clamp(56px, 10vw, 90px);
}
.hero__inner { text-align: center; }

/* -----------------------------------------------------------------
   HERO ARTWORK — the couple illustration as the lead visual. No hard
   rectangle: a soft radial mask fades the edges to transparent so it
   dissolves into the page background, with a matching colour-tint
   overlay for a seamless blend rather than just an alpha fade.
   Mobile crops toward the couple's faces/upper bodies (allowed to
   lose some outer moon/floral edge); desktop shows the full
   composition uncropped since there's room for it.
----------------------------------------------------------------- */
.hero__art {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 4 / 5;
  margin: 0 auto clamp(8px, 2vw, 16px);
  overflow: hidden;
}
.hero__art picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  -webkit-mask-image: radial-gradient(ellipse 56% 48% at 50% 42%, #000 30%, rgba(0,0,0,.65) 62%, transparent 92%);
          mask-image: radial-gradient(ellipse 56% 48% at 50% 42%, #000 30%, rgba(0,0,0,.65) 62%, transparent 92%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 56% 48% at 50% 42%, transparent 45%, rgba(62,16,34,.35) 75%, transparent 96%);
}
@media (min-width: 640px) {
  .hero__art { aspect-ratio: 5 / 6; width: min(100%, 600px); }
}
@media (min-width: 900px) {
  .hero__art {
    aspect-ratio: auto;
    width: min(90%, 620px);
  }
  .hero__art img {
    height: auto;
    object-fit: contain;
  }
}

.hero__tagline {
  margin-top: 18px;
  font-size: 1.05rem;
  color: rgba(255,248,242,.8);
}
.hero__tagline em { font-family: var(--f-script); font-size: 1.3em; color: var(--gold-light); font-style: normal; }

.logo-wrap {
  position: relative;
  max-width: clamp(140px, 32vw, 190px);
  margin: 0 auto 8px;
  transform: scale(.9);
  opacity: 0;
  animation: logoIn 1.3s var(--ease-lux) .15s forwards;
  filter: drop-shadow(0 0 14px rgba(235,203,140,.3));
}
.logo-wrap::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(closest-side, rgba(216,189,142,.35), transparent 72%);
  z-index: -1;
  filter: blur(4px);
}
@keyframes logoIn {
  to { transform: scale(1); opacity: 1; }
}

.names-lg {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: .2em;
  margin: 4px 0 18px;
  white-space: nowrap;
}
.names-lg .name {
  font-size: clamp(1.7rem, 9vw, 3.6rem);
  letter-spacing: .004em;
}
.amp--lg { font-size: clamp(1.3rem, 6vw, 2.4rem); }

.hero__invite-text {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: rgba(255,248,242,.82);
  font-style: italic;
  max-width: 480px;
  margin: 0 auto 22px;
}

.hero__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.hero__date-line { width: 44px; height: 1px; background: var(--gold-light); }
.hero__date-text {
  font-family: var(--f-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .95rem;
  color: var(--gold-light);
  white-space: nowrap;
}

.scroll-cue {
  margin: clamp(28px, 6vw, 48px) auto 0;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--f-label);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,248,242,.75);
  opacity: .8;
  animation: cueFade 4s ease-in-out infinite;
}
.scroll-cue__line { width: 1px; height: 30px; background: linear-gradient(180deg, var(--gold), transparent); animation: cueMove 2.2s ease-in-out infinite; }
@keyframes cueFade { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes cueMove { 0% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(.4); transform-origin: bottom; } }

/* -----------------------------------------------------------------
   COUNTDOWN
----------------------------------------------------------------- */
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 3vw, 22px);
  max-width: 620px;
  margin: 0 auto;
}
.countdown__box {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(201,162,90,.55);
  border-radius: var(--radius-card);
  padding: clamp(14px, 4vw, 26px) 4px;
  text-align: center;
  backdrop-filter: blur(3px);
  box-shadow: 0 16px 30px -18px rgba(0,0,0,.4);
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux), border-color .35s;
}
@media (hover: hover) {
  .countdown__box:hover {
    transform: translateY(-4px);
    border-color: var(--gold-light);
    box-shadow: 0 22px 36px -16px rgba(0,0,0,.5);
  }
}
.countdown__num {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-family: var(--f-label);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,248,242,.7);
}
.countdown__today {
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--gold-light);
  margin-top: 20px;
}

/* -----------------------------------------------------------------
   MESSAGE
----------------------------------------------------------------- */
.message__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.message__flourish { width: 80px; height: 26px; color: var(--gold-light); margin: 0 auto 22px; display: block; }
.message__text {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-style: italic;
  color: rgba(255,248,242,.88);
  margin-bottom: 18px;
}
.message__sign {
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  margin-top: 12px;
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   EVENTS TIMELINE
----------------------------------------------------------------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 30px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
}
.event { position: relative; }
.event__dot {
  position: absolute;
  left: -30px; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 4px var(--ivory);
}
.event__dot--main {
  width: 14px; height: 14px;
  left: -31.5px;
  border-color: var(--burgundy);
  background: var(--gold-light);
  animation: dotGlow 2.4s ease-in-out infinite;
}
@keyframes dotGlow {
  0%, 100% { box-shadow: 0 0 0 4px var(--ivory), 0 0 0 4px var(--ivory); }
  50% { box-shadow: 0 0 0 4px var(--ivory), 0 0 10px 2px rgba(184,144,90,.55); }
}
.event.in-view .event__dot { animation-play-state: running; }

.event__card {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border: 1px solid rgba(184,144,90,.5);
  border-radius: var(--radius-card);
  padding: clamp(20px, 4vw, 30px) clamp(20px, 4vw, 32px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux);
}
@media (hover: hover) {
  .event__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -16px rgba(0,0,0,.6);
  }
}
.event__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-family: var(--f-label);
  font-size: .78rem;
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.event__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-style: normal;
  font-size: 1.28rem;
  color: var(--burgundy);
  margin-bottom: 6px;
}
.event__date, .event__time { font-size: 1rem; color: var(--ink-soft); }
.event__venue { margin-top: 10px; font-weight: 600; color: var(--ink); }
.event__floor { font-weight: 400; color: var(--ink-soft); font-size: .88em; }
.event__address { font-size: .92rem; color: var(--ink-soft); }

.event--main .event__card {
  position: relative;
  background: linear-gradient(180deg, var(--blush) 0%, var(--champagne) 100%);
  border-color: var(--berry);
}
.event__badge--main {
  border-color: var(--berry);
  color: var(--berry);
  background: rgba(255,255,255,.6);
}
.event__eyebrow {
  font-family: var(--f-label);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--burgundy-soft);
  margin-bottom: 4px;
}
.event__name--main { font-size: 1.5rem; }

/* -----------------------------------------------------------------
   VENUE
----------------------------------------------------------------- */
.venue__inner { text-align: center; }
.venue__card {
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  padding: clamp(26px, 6vw, 40px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux);
}
@media (hover: hover) {
  .venue__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -16px rgba(0,0,0,.6);
  }
}
.venue__label { font-family: var(--f-label); letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; color: var(--gold-deep); margin-bottom: 10px; }
.venue__name { font-family: var(--f-display); font-size: 1.4rem; color: var(--burgundy); margin-bottom: 8px; }
.venue__address { color: var(--ink-soft); margin-bottom: 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .3s var(--ease-lux), box-shadow .3s var(--ease-lux), background .3s;
}
.btn--outline {
  border: 1px solid var(--gold-deep);
  color: var(--burgundy);
}
.btn--outline:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(193,84,106,.45); background: rgba(232,167,162,.12); border-color: var(--berry); }
.btn--solid {
  background: linear-gradient(135deg, var(--berry), var(--burgundy) 70%);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(193,84,106,.55); }

/* -----------------------------------------------------------------
   MAP
----------------------------------------------------------------- */
.map-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--gold);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
  background: var(--ivory-deep);
}
.map-frame iframe { width: 100%; height: 100%; display: block; }

/* -----------------------------------------------------------------
   RSVP
----------------------------------------------------------------- */
.rsvp__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.rsvp__sub { color: rgba(255,248,242,.82); margin-bottom: 28px; font-size: 1.05rem; }

.rsvp-form { text-align: left; display: flex; flex-direction: column; gap: 18px; }
.field label, fieldset legend {
  display: block;
  font-family: var(--f-label);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.field input[type="text"],
.field input[type="number"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(235,203,140,.4);
  border-radius: 10px;
  background: rgba(255,248,242,.94);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.05rem;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(235,203,140,.25);
  outline: none;
}
fieldset { border: none; padding: 0; margin: 0; }
.radio-opt, .check-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  padding: 6px 0;
  cursor: pointer;
  color: rgba(255,248,242,.9);
}
.radio-opt input, .check-opt input { accent-color: var(--berry); width: 17px; height: 17px; }

.field-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.field-row .field { flex: 0 0 96px; }
.field-row .field input { padding: 12px 10px; text-align: center; }
.field--radio-inline { flex: 1; }
.field--radio-inline .radio-opt { display: inline-flex; margin-right: 22px; padding: 0; }
.field-optional { text-transform: none; letter-spacing: 0; font-size: .85em; color: rgba(255,248,242,.65); }

.rsvp-submit {
  align-self: center;
  margin-top: 8px;
  min-width: 200px;
  justify-content: center;
  position: relative;
}
.btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(251,246,238,.4);
  border-top-color: var(--ivory);
  animation: spin .7s linear infinite;
}
.rsvp-submit.is-loading .btn-label { opacity: .6; }
.rsvp-submit.is-loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.rsvp-error {
  color: #F0A8A0;
  font-size: .92rem;
  text-align: center;
}

.rsvp-success {
  text-align: center;
  padding: 40px 20px;
  animation: successIn .7s var(--ease-lux);
}
.rsvp-success__spark {
  width: 40px; height: 40px;
  color: var(--gold-light);
  margin: 0 auto 14px;
  fill: currentColor;
  animation: sparkPop 1s var(--ease-lux);
}
@keyframes sparkPop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(90deg); opacity: 1; }
  100% { transform: scale(1) rotate(120deg); }
}
@keyframes successIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rsvp-success__title { font-family: var(--f-display); font-size: 1.7rem; color: var(--gold-light); margin-bottom: 8px; }
.rsvp-success__text { color: rgba(255,248,242,.85); }

/* -----------------------------------------------------------------
   FOOTER
----------------------------------------------------------------- */
.footer {
  position: relative;
  background: radial-gradient(90% 70% at 50% 0%, rgba(178,58,94,.22), transparent 65%);
  padding: clamp(70px, 12vw, 120px) 0 60px;
  text-align: center;
}
.footer__inner { max-width: 480px; margin: 0 auto; }
.footer__logo { max-width: 100px; margin: 0 auto 16px; opacity: .92; }
.footer__names { font-size: clamp(1.7rem, 6.5vw, 2.6rem); margin-bottom: 8px; white-space: nowrap; }
.footer__tagline { font-style: italic; color: rgba(255,248,242,.85); margin-bottom: 18px; font-size: 1.1rem; }
.footer__date { font-family: var(--f-label); letter-spacing: .28em; color: var(--gold-light); font-size: .95rem; margin-bottom: 14px; }
.footer__credit { font-size: .78rem; color: rgba(255,248,242,.6); }
.footer__signature {
  font-size: .74rem;
  color: rgba(255,248,242,.5);
  margin-top: 8px;
}
.footer__signature a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .25s;
}
.footer__signature a:hover,
.footer__signature a:focus-visible {
  color: var(--rose);
}

.back-to-top {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  top: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(59,46,40,.4);
  transition: transform .3s var(--ease-lux);
}
.back-to-top:hover { transform: translateX(50%) translateY(-4px); }

/* =================================================================
   RESPONSIVE — tuned for 375 / 390 / 430 first, then tablet+desktop
================================================================= */
@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .countdown__grid { gap: 8px; }
  .timeline { padding-left: 26px; }
  .event__dot { left: -26px; }
  .event__dot--main { left: -27.5px; }
  .opening__card { width: min(94vw, 400px); }
  .opening__inner { padding: 24px 20px 26px; }
  .opening__corner { width: 22px; height: 22px; }
}

@media (max-height: 700px) {
  /* short viewports (small phones, landscape) — keep the card comfortably
     inside the screen instead of forcing scroll before it's even opened */
  .opening__card { max-height: 92vh; overflow-y: auto; }
  .opening__inner { padding-top: 26px; padding-bottom: 20px; }
  .opening__crest { margin-bottom: 6px; }
  .opening__rule { margin: 10px auto; }
  .opening__sub { margin-bottom: 18px; }
}

@media (min-width: 720px) {
  .timeline { padding-left: 0; max-width: 720px; }
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .event { width: calc(50% - 34px); }
  .event:nth-child(odd) { margin-right: auto; }
  .event:nth-child(even) { margin-left: auto; }
  .event__dot { left: auto; right: -40px; }
  .event:nth-child(even) .event__dot { right: auto; left: -40px; }
  .event__dot--main { right: -41.5px; }
  .event:nth-child(even) .event__dot--main { left: -41.5px; right: auto; }
}

@media (min-width: 900px) {
  .countdown__grid { max-width: 700px; }
  .rsvp__inner { max-width: 620px; }
}