/* Moti Jhalar: a scroll invitation behind a curtain of pearl and gold bead
   strings. The curtain opening is a real motion clip; everything on top
   (names, lantern glow, sparks, the pearl fringes on every page) is code. */
:root{
  --ivory:#f7f1e6; --ivory2:#f2e9d9; --ink:#4a3a2c; --muted:#86735e; --gold:#b48a4a; --gold2:#d6bb86;
  --mari:#d9822b; --blush:#c4877a;
  --f-disp:"Italiana", "Noto Serif Devanagari", "Didot", Georgia, serif;
  --f-serif:"EB Garamond", "Noto Serif Devanagari", Georgia, serif;
  --f-cap:"Tenor Sans", "Noto Serif Devanagari", system-ui, sans-serif;
  --col:min(100vw, 480px);
}
*{box-sizing:border-box}
html,body{margin:0;background:#e8dfcf;color:var(--ink);font-family:var(--f-serif);-webkit-tap-highlight-color:transparent}
body.locked{overflow:hidden;height:100%}
#page{width:var(--col);margin:0 auto;background:var(--ivory) url(art/silk.jpg) center/cover;overflow:hidden;box-shadow:0 0 60px rgba(70,50,30,.14)}
section{position:relative;width:100%}

/* ---------- hero ---------- */
.hero{height:100vh;height:100svh;min-height:560px;max-height:960px;overflow:hidden;background:#d9c7a6}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.glows,.glints,.sparks{position:absolute;inset:0;pointer-events:none}
/* the glow layer is laid over the picture exactly as object-fit:cover places it (height fills on phones) */
.glows{inset:auto;left:50%;top:0;height:100%;aspect-ratio:9/16;transform:translateX(-50%)}
.glows i{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,120,.9),rgba(255,160,60,.35) 40%,rgba(255,140,40,0));mix-blend-mode:screen;opacity:0;transform:translate(-50%,-50%)}
.glints i{position:absolute;width:14px;height:14px;margin:-7px;opacity:0;background:radial-gradient(closest-side,#fff 0,rgba(255,250,235,.9) 18%,rgba(255,240,200,0) 70%);mix-blend-mode:screen}
.glints i:before,.glints i:after{content:"";position:absolute;left:50%;top:50%;width:26px;height:1.5px;margin:-.75px -13px;background:linear-gradient(90deg,transparent,rgba(255,252,240,.95),transparent)}
.glints i:after{transform:rotate(90deg)}
.sparks i{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#ffd99a;box-shadow:0 0 8px 2px rgba(255,190,90,.7);opacity:0}
.heroText{position:absolute;left:0;right:0;top:21.5%;text-align:center;padding:0 22px;pointer-events:none}
.heroText>*{opacity:0}
.pre{margin:0 0 6px;font:400 14px/1 var(--f-cap);letter-spacing:5px;text-transform:uppercase;color:#7a4a35;text-shadow:0 0 14px rgba(255,236,214,.9)}
.heroText h1{margin:0;font:400 clamp(44px,13vw,62px)/1.04 var(--f-disp);letter-spacing:1px;color:#4e2a1e}
.heroText h1 span{display:block}
.heroText h1 .amp{font:italic 400 .7em/1 var(--f-serif);color:#9a6a3a}
.date{margin:16px 0 0;font:400 15px/1 var(--f-cap);letter-spacing:4px;color:#5e3626;text-shadow:0 0 12px rgba(255,236,214,.95)}
.city{margin:8px 0 0;font:italic 400 19px/1 var(--f-serif);color:#6e4232;text-shadow:0 0 12px rgba(255,236,214,.95)}
.scrollHint{position:absolute;left:50%;bottom:22px;width:22px;height:34px;margin-left:-11px;border:1.5px solid rgba(255,246,228,.85);border-radius:12px;opacity:0}
.scrollHint span{position:absolute;left:50%;top:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff6e4;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:translateY(0);opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;z-index:20;pointer-events:auto;cursor:pointer}
#gate.gone{display:none}
.tagWrap{position:absolute;left:50%;top:0;width:min(40vw,176px);margin-left:calc(min(40vw,176px) / -2);transform-origin:50% 0;display:flex;flex-direction:column;align-items:center}
.tagStr{width:auto;height:calc(30vh);max-height:270px;display:block;filter:drop-shadow(0 3px 3px rgba(60,40,20,.3))}
.tag{position:relative;width:100%;margin-top:-6px;border:0;background:none;padding:0;cursor:pointer;filter:drop-shadow(0 10px 14px rgba(60,40,20,.38))}
.tag img{width:100%;height:auto;display:block}
.tag span{position:absolute;left:0;right:0;top:50%;transform:translateY(-38%);text-align:center;font:400 clamp(30px,9.4vw,42px)/1 var(--f-disp);color:#8a6630;letter-spacing:1px}
.tap{position:absolute;left:50%;transform:translateX(-50%);bottom:9%;margin:0;padding:12px 22px;border-radius:999px;background:rgba(52,34,22,.8);box-shadow:0 0 0 1px rgba(230,205,160,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;font:400 13px/1 var(--f-cap);letter-spacing:5px;text-transform:uppercase;color:#fbf3e3;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.72}}
#gate.open .tap{opacity:0;animation:none;transition:opacity .4s}

/* ---------- ivory pages ---------- */
.pg{padding:150px 28px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.pg+.pg{border-top:1px solid rgba(180,138,74,.18)}
.small{margin:0;font:400 17px/1.55 var(--f-serif);color:var(--muted)}
.body{margin:0;font:400 18px/1.65 var(--f-serif);color:var(--ink);max-width:330px}
.it{font-style:italic}
.caps{margin:0;font:400 13px/1.6 var(--f-cap);letter-spacing:3.5px;text-transform:uppercase;color:var(--gold)}
.names{margin:0;font:400 clamp(34px,10vw,44px)/1.08 var(--f-disp);color:var(--ink)}
.and{margin:0;font:italic 400 26px/1 var(--f-serif);color:var(--gold)}
.sec{margin:0 0 6px;font:400 clamp(32px,8.8vw,42px)/1.1 var(--f-disp);color:var(--ink)}
.big{margin:0;font:500 22px/1.3 var(--f-serif);color:var(--ink)}
.sign{margin:8px 0 0;font:italic 400 22px/1.3 var(--f-serif);color:var(--ink)}
.parents{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.parents div{display:flex;flex-direction:column;gap:4px}
.parents b{font:400 11px/1.5 var(--f-cap);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-top:6px}
.parents span{font:400 16px/1.35 var(--f-serif)}

/* the signature: a pearl jhalar fringe on top of every page */
.fringe{position:absolute;left:0;right:0;top:0;height:132px;z-index:2;cursor:pointer}
.fringe .rod{position:absolute;left:-2%;right:-2%;top:0;height:7px;background:linear-gradient(#e9d4a6,#b48a4a 55%,#8c6630);box-shadow:0 2px 4px rgba(80,55,25,.3)}
.fringe .st{position:absolute;top:3px;width:auto;transform-origin:50% 0;will-change:transform;filter:drop-shadow(0 4px 3px rgba(80,55,25,.22))}
.lan{position:absolute;top:0;z-index:3;width:36px;transform-origin:50% 0;pointer-events:none}
.lan .ch{display:block;margin:0 auto;width:2px;background:linear-gradient(90deg,#8c6630,#e2c78f,#8c6630)}
.lan img{display:block;width:100%;margin-top:-2px;filter:drop-shadow(0 6px 6px rgba(80,55,25,.28))}
.lan .gl{position:absolute;left:50%;bottom:6%;width:150%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,100,.55),rgba(255,170,70,0));mix-blend-mode:multiply;animation:flick 2.6s ease-in-out infinite}
.lan.l{left:3%}.lan.r{right:3%}.lan.m{left:50%;margin-left:-18px}
@keyframes flick{0%,100%{opacity:.85}22%{opacity:.6}40%{opacity:1}63%{opacity:.7}80%{opacity:.95}}

/* countdown in pearl tags */
.count{display:flex;gap:12px;justify-content:center;margin-top:6px}
.count div{display:flex;flex-direction:column;align-items:center;gap:8px}
.tagN{position:relative;width:96px;display:block}
.tagN img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(80,55,25,.22))}
.tagN b{position:absolute;inset:0;padding-top:12%;display:flex;align-items:center;justify-content:center;font:400 32px/1 var(--f-disp);color:var(--ink);font-variant-numeric:tabular-nums}
.count i{font:400 12px/1 var(--f-cap);letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-style:normal}

/* timeline on a pearl string */
.tl{list-style:none;margin:8px 0 0;padding:0;width:100%;position:relative}
.tl:before{content:"";position:absolute;left:62px;top:24px;bottom:24px;width:10px;margin-left:-5px;background:url(art/b-pearl.webp) center top/9px 11px repeat-y;opacity:.9}
.tl li{position:relative;display:grid;grid-template-columns:124px 1fr;align-items:center;padding:14px 0;text-align:left}
.tl .icw{justify-self:start;width:124px;display:flex;justify-content:center}
.tl .ic{width:74px;height:74px;object-fit:contain;background:var(--ivory);border-radius:50%;padding:6px;box-shadow:0 0 0 1px rgba(180,138,74,.35),0 6px 12px rgba(80,55,25,.12)}
.tl .tx{display:flex;flex-direction:column;gap:3px;padding-left:8px}
.tl .tt{font:400 14px/1.4 var(--f-cap);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink)}
.tl .tm{font:italic 500 19px/1.2 var(--f-serif);color:var(--gold)}
.tl .tv{font:400 16px/1.35 var(--f-serif);color:var(--muted)}
.tl .tw{font:italic 400 16px/1.35 var(--f-serif);color:var(--blush)}
.lnk{font:400 12px/1 var(--f-cap);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid rgba(180,138,74,.6);border-radius:999px;padding:10px 16px;margin-top:6px;display:inline-block;background:rgba(255,252,245,.6)}
.tl .tx .lnk{align-self:flex-start;padding:8px 13px}
.bead{position:absolute;left:62px;top:14px;width:16px;margin-left:-8px;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(80,55,25,.35))}
.bead img{width:100%;display:block}
.tl li .icw,.tl li .tx{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.tl li.on .icw,.tl li.on .tx{opacity:1;transform:none}

/* photos framed with a pearl border */
.pframe{margin:6px 0 10px;padding:9px;width:100%;border-radius:14px;background:url(art/b-pearl.webp) 0 0/12px 12px round,linear-gradient(var(--ivory2),var(--ivory2));box-shadow:0 14px 26px rgba(80,55,25,.18)}
.pframe .photo{display:block;width:100%;height:auto;border-radius:8px}
.attire{width:112%;max-width:none;margin:6px -6%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.arch{margin:0 0 12px;width:78%;aspect-ratio:3/4;border-radius:999px 999px 14px 14px;overflow:hidden;padding:8px;background:url(art/b-pearl.webp) 0 0/12px 12px round,linear-gradient(var(--ivory2),var(--ivory2));box-shadow:0 14px 26px rgba(80,55,25,.18)}
.arch img{width:100%;height:100%;object-fit:cover;display:block;border-radius:999px 999px 8px 8px}
#story{display:flex;flex-direction:column;gap:16px;width:100%}
#story .chTx b{display:block;font:400 12px/1.4 var(--f-cap);letter-spacing:3px;color:var(--gold)}
#story .chTx i{display:block;font:italic 500 20px/1.3 var(--f-serif);margin:2px 0}

/* 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;gap:8px;padding:14px 0;border-bottom:1px solid rgba(180,138,74,.3)}
.rl .nm{font:400 24px/1.2 var(--f-disp)}
.rl .wh{font:italic 400 16px/1.3 var(--f-serif);color:var(--muted)}
.rl .opts{display:flex;gap:8px;justify-content:center}
.rl .opts button,.send{border:1px solid var(--gold);background:rgba(255,252,245,.7);color:var(--ink);font:400 12px/1 var(--f-cap);letter-spacing:2px;text-transform:uppercase;padding:13px 14px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.rl .opts button.on{background:var(--gold);color:#fffaf0}
textarea{width:100%;margin-top:14px;border:1px solid rgba(180,138,74,.5);background:rgba(255,252,245,.65);border-radius:12px;padding:12px;font:400 17px/1.4 var(--f-serif);color:var(--ink);resize:vertical}
.send{margin-top:16px;padding:17px 28px;font-size:13px;background:linear-gradient(#c49a58,#9c7438);border-color:#9c7438;color:#fffaf0;box-shadow:0 8px 16px rgba(120,85,35,.28)}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.endLan{display:flex;justify-content:center;align-items:flex-start;gap:26px;margin:22px 0 4px}
.endLan img{width:54px;transform-origin:50% 0;animation:sw 4.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(80,55,25,.25))}
.endLan img:nth-child(2){width:66px;margin-top:-10px;animation-delay:-1.5s}
.endLan img:nth-child(3){animation-delay:-3s}
@keyframes sw{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* falling pearls and marigold petals over the pages */
#fall{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#fall img{position:absolute;left:0;top:0;width:16px;opacity:.9;will-change:transform}

/* sections lift up as they arrive; pictures rise off the page with a growing shadow */
.rv>*:not(.fringe):not(.lan){opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.rv.in>*:not(.fringe):not(.lan){opacity:1;transform:none}
.rv.in>*:nth-child(3){transition-delay:.12s}.rv.in>*:nth-child(4){transition-delay:.24s}.rv.in>*:nth-child(5){transition-delay:.36s}.rv.in>*:nth-child(6){transition-delay:.48s}.rv.in>*:nth-child(n+7){transition-delay:.6s}
.rv .pframe,.rv .arch{box-shadow:0 0 0 rgba(80,55,25,0);transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.2,.8,.2,1),box-shadow 1.8s ease}
.rv.in .pframe,.rv.in .arch{box-shadow:0 16px 30px rgba(80,55,25,.2)}
.rv .lan{opacity:0;transform:translateY(-70px);transition:transform 1.6s cubic-bezier(.3,1.25,.5,1) .2s,opacity .8s ease .2s}
.rv.in .lan{opacity:1;transform:none}
.lan.sw img,.lan.sw .ch{animation:none}

#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(180,138,74,.6);background:rgba(255,252,245,.82);color:var(--ink);font-size:16px;cursor:pointer}
#snd.off{opacity:.5;text-decoration:line-through}
@media (prefers-reduced-motion: reduce){.rv>*:not(.fringe):not(.lan){opacity:1!important;transform:none!important;transition:none}.tap,.lan .gl,.endLan img,.scrollHint span{animation:none}.rv .lan{transform:none}.tl li .icw,.tl li .tx{opacity:1;transform:none}}
.lan .swg{transform-origin:50% 0;animation:sw 5s ease-in-out infinite}

/* ================= the full-invite kit (../_full/fx.css) strung in pearls and gold =================
   every card, photo, film and look hangs in a ring of real pearls (b-pearl), the date is
   scratched off the big pearl tag, timelines are pearl strings with gold-bead stops */
:root{
  --fx-ink:#4a3a2c; --fx-muted:#86735e; --fx-accent:#9c7438; --fx-accent-2:#d6bb86; --fx-soft:#c4877a; --fx-err:#a5523f;
  --fx-head:"EB Garamond","Noto Serif Devanagari",Georgia,serif; --fx-caps-font:"Tenor Sans","Noto Serif Devanagari",system-ui,sans-serif;
  --fx-card:linear-gradient(180deg,rgba(255,252,245,.94),rgba(244,235,219,.94));
  --fx-line:rgba(180,138,74,.5);
  --fx-edge:radial-gradient(circle at 40% 35%,#fffefa 0 1.4px,#f1e8d8 2.6px,#c9b796 3.5px,transparent 4px) 0 0/8.5px 8.5px;
  --fx-edge-w:8px; --fx-radius:16px;
  --fx-shadow:0 8px 18px rgba(80,55,25,.13); --fx-shadow-lg:0 14px 30px rgba(80,55,25,.24);
  --fx-btn:linear-gradient(180deg,rgba(255,252,245,.95),rgba(242,233,217,.95)); --fx-btn-ink:#4a3a2c;
  --fx-on:linear-gradient(#c49a58,#9c7438); --fx-on-ink:#fffaf0; --fx-on-line:#9c7438;
  --fx-field:rgba(255,252,245,.7); --fx-card-solid:#f7f1e6; --fx-langs-bg:rgba(255,252,245,.92); --fx-langs-ink:#9c7438;
  --fx-foil-1:#94692f; --fx-foil-2:#cfa962; --fx-foil-3:#f4e3b6; --fx-foil-dots:#fffdf5; --fx-foil-ink:rgba(76,50,22,.85); --fx-scr-shape:oval;
  --fx-lb-bg:rgba(46,32,20,.94); --fx-lb-ink:#f7ecd8;
}
.lang-hi{--fx-head:Georgia,"Noto Serif Devanagari","EB Garamond",Georgia,serif;--fx-caps-font:Georgia,"Noto Serif Devanagari","Tenor Sans",serif}
.fx-h{margin:0 0 6px}
.fx-sec .small.it:empty{display:none}

/* the pearl ring: the template's own pearl bead, strung round each piece */
.fx-card:before,.fx-shot:before,.fx-film:before,.fx-look:before{background:url(art/b-pearl.webp) 0 0/8px 8px round;padding:8px;filter:drop-shadow(0 1px 1px rgba(80,55,25,.3))}
.fx-card{padding:24px 24px 22px}
.fx-card:after{content:"";position:absolute;left:50%;bottom:-17px;width:13px;height:24px;margin-left:-6.5px;background:url(art/b-drop.webp) center top/contain no-repeat;filter:drop-shadow(0 3px 2px rgba(80,55,25,.3));transform-origin:50% 0;animation:sw 3.8s ease-in-out infinite}
.fx-cards{gap:30px}
.fx-ch{font:400 26px/1.15 var(--f-disp);color:var(--ink)}
.fx-cb{font:400 17px/1.5 var(--f-serif)}
.fx-cb strong{font-family:var(--f-cap)}
.fx-shot{padding:10px;background:var(--ivory2)}
.fx-shot:before{padding:8px}
.fx-shot img{border-radius:6px}
.fx-film{padding:12px;background:var(--ivory2)}
.fx-film img,.fx-film video,.fx-film iframe{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border-radius:10px}
.fx-filmPlay{background:radial-gradient(closest-side,#fffaf0 70%,#f2e6cf);padding:0}
.fx-filmPlay:before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:8px;background:url(art/b-pearl.webp) 0 0/8px 8px round;
  -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)}
.fx-filmPlay span{border-left-color:var(--gold)}
.fx-look{padding:13px 13px 18px;background:var(--ivory2)}
.fx-look:before{padding:8px}
.fx-lookT{font-family:var(--f-serif)}

/* buttons: ivory pills ringed in gold (the template's .lnk); the main ones stay solid gold (.send) */
.fx-btn{font:400 12px/1 var(--f-cap);letter-spacing:2.5px;box-shadow:inset 0 0 0 1px rgba(180,138,74,.7),0 6px 14px rgba(80,55,25,.14);padding:15px 24px}
.fx-sec .fx-btn.send,#rsvp .fx-btn.send{background:linear-gradient(#c49a58,#9c7438);color:#fffaf0;box-shadow:0 8px 16px rgba(120,85,35,.28)}
.fx-lnk{font:400 11px/1.2 var(--f-cap);letter-spacing:2.5px;color:var(--ink);border-bottom-color:var(--gold)}
.tl .tx [data-fx-cal]{display:flex}
/* lanterns hang on short chains over the full-width kit pieces so they sit beside the heading */
.fx-sec .lan .ch,#rsvp .lan .ch,#countdown .lan .ch{height:28px!important}
.tl .tx [data-fx-cal] .fx-lnk{margin-top:2px}

/* the scratch card IS the big pearl tag, hung from a pearl strand, the foil inside its satin oval */
#fxScr{width:min(80vw,310px);aspect-ratio:254/358;padding:0;margin:62px auto 6px;border-radius:0;background:url(art/tag.webp) center/100% 100% no-repeat;box-shadow:none;
  filter:drop-shadow(0 12px 16px rgba(60,40,20,.32));transform-origin:50% -60px;animation:tagSw 4.6s ease-in-out infinite}
#fxScr:before{display:none}
#fxScr:after{content:"";position:absolute;left:50%;bottom:calc(100% - 10px);width:12px;height:66px;margin-left:-6px;background:url(art/s-3.webp) center bottom/auto 100% no-repeat;transform:scaleY(-1)}
#fxScr.started{animation:none}
@keyframes tagSw{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
#fxScr .fx-scrUnder,#fxScr #fxFoil{inset:auto;left:20.3%;top:23.6%;width:60%;height:60.2%;border-radius:50%;background:radial-gradient(closest-side,#fffcf4,#f3e9d6)}
#fxScr #fxFoil{background:none}
.fx-scrUnder{gap:4px;padding:0 6px}
.fx-scrUnder .fx-caps{font-size:10px;letter-spacing:2.5px}
.fx-scrD{font:400 clamp(22px,7.4vw,28px)/1.05 var(--f-disp);color:var(--ink);letter-spacing:0}
.fx-scrT{font:italic 400 15px/1.25 var(--f-serif);color:var(--gold)}
.fx-scrP{margin:0 4px;font:400 13px/1.3 var(--f-serif)}
.fx-scrSpk img{width:16px}
.fx-scr.done{animation:none}
#fxScr.done{filter:drop-shadow(0 12px 16px rgba(60,40,20,.32)) drop-shadow(0 0 22px rgba(255,214,140,.9))}
#fxScrBtn{margin-top:14px}

/* the wedding day: a pearl string with gold-bead stops */
.fx-day:before{left:86px;width:10px;margin-left:-5px;background:url(art/b-pearl.webp) center top/9px 11px repeat-y;opacity:.9}
.fx-day li:before{left:78px;top:15px;width:16px;height:16px;background:url(art/b-gold.webp) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 2px rgba(80,55,25,.35))}
.fx-day b{font:italic 500 18px/1.4 var(--f-serif);letter-spacing:0;color:var(--gold)}
.fx-dt{font:400 14px/1.45 var(--f-cap);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink)}
.fx-db{font:italic 400 16px/1.35 var(--f-serif)}

/* reply form: the old moti look (Italiana function names, ivory pills that turn gold) */
#fxRBody{gap:6px}
.fx-q{border-radius:0;border-bottom:1px solid rgba(180,138,74,.3)}
.fx-qL,.fx-nm{font:400 25px/1.2 var(--f-disp);color:var(--ink)}
.fx-opts button{border:1px solid var(--gold);background:rgba(255,252,245,.7);font:400 12px/1 var(--f-cap);letter-spacing:2px;text-transform:uppercase;padding:13px 14px}
.fx-opts.fx-chips button{font-size:11px;padding:11px 12px}
.fx-field,#fxRForm textarea,.fx-sec textarea{font:400 17px/1.4 var(--f-serif);border-color:rgba(180,138,74,.5);border-radius:12px;margin-top:0}
.fx-optin{font-family:var(--f-serif)}
#fxSend{padding:17px 28px}

/* wishes: ivory notes with a pearl strand along the top */
.fx-wish{padding:24px 20px 16px}
.fx-wish:before{content:"";position:absolute;left:14px;right:14px;top:6px;height:9px;background:url(art/b-pearl.webp) 0 0/9px 9px round}
.fx-wish blockquote{font:italic 400 19px/1.45 var(--f-serif)}
.fx-wish figcaption,.fx-caps{font-family:var(--f-cap)}
.fx-ivN{font-family:var(--f-serif)}
.fx-ivL{font:italic 400 19px/1.4 var(--f-serif);color:var(--blush)}
.fx-upi code{font-family:var(--f-serif)}

/* invocation: the pearl Ganesh over a short pearl strand */
.fx-invoc{margin:0 0 6px}
.fx-invoc img{width:min(28vw,110px)}
.fx-invL{color:var(--gold)}
.fx-invoc .pdiv{display:block;width:120px;height:9px;margin-top:8px;background:url(art/b-pearl.webp) 0 0/9px 9px round}

/* story chapters with a photo: a pearl-strung oval beside the words, sides alternating */
#story .ch{display:flex;flex-direction:column;align-items:center;gap:12px}
#story .chImg{position:relative;margin:0;width:60%;max-width:230px;aspect-ratio:4/5;border-radius:50%/44%;padding:11px;background:var(--ivory2);box-shadow:0 12px 24px rgba(80,55,25,.2);
  opacity:0;transform:translateY(22px) scale(.94) rotate(-2deg);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
#story .ch.alt .chImg{transform:translateY(22px) scale(.94) rotate(2deg)}
#story .chImg:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:9px;pointer-events:none;z-index:1;background:url(art/b-pearl.webp) 0 0/9px 9px round;
  -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:-20px;width:14px;height:26px;margin-left:-7px;background:url(art/b-drop.webp) center top/contain no-repeat}
#story .chImg img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.in #story .chImg{opacity:1;transform:rotate(-1.5deg)}
.in #story .ch.alt .chImg{transform:rotate(1.5deg)}
#story .ch.has-img .chTx{margin-top:12px}
#story .chTx span{display:block;font:400 16px/1.5 var(--f-serif);color:var(--muted);max-width:320px;margin:0 auto}
.closing{padding-top:140px}

/* Devanagari: no wide letter-spacing, no upper-casing, no fake italic, taller lines */
.lang-hi .caps,.lang-hi .pre,.lang-hi .date,.lang-hi .tap,.lang-hi .parents b,.lang-hi .count i,.lang-hi .tl .tt,.lang-hi .lnk,.lang-hi .send,.lang-hi #story .chTx b,.lang-hi .fx-dt,.lang-hi .fx-opts button,.lang-hi .fx-btn,.lang-hi .fx-lnk,.lang-hi .fx-caps{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 .fx-caps{font-size:14px}
.lang-hi .send,.lang-hi .fx-btn,.lang-hi .fx-opts button,.lang-hi .tl .tt,.lang-hi .fx-dt,.lang-hi .tap{font-size:15px}
.lang-hi .it,.lang-hi .city,.lang-hi .and,.lang-hi .sign,.lang-hi .tl .tm,.lang-hi .tl .tw,.lang-hi #story .chTx i,.lang-hi .heroText h1 .amp,.lang-hi .fx-day b,.lang-hi .fx-scrT,.lang-hi .fx-ivL,.lang-hi .fx-wish blockquote,.lang-hi .fx-db{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 .rl .nm{line-height:1.4}
.lang-hi .sec{font-size:clamp(28px,8vw,36px)}
.lang-hi .fx-scrD{font-family:var(--f-disp)}
@media (prefers-reduced-motion: reduce){#story .chImg{opacity:1!important;transition:none!important}#fxScr,.fx-card:after{animation:none}}
.lang-hi .fx-wish figcaption{font-size:13px}
.lang-hi .fx-caps{font-size:15px}
.lang-hi .fx-cb{line-height:1.6}