/* ================================================================
   LUXwedding — Luxshikaa & Mathusangan
   Luxury cinematic wedding RSVP stylesheet — v115
   ================================================================ */

/* ──────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────── */
:root {
  --ivory:        #FDFAF5;
  --cream:        #F4EDE0;
  --champagne:    #F2E0BF;
  --taupe:        #8B7D6B;
  --gold:         #C8A96E;
  --gold-light:   #E0C98A;
  --gold-dark:    #A07838;
  --charcoal:     #1A1714;
  --text:         #2A2420;
  --muted:        #7A6F68;
  --border:       #E8DDD4;
  --white:        #FFFFFF;
  --green:        #D4AF37;
  --red:          #c0392b;

  /* Glass palette — airy champagne tint */
  --glass-bg:       rgba(255, 248, 230, 0.06);
  --glass-border:   rgba(200, 169, 110, 0.20);
  --glass-border-h: rgba(200, 169, 110, 0.36);

  /* Typography */
  --ff-script:    'Great Vibes', cursive;
  --ff-allura:    'Allura', cursive;
  --ff-display:   'Cormorant Garamond', Georgia, serif;
  --ff-body:      'Jost', system-ui, -apple-system, sans-serif;

  /* Overlay depths — reduced ~35% to let videos breathe */
  --overlay-hero:  rgba(20, 10, 4, 0.17);
  --overlay-inner: rgba(8, 5, 2, 0.28);
  --overlay-admin: rgba(6, 4, 2, 0.62);

  --ease: 0.26s ease;
  --ease-slow: 0.5s ease;
}

/* ──────────────────────────────────────────────
   RESET & BASE
   ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--charcoal);
  color: rgba(255,255,255,0.85);
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { opacity: 0.8; }

button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }

input, textarea, select { font-family: inherit; font-size: inherit; }

/* ──────────────────────────────────────────────
   UTILITY
   ────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ──────────────────────────────────────────────
   SITE VIDEO BACKGROUND — persists behind all pages
   ────────────────────────────────────────────── */
.site-video-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--charcoal);
}

/* Individual video elements — only one active at a time via .v-active */
.site-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 0.45s ease;
  will-change: opacity;
  /* Ensure crisp rendering — no scaling artifacts */
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.site-video.v-active { opacity: 1; }

/* Per-video object-position — keeps faces in the safe center zone on all screen sizes */
#vid-walking   { object-position: center 30%; }
#vid-cinematic { object-position: center 40%; }
#vid-laughing  { object-position: center 50%; }

/* ── Mobile portrait videos ──────────────────────────────────
   firstmobile.mov (RSVP) / confirmationphone.mov (conf) — used on ≤767px only.
   Portrait video on a portrait phone: cover fills the screen.
   Hidden entirely on desktop so they never load or interfere. */
#vid-hero-mobile,
#vid-rsvp-mobile,
#vid-conf-mobile {
  object-fit: cover;
  object-position: center center;
}
@media (min-width: 768px) {
  .site-video--mobile { display: none; }
}

/* ──────────────────────────────────────────────
   AUTOPLAY FALLBACK — shown when browser blocks autoplay
   ────────────────────────────────────────────── */
.video-play-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.video-play-btn.show {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}
.video-play-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-play-btn.show:hover .video-play-circle {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.08);
}

/* ──────────────────────────────────────────────
   PAGE OVERLAYS
   ────────────────────────────────────────────── */
.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.page-overlay--hero {
  background: rgba(0, 0, 0, 0.04);
}

.page-overlay--inner {
  background: rgba(0, 0, 0, 0.04);
}

.page-overlay--reveal {
  background: linear-gradient(160deg,
    rgba(50, 22, 4, 0.28) 0%,
    rgba(22, 8, 2, 0.16) 45%,
    rgba(50, 22, 4, 0.24) 100%
  );
}

.page-overlay--admin {
  background: rgba(0, 0, 0, 0.60);
}

/* ──────────────────────────────────────────────
   SPA PAGE SYSTEM
   ────────────────────────────────────────────── */
.page {
  display: none;
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.page.active {
  display: block;
}

#page-hero.active {
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Hero page itself: no animation — let child elements reveal in sequence */
}

.hero-viewport {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  /* Default (splash): names sit slightly below center */
  padding-top: calc(48vh + env(safe-area-inset-top, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: padding-top 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Landing page cinematic reveal sequence ── */
@keyframes luxReveal {
  from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0px); }
}

@keyframes invCardReveal {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateX(-5deg) rotateY(2.5deg) translateY(36px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateX(-1.8deg) rotateY(1.2deg) translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Hero overlay fades in first so the video reveals gently */
.page-overlay--hero {
  animation: luxFadeOverlay 0.9s ease forwards;
}
@keyframes luxFadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Staggered children — applied only when #page-hero is active */
#page-hero.active .hero-names {
  opacity: 0;
  animation: luxReveal 0.75s ease 0.55s forwards;
}
#page-hero.active .hero-date {
  opacity: 0;
  animation: luxReveal 0.65s ease 1.0s forwards;
}
#page-hero.active .hero-search-card {
  /* Splash: hidden until guest taps/clicks to enter */
  opacity: 0;
  animation: none;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease 0.2s, max-height 0.6s ease;
}

/* ── Hero entered state: viewport moves up, form reveals ── */
#page-hero.hero-entered .hero-viewport {
  padding-top: calc(8vh + env(safe-area-inset-top, 0));
}

#page-hero.hero-entered .hero-search-card {
  opacity: 1;
  max-height: 600px;
  pointer-events: all;
}

/* Whole hero is a tap-target in splash state */
#page-hero:not(.hero-entered) {
  cursor: pointer;
}

/* ── Splash entry prompt ── */
#hero-enter-prompt {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

#page-hero.hero-entered #hero-enter-prompt {
  opacity: 0;
}

.hero-prompt-text {
  font-family: var(--ff-body);
  font-size: 0.53rem;
  font-weight: 300;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.30);
  animation: promptPulse 2.8s ease-in-out infinite;
  display: none;
}

/* Show mobile text on touch/small screens, desktop text on pointer devices */
.hero-prompt-mobile  { display: block; }
.hero-prompt-desktop { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hero-prompt-mobile  { display: none; }
  .hero-prompt-desktop { display: block; }
}

@keyframes promptPulse {
  0%, 100% { opacity: 0.42; transform: translateY(0); }
  50%       { opacity: 0.72; transform: translateY(-3px); }
}

/* Reveal page — full-screen, centered, no scroll */
#page-reveal.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Inner pages — scrollable column */
#page-rsvp.active,
#page-confirmation.active,
#page-admin.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  animation: luxReveal 0.55s ease both;
}

.inner-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.inner-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.5rem calc(6rem + env(safe-area-inset-bottom, 0));
}

/* ──────────────────────────────────────────────
   HERO — CINEMATIC FULL-SCREEN
   ────────────────────────────────────────────── */
.hero-main {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: 0 1.5rem;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-names {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.28;
  color: var(--white);
  white-space: nowrap;
  margin-bottom: 0.65rem;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.14);
}

.name-a, .name-b { display: inline; }

.name-amp {
  display: inline;
  font-size: 0.68em;
  color: rgba(200, 169, 110, 0.72);
  margin: 0 0.1em;
}

.hero-date {
  font-family: var(--ff-body);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 3.2rem;
}

/* Search card */
.hero-search-card {
  background: rgba(248, 243, 235, 0.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 24px;
  padding: 1.5rem 1.4rem 1.1rem;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.hero-search-label {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
  margin-bottom: 1.15rem;
}

.hero-input-wrap {
  position: relative;
  margin-bottom: 0.45rem;
}

.hero-input {
  width: 100%;
  padding: 0.78rem 2.4rem 0.78rem 1rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  color: var(--white);
  font-size: 0.9rem;
  outline: none;
  transition: all var(--ease);
  caret-color: var(--gold-light);
}

.hero-input:focus {
  border-color: rgba(200, 169, 110, 0.42);
  background: rgba(255, 255, 255, 0.08);
}

.hero-input::placeholder { color: rgba(255, 255, 255, 0.25); font-style: italic; }

.hero-input-icon {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  line-height: 1;
}

.did-you-mean {
  padding: 0.6rem 0.9rem;
  background: rgba(200, 169, 110, 0.10);
  border: 1px solid rgba(200, 169, 110, 0.25);
  border-radius: 8px;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  color: var(--gold-light);
}

.did-you-mean .dym-link {
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-results { margin-bottom: 0.2rem; }

.glass-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.3rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  text-align: left;
  transition: all var(--ease);
  cursor: pointer;
}

.glass-result-item:hover,
.glass-result-item:focus {
  background: rgba(200, 169, 110, 0.15);
  border-color: rgba(200, 169, 110, 0.32);
  outline: none;
}

.gri-name  { display: block; color: var(--white); font-size: 0.92rem; line-height: 1.3; }
.gri-group { display: block; color: rgba(255,255,255,0.36); font-size: 0.68rem; margin-top: 0.1rem; }
.gri-arrow { color: var(--gold); flex-shrink: 0; margin-left: 0.75rem; }

.hero-no-results {
  text-align: center;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.36);
  padding: 0.4rem 0.25rem 0.2rem;
  line-height: 1.55;
}

/* Search status states */
.search-status {
  padding: 0.85rem 0.75rem;
  border-radius: 12px;
  margin: 0.1rem 0 0.25rem;
  text-align: center;
  animation: fadeUp 0.2s ease both;
}

.search-status.found {
  background: transparent;
  border: none;
  padding: 0.3rem 0 0.5rem;
}

.found-card {
  background: linear-gradient(150deg, #fefaf2 0%, #f8f1e2 55%, #f3e8d0 100%);
  border: 1px solid rgba(185, 148, 50, 0.30);
  border-radius: 14px;
  padding: 1.4rem 1.6rem 1.1rem;
  text-align: center;
  margin-bottom: 0.85rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 4px 22px rgba(0,0,0,0.13),
    0 1px 4px rgba(0,0,0,0.07);
  filter: url(#filter-card-grain);
}

.found-card-header {
  display: flex; align-items: center; justify-content: center;
  gap: 0.46rem; margin-bottom: 0.65rem;
}
.found-check-icon { color: #9C7818; font-size: 0.70rem; }
.found-check-label {
  font-family: var(--ff-body); font-size: 0.46rem;
  letter-spacing: 0.30em; text-transform: uppercase; color: #9C7818;
}
.found-card-divider {
  width: 50px; height: 1px; margin: 0 auto 0.75rem;
  background: linear-gradient(to right, transparent, rgba(156,120,24,0.36), transparent);
}
.found-card-name {
  font-family: var(--ff-display); font-style: italic;
  font-size: 1.45rem; color: rgba(30,18,4,0.80);
  margin: 0 0 0.30rem; line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255,252,236,0.55);
}
.found-card-event {
  font-family: var(--ff-body); font-size: 0.42rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(100,74,20,0.54); margin: 0;
}

.search-status.multiple,
.search-status.none {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.search-status.searching {
  background: transparent;
  border: none;
}

.search-status.searching .status-main {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.status-main {
  font-family: var(--ff-display);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.70);
  margin-bottom: 0.22rem;
  line-height: 1.3;
}

.search-status.found .status-main {
  color: var(--gold-light);
  letter-spacing: 0.01em;
}

.status-guest-name {
  font-family: var(--ff-display);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0.2rem 0 0.55rem;
}

/* ── Luxury found-state elements (legacy — replaced by .found-card) ── */

/* Continue button — luxury ivory paper + gold border */
.search-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0.68rem 2.6rem;
  min-height: 46px;
  background: #fdf5e6;
  border: 1px solid rgba(188,148,54,0.60);
  border-radius: 2px;
  color: rgba(94,66,14,0.80);
  font-family: var(--ff-body);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 2px 14px rgba(188,148,54,0.14), inset 0 1px 0 rgba(255,255,255,0.68);
  position: relative; overflow: hidden;
}
.search-open-btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,240,180,0.18) 50%, transparent 60%);
  transition: left 0.55s ease;
}
.search-open-btn:hover {
  background: #fef9f0;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(188,148,54,0.22), 0 6px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.68);
  border-color: rgba(188,148,54,0.80);
}
.search-open-btn:hover::before { left: 160%; }

.status-hint {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
  line-height: 1.5;
}

.status-hint a {
  color: rgba(200, 169, 110, 0.60);
}

.status-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.45rem;
}
.status-contact-row {
  font-size: 0.68rem;
  color: rgba(200, 169, 110, 0.70);
  text-decoration: none;
  font-style: normal;
}
.status-contact-row:hover { color: rgba(200, 169, 110, 0.92); }

.hero-idle {
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.24);
  margin: 0.3rem 0 0.5rem;
}

.hero-contact {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.24);
  text-align: center;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.2rem;
}
.hero-contact-label {
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}
.hero-contact-details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
}
.hero-contact a { color: rgba(222, 196, 155, 0.65); text-decoration: none; }
.hero-contact a:hover { color: rgba(222, 196, 155, 0.9); }
.hero-contact-sep { color: rgba(255,255,255,0.15); }
#hero-contact-phone { color: rgba(222, 196, 155, 0.55); }

/* ──────────────────────────────────────────────
   INNER PAGE HEADER
   ────────────────────────────────────────────── */
.inner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 0 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 2.2rem;
}

.header-brand {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  color: rgba(200, 169, 110, 0.75);
}

.header-gap { min-width: 60px; }

/* ──────────────────────────────────────────────
   PROGRESS STEPS
   ────────────────────────────────────────────── */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding: 0 0.5rem;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  transition: all 0.3s ease;
}

.step-item.done   .step-dot { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.step-item.active .step-dot { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); color: var(--charcoal); }

.step-lbl {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}
.step-item.active .step-lbl { color: rgba(255, 255, 255, 0.7); }
.step-item.done   .step-lbl { color: rgba(200, 169, 110, 0.6); }

.step-connector {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  max-width: 70px;
  margin: 0 0.35rem;
  margin-bottom: 1.4rem;
  transition: background 0.3s ease;
}
.step-connector.done { background: rgba(200, 169, 110, 0.5); }

/* ──────────────────────────────────────────────
   TYPOGRAPHY HELPERS
   ────────────────────────────────────────────── */
.section-gem {
  display: block;
  text-align: center;
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.5em;
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--white);
  text-align: center;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.section-sub {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  margin-bottom: 2rem;
}

/* ──────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────── */
.btn-ghost {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  min-width: 60px;
  transition: color var(--ease);
}
.btn-ghost:hover { color: rgba(255, 255, 255, 0.85); }

.btn-ghost-gold {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  border: 1px solid rgba(200, 169, 110, 0.60);
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(200, 169, 110, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 0 rgba(200,169,110,0), 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep on hover */
.btn-ghost-gold::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,240,180,0.22) 50%, transparent 60%);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn-ghost-gold:hover {
  background: rgba(200, 169, 110, 0.16);
  border-color: rgba(200, 169, 110, 0.80);
  color: #fff0c8;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(200,169,110,0.28), 0 8px 28px rgba(0,0,0,0.12);
}
.btn-ghost-gold:hover::before {
  left: 160%;
}

.btn-ghost-white {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  transition: all var(--ease);
  cursor: pointer;
}
.btn-ghost-white:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.9);
}

.btn-wide { min-width: 240px; }

.btn-gold {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  background: var(--gold);
  color: var(--charcoal);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: all var(--ease);
  cursor: pointer;
  border: none;
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-danger {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: transparent;
  color: rgba(192, 57, 43, 0.8);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(192, 57, 43, 0.45);
  border-radius: 3px;
  transition: all var(--ease);
  cursor: pointer;
}
.btn-danger:hover { background: rgba(192, 57, 43, 0.15); border-color: rgba(192,57,43,0.7); color: #e05a4a; }

.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.64rem; }

/* ──────────────────────────────────────────────
   DARK INPUT FIELDS (used on glass pages)
   ────────────────────────────────────────────── */
.dark-input {
  width: 100%;
  padding: 0.72rem 1rem;
  background: rgba(255, 252, 244, 0.90);
  border: 1px solid rgba(185, 148, 50, 0.22);
  border-radius: 8px;
  color: rgba(38, 28, 8, 0.82);
  font-size: 0.88rem;
  outline: none;
  transition: all var(--ease);
  caret-color: #9C7818;
}
.dark-input:focus {
  border-color: rgba(185, 148, 50, 0.45);
  background: rgba(255, 254, 248, 0.98);
}
.dark-input::placeholder { color: rgba(80, 62, 22, 0.35); font-style: italic; }

.dark-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 252, 244, 0.90);
  border: 1px solid rgba(185, 148, 50, 0.22);
  border-radius: 10px;
  color: rgba(38, 28, 8, 0.82);
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  transition: border-color var(--ease);
  caret-color: #9C7818;
  min-height: 90px;
}
.dark-textarea:focus { border-color: rgba(185, 148, 50, 0.42); }
.dark-textarea::placeholder { color: rgba(80, 62, 22, 0.32); font-style: italic; }

/* ──────────────────────────────────────────────
   RSVP FORM — INVITATION CARD LAYOUT
   ────────────────────────────────────────────── */
.rsvp-intro {
  text-align: center;
  margin-bottom: 2.8rem;
}

.rsvp-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.55);
  margin-bottom: 0.6rem;
}

.rsvp-welcome {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 300;
  color: rgba(32, 22, 6, 0.70);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.rsvp-welcome-name {
  font-style: italic;
  color: rgba(140,100,20,0.88);
}

.rsvp-sub {
  font-size: 0.70rem;
  color: rgba(50, 38, 14, 0.55);
  margin-bottom: 0.9rem;
}

.rsvp-hi-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(2.0rem, 5.5vw, 2.8rem);
  font-weight: 300;
  color: rgba(32, 22, 6, 0.84);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.rsvp-sub-light {
  font-size: 0.82rem;
  color: rgba(50, 38, 14, 0.60);
  margin-bottom: 0.9rem;
  line-height: 1.5;
}

.deadline-notice--light {
  background: rgba(185, 148, 50, 0.10);
  border-color: rgba(185, 148, 50, 0.28);
  color: rgba(120, 90, 20, 0.80);
}

.deadline-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: rgba(200, 169, 110, 0.09);
  border: 1px solid rgba(200, 169, 110, 0.22);
  border-radius: 9999px;
  font-size: 0.66rem;
  color: rgba(200, 169, 110, 0.7);
  letter-spacing: 0.04em;
}

/* RSVP countdown inline — below "Hi Monica," */
/* Top countdown (under L & M header on RSVP page) */
.rsvp-top-countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.rsvp-top-countdown-n {
  font-family: var(--ff-display);
  font-size: 2.10rem;
  font-weight: 400;
  color: #C8A96E;
  line-height: 1;
}
.rsvp-top-countdown-txt {
  font-family: var(--ff-display);
  font-size: 1.00rem;
  font-style: italic;
  color: #FFFEF0;
  line-height: 1.3;
}

.rsvp-countdown-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.75rem;
  flex-wrap: wrap;
}
.rsvp-countdown-inline-n {
  font-family: var(--ff-display);
  font-size: 1.65rem;
  font-weight: 400;
  color: #C8A96E;
  line-height: 1;
}
.rsvp-countdown-inline-txt {
  font-family: var(--ff-display);
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(248, 244, 235, 0.78);
  line-height: 1.3;
}

/* RSVP contact section — email / phone */
.rsvp-contact-section {
  margin: 0.5rem 0 1.2rem;
  padding: 0;
}
.rsvp-contact-header {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  margin-bottom: 0.40rem;
}
.rsvp-contact-title {
  font-family: var(--ff-display, Georgia, serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(248, 244, 235, 0.88);
}
.rsvp-contact-sub {
  font-size: 0.64rem;
  color: rgba(80,60,20,0.45);
  font-style: italic;
  line-height: 1.35;
}
.rsvp-contact-fields {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}
.rsvp-contact-field { display: flex; flex-direction: column; gap: 0.18rem; flex: 1; min-width: 0; }
.rsvp-contact-lbl { font-size: 0.70rem !important; }
.rsvp-required { color: #C8A96E; }
.rsvp-contact-opt { font-size: 0.64rem; color: rgba(80,60,20,0.45); font-style: italic; }
.rsvp-contact-required { color: rgba(200, 60, 40, 0.80); font-style: normal; }
@media (max-width: 480px) {
  .rsvp-contact-fields { flex-direction: column; gap: 0.45rem; }
}

/* RSVP page card stagger — handled per-card above with combined cardPulse */
#page-rsvp.active .event-inv-card { opacity: 0; }

/* RSVP Weekend Header — now .rsvp-intro contains everything */
.rsvp-weekend-header { display: none; }

.rsvp-weekend-title {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 300;
  color: rgba(32, 22, 6, 0.84);
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}

.rsvp-weekend-hint {
  font-size: 0.66rem;
  color: rgba(200,169,110,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Event invitation card — refined stationery style */
.event-inv-card {
  background: rgba(253, 250, 244, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(185, 148, 50, 0.22);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.6rem;
  transition: box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease, transform 0.22s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  cursor: pointer;
}

.event-inv-card:hover {
  border-color: rgba(185, 148, 50, 0.34);
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

.event-inv-card.expanded {
  border-color: rgba(185, 148, 50, 0.32);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}

.event-card-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.46rem 0.95rem;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  gap: 0.85rem;
  color: inherit;
  font-family: inherit;
  transition: background 0.2s ease;
}
.event-card-trigger:hover { background: rgba(185,148,50,0.03); }
.event-card-trigger:focus { outline: none; }

.event-card-trigger-left {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex: 1;
  min-width: 0;
}

.event-card-gem { display: none; }
.event-card-botanical { flex-shrink: 0; margin-top: 0.08rem; }

/* Champagne accent dot — no longer used in card triggers */
.event-card-dot { display: none; }

/* Separator dot between date and arrival time */
.meta-sep {
  font-size: 1.36em;
  color: rgba(192, 158, 72, 0.82);
  line-height: 1;
  vertical-align: middle;
  margin: 0 0.30em;
}

.event-card-info { min-width: 0; }

.event-card-label {
  font-family: var(--ff-display);
  font-size: clamp(1.04rem, 2.8vw, 1.16rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(38, 28, 8, 0.90);
  display: block;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-meta-line {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(42, 32, 12, 0.52);
  display: block;
  margin-top: 0.14rem;
  line-height: 1.4;
}

/* Expanded body date/arrival header */
.ev-detail-header {
  margin-bottom: 0.9rem;
}
.ev-detail-date {
  font-family: var(--ff-body);
  font-size: 0.60rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(150, 116, 30, 0.72);
}
.ev-detail-arrive {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(38, 28, 8, 0.65);
  margin-top: 0.22rem;
}

/* kept for any legacy markup */
.event-card-date   { display: none; }
.event-card-arrival { display: none; }
/* legacy — kept for any existing markup */
.event-card-meta {
  font-size: 0.78rem;
  color: rgba(42, 32, 12, 0.64);
  letter-spacing: 0.01em;
  display: block;
  margin-top: 0.18rem;
}

.event-card-tap-hint {
  font-family: var(--ff-body);
  font-size: 0.40rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(150, 116, 30, 0.45);
  display: block;
  margin-top: 0.12rem;
}
.event-inv-card.expanded .event-card-tap-hint { display: none; }

.event-card-chevron {
  width: 18px;
  height: 18px;
  color: rgba(185, 148, 50, 0.70);
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.32s ease, color 0.25s ease;
}
.event-card-trigger:hover .event-card-chevron { color: rgba(185, 148, 50, 0.90); }
.event-inv-card.expanded .event-card-chevron  { transform: rotate(180deg); color: rgba(185, 148, 50, 0.90); }

/* Subtle pulse on first load — hints that cards are interactive */
@keyframes cardPulse {
  0%   { box-shadow: 0 2px 18px rgba(0,0,0,0.18); }
  50%  { box-shadow: 0 4px 28px rgba(200,169,110,0.14), 0 0 0 1px rgba(200,169,110,0.12); }
  100% { box-shadow: 0 2px 18px rgba(0,0,0,0.18); }
}
#page-rsvp.active .event-inv-card:nth-child(1) { animation: luxReveal 0.55s ease 0.15s both, cardPulse 1.8s ease 1.2s 2; }
#page-rsvp.active .event-inv-card:nth-child(2) { animation: luxReveal 0.55s ease 0.30s both, cardPulse 1.8s ease 1.5s 2; }
#page-rsvp.active .event-inv-card:nth-child(3) { animation: luxReveal 0.55s ease 0.45s both, cardPulse 1.8s ease 1.8s 2; }
#page-rsvp.active .event-inv-card:nth-child(4) { animation: luxReveal 0.55s ease 0.60s both, cardPulse 1.8s ease 2.1s 2; }

/* Group RSVP — per-person sections */
.rsvp-group-member { margin-bottom: 2rem; }
.rsvp-member-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem; padding: 0.6rem 0;
  border-bottom: 1px solid rgba(200,169,110,0.25);
}
.rsvp-member-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(200,169,110,0.18); border: 1px solid rgba(200,169,110,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-size: 0.95rem; color: var(--gold);
  flex-shrink: 0;
}
.rsvp-member-name {
  font-family: var(--ff-head); font-size: 1.05rem;
  color: rgba(255,255,255,0.92); letter-spacing: 0.03em;
}

/* Confirmation per-guest label */
.conf-guest-label {
  font-family: var(--ff-head); font-size: 0.95rem; color: var(--gold-light);
  letter-spacing: 0.05em; padding: 0.4rem 0 0.6rem;
  border-bottom: 1px solid rgba(200,169,110,0.2);
  margin: 1rem 0 0.5rem; width: 100%;
}

.event-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-inv-card.expanded .event-card-body { max-height: 1800px; }

.event-card-body-inner {
  padding: 0.45rem 1.1rem 0.55rem;
  border-top: 1px solid rgba(185, 148, 50, 0.10);
  background: rgba(248, 243, 232, 0.50);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease 0.05s, transform 0.28s ease 0.05s;
}

/* Compact venue block inside expanded card */
.ev-venue-block {
  padding: 0.25rem 0 0.35rem;
}

.ev-venue-name {
  font-size: 0.73rem;
  color: rgba(120, 88, 18, 0.88);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.10rem;
}

.ev-venue-addr {
  font-size: 0.60rem;
  color: rgba(60, 46, 12, 0.50);
  line-height: 1.4;
  padding-left: 1.0rem;
}

.ev-action-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.event-inv-card.expanded .event-card-body-inner {
  opacity: 1;
  transform: translateY(0);
}

.event-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid rgba(185, 148, 50, 0.10);
  margin-bottom: 1.25rem;
}

.event-detail-block {}

.event-detail-caption {
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.55);
  margin-bottom: 0.3rem;
}

.event-detail-value {
  font-family: var(--ff-display);
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(38, 28, 8, 0.80);
  line-height: 1.4;
}

.event-detail-value a {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.60);
  margin-top: 0.3rem;
  transition: color var(--ease);
}

.event-detail-value a:hover { color: var(--gold); opacity: 1; }

.cal-links {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.40rem;
  padding: 0.52rem 1.05rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: all var(--ease);
  text-decoration: none;
  font-family: inherit;
}

.cal-btn:hover {
  background: rgba(200, 169, 110, 0.12);
  border-color: rgba(200, 169, 110, 0.30);
  color: var(--gold-light);
  opacity: 1;
}

.event-inv-gem {
  display: inline-block;
  font-size: 0.52rem;
  color: var(--gold);
  letter-spacing: 0.3em;
}

/* Guest rows inside invitation card */
.event-inv-guests { padding: 0.25rem 0; }

.inv-guest-row {
  padding: 0.45rem 0 0;
  border-top: 1px solid rgba(185, 148, 50, 0.10);
}

.inv-guest-name {
  font-family: var(--ff-display);
  font-size: 0.98rem;
  font-weight: 400;
  color: rgba(38, 28, 8, 0.78);
  margin-bottom: 0.35rem;
}

.inv-attend {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Attendance pills — light cream style */
/* ── Event-first RSVP sections ─────────────────────────────── */
.rsvp-event-section {
  margin-bottom: 0.6rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(185, 148, 50, 0.22);
  background: rgba(253, 250, 244, 0.92);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  transition: box-shadow 0.24s ease, border-color 0.24s ease;
}
.rsvp-event-section:hover {
  border-color: rgba(185, 148, 50, 0.34);
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
.rsvp-event-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  gap: 0.85rem;
  border-bottom: 1px solid rgba(185, 148, 50, 0.12);
  transition: background 0.2s ease;
}
.rsvp-event-hdr:hover { background: rgba(185,148,50,0.03); }
.rsvp-ev-hdr-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.rsvp-ev-hdr-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.rsvp-event-hdr-top { display: contents; }
.rsvp-event-hdr-label {
  font-family: var(--ff-display);
  font-style: normal;
  font-size: clamp(1.14rem, 2.8vw, 1.30rem);
  color: rgba(38, 28, 8, 0.90);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.rsvp-event-hdr-date {
  font-size: 0.92rem;
  color: rgba(42, 32, 12, 0.52);
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: block;
}
.rsvp-event-hdr-meta { display: none; }
.rsvp-ev-body-meta {
  font-size: 0.85rem;
  color: rgba(42, 32, 12, 0.60);
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  padding: 0.65rem 0.95rem 0;
}
.rsvp-ev-meta-top {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.rsvp-ev-meta-time,
.rsvp-ev-meta-venue {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.rsvp-ev-venue-name { font-weight: 500; }
.rsvp-ev-body-meta .ev-icon { width: 0.75em; height: 0.75em; flex-shrink: 0; }
.rsvp-ev-body-addr {
  font-size: 0.74rem;
  color: rgba(42, 32, 12, 0.48);
  padding-left: 0.92rem;   /* indent under venue name text: past pin icon + gap */
  line-height: 1.35;
}
.rsvp-ev-body-sep { color: rgba(42, 32, 12, 0.30); }
.rsvp-ev-guest-count {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(185, 148, 50, 0.75);
  font-family: var(--ff-body);
}
.rsvp-ev-hdr-meta-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.20rem;
}
.rsvp-ev-desc {
  font-family: var(--ff-body);
  font-size: 0.80rem;
  line-height: 1.65;
  color: rgba(50, 38, 12, 0.58);
  margin: 0.55rem 0 0;
  padding: 0;
  font-weight: 300;
  letter-spacing: 0.01em;
  pointer-events: none;
  text-align: left;
}
.rsvp-ev-dress-code {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: rgba(216, 190, 140, 0.10);
  border: 1px solid rgba(185, 148, 50, 0.22);
  border-radius: 6px;
  pointer-events: none;
}
.rsvp-ev-dress-code-label {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.77rem;
  color: rgba(50, 38, 12, 0.72);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.5;
}
.rsvp-ev-dress-code-label strong {
  font-weight: 600;
  color: rgba(50, 38, 12, 0.85);
}
.rsvp-ev-dress-code-note {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  color: rgba(50, 38, 12, 0.50);
  margin: 0.30rem 0 0;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.rsvp-ev-meta-sep {
  font-size: 0.74rem;
  color: rgba(42, 32, 12, 0.28);
  font-family: var(--ff-body);
  flex-shrink: 0;
}
.rsvp-ev-progress {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(42, 32, 12, 0.42);
  font-family: var(--ff-body);
  white-space: nowrap;
}
.rsvp-ev-progress--done {
  color: rgba(50, 140, 80, 0.82);
  font-weight: 500;
}
.rsvp-ev-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.rsvp-ev-toggle-text {
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--ff-body);
  color: rgba(185,148,50,0.75);
  white-space: nowrap;
}
.rsvp-ev-toggle--open { display: none; }
.rsvp-event-section.rsvp-ev-open .rsvp-ev-toggle--closed { display: none; }
.rsvp-event-section.rsvp-ev-open .rsvp-ev-toggle--open { display: inline; }
.rsvp-ev-chevron {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: rgba(185,148,50,0.60);
  transition: transform 0.24s ease, color 0.2s ease;
}
.rsvp-event-section.rsvp-ev-open .rsvp-ev-chevron {
  transform: rotate(180deg);
  color: rgba(185,148,50,0.90);
}
.rsvp-ev-instruction {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(38, 28, 8, 0.45);
  text-align: center;
  margin-bottom: 0.85rem;
  font-family: var(--ff-body);
}
.rsvp-ev-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.rsvp-event-section.rsvp-ev-open .rsvp-ev-body {
  max-height: 1800px;
}
.rsvp-event-hdr-links {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0 0.95rem 0.7rem;
}
.rsvp-event-guests {
  padding: 0.25rem 0;
}
.rsvp-guest-row {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(185, 148, 50, 0.10);
}
.rsvp-guest-row:last-child { border-bottom: none; }
.rsvp-guest-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}
.rsvp-guest-row-name {
  font-size: 0.90rem;
  color: rgba(38, 28, 8, 0.82);
  font-family: var(--ff-body);
  flex: 1;
  min-width: 0;
}
.rsvp-guest-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: rgba(200, 169, 110, 0.14);
  border: 1px solid rgba(200, 169, 110, 0.38);
  color: rgba(140, 105, 40, 0.90);
  font-size: 0.70rem;
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;
}
.rsvp-guest-pills {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.inv-field--compact { margin-top: 0.4rem; }
.dark-input--sm {
  font-size: 0.70rem;
  padding: 0.22rem 0.60rem;
  border-radius: 6px;
}

.attend-pill {
  flex: 1;
  padding: 0.72rem 0.6rem;
  border-radius: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: var(--ff-body);
  background: rgba(255, 252, 244, 0.90);
  border: 1px solid rgba(185, 148, 50, 0.25);
  color: rgba(50, 38, 12, 0.70);
}
.attend-pill.yes-active {
  background: #C8A96E;
  border-color: #B8953A;
  color: #ffffff;
  font-weight: 600;
}
.attend-pill.no-active {
  background: transparent;
  border-color: rgba(185, 148, 50, 0.22);
  color: rgba(50, 38, 12, 0.38);
}
.attend-pill--sm {
  flex: none;
  padding: 0.26rem 0.72rem;
  font-size: 0.70rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* ── Confirmation — event-first attendance groups ──────────── */
.conf-ev-attend-group {
  margin-top: 0.85rem;
}
.conf-ev-attend-label {
  font-size: 0.70rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: block;
}
.conf-ev-attend-label--yes { color: rgba(140,220,140,0.88); }
.conf-ev-attend-label--no  { color: rgba(255,255,255,0.30); }
.conf-ev-guest-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.1rem 0;
}
.conf-ev-guest-bullet {
  color: rgba(200,169,110,0.55);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.conf-ev-guest-name {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.94);
  line-height: 1.4;
}
.conf-ev-guest-extra {
  font-size: 0.72rem;
  color: rgba(200,169,110,0.68);
}
.conf-ev-all-declined {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-top: 0.5rem;
  font-family: var(--ff-body);
}
.conf-ev-card--dim {
  opacity: 0.55;
}

/* Extras section (henna, dietary, song) */
.inv-extras {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(185, 148, 50, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  animation: fadeUp 0.2s ease;
}

.inv-field {}

.inv-field-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(50, 38, 12, 0.72);
  margin-bottom: 0.5rem;
}

/* Henna pills */
.mini-pills { display: flex; gap: 0.4rem; }

.mini-pill {
  padding: 0.55rem 1rem;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  transition: all var(--ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mini-pill:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }

.mini-pill.yes-active {
  background: rgba(200, 169, 110, 0.2);
  border-color: rgba(200, 169, 110, 0.5);
  color: var(--gold-light);
}

.mini-pill.no-active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
}

/* Message section */
.inv-message-section {
  margin-bottom: 1rem;
}

/* Memory / photo section — ivory card on mobile */
.inv-memory-section {
  background: #fdfaf4;
  border: 1px solid rgba(185, 148, 50, 0.22);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 2rem;
}
.inv-memory-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.0rem;
  color: rgba(38, 28, 8, 0.82);
  margin-bottom: 0.25rem;
}
.inv-memory-sub {
  font-size: 0.76rem;
  color: rgba(50, 38, 14, 0.55);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.inv-memory-optional {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.50rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.70);
  border: 1px solid rgba(200, 169, 110, 0.28);
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  margin-bottom: 1rem;
}
.inv-memory-upload-zone {
  border: 1.5px dashed rgba(185, 148, 50, 0.30);
  border-radius: 10px;
  background: rgba(185, 148, 50, 0.04);
  padding: 1.4rem 1rem;
  text-align: center;
  cursor: pointer;
  color: rgba(120, 90, 20, 0.60);
  font-size: 0.76rem;
  transition: border-color 0.2s, background 0.2s;
}
.inv-memory-upload-zone:hover {
  border-color: rgba(185, 148, 50, 0.50);
  background: rgba(185, 148, 50, 0.07);
}
.inv-memory-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
}
#photo-drop-zone { position: relative; }
#photo-preview { margin-top: 0.8rem; }
#photo-caption-wrap { margin-top: 0.8rem; }

.inv-field-label-lg {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(50, 38, 12, 0.72);
  margin-bottom: 0.65rem;
}

/* Thin-line SVG icons — champagne gold, inline with text */
.ev-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.3em;
  flex-shrink: 0;
  color: rgba(200, 169, 110, 0.80);
  position: relative;
  top: -1px;
}
.cal-btn .ev-icon,
.conf-ev-pill .ev-icon {
  width: 14px;
  height: 14px;
  top: -1px;
}
.conf-sticky-btn .ev-icon {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto 0.2rem;
  color: rgba(200, 169, 110, 0.80);
}

/* Champagne divider above submit CTA */
/* Shared motif: used above card group and above Submit button */
.rsvp-cards-divider,
.rsvp-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 220px;
}
.rsvp-cards-divider { margin: 0.9rem auto 1.0rem; }
.rsvp-divider       { margin: 2.0rem auto 1.4rem; }

.rsvp-cdiv-line,
.rsvp-div-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 169, 110, 0.22);
}
.rsvp-cdiv-orn,
.rsvp-div-orn {
  flex-shrink: 0;
  display: block;
}

/* ── Additional Details section (shared dietary + song) ── */
.rsvp-additional-section {
  margin: 0 auto 0.65rem;
  max-width: 490px;
  background: rgba(200, 169, 110, 0.05);
  border: 1px solid rgba(200, 169, 110, 0.15);
  border-radius: 10px;
  overflow: hidden;
}
.rsvp-additional-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.60rem 1.0rem;
  background: none;
  border: none;
  cursor: pointer;
  gap: 0.55rem;
}
.rsvp-additional-toggle:hover { background: rgba(200,169,110,0.06); }
.rsvp-additional-toggle-left {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.rsvp-additional-chevron {
  font-size: 0.58rem;
  color: rgba(200, 169, 110, 0.60);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.rsvp-additional-section--collapsed .rsvp-additional-chevron {
  transform: rotate(-90deg);
}
.rsvp-additional-body {
  max-height: 400px;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease;
  padding: 0 1.0rem 0.70rem;
}
.rsvp-additional-section--collapsed .rsvp-additional-body {
  max-height: 0;
  padding-bottom: 0;
}
.rsvp-additional-title {
  font-family: var(--ff-display, Georgia, serif);
  font-size: 0.90rem;
  font-style: italic;
  color: rgba(248, 244, 235, 0.75);
  letter-spacing: 0.01em;
}
.rsvp-additional-sub {
  font-size: 0.60rem;
  color: rgba(200, 169, 110, 0.50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.add-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.40rem 0.80rem;
}
.add-detail-field { display: flex; flex-direction: column; gap: 0.18rem; }
@media (max-width: 480px) {
  .add-detail-grid { grid-template-columns: 1fr; }
  .rsvp-additional-toggle { padding: 0.55rem 0.85rem; }
  .rsvp-additional-body { padding: 0 0.85rem 0.60rem; }
  .rsvp-additional-section--collapsed .rsvp-additional-body { padding-bottom: 0; }
}

.rsvp-pre-submit-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.85rem 0 0.65rem;
  flex-wrap: wrap;
}
.rsvp-psc-orn {
  color: #C8A96E;
  font-size: 0.58rem;
  opacity: 0.70;
  flex-shrink: 0;
}
.rsvp-psc-n {
  font-family: var(--ff-display);
  font-size: 1.60rem;
  font-weight: 400;
  color: #C8A96E;
  line-height: 1;
}
.rsvp-psc-txt {
  font-family: var(--ff-display);
  font-size: 0.90rem;
  font-style: italic;
  color: rgba(42,28,8,0.62);
  line-height: 1;
}
.rsvp-submit-wrap {
  text-align: center;
  padding-top: 0;
  padding-bottom: 1rem;
}

.btn-confirm-rsvp {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.88rem 2rem;
  width: 100%;
  background: linear-gradient(180deg, #E6D4B5 0%, #D9C19A 52%, #CCAF84 100%);
  border: 1px solid rgba(210, 185, 140, 0.50);
  border-radius: 20px;
  color: #2E2418;
  font-family: var(--ff-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.30s ease, box-shadow 0.30s ease, background 0.30s ease;
  box-shadow:
    0 2px 10px rgba(170, 130, 60, 0.20),
    0 4px 20px rgba(140, 105, 40, 0.12),
    inset 0 1px 0 rgba(255, 250, 235, 0.48);
}
/* Inner top-edge highlight */
.btn-confirm-rsvp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 235, 0.82), transparent);
  pointer-events: none;
}
/* Subtle grain texture */
.btn-confirm-rsvp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.btn-arrow {
  display: inline-block;
  transition: transform 0.30s ease;
}
.btn-confirm-rsvp:hover {
  background: linear-gradient(180deg, #EDD9BC 0%, #E0C8A0 52%, #D4B488 100%);
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(170, 130, 60, 0.30),
    0 8px 30px rgba(140, 105, 40, 0.16),
    inset 0 1px 0 rgba(255, 252, 238, 0.58);
}
.btn-confirm-rsvp:hover .btn-arrow {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════
   CONFIRMATION PAGE — dark glass, video visible
   ══════════════════════════════════════════════ */

/* Overlay: let more video through */
#page-confirmation .page-overlay--inner { background: rgba(6, 4, 2, 0.08); }

/* Scrollable column, centered content */
.conf-page-header {
  width: 100%;
  max-width: 740px;
  text-align: center;
  padding-bottom: 1.0rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.5rem;
}
#page-confirmation .conf-page-header .header-brand {
  font-size: 1.60rem;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.20em;
}
.conf-header-countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}
.conf-header-countdown-n {
  font-family: var(--ff-display);
  font-size: 1.80rem;
  font-weight: 400;
  color: #C8A96E;
  line-height: 1;
}
.conf-header-countdown-txt {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-style: italic;
  color: #FFFEF0;
  line-height: 1.3;
}

.conf-scroll {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.5rem 1rem calc(5.5rem + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Transparent flex wrapper — holds hero + cards */
.conf-glass {
  width: 100%;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
}

/* Floating hero title — no card background */
.conf-hero {
  text-align: center;
  padding: 0.8rem 1rem 0.7rem;
}

/* Individual frosted glass card */
.conf-card {
  width: 100%;
  background: rgba(14, 8, 2, 0.46);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid rgba(200, 169, 110, 0.20);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  position: relative;
}

/* Diamond gem top */
.conf-gem-row {
  text-align: center;
  color: rgba(200, 169, 110, 0.55);
  font-size: 0.60rem;
  letter-spacing: 0.5em;
  margin-bottom: 1rem;
}

/* Thank You heading */
.conf-title {
  font-family: var(--ff-display);
  font-size: clamp(1.65rem, 5.5vw, 2.5rem);
  font-weight: 300;
  color: rgba(255, 248, 230, 0.94);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.conf-status-received {
  font-family: var(--ff-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.88);
  text-align: center;
  margin-bottom: 0.45rem;
}

.conf-tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(0.88rem, 2.4vw, 1.00rem);
  color: rgba(255, 255, 255, 0.58);
  text-align: center;
  margin-bottom: 0.3rem;
}

/* Inline countdown between hero and event cards */
.conf-inline-countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.5rem 0 1.2rem;
  flex-wrap: wrap;
}
.conf-inline-countdown-n {
  font-family: var(--ff-display);
  font-size: 2.8rem;
  font-weight: 300;
  color: #C8A96E;
  line-height: 1;
}
.conf-inline-countdown-txt {
  font-family: var(--ff-display);
  font-size: 1.0rem;
  font-style: italic;
  color: rgba(255, 254, 240, 0.75);
  line-height: 1.3;
}

.conf-status-badge {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.50rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.78);
  border: 1px solid rgba(200, 169, 110, 0.24);
  border-radius: 9999px;
  padding: 0.28rem 0.85rem;
  background: rgba(200, 169, 110, 0.06);
  margin-top: 0.1rem;
}

.conf-status-sub {
  font-family: var(--ff-body);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  margin-top: 0.45rem;
  text-align: center;
}

.conf-status-badge--none {
  color: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.conf-tagline-sub {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(0.80rem, 2.2vw, 0.92rem);
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  margin-bottom: 0;
}
.conf-attending-intro {
  font-family: var(--ff-body);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.42);
  margin-bottom: 0.6rem;
}

.conf-ref-id {
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.48);
  text-align: center;
}

/* Horizontal rule inside glass */
.conf-glass-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.22), transparent);
  margin: 1.4rem 0;
}

/* Section labels */
.conf-section-label {
  font-family: var(--ff-body);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.70);
  margin-bottom: 0.65rem;
}
.conf-section-label--muted {
  color: rgba(255, 255, 255, 0.22);
  margin-top: 1rem;
}

/* Event rows */
.conf-ev-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(200,169,110,0.14);
}
.conf-ev-row:last-child { margin-bottom: 0; }

.conf-ev-row--yes {
  background: rgba(200,169,110,0.13);
  border-color: rgba(200,169,110,0.30);
}
.conf-ev-row--no {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.conf-ev-check {
  color: rgba(200,169,110,0.85);
  font-size: 0.82rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.conf-ev-x {
  color: rgba(255,255,255,0.24);
  font-size: 0.72rem;
  margin-top: 0.12rem;
  flex-shrink: 0;
}

.conf-ev-info { flex: 1; min-width: 0; }

.conf-ev-name {
  font-family: var(--ff-display);
  font-size: 1.50rem;
  color: rgba(255, 248, 230, 0.94);
  display: block;
  line-height: 1.2;
  margin-bottom: 0.10rem;
}
.conf-ev-row--no .conf-ev-name { color: rgba(255,255,255,0.32); }

.conf-ev-date {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.conf-ev-date .ev-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  top: 0;
}
.conf-ev-time {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(200,169,110,0.78);
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.06rem;
}
.conf-ev-time .ev-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  top: 0;
}

.conf-ev-attending-badge {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.80);
  margin-bottom: 0.28rem;
  display: block;
}
.conf-ev-loc {
  font-size: 0.82rem;
  color: rgba(200, 169, 110, 0.90);
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.10rem;
  font-weight: 500;
}
.conf-ev-loc .ev-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-right: 0;
  top: 0;
}

.conf-ev-addr {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.50);
  display: block;
  margin-top: 0.08rem;
  padding-left: 1.0rem;
  line-height: 1.4;
}
.conf-ev-addr-sm {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.50);
  display: block;
  margin-top: 0.08rem;
  padding-left: 1.0rem;
  line-height: 1.4;
}
.conf-ev-extra {
  font-size: 0.66rem;
  color: rgba(200, 169, 110, 0.55);
  display: block;
  margin-top: 0.18rem;
}

.conf-ev-not-attending {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.22);
  font-style: italic;
  display: block;
  margin-top: 0.10rem;
}

.conf-ev-links {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.42rem;
}

.conf-ev-pill {
  font-family: var(--ff-body);
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.30rem 0.60rem;
  border-radius: 5px;
  border: 1px solid rgba(200,169,110,0.28);
  color: rgba(200,169,110,0.80);
  background: rgba(200,169,110,0.07);
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.conf-ev-pill:hover { background: rgba(200,169,110,0.16); }

/* Closing message */
.conf-closing {
  text-align: center;
  padding: 0.2rem 0 0.4rem;
}
.conf-closing-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(247, 243, 236, 0.52);
  margin-bottom: 0;
  line-height: 1.5;
}
.conf-closing-love {
  font-family: var(--ff-script);
  font-size: 1.1rem;
  color: rgba(247, 243, 236, 0.58);
  display: block;
  margin: 0.9rem 0 0.1rem;
  line-height: 1.2;
}
.conf-closing-sig {
  font-family: var(--ff-script);
  font-size: 2.2rem;
  color: rgba(247, 243, 236, 0.90);
  line-height: 1.25;
  display: block;
}

/* ── New per-event floating glass cards ── */
.conf-ev-card {
  width: 100%;
  background: rgba(6, 3, 1, 0.42);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid rgba(200, 169, 110, 0.26);
  border-radius: 12px;
  padding: 0.88rem 1.10rem;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.conf-ev-card--yes {
  background: rgba(14, 7, 1, 0.46);
  border-color: rgba(200, 169, 110, 0.30);
}

.conf-ev-card--no {
  background: rgba(6, 3, 1, 0.30);
  border-color: rgba(255, 255, 255, 0.07);
  opacity: 0.60;
}

.conf-ev-decline-badge {
  font-family: var(--ff-body);
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 0.32rem;
  display: block;
}

/* Event cards grid — 1-col mobile, 3-col desktop */
.conf-ev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

/* ── Confirmation: Additional Details block ── */
.conf-additional-section {
  margin: 0.85rem auto 0;
  max-width: 540px;
  padding: 0.85rem 1.2rem;
  background: rgba(200, 169, 110, 0.07);
  border: 1px solid rgba(200, 169, 110, 0.18);
  border-radius: 10px;
}
.conf-additional-title {
  font-family: var(--ff-display, Georgia, serif);
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(248, 244, 235, 0.70);
  letter-spacing: 0.02em;
  margin-bottom: 0.55rem;
  text-transform: none;
}
.conf-detail-list { display: flex; flex-direction: column; gap: 0.38rem; }
.conf-detail-item { display: flex; gap: 0.55rem; align-items: baseline; }
.conf-detail-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(200, 169, 110, 0.60);
  min-width: 90px;
  flex-shrink: 0;
}
.conf-detail-val {
  font-size: 0.82rem;
  color: rgba(248, 244, 235, 0.82);
}

@media (min-width: 768px) {
  /* Widen glass to hold 3 cards */
  .conf-glass { max-width: 1100px; }

  .conf-ev-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 0.85rem;
    align-items: stretch;
  }

  /* More padding for desktop breathing room */
  .conf-ev-card { padding: 1.1rem 1.4rem; }

  /* Keep guestbook + actions centered, not sprawling 980px wide */
  .conf-guestbook,
  .conf-actions {
    max-width: 700px;
    align-self: center;
    width: 100%;
  }
}

.conf-ev-badge {
  font-family: var(--ff-body);
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.80);
  margin-bottom: 0.30rem;
  display: block;
}

.conf-ev-name--dim {
  color: rgba(255, 255, 255, 0.40);
  font-size: 1.28rem;
}
.conf-ev-date--dim {
  color: rgba(255, 255, 255, 0.26);
  font-size: 0.78rem;
}

/* ── Memory card ── */
.conf-card--memory {
  text-align: left;
}

.conf-memory-optional {
  font-family: var(--ff-body);
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.45);
  display: block;
  margin-bottom: 0.55rem;
}

.conf-memory-label {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255, 248, 230, 0.88);
  margin-bottom: 0.4rem;
}

.conf-memory-sub {
  font-size: 0.70rem;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 0.9rem;
  line-height: 1.55;
}


.conf-photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0.8rem;
}
.conf-photo-remove {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: background 0.15s;
}
.conf-photo-remove:hover {
  background: rgba(180, 40, 40, 0.78);
}
.conf-memory-img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.conf-memory-caption {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.48);
  margin-top: 0.55rem;
  font-style: italic;
  text-align: center;
}

/* ── Guestbook section — editorial, no card background ── */
.conf-guestbook {
  background: none;
  border: none;
  padding: 0.5rem 0 0.25rem;
  position: relative;
}

/* Ornament divider above guestbook — matches site-wide motif */
.conf-guestbook-orn-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 220px;
  margin: 0 auto 1.1rem;
}
.conf-guestbook-orn-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 169, 110, 0.22);
}

.conf-guestbook-header {
  text-align: center;
  margin-bottom: 1.1rem;
}

.conf-guestbook-gem {
  font-size: 0.44rem;
  color: rgba(200, 169, 110, 0.40);
  display: block;
  margin-bottom: 0.45rem;
  letter-spacing: 0.3em;
}

.conf-guestbook-title {
  font-family: var(--ff-display);
  font-size: clamp(1.68rem, 5vw, 2.25rem);
  font-weight: 300;
  font-style: normal;
  color: rgba(255, 248, 230, 0.88);
  margin: 0 0 0.25rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.conf-guestbook-sub {
  font-family: var(--ff-display);
  font-size: clamp(0.70rem, 2vw, 0.80rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.30);
  margin: 0;
}

.conf-guestbook-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: stretch;
}

@media (max-width: 540px) {
  .conf-guestbook-cols { grid-template-columns: 1fr; gap: 1rem; }
}

.conf-guestbook-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}

/* Subtle column heading — like a handwritten label */
.conf-guestbook-col-label {
  font-family: var(--ff-display);
  font-size: clamp(0.80rem, 2.2vw, 0.90rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(200, 169, 110, 0.92);
  margin-bottom: 0.12rem;
}

/* Upload zone — premium glass box */
.conf-memory-upload {
  position: relative;
  flex: 1;
  min-height: 130px;
  border: 1px solid rgba(200, 169, 110, 0.45);
  border-radius: 12px;
  padding: 1.6rem 1.2rem;
  text-align: center;
  color: rgba(200, 169, 110, 0.80);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  background: rgba(10, 6, 1, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 32px rgba(200, 169, 110, 0.07),
    0 2px 20px rgba(0, 0, 0, 0.32);
}
.conf-memory-upload:hover {
  border-color: rgba(200, 169, 110, 0.65);
  background: rgba(14, 8, 2, 0.50);
  box-shadow:
    inset 0 0 32px rgba(200, 169, 110, 0.10),
    0 4px 28px rgba(0, 0, 0, 0.40);
}

.conf-guestbook-textarea {
  flex: 1;
  min-height: 130px;
  max-height: none;
  resize: none;
  padding: 1.0rem 1.2rem;
}

.conf-guestbook-save {
  display: flex;
  justify-content: center;
  margin-top: 0.30rem;
}

.conf-guestbook-save-btn {
  padding: 0.40rem 1.4rem !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.12em !important;
  background: transparent !important;
  border-color: rgba(200, 169, 110, 0.35) !important;
  color: rgba(200, 169, 110, 0.72) !important;
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
}

/* Luxury SAVE MEMORY button */
.conf-save-memory-btn {
  position: relative;
  overflow: hidden;
  width: min(80%, 400px);
  display: block;
  margin: 0 auto;
  padding: 1.0rem 2.0rem;
  border-radius: 20px;
  border: 1px solid rgba(210, 185, 140, 0.50);
  background: linear-gradient(180deg, #E6D4B5 0%, #D9C19A 52%, #CCAF84 100%);
  color: #2E2418;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.30s ease, box-shadow 0.30s ease;
  box-shadow:
    0 2px 14px rgba(180, 138, 60, 0.28),
    0 5px 28px rgba(155, 115, 40, 0.16),
    inset 0 1px 0 rgba(255, 250, 232, 0.50);
}
.conf-save-memory-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 235, 0.82), transparent);
  pointer-events: none;
}
.conf-save-memory-btn:hover {
  background: linear-gradient(180deg, #EDD9BC 0%, #E0C8A0 52%, #D4B488 100%);
  color: #22180E;
  transform: translateY(-1px);
  box-shadow:
    0 4px 22px rgba(180, 138, 60, 0.40),
    0 10px 44px rgba(155, 115, 40, 0.24),
    inset 0 1px 0 rgba(255, 252, 235, 0.65);
}

.conf-guestbook-change-photo {
  display: block;
  text-align: center;
  font-size: 0.58rem;
  color: rgba(200, 169, 110, 0.42);
  cursor: pointer;
  margin-top: 0.35rem;
  letter-spacing: 0.05em;
  font-style: italic;
}
.conf-guestbook-change-photo:hover { color: rgba(200, 169, 110, 0.72); }

/* Premium glass textarea — matches upload box */
.conf-guestbook .dark-textarea,
.conf-guestbook .dark-input {
  background: rgba(10, 6, 1, 0.44);
  border: 1px solid rgba(200, 169, 110, 0.45);
  border-radius: 12px;
  color: rgba(255, 248, 230, 0.92);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.92rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 32px rgba(200, 169, 110, 0.07),
    0 2px 20px rgba(0, 0, 0, 0.32);
}
.conf-guestbook .dark-textarea:focus,
.conf-guestbook .dark-input:focus {
  border-color: rgba(200, 169, 110, 0.65);
  background: rgba(14, 8, 2, 0.50);
  outline: none;
  box-shadow:
    inset 0 0 32px rgba(200, 169, 110, 0.10),
    0 4px 28px rgba(0, 0, 0, 0.40);
}
.conf-guestbook .dark-textarea::placeholder,
.conf-guestbook .dark-input::placeholder {
  color: rgba(255, 248, 230, 0.55);
  font-style: italic;
}

.conf-memory-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.8rem;
  line-height: 1;
}
.conf-memory-upload-inner span {
  font-family: var(--ff-display);
  font-size: 0.76rem;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(200, 169, 110, 0.72);
}

/* ── Actions area — no card background ── */
.conf-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  padding: 0 0.25rem;
}

/* ── Divider between cards and carousel ── */
.conf-cards-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 0.25rem;
}
.conf-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 169, 110, 0.22);
}
.conf-divider-gem {
  font-size: 0.60rem;
  color: rgba(200, 169, 110, 0.52);
  flex-shrink: 0;
}

/* ── Bottom panel (guestbook + actions) below carousel ── */
.conf-bottom-panel {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 2rem;
}
@media (min-width: 768px) {
  .conf-bottom-panel { max-width: 700px; }
}

/* ── Closing signature ── */
.conf-closing-wrap {
  text-align: center;
  padding: 1.2rem 0 2.2rem;
}

/* Action buttons */
.conf-glass-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

.conf-btn-edit {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(200,169,110,0.35);
  background: transparent;
  color: rgba(200,169,110,0.85);
  font-family: var(--ff-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.conf-btn-edit:hover { background: rgba(200,169,110,0.10); border-color: rgba(200,169,110,0.55); }

.conf-btn-home {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  border: none;
  background: rgba(200,169,110,0.16);
  color: rgba(255,248,230,0.90);
  font-family: var(--ff-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.conf-btn-home:hover { background: rgba(200,169,110,0.26); }

.conf-glass-contact {
  font-size: 0.60rem;
  color: rgba(255,255,255,0.20);
  text-align: center;
  margin-top: 1.2rem;
}
.conf-glass-contact a { color: rgba(200,169,110,0.45); }

/* ── Contact footer ── */
.conf-contact-footer {
  text-align: center;
  padding: 1.6rem 1rem 0.5rem;
}

.conf-contact-heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(0.82rem, 2.4vw, 0.94rem);
  color: rgba(255, 248, 230, 0.48);
  margin-bottom: 0.45rem;
  line-height: 1.5;
  font-weight: 300;
}

.conf-contact-details {
  font-family: var(--ff-body);
  font-size: clamp(0.76rem, 2.2vw, 0.86rem);
  color: rgba(200, 169, 110, 0.55);
  line-height: 1.8;
}
.conf-contact-link {
  color: rgba(200, 169, 110, 0.62);
  text-decoration: none;
  transition: color 0.2s;
}
.conf-contact-link:hover { color: rgba(200, 169, 110, 0.90); }
.conf-contact-sep {
  color: rgba(200, 169, 110, 0.28);
  margin: 0 0.25rem;
}
.conf-contact-phone {
  color: rgba(255, 248, 230, 0.38);
}

@media (max-width: 480px) {
  .conf-contact-sep { display: none; }
  .conf-contact-details { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
}

/* Shared line + gem — used in contact and closing dividers */
.conf-contact-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 169, 110, 0.18);
}
.conf-contact-gem {
  font-size: 0.50rem;
  color: rgba(200, 169, 110, 0.36);
  flex-shrink: 0;
}

/* ── Closing divider (between contact and signature) ── */
.conf-closing-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.8rem auto 0;
  max-width: 200px;
}

/* Single-column layout — no side photo */
.conf-main-layout { display: block; }
.conf-col-left { display: block; }
.conf-col-right { display: none !important; }

/* Carousel gallery section */
.conf-carousel-section { margin-top: 0.5rem; }

.conf-gallery-heading {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  color: rgba(255, 248, 230, 0.72);
  text-align: center;
  margin-bottom: 0.35rem;
}
.conf-gallery-sub {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.70rem;
  color: rgba(255,255,255,0.28);
  text-align: center;
  margin-bottom: 1.2rem;
}

/* ── Filmstrip — continuous scrolling story strip ── */

.film-strip-root {
  width: 100%;
  max-width: none;
  margin-top: 1rem;
}

.film-section {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.film-section .conf-gallery-heading { padding: 0 1rem; margin-top: 0; }
.film-section .conf-gallery-sub     { padding: 0 1rem; margin-bottom: 1.2rem; }

/* Outer clip + edge vignette */
.film-outer {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  cursor: default;
}
.film-outer:hover .film-track {
  animation-play-state: paused;
}

/* Scrolling flex row */
.film-track {
  display: flex;
  gap: 24px;
  padding: 0.5rem 0 1.8rem;
  will-change: transform;
  animation: filmScroll linear infinite;
}

@keyframes filmScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual portrait card */
.film-item {
  flex-shrink: 0;
  width: 200px;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 8px 30px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.22);
}

.film-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Mobile */
@media (max-width: 767px) {
  .film-outer {
    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  }
  .film-track { padding: 0.5rem 0 1.2rem; }
  .film-item  { width: 55vw; height: 82vw; border-radius: 12px; }
}

/* Entry animation — each floating element fades in staggered */
#page-confirmation.active .conf-hero {
  opacity: 0;
  animation: luxReveal 0.65s ease 0.10s forwards;
}
#page-confirmation.active .conf-card:nth-child(2) {
  opacity: 0;
  animation: luxReveal 0.65s ease 0.28s forwards;
}
#page-confirmation.active .conf-card:nth-child(3) {
  opacity: 0;
  animation: luxReveal 0.65s ease 0.46s forwards;
}
#page-confirmation.active .conf-card:nth-child(4) {
  opacity: 0;
  animation: luxReveal 0.65s ease 0.62s forwards;
}

/* ── Floating petals ── */
.petal-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -20px;
  border-radius: 50% 0 50% 0;
  animation: petalFall linear forwards;
}
@keyframes petalFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg);   opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(40px) rotate(320deg); opacity: 0; }
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 8px 60px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  color: rgba(255,255,255,0.80);
  font-size: 1.5rem;
  line-height: 1;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.20); color: #fff; }


/* ──────────────────────────────────────────────
   CONFIRMATION — STICKY MOBILE ACTION BAR
   ────────────────────────────────────────────── */
.conf-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  background: rgba(14,10,4,0.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(185,148,50,0.22);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.conf-sticky-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.20rem;
  padding: 0.70rem 0.5rem;
  font-family: var(--ff-body);
  font-size: 1.05rem;
  color: rgba(200,164,60,0.88);
  background: none;
  border: none;
  border-right: 1px solid rgba(185,148,50,0.14);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease;
}
.conf-sticky-btn:last-child { border-right: none; }
.conf-sticky-btn:hover, .conf-sticky-btn:active { background: rgba(185,148,50,0.10); }
.conf-sticky-btn span {
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}
.conf-sticky-btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}
.conf-sticky-btn--solo {
  border-right: none;
  font-size: 0.80rem;
  letter-spacing: 0.05em;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
}

/* hide sticky bar on desktop */
@media (min-width: 768px) {
  .conf-sticky-bar { display: none !important; }
}

/* add bottom padding to conf page on mobile so sticky bar doesn't cover content */
@media (max-width: 767px) {
  #page-confirmation .inner-scroll { padding-bottom: 5rem; }
}

/* ──────────────────────────────────────────────
   GALLERY — OUR JOURNEY
   ────────────────────────────────────────────── */
.gallery-section {
  padding: 1rem 0 2rem;
}

.gallery-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.gallery-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 169, 110, 0.15);
}

.gallery-divider-inner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.gallery-gem {
  font-size: 0.5rem;
  color: rgba(200, 169, 110, 0.5);
  letter-spacing: 0.1em;
}

.gallery-divider-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.gallery-card {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.gallery-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  transition: transform 0.55s ease;
}

/* Cinematic placeholder gradients */
.gc-1 { background: linear-gradient(160deg, #1a0a06 0%, #2e1510 45%, #120804 100%); }
.gc-2 { background: linear-gradient(135deg, #0a0e1c 0%, #141c30 50%, #1a1230 100%); }
.gc-3 { background: linear-gradient(155deg, #0e1612 0%, #1a2a1a 55%, #0f1c12 100%); }
.gc-4 { background: linear-gradient(140deg, #1e0e08 0%, #301c0e 52%, #421e10 100%); }
.gc-5 { background: linear-gradient(150deg, #12100f 0%, #201e1c 58%, #2c2824 100%); }
.gc-6 { background: linear-gradient(160deg, #0c0e1c 0%, #161828 50%, #201f3e 100%); }

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 8, 3, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.gallery-overlay span {
  font-family: var(--ff-display);
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  letter-spacing: 0.1em;
}

.gallery-card:hover .gallery-overlay { opacity: 1; }
.gallery-card:hover .gallery-placeholder { transform: scale(1.06); }

.gallery-note {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  text-align: center;
}

/* ──────────────────────────────────────────────
   ADMIN PANEL
   ────────────────────────────────────────────── */
.admin-login-wrap {
  max-width: 360px;
  margin: 2rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.admin-pass-input { max-width: 300px; }

.admin-error { color: rgba(192, 57, 43, 0.8); font-size: 0.78rem; }

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  backdrop-filter: blur(16px);
}

.stat-num {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.admin-toolbar {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.admin-section { margin-bottom: 2.5rem; }

.admin-section-title {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.admin-songs, .admin-dietary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-list-item {
  font-size: 0.82rem;
  color: rgba(255, 248, 230, 0.75);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,169,110,0.15);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
}

.admin-list-empty {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.28);
  font-style: italic;
}

.admin-tag {
  display: inline-block;
  padding: 0.28rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
}

.table-scroll { overflow-x: auto; }

.rsvp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  background: var(--glass-bg);
  white-space: nowrap;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.rsvp-table th {
  background: rgba(255, 255, 255, 0.04);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rsvp-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  vertical-align: middle;
}

.rsvp-table tr:last-child td { border-bottom: none; }
.rsvp-table tr:hover td { background: rgba(255, 255, 255, 0.025); }
.rsvp-table td.cell-yes  { color: var(--gold-light); font-weight: 500; }
.rsvp-table td.cell-no   { color: rgba(255,255,255,0.28); }
.rsvp-table td.cell-pend { color: var(--gold); font-style: italic; }

.table-empty {
  text-align: center;
  color: rgba(255,255,255,0.28);
  font-style: italic;
  padding: 2rem 1rem !important;
}

/* ──────────────────────────────────────────────
   HERO SCROLL CUE
   ────────────────────────────────────────────── */
.hero-scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  animation: scrollBob 2.6s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.18; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 0.32; }
}

/* ──────────────────────────────────────────────
   HERO INFO SECTIONS — below the fold
   ────────────────────────────────────────────── */
.hero-info-sections {
  position: relative;
  z-index: 2;
  padding-bottom: 5rem;
}

.info-section {
  max-width: 680px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.info-section-divider {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2.75rem;
}

.info-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 169, 110, 0.14);
}

.info-section-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  flex-shrink: 0;
}

.info-gem {
  font-size: 0.48rem;
  color: rgba(200, 169, 110, 0.48);
  letter-spacing: 0.1em;
}

/* Story timeline */
.story-timeline {
  display: flex;
  flex-direction: column;
}

.story-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: start;
}

.story-item:last-child { border-bottom: none; }

.story-year {
  font-family: var(--ff-display);
  font-size: 1.85rem;
  font-weight: 300;
  color: rgba(200, 169, 110, 0.30);
  line-height: 1;
  text-align: right;
  padding-top: 0.15rem;
}

.story-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.72;
}

.story-text strong {
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  display: block;
  margin-bottom: 0.15rem;
}

/* Weekend event cards */
.weekend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.weekend-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 1.5rem 1.1rem;
  text-align: center;
  backdrop-filter: blur(16px);
}

.weekend-card-day {
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.52);
  margin-bottom: 0.5rem;
}

.weekend-card-name {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 0.3rem;
  line-height: 1.25;
}

.weekend-card-time {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.35);
}

.weekend-card-dot {
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  margin: 0.75rem auto 0;
  opacity: 0.45;
}

/* Travel & Accommodations */
.travel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.travel-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(16px);
}

.travel-card-icon {
  font-size: 1.2rem;
  margin-bottom: 0.55rem;
  display: block;
}

.travel-card-title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.35rem;
}

.travel-card-text {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.40);
  line-height: 1.68;
}

.travel-card-text a { color: rgba(200, 169, 110, 0.60); }
.travel-card-text a:hover { color: var(--gold); opacity: 1; }

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.05rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--ff-body);
  font-size: 0.86rem;
  gap: 1rem;
}

.faq-trigger:focus { outline: none; }

.faq-chevron {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.open .faq-body { max-height: 400px; }

.faq-body-inner {
  padding: 0.75rem 1.25rem 1.1rem;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.72;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST
   ══════════════════════════════════════════════ */

/* ── Tablets + phones (≤ 900px) ─────────────── */
@media (max-width: 900px) {
  .inner-wrap  { max-width: 100%; }
  .conf-wrap   { max-width: 100%; }
}

/* ── All phones (≤ 767px) ────────────────────── */
@media (max-width: 767px) {

  /* Video overlays — mobile */
  .page-overlay--hero {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Hero names — allow wrapping, tighten size */
  .hero-names {
    font-size: clamp(1.7rem, 7.2vw, 2.55rem);
    white-space: normal;
    line-height: 1.2;
  }
  .hero-main { padding: 0 1.25rem; }
  .hero-search-card { max-width: 100%; border-radius: 22px; padding: 0.95rem 1.0rem 0.8rem; }
  .hero-search-label { font-size: 0.90rem; margin-bottom: 0.85rem; }
  .hero-date { margin-bottom: 1.6rem; letter-spacing: 0.32em; }

  /* Inner page header */
  .inner-header { padding: 1rem 0 0.9rem; }
  .inner-wrap   { padding: 0 1.25rem calc(5rem + env(safe-area-inset-bottom, 0)); }
  .conf-wrap    { padding: 2.2rem 1.25rem calc(4rem + env(safe-area-inset-bottom, 0)); }

  /* Steps bar — compact */
  .steps-bar { gap: 0; margin-bottom: 1.8rem; }
  .step-dot  { width: 28px; height: 28px; font-size: 0.64rem; }
  .step-connector { max-width: 36px; }
  .step-lbl  { font-size: 0.5rem; letter-spacing: 0.07em; }

  /* RSVP form — event cards */
  .event-card-trigger     { padding: 1.3rem 1.25rem; }
  .event-card-body-inner  { padding: 0 1.1rem 1.4rem; }
  .event-detail-grid      { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .inv-attend             { gap: 0.45rem; }

  /* Touch-friendly primary actions */
  .btn-ghost-gold,
  .btn-ghost-white { min-height: 48px; }

  .review-submit-wrap .btn-ghost-gold,
  .rsvp-submit-wrap .btn-ghost-gold  { width: 100%; text-align: center; min-height: 52px; }

  /* Confirmation title */

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

  /* Weekend cards */
  .weekend-grid { grid-template-columns: repeat(3, 1fr); }

  /* Travel grid */
  .travel-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Admin */
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-toolbar   { flex-direction: column; }
  .admin-toolbar > * { text-align: center; }

  /* Invitation timeline — tighter on phone */
  .inv-tl-item { grid-template-columns: 64px 12px 1fr; }
  .wtl-section { padding: 0 0.25rem; }
}

/* ── Small phones (≤ 430px — iPhone SE, 13 mini, Galaxy A) ── */
@media (max-width: 430px) {
  .hero-names {
    font-size: clamp(1.85rem, 9.2vw, 2.6rem);
    white-space: normal;
  }
  .hero-main { padding: 0 1rem; }
  .hero-search-card { padding: 1.1rem 0.95rem 0.9rem; }

  .inner-wrap { padding: 0 1rem calc(4.5rem + env(safe-area-inset-bottom, 0)); }
  .conf-wrap  { padding: 1.75rem 1rem calc(3.5rem + env(safe-area-inset-bottom, 0)); }

  .step-dot       { width: 26px; height: 26px; }
  .step-connector { max-width: 24px; }
  .step-lbl       { font-size: 0.46rem; }

  /* Event detail: single column on very small screens */
  .event-detail-grid  { grid-template-columns: 1fr; gap: 0.6rem; }
  /* Attending pills: full-width column on tiny phones */
  .inv-attend { flex-direction: column; }
  .attend-pill { text-align: center; width: 100%; }

  /* Info / story sections */
  .info-section  { padding: 3rem 1rem; }
  .story-item    { grid-template-columns: 52px 1fr; gap: 0.85rem; }
  .story-year    { font-size: 1.4rem; }
  .weekend-grid  { grid-template-columns: 1fr; max-width: 260px; margin: 0 auto; }
  .travel-grid   { grid-template-columns: 1fr; }

  /* Gallery — single-column on very small phones */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
}

/* ── Very small phones (≤ 360px — iPhone SE 1st gen, older Androids) ── */
@media (max-width: 360px) {
  .hero-names {
    font-size: clamp(1.7rem, 9.5vw, 2.4rem);
  }
  .hero-search-card { padding: 1rem 0.85rem 0.85rem; border-radius: 18px; }
  .hero-search-label { font-size: 0.95rem; }
  .hero-date  { letter-spacing: 0.25em; }
  .inner-wrap { padding: 0 0.85rem calc(4rem + env(safe-area-inset-bottom, 0)); }
  .conf-title { font-size: clamp(1.45rem, 8vw, 2.3rem); }
}

/* ── Landscape phones (short viewport) ──────── */
@media (max-height: 500px) and (orientation: landscape) {
  #page-hero.active { height: 100vh; height: 100dvh; overflow-y: auto; }
  .hero-viewport    { height: auto; min-height: 100vh; min-height: 100dvh; padding: 2rem 1rem; }
  .hero-names       { font-size: clamp(1.36rem, 4.7vw, 2.04rem); margin-bottom: 0.3rem; }
  .hero-date        { margin-bottom: 1.2rem; }
  .hero-search-card { max-width: 280px; }
  .conf-title       { font-size: clamp(1.55rem, 4.8vw, 2.3rem); }
}

/* ── Tablet (768px–1024px) ───────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-names { font-size: clamp(2.2rem, 4.3vw, 3.2rem); white-space: nowrap; }
  .inner-wrap { max-width: 640px; }
  .conf-wrap  { max-width: 540px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Desktop (≥ 1025px) ─────────────────────── */
@media (min-width: 1025px) {
  .hero-search-card { max-width: 320px; }
  .hero-names       { white-space: nowrap; }
  .inner-wrap       { max-width: 680px; }
  .conf-wrap        { max-width: 560px; }
  .gallery-grid     { grid-template-columns: repeat(3, 1fr); }
  .event-detail-grid { grid-template-columns: repeat(3, 1fr); }
  .weekend-grid     { grid-template-columns: repeat(3, 1fr); }
  .travel-grid      { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   INNER PAGE BACKGROUNDS
   Video pages are transparent so the fixed video bg shows through.
   Admin keeps a solid dark gradient (no video).
   ══════════════════════════════════════════════ */
#page-admin {
  background: linear-gradient(160deg, #100d14 0%, #1c1624 100%);
}
#page-admin .page-overlay { display: none; }

/* Invitation — walking video visible */
#page-invitation .page-overlay--inner {
  background: rgba(6, 3, 14, 0.20);
}

/* ══════════════════════════════════════════════
   RSVP PAGE LAYOUT
   Mobile:  sticky video top (45dvh) + scrollable ivory drawer (55dvh)
   Desktop: full-screen bg video + frosted glass card anchored at bottom
   ══════════════════════════════════════════════ */

/* Gratitude text — lives in the video zone, always behind content panel */
.rsvp-video-tagline {
  position: absolute;
  top: 18vh; left: 0; right: 0;
  text-align: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(0.82rem, 2.4vw, 1.05rem);
  color: rgba(255,255,255,0.88);
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(0,0,0,0.50);
  padding: 0 1.5rem;
  line-height: 1.6;
}

#page-rsvp .page-overlay--inner { background: rgba(4, 2, 1, 0.26); }
#page-rsvp .steps-bar { display: none; }

/* Anchor content to bottom so video shows above */
#page-rsvp.active { justify-content: flex-end; }

/* ── Mobile (default): bottom drawer — video ~30dvh, ivory 70dvh ── */
#page-rsvp .inner-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 0 0 70dvh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Ivory drawer panel */
#page-rsvp .inner-wrap {
  position: relative;
  background: #f8f4eb;
  border-radius: 26px 26px 0 0;
  padding-top: 0.9rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0));
  min-height: 100%;
  max-width: none;
  margin: 0;
}

/* Ivory inner-scroll eliminates dark gap visible through rounded corners of inner-wrap.
   The page itself stays transparent so the fixed video shows through in the top 28dvh zone. */
body.rsvp-mob-active #page-rsvp .inner-scroll { background: #f8f4eb; }

/* Form content centering inside full-width panel */
#page-rsvp .inner-header {
  max-width: 520px;
  margin-left: auto; margin-right: auto;
  padding-left: 1.2rem; padding-right: 1.2rem;
  border-bottom-color: rgba(185, 148, 50, 0.12);
  position: relative; z-index: 2;
}
#page-rsvp .inner-header .btn-ghost,
#page-rsvp .inner-header .header-brand { color: rgba(40, 28, 8, 0.70); }
#page-rsvp .inner-header .btn-ghost:hover { color: rgba(40, 28, 8, 0.90); }

#page-rsvp #rsvp-content {
  max-width: 520px;
  margin-left: auto; margin-right: auto;
  padding-left: 1.2rem; padding-right: 1.2rem;
  padding-bottom: 2rem;
}

/* Mobile: hide nav header, enforce ivory card styles */
@media (max-width: 767px) {
  #page-rsvp .inner-header { display: none; }
  /* Hide tagline on mobile — clean video only */
  .rsvp-video-tagline { display: none; }
  /* No overlay veil on RSVP — let video breathe */
  #page-rsvp .page-overlay--inner { background: transparent; }
  /* Ivory fog — tight fade so more video is visible */
  body.rsvp-mob-active #page-rsvp .page-overlay--inner {
    background: linear-gradient(to bottom,
      transparent    0%,
      transparent    18%,
      rgba(250, 241, 234, 0.0)  19%,
      rgba(250, 241, 234, 0.55) 20.5%,
      rgba(250, 241, 234, 0.88) 21.5%,
      #FAF7F2 23%
    );
    pointer-events: none;
  }
  /* Tagline removed — clean video only */
  body.rsvp-mob-active .rsvp-video-tagline { display: none !important; }

  /* Video: show full landscape frame, brighter */
  body.rsvp-mob-active #vid-rsvp-mobile {
    object-fit: contain;
    object-position: center top;
    filter: brightness(1.35);
  }

  /* Blur strip not needed — removed */
  .rsvp-blur-strip { display: none; }
  body.rsvp-mob-active .rsvp-blur-strip { display: none; }

  /* Form: lower so video has breathing room — inner-wrap pulled up into the fade */
  body.rsvp-mob-active #page-rsvp .inner-scroll {
    background: transparent;
    flex: 0 0 80dvh;
  }
  /* Drawer panel: warm ivory, pulled up ~30px into the gradient fade */
  body.rsvp-mob-active #page-rsvp .inner-wrap {
    background: #FAF7F2;
    border-radius: 0;
    box-shadow: none;
    padding-top: 0;
    margin-top: -1.8rem;
  }
  /* Event cards: float on the ivory page */
  body.rsvp-mob-active #page-rsvp .rsvp-event-section {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(185, 148, 50, 0.16) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
  }
  body.rsvp-mob-active #page-rsvp .rsvp-event-section:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10) !important;
    border-color: rgba(185, 148, 50, 0.28) !important;
  }

  /* Ivory cards — override any inherited glass styles */
  #page-rsvp .event-inv-card {
    background: #fdfaf4 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(185,148,50,0.28) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  }
  #page-rsvp .event-card-label { color: rgba(140,100,20,0.92) !important; }
  #page-rsvp .event-card-date { color: rgba(42,32,12,0.72) !important; }
  #page-rsvp .event-card-arrival { color: rgba(42,32,12,0.50) !important; }
  #page-rsvp .event-card-body-inner { background: rgba(248,243,232,0.60) !important; }
  #page-rsvp .event-detail-value { color: rgba(38,28,8,0.80) !important; }
  #page-rsvp .inv-guest-name { color: rgba(38,28,8,0.78) !important; }
  #page-rsvp .inv-field-label { color: rgba(50,38,12,0.68) !important; }
  #page-rsvp .attend-pill {
    background: rgba(255,252,244,0.90) !important;
    border-color: rgba(185,148,50,0.25) !important;
    color: rgba(50,38,12,0.70) !important;
  }
  #page-rsvp .attend-pill.yes-active { background: #C8A96E !important; border-color: #B8953A !important; color: #ffffff !important; font-weight: 600 !important; }
  #page-rsvp .attend-pill.no-active  { background: transparent !important; border-color: rgba(185,148,50,0.22) !important; color: rgba(50,38,12,0.38) !important; }
  #page-rsvp .rsvp-intro { background: none !important; border: none !important; padding: 1rem 1.2rem 0.6rem !important; }
  #page-rsvp .rsvp-hi-name { color: rgba(32,22,6,0.84) !important; text-shadow: none !important; }
  #page-rsvp .rsvp-sub-light { color: rgba(50,38,14,0.60) !important; text-shadow: none !important; }
  #page-rsvp .deadline-notice--light { color: rgba(120,90,20,0.80) !important; }
  #page-rsvp .inv-message-section { background: #fdfaf4 !important; backdrop-filter: none !important; border: 1px solid rgba(185,148,50,0.22) !important; border-radius: 12px !important; }
  #page-rsvp .inv-memory-section { background: #fdfaf4 !important; backdrop-filter: none !important; }
  #page-rsvp .inv-field-label-lg { color: rgba(50,38,12,0.72) !important; }

  /* ── Henna Yes/No pills: dark text on ivory background ── */
  body.rsvp-mob-active #page-rsvp .mini-pills {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  body.rsvp-mob-active #page-rsvp .mini-pill {
    color: rgba(50, 38, 12, 0.72) !important;
    border-color: rgba(185, 148, 50, 0.38) !important;
    background: rgba(255, 252, 244, 0.90) !important;
    min-width: 76px;
    min-height: 44px;
  }
  body.rsvp-mob-active #page-rsvp .mini-pill.yes-active {
    background: #C8A96E !important;
    border-color: #B8953A !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
  body.rsvp-mob-active #page-rsvp .mini-pill.no-active {
    background: transparent !important;
    border-color: rgba(185, 148, 50, 0.22) !important;
    color: rgba(50, 38, 12, 0.40) !important;
    font-weight: 400 !important;
  }

  /* ── Mobile RSVP intro: compact, sits in the gradient fade ── */
  #page-rsvp .rsvp-intro { margin-bottom: 0.35rem !important; padding: 0.6rem 1.2rem 0.15rem !important; }
  #page-rsvp .rsvp-hi-name { font-size: clamp(1.65rem, 6vw, 2.0rem) !important; margin-bottom: 0.06rem !important; }
  #page-rsvp .rsvp-sub-light { font-size: 0.74rem !important; margin-bottom: 0 !important; }

  /* ── Collapsed: hide description and dress code — show only on open ── */
  body.rsvp-mob-active #page-rsvp .rsvp-ev-desc,
  body.rsvp-mob-active #page-rsvp .rsvp-ev-dress-code {
    display: none;
  }
  body.rsvp-mob-active #page-rsvp .rsvp-event-section.rsvp-ev-open .rsvp-ev-desc,
  body.rsvp-mob-active #page-rsvp .rsvp-event-section.rsvp-ev-open .rsvp-ev-dress-code {
    display: block;
  }
  /* Dress code box: compact on mobile */
  body.rsvp-mob-active #page-rsvp .rsvp-ev-dress-code {
    margin-top: 0.45rem;
    padding: 0.40rem 0.65rem;
  }

  /* ── Leaf icon: visible on mobile, hidden on desktop ── */
  .rsvp-ev-hdr-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
    margin-right: 0.65rem;
    color: rgba(185,148,50,0.68);
  }
  .rsvp-ev-leaf { width: 17px; height: 23px; }

  /* ── RSVP event cards: compact ── */
  .rsvp-event-section { border-radius: 12px; margin-bottom: 0.45rem; }
  .rsvp-event-hdr { padding: 0.65rem 1.0rem; gap: 0.5rem; align-items: center; }
  .rsvp-event-hdr-label { font-size: 1.10rem !important; }
  .rsvp-event-hdr-date { font-size: 0.74rem; }
  /* Show compact "RSVP" toggle label on mobile */
  .rsvp-ev-toggle--closed { display: inline; }
  .rsvp-ev-chevron { width: 16px; height: 16px; }
  /* Instruction text */
  .rsvp-ev-instruction { font-size: 0.62rem; margin-bottom: 0.4rem; }
  /* Dividers: very tight on mobile */
  .rsvp-cards-divider { margin: 0.2rem auto 0.35rem; }
  /* Guest count row: tighter */
  .rsvp-ev-hdr-meta-row { margin-top: 0.04rem; }
  /* Gap inside header info: tight */
  body.rsvp-mob-active #page-rsvp .rsvp-ev-hdr-info { gap: 0.08rem; }

  /* Video: full-screen, warm ivory fills letterbox — blends into form */
  body.rsvp-mob-active .site-video-bg {
    height: 100dvh;
    top: 0;
    bottom: 0;
    background: #FAF7F2;
  }

  /* Hide deadline pill — reduces clutter on small screens */
  #page-rsvp .deadline-notice { display: none !important; }


  /* Stack Attending/Not Attending buttons vertically so they never overflow */
  #page-rsvp .inv-attend { flex-direction: column; gap: 0.45rem; }
  #page-rsvp .attend-pill { flex: none; width: 100%; }

  /* RSVP card width: contained to mobile screen with even margins */
  #page-rsvp #rsvp-content {
    width: calc(100% - 28px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Prevent any child from overflowing horizontally */
  #page-rsvp .rsvp-event-section,
  #page-rsvp .event-inv-card,
  #page-rsvp .inv-message-section,
  #page-rsvp .inv-memory-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Add to Calendar: readable against ivory background */
  #page-rsvp .cal-btn {
    color: rgba(50,38,12,0.72) !important;
    border-color: rgba(185,148,50,0.32) !important;
    background: rgba(248,244,235,0.60) !important;
  }
  #page-rsvp .cal-btn:hover {
    color: rgba(120,90,20,0.92) !important;
    border-color: rgba(185,148,50,0.55) !important;
    background: rgba(248,244,235,0.90) !important;
  }

  /* Guest row: name on its own line, buttons stacked full-width below */
  #page-rsvp .rsvp-guest-row-top {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
  }
  #page-rsvp .rsvp-guest-row-name {
    flex: 1;
    min-width: 0;
  }
  #page-rsvp .rsvp-guest-pills {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
  }
  #page-rsvp .attend-pill--sm {
    width: 100%;
    text-align: center;
    padding: 0.60rem 0.6rem;
    font-size: 0.72rem;
    box-sizing: border-box;
  }
}

/* ── Desktop: full-screen bg video + separate floating cards ── */
@media (min-width: 768px) {
  /* Remove tagline — no distinct video zone on desktop */
  .rsvp-video-tagline { display: none; }
  /* Leaf icon is mobile-only */
  .rsvp-ev-hdr-icon { display: none; }

  /* Content column starts at top, scrolls over video */
  #page-rsvp.active { justify-content: flex-start; }

  #page-rsvp .inner-scroll {
    flex: 1 1 auto;
    width: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.8rem 1.5rem calc(4rem + env(safe-area-inset-bottom, 0));
  }

  /* Transparent wrapper — video shows between cards */
  #page-rsvp .inner-wrap {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: 420px;
    width: 100%;
    min-height: auto;
  }

  #page-rsvp .inner-wrap::before { display: none; }

  /* Header — light text for video background */
  #page-rsvp .inner-header {
    max-width: none; margin: 0;
    padding: 0 0 0.8rem;
    border-bottom-color: rgba(200, 169, 110, 0.14);
    display: flex;
  }
  #page-rsvp .inner-header .btn-ghost,
  #page-rsvp .inner-header .header-brand {
    color: rgba(255, 248, 230, 0.72);
  }
  #page-rsvp .inner-header .btn-ghost:hover {
    color: rgba(255, 248, 230, 0.94);
  }

  #page-rsvp #rsvp-content {
    max-width: none; margin: 0;
    padding: 0;
  }

  /* RSVP intro — floating typography directly on video, no box */
  #page-rsvp .rsvp-intro {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 2.2rem 1rem 2.2rem;
    margin-bottom: 3.0rem;
    text-align: center;
  }
  #page-rsvp .rsvp-hi-name {
    color: rgba(255, 248, 230, 0.96);
    text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.35);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
  }
  #page-rsvp .rsvp-sub-light {
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  }
  #page-rsvp .deadline-notice--light {
    background: rgba(200, 169, 110, 0.10);
    border-color: rgba(200, 169, 110, 0.28);
    color: rgba(200, 169, 110, 0.82);
  }

  /* Message + memory sections — frosted glass, same as event cards */
  #page-rsvp .inv-message-section {
    background: rgba(14, 8, 2, 0.38);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(200, 169, 110, 0.18);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 0.75rem;
  }
  #page-rsvp .inv-field-label-lg { color: rgba(255, 248, 230, 0.80); }

  /* Submit button area */
  #page-rsvp .rsvp-submit-wrap { padding-bottom: 0; }

  /* ── Event cards — floating glass panels over video ── */
  #page-rsvp .event-inv-card {
    background: rgba(8, 4, 1, 0.34);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border-color: rgba(200, 169, 110, 0.22);
    box-shadow: 0 2px 32px rgba(0, 0, 0, 0.22);
    margin-bottom: 1.4rem;
  }
  #page-rsvp .event-inv-card:hover {
    border-color: rgba(200, 169, 110, 0.38);
    background: rgba(14, 7, 1, 0.40);
    transform: translateY(-2px);
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.28);
  }
  #page-rsvp .event-inv-card.expanded {
    border-color: rgba(200, 169, 110, 0.34);
    transform: none;
  }
  #page-rsvp .event-card-trigger {
    padding: 0.95rem 1.60rem;
    align-items: center;
  }
  #page-rsvp .event-card-trigger:hover { background: none; }
  #page-rsvp .event-card-label {
    color: rgba(255, 252, 240, 0.98);
    font-family: var(--ff-display);
    font-size: 1.28rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-rsvp .event-card-meta-line {
    color: rgba(200, 175, 118, 0.68);
    font-size: 0.88rem;
    font-weight: 400;
    margin-top: 0.14rem;
    letter-spacing: 0.05em;
  }
  #page-rsvp .meta-sep {
    color: rgba(208, 178, 108, 0.90);
  }
  #page-rsvp .event-card-chevron {
    color: rgba(200, 169, 110, 0.55);
    width: 18px;
    height: 18px;
  }

  /* Expanded body */
  #page-rsvp .event-card-body-inner {
    background: rgba(8, 4, 0, 0.22);
    border-top-color: rgba(200, 169, 110, 0.10);
  }
  #page-rsvp .ev-detail-date {
    color: rgba(200, 169, 110, 0.75);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }
  #page-rsvp .ev-detail-arrive {
    color: rgba(255, 248, 230, 0.72);
    font-size: 1.05rem;
  }
  #page-rsvp .ev-venue-name { color: rgba(200, 169, 110, 0.88); font-size: 0.88rem; }
  #page-rsvp .ev-venue-addr { color: rgba(255, 248, 230, 0.42); font-size: 0.76rem; padding-left: 1.1rem; }

  /* Guest / attend section */
  #page-rsvp .inv-guest-row { border-top-color: rgba(200, 169, 110, 0.10); }
  #page-rsvp .inv-guest-name { color: rgba(255, 248, 230, 0.82); }
  #page-rsvp .inv-field-label { color: rgba(255, 248, 230, 0.68); }
  #page-rsvp .attend-pill {
    background: rgba(200, 169, 110, 0.08);
    border-color: rgba(200, 169, 110, 0.28);
    color: rgba(255, 248, 230, 0.78);
  }
  #page-rsvp .attend-pill.yes-active {
    background: #C8A96E;
    border-color: #B8953A;
    color: rgba(255, 255, 255, 0.97);
    font-weight: 600;
  }
  #page-rsvp .attend-pill.no-active {
    background: rgba(20, 10, 2, 0.42);
    border-color: rgba(200, 169, 110, 0.30);
    color: rgba(255, 248, 230, 0.52);
  }
  #page-rsvp .mini-pill { border-color: rgba(200, 169, 110, 0.28); color: rgba(255,248,230,0.70); }
  #page-rsvp .mini-pill.yes-active { background: rgba(185,148,50,0.18); border-color: rgba(185,148,50,0.55); color: rgba(255,240,200,0.94); }
  #page-rsvp .mini-pill.no-active  { background: transparent; border-color: rgba(200,169,110,0.14); color: rgba(255,255,255,0.40); }
  #page-rsvp .inv-extras { border-top-color: rgba(200, 169, 110, 0.10); }
  #page-rsvp .inv-field-label-lg { color: rgba(255, 248, 230, 0.80); }

  /* Event-first RSVP sections — dark glass on desktop */
  #page-rsvp .rsvp-event-section {
    background: rgba(8, 4, 1, 0.42);
    backdrop-filter: blur(32px) saturate(140%);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    border-color: rgba(200, 169, 110, 0.22);
    box-shadow: 0 2px 32px rgba(0, 0, 0, 0.28);
    margin-bottom: 1.4rem;
  }
  #page-rsvp .rsvp-event-section:hover {
    border-color: rgba(200, 169, 110, 0.38);
    background: rgba(14, 7, 1, 0.50);
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.34);
  }
  #page-rsvp .rsvp-event-hdr { border-bottom-color: rgba(200, 169, 110, 0.12); padding: 1rem 1.5rem; }
  #page-rsvp .rsvp-guest-row { padding: 0.82rem 1.5rem; }
  #page-rsvp .rsvp-event-hdr-links { padding: 0.55rem 1.5rem 0.90rem; }
  #page-rsvp .rsvp-event-hdr:hover { background: rgba(200,169,110,0.04); }
  #page-rsvp .rsvp-ev-instruction { color: rgba(200, 169, 110, 0.50); }
  #page-rsvp .rsvp-event-hdr-label {
    color: rgba(255, 252, 240, 0.98);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  #page-rsvp .rsvp-event-hdr-date { color: rgba(200, 175, 118, 0.60); }
  #page-rsvp .rsvp-ev-body-meta { color: rgba(200, 175, 118, 0.65); padding-left: 1.5rem; font-size: 0.88rem; }
  #page-rsvp .rsvp-ev-body-addr { color: rgba(200, 175, 118, 0.50); }
  #page-rsvp .rsvp-ev-body-sep  { color: rgba(200, 169, 110, 0.30); }
  #page-rsvp .rsvp-ev-venue-name { color: rgba(220, 192, 130, 0.82); }
  #page-rsvp .rsvp-ev-guest-count { color: rgba(200, 169, 110, 0.55); }
  #page-rsvp .rsvp-ev-toggle-text { color: rgba(200, 169, 110, 0.65); }
  #page-rsvp .rsvp-ev-chevron { color: rgba(200, 169, 110, 0.55); }
  #page-rsvp .rsvp-event-section.rsvp-ev-open .rsvp-ev-chevron { color: rgba(200, 169, 110, 0.90); }
  #page-rsvp .rsvp-guest-row { border-bottom-color: rgba(200, 169, 110, 0.10); }
  #page-rsvp .rsvp-guest-row-name { color: rgba(255, 248, 230, 0.82); }
  #page-rsvp .rsvp-guest-avatar {
    background: rgba(200, 169, 110, 0.14);
    border-color: rgba(200, 169, 110, 0.40);
    color: rgba(200, 175, 118, 0.92);
  }
  #page-rsvp .rsvp-event-hdr-label { font-size: clamp(1.14rem, 2.8vw, 1.30rem); }
  #page-rsvp .rsvp-event-hdr-date { font-size: 0.92rem; color: rgba(200, 175, 118, 0.65); }
  #page-rsvp .rsvp-ev-guest-count { font-size: 0.59rem; color: rgba(200, 169, 110, 0.42); letter-spacing: 0.07em; }
  #page-rsvp .rsvp-ev-desc { color: rgba(200, 175, 125, 0.58); }
  #page-rsvp .rsvp-ev-dress-code {
    background: rgba(216, 190, 140, 0.08);
    border-color: rgba(185, 148, 50, 0.18);
  }
  #page-rsvp .rsvp-ev-dress-code-label { color: rgba(215, 190, 140, 0.80); }
  #page-rsvp .rsvp-ev-dress-code-label strong { color: rgba(225, 200, 150, 0.95); }
  #page-rsvp .rsvp-ev-dress-code-note { color: rgba(200, 175, 125, 0.52); }
  #page-rsvp .rsvp-ev-meta-time { font-weight: 600; color: rgba(215, 185, 128, 0.92); letter-spacing: 0.03em; }
  #page-rsvp .rsvp-ev-meta-sep { color: rgba(200, 169, 110, 0.30); }
  #page-rsvp .rsvp-ev-progress { font-size: 0.74rem; color: rgba(200, 169, 110, 0.52); }
  #page-rsvp .rsvp-ev-progress--done { color: rgba(140, 210, 160, 0.88); }
  #page-rsvp .rsvp-ev-toggle-text { font-size: 0.73rem; color: rgba(200, 169, 110, 0.70); }
  #page-rsvp .rsvp-event-hdr-links { border-top: 1px solid rgba(200, 169, 110, 0.08); padding-top: 0.5rem; }

  /* Submit button on desktop — champagne CTA, most prominent element */
  #page-rsvp .btn-confirm-rsvp {
    background: linear-gradient(180deg, #E6D4B5 0%, #D9C19A 52%, #CCAF84 100%);
    border: 1px solid rgba(210, 185, 140, 0.50);
    border-radius: 20px;
    color: #2E2418;
    font-weight: 500;
    padding: 1.5rem 2.5rem;
    font-size: 0.90rem;
    letter-spacing: 0.28em;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      0 4px 16px rgba(170, 130, 60, 0.24),
      0 10px 34px rgba(140, 105, 40, 0.14),
      inset 0 1px 0 rgba(255, 250, 235, 0.52);
  }
  #page-rsvp .btn-confirm-rsvp:hover {
    background: linear-gradient(180deg, #EDD9BC 0%, #E0C8A0 52%, #D4B488 100%);
    color: #22180E;
    transform: translateY(-2px);
    box-shadow:
      0 6px 22px rgba(170, 130, 60, 0.34),
      0 14px 44px rgba(140, 105, 40, 0.20),
      inset 0 1px 0 rgba(255, 252, 238, 0.60);
  }

  /* Memory section on desktop — dark glass */
  #page-rsvp .inv-memory-section {
    background: rgba(14, 8, 2, 0.38);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(200, 169, 110, 0.18);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 0.75rem;
  }
  #page-rsvp .inv-memory-section .inv-memory-title { color: rgba(255, 248, 230, 0.88); }
  #page-rsvp .inv-memory-section .inv-memory-sub { color: rgba(255, 255, 255, 0.52); }
  #page-rsvp .inv-memory-section .inv-memory-upload-zone {
    border-color: rgba(200, 169, 110, 0.28);
    background: rgba(200, 169, 110, 0.05);
    color: rgba(200, 169, 110, 0.65);
  }
}



/* ══════════════════════════════════════════════
   INVITATION PAGE
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   LUXURY INVITATION CARD — 3D physical card
   ══════════════════════════════════════════════ */

.inv-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 3rem;
  min-height: calc(100dvh - 80px);
}

.inv-paper {
  position: relative;
  width: min(360px, 100%);
  background:
    linear-gradient(200deg, rgba(200,169,110,0.04) 0%, transparent 40%),
    linear-gradient(160deg, #151020 0%, #1e1733 50%, #141020 100%);
  border: 1px solid rgba(200, 169, 110, 0.28);
  border-radius: 3px;
  padding: 8px;
  transform: perspective(1400px) rotateX(-1.8deg) rotateY(1.2deg);
  transform-origin: center center;
  box-shadow:
    inset 0 1px 0 rgba(200, 169, 110, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0,0,0,0.35),
    0 10px 28px rgba(0,0,0,0.55),
    0 28px 64px rgba(0,0,0,0.45),
    0 60px 100px rgba(0,0,0,0.22);
}

/* Inner border engraving */
.inv-paper::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(200, 169, 110, 0.13);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

.inv-paper-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 2.2rem 3.2rem;
}

/* Corner flourishes */
.inv-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(200, 169, 110, 0.40);
  border-style: solid;
  z-index: 2;
}
.inv-corner--tl { top: 14px;    left: 14px;    border-width: 1px 0 0 1px; }
.inv-corner--tr { top: 14px;    right: 14px;   border-width: 1px 1px 0 0; }
.inv-corner--bl { bottom: 14px; left: 14px;    border-width: 0 0 1px 1px; }
.inv-corner--br { bottom: 14px; right: 14px;   border-width: 0 1px 1px 0; }

/* Single top gem */
.inv-paper-gem {
  display: block;
  font-size: 0.52rem;
  color: rgba(200, 169, 110, 0.50);
  letter-spacing: 0.4em;
  margin-bottom: 1.8rem;
}

/* "Monica," */
.inv-paper-dear {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
}

/* "Save the date." — gold foil */
.inv-paper-save {
  font-family: var(--ff-script);
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 1.8rem;
  background: linear-gradient(
    130deg,
    #9a7630 0%,
    #d4af6a 18%,
    #f0e0a0 36%,
    #c8a96e 50%,
    #f0e0a0 64%,
    #d4af6a 82%,
    #9a7630 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(200, 169, 110, 0.22));
}

/* Thin rule with diamond */
.inv-paper-rule {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 auto 1.8rem;
  max-width: 200px;
}
.inv-paper-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,169,110,0.38), transparent);
}
.inv-paper-rule-gem {
  font-size: 0.38rem;
  color: rgba(200, 169, 110, 0.55);
  line-height: 1;
}

/* "SEPTEMBER 9–12, 2026" */
.inv-paper-date {
  font-family: var(--ff-body);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.48);
  margin-bottom: 1.8rem;
}

/* "Luxshikaa & Mathusangan" — gold foil names */
.inv-paper-names {
  font-family: var(--ff-script);
  font-size: clamp(2rem, 7.5vw, 2.8rem);
  line-height: 1.25;
  background: linear-gradient(
    130deg,
    #9a7630 0%,
    #d4af6a 18%,
    #f0e0a0 36%,
    #c8a96e 50%,
    #f0e0a0 64%,
    #d4af6a 82%,
    #9a7630 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 8px rgba(200, 169, 110, 0.18));
}

.inv-letter {
  /* kept for fallback only */
  text-align: center;
  padding: 3.5rem 0 3rem;
  max-width: 480px;
  margin: 0 auto;
}

/* Invitation card — single elegant entry */
#page-invitation.active .inv-paper    { animation: invCardReveal 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
#page-invitation.active .inv-cta-wrap { opacity: 0; animation: luxReveal 0.65s ease 0.9s forwards; }
.inv-ornament-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.inv-ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.35), transparent);
}
.inv-ornament-gem {
  color: var(--gold);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
}
.inv-dear {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1.4rem;
  line-height: 1.2;
}
.inv-body {
  font-family: var(--ff-display);
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  font-weight: 300;
  color: rgba(255,255,255,0.62);
  line-height: 1.95;
  margin-bottom: 1.8rem;
}
.inv-senders {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(200,169,110,0.65);
  letter-spacing: 0.04em;
}

/* ── Weekend timeline ─── */
.inv-timeline {
  max-width: 420px;
  margin: 0 auto 3rem;
  padding: 0;
}
.inv-timeline-heading {
  font-family: var(--ff-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.6);
  text-align: center;
  margin-bottom: 1.6rem;
}
.inv-tl-item {
  display: grid;
  grid-template-columns: 90px 16px 1fr;
  gap: 0 1rem;
  align-items: start;
  margin-bottom: 1.4rem;
  position: relative;
}
.inv-tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(90px + 1rem + 7px);
  top: 18px;
  width: 1px;
  height: calc(100% + 1rem);
  background: rgba(200,169,110,0.15);
}
.inv-tl-date {
  text-align: right;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.38);
  padding-top: 2px;
  line-height: 1.4;
}
.inv-tl-gem {
  color: var(--gold);
  font-size: 0.55rem;
  padding-top: 4px;
  line-height: 1;
}
.inv-tl-label {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  margin-bottom: 0.25rem;
}
.inv-tl-detail {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}
.inv-cta-wrap {
  text-align: center;
  padding: 2.2rem 0 1rem;
}



/* ══════════════════════════════════════════════
   FAQ SECTION
   ══════════════════════════════════════════════ */
.faq-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 4rem;
}
.faq-heading {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.82);
  text-align: center;
  margin-bottom: 2rem;
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  padding: 1.1rem 0;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
}
.faq-q {
  font-family: var(--ff-body);
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
}
.faq-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(200,169,110,0.5);
  transition: transform 0.25s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 200px; }
.faq-answer-inner {
  padding: 0 0 1.1rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.75;
}
.faq-answer-inner a { color: rgba(200,169,110,0.6); }

/* ══════════════════════════════════════════════
   CONFIRMATION EXTRAS
   ══════════════════════════════════════════════ */
.conf-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem auto;
  max-width: 640px;
}
.conf-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.25), transparent);
}
.conf-divider-gem {
  color: var(--gold);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
}

/* ══════════════════════════════════════════════
   GALLERY — editorial portrait cards
   ══════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.gallery-card {
  aspect-ratio: 2/3;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.gallery-placeholder {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-overlay span {
  font-family: var(--ff-display);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════
   INVITATION PAGE — display flex (consistent with other inner pages)
   ══════════════════════════════════════════════ */
#page-invitation.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  animation: luxReveal 0.65s ease 0.05s both;
}

/* ══════════════════════════════════════════════
   PAGE-REVEAL — ENVELOPE → INVITATION CROSSFADE
   ══════════════════════════════════════════════ */

.rev-scene {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: 2.5rem 1.5rem;
  width: 100%;
}

.rev-stage {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: min(92vw, 800px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.rev-stage.rev-stage-show { opacity: 1; transform: translateY(0); }

/* Sizing wrapper only — no visual chrome, no clipping */
.rev-img-wrap {
  width: 100%;
}

/* Invitation image — floats naturally like real stationery */
.rev-inv-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 2px 10px rgba(35, 14, 2, 0.14),
    0 10px 36px rgba(28, 10, 2, 0.20),
    0 24px 72px rgba(18, 6, 0, 0.22),
    0 48px 120px rgba(10, 4, 0, 0.12);
}

/* "Open Invitation" button */
.rev-open-btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  border: 1px solid rgba(200, 169, 110, 0.55);
  border-radius: 6px;
  color: var(--gold-light);
  font-family: var(--ff-body);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(200, 169, 110, 0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              background 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
}
.rev-open-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,240,180,0.22) 50%, transparent 60%);
  transition: left 0.55s ease; pointer-events: none;
}
.rev-open-btn:hover {
  background: rgba(200, 169, 110, 0.16);
  border-color: rgba(200, 169, 110, 0.80);
  color: #fff0c8;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(200,169,110,0.28), 0 8px 28px rgba(0,0,0,0.12);
}
.rev-open-btn:hover::before { left: 160%; }

/* Continue CTA — hidden until after reveal */
.rev-continue-cta {
  width: 100%; text-align: center;
}

/* "For [Name]" */
.rev-cta-guest {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  color: rgba(255, 248, 220, 0.90);
  margin-bottom: 1rem; letter-spacing: 0.03em;
  text-shadow: 0 1px 14px rgba(0,0,0,0.60);
}

/* "Continue to RSVP" pill */
.rev-continue-btn {
  display: inline-block;
  padding: 1rem 2.6rem;
  border: 1px solid rgba(200, 169, 110, 0.60);
  border-radius: 50px;
  color: var(--gold-light);
  font-family: var(--ff-body);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(200, 169, 110, 0.09);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              background 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
}
.rev-continue-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 65%; height: 100%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,248,200,0.32) 50%, transparent 65%);
  transition: left 0.65s ease; pointer-events: none;
}
.rev-continue-btn:hover {
  background: rgba(200, 169, 110, 0.18);
  border-color: rgba(200, 169, 110, 0.85);
  color: #fff4d0;
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(200,169,110,0.32), 0 8px 32px rgba(0,0,0,0.16);
}
.rev-continue-btn:hover::before { left: 160%; }

@media (max-width: 480px) {
  .rev-stage { width: min(92vw, 380px); gap: 1.4rem; }
}
@media (min-width: 769px) {
  .rev-stage { width: min(72vw, 820px); gap: 2rem; }
}

/* ══════════════════════════════════════════════
   WEDDING TIMELINE — Day 1 / Day 2 / Day 3
   ══════════════════════════════════════════════ */
.wtl-section {
  max-width: 400px;
  margin: 0 auto 2.5rem;
  padding: 0 0.5rem;
}

/* Stagger each day item */
.wtl-item { opacity: 0; animation: luxReveal 0.6s ease both; }
.wtl-item:nth-child(1) { animation-delay: 1.25s; }
.wtl-item:nth-child(2) { animation-delay: 1.45s; }
.wtl-item:nth-child(3) { animation-delay: 1.65s; }
.wtl-item:nth-child(4) { animation-delay: 1.85s; }
.wtl-heading {
  font-family: var(--ff-body);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.6);
  text-align: center;
  margin-bottom: 2.5rem;
}
.wtl-list {
  display: flex;
  flex-direction: column;
}
.wtl-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.wtl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  flex-shrink: 0;
  padding-top: 3px;
}
.wtl-day-label {
  font-family: var(--ff-body);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.55);
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.wtl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200,169,110,0.5);
  border: 1px solid rgba(200,169,110,0.7);
  flex-shrink: 0;
}
.wtl-connector {
  width: 1px;
  flex: 1;
  min-height: 50px;
  background: linear-gradient(to bottom, rgba(200,169,110,0.3), rgba(200,169,110,0.08));
  margin: 6px 0;
}
.wtl-right {
  display: flex;
  gap: 0.9rem;
  padding-bottom: 2.5rem;
  flex: 1;
  align-items: flex-start;
}
.wtl-item:last-child .wtl-right { padding-bottom: 0; }
.wtl-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  font-family: sans-serif;
}
.wtl-body { flex: 1; }
.wtl-event-name {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.wtl-event-date {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
  margin-bottom: 0.15rem;
}
.wtl-event-loc {
  font-size: 0.68rem;
  color: rgba(200,169,110,0.5);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════
   PHOTO UPLOAD SECTION
   ══════════════════════════════════════════════ */
.photo-upload-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.photo-upload-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.photo-hdr-gem {
  font-size: 0.5rem;
  color: var(--gold);
  padding-top: 7px;
  flex-shrink: 0;
}
.photo-upload-title {
  font-family: var(--ff-display);
  font-size: 1.12rem;
  font-weight: 300;
  color: rgba(255,255,255,0.82);
  margin-bottom: 0.18rem;
}
.photo-upload-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.55;
}
.photo-drop-zone {
  display: block;
  border: 1px dashed rgba(200,169,110,0.25);
  border-radius: 12px;
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--ease);
}
.photo-drop-zone:hover {
  border-color: rgba(200,169,110,0.5);
  background: rgba(200,169,110,0.04);
}
.photo-drop-icon {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  font-family: sans-serif;
}
.photo-drop-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.52);
  margin-bottom: 0.18rem;
}
.photo-drop-hint {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.22);
  font-style: italic;
}
.photo-preview-wrap {
  margin-top: 1rem;
  border-radius: 10px;
  overflow: hidden;
}
.photo-caption-wrap { margin-top: 0.75rem; }

/* ══════════════════════════════════════════════
   RSVP PAGE GALLERY — "Our Memories"
   ══════════════════════════════════════════════ */
.rsvp-gallery-section {
  margin-bottom: 2rem;
  padding: 1.4rem 0 0.5rem;
  border-top: 1px solid rgba(185,148,50,0.14);
}
.rsvp-gallery-divider {
  display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.1rem;
}
.rsvp-gallery-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(185,148,50,0.22), transparent);
}
.rsvp-gallery-gem {
  font-size: 0.38rem; color: rgba(185,148,50,0.42); letter-spacing: 0.3em;
}
.rsvp-gallery-heading {
  font-family: var(--ff-display);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  color: rgba(38,28,8,0.70);
  text-align: center; margin-bottom: 0.25rem;
}
.rsvp-gallery-sub {
  font-size: 0.70rem;
  color: rgba(50,38,14,0.44);
  text-align: center; margin-bottom: 1.1rem;
}

/* ══════════════════════════════════════════════
   INVITATION SIGNATURE — "With Love, Luxshikaa & Mathusangan"
   ══════════════════════════════════════════════ */
.inv-date-line {
  font-family: var(--ff-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.5);
  margin-bottom: 1.8rem;
}

.inv-signature {
  text-align: center;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(200,169,110,0.15);
  margin-top: 0.4rem;
}

.inv-sig-love {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.inv-sig-names {
  font-family: var(--ff-script);
  font-size: 2.4rem;
  color: rgba(200,169,110,0.85);
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(200,169,110,0.18);
}

/* (conf-signature removed — replaced by conf-closing in ivory redesign) */

/* ══════════════════════════════════════════════
   WEDDING WEEKEND WEATHER
   ══════════════════════════════════════════════ */
.weather-section {
  max-width: 420px;
  margin: 0 auto 3rem;
  padding: 0 0.5rem;
}

.weather-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.weather-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.2), transparent);
}

.weather-heading {
  font-family: var(--ff-body);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

.weather-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.weather-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 1.1rem 0.65rem 1rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.weather-card:hover {
  border-color: rgba(200,169,110,0.28);
}

.weather-card-event {
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200,169,110,0.52);
  margin-bottom: 0.2rem;
  line-height: 1.4;
}

.weather-card-date {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.7rem;
  letter-spacing: 0.04em;
}

.weather-card-icon {
  font-size: 1.55rem;
  margin-bottom: 0.3rem;
  font-family: sans-serif;
  line-height: 1;
}

.weather-card-temp {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
  margin-bottom: 0.12rem;
}

.weather-card-status {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.weather-note {
  text-align: center;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.22);
  font-style: italic;
  letter-spacing: 0.02em;
}

@media (max-width: 430px) {
  .weather-card { padding: 0.9rem 0.45rem 0.8rem; }
  .weather-card-temp { font-size: 1rem; }
  .weather-card-icon { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════
   MUSIC PLAYER — floating pill button
   ══════════════════════════════════════════════ */
.music-btn {
  position: fixed;
  bottom: 1.8rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  background: rgba(6, 3, 14, 0.60);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.music-btn:hover {
  background: rgba(6, 3, 14, 0.82);
  border-color: rgba(200, 169, 110, 0.38);
  transform: translateY(-1px);
}

.music-btn.music-active {
  border-color: rgba(200, 169, 110, 0.50);
  background: rgba(10, 6, 2, 0.78);
}

.music-btn-icon {
  font-size: 0.88rem;
  color: rgba(200, 169, 110, 0.72);
  line-height: 1;
  font-family: sans-serif;
  transition: color 0.25s ease;
}

.music-btn.music-active .music-btn-icon {
  color: var(--gold-light);
}

.music-btn-label {
  font-family: var(--ff-body);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease;
  white-space: nowrap;
}

.music-btn.music-active .music-btn-label {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767px) {
  .music-btn {
    top: calc(env(safe-area-inset-top, 0) + 0.55rem);
    right: 0.65rem;
    bottom: auto;
    padding: 0.32rem 0.52rem;
    gap: 0;
    z-index: 500;
  }
  .music-btn-label { display: none; }
  .music-btn-icon  { font-size: 0.72rem; }
}

/* ══════════════════════════════════════════════
   LUX DASHBOARD  (#page-lux-dashboard)
   ══════════════════════════════════════════════ */

#page-lux-dashboard {
  background: #e8e2d8;
  overflow: hidden;
  position: relative;
  height: 100vh;
  height: 100dvh;
}

/* ── Login ── */
.ld-login-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e2d8;
  z-index: 10;
}

.ld-login-card {
  background: #ffffff;
  border: 1px solid #e5ddd0;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  width: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 8px 40px rgba(100,80,40,0.10);
}

.ld-login-mono {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: #C8A96E;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.ld-login-title {
  font-family: var(--ff-script);
  font-size: 2.4rem;
  color: #2C1F0F;
  margin: 0;
}

.ld-login-sub {
  font-family: var(--ff-body);
  font-size: 0.82rem;
  color: #8A7A68;
  margin: 0;
}

.ld-pass-input {
  width: 100%;
  padding: 0.78rem 1rem;
  background: #faf8f4;
  border: 1px solid #d8cec0;
  border-radius: 8px;
  color: #2C1F0F;
  font-family: var(--ff-body);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ld-pass-input:focus { border-color: #C8A96E; }

.ld-error {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: #c0392b;
  margin: 0;
}

/* ── Shell layout ── */
.ld-dash-shell {
  position: absolute;
  inset: 0;
  display: flex;
}

/* ── Sidebar ── */
.ld-sidebar {
  width: 220px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  background: #ddd7cd;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 20px rgba(60,40,10,0.07);
}

.ld-sidebar-brand {
  padding: 1.6rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.ld-monogram {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.5px solid #C8A96E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: #C8A96E;
  letter-spacing: 0.05em;
  background: #f5f0e6;
  box-shadow: 0 0 0 4px #ede8df, 0 0 0 5px rgba(200,169,110,0.20);
}

.ld-brand-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.ld-brand-line {
  font-family: var(--ff-body);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5C4A30;
  font-weight: 500;
}

.ld-brand-amp {
  font-family: var(--ff-script);
  font-size: 0.9rem;
  color: #C8A96E;
  line-height: 1;
}

/* ── Sidebar nav ── */
.ld-nav {
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.ld-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.85rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6A5840;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ld-nav-item svg { flex-shrink: 0; opacity: 0.65; transition: opacity 0.15s; }

.ld-nav-item:hover {
  background: rgba(200,169,110,0.14);
  color: #3C2C10;
}
.ld-nav-item:hover svg { opacity: 1; }

.ld-nav-item.active {
  background: rgba(200,169,110,0.18);
  color: #8A5E10;
  font-weight: 600;
}
.ld-nav-item.active svg { opacity: 1; color: #C8A96E; }

/* ── Main area ── */
.ld-main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #e8e2d8;
}

/* ── Top bar ── */
.ld-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 2rem 1.1rem;
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(80,55,15,0.06);
  flex-shrink: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.ld-topbar-title {
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 400;
  font-style: italic;
  color: #1a1208;
  margin: 0;
  letter-spacing: 0.02em;
}

.ld-topbar-sub {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: #8A7A68;
  margin: 0.15rem 0 0;
}

.ld-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ld-refresh-status {
  font-family: var(--ff-body);
  font-size: 0.70rem;
  color: #A09080;
  letter-spacing: 0.04em;
}

/* ── Page body ── */
.ld-page-body {
  flex: 1;
  padding: 1.6rem 2rem 3rem;
  overflow-x: hidden;
}

.ld-view-panel { display: block; }

/* ── Buttons ── */
.ld-btn {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.50rem 1.1rem;
  border-radius: 7px;
  border: 1px solid #d8cec0;
  background: #ffffff;
  color: #5C4A30;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ld-btn:hover { background: #f5ede0; border-color: #C8A96E; }

.ld-btn--gold {
  background: linear-gradient(160deg, #d4bc85 0%, #C8A96E 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.ld-btn--gold:hover { background: linear-gradient(160deg, #dcc890 0%, #d0b478 100%); border-color: transparent; }

.ld-btn--ghost {
  background: transparent;
  border-color: #d0c8b8;
  color: #6A5840;
}
.ld-btn--ghost:hover { background: #f0eadf; }

.ld-btn--danger {
  background: transparent;
  border-color: #e8a0a0;
  color: #b03030;
}
.ld-btn--danger:hover { background: #fdeaea; border-color: #d06060; }

.ld-btn--add {
  background: #2C1F0F;
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.ld-btn--add:hover { background: #3d2a12; border-color: transparent; }

.ld-link-btn {
  background: none;
  border: none;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: #C8A96E;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ld-link-btn:hover { color: #8A6830; }

/* ── Stat section ── */
.ld-stat-grid { margin-bottom: 1.5rem; }

/* Countdown banner — full width at top of stats */
.ld-countdown-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.70rem;
  background: linear-gradient(135deg, #f8f4ed 0%, #ede0cc 100%);
  border-radius: 16px;
  padding: 0.65rem 1.4rem;
  margin-bottom: 0.55rem;
  box-shadow: 0 2px 16px rgba(80,55,15,0.08), 0 1px 4px rgba(80,55,15,0.04);
  flex-wrap: wrap;
}
.ld-cb-orn { color: #C8A96E; font-size: 0.70rem; opacity: 0.65; flex-shrink: 0; }
.ld-cb-n {
  font-family: var(--ff-display);
  font-size: 2.1rem;
  font-weight: 400;
  color: #1a1208;
  line-height: 1;
  flex-shrink: 0;
}
.ld-cb-label {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-style: italic;
  color: #ffffff;
  line-height: 1;
}
.ld-cb-sep { color: #C8A96E; opacity: 0.45; font-size: 0.75rem; }
.ld-cb-date {
  font-family: var(--ff-body);
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9A8870;
}

/* Hero RSVP progress card */
.ld-stat-hero {
  background: linear-gradient(135deg, #f8f5f0 0%, #e8e0cc 100%);
  border-radius: 20px;
  padding: 0.50rem 1.4rem 0.40rem;
  margin-bottom: 0.55rem;
  box-shadow: 0 4px 28px rgba(80,55,15,0.10), 0 1px 4px rgba(80,55,15,0.04);
}
.ld-stat-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.35rem;
}
.ld-stat-hero-left {}
.ld-stat-hero-eyebrow {
  font-family: var(--ff-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8A6830;
  margin-bottom: 0.25rem;
}
.ld-stat-hero-nums {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1;
}
.ld-stat-hero-big {
  font-family: var(--ff-display);
  font-size: 2.0rem;
  font-weight: 400;
  color: #1a1208;
  line-height: 1;
}
.ld-stat-hero-of {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: #6A5840;
}
.ld-stat-hero-pct {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: #C8A96E;
  line-height: 1;
}
.ld-stat-hero-pct-sym {
  font-size: 0.88rem;
  font-weight: 400;
}
.ld-stat-progress-track {
  height: 3px;
  background: rgba(200,169,110,0.15);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.ld-stat-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B8953A 0%, #D4B875 100%);
  border-radius: 99px;
  transition: width 0.9s ease;
  min-width: 3px;
}
.ld-stat-hero-meta {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.ld-stat-tag {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 20px;
  padding: 0.22em 0.75em;
}
.ld-stat-tag--green { background: #edf7f2; color: #2a7a50; }
.ld-stat-tag--amber { background: #fdf5e6; color: #8A5500; }
.ld-stat-tag--dim   { background: rgba(200,169,110,0.12); color: #8A7A68; }

/* Event attendance cards */
.ld-ev-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
.ld-ev-stat {
  background: #ffffff;
  border: 1px solid rgba(200,169,110,0.18);
  border-radius: 14px;
  padding: 0.75rem 0.90rem 0.80rem;
  box-shadow: 0 2px 12px rgba(100,80,40,0.06), 0 1px 3px rgba(100,80,40,0.04);
}
.ld-ev-stat--full    { border-color: rgba(42,122,80,0.30); }
.ld-ev-stat--partial { border-color: rgba(200,169,110,0.38); }
.ld-ev-stat-label {
  font-family: var(--ff-body);
  font-size: 0.60rem;
  font-weight: 600;
  color: #3D2B10;
  margin-bottom: 0.50rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.ld-ev-stat-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: rgba(200,169,110,0.85);
}
.ld-ev-stat-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0.45rem;
}
.ld-ev-4kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.20rem 0.10rem;
  border-right: 1px solid rgba(200,169,110,0.13);
}
.ld-ev-4kpi:last-child { border-right: none; }
.ld-ev-4n {
  font-family: var(--ff-display);
  font-size: 1.9rem;
  font-weight: 400;
  color: #1a1208;
  line-height: 1.0;
}
.ld-ev-4n--yes { color: #2a7a50; }
.ld-ev-4n--no  { color: #b03030; }
.ld-ev-4lbl {
  font-size: 0.53rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9A8870;
  margin-top: 0.06rem;
  white-space: nowrap;
}

/* ── Activity feed ── */
.ld-act-feed {}
.ld-act-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.95rem 1.5rem;
  transition: background 0.12s;
}
.ld-act-item + .ld-act-item {
  border-top: 1px solid rgba(200,169,110,0.05);
}
.ld-act-item:hover { background: #faf7f3; }
.ld-act-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(200,169,110,0.15);
  color: #7A5820;
  font-family: var(--ff-body);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.ld-act-avatar--rsvp  { background: rgba(200,169,110,0.14); color: #7A5820; }
.ld-act-avatar--photo { background: rgba(42,80,160,0.10);  color: #2a4080; }
.ld-act-avatar--note  { background: rgba(120,42,120,0.10); color: #602a60; }
.ld-act-body { flex: 1; min-width: 0; line-height: 1.45; }
.ld-act-name   { font-weight: 600; color: #1a1208; font-size: 0.88rem; }
.ld-act-detail { color: #6A5840; font-size: 0.82rem; }
.ld-act-msg {
  font-size: 0.74rem;
  color: #8A7A68;
  font-style: italic;
  margin-top: 0.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.ld-act-time {
  font-size: 0.68rem;
  color: #8A7A6A;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.ld-act-headline { line-height: 1.4; }
.ld-activity-empty {
  padding: 2rem 1.5rem;
  color: #B0A090;
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
}

/* ── Split layout ── */
.ld-split {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .ld-split { grid-template-columns: 1fr; }
}

/* ── Cards ── */
.ld-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 28px rgba(80,55,15,0.09), 0 1px 4px rgba(80,55,15,0.04);
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.ld-card:last-child { margin-bottom: 0; }

.ld-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem 0.80rem;
  flex-wrap: wrap;
  background: #ffffff;
}

.ld-card-title {
  font-family: var(--ff-display);
  font-size: 1.18rem;
  font-weight: 400;
  font-style: italic;
  color: #1a1208;
  margin: 0;
  letter-spacing: 0.02em;
}
.ld-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.ld-guest-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.22rem;
}
.ld-guest-chip {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: #8A7A68;
  white-space: nowrap;
}
.ld-guest-chip strong {
  font-weight: 600;
  color: #2A1F0E;
  font-style: normal;
}
.ld-chip-sep {
  font-size: 0.65rem;
  color: rgba(200, 169, 110, 0.55);
  margin: 0 0.12rem;
  line-height: 1;
}

.ld-card-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.ld-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: #fdfaf5;
}

/* ── Search / select ── */
.ld-search {
  padding: 0.44rem 0.85rem;
  background: #faf8f4;
  border: 1px solid #d8cec0;
  border-radius: 7px;
  color: #2C1F0F;
  font-family: var(--ff-body);
  font-size: 0.80rem;
  outline: none;
  min-width: 140px;
  max-width: 200px;
}
.ld-search:focus { border-color: #C8A96E; }
.ld-search::placeholder { color: #C0B4A4; }

.ld-select {
  padding: 0.44rem 0.75rem;
  background: #faf8f4;
  border: 1px solid #d8cec0;
  border-radius: 7px;
  color: #4A3820;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  outline: none;
  cursor: pointer;
}
.ld-select:focus { border-color: #C8A96E; }

/* ── Tables ── */
.ld-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Guest List + RSVPs: table scrolls internally so filter bar and column headers stay frozen */
#ld-view-guests .ld-table-scroll,
#ld-view-rsvps .ld-table-scroll {
  overflow-y: auto;
  max-height: calc(100dvh - 290px);
}

.ld-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-body);
  font-size: 0.88rem;
}

.ld-table thead { background: transparent; }

.ld-table th {
  padding: 0.48rem 0.55rem;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.63rem;
  color: #8A7055;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(200,169,110,0.22), 0 2px 8px rgba(80,55,15,0.05);
}
.ld-table th.ld-sortable { cursor: pointer; }
.ld-table th.ld-sortable:hover { color: #C8A96E; }
.ld-sort-ind { font-size: 0.70em; opacity: 0.75; margin-left: 0.2em; }
.ld-table th.ld-sort-active { color: #6A4010; }

.ld-table td {
  padding: 0.50rem 0.55rem;
  vertical-align: middle;
  color: #2C1F0F;
  font-size: 0.85rem;
}
.ld-table tr:last-child td { border-bottom: none; }

/* Subtle row separation via spacing — no grid lines */
.ld-table tbody tr { border-bottom: 1px solid rgba(200,169,110,0.05); }

.ld-guest-row { cursor: pointer; transition: background 0.12s; }
.ld-guest-row:hover td { background: #faf6ef; }

/* Group separator rows in guest list — soft tinted label rows */
.ld-group-sep td {
  padding: 0.36rem 0.55rem 0.32rem;
  font-family: var(--ff-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #8A6830;
  background: rgba(200,169,110,0.09) !important;
  border-top: 1px solid rgba(200,169,110,0.14) !important;
  border-bottom: 1px solid rgba(200,169,110,0.14) !important;
  cursor: default;
}
.ld-group-sep:first-child td { border-top: none !important; }

.ld-name { font-weight: 600; color: #1a1208; }
.ld-na   { color: #C8BDB0; font-size: 0.76rem; }
.ld-count { font-family: var(--ff-body); font-size: 0.74rem; color: #8A7A68; }

/* Table cell helpers */
.ld-td-name    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-td-fname   { padding-right: 0 !important; }
.ld-td-lname   { padding-left: 0.20rem !important; }
.ld-td-rel     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.80rem; color: #5A4A38; }
.ld-td-ev      { text-align: center; white-space: nowrap; }
.ld-td-actions { text-align: center; white-space: nowrap; }
.ld-td-dietary { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-td-inv     { text-align: center; }
.ld-td-time    { color: #8A7A68; font-size: 0.73rem; white-space: nowrap; }
.ld-td-diet    { max-width: 140px; }
.ld-td-mem     { text-align: center; }
.ld-td-na      { color: #C8BDB0; }
.ld-rel-text   { font-size: 0.80rem; color: #6A5A48; }

/* Fixed column widths — pixel values so name columns don't balloon on wide screens.
   Unspecified event columns share remaining space equally. */
#ld-view-guests .ld-table,
#ld-view-rsvps  .ld-table { table-layout: fixed; }

/* First Name right-aligned so text sits flush against Last Name column */
#ld-view-guests .ld-table th.ld-td-fname,
#ld-view-guests .ld-table td.ld-td-fname,
#ld-view-rsvps  .ld-table th.ld-td-fname,
#ld-view-rsvps  .ld-table td.ld-td-fname { text-align: right; }

/* Guest List: GROUP | FIRST | LAST | REL | MEH | WED | REC | ACTIONS */
#ld-view-guests .ld-table th:nth-child(1) { width:  80px; }
#ld-view-guests .ld-table th:nth-child(2) { width: 160px; }
#ld-view-guests .ld-table th:nth-child(3) { width: 160px; }
#ld-view-guests .ld-table th:nth-child(4) { width: 140px; }
/* cols 5,6,7 (event) — auto, share remaining width */
#ld-view-guests .ld-table th:nth-child(5),
#ld-view-guests .ld-table th:nth-child(6),
#ld-view-guests .ld-table th:nth-child(7) { text-align: center; }
#ld-view-guests .ld-table th:nth-child(8) { width:  70px; text-align: center; }

/* RSVP: GROUP | FIRST | LAST | REL | MEH | WED | REC | DIETARY | MEM | RESPONDED | ACTIONS */
#ld-view-rsvps  .ld-table th:nth-child(1)  { width:  80px; }
#ld-view-rsvps  .ld-table th:nth-child(2)  { width: 160px; }
#ld-view-rsvps  .ld-table th:nth-child(3)  { width: 160px; }
#ld-view-rsvps  .ld-table th:nth-child(4)  { width: 140px; }
/* cols 5,6,7 (event) — auto */
#ld-view-rsvps  .ld-table th:nth-child(5),
#ld-view-rsvps  .ld-table th:nth-child(6),
#ld-view-rsvps  .ld-table th:nth-child(7)  { text-align: center; }
#ld-view-rsvps  .ld-table th:nth-child(8)  { width: 130px; }
#ld-view-rsvps  .ld-table th:nth-child(9)  { width:  60px; text-align: center; }
#ld-view-rsvps  .ld-table th:nth-child(10) { width: 115px; }
#ld-view-rsvps  .ld-table th:nth-child(11) { width:  70px; text-align: center; }

.ld-diet-text {
  font-size: 0.73rem;
  color: #5C4A30;
}

/* ── Action buttons (Edit / Archive) ── */
.ld-act-btn {
  font-family: var(--ff-body);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.22em 0.65em;
  border-radius: 5px;
  border: 1px solid #d8cfc0;
  background: #faf6ef;
  color: #5C4A30;
  cursor: pointer;
  margin-right: 0.3rem;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ld-act-btn:hover { background: #f0e8d8; border-color: #C8A96E; }
.ld-act-btn--archive { color: #a04040; border-color: #f0c0c0; background: #fdf6f6; }
.ld-act-btn--archive:hover { background: #fde8e8; border-color: #e08080; }

/* ── Mobile guest cards ── */
.ld-guest-cards { display: none; }

.ld-gc {
  background: #ffffff;
  border: 1px solid #e8ddd0;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.65rem;
  box-shadow: 0 1px 6px rgba(100,80,40,0.06);
}
.ld-gc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.55rem;
  cursor: pointer;
}
.ld-gc-name {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.90rem;
  color: #1a1208;
}
.ld-gc-time {
  font-size: 0.70rem;
  color: #8A7A68;
  white-space: nowrap;
  margin-left: 0.5rem;
}
.ld-gc-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.45rem;
  font-size: 0.73rem;
}
.ld-gc-ev-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8A7A68;
}
.ld-gc-mem {
  font-size: 0.68rem;
  color: #1e7a4a;
  background: #e6f4ee;
  border: 1px solid #b8dfc8;
  border-radius: 12px;
  padding: 0.1em 0.55em;
}
.ld-gc-diet {
  font-size: 0.72rem;
  color: #5C4A30;
  margin-bottom: 0.45rem;
}
.ld-gc-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0ebe0;
}

/* ── Pills ── */
.ld-pill {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 20px;
  padding: 0.18em 0.7em;
  white-space: nowrap;
}
.ld-pill--yes    { background: #edf7f2; color: #2a7a50; border: 1px solid rgba(100,190,140,0.35); }
.ld-pill--no     { background: #fdf0ef; color: #b03030; border: 1px solid rgba(210,110,100,0.30); }
.ld-pill--pend   { background: #f8f4eb; color: #7A6030; border: 1px solid rgba(180,150,80,0.28); }
.ld-pill--mem    { background: #e6f4ee; color: #1e7a4a; border: 1px solid #b8dfc8; }
.ld-pill--edited { background: #fff8e0; color: #7A5500; border: 1px solid #e8cc80; font-size: 0.60rem; margin-left: 0.4rem; }

.ld-empty {
  text-align: center;
  color: #B0A090;
  padding: 2rem 1rem;
  font-style: italic;
  font-size: 0.85rem;
}

/* ── Memories list (overview sidebar — compact) ── */
.ld-mem-list { padding: 0.25rem 0; }
.ld-mem-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.8rem 1.4rem 1.6rem;
  gap: 0.4rem;
}
.ld-mem-empty-icon {
  font-size: 1.5rem;
  color: rgba(200,169,110,0.45);
  margin-bottom: 0.2rem;
}
.ld-mem-empty-title {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: #6A5840;
  margin: 0;
  line-height: 1.3;
}
.ld-mem-empty-sub {
  font-size: 0.72rem;
  color: #B0A090;
  font-style: italic;
}

/* ── Wedding Countdown card ── */
.ld-countdown-card {
  background: linear-gradient(150deg, #f8f4ed 0%, #ede0cc 100%);
  overflow: hidden;
}
.ld-countdown-body {
  padding: 1.35rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ld-countdown-ornament {
  font-size: 1.0rem;
  color: rgba(200,169,110,0.50);
  margin-bottom: 0.30rem;
  letter-spacing: 0.2em;
}
.ld-countdown-heading {
  font-family: var(--ff-body);
  font-size: 0.60rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8A6830;
  margin-bottom: 0.60rem;
}
.ld-countdown-divider {
  width: 2.8rem;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,169,110,0.55), transparent);
  margin-bottom: 0.70rem;
}
.ld-countdown-n {
  font-family: var(--ff-display);
  font-size: 5rem;
  font-weight: 400;
  color: #1a1208;
  line-height: 1.0;
  margin-bottom: 0.10rem;
}
.ld-countdown-unit {
  font-family: var(--ff-display);
  font-size: 0.90rem;
  font-style: italic;
  color: #C8A96E;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.ld-countdown-date {
  font-family: var(--ff-body);
  font-size: 0.66rem;
  color: #8A7A68;
  letter-spacing: 0.06em;
}

/* ── Guest Notes card ── */
.ld-guest-notes-list { padding: 0.20rem 0 0.25rem; }
.ld-note-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.70rem 1.4rem;
  border-top: 1px solid rgba(200,169,110,0.07);
}
.ld-note-item:first-child { border-top: none; }
.ld-note-icon {
  flex-shrink: 0;
  margin-top: 0.18rem;
}
.ld-note-icon-svg {
  width: 14px;
  height: 14px;
  color: rgba(200,169,110,0.72);
}
.ld-note-body { flex: 1; min-width: 0; }
.ld-note-text {
  font-size: 0.82rem;
  color: #3D2B10;
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 0.18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ld-note-name {
  font-size: 0.66rem;
  color: #9A8870;
  font-style: normal;
}
.ld-notes-empty {
  padding: 1.3rem 1.4rem;
  color: #B0A090;
  font-style: italic;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.55;
  margin: 0;
}

.ld-mem-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid rgba(200,169,110,0.08);
  transition: background 0.12s;
}
.ld-mem-row:last-child { border-bottom: none; }
.ld-mem-row:hover { background: #faf7f3; }

.ld-mem-row-thumb {
  width: 105px;
  height: 105px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(200,169,110,0.20);
  transition: opacity 0.15s, transform 0.15s;
}
.ld-mem-row:hover .ld-mem-row-thumb { opacity: 0.88; transform: scale(1.03); }

.ld-mem-row-no-photo {
  width: 76px;
  height: 76px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f5ede0 0%, #ede5d8 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C8A96E;
  font-size: 1.2rem;
  border: 1px solid #e5ddd0;
}

.ld-mem-row-body { flex: 1; min-width: 0; }
.ld-mem-row-name { font-weight: 600; font-family: var(--ff-body); font-size: 0.84rem; color: #1a1208; }
.ld-mem-row-date { font-size: 0.68rem; color: #A09080; margin-top: 0.12rem; }
.ld-mem-row-msg  { font-size: 0.75rem; color: #6A5840; margin-top: 0.22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.ld-mem-row-drive {
  display: inline-block;
  font-size: 0.66rem;
  color: #C8A96E;
  margin-top: 0.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,169,110,0.35);
  transition: color 0.12s;
}
.ld-mem-row-drive:hover { color: #8A6830; }

/* ── Guestbook (full memories view) ── */
.ld-guestbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.ld-guestbook-title {
  font-family: var(--ff-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: #1a1208;
  margin: 0;
  letter-spacing: 0.03em;
}

.ld-guestbook-sub {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: #8A7A68;
  margin: 0.2rem 0 0;
}

.ld-mem-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ld-mem-filter {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.42rem 1rem;
  border-radius: 20px;
  border: 1px solid #d8cec0;
  background: #ffffff;
  color: #6A5840;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ld-mem-filter:hover    { background: #f5ede0; border-color: #C8A96E; }
.ld-mem-filter.active   { background: #2C1F0F; color: #ffffff; border-color: #2C1F0F; }

.ld-mem-count-bar {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  color: #A09080;
  margin-bottom: 1rem;
  min-height: 1.1rem;
}

/* ── Guestbook grid ── */
.ld-guestbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 1100px) { .ld-guestbook-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ld-guestbook-grid { grid-template-columns: 1fr; } }

/* Base guestbook card */
.ld-gb-card {
  background: #ffffff;
  border: 1px solid #e5ddd0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(100,80,40,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}
.ld-gb-card:hover {
  box-shadow: 0 6px 28px rgba(100,80,40,0.12);
  transform: translateY(-2px);
}

/* Photo section inside card */
.ld-gb-photo-wrap {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #f5f0e8;
}
.ld-gb-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.ld-gb-card--note .ld-gb-photo  { height: 200px; }
.ld-gb-photo-wrap:hover .ld-gb-photo { transform: scale(1.04); }

.ld-gb-photo-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(20,12,4,0.38);
  color: rgba(255,255,255,0.95);
  font-family: var(--ff-body);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.22s;
}
.ld-gb-photo-wrap:hover .ld-gb-photo-hover { opacity: 1; }

/* Note-only card decorative icon */
.ld-gb-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  font-size: 1.8rem;
  color: #C8A96E;
  background: linear-gradient(160deg, #faf6ef 0%, #f5ede0 100%);
  letter-spacing: 0.2em;
}

/* Card body */
.ld-gb-content {
  padding: 1.1rem 1.3rem 1.3rem;
}

.ld-gb-guest {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: #1a1208;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.ld-gb-message {
  font-family: var(--ff-body);
  font-size: 0.86rem;
  color: #4A3820;
  line-height: 1.65;
  margin: 0 0 0.9rem;
  font-style: italic;
}

.ld-gb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid #f5f0e8;
}

.ld-gb-time {
  font-family: var(--ff-body);
  font-size: 0.70rem;
  color: #A09080;
  letter-spacing: 0.04em;
}

.ld-gb-drive {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--ff-body);
  font-size: 0.70rem;
  color: #C8A96E;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,169,110,0.35);
  transition: color 0.15s;
  white-space: nowrap;
}
.ld-gb-drive:hover { color: #8A6830; }

/* Error state (broken image) */
.ld-gb-photo-err { display: none; }

/* Empty state */
.ld-guestbook-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: #B0A090;
}
.ld-guestbook-empty-icon {
  font-size: 2.4rem;
  color: #D8CEBC;
  margin-bottom: 0.75rem;
  letter-spacing: 0.3em;
}
.ld-guestbook-empty p {
  font-family: var(--ff-body);
  font-size: 0.88rem;
  font-style: italic;
  margin: 0;
}

/* ── Export list (side panel) ── */
.ld-export-list { display: flex; flex-direction: column; padding: 0.5rem 0; }

.ld-export-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 1.2rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f0ebe0;
  font-family: var(--ff-body);
  font-size: 0.80rem;
  color: #4A3820;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.ld-export-item:last-child { border-bottom: none; }
.ld-export-item:hover { background: #faf6ef; color: #C8A96E; }
.ld-export-item svg { flex-shrink: 0; color: #C8A96E; }

/* ── Export grid (full view) ── */
.ld-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  padding: 1.3rem;
}

.ld-export-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: #faf8f4;
  border: 1px solid #e5ddd0;
  border-radius: 12px;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  color: #4A3820;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.ld-export-big:hover { background: #f5ede0; border-color: #C8A96E; color: #8A5E10; }
.ld-export-big svg { color: #C8A96E; }

/* ── Guest Profile Drawer ── */
.ld-drawer {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
}
.ld-drawer.open .ld-drawer-bg    { opacity: 1; }
.ld-drawer.open .ld-drawer-panel { transform: translateX(0); }

.ld-drawer-bg {
  position: absolute;
  inset: 0;
  background: rgba(20,12,4,0.40);
  opacity: 0;
  transition: opacity 0.28s;
  backdrop-filter: blur(2px);
}

.ld-drawer-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(440px, 92vw);
  background: #ffffff;
  box-shadow: -8px 0 40px rgba(100,80,40,0.14);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ld-drawer-x {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #f5f0e8;
  border: 1px solid #e5ddd0;
  border-radius: 50%;
  width: 2rem; height: 2rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6A5840;
  transition: background 0.15s;
  z-index: 2;
}
.ld-drawer-x:hover { background: #ede8df; }

.ld-drawer-body { padding: 1.6rem 1.6rem 2.5rem; }

.ld-dr-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #f0ebe0;
}

.ld-dr-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4bc85, #C8A96E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}

.ld-dr-name { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 400; color: #1a1208; margin: 0; }
.ld-dr-upd  { font-family: var(--ff-body); font-size: 0.72rem; color: #A09080; margin: 0.2rem 0 0; }

.ld-dr-section { margin-bottom: 1.4rem; }

.ld-dr-section-title {
  font-family: var(--ff-body);
  font-size: 0.60rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C8A96E;
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.ld-dr-ev {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f5f0e8;
}
.ld-dr-ev:last-child { border-bottom: none; }

.ld-dr-ev-label {
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #2C1F0F;
  min-width: 150px;
}

.ld-dr-detail {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  color: #6A5840;
}

.ld-dr-note {
  font-family: var(--ff-body);
  font-size: 0.84rem;
  color: #4A3820;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
  padding: 0.75rem 1rem;
  background: #faf6ef;
  border-left: 3px solid #C8A96E;
  border-radius: 0 6px 6px 0;
}

.ld-dr-mem {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5ddd0;
  background: #fdfaf4;
}
.ld-dr-mem-photo-wrap {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #f0ebe0;
}
.ld-dr-mem-photo {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.ld-dr-mem-photo-wrap:hover .ld-dr-mem-photo { transform: scale(1.03); }
.ld-dr-mem-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,12,4,0.35);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.2s;
}
.ld-dr-mem-photo-wrap:hover .ld-dr-mem-photo-overlay { opacity: 1; }
.ld-dr-mem-photo-err { display: none !important; }
.ld-dr-mem-text {
  padding: 0.65rem 0.85rem 0.7rem;
}
.ld-dr-mem-date { font-size: 0.70rem; color: #A09080; margin-bottom: 0.25rem; }
.ld-dr-mem-msg  { font-size: 0.82rem; color: #4A3820; font-style: italic; line-height: 1.5; }

.ld-dr-change {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f5f0e8;
  font-size: 0.78rem;
}
.ld-dr-change:last-child { border-bottom: none; }
.ld-dr-change-time { color: #A09080; font-size: 0.70rem; min-width: 110px; }
.ld-dr-change-ev   { color: #4A3820; font-weight: 500; }

/* ── Add Guest Modal ── */
.ld-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: none;
  align-items: center;
  justify-content: center;
}
.ld-modal-wrap.open { display: flex; }

.ld-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(20,12,4,0.45);
  backdrop-filter: blur(2px);
}

.ld-modal {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 16px;
  width: min(460px, 92vw);
  box-shadow: 0 16px 60px rgba(100,80,40,0.18);
  overflow: hidden;
}

.ld-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid #f0ebe0;
}
.ld-modal-title {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: #1a1208;
  margin: 0;
}
.ld-modal-x {
  background: #f5f0e8; border: 1px solid #e5ddd0; border-radius: 50%;
  width: 2rem; height: 2rem; font-size: 0.8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #6A5840;
}
.ld-modal-x:hover { background: #ede8df; }

.ld-modal-body { padding: 1.4rem 1.6rem; }
.ld-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem 1.4rem;
  border-top: 1px solid #f0ebe0;
}

.ld-label {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6A5840;
  margin-bottom: 0.4rem;
}
.ld-label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9a8a78; }
.ld-modal-row  { display: flex; gap: 0.75rem; }
.ld-modal-col  { flex: 1; min-width: 0; }
.ld-input {
  width: 100%;
  padding: 0.72rem 1rem;
  background: #faf8f4;
  border: 1px solid #d8cec0;
  border-radius: 8px;
  color: #2C1F0F;
  font-family: var(--ff-body);
  font-size: 0.90rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.ld-input:focus { border-color: #C8A96E; }

.ld-checks { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; }
.ld-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-body);
  font-size: 0.86rem;
  color: #2C1F0F;
  cursor: pointer;
}
.ld-check input[type=checkbox] {
  width: 1rem; height: 1rem;
  accent-color: #C8A96E;
  cursor: pointer;
}

.ld-field-err { font-family: var(--ff-body); font-size: 0.78rem; color: #c0392b; margin: 0.75rem 0 0; }
.ld-field-ok  { font-family: var(--ff-body); font-size: 0.78rem; color: #2D6A4F; margin: 0.75rem 0 0; }

/* ── Add Guest multi-row modal ── */
.ld-modal--wide { width: min(600px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.ld-modal--wide .ld-modal-body { overflow-y: auto; flex: 1; }

.ag-group-section { margin-bottom: 1.1rem; }
.ag-group-input   { max-width: 120px; }

.ag-guest-rows { display: flex; flex-direction: column; gap: 0.85rem; }

.ag-guest-row {
  border: 1px solid #e5ddd0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: #faf8f4;
}

.ag-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.ag-row-num {
  font-family: var(--ff-body);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C8A96E;
}
.ag-row-remove {
  background: none; border: none; color: #c0392b; font-size: 0.88rem;
  cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 4px; transition: background 0.12s;
  visibility: hidden;
}
.ag-row-remove:hover { background: #fdecea; }

.ag-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}
@media (max-width: 480px) {
  .ag-row-fields { grid-template-columns: 1fr 1fr; }
}

.ag-row-field {}

.ag-row-events { margin-top: 0.1rem; }
.ag-events-label { margin-bottom: 0.35rem !important; }
.ag-row-checks {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.ag-row-checks .ld-check { font-size: 0.82rem; }

.ag-add-row-btn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.62rem;
  background: transparent;
  border: 1px dashed #C8A96E;
  border-radius: 8px;
  color: #8A6830;
  font-family: var(--ff-body);
  font-size: 0.80rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ag-add-row-btn:hover { background: #faf5e8; border-color: #b08040; }

/* ── Guest table: new column types ── */
.ld-td-group { white-space: nowrap; }
.ld-td-rel   { max-width: 120px; }
.ld-td-inv   { text-align: center; white-space: nowrap; }

.ld-group-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7A5800;
  background: #fef3d0;
  border: 1px solid #e8cc80;
  border-radius: 5px;
  padding: 0.12em 0.55em;
  white-space: nowrap;
}

.ld-rsvp-status {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 20px;
  padding: 0.15em 0.65em;
  white-space: nowrap;
}
.ld-rsvp-responded { background: #e6f4ee; color: #1e7a4a; border: 1px solid #b8dfc8; }
.ld-rsvp-pending   { background: #f5f0e4; color: #7A6030; border: 1px solid #e0d0a0; }
.ld-rsvp-declined  { background: #fdecea; color: #c0392b; border: 1px solid #f5b8b2; }

.ld-inv-dot--yes { color: #C8A96E; font-size: 0.75rem; }
.ld-inv-yes { font-size: 0.78rem; font-weight: 600; color: #4a7c59; letter-spacing: 0.02em; }
.ld-inv-no  { font-size: 0.78rem; color: #b0a090; }
.ld-rel-text     { font-size: 0.75rem; color: #6A5840; }

/* ── Pagination ── */
.ld-pagination {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.ld-page-size-label {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: #8A7A68;
  white-space: nowrap;
}
.ld-page-size-sel {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: #5C4A30;
  background: #ffffff;
  border: 1px solid #d8cec0;
  border-radius: 6px;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  margin-right: 0.4rem;
}
.ld-page-size-sel:focus { outline: none; border-color: #C8A96E; }
.ld-page-info {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: #8A7A68;
  margin-right: 0.25rem;
}
.ld-page-num {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  color: #5C4A30;
  font-weight: 600;
}
.ld-page-btn {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.28rem 0.85rem;
  border-radius: 6px;
  border: 1px solid #d8cec0;
  background: #ffffff;
  color: #5C4A30;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ld-page-btn:hover:not(:disabled) { background: #f5ede0; border-color: #C8A96E; }
.ld-page-btn:disabled { opacity: 0.38; cursor: default; }

/* ── Photo lightbox ── */
.ld-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
}
.ld-lightbox.open .ld-lightbox-bg  { opacity: 1; }
.ld-lightbox.open .ld-lightbox-box { opacity: 1; transform: scale(1); }

.ld-lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(10,6,2,0.92);
  opacity: 0;
  transition: opacity 0.22s;
}

.ld-lightbox-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.22s, transform 0.22s;
}

.ld-lightbox-x {
  position: fixed;
  top: 1.2rem; right: 1.4rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  width: 2.2rem; height: 2.2rem;
  font-size: 1rem; cursor: pointer; color: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ld-lightbox-x:hover { background: rgba(255,255,255,0.26); }

.ld-lightbox-img {
  max-width: 100%;
  max-height: calc(90vh - 5rem);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 60px rgba(0,0,0,0.7);
  display: block;
}

.ld-lightbox-link {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  color: rgba(210,185,130,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(210,185,130,0.35);
  transition: color 0.15s;
  letter-spacing: 0.08em;
}
.ld-lightbox-link:hover { color: rgba(210,185,130,1); }

/* ──────────────────────────────────────────────
   DASHBOARD — HAMBURGER & SIDEBAR OVERLAY
   ────────────────────────────────────────────── */
.ld-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  height: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-right: 0.65rem;
}
.ld-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #2C1F0F;
  border-radius: 2px;
  transition: all 0.2s;
}

.ld-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,6,2,0.45);
  z-index: 149;
}
.ld-sidebar-overlay.open { display: block; }

.ld-topbar-left {
  display: flex;
  align-items: center;
}

/* ── Mobile Add Guest FAB ── */
.ld-fab {
  display: none;
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #C8A96E;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(100,80,40,0.28);
  z-index: 200;
  transition: background 0.15s, transform 0.15s;
}
.ld-fab:hover { background: #b8904a; transform: scale(1.06); }

/* ──────────────────────────────────────────────
   DASHBOARD — MOBILE RESPONSIVE  (≤ 768px)
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar: hidden off-screen by default, slides in */
  .ld-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 230px;
    box-shadow: 2px 0 20px rgba(0,0,0,0.15);
  }
  .ld-sidebar.open { transform: translateX(0); }

  .ld-hamburger { display: flex; }
  .ld-fab       { display: flex; align-items: center; justify-content: center; }

  /* Topbar */
  .ld-topbar {
    padding: 0.7rem 0.9rem;
    flex-wrap: nowrap;
  }
  .ld-topbar-title { font-size: 1.1rem; }
  .ld-topbar-sub   { display: none; }
  .ld-topbar-right .ld-refresh-status { display: none; }
  .ld-topbar-right .ld-btn--ghost     { display: none; }

  /* Page body padding */
  .ld-page-body { padding: 0.8rem; }

  /* ── Stat section ── */
  .ld-stat-hero {
    padding: 0.6rem 0.9rem 0.5rem;
    border-radius: 14px;
    margin-bottom: 0.55rem;
  }
  .ld-stat-hero-top { margin-bottom: 0.28rem; align-items: center; }
  .ld-stat-hero-eyebrow { font-size: 0.56rem; margin-bottom: 0.15rem; }
  .ld-stat-hero-big { font-size: 1.7rem; }
  .ld-stat-hero-of  { font-size: 0.72rem; }
  .ld-stat-hero-pct { font-size: 1.45rem; }
  .ld-stat-hero-pct-sym { font-size: 0.78rem; }
  .ld-stat-progress-track { height: 3px; margin-bottom: 0.35rem; }
  .ld-stat-tag { font-size: 0.60rem; padding: 0.14em 0.52em; }

  /* Countdown banner: compact on mobile */
  .ld-countdown-banner { padding: 0.50rem 1.0rem; gap: 0.45rem; border-radius: 12px; }
  .ld-cb-n { font-size: 1.65rem; }
  .ld-cb-label { font-size: 0.82rem; }
  .ld-cb-date { font-size: 0.62rem; }

  /* Event stat cards: 3-col compact on mobile */
  .ld-ev-stat-row { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .ld-ev-stat { padding: 0.48rem 0.45rem 0.50rem; border-radius: 11px; }
  .ld-ev-stat-label { font-size: 0.46rem; margin-bottom: 0.22rem; gap: 0.18rem; }
  .ld-ev-stat-icon { width: 10px; height: 10px; }
  .ld-ev-stat-4col { margin-top: 0.22rem; }
  .ld-ev-4n { font-size: 1.25rem; }
  .ld-ev-4lbl { font-size: 0.40rem; }

  /* ── Activity feed ── */
  .ld-act-item { padding: 0.75rem 1.0rem; gap: 0.65rem; }
  .ld-act-avatar { width: 30px; height: 30px; font-size: 0.62rem; }
  .ld-act-name   { font-size: 0.84rem; }
  .ld-act-detail { font-size: 0.76rem; }
  .ld-act-time   { font-size: 0.63rem; }
  .ld-act-msg    { max-width: 180px; font-size: 0.70rem; }

  /* ── Split: single column ── */
  .ld-split { grid-template-columns: 1fr; gap: 0.7rem; }

  /* ── Cards ── */
  .ld-card { margin-bottom: 0.7rem; border-radius: 14px; }
  .ld-card-head { flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 1.0rem 0.65rem; }
  .ld-card-foot { padding: 0.65rem 1.0rem; }
  .ld-card-title { font-size: 0.98rem; }
  .ld-card-controls { flex-wrap: wrap; }

  /* Hide table, show mobile cards */
  .ld-table-scroll { display: none; }
  .ld-guest-cards  { display: block; padding: 0.75rem 0.9rem; }

  /* Memory grid: 1 column */
  .ld-guestbook-grid { grid-template-columns: 1fr; }

  /* Changes table → card-like on mobile */
  .ld-table.ld-changelog-table tbody tr {
    display: block;
    border: 1px solid rgba(200,169,110,0.18);
    border-radius: 10px;
    margin: 0.45rem 1.0rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
  }
  .ld-table.ld-changelog-table thead { display: none; }
  .ld-table.ld-changelog-table td {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border: none;
    font-size: 0.78rem;
  }
  .ld-table.ld-changelog-table td::before {
    content: attr(data-label);
    font-size: 0.60rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8A7A68;
    font-weight: 600;
    min-width: 65px;
    flex-shrink: 0;
  }
  .ld-table.ld-changelog-table td[data-label=""]::before { display: none; }

  /* Drawer: full screen on mobile */
  .ld-drawer-panel {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  /* Modals: full width */
  .ld-modal { width: calc(100vw - 2rem); max-width: 100%; margin: 1rem; }

  /* Guestbook header */
  .ld-guestbook-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .ld-mem-filters { flex-wrap: wrap; }

  /* Memory sidebar: hidden on mobile (use full Memories page) */
  .ld-split-side { display: none; }

  /* Memory row: compact thumbnail on mobile */
  .ld-mem-row { padding: 0.75rem 1.0rem; gap: 0.7rem; }
  .ld-mem-row-thumb { width: 80px; height: 80px; border-radius: 8px; }
  .ld-mem-row-no-photo { width: 80px; height: 80px; border-radius: 8px; font-size: 1rem; }

  /* RSVP controls: stack on mobile */
  .ld-rsvps-controls { gap: 0.4rem; }
  .ld-search  { min-width: 0; width: 100%; max-width: 100%; }
  .ld-select  { width: 100%; }
}

/* ── Very small screens (≤ 380px) ── */
@media (max-width: 380px) {
  .ld-stat-hero-big { font-size: 1.55rem; }
  .ld-stat-hero-of  { font-size: 0.68rem; }
  .ld-stat-hero-pct { font-size: 1.3rem; }
  .ld-ev-stat           { padding: 0.36rem 0.38rem 0.38rem; }
  .ld-ev-stat-label     { font-size: 0.40rem; margin-bottom: 0.18rem; }
  .ld-ev-4n             { font-size: 1.05rem; }
  .ld-ev-4lbl           { font-size: 0.36rem; }
}

/* ──────────────────────────────────────────────
   PRINT
   ────────────────────────────────────────────── */
@media print {
  .page { display: none !important; }
  #page-confirmation { display: block !important; animation: none !important; }
  .confetti-box, .conf-actions, .conf-contact, #conf-steps, .gallery-section { display: none !important; }
  .site-video-bg, .page-overlay { display: none !important; }
  body { background: white; color: black; }
  .conf-wrap { color: black; }
}

/* ──────────────────────────────────────────────
   DASHBOARD v17 — RSVPs view + Settings + Invite check
   ────────────────────────────────────────────── */

/* Invite check cell — ✓ or — */
.ld-inv-check {
  color: #2D6A4F;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Invited badges — event-colored, subtle and elegant */
.ld-inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 20px;
  padding: 0.16em 0.60em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ld-inv-badge--meh {
  background: #eef6f0;
  color: #1d6640;
  border-color: rgba(29,102,64,0.18);
}
.ld-inv-badge--wed {
  background: #fdf5e6;
  color: #7a5210;
  border-color: rgba(200,169,110,0.28);
}
.ld-inv-badge--rec {
  background: #f0edf8;
  color: #5c3a88;
  border-color: rgba(92,58,136,0.20);
}
.ld-inv-badge--gold {
  background: rgba(200,169,110,0.12);
  color: #7A5010;
  border-color: rgba(200,169,110,0.32);
}

/* Quick-filter pill buttons above table */
.ld-quick-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.5rem 0.60rem;
  border-bottom: 1px solid rgba(200,169,110,0.10);
  background: #fdfaf5;
}
.ld-qf-btn {
  font-family: var(--ff-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.24em 0.80em;
  border-radius: 20px;
  border: 1px solid rgba(200,169,110,0.25);
  background: transparent;
  color: #6A5840;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ld-qf-btn:hover { background: rgba(200,169,110,0.10); border-color: rgba(200,169,110,0.40); color: #3C2C10; }
.ld-qf-btn.active {
  background: #2C1F0F;
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

/* Luxury RSVP stat cards */
.ld-stats-bar {
  display: flex;
  flex-direction: column;
  gap: 0.70rem;
  padding: 1.25rem 1.5rem 1.10rem;
  border-bottom: 1px solid rgba(200,169,110,0.12);
  background: #FDFAF5;
}
.ld-rsc-row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.ld-rsc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid rgba(200,169,110,0.18);
  border-top: 3px solid rgba(200,169,110,0.45);
  background: #FDFAF2;
  box-shadow: 0 2px 14px rgba(80,55,15,0.05);
  transition: border-top-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.ld-rsc:hover {
  border-top-color: #C8A96E;
  box-shadow: 0 4px 20px rgba(80,55,15,0.10);
  transform: translateY(-1px);
}
.ld-rsc--active {
  background: linear-gradient(180deg, #F8F0DE 0%, #FAF7F0 100%);
  border-top-color: #C8A96E;
  border-color: rgba(200,169,110,0.35);
  box-shadow: 0 3px 16px rgba(130,95,30,0.12);
}
.ld-rsc--primary {
  min-width: 120px;
  padding: 0.90rem 0.75rem 0.85rem;
  gap: 0.18rem;
}
.ld-rsc--secondary {
  min-width: 78px;
  padding: 0.65rem 0.50rem 0.60rem;
  gap: 0.10rem;
}
.ld-rsc-icon {
  color: #C8A96E;
  line-height: 1;
  opacity: 0.80;
}
.ld-rsc-num {
  font-family: var(--ff-display);
  font-weight: 400;
  color: #1a1208;
  line-height: 1;
}
.ld-rsc--primary .ld-rsc-num {
  font-size: 2.20rem;
  margin-top: 0.06rem;
}
.ld-rsc--secondary .ld-rsc-num {
  font-size: 1.40rem;
  margin-top: 0.04rem;
}
.ld-rsc-pct {
  font-family: var(--ff-display);
  font-size: 0.88rem;
  font-style: italic;
  color: #C8A96E;
  line-height: 1;
  margin-top: 0.05rem;
}
.ld-rsc-lbl {
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9A8870;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.ld-rsc--primary .ld-rsc-lbl {
  font-size: 0.60rem;
  margin-top: 0.18rem;
}
.ld-rsc--secondary .ld-rsc-lbl {
  font-size: 0.54rem;
  margin-top: 0.10rem;
}
.ld-btn-export {
  font-family: var(--ff-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.38rem 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(200,169,110,0.40);
  background: transparent;
  color: #6A5840;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ld-btn-export:hover {
  background: rgba(200,169,110,0.10);
  border-color: rgba(200,169,110,0.65);
  color: #3C2C10;
}

/* Activity feed attending sub-line */
.ld-act-attending {
  font-size: 0.72rem;
  color: #7A5820;
  font-weight: 500;
  margin-top: 0.12rem;
}

/* RSVPs table specific cells */
.ld-td-dietary { max-width: 140px; }
.ld-td-message { max-width: 200px; }
.ld-msg-preview {
  display: block;
  font-size: 0.78rem;
  color: #5a4a38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
  cursor: default;
}

/* Settings form */
.ld-settings-form {
  padding: 1.5rem 1.5rem 0.5rem;
}
.ld-settings-group {
  margin-bottom: 1rem;
}
.ld-settings-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* RSVP edit modal — textarea field */
#er-message {
  width: 100%;
  resize: vertical;
  min-height: 70px;
  font-family: var(--ff-body);
  font-size: 0.88rem;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid #DDD3C8;
  border-radius: 8px;
  background: #FDFAF5;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
}
#er-message:focus { border-color: #C8A96E; }

/* RSVPs view panel header controls */
.ld-rsvps-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════
   RSVP — EDITORIAL REFINEMENTS
   Minimal · airy · luxurious
   ════════════════════════════════════════════════ */

/* Event meta (time / venue): softer and smaller */
.rsvp-ev-body-meta {
  font-size: 0.78rem;
  color: rgba(42, 32, 12, 0.50);
  padding: 0.70rem 1.05rem 0.45rem;
  gap: 0.18rem;
}
.rsvp-ev-meta-time,
.rsvp-ev-meta-venue  { color: rgba(42, 32, 12, 0.46); }
.rsvp-ev-venue-name  { font-weight: 400; }
.rsvp-ev-body-addr   { font-size: 0.66rem; color: rgba(42, 32, 12, 0.36); }
.rsvp-ev-body-sep    { color: rgba(42, 32, 12, 0.22); }

/* Guest rows: generous vertical breathing room */
.rsvp-guest-row { padding: 0.95rem 1.1rem; }

/* Attend pills: lighter borders, softer unselected state */
.attend-pill {
  padding: 0.52rem 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  background: rgba(253, 250, 244, 0.72);
  border: 1px solid rgba(185, 148, 50, 0.15);
  color: rgba(50, 38, 12, 0.52);
}
.attend-pill.yes-active {
  background: rgba(200, 169, 110, 0.88);
  border-color: rgba(185, 148, 50, 0.60);
  font-weight: 500;
}
.attend-pill--sm {
  padding: 0.18rem 0.62rem;
  font-size: 0.64rem;
}

/* Extras (henna / song): quieter secondary appearance */
.inv-extras {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  gap: 0.38rem;
}
.inv-field-label {
  font-size: 0.56rem;
  color: rgba(50, 38, 12, 0.52);
  margin-bottom: 0.28rem;
}
.mini-pill {
  padding: 0.36rem 0.82rem;
  min-height: 34px;
  font-size: 0.68rem;
  border-color: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.34);
}

/* Calendar / Directions: more room above and below */
.rsvp-event-hdr-links {
  padding: 0.60rem 1.05rem 1.0rem;
  gap: 0.55rem;
}

/* ════════════════════════════════════════════════
   MOBILE UX POLISH
   ════════════════════════════════════════════════ */

/* ── Hero: responsive splash positioning (portrait only)
   Names in the sky area so they don't cover the couple's faces.
   Desktop/tablet (≥ 768px) inherits the base 48vh.
   Landscape is handled by the existing max-height:500px rule above. ── */
@media (max-width: 767px) and (orientation: portrait) {
  .hero-viewport {
    padding-top: calc(14dvh + env(safe-area-inset-top, 0));
  }
  /* "Tap to Enter" moves lower so it doesn't overlap the couple */
  #hero-enter-prompt { bottom: 6%; }
}

/* iPhone SE, compact portrait phones, or any portrait phone ≤ 680px tall */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 680px) {
  .hero-viewport {
    padding-top: calc(12dvh + env(safe-area-inset-top, 0));
  }
}

/* ── Hero entered: names stay high in sky, search card anchored to bottom ── */
@media (max-width: 767px) and (orientation: portrait) {
  #page-hero.hero-entered .hero-viewport {
    padding-top: calc(10dvh + env(safe-area-inset-top, 0));
  }
  /* hero-main stretches full remaining height so margin-top:auto works */
  #page-hero.hero-entered .hero-main {
    flex: 1;
    padding-bottom: calc(8dvh + env(safe-area-inset-bottom, 0));
  }
  /* Search card floats to the bottom of the available space */
  #page-hero.hero-entered .hero-search-card {
    margin-top: auto;
  }
}

@media (max-width: 767px) and (orientation: portrait) and (max-height: 680px) {
  #page-hero.hero-entered .hero-viewport {
    padding-top: calc(8dvh + env(safe-area-inset-top, 0));
  }
  #page-hero.hero-entered .hero-main {
    padding-bottom: calc(5dvh + env(safe-area-inset-bottom, 0));
  }
}

@media (max-width: 767px) {
  /* Attend buttons: side-by-side ~48% each, 48px min-height */
  #page-rsvp .rsvp-guest-pills {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
  }
  #page-rsvp .attend-pill--sm {
    flex: 1;
    width: auto;
    min-height: 48px;
    text-align: center;
    padding: 0.44rem 0.25rem;
    font-size: 0.66rem;
    box-sizing: border-box;
  }

  /* Henna pills: comfortably tappable on mobile */
  .mini-pill {
    padding: 0.44rem 1.0rem;
    min-height: 44px;
    min-width: 72px;
    font-size: 0.70rem;
  }
  .mini-pills { flex-wrap: wrap; gap: 0.5rem; }

  /* Gallery: slightly more breathing room */
  .gallery-grid { gap: 0.7rem; }
}

@media (max-width: 430px) {
  .gallery-grid { gap: 0.55rem; }
}