/* Kashmiri Thread: an ivory-linen sozni invitation. The arch opening onto the pavilion
   is real motion (a generated clip); every leaf, paisley and thread border on top is a
   generated transparent sprite animated in code; every word is live data. */
:root{
  --linen:#f3ecdf; --gutter:#ddd3c0; --ink:#4d3c32; --soft:#7a6656; --rose:#9c5459; --rose2:#c4847f; --sage:#617257; --sage2:#9eab8c; --gold:#9a7442; --gold2:#c8a368;
  --f-head:"Cormorant Garamond", Georgia, serif;
  --f-caps:"Cinzel", "Cormorant Garamond", Georgia, serif;
  --f-script:"Pinyon Script", "Cormorant Garamond", cursive;
  --col:min(100vw, 480px); --bw:15px;
  /* satin stitch: fine slanted threads in two tones of rose, with a travelling sheen */
  --satin:repeating-linear-gradient(118deg,#9a5156 0 1.1px,#b9706f 1.1px 2.2px,#a65c60 2.2px 3.1px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--gutter);color:var(--ink);font-family:var(--f-head);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 0%,#e9e1d1,var(--gutter) 70%) fixed}
body.locked{overflow:hidden;height:100%}
#page{width:var(--col);margin:0 auto;background:#d9cfbb url(art/linen.jpg) center top/100% auto repeat-y;background-blend-mode:multiply;overflow:hidden;box-shadow:0 0 60px rgba(80,60,40,.25);padding-bottom:14px}
section{position:relative;width:100%}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 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% 45%,transparent 50%,rgba(70,50,30,.22));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,.4) 50%,transparent);animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%{left:-70%}60%,100%{left:120%}}
.monoBox{position:absolute;left:var(--mx,50%);top:var(--my,40%);width:var(--mw,150px);height:var(--mw,150px);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}
.mono{margin:0;font:500 var(--mf,64px)/1 var(--f-caps);letter-spacing:0;white-space:nowrap;padding:0 .04em;
  background:linear-gradient(100deg,transparent calc(var(--g,50)*1% - 10%),rgba(255,240,215,.55) calc(var(--g,50)*1%),transparent calc(var(--g,50)*1% + 10%)),var(--satin);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .6px 0 rgba(255,251,242,.9)) drop-shadow(0 2px 1.6px rgba(70,40,25,.4));
  clip-path:inset(0 100% 0 0);transition:clip-path 2.2s cubic-bezier(.45,.1,.3,1) .5s}
.mono small{font:italic 500 .62em/1 var(--f-head);vertical-align:.12em;margin:0 .02em}
body.ready .mono{clip-path:inset(0 -10% 0 -10%)}
.tap{position:absolute;left:50%;bottom:calc(7% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:13px 28px;border-radius:999px;border:0;background:rgba(246,240,229,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;font:500 14px/1 var(--f-caps);letter-spacing:3px;color:var(--rose);cursor:pointer;
  box-shadow:inset 0 0 0 4px rgba(246,240,229,.9),inset 0 0 0 5.5px var(--sage2),0 6px 16px rgba(70,50,30,.25);animation:pulse 2.4s ease-in-out infinite}
.tap:after{content:"";position:absolute;inset:7px;border-radius:999px;border:1.3px dashed rgba(156,84,89,.7);pointer-events:none}
@keyframes pulse{50%{opacity:.62}}
#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%,-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:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0 9%,rgba(255,240,205,.85) 20%,transparent 56%),linear-gradient(90deg,transparent 47%,rgba(255,244,215,.95) 50%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(255,244,215,.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:#efe6d6 url(art/arch-first.jpg) center/cover}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* light moves across the stitched lake once the arch is open */
.lake{position:absolute;left:var(--lx,25%);width:var(--lw,50%);top:var(--ly,78%);height:var(--lh,8%);pointer-events:none;opacity:0;mix-blend-mode:soft-light;overflow:hidden;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 40%,transparent);mask-image:radial-gradient(50% 50% at 50% 50%,#000 40%,transparent)}
.lake:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,255,255,.55) 5px 6.5px,transparent 6.5px 11px);animation:ripple 3.2s linear infinite}
@keyframes ripple{to{transform:translateY(11px)}}
body.named .lake{opacity:.8;transition:opacity 2s ease}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.heroText{position:absolute;left:var(--tx,50%);top:var(--ty,30%);width:var(--tw,64%);transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;visibility:hidden}
.heroText .pre{margin:0 0 4px;font:500 12px/1.3 var(--f-caps);letter-spacing:3.5px;text-transform:uppercase;color:var(--sage)}
.heroText h1{margin:0;font:400 58px/1 var(--f-script);white-space:nowrap}
.heroText h1 span{display:block;padding:.06em .12em .1em;
  background:linear-gradient(100deg,transparent calc(var(--g,50)*1% - 12%),rgba(255,240,215,.6) calc(var(--g,50)*1%),transparent calc(var(--g,50)*1% + 12%)),var(--satin);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.heroText h1 .amp{font:italic 500 .5em/1 var(--f-head);color:var(--gold);-webkit-text-fill-color:var(--gold)}
.heroText .date{margin:8px 0 0;font:500 15px/1.3 var(--f-caps);letter-spacing:2px;color:var(--ink)}
.heroText .city{margin:3px 0 0;font:italic 500 19px/1.2 var(--f-head);color:var(--sage)}
.heroText h1,.heroText .date,.heroText .city,.heroText .pre{filter:drop-shadow(0 .6px 0 rgba(255,251,242,.9)) drop-shadow(0 2px 2px rgba(70,40,25,.28))}

/* ---------- linen pages: each one a separate embroidered page with its own stitched frame ---------- */
.pageL{width:calc(100% - 20px);margin:14px 10px 0;padding:76px 40px 100px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--linen) url(art/linen.jpg) center top/100% auto repeat-y;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px rgba(80,60,40,.18),0 2px 4px rgba(80,60,40,.12)}
.pageL>*{position:relative;z-index:2}
.frm{position:absolute;inset:11px;pointer-events:none;z-index:3}
.frm>i{position:absolute;display:block}
.frm .h{height:var(--bw);width:50%;background:url(art/band-h.webp) 0 50%/auto 100% repeat-x}
.frm .t{top:0}.frm .b{bottom:0}
.frm .l{left:0}.frm .r{right:0}
.frm .t.l,.frm .b.r{transform:scaleX(-1)}
.frm .v{top:0;bottom:0;width:var(--bw);background:url(art/band-v.webp) 50% 0/100% auto repeat-y}
.frm .v.r{transform:scaleX(-1)}
.frm .h,.frm .v{clip-path:inset(0 100% 0 0)}
.frm .v{clip-path:inset(0 0 100% 0)}
.frm img{position:absolute;width:23%;max-width:100px;height:auto;opacity:0;filter:drop-shadow(0 4px 4px rgba(70,50,30,.28))}
.frm .c1{left:-6px;top:-6px}
.frm .c2{right:-6px;top:-6px;transform:scaleX(-1)}
.frm .c3{left:-6px;bottom:-6px;transform:scaleY(-1)}
.frm .c4{right:-6px;bottom:-6px;transform:scale(-1,-1)}
.frm .knot{left:50%;bottom:-11px;width:30px;margin-left:-15px}
.frm .glint{z-index:3}
.frm.done .h,.frm.done .v{clip-path:none!important}
.frm.done img{opacity:1!important}

.small{margin:0;font:400 18px/1.5 var(--f-head);color:var(--soft)}
.it{font-style:italic}
.caps{margin:0;font:500 13px/1.6 var(--f-caps);letter-spacing:2.5px;text-transform:uppercase;color:var(--sage)}
.names{margin:0;font:400 clamp(40px,12vw,52px)/1.15 var(--f-script);color:var(--rose)}
.and{margin:0;font:italic 500 22px/1 var(--f-head);color:var(--gold)}
.sec{margin:0 0 8px;font:500 clamp(32px,9vw,40px)/1.1 var(--f-head);color:var(--rose);letter-spacing:.3px}
.big{margin:0;font:500 25px/1.3 var(--f-head);color:var(--ink)}
.divider{width:66%;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.45 var(--f-caps);letter-spacing:1.6px;text-transform:uppercase;color:var(--sage)}
.parents span{font:500 17px/1.35 var(--f-head);color:var(--ink)}

/* welcome: text above the embroidered chinar spray */
.welcome{padding-bottom:26px;gap:0}
.welcome .inner{padding:4px 4% 0;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3}
.welcome .fl{width:96px;height:auto}
.welcome h2{margin:0;font:500 clamp(30px,8.6vw,38px)/1.15 var(--f-head);color:var(--rose)}
.welcome p{margin:0;font:400 19px/1.55 var(--f-head);color:var(--ink)}
.spray{width:calc(100% + 80px);max-width:none;margin:-30% -40px 0;-webkit-mask-image:linear-gradient(transparent 22%,#000 46%,#000 92%,transparent);mask-image:linear-gradient(transparent 22%,#000 46%,#000 92%,transparent)}

/* the countdown: stitched numerals in embroidery hoops */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:calc(100% + 16px)}
.count div{display:flex;flex-direction:column;align-items:center;gap:8px}
.hoop{position:relative;width:100%;aspect-ratio:1;display:block}
.hoop img{width:100%;height:100%;object-fit:contain;display:block}
.hoop svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hoop text{font:500 38px var(--f-caps);text-anchor:middle;dominant-baseline:central;fill:url(#satin);stroke:#7f3f45;stroke-width:.7;stroke-dasharray:2.2 1.3;paint-order:stroke;font-variant-numeric:tabular-nums}
.count i{font:500 10.5px/1 var(--f-caps);letter-spacing:.8px;text-transform:uppercase;color:var(--sage);font-style:normal}

/* timeline: a running stitch is sewn down the page as you scroll */
.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 dashed rgba(97,114,87,.35)}
.thr{position:absolute;left:50%;top:10px;width:2px;margin-left:-1px;height:0;background:repeating-linear-gradient(180deg,var(--rose) 0 7px,transparent 7px 11px);z-index:1}
.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:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--linen);border:1.5px solid var(--sage2)}
.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 .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(--rose)}
.tl .tt{font:500 13px/1.4 var(--f-caps);letter-spacing:1.6px;text-transform:uppercase;color:var(--sage)}
.tl .tv{font:italic 500 15.5px/1.35 var(--f-head);color:var(--soft)}
.tl .tw{font:italic 500 15.5px/1.35 var(--f-head);color:var(--ink)}
.lnk{font:500 11.5px/1 var(--f-caps);letter-spacing:1.6px;text-transform:uppercase;color:var(--rose);text-decoration:none;border-bottom:1.3px dashed var(--rose2);padding-bottom:4px;margin-top:5px}
.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 2px 2px rgba(70,50,30,.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(70,50,30,.25))}
.tl li.on .tx{opacity:1;transform:none}
.tl li.on:after{background:var(--rose2);border-color:var(--rose)}

/* pictures stitched into the linen */
.pic{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 72%,transparent);mask-image:radial-gradient(50% 48% at 50% 50%,#000 72%,transparent)}
.dress img+img{transition-delay:.45s}

/* running-stitch pill buttons */
.bp{display:inline-block;margin-top:14px;padding:15px 32px;border-radius:999px;border:0;background:rgba(255,252,245,.55);color:var(--rose);font:600 19px/1 var(--f-head);text-decoration:none;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1.5px var(--sage2),0 5px 12px rgba(80,60,40,.15)}
.bp:after{content:"";position:absolute;inset:5px;border-radius:999px;border:1.3px dashed var(--rose2);pointer-events:none}
.bp.solid{background:linear-gradient(180deg,#a8636a,#8c4b51);color:#fbf3e6;box-shadow:inset 0 0 0 1.5px #7a3d43,0 6px 14px rgba(110,50,55,.3)}
.bp.solid:after{border-color:rgba(251,243,230,.75)}

/* story arch */
.archS{margin-top:14px}
.archS .bg{display:block;width:100%;height:auto}
.archS .inner{position:absolute;left:var(--al,21.5%);right:var(--al,21.5%);top:var(--at,21%);bottom:var(--ab,27%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.archS h2{margin:0 0 -2px;font:500 clamp(30px,8.6vw,38px)/1.15 var(--f-head);color:var(--rose)}
#story{display:flex;flex-direction:column;gap:9px}
#story div b{display:block;font:500 12.5px/1.4 var(--f-caps);letter-spacing:2.5px;color:var(--sage)}
#story div i{display:block;font:italic 600 19px/1.2 var(--f-head);margin:2px 0;color:var(--rose)}
#story div span{font:500 15px/1.4 var(--f-head);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* rsvp */
.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:1.3px dashed rgba(97,114,87,.4)}
.rl .nm{font:600 22px/1.2 var(--f-head);color:var(--rose)}
.rl .wh{font:italic 500 15.5px/1.3 var(--f-head);color:var(--soft)}
.rl .opts{display:flex;gap:8px;justify-content:center}
.rl .opts button{border:1.3px dashed var(--sage2);background:rgba(255,252,245,.5);color:var(--ink);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,#a8636a,#8c4b51);border:1.3px dashed rgba(251,243,230,.8);color:#fbf3e6;box-shadow:0 3px 8px rgba(110,50,55,.3)}
textarea{width:100%;margin-top:14px;border:1.3px dashed var(--sage2);background:rgba(255,252,245,.6);border-radius:12px;padding:12px;font:500 17px/1.4 var(--f-head);color:var(--ink);resize:vertical}
textarea::placeholder{color:rgba(122,102,86,.75)}
.sign{margin:0;font:400 38px/1.2 var(--f-script);color:var(--rose)}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* ---------- motion: pages lift, embroidery rises off the linen 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(20px) scale(.97);filter:drop-shadow(0 0 0 rgba(0,0,0,0));transition:opacity 1.3s ease .35s,transform 1.7s cubic-bezier(.2,.8,.2,1) .35s,filter 1.7s ease .35s}
.in .rise{opacity:1;transform:none;filter:drop-shadow(0 6px 6px rgba(70,50,30,.22))}
.pic.rise,.spray.rise,.dress img.rise,.archS .bg.rise{filter:none!important}
.count div:nth-child(2) .rise{transition-delay:.5s}.count div:nth-child(3) .rise{transition-delay:.65s}.count div:nth-child(4) .rise{transition-delay:.8s}

#bits{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
#bits img{position:absolute;left:0;top:0;width:26px;max-width:none;height:auto;will-change:transform;filter:drop-shadow(0 4px 3px rgba(70,50,30,.25))}
#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:1.3px dashed var(--rose);background:rgba(246,240,229,.85);color:var(--rose);font-size:15px;cursor:pointer}
#snd.off{opacity:.55;text-decoration:line-through}

/* ================= the full-invite kit (../_full/fx.css) in sozni thread on linen =================
   cards are paler linen patches edged with a rose satin-stitch cord and a sage running stitch inside;
   buttons are the template's running-stitch pills; the scratch foil is rose satin under a stitched blossom */
:root{
  --fx-ink:#4d3c32; --fx-muted:#7a6656; --fx-accent:#9c5459; --fx-accent-2:#9eab8c; --fx-soft:#c4847f; --fx-err:#a5523f;
  --fx-head:"Cormorant Garamond",Georgia,serif; --fx-caps-font:"Cinzel","Cormorant Garamond",Georgia,serif;
  --fx-card:linear-gradient(180deg,rgba(253,250,243,.9),rgba(245,238,226,.9));
  --fx-line:rgba(97,114,87,.42);
  --fx-edge:repeating-linear-gradient(118deg,#8f4a50 0 1.1px,#c27d7b 1.1px 2px,#a65c60 2px 3.2px);
  --fx-edge-w:3.5px;
  --fx-radius:14px; --fx-shadow:0 6px 14px rgba(80,60,40,.14); --fx-shadow-lg:0 12px 26px rgba(80,60,40,.24);
  --fx-btn:linear-gradient(180deg,#fcf8f0,#f1e9da); --fx-btn-ink:#9c5459;
  --fx-on:linear-gradient(180deg,#a8636a,#8c4b51); --fx-on-ink:#fbf3e6; --fx-on-line:rgba(251,243,230,.8);
  --fx-field:rgba(255,252,245,.62);
  --fx-foil-1:#8c4b51; --fx-foil-2:#b56b6d; --fx-foil-3:#dfa9a0; --fx-foil-dots:#d99a93; --fx-foil-ink:rgba(255,246,236,.95); --fx-scr-shape:oval;
  --fx-card-solid:#f6efe2; --fx-langs-ink:#9c5459;
  --fx-lb-bg:rgba(52,40,32,.94); --fx-lb-ink:#f3ecdf;
}
.fx-h{margin:0 0 6px}
.pageL .fl{width:96px;height:auto}
/* a sage running stitch sewn just inside every kit card, photo and frame */
.fx-card:after,.fx-look:after,.fx-shot:after,.fx-wish:after{content:"";position:absolute;inset:7px;border-radius:calc(var(--fx-radius) - 5px);border:1.3px dashed rgba(97,114,87,.55);pointer-events:none;z-index:3}
.fx-shot:after{inset:4px;border-radius:11px}
.fx-wish{box-shadow:var(--fx-shadow)}
.fx-wish:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--fx-edge-w);pointer-events:none;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)}
.fx-wish blockquote:before{color:var(--fx-soft)}
/* links and buttons are the template's own: dashed-stitch underline, running-stitch pills */
.fx-lnk{font:500 11.5px/1 var(--f-caps);letter-spacing:1.6px;color:var(--rose);border-bottom:1.3px dashed var(--rose2);padding-bottom:4px}
.fx-btn{font:600 19px/1 var(--f-head);letter-spacing:0;text-transform:none;padding:15px 30px}
.fx-btn:not(.solid){box-shadow:inset 0 0 0 1.5px var(--sage2),0 5px 12px rgba(80,60,40,.15)}
.fx-btn:not(.bp):after{content:"";position:absolute;inset:5px;border-radius:999px;border:1.3px dashed var(--rose2);pointer-events:none}
#fxSend{font-size:19px;padding:17px 34px}
.fx-opts button{border-style:dashed;font-weight:600;font-size:16.5px;padding:11px 13px}
.fx-opts button.on{border-style:dashed}
.fx-q,.fx-rl li{border-bottom:1.3px dashed var(--fx-line);border-radius:0}
.fx-field,#fxRForm textarea,.fx-sec textarea{border:1.3px dashed var(--sage2);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:3px;font-size:10.5px;line-height:1.25;letter-spacing:.9px}
.tl li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fx-cal{margin-top:20px}
.fx-day:before{background:none;border-left:1.5px dashed var(--rose2);width:0}
.fx-day li:before{background:url(art/blossom.webp) center/contain no-repeat;width:18px;height:18px;left:76px;top:13px;box-shadow:none;border-radius:0}
.fx-upi code{background:rgba(255,252,245,.7);border:1.3px dashed var(--sage2)}
/* the scratch card: rose satin under a stitched blossom, sewn into the linen */
#fxScr{background:linear-gradient(180deg,#fcf8f0,#efe6d6)}
#fxScr:after{content:"";position:absolute;left:50%;top:-16px;width:38px;height:38px;margin-left:-19px;background:url(art/blossom.webp) center/contain no-repeat;z-index:5;filter:drop-shadow(0 3px 3px rgba(70,50,30,.3))}
.fx-scrUnder{background:radial-gradient(closest-side,#fffbf3,#f2eadb)}
/* fine satin-stitch threads laid over the rose foil until the first rub */
#fxScr .satin{position:absolute;inset:12px;border-radius:inherit;z-index:3;pointer-events:none;mix-blend-mode:soft-light;opacity:.75;transition:opacity .5s ease;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.55) 0 1px,rgba(0,0,0,.25) 1px 2.4px,transparent 2.4px 3.2px)}
#fxScr.started .satin{opacity:0}
.fx-scrD i{color:var(--sage)}
.fx-film{background:linear-gradient(180deg,#fcf8f0,#efe6d6)}
.fx-filmPlay span{border-left-color:var(--rose)}
.fx-invoc{margin:0 0 6px}
.fx-invoc img#fxInvImg{width:min(30vw,112px)}
.fx-invoc .divider{width:56%;margin:6px 0 4px}
.closing{padding-top:70px;padding-bottom:96px}
.sign span{white-space:nowrap}

/* story chapters with a photo: the picture sits inside an embroidery hoop */
.chImg{position:relative;margin:0;aspect-ratio:240/289}
.chImg .ph{position:absolute;left:50.4%;top:49.8%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;object-fit:cover;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.chImg .hp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 4px rgba(70,50,30,.3))}
.archS.withImg .inner{gap:6px}
.archS.withImg #story{width:100%}
#story .ch{display:flex;flex-direction:column;align-items:center;gap:4px}
#story .chImg{width:min(150px,66%)}
#story .chTx{padding:0 6px}
.archS.withImg #story .chTx{padding:0 16px}
.archS.withImg #story span{font-size:14.5px}
#story .chTx b,#story .chTx i{display:block}
#story2{display:flex;flex-direction:column;gap:26px;width:100%}
#story2 .ch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
#story2 .ch:not(.has-img):before{content:"";width:28px;height:28px;background:url(art/blossom.webp) center/contain no-repeat}
#story2 .ch.has-img{display:grid;grid-template-columns:46% 1fr;gap:12px;align-items:center;text-align:left}
#story2 .ch.has-img.alt .chImg{order:2}
#story2 .ch.has-img.alt{grid-template-columns:1fr 46%;text-align:right}
#story2 .chImg{width:100%}
#story2 b{display:block;font:500 12px/1.4 var(--f-caps);letter-spacing:2px;color:var(--sage)}
#story2 i{display:block;font:italic 600 20px/1.2 var(--f-head);margin:3px 0;color:var(--rose)}
#story2 span{display:block;font:500 16px/1.4 var(--f-head);color:var(--ink)}
#storyMore{margin-top:14px;padding-top:70px;padding-bottom:90px}

/* Devanagari: a font that has the letters, no wide tracking, no upper-casing, no fake italic */
.lang-hi{--f-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--f-caps:Georgia,"Noto Serif Devanagari","Cinzel",Georgia,serif;--f-script:Georgia,"Noto Serif Devanagari","Pinyon Script",serif}
.lang-hi .caps,.lang-hi .tap,.lang-hi .count i,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .parents b,.lang-hi #story b,.lang-hi #story2 b,.lang-hi .heroText .pre,.lang-hi .heroText .date,.lang-hi .tl .tt{letter-spacing:.3px;text-transform:none}
.lang-hi .caps,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .tl .tt,.lang-hi .parents b{font-size:14px}
.lang-hi .count i{font-size:12.5px}
.lang-hi .tap{font-size:16px}
.lang-hi .heroText h1{font-weight:500;line-height:1.25}
.lang-hi .heroText .pre{font-size:15px}
.lang-hi .names{font:500 clamp(30px,9vw,38px)/1.35 var(--f-script)}
.lang-hi .sign{font:500 28px/1.4 var(--f-script)}
.lang-hi .sec,.lang-hi .archS h2,.lang-hi .welcome h2{font-size:clamp(27px,7.6vw,33px);line-height:1.35}
.lang-hi .mono{font-weight:500}
/* Chrome misplaces Devanagari vowel signs under background-clip:text, so Hindi names get a solid rose thread */
.lang-hi .heroText h1 span,.lang-hi .mono{background:none;color:var(--rose);-webkit-text-fill-color:var(--rose)}
.lang-hi .fx-btn{font-size:17px;line-height:1.4;padding-top:13px;padding-bottom:9px}
.lang-hi #fxSend{padding-top:15px;padding-bottom:11px}
.lang-hi .fx-wish figcaption{font-size:13px}
.lang-hi .tl .tt{font-size:16px;font-weight:600}
.lang-hi .tl .tx [data-fx-cal] .fx-lnk{font-size:13.5px;letter-spacing:.3px}
.lang-hi #story span{line-height:1.6}
.lang-hi .fx-opts button{font-size:15.5px;line-height:1.3;padding:9px 12px}
.lang-hi .small,.lang-hi .welcome p{font-size:17px;line-height:1.65}
.lang-hi .it,.lang-hi .and,.lang-hi .tl .tv,.lang-hi .tl .tw,.lang-hi .heroText .city,.lang-hi #story i,.lang-hi #story2 i,.lang-hi .mono small,.lang-hi .heroText h1 .amp{font-style:normal}

@media (prefers-reduced-motion: reduce){
  .rv,.rise,.tl li .ic,.tl li .tx{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .mono{clip-path:none!important;transition:none!important}
  .tap,#gate .sheen:after,.lake:after{animation:none!important}
}

/* the lattice doors: rigid embroidered panels on hinges at the arch's sides */
.doors{position:absolute;inset:0;z-index:3;perspective:1100px;pointer-events:none}
.door{position:absolute;display:block;max-width:none;backface-visibility:hidden;will-change:transform,opacity}
.door.l{transform-origin:0 50%}
.door.r{transform-origin:100% 50%}
.glow{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:radial-gradient(28% 40% at 50% 46%,rgba(255,236,226,.95),rgba(255,226,214,.35) 55%,transparent 75%);mix-blend-mode:screen}
.gust{position:absolute;inset:0;z-index:4;pointer-events:none}
.gust img{filter:drop-shadow(0 3px 3px rgba(70,40,25,.25))}

/* hero names: crisp deep-rose silk thread on the pale sky (the striped satin fill blurred at this size) */
.heroText h1 span{background:linear-gradient(100deg,transparent calc(var(--g,50)*1% - 12%),rgba(255,236,226,.55) calc(var(--g,50)*1%),transparent calc(var(--g,50)*1% + 12%)),linear-gradient(180deg,#8f4048,#6c2a33);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroText h1{filter:drop-shadow(0 1px 0 rgba(255,250,244,.9)) drop-shadow(0 1.5px 1.5px rgba(70,30,30,.3))}
.heroText .pre{color:#4f6046}