/* =========================================================================
   Varun & Jasmine — INVITATION CARD (reveal + flipping two-page card)
   Ported from the verified standalone invitation-preview.html and folded into
   the homepage's Invitation tab. EVERY class here is prefixed `ivc-` so it can
   NEVER collide with the homepage's global .arch/.btn/.card/.corner/.status/
   .step/.f/.done/.seal/.flash/.inv/.events/.evt globals in styles.css.

   Loaded AFTER elevation.css. Scoped under #ivc-stage so it only ever paints
   inside the Invitation section.

   The preserved RSVP form keeps its functional classes (.evt-pick__face,
   .stepper, .stepper__val, .form-status, .rsvp-success, etc.) so script.js's
   wireRsvp finds them unchanged; those are restyled below via the `.ivc-back`
   container scope WITHOUT renaming them.
   ========================================================================= */

#ivc-stage{
  --ivc-ink:#2b2117; --ivc-ink-soft:#4a3a26;
  --ivc-cream:#f8f1e2; --ivc-cream-2:#f2e7cf; --ivc-paper:#fcf7ec;
  --ivc-maroon:#7a1f2e; --ivc-maroon-deep:#5b1622; --ivc-maroon-2:#641a27;
  --ivc-gold:#c9a227; --ivc-gold-soft:#e9cf7a; --ivc-gold-deep:#9c7314; --ivc-gold-ink:#7a560c;
  --ivc-gold-text:#6a4a08;  /* darker gold reserved for small text on cream (legibility) */
  --ivc-green:#1f6b4f; --ivc-green-deep:#155138;
  --ivc-gold-grad:linear-gradient(135deg,#f6e3a1 0%,#c9a227 38%,#9c7314 62%,#e9cf7a 82%,#8a6310 100%);
  --ivc-display:"Cormorant Garamond",Georgia,serif;
  --ivc-script:"Great Vibes",cursive;
  --ivc-label:"Cinzel",Georgia,serif;
  --ivc-body:"EB Garamond",Georgia,serif;
  --ivc-ease:cubic-bezier(.22,.61,.36,1);
  --ivc-ease-out:cubic-bezier(.16,1,.3,1);
  /* Must stay in lockstep with the #main top pad in styles.css:489
     (body.tab-solid #main{padding-top:clamp(40px,6vw,60px)}). The reveal/card
     height maths subtract THIS, not a hardcoded 60px (which over-subtracted ~20px
     on mobile and skewed the card low). */
  --ivc-nav-pad:clamp(40px,6vw,60px);
}

/* STAGE — a single centred grid cell; reveal & card stack in the SAME cell so
   the card is always dead-centre. Lives inside the (already centred) Invitation
   section so we just establish the perspective + stacking context here. */
/* The Invitation tab is a TAB-SPA panel under a fixed ~76px nav. Kill the big global
   .section / .invite-suite padding so the card centres in the VIEWPORT (just below the
   nav) on every screen — not low inside a fixed 760px box. */
#invitation.invite-suite{padding:0}
/* Contain a ~16px phantom horizontal overflow on narrow phones: the flip card's rotated-away
   back face (rotateY 180deg) projects a few px past the viewport, adding a horizontal scroll/
   jiggle on the centerpiece tab. overflow-x:clip removes it with no effect on the centered card,
   the reveal, or vertical scroll (verified: 16px -> 0 at 390px; desktop already 0). */
#invitation{overflow-x:clip}
#ivc-stage{--ivc-pad-top:clamp(20px,3vh,34px);
  position:relative;z-index:1;width:100%;display:grid;place-items:center;box-sizing:border-box;
  /* #main already carries its top pad (fixed-nav clearance) — clamp(40px,6vw,60px), see
     styles.css:489. Subtract the SAME value (var --ivc-nav-pad) so exactly one viewport of
     stage fits — the card then centres true, with no downward skew or overflow, on every width. */
  min-height:calc(100svh - var(--ivc-nav-pad));padding:var(--ivc-pad-top) 12px max(12px,env(safe-area-inset-bottom));
  perspective:1700px;color:var(--ivc-ink);
  font-family:var(--ivc-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#ivc-stage > .ivc-layer{grid-area:1/1;display:grid;place-items:center;width:100%}

.ivc-twinkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ivc-twinkles i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--ivc-gold-soft) 42%,transparent 70%);opacity:0;
  filter:drop-shadow(0 0 4px rgba(233,207,122,.9));animation:ivc-twk 5s var(--ivc-ease) infinite}
@keyframes ivc-twk{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.85;transform:scale(1)}}

/* ===================== REVEAL: traced crest -> flash -> envelope ===================== */
.ivc-opening{position:relative;display:grid;place-items:center;width:min(92%,420px);height:min(72svh,420px);cursor:pointer}
.ivc-opening.gone{pointer-events:none}

/* Hidden until the tap; it materialises at centre as the big crest shrinks down onto it. */
.ivc-envelope{position:absolute;left:50%;top:50%;width:min(78%,300px);aspect-ratio:7/5;
  transform:translate(-50%,-50%) scale(.6);opacity:0;
  filter:drop-shadow(0 24px 44px rgba(43,18,12,.34));
  transition:opacity .7s ease,transform .9s var(--ivc-ease-out)}
.ivc-opening.shrink .ivc-envelope{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ivc-opening.is-gone .ivc-envelope{opacity:0;transform:translate(-50%,-58%) scale(.96);transition:opacity .4s ease,transform .55s var(--ivc-ease)}
.ivc-envelope__body{position:absolute;inset:0;border-radius:12px;overflow:hidden;
  background:linear-gradient(158deg,var(--ivc-maroon) 0%,var(--ivc-maroon-deep) 100%);border:1px solid rgba(233,207,122,.42)}
.ivc-envelope__pocket{position:absolute;inset:0;border-radius:12px;overflow:hidden}
.ivc-envelope__pocket::before,.ivc-envelope__pocket::after{content:"";position:absolute;bottom:0;width:52%;height:70%;
  background:linear-gradient(135deg,var(--ivc-maroon-2),var(--ivc-maroon-deep));border-top:1px solid rgba(233,207,122,.2)}
.ivc-envelope__pocket::before{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.ivc-envelope__pocket::after{right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ivc-envelope__flap{position:absolute;left:0;right:0;top:0;height:58.4%;transform-origin:top center;z-index:6;
  background:linear-gradient(180deg,var(--ivc-maroon-2),var(--ivc-maroon));border:1px solid rgba(233,207,122,.42);
  border-radius:12px 12px 0 0;clip-path:polygon(0 0,100% 0,50% 100%);transition:transform 1.5s var(--ivc-ease)}
.ivc-opening.is-open .ivc-envelope__flap{transform:rotateX(176deg);z-index:1}

/* THE CREST/SEAL — the medallion artwork ALREADY carries its own ornate gold ring, so
   we add NO disc, NO border, NO drawn halo around it (owner direction). Just the art +
   a soft grounding shadow; the "trace" is done by orbiting sparkles + a face shimmer. */
/* The crest is the LARGE hero at idle (~3x). On tap it shrinks down onto the envelope and
   presses like a wax seal, then lifts away. */
.ivc-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);z-index:9;
  width:min(80vw,340px);height:min(80vw,340px);display:grid;place-items:center;
  filter:drop-shadow(0 20px 32px rgba(43,18,12,.3));
  transition:transform .9s var(--ivc-ease),filter .9s ease}
.ivc-opening.shrink .ivc-seal{transform:translate(-50%,-50%) scale(.34);
  filter:drop-shadow(0 10px 16px rgba(43,18,12,.34))}
.ivc-opening.stamp .ivc-seal{transform:translate(-50%,-50%) scale(.3);
  transition:transform .22s var(--ivc-ease);filter:drop-shadow(0 5px 9px rgba(43,18,12,.42))}
.ivc-seal.lift{opacity:0;transform:translate(-50%,-118%) scale(.26) rotate(-6deg);transition:transform 1s var(--ivc-ease),opacity .9s ease}
.ivc-seal img{width:100%;height:100%;object-fit:contain}

/* the drawn halo ring is removed entirely (no .ivc-seal__ring render) */
.ivc-seal__ring{display:none}
@keyframes ivc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ivc-orbit{position:absolute;inset:0;z-index:10;pointer-events:none}
.ivc-orbit b{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0%,var(--ivc-gold-soft) 46%,transparent 72%);filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 11px var(--ivc-gold-soft))}
/* sparkles orbit slowly INSIDE the big medallion, tracing its engraving (not a halo outside) */
.ivc-opening.trace .ivc-orbit{animation:ivc-spin 9s linear infinite}
.ivc-opening.trace .ivc-orbit b{opacity:1}
.ivc-orbit.r2{animation-duration:12s;animation-direction:reverse}
.ivc-orbit.r3{animation-duration:15s}
.ivc-orbit b.s1{transform:translateX(112px)} .ivc-orbit.r2 b.s1{transform:translateX(84px)} .ivc-orbit.r3 b.s1{transform:translateX(134px)}
@keyframes ivc-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ivc-seal__shine{position:absolute;inset:0;border-radius:50%;overflow:hidden;opacity:0}
.ivc-opening.shimmer .ivc-seal__shine{opacity:1}
.ivc-seal__shine::before{content:"";position:absolute;top:-40%;left:-60%;width:55%;height:180%;transform:rotate(8deg);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),rgba(233,207,122,.95),transparent);filter:blur(1.4px)}
/* a slow, perpetual shimmer sweeping across the crest face (clipped to the disc) */
.ivc-opening.shimmer .ivc-seal__shine::before{animation:ivc-sweep 5.5s ease-in-out 1s infinite}
@keyframes ivc-sweep{0%{left:-60%}55%{left:120%}100%{left:120%}}

.ivc-flash{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,252,240,.96),rgba(233,207,122,.45) 30%,transparent 64%)}
.ivc-flash.go{animation:ivc-flash 1.7s var(--ivc-ease) forwards}
@keyframes ivc-flash{0%{opacity:0}32%{opacity:.6}100%{opacity:0}}

/* Anchor the hint's TOP a fixed 16px below the crest's lower edge. min(40vw,170px) is the
   seal's HALF-height (the seal is min(80vw,340px) square, L83-84), so 50% + half-height is the
   medallion's bottom on any viewport. Keep both in lockstep if the seal size changes. */
.ivc-tap-hint{position:absolute;top:calc(50% + min(40vw,170px) + 16px);left:0;right:0;text-align:center;
  font-family:var(--ivc-label);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivc-gold-text);text-shadow:0 1px 2px rgba(248,241,226,.9);opacity:0;transition:opacity .5s ease}
.ivc-tap-hint.show{opacity:1;animation:ivc-bob 2.4s var(--ivc-ease) infinite}
@keyframes ivc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* The crest is the sole keyboard entry point — give it a visible focus ring (none existed). */
#ivc-opening:focus-visible{outline:2px solid var(--ivc-gold);outline-offset:6px;border-radius:18px}
#ivc-opening.gone:focus-visible{outline:none}        /* once revealed it is inert/pointer-none */

/* ===================== CARD (flip) — viewport-fit, internally scrollable ===================== */
/* Height is bounded by the visible area (viewport minus the nav-clearance pad) so the
   card NEVER overflows the screen — no clipped crest, no card pushed past the fold. */
/* The card sits BEHIND the pocket lip (z:1 < lip z:2) so the lip masks its lower edge. */
#ivc-cardWrap{z-index:1}
.ivc-card-wrap{position:relative;width:min(94vw,540px);
  /* Locked to the printed invitation's exact portrait proportion, so the full border art
     (assets/invite-bg.png) paints as the background 1:1 — every corner + edge meets the card
     edge with NO distortion and NO empty tail. max-height keeps it on-screen during the
     centred reveal on short viewports. */
  aspect-ratio:912/1180;
  max-height:calc(100svh - var(--ivc-nav-pad) - var(--ivc-pad-top,30px) - 22px);
  opacity:0;pointer-events:none;
  transform:translateY(-26px) scale(.40);transform-origin:50% 50%}
/* REALISTIC PULL-OUT: the card is drawn UP out of the envelope mouth — portrait & upright the
   whole time (no sideways lie-down). It starts small (≈envelope width, narrower than the 300px
   mouth) with its top peeking above the flap and its lower half hidden behind the pocket lip,
   then grows toward the viewer; the growth itself lifts the top up-and-out while the lip masks
   the base. A faint rotateX tip gives it a touch of "rising toward you" life. */
.ivc-card-wrap.out{pointer-events:auto;animation:ivc-emerge 2s var(--ivc-ease-out) forwards}
/* An explicit "RSVP" tap skips the envelope ceremony: the card is just there, no emerge. */
.ivc-card-wrap.out.ivc-instant{animation:none;opacity:1;transform:none}
@keyframes ivc-emerge{
  0%  {opacity:0;transform:translateY(-26px) scale(.40) rotateX(4deg)}
  10% {opacity:1}
  20% {opacity:1;transform:translateY(-24px) scale(.43) rotateX(3deg)}   /* brief peek: held small while the envelope is still there */
  62% {opacity:1;transform:translateY(-10px) scale(.76) rotateX(1deg)}
  100%{opacity:1;transform:translateY(0)     scale(1)   rotateX(0deg)}
}
/* ENVELOPE-FRONT LIP — a stationary visual twin of the envelope pocket. Sibling of the
   card-wrap inside the transform-free card layer, so z-index resolves directly and it never
   scales with the card. Same size rule as .ivc-envelope so it tracks it on every breakpoint. */
.ivc-lip{position:absolute;left:50%;top:50%;width:min(78%,300px);aspect-ratio:7/5;
  transform:translate(-50%,-50%);z-index:2;pointer-events:none;opacity:0;
  border-radius:12px;overflow:hidden;filter:drop-shadow(0 24px 44px rgba(43,18,12,.34));
  transition:opacity .4s ease,transform .6s var(--ivc-ease-out)}
.ivc-lip::before,.ivc-lip::after{content:"";position:absolute;bottom:0;width:52%;height:70%;
  background:linear-gradient(135deg,var(--ivc-maroon-2),var(--ivc-maroon-deep));border-top:1px solid rgba(233,207,122,.2)}
.ivc-lip::before{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.ivc-lip::after{right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ivc-lip.show{opacity:1}
/* pocket releases the card — fades + drops away as the card clears the mouth (JS-timed) */
.ivc-lip.release{opacity:0;transform:translate(-50%,-42%) scale(.97)}

.ivc-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .95s var(--ivc-ease);border-radius:15px}
.ivc-card.flipped{transform:rotateY(180deg)}
.ivc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:15px;overflow:hidden;
  display:flex;flex-direction:column;background:linear-gradient(180deg,var(--ivc-paper),#f7efdd);border:1px solid rgba(156,115,20,.35);
  box-shadow:0 26px 64px -22px rgba(43,18,12,.5),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 90px rgba(201,162,39,.06)}
.ivc-face--back{transform:rotateY(180deg)}
/* iOS / in-app WebView fix (WhatsApp's WKWebView, reported on a guest's phone): there,
   backface-visibility:hidden is DROPPED when the element also has overflow:hidden + border-radius,
   so BOTH faces render and the away face bleeds through MIRRORED (the invitation showing reversed
   behind the RSVP form). Belt-and-suspenders: ALSO hide the away-facing face with `visibility`,
   switched at the flip's midpoint (~half of the .95s rotation) so the spin still reads on engines
   that DO honor backface-visibility. On WKWebView this turns a PERMANENT mirror into, at worst, a
   brief mid-flip overlap. */
.ivc-card .ivc-face{transition:visibility 0s linear .48s}
.ivc-card .ivc-face--back{visibility:hidden}
.ivc-card.flipped .ivc-face--front{visibility:hidden}
.ivc-card.flipped .ivc-face--back{visibility:visible}
/* RSVP "widget" reads cleaner with no card hairline/corner frame — it's defined by its soft
   float shadow + paper gradient alone (the lone gold outline floating in cream looked like a
   stray border around the form). Front invitation keeps its frame. */
.ivc-face--back{border-color:transparent;box-shadow:0 26px 64px -22px rgba(43,18,12,.5),inset 0 0 90px rgba(201,162,39,.06)}
/* The front invitation is FRAMED by the real printed-invitation border (its centre text
   scrubbed to blank parchment — assets/invite-bg.png) via a 9-slice border-image: the
   ornate corners stay crisp at any card size and the gem-vine edges stretch to meet them,
   so the full border is continuous (no cut, no fade). Our live content sits in the centre. */
.ivc-corner{display:none}                          /* the bg art carries the border now */
/* The front invitation IS the scrubbed printed-invitation parchment + border
   (assets/invite-bg.png), painted 1:1 as the background. The card is locked to the art's
   aspect (above), so this is the EXACT image — every corner + edge meets the card edge with
   no distortion and no empty tail. Our content sits in the cream centre, padded clear of the
   border, and is centred as one group so there's no mid-gap. */
.ivc-face--front{background:url(assets/invite-bg.png) center/100% 100% no-repeat,var(--ivc-paper);
  justify-content:center}
#ivc-invFace .ivc-inv{flex:0 1 auto;padding:6% 12% 2%}
#ivc-invFace .ivc-inv__foot{background:none;padding-top:0;padding-bottom:0}
/* The ornate border is the decoration now — the gold jharokha arch above the names is
   redundant, so it's removed (owner direction). */
#ivc-invFace .ivc-arch{display:none}
.ivc-inv,.ivc-inv__foot{position:relative;z-index:1}

/* FRONT */
/* `safe center`: centres when there's room, but falls back to top-aligned (never clips
   the crest) if the content is taller than the card on a short screen. */
.ivc-inv{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  text-align:center;padding:clamp(8px,2vh,18px) clamp(16px,5vw,30px) clamp(.25rem,1vh,.5rem);gap:clamp(0px,.5vh,.12rem);overflow:auto;
  scrollbar-width:thin;scrollbar-color:rgba(156,115,20,.4) transparent}
/* Both scroll regions show a SLIM themed bar (was display:none, which turned a normal
   overflow into a silent hidden-content bug). The browser only paints it when content
   actually overflows, so the fitted states stay chrome-free. */
.ivc-inv::-webkit-scrollbar{width:5px}
.ivc-inv::-webkit-scrollbar-thumb{background:rgba(156,115,20,.4);border-radius:3px}
.ivc-inv::-webkit-scrollbar-track{background:transparent}
.ivc-rsvp::-webkit-scrollbar{width:6px;height:6px}
.ivc-rsvp::-webkit-scrollbar-thumb{background:rgba(156,115,20,.35);border-radius:3px}
.ivc-rsvp::-webkit-scrollbar-track{background:transparent}
/* Kill the uncontrolled UA <p> margins on the printed lines — they added ~100px of dead
   vertical space (the family lines' child <p> were the worst at ~52px), which is what pushed
   the date+venue off short screens. All inter-line spacing below is intentional (flex gap +
   explicit margin-top on group-starts). */
.ivc-inv__pre,.ivc-inv__sur,.ivc-inv__fam,.ivc-inv__when,.ivc-inv__where{margin-bottom:0}
.ivc-inv__fam p{margin:0}
/* No disc, no ring — the medallion's own gold ring is the only ring. */
.ivc-inv__crest{width:46px;height:46px;display:grid;place-items:center;margin-bottom:.05rem}
.ivc-inv__crest img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 9px rgba(122,86,12,.24))}
.ivc-inv__pre{font-family:var(--ivc-label);text-transform:uppercase;letter-spacing:.32em;font-size:.58rem;color:var(--ivc-maroon);font-weight:600}
.ivc-inv__bless{font-style:italic;color:var(--ivc-ink);font-size:clamp(.74rem,1.7vh,.82rem);max-width:34ch;margin:clamp(0px,.5vh,.12rem) 0 0;line-height:1.3}

/* THE ORNATE ANIMATED ARCH over the names. */
.ivc-arch{position:relative;width:min(46%,140px);margin:clamp(0px,.3vh,.1rem) auto clamp(-.6rem,-1.4vh,-.4rem);color:var(--ivc-gold-deep)}
.ivc-arch svg{display:block;width:100%;height:auto;overflow:visible}
.ivc-arch .ivc-stroke{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ivc-arch .ivc-fillg{fill:var(--ivc-gold-deep)}
.ivc-arch .ivc-draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
/* arch strokes draw on the SAME frame as every other element (rebound from .ivc-is-front,
   which used to start it during emerge, to the one-shot .ivc-draw-on trigger). */
#ivc-invFace.ivc-draw-on .ivc-arch .ivc-draw{animation:ivc-archDraw 1.7s var(--ivc-ease-out) 0s forwards}
@keyframes ivc-archDraw{to{stroke-dashoffset:0}}
.ivc-arch .ivc-comet{fill:none;stroke:url(#ivcCometG);stroke-width:2.4;opacity:0;filter:drop-shadow(0 0 4px rgba(255,247,214,.9));
  stroke-dasharray:26 1174;stroke-dashoffset:0}
.ivc-is-front .ivc-arch .ivc-comet{opacity:1;animation:ivc-archComet 3.6s linear 1.9s infinite}
@keyframes ivc-archComet{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
.ivc-arch .ivc-twk{fill:#fffaf0;opacity:0}
.ivc-is-front .ivc-arch .ivc-twk{animation:ivc-archTwk 2.4s var(--ivc-ease) infinite}
.ivc-is-front .ivc-arch .ivc-twk:nth-of-type(2){animation-delay:.5s}
.ivc-is-front .ivc-arch .ivc-twk:nth-of-type(3){animation-delay:1s}
.ivc-is-front .ivc-arch .ivc-twk:nth-of-type(4){animation-delay:1.5s}
.ivc-is-front .ivc-arch .ivc-twk:nth-of-type(5){animation-delay:.8s}
@keyframes ivc-archTwk{0%,100%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1)}}
/* each pendant sways around ITS OWN top (fill-box) so the side latkans swing in place */
.ivc-arch .ivc-jhumar,.ivc-arch .ivc-jhumar2,.ivc-arch .ivc-jhumar3{transform-box:fill-box;transform-origin:top center}
.ivc-is-front .ivc-arch .ivc-jhumar{animation:ivc-sway 4.2s ease-in-out 2s infinite}
.ivc-is-front .ivc-arch .ivc-jhumar2{animation:ivc-sway 3.5s ease-in-out 2.1s infinite}
.ivc-is-front .ivc-arch .ivc-jhumar3{animation:ivc-sway2 3.9s ease-in-out 2.4s infinite}
@keyframes ivc-sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes ivc-sway2{0%,100%{transform:rotate(2.6deg)}50%{transform:rotate(-2.6deg)}}
/* second comet travels the inner line; the finial star gently pulses */
.ivc-arch .ivc-comet2{stroke-width:1.8}
.ivc-is-front .ivc-arch .ivc-comet2{animation:ivc-archComet 4.4s linear 2.6s infinite}
.ivc-arch .ivc-finial-star{transform-box:fill-box;transform-origin:center;opacity:.88}
.ivc-is-front .ivc-arch .ivc-finial-star{animation:ivc-starPulse 2.6s ease-in-out 1.2s infinite}
@keyframes ivc-starPulse{0%,100%{opacity:.78;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}

/* ============ BLANK CANVAS -> PARALLEL INK-ON ============
   The card emerges as blank paper (the .ivc-face gradient + gold .ivc-corner stay — that IS
   the blank sheet). Once it has settled, JS adds .ivc-draw-on to #ivc-invFace and EVERY
   printed element inks on starting on the SAME frame (all delay:0 = true parallel; only the
   DURATIONS vary so it reads as a simultaneous "develop", not a robotic block). Decoupled from
   .ivc-is-front, which keeps owning the perpetual idle motion, so flip-back never re-blanks. */
/* blank baseline — hide every printed mark; the paper + gold corners stay (that IS the blank
   sheet). The whole .ivc-arch is hidden as ONE unit so no stray pendant string/dot leaks. */
#ivc-invFace .ivc-inv__crest,#ivc-invFace .ivc-inv__pre,#ivc-invFace .ivc-inv__bless,
#ivc-invFace .ivc-inv__names,#ivc-invFace .ivc-inv__sur,#ivc-invFace .ivc-inv__fam,
#ivc-invFace .ivc-inv__when,#ivc-invFace .ivc-inv__where,#ivc-invFace .ivc-inv__foot,
#ivc-invFace .ivc-arch{opacity:0}
/* one trigger -> every line inks on together (fade + settle + ink-soak), in parallel */
#ivc-invFace.ivc-draw-on .ivc-inv__crest,#ivc-invFace.ivc-draw-on .ivc-inv__pre,
#ivc-invFace.ivc-draw-on .ivc-inv__bless,#ivc-invFace.ivc-draw-on .ivc-inv__names,
#ivc-invFace.ivc-draw-on .ivc-inv__sur,#ivc-invFace.ivc-draw-on .ivc-inv__fam,
#ivc-invFace.ivc-draw-on .ivc-inv__when,#ivc-invFace.ivc-draw-on .ivc-inv__where,
#ivc-invFace.ivc-draw-on .ivc-inv__foot{animation:ivc-ink .9s var(--ivc-ease-out) 0s both}
#ivc-invFace.ivc-draw-on .ivc-inv__crest{animation-duration:.7s}
#ivc-invFace.ivc-draw-on .ivc-inv__names{animation-duration:1.15s}
#ivc-invFace.ivc-draw-on .ivc-inv__foot{animation-duration:1.2s}
@keyframes ivc-ink{0%{opacity:0;transform:translateY(6px);filter:blur(2px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
/* the whole ornate arch develops on the SAME frame: the container inks in while its strokes
   draw (stroke-dashoffset). One fade catches every arch sub-part (strings, rosettes, finial)
   so the blank sheet is genuinely blank; the finial-star keeps its own .ivc-is-front pulse. */
#ivc-invFace.ivc-draw-on .ivc-arch{animation:ivc-fillIn 1.5s var(--ivc-ease-out) 0s both}
@keyframes ivc-fillIn{from{opacity:0}to{opacity:1}}

/* line-height 1 + side padding give the Great Vibes swashes room so they never clip
   left/right; the clamp scales down hard on narrow screens. */
.ivc-inv__names{font-family:var(--ivc-script);color:var(--ivc-maroon);line-height:1;margin:.04em 0;font-size:clamp(2.05rem,6.4vw,2.7rem);position:relative;max-width:100%;padding:0 .4em}
/* padding-block + padding-inline extend the background-clip:text paint box past the glyph box
   so the tall Great Vibes ascenders/descenders AND the wide V/J/terminal swashes get the
   gradient fill instead of reading as clipped on the top/bottom or sides. Padding on this
   inline span doesn't change line height or wrapping, so the layout is unaffected. */
.ivc-inv__names .ivc-sheen{background:linear-gradient(100deg,var(--ivc-maroon) 30%,#a8324a 48%,var(--ivc-maroon) 66%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;padding-block:.22em;padding-inline:.2em}
.ivc-is-front .ivc-inv__names .ivc-sheen{animation:ivc-nameSheen 6s ease-in-out 2.4s infinite}
@keyframes ivc-nameSheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.ivc-inv__names:focus,.ivc-inv__names:focus-visible{outline:none}   /* programmatic post-reveal focus landing — no ring */
.ivc-inv__amp{display:block;font-family:var(--ivc-display);font-style:italic;color:var(--ivc-gold-ink);font-size:.4em;margin:.02em 0;-webkit-text-fill-color:var(--ivc-gold-ink)}
.ivc-inv__sur{font-family:var(--ivc-label);letter-spacing:.22em;text-transform:uppercase;font-size:.62rem;color:var(--ivc-gold-text);margin-top:.12rem;font-weight:600}
.ivc-inv__fam{display:grid;gap:.04rem;color:var(--ivc-ink-soft);font-size:clamp(.78rem,1.8vh,.82rem);margin-top:clamp(.1rem,.9vh,.26rem)}
.ivc-inv__fam strong{color:var(--ivc-ink);font-weight:600}
.ivc-inv__when{font-family:var(--ivc-display);font-weight:600;font-size:1.04rem;color:var(--ivc-ink);margin-top:clamp(.1rem,.9vh,.26rem);letter-spacing:.01em}
.ivc-inv__where{font-family:var(--ivc-label);letter-spacing:.16em;text-transform:uppercase;font-size:.56rem;color:var(--ivc-maroon);margin-top:.1rem}
.ivc-inv__foot{flex:0 0 auto;display:grid;gap:clamp(.2rem,.8vh,.4rem);padding:clamp(.16rem,.6vh,.32rem) clamp(16px,5vw,30px) calc(clamp(8px,2vh,16px) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(247,239,221,0),#f7efdd 42%)}
.ivc-readbar{height:2px;width:64%;justify-self:center;background:rgba(156,115,20,.16);border-radius:2px;overflow:hidden}
.ivc-readbar i{display:block;height:100%;width:0;background:var(--ivc-gold-grad)}
.ivc-readbar.run i{animation:ivc-read var(--read,10s) linear forwards}
@keyframes ivc-read{to{width:100%}}

/* BACK: full RSVP + event details, sticky SEND footer.
   MUST stay position:absolute;inset:0 (like the front face) so it is bounded by the card
   and the form scrolls INSIDE it — a bare position:relative here lets the face grow to its
   content and spill the Send button out the bottom. It still anchors the (absolute) success
   overlay because absolute positioning establishes a containing block. */
.ivc-back{position:absolute;inset:0}
.ivc-rsvp{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:clamp(7px,2vw,12px) clamp(13px,4vw,20px) clamp(.3rem,1.5vh,.8rem);overflow:auto;gap:.16rem;scrollbar-width:thin;scrollbar-color:rgba(156,115,20,.35) transparent}
.ivc-rsvp__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ivc-rsvp__back{appearance:none;border:0;background:none;color:var(--ivc-maroon);font-family:var(--ivc-label);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:.5rem .3rem;min-height:44px;display:inline-flex;align-items:center;gap:.3rem;border-radius:8px}
.ivc-rsvp__back:focus-visible{outline:2px solid var(--ivc-gold);outline-offset:2px}
.ivc-rsvp__title{font-family:var(--ivc-display);font-weight:700;font-size:1.3rem;color:var(--ivc-maroon);text-align:center;margin:0}
.ivc-rsvp__title:focus{outline:none}
.ivc-rsvp__title:focus-visible{outline:2px solid var(--ivc-gold);outline-offset:4px;border-radius:6px}
.ivc-rsvp__sub{text-align:center;color:var(--ivc-ink-soft);font-size:.76rem;margin:0 0 .15rem}

/* --- preserved RSVP form fields, restyled within the card-back scope --- */
.ivc-back .form-row{display:grid;gap:.44rem;grid-template-columns:1fr 1fr;margin:0}
.ivc-back .field{display:flex;flex-direction:column;gap:.14rem;min-width:0}
.ivc-back .field.full{grid-column:1/-1}
.ivc-back .field label{font-family:var(--ivc-label);font-size:.82rem;letter-spacing:.01em;text-transform:none;color:var(--ivc-ink);font-weight:600;display:block}
.ivc-back .field .field-req-txt{display:none}
.ivc-back .field input,.ivc-back .field textarea{font-family:var(--ivc-body);font-size:16px;padding:.5rem .66rem;border:1px solid rgba(92,77,58,.34);border-radius:9px;background:#fffdf8;color:var(--ivc-ink);transition:border-color .2s,box-shadow .2s;width:100%}
.ivc-back .field textarea{resize:vertical;min-height:2.6rem}
.ivc-back .field input:focus-visible,.ivc-back .field textarea:focus-visible{outline:none;border-color:var(--ivc-gold);box-shadow:0 0 0 3px rgba(201,162,39,.22)}
.ivc-back .field input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.16)}
/* Most hints stay hidden on the compact card-back (labels + placeholders carry the
   meaning), but the two that change the OUTCOME are shown: the name hint explains the
   guest-list match (type a nickname and you silently fail the match + see all 4 events),
   and the email hint says why we ask. The card-back scrolls (overflow:auto) if needed. */
.ivc-back .field-hint{display:none}
.ivc-back #f-name-hint,.ivc-back #f-email-hint{display:block;font-size:.68rem;line-height:1.32;color:var(--ivc-ink-soft);margin-top:.04rem}
.ivc-back .field-err{color:#b3261e;font-size:.72rem}
.ivc-back .field-err[hidden]{display:none}
.ivc-back .req{color:var(--ivc-maroon)}

.ivc-legend{font-family:var(--ivc-label);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivc-ink-soft);margin:.12rem 0 -.02rem;font-weight:600}

/* --- tap-to-join event cards (preserve .evt-pick* hooks; restyle in scope) --- */
.ivc-back .rsvp-events{border:0;padding:0;margin:0;min-width:0}
.ivc-back .rsvp-events__hint{display:none}
/* Scroll cue above the first celebration — only shown (by invitation-card.js) when the
   RSVP card actually overflows, and hidden the moment the guest scrolls. Bobs to draw the
   eye to the celebrations + Send button below the fold on a phone. */
.ivc-scrollcue{display:none;flex-direction:column;align-items:center;gap:.05rem;margin:.1rem 0 .45rem;
  color:var(--ivc-gold-text);text-align:center;transition:opacity .3s ease}
.ivc-scrollcue.show{display:flex}
.ivc-scrollcue.is-gone{opacity:0;pointer-events:none}
.ivc-scrollcue__txt{font-family:var(--ivc-label);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.ivc-scrollcue__arrow{width:20px;height:20px;animation:ivc-cuebob 1.6s var(--ivc-ease) infinite}
@keyframes ivc-cuebob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.ivc-scrollcue__arrow{animation:none}}
.ivc-back .evt-pick-grid{display:grid;gap:.2rem}
.ivc-back .evt-pick{position:relative;overflow:hidden;border:1px solid rgba(156,115,20,.3);border-radius:12px;background:#fffdf8;border-left-width:4px;border-left-color:var(--j,var(--ivc-gold));transition:border-color .25s,box-shadow .25s,transform .2s}
.ivc-back .evt-pick.is-going{background:linear-gradient(180deg,#e9f5ec,#daeede);border-color:rgba(31,107,79,.55);box-shadow:0 6px 18px -10px rgba(31,107,79,.6)}
.ivc-back .evt-pick[hidden]{display:none}
.ivc-back .evt-pick__input{position:absolute;opacity:0;width:1px;height:1px}
/* The WHOLE card is the toggle — identical centred structure on all four (parallel). */
.ivc-back .evt-pick__face{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.03rem;text-align:center;min-height:58px;padding:.28rem .55rem;cursor:pointer}
.ivc-back .evt-pick__face::before{display:none}                  /* no left checkbox box */
.ivc-back .evt-pick__input:focus-visible + .evt-pick__face{outline:2px solid var(--ivc-gold);outline-offset:-3px;border-radius:11px}
/* the translucent green overlay that washes over the card on join (after the sparkle) */
.ivc-back .evt-pick::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(31,107,79,.12),rgba(31,107,79,.2))}
.ivc-back .evt-pick.is-going::after{animation:ivc-veil .55s ease .14s both}
@keyframes ivc-veil{from{opacity:0}to{opacity:1}}
/* Owner direction: NO check/tick badge on join — the translucent green veil above is the
   only "joined" cue (plus the "Joyfully coming" label). The .evt-pick__check markup is kept
   for the global form context but hidden here on the card back. */
.ivc-back .evt-pick__check{display:none}
.ivc-back .evt-pick__body{display:grid;gap:.05rem;min-width:0}
.ivc-back .evt-pick__name{font-family:var(--ivc-display);font-weight:700;font-size:1.04rem;color:var(--ivc-ink);line-height:1.12}
.ivc-back .evt-pick__date{font-size:.72rem;color:var(--ivc-ink-soft);font-weight:600}
.ivc-back .evt-pick__meta{font-size:.74rem;color:var(--ivc-ink-soft);line-height:1.3}
.ivc-back .evt-pick__meta b{color:var(--ivc-maroon);font-weight:600}
.ivc-back .evt-pick__meta .ivc-tba{color:var(--ivc-gold-text);font-style:italic}
.ivc-back .evt-pick__state{font-family:var(--ivc-label);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.08rem;font-weight:700}
.ivc-back .evt-pick__join{color:var(--ivc-gold-text)}
.ivc-back .evt-pick__going{display:none;color:var(--ivc-green-deep)}
.ivc-back .evt-pick.is-going .evt-pick__join{display:none}
.ivc-back .evt-pick.is-going .evt-pick__going{display:inline}
.ivc-back .evt-map{display:inline-block;margin-top:.16rem;font-family:var(--ivc-label);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivc-gold-ink);text-decoration:none;border-bottom:1px solid rgba(156,115,20,.4)}
.ivc-back .evt-map:focus-visible{outline:2px solid var(--ivc-gold);outline-offset:2px}
.ivc-back .evt-pick__guests{display:flex;align-items:center;gap:.5rem;margin:0 .62rem .55rem;padding-top:.4rem;border-top:1px dashed rgba(156,115,20,.25)}
.ivc-back .evt-pick__guests[hidden]{display:none}
.ivc-back .evt-pick__guests-label{font-size:.72rem;color:var(--ivc-ink-soft);flex:1}
.ivc-back .stepper{display:inline-flex;align-items:center;gap:.15rem;border:0;background:transparent;padding:0;border-radius:0}
.ivc-back .stepper__btn{flex:none;width:44px;height:44px;border:1px solid rgba(156,115,20,.4);background:#fff;border-radius:9px;color:var(--ivc-maroon);font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.ivc-back .stepper__btn:focus-visible{outline:2px solid var(--ivc-gold);outline-offset:2px}
.ivc-back .stepper__val{flex:none;min-width:0;width:46px;height:44px;text-align:center;border-radius:7px;border:1px solid rgba(156,115,20,.3);background:rgba(201,162,39,.1);font-size:16px;font-weight:600;color:var(--ivc-maroon);font-family:var(--ivc-body)}
.ivc-back .stepper__val:focus-visible{outline:2px solid var(--ivc-gold);outline-offset:2px}

.ivc-back .evt-pick-count{text-align:center;font-size:.74rem;color:var(--ivc-ink-soft);margin:.1rem 0 0}
.ivc-back .evt-pick-count__some b{color:var(--ivc-maroon)}
/* static informational note shown under the four celebration cards */
.ivc-back .evt-pick-note{text-align:center;font-size:.72rem;line-height:1.5;color:var(--ivc-ink-soft);margin:.5rem auto 0;max-width:34ch}

/* event details block inline on the back (date/time/venue per event) */
.ivc-details{display:grid;gap:.3rem;margin-top:.1rem}
.ivc-details__row{display:flex;gap:.5rem;align-items:baseline;font-size:.76rem;color:var(--ivc-ink-soft);border-left:3px solid var(--j,var(--ivc-gold));padding-left:.5rem}
.ivc-details__when{font-weight:600;color:var(--ivc-maroon);white-space:nowrap}
.ivc-details__what{flex:1;min-width:0}

.ivc-rsvp__foot{flex:0 0 auto;display:grid;gap:.24rem;padding:.34rem clamp(13px,4vw,20px) calc(clamp(9px,2.6vw,14px) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(247,239,221,0),#f7efdd 45%);border-top:1px solid rgba(156,115,20,.12)}

/* gold button used by the front foot + back send (namespaced; does NOT touch global .btn) */
.ivc-btn{appearance:none;cursor:pointer;border:0;border-radius:999px;font-family:var(--ivc-label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.85rem 1.4rem;min-height:48px;color:#3a2407;background:var(--ivc-gold-grad);box-shadow:0 8px 20px -10px rgba(122,86,12,.6);transition:transform .15s,box-shadow .2s,opacity .2s}
.ivc-btn:hover{transform:translateY(-1px)}
.ivc-btn:focus-visible{outline:2px solid var(--ivc-maroon);outline-offset:3px}
.ivc-btn:disabled{opacity:.6;cursor:progress;transform:none}
.ivc-btn--block{display:block;width:100%}
/* The front-face "Open RSVP & details" CTA reads better as a centred pill than a full-width
   bar inside the framed invitation (the RSVP submit button on the back stays full-width). */
#ivc-toRsvp{width:auto;justify-self:center;min-height:0;padding:.6rem 1.6rem;font-size:.66rem;letter-spacing:.14em}
.ivc-btn--ghost{background:rgba(201,162,39,.06);border:1px solid var(--ivc-gold-deep);color:var(--ivc-maroon-deep);box-shadow:none}
.ivc-btn--pulse{animation:ivc-pulse 1.8s var(--ivc-ease) infinite}
@keyframes ivc-pulse{0%,100%{box-shadow:0 8px 20px -10px rgba(122,86,12,.6)}50%{box-shadow:0 8px 30px -4px rgba(201,162,39,.9)}}

/* the preserved RSVP submit + success-card buttons, restyled to match the card */
.ivc-back .form-status{text-align:center;font-size:.78rem;color:var(--ivc-ink-soft);min-height:0;margin:0}
.ivc-back .form-status:empty{display:none}
.ivc-back .form-status.err,.ivc-back .form-status.warn{color:var(--ivc-maroon)}
.ivc-back .form-note{font-size:.62rem;color:var(--ivc-ink-soft);text-align:center;line-height:1.3;margin:0}
.ivc-back .form-note a{color:var(--ivc-maroon)}
.ivc-back button[type="submit"]{appearance:none;cursor:pointer;border:0;border-radius:999px;font-family:var(--ivc-label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.85rem 1.4rem;min-height:48px;width:100%;color:#3a2407;background:var(--ivc-gold-grad);box-shadow:0 8px 20px -10px rgba(122,86,12,.6);transition:transform .15s,box-shadow .2s,opacity .2s}
.ivc-back button[type="submit"]:hover{transform:translateY(-1px)}
.ivc-back button[type="submit"]:focus-visible{outline:2px solid var(--ivc-maroon);outline-offset:3px}
.ivc-back button[type="submit"]:disabled{opacity:.6;cursor:progress;transform:none}

/* RSVP success overlay — reuse the global #rsvp-success (script.js drives it) but
   restyle it to fill the card-back face. The global elevation.css already gives
   .rsvp-success{position:absolute;inset:0}; we anchor it to .ivc-back (position:relative)
   and theme it to the cream card. */
.ivc-back .rsvp-success{background:linear-gradient(180deg,var(--ivc-paper),#f7efdd);border-radius:15px;padding:26px;z-index:4}
.ivc-back .rsvp-success.show{display:grid;place-items:center;text-align:center}
.ivc-back .rsvp-success__inner{max-width:280px;display:grid;gap:.55rem;justify-items:center}
.ivc-back .rsvp-success .check{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:var(--ivc-maroon);box-shadow:0 10px 24px -10px rgba(122,31,46,.7)}
.ivc-back .rsvp-success .check svg{width:28px;height:28px;stroke:#fff}
.ivc-back .rsvp-success h3{font-family:var(--ivc-script);color:var(--ivc-maroon);font-size:2.4rem;margin:0;line-height:1}
.ivc-back .rsvp-success__msg{color:var(--ivc-ink-soft);font-size:.86rem;max-width:30ch;margin:0}
.ivc-back .rsvp-success__note{color:var(--ivc-ink-soft);font-size:.76rem;max-width:30ch;margin:0}
.ivc-back .rsvp-success__actions{display:grid;gap:.4rem;width:100%;max-width:260px;margin-top:.2rem}
.ivc-back .rsvp-success__actions .btn{appearance:none;cursor:pointer;border:0;border-radius:999px;font-family:var(--ivc-label);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.75rem 1.2rem;min-height:44px;width:100%;color:#3a2407;background:var(--ivc-gold-grad);box-shadow:0 8px 20px -10px rgba(122,86,12,.6)}
.ivc-back .rsvp-success__actions .btn--ghost{background:rgba(201,162,39,.06);border:1px solid var(--ivc-gold-deep);color:var(--ivc-maroon-deep);box-shadow:none}
.ivc-back .rsvp-success__actions .btn[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .ivc-envelope,.ivc-seal,.ivc-card,.ivc-card-wrap,.ivc-lip,.ivc-readbar i,.ivc-twinkles i,.ivc-btn--pulse,
  .ivc-arch .ivc-draw,.ivc-arch .ivc-comet,.ivc-arch .ivc-twk,.ivc-arch .ivc-jhumar,.ivc-arch .ivc-jhumar2,
  .ivc-arch .ivc-jhumar3,.ivc-arch .ivc-finial-star,.ivc-inv__names .ivc-sheen,
  #ivc-invFace.ivc-draw-on .ivc-inv__crest,#ivc-invFace.ivc-draw-on .ivc-inv__pre,
  #ivc-invFace.ivc-draw-on .ivc-inv__bless,#ivc-invFace.ivc-draw-on .ivc-inv__names,
  #ivc-invFace.ivc-draw-on .ivc-inv__sur,#ivc-invFace.ivc-draw-on .ivc-inv__fam,
  #ivc-invFace.ivc-draw-on .ivc-inv__when,#ivc-invFace.ivc-draw-on .ivc-inv__where,
  #ivc-invFace.ivc-draw-on .ivc-inv__foot,#ivc-invFace.ivc-draw-on .ivc-arch .ivc-draw,
  #ivc-invFace.ivc-draw-on .ivc-arch{transition:none!important;animation:none!important}
  .ivc-arch .ivc-draw{stroke-dashoffset:0!important}.ivc-arch .ivc-comet{opacity:0!important}
  .ivc-card .ivc-face{transition:none!important}         /* flip is instant -> hide the away face instantly too */
  .ivc-lip{display:none!important}                       /* no occluder, nothing to hide */
  .ivc-readbar{display:none!important}                   /* never fills (auto-flip is skipped) */
  /* no emerge animation -> show the card upright & visible immediately */
  .ivc-card-wrap.out{opacity:1!important;transform:none!important}
  /* force every blanked front node fully visible & crisp */
  #ivc-invFace .ivc-inv__crest,#ivc-invFace .ivc-inv__pre,#ivc-invFace .ivc-inv__bless,
  #ivc-invFace .ivc-inv__names,#ivc-invFace .ivc-inv__sur,#ivc-invFace .ivc-inv__fam,
  #ivc-invFace .ivc-inv__when,#ivc-invFace .ivc-inv__where,#ivc-invFace .ivc-inv__foot,
  #ivc-invFace .ivc-arch{opacity:1!important;transform:none!important;filter:none!important}
}

/* Keep the two-up rows side-by-side down to small phones (stack only when truly narrow)
   so the RSVP back stays short and needs little/no scroll. */
/* Keep name/email + diet/song two-up down to ~360px phones (saves ~2 rows of scroll on the
   back); stack only on the very narrowest screens. */
@media (max-width:359px){.ivc-back .form-row{grid-template-columns:1fr}}
/* Event cards go 2×2 from large-phone width up — halves the back's height vs a 1-col stack. */
@media (min-width:430px){.ivc-back .evt-pick-grid{grid-template-columns:repeat(2,1fr)}}
/* When a household isn't invited to one celebration, script.js (applyHiddenEvents) adds one of
   these modifiers so the remaining cards fill the row evenly instead of leaving an empty cell. */
@media (min-width:430px){
  .ivc-back .evt-pick-grid.evt-pick-grid--cols-3{grid-template-columns:repeat(3,1fr)}
  .ivc-back .evt-pick-grid.evt-pick-grid--cols-1{grid-template-columns:1fr}
}
@media (min-width:760px){.ivc-tap-hint{font-size:.72rem}}
/* Desktop/web: a wider invitation + RSVP card. */
@media (min-width:768px){
  .ivc-card-wrap{width:min(94vw,540px)}
}

/* ===== SHORT VIEWPORTS (laptops ~640–800px usable height) =====
   The front content is taller than the card cap on short screens, which used to push the
   wedding DATE + VENUE behind the foot. Compress the front so those two facts are ALWAYS
   visible. Graduated: tighten the decorative budget first; only drop the blessing line as a
   last resort at the shortest tier. (Heights below 760 do NOT overlap the >=820 desktop
   scale-up, so the two never fight.) */
@media (max-height:800px){
  .ivc-inv__crest{width:48px;height:48px}
  .ivc-inv__bless{font-size:clamp(.7rem,1.5vh,.78rem);line-height:1.26;max-width:40ch}
  .ivc-arch{width:min(76%,228px)}
  .ivc-inv__names{font-size:clamp(1.9rem,5.6vw,2.4rem)}
  .ivc-readbar{display:none}                 /* decorative auto-flip timer — reclaim its row */
}
@media (max-height:660px){
  .ivc-inv__crest{width:42px;height:42px}
  .ivc-inv__bless{display:none}              /* last resort: drop the ceremonial line to keep date+venue */
  .ivc-inv__names{font-size:clamp(1.7rem,5vw,2.05rem)}
  .ivc-inv__pre{font-size:.54rem}
}

/* ===== TALL DESKTOP (>=768w AND >=880h) =====
   On a real desktop the card grows to 660px but the type stayed mobile-sized → sparse. Scale
   the crest, type and rhythm up to fill the air. Gated on BOTH width AND a generous height so
   it can NEVER fire on a short laptop (where the compact scale must hold the date+venue in).
   880 (not 820) keeps a safety margin above the card cap so the larger type never re-overflows. */
@media (min-width:768px) and (min-height:880px){
  .ivc-inv{padding-inline:clamp(28px,4vw,48px);gap:.18rem}
  .ivc-inv__crest{width:78px;height:78px;margin-bottom:.1rem}
  .ivc-inv__pre{font-size:.72rem;letter-spacing:.36em}
  .ivc-inv__bless{font-size:.96rem;max-width:36ch;line-height:1.42;margin-top:.2rem}
  .ivc-arch{width:min(74%,296px);margin:.3rem auto -.2rem}
  .ivc-inv__names{font-size:clamp(2.9rem,4.4vw,3.4rem)}
  .ivc-inv__sur{font-size:.74rem;letter-spacing:.26em;margin-top:.2rem}
  .ivc-inv__fam{font-size:1rem;margin-top:.5rem}
  .ivc-inv__when{font-size:1.24rem;margin-top:.6rem}
  .ivc-inv__where{font-size:.68rem;letter-spacing:.2em;margin-top:.2rem}
}
/* One party-size stepper replaces the per-event counts (owner direction). */
.ivc-back .ivc-party{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.ivc-back .ivc-party label{font-family:var(--ivc-label);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivc-ink-soft)}
.ivc-back .ivc-party .field-req-txt{letter-spacing:0;text-transform:none}
/* The party value lives inside a .field, so the generic `.ivc-back .field input{width:100%}`
   (specificity 0,2,1) was stretching it full-width and shoving the + button off-screen.
   This 0,3,0 rule wins and keeps the stepper compact. */
.ivc-back .ivc-party .stepper__val{flex:none;min-width:0;width:46px;padding-left:0;padding-right:0;border:0;background:transparent}
.ivc-back .evt-pick__guests{display:none}