/* Embroidered Jaipur: a scroll invitation. Every picture is generated
   embroidery (made once for the template); every word is live data. The
   embroidery images sit on the same linen page with multiply, so their own
   ivory melts into the page. */
:root{
  --linen:#ece6df; --ink:#4a3a36; --muted:#8a7a72; --rose:#a8566a; --sage:#7f9a7a; --gold:#b8955a;
  --f-serif:"Cormorant Garamond", Georgia, serif;
  --f-sans:"Jost", system-ui, sans-serif;
  --col:min(100vw, 480px);
}
*{box-sizing:border-box}
html,body{margin:0;background:#e9e2d6;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(--linen);overflow:hidden;box-shadow:0 0 60px rgba(60,40,30,.12)}
section{position:relative;width:100%}
.bg{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
.hero .bg{-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}

/* gate */
#gate{position:fixed;inset:0;z-index:20;overflow:hidden;background:#cfd8c6}
#gate{perspective:1600px}
#gate .peek{position:absolute;inset:0}
#gate .peek img{width:100%;height:100%;object-fit:cover}
#gate .leaf{position:absolute;top:0;height:100%;width:50%;transition:transform 2.4s cubic-bezier(.55,0,.2,1);transform-style:preserve-3d;backface-visibility:hidden}
#gate .leaf img{width:100%;height:100%;object-fit:fill;display:block}
#gate .leaf.l{left:0;transform-origin:0 50%}
#gate .leaf.l img{object-position:right center}
#gate .leaf.r{right:0;transform-origin:100% 50%}
#gate .leaf.r img{object-position:left center}
#gate .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,40,25,0),rgba(30,40,25,.55));opacity:0;transition:opacity 2.4s ease}
#gate .leaf.r .shade{background:linear-gradient(270deg,rgba(30,40,25,0),rgba(30,40,25,.55))}
#gate.open .leaf.l{transform:rotateY(-108deg)}
#gate.open .leaf.r{transform:rotateY(108deg)}
#gate.open .shade{opacity:1}
#gate.gone{display:none}
.tag{position:absolute;left:0;top:50%;width:min(36vw,170px);aspect-ratio:1/1.05;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;transition:transform .6s ease,opacity .5s ease;filter:drop-shadow(0 6px 10px rgba(40,50,30,.35))}
.tag img{width:100%;height:100%;object-fit:contain}
.tag span{position:absolute;left:0;right:0;top:35%;text-align:center;font:500 clamp(26px,8vw,40px)/1 var(--f-serif);color:var(--gold);letter-spacing:1px}

.tap{position:absolute;left:50%;transform:translateX(-50%);bottom:10%;margin:0;padding:10px 18px;border-radius:999px;background:rgba(60,72,52,.55);white-space:nowrap;text-align:center;font:500 12px/1 var(--f-sans);letter-spacing:5px;text-transform:uppercase;color:#f6f3ea;text-shadow:0 1px 6px rgba(40,50,30,.5);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero with curtains */
.hero{overflow:hidden}
.heroText{position:absolute;left:0;right:0;top:20%;text-align:center}
.heroText h1{margin:0;font:400 clamp(40px,12vw,58px)/1.08 var(--f-serif);color:var(--ink)}
.date{margin:12px 0 0;font:400 13px/1 var(--f-sans);letter-spacing:4px;color:var(--muted)}
.curV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s ease}
.curV.done{opacity:0;pointer-events:none}
.heroText{opacity:0;transform:translateY(14px);transition:opacity 1.6s ease,transform 1.6s ease}
body.named .heroText{opacity:1;transform:none}

/* plain text sections */
.plain{padding:56px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.small{margin:0;font:400 15px/1.55 var(--f-serif);color:var(--muted)}
.it{font-style:italic}
.caps{font:500 11px/1.6 var(--f-sans);letter-spacing:3.5px;text-transform:uppercase;color:var(--muted)}
.names{margin:0;font:400 clamp(30px,9vw,40px)/1.1 var(--f-serif);color:var(--ink)}
.and{margin:0;font:italic 400 20px/1 var(--f-serif);color:var(--muted)}
.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 10px/1.4 var(--f-sans);letter-spacing:3px;text-transform:uppercase;color:var(--rose)}
.parents span{font:400 15px/1.35 var(--f-serif)}
.sec{margin:0 0 10px;font:400 clamp(30px,8.5vw,38px)/1.1 var(--f-serif);color:var(--ink)}
.big{margin:0;font:500 22px/1.3 var(--f-serif);color:var(--ink)}

/* framed sections: text sits inside the embroidered frame */
.framed .inner{position:absolute;left:17%;right:17%;top:24%;bottom:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.framed h2{margin:0;font:400 clamp(28px,8vw,36px)/1.15 var(--f-serif);color:var(--ink)}
.framed p{margin:0;font:400 16px/1.6 var(--f-serif);color:var(--ink)}
.welcome .inner{top:18%;bottom:36%;left:21%;right:21%}
.card .inner.low{top:30%;bottom:12%;gap:8px}
.arch .inner{top:24%;bottom:14%;left:27%;right:27%;justify-content:flex-start;padding-top:8%}
#story{display:flex;flex-direction:column;gap:12px;overflow:auto}
#story div b{display:block;font:500 10px/1.4 var(--f-sans);letter-spacing:3px;color:var(--rose)}
#story div i{display:block;font:italic 500 17px/1.25 var(--f-serif);margin:2px 0}
#story div span{font:400 14px/1.45 var(--f-serif);color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* countdown */
.count{display:flex;gap:16px;justify-content:center}
.count div{display:flex;flex-direction:column;align-items:center;gap:8px}
.btn{position:relative;width:86px;height:86px;display:block}
.btn img{width:100%;height:100%;object-fit:contain}
.btn b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 26px/1 var(--f-serif);color:var(--ink);font-variant-numeric:tabular-nums}
.count i{font:500 10px/1 var(--f-sans);letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-style:normal}
.strand{position:absolute;top:0;width:54px;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.strand.sl{left:14px}.strand.sr{right:14px;animation-delay:-2.5s}
@keyframes sway{50%{transform:rotate(3deg)}}

/* 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:1.5px dotted var(--gold)}
.tl li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px;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(--linen);border:1.5px solid var(--gold)}
.tl .ic{justify-self:end;width:104px;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.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:500 19px/1 var(--f-serif)}
.tl .tt{font:500 10px/1.5 var(--f-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink)}
.tl .tv{font:italic 400 14px/1.35 var(--f-serif);color:var(--muted)}
.tl .tw{font:italic 400 13px/1.35 var(--f-serif);color:var(--rose)}
.lnk{font:500 10px/1 var(--f-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;margin-top:4px;align-self:inherit}
.tl .tx .lnk{align-self:flex-start}
.tl li:nth-of-type(even) .tx .lnk{align-self:flex-end}

.guests{width:112%;max-width:none;margin:4px -6%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.garland{width:112%;max-width:none;margin:20px -6% 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}

/* rsvp */
.rl{list-style:none;margin:6px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:12px}
.rl li{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid rgba(184,149,90,.35)}
.rl .nm{font:500 20px/1.2 var(--f-serif)}
.rl .wh{font:400 13px/1.3 var(--f-serif);color:var(--muted);font-style:italic}
.rl .opts{display:flex;gap:8px;justify-content:center}
.rl .opts button,.pearl{border:1.5px solid var(--gold);background:rgba(255,253,248,.7);color:var(--ink);font:500 11px/1 var(--f-sans);letter-spacing:2px;text-transform:uppercase;padding:12px 14px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 1px 2px rgba(80,60,40,.15)}
.rl .opts button.on{background:var(--rose);border-color:var(--rose);color:#fff}
textarea{width:100%;margin-top:14px;border:1px solid rgba(184,149,90,.5);background:rgba(255,253,248,.6);border-radius:12px;padding:12px;font:400 16px/1.4 var(--f-serif);color:var(--ink);resize:vertical}
.pearl{margin-top:16px;padding:16px 26px;font-size:12px;background:var(--rose);border-color:var(--rose);color:#fff}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.rv.in{opacity:1;transform:none}
#snd{position:fixed;right:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:30;width:36px;height:36px;border-radius:50%;border:1px solid rgba(184,149,90,.6);background:rgba(255,253,248,.8);color:var(--ink);font-size:15px;cursor:pointer}
#snd.off{opacity:.5;text-decoration:line-through}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.strand,.tap{animation:none}}

/* motion: hanging strands grow down and sway, garland swings, timeline bead */
.strand.hang{top:-4px;width:58px;transform:scaleY(0);transform-origin:50% 0;transition:transform 1.8s cubic-bezier(.3,0,.2,1)}
.rv.in .strand.hang{transform:scaleY(1);animation:sway 5s ease-in-out 1.8s infinite}
.strand{z-index:2}
.swing{transform-origin:50% 0;animation:swing 6s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.bead{position:absolute;left:50%;top:0;width:22px;height:22px;margin-left:-11px;z-index:3;pointer-events:none}
.bead img{width:100%;height:100%}
.tl li .ic,.tl li .tx{opacity:0;transform:translateY(12px) scale(.92);transition:opacity .8s ease,transform .8s ease}
.tl li.on .ic,.tl li.on .tx{opacity:1;transform:none}
.tl li.on:after{background:var(--gold)}
[data-reveal] .bg{transition:clip-path 2.2s cubic-bezier(.3,0,.2,1)}
[data-reveal="down"] .bg{clip-path:inset(0 0 100% 0)}
[data-reveal="up"] .bg{clip-path:inset(100% 0 0 0)}
[data-reveal="iris"] .bg{clip-path:circle(0% at 50% 50%)}
[data-reveal].in .bg{clip-path:inset(0 0 0 0)}
[data-reveal="iris"].in .bg{clip-path:circle(75% at 50% 50%)}
[data-reveal] .inner{opacity:0;transition:opacity 1.2s ease 1.1s}
[data-reveal].in .inner{opacity:1}
.bg.par{will-change:transform}
@media (prefers-reduced-motion: reduce){.strand.hang{transform:none}.swing{animation:none}[data-reveal] .bg{clip-path:none!important}.tl li .ic,.tl li .tx{opacity:1;transform:none}}

/* ===== v3: layered transparent embroidery, animated in code ===== */
#gate{background:transparent}
.hero{height:100vh;height:100svh;min-height:560px;max-height:960px;background:var(--linen)}
.hero>*{position:absolute}
.palace{left:0;width:100%;bottom:7%}
.roseRow{left:-8%;width:116%;bottom:-2%;z-index:3}
.peacock{bottom:12%;width:42%;opacity:0;z-index:2}
.peacock.pl{left:-2%;transform-origin:70% 100%}
.peacock.pr{right:-2%;transform-origin:30% 100%}
.heroText{top:21%}
.curt{top:0;bottom:0;width:50.5%;overflow:hidden}
.curt img{width:100%;height:100%;object-fit:cover;object-position:left top;transform-origin:0 0;display:block}
.curt.l{left:0;clip-path:polygon(0% 0%,100% 0%,100% 30%,100% 60%,100% 100%,50% 100%,0% 100%)}
.curt.r{right:0;transform:scaleX(-1);clip-path:polygon(0% 0%,100% 0%,100% 30%,100% 60%,100% 100%,50% 100%,0% 100%)}
.tie{width:10%;top:36%;opacity:0;z-index:2}
.tie.l{left:9%}.tie.r{right:9%}
.pelmet{top:-1%;left:-3%;width:106%;z-index:3;filter:drop-shadow(0 6px 6px rgba(80,60,40,.18))}
#petals{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#petals img{position:absolute;left:0;top:0;width:18px;opacity:.85;will-change:transform}
.archB{height:min(150vw,720px);display:block}
.archB .vine{position:absolute;bottom:0;height:100%;width:auto;clip-path:inset(100% 0 0 0);transition:clip-path 2.6s cubic-bezier(.3,0,.2,1)}
.archB .vine.l{left:-2%}
.archB .vine.r{right:-2%;transform:scaleX(-1)}
.archB.in .vine{clip-path:inset(0 0 0 0)}
.archB .apex{position:absolute;left:50%;top:0;width:44%;transform:translateX(-50%) scale(0);transition:transform 1s cubic-bezier(.3,1.6,.5,1) 2.2s}
.archB.in .apex{transform:translateX(-50%) scale(1)}
.archB .inner{position:absolute;left:25%;right:25%;top:22%;bottom:8%;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;opacity:0;transition:opacity 1.2s ease 1.6s}
.archB.in .inner{opacity:1}
.archB h2{margin:0;font:400 clamp(28px,8vw,36px)/1.15 var(--f-serif)}
.strand.hang{width:46px}

#gate.open .tap{opacity:0;transition:opacity .4s}

/* v4: the curtain is real fabric motion (video), the layers on top are code */
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero .heroText{top:22%}
.peacock{bottom:13%;width:38%}
/* raised-embroidery feel: pieces rise off the cloth and their shadow grows */
.lift{filter:drop-shadow(0 0 0 rgba(80,60,40,0))}

/* every embroidered piece rises off the cloth instead of wiping in */
[data-reveal] .bg{clip-path:none!important;opacity:0;transform:translateY(28px) scale(.965);filter:drop-shadow(0 0 0 rgba(80,60,40,0));transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1),filter 1.8s ease}
[data-reveal].in .bg{opacity:1;transform:none;filter:drop-shadow(0 8px 10px rgba(80,60,40,.16))}
.guests,.garland,.tl .ic,.archB .vine,.archB .apex{filter:drop-shadow(0 6px 8px rgba(80,60,40,.14))}

/* ================= the full-invite kit (../_full/fx.css) in raised thread embroidery =================
   Cards are linen patches with a running stitch inside the edge; the ring around cards,
   photos, the film and the scratch card is a twisted rose satin-stitch cord; buttons are
   the template's rose thread pill; the scratch foil is a rose satin patch with pearl knots. */
:root{
  --fx-ink:#4a3a36; --fx-muted:#8a7a72; --fx-accent:#a8566a; --fx-accent-2:#b8955a; --fx-soft:#7f9a7a; --fx-err:#a8566a;
  --fx-head:"Cormorant Garamond",Georgia,serif; --fx-caps-font:"Jost",system-ui,sans-serif;
  --fx-card:linear-gradient(180deg,#f6f2ec,#efe8de);
  --fx-line:rgba(184,149,90,.5);
  --fx-edge:repeating-linear-gradient(-58deg,#c98595 0 1.7px,#a8566a 1.7px 3px,#e7b9c3 3px 4.1px,#8e4457 4.1px 4.8px);
  --fx-edge-w:4px; --fx-radius:16px;
  --fx-shadow:0 5px 14px rgba(80,60,40,.12); --fx-shadow-lg:0 12px 26px rgba(80,60,40,.2);
  --fx-btn:linear-gradient(180deg,#f8f4ee,#ece4d8); --fx-btn-ink:#4a3a36;
  --fx-on:linear-gradient(180deg,#b86a7c,#9c4c60); --fx-on-ink:#fff; --fx-on-line:#a8566a;
  --fx-field:rgba(255,253,248,.7);
  --fx-card-solid:#ece6df; --fx-langs-bg:rgba(250,246,240,.92); --fx-langs-ink:#a8566a;
  --fx-foil-1:#93485b; --fx-foil-2:#c27e8f; --fx-foil-3:#efc9d0; --fx-foil-dots:#fffaf2; --fx-foil-ink:rgba(255,248,244,.95); --fx-scr-shape:oval;
  --fx-lb-bg:rgba(48,36,34,.94); --fx-lb-ink:#f3e9e2;
}
.fx-h{margin:0 0 6px}
/* a section ornament: the embroidered rose cluster sewn above the heading */
.crest{width:118px;margin:-14px 0 2px;filter:drop-shadow(0 5px 6px rgba(80,60,40,.18));transform:translateY(10px) scale(.86);opacity:0;transition:transform 1.4s cubic-bezier(.3,1.4,.5,1) .2s,opacity 1s ease .2s}
.rv.in .crest{transform:none;opacity:1}
.plain.fx-sec{gap:12px}
.plain.fx-sec .strand + .strand + .fx-h,.plain .strand + .strand + .sec{margin-top:26px}
/* linen patch with a running stitch just inside the cord */
.fx-card{background:var(--fx-card);outline:1.4px dashed rgba(168,86,106,.5);outline-offset:-11px;padding:22px 24px}
.fx-ch{font:500 24px/1.2 var(--fx-head);color:var(--fx-ink)}
.fx-cb strong{color:var(--fx-accent)}
.fx-caps{font-size:11px;letter-spacing:3.5px;color:var(--fx-accent)}
.fx-lnk.lnk,.fx-lnk{font:500 10px/1 var(--f-sans);letter-spacing:2.5px;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:3px}
/* every button is the rose thread pill with a stitched inner line */
.fx-btn{background:linear-gradient(180deg,#b4677a,#9c4c60);color:#fff;font:500 12px/1 var(--f-sans);letter-spacing:2px;padding:16px 26px;
  box-shadow:inset 0 0 0 3px rgba(156,76,96,1),inset 0 0 0 4.2px rgba(255,236,240,.55),0 4px 12px rgba(120,50,70,.25)}
.fx-card .fx-btn{padding:13px 22px}
.fx-opts button{font:italic 500 18px/1 var(--f-serif);border-color:rgba(184,149,90,.7);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.fx-opts button.on{box-shadow:inset 0 0 0 3px #9c4c60,inset 0 0 0 4.2px rgba(255,236,240,.55),0 3px 9px rgba(120,50,70,.22)}
.fx-qL{color:var(--ink);font:500 21px/1.25 var(--f-serif)}
.fx-q{border-bottom:1.4px dashed rgba(184,149,90,.5);border-radius:0}
.fx-field,.fx-sec textarea,#fxRForm textarea{font-family:var(--f-serif);margin-top:0;background:rgba(255,253,248,.7)}
#fxSend{margin-top:14px}
/* scratch card: an oval linen patch in a stitched cord, rubbed open like satin thread */
#fxScr{background:linear-gradient(180deg,#f7f2ea,#e9e0d2)}
.fx-scrUnder{background:radial-gradient(closest-side,#fbf8f3,#eee6da)}
.fx-scrD{font-family:var(--f-serif);font-weight:500;color:var(--ink)}
.fx-scrD i{color:var(--rose)}
/* film frame + gallery mounts in linen */
.fx-filmPlay{background:rgba(250,246,240,.9)}
.fx-filmPlay span{border-left-color:var(--rose)}
.fx-shot figcaption{font-family:var(--f-serif)}
/* the wedding day: a dotted gold thread line with knots */
.fx-day:before{background:none;border-left:1.5px dotted var(--gold);width:0}
.fx-day li:before{background:var(--linen);border:1.5px solid var(--gold);width:9px;height:9px;left:80px;top:18px;box-shadow:none}
.fx-day b{font:500 19px/1.2 var(--f-serif);letter-spacing:0;color:var(--ink)}
.fx-dt{font:500 10.5px/1.5 var(--f-sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);padding-top:4px}
.fx-db{font-size:15px}
/* wishes: little linen patches with a running stitch */
.fx-wish{background:var(--fx-card);box-shadow:var(--fx-shadow);outline:1.4px dashed rgba(168,86,106,.45);outline-offset:-8px}
.fx-wish blockquote:before{color:var(--rose)}
.fx-ivN{font-family:var(--f-serif)}
.fx-ivL{color:var(--rose)}
.fx-sw i{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 0 0 2px #fff,0 0 0 3px rgba(184,149,90,.6)}
.fx-dots button.on{background:var(--rose)}
.fx-invoc img{width:min(32vw,128px);filter:drop-shadow(0 7px 8px rgba(80,60,40,.22))}
.fx-invL{color:var(--rose)}
.fx-invoc .stitch{display:block;width:120px;height:0;border-top:1.5px dashed rgba(168,86,106,.55);margin:12px 0 6px}
.fx-invoc{margin-top:0}
.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}
.guests + .small{margin-top:4px}
.closing{padding-top:20px}

/* story: a short rose arch carries only the heading when chapters have photos */
.archB.short{height:min(80vw,380px)}
.archB.short .inner{top:44%}
.archB.short .inner:after{content:"";width:120px;border-top:1.5px dashed rgba(168,86,106,.55);margin-top:4px}
.chs{padding-top:34px;gap:40px}
.chs .ch{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:330px}
/* the photo sits in an embroidery hoop: a wooden ring with its brass screw, a satin-stitch cord inside */
.hoop{position:relative;margin:0;width:68%;max-width:230px;aspect-ratio:1;border-radius:50%;padding:11px;box-sizing:border-box;
  background:radial-gradient(circle,transparent 62%,rgba(0,0,0,.08) 70%,transparent 72%),conic-gradient(from 20deg,#d8b98a,#c49a63,#e2c697,#b98d57,#d6b483,#c69d68,#d8b98a);
  box-shadow:0 10px 22px rgba(80,60,40,.22),inset 0 0 0 1px rgba(120,80,40,.35);
  opacity:0;transform:translateY(22px) scale(.94) rotate(-3deg);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.ch.alt .hoop{transform:translateY(22px) scale(.94) rotate(3deg)}
.hoop:after{content:"";position:absolute;left:50%;top:-11px;width:16px;height:16px;margin-left:-8px;border-radius:4px;background:linear-gradient(180deg,#e9d6a4,#b0904f);box-shadow:0 2px 3px rgba(60,40,20,.3),inset 0 0 0 1px rgba(90,60,20,.4)}
.hoop:before{content:"";position:absolute;inset:8px;border-radius:50%;padding:4px;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)}
.hoop img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.chs.in .hoop{opacity:1;transform:rotate(-2deg)}
.chs.in .ch.alt .hoop{transform:rotate(2deg)}
.chTx{display:flex;flex-direction:column;gap:3px;text-align:center}
.chTx b{font:500 10px/1.4 var(--f-sans);letter-spacing:3px;color:var(--rose)}
.chTx i{font:italic 500 22px/1.25 var(--f-serif);color:var(--ink)}
.chTx span{font:400 16px/1.5 var(--f-serif);color:var(--muted)}
.ch:not(.has-img):before{content:"";display:block;width:30px;height:30px;margin:0 auto -4px;background:url(art/l-p8.webp) center/contain no-repeat}
@media (prefers-reduced-motion: reduce){.hoop,.crest{opacity:1!important;transform:none!important;transition:none!important}}

/* Devanagari: a font that has the letters (Latin stays in Cormorant), no tracking or capitals, no fake italic */
.lang-hi{--f-serif:"Cormorant Garamond","Noto Serif Devanagari",Georgia,serif;--fx-head:"Cormorant Garamond","Noto Serif Devanagari",Georgia,serif;--fx-caps-font:"Jost","Noto Serif Devanagari",sans-serif}
.lang-hi .caps,.lang-hi .tap,.lang-hi .date,.lang-hi .count i,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .fx-btn,.lang-hi .parents b,.lang-hi #story div b,.lang-hi .chTx b,.lang-hi .tl .tt,.lang-hi .fx-dt,.lang-hi .fx-caps{letter-spacing:.3px;text-transform:none;font-family:Georgia,"Noto Serif Devanagari",var(--f-sans)}
.lang-hi .caps,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .parents b,.lang-hi .count i,.lang-hi .tl .tt,.lang-hi .fx-dt,.lang-hi .fx-caps,.lang-hi .chTx b{font-size:13.5px}
.lang-hi .fx-btn,.lang-hi .tap,.lang-hi #fxSend{font-size:16px}
.lang-hi .tl .tt,.lang-hi .fx-dt{font-weight:600}
.lang-hi .it,.lang-hi .and,.lang-hi .tl .tv,.lang-hi .tl .tw,.lang-hi #story div i,.lang-hi .chTx i,.lang-hi .fx-opts button,.lang-hi .fx-wish blockquote{font-style:normal}
.lang-hi .heroText h1,.lang-hi .names,.lang-hi .sec,.lang-hi .framed h2,.lang-hi .archB h2{line-height:1.35}
.lang-hi .small,.lang-hi .framed p{line-height:1.7}