/* ==========================================================================
   Ayushman Piyush & Ayushmati Riddhi — Wedding Invitation
   Light watercolor-botanical theme: cream paper, sage/forest green,
   blush accents, real commissioned artwork for hero/date/letter cards.
   ========================================================================== */

:root {
  /* Palette */
  --cream: #faf6ec;
  --cream-deep: #f1e8d3;
  --paper: #fffcf6;
  --forest: #3a5940;
  --forest-deep: #2c4531;
  --sage: #7c9473;
  --sage-light: #a9c19b;
  --blush: #c96b7c;
  --blush-deep: #a84f60;
  --ink: #3a352b;
  --ink-soft: #6b6152;
  --gold: #cf9f4e;
  --gold-light: #e8cf9c;
  --shadow: 100 20% 20%;

  /* Type */
  --font-script: 'Alex Brush', cursive;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Cormorant Garamond', serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- Type scale — every font-size on the page draws from one of these,
     so "small label", "script name", "section heading" etc. mean the same
     thing everywhere instead of each section inventing its own range. ---- */
  --text-2xs: clamp(.42rem, 1.5vw, .58rem);   /* tiniest overlay labels: countdown/schedule-event captions */
  --text-xs:  clamp(.65rem, 2vw, .82rem);      /* small italic labels, eyebrows, hints */
  --text-sm:  clamp(.85rem, 2.4vw, .95rem);    /* secondary text, lineage, compliments */
  --text-base: clamp(1rem, 2.8vw, 1.12rem);    /* standard paragraph copy */
  --text-lg:  clamp(1.1rem, 3.2vw, 1.3rem);    /* emphasized copy */
  --text-script-sm: clamp(1.7rem, 6.5vw, 2.3rem);  /* smaller script names (story, scratch) */
  --text-script-md: clamp(2.2rem, 7.5vw, 2.9rem);  /* couple names, closing signature */
  --text-script-lg: clamp(2.6rem, 8vw, 3.6rem);    /* main section headings */

  /* ---- Spacing scale ---- */
  --space-section-y: clamp(3rem, 7vw, 5rem);
  --space-heading-gap: .4rem;
  --space-kicker-gap: 2rem;

  /* ---- Shadow scale — one recipe per elevation, reused everywhere ---- */
  --shadow-card: 0 30px 70px -30px hsl(var(--shadow) / .5);   /* floating full cards */
  --shadow-soft: 0 18px 34px -20px hsl(var(--shadow) / .35);  /* smaller panels */
  --shadow-btn: 0 6px 16px -6px hsl(var(--shadow) / .5);      /* icon buttons */
}

/* Alternate accent-color theme ("jewel") — a deep burgundy/gold palette
   swapped in for the default sage-green/blush one, slug-gated to one page
   (see $wi_theme_classes_by_slug in page-wedding-invitation.php). Only the
   accent tokens change; cream/paper/ink base stays the same so every
   already-tuned contrast/readability relationship still holds. */
.theme-jewel {
  --forest: #7a2e3a;
  --forest-deep: #551f28;
  --sage: #a8875a;
  --sage-light: #d9c4a0;
  --blush: #c17a5c;
  --blush-deep: #9c5940;
  --gold: #b8863d;
  --gold-light: #ddbd82;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 500; }

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 .5rem;
}

.script-heading {
  font-family: var(--font-script);
  font-size: var(--text-script-lg);
  font-weight: 400;
  color: var(--forest);
  margin: 0 0 var(--space-heading-gap);
  line-height: 1.15;
}
.script-heading--sm { font-size: var(--text-script-md); }

.section-kicker {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin: 0 0 var(--space-kicker-gap);
}

/* ---------------------------------------------------------------------- */
/* Scroll-reveal (fade-up)                                                */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: .04em;
  padding: .85em 2.2em;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--forest);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn--outline { background: transparent; color: var(--forest); }
.btn--outline:hover { background: var(--sage-light); transform: translateY(-2px); box-shadow: 0 10px 24px -12px hsl(var(--shadow) / .35); }
.btn--solid {
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: var(--paper);
  border-color: transparent;
  width: 100%;
  font-weight: 600;
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px hsl(var(--shadow) / .5); }

/* ---------------------------------------------------------------------- */
/* Music toggle                                                           */
/* ---------------------------------------------------------------------- */
.music-toggle {
  position: fixed !important; top: 1rem; right: 1rem; z-index: 60;
  display: flex !important; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sage);
  background: hsl(40 40% 98% / .9); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-btn);
  color: var(--forest); cursor: pointer; padding: 0;
  transition: transform .2s var(--ease);
}
.music-toggle:hover { transform: scale(1.08); }
.music-icon { display: flex; align-items: center; justify-content: center; }
.music-icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.music-toggle[aria-pressed="true"] .music-icon { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* Ambient effects — falling petals + a periodic butterfly                */
/* ---------------------------------------------------------------------- */
.ambient-fx { position: fixed; inset: 0; z-index: 55; overflow: hidden; pointer-events: none; }

.petal {
  position: absolute; top: -8vh;
  animation-name: petal-fall; animation-timing-function: linear; animation-fill-mode: forwards;
  filter: drop-shadow(0 2px 3px hsl(var(--shadow) / .2));
  will-change: transform, opacity;
}
@keyframes petal-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .9; }
  25%  { transform: translate(var(--drift1), 28vh) rotate(90deg); }
  50%  { transform: translate(var(--drift2), 55vh) rotate(180deg); }
  75%  { transform: translate(var(--drift1), 82vh) rotate(270deg); }
  92%  { opacity: .85; }
  100% { transform: translate(var(--drift3), 112vh) rotate(360deg); opacity: 0; }
}

.butterfly {
  position: absolute; top: var(--top-start, 40vh); left: 0;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  animation-name: butterfly-fly-ltr; animation-timing-function: ease-in-out; animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.butterfly--rtl { animation-name: butterfly-fly-rtl; }
.butterfly-flap { display: inline-block; animation: wing-flutter .35s ease-in-out infinite alternate; }
@keyframes wing-flutter {
  from { transform: scaleX(1) rotate(-6deg); }
  to   { transform: scaleX(.72) rotate(6deg); }
}
@keyframes butterfly-fly-ltr {
  0%   { transform: translate(-8vw, 0); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(54vw, calc(var(--top-mid, 40vh) - var(--top-start, 40vh))); }
  92%  { opacity: 1; }
  100% { transform: translate(108vw, calc(var(--top-end, 40vh) - var(--top-start, 40vh))); opacity: 0; }
}
@keyframes butterfly-fly-rtl {
  0%   { transform: translate(108vw, 0); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(54vw, calc(var(--top-mid, 40vh) - var(--top-start, 40vh))); }
  92%  { opacity: 1; }
  100% { transform: translate(-8vw, calc(var(--top-end, 40vh) - var(--top-start, 40vh))); opacity: 0; }
}
@media (max-width: 640px) {
  .petal { font-size: 85%; }
  .butterfly { font-size: 1.3rem; }
}

/* ==========================================================================
   1. ENVELOPE INTRO
   ========================================================================== */
.envelope-screen {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--paper), var(--cream) 60%);
  transition: opacity .9s var(--ease), visibility .9s var(--ease);
}
.envelope-screen.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.env-corner {
  position: absolute;
  width: clamp(110px, 20vw, 220px); height: clamp(110px, 20vw, 220px);
  background-image: url('/wp-content/themes/flatsome-child/assets/wedding-invitation/img/envelope-corner.jpg');
  background-size: cover; background-repeat: no-repeat;
  pointer-events: none; opacity: .9;
}
.env-corner--tl { top: 0; left: 0; }
.env-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.env-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.env-corner--br { bottom: 0; right: 0; transform: scale(-1,-1); }

.envelope-scene { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 1.5rem; }

.envelope-teaser {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 3vw, 1.15rem);
  background: var(--paper);
  padding: .7em 1.3em;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px -18px hsl(var(--shadow) / .4);
  animation: floaty 4s ease-in-out infinite;
}

.envelope { position: relative; width: min(58vw, 260px); aspect-ratio: 1000 / 1500; filter: drop-shadow(0 25px 40px hsl(var(--shadow) / .3)); }
.envelope-body {
  position: absolute; inset: 0;
  background-color: var(--cream);
  background-image: url('/wp-content/themes/flatsome-child/assets/wedding-invitation/img/envelope-body2.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  border-radius: var(--radius-sm);
}
.envelope-flap-top {
  position: absolute; top: 0; left: 0; width: 100%; height: 49.3333%;
  background-image: url('/wp-content/themes/flatsome-child/assets/wedding-invitation/img/envelope-topflap2.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  transform-origin: top center; transition: transform .9s var(--ease), opacity .7s var(--ease); z-index: 3;
}
.envelope.is-opening .envelope-flap-top { transform: rotateX(150deg); opacity: 0; }

.wax-seal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30%; aspect-ratio: 328 / 335; border: none; z-index: 4; cursor: pointer;
  background: transparent;
  background-image: url('/wp-content/themes/flatsome-child/assets/wedding-invitation/img/wax-seal-icon-v2.png');
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 8px 14px hsl(35 60% 20% / .45));
  display: grid; place-items: center;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  animation: seal-pulse 2.4s ease-in-out infinite;
}
.envelope.is-opening .wax-seal { transform: translate(-50%, -50%) scale(0); opacity: 0; }

/* Generic (name-free) envelope — used on every wedding-invitation page
   except riddhi-piyush-invitation, see page-wedding-invitation.php. Plain
   CSS gradients + a CSS-drawn heart instead of the "P&R" commissioned art. */
.envelope--generic .envelope-body {
  background-image: none;
  background: linear-gradient(165deg, var(--cream-deep), var(--paper) 55%, var(--cream-deep));
}
.envelope--generic .envelope-flap-top {
  background-image: none;
  background: linear-gradient(200deg, var(--paper), var(--cream-deep));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1px solid hsl(var(--shadow) / .12);
}
.envelope--generic .wax-seal {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-image: none;
  background-color: var(--gold);
  box-shadow: 0 8px 16px -6px hsl(35 60% 25% / .5), inset 0 0 0 2px hsl(45 60% 88% / .6);
}
.envelope--generic .wax-seal::after {
  content: "♥";
  color: hsl(45 60% 92%);
  font-size: 1.5rem;
  line-height: 1;
}

/* Crest-seal envelope — the real commissioned wax seal (peacock, floral
   wreath, tiny landscape) with "P&R" removed via inpainting, replaced by
   the couple's initials as real HTML text (cfg.couple, see script.js).
   envelope-body/envelope-flap-top need no override: that art never had
   any text on it, so the branded embossed-damask envelope is already
   reusable as-is. Position % measured directly off wax-seal-crest.png's
   own "P&R" bbox — safe because .wax-seal's own box already matches that
   image's aspect ratio exactly (328:335), so contain-fit never crops it. */
.envelope--crest .wax-seal {
  background-image: url('/wp-content/themes/flatsome-child/assets/wedding-invitation/img/wax-seal-crest.png');
}
.wax-seal-monogram {
  position: absolute; left: 18.3%; top: 26.9%; width: 63.7%; height: 38.5%;
  display: none; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.7rem, 32cqw, 1.6rem);
  color: #8a6423; letter-spacing: -.02em;
}
.envelope--crest .wax-seal { container-type: inline-size; }
.envelope--crest .wax-seal-monogram { display: flex; }

@keyframes seal-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.035); }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.envelope-hint { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); opacity: .85; }

/* ==========================================================================
   MAIN INVITATION
   ========================================================================== */
.invitation { opacity: 0; transition: opacity .6s var(--ease); }
.invitation.is-visible { opacity: 1; }

section, footer { position: relative; padding: var(--space-section-y) 1.5rem; }

/* ==========================================================================
   2. HERO — "Welcome to our next great adventure"
   ========================================================================== */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: clamp(3rem,8vw,4rem) 1.75rem; overflow: hidden;
  background: var(--cream);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-image, none);
  background-size: cover; background-position: center;
}
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .14em;
  font-size: clamp(1.5rem, 6vw, 2.3rem); text-transform: uppercase;
  color: var(--forest);
  margin-bottom: .2rem;
}
.hero-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 3.2vw, 1.25rem); letter-spacing: .03em;
  color: var(--forest); margin: 0 0 .3rem;
}
.hero-title-accent {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2.6rem, 10vw, 3.8rem);
  color: var(--forest-deep);
  margin: 0 0 1.2rem;
}
.hero-tagline {
  font-family: var(--font-body); font-style: italic; font-size: var(--text-base);
  color: var(--forest); max-width: 38ch; margin: 0 auto 2rem; line-height: 1.65;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem); color: var(--forest-deep);
}
.hero-badge::after { content: "♡"; color: var(--blush); font-family: var(--font-body); font-size: .8em; }
.invocation { margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sage-light); }
.invocation-mantra { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: .03em; color: var(--forest); margin: .15em 0; }
.invocation-shloka { font-family: var(--font-body); font-style: italic; font-size: var(--text-sm); color: var(--ink-soft); margin: .5em 0 0; line-height: 1.5; }
.couple-names { font-family: var(--font-script); font-size: var(--text-script-md); color: var(--forest-deep); line-height: 1.15; margin-top: .3rem; }
.lineage { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); margin: .15em 0; line-height: 1.4; }
.ampersand { font-family: var(--font-script); font-size: clamp(1.6rem, 5vw, 2rem); color: var(--sage); margin: .5rem 0; }
.scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; z-index: 1; }
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(var(--sage), transparent); animation: scrolldown 1.8s ease-in-out infinite; }
.scroll-cue p { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
@keyframes scrolldown {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------------------------------------------------------------------- */
/* Opening Reveal — plays once as the envelope opens, before the hero     */
/* ---------------------------------------------------------------------- */
.opening-reveal {
  position: relative;
  min-height: 100svh;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
  background: var(--cream);
}
.or-video-card {
  position: absolute; inset: 0; overflow: hidden;
  background-color: var(--cream-deep);
  background-image: var(--or-image, none);
  background-size: cover; background-position: center;
}
.or-video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Desktop loads the landscape cut (see script.js source-selection), whose
   aspect ratio is close enough to real viewports that a full edge-to-edge
   crop looks better than letterboxing. Mobile keeps the portrait cut
   letterboxed via `contain` above, since a crop there loses too much. */
@media (min-width: 900px) {
  .or-video { object-fit: cover; }
}

/* Crest-card mode — a shared, name-free floral/peacock crest background
   (bg-openingreveal-crest.jpg) with the couple's initials + names overlaid
   as real HTML text, driven by cfg.couple. Used when no video/backgroundImage
   is configured but a crestImage is (see script.js).

   The frame keeps its OWN internal proportions locked to the source art's
   real 1000:1500 aspect ratio (via aspect-ratio + min-width/min-height:100%
   forcing it to grow until it covers the parent in both axes — a `div`
   equivalent of object-fit:cover, since plain background-size:cover on the
   parent would crop with no way for us to know where the crop landed).
   That's what makes the overlay text's percentage coordinates — measured
   directly off the original art — land in the right place edge-to-edge on
   any screen shape: the frame is always exactly proportioned like the
   image, just scaled up and clipped by .or-video-card's overflow:hidden,
   so a % position inside it is still a % position on the real artwork. */
.or-crest-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  container-type: inline-size;
  aspect-ratio: 1000 / 1500;
  min-width: 100%; min-height: 100%;
  background-image: var(--or-image, none);
  background-size: 100% 100%; background-position: center;
}
/* Rendered at the same 1000:1500 ratio as the frame itself (see the
   ffmpeg zoompan pipeline that built it from the crest still + baked
   couple-name text), so object-fit:cover here never actually crops —
   frame and video share one ratio by construction. */
.or-crest-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.or-monogram {
  position: absolute; left: 39%; top: 37.3%; width: 25.4%; height: 9.5%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 7cqw, 4.5rem);
  color: #7d3038; letter-spacing: -.01em;
}
.or-names {
  position: absolute; left: 31.1%; top: 56.7%; width: 38%; height: 4.6%;
  margin: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.1rem, 5.2cqw, 3.2rem);
  color: #a9455e; white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Better Together — couple reveal video, right after the hero            */
/* ---------------------------------------------------------------------- */
.better-together {
  background-color: var(--cream);
  background-image: var(--bt-section-image, none);
  background-size: cover; background-position: center;
  display: flex; justify-content: center; padding: var(--space-section-y) 0;
}
.bt-video-card {
  position: relative;
  width: min(70vw, 320px); aspect-ratio: 9 / 16;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: var(--cream-deep);
  background-image: var(--bt-video-image, none);
  background-size: cover; background-position: center;
}
.bt-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   3. THE DATE — scratch reveal + countdown
   ========================================================================== */
.the-date {
  text-align: center;
  background: var(--cream-deep);
  display: flex; justify-content: center;
  padding-top: var(--space-section-y); padding-bottom: var(--space-section-y);
  padding-left: 0; padding-right: 0;
}
.date-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1000 / 1500;
  background-image: var(--date-image, linear-gradient(160deg, var(--cream), var(--sage-light)));
  background-size: cover; background-position: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.scratch-static {
  position: absolute; left: 10.8%; top: 22%; width: 80.3%; height: 21%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .08em; text-align: center;
}
.scratch-name-a, .scratch-name-b { font-family: var(--font-script); font-size: clamp(1.7rem, 5cqw, 6rem); color: var(--blush-deep); line-height: 1.05; margin: 0; }
.scratch-amp { font-family: var(--font-script); font-size: clamp(1.05rem, 2.2cqw, 2.6rem); color: var(--forest); margin: .04em 0; }
.scratch-tagline { font-family: var(--font-body); font-style: italic; font-size: clamp(.65rem, 1.6cqw, 1.6rem); color: var(--forest); margin: .3em 0 0; }

.scratch-hint {
  position: absolute; left: 50%; top: 45%; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; font-size: clamp(.62rem, 1.5cqw, 1.5rem);
  color: var(--ink-soft); white-space: nowrap;
  display: flex; align-items: center; gap: .35em;
}
.sparkle { color: var(--gold); display: inline-block; animation: twinkle 1.8s ease-in-out infinite; }
.sparkle:last-child { animation-delay: .5s; }
@keyframes twinkle {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.confetti-piece {
  position: fixed; z-index: 80; pointer-events: none;
  animation: confetti-burst 1.15s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes confetti-burst {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 170px)) rotate(var(--rot)); opacity: 0; }
}

.scratch-zone {
  position: absolute;
  left: 20%; top: 51%; width: 60%; height: 6.5%;
  border-radius: 6px;
  overflow: hidden;
}
.scratch-reveal-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2% 4%;
  text-align: center;
}
.scratch-fulldate { font-family: var(--font-display); font-weight: 600; font-size: clamp(.85rem, 2.2cqw, 2.2rem); color: var(--ink); letter-spacing: .02em; line-height: 1.2; margin: 0; white-space: nowrap; }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .5s var(--ease); }
.scratch-canvas.is-cleared { opacity: 0; pointer-events: none; }

.countdown {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease);
}
.countdown.is-revealed { opacity: 1; visibility: visible; }
.countdown-unit {
  position: absolute; top: 60.5%; height: 8%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
}
.countdown-unit--days { left: 24.3%; width: 8.2%; }
.countdown-unit--hours { left: 39.5%; width: 6.4%; }
.countdown-unit--minutes { left: 53.2%; width: 8.3%; }
.countdown-unit--seconds { left: 67.3%; width: 9.1%; }
.countdown-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(.75rem, 2.4cqw, 2.4rem); color: var(--paper); line-height: 1; white-space: nowrap; }
.countdown-label { display: block; font-family: var(--font-body); font-size: clamp(.42rem, 1cqw, 1rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); opacity: .85; white-space: nowrap; }

/* ==========================================================================
   4. LETTER — invocation, names, lineage, invite text, compliments
   ========================================================================== */
.letter { background: var(--cream); display: flex; justify-content: center; padding-left: 0; padding-right: 0; }
.letter-card {
  position: relative;
  width: 100%;
  background-color: var(--paper);
  background-image: var(--letter-image, none);
  background-size: cover; background-position: top center; background-repeat: no-repeat;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  padding: clamp(2.4rem, 8vw, 3.4rem) clamp(1.8rem, 6vw, 2.6rem);
  text-align: center;
}
.invocation-icon { width: 44px; height: auto; margin: 0 auto .6rem; display: block; }
.letter-paragraphs p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; }
.letter-paragraphs p:last-child { margin-bottom: 0; }
.compliments { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--sage-light); }
.compliments-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--forest); margin: 0 0 .3rem; }
.compliments-names { font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   5. SCHEDULE / TIMELINE — two-day event schedule with icons
   ========================================================================== */
.schedule { background: var(--cream-deep); padding-left: 0; padding-right: 0; }
.schedule-content { position: relative; z-index: 1; text-align: center; }
.schedule .script-heading { color: var(--forest-deep); }

.schedule-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1000 / 1500;
  margin: 0 auto;
  background-image: var(--schedule-image, linear-gradient(160deg, var(--cream), var(--sage-light)));
  background-size: cover; background-position: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.schedule-day {
  position: absolute; text-align: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em;
  font-size: clamp(.6rem, 1.2cqw, 1.3rem); color: var(--forest-deep);
  display: flex; align-items: center; justify-content: center;
}
.schedule-event {
  position: absolute; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0 1%;
}
.schedule-event-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(.48rem, 1cqw, .95rem); color: var(--ink); line-height: 1.15; margin: 0; }
.schedule-watch-badge {
  position: absolute !important; z-index: 2; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.4rem, .75cqw, .75rem);
  letter-spacing: .02em; white-space: nowrap; color: var(--paper);
  background: linear-gradient(135deg, var(--gold), #b9822f);
  padding: clamp(.15em, .5vw, .3em) clamp(.55em, 1.6vw, .85em);
  border-radius: 999px; box-shadow: 0 3px 8px -3px hsl(var(--shadow) / .55);
  /* Entrance overrides the generic .reveal fade-up with a wax-seal-style
     "stamp" pop: scaled down + tilted, snapping into place with overshoot. */
  opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-14deg);
  transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.schedule-watch-badge.is-visible {
  opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.schedule-watch-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, hsl(0 0% 100% / .6) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 200% 0;
  animation: schedule-watch-shimmer 3.2s ease-in-out 1.4s infinite;
}
@keyframes schedule-watch-shimmer {
  0%, 45% { background-position: 200% 0; }
  65%, 100% { background-position: -60% 0; }
}
@media (min-width: 640px) { .schedule-card { width: 100%; } }

/* ---------------------------------------------------------------------- */
/* 5b. WARDROBE PLANNER — dress-code suggestions per event                */
/* ---------------------------------------------------------------------- */
.wardrobe { background: var(--cream); padding-left: 0; padding-right: 0; }
.wardrobe-content { position: relative; z-index: 1; text-align: center; }
.wardrobe .script-heading { color: var(--forest-deep); }

.wardrobe-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1000 / 1500;
  margin: 0 auto;
  background-image: var(--wardrobe-image, linear-gradient(160deg, var(--cream), var(--sage-light)));
  background-size: cover; background-position: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.wardrobe-label {
  position: absolute; text-align: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .03em;
  font-size: clamp(.68rem, 1.2cqw, 1.3rem); color: var(--forest-deep);
}
.wardrobe-desc {
  position: absolute; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .15em;
  padding: 0 1%;
}
.wardrobe-desc p { margin: 0; font-family: var(--font-body); font-size: clamp(.52rem, .9cqw, .85rem); line-height: 1.25; color: var(--ink-soft); }
.wardrobe-desc p strong { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .wardrobe-card { width: 100%; } }

/* ==========================================================================
   6. VENUE
   ========================================================================== */
.venue { text-align: center; background: var(--cream); }
.venue-address { font-size: var(--text-base); color: var(--ink-soft); margin: .25rem 0 .25rem; }
.venue-note { font-size: var(--text-sm); color: var(--ink-soft); opacity: .85; margin-bottom: 1.6rem; }
.venue-map { margin-top: 2rem; max-width: 560px; margin-inline: auto; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.venue-map iframe { width: 100%; height: 320px; border: 0; display: block; }
.venue-residence { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--sage-light); max-width: 420px; margin-inline: auto; }

/* ==========================================================================
   7. GALLERY
   ========================================================================== */
.gallery { text-align: center; background: var(--cream-deep); }

.story-gallery { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; margin: 0 auto; }
.story-block { position: relative; padding-top: 1.5rem; }
.story-divider {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-bottom: 1.2rem; color: var(--sage-light);
}
.story-divider::before, .story-divider::after { content: ""; height: 1px; width: 44px; background: var(--sage-light); }
.story-divider span { font-size: 1rem; color: var(--blush); }
.story-label {
  font-family: var(--font-display); font-style: italic; letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--text-xs); color: var(--sage); margin: 0 0 1rem;
}
.story-name { font-family: var(--font-script); font-size: var(--text-script-sm); color: var(--forest-deep); margin-top: 1rem; }
.story-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; max-width: 460px; margin: 0 auto; padding: 0 .5rem; }
.story-photos--single { grid-template-columns: minmax(0, 300px); }
.story-photos .gallery-item:nth-child(odd) { transform: rotate(-2.5deg); }
.story-photos .gallery-item:nth-child(even) { transform: rotate(2.5deg); }
.story-photos .gallery-item:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); }

.gallery-item {
  aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--paper); position: relative; cursor: pointer;
  padding: 8px 8px 20px;
  box-shadow: 0 0 0 1px hsl(var(--shadow) / .08), 0 16px 28px -18px hsl(var(--shadow) / .4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gallery-item:hover { box-shadow: 0 0 0 1px hsl(var(--shadow) / .1), 0 22px 36px -18px hsl(var(--shadow) / .45); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
/* Empty-frame placeholder — shown wherever a photo/video slot has no real
   media yet (template pages before real content is added). Absolutely
   positioned to overlay whichever card it's dropped into; each of those
   cards (.gallery-item, .or-video-card, .bt-video-card) is itself
   position:relative/absolute so this has a containing block. */
.wi-empty-frame {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: var(--cream);
  border: 1.5px dashed var(--sage-light);
  border-radius: inherit;
  color: var(--ink-soft);
  font-family: var(--font-body); font-size: var(--text-sm);
  text-align: center; padding: 1rem;
}
.wi-empty-frame svg { opacity: .45; }
.gallery-item .wi-empty-frame { font-size: .7rem; padding: .5rem; }

.wi-lightbox {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: hsl(100 20% 10% / .88); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease); padding: 2rem;
}
.wi-lightbox.is-open { opacity: 1; visibility: visible; }
.wi-lightbox img { max-width: min(90vw, 600px); max-height: 80vh; border-radius: var(--radius-sm); box-shadow: 0 0 0 3px var(--sage-light); }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: hsl(45 60% 90% / .2); color: var(--paper); font-size: 1.4rem; cursor: pointer; transition: transform .2s var(--ease); }
.lightbox-close:hover, .video-modal-close:hover { transform: scale(1.08); background: hsl(45 60% 90% / .3); }

/* ---------------------------------------------------------------------- */
/* Event video modal — play button on eligible schedule-card illustrations */
/* ---------------------------------------------------------------------- */
.schedule-play-btn {
  position: absolute !important; z-index: 2;
  display: flex !important; align-items: center; justify-content: center;
  box-sizing: border-box !important;
  width: clamp(9px, 1.8vw, 15px) !important; min-width: 0 !important; max-width: none !important;
  height: clamp(9px, 1.8vw, 15px) !important; min-height: 0 !important;
  aspect-ratio: 1 / 1; border-radius: 50% !important;
  background: hsl(0 0% 100% / .82); box-shadow: 0 2px 6px -3px hsl(var(--shadow) / .6);
  border: none !important; outline: none; cursor: pointer; padding: 0 !important; margin: 0 !important;
  line-height: 1;
  transition: transform .2s var(--ease), background .2s var(--ease);
  animation: schedule-play-pulse 2.6s ease-in-out infinite;
}
.schedule-play-btn:hover { transform: scale(1.08); background: hsl(0 0% 100% / .95); }
@keyframes schedule-play-pulse {
  0%, 100% { box-shadow: 0 2px 6px -3px hsl(var(--shadow) / .6), 0 0 0 0 rgba(207,159,78,.45); }
  50% { box-shadow: 0 2px 6px -3px hsl(var(--shadow) / .6), 0 0 0 5px rgba(207,159,78,0); }
}
.schedule-play-btn svg { width: clamp(4px, 0.8vw, 6px); height: clamp(4px, 0.8vw, 6px); margin-left: .5px; fill: var(--forest-deep); }

.video-modal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: hsl(100 20% 6% / .92); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease); padding: 2rem;
}
.video-modal.is-open { opacity: 1; visibility: visible; }
.video-modal-player { max-width: min(92vw, 420px); max-height: 85vh; width: 100%; border-radius: var(--radius-sm); box-shadow: 0 0 0 3px var(--sage-light); background: #000; }
.video-modal-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: hsl(45 60% 90% / .2); color: var(--paper); font-size: 1.4rem; cursor: pointer; z-index: 1; transition: transform .2s var(--ease); }

/* ==========================================================================
   7b. WEDDING PARTY — optional; renders only when cfg.weddingParty is set
   ========================================================================== */
.wedding-party { text-align: center; background: var(--cream); }
.party-columns { display: flex; flex-direction: column; gap: 2.5rem; max-width: 720px; margin: 0 auto; }
@media (min-width: 640px) { .party-columns { flex-direction: row; justify-content: center; gap: 3rem; } }
.party-column { flex: 1; }
.party-column-label {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--text-xs); color: var(--forest); margin: 0 0 1.2rem;
}
.party-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.party-member { text-align: center; }
.party-member-photo {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .6rem;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--party-photo, none);
  background-size: cover; background-position: center; background-color: var(--sage-light);
  box-shadow: 0 0 0 3px var(--paper), 0 8px 18px -10px hsl(var(--shadow) / .4);
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--forest-deep);
}
.party-member-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink); margin: 0; }
.party-member-role { font-size: var(--text-xs); color: var(--ink-soft); margin: .15rem 0 0; }
.party-member-bio { font-size: .72rem; line-height: 1.5; color: var(--ink-soft); opacity: .9; margin: .5rem 0 0; }

/* ==========================================================================
   7a. HOW WE MET — optional; renders only when cfg.howWeMet is set
   ========================================================================== */
.how-we-met { text-align: center; background: var(--cream-deep); }
.how-we-met-card {
  max-width: 560px; margin: 0 auto; text-align: left; overflow: hidden;
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.how-we-met-photo-frame { aspect-ratio: 16 / 10; background-color: var(--sage-light); overflow: hidden; }
.how-we-met-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.how-we-met-paragraphs { padding: clamp(1.6rem, 6vw, 2.2rem); }
.how-we-met-paragraphs p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--ink-soft); margin: 0 0 1rem; }
.how-we-met-paragraphs p:last-child { margin-bottom: 0; }

/* ==========================================================================
   7c. GIFT REGISTRY — optional; renders only when cfg.registry is set
   ========================================================================== */
.registry { text-align: center; background: var(--cream-deep); }
.registry-message { max-width: 44ch; margin: 0 auto 1.6rem; color: var(--ink-soft); font-size: var(--text-base); }
.registry-items {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.2rem; max-width: 640px; margin: 0 auto 1.6rem;
}
.registry-item-card {
  text-align: center; overflow: hidden;
  background: var(--paper); border-radius: var(--radius-md);
  box-shadow: 0 0 0 1.5px var(--sage-light), var(--shadow-soft);
}
.registry-item-photo-frame { aspect-ratio: 4 / 3; background-color: var(--sage-light); overflow: hidden; }
.registry-item-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.registry-item-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink); margin: .8rem .9rem 0; }
.registry-item-desc { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.5; margin: .3rem .9rem 0; }
.registry-item-card .btn { margin: .9rem .9rem .9rem; padding: .5em 1.2em; font-size: var(--text-xs); }
.registry-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ==========================================================================
   7d. ACCOMMODATIONS — optional; renders only when cfg.accommodations is set
   ========================================================================== */
.accommodations { text-align: center; background: var(--cream); }
.accommodations-note { max-width: 48ch; margin: 0 auto 1.8rem; color: var(--ink-soft); font-size: var(--text-base); }
.hotel-list { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; margin: 0 auto; }
.hotel-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left;
  background: var(--paper); padding: 1.1rem 1.4rem; border-radius: var(--radius-md);
  box-shadow: 0 0 0 1.5px var(--sage-light), var(--shadow-soft);
}
.hotel-card-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--ink); margin: 0; }
.hotel-card-note { font-size: var(--text-xs); color: var(--ink-soft); margin: .2rem 0 0; }
.hotel-card .btn { padding: .55em 1.4em; font-size: var(--text-sm); flex-shrink: 0; }

/* ==========================================================================
   7e. FAQ — optional; renders only when cfg.faq is set
   ========================================================================== */
.faq { text-align: center; background: var(--cream-deep); }
.faq-list { display: flex; flex-direction: column; gap: .8rem; max-width: 560px; margin: 0 auto; text-align: left; }
.faq-item { background: var(--paper); border-radius: var(--radius-md); box-shadow: 0 0 0 1.5px var(--sage-light); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--ink);
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 1.1rem 1.4rem;
}
.faq-question-icon { flex-shrink: 0; font-size: 1.1em; color: var(--forest); transition: transform .3s var(--ease); }
.faq-item.is-open .faq-question-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
  font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6;
}
.faq-answer p { margin: 0; padding: 0 1.4rem 1.1rem; }
.faq-item.is-open .faq-answer { max-height: 240px; }

/* ==========================================================================
   7f. OUR FILM — optional pre-wedding video; renders only when cfg.ourFilm
   is set. Reuses .wi-empty-frame (see Gallery) when no src is configured.
   ========================================================================== */
.our-film { text-align: center; background: var(--cream); }
.our-film-note { max-width: 46ch; margin: 0 auto 1.6rem; color: var(--ink-soft); font-size: var(--text-base); }
.our-film-card {
  position: relative; max-width: 480px; aspect-ratio: 16 / 9; margin: 0 auto;
  background: var(--cream-deep); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
}
.our-film-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   8. RSVP
   ========================================================================== */
.rsvp { text-align: center; background: var(--cream); }
.rsvp-contact {
  margin: 0 auto; max-width: 440px; color: var(--ink-soft); font-size: var(--text-base);
  background: var(--paper); padding: clamp(1.8rem, 6vw, 2.4rem);
  border-radius: var(--radius-md); box-shadow: 0 0 0 1.5px var(--sage-light), var(--shadow-soft);
}
.rsvp-contact p { margin: 0 0 .6rem; }
.rsvp-contact p:last-child { margin-bottom: 0; }
.rsvp-contact a { color: var(--forest); text-decoration: none; font-weight: 600; }
.rsvp-contact a:hover { text-decoration: underline; }
.rsvp-contacts-list {
  margin: 1rem auto 0; max-width: 440px; color: var(--ink-soft); font-size: var(--text-sm);
  background: var(--paper); padding: clamp(1.2rem, 4vw, 1.6rem);
  border-radius: var(--radius-md); box-shadow: 0 0 0 1.5px var(--sage-light), var(--shadow-soft);
}
.rsvp-contacts-list p { margin: 0 0 .5rem; }
.rsvp-contacts-list p:last-child { margin-bottom: 0; }
.rsvp-contacts-list a { color: var(--forest); text-decoration: none; font-weight: 600; }
.rsvp-contacts-list a:hover { text-decoration: underline; }

/* ==========================================================================
   9. CLOSING
   ========================================================================== */
.closing { text-align: center; background: var(--forest-deep); color: var(--cream); padding-bottom: 4rem; }
.drawn-hearts--footer { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.drawn-heart--sm { width: 22px; fill: none; stroke: var(--blush); stroke-width: 2; opacity: .9; }
.closing-message { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); max-width: 32ch; margin: 0 auto 1rem; color: var(--cream); }
.closing-signature { font-family: var(--font-script); font-size: var(--text-script-md); color: var(--gold-light); }

/* ==========================================================================
   Responsive tweaks — cards/columns scale up on wider viewports so the
   page reads full-bleed instead of a small card floating in empty space
   ========================================================================== */
@media (min-width: 640px) {
  .date-card { width: 100%; }
  .letter-card { width: 100%; }
  .timeline { max-width: 640px; }
}
@media (min-width: 900px) {
  .story-gallery { max-width: 860px; }
  .timeline { max-width: 760px; }
}
@media (min-width: 1200px) {
  .timeline { max-width: 860px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .envelope-flap-top, .wax-seal, .music-icon { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Hide site-wide floating widgets on this standalone invitation page.    */
/* These are injected by other plugins via wp_footer() (not part of this  */
/* template) — hidden here rather than disabled, so they still show       */
/* normally on every other page of the site.                              */
/* ---------------------------------------------------------------------- */
.pika-fab,
.woo-multi-currency { display: none !important; }