/* Kundan Garden: an ivory raised-silk invitation set with kundan, emeralds, pearls and pink
   silk lotuses. The way into the fountain garden is real motion (a generated clip); every
   stone, pearl drop and ripple on top is a transparent layer animated in code; every word
   is live data. */
:root{
  --silk:#f1e7d3; --silk2:#e8dbc1; --em:#1f4b3b; --em2:#2f6a52; --gold:#a8823f; --gold2:#c9a45c; --rose:#b8606e; --ink:#4d3b28; --muted:#7a6448;
  --f-head:"Cormorant Garamond", Georgia, serif;
  --f-caps:"Cinzel", "Cormorant Garamond", Georgia, serif;
  --f-script:"Pinyon Script", "Cormorant Garamond", cursive;
  --col:min(100vw, 480px); --valH:calc(var(--col) * .37 + 6px);
}
*{box-sizing:border-box}
html,body{margin:0;background:#d9c9aa;color:var(--ink);font-family:var(--f-head);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 0%,#efe3c8,#cdb994 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,56,20,.35)}
/* pearl rails stitched down both edges of the silk, a fine gold line inside them */
#page:before,#page:after{content:"";position:absolute;top:clamp(600px,100svh,1000px);bottom:0;width:9px;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#fffaf0 0 1.3px,#e9dcc4 2.4px,#b89b6a 3.4px,transparent 3.9px) 50% 0/9px 9px repeat-y}
#page:before{left:7px;box-shadow:7px 0 0 -6px var(--gold2)}
#page:after{right:7px;box-shadow:-7px 0 0 -6px var(--gold2)}
section{position:relative;width:100%}
img{max-width:100%}

/* ---------- gate: the hero's first frame (the panel) shows through ---------- */
#gate{position:fixed;inset:0;z-index:20;overflow:hidden;cursor:pointer}
#gate:before{content:"";position:absolute;inset:0;background:radial-gradient(85% 65% at 50% 42%,transparent 50%,rgba(70,48,16,.28));pointer-events:none}
#gate .sheen{position:absolute;top:0;bottom:0;left:50%;width:var(--col);transform:translateX(-50%);overflow:hidden;pointer-events:none;mix-blend-mode:soft-light}
#gate .sheen:after{content:"";position:absolute;top:-10%;bottom:-10%;width:40%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,250,235,.5) 50%,transparent);animation:sheen 6.5s ease-in-out infinite}
@keyframes sheen{0%{left:-70%}60%,100%{left:120%}}
.monoBox{position:absolute;left:50%;top:var(--my,34%);width:var(--mw,52vw);transform:translate(-50%,-50%);pointer-events:none}
.monoBox .cart{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(70,45,10,.35))}
.mono{position:absolute;left:0;right:0;top:43%;transform:translateY(-50%);margin:0;text-align:center;font:600 calc(var(--mw,52vw) * .36)/1 var(--f-head);letter-spacing:0;white-space:nowrap;
  background:linear-gradient(100deg,#5e420f 0%,#9a7428 calc(var(--g,50)*1% - 12%),#f3dc9c calc(var(--g,50)*1%),#9a7428 calc(var(--g,50)*1% + 12%),#5e420f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1.5px 1px rgba(60,38,8,.55)) drop-shadow(0 0 1px rgba(255,250,235,.9))}
.mono small{font-size:.42em;vertical-align:.5em;margin:0 .03em;font-style:italic}
.tap{position:absolute;left:50%;bottom:calc(5% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:13px 26px;border-radius:999px;border:1px solid rgba(255,248,230,.85);background:rgba(31,75,59,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;font:500 14px/1 var(--f-caps);letter-spacing:3px;color:#fbf3e0;cursor:pointer;box-shadow:0 0 0 3px rgba(201,164,92,.45),0 6px 16px rgba(40,25,5,.4);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.7}}
#gate.open{pointer-events:none}
#gate.open:before,#gate.open .sheen{opacity:0;transition:opacity .8s ease}
#gate.open .tap{opacity:0;transition:opacity .4s;animation:none}
#gate.open .monoBox{opacity:0;transform:translate(-50%,-62%) scale(1.06);filter:blur(2px);transition:opacity 1s ease,transform 1.2s ease,filter 1s 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,250,230,.9) 20%,transparent 56%),linear-gradient(90deg,transparent 47%,rgba(255,252,240,.95) 50%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(255,252,240,.95) 50%,transparent 53%);z-index:4;mix-blend-mode:screen}

/* ---------- hero ---------- */
.hero{height:100vh;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;background:#eadcc2 url(art/garden-first.jpg) center/cover}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* ripples of light run across the lotus pool */
.water{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen;clip-path:var(--pool,none);
  background:repeating-linear-gradient(176deg,transparent 0 9px,rgba(255,255,250,.38) 11px,transparent 13px 22px),
             repeating-linear-gradient(4deg,transparent 0 14px,rgba(255,252,240,.22) 15px,transparent 17px 30px);
  background-size:100% 200%,100% 220%;animation:ripple 7s linear infinite}
@keyframes ripple{to{background-position:0 100%,0 -110%}}
body.named .water{opacity:.8;transition:opacity 2s ease}
.jets{position:absolute;inset:0;pointer-events:none;z-index:2}
.jets i{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#eef3f0 45%,rgba(200,215,210,.6) 70%,transparent 72%);opacity:0}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.drops{position:absolute;inset:0;pointer-events:none;z-index:3}
.drops .hval{position:absolute;left:-3%;top:-6px;width:106%;max-width:none;transform-origin:50% 0;opacity:0;filter:drop-shadow(0 8px 7px rgba(60,40,10,.35))}
.drops .str{position:absolute;top:-4px;height:auto;transform-origin:50% 0;opacity:0;filter:drop-shadow(0 6px 5px rgba(60,40,10,.4))}
.heroText{position:absolute;left:50%;top:var(--ty,30%);width:86%;transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;visibility:hidden}
.heroText .pre{margin:0 0 8px;font:500 13px/1.3 var(--f-caps);letter-spacing:3.5px;text-transform:uppercase;color:var(--em)}
.heroText h1{margin:0;font:600 52px/1.04 var(--f-head);white-space:nowrap}
.heroText h1 span{display:block;padding:0 .04em;
  background:linear-gradient(100deg,#163d2f 0%,#24573f calc(var(--g,50)*1% - 14%),#b48a3c calc(var(--g,50)*1% - 3%),#f6e3ac calc(var(--g,50)*1%),#b48a3c calc(var(--g,50)*1% + 3%),#24573f calc(var(--g,50)*1% + 14%),#163d2f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.heroText h1 .amp{font:400 .78em/1 var(--f-script);padding-right:.12em}
.heroText .date{margin:12px 0 0;font:500 16px/1.3 var(--f-caps);letter-spacing:2px;color:var(--ink)}
.heroText .city{margin:4px 0 0;font:italic 500 19px/1.2 var(--f-head);color:var(--rose)}
.heroText .pre,.heroText h1,.heroText .date,.heroText .city{filter:drop-shadow(0 0 6px rgba(255,248,232,.85)) drop-shadow(0 1px 0 rgba(255,250,238,.9))}

/* ---------- ivory silk pages ---------- */
.pageS{padding:var(--valH) 34px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.val{position:absolute;left:-3%;top:-6px;width:106%;max-width:none;transform-origin:50% 0;z-index:4;pointer-events:none;filter:drop-shadow(0 7px 6px rgba(60,40,10,.3))}
.rv .val{opacity:0;transform:translateY(-26px);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.rv.in .val{opacity:1;transform:none;animation:vsway 6s ease-in-out 1.6s infinite}
@keyframes vsway{0%,100%{transform:skewX(0)}30%{transform:skewX(1.4deg)}70%{transform:skewX(-1.2deg)}}
.small{margin:0;font:500 17px/1.5 var(--f-head);color:var(--muted)}
.it{font-style:italic}
.caps{margin:0;font:500 13px/1.6 var(--f-caps);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.names{margin:0;font:600 clamp(34px,10vw,44px)/1.1 var(--f-head);color:var(--em)}
.and{margin:0;font:400 34px/1 var(--f-script);color:var(--rose)}
.sec{margin:0 0 8px;font:600 clamp(32px,9vw,40px)/1.1 var(--f-head);color:var(--em);letter-spacing:.3px}
.big{margin:0;font:600 24px/1.3 var(--f-head);color:var(--em)}
.divider{width:64%;height:auto;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:500 11.5px/1.4 var(--f-caps);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.parents span{font:500 17px/1.35 var(--f-head);color:var(--ink)}
.corner{position:absolute;width:30%;max-width:150px;pointer-events:none;z-index:1}
.foot{position:relative;width:calc(100% + 68px);height:110px;margin:0 -34px -64px}
.foot .corner.bl{left:2px;bottom:2px}
.foot .corner.br{right:2px;bottom:2px;transform:scaleX(-1)}

/* welcome: text above the embroidered lotus pond */
.welcome{padding-bottom:0;gap:0}
.welcome .inner{padding:10px 6% 0;display:flex;flex-direction:column;gap:12px;z-index:2}
.welcome h2{margin:0;font:600 clamp(30px,8.6vw,38px)/1.15 var(--f-head);color:var(--em)}
.welcome p{margin:0;font:500 18px/1.55 var(--f-head);color:var(--ink)}
.spray{width:calc(100% + 68px);max-width:none;margin:18px -34px 0;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}

/* countdown in kundan 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 img{width:100%;height:100%;object-fit:contain;display:block}
.med b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 28px/1 var(--f-head);color:var(--em);font-variant-numeric:tabular-nums}
.count i{font:500 11.5px/1 var(--f-caps);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-style:normal}

/* timeline */
.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(168,130,63,.65)}
.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:96px;aspect-ratio:1;display:block}
.tl .ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tl .ic img.e{inset:24%;width:52%;height:52%}
.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(--em)}
.tl .tt{font:500 13px/1.4 var(--f-caps);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.tl .tv{font:italic 500 15px/1.35 var(--f-head);color:var(--muted)}
.tl .tw{font:italic 500 15px/1.35 var(--f-head);color:var(--rose)}
.lnk{font:500 12px/1 var(--f-caps);letter-spacing:1.5px;text-transform:uppercase;color:var(--em);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:20px;height:26px;margin-left:-10px;z-index:3;pointer-events:none}
.bead img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(60,40,10,.45))}
.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 7px 7px rgba(60,40,10,.3))}
.tl li.on .tx{opacity:1;transform:none}
.tl li.on:after{background:var(--em2)}

/* pictures worked into the silk */
.pic{mix-blend-mode:multiply;width:calc(100% + 40px);max-width:none;margin:-4% -20px;-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%;-webkit-mask-image:radial-gradient(50% 48% at 50% 50%,#000 70%,transparent);mask-image:radial-gradient(50% 48% at 50% 50%,#000 70%,transparent)}
.in .dress img.rise{filter:none}
.dress img+img{transition-delay:.45s}

/* pearl-edged pill buttons */
.bp{display:inline-block;margin-top:14px;padding:15px 30px;border-radius:999px;border:0;background:rgba(255,250,238,.6);color:var(--em);font:600 19px/1 var(--f-head);text-decoration:none;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 5px rgba(255,250,238,.6),inset 0 0 0 6.5px rgba(168,130,63,.5),0 6px 14px rgba(60,40,10,.18);position:relative}
.bp:before{content:"";position:absolute;inset:-5px;border-radius:999px;background:radial-gradient(circle,#fffaf0 0 1.5px,#c9b089 2.2px,transparent 2.6px) 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:.95;pointer-events:none}
.bp.solid{background:linear-gradient(180deg,#2f6a52,#1c4535);color:#fbf3e0}

/* story arch: the kundan arch stretches with its chapters (the cusped crown on top, the
   jewelled jambs repeat down the sides, the lotus bed closes it) */
.archS{--s:calc(var(--col) / 900);border-style:solid;border-width:calc(var(--s) * 560) calc(var(--s) * 160) calc(var(--s) * 291);
  border-image:url(art/arch.jpg) 560 160 291 round;padding:0 4px;
  /* the silk inside the arch: the art's own centre, stretched (no tile seams) */
  background:url(art/arch.jpg) 50% 65.8% / 155.17% calc(100% * 1671 / 820) no-repeat;background-origin:padding-box;background-clip:padding-box;
  -webkit-mask-image:linear-gradient(transparent,#000 1.2%,#000 98.8%,transparent);mask-image:linear-gradient(transparent,#000 1.2%,#000 98.8%,transparent)}
.archS .inner{position:relative;margin-top:calc(var(--s) * -240);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.archS h2{margin:0 0 calc(var(--s) * 240 - 50px);font:600 clamp(28px,8vw,34px)/1.15 var(--f-head);color:var(--em)}
#story{display:flex;flex-direction:column;gap:24px;width:100%}
#story .ch{display:flex;flex-direction:column;align-items:center;gap:12px}
#story .ch:not(.has-img):before{content:"";display:block;width:16px;height:22px;margin:0 auto -4px;background:url(art/emerald.webp) center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(60,40,10,.35))}
#story .ch:first-child:not(.has-img):before{display:none}
#story .chTx b{display:block;font:500 13px/1.4 var(--f-caps);letter-spacing:2.5px;color:var(--gold)}
#story .chTx i{display:block;font:italic 600 21px/1.25 var(--f-head);margin:2px 0;color:var(--em)}
#story .chTx span{font:500 16px/1.45 var(--f-head);color:var(--ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* a chapter's photo is set like a stone: a gold-foil frame studded with polki, an emerald or ruby on top */
#story .chImg{position:relative;margin:10px 0 0;width:84%;max-width:240px;aspect-ratio:4/5;border-radius:12px;padding:10px;box-sizing:border-box;
  background:linear-gradient(135deg,#a8823f,#f3dc9a 30%,#c99a45 50%,#f6e3a8 70%,#a8823f);box-shadow:0 10px 20px rgba(60,40,10,.28);
  opacity:0;transform:translateY(22px) scale(.95) rotate(-1.5deg);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
#story .ch.alt .chImg{transform:translateY(22px) scale(.95) rotate(1.5deg)}
#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)}
#story .chImg img:first-child{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;box-shadow:0 0 0 1.5px #8a6a2c}
#story .chImg .chGem{position:absolute;left:50%;top:-14px;width:22px;margin-left:-11px;z-index:2;filter:drop-shadow(0 3px 3px rgba(60,40,10,.4))}
.in #story .chImg{opacity:1;transform:rotate(-1deg)}
.in #story .ch.alt .chImg{transform:rotate(1deg)}

/* rsvp */
#rForm{width:100%}
.rl{list-style:none;margin:6px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px}
.rl li{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px dotted rgba(168,130,63,.55)}
.rl .nm{font:600 22px/1.2 var(--f-head);color:var(--em)}
.rl .wh{font:italic 500 15px/1.3 var(--f-head);color:var(--muted)}
.rl .opts{display:flex;gap:8px;justify-content:center}
.rl .opts button{border:1.5px solid rgba(168,130,63,.75);background:rgba(255,250,238,.55);color:var(--em);font:italic 600 17px/1 var(--f-head);white-space:nowrap;padding:12px 16px;border-radius:999px;cursor:pointer}
.rl .opts button.on{background:linear-gradient(180deg,#2f6a52,#1c4535);border-color:var(--gold2);color:#fbf3e0;box-shadow:0 3px 8px rgba(30,60,40,.3)}
textarea{width:100%;margin-top:14px;border:1px solid rgba(168,130,63,.55);background:rgba(255,250,238,.6);border-radius:12px;padding:12px;font:500 17px/1.4 var(--f-head);color:var(--ink);resize:vertical}
textarea::placeholder{color:rgba(122,100,72,.8)}
.sign{margin:0;font:400 36px/1.25 var(--f-script);color:var(--em)}
.sign span{display:block}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--em);outline-offset:3px}

/* ---------- motion: sections lift, the jewellery rises 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(0,0,0,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 8px 7px rgba(70,45,10,.32))}
.foot .corner.br.rise{transform:scaleX(-1) translateY(22px)}
.in .foot .corner.br.rise{transform:scaleX(-1)}
.pic.rise,.spray.rise{filter:none}
.in .pic.rise,.in .spray.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;width:12px;opacity:.95;will-change:transform;filter:drop-shadow(0 2px 2px rgba(60,40,10,.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(--gold2);background:rgba(31,75,59,.82);color:#fbf3e0;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,#story .chImg{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .foot .corner.br{transform:scaleX(-1)!important}
  .tap,#gate .sheen:after,.water{animation:none!important}
}

/* ================= the full-invite kit (../_full/fx.css) in kundan: polki set in gold foil, emeralds, ivory silk ================= */
:root{
  --fx-ink:#4d3b28; --fx-muted:#7a6448; --fx-accent:#1f4b3b; --fx-accent-2:#c9a45c; --fx-soft:#b8606e; --fx-err:#a2384a;
  --fx-head:"Cormorant Garamond",Georgia,serif; --fx-caps-font:"Cinzel","Cormorant Garamond",Georgia,serif;
  --fx-card:linear-gradient(180deg,rgba(252,247,236,.94),rgba(241,231,211,.94));
  --fx-line:rgba(168,130,63,.5);
  /* flat polki stones, each in its own gold-foil collet, on a burnished gold band */
  --fx-edge:radial-gradient(circle at 50% 50%,#fbfcf9 0 1.5px,#dde5e2 1.6px 2.2px,#f4f7f5 2.3px 2.5px,#6f531f 2.6px 2.9px,#f0d58e 3px 3.3px,transparent 3.5px) 0 0/7px 7px round,
    linear-gradient(135deg,#a8823f,#f3dc9a 30%,#c99a45 50%,#f6e3a8 70%,#a8823f);
  --fx-edge-w:7px;
  --fx-radius:14px; --fx-shadow:0 7px 16px rgba(60,40,10,.14); --fx-shadow-lg:0 14px 30px rgba(60,40,10,.26);
  --fx-btn:linear-gradient(180deg,#fdf8ec,#efe2c6); --fx-btn-ink:#1f4b3b;
  --fx-on:linear-gradient(180deg,#2f6a52,#1c4535); --fx-on-ink:#fbf3e0; --fx-on-line:#c9a45c;
  --fx-field:rgba(255,250,238,.65);
  --fx-foil-1:#8f6a2a; --fx-foil-2:#d9b768; --fx-foil-3:#f7e8b4; --fx-foil-dots:#fffdf6; --fx-foil-ink:rgba(31,75,59,.92); --fx-scr-shape:rect;
  --fx-card-solid:#f1e7d3; --fx-langs-bg:rgba(253,248,236,.92); --fx-langs-ink:#1f4b3b;
  --fx-lb-bg:rgba(24,40,32,.94); --fx-lb-ink:#f6ead0;
}
.fx-h{margin:0 0 6px}
.fx-sec .small.it{margin-bottom:4px}
/* buttons: the template's pearl-edged pill (emerald for the main action) */
.fx-btn{display:inline-block;margin-top:14px;padding:15px 30px;border-radius:999px;border:0;background:rgba(255,250,238,.6);color:var(--em);font:600 19px/1 var(--f-head);letter-spacing:.2px;text-transform:none;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 5px rgba(255,250,238,.6),inset 0 0 0 6.5px rgba(168,130,63,.5),0 6px 14px rgba(60,40,10,.18)}
.fx-btn:not(.bp):before{content:"";position:absolute;inset:-5px;border-radius:999px;background:radial-gradient(circle,#fffaf0 0 1.5px,#c9b089 2.2px,transparent 2.6px) 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:.95;pointer-events:none}
.fx-btn.solid{background:linear-gradient(180deg,#2f6a52,#1c4535);color:#fbf3e0}
#fxSend{padding:17px 34px;font-size:20px}
.fx-lnk{font:500 12px/1.4 var(--f-caps);letter-spacing:1.5px;color:var(--em);border-bottom:1px dotted var(--gold)}
.fx-cal{gap:14px}
.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{margin-top:2px}
/* fields + choices */
.fx-field,.fx-sec textarea,#fxRForm textarea{margin-top:0;border-color:rgba(168,130,63,.55)}
.fx-opts button{border-color:rgba(168,130,63,.75);background:rgba(255,250,238,.55);color:var(--em);font-weight:600}
.fx-q,.fx-rl li{border-bottom:1px dotted rgba(168,130,63,.55);border-radius:0}
.fx-nm,.fx-qL{color:var(--em)}
.fx-wh{color:var(--muted)}
/* cards: ivory silk panels set in a polki-and-gold bezel, a line of emerald meenakari inside it */
.fx-card{padding:20px 22px;box-shadow:inset 0 0 0 8.5px #2f6a52,inset 0 0 0 9.5px #e6c77c,var(--fx-shadow)}
.fx-ch{color:var(--em)}
.fx-cb strong{color:var(--gold)}
.fx-upi code{background:rgba(255,255,255,.6);font-family:var(--f-head);font-size:17px}
.fx-wish{box-shadow:inset 0 0 0 1px var(--fx-line),var(--fx-shadow)}
.fx-wish blockquote:before{color:var(--rose)}
/* the scratch card: a gold-foil plaque set in polki, the foil rubs off; kundan, emeralds, rubies, pearls and petals burst out */
#fxScr{border-radius:20px;background:linear-gradient(135deg,#a8823f,#f3dc9a 30%,#c99a45 50%,#f6e3a8 70%,#a8823f)}
#fxScr:before{padding:8px}
.fx-scrUnder{background:radial-gradient(closest-side,#fffaf0,#f1e5cc)}
.fx-scrD{color:var(--em)}
.fx-scrT{color:var(--ink)}
.fx-scrSpk img{width:15px}
/* film */
.fx-filmPlay{background:rgba(253,248,236,.9)}
.fx-filmPlay span{border-left-color:var(--em)}
/* the wedding day: an emerald at each hour on a gold line */
.fx-day:before{background:linear-gradient(var(--gold2),var(--gold),var(--gold2))}
.fx-day li:before{background:radial-gradient(circle at 40% 35%,#8fd0ae,#2f6a52 45%,#163d2f);box-shadow:0 0 0 2px #e6c77c,0 0 0 4px var(--silk),0 2px 3px rgba(60,40,10,.35)}
.fx-dt{color:var(--em)}
.fx-day b{color:var(--gold)}
/* invocation under the valance */
.fx-invoc{margin:0 0 6px}
.fx-invoc img#fxInvImg{width:min(30vw,120px)}
.fx-invoc .divider{width:52%;margin:8px 0 0}
.fx-invL{color:var(--em)}
.fx-inviters .fx-caps{color:var(--gold)}
.fx-ivL{color:var(--rose)}
.fx-langs{border-color:var(--gold2);background:rgba(253,248,236,.92)}
.fx-langs a{color:var(--em)}
.closing{gap:6px}
.closing .divider{margin-top:0}

/* Devanagari: no wide letter-spacing or upper-casing; a font that has the letters */
.lang-hi{--f-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--f-caps:Georgia,"Noto Serif Devanagari","Cinzel",Georgia,serif;
  --fx-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--fx-caps-font:Georgia,"Noto Serif Devanagari","Cinzel",Georgia,serif}
.small{text-wrap:balance}
.lang-hi .caps,.lang-hi .tap,.lang-hi .count i,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .tl .tt,.lang-hi .parents b,.lang-hi #story .chTx b,.lang-hi .heroText .pre,.lang-hi .heroText .date{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 .heroText .pre{font-size:14px}
.lang-hi .tl .tt{font-size:16px}
.lang-hi .fx-btn,.lang-hi .bp{font-size:17px;line-height:1.3}
.lang-hi .heroText h1,.lang-hi .names{line-height:1.3}
.lang-hi .heroText h1 span{padding:.2em .06em .04em;margin-top:-.16em}
.lang-hi .sec,.lang-hi .archS h2,.lang-hi .welcome h2{line-height:1.4}
.lang-hi .archS h2{font-size:30px}
.lang-hi .fx-day b{font-size:14px}
.lang-hi .fx-wish figcaption{font-size:13px}
/* Pinyon Script has no Devanagari: the script lines fall back to the serif, set a little larger */
.lang-hi .and{font:500 24px/1.2 var(--f-head)}
.lang-hi .sign{font:600 28px/1.35 var(--f-head)}
.lang-hi .heroText h1 .amp{font:500 .8em/1 var(--f-head)}
.lang-hi .mono small{font-style:normal}
/* Devanagari has no true italic; the browser fakes a slant */
.lang-hi .it,.lang-hi .tl .tv,.lang-hi .tl .tw,.lang-hi .heroText .city,.lang-hi #story .chTx i{font-style:normal}

/* the camera move through the arch: garden behind, the arch cut-out in front */
.heroCam{position:absolute;inset:0;will-change:transform}
.archL{z-index:3;will-change:transform,filter,opacity;pointer-events:none}