/* ===== OPENING SPLASH SCREEN ===== */
.splash{
  position:fixed;inset:0;background:#ede7dd;z-index:1000;
  width:100%;height:100vh;height:100dvh; /* dvh: stays full-bleed even while mobile browser toolbar animates in/out */
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:opacity .8s cubic-bezier(.77,0,.175,1), visibility .8s;
  user-select:none;-webkit-user-select:none;touch-action:none; /* belt-and-suspenders: blocks touch-scroll even if body lock fails */
}
.splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash__envelope-container{
  position:relative;z-index:2;width:min(90vw,480px);aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  transition:transform .9s cubic-bezier(.77,0,.175,1), opacity .7s ease;
  filter:drop-shadow(0 14px 44px rgba(42,36,29,.22));
}
.splash__envelope{
  position:absolute;inset:0;
  background-image:url('../assets/photos/envelope.webp');
  background-size:cover;background-position:center;
  border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.splash__seal{
  width:clamp(100px,25vw,140px);aspect-ratio:1/1;
  background-image:url('../assets/photos/wax_seal.webp');
  background-size:contain;background-position:center;background-repeat:no-repeat;
  border:none;background-color:transparent;cursor:pointer;
  position:relative;z-index:10;
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275);
  outline:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
  /* the parent .splash sets touch-action:none to block page-scroll gestures;
     override it here to 'manipulation' so the tap on the seal itself is
     always treated as a fast, unambiguous tap->click by the browser/webview,
     never mistaken for the start of a blocked pan gesture. */
  touch-action:manipulation;
}
.splash__seal:hover{transform:scale(1.08) rotate(-2deg)}
.splash__seal:active{transform:scale(0.96) rotate(1deg)}
.splash__ripple{
  position:absolute;inset:-10px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:seal-ripple 2.5s infinite;pointer-events:none;
}
@keyframes seal-ripple{
  0%{transform:scale(0.85);opacity:0.7}
  100%{transform:scale(1.3);opacity:0}
}
.splash__hint{
  font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:#7a7062;text-align:center;margin-top:28px;line-height:1.5;
  animation:hint-bounce 2s ease-in-out infinite;
}
@keyframes hint-bounce{
  0%,100%{transform:translateY(0);opacity:0.85}
  50%{transform:translateY(-4px);opacity:1}
}

/* Preloader state inside splash */
.splash__preloader{
  position:absolute;inset:0;background:#f4efe6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;opacity:0;visibility:hidden;z-index:5;
  transition:opacity .4s ease, visibility .4s;
}
.splash__preloader.active{opacity:1;visibility:visible}
.preloader__spinner{
  width:50px;height:50px;border:3px solid var(--pink-soft);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 1s linear infinite;
}
.preloader__text{
  font-family:'Unbounded',sans-serif;font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
}

/* graffiti spray decor scattered around the envelope */
.splash__spray{
  position:absolute;z-index:1;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.9;filter:drop-shadow(0 10px 20px rgba(42,36,29,.16));
  transition:opacity .6s ease, transform .6s cubic-bezier(.77,0,.175,1);
}
.splash__spray--blue{
  width:clamp(80px,20vw,160px);aspect-ratio:626/655;
  top:9%;left:6%;transform:rotate(-10deg);
  background-image:url('../assets/decor/spray_blue.webp');
  animation:spraySway 5.5s ease-in-out infinite;
}
.splash__spray--heart{
  width:clamp(74px,17vw,136px);aspect-ratio:1/1;
  bottom:10%;right:7%;transform:rotate(8deg);
  background-image:url('../assets/decor/spray_heart.webp');
  animation:spraySway 6.5s ease-in-out infinite reverse;
}
@keyframes spraySway{
  0%,100%{transform:translateY(0) rotate(var(--r,-10deg))}
  50%{transform:translateY(-8px) rotate(calc(var(--r,-10deg) + 3deg))}
}
.splash__spray--blue{--r:-10deg}
.splash__spray--heart{--r:8deg}

/* Animations for reveal trigger */
.splash.open-animation .splash__envelope-container{
  transform:scale(1.15) rotate(3deg);opacity:0;
}
.splash.open-animation .splash__seal{
  transform:scale(1.4) rotate(10deg);
}
.splash.open-animation .splash__spray--blue{
  opacity:0;transform:scale(1.25) translate(-14px,-10px) rotate(-18deg);animation:none;
}
.splash.open-animation .splash__spray--heart{
  opacity:0;transform:scale(1.25) translate(14px,10px) rotate(16deg);animation:none;
}

/* Prevent scrolling while splash is active.
   This class only handles desktop/mouse-wheel/Android-Chrome cases; the actual
   iOS-Safari-proof lock (position:fixed + saved scrollY) is applied/removed
   via inline styles in JS (see "SPLASH SCREEN" block in main.js), because
   overflow:hidden alone does NOT stop touch-driven scrolling on iOS Safari. */
html.splash-active,body.splash-active{overflow:hidden;height:100%}

/* ===== PALETTE & TOKENS ===== */
:root{
  --cream:#f4efe6;
  --cream-2:#efe8db;
  --ink:#2a241d;
  --accent:#e0592a;      /* orange */
  --accent-d:#c2461d;
  --pink:#f2b8c6;
  --pink-soft:#f9dbe3;
  --lime:#9dcc2a;
  --olive:#8a9a5b;
  --blue:#2b53b5;
  --lilac:#c9b3e0;
  --radius:34px;
  --maxw:720px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;width:100%}
/* Smooth anchor-scrolling (used by the "Подтвердить присутствие" hero button
   -> #rsvp) only for real mouse/trackpad input. Deliberately EXCLUDED for
   touch devices: several Android in-app WebViews (Telegram/Instagram) have a
   known bug where interrupting an in-progress CSS smooth-scroll animation
   with a finger touch can leave the page's scroll state stuck/unresponsive
   until reload. Touch users just get an instant jump instead - still works,
   just not animated. */
@media (hover:hover) and (pointer:fine){
  html{scroll-behavior:smooth}
}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  width:100%;
  position:relative;
}
img{max-width:100%;display:block}
b{font-weight:700}
.muted{opacity:.6}

/* ===== SECTION SHELL ===== */
.sec{
  max-width:var(--maxw);
  margin:44px auto;
  padding:52px 30px;
  border-radius:var(--radius);
  position:relative;
  text-align:center;
  z-index:2;
}
.sec--cream{background:var(--cream-2)}
.sec--pink{background:var(--pink-soft)}
.sec--wide{max-width:1080px}
.sec--accent{background:var(--accent);color:#fff}
.sec--pink .sec__title{color:var(--accent-d)}
.sec--pink .sec__text{color:#7a5560}

/* scalloped fringe hem, permanently attached to the BOTTOM of its own
   section (real DOM sibling right after it, never clipped by overflow:hidden
   on that section). Width always matches ITS OWN section (add
   .scallop-div--wide when that sec is sec--wide). sec--fuse-below flattens
   that section's own bottom corners + kills its own bottom margin so the
   fringe sits flush with zero seam; the NEXT section keeps its full radius +
   full margin-top untouched, which is exactly what keeps blocks visibly
   separate (no more "glued together" cards). */
.sec--fuse-below{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.scallop-div{
  /* height must equal the mask circle's radius so the scallop arc's tip
     starts exactly at the div's top edge (flush against the section above)
     — height was previously 26px vs a 16px radius, leaving a 10px fully
     transparent strip at the top through which the page's body background
     showed through, making the whole thing look like a disconnected,
     "stuck-on" sliver instead of one continuous block. */
  max-width:var(--maxw);margin:0 auto;height:16px;
  position:relative;z-index:2;pointer-events:none;
  /* INVERTED mask: the strip is a solid colored bar whose TOP edge is fully
     opaque (welded flush to the section above it), and we SUBTRACT a row of
     half-circles from its BOTTOM edge so scalloped festoons hang downward.
     The previous mask did the opposite (circles centered on the bottom,
     opaque INSIDE them) which left sharp transparent wedges between adjacent
     arcs along the TOP edge — the page's cream bg showed through those
     wedges, making the hem look like a detached, floating serrated strip.
     Solid-top + notched-bottom reads as one continuous, intentional hem. */
  -webkit-mask:radial-gradient(circle 16px at 50% 0,transparent 99%,#000 100%) repeat-x left top/32px 16px;
          mask:radial-gradient(circle 16px at 50% 0,transparent 99%,#000 100%) repeat-x left top/32px 16px;
}
.scallop-div--wide{max-width:1080px}
.scallop-div--cream{background:var(--cream-2)}
.scallop-div--pink{background:var(--pink-soft)}
.scallop-div--accent{background:var(--accent)}
.scallop-div--outro{background:var(--pink)}


/* big decorative heart blob */
.heartblob{
  position:absolute;pointer-events:none;z-index:0;
  fill:var(--pink);opacity:.55;
}
.heartblob--hero{
  width:min(78vw,720px);top:50%;left:50%;
  transform:translate(-50%,-54%);opacity:.35;z-index:0;
  animation:heartpulse 4.5s ease-in-out infinite;
}
.heartblob--sec{
  width:min(60vw,420px);right:-10%;top:-8%;opacity:.4;
  animation:heartpulseR 6s ease-in-out infinite;transform-origin:center;
}
.heartblob--rsvp{
  width:min(70vw,520px);left:50%;top:50%;
  transform:translate(-50%,-50%);fill:#fff;opacity:.10;
  animation:heartpulseC 5s ease-in-out infinite;
}
.sec--hasheart{overflow:hidden}
.sec--hasheart>:not(.heartblob):not(.confetti){position:relative;z-index:2}
@keyframes heartpulse{0%,100%{transform:translate(-50%,-54%) scale(1)}50%{transform:translate(-50%,-54%) scale(1.05)}}
@keyframes heartpulseC{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes heartpulseR{0%,100%{transform:scale(1) rotate(8deg)}50%{transform:scale(1.05) rotate(8deg)}}
.sec__title{
  font-family:'Unbounded',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.4rem,5vw,2.1rem);
  line-height:1.05;
  margin-bottom:20px;
}
.sec--accent .sec__title{color:#fff}
.sec__text{
  max-width:520px;margin:0 auto;
  font-size:1.02rem;color:#453d33;
}
.sec--accent .sec__text,.sec__text--light{color:#fff}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;
  font-family:'Unbounded',sans-serif;
  font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.06em;
  text-decoration:none;
  padding:15px 30px;border-radius:40px;
  cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease,background .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-d)}
.btn--outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--outline:hover{background:var(--accent);color:#fff}
.btn--light{background:#fff;color:var(--accent)}
.btn--light:hover{background:var(--cream)}
/* jelly wobble on hover */
.btn--jelly:hover{animation:jelly .55s ease}
@keyframes jelly{
  0%{transform:scale(1,1)}25%{transform:scale(1.1,.88)}
  40%{transform:scale(.92,1.08)}60%{transform:scale(1.04,.96)}
  75%{transform:scale(.98,1.02)}100%{transform:scale(1,1)}
}
.prog__cal{margin-top:34px;display:inline-flex;align-items:center;gap:9px}
.btn__ic{width:19px;height:19px;flex:none}

/* wobble micro-animation for section icons */
.ico--wobble{animation:iwobble 5s ease-in-out infinite;transform-origin:center bottom}
@keyframes iwobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}

/* confetti canvas over RSVP */
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:70px 24px 60px;position:relative;z-index:2;
}
.hero__kicker{
  font-family:'Unbounded',sans-serif;text-transform:uppercase;
  letter-spacing:.35em;font-size:.7rem;color:var(--accent);
  margin-bottom:18px;font-weight:600;
}
.hero__title{
  font-family:'Unbounded',sans-serif;font-weight:800;
  text-transform:uppercase;line-height:.92;
  font-size:clamp(3rem,12vw,7rem);
  color:var(--accent);letter-spacing:-.01em;
  /* .hero is a flex column; flex items default to min-width:auto (content-based),
     which lets a long unbreakable word (ЖЕНИМСЯ) overflow past the hero's own
     side padding instead of shrinking to fit — was clipping letters flush against
     the viewport edge on narrow phones. min-width:0 lets it shrink; the wrap
     properties are a safety net so it breaks gracefully instead of overflowing
     if it ever still doesn't fit (very old/narrow devices, zoom, etc). */
  min-width:0;max-width:100%;overflow-wrap:break-word;word-break:break-word;
}
.hero__monogram{
  font-family:'Caveat',cursive;font-size:clamp(2rem,9vw,3.4rem);
  color:var(--ink);margin:6px 0 14px;
}
.hero__monogram span{color:var(--pink);font-weight:700}
.hero__monogram .heart{color:var(--accent)}
.hero__sub{max-width:460px;font-size:1.05rem;color:#5a5145;margin-bottom:34px}
.hero__names{
  font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(1.1rem,4.5vw,1.6rem);text-transform:uppercase;letter-spacing:.03em;
}
.hero__names span{color:var(--pink)}
.hero__date{
  font-size:.95rem;letter-spacing:.15em;text-transform:uppercase;
  color:#7a7062;margin:8px 0 30px;
}
.hero__cta{margin-top:36px}

/* cherubs in hero */
.hero__cherub{
  position:absolute;top:7%;width:min(32vw,240px);aspect-ratio:1/1;
  background-repeat:no-repeat;pointer-events:none;opacity:.95;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.08));
}
.hero__cherub--l{left:-1%;animation:floatL 6s ease-in-out infinite;--ppx:0px}
.hero__cherub--r{right:-1%;animation:floatR 6.6s ease-in-out infinite;--ppx:0px}
@keyframes floatL{0%,100%{transform:translateY(var(--ppx,0px)) rotate(-2deg)}50%{transform:translateY(calc(var(--ppx,0px) - 16px)) rotate(1deg)}}
@keyframes floatR{0%,100%{transform:translateY(var(--ppx,0px)) rotate(2deg)}50%{transform:translateY(calc(var(--ppx,0px) - 20px)) rotate(-1deg)}}

/* ===== COUNTDOWN (elegant ring gauges) ===== */
.countdown{
  display:flex;gap:clamp(10px,3vw,26px);flex-wrap:wrap;justify-content:center;
  margin-top:6px;
}
.cd__cell{
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.cd__ring{
  --p:0;                                   /* progress 0..1 set by JS */
  width:clamp(76px,20vw,104px);aspect-ratio:1/1;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:
    radial-gradient(closest-side,#fff calc(100% - 8px),transparent calc(100% - 7px)),
    conic-gradient(var(--accent) calc(var(--p)*360deg), var(--pink-soft) 0);
  box-shadow:0 10px 26px rgba(224,89,42,.14), inset 0 0 0 1px rgba(224,89,42,.05);
  transition:background .6s ease;
}
.cd__ring::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:#fff;z-index:0;
}
.cd__num{
  position:relative;z-index:1;
  font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,5.5vw,2.1rem);color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1;
}
.cd__lbl{
  font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:#a08d7c;
}
.countdown__done{
  font-family:'Unbounded',sans-serif;font-size:1.3rem;color:var(--accent);font-weight:600;
}

/* ===== ICONS (sprite crop 3x3 from icons.png) ===== */
.ico{
  display:inline-block;width:82px;height:82px;margin:0 auto 14px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.ico--light{filter:brightness(0) invert(1)}     /* white version for accent bg */

@keyframes spin{to{transform:rotate(360deg)}}
.gifts__env{display:block;margin-top:20px}

/* ===== PROGRAM (with illustrations) ===== */
.program{list-style:none;max-width:640px;margin:0 auto;position:relative}
.program__wrap{position:relative;max-width:640px;margin:34px auto 0}
.prog__body{display:flex;flex-direction:column;gap:2px}
.prog__time{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(1.25rem,5vw,1.7rem);
  color:var(--accent);line-height:1;
}
.prog__name{
  text-transform:uppercase;letter-spacing:.04em;font-size:clamp(.78rem,3vw,.92rem);
  font-weight:700;color:#5a5145;
}

/* --- animated stepped/dotted center line, behind the timeline --- */
.program__track{
  position:absolute;left:50%;top:6px;bottom:6px;width:40px;
  transform:translateX(-50%);pointer-events:none;z-index:0;overflow:hidden;
}
.program__track-bg{
  position:absolute;left:0;right:0;top:-60px;bottom:-60px;display:block;
  background-image:
    repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 22px),
    repeating-linear-gradient(45deg, var(--accent) 0 3px,transparent 3px 22px);
  background-position:left top,right top;
  background-size:22px 44px,22px 44px;
  background-repeat:repeat-y;
  opacity:.3;
  animation:progSteps 8s linear infinite;
}
@keyframes progSteps{to{background-position:left -88px,right -88px}}
.program__track-fill{
  position:absolute;left:50%;top:0;width:3px;height:0%;
  transform:translateX(-50%);border-radius:3px;
  background:repeating-linear-gradient(var(--accent) 0 7px,transparent 7px 15px);
  transition:height .25s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 10px rgba(224,89,42,.35);
}


/* handwritten pointer note on the 5th program item ("Церемония") — placed to
   the LEFT of the center dot-line (not centered above it), so it never
   overlaps the icon circles or connecting line of neighbouring items */
.program--zigzag .prog--hint{padding-top:6px}
.prog--hint .handnote--prog{
  position:absolute;right:calc(50% + var(--dot)/2 + 14px);top:-38px;
  transform:rotate(-4deg);
  white-space:nowrap;font-size:clamp(.9rem,2.9vw,1.15rem);z-index:3;
}
.prog--hint .handnote__arrow{
  position:absolute;left:100%;top:60%;width:clamp(30px,5vw,42px);height:auto;
  transform:scaleX(-1) rotate(8deg);
}
@media(max-width:640px){
  .program--zigzag .prog--hint{padding-top:44px}
  .prog--hint .handnote--prog{
    right:auto;left:calc(var(--dot) + 14px);top:-2px;transform:rotate(-3deg);
  }
  .prog--hint .handnote__arrow{
    left:auto;right:100%;top:80%;transform:scaleX(1) rotate(-70deg);
  }
}

/* --- ZIGZAG layout: illustration circles alternate left/right of a center line --- */
.program__wrap{--dot:clamp(62px,11vw,86px)}
.program--zigzag .prog{
  display:grid;grid-template-columns:1fr var(--dot) 1fr;align-items:center;
  gap:clamp(10px,3vw,20px);padding:7px 0;position:relative;z-index:1;
}
.program--zigzag .prog__img{
  grid-column:2;grid-row:1;justify-self:center;
  width:var(--dot);height:var(--dot);
  border-radius:50%;background:#fff;border:2px solid var(--accent);
  background-repeat:no-repeat;background-position:center;background-size:70%;
  box-shadow:0 7px 18px rgba(224,89,42,.14);
  transition:transform .3s ease;
}
.program--zigzag .prog:hover .prog__img{transform:scale(1.08) rotate(-4deg)}
.program--zigzag .prog__body{grid-column:1;grid-row:1;text-align:right;padding-right:6px}
/* odd items -> body on the RIGHT, even -> body on the LEFT */
.program--zigzag .prog:nth-child(even) .prog__body{grid-column:3;text-align:left;padding-left:6px;padding-right:0}
/* connector dot pulse ring */
.program--zigzag .prog__img::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--pink);opacity:0;
}
@media(prefers-reduced-motion:reduce){
  .program__track-bg{animation:none!important}
  .program__track-fill{transition:none!important}
}


/* ===== VENUE ===== */
.venue__card{
  max-width:440px;margin:26px auto 0;background:#fff;
  border:2px solid var(--pink-soft);border-radius:24px;
  padding:26px 28px;box-shadow:0 14px 34px rgba(42,36,29,.07);
}
.venue__kicker{
  font-family:'Unbounded',sans-serif;text-transform:uppercase;letter-spacing:.22em;
  font-size:.62rem;color:var(--accent);font-weight:600;
}
.venue__name{font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.6rem;color:var(--ink);margin:6px 0 12px}
.venue__addr{font-size:.98rem;color:#5a5145;line-height:1.5}
.venue__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px}

/* Yandex-styled buttons */
.ybtn{
  display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  padding:12px 22px 12px 14px;border-radius:16px;
  transition:transform .15s ease,box-shadow .2s ease;
  min-width:210px;
}
.ybtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.ybtn__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.ybtn__txt{display:flex;flex-direction:column;text-align:left;line-height:1.15}
.ybtn__txt b{font-family:'Unbounded',sans-serif;font-weight:600;font-size:.92rem}
.ybtn__txt small{font-size:.72rem;opacity:.7}
/* Navigator: dark background, yellow arrow */
.ybtn--nav{background:#1a1a1a;color:#fff}
.ybtn--nav .ybtn__ic{background:#ffcc00}
.ybtn__ic--nav::before{
  content:"";width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:20px solid #1a1a1a;transform:rotate(38deg);
  border-radius:2px;
}
/* Go: yellow background, black text */
.ybtn--go{background:#ffcc00;color:#1a1a1a}
.ybtn--go .ybtn__ic{background:#1a1a1a}
.ybtn__ic--go::before{
  content:"Go";font-family:'Unbounded',sans-serif;font-weight:800;font-size:1rem;color:#ffcc00;
}
.venue__site{
  display:inline-block;margin-top:18px;color:var(--accent);text-decoration:none;
  font-weight:700;font-size:.9rem;border-bottom:2px solid var(--pink);padding-bottom:2px;
  transition:opacity .15s;
}
.venue__site:hover{opacity:.7}

/* venue photo gallery: taped scrapbook (big + row of 3) */
.venue__gallery{margin-top:40px}
.venue__hero{position:relative;display:flex;justify-content:center;margin-bottom:34px}
.vph{
  margin:0;background:#fff;padding:10px 10px 14px;border-radius:3px;
  box-shadow:0 12px 30px rgba(42,36,29,.2);position:relative;
  transition:transform .25s ease;
}
.vph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(1.05) contrast(1.02)}
.vph:hover{transform:scale(1.02) rotate(0);z-index:6}
.vph--big{width:min(88%,720px);transform:rotate(1.5deg)}
.vph--big img{aspect-ratio:16/10}
/* row of 3 spread wider across the section */
.venue__row{display:flex;gap:clamp(14px,3vw,32px);justify-content:center;flex-wrap:wrap;margin:0 auto;max-width:100%}
.venue__row .vph{width:clamp(180px,31%,280px)}
.venue__row .taped--l{transform:rotate(-5deg)}
.venue__row .taped--c{transform:rotate(2deg) translateY(6px)}
.venue__row .taped--r{transform:rotate(4deg)}
/* handwritten note + arrow */
.handnote{
  position:absolute;left:2%;top:14%;z-index:7;
  font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(1.5rem,4vw,2.3rem);color:var(--accent-d);
  transform:rotate(-8deg);
}
.handnote__arrow{
  position:absolute;left:60%;top:70%;width:clamp(60px,9vw,110px);height:auto;
  transform:rotate(6deg);
}

/* ===== DRESSCODE / PALETTE ===== */
.palette{margin:34px auto;max-width:600px;display:flex;flex-direction:column;gap:26px}
.palette__row{display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:14px}
.palette__lbl{
  font-family:'Unbounded',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.74rem;color:var(--accent);font-weight:600;position:relative;
}
.palette__lbl::before,.palette__lbl::after{
  content:"";position:absolute;top:50%;width:26px;height:2px;background:var(--pink);
}
.palette__lbl::before{right:calc(100% + 12px)}
.palette__lbl::after{left:calc(100% + 12px)}
.palette__chips{
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:14px;row-gap:34px;width:100%;
}
.palette__chips i{
  flex:0 0 calc((100% - 14px*6)/7);aspect-ratio:1/1;border-radius:18px;background:var(--c);
  box-shadow:0 8px 18px rgba(42,36,29,.14), inset 0 0 0 1px rgba(255,255,255,.4);
  position:relative;transition:transform .18s ease;cursor:default;
}
.palette__chips i:hover{transform:translateY(-6px) scale(1.08);z-index:2}
/* always-visible caption under each swatch — row-gap above is sized to fit
   this label without it being covered by the next grid row's swatches */
.palette__chips i::after{
  content:attr(title);
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  font-size:.56rem;letter-spacing:.01em;color:#9a8f80;white-space:nowrap;
  font-weight:600;pointer-events:none;line-height:1.2;
}
.dc__cols{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:stretch;margin-top:20px}
.dc__col{
  flex:1 1 320px;max-width:460px;background:#fff;border-radius:24px;padding:28px 24px 26px;
  border:2px solid var(--pink-soft);text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
/* gender heading now sits ABOVE the photo and is a proper eye-catching
   sub-title — matches the site's Unbounded display type, sized up so it
   clearly labels each column at a glance */
.dc__h{
  font-family:'Unbounded',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,3.4vw,1.5rem);color:var(--accent);
  margin:0 0 20px;letter-spacing:.03em;line-height:1.1;
}
/* column description text — same typography as the site's .sec__text
   (Manrope, same colour/size/leading) so it reads consistently with the
   rest of the page instead of looking like a different, smaller note */
.dc__desc{
  font-size:1.02rem;color:#453d33;line-height:1.55;
  max-width:360px;margin:2px auto 0;
}
/* him/her moodboard photo — centered in its own column. User-supplied
   collages are tall portraits of varying ratio, so DON'T force a fixed
   aspect-ratio/cover-crop. Keep natural ratio; taped polaroid frame hugs it.
   margin auto + block centering keeps it dead-center under the heading. */
/* each column now holds TWO stacked moodboards; this wrapper spaces them
   evenly and keeps them centered under the heading */
.dc__photos{display:flex;flex-direction:column;align-items:center;gap:22px;margin:0 auto 20px}
.dc__photo{width:clamp(230px,90%,340px);margin:0}
/* keep each collage fully visible at its natural ratio (no fixed height /
   crop) — the taped polaroid frame hugs whatever ratio the image has */
.dc__col .dc__photo img{height:auto;filter:saturate(1.03) contrast(1.02)}

/* compact palette that lives INSIDE a dresscode column — 6 swatches in one
   centered row per gender, separate from the old full-width single palette */
.palette--dc{margin:0 auto 20px;max-width:100%;gap:0;width:100%}
.palette--dc .palette__chips{column-gap:10px;row-gap:26px;justify-content:center}
.palette--dc .palette__chips i{
  flex:0 0 calc((100% - 10px*5)/6);border-radius:12px;
}
/* photos sit straight & perfectly centered in their column (no rotate — a
   tilt on these wide collages visually shoved them off to one side); subtle
   scale on hover only */
.dc__col--him .dc__photo,.dc__col--her .dc__photo{transform:rotate(0)}
.dc__col--him .dc__photo:hover,.dc__col--her .dc__photo:hover{transform:scale(1.03)}
.dc__photo{transition:transform .25s ease}

/* ===== RSVP FORM ===== */
.rsvp{max-width:440px;margin:28px auto 0;text-align:left;display:flex;flex-direction:column;gap:18px}
.rsvp__field{display:flex;flex-direction:column;gap:7px}
.rsvp__field span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff}
.rsvp input[type=text]{
  border:none;border-radius:14px;padding:15px 16px;font-size:1rem;
  font-family:inherit;background:#fff;color:var(--ink);
}
.rsvp input[type=text]:focus{outline:3px solid var(--pink)}
.rsvp__choice{border:none;display:flex;flex-direction:column;gap:10px}
.rsvp__choice legend{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff;margin-bottom:8px}
.opt{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.4);border-radius:14px;padding:13px 16px;cursor:pointer;
  color:#fff;font-weight:600;
  transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;
}
.opt:hover{background:rgba(255,255,255,.24)}
.opt input{accent-color:#fff;width:18px;height:18px;flex:none}
/* SELECTED STATE — previously the only feedback was the tiny native radio
   dot, which is white-on-white here (accent-color:#fff, painted on a
   translucent white card) and effectively invisible → guests couldn't tell
   which option was picked. Now the whole option card flips to solid white
   with a checkmark badge, matching the site's existing "white card on
   accent background" language (venue card, submit button), so the choice is
   unmistakable at a glance. `.is-checked` is toggled by JS (main.js) instead
   of relying purely on `:has()` so it also works in older in-app WebViews
   (Telegram/Instagram Android) that may not support `:has()` yet. */
.opt.is-checked{
  background:#fff;border-color:#fff;color:var(--accent-d);
  box-shadow:0 10px 26px rgba(42,36,29,.18);
}
.opt.is-checked input{accent-color:var(--accent-d)}
.opt__check{
  flex:none;width:22px;height:22px;border-radius:50%;margin-left:auto;
  display:none;place-items:center;background:var(--accent-d);color:#fff;
  font-size:.8rem;line-height:1;
}
.opt.is-checked .opt__check{display:grid}
.rsvp__submit{margin-top:6px;align-self:stretch;text-align:center}
.rsvp__note{min-height:1.2em;font-weight:700;color:#fff;text-align:center}
.rsvp__note.ok{color:#fff}
.rsvp__note.err{color:#3a1a10}

/* ===== TOAST (polished RSVP submit confirmation popup) ===== */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:200;
  display:flex;align-items:flex-start;gap:14px;
  width:min(92vw,400px);
  background:#fff;color:var(--ink);
  border-radius:20px;
  padding:16px 16px 16px 14px;
  box-shadow:0 18px 44px rgba(42,36,29,.24),0 2px 10px rgba(42,36,29,.1);
  transform:translateX(-50%) translateY(24px) scale(.96);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.9,.28,1.28),opacity .3s ease,visibility .3s;
}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto}
.toast__icon{
  flex:none;width:36px;height:36px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;background:var(--accent);
  box-shadow:0 6px 14px rgba(224,89,42,.35);
}
.toast__icon svg{width:19px;height:19px}
.toast__icon-err{display:none}
.toast--err .toast__icon{background:#a8402c;box-shadow:0 6px 14px rgba(168,64,44,.35)}
.toast--err .toast__icon-ok{display:none}
.toast--err .toast__icon-err{display:block}
.toast__body{display:flex;flex-direction:column;gap:3px;padding-top:2px;min-width:0}
.toast__title{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink);
}
.toast--err .toast__title{color:#8a2f1f}
.toast__msg{font-size:.86rem;color:#5a5145;line-height:1.4}
.toast__close{
  flex:none;margin-left:auto;background:none;border:none;cursor:pointer;
  font-size:1.3rem;line-height:1;color:#c7bcac;padding:0 0 0 6px;
  transition:color .15s;
}
.toast__close:hover{color:var(--accent)}
@media(max-width:640px){
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:14px 14px 14px 12px;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
  .toast{transition:opacity .2s ease,visibility .2s}
  .toast.show{transform:translateX(-50%)}
}

/* ===== FAQ ===== */
.faq{max-width:560px;margin:14px auto 0;text-align:left;display:flex;flex-direction:column;gap:22px}
.faq__item{background:#fff;border:2px solid var(--pink-soft);border-radius:20px;overflow:hidden;box-shadow:0 8px 20px rgba(42,36,29,.05)}
.faq__q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:20px 24px;font-family:'Manrope';font-weight:700;font-size:1rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq__q::after{content:"+";font-family:'Unbounded';color:var(--accent);font-size:1.3rem;transition:transform .25s}
.faq__item.open .faq__q::after{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px}
.faq__item.open .faq__a{max-height:400px;padding:0 22px 20px}
.faq__a p{font-size:.95rem;color:#5a5145}
.faq__contact{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px}
.faq__contact a{font-weight:700;color:var(--accent-d);text-decoration:none;border-bottom:2px solid currentColor}
.faq__contact a:hover{opacity:.8}

/* ===== OUTRO ===== */
.sec--outro{
  background:var(--pink);      /* solid so scallop separator matches */
  padding:70px 30px;
}
.sec--outro .outro__title{color:var(--accent-d)}
.outro__title{font-family:'Unbounded';font-weight:800;text-transform:uppercase;font-size:clamp(2rem,9vw,3.4rem);color:var(--accent)}
.outro__sub{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--accent-d);margin-top:2px}
.outro__names{font-family:'Caveat',cursive;font-size:2.2rem;color:var(--ink);margin-top:8px}
.outro__date{letter-spacing:.2em;font-size:1rem;color:#6b4a52;margin:6px 0 26px}
.outro__contacts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.outro__contacts a{
  color:var(--accent);text-decoration:none;font-weight:700;
  background:#fff;padding:10px 20px;border-radius:30px;transition:transform .15s;
}
.outro__contacts a:hover{transform:translateY(-2px)}

/* ===== TINY FOOTER FOOTNOTE (coordinator contact, separate from couple's own) ===== */
.footnote{
  max-width:var(--maxw);margin:0 auto;padding:16px 30px 26px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  text-align:left;font-size:.78rem;color:#9c8f7e;
}
.footnote__lbl{opacity:.85}
.footnote a{color:#9c8f7e;text-decoration:underline;text-underline-offset:2px}
.footnote a:hover{color:var(--accent-d)}
@media(max-width:640px){
  .footnote{padding:12px 22px 22px;font-size:.72rem}
}

/* ===== FLOATING DECOR PETALS ===== */
.petals{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.petal{
  position:absolute;top:-60px;opacity:.6;will-change:transform;
}

/* ===== BIG HALF-PAGE FLOWERS ===== */
.bigflower{
  position:absolute;z-index:0;pointer-events:none;
  width:min(52vw,560px);aspect-ratio:1/1;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.5;
}
.bigflower--tl{top:-8vw;left:-14vw;animation:bfspin 60s linear infinite;--ppx:0px}
.bigflower--br{right:-16vw;bottom:6vh;animation:bfspin 80s linear infinite reverse;--ppx:0px}
@keyframes bfspin{from{transform:translateY(var(--ppx,0px)) rotate(0deg)}to{transform:translateY(var(--ppx,0px)) rotate(360deg)}}

/* ===== BIG SIDE STAR-FLOWERS (scattered decor) ===== */
.sideflowers{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.sideflower{
  position:absolute;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.95;filter:drop-shadow(0 10px 22px rgba(42,36,29,.14));
  animation:sway 9s ease-in-out infinite;
  --px:0px;z-index:1;
}
@keyframes sway{0%,100%{transform:translateY(var(--px,0px)) rotate(var(--r,0deg))}50%{transform:translateY(calc(var(--px,0px) - 14px)) rotate(calc(var(--r,0deg) + 4deg))}}

/* ===== TAPE (washi/scotch) MOUNTED PHOTOS ===== */
.taped::before,.taped::after{
  content:"";position:absolute;z-index:5;
  width:74px;height:26px;
  background:rgba(224,225,200,.62);
  box-shadow:0 2px 5px rgba(0,0,0,.12);
  backdrop-filter:blur(1px);
}
/* single top strip variants */
.taped--c::before{top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg)}
.taped--c::after{display:none}
.taped--l::before{top:-13px;left:8%;transform:rotate(-24deg)}
.taped--l::after{top:-13px;right:8%;transform:rotate(22deg)}
.taped--r::before{top:-13px;left:10%;transform:rotate(20deg)}
.taped--r::after{top:-13px;right:9%;transform:rotate(-22deg)}

/* ===== PHOTOBOOTH FRAMES ===== */
.pbframe{
  margin:0;background:#fff;padding:10px 10px 30px;border-radius:4px;
  box-shadow:0 12px 30px rgba(42,36,29,.22);
  position:relative;
}
.pbframe img{
  width:100%;height:100%;object-fit:cover;border-radius:2px;
  filter:grayscale(1) contrast(1.05);
}
/* hero row: three in a row */
.hero__photos{
  display:flex;gap:clamp(10px,3vw,22px);justify-content:center;align-items:flex-start;
  margin:6px 0 34px;flex-wrap:wrap;max-width:640px;
}
.hero__photos .pbframe{width:clamp(120px,26vw,180px)}
.hero__photos .pbframe img{aspect-ratio:3/4}
/* these photos already come with their own vintage 35mm-filmstrip border
   (sprocket holes, frame numbers) baked into the image itself, so we drop
   the extra white polaroid mat + grayscale filter that .pbframe normally
   adds — it would double-frame the picture and look off. Aspect ratio
   matches the supplied art (slightly wider than tall, ~10/9) so cover-crop
   stays minimal and never eats into the sprocket-hole border. */
.pbframe--film{background:transparent;padding:0;box-shadow:0 10px 26px rgba(42,36,29,.22)}
/* exact real dimensions of the supplied filmstrip photos (1280x1130) +
   object-fit:contain (not cover) so the WHOLE photo is always shown,
   nothing cropped off the top/bottom/sides — user explicitly asked for
   full uncropped photos here.
   NOTE: selector deliberately matches ".hero__photos .pbframe img"'s
   specificity (2 classes + element) and comes after it in the file, so it
   reliably wins the cascade — a bare ".pbframe--film img" (1 class) was
   silently LOSING to that more-specific rule's aspect-ratio:3/4, which
   force-cropped these photos into a tall box despite object-fit:contain. */
.pbframe--film img,
.hero__photos .pbframe--film img{filter:none;border-radius:8px;aspect-ratio:1280/1130;object-fit:contain}
.pbframe--a{transform:rotate(-4deg)}
.pbframe--b{transform:rotate(1deg) translateY(-6px)}
.pbframe--c{transform:rotate(5deg)}
.hero__photos .pbframe{transition:transform .25s ease}
.hero__photos .pbframe:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:3}

/* ===== REVEAL ON SCROLL ===== */
/* Deliberately fade-only (NO translateY slide) — a vertical slide-up looked
   fine for a lone section, but every section here is glued flush to a tiny
   ~16px scallop-div connector directly above it (see .scallop-div). While a
   section sat at its pre-reveal transform:translateY(34px) (shifted DOWN
   34px from its true spot) its layout BOX was still reserved at the true
   (un-shifted) position — so a 34px strip of plain page background showed
   through right under the always-solid-colored scallop bar, right up until
   the reveal finished and the block "snapped" up into place. That's exactly
   the "top scallop renders detached from the block below it" bug. Fading
   opacity only, with the box always sitting in its final position from
   frame one, means the section's own background colour simply ramps in
   underneath the scallop with zero positional gap at any point mid-animation. */
.reveal{opacity:0;transition:opacity .7s ease}
.reveal.in{opacity:1}
.reveal-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(2){transition-delay:.07s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.14s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.21s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.28s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.35s}
.reveal-stagger.in>*:nth-child(7){transition-delay:.42s}

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,22,18,.82);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;
  padding:5vw;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__img{
  max-width:90vw;max-height:86vh;border-radius:6px;
  background:#fff;padding:12px 12px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.94);transition:transform .28s cubic-bezier(.2,.7,.2,1);
  object-fit:contain;touch-action:none;
}
.lightbox.open .lightbox__img{transform:scale(1)}
.lightbox__close,.lightbox__nav{
  position:absolute;background:rgba(255,255,255,.14);border:none;color:#fff;
  cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:background .18s,transform .18s;backdrop-filter:blur(4px);
}
.lightbox__close{
  top:22px;right:26px;width:48px;height:48px;font-size:2rem;line-height:1;
}
.lightbox__nav{
  top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:2.4rem;line-height:1;
  font-family:'Unbounded',sans-serif;
}
.lightbox__nav--prev{left:3vw}
.lightbox__nav--next{right:3vw}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.3)}
.lightbox__nav:hover{transform:translateY(-50%) scale(1.08)}
@media(max-width:640px){
  .lightbox__nav{width:44px;height:44px;font-size:1.9rem}
  .lightbox__close{width:42px;height:42px;font-size:1.7rem;top:14px;right:14px}
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .splash__spray--blue{width:clamp(60px,24vw,100px);top:5%;left:2%}
  .splash__spray--heart{width:clamp(56px,20vw,86px);bottom:6%;right:3%}
  .sec{margin:28px 14px;padding:44px 18px;border-radius:28px}
  /* .sec's own shorthand margin above re-sets ALL 4 sides (same specificity,
     later in source than the unconditional .sec--fuse-below rule earlier in
     this file) -> it was silently winning the cascade and undoing the 0
     margin needed to keep a section's own fringe flush against its bottom
     edge. Re-assert it here, after, so the fringe stays flush on mobile too. */
  .sec--fuse-below{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .hero{padding:64px 20px 50px}
  .hero__title{font-size:clamp(2.3rem,12vw,4.2rem)}
  .hero__cherub{width:26vw;top:8%;opacity:.7}
  .hero__kicker{font-size:.6rem;letter-spacing:.24em}
  .ybtn{min-width:0;flex:1 1 100%;justify-content:center}
  .bigflower{opacity:.35;width:70vw}
  /* venue: big on top, then wrap row */
  .vph--big{width:92%}
  .venue__row .vph{width:44%}
  /* palette: 7 cols too tight -> keep but smaller radius; row-gap stays large
     enough for the caption label so it never gets covered by the next row */
  .palette__chips{column-gap:8px;row-gap:30px}
  .palette__chips i{flex-basis:calc((100% - 8px*3)/4);border-radius:12px}
  /* dresscode palettes keep all swatches in one row (6/7) even on mobile —
     they're small chips inside a narrow column, 4-per-row would wrap ugly */
  .palette--dc .palette__chips{column-gap:6px;row-gap:22px}
  .palette--dc .palette__chips i{flex-basis:calc((100% - 6px*5)/6);border-radius:9px}
  /* side flowers: dimmer + smaller */
  .sideflower{opacity:.5}
  .taped::before,.taped::after{width:56px;height:20px}
  /* zigzag -> single column: illustration left, text right */
  .program__wrap{--dot:clamp(70px,20vw,96px)}
  .program__track{left:calc(var(--dot)/2);width:28px}
  .program--zigzag .prog{grid-template-columns:var(--dot) 1fr;gap:16px}
  .program--zigzag .prog__img{grid-column:1}
  .program--zigzag .prog__body,
  .program--zigzag .prog:nth-child(even) .prog__body{
    grid-column:2;text-align:left;padding:0;
  }
  .heartblob--sec{width:80vw;opacity:.3}
  .scallop-div{
    /* match .sec's mobile side margins (14px 12px, fixed not auto) so the
       divider's edges line up exactly with the rounded block above/below it
       instead of spanning full viewport width and looking detached/wider.
       height also must equal the mask circle's radius (11px) — it was 18px,
       leaving a 7px transparent gap at the top showing the body bg through,
       same "detached sliver" bug as the desktop version above. */
    max-width:none;width:auto;margin:0 14px;
    height:11px;
    /* same inverted (solid-top, festoons-hang-down) mask as desktop, scaled
       to the mobile radius; margin matches .sec's 14px mobile side inset so
       the hem lines up exactly under the rounded block above it. */
    -webkit-mask:radial-gradient(circle 11px at 50% 0,transparent 99%,#000 100%) repeat-x left top/22px 11px;
            mask:radial-gradient(circle 11px at 50% 0,transparent 99%,#000 100%) repeat-x left top/22px 11px;
  }
}
@media(max-width:420px){
  .cd__cell .cd__ring{width:70px}
  .cd__lbl{font-size:.55rem;letter-spacing:.14em}
  .hero__photos .pbframe{width:44%}
}
/* ===== BACKGROUND-MUSIC TOGGLE ===== */
/* fixed floating button, bottom-right, above everything; identical behaviour
   on desktop & mobile. Uses env(safe-area-inset-*) so it clears the iPhone
   home-indicator / notch area. */
.soundbtn{
  position:fixed;z-index:1200;
  right:calc(16px + env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;
  border:2px solid #fff;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 6px 18px rgba(42,36,29,.28);
  transition:transform .2s cubic-bezier(.175,.885,.32,1.275),
             background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  /* sits below the splash overlay (z 1000) visually but the splash covers
     the whole screen anyway; hidden until the site is revealed */
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.85);
}
/* revealed once the splash is dismissed (JS adds .soundbtn--ready) */
.soundbtn--ready{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.soundbtn:hover{background:var(--accent-d);transform:translateY(0) scale(1.08)}
.soundbtn:active{transform:translateY(0) scale(.94)}
.soundbtn__ic{width:26px;height:26px;display:block}
/* default = muted: show the OFF (crossed) icon, hide the ON icon.
   when playing, JS adds .is-on and we swap them. */
.soundbtn__ic--on{display:none}
.soundbtn__ic--off{display:block}
.soundbtn.is-on .soundbtn__ic--on{display:block}
.soundbtn.is-on .soundbtn__ic--off{display:none}
/* gentle pulse ring while music is playing so it reads as "active" */
.soundbtn.is-on::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--accent);opacity:.6;
  animation:soundPulse 2.4s ease-out infinite;pointer-events:none;
}
@keyframes soundPulse{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.45);opacity:0}
}
@media(max-width:640px){
  .soundbtn{width:48px;height:48px}
  .soundbtn__ic{width:24px;height:24px}
}

@media(prefers-reduced-motion:reduce){
  .sideflower{animation:none!important}
  .splash__spray{animation:none!important}
  .soundbtn.is-on::after{animation:none;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero__cherub,.petal,.bigflower,.heartblob,.ico--wobble{animation:none!important}
  .btn--jelly:hover{animation:none!important}
  .reveal,.reveal-stagger>*{transition:none;opacity:1;transform:none}
}