/* Phoolon ki Chadar: a scroll invitation under a flower canopy. Every picture is
   generated flowers (made once for the template); every word is live data.
   Ivory paper pages, marigold and jasmine strings hanging over each one. */
:root{
  --paper:#f8efe0; --ink:#5e1a1c; --muted:#86624f; --gold:#b8893a; --gold2:#d4a955; --marigold:#e0801a; --rose:#a3202a;
  --f-head:"Gilda Display", "Cormorant Garamond", "Noto Serif Devanagari", Georgia, serif;
  --f-serif:"Cormorant Garamond", "Noto Serif Devanagari", Georgia, serif;
  --f-sans:"Jost", "Noto Serif Devanagari", system-ui, sans-serif;
  --col:min(100vw, 480px);
}
*{box-sizing:border-box}
html,body{margin:0;background:#efe4d0;color:var(--ink);font-family:var(--f-serif);-webkit-tap-highlight-color:transparent}
body.locked{overflow:hidden;height:100%}
#page{position:relative;width:var(--col);margin:0 auto;background:var(--paper) url(art/paper.jpg) center top/100% auto repeat-y;overflow:hidden;box-shadow:0 0 60px rgba(90,50,20,.14)}
section{position:relative;width:100%}

/* ---------- gate: a transparent layer over the hero's first frame ---------- */
#gate{position:fixed;top:0;bottom:0;left:50%;width:var(--col);transform:translateX(-50%);z-index:20;cursor:pointer}
#gate.gone{display:none}
.tag{position:absolute;left:50%;top:27%;width:min(50vw,220px);aspect-ratio:374/496;margin-left:calc(min(50vw,220px) / -2);border:0;background:none;padding:0;cursor:pointer;transform-origin:50% 4%;filter:drop-shadow(0 10px 14px rgba(60,20,0,.45));animation:tagSway 4.2s ease-in-out infinite}
.tag img{width:100%;height:100%;object-fit:contain;display:block}
.tag span{position:absolute;left:14%;right:14%;top:62.5%;transform:translateY(-50%);text-align:center;font:400 clamp(30px,9vw,42px)/1 var(--f-head);color:var(--ink);letter-spacing:1px;white-space:nowrap}
@keyframes tagSway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.tap{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(9% + env(safe-area-inset-bottom,0px));margin:0;padding:13px 24px;border-radius:999px;background:rgba(250,243,230,.92);white-space:nowrap;font:500 13px/1 var(--f-sans);letter-spacing:5px;text-transform:uppercase;color:var(--ink);box-shadow:0 6px 18px rgba(80,30,0,.35),inset 0 0 0 1.5px rgba(184,137,58,.7);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
#gate.open .tap{opacity:0;transition:opacity .4s;animation:none}
#gate.open .tag{animation:none}

/* ---------- hero ---------- */
.hero{height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#f6eadb}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.heroText{position:absolute;left:12%;right:12%;top:51%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0}
.heroText h1{margin:0;font:400 clamp(40px,12vw,56px)/1.06 var(--f-head);color:var(--ink);text-shadow:0 0 0 rgba(90,30,0,0)}
.hDate{margin:6px 0 0;font:500 18px/1.2 var(--f-serif);color:var(--ink);letter-spacing:1px}
.hCity{margin:0;font:italic 500 18px/1.2 var(--f-serif);color:var(--muted)}
.scrollHint{position:absolute;left:0;right:0;bottom:calc(9% + 4px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font:500 12px/1 var(--f-sans);letter-spacing:4px;text-transform:uppercase;color:var(--muted);opacity:0}
.scrollHint:after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(var(--gold),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- pages: ivory with hanging strings on top ---------- */
.pg{padding:var(--top,190px) 28px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.pg+.pg{border-top:1.5px solid rgba(184,137,58,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.strs{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:2}
.str{position:absolute;top:-6px;width:var(--w,22px);transform-origin:50% 0;will-change:transform}
.str i{display:block;width:100%;height:var(--h,120px);overflow:hidden;position:relative}
.str img{position:absolute;left:0;bottom:0;width:100%;height:auto;filter:drop-shadow(0 4px 4px rgba(90,40,0,.22))}
.small{margin:0;font:400 17px/1.5 var(--f-serif);color:var(--muted)}
.body{margin:0;font:400 19px/1.55 var(--f-serif);color:var(--ink);max-width:30ch}
.it{font-style:italic}
.caps{margin:0;font:500 12px/1.6 var(--f-sans);letter-spacing:3.5px;text-transform:uppercase;color:var(--gold)}
.names{margin:0;font:400 clamp(32px,9.5vw,42px)/1.1 var(--f-head);color:var(--ink)}
.and{margin:0;font:italic 500 26px/1 var(--f-serif);color:var(--gold)}
.sec{margin:0 0 6px;font:400 clamp(30px,8.6vw,38px)/1.12 var(--f-head);color:var(--ink)}
.big2{font-size:clamp(40px,12vw,52px)}
.big{margin:0;font:500 24px/1.3 var(--f-serif);color:var(--ink)}
.parents{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.parents div{display:flex;flex-direction:column;gap:4px}
.parents b{font:500 11px/1.4 var(--f-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.parents span{font:500 16px/1.35 var(--f-serif);color:var(--ink);margin-bottom:8px}
.roses{width:120px;margin-top:10px}

/* countdown in varmala rings */
.count{display:flex;gap:10px;justify-content:center;width:100%}
.count div{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;max-width:116px}
.ring{position:relative;width:100%;aspect-ratio:1;display:block}
.ring img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(90,30,0,.22))}
.ring b{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fffaf0,#f3e6cf);box-shadow:inset 0 0 0 1.5px rgba(184,137,58,.55),0 2px 6px rgba(90,30,0,.25);display:flex;align-items:center;justify-content:center;font:400 26px/1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.count i{font:500 12px/1 var(--f-sans);letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-style:normal}

/* timeline: a flower on a gold thread for each function */
.tl{list-style:none;margin:8px 0 0;padding:0;width:100%;position:relative;text-align:left}
.tl:before{content:"";position:absolute;left:32px;top:26px;bottom:26px;border-left:1.5px dashed rgba(184,137,58,.75)}
.tl li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;padding:14px 0}
.tl .ic{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(90,30,0,.25));position:relative;z-index:1}
.tl .tx{display:flex;flex-direction:column;gap:3px;padding-top:4px}
.tl .tm{font:500 13px/1.3 var(--f-sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.tl .tt{font:400 25px/1.15 var(--f-head);color:var(--ink)}
.tl .tv{font:400 16px/1.4 var(--f-serif);color:var(--muted)}
.tl .tw{font:italic 500 16px/1.4 var(--f-serif);color:var(--rose)}
.lnk{font:500 12px/1 var(--f-sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;margin-top:6px;align-self:flex-start}
.tl li .ic{opacity:0;transform:scale(.3) rotate(-60deg);transition:opacity .7s ease,transform 1.1s cubic-bezier(.3,1.5,.5,1)}
.tl li .tx{opacity:0;transform:translateY(16px);transition:opacity .9s ease .15s,transform .9s ease .15s}
.tl li.on .ic{opacity:1;transform:none}
.tl li.on .tx{opacity:1;transform:none}

/* venue */
.venue .photo{width:100%;margin:6px 0 10px;border-radius:999px 999px 18px 18px;overflow:hidden;box-shadow:0 14px 30px rgba(90,40,0,.22);aspect-ratio:4/5}
.venue .photo img{width:100%;height:112%;object-fit:cover;display:block;will-change:transform}
.pill{margin-top:10px;font:500 13px/1 var(--f-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:14px 26px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(255,250,240,.6)}

/* dress code per function */
.dress{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:18px}
.dress li{display:flex;flex-direction:column;align-items:center;gap:2px}
.dress img{width:44px;height:44px;object-fit:contain;margin-bottom:2px}
.dress b{font:400 24px/1.2 var(--f-head);color:var(--ink);font-weight:400}
.dress span{font:italic 500 18px/1.35 var(--f-serif);color:var(--muted)}

/* story */
#story{display:flex;flex-direction:column;gap:22px;width:100%}
#story .ch{display:flex;flex-direction:column;align-items:center;gap:4px}
#story .ch:not(.has-img):before{content:"";width:16px;height:30px;background:url(art/p5.webp) center/contain no-repeat;margin-bottom:4px}
#story b{font:500 13px/1.4 var(--f-sans);letter-spacing:3px;color:var(--gold)}
#story i{font:400 24px/1.2 var(--f-head);font-style:normal;color:var(--ink)}
#story span{font:400 17px/1.5 var(--f-serif);color:var(--muted);max-width:32ch}

/* rsvp */
.rl{list-style:none;margin:6px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.rl li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0;border-bottom:1px solid rgba(184,137,58,.3)}
.rl .ric{width:40px;height:40px;object-fit:contain}
.rl .nm{font:400 24px/1.2 var(--f-head)}
.rl .wh{font:italic 400 16px/1.3 var(--f-serif);color:var(--muted)}
.rl .opts{display:flex;flex-direction:column;gap:9px;width:min(100%,280px);margin-top:4px}
.rl .opts button,.gold{border:0;cursor:pointer;font:500 17px/1 var(--f-serif);letter-spacing:.5px;padding:14px 18px;border-radius:999px;color:#fffaf0;background:linear-gradient(180deg,#d1a85a,#ad8237);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(110,70,10,.25);transition:transform .2s ease,filter .3s ease,box-shadow .3s ease}
.rl .opts button.no{background:linear-gradient(180deg,#e6cf9e,#c9a76a);color:var(--ink)}
.rl .opts button:active,.gold:active{transform:scale(.97)}
.rl .opts.picked button{filter:saturate(.35) opacity(.6)}
.rl .opts.picked button.on{filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 3px rgba(224,128,26,.35),0 4px 12px rgba(110,70,10,.3)}
.rl .opts button.on:before{content:"✓  "}
textarea{width:100%;margin-top:16px;border:1px solid rgba(184,137,58,.5);background:rgba(255,251,242,.75);border-radius:14px;padding:12px 14px;font:400 17px/1.4 var(--f-serif);color:var(--ink);resize:vertical}
.gold{margin-top:16px;padding:17px 34px;font-size:18px}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--marigold);outline-offset:3px}

.foot{padding:20px 28px 70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.swag{width:84%;transform-origin:50% 0;animation:swing 6s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(90,30,0,.2))}
@keyframes swing{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}

/* reveal: pages lift up into place */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv>:not(.strs){transition:filter 1.6s ease}

#petals{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#petals img{position:absolute;left:0;top:0;width:20px;will-change:transform}
#snd{position:fixed;right:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:30;width:38px;height:38px;border-radius:50%;border:1px solid rgba(184,137,58,.7);background:rgba(255,250,240,.88);color:var(--ink);font-size:16px;cursor:pointer}
#snd.off{opacity:.5;text-decoration:line-through}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.tap,.tag,.swag{animation:none}.tl li .ic,.tl li .tx{opacity:1;transform:none}}

/* ================= the full-invite kit (../_full/fx.css) made of fresh flowers =================
   cards are ringed in marigold heads, photos in yellow marigold or jasmine, the date is scratched
   off the jasmine-and-rose tag, the day's plan hangs on a gold thread with marigold stops */
:root{
  --fx-ink:#5e1a1c; --fx-muted:#86624f; --fx-accent:#a8772c; --fx-accent-2:#e0801a; --fx-soft:#a3202a; --fx-err:#a3202a;
  --fx-head:"Cormorant Garamond","Noto Serif Devanagari",Georgia,serif; --fx-caps-font:"Jost","Noto Serif Devanagari",system-ui,sans-serif;
  --fx-card:linear-gradient(180deg,rgba(255,251,242,.95),rgba(248,238,220,.95));
  --fx-line:rgba(184,137,58,.5);
  --fx-edge:radial-gradient(circle,#ffb347 0 2.4px,#e0801a 3.6px,#c25a0e 4.6px,transparent 5.2px) 0 0/11px 11px;
  --fx-edge-w:11px; --fx-radius:18px;
  --fx-shadow:0 8px 18px rgba(90,40,0,.14); --fx-shadow-lg:0 14px 30px rgba(90,40,0,.26);
  --fx-btn:linear-gradient(180deg,#f1dfb6,#d8b77a); --fx-btn-ink:#5e1a1c;
  --fx-on:linear-gradient(180deg,#d1a85a,#ad8237); --fx-on-ink:#fffaf0; --fx-on-line:#ad8237;
  --fx-field:rgba(255,251,242,.78); --fx-card-solid:#fbf3e4; --fx-langs-bg:rgba(255,250,240,.92); --fx-langs-ink:#5e1a1c;
  --fx-foil-1:#c2560e; --fx-foil-2:#ec8d1f; --fx-foil-3:#ffd37a; --fx-foil-dots:#fffcf2; --fx-foil-ink:rgba(94,26,12,.88); --fx-scr-shape:oval;
  --fx-lb-bg:rgba(52,18,12,.94); --fx-lb-ink:#fbeedd;
}
.lang-hi{--fx-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--fx-caps-font:Georgia,"Noto Serif Devanagari","Jost",serif}
.fx-h{margin:0 0 6px}
.fx-sec .small.it:empty{display:none}

/* the flower rings: orange marigold round the cards and looks, yellow marigold round the photos,
   jasmine round the film */
.fx-card:before,.fx-look:before{background:url(art/p6.webp) 0 0/11px 10px round;padding:9px;filter:drop-shadow(0 2px 2px rgba(90,40,0,.25))}
.fx-shot:before{background:url(art/p9.webp) 0 0/12px 11px round;padding:10px;filter:drop-shadow(0 2px 2px rgba(90,40,0,.22))}
.fx-film:before{background:url(art/p7.webp) 0 0/14px 14px round;padding:12px;filter:drop-shadow(0 2px 2px rgba(90,40,0,.25))}
.fx-card{padding:24px 24px 22px}
.fx-card.fx-center{padding:28px 22px 24px}
/* a rose pinned where the marigold string is tied */
.fx-card:after{content:"";position:absolute;right:-9px;top:-11px;width:34px;height:30px;background:url(art/i-sangeet.webp) center/contain no-repeat;transform:rotate(14deg);filter:drop-shadow(0 3px 3px rgba(90,20,0,.3));z-index:4}
.fx-cards{gap:24px}
.fx-ch{font:400 25px/1.2 var(--f-head);color:var(--ink)}
.fx-cb{font:500 18px/1.45 var(--f-serif)}
.fx-cb strong{font-family:var(--f-sans);font-weight:500}
.fx-shot{padding:12px;background:var(--paper)}
.fx-shot img{border-radius:6px}
.fx-film{padding:14px;background:var(--paper)}
.fx-film img,.fx-film video,.fx-film iframe{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);border-radius:10px}
.fx-filmPlay{background:radial-gradient(circle at 50% 40%,#fffaf0,#f3e6cf);box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 0 2px rgba(184,137,58,.6)}
.fx-filmPlay span{border-left-color:var(--marigold)}
.fx-look{padding:15px 15px 18px;background:var(--paper)}
.fx-lookT{font-family:var(--f-serif);font-size:18px}

/* buttons: the template's gold pills */
.fx-btn{font:500 17px/1 var(--f-serif);letter-spacing:.5px;text-transform:none;padding:15px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(110,70,10,.25)}
.fx-btn.gold{background:linear-gradient(180deg,#d1a85a,#ad8237);color:#fffaf0}
.fx-btn.pill{font:500 13px/1 var(--f-sans);letter-spacing:2.5px;text-transform:uppercase;background:rgba(255,250,240,.6);box-shadow:none}
.fx-lnk{font:500 12px/1.2 var(--f-sans);letter-spacing:2px;color:var(--ink);border-bottom-color:var(--gold)}
.tl .tx [data-fx-cal]{display:flex}
.tl .tx [data-fx-cal] .fx-lnk{margin-top:4px}

/* the scratch card IS the jasmine-and-rose tag from the gate; the foil fills its ivory disc */
#fxScr{width:min(84vw,330px);aspect-ratio:374/496;padding:0;margin:4px auto 0;border-radius:0;background:url(art/tag.webp) center/100% 100% no-repeat;box-shadow:none;
  filter:drop-shadow(0 12px 16px rgba(60,20,0,.35));transform-origin:50% 4%;animation:tagSway 4.2s ease-in-out infinite}
#fxScr:before{display:none}
#fxScr.started,#fxScr.done{animation:none}
#fxScr .fx-scrUnder,#fxScr #fxFoil{inset:auto;left:19.4%;top:34.4%;width:62%;height:46.8%;border-radius:50%}
#fxScr .fx-scrUnder{background:radial-gradient(closest-side,#fffaf0,#f6ead6);gap:4px;padding:0 8px}
.fx-scrUnder .fx-caps{font-size:10px;letter-spacing:2.5px}
.fx-scrD{font:400 clamp(24px,8vw,30px)/1.05 var(--f-head);color:var(--ink);letter-spacing:0}
.fx-scrD i{color:var(--marigold)}
.fx-scrT{font:italic 500 16px/1.25 var(--f-serif);color:var(--rose)}
.fx-scrP{margin:0 6px;font:500 14px/1.3 var(--f-serif)}
.fx-scrSpk img{width:20px}
#fxScr.done{filter:drop-shadow(0 12px 16px rgba(60,20,0,.35)) drop-shadow(0 0 24px rgba(255,190,90,.9))}
#fxScrBtn{margin-top:12px}

/* the wedding day: a gold thread, a marigold at each hour */
.fx-day:before{left:86px;width:0;background:none;border-left:1.5px dashed rgba(184,137,58,.75)}
.fx-day li:before{left:76px;top:12px;width:20px;height:20px;border-radius:0;background:url(art/p6.webp) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 2px rgba(90,40,0,.3))}
.fx-day b{font:500 13px/1.8 var(--f-sans);letter-spacing:1.5px;color:var(--gold)}
.fx-dt{font:400 22px/1.2 var(--f-head)}
.fx-db{font:italic 500 17px/1.35 var(--f-serif)}

/* the reply: Gilda names, gold pills; once one is picked the other fades (the old phool look) */
#fxRBody{gap:8px}
.fx-q{border-radius:0;border-bottom:1px solid rgba(184,137,58,.3)}
.fx-qL,.fx-nm{font:400 24px/1.2 var(--f-head);color:var(--ink)}
.fx-wh,.fx-qH{font:italic 400 16px/1.3 var(--f-serif)}
.fx-rl li{align-items:center}
.fx-rl .fx-opts{flex-direction:column;width:min(100%,280px);gap:9px}
.fx-opts button{border:0;font:500 17px/1 var(--f-serif);font-style:normal;letter-spacing:.5px;padding:14px 18px;color:var(--ink);background:linear-gradient(180deg,#efdcb0,#d2b076);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(110,70,10,.22)}
.fx-rl .fx-opts button[data-id=yes]{background:linear-gradient(180deg,#d1a85a,#ad8237);color:#fffaf0}
.fx-opts button.on{background:linear-gradient(180deg,#d1a85a,#ad8237);color:#fffaf0;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 3px rgba(224,128,26,.35),0 4px 12px rgba(110,70,10,.3)}
.fx-opts:has(.on):not(.fx-who) button:not(.on){filter:saturate(.35) opacity(.6)}
.fx-opts button.on:before{content:"✓  "}
.fx-field,#fxRForm textarea,.fx-sec textarea{font:400 17px/1.4 var(--f-serif);border-color:rgba(184,137,58,.5);border-radius:14px;margin-top:0;background:rgba(255,251,242,.75)}
.fx-optin{font-family:var(--f-serif)}
#fxSend{margin-top:16px;padding:17px 34px;font-size:18px}

/* wishes: ivory notes with a jasmine flower tucked in the corner */
.fx-wish{padding:20px 22px 14px}
.fx-wish:before{content:"";position:absolute;right:-8px;top:-10px;width:30px;height:30px;background:url(art/p7.webp) center/contain no-repeat;transform:rotate(-14deg);filter:drop-shadow(0 2px 2px rgba(90,40,0,.25))}
.fx-wish blockquote{font:italic 500 19px/1.45 var(--f-serif)}
.fx-wish figcaption,.fx-caps{font-family:var(--f-sans);font-weight:500}
.fx-ivN{font-family:var(--f-serif);font-weight:500}
.fx-ivL{font:italic 500 19px/1.4 var(--f-serif);color:var(--rose)}
.fx-upi code{font-family:var(--f-serif);font-weight:500}

/* invocation: the flower Ganesh over a short marigold string */
.fx-invoc{margin:0 0 6px}
.fx-invoc img{width:min(30vw,118px)}
.fx-invL{color:var(--rose)}
.fx-invoc .mdiv{display:block;width:150px;height:14px;margin-top:8px;background:url(art/p6.webp) 0 0/14px 13px round}

/* story chapters with a photo: a round jasmine-and-rose garland (the gate tag's ring), sides alternate */
#story .ch.has-img{gap:6px}
#story .chImg{position:relative;margin:0 0 10px;width:58%;max-width:220px;aspect-ratio:1;border-radius:50%;padding:12px;background:var(--paper);box-shadow:0 12px 24px rgba(90,40,0,.2);
  opacity:0;transform:translateY(22px) scale(.94) rotate(-3deg);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
#story .ch.alt .chImg{transform:translateY(22px) scale(.94) rotate(3deg)}
#story .chImg:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:12px;pointer-events:none;z-index:1;background:url(art/p7.webp) 0 0/14px 14px round;filter:drop-shadow(0 2px 2px rgba(90,40,0,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#story .chImg:after{content:"";position:absolute;left:50%;bottom:-12px;width:40px;height:34px;margin-left:-20px;background:url(art/i-sangeet.webp) center/contain no-repeat;z-index:2;filter:drop-shadow(0 3px 3px rgba(90,20,0,.3))}
#story .chImg img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.in #story .chImg{opacity:1;transform:rotate(-2deg)}
.in #story .ch.alt .chImg{transform:rotate(2deg)}

/* Devanagari: no wide letter-spacing, no upper-casing, no fake italic, taller lines */
.lang-hi .caps,.lang-hi .tap,.lang-hi .scrollHint,.lang-hi .parents b,.lang-hi .count i,.lang-hi .tl .tm,.lang-hi .lnk,.lang-hi .pill,.lang-hi #story b,.lang-hi .fx-caps,.lang-hi .fx-lnk,.lang-hi .fx-day b,.lang-hi .fx-btn{letter-spacing:.3px;text-transform:none}
.lang-hi .caps,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .parents b,.lang-hi .count i,.lang-hi .tl .tm,.lang-hi .fx-caps,.lang-hi #story b{font-size:14px}
.lang-hi .pill,.lang-hi .tap,.lang-hi .fx-btn,.lang-hi .fx-opts button,.lang-hi .gold{font-size:15px}
.lang-hi .it,.lang-hi .and,.lang-hi .hCity,.lang-hi .tl .tw,.lang-hi .dress span,.lang-hi .fx-day b,.lang-hi .fx-scrT,.lang-hi .fx-ivL,.lang-hi .fx-wish blockquote,.lang-hi .fx-db,.lang-hi .fx-wh,.lang-hi .fx-qH,.lang-hi .fx-lookT{font-style:normal}
.lang-hi .heroText h1,.lang-hi .names{line-height:1.35}
.lang-hi .sec,.lang-hi .fx-ch,.lang-hi .fx-qL,.lang-hi .fx-nm,.lang-hi .tl .tt,.lang-hi #story i,.lang-hi .dress b,.lang-hi .fx-dt{line-height:1.4}
.lang-hi .sec{font-size:clamp(28px,8vw,34px)}
.lang-hi .big2{font-size:clamp(32px,9vw,40px)}
.lang-hi .fx-cb{font-size:16px;line-height:1.6}
.lang-hi .fx-wish figcaption{font-size:13px}
@media (prefers-reduced-motion: reduce){#story .chImg{opacity:1!important;transition:none!important}#fxScr{animation:none}}