/* Banarasi Gold: a woven Banarasi brocade invitation on ivory silk. The arch opening is
   real motion (a generated clip); the zari shimmer, twinkling butis and drifting gold
   thread on top are code; every word is live data. */
:root{
  --silk:#efe5d0; --deep:#d9c9a6; --ink:#4a2f14; --gold:#9b7024; --gold-d:#7a5416; --gold-l:#d9b45e; --rose:#a8535e; --muted:#73583a;
  --f-head:"Cormorant Garamond", Georgia, serif;
  --f-caps:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --col:min(100vw, 480px); --valH:calc(var(--col) * .341 + 26px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--deep);color:var(--ink);font-family:var(--f-head);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 0%,#eadcbc,#cdb98f 75%) fixed}
body.locked{overflow:hidden;height:100%}
#page{position:relative;width:var(--col);margin:0 auto;background:var(--silk) url(art/silk.jpg) center top/100% auto repeat-y;overflow:hidden;box-shadow:0 0 70px rgba(80,55,15,.35)}
section{position:relative;width:100%}
img{max-width:100%}

/* ---------- gate: the hero's first frame (the closed brocade) shows through ---------- */
#gate{position:fixed;inset:0;z-index:20;overflow:hidden;cursor:pointer}
#gate:before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 46%,transparent 55%,rgba(70,45,10,.22));pointer-events:none}
.gBox{position:absolute;pointer-events:none;overflow:hidden}
/* the slow gold shimmer: a light band masked to the zari threads of the frame underneath */
.zari{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(118deg,transparent calc(var(--g,-40)*1% - 13%),rgba(255,236,180,.4) calc(var(--g,-40)*1% - 5%),rgba(255,250,230,1) calc(var(--g,-40)*1%),rgba(255,236,180,.4) calc(var(--g,-40)*1% + 5%),transparent calc(var(--g,-40)*1% + 13%));
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#gZari{-webkit-mask-image:url(art/zari-first.webp);mask-image:url(art/zari-first.webp)}
#hZari{-webkit-mask-image:url(art/zari-last.webp);mask-image:url(art/zari-last.webp);opacity:0}
body.named #hZari{opacity:1;transition:opacity 1.5s ease}
.monoBox{position:absolute;left:var(--mx,50%);top:var(--my,46%);width:var(--mw,50%);transform:translate(-50%,-50%);display:flex;justify-content:center;pointer-events:none}
.mono,.heroText h1 span{background:linear-gradient(100deg,#5a3a0a 0%,#7f5917 calc(var(--g,50)*1% - 16%),#c39a45 calc(var(--g,50)*1% - 3%),#f3dc9c calc(var(--g,50)*1%),#c39a45 calc(var(--g,50)*1% + 3%),#7f5917 calc(var(--g,50)*1% + 16%),#5a3a0a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mono{margin:0;font:600 clamp(66px,22vw,96px)/1 var(--f-head);letter-spacing:1px;white-space:nowrap;filter:drop-shadow(0 -1px 0 rgba(255,250,232,.9)) drop-shadow(0 2px 1.5px rgba(80,50,8,.55))}
.mono small{font-size:.5em;vertical-align:.5em;margin:0 .02em;font-style:italic}
.tap{position:absolute;left:50%;bottom:calc(10.5% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:13px 26px;border-radius:999px;border:1px solid rgba(255,244,214,.9);background:rgba(110,74,18,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;font:400 15px/1 var(--f-caps);letter-spacing:3px;color:#fff3d2;cursor:pointer;box-shadow:0 0 0 3px rgba(217,180,94,.45),0 6px 16px rgba(60,35,5,.35);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.72}}
#gate.open{pointer-events:none}
#gate.open:before,#gate.open .gBox{opacity:0;transition:opacity .8s ease}
#gate.open .tap{opacity:0;transition:opacity .4s;animation:none}
#gate.open .monoBox{opacity:0;transform:translate(-50%,-50%) scale(1.06);filter:blur(3px);transition:opacity .9s ease,transform 1s ease,filter .9s ease}
#gate.gone{display:none}
.glint{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0 9%,rgba(255,240,200,.9) 20%,transparent 56%),linear-gradient(90deg,transparent 47%,rgba(255,244,214,.95) 50%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(255,244,214,.95) 50%,transparent 53%);z-index:4}

/* ---------- hero ---------- */
.hero{height:100vh;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;background:#e8dcc0 url(art/first.jpg) center/cover}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.spk.silk{z-index:1}
.heroText{position:absolute;left:var(--tx,50%);top:var(--ty,47%);width:var(--tw,54%);transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;visibility:hidden;display:flex;flex-direction:column;align-items:center}
.heroText .fl{width:46%;height:auto;filter:drop-shadow(0 2px 2px rgba(90,58,16,.3))}
.heroText .fl.top{margin-bottom:12px}
.heroText .fl.bot{margin-top:14px;transform:scaleY(-1)}
.heroText h1{margin:0;font:600 54px/1.04 var(--f-head);white-space:nowrap}
.heroText h1 span{display:block;padding:0 .04em}
.heroText h1 .amp{font:italic 500 .72em/1 var(--f-head)}
.heroText .date{margin:12px 0 0;font:400 16px/1.3 var(--f-caps);letter-spacing:1.5px;color:var(--gold-d)}
.heroText .city{margin:4px 0 0;font:italic 500 19px/1.2 var(--f-head);color:var(--rose)}

/* ---------- ivory brocade pages ---------- */
.pageV{padding:var(--valH) 26px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.pageV:after{content:"";position:absolute;left:9px;right:9px;top:0;bottom:0;border-left:1.5px solid rgba(155,112,36,.4);border-right:1.5px solid rgba(155,112,36,.4);pointer-events:none}
.val{position:absolute!important;left:0;top:0;width:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 5px 4px rgba(80,52,12,.28))}
.rv .val{opacity:0;transform:translateY(-22px);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.rv.in .val{opacity:1;transform:none}
.small{margin:0;font:400 18px/1.5 var(--f-head);color:var(--muted)}
.it{font-style:italic}
.caps{margin:0;font:400 13px/1.6 var(--f-caps);letter-spacing:3px;text-transform:uppercase;color:var(--gold-d)}
.names{margin:0;font:500 clamp(34px,10vw,44px)/1.1 var(--f-head);color:var(--ink)}
.and{margin:0;font:italic 500 22px/1 var(--f-head);color:var(--rose)}
.sec{margin:0 0 8px;font:500 clamp(32px,9vw,40px)/1.1 var(--f-head);color:var(--gold-d);letter-spacing:.5px}
.big{margin:0;font:500 24px/1.3 var(--f-head);color:var(--ink)}
.divider{width:64%;margin:10px 0}
.parents{margin-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.parents div{display:flex;flex-direction:column;gap:4px}
.parents b{font:400 12px/1.4 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold-d)}
.parents span{font:400 17px/1.35 var(--f-head);color:var(--ink)}
.foot{position:relative;width:calc(100% + 52px);height:110px;margin:0 -26px -56px}
.corner{position:absolute!important;width:26%;max-width:130px;pointer-events:none;z-index:1}
.foot .corner.bl{left:2px;bottom:2px}
.foot .corner.br{right:2px;bottom:2px}

/* light sweep, masked to the woven ornament itself */
.sh{display:block;position:relative}
.sh>img{display:block;width:100%;height:auto}
.sh:after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(110deg,transparent 40%,rgba(255,246,215,.8) 50%,transparent 60%) 0 0/300% 100% no-repeat;background-position:150% 0;mix-blend-mode:screen;animation:sweep 9s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes sweep{0%{background-position:150% 0}50%,100%{background-position:-50% 0}}

/* welcome: text above the woven spray */
.welcome{gap:0}
.welcome .inner{padding:6px 5% 0;display:flex;flex-direction:column;gap:12px;z-index:2}
.welcome h2{margin:0;font:500 clamp(30px,8.6vw,38px)/1.15 var(--f-head);color:var(--gold-d)}
.welcome p{margin:0;font:400 19px/1.55 var(--f-head);color:var(--ink)}
.spray{display:flex;align-items:flex-end;justify-content:center;gap:4%;margin-top:26px;width:100%}
.spray img{height:auto}
.spray .pl,.spray .pr{width:24%}
.spray .pl{transform:scaleX(-1) rotate(-14deg)}
.spray .pr{transform:rotate(14deg)}
.spray .lo{width:34%;transition-delay:.45s}
.in .spray .pl.rise{transform:scaleX(-1) rotate(-14deg)}
.in .spray .pr.rise{transform:rotate(14deg)}
.spray .pl.rise{transform:scaleX(-1) rotate(-14deg) translateY(22px)}
.spray .pr.rise{transform:rotate(14deg) translateY(22px)}

/* countdown in brocade medallions */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:calc(100% + 30px)}
.count div{display:flex;flex-direction:column;align-items:center;gap:8px}
.med{position:relative;width:100%;aspect-ratio:1;display:block}
.med .sh{width:100%;height:100%}
.med .sh img{width:100%;height:100%;object-fit:contain}
.med b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 28px/1 var(--f-head);color:var(--gold-d);font-variant-numeric:tabular-nums}
.count i{font:400 12px/1 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);font-style:normal}

/* timeline with tiny zari icons */
.tl{list-style:none;margin:6px 0 0;padding:0;width:100%;position:relative}
.tl:before{content:"";position:absolute;left:50%;top:10px;bottom:10px;border-left:2px dotted rgba(155,112,36,.6)}
.tl li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:16px 0}
.tl li:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--silk);border:1.5px solid var(--gold)}
.tl .ic{justify-self:end;position:relative;width:88px;aspect-ratio:1;display:block}
.tl .ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tl .tx{text-align:left;display:flex;flex-direction:column;gap:3px}
.tl li:nth-of-type(even) .ic{order:2;justify-self:start}
.tl li:nth-of-type(even) .tx{order:1;text-align:right}
.tl .tm{font:600 21px/1 var(--f-head);color:var(--ink)}
.tl .tt{font:400 13px/1.4 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold-d)}
.tl .tv{font:italic 400 16px/1.35 var(--f-head);color:var(--muted)}
.tl .tw{font:italic 500 16px/1.35 var(--f-head);color:var(--rose)}
.lnk{font:400 12px/1 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);text-decoration:none;border-bottom:1px dotted var(--gold);padding-bottom:3px;margin-top:4px}
.tl .tx .lnk{align-self:flex-start}
.tl li:nth-of-type(even) .tx .lnk{align-self:flex-end}
.bead{position:absolute;left:50%;top:0;width:26px;height:26px;margin-left:-13px;z-index:3;pointer-events:none}
.bead img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(80,52,12,.35))}
.tl li .ic,.tl li .tx{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.tl li.on .ic{opacity:1;transform:none;filter:drop-shadow(0 6px 6px rgba(80,52,12,.3))}
.tl li.on .tx{opacity:1;transform:none}
.tl li.on:after{background:var(--gold)}

/* woven pictures on the silk */
.pic{width:calc(100% + 20px);max-width:none;margin:-4% -10px;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 62%,transparent);mask-image:radial-gradient(50% 50% at 50% 50%,#000 62%,transparent)}
.dress{display:grid;grid-template-columns:1fr 1fr;gap:0;width:calc(100% + 40px);margin:0 -20px}
.dress img{width:100%;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(50% 48% at 50% 50%,#000 72%,transparent);mask-image:radial-gradient(50% 48% at 50% 50%,#000 72%,transparent)}
.dress img+img{transition-delay:.45s}

/* zari-edged pill buttons */
.bp{display:inline-block;margin-top:14px;padding:15px 30px;border-radius:999px;border:0;background:rgba(255,250,236,.6);color:var(--gold-d);font:500 19px/1 var(--f-head);text-decoration:none;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 5px rgba(255,250,236,.7),inset 0 0 0 6.5px rgba(155,112,36,.5),0 5px 12px rgba(80,52,12,.18)}
.bp:before{content:"";position:absolute;inset:-5px;border-radius:999px;background:radial-gradient(circle,#c89b45 0 1.6px,transparent 2.2px) 0 0/9px 9px;-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);padding:3px;opacity:.9;pointer-events:none}
.bp.solid{background:linear-gradient(180deg,#b88a35,#8a6219);color:#fff6dc}

/* story: the woven arch (art/arch.jpg) as a nine-slice frame, so it grows with the chapters;
   the arch crown and the dome row keep their drawn size, the side pillars repeat */
.archS{min-height:calc(var(--col) * 1.6);padding:calc(var(--col) * .33) 14px 0;display:flex;flex-direction:column;justify-content:center;
  border-style:solid;border-width:0 calc(var(--col) * .111) calc(var(--col) * .458);
  border-image:url(art/arch.jpg) 560 100 412 fill / calc(var(--col) * .622) calc(var(--col) * .111) calc(var(--col) * .458) / 0 stretch round;
  -webkit-mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent)}
.archS .inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 0 26px}
.archS h2{margin:0;font:500 clamp(30px,8.6vw,38px)/1.15 var(--f-head);color:var(--gold-d)}
#story{display:flex;flex-direction:column;gap:20px}
#story .ch{display:flex;flex-direction:column;align-items:center;gap:12px}
#story b{display:block;font:400 13px/1.4 var(--f-caps);letter-spacing:3px;color:var(--gold-d)}
#story i{display:block;font:italic 500 19px/1.2 var(--f-head);margin:2px 0;color:var(--ink)}
#story span{font:400 15px/1.4 var(--f-head);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#story .has-img span{-webkit-line-clamp:5}
/* a chapter's photo: a little jharokha arch edged in the same woven zari as the cards */
#story .chImg{position:relative;margin:0;width:68%;max-width:220px;aspect-ratio:4/5;padding:9px;box-sizing:border-box;border-radius:50% 50% 12px 12px / 32% 32% 12px 12px;
  background:linear-gradient(180deg,#fbf3df,#ecdcb8);box-shadow:0 0 0 1px rgba(122,84,22,.7),inset 0 0 0 7px #8a6320,0 10px 20px rgba(80,52,12,.25)}
#story .chImg img{width:100%;height:100%;object-fit:cover;border-radius:50% 50% 6px 6px / 32% 32% 6px 6px;display:block}
#story .chImg:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--fx-edge-w);pointer-events:none;z-index:1;background:var(--fx-edge);
  -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);animation:zariSweep 9s ease-in-out infinite}
#story .ch.alt .chImg{animation-delay:-3s}

textarea{width:100%;border:1px solid rgba(155,112,36,.5);background:rgba(255,250,236,.6);border-radius:12px;padding:12px;font:400 17px/1.4 var(--f-head);color:var(--ink);resize:vertical}
textarea::placeholder,.fx-field::placeholder{color:rgba(115,88,58,.75)}
.sign{margin:0;font:italic 500 30px/1.2 var(--f-head);color:var(--gold-d)}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.kinari{display:block;width:100%;height:auto}

/* ---------- motion: sections lift, zari pieces rise off the silk with a growing shadow ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(22px) scale(.97);filter:drop-shadow(0 0 0 rgba(80,52,12,0));transition:opacity 1.3s ease .25s,transform 1.7s cubic-bezier(.2,.8,.2,1) .25s,filter 1.7s ease .25s}
.in .rise{opacity:1;transform:none;filter:drop-shadow(0 7px 6px rgba(80,52,12,.3))}
.foot .corner.bl.rise{transform:scale(-1,-1) translateY(-22px)}
.foot .corner.br.rise{transform:scaleY(-1) translateY(-22px)}
.in .foot .corner.bl.rise{transform:scale(-1,-1)}
.in .foot .corner.br.rise{transform:scaleY(-1)}
.pic.rise,.dress img.rise,#story .chImg.rise{filter:none}
.count div:nth-child(2) .rise{transition-delay:.4s}.count div:nth-child(3) .rise{transition-delay:.55s}.count div:nth-child(4) .rise{transition-delay:.7s}

#bits{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#bits img{position:absolute;left:0;top:0;height:auto;opacity:0;will-change:transform;filter:drop-shadow(0 1px 1px rgba(80,52,12,.3))}
#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 var(--gold);background:rgba(255,248,230,.85);color:var(--gold-d);font-size:15px;cursor:pointer}
#snd.off{opacity:.55;text-decoration:line-through}

@media (prefers-reduced-motion: reduce){
  .rv,.rise,.tl li .ic,.tl li .tx,.rv .val{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .foot .corner.bl{transform:scale(-1,-1)!important}.foot .corner.br{transform:scaleY(-1)!important}
  .tap,.sh:after{animation:none!important}
}

/* ================= the full-invite kit (../_full/fx.css) woven in Banarasi zari =================
   Every card, photo, the film and the scratch card is edged in a woven zari border: a gold
   twill with tiny sequins, a dark gold thread on either side, and the same slow light that
   runs across the woven ornaments. */
:root{
  --fx-ink:var(--ink); --fx-muted:var(--muted); --fx-accent:var(--gold-d); --fx-accent-2:var(--gold-l); --fx-soft:var(--rose); --fx-err:#a5423f;
  --fx-head:var(--f-head); --fx-caps-font:var(--f-caps);
  --fx-card:linear-gradient(180deg,rgba(255,251,240,.94),rgba(246,235,212,.94));
  --fx-line:rgba(155,112,36,.5);
  --fx-edge:linear-gradient(110deg,transparent 42%,rgba(255,248,222,.95) 50%,transparent 58%) 150% 0/300% 100% no-repeat,
    radial-gradient(circle,#fff6d6 0 .9px,transparent 1.5px) 0 0/7px 7px,
    repeating-linear-gradient(45deg,#f3dc9c 0 1.2px,#c9a04c 1.2px 2.6px,#8a6320 2.6px 3.4px,#b8903e 3.4px 4.4px);
  --fx-edge-w:6px;
  --fx-radius:16px; --fx-shadow:0 6px 16px rgba(80,52,12,.14); --fx-shadow-lg:0 12px 26px rgba(80,52,12,.26);
  --fx-btn:rgba(255,250,236,.7); --fx-btn-ink:var(--gold-d);
  --fx-on:linear-gradient(180deg,#d9b45e,#9b7024); --fx-on-ink:#fffaf0; --fx-on-line:#7a5416;
  --fx-field:rgba(255,250,236,.62);
  --fx-foil-1:#7f5917; --fx-foil-2:#c39a45; --fx-foil-3:#f3dc9c; --fx-foil-dots:#fff4d2; --fx-foil-ink:rgba(74,47,20,.85); --fx-scr-shape:rect;
  --fx-lb-bg:rgba(44,28,8,.94); --fx-lb-ink:#f6e7c4;
}
/* the woven border: a dark gold thread outside and inside the zari band */
.fx-card,.fx-shot,.fx-film,.fx-look,.fx-scr{box-shadow:0 0 0 1px rgba(122,84,22,.7),inset 0 0 0 7px #8a6320,var(--fx-shadow)}
.fx-film,.fx-scr{box-shadow:0 0 0 1px rgba(122,84,22,.7),inset 0 0 0 7px #8a6320,var(--fx-shadow-lg)}
.fx-shot:before,.fx-film:before,.fx-scr:before{padding:var(--fx-edge-w)}
.fx-card:before,.fx-shot:before,.fx-film:before,.fx-scr:before,.fx-look:before{animation:zariSweep 9s ease-in-out infinite}
.fx-card:nth-child(2):before,.fx-shot:nth-child(2n):before{animation-delay:-2.2s}.fx-card:nth-child(3):before,.fx-shot:nth-child(3n):before{animation-delay:-4.4s}.fx-card:nth-child(4):before{animation-delay:-6.6s}
@keyframes zariSweep{0%{background-position:150% 0,0 0,0 0}55%,100%{background-position:-50% 0,0 0,0 0}}
.fx-card{padding:20px 22px}
.fx-ch{font-weight:500}
.fx-shot{padding:9px}
.fx-shot img{border-radius:6px}

/* the scratch card is a jharokha arch of woven gold, like the story arch */
.fx-scr{border-radius:50% 50% 16px 16px / 30% 30% 16px 16px;background:linear-gradient(180deg,#fbf3df,#ecdcb8)}
.fx-scrD{font-family:var(--f-head);font-weight:600}
.fx-h{margin:0 0 6px}
.fx-sec .small.it{margin-top:-4px}

/* buttons and links in the template's own zari pill / dotted-gold link */
.bp.fx-btn{letter-spacing:.5px;text-transform:none;font:500 19px/1 var(--f-head);padding:15px 30px}
#fxSend.bp{padding:17px 34px;font-size:19px}
.fx-rl li{border-bottom:1px dotted rgba(155,112,36,.5)}
.fx-lnk.lnk{font:400 12px/1 var(--f-caps);letter-spacing:2px;border-bottom:1px dotted var(--gold);padding-bottom:3px}
.fx-card .fx-btn{font:500 18px/1 var(--f-head);letter-spacing:.5px;text-transform:none;color:var(--gold-d);box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 5px rgba(255,250,236,.7),inset 0 0 0 6.5px rgba(155,112,36,.5),0 5px 12px rgba(80,52,12,.18)}
.fx-cal{gap:12px}
.tl .tx [data-fx-cal]{display:flex}
.tl li:nth-of-type(even) .tx [data-fx-cal]{justify-content:flex-end}
.tl .tx [data-fx-cal] .fx-lnk{font:400 12px/1 var(--f-caps);letter-spacing:2px;border-bottom:1px dotted var(--gold);margin-top:2px}
.fx-opts button{border-color:rgba(155,112,36,.65);color:var(--gold-d);font-size:17px}
.fx-opts button.on{border-color:var(--gold-d)}
.fx-q{border-bottom:1px dotted rgba(155,112,36,.5);border-radius:0}
.fx-day:before{background:none;border-left:2px dotted rgba(155,112,36,.6);width:0}
.fx-day li:before{background:var(--gold);box-shadow:0 0 0 3px var(--silk),0 0 0 4.5px var(--gold-l)}
.fx-wish{box-shadow:inset 0 0 0 1px rgba(155,112,36,.45),inset 0 0 0 4px rgba(255,250,236,.8),inset 0 0 0 5px rgba(155,112,36,.35),var(--fx-shadow)}
.fx-invoc{margin:0 0 8px}
.fx-invoc img{width:min(32vw,128px)}
.fx-invoc .divider{width:52%;margin:10px 0 6px}
.fx-looks{width:calc(100% + 52px);margin:4px -26px 0}
.closing{padding-bottom:56px}

/* Devanagari: a font that has the letters, no wide tracking, no fake italic */
.lang-hi{--f-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--f-caps:Georgia,"Noto Serif Devanagari","Marcellus",Georgia,serif}
.lang-hi .caps,.lang-hi .tap,.lang-hi .count i,.lang-hi .lnk,.lang-hi .tl .tt,.lang-hi .parents b,.lang-hi #story b,.lang-hi .heroText .date,.lang-hi .fx-lnk.lnk{letter-spacing:.3px;text-transform:none}
.lang-hi .caps,.lang-hi .lnk,.lang-hi .fx-lnk.lnk,.lang-hi .tl .tt{font-size:14px}
.lang-hi .count i{font-size:13px}
.lang-hi .it,.lang-hi .and,.lang-hi .tl .tv,.lang-hi .tl .tw,.lang-hi #story i,.lang-hi .heroText .city,.lang-hi .sign,.lang-hi .heroText h1 .amp,.lang-hi .mono small{font-style:normal}
.lang-hi .heroText h1{line-height:1.3}
.lang-hi .names,.lang-hi .sec,.lang-hi .welcome h2,.lang-hi .archS h2{line-height:1.35}
.lang-hi .mono{font-family:Georgia,"Noto Serif Devanagari",var(--f-head);font-weight:600}
.lang-hi .bp,.lang-hi .bp.fx-btn,.lang-hi #fxSend.bp{font-size:17px}
.lang-hi .tl .tt{font-size:16px;font-weight:600}
.lang-hi .tl .tx [data-fx-cal] .fx-lnk{letter-spacing:.3px;font-size:13px}
/* Chrome misplaces Devanagari marks (reph, i-matra) under background-clip:text, so the
   Hindi names are solid antique gold with a woven highlight edge instead of the moving fill */
.lang-hi .mono,.lang-hi .heroText h1 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#6e4a12;text-shadow:0 -1px 0 rgba(255,246,214,.9),0 1px 0 rgba(122,84,22,.35)}
.lang-hi .small{font-size:17px}

@media (prefers-reduced-motion: reduce){
  .fx-card:before,.fx-shot:before,.fx-film:before,.fx-scr:before,.fx-look:before,#story .chImg:before{animation:none}
}