/* =================================================================
   LILI · A SUGAR PLUM BALLET — stylesheet
   Palette: ivory & soft pastels · rose pink · antique gold
   Type:    Cinzel (display) · Pinyon Script (name) · Cormorant (body)
   ================================================================= */

:root{
  /* client palette */
  --blush:#F7D6E6;
  --rose:#E8A1B5;
  --baby:#FFD6E3;
  --lilac:#EBD4F5;
  --mint:#BFDCD6;
  --peach:#FFDCC8;
  --gold:#E1B866;
  --ivory:#FFF7E8;
  /* derived */
  --cream:#fffdf7;
  --gold-bright:#f3d99a;
  --gold-deep:#b88a3a;
  --rose-ink:#d77a9c;     /* headings */
  --rose-deep:#c2628a;    /* small accents / eyebrows */
  --ink:#5e4550;          /* body text — deep mauve */
  --ink-soft:#9a8290;     /* muted */
  --line:rgba(184,138,58,.30);   /* gold hairline */
  /* soft warm shadows */
  --sh-sm:0 12px 30px -16px rgba(176,110,130,.40);
  --sh-md:0 26px 54px -28px rgba(176,110,130,.42);
  --sh-lg:0 40px 80px -42px rgba(150,90,120,.45);
  /* type */
  --f-display:'Cinzel', Georgia, serif;
  --f-deco:'Cinzel Decorative','Cinzel', serif;
  --f-hero:'Great Vibes', cursive;
  --f-script:'Pinyon Script', cursive;
  --f-body:'Cormorant Garamond', Georgia, serif;
  /* misc */
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* princess-wand cursors (gold star + ribboned handle), drawn as SVG */
  --wand:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><line x1='14.5' y1='14.5' x2='28' y2='28' stroke='%23c98f33' stroke-width='2.8' stroke-linecap='round'/><line x1='14.5' y1='14.5' x2='28' y2='28' stroke='%23ffe9b0' stroke-width='1' stroke-linecap='round'/><circle cx='14.8' cy='14.8' r='2' fill='%23e8a1b5'/><path d='M12 4 L13.88 9.41 L19.61 9.53 L15.04 12.99 L16.7 18.47 L12 15.2 L7.3 18.47 L8.96 12.99 L4.39 9.53 L10.12 9.41 Z' fill='%23ffd76a' stroke='%23b8842f' stroke-width='1' stroke-linejoin='round'/><circle cx='12' cy='11.2' r='1.3' fill='%23fff7e8'/><path d='M23 3 L23.44 4.56 L25 5 L23.44 5.44 L23 7 L22.56 5.44 L21 5 L22.56 4.56 Z' fill='%23ffe9b0'/><path d='M7 21.4 L7.35 22.65 L8.6 23 L7.35 23.35 L7 24.6 L6.65 23.35 L5.4 23 L6.65 22.65 Z' fill='%23ffe9b0'/></svg>");
  --wand-on:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><line x1='14.5' y1='14.5' x2='28' y2='28' stroke='%23c98f33' stroke-width='2.8' stroke-linecap='round'/><line x1='14.5' y1='14.5' x2='28' y2='28' stroke='%23fff0c0' stroke-width='1' stroke-linecap='round'/><circle cx='14.8' cy='14.8' r='2' fill='%23e8a1b5'/><path d='M12 4 L13.88 9.41 L19.61 9.53 L15.04 12.99 L16.7 18.47 L12 15.2 L7.3 18.47 L8.96 12.99 L4.39 9.53 L10.12 9.41 Z' fill='%23ffe27a' stroke='%23b8842f' stroke-width='1' stroke-linejoin='round'/><circle cx='12' cy='11.2' r='1.5' fill='%23fffdf7'/><path d='M23 3 L23.44 4.56 L25 5 L23.44 5.44 L23 7 L22.56 5.44 L21 5 L22.56 4.56 Z' fill='%23fff3c8'/><path d='M7 21.4 L7.35 22.65 L8.6 23 L7.35 23.35 L7 24.6 L6.65 23.35 L5.4 23 L6.65 22.65 Z' fill='%23fff3c8'/><path d='M26 17.4 L26.35 18.65 L27.6 19 L26.35 19.35 L26 20.6 L25.65 19.35 L24.4 19 L25.65 18.65 Z' fill='%23fff3c8'/></svg>");
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* the hidden attr must win over .btn/.gift-card display */

html{
  scroll-behavior:smooth;
  background:#fffaf2;
}
html.intro-locked{ overflow:hidden; }

/* ---------- princess-wand cursor (devices with a real pointer) ---------- */
@media (pointer:fine){
  html{ cursor:var(--wand) 12 4, auto; }
  a, button, summary, label, select, .btn, .nav__toggle, [role="button"],
  input[type="submit"], input[type="button"], input[type="radio"], input[type="checkbox"]{
    cursor:var(--wand-on) 12 4, pointer !important;     /* brighter wand on clickables */
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="number"], input:not([type]), textarea{
    cursor:text !important;                              /* let guests type naturally */
  }
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--f-body);
  font-size:clamp(17px,1.05vw + 14px,21px);
  line-height:1.65;
  color:var(--ink);
  background:
    radial-gradient(1200px 720px at 8% -6%,   rgba(232,161,181,.30), transparent 58%),
    radial-gradient(1100px 820px at 96% 6%,    rgba(235,212,245,.34), transparent 58%),
    radial-gradient(1000px 820px at 88% 102%,  rgba(191,220,214,.30), transparent 58%),
    radial-gradient(980px 760px at 6% 96%,     rgba(255,220,200,.34), transparent 58%),
    linear-gradient(180deg,#fffaf2 0%, var(--ivory) 48%, #fdeede 100%);
  background-attachment:fixed;
  overflow-x:clip;
}

/* faint paper grain for warmth */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
/* soft top sheen */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.5), transparent 42%);
}

/* canvases */
#snow{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#fx{ position:fixed; inset:0; z-index:60; pointer-events:none; }

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

::selection{ background:rgba(232,161,181,.45); color:#5a3a14; -webkit-text-fill-color:#5a3a14; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:clamp(.62rem,.5vw + .5rem,.78rem);
  font-weight:600;
  color:var(--rose-deep);
  margin:0 0 1.1rem;
  text-align:center;
  padding-left:.42em;
}
.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.7rem,3.4vw + .6rem,3rem);
  line-height:1.1;
  letter-spacing:.01em;
  margin:0 0 1.4rem;
  text-align:center;
  color:var(--rose-ink);
}
.lead{ font-size:1.18em; }
em{ font-style:italic; color:var(--rose-deep); }

/* antique-gold foil text (reads on ivory) */
.foil{
  background:linear-gradient(96deg,
    #a9772f 0%, #d9ad55 18%, #f3d99a 33%, #c89a44 48%,
    #a9772f 62%, #e8c178 80%, #b88a3a 100%);
  background-size:240% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:foil 9s linear infinite;
  filter:drop-shadow(0 1px 1px rgba(150,108,40,.30));
}
@keyframes foil{ to{ background-position:240% center; } }

/* ---------- buttons ---------- */
.btn{
  --b1:#f3d99a; --b2:#e1b866; --b3:#bd9038;
  position:relative;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-display);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(.72rem,.4vw + .62rem,.86rem);
  text-decoration:none; cursor:pointer;
  padding:1.02em 2.1em;
  border-radius:999px; border:0;
  overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.btn--gold{
  color:#5a3a10;
  background:linear-gradient(145deg,var(--b1),var(--b2) 45%,var(--b3));
  box-shadow:0 14px 30px -12px rgba(193,138,52,.6), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(150,108,40,.35);
}
.btn--gold::before{ /* shimmer sweep */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease);
}
.btn--gold:hover{ transform:translateY(-3px) scale(1.02); filter:brightness(1.04); box-shadow:0 22px 44px -14px rgba(193,138,52,.72), inset 0 1px 0 rgba(255,255,255,.7); }
.btn--gold:hover::before{ transform:translateX(130%); }
.btn--gold:active{ transform:translateY(-1px) scale(.99); }
.btn__spark{ font-size:.9em; animation:twinkle 2.4s ease-in-out infinite; }
.btn--block{ display:flex; width:100%; justify-content:center; margin-top:.4rem; }

.btn--ghost{
  color:var(--rose-deep); background:transparent;
  border:1px solid rgba(194,98,138,.5);
  box-shadow:none; letter-spacing:.14em;
}
.btn--ghost:hover{ background:rgba(232,161,181,.14); border-color:var(--rose-deep); transform:translateY(-2px); }
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.8rem;
}
.btn--calendar{
  background:rgba(255,253,247,.62);
  backdrop-filter:blur(4px);
}

/* ---------- navigation ---------- */
.nav{
  position:fixed;
  top:clamp(.8rem,2vw,1.2rem);
  left:50%;
  z-index:70;
  display:flex;
  align-items:center;
  gap:.75rem;
  max-width:min(860px,calc(100vw - 2rem));
  padding:.5rem .65rem;
  border:1px solid rgba(184,138,58,.18);
  border-radius:999px;
  background:rgba(255,253,247,.72);
  backdrop-filter:blur(6px);
  box-shadow:0 12px 26px -22px rgba(150,90,120,.5), inset 0 1px 0 rgba(255,255,255,.7);
  transform:translateX(-50%);
}
.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.48rem .78rem;
  border-radius:999px;
  font-family:var(--f-display);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav a:hover{
  background:rgba(232,161,181,.14);
  color:var(--rose-deep);
  transform:translateY(-1px);
}
.nav__brand{
  font-family:var(--f-script) !important;
  font-size:1.65rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--gold-deep) !important;
  padding-inline:1rem !important;
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:.1rem;
}
.nav__rsvp{
  color:#5a3a10 !important;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  margin-left:.5rem;
}
/* hamburger toggle — hidden on desktop, shown on mobile */
.nav__toggle{
  display:none;
  position:relative; z-index:3;       /* stays above the full-screen overlay */
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0 9px; margin-left:auto;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; width:100%; border-radius:2px; background:var(--rose-deep); transition:transform .3s var(--ease), opacity .25s var(--ease); }
.nav.open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:720px){
  .nav{
    left:1rem; right:1rem; transform:none; max-width:none; width:auto;
    justify-content:space-between; gap:.4rem;
    padding:.4rem .5rem .4rem 1rem;
  }
  .nav__toggle{ display:flex; }

  /* --- full-screen overlay menu --- */
  .nav__menu{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; align-items:center; justify-content:center;
    gap:.3rem; padding:5.5rem 1.5rem calc(3.5rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(130% 95% at 50% 0%,
        rgba(255,232,243,.975), rgba(244,235,255,.975) 50%, rgba(255,247,234,.985));
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    opacity:0; visibility:hidden;
    transition:opacity .42s var(--ease), visibility .42s;
  }
  .nav__menu::before{                       /* gold-script header */
    content:"Lili"; font-family:var(--f-script);
    font-size:clamp(2.7rem,13vw,3.6rem); line-height:.9;
    color:var(--gold-deep); margin-bottom:1.4rem;
    opacity:0; transform:translateY(16px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  .nav__menu::after{                        /* closing flourish */
    content:"♥ we can't wait to celebrate with you ♥";
    font-family:var(--f-body); font-style:italic;
    font-size:.92rem; letter-spacing:.02em; color:var(--rose-deep);
    margin-top:1.7rem; opacity:0;
    transition:opacity .55s var(--ease);
  }
  /* hidden resting state for each link (animated in when open) */
  .nav__menu a{
    opacity:0; transform:translateY(16px);
    transition:opacity .5s var(--ease), transform .5s var(--ease),
               background .25s var(--ease), color .25s var(--ease);
  }

  /* when open: let the fixed child escape to the viewport
     (drop transform + backdrop-filter so .nav stops being the containing block) */
  .nav.open{
    z-index:95; transform:none;
    top:0; left:0; right:0; width:100%; max-width:none;
    padding:.78rem 1rem; gap:.4rem; border-radius:0;
    background:transparent; border-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav.open .nav__brand{ visibility:hidden; }
  .nav.open .nav__menu{ opacity:1; visibility:visible; }
  .nav.open .nav__menu::before{ opacity:1; transform:none; transition-delay:.08s; }
  .nav.open .nav__menu::after{ opacity:.85; transition-delay:.42s; }
  .nav.open .nav__menu a{
    display:flex; justify-content:center; align-items:center;
    width:min(330px,82vw); min-height:56px; margin:0;
    padding:.9rem 1.4rem; border-radius:999px;
    font-size:1.02rem; letter-spacing:.26em; color:var(--ink);
    opacity:1; transform:none;
  }
  .nav.open .nav__menu a:hover,
  .nav.open .nav__menu a:active{ background:rgba(232,161,181,.16); color:var(--rose-deep); }
  .nav.open .nav__menu a:nth-child(1){ transition-delay:.14s; }
  .nav.open .nav__menu a:nth-child(2){ transition-delay:.20s; }
  .nav.open .nav__menu a:nth-child(3){ transition-delay:.26s; }
  .nav.open .nav__rsvp{ margin:.4rem 0 0; justify-content:center !important; transition-delay:.32s; }

  .music{ top:auto; bottom:1.1rem; right:1.1rem; }
}

/* ---------- reveal-on-scroll ---------- */
.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease), filter .9s var(--ease);
  transition-delay:var(--rv-d, 0ms);
}
/* entrance flavours (assigned per-section in JS via data-rv) — bold & springy */
.js .reveal[data-rv="left"] { transform:translateX(-66px) rotate(-2deg); }
.js .reveal[data-rv="right"]{ transform:translateX(66px) rotate(2deg); }
.js .reveal[data-rv="scale"]{ transform:scale(.74); }
.js .reveal[data-rv="rise"] { transform:translateY(68px) scale(.92); }
.js .reveal[data-rv="blur"] { transform:translateY(24px); filter:blur(16px); }
.js .reveal[data-rv="drop"] { transform:translateY(-56px) rotate(1.5deg); }
.js .reveal[data-rv="pop"]  { transform:scale(.5); }
.js .reveal[data-rv="swing"]{ transform:translateY(40px) rotate(-9deg); transform-origin:top center; }
.js .reveal[data-rv="zoom"] { transform:scale(1.16); }
.js .reveal[data-rv="flip"] { transform:perspective(900px) rotateX(28deg) translateY(34px); transform-origin:top center; }
/* settled state — listed last so it wins over the flavour transforms */
.js .reveal.in,
.js .reveal[data-rv].in{
  opacity:1; transform:none; filter:none;
  transition-timing-function:cubic-bezier(.34,1.45,.5,1);   /* springy overshoot */
}

/* a gold light glints across each heading as it arrives */
.h2.reveal, .name.reveal{ position:relative; }
.h2.reveal::after, .name.reveal::after{
  content:""; position:absolute; inset:-2% -5%; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.92) 50%, transparent 60%);
  background-size:240% 100%; background-position:210% 0;
  opacity:0; mix-blend-mode:screen;
}
.h2.reveal.in::after, .name.reveal.in::after{ animation:hShimmer 1.5s var(--ease) calc(var(--rv-d, 0ms) + .25s) 1; }
@keyframes hShimmer{ 0%{ background-position:210% 0; opacity:0; } 30%{ opacity:1; } 70%{ opacity:1; } 100%{ background-position:-55% 0; opacity:0; } }

/* slim gold scroll-progress ribbon */
.scroll-prog{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:78;
  transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg, var(--rose), var(--gold-bright) 45%, var(--lilac));
  box-shadow:0 1px 8px rgba(193,138,52,.45);
  pointer-events:none;
}

/* ================================================================
   TALE · "once upon a time" scrollytelling intro
   ================================================================ */
/* the storybook is its OWN fixed, page-snapping stage — separate from the invitation */
.tale{
  position:fixed; inset:0; z-index:86;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;     /* hide the scrollbar (no white strip) */
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(255,234,244,.7), transparent 60%),
    linear-gradient(180deg, #fdeef6 0%, #f6e9fb 42%, #fff4ea 100%);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.tale::-webkit-scrollbar{ width:0; height:0; display:none; }
.tale.is-leaving{ opacity:0; transform:translateY(-3%) scale(1.05); pointer-events:none; }
/* a soft moon-glow that stays pinned behind the whole story */
.tale__glow{
  position:sticky; top:0; height:100vh; margin-bottom:-100vh; z-index:0;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.tale__glow::before{
  content:""; width:min(82vw,720px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 44%,
    rgba(255,246,251,.95), rgba(235,212,245,.42) 42%, rgba(247,214,230,.16) 62%, transparent 73%);
  filter:blur(6px); animation:taleBreathe 9s ease-in-out infinite;
}
@keyframes taleBreathe{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.08); opacity:1; } }

.tale__scenes{ position:relative; z-index:1; }
.tale__scene{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:1.15rem; padding:14vh 1.4rem;
  scroll-snap-align:center; scroll-snap-stop:always;   /* one page per scroll — reads like a book */
}
/* each scene's pieces fade + lift in when the scene reaches centre, and out as it leaves */
.tale__scene > *{ opacity:0; transform:translateY(44px) scale(.96); transition:opacity 1s var(--ease), transform 1.15s var(--ease); }
.tale__scene.is-active > *{ opacity:1; transform:none; }
.tale__scene.is-active > *:nth-child(2){ transition-delay:.12s; }
.tale__scene.is-active > *:nth-child(3){ transition-delay:.24s; }
.tale__scene.is-active > *:nth-child(4){ transition-delay:.36s; }

.tale__line{
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(1.5rem,3.2vw + .55rem,2.9rem); line-height:1.32;
  color:var(--ink); max-width:22ch; margin:0;
}
.tale__line--soft{ color:var(--rose-deep); }
.tale__line--xl{
  font-family:var(--f-display); font-style:normal; font-weight:700; letter-spacing:.01em;
  font-size:clamp(2rem,4.6vw + .6rem,4rem); color:var(--rose-ink); max-width:18ch;
}
.tale__sub{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.36em;
  font-size:clamp(.7rem,1vw,.95rem); color:var(--rose-deep); margin:0; padding-left:.36em;
}
.tale__name{
  font-family:var(--f-hero);
  font-size:clamp(4.2rem,13vw,8.4rem);
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  transform:translateX(-.035em);
  margin:.05rem 0 0;
  padding:.2em .12em .24em;
}
.tale__spark{ font-size:1.7rem; color:var(--gold-deep); }
.tale__cue{
  margin-top:2.4rem; font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.22em; font-size:.64rem; color:var(--ink-soft);
}
.tale__cue b{ display:block; margin-top:.5rem; font-size:1.5rem; color:var(--rose); animation:floaty 2.4s ease-in-out infinite; }

.tale__art{ display:block; width:clamp(120px,17vw,180px); filter:drop-shadow(0 14px 22px rgba(176,110,140,.26)); }
.tale__art svg{ width:100%; height:auto; display:block; }
.tale__art--star{ width:clamp(100px,14vw,150px); animation:floaty 5s ease-in-out infinite; }
.tale__art--crown{ width:clamp(96px,12vw,140px); }
.tale__photo{
  width:clamp(150px,20vw,220px); aspect-ratio:1; object-fit:cover; border-radius:50%;
  border:4px solid #fff; box-shadow:0 14px 30px rgba(176,110,140,.32);
  margin:.2rem auto 0;
}
.tale__art--castle{ width:clamp(190px,26vw,300px); }
.tale__cast{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(1rem,4vw,2.8rem); }
.tale__cast svg{ height:auto; display:block; filter:drop-shadow(0 16px 22px rgba(176,110,140,.28)); }
.tale__cast .tale__bal{ width:clamp(108px,15vw,168px); animation:ballet 5.5s ease-in-out infinite; transform-origin:bottom center; }
.tale__cast .tale__nut{ width:clamp(60px,8.5vw,98px); animation:march 3.4s ease-in-out infinite; transform-origin:bottom center; }

.tale__skip{
  position:fixed; bottom:max(1.1rem,env(safe-area-inset-bottom)); left:1.2rem; z-index:7;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.16em; font-size:.58rem;
  color:var(--ink-soft); text-decoration:none; opacity:.6;
  background:rgba(255,253,247,.7); border:1px solid var(--line); border-radius:999px;
  padding:.5rem .85rem; backdrop-filter:blur(8px); transition:opacity .25s var(--ease), color .25s var(--ease);
}
.tale__skip:hover{ opacity:1; color:var(--rose-deep); }
.tale__enter{ margin-top:1.2rem; }

/* chapter dots — the storybook's "pages" */
.tale__dots{
  position:fixed; right:max(1.5rem,env(safe-area-inset-right)); top:50%; transform:translateY(-50%);
  z-index:6; display:flex; flex-direction:column; gap:.7rem;
}
.tale__dot{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1.5px solid var(--gold-deep); background:transparent; cursor:pointer; opacity:.42;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.tale__dot:hover{ opacity:.85; }
.tale__dot.is-on{ opacity:1; background:var(--gold); transform:scale(1.4); box-shadow:0 0 10px rgba(225,184,102,.55); }

@media (max-width:560px){
  .tale__skip{ left:1rem; }
  .tale__dots{ right:1rem; gap:.55rem; }
  .tale__dot{ width:7px; height:7px; }
  /* larger, more immersive story text on phones */
  .tale__scene{ padding:10vh 1.3rem; gap:1rem; }
  .tale__line{ font-size:1.95rem; line-height:1.3; max-width:17ch; }
  .tale__line--xl{ font-size:2.55rem; max-width:13ch; }
  .tale__sub{ font-size:.82rem; letter-spacing:.28em; }
  .tale__name{ font-size:clamp(4.6rem,24vw,7rem); }
}

/* ================================================================
   INTRO · curtains (blush rose velvet)
   ================================================================ */
#intro{ display:none; }
.js #intro{
  display:flex; position:fixed; inset:0; z-index:90;
  align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 38%, #fff6fa, #fbe6ee 70%, #f6d9e6 100%);
}
.curtain{
  position:absolute; top:0; bottom:0; width:54%;
  background:
    linear-gradient(90deg, rgba(150,70,100,.28), transparent 12%, rgba(255,255,255,.30) 50%, transparent 88%, rgba(150,70,100,.28)),
    repeating-linear-gradient(90deg,#eaa9c1 0 10px,#f3c0d5 10px 34px,#e090ad 34px 52px,#f3c0d5 52px 76px);
  box-shadow:inset 0 0 120px rgba(190,110,140,.4);
  transition:transform 1.7s cubic-bezier(.7,0,.2,1);
  will-change:transform;
}
.curtain--left{ left:0; border-right:3px solid rgba(225,184,102,.6);
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
.curtain--right{ right:0; border-left:3px solid rgba(225,184,102,.6);
  -webkit-mask-image:linear-gradient(270deg,#000 88%,transparent); mask-image:linear-gradient(270deg,#000 88%,transparent); }
.valance{
  position:absolute; top:0; left:0; right:0; height:64px; z-index:2;
  background:repeating-linear-gradient(90deg,#f3c0d5 0 34px,#e090ad 34px 52px);
  border-bottom:4px solid var(--gold);
  box-shadow:0 6px 24px rgba(190,110,140,.4);
  -webkit-mask-image:radial-gradient(22px 26px at 22px bottom,transparent 60%,#000 62%);
  mask-image:radial-gradient(22px 26px at 22px bottom,transparent 60%,#000 62%);
  -webkit-mask-size:44px 100%; mask-size:44px 100%; mask-repeat:repeat-x;
  transition:transform 1.2s var(--ease), opacity 1s var(--ease);
}

#intro.open .curtain--left{ transform:translateX(-102%); }
#intro.open .curtain--right{ transform:translateX(102%); }
#intro.open .valance{ transform:translateY(-100%); }
#intro.open .seal{ transform:scale(.85); opacity:0; }
#intro.open{ pointer-events:none; transition:opacity 1s ease 1s; opacity:0; }

.seal{
  position:relative; z-index:3; text-align:center;
  padding:clamp(1.8rem,5vw,3rem) clamp(1.8rem,6vw,4rem);
  border-radius:26px;
  background:rgba(255,253,247,.78);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .8s var(--ease), opacity .8s var(--ease);
}
.seal__crown{ display:flex; justify-content:center; margin-bottom:1rem; animation:floaty 5s ease-in-out infinite; filter:drop-shadow(0 4px 8px rgba(193,138,52,.4)); }
.seal__eyebrow{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.4em; font-size:.72rem; color:var(--rose-deep); margin:0 0 1.1rem; padding-left:.4em; }
.seal__title{
  font-family:var(--f-script);
  font-weight:400;
  font-size:clamp(3.2rem,9vw,5.8rem);
  line-height:1.04;
  margin:.4rem 0 1.7rem;
  padding:.14em 0 .18em;   /* room for the script loops/swash */
  text-transform:none;
}
.seal__sub{ font-style:italic; color:var(--rose-deep); font-size:1.15rem; margin:.4rem 0 1.8rem; }
.seal__hint{ margin:1rem 0 0; font-size:.82rem; letter-spacing:.12em; color:var(--ink-soft); text-transform:lowercase; }

/* ---------- music toggle ---------- */
.music{
  position:fixed; top:18px; right:18px; z-index:80;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  color:#5a3a10;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));
  border:0; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(193,138,52,.7), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .3s var(--ease), filter .3s;
}
.music:hover{ transform:scale(1.08) rotate(-6deg); }
.music__bars{ display:none; gap:2px; align-items:flex-end; height:16px; }
.music__bars i{ width:3px; background:#5a3a10; border-radius:2px; animation:eq 1s ease-in-out infinite; }
.music__bars i:nth-child(2){ animation-delay:.2s } .music__bars i:nth-child(3){ animation-delay:.4s } .music__bars i:nth-child(4){ animation-delay:.6s }
.music.playing .music__on{ display:none; }
.music.playing .music__bars{ display:flex; }
@keyframes eq{ 0%,100%{height:5px} 50%{height:16px} }

/* ================================================================
   STAGE · hero
   ================================================================ */
.stage{
  position:relative; z-index:2;
  min-height:100vh;       /* fallback for engines without svh */
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:6rem clamp(1.2rem,4vw,3rem) 4rem;
  overflow:hidden;
  overflow:clip;   /* same clipping, but doesn't kill the scroll cue's position:sticky */
}
.stage__glow{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:min(940px,124vw); aspect-ratio:1; z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.7), rgba(235,212,245,.4) 38%, transparent 70%);
  filter:blur(8px);
}
.nutcracker{
  position:absolute; right:clamp(-60px,2vw,40px); bottom:-10px; z-index:1;
  width:clamp(150px,22vw,260px);
  filter:drop-shadow(0 24px 30px rgba(176,110,140,.35));
  opacity:1;
}
.castle{
  position:absolute; left:clamp(-40px,2vw,40px); bottom:0; z-index:0;
  width:clamp(230px,31vw,380px);
  filter:drop-shadow(0 24px 30px rgba(176,110,140,.3));
  opacity:.95;
}
.nutcracker svg,.castle svg{ width:100%; height:auto; }

.stage__inner{ position:relative; z-index:2; max-width:min(900px,92vw); }

.crownline{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:.4rem 0 .2rem; }
.crownline .rule{ height:1px; width:clamp(40px,12vw,120px); background:linear-gradient(90deg,transparent,var(--gold-deep),transparent); }
.crownline svg{ filter:drop-shadow(0 2px 4px rgba(193,138,52,.4)); }

.name,
.footer__name{
  display:inline-block;
  width:max-content;
  max-width:100%;
  font-family:var(--f-hero);
  font-weight:400;
  line-height:1;
  text-align:center;
  transform:translateX(-.035em);
}
.name{
  font-size:clamp(5.1rem,17vw,12.5rem);
  margin:.05rem 0;
  padding:.24em .14em .26em;   /* room for the script's tall loops & low swash so clip-text can't crop them */
}
.turns{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.3em; font-size:clamp(.82rem,1.2vw + .4rem,1.25rem); margin:.2rem 0 .5rem; padding-left:.3em; color:var(--rose-deep); }
.turns__num{ font-weight:700; }
.tagline{ font-style:italic; font-size:clamp(1.05rem,1.4vw + .6rem,1.5rem); color:var(--rose-deep); margin:.2rem auto 1.6rem; max-width:32ch; }

.datechip{
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem;
  font-family:var(--f-display); letter-spacing:.08em; font-size:clamp(.74rem,.5vw + .6rem,.92rem);
  text-transform:uppercase; color:var(--ink);
  padding:.7em 1.4em; margin-bottom:2rem;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,253,247,.7); backdrop-filter:blur(4px);
  box-shadow:var(--sh-sm);
}
.datechip__dot{ color:var(--gold-deep); }

/* scroll cue — deliberately loud: many guests don't realise the page continues */
.scrollcue{
  /* sticky, so on short phones it pins to the bottom of the screen instead of
     hiding below the fold — it only scrolls away once the hero is behind you */
  position:sticky; bottom:max(1rem,env(safe-area-inset-bottom)); z-index:4;
  display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  margin-top:2.2rem;
  text-decoration:none; color:var(--rose-deep);
}
.scrollcue__label{
  font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
  letter-spacing:.2em; font-size:clamp(.66rem,.3vw + .58rem,.78rem);
  padding:.62em 1.3em .62em 1.5em;      /* extra left pad balances the tracking */
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,253,247,.9); backdrop-filter:blur(6px);
  box-shadow:var(--sh-sm);
}
.scrollcue__arrow{
  position:relative;
  display:grid; place-items:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  color:var(--cream);
  background:linear-gradient(158deg,var(--rose),var(--rose-deep));
  box-shadow:0 12px 24px -12px rgba(194,98,138,.85);
  animation:cueBounce 1.9s ease-in-out infinite;
}
.scrollcue__arrow::before{      /* halo that ripples outward to catch the eye */
  content:''; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--rose);
  animation:cuePulse 2.4s ease-out infinite;
}
.scrollcue__arrow svg{ width:1.15rem; height:1.15rem; display:block; }
.scrollcue:hover .scrollcue__label{ border-color:var(--rose-deep); color:var(--rose-deep); }
.scrollcue:hover .scrollcue__arrow{ background:linear-gradient(158deg,var(--rose-deep),var(--rose-deep)); }

/* the short-viewport compaction for these lives at the end of the file, so it
   wins over the countdown/clock rules further down */

@keyframes cueBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(9px); } }
@keyframes cuePulse{ 0%{ transform:scale(1); opacity:.6; } 70%,100%{ transform:scale(1.8); opacity:0; } }

/* ================================================================
   shared section frame
   ================================================================ */
section{ position:relative; z-index:2; isolation:isolate; scroll-margin-top:6rem; padding:clamp(4rem,9vw,8rem) clamp(1.2rem,5vw,2rem); }
section::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  z-index:-1;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
}
.story::before{
  background:
    radial-gradient(520px 360px at 14% 26%, rgba(247,214,230,.34), transparent 68%),
    radial-gradient(480px 340px at 88% 78%, rgba(191,220,214,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,253,247,.16), rgba(255,247,232,.42));
}
.baby-photo::before{
  background:
    radial-gradient(620px 360px at 84% 20%, rgba(225,184,102,.18), transparent 70%),
    radial-gradient(540px 420px at 8% 80%, rgba(235,212,245,.26), transparent 72%),
    linear-gradient(180deg, rgba(255,247,232,.22), rgba(247,214,230,.18));
}
.details::before{
  background:
    linear-gradient(180deg, rgba(255,253,247,.46), rgba(235,212,245,.18) 52%, rgba(255,220,200,.2)),
    repeating-linear-gradient(135deg, rgba(184,138,58,.055) 0 1px, transparent 1px 18px);
}
.attire::before{
  background:
    radial-gradient(560px 360px at 18% 20%, rgba(191,220,214,.26), transparent 70%),
    radial-gradient(520px 360px at 86% 72%, rgba(232,161,181,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,253,247,.24), rgba(255,247,232,.4));
}
.faq::before{
  background:
    radial-gradient(580px 360px at 12% 24%, rgba(255,220,200,.24), transparent 70%),
    radial-gradient(560px 380px at 86% 72%, rgba(191,220,214,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,253,247,.36), rgba(247,214,230,.18));
}
.rsvp::before{
  background:
    radial-gradient(520px 360px at 50% 12%, rgba(255,255,255,.56), transparent 72%),
    radial-gradient(680px 440px at 50% 76%, rgba(225,184,102,.18), transparent 70%),
    linear-gradient(180deg, rgba(247,214,230,.18), rgba(255,253,247,.48));
}
.divider{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin:0 auto 2.4rem; max-width:360px; color:var(--gold-deep); }
.divider::before,.divider::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold-deep)); }
.divider::after{ background:linear-gradient(270deg,transparent,var(--gold-deep)); }
.divider__star{ display:flex; filter:drop-shadow(0 3px 5px rgba(193,138,52,.35)); animation:floaty 5s ease-in-out infinite; }
.divider__star svg{ width:46px; height:auto; }

/* ---------- countdown ---------- */
.countdown{ text-align:center; }
.countdown--hero{
  margin:1.15rem auto 1.65rem;
  max-width:min(720px,100%);
}
.countdown--hero .eyebrow{
  margin-bottom:.65rem;
  font-size:clamp(.56rem,.35vw + .5rem,.68rem);
  letter-spacing:.34em;
}
.clock{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(.3rem,1.5vw,1.2rem); flex-wrap:wrap; }
.clock__unit{
  min-width:clamp(74px,16vw,118px);
  padding:1.1rem .6rem .9rem;
  border-radius:18px;
  background:linear-gradient(180deg, var(--cream), #fbeef4);
  border:1px solid var(--line);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.8);
}
.clock__num{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); line-height:1; color:var(--rose-ink); font-variant-numeric:tabular-nums; }
.clock__label{ display:block; margin-top:.5rem; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.24em; font-size:.6rem; color:var(--ink-soft); padding-left:.24em; }
.clock__sep{ font-family:var(--f-display); font-size:clamp(1.4rem,4vw,2.6rem); color:var(--gold-deep); align-self:center; }
.clock__msg{ font-family:var(--f-script); font-size:clamp(2.2rem,6vw,3.6rem); }
.countdown--hero .clock{ gap:clamp(.28rem,1vw,.75rem); }
.countdown--hero .clock__unit{
  min-width:clamp(62px,12vw,92px);
  padding:.78rem .5rem .68rem;
  border-radius:14px;
  background:rgba(255,253,247,.68);
  box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.85);
}
.countdown--hero .clock__num{ font-size:clamp(1.45rem,3.4vw,2.35rem); }
.countdown--hero .clock__label{ margin-top:.34rem; font-size:.54rem; letter-spacing:.18em; padding-left:.18em; }
.countdown--hero .clock__sep{ font-size:clamp(1.1rem,2.6vw,1.8rem); }

/* ---------- story ---------- */
.story{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); align-items:center; max-width:var(--maxw); margin-inline:auto; }
.story__art{ display:flex; justify-content:center; }
.story__art svg{ filter:drop-shadow(0 18px 28px rgba(176,110,140,.32)); animation:floaty 6s ease-in-out infinite; width:clamp(180px,26vw,240px); height:auto; }
.story__copy{ text-align:left; }
.story__copy .h2{ text-align:left; }
.story__copy p{ color:var(--ink); margin:0 0 1.1rem; }
.signoff{ font-family:var(--f-script); font-size:1.6rem; color:var(--rose-deep); line-height:1.3; }
.signoff__name{ font-size:1.9rem; }

/* ---------- baby photo ---------- */
.baby-photo{
  padding-top:clamp(2rem,5vw,4rem);
}
.baby-photo.is-stacked{ min-height:380svh; }
.baby-photo__wrap{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(340px,1fr);
  gap:clamp(1.6rem,4vw,3rem);
  align-items:center;
  max-width:1040px;
  margin-inline:auto;
}
.baby-photo.is-stacked .baby-photo__wrap{
  position:sticky;
  top:0;
  min-height:100svh;
  padding-block:clamp(2rem,5vw,4rem);
}
.baby-photo__copy{
  text-align:left;
}
.baby-photo__copy .h2{
  text-align:left;
}
.baby-photo__copy p{
  max-width:46ch;
  color:var(--ink);
}
.baby-photo__card{
  position:relative;
  min-height:clamp(680px,72vw,920px);
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.baby-photo__frame{
  position:absolute;
  margin:0;
  padding:.48rem;
  border-radius:14px;
  background:linear-gradient(145deg,#fffdf7,#fdf1f6);
  border:1px solid var(--line);
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.85);
  width:min(68%,340px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform, opacity;
}
.baby-photo__frame.card-front{
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.85);
}
.baby-photo__frame.card-behind{
  box-shadow:0 18px 34px -22px rgba(150,90,120,.38), inset 0 1px 0 rgba(255,255,255,.85);
}
.baby-photo.is-stacked .baby-photo__frame{
  left:50%;
  top:50%;
  transition:box-shadow .25s var(--ease);
}
.baby-photo__frame:hover{
  transform:translateY(-4px) rotate(0deg);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.85);
}
.baby-photo__frame--one{
  left:6%;
  top:4%;
  z-index:6;
  transform:rotate(-5deg);
}
.baby-photo__frame--two{
  right:6%;
  top:12%;
  z-index:5;
  transform:rotate(4deg);
}
.baby-photo__frame--three{
  left:14%;
  top:32%;
  z-index:4;
  transform:rotate(3deg);
}
.baby-photo__frame--four{
  right:12%;
  top:44%;
  z-index:3;
  transform:rotate(-4deg);
}
.baby-photo__frame--five{
  left:8%;
  bottom:8%;
  z-index:2;
  transform:rotate(-3deg);
}
.baby-photo__frame--six{
  right:10%;
  bottom:2%;
  z-index:1;
  transform:rotate(5deg);
}
.baby-photo__placeholder{
  display:grid;
  place-items:center;
  min-height:clamp(190px,24vw,280px);
  aspect-ratio:4 / 5;
  border-radius:10px;
  border:1px dashed rgba(184,138,58,.55);
  background:
    radial-gradient(110px 110px at 50% 30%, rgba(255,255,255,.82), transparent 70%),
    linear-gradient(160deg, rgba(247,214,230,.72), rgba(255,247,232,.92) 48%, rgba(235,212,245,.7));
  color:var(--rose-deep);
}
.baby-photo__img{
  width:100%;
  min-height:clamp(190px,24vw,280px);
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.baby-photo__mark{
  font-size:1.5rem;
  color:var(--gold-deep);
  filter:drop-shadow(0 3px 6px rgba(184,138,58,.25));
}
.baby-photo__text{
  margin-top:.3rem;
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.56rem;
  color:var(--ink-soft);
}
.baby-photo__frame figcaption{
  margin:.45rem 0 .05rem;
  text-align:center;
  font-style:italic;
  color:var(--ink-soft);
  font-size:.84rem;
}

/* ---------- details / cards ---------- */
.details{ text-align:center; max-width:var(--maxw); margin-inline:auto; }
.details__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
  gap:clamp(1.2rem,3vw,2rem);
  align-items:start;
  margin-top:2.6rem;
  text-align:left;
}
.details__info,.map-panel{
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,253,247,.92), rgba(253,241,246,.92));
  border:1px solid var(--line);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.8);
}
.details__info{ padding:clamp(1.4rem,3vw,2rem); }
.details__meta{ display:grid; gap:.75rem; }
.detail{
  display:grid;
  gap:.2rem;
  padding:0 0 .85rem;
  border-bottom:1px dashed var(--line);
}
.detail__label{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.66rem;
  color:var(--rose-deep);
}
.detail__value{
  color:var(--ink);
  font-size:1.12rem;
  line-height:1.35;
}
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(1rem,2.5vw,1.6rem); margin-top:2.6rem; }
.card{
  position:relative;
  padding:2.4rem 1.6rem 2rem;
  border-radius:20px;
  background:linear-gradient(180deg, var(--cream), #fdf1f6);
  border:1px solid var(--line);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  overflow:hidden;
}
.card::before{ /* corner gleam */
  content:""; position:absolute; inset:0;
  background:radial-gradient(140px 140px at 100% 0%, rgba(232,161,181,.22), transparent 70%);
  opacity:0; transition:opacity .5s;
}
.card:hover{ transform:translateY(-8px); border-color:rgba(225,184,102,.65); box-shadow:var(--sh-lg); }
.card:hover::before{ opacity:1; }
.card__icon{ display:flex; justify-content:center; margin-bottom:.8rem; color:var(--gold-deep); }
.card__icon svg{ width:34px; height:34px; }
.card__title{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--rose-deep); margin:0 0 .8rem; padding-left:.2em; }
.card__big{ font-family:var(--f-body); font-weight:600; font-size:1.3rem; line-height:1.3; color:var(--ink); margin:0; }
.card__small{ font-size:.95rem; color:var(--ink-soft); margin:.5rem 0 0; }
.card__link{ display:inline-block; margin-top:.7rem; font-family:var(--f-display); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); text-decoration:none; border-bottom:1px solid rgba(184,138,58,.5); padding-bottom:2px; }
.card__link:hover{ color:var(--rose-deep); }

/* ---------- order of the day ---------- */
.program{ margin:1.6rem 0 0; text-align:left; }
.program__row{
  display:grid; grid-template-columns:112px 1fr; gap:1.1rem; align-items:start;
  padding:1.3rem 0;
}
.program__row + .program__row{ border-top:1px dashed var(--line); }
.program__time{
  font-family:var(--f-display); font-weight:700; letter-spacing:.06em;
  color:var(--gold-deep); font-size:1rem; white-space:nowrap; padding-top:.2rem;
  position:relative; padding-left:1.4rem;
}
.program__time::before{ /* bead */
  content:""; position:absolute; left:0; top:.45rem;
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--rose));
  border:2px solid var(--gold);
}
.program__h{ font-family:var(--f-display); font-weight:600; color:var(--rose-ink); font-size:1.15rem; margin:0 0 .2rem; }
.program__p{ margin:0; color:var(--ink-soft); font-size:1rem; }
.map-panel{
  position:sticky;
  top:clamp(1rem,3vw,2rem);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  align-self:start;
}
.map-panel__copy{
  padding:clamp(1.25rem,2.5vw,1.7rem) clamp(1.4rem,3vw,2rem) 1rem;
}
.map-panel__title{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,1.4vw + .9rem,1.7rem);
  line-height:1.15;
  color:var(--rose-ink);
  margin:.35rem 0 .25rem;
}
.map-panel__address{
  color:var(--ink-soft);
  margin:.2rem 0 .2rem;
}
.map-panel__frame{
  height:clamp(260px,30vw,360px);
  border-top:1px solid var(--line);
  background:var(--cream);
}
.map-panel__frame iframe{
  display:block;
  width:100%;
  height:100%;
}

/* ================================================================
   RSVP
   ================================================================ */
.rsvp{ text-align:center; max-width:760px; margin-inline:auto; }
.rsvp__by{ font-style:italic; color:var(--rose-deep); margin:-.6rem 0 2rem; }
.rsvp__panel{
  position:relative;
  text-align:left;
  padding:clamp(1.6rem,4vw,3rem);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,253,247,.92), rgba(253,241,246,.92));
  border:1px solid var(--line);
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.85);
}

.form{ display:flex; flex-direction:column; gap:1.4rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.field{ display:flex; flex-direction:column; gap:.5rem; border:0; padding:0; margin:0; min-width:0; }
.field label, .field legend{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--rose-deep); padding-left:.18em; }
.field__opt{ color:var(--ink-soft); letter-spacing:.1em; }
.field__err{ display:none; color:var(--rose-deep); font-size:.85rem; font-style:italic; letter-spacing:.02em; }
.field.invalid .field__err{ display:block; }
.field.invalid input{ border-color:var(--rose); }

input[type=text],input[type=email],input[type=number],textarea{
  width:100%;
  font-family:var(--f-body); font-size:1.1rem; color:var(--ink);
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.8em 1em;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
textarea{ resize:vertical; line-height:1.5; }
input::placeholder,textarea::placeholder{
  font-family:var(--f-body);
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
  color:rgba(154,130,144,.78);
}
input:focus,textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(225,184,102,.25); background:#fff; }

/* attending toggle */
.toggle{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle__opt{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); text-transform:none; letter-spacing:.04em;
  font-size:.95rem; color:var(--ink); cursor:pointer;
  padding:1em; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.6);
  transition:all .3s var(--ease);
}
.toggle__opt span{ font-size:1.1em; }
.toggle__opt:hover{ border-color:var(--rose); transform:translateY(-2px); }
#yes:checked ~ .toggle__opt--yes{ background:linear-gradient(145deg,var(--baby),var(--blush)); border-color:var(--rose); color:var(--rose-deep); box-shadow:0 0 0 3px rgba(232,161,181,.25); }
#no:checked ~ .toggle__opt--no{ background:linear-gradient(145deg,var(--lilac),#f3e9fb); border-color:#c7a9e0; color:#8a6aa8; box-shadow:0 0 0 3px rgba(199,169,224,.3); }

/* collapse extra fields when declining */
.attending-only{ display:flex; flex-direction:column; gap:1.4rem; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s; max-height:600px; }
.form.declining .attending-only{ max-height:0; opacity:0; pointer-events:none; }

/* stepper */
.stepper{ display:inline-flex; align-items:center; gap:.4rem; }
.stepper__btn{
  width:46px; height:46px; border-radius:14px; cursor:pointer;
  font-family:var(--f-display); font-size:1.4rem; line-height:1;
  color:var(--rose-deep); background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  transition:all .25s var(--ease);
}
.stepper__btn:hover{ background:var(--blush); color:var(--rose-deep); transform:translateY(-2px); }
.stepper__btn:active{ transform:scale(.92); }
.stepper input{ width:72px; text-align:center; font-weight:600; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* treat pills */
.pills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  font-family:var(--f-body); font-size:1rem; cursor:pointer;
  padding:.5em 1.1em; border-radius:999px;
  color:var(--ink); background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  transition:all .25s var(--ease);
}
.pill:hover{ border-color:var(--rose); transform:translateY(-2px); }
.pill.selected{ background:linear-gradient(145deg,var(--baby),var(--peach)); border-color:var(--rose); color:var(--rose-deep); }

.form__note{ text-align:center; font-style:italic; font-size:.92rem; color:var(--ink-soft); margin:.2rem 0 0; }
.form__error{
  margin:0 0 -.4rem; text-align:center; font-weight:600; font-size:.92rem; color:#c14b63;
  background:rgba(232,161,181,.14); border:1px solid rgba(194,98,138,.35);
  border-radius:12px; padding:.6rem .9rem;
}
.form__error[hidden]{ display:none; }

/* ---------- the keepsake ticket ---------- */
.ticket{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:clamp(1rem,4vw,2rem);
  background:rgba(94,69,80,.38);
  backdrop-filter:blur(8px);
  animation:modalIn .35s var(--ease) both;
}
.ticket[hidden]{ display:none; }
.ticket__close{
  position:absolute; top:clamp(.9rem,3vw,1.5rem); right:clamp(.9rem,3vw,1.5rem); z-index:3;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,253,247,.92);
  color:var(--rose-deep); font-size:1rem; line-height:1; cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(94,69,80,.5);
  transition:transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.ticket__close:hover{ transform:scale(1.08) rotate(90deg); background:#fff; color:var(--rose-ink); }
/* hide the floating music button while the keepsake modal is open (it keeps playing) */
body.ticket-open .music{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), visibility .25s; }
.ticket__card{
  display:flex;
  flex-wrap:wrap;
  width:min(720px,100%);
  max-height:min(86svh,720px);
  border-radius:18px;
  overflow:auto;
  box-shadow:var(--sh-lg);
  animation:ticketIn .55s var(--ease) both;
}
@keyframes modalIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ticketIn{ from{ opacity:0; transform:perspective(900px) rotateX(18deg) translateY(30px); } to{ opacity:1; transform:none; } }
.ticket__stub{
  flex:0 0 110px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  background:linear-gradient(160deg,var(--rose),#d97fa0);
  color:#fff;
  position:relative;
  border-right:3px dashed rgba(255,255,255,.7);
}
.ticket__admit{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.28em; font-size:.62rem; padding-left:.28em; writing-mode:vertical-rl; transform:rotate(180deg); }
.ticket__num{ font-family:var(--f-display); font-weight:800; font-size:2.6rem; line-height:1; }
.ticket__body{
  flex:1 1 260px; text-align:center;
  padding:2.2rem 1.6rem;
  background:linear-gradient(180deg, #fffdf7, #fdf3e6);
  color:#5a3a14;
}
.ticket__crown{ display:flex; justify-content:center; margin-bottom:.6rem; }
.ticket__eyebrow{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.24em; font-size:.66rem; color:var(--gold-deep); margin:0 0 .4rem; padding-left:.24em; }
.ticket__name{ font-family:var(--f-script); font-size:clamp(2.4rem,8vw,3.6rem); line-height:1; margin:0; }
.ticket__line{ font-style:italic; color:#9a6a4f; margin:.3rem 0; font-size:1rem; }
.ticket__event{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; margin:.1rem 0 1rem; color:#7a4a24; }
.ticket__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; color:var(--gold-deep); border-top:1px dashed rgba(184,138,58,.5); border-bottom:1px dashed rgba(184,138,58,.5); padding:.7rem 0; margin-bottom:1rem; }
.ticket__msg{ font-style:italic; color:#9a6a4f; margin:0 0 1.2rem; }

/* ---------- footer ---------- */
.footer{
  position:relative;
  isolation:isolate;
  text-align:center;
  padding:clamp(3rem,7vw,6rem) 1.5rem 4rem;
}
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(720px 320px at 50% 0%, rgba(255,255,255,.5), transparent 70%),
    linear-gradient(180deg, rgba(255,247,232,.22), rgba(253,238,222,.72));
}
.footer__love{ font-style:italic; color:var(--rose-deep); font-size:1.2rem; margin:0; }
.footer__name{ font-size:clamp(3rem,10vw,5rem); margin:.05rem auto; padding:.18em .12em .22em; }
.footer__small{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--rose-deep); margin:.4rem 0 1.4rem; padding-left:.16em; }
.footer__credit{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em; }

/* ================================================================
   keyframes
   ================================================================ */
@keyframes twinkle{ 0%,100%{ opacity:.5; transform:scale(.85) rotate(0); } 50%{ opacity:1; transform:scale(1.15) rotate(90deg); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ================================================================
   responsive
   ================================================================ */
@media (max-width:780px){
  .nav{
    top:.7rem;
    left:50%;
    right:auto;
    width:min(92vw,390px);
    max-width:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    transform:translateX(-50%);
    gap:.24rem;
    padding:.36rem .42rem;
    border-radius:22px;
    /* ponytail: backdrop-filter on a fixed bar re-blurs every scroll frame — the
       main mobile scroll-jank source. Solid-ish bg instead, no per-frame blur. */
    background:rgba(255,253,247,.93);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav__links{
    display:flex;
    order:3;
    flex:0 0 100%;
    justify-content:center;
    gap:.12rem;
    overflow:visible;
  }
  .nav a{ min-height:30px; padding:.38rem .54rem; font-size:.54rem; letter-spacing:.07em; }
  .nav__brand{ font-size:1.38rem !important; padding-inline:.78rem !important; }
  .nav__rsvp{ padding-inline:.78rem !important; }
  .music{
    top:auto;
    right:1rem;
    bottom:max(1rem,env(safe-area-inset-bottom));
    width:46px;
    height:46px;
    z-index:75;
  }
  .story{ grid-template-columns:1fr; text-align:center; }
  .story__copy{ text-align:center; }
  .story__copy .h2{ text-align:center; }
  .baby-photo__wrap{ grid-template-columns:1fr; max-width:560px; }
  .baby-photo__copy,.baby-photo__copy .h2{ text-align:center; }
  .baby-photo__copy p{ margin-inline:auto; }
  .baby-photo.is-stacked{ min-height:350svh; }
  .baby-photo.is-stacked .baby-photo__wrap{
    align-content:center;
    gap:1.2rem;
    min-height:100svh;
    padding-block:2rem;
  }
  .baby-photo__card{
    width:min(92vw,420px);
    min-height:52svh;
    margin-inline:auto;
  }
  .baby-photo__frame{ width:min(76vw,300px); }
  .baby-photo__frame:hover{ transform:inherit; }
  .nutcracker{ width:clamp(110px,34vw,170px); opacity:.7; right:-34px; }
  .castle{
    display:block;
    width:clamp(150px,42vw,230px);
    left:-46px;
    bottom:-8px;
    opacity:.48;
  }
  .details__layout{ grid-template-columns:1fr; }
  .map-panel{ position:relative; top:auto; }
  .program__time{ min-width:88px; font-size:.9rem; }
  .map-panel__frame{ height:280px; }
  .clock__unit{ min-width:68px; }
  .clock__sep{ display:none; }
  .clock{ gap:.6rem; }
}
@media (max-width:420px){
  .toggle{ grid-template-columns:1fr; }
  .program__row{ grid-template-columns:1fr; gap:.6rem; }
  .program__time{ padding-bottom:.1rem; }
  .baby-photo.is-stacked{ min-height:320svh; }
  .baby-photo__card{ min-height:50svh; padding:0; }
  .baby-photo__frame{ width:min(78vw,280px); }
  .baby-photo__placeholder,.baby-photo__img{ min-height:150px; }
  .castle{ width:clamp(130px,46vw,180px); left:-58px; bottom:-4px; opacity:.42; }
  .details__info,.map-panel{ border-radius:16px; }
  .map-panel__frame{ height:240px; }
}

/* ================================================================
   reduced motion
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; scroll-behavior:auto !important; }
  .foil{ animation:none; }
  .js .reveal, .js .reveal[data-rv]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .h2.reveal::after, .name.reveal::after{ display:none; }
  .scroll-prog{ display:none; }
  .curtain{ transition:transform .4s ease; }
  .star,.charm,.cast__fig{ animation:none !important; }
  .scrollcue__arrow{ animation:none !important; }
  .scrollcue__arrow::before{ display:none; }   /* the halo has nothing to say when static */
}

/* ================================================================
   Magical extras — twinkling stars · floating charms · footer cast
   ================================================================ */

/* twinkling stars (gentle fixed backdrop) */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.star{
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  background:radial-gradient(circle, #f6e3ad 0 16%, rgba(243,217,154,.55) 30%, transparent 64%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity:.45; animation:twinkleStar 4.5s ease-in-out infinite;
}
.star:nth-child(even){ background:radial-gradient(circle, #f3aecb 0 16%, rgba(243,174,203,.5) 30%, transparent 64%); }
@keyframes twinkleStar{ 0%,100%{ opacity:.15; transform:scale(.6) rotate(0); } 50%{ opacity:.95; transform:scale(1.15) rotate(45deg); } }

/* floating character charms (extra magic in the margins) */
.charm{
  position:absolute; z-index:-1; pointer-events:none; opacity:.85;
  filter:drop-shadow(0 18px 24px rgba(176,110,140,.28));
  animation:floaty 7s ease-in-out infinite;
}
.charm svg{ width:100%; height:auto; display:block; }

.charm--hero-pony{ z-index:1; width:clamp(108px,11vw,150px); left:31%; bottom:3%; opacity:.9; animation-duration:5.5s; }
.charm--story-pony{ width:148px; right:-22px; top:12%; animation-duration:6.5s; }
.charm--details-bal{ width:120px; right:-24px; top:34%; animation-duration:7.5s; }
.charm--rsvp-pony{ width:150px; left:-24px; top:16%; animation-duration:6.8s; }
.charm--rsvp-bal{ width:120px; right:-22px; bottom:12%; animation-duration:8s; }

@media (max-width:1100px){
  .charm--story-pony,.charm--details-bal,.charm--rsvp-pony,.charm--rsvp-bal{ display:none; }
}
@media (max-width:1000px){ .charm--hero-pony{ display:none; } }

/* the little cast, taking a bow in the footer */
.cast{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(.5rem,3vw,2rem); margin:0 auto 2.6rem; max-width:680px;
}
.cast__fig{
  width:auto; height:clamp(94px,15vw,148px);
  filter:drop-shadow(0 16px 20px rgba(176,110,140,.3));
  transform-origin:bottom center; animation:bow 4s ease-in-out infinite;
}
.cast__fig--bal{ animation-delay:.4s; }
.cast__fig--horse{ animation-delay:.8s; }
.cast__fig:nth-child(4){ animation-delay:1.2s; }
.cast__fig:nth-child(5){ animation-delay:1.6s; }
@keyframes bow{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-9px) rotate(-1.5deg); } }
@media (max-width:560px){ .cast{ gap:.3rem; } .cast__fig{ height:78px; } .cast__fig--nut{ display:none; } }

/* ================================================================
   Attire guide
   ================================================================ */
.attire{ text-align:center; max-width:var(--maxw); margin-inline:auto; }
.attire__intro{ max-width:46ch; margin:-.4rem auto 2.4rem; font-style:italic; color:var(--rose-deep); }
.attire__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(1.2rem,3vw,2rem); text-align:left; align-items:stretch; }
.attire-card{
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,3vw,2.2rem);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,253,247,.92), rgba(253,241,246,.92));
  border:1px solid var(--line);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.8);
}
.attire-card__title{ font-family:var(--f-display); font-weight:700; color:var(--rose-ink); font-size:clamp(1.2rem,1.4vw + .9rem,1.6rem); margin:0 0 .6rem; }
.attire-card__lead{ color:var(--ink); margin:0 0 1.3rem; }
.attire-card__label{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--rose-deep); margin:0 0 .9rem; }
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:.8rem; }
.swatch__chip{ display:block; height:52px; border-radius:12px; border:1px solid var(--line); box-shadow:inset 0 2px 6px rgba(255,255,255,.55), var(--sh-sm); }
.swatch__name{ display:block; margin-top:.42rem; text-align:center; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-size:.6rem; color:var(--ink-soft); }
.attire-card__kids{ margin-top:auto; display:flex; justify-content:center; align-items:flex-end; gap:1.1rem; padding-top:1.4rem; }
.attire-card__kids svg{ height:104px; width:auto; filter:drop-shadow(0 12px 16px rgba(176,110,140,.28)); }
.attire__note{
  margin:2.4rem auto 0; max-width:54ch;
  font-style:italic; color:var(--rose-deep);
  background:rgba(255,253,247,.72); border:1px dashed var(--line);
  border-radius:16px; padding:1rem 1.5rem;
}
.attire__note em{ color:var(--rose-ink); font-style:italic; }
.attire__note-star{ color:var(--gold-deep); margin-right:.3em; }
.charm--attire{ width:120px; left:-26px; bottom:8%; }

/* lively, character-specific motion (overrides the generic float) */
.charm--story-pony,.charm--rsvp-pony,.charm--hero-pony{ animation:gallop 4.4s ease-in-out infinite; transform-origin:bottom center; }
.charm--details-bal,.charm--rsvp-bal{ animation:ballet 5.5s ease-in-out infinite; transform-origin:bottom center; }
.charm--attire{ animation:march 3.4s ease-in-out infinite; transform-origin:bottom center; }
.story__art svg{ animation:ballet 6.5s ease-in-out infinite; transform-origin:bottom center; }
@keyframes gallop{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-13px) rotate(3deg); } }
@keyframes ballet{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-9px) rotate(6deg); } }
@keyframes march{ 0%,100%{ transform:rotate(-3.5deg) translateY(0); } 50%{ transform:rotate(3.5deg) translateY(-4px); } }

@media (max-width:1100px){ .charm--attire{ display:none; } }
@media (max-width:780px){
  .attire__grid{ grid-template-columns:1fr; }
  .attire-card__kids svg{ height:92px; }
}

/* ---------- Gifts & Blessings ---------- */
.gifts{ text-align:center; max-width:980px; margin-inline:auto; }
.gifts__intro{ max-width:56ch; margin:0 auto 2.6rem; color:var(--ink); font-size:clamp(1.05rem,.6vw + .95rem,1.25rem); }
.gifts__grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:clamp(1.2rem,3vw,2rem); text-align:left; }
.gift-card{
  flex:1 1 320px; max-width:440px;
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,3vw,2.3rem);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,253,247,.92), rgba(253,241,246,.92));
  border:1px solid var(--line);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.8);
}
.gift-card__icon{ width:62px; height:62px; margin-bottom:1rem; }
.gift-card__icon svg{ width:100%; height:100%; filter:drop-shadow(0 8px 12px rgba(176,110,140,.22)); }
.gift-card__title{ font-family:var(--f-display); font-weight:700; color:var(--rose-ink); font-size:clamp(1.2rem,1.4vw + .9rem,1.55rem); margin:0 0 .5rem; }
.gift-card__lead{ color:var(--ink); margin:0 0 1.2rem; }
/* single centered "A Little Wish for Lili" message card */
.gift-card--wish{ max-width:640px; margin-inline:auto; align-items:center; text-align:center; padding:clamp(2rem,4vw,3rem); }
.gift-card--wish .gift-card__icon{ margin:0 auto 1.2rem; }
.gift-wish__text{ color:var(--ink); font-size:clamp(1.08rem,.55vw + 1rem,1.32rem); line-height:1.75; margin:0; max-width:50ch; }
.gift-ideas{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.gift-ideas li{ position:relative; padding-left:1.6rem; color:var(--ink); }
.gift-ideas li::before{ content:"✦"; position:absolute; left:0; top:.04em; color:var(--gold-deep); font-size:.9em; }

.ewallet{ margin-top:auto; padding-top:1.2rem; display:flex; flex-direction:column; align-items:flex-start; gap:.32rem; }
.ewallet__label{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:var(--rose-deep); }
.ewallet__name{ color:var(--ink-soft); font-size:.96rem; }
.ewallet__num{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:.2rem; padding:.6rem 1rem;
  font-family:var(--f-display); font-weight:600; letter-spacing:.06em; font-size:1.05rem;
  color:#5a3a10;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold));
  border:1px solid rgba(184,138,58,.5); border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--sh-sm);
  cursor:pointer; transition:transform .2s var(--ease), filter .2s var(--ease);
}
.ewallet__num:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.ewallet__num:active{ transform:translateY(0); }
.ewallet__copyicon{ width:16px; height:16px; fill:none; stroke:#5a3a10; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ewallet__hint{ font-size:.78rem; color:var(--ink-soft); font-style:italic; transition:color .2s var(--ease); }
.ewallet.copied .ewallet__hint{ color:var(--rose-deep); font-style:normal; }
.gifts__registry-wrap{ margin-top:2.1rem; }

@media (max-width:560px){
  .gift-card{ flex-basis:100%; }
}

/* ---------- FAQ ---------- */
.faq{
  text-align:center;
  max-width:880px;
  margin-inline:auto;
}
.faq__intro{
  max-width:42ch;
  margin:-.35rem auto 2.2rem;
  color:var(--ink-soft);
  font-style:italic;
}
.faq__list{
  display:grid;
  gap:.85rem;
  text-align:left;
}
.faq__item{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,253,247,.92), rgba(253,241,246,.88));
  box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.82);
}
.faq__item summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:64px;
  padding:1rem 3.4rem 1rem 1.3rem;
  cursor:pointer;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(.9rem,.45vw + .82rem,1.08rem);
  line-height:1.25;
  color:var(--rose-ink);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  position:absolute;
  right:1.15rem;
  top:50%;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  transform:translateY(-50%);
  background:rgba(225,184,102,.18);
  border:1px solid rgba(184,138,58,.32);
  color:var(--gold-deep);
  font-family:var(--f-display);
  font-size:1.1rem;
  line-height:1;
}
.faq__item[open] summary::after{ content:"-"; }
.faq__item p{
  margin:0;
  padding:0 1.3rem 1.15rem;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.55;
}

/* ================================================================
   Florals — watercolour rose clusters
   ================================================================ */
.floral{ position:absolute; pointer-events:none; z-index:1; opacity:.95; filter:drop-shadow(0 8px 12px rgba(176,110,140,.25)); }
.floral svg{ width:100%; height:auto; display:block; }
.floral--hero-l{ width:clamp(118px,15vw,196px); left:-8px; bottom:-8px; }
.floral--hero-r{ width:clamp(118px,15vw,196px); right:-8px; bottom:-8px; transform:scaleX(-1); }
.floral--panel-l{ width:92px; left:-16px; top:-32px; }
.floral--panel-r{ width:92px; right:-16px; top:-32px; transform:scaleX(-1); }
@media (max-width:640px){
  .floral--hero-l,.floral--hero-r{ width:94px; opacity:.85; }
  .floral--panel-l,.floral--panel-r{ width:68px; top:-22px; }
}

/* one rose cluster tucked in a corner of every section */
.floral--corner{ width:116px; opacity:.9; }
.floral--c-tr{ right:8px; top:16px; }
.floral--c-tl{ left:8px; top:16px; transform:scaleX(-1); }
@media (max-width:880px){ .floral--corner{ width:84px; opacity:.8; top:10px; } }
@media (max-width:560px){ .floral--corner{ width:62px; } }

/* rose sprigs flanking every divider bow */
.divider__star{ position:relative; }
.divider__star::before,.divider__star::after{
  content:""; position:absolute; top:50%; width:30px; height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 28 C 1 24 1 15 9 13 C 13 19 12 26 8 28 Z' fill='%23aebf9c'/%3E%3Ccircle cx='21' cy='20' r='12' fill='%23ea9bb6'/%3E%3Cpath d='M27 12 C 15 10 9 22 18 30 C 26 35 36 27 32 17 C 30 12 23 11 19 15 C 16 18 18 24 22 25' fill='none' stroke='%23d77a9c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(176,110,140,.22));
}
.divider__star::before{ right:100%; margin-right:6px; transform:translateY(-50%) scaleX(-1); }
.divider__star::after{ left:100%; margin-left:6px; transform:translateY(-50%); }

/* ================================================================
   Florals anchored to the cards (not floating in the margins)
   ================================================================ */
.floral--corner,.floral--panel-l,.floral--panel-r{ display:none !important; }

.details__info,.attire-card,.rsvp__panel,.baby-photo__copy,.gift-card{ position:relative; }
.details__info::before,.attire-card::before,.rsvp__panel::before,.baby-photo__copy::before,.gift-card::before{
  content:""; position:absolute; z-index:3; top:-22px; right:18px;
  width:66px; height:48px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cpath d='M14 40 C 6 36 4 26 11 22 C 16 28 16 36 14 40 Z' fill='%23aebf9c'/%3E%3Cpath d='M50 40 C 58 36 60 27 53 23 C 48 29 47 37 50 40 Z' fill='%23aebf9c'/%3E%3Ccircle cx='19' cy='28' r='10' fill='%23f3b3c9'/%3E%3Cpath d='M24 22 C 15 20 12 29 18 35 C 24 39 31 32 28 25' fill='none' stroke='%23e090ad' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='45' cy='28' r='10' fill='%23f6c6a8'/%3E%3Cpath d='M50 22 C 41 20 37 29 43 35 C 49 39 56 32 53 25' fill='none' stroke='%23dd9f72' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='20' r='12' fill='%23ea9bb6'/%3E%3Cpath d='M38 13 C 27 11 22 21 29 28 C 36 33 44 26 40 18' fill='none' stroke='%23d77a9c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 5px 7px rgba(176,110,140,.25));
}

/* roses at the ballerina's feet in the story */
.story__art{ position:relative; }
.story__art::after{
  content:""; position:absolute; z-index:2; bottom:-4px; left:50%; transform:translateX(-50%);
  width:120px; height:44px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cpath d='M14 40 C 6 36 4 26 11 22 C 16 28 16 36 14 40 Z' fill='%23aebf9c'/%3E%3Cpath d='M50 40 C 58 36 60 27 53 23 C 48 29 47 37 50 40 Z' fill='%23aebf9c'/%3E%3Ccircle cx='19' cy='28' r='10' fill='%23f3b3c9'/%3E%3Cpath d='M24 22 C 15 20 12 29 18 35 C 24 39 31 32 28 25' fill='none' stroke='%23e090ad' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='45' cy='28' r='10' fill='%23f6c6a8'/%3E%3Cpath d='M50 22 C 41 20 37 29 43 35 C 49 39 56 32 53 25' fill='none' stroke='%23dd9f72' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='20' r='12' fill='%23ea9bb6'/%3E%3Cpath d='M38 13 C 27 11 22 21 29 28 C 36 33 44 26 40 18' fill='none' stroke='%23d77a9c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 5px 7px rgba(176,110,140,.22));
}
@media (max-width:560px){
  .details__info::before,.attire-card::before,.rsvp__panel::before,.baby-photo__copy::before,.gift-card::before{ width:52px; height:38px; top:-16px; right:12px; }
}

/* ================================================================
   Hero scroll cue · short-viewport compaction
   Placed last so it wins over the countdown / clock rules above.
   Goal: on short phones both the buttons AND the "scroll down for more"
   cue must be visible without scrolling — a cue below the fold helps nobody.
   ================================================================ */
@media (max-height:760px){
  .stage{ padding-top:2.6rem; padding-bottom:1.4rem; }
  .stage__inner > .eyebrow{ margin-bottom:.5rem; }
  .crownline{ margin:.2rem 0 .1rem; }
  .name{ font-size:clamp(3.6rem,15vw,12.5rem); }
  .turns{ margin:.15rem 0 .35rem; }
  .datechip{ margin-bottom:.7rem; padding:.55em 1.2em; }
  .countdown--hero{ margin:.55rem auto .85rem; }
  .countdown--hero .eyebrow{ margin-bottom:.4rem; }

  /* the cue collapses to a single line so it takes half the height */
  .scrollcue{
    flex-direction:row; align-items:center; gap:.55rem; margin-top:1.05rem;
    padding:.45em 1em .45em 1.2em;
    border:1px solid var(--line); border-radius:999px;
    background:rgba(255,253,247,.9); backdrop-filter:blur(6px);
    box-shadow:var(--sh-sm);
  }
  .scrollcue__label{ padding:0; border:0; background:none; backdrop-filter:none; box-shadow:none; }
  .scrollcue__arrow{ width:1.65rem; height:1.65rem; animation-name:cueBounceSm; }
  .scrollcue__arrow svg{ width:.9rem; height:.9rem; }
}
@keyframes cueBounceSm{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

@media (max-height:640px){
  .stage{ padding-top:1.4rem; padding-bottom:1rem; }
  .stage__inner > .eyebrow{ margin-bottom:.3rem; }
  .name{ font-size:clamp(3.1rem,15vw,12.5rem); }
  .datechip{ margin-bottom:.5rem; }
  .countdown--hero{ margin:.35rem auto .55rem; }
  .countdown--hero .clock__num{ font-size:clamp(1.3rem,3.4vw,2.35rem); }
  .scrollcue{ margin-top:.8rem; }
}