/* Shaadi Paigaam — the invitation. Colours: CSS variables set from core.buildPalette. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sp-bg);color:var(--sp-body);font-family:var(--f-serif),var(--f-script-fallback),Georgia,serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100dvh}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--sp-accent);outline-offset:3px;border-radius:6px}

/* desktop: the invitation is a column with a soft frame either side */
.page{position:relative;max-width:520px;margin:0 auto;background:var(--sp-bg);min-height:100dvh;box-shadow:0 0 0 1px color-mix(in srgb,var(--sp-accent) 18%,transparent),0 30px 80px -40px var(--sp-shadow)}
@media (min-width:700px){body{background:radial-gradient(1200px 700px at 50% -10%,color-mix(in srgb,var(--sp-champagne) 55%,var(--sp-bg)),var(--sp-bg) 70%)}}

/* ============================================================ INTRO: doors */
.intro{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;pointer-events:auto}
.intro-inner{position:relative;width:100%;max-width:520px;height:100%;overflow:hidden}
.door{position:absolute;top:0;bottom:0;width:50.4%;background:
  linear-gradient(90deg,var(--sp-deep) 0%,var(--sp-primary) 16%,var(--sp-mid) 62%,var(--sp-primary) 100%);
  transition:transform 1.7s cubic-bezier(.72,0,.25,1);will-change:transform;overflow:hidden}
.door.l{left:0;transform-origin:left center}
.door.r{right:0;transform:scaleX(1)}
.door.r{background:linear-gradient(270deg,var(--sp-deep) 0%,var(--sp-primary) 16%,var(--sp-mid) 62%,var(--sp-primary) 100%)}
.door::before{content:"";position:absolute;inset:0;background:url(/shaadi-paigaam/art/door-relief.webp) center/cover;mix-blend-mode:soft-light;opacity:1;filter:contrast(1.35)}
.door.r::before{background-position:right center}
.door.l::before{background-position:left center}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%,transparent 75%,rgba(0,0,0,.14))}
.door.l .seam{position:absolute;right:0;top:0;bottom:0;width:1.5px;z-index:2;background:linear-gradient(var(--sp-accent),#F4E2AE 50%,var(--sp-accent));box-shadow:0 0 6px rgba(0,0,0,.35)}
.door .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 45%,transparent 60%);transform:translateX(-120%);animation:shine 5.5s 1.2s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.intro.open .door.l{transform:translateX(-101%)}
.intro.open .door.r{transform:translateX(101%)}
.medallion{position:absolute;left:50%;top:50%;width:min(46vw,200px);aspect-ratio:220/256;transform:translate(-50%,-52%);border:0;background:none;padding:0;cursor:pointer;z-index:2;transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .6s ease;animation:breathe 3.2s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.medallion .med-svg{width:100%;height:100%;display:block;overflow:visible}
.med-label{position:absolute;left:14%;right:14%;top:50%;transform:translateY(-50%);font-family:var(--f-serif),serif;font-size:clamp(10px,2.7vw,12.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--sp-medallion-text);line-height:1.35;font-weight:600}
.medallion:hover{animation-play-state:paused;transform:translate(-50%,-52%) scale(1.03)}
.intro.open .medallion{animation:none;opacity:0;transform:translate(-50%,-52%) scale(.82)}
@keyframes breathe{0%,100%{transform:translate(-50%,-52%) scale(1)}50%{transform:translate(-50%,-52%) scale(1.035)}}
.intro .hint{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;color:color-mix(in srgb,#fff 80%,var(--sp-accent));font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;transition:opacity .4s}
.intro.open .hint{opacity:0}
.intro.gone{display:none}

/* ============================================================ HERO: curtains + courtyard */
.hero{position:relative;height:100svh;min-height:600px;max-height:980px;overflow:hidden;background:
  radial-gradient(120% 70% at 50% 30%,color-mix(in srgb,#fff 40%,var(--sp-bg)) 0%,var(--sp-bg) 55%),var(--sp-bg)}
.hero .backwall{position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 38%,color-mix(in srgb,var(--sp-champagne) 35%,transparent),transparent 70%)}
.curtain{position:absolute;top:0;bottom:0;width:100%;z-index:3;pointer-events:none;will-change:clip-path}
.curtain .fab{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,
    var(--sp-champagne-dark) 0px, var(--sp-champagne) 7px, var(--sp-champagne-light) 13px, var(--sp-champagne) 19px, var(--sp-champagne-dark) 26px);
  filter:saturate(1.05)}
.curtain .fab::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(0,0,0,.10))}
.curtain.l .fab{transform-origin:left center}
.curtain.r .fab{transform-origin:right center}
.curtain .edge{position:absolute;top:0;bottom:0;width:7px;background:linear-gradient(90deg,var(--sp-accent),#F1DCA0,var(--sp-accent))}
.tie{position:absolute;width:44px;z-index:5;opacity:0;transition:opacity .5s;pointer-events:none}
.tie.show{opacity:1}
.tie .tie-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.valance{position:absolute;top:0;left:0;width:100%;height:auto;z-index:6;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.hero .valance-wrap{position:absolute;top:0;left:0;right:0;z-index:6;height:clamp(84px,25vw,128px);overflow:hidden}
.hero .valance-wrap svg{height:100%;width:100%}
.scene{position:absolute;left:-3%;right:-3%;bottom:-7%;z-index:4;aspect-ratio:1/1;pointer-events:none;isolation:isolate}
.scene img{position:absolute;inset:0;width:100%;height:100%}
.scene .tint{position:absolute;inset:0;background:var(--sp-flower);-webkit-mask:url(/shaadi-paigaam/art/scene-rose.webp) center/100% 100% no-repeat;mask:url(/shaadi-paigaam/art/scene-rose.webp) center/100% 100% no-repeat;mix-blend-mode:color}
.scene .tint2{position:absolute;inset:0;background:var(--sp-flower);-webkit-mask:url(/shaadi-paigaam/art/scene-rose.webp) center/100% 100% no-repeat;mask:url(/shaadi-paigaam/art/scene-rose.webp) center/100% 100% no-repeat;mix-blend-mode:soft-light;opacity:.55}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(transparent,var(--sp-bg));z-index:3}
.dark-scene .scene img{filter:brightness(.9) saturate(.95)}
.hero-text{position:absolute;left:0;right:0;top:clamp(92px,17svh,150px);z-index:5;text-align:center;padding:0 19%;color:var(--sp-heading)}
.hero-text>*{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease}
.hero.show .hero-text>*{opacity:1;transform:none}
.hero-text .hico{width:18px;height:18px;margin:0 auto 6px;color:var(--sp-heading)}
.hero-text .ico{width:100%;height:100%}
.getting{font-style:italic;font-size:clamp(14px,3.9vw,17px);letter-spacing:.02em;color:var(--sp-body)}
.hero-text .divider{margin:6px auto 4px}
.name{font-family:var(--f-script),var(--f-script-fallback),cursive;font-style:var(--f-script-style,normal);text-transform:var(--f-script-case,none);font-weight:400;line-height:1.1;color:var(--sp-heading);margin:0;white-space:normal;overflow-wrap:anywhere;font-size:56px}
.name.fam{display:block;font-size:.42em;margin-top:.1em;letter-spacing:.02em;font-family:var(--f-serif),serif;font-style:normal;text-transform:none}
.parents{font-size:clamp(11.5px,3.1vw,13.5px);line-height:1.4;margin:.25em 0 0;color:var(--sp-body)}
.amp,.amp-i{font-family:var(--f-amp,var(--f-script)),var(--f-script-fallback),cursive;font-style:var(--f-amp-style,normal);font-size:clamp(28px,8vw,40px);line-height:1;margin:.15em 0 .05em;color:var(--sp-heading)}
.hero-text .wdate{margin-top:10px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sp-body)}
.scroll-cue{position:absolute;left:50%;bottom:16px;z-index:7;transform:translateX(-50%);width:26px;height:40px;border:1px solid color-mix(in srgb,var(--sp-heading) 40%,transparent);border-radius:14px;opacity:0;transition:opacity .8s 1.2s}
.hero.show .scroll-cue{opacity:.7}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--sp-heading);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ============================================================ SECTIONS */
main.content{position:relative;z-index:2;padding:6px 0 30px}
.sec{padding:46px 30px 30px;text-align:center}
.sec + .sec{padding-top:34px}
.sec-head{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.sec-head .sico{width:26px;height:26px;color:var(--sp-line);margin-bottom:6px}
.sec-head .sico .ico{width:100%;height:100%}
.sec-head h2{font-family:var(--f-script),var(--f-script-fallback),cursive;font-style:var(--f-script-style,normal);text-transform:var(--f-script-case,none);letter-spacing:var(--f-script-track,0);font-weight:400;font-size:calc(38px * var(--f-script-scale,1));line-height:1.15;margin:0;color:var(--sp-heading)}
.divider{display:block;width:150px;height:14px;margin:10px auto 0;color:var(--sp-line)}
.divider .div-svg{width:100%;height:100%;display:block}
.sec p{margin:0 auto;max-width:34em}
.lead{font-size:17.5px;line-height:1.75;color:var(--sp-body);white-space:pre-line}
.mini-heart{display:block;width:14px;height:14px;margin:18px auto;color:var(--sp-line)}
.mini-heart .ico{width:100%;height:100%}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* couple photo cameo */
.cameo{width:min(62%,240px);aspect-ratio:4/5;margin:0 auto 24px;border-radius:50% 50% 46% 46%/42% 42% 58% 58%;overflow:hidden;box-shadow:0 0 0 3px var(--sp-bg),0 0 0 4px var(--sp-line),0 18px 40px -20px var(--sp-shadow)}
.cameo img{width:100%;height:100%;object-fit:cover}

/* scratch */
.scratch-sec .sec-head h2{transition:opacity .5s}
.scratch-box{position:relative;width:min(78vw,300px);aspect-ratio:100/92;margin:6px auto 46px;touch-action:none;user-select:none;-webkit-user-select:none}
.scratch-box .heart-out{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 18px var(--sp-shadow))}
.scratch-under{position:absolute;inset:14% 16% 28%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--sp-heading)}
.scratch-under .so{font-family:var(--f-script),var(--f-script-fallback),cursive;font-style:var(--f-script-style,normal);font-size:calc(22px * var(--f-script-scale,1));line-height:1.1}
.scratch-under .dt{font-weight:600;font-size:clamp(16px,4.6vw,19px);line-height:1.2}
.scratch-under .wd,.scratch-under .tm{font-size:13.5px;color:var(--sp-body)}
.scratch-box canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;transition:opacity .9s ease}
.scratch-box.done canvas{opacity:0;pointer-events:none}
.scratch-box .hint{position:absolute;left:-20px;right:-20px;bottom:-30px;font-size:12.5px;color:var(--sp-body);opacity:.75;pointer-events:none;transition:opacity .4s}
.scratch-box.done .hint{opacity:0}
.reveal-btn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0;background:none;color:var(--sp-body);font-size:13px;text-decoration:underline;cursor:pointer}
.reveal-btn:focus-visible{position:static;width:auto;height:auto;clip:auto;margin:0 auto 12px;display:block}
.scratch-box.done ~ .reveal-btn{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:12px 26px;border-radius:999px;border:0;background:var(--sp-button);color:var(--sp-button-text);font-family:var(--f-serif),serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px -12px var(--sp-shadow),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px var(--sp-shadow)}
.btn:active{transform:translateY(1px)}
.btn .ico{width:17px;height:17px}
.btn.wide{width:100%}
.btn.glow{animation:glow 1.6s ease 2}
@keyframes glow{50%{box-shadow:0 0 0 8px var(--sp-glow)}}

/* carousel */
.car{position:relative;margin:0 auto;max-width:440px;border-radius:18px;overflow:hidden;box-shadow:0 20px 44px -24px var(--sp-shadow);background:var(--sp-tint)}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;aspect-ratio:4/3}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;scroll-snap-align:center;position:relative}
.car-slide img{width:100%;height:100%;object-fit:cover;background:var(--sp-tint)}
.car-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px}
.car-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;transition:width .3s,background .3s}
.car-dots button.on{width:20px;border-radius:5px;background:#fff}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.75);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#333}
.car-nav.prev{left:10px}.car-nav.next{right:10px}
@media (hover:hover){.car:hover .car-nav{display:flex}}
.photo-ph{aspect-ratio:4/3;max-width:440px;margin:0 auto;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--sp-line) 70%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--sp-body);background:var(--sp-tint)}
.photo-ph .ico{width:34px;height:34px;color:var(--sp-line)}

/* countdown */
.cd{display:flex;justify-content:center;gap:12px}
.cd-box{width:68px;padding:12px 0 9px;border-radius:12px;background:var(--sp-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 22%,transparent)}
.cd-num{display:block;font-size:27px;line-height:1.1;font-weight:500;color:var(--sp-heading);font-variant-numeric:tabular-nums}
.cd-lab{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sp-body)}
.cd-done{font-family:var(--f-script),var(--f-script-fallback),cursive;font-size:30px;color:var(--sp-heading)}

/* timeline */
.tl{position:relative;max-width:360px;margin:0 auto;text-align:start;padding-inline-start:30px}
.tl::before{content:"";position:absolute;inset-inline-start:7px;top:8px;bottom:8px;width:1px;background:color-mix(in srgb,var(--sp-line) 70%,transparent)}
.tl-day{position:relative;margin:4px 0 14px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sp-line);font-weight:600}
.tl-day::before{content:"";position:absolute;inset-inline-start:-27px;top:50%;width:9px;height:9px;margin-top:-4.5px;transform:rotate(45deg);background:var(--sp-bg);border:1px solid var(--sp-line)}
.tl-item{position:relative;padding-bottom:22px}
.tl-item::before{content:"";position:absolute;inset-inline-start:-27px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--sp-heading);box-shadow:0 0 0 4px var(--sp-bg)}
.tl-item h3{margin:0;font-size:19px;font-weight:600;color:var(--sp-heading);line-height:1.3}
.tl-item .when{font-size:14.5px;color:var(--sp-body)}
.tl-item .where{font-size:14.5px;color:var(--sp-body);font-style:italic}
.tl-item .note{font-size:14.5px;color:var(--sp-body);margin-top:2px}
.tl-item .note .ico{display:inline-block;width:13px;height:13px;vertical-align:-1px;color:var(--sp-line);margin-inline-start:3px}
.tl-item .dress{display:inline-block;margin-top:5px;font-size:12px;letter-spacing:.06em;padding:2px 10px;border-radius:99px;background:var(--sp-tint);color:var(--sp-body)}

/* venue */
.v-name{font-size:21px;font-weight:600;color:var(--sp-heading);margin:0}
.v-addr{font-size:15px;color:var(--sp-body);margin-top:2px}
.map{position:relative;margin:20px auto 18px;max-width:440px;height:230px;border-radius:16px;overflow:hidden;background:
  repeating-linear-gradient(45deg,var(--sp-tint) 0 12px,color-mix(in srgb,var(--sp-tint) 70%,var(--sp-bg)) 12px 24px);box-shadow:0 16px 36px -22px var(--sp-shadow)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85)}
.map .fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;font-size:13.5px;color:var(--sp-body)}
.map .fallback .ico{width:34px;height:34px;color:var(--sp-primary)}
.map .chip{position:absolute;top:10px;inset-inline-start:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:#fff;color:#1a73e8;font:500 13px/1.1 system-ui,-apple-system,Segoe UI,Roboto,var(--f-serif),sans-serif;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.map .chip .ico{width:14px;height:14px}
.venue-block + .venue-block{margin-top:40px}
.venue-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sp-line);font-weight:600;margin-bottom:6px}

/* dress code */
.dc{margin:0 auto 22px;max-width:30em}
.dc h3{margin:0;font-size:18px;font-weight:600;color:var(--sp-heading)}
.dc .ln{display:block;width:34px;height:1px;margin:7px auto 8px;background:var(--sp-line)}
.dc p{font-size:15.5px}

/* pre-wedding cards */
.cards{display:grid;gap:14px;max-width:420px;margin:0 auto}
.card{padding:20px 18px 18px;border-radius:16px;background:var(--sp-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 32%,transparent),0 14px 30px -24px var(--sp-shadow)}
.card .cico{width:24px;height:24px;margin:0 auto 6px;color:var(--sp-line)}
.card .cico .ico{width:100%;height:100%}
.card h3{margin:0;font-size:20px;font-weight:600;color:var(--sp-heading)}
.card .when{font-size:14.5px}
.card .where{font-size:14.5px;font-style:italic}
.card .note{font-size:14px;margin-top:4px}
.card .dress{display:inline-block;margin-top:8px;font-size:12px;padding:2px 10px;border-radius:99px;background:var(--sp-tint)}
.card a.dir{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:13px;color:var(--sp-heading);text-underline-offset:3px}
.card a.dir .ico{width:13px;height:13px}

/* accommodation code */
.code{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 8px 8px 16px;border-radius:12px;background:var(--sp-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 35%,transparent)}
.code b{letter-spacing:.14em;color:var(--sp-heading);font-weight:600}
.code small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.1;text-align:start}
.code button{border:0;background:var(--sp-button);color:var(--sp-button-text);border-radius:8px;padding:8px 12px;font-size:12px;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.code button .ico{width:13px;height:13px}

/* rsvp */
.rsvp{max-width:400px;margin:0 auto;text-align:start}
.rsvp .by{text-align:center;font-size:14px;margin:-6px 0 18px;font-style:italic}
.rsvp-hint{text-align:center;margin:0 0 18px;font-size:14px;opacity:.85}
.rsvp-actions{display:grid;gap:11px}
.rsvp-actions .ghost{background:transparent;color:var(--sp-heading);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 65%,transparent)}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:14.5px;font-weight:600;color:var(--sp-heading);margin-bottom:2px}
.fld label .req{color:var(--sp-primary);margin-inline-start:2px}
.dark-bg .fld label .req{color:var(--sp-accent)}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--sp-heading);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--sp-body) 45%,transparent);border-radius:0;padding:8px 2px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--sp-body) 50%),linear-gradient(135deg,var(--sp-body) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:24px}
[dir=rtl] .fld select{background-position:12px 55%,7px 55%}
.fld select option{color:#222}
.fld textarea{resize:vertical;min-height:70px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-bottom-color:var(--sp-primary);border-bottom-width:2px}
.dark-bg .fld input:focus,.dark-bg .fld select:focus,.dark-bg .fld textarea:focus{border-bottom-color:var(--sp-accent)}
.fld .err{display:none;font-size:13px;color:#B3261E;margin-top:4px}
.dark-bg .fld .err{color:#FFB4A9}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad select{border-bottom-color:#B3261E}
.fld .help{font-size:12.5px;opacity:.8;margin-top:3px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.rsvp-msg{display:none;text-align:center;margin-top:14px;padding:14px;border-radius:12px;background:var(--sp-tint);color:var(--sp-heading)}
.rsvp-msg.show{display:block}
.rsvp-msg.warn{background:color-mix(in srgb,#E6A23C 18%,var(--sp-bg))}
.rsvp-done{text-align:center;padding:16px 8px}
.rsvp-done .big{font-family:var(--f-script),var(--f-script-fallback),cursive;font-size:30px;color:var(--sp-heading);line-height:1.2}

/* closing */
.closing{padding:50px 30px 26px;text-align:center}
.closing .wl{font-family:var(--f-script),var(--f-script-fallback),cursive;font-style:var(--f-script-style,normal);font-size:calc(26px * var(--f-script-scale,1));color:var(--sp-body)}
.closing .cn{font-family:var(--f-script),var(--f-script-fallback),cursive;font-style:var(--f-script-style,normal);text-transform:var(--f-script-case,none);font-size:calc(44px * var(--f-script-scale,1));color:var(--sp-heading);line-height:1.15;margin:4px 0 6px;overflow-wrap:anywhere}
.closing .flourish{display:block;width:180px;height:22px;margin:4px auto 0;color:var(--sp-line)}
.closing .cl{margin-top:10px;font-style:italic}
.foot{padding:16px 20px calc(86px + env(safe-area-inset-bottom));text-align:center;font-size:12px;letter-spacing:.06em;color:color-mix(in srgb,var(--sp-body) 80%,transparent)}
.foot a{text-decoration:none;color:var(--sp-heading);font-weight:600}

/* ============================================================ floating controls */
.fab-wrap{position:fixed;left:0;right:0;z-index:70;pointer-events:none;display:flex;justify-content:center}
.fab-wrap>div{position:relative;width:100%;max-width:520px}
.fab-top{top:calc(12px + env(safe-area-inset-top))}
.fab-bot{bottom:calc(14px + env(safe-area-inset-bottom))}
.music-btn{position:absolute;inset-inline-end:14px;top:0;width:40px;height:40px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;background:color-mix(in srgb,var(--sp-bg) 70%,transparent);color:var(--sp-heading);box-shadow:0 2px 10px rgba(0,0,0,.12),inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 35%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.intro-on .music-btn{background:rgba(255,255,255,.18);color:#fff}
.music-btn .ico{width:20px;height:20px}
.music-btn.playing .ico{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.1)}}
.lang{position:absolute;inset-inline-start:14px;bottom:0;pointer-events:auto}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border-radius:99px;border:0;cursor:pointer;font-size:13.5px;background:color-mix(in srgb,var(--sp-bg) 72%,transparent);color:var(--sp-heading);box-shadow:0 2px 10px rgba(0,0,0,.12),inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 35%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.intro-on .lang-btn{background:rgba(255,255,255,.18);color:#fff}
.lang-btn .ico{width:17px;height:17px}
.lang-menu{position:absolute;bottom:46px;inset-inline-start:0;min-width:160px;padding:6px;border-radius:14px;background:var(--sp-card);box-shadow:0 14px 40px rgba(0,0,0,.2),inset 0 0 0 1px color-mix(in srgb,var(--sp-line) 30%,transparent);display:none}
.lang.open .lang-menu{display:block}
.lang-menu button{display:flex;width:100%;justify-content:space-between;gap:10px;padding:10px 12px;border:0;border-radius:9px;background:none;cursor:pointer;color:var(--sp-heading);font-size:15px;text-align:start}
.lang-menu button[aria-checked=true]{background:var(--sp-tint);font-weight:600}
.lang-menu small{opacity:.6}
.badge{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:80;padding:6px 14px;border-radius:99px;background:rgba(20,16,16,.78);color:#fff;font:500 12px/1.2 system-ui,sans-serif;letter-spacing:.04em;pointer-events:none}

/* confetti */
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:65}

/* passcode gate & ended */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center}
.gate .box{max-width:340px}
.gate h1{font-family:var(--f-script),cursive;font-weight:400;font-size:40px;color:var(--sp-heading);margin:6px 0}
.gate input{width:100%;margin:16px 0 12px;padding:14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--sp-line) 60%,transparent);background:var(--sp-card);color:var(--sp-heading);font-size:18px;text-align:center;letter-spacing:.2em}

/* language-specific tuning */
[data-script=deva] .name,[data-script=gujr] .name,[data-script=taml] .name,[data-script=telu] .name{line-height:1.35}
[data-script=deva] .sec-head h2,[data-script=gujr] .sec-head h2,[data-script=taml] .sec-head h2,[data-script=telu] .sec-head h2{font-size:30px;line-height:1.4;font-style:italic}
[data-script=taml] .sec-head h2,[data-script=telu] .sec-head h2{font-size:25px;font-style:normal;font-weight:600}
[data-script^=arab] .sec-head h2{font-size:32px;line-height:1.6}
[data-script=arab-ur] body,[data-script=arab-ur] .lead{line-height:2.1}
[data-script=deva] .cd-lab,[data-script=gujr] .cd-lab,[data-script=taml] .cd-lab,[data-script=telu] .cd-lab,[data-script^=arab] .cd-lab{letter-spacing:0;font-size:11.5px;text-transform:none}
[data-script=deva] .btn,[data-script=gujr] .btn,[data-script=taml] .btn,[data-script=telu] .btn,[data-script^=arab] .btn{letter-spacing:.02em;font-size:14.5px;text-transform:none}
[data-script=deva] .med-label,[data-script=gujr] .med-label,[data-script=taml] .med-label,[data-script=telu] .med-label,[data-script^=arab] .med-label{letter-spacing:0;text-transform:none;font-size:clamp(11px,3vw,13.5px)}
[data-script=taml] .med-label,[data-script=telu] .med-label{font-size:clamp(9.5px,2.6vw,11.5px)}
[data-script=taml] .cd-box,[data-script=telu] .cd-box{width:74px}
[data-script^=arab] .tl-item h3,[data-script^=arab] .v-name{line-height:1.7}

/* ============================================================ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .door{transition:opacity .8s ease!important}
  .intro.open .door.l,.intro.open .door.r{transform:none!important;opacity:0}
  .medallion,.music-btn.playing .ico,.door .shine,.scroll-cue::after{animation:none!important}
  .reveal{transform:none!important;transition:opacity .6s ease!important}
  .hero-text>*{transform:none!important}
}
.rm .door{transition:opacity .8s ease!important}
.rm .intro.open .door.l,.rm .intro.open .door.r{transform:none!important;opacity:0}
.rm .reveal{transform:none!important}

/* small / short screens */
@media (max-height:700px){.hero-text{top:clamp(80px,14svh,110px)}.name{font-size:46px}}
@media (max-width:360px){.sec{padding-left:22px;padding-right:22px}.cd{gap:8px}.cd-box{width:62px}}
@media print{.intro,.fab-wrap,.confetti{display:none!important}}
.amp-i{font-size:inherit;margin:0;line-height:inherit}