/* ==========================================================================
   The Big Reveal — Gender Reveal Invitation Card
   Ivory stationery, a sealed cream envelope with a split blue-and-pink wax
   seal, drifting confetti, gold hairlines.

   LAYOUT: natural scrolling — every section is a stacked "scene" in normal
   document flow (no app shell, no panel switching). Fixed chrome is limited
   to the sticky header, the mobile burger sheet, the bottom dock and the
   reading-progress bar; their geometry derives from the tokens below so
   anchor offsets and the one-screen cover cap never drift from the real
   chrome heights.

   Customize the whole look by editing the palette below — every component
   reads from these variables.
   ========================================================================== */

:root {
  /* Palette — warm ivory paper, powder blue, blush pink, antique gold */
  --blue-50:   #f0f4fe;
  --blue-100:  #e3ebfc;
  --blue-200:  #c7d6f9;
  --blue-300:  #a3bcf4;
  --blue-500:  #4d7cf6;
  --pink-50:   #fdf1f6;
  --pink-100:  #fbe4ee;
  --pink-200:  #f6ccdd;
  --pink-300:  #f0aaca;
  --pink-500:  #ec4899;
  --ink:       #37416e;
  --ink-soft:  #5a6490;
  --gold:      #b9933c;
  --cream:     #fffaf3;
  --paper:     #fffdf9;
  --envelope:  #fbf0e2;
  --envelope-flap: #fff8ec;
  --error:     #bf4a55;

  /* Type */
  --font-script:  'Great Vibes', cursive;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rhythm */
  --radius-lg: 26px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 24px 60px -32px rgba(55, 65, 110, 0.45);
  --shadow-card: 0 14px 34px -20px rgba(55, 65, 110, 0.35);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── GEOMETRY TOKENS ────────────────────────────────────────────────────
     --header-h is THE header height (safe-area included) — the header box,
     the cover cap, scroll-padding and scroll-margin all derive from it.
     Real chrome must never drift from this token. */
  --header-h: calc(56px + env(safe-area-inset-top, 0px));
  --anchor-gap: 10px;                       /* breathing room under the header */
  --dock-h: 54px;                           /* visual dock height */
  --dock-space: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 20px);
}

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

html, body { margin: 0; padding: 0; }

/* Anchors land their target just below the header — token-derived. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--anchor-gap));
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 6%, rgba(77, 124, 246, 0.10), transparent 34%),
    radial-gradient(circle at 86% 96%, rgba(236, 72, 153, 0.10), transparent 38%),
    linear-gradient(180deg, var(--pink-50), var(--blue-50));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

img, svg, video { display: inline-block; vertical-align: middle; }

button { font: inherit; cursor: pointer; }

/* Custom document scrollbar — powder-blue thumb on ivory (palette-suited).
   The lightbox and the cover safety valve get their own slimmer variant. */
html { scrollbar-width: thin; scrollbar-color: var(--blue-200) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue-200), var(--pink-200));
  border-radius: 8px;
  border: 2px solid rgba(255, 250, 243, 0.9);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--blue-300), var(--pink-300)); }

:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- reading-progress bar ----------
   A 3px blue→pink fill pinned to the header's bottom edge. Filled by
   main.js; without JS it simply stays empty. */
.scroll-progress {
  position: fixed;
  top: calc(var(--header-h) - 3px);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-500), var(--pink-500));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 1px 6px rgba(77, 124, 246, 0.5);
}

/* ==========================================================================
   HEADER — brand · desktop section pills · burger (mobile)
   ========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);            /* enforced by the token */
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 253, 249, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(185, 147, 60, 0.3);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
/* Scrolled state (main.js toggles .is-scrolled on <body>) */
.is-scrolled .app-header {
  background: rgba(255, 253, 249, 0.95);
  box-shadow: 0 10px 30px -18px rgba(55, 65, 110, 0.55);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-script);
  font-size: 1.42rem;
  line-height: 1;
  color: var(--pink-500);
  text-decoration: none;
  white-space: nowrap;
}
.app-header__mark { flex: 0 0 auto; }

.site-nav { display: flex; gap: 6px; }

.nav-pill {
  appearance: none;
  touch-action: manipulation;
  display: inline-block;
  border: 1px solid rgba(90, 100, 144, 0.35);
  background: transparent;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 100px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease);
}
.nav-pill:hover { background: var(--blue-50); }
.nav-pill.is-active,
.nav-pill[aria-current="page"] {
  background: linear-gradient(135deg, var(--blue-500), var(--pink-500));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(77, 124, 246, 0.75);
}
.nav-pill:active { transform: scale(0.97); }

/* Burger — mobile only (<900px); hidden entirely without JS. */
.nav-burger {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(185, 147, 60, 0.55);
  border-radius: 12px;
  background: rgba(255, 250, 243, 0.85);
  color: var(--ink);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.nav-burger:active { transform: scale(0.94); }
.nav-burger__close { display: none; }
.nav-burger[aria-expanded="true"] .nav-burger__open { display: none; }
.nav-burger[aria-expanded="true"] .nav-burger__close { display: block; }

@media (max-width: 899.98px) {
  .site-nav { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 380px) {
  .app-header__brand { font-size: 1.22rem; }
  .app-header { padding-left: 12px; padding-right: 12px; }
}

/* ---------- mobile burger sheet ----------
   Slides down from under the header over a dimmed backdrop; filled by
   main.js with one labelled row per DOM section. Hidden without JS. */
.menu-backdrop {
  position: fixed;
  inset: 0;
  /* Above the dock (46): the open sheet is modal — taps anywhere outside
     it, including on the dock, dismiss the menu. Below the sheet (48). */
  z-index: 47;
  background: rgba(55, 65, 110, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}
.menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 48;
  display: flex;
  flex-direction: column;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 249, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(185, 147, 60, 0.4);
  box-shadow: 0 26px 44px -24px rgba(55, 65, 110, 0.55);
  transform: translateY(-108%);
  visibility: hidden;
  transition: transform 0.32s var(--ease), visibility 0s linear 0.32s;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.is-open { animation: sheet-in 0.32s var(--ease); }
  @keyframes sheet-in {
    from { opacity: 0.4; }
    to   { opacity: 1; }
  }
}

.menu-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 12px;
  border: 0;
  border-bottom: 1px solid rgba(77, 124, 246, 0.16);
  background: transparent;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-row:hover, .menu-row:focus-visible { background: var(--blue-50); }
.menu-row.is-active {
  color: var(--pink-500);
  background: var(--pink-50);
}
.menu-row.is-active svg { stroke: var(--pink-500); }

/* ---------- bottom dock ----------
   Frosted pill of section chips, built by main.js from the DOM sections.
   Scroll-spy lights the active chip; nearest-above wins between sections.
   Hidden without JS; body padding reserves its space. */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%);
  z-index: 46;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: calc(100vw - 20px);
  padding: 5px;
  background: rgba(255, 253, 249, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(185, 147, 60, 0.5);
  border-radius: 100px;
  box-shadow: 0 18px 38px -18px rgba(55, 65, 110, 0.55);
  overflow-x: auto;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }

.dock-chip {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 0 auto;
  min-width: 46px;
  padding: 7px 10px 6px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.15s var(--ease);
}
.dock-chip svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-chip:hover { color: var(--ink); background: var(--blue-50); }
.dock-chip:active { transform: scale(0.94); }
.dock-chip.is-active {
  background: linear-gradient(135deg, var(--blue-500), var(--pink-500));
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(77, 124, 246, 0.8);
}
@media (max-width: 374.98px) {
  .dock-chip { padding: 7px 7px 6px; letter-spacing: 0.05em; }
}
/* Tight phones: icon-only chips (labels stay in the burger sheet, and
   every chip carries its aria-label). Keeps the dock inside 360px. */
@media (max-width: 419.98px) {
  .dock-chip span { display: none; }
  .dock-chip { min-width: 38px; padding: 8px 9px 7px; }
}

/* ==========================================================================
   SCENES — sections stacked in natural flow
   ========================================================================== */
.scene {
  /* Anchor alignment is owned by html's token-derived scroll-padding-top
     (single source of truth — adding scroll-margin here would double the
     offset for scrollIntoView). Every scene fills at least one screen so
     jumps always have room to land their target just below the header. */
  outline: none;
  min-height: calc(100dvh - var(--header-h));
  padding:
    clamp(28px, 5dvh, 56px)
    clamp(14px, 3.5vw, 32px)
    clamp(28px, 5dvh, 56px);
}
/* Reserve room for the dock so end-of-page content is never covered. */
.scene:last-of-type { padding-bottom: calc(clamp(28px, 5dvh, 56px) + var(--dock-h) * 0.4); }

main { padding-bottom: 0; }
body { padding-bottom: var(--dock-space); }   /* fixed-chrome reservation */

/* --------------------------------------------------------------------------
   COVER — exactly one screen: capped at (viewport − header), centred.
   Fluid sizes use dvh clamps that stop growing past ~700px-tall viewports.
   -------------------------------------------------------------------------- */
.scene--cover {
  height: calc(100dvh - var(--header-h));
  padding: clamp(12px, 2.5dvh, 28px) clamp(14px, 3.5vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                 /* trimmed content never spills visibly */
}
/* Last-resort safety valve for extreme viewports (toggled by main.js after
   every decoration is already hidden and the layout squeezed). */
.scene--cover.cover-valve { overflow-y: auto; scrollbar-width: none; }
.scene--cover.cover-valve::-webkit-scrollbar { display: none; }

.card--cover {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(170deg, var(--paper) 0%, var(--cream) 60%, #fdf5f0 100%);
  border: 1px solid rgba(185, 147, 60, 0.5);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 3.6dvh, 44px) clamp(18px, 5vw, 46px);
  text-align: center;
  overflow: hidden;
}
/* Squeeze tier — main.js adds it when even the trim list wasn't enough. */
.card--cover.cover-squeeze { padding-block: clamp(10px, 1.8dvh, 20px); }

/* double frame: gold hairline outer (border above) + dashed blue-pink inner */
.card--cover::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(77, 124, 246, 0.4);
  border-radius: 6px;
  pointer-events: none;
}

/* Elements visually hidden by the cover-fit routine — present in the DOM,
   restored in print. Never a hard delete. */
.fit-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* corner confetti clusters (decorative) */
.card__corner { position: absolute; width: clamp(40px, min(11vw, 6dvh), 72px); height: auto; opacity: 0.9; z-index: 1; }
.card__corner--tl { top: 14px; left: 12px; }
.card__corner--br { bottom: 14px; right: 12px; transform: rotate(180deg); }

/* personalized greeting (private share links; main.js fills + shows it) */
.guest-greeting {
  position: relative;
  z-index: 2;
  margin: 0 0 4px;
  font-family: var(--font-script);
  font-size: clamp(1.4rem, min(5.4vw, 3.4dvh), 1.9rem);
  color: var(--gold);
}

/* ---------- sealed envelope + wax seal ---------- */
.card__envelope-wrap {
  position: relative;
  z-index: 2;
  /* dvh term stops growth around ~700px-tall viewports */
  width: clamp(118px, min(46vw, 31dvh), 236px);
  margin: 0 auto;
}
.card__envelope {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(55, 65, 110, 0.22));
}
.card__seal {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 33%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--blue-500) 0 50%, var(--pink-500) 50% 100%);
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 5px rgba(185, 147, 60, 0.18),
    0 10px 22px -10px rgba(55, 65, 110, 0.6);
  display: grid;
  place-items: center;
  overflow: hidden; /* long host text wraps and clips AT the seal edge instead of spilling onto the envelope */
}
.card__seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
}
.card__seal-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, min(7.4vw, 5dvh), 2.6rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(55, 65, 110, 0.45);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere; /* a name longer than the seal wraps inside the circle */
  padding: 0 4px;
}

/* soft confetti drifting around the envelope (gated below) */
.confetti {
  position: absolute;
  inset: -18% -6%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.confetti span {
  position: absolute;
  top: 42%;               /* hover around the envelope, swaying up and down */
  left: var(--x);         /* % of the envelope-wrap width — spreads the pieces */
  width: calc(7px * var(--s, 1));
  height: calc(11px * var(--s, 1));
  background: var(--c);
  border-radius: var(--shape, 2px);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .confetti span {
    animation: confetti-float var(--dur, 9s) ease-in-out var(--d, 0s) infinite;
  }
  @keyframes confetti-float {
    0%   { transform: translate3d(0, 10px, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { transform: translate3d(var(--dx), -16px, 0) rotate(200deg); opacity: 0.9; }
    88%  { opacity: 0.9; }
    100% { transform: translate3d(0, 14px, 0) rotate(420deg); opacity: 0; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .card__seal { animation: seal-bob 4.5s ease-in-out infinite; }
  .card__seal-letter { animation: seal-in 0.7s var(--ease) 0.15s both; }
  @keyframes seal-bob {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 6px)); }
  }
  @keyframes seal-in {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ---------- cover headline ---------- */
.card__banner {
  margin: clamp(10px, 2.4dvh, 24px) auto 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--pink-500);
  position: relative;
  z-index: 2;
}
.card__banner::before,
.card__banner::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 147, 60, 0.7));
  margin: 0 12px 3px;
}
.card__banner::after { background: linear-gradient(90deg, rgba(185, 147, 60, 0.7), transparent); }

.card__title { margin: clamp(6px, 1.6dvh, 16px) 0 0; }

.card__script {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2rem, min(11vw, 7.4dvh), 4rem);
  line-height: 1.1;
  color: var(--pink-500);
}
.card__caps {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.98rem, min(4.6vw, 2.9dvh), 1.6rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: clamp(4px, 1dvh, 8px);
}

.card__sub {
  margin: clamp(6px, 1.4dvh, 12px) auto 0;
  max-width: 28em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.92rem, min(3.6vw, 2.3dvh), 1.14rem);
  color: var(--ink-soft);
}

.card__name {
  margin: clamp(8px, 2dvh, 18px) 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.7rem, min(9vw, 6dvh), 3.2rem);
  line-height: 1.15;
  color: var(--blue-500);
  overflow-wrap: anywhere; /* long names wrap instead of overflowing */
}

/* date glance chip on the cover */
.date-chip {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: clamp(10px, 2.2dvh, 18px) auto 0;
  padding: 7px 18px;
  border: 1px solid rgba(185, 147, 60, 0.55);
  border-radius: 100px;
  background: rgba(255, 250, 243, 0.75);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* scroll cue — gentle invitation to continue down the page */
.scroll-cue {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: clamp(12px, 2.4dvh, 20px) auto 0;
  padding: 6px 14px;
  border-radius: 100px;
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.scroll-cue:hover { color: var(--pink-500); background: var(--pink-50); }
.scroll-cue svg { animation: cue-nudge 2.4s ease-in-out infinite; }
@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* ==========================================================================
   DETAILS SCENE — ledger, Add to Calendar, foot, media row, film
   ========================================================================== */
.panel-head {
  max-width: 560px;
  margin: 0 auto clamp(18px, 4vw, 30px);
  text-align: center;
}
.panel-head__script {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(2rem, 8vw, 2.8rem);
  color: var(--pink-500);
  line-height: 1.1;
}
.panel-head__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.panel-head__intro {
  margin: 8px auto 0;
  max-width: 34em;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.card--ledger {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(170deg, var(--paper) 0%, var(--cream) 60%, #fdf5f0 100%);
  border: 1px solid rgba(185, 147, 60, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 4.5vw, 40px) clamp(18px, 5vw, 46px);
  text-align: center;
}

/* details ledger */
.card__ledger {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 400px;
  text-align: left;
}

.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(77, 124, 246, 0.3);
  min-width: 0;
}
.ledger-row--last { border-bottom: 0; }

.ledger-row dt {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.ledger-row dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.2vw, 1.06rem);
  color: var(--ink);
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere; /* long venue names wrap safely */
}

/* An emptied value hides its whole row (dt + dd together — no orphan
   labels); an all-empty ledger collapses via .is-empty below. */
.ledger-row.is-empty,
.ledger-row dd:empty { display: none; }
.ledger-row.is-empty + .ledger-row:not(.is-empty):not(:first-child) { border-top: 1px solid rgba(77, 124, 246, 0.3); }
.card__ledger.is-empty { display: none; }

/* Add to Calendar */
.calendar-actions {
  margin-top: clamp(14px, 3vw, 22px);
  display: flex;
  justify-content: center;
}
.btn--calendar {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(185, 147, 60, 0.65);
  border-radius: 100px;
  background: rgba(255, 250, 243, 0.85);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.15s var(--ease), box-shadow 0.22s var(--ease);
}
.btn--calendar:hover {
  background: linear-gradient(135deg, var(--blue-500), var(--pink-500));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(77, 124, 246, 0.7);
}
.btn--calendar:active { transform: scale(0.97); }

.card__foot {
  margin: clamp(14px, 3vw, 20px) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  color: var(--ink-soft);
}

/* media row — flyer + keepsake side by side where there is room */
.media-row {
  max-width: 680px;
  margin: clamp(22px, 4.5vw, 36px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(14px, 3vw, 24px);
  align-items: start;
}
.media-row > .photo-item { margin: 0; }
@media (max-width: 599.98px) {
  .media-row { grid-template-columns: 1fr; max-width: 440px; }
}

/* keepsake photo (optional) */
.card__photo-caption {
  margin: 8px 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  line-height: 1.1;
  color: var(--pink-500);
  text-align: center;
}

/* ==========================================================================
   FLYER / BANNER FEATURE — optional event poster
   ========================================================================== */
.card__flyer { position: relative; }
.card__flyer-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(185, 147, 60, 0.55);
  border-radius: var(--radius-sm);
  background: var(--blue-50); /* graceful while loading / if the file is missing */
  box-shadow: var(--shadow-card);
  filter: sepia(0.08) saturate(0.92); /* harmonise with the ivory paper */
}
.card__flyer-caption {
  margin: 8px 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  line-height: 1.1;
  color: var(--blue-500);
  text-align: center;
}

/* keepsake img shares the flyer's frame treatment */
.card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(185, 147, 60, 0.55);
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  box-shadow: var(--shadow-card);
  filter: sepia(0.08) saturate(0.92);
}

/* ==========================================================================
   VIDEO FEATURE — the film (see README "Video")
   Placeholder mode ships a small offline-safe clip (placeholder.mp4); a
   real YouTube/Vimeo URL takes over as an embed. Empty value ⇒ whole block
   hidden (.is-empty, kept from the previous release).
   ========================================================================== */
.card__video {
  max-width: 560px;
  margin: clamp(22px, 4.5vw, 36px) auto 0;
}
.card__video-script {
  margin: 0 0 10px;
  font-family: var(--font-script);
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  line-height: 1.1;
  color: var(--pink-500);
  text-align: center;
}
.card__video-figure { margin: 0; }

.photo-link { display: block; }

.card__video-frame-box,
.card__video .photo-zoom {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(185, 147, 60, 0.55);
  box-shadow: var(--shadow-card);
  background:
    radial-gradient(circle at 30% 40%, rgba(77, 124, 246, 0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(236, 72, 153, 0.16), transparent 55%),
    linear-gradient(160deg, var(--blue-100), var(--pink-100));
}
.card__video-inline {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
.card__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}
/* Shown while data-video-src is empty (or while the film loads) */
.card__video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  background: linear-gradient(160deg, var(--blue-100), var(--pink-100));
}
.card__video-placeholder p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.85rem, 3vw, 1rem);
  color: var(--ink-soft);
}
.card__video-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%234d7cf6'/%3E%3C/svg%3E")
    center / 24px no-repeat;
  box-shadow: 0 10px 24px -8px rgba(55, 65, 110, 0.5);
}
.card__video-open {
  display: inline-block;
  margin-top: 9px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card__video-open:hover { color: var(--pink-500); }

/* While no film URL exists at all the whole block hides: main.js re-adds
   .is-empty when the resolved value is blank, so an emptied render never
   shows an empty frame or designer copy. */
.card__video.is-empty { display: none; }

/* ==========================================================================
   MOMENTS GALLERY (optional photo feature)
   ========================================================================== */
.gallery-section { max-width: 640px; margin: 0 auto; }

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 18px);
}

.gallery-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, var(--paper), var(--cream));
  border: 1px solid rgba(185, 147, 60, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.gallery-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--blue-50); /* graceful while loading / if the file is missing */
  filter: sepia(0.08) saturate(0.92); /* harmonise with the ivory paper */
  transition: transform 0.45s var(--ease);
}
.gallery-card:hover .gallery-card__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .gallery-card:hover .gallery-card__img { transform: none; }
}
.gallery-card__caption {
  padding: 10px 10px 12px;
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 1.15;
  color: var(--pink-500);
  text-align: center;
}

/* ==========================================================================
   FREE PAGE — optional free-text blocks (title + content + optional photo)
   ========================================================================== */
.free-section { max-width: 640px; margin: 0 auto; }

.free-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 3vw, 22px);
}

.free-item { margin: 0; }

.free-card {
  background: linear-gradient(170deg, var(--paper), var(--cream));
  border: 1px solid rgba(185, 147, 60, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(16px, 3.5vw, 26px);
  text-align: left;
}

.free-card__media {
  margin: 0 0 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(185, 147, 60, 0.55);
  box-shadow: var(--shadow-card);
}
.free-card__media .photo-zoom { display: block; border-radius: inherit; }
.free-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--blue-50); /* graceful while loading / if the file is missing */
  filter: sepia(0.08) saturate(0.92); /* harmonise with the ivory paper */
}

.free-title {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.15;
  color: var(--blue-500);
}
.free-content {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.4vw, 1.08rem);
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-line; /* host line breaks from the textarea render as breaks */
  overflow-wrap: anywhere;
}

/* A block left without its optional photo / heading / content collapses
   cleanly instead of leaving an empty frame (the platform removes the img
   element itself; these :empty rules are a defensive fallback). */
.free-card__media:empty,
.free-title:empty,
.free-content:empty { display: none; }
.free-card__media:empty + .free-title { margin-top: 0; }

/* ==========================================================================
   RSVP FORM
   ========================================================================== */
.rsvp-wrap { max-width: 560px; margin: 0 auto; }

.rsvp-form {
  background: linear-gradient(170deg, var(--paper), var(--cream));
  border: 1px solid rgba(77, 124, 246, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 4vw, 34px);
}

.rsvp-fieldset {
  border: 0;
  margin: 0 0 22px;
  padding: 0;
}
.rsvp-fieldset__legend {
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(185, 147, 60, 0.7);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }

.form-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-group__hint { font-weight: 400; color: var(--ink-soft); opacity: 0.85; }

.form-control {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-control::placeholder { color: rgba(55, 65, 110, 0.42); }
.form-control:hover { border-color: var(--blue-200); }
.form-control:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(77, 124, 246, 0.22);
}
textarea.form-control { resize: vertical; min-height: 84px; }

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6490' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* error messages — the platform fills these spans */
.error {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--error);
  min-height: 0;
}
.error:empty { display: none; }

/* submit */
.btn {
  appearance: none;
  border: 0;
  border-radius: 100px;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-500), var(--pink-500));
  box-shadow: 0 14px 26px -12px rgba(77, 124, 246, 0.8);
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 16px 30px -12px rgba(236, 72, 153, 0.9); }
.btn:active { transform: scale(0.98); }

/* loading — hidden by default; the platform toggles visibility while submitting */
.loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.loading__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--blue-100);
  border-top-color: var(--pink-500);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   GUESTBOOK
   ========================================================================== */
.guestbook-section { max-width: 560px; margin: 0 auto; }

/* The platform injects the guestbook UI into .guestbook-body */
.guestbook-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

/* ==========================================================================
   CLICKABLE MEDIA — photos and the film open the lightbox
   ========================================================================== */
.photo-zoom {
  position: relative;
  cursor: zoom-in;
}
.photo-zoom img { display: block; }
.photo-zoom::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(55, 65, 110, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 17px no-repeat;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.photo-zoom:hover::after,
.photo-zoom:focus::after,
.photo-zoom:focus-visible::after {
  opacity: 1;
  transform: scale(1.06);
}
/* touch users never hover — keep the affordance visible so it is discoverable */
@media (hover: none) {
  .photo-zoom::after { opacity: 1; }
}

/* Config flag OFF (window.MEDIA_ZOOM = false): main.js strips the links'
   behaviour; these rules remove every leftover click affordance. */
.no-media-zoom .photo-link { cursor: auto; }
.no-media-zoom .photo-zoom { cursor: auto; }
.no-media-zoom .photo-zoom::after { display: none; }
.no-media-zoom .card__video .photo-zoom { aspect-ratio: auto; border: 0; box-shadow: none; background: none; border-radius: 0; }

/* ==========================================================================
   LIGHTBOX — full-screen viewer for the ORIGINAL media
   Zoom (wheel / pinch / double-tap), pan while zoomed, browse ‹ ›,
   close Esc / backdrop / ✕.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 40px) clamp(46px, 8vw, 72px);
  background: rgba(33, 38, 71, 0.93); /* deep dusk blue — stays on palette */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox.is-open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox.is-open { animation: lightbox-in 0.25s var(--ease) both; }
  @keyframes lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
.is-lightbox-open { overflow: hidden; }

/* The stage's video/iframe/figure carry author display rules, which would
   beat the [hidden] attribute's UA style — make hidden win inside the
   lightbox no matter what. */
.lightbox [hidden] { display: none !important; }

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 900px);
  max-height: 84vh;
  min-height: 0;
}
.lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  border: 2px solid rgba(185, 147, 60, 0.85); /* gold hairline frame */
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: 0 30px 80px -18px rgba(0, 0, 0, 0.65);
  /* Zoom engine: main.js drives --lb-scale / --lb-x / --lb-y. transform-origin
     is set inline by the zoom code so wheel zoom centres on the pointer. */
  transform: translate(var(--lb-x, 0px), var(--lb-y, 0px)) scale(var(--lb-scale, 1));
  transition: transform 0.18s var(--ease);
  will-change: transform;
}
.lightbox__figure.is-dragging img { transition: none; cursor: grabbing; }
.lightbox__figure.is-zoomable img { cursor: zoom-in; }
.lightbox__figure.is-zoomed img { cursor: grab; }
.lightbox__cap {
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  line-height: 1.15;
  color: var(--pink-200);
  text-align: center;
  flex: 0 0 auto;
}

.lightbox__video,
.lightbox__frame {
  display: block;
  border: 2px solid rgba(185, 147, 60, 0.85);
  border-radius: var(--radius-sm);
  background: #000;
  box-shadow: 0 30px 80px -18px rgba(0, 0, 0, 0.65);
}
.lightbox__video {
  max-width: min(92vw, 960px);
  max-height: 76vh;
}
.lightbox__frame {
  width: min(92vw, 960px);
  aspect-ratio: 16 / 9;
  border: 0;
}

.lightbox__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 234, 255, 0.55);
  text-align: center;
  pointer-events: none;
}

.lightbox__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--prev { left: calc(env(safe-area-inset-left, 0px) + 10px); }
.lightbox__nav--next { right: calc(env(safe-area-inset-right, 0px) + 10px); }

.lightbox__close,
.lightbox__nav {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
  z-index: 2;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.94); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.app-footer {
  padding: 18px 16px 0;
  text-align: center;
}
.app-footer p {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.app-footer__heart { color: var(--gold); }

/* brand placeholder — swap the text (or drop your logo in) in index.html */
.app-footer .footer-brand {
  font-family: var(--font-script);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--pink-500);
}

/* powered-by — full-width platform brand line at the very bottom of the
   footer. Static on purpose: "Kundangi" is swapped for the platform app
   name at render; it is not a host-editable field. */
.powered-by {
  width: 100%;
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-space) + 26px);
  transform: translate(-50%, 14px);
  z-index: 320;
  max-width: min(86vw, 340px);
  padding: 11px 22px;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  box-shadow: 0 16px 34px -14px rgba(55, 65, 110, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

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

/* ==========================================================================
   PRINT — the invitation prints as a single 5:7 card followed by the
   particulars card, centred on the page. Everything hidden by the cover-fit
   routine is restored; all fixed chrome disappears.
   ========================================================================== */
@media print {
  body {
    background: #fff;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .app-header, .site-nav, .nav-burger, .mobile-menu, .menu-backdrop,
  .dock, .scroll-progress, .toast, .lightbox, .scroll-cue,
  .app-footer, .skip-link { display: none !important; }

  .scene { padding: 0; min-height: 0; height: auto; overflow: visible; }
  .scene--cover {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: visible;
  }
  .scene:not(.scene--cover) { break-before: page; }

  /* restore anything the cover-fit routine hid */
  .fit-hidden {
    position: static !important;
    width: auto; height: auto;
    margin: 0; padding: 0;
    clip: auto; clip-path: none;
    overflow: visible;
    white-space: normal;
  }

  .confetti { display: none !important; }
  .card__envelope-wrap { animation: none; }

  .card--cover, .card--ledger {
    max-width: 5.5in;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    border: 1px solid #b9933c;
  }
  .card--cover { padding: 0.9in 0.65in; }
  .card--ledger { padding: 0.6in 0.65in; }
  .card--cover::before { inset: 0.18in; border-radius: 0; }
  .card__corner { width: 0.6in; }
  .card__corner--tl { top: 0.4in; left: 0.35in; }
  .card__corner--br { bottom: 0.4in; right: 0.35in; }
  .card__envelope-wrap { width: 2.2in; }
  .card__seal, .card__seal-letter { animation: none; }

  .media-row { grid-template-columns: 1fr 1fr; max-width: 5.5in; margin-inline: auto; }
  .card__video { max-width: 5.5in; }
}

/* ==========================================================================
   NO-JS FALLBACK — the page reads perfectly as a plain stacked document:
   every interactive extra (burger, sheet, dock, progress bar) disappears;
   the header pills stay because they are plain anchors that still jump.
   Photo links degrade to plain links to the original files.
   ========================================================================== */
.no-js .nav-burger,
.no-js .mobile-menu,
.no-js .menu-backdrop,
.no-js .dock,
.no-js .scroll-progress,
.no-js .guest-greeting { display: none !important; }

/* ==========================================================================
   OPTIONAL PHOTO FEATURES — GLOBAL OFF SWITCH
   Add class="photos-off" to <body> to hide the keepsake photo and the
   Moments gallery in one edit. main.js prunes the orphaned nav entries
   automatically (nav items are derived from the DOM sections).
   Delete the marked blocks in index.html instead to remove the features
   for good. See README "Photos".
   ========================================================================== */
.photos-off .card__photo-wrap,
.photos-off .card__flyer,
.photos-off .scene--gallery {
  display: none !important;
}

/* Per-feature switches: hide only the flyer/poster slot, or only the film. */
.flyer-off .card__flyer,
.video-off .card__video { display: none !important; }

/* Free page switch: hides EVERY free/custom page scene in one edit (their
   nav entries disappear automatically). See README "Free page". */
.free-off .free-page { display: none !important; }

/* ── Guestbook (platform-injected form + message list) ─────────────── */
/* Scoped to the server-injected guestbook UI; mirrors the RSVP card,
   labels, powder-blue inputs and the blue→pink pill button so the
   guestbook reads as part of The Big Reveal design. */
.guestbook-form { width: 100%; max-width: 560px; margin: 0 auto; }

#guestbookForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(170deg, var(--paper), var(--cream));
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 4vw, 34px);
}

#guestbookForm .form-group { margin: 0; }
#guestbookForm .form-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
#guestbookForm .form-control {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#guestbookForm .form-control::placeholder { color: rgba(55, 65, 110, 0.42); }
#guestbookForm .form-control:hover { border-color: var(--blue-200); }
#guestbookForm .form-control:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(77, 124, 246, 0.22);
}
#guestbookForm textarea.form-control { resize: vertical; min-height: 84px; }
#guestbookForm .error {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--error);
  min-height: 0;
}
#guestbookForm .error:empty { display: none; }

.guestbook-chapta { margin: 2px 0; }

#guestbookForm button[type="submit"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 100px;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-500), var(--pink-500));
  box-shadow: 0 14px 26px -12px rgba(77, 124, 246, 0.8);
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
#guestbookForm button[type="submit"]:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 30px -12px rgba(236, 72, 153, 0.9);
}
#guestbookForm button[type="submit"]:active { transform: scale(0.98); }

.loading-guestbook {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

#comments-container.guestbook-wrap {
  border-top: 1px solid var(--blue-200) !important;
  margin-top: 22px !important;
  padding-top: 20px;
}
.guestbook-entry {
  background: var(--paper);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.guestbook-entry h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}
.guestbook-entry p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
.guestbook-entry small { font-size: 0.75rem; color: var(--ink-soft); opacity: 0.8; }

.more-guestbook-wrap { text-align: center; margin-top: 14px; }
#load-more {
  appearance: none;
  background: transparent;
  border: 1px solid var(--blue-200);
  border-radius: 100px;
  padding: 10px 26px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
#load-more:hover { border-color: var(--pink-500); color: var(--pink-500); }