/* ==========================================================================
   Ishaani & Aryan — Wedding Invitation
   style.css · design tokens, layout, components
   Palette: deep emerald & forest · antique gold · coral rose · ivory
   Built mobile-first; larger breakpoints live in responsive.css
   ========================================================================== */

:root {
  /* ---- Surfaces: deep emerald through forest to near-black ---- */
  --bg-deepest: #03110d;
  --bg-deep:    #061a14;
  --bg:         #08221b;
  --bg-raised:  #0c2c23;
  --bg-lifted:  #113a2e;
  --surface:    #0e3227;
  --surface-2:  #144032;

  /* ---- Metals: antique gold ---- */
  --gold:        #d9b26a;
  --gold-bright: #f2dda6;
  --gold-deep:   #a8813e;
  --gold-shadow: #6d5124;

  /* ---- Accents ---- */
  --coral:  #e2795f;   /* warm coral rose */
  --rose:   #d9607e;   /* deep rose */
  --saffron:#efa94a;   /* saffron */
  --jade:   #5fbfa0;   /* pale jade */
  --ivory:  #fdf8ef;

  /* ---- Text ---- */
  --ink:      #fdf8ef;
  --ink-soft: #cfdfd6;
  --ink-dim:  #93ab9f;
  --ink-dark: #123024;

  /* ---- Shape: temple arches ---- */
  --arch-lg: 50% 50% 8px 8px / 32% 32% 8px 8px;
  --arch-md: 50% 50% 6px 6px / 28% 28% 6px 6px;
  --arch-sm: 50% 50% 5px 5px / 22% 22% 5px 5px;
  --pill: 999px;

  /* ---- Type ---- */
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-script:  "Italiana", serif;
  --f-body:    "Jost", system-ui, -apple-system, sans-serif;

  /* ---- Fluid type scale ---- */
  --t-xs:  clamp(0.62rem, 0.58rem + 0.2vw, 0.7rem);
  --t-sm:  clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --t-md:  clamp(0.92rem, 0.88rem + 0.25vw, 1.05rem);
  --t-lg:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-xl:  clamp(1.7rem, 1.35rem + 1.7vw, 2.9rem);
  --t-2xl: clamp(2.4rem, 1.6rem + 4vw, 5.2rem);

  /* ---- Rhythm ---- */
  --pad-section: clamp(3.75rem, 2rem + 8vw, 8rem);
  --gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  --container: min(1140px, 100% - 2.5rem);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drape: cubic-bezier(0.76, 0, 0.24, 1);

  /* ---- Composite ---- */
  --grad-gold: linear-gradient(135deg, #f7e9c4 0%, #d9b26a 40%, #a8813e 64%, #f2dda6 100%);
  --ring-gold: 0 0 0 1px rgba(217, 178, 106, 0.32);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-deep: 0 28px 70px rgba(0, 0, 0, 0.62);
}

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

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

body {
  margin: 0;
  background: var(--bg-deepest);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; height: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.18;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}
p { margin: 0; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--gold); color: var(--ink-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Atoms
   ========================================================================== */

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0;
}

.section-title {
  margin: 0.55rem 0 0;
  font-size: var(--t-xl);
  font-weight: 300;
}

.lede {
  max-width: 58ch;
  margin: 1rem auto 0;
  color: var(--ink-soft);
  font-size: var(--t-md);
}

/* Ornamental divider: lotus diamond between two tapering rules */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  color: var(--gold);
}
.divider::before,
.divider::after {
  content: "";
  width: clamp(38px, 12vw, 70px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.divider__gem {
  position: relative;
  width: 8px; height: 8px;
  background: var(--grad-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(217, 178, 106, 0.8);
}
.divider__gem::before,
.divider__gem::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.divider__gem::before { left: -11px; }
.divider__gem::after  { left: 19px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--pad-section) 0;
  overflow: hidden;
  background: var(--bg);
}
.section--alt   { background: var(--bg-deep); }
.section--raise { background: var(--bg-raised); }

/* Jali lattice wash */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(217, 178, 106, 0.05) 1px, transparent 1.3px),
    radial-gradient(rgba(226, 121, 95, 0.028) 1px, transparent 1.3px);
  background-size: 34px 34px, 34px 34px;
  background-position: 0 0, 17px 17px;
  pointer-events: none;
}
/* Soft radial glow so sections don't read flat */
.section::after {
  content: "";
  position: absolute;
  top: -25%; left: 50%;
  width: min(900px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(17, 58, 46, 0.55) 0%, transparent 62%);
  pointer-events: none;
}

.section-inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hairline gold rule between sections */
.section + .section { border-top: 1px solid rgba(217, 178, 106, 0.12); }

/* ==========================================================================
   Toran — hanging garland
   ========================================================================== */

.toran {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(217,178,106,0.5) 10%, rgba(217,178,106,0.5) 90%, transparent) top/100% 1px no-repeat;
}
.toran::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 26%, var(--coral) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 38%, var(--saffron) 0 3px, transparent 4px);
  background-size: 38px 34px, 38px 34px;
  background-position: 0 0, 19px 0;
  background-repeat: repeat-x;
  opacity: 0.75;
  transform-origin: top center;
  animation: toranSway 7s ease-in-out infinite;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;                 /* comfortable tap target */
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--gold);
  border-radius: var(--pill);
  background: transparent;
  color: var(--gold-bright);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s, transform 0.25s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-gold);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--ink-dark); border-color: var(--gold-bright); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(0.975); }

.btn--solid {
  background: var(--grad-gold);
  border-color: transparent;
  color: var(--ink-dark);
  font-weight: 500;
}
.btn--solid:hover { color: var(--ink-dark); filter: brightness(1.07); }
.btn--sm { min-height: 42px; padding: 0.6rem 1.35rem; letter-spacing: 0.18em; }

/* ==========================================================================
   1 · GATE
   ========================================================================== */

.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.gate__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #16493a 0%, #08221b 52%, #03110d 100%);
}

.gate__motes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gate__mote {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  animation: moteDrift linear infinite;
}
.gate__mote--coral { background: var(--coral); }
.gate__mote--jade  { background: var(--jade); }

.gate__veil {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  z-index: 3;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(217,178,106,0.045) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #114237 0%, #08221b 58%, #03110d 100%);
  transition: transform 1.3s var(--ease-drape);
}
.gate__veil--top {
  top: 0;
  border-bottom: 1px solid rgba(217, 178, 106, 0.45);
  animation: veilSettle 1.15s var(--ease) backwards;
  --settle-from: -5%;
}
.gate__veil--bottom {
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(217,178,106,0.045) 0 1px, transparent 1px 24px),
    linear-gradient(0deg, #114237 0%, #08221b 58%, #03110d 100%);
  border-top: 1px solid rgba(217, 178, 106, 0.45);
  animation: veilSettle 1.15s var(--ease) backwards;
  --settle-from: 5%;
}
.gate__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 33%, rgba(242,221,166,0.10) 48%, rgba(247,233,196,0.2) 50%, rgba(242,221,166,0.10) 52%, transparent 67%);
  background-size: 250% 250%;
  animation: veilSheen 9s ease-in-out infinite;
}
.gate__veil--bottom::after { animation-delay: 4s; }

.gate__scallop {
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  background-image: radial-gradient(circle at 50% 0, transparent 8px, rgba(217,178,106,0.3) 9px, transparent 10px);
  background-size: 22px 18px;
  background-repeat: repeat-x;
}
.gate__veil--top .gate__scallop { bottom: 0; }
.gate__veil--bottom .gate__scallop { top: 0; transform: scaleY(-1); }

.gate__edge-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(0.48rem, 2vw, 0.56rem);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}
.gate__veil--top .gate__edge-text { bottom: clamp(1.1rem, 5vw, 2.1rem); }
.gate__veil--bottom .gate__edge-text { top: clamp(1.1rem, 5vw, 2.1rem); }

.gate--opening .gate__veil--top    { transform: translateY(-101%); }
.gate--opening .gate__veil--bottom { transform: translateY(101%); }

.gate__burst {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  z-index: 6;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold-bright) 32%, transparent 72%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.gate--opening .gate__burst { animation: lightBloom 1.2s ease-out forwards; }

.gate__card {
  position: relative;
  z-index: 4;
  width: min(390px, 100%);
  padding: clamp(1.9rem, 7vw, 2.9rem) clamp(1.25rem, 6vw, 2.1rem) clamp(1.5rem, 5vw, 2rem);
  text-align: center;
  background: linear-gradient(168deg, #fdf8ef 0%, #f3e8d4 100%);
  border-radius: var(--arch-md);
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(168, 129, 62, 0.4);
  animation: cardRise 1s var(--ease) 0.45s backwards;
}
.gate__card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(168, 129, 62, 0.3);
  border-radius: var(--arch-md);
  pointer-events: none;
}

.gate__crest { color: var(--gold-deep); animation: crestGlow 3.6s ease-in-out infinite; }

.gate__eyebrow {
  margin-top: 0.5rem;
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9a6a3c;
}

.gate__monogram {
  margin: 0.35rem 0 0.15rem;
  font-family: var(--f-script);
  font-size: clamp(2.5rem, 12vw, 3.4rem);
  line-height: 1;
  color: var(--gold-deep);
  animation: fadeUp 0.85s var(--ease) 1s backwards;
}
.gate__monogram-amp { color: var(--coral); }

.gate__invited {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-style: italic;
  color: #7b4a34;
  animation: fadeUp 0.85s var(--ease) 1.2s backwards;
}

.gate__seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: clamp(96px, 26vw, 112px);
  aspect-ratio: 1;
  margin: clamp(1rem, 4vw, 1.4rem) auto 0.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
  animation: sealPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s backwards,
             sealBreathe 3.2s ease-in-out 2.2s infinite;
}
.gate__seal-half {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 34% 28%, var(--gold-bright) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  transition: transform 0.75s var(--ease-drape), opacity 0.55s;
}
.gate__seal-half--left  { clip-path: inset(0 50% 0 0); border-radius: 50% 0 0 50%; }
.gate__seal-half--right { clip-path: inset(0 0 0 50%); border-radius: 0 50% 50% 0; }
.gate--opening .gate__seal-half--left  { opacity: 0; transform: translate(-26px, -10px) rotate(-19deg); }
.gate--opening .gate__seal-half--right { opacity: 0; transform: translate(26px, 12px) rotate(19deg); }

.gate__seal-ring {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(217, 178, 106, 0.6);
  border-radius: 50%;
  animation: ringPulse 3.2s ease-in-out 2.2s infinite;
  pointer-events: none;
}
.gate__seal-mark, .gate__seal-text {
  position: relative;
  z-index: 2;
  color: var(--ink-dark);
  transition: opacity 0.35s;
}
.gate__seal-mark { font-size: 1.1rem; line-height: 1; }
.gate__seal-text {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.gate--opening .gate__seal-mark, .gate--opening .gate__seal-text { opacity: 0; }

.gate__names {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a5537;
  animation: fadeUp 0.85s var(--ease) 1.85s backwards;
}
.gate__hint {
  margin-top: 0.55rem;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a8813e;
  animation: fadeUp 0.85s var(--ease) 2.05s backwards;
}

/* ==========================================================================
   2 · HERO
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 5.5rem 0 6rem;
  overflow: hidden;
  text-align: center;
}
.hero__bg {
  position: absolute;
  inset: -6%;
  background: url("../images/hero-bg.png") center / cover no-repeat;
  transform: scale(1.1);
  animation: heroDrift 30s ease-in-out infinite alternate;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(17, 66, 55, 0.3) 0%, rgba(3, 17, 13, 0.88) 72%),
    linear-gradient(180deg, rgba(3, 17, 13, 0.8) 0%, transparent 30%, rgba(3, 17, 13, 0.95) 100%);
}
.hero__vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 200px 60px rgba(3, 17, 13, 0.95);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 3;
  width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow { animation: fadeUp 1s var(--ease) 0.2s backwards; }

.hero__ornament {
  position: relative;
  margin: clamp(0.8rem, 3vw, 1.2rem) 0 0.3rem;
  animation: fadeUp 1s var(--ease) 0.35s backwards;
}
.hero__ornament-svg { color: var(--gold); width: clamp(120px, 38vw, 168px); height: auto; }
.hero__ornament-glow {
  position: absolute;
  top: 45%; left: 50%;
  width: 150px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 221, 166, 0.26) 0%, transparent 66%);
  animation: twinkle 5s ease-in-out infinite;
  pointer-events: none;
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--f-script);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ivory);
  text-shadow: 0 12px 44px rgba(3, 17, 13, 0.9);
}
.hero__name { display: block; animation: nameReveal 1.5s var(--ease) backwards; }
.hero__name--a { animation-delay: 0.5s; }
.hero__name--b { animation-delay: 0.85s; }
.hero__amp {
  display: block;
  margin: 0.12em 0;
  font-family: var(--f-display);
  font-size: 0.26em;
  font-style: italic;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  animation: fadeUp 1s var(--ease) 0.72s backwards;
}

.hero__divider { animation: fadeUp 1s var(--ease) 1.1s backwards; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.15rem;
  margin-top: 1.4rem;
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  animation: fadeUp 1s var(--ease) 1.25s backwards;
}
.hero__meta-dot { width: 4px; height: 4px; background: var(--coral); transform: rotate(45deg); }

.hero__tagline {
  max-width: 36ch;
  margin-top: 1.3rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
  animation: fadeUp 1s var(--ease) 1.4s backwards;
}

.hero__cta {
  margin-top: clamp(1.6rem, 5vw, 2.2rem);
  animation: fadeUp 1s var(--ease) 1.55s backwards;
}

.hero__scroll {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__scroll-line {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}

/* ==========================================================================
   3 · INVITATION
   ========================================================================== */

.invite__medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 30vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(242,221,166,0.22) 0%, transparent 58%), var(--surface-2);
  border: 1px solid var(--gold);
  box-shadow: 0 0 40px rgba(217, 178, 106, 0.22), inset 0 0 28px rgba(0, 0, 0, 0.45);
  color: var(--gold-bright);
}
.invite__ring {
  position: absolute;
  inset: -12px;
  border: 1px dashed rgba(217, 178, 106, 0.4);
  border-radius: 50%;
  animation: mandalaSpin 30s linear infinite;
}
.invite__ring--inner {
  inset: -5px;
  border-style: dotted;
  border-color: rgba(226, 121, 95, 0.35);
  animation-duration: 20s;
  animation-direction: reverse;
}

.invite__blessing {
  max-width: 42ch;
  margin-top: 1.5rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.85;
  color: var(--gold-bright);
}

.invite__letter {
  max-width: 62ch;
  margin-top: 1.6rem;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  line-height: 2;
  color: var(--ink-soft);
}
.invite__letter p + p { margin-top: 1.1rem; }
.invite__letter em { color: var(--gold-bright); font-style: italic; }

.invite__hosts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  width: 100%;
  margin-top: clamp(2rem, 6vw, 3rem);
}
.invite__host {
  flex: 1 1 260px;
  max-width: 340px;
  padding: 1.5rem 1.35rem;
  border: 1px solid rgba(217, 178, 106, 0.28);
  border-radius: var(--arch-sm);
  background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-lift);
}
.invite__host-role {
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
}
.invite__host-names {
  margin-top: 0.5rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--gold-bright);
  line-height: 1.5;
}
.invite__host-of {
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  color: var(--ink-dim);
}

.invite__signature {
  margin-top: clamp(1.8rem, 5vw, 2.4rem);
  font-family: var(--f-script);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  color: var(--coral);
}

/* ==========================================================================
   4 · ENVELOPE (scroll-pinned)
   ========================================================================== */

.envelope-wrapper {
  position: relative;
  height: 200vh;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-raised) 45%, var(--bg-deep) 100%);
}
.envelope-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 3vw, 1.4rem);
  height: 100svh;
  overflow: hidden;
}
.envelope-caption {
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: opacity 0.35s;
}

.envelope-stage {
  position: relative;
  width: min(460px, 84vw);
  aspect-ratio: 4 / 3;
  transform: scale(var(--env-scale, 1));
}

.envelope__body {
  position: absolute;
  inset: 18% 0 0;
  border-radius: 5px;
  background: linear-gradient(160deg, #16493a 0%, #0c2c23 100%);
  box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(217, 178, 106, 0.42);
}
.envelope__pocket {
  position: absolute;
  inset: 18% 0 0;
  z-index: 4;
  border-radius: 5px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(217, 178, 106, 0.45);
  background:
    linear-gradient(to top right, #114237 49.6%, transparent 50%),
    linear-gradient(to top left, #0e3227 49.6%, transparent 50%),
    linear-gradient(180deg, #0c2c23, #08221b);
}
.envelope__pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent 49.4%, rgba(217,178,106,0.32) 49.7%, transparent 50.1%),
    linear-gradient(to top left, transparent 49.4%, rgba(217,178,106,0.32) 49.7%, transparent 50.1%);
}
.envelope__wax {
  position: absolute;
  bottom: 13%; left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(34px, 9vw, 44px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--ink-dark);
  font-family: var(--f-display);
  font-size: clamp(0.62rem, 2vw, 0.78rem);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.envelope__flap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 46%;
  z-index: 6;
  transform-origin: top center;
  transform: rotateX(var(--flap-rot, 0deg));
  pointer-events: none;
}
.envelope__flap.is-open { z-index: 0; }
.envelope__flap-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #1c5c49 0%, #114237 100%);
}
.envelope__flap-face::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, transparent 58%, rgba(217, 178, 106, 0.2) 100%);
}

.envelope__letter {
  position: absolute;
  left: 50%; bottom: 6%;
  z-index: 3;
  width: 76%;
  max-width: 330px;
  padding: clamp(14px, 4vw, 24px) clamp(14px, 4vw, 22px);
  background: linear-gradient(170deg, #fdf8ef 0%, #f4ead8 100%);
  border-radius: var(--arch-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, var(--letter-y, 0%)) scale(var(--letter-scale, 0.94));
  opacity: var(--letter-op, 0);
  will-change: transform, opacity;
}
.envelope__letter::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(168, 129, 62, 0.3);
  border-radius: var(--arch-sm);
  pointer-events: none;
}
.envelope__letter-inner {
  text-align: center;
  color: #123024;
  font-family: var(--f-display);
  font-size: clamp(11.5px, 2.6vw, 14.5px);
  line-height: 1.7;
}
.envelope__letter-inner p { color: #2c4a3c; margin: 0 0 10px; }
.envelope__letter-inner p:last-child { margin-bottom: 0; }
.envelope__letter-inner strong { color: #123024; font-weight: 600; }
.envelope__greeting {
  font-family: var(--f-script);
  font-size: clamp(17px, 4vw, 24px);
  color: var(--gold-deep);
  margin-bottom: 8px !important;
}
.envelope__letter-date {
  font-family: var(--f-body);
  font-size: clamp(0.52rem, 1.8vw, 0.62rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6a3a;
}

.envelope__hearts {
  position: absolute;
  top: 5%; left: 50%;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  translate: -50% 0;
  color: var(--coral);
  pointer-events: none;
}
.envelope__heart { animation: heartFloat 2.8s ease-in-out infinite; }
.envelope__heart:nth-child(2) { animation-delay: 0.55s; color: var(--saffron); }
.envelope__heart:nth-child(3) { animation-delay: 1.1s;  color: var(--gold); }
.envelope__heart:nth-child(4) { animation-delay: 1.65s; color: var(--rose); }

.envelope__rail {
  position: relative;
  width: min(220px, 55vw);
  height: 2px;
  background: rgba(217, 178, 106, 0.18);
  border-radius: 2px;
}
.envelope__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--grad-gold);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(217, 178, 106, 0.7);
}

/* ==========================================================================
   5 · SCRATCH CARDS
   ========================================================================== */

.scratch__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  width: min(100%, 620px);
  margin-top: clamp(2rem, 6vw, 3rem);
  transition: transform 0.6s var(--ease);
}
.scratch__grid.is-revealed { transform: scale(0.98); }

.scratch__card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--arch-sm);
  overflow: hidden;
  touch-action: none;
  background: linear-gradient(168deg, #fdf8ef 0%, #f1e4cd 100%);
  border: 1px solid var(--gold);
  box-shadow: 0 5px 0 var(--gold-deep), var(--shadow-lift);
}
.scratch__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.85rem;
  text-align: center;
}
.scratch__label {
  font-size: clamp(0.5rem, 2vw, 0.56rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.scratch__value {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 5.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink-dark);
}
.scratch__sub {
  font-size: clamp(0.56rem, 2.2vw, 0.66rem);
  color: #7b6238;
}
.scratch__canvas { position: absolute; inset: 0; cursor: grab; }
.scratch__canvas.is-done { opacity: 0; pointer-events: none; transition: opacity 0.6s; }

.scratch__hint {
  margin-top: 1.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ==========================================================================
   6 · COUNTDOWN
   ========================================================================== */

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  width: min(100%, 560px);
  margin-top: clamp(2rem, 6vw, 3rem);
}
.countdown__unit {
  position: relative;
  padding: clamp(1.1rem, 4vw, 1.6rem) 0.6rem clamp(0.9rem, 3vw, 1.2rem);
  border: 1px solid rgba(217, 178, 106, 0.35);
  border-radius: var(--arch-sm);
  background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: 0 4px 0 var(--gold-deep), var(--shadow-lift);
  overflow: hidden;
}
.countdown__unit::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 66%; height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.countdown__value {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 9vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.countdown__value.is-ticking { animation: digitFlip 0.6s var(--ease); }
.countdown__label {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.5rem, 2vw, 0.56rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
}
.countdown__note {
  margin-top: 1.8rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--ink-soft);
}

/* ==========================================================================
   7 · TIMELINE
   ========================================================================== */

.timeline__list {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin-top: clamp(2.2rem, 6vw, 3.4rem);
  padding: 0.5rem 0;
}
.timeline__path-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.timeline__path-bg   { fill: none; stroke: rgba(217, 178, 106, 0.15); stroke-width: 2; }
.timeline__path-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(217, 178, 106, 0.6));
}
.timeline__spark-halo { fill: var(--gold-bright); opacity: 0.32; filter: blur(4px); }
.timeline__spark-core {
  fill: #fff;
  filter: drop-shadow(0 0 7px rgba(242, 221, 166, 0.95));
  transform-box: fill-box;
  transform-origin: 50%;
  animation: sparkFlicker 1.5s ease-in-out infinite;
}

/* Mobile rail */
.timeline__rail, .timeline__rail-fill {
  position: absolute;
  top: 0; bottom: 0;
  left: 21px;
  width: 2px;
}
.timeline__rail { background: rgba(217, 178, 106, 0.15); }
.timeline__rail-fill {
  bottom: auto;
  height: 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 12px rgba(217, 178, 106, 0.7);
}

.timeline__row {
  position: relative;
  z-index: 1;
  display: flex;
  padding-left: 58px;
  margin-bottom: var(--gap);
}
.timeline__row:last-child { margin-bottom: 0; }

.timeline__card {
  --lit: 0;
  position: relative;
  width: 100%;
  padding: clamp(1.15rem, 4vw, 1.6rem) clamp(1.1rem, 4vw, 1.7rem);
  text-align: left;
  border: 1px solid rgba(217, 178, 106, 0.3);
  border-radius: var(--arch-sm);
  background: linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow:
    0 4px 0 var(--gold-shadow),
    var(--shadow-lift),
    0 0 calc(var(--lit) * 34px) rgba(var(--accent-rgb, 217, 178, 106), calc(var(--lit) * 0.4));
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.4s var(--ease);
}
.timeline__card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(217, 178, 106, 0.12);
  border-radius: var(--arch-sm);
  pointer-events: none;
}
.timeline__card:hover { border-color: var(--accent, var(--gold)); transform: translateY(-4px); }

.timeline__when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-size: clamp(0.58rem, 2.2vw, 0.66rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
}
.timeline__index {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent, var(--gold));
  color: var(--ink-dark);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0;
}
.timeline__event {
  margin-bottom: 0.15rem;
  font-size: clamp(1.2rem, 4.6vw, 1.5rem);
  color: var(--gold-bright);
}
.timeline__time {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--accent, var(--coral));
}
.timeline__detail { font-size: var(--t-sm); line-height: 1.85; color: var(--ink-soft); }

.timeline__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(217, 178, 106, 0.16);
}
.timeline__meta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: clamp(0.6rem, 2.2vw, 0.7rem);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.timeline__meta-row svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; color: var(--gold); }

.timeline__node {
  --lit: 0;
  position: absolute;
  top: clamp(20px, 5vw, 28px);
  left: 21px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(40px, 11vw, 46px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.32) 0%, transparent 55%), var(--accent, var(--gold));
  box-shadow: 0 0 0 6px var(--bg), 0 0 calc(6px + var(--lit) * 24px) var(--glow, rgba(217,178,106,0.6));
  filter: grayscale(calc(70% - var(--lit) * 70%)) brightness(calc(0.65 + var(--lit) * 0.35));
  transition: filter 0.25s, box-shadow 0.25s;
}
.timeline__node-icon { width: 55%; height: 55%; color: var(--ink-dark); }

/* ==========================================================================
   8 · GALLERY
   ========================================================================== */

.gallery__frame {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 3 / 4;
  margin-top: clamp(2rem, 6vw, 3rem);
  border: 1px solid var(--gold);
  border-radius: var(--arch-lg);
  overflow: hidden;
  box-shadow: 0 6px 0 var(--gold-deep), var(--shadow-deep);
}
.gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.gallery__slide.is-active { opacity: 1; }
.gallery__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
}
.gallery__slide.is-active img { animation: kenBurns 8s ease-out forwards; }
.gallery__slide figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.6rem 1.2rem 1.15rem;
  background: linear-gradient(transparent, rgba(3, 17, 13, 0.94));
  color: var(--ivory);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.gallery__nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.gallery__arrow {
  display: grid;
  place-items: center;
  width: 44px; aspect-ratio: 1;
  border: 1px solid rgba(217, 178, 106, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-bright);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.gallery__arrow:hover { background: var(--gold); color: var(--ink-dark); transform: scale(1.07); }
.gallery__dots { display: flex; gap: 0.5rem; }
.gallery__dot {
  width: 8px; aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(217, 178, 106, 0.3);
  transition: background 0.35s, transform 0.35s;
}
.gallery__dot.is-active { background: var(--coral); transform: scale(1.45); }

/* ==========================================================================
   9 · VENUES
   ========================================================================== */

.venue__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  width: 100%;
  margin-top: clamp(2rem, 6vw, 3rem);
}
.venue__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.8rem, 6vw, 2.5rem) clamp(1.2rem, 5vw, 1.7rem) clamp(1.5rem, 5vw, 2rem);
  border: 1px solid rgba(217, 178, 106, 0.3);
  border-radius: var(--arch-md);
  background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: 0 5px 0 var(--gold-shadow), var(--shadow-lift);
  transition: transform 0.45s var(--ease), border-color 0.35s;
}
.venue__card:hover { transform: translateY(-6px); border-color: var(--gold); }
.venue__icon {
  display: grid;
  place-items: center;
  width: 50px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--ink-dark);
}
.venue__kind {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--coral);
}
.venue__name { font-size: var(--t-lg); }
.venue__address { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }
.venue__note {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink-dim);
}
.venue__button { margin-top: 0.7rem; }

/* ==========================================================================
   10 · RSVP
   ========================================================================== */

.rsvp__card {
  width: 100%;
  max-width: 620px;
  margin-top: clamp(2rem, 6vw, 3rem);
  padding: clamp(3.5rem, 8vw, 4.5rem) clamp(1.8rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
  border: 1px solid rgba(217, 178, 106, 0.3);
  border-radius: var(--arch-md);
  background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: 0 6px 0 var(--gold-shadow), var(--shadow-deep);
  box-sizing: border-box;
}
.rsvp__form { display: grid; gap: 1.05rem; text-align: left; width: 100%; box-sizing: border-box; }
.rsvp__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.05rem; width: 100%; box-sizing: border-box; }
.rsvp__field { display: flex; flex-direction: column; gap: 0.4rem; }
.rsvp__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.rsvp__label svg { width: 13px; height: 13px; flex-shrink: 0; }

.rsvp__input, .rsvp__select, .rsvp__textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(217, 178, 106, 0.26);
  border-radius: 8px;
  background: rgba(3, 17, 13, 0.55);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;               /* 16px prevents iOS zoom-on-focus */
  font-weight: 300;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.rsvp__input::placeholder, .rsvp__textarea::placeholder { color: var(--ink-dim); }
.rsvp__input:focus, .rsvp__select:focus, .rsvp__textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 178, 106, 0.16);
  background: rgba(3, 17, 13, 0.75);
}
.rsvp__textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.rsvp__select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23d9b26a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.rsvp__select option { background: var(--bg-raised); color: var(--ink); }

/* Attendance choice as two large tappable cards */
.rsvp__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.rsvp__choice { position: relative; }
.rsvp__choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.rsvp__choice-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 76px;
  padding: 0.75rem 0.5rem;
  border: 1px solid rgba(217, 178, 106, 0.26);
  border-radius: 10px;
  background: rgba(3, 17, 13, 0.5);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.2s;
}
.rsvp__choice-face svg { width: 20px; height: 20px; color: var(--gold); transition: color 0.3s; }
.rsvp__choice input:checked + .rsvp__choice-face {
  border-color: var(--gold);
  background: rgba(217, 178, 106, 0.14);
  color: var(--gold-bright);
  transform: translateY(-2px);
}
.rsvp__choice input:focus-visible + .rsvp__choice-face { outline: 2px solid var(--gold); outline-offset: 2px; }

.rsvp__submit { width: 100%; margin-top: 0.3rem; }
.rsvp__submit[disabled] { opacity: 0.6; cursor: wait; }

.rsvp__status {
  min-height: 1.3em;
  margin-top: 0.7rem;
  text-align: center;
  font-size: var(--t-sm);
}
.rsvp__status--ok  { color: var(--jade); }
.rsvp__status--err { color: var(--coral); }

.rsvp__success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 0;
  text-align: center;
}
.rsvp__success.is-visible { display: flex; animation: fadeUp 0.7s var(--ease); }
.rsvp__success-mark {
  display: grid;
  place-items: center;
  width: 58px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--ink-dark);
  animation: sealPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rsvp__list { width: 100%; max-width: 620px; margin-top: 2rem; }
.rsvp__list-title {
  margin-bottom: 0.9rem;
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--coral);
  text-align: center;
}
.rsvp__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.rsvp__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(217, 178, 106, 0.26);
  border-radius: var(--pill);
  background: rgba(3, 17, 13, 0.4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  animation: fadeUp 0.5s var(--ease) backwards;
}
.rsvp__chip-dot { width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--jade); }
.rsvp__chip-dot--no { background: var(--coral); }

/* ==========================================================================
   11 · DETAILS (travel, stay, gifts)
   ========================================================================== */

.details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  width: 100%;
  margin-top: clamp(2rem, 6vw, 3rem);
  text-align: left;
}
.details__item {
  padding: clamp(1.2rem, 4vw, 1.6rem);
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(217, 178, 106, 0.07), transparent 70%);
  border-radius: 0 8px 8px 0;
}
.details__q {
  margin-bottom: 0.45rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--gold-bright);
}
.details__a { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-soft); }
.details__a a { color: var(--coral); border-bottom: 1px solid rgba(226, 121, 95, 0.4); }

/* ==========================================================================
   12 · CLOSING
   ========================================================================== */

.closing { text-align: center; }
.closing__diya { color: var(--gold); filter: drop-shadow(0 0 20px rgba(239, 169, 74, 0.5)); }
.closing__flame {
  color: var(--coral);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: diyaFlicker 1.6s ease-in-out infinite;
}
.closing__title {
  margin: 1.2rem 0 0.6rem;
  font-family: var(--f-script);
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  color: var(--gold-bright);
}
.closing__names {
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 2;
}
.closing__hash {
  margin-top: 1.4rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--coral);
}
.closing__credit {
  margin-top: 2.2rem;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ==========================================================================
   Floating UI
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  width: 0;
  height: 3px;
  background: var(--grad-gold);
  box-shadow: 0 0 12px rgba(217, 178, 106, 0.8);
}

.music-toggle {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 50px; aspect-ratio: 1;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(6, 26, 20, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.music-toggle:hover { transform: scale(1.07); border-color: var(--gold-bright); }
.music-toggle__bar {
  width: 3px; height: 9px;
  border-radius: 2px;
  background: var(--gold-bright);
  transition: height 0.3s;
}
.music-toggle.is-playing .music-toggle__bar { animation: musicBar 0.95s ease-in-out infinite; }
.music-toggle.is-playing .music-toggle__bar:nth-child(2) { animation-delay: 0.2s; }
.music-toggle.is-playing .music-toggle__bar:nth-child(3) { animation-delay: 0.4s; }
.music-toggle.is-playing .music-toggle__bar:nth-child(4) { animation-delay: 0.6s; }

.to-top {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: grid;
  place-items: center;
  width: 44px; aspect-ratio: 1;
  border: 1px solid rgba(217, 178, 106, 0.4);
  border-radius: 50%;
  background: rgba(6, 26, 20, 0.9);
  backdrop-filter: blur(8px);
  color: var(--gold-bright);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s var(--ease), background 0.3s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--gold); color: var(--ink-dark); }

.petals { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  top: -6vh;
  width: 11px; aspect-ratio: 1;
  border-radius: 50% 0 50% 50%;
  background: var(--saffron);
  opacity: 0.45;
  animation: petalFall linear infinite;
}
.petal--coral { background: var(--coral); }
.petal--gold  { background: var(--gold); }
.petal--rose  { background: var(--rose); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(0.93); }
[data-reveal="blur"]  { filter: blur(8px); transform: translateY(16px); }