/* Sheesh Mahal: a scroll invitation of mirror work. Every picture is generated
   art (mirror mosaic, meenakari enamel, rose gold); every word is live data.
   Each section sits inside ONE transparent arch sprite, nine-sliced with
   border-image so it grows with its content; the same sprite masks a moving
   specular glint so only the mirrors and metal catch the light. */
:root{
  --ivory:#fbf5ee; --ivory2:#f4e9df; --ink:#5b3b37; --muted:#8e6c66; --rose:#b36f5e; --blush:#e7c3b8; --gold:#c08a6c;
  --rg:linear-gradient(100deg,#9c5a4a 0%,#c98d76 22%,#f3d2c2 40%,#b97563 58%,#d9a58f 78%,#9c5a4a 100%);
  --rgd:linear-gradient(100deg,#6f3529 0%,#94503f 26%,#e9c2b0 44%,#8d4a3a 60%,#b06b57 80%,#6f3529 100%);
  --f-head:"Marcellus", Georgia, serif;
  --f-body:"EB Garamond", Georgia, serif;
  --col:min(100vw, 480px);
  /* the arch sprite is 868 x 1024: crown 756, side band 132, base 121, tile 147 */
  --fw:calc(var(--col) - 16px);
  --k:calc(var(--fw) / 868);
  --g:50;
}
*{box-sizing:border-box}
html,body{margin:0;background:#efe4da;color:var(--ink);font-family:var(--f-body);-webkit-tap-highlight-color:transparent}
body.locked{overflow:hidden;height:100%}
#page{position:relative;width:var(--col);margin:0 auto;overflow:hidden;box-shadow:0 0 60px rgba(90,50,40,.12);
  background:radial-gradient(120% 60% at 50% 0%,#fffaf4 0%,transparent 60%),radial-gradient(90% 50% at 50% 100%,#f6e8de 0%,transparent 70%),var(--ivory)}
img{display:block}

/* ---------- hero = gate ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:980px;overflow:hidden;background:#f3e3d8}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.heroGlint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.95;
  background:linear-gradient(118deg,transparent calc(var(--g)*1% - 26%),rgba(255,248,240,.55) calc(var(--g)*1% - 6%),#fff calc(var(--g)*1%),rgba(255,248,240,.55) calc(var(--g)*1% + 6%),transparent calc(var(--g)*1% + 26%))}
body.opened .heroGlint{-webkit-mask-image:radial-gradient(ellipse 36% 34% at 50% 56%,transparent 70%,#000 100%);mask-image:radial-gradient(ellipse 36% 34% at 50% 56%,transparent 70%,#000 100%)}
.bloom{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse 22% 60% at 50% 52%,rgba(255,250,242,.95),rgba(255,236,224,.45) 45%,transparent 75%)}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.spk img{position:absolute;left:0;top:0;width:26px;margin:-13px 0 0 -13px;opacity:0;will-change:transform,opacity;mix-blend-mode:screen}
.spk img.b{width:64px;margin:-32px 0 0 -32px;filter:saturate(.35) brightness(1.25)}

.seal{position:absolute;left:50%;top:var(--sy,50.5%);width:var(--sd,128px);height:var(--sd,128px);transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;background:none;cursor:pointer;z-index:5}
.seal span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 calc(var(--sd,128px)*.34)/1 var(--f-head);letter-spacing:1px;white-space:nowrap;
  background:var(--rgd);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,240,232,.9)) drop-shadow(0 2px 3px rgba(90,40,30,.35))}
.seal span em{font-style:normal;font-size:.62em;margin:0 .14em;position:relative;top:-.04em}
.tap{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:11px 22px;border-radius:999px;z-index:5;white-space:nowrap;
  background:rgba(255,247,240,.82);border:1px solid rgba(192,138,108,.7);box-shadow:0 4px 18px rgba(90,40,30,.18),inset 0 0 0 3px rgba(255,255,255,.55);
  font:400 13px/1 var(--f-head);letter-spacing:4px;text-transform:uppercase;color:var(--rose);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:translateX(-50%) scale(.97)}}
body.opened .seal,body.opened .tap{opacity:0;pointer-events:none;animation:none;transition:opacity .5s ease}

.heroText{position:absolute;left:21%;right:21%;top:var(--ty,40%);text-align:center;z-index:3;pointer-events:none;visibility:hidden}
.heroText .pre{margin:0 0 14px;font:italic 400 17px/1.2 var(--f-body);color:var(--muted)}
.heroText h1{margin:0;font:400 clamp(44px,13vw,60px)/1.04 var(--f-head);color:var(--rose)}
.heroText .hdiv{width:70%;height:auto;margin:16px auto 0;opacity:0}
.heroText h1 span{display:block;background:var(--rg);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .05em}
.heroText h1 .amp{font:italic 400 .62em/1.3 var(--f-body)}
.heroText .date{margin:18px 0 0;font:400 14px/1.3 var(--f-head);letter-spacing:3px;color:var(--ink)}
.heroText .city{margin:6px 0 0;font:italic 400 17px/1.2 var(--f-body);color:var(--muted)}
.cue{position:absolute;left:50%;bottom:calc(3.2% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;z-index:3;font:400 11px/1 var(--f-head);letter-spacing:4px;text-transform:uppercase;color:var(--rose);opacity:0}
.cue:after{content:"";display:block;width:1px;height:22px;margin:8px auto 0;background:linear-gradient(var(--rose),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* ---------- mirror-arch sections (one sprite, nine-sliced) ---------- */
.mir{position:relative;isolation:isolate;margin:22px 8px;min-height:calc(var(--k)*960);
  padding:calc(var(--k)*215) calc(var(--k)*132 + 12px) calc(var(--k)*121 + 34px)}
.mir:before{content:"";position:absolute;inset:0;border-style:solid;border-color:transparent;pointer-events:none;
  border-width:calc(var(--k)*756) calc(var(--k)*132) calc(var(--k)*121)}
.mir:before{border-image:url(art/arch.webp) 756 132 121 / calc(var(--k)*756) calc(var(--k)*132) calc(var(--k)*121) stretch round;
  filter:drop-shadow(0 0 0 rgba(110,55,45,0));transition:filter 1.8s ease}
.mir.in:before{filter:drop-shadow(0 10px 14px rgba(110,55,45,.2))}
.mir:after{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(var(--k)*100);right:calc(var(--k)*100);top:calc(var(--k)*170);bottom:calc(var(--k)*80);
  background:radial-gradient(110% 70% at 50% 30%,#fffdf9,#fbf3ea 70%);border-radius:48% 48% 6px 6px / 22% 22% 6px 6px}
.mir .glint{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  padding:calc(var(--k)*756) 0 calc(var(--k)*121);
  /* the arch alpha as three mask layers: crown, base, and the side tile repeated
     ('round', like the frame's border-image) only between them */
  -webkit-mask-image:url(art/m-crown.webp),url(art/m-base.webp),url(art/m-side.webp);mask-image:url(art/m-crown.webp),url(art/m-base.webp),url(art/m-side.webp);
  -webkit-mask-size:100% auto,100% auto,100% calc(var(--k)*147);mask-size:100% auto,100% auto,100% calc(var(--k)*147);
  -webkit-mask-position:top,bottom,top;mask-position:top,bottom,top;
  -webkit-mask-repeat:no-repeat,no-repeat,no-repeat round;mask-repeat:no-repeat,no-repeat,no-repeat round;
  -webkit-mask-origin:border-box,border-box,content-box;mask-origin:border-box,border-box,content-box;
  -webkit-mask-clip:border-box,border-box,content-box;mask-clip:border-box,border-box,content-box;
  background:linear-gradient(118deg,transparent calc(var(--g)*1% - 22%),rgba(255,250,244,.7) calc(var(--g)*1% - 6%),#fff calc(var(--g)*1%),rgba(255,250,244,.7) calc(var(--g)*1% + 6%),transparent calc(var(--g)*1% + 22%))}

.mir .glint.hot{mix-blend-mode:screen;opacity:1;
  background:linear-gradient(118deg,transparent calc(var(--g)*1% - 7%),rgba(255,253,250,.18) calc(var(--g)*1% - 3%),rgba(255,255,255,.62) calc(var(--g)*1%),rgba(255,253,250,.18) calc(var(--g)*1% + 3%),transparent calc(var(--g)*1% + 7%))}
.mir .spk{z-index:3}
.mir .in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}

/* medallions and type */
.rosette{width:70px;height:auto;margin:0 0 4px;animation:turn 60s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.med{position:relative;width:118px;margin:0 0 6px}
.med img{width:100%;height:auto}
.med span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 34px/1 var(--f-head);white-space:nowrap;
  background:var(--rgd);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,240,232,.9)) drop-shadow(0 2px 2px rgba(90,40,30,.3))}
.med span em{font-style:normal;font-size:.62em;margin:0 .12em}
.sec{margin:0 0 4px;font:400 clamp(28px,8vw,34px)/1.12 var(--f-head);color:var(--rose)}
.names{margin:0;font:400 clamp(30px,8.6vw,38px)/1.1 var(--f-head);color:var(--rose)}
.and{margin:0;font:italic 400 24px/1 var(--f-body);color:var(--gold)}
.small{margin:0;font:400 16px/1.5 var(--f-body);color:var(--muted)}
.it{font-style:italic}
.body{margin:0;font:400 17px/1.6 var(--f-body);color:var(--ink)}
.caps{margin:0;font:400 12px/1.6 var(--f-head);letter-spacing:3px;text-transform:uppercase;color:var(--rose)}
.big{margin:0;font:500 22px/1.3 var(--f-body);color:var(--ink)}
.div{width:82%;height:auto;margin:8px 0}
.parents{margin-top:4px;display:flex;flex-direction:column;gap:16px;width:100%}
.parents div{display:flex;flex-direction:column;gap:3px}
.parents b{font:400 11px/1.5 var(--f-head);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.parents span{font:400 16px/1.4 var(--f-body);color:var(--ink)}
.parents span+b{margin-top:6px}

/* countdown: numbers sit on slowly turning mirror rosettes */
.count{display:flex;gap:8px;justify-content:center;margin:22px 0 4px}
.count div{display:flex;flex-direction:column;align-items:center;gap:6px}
.dial{position:relative;width:76px;height:76px;display:block}
.dial img{width:100%;height:100%;object-fit:contain;animation:turn 40s linear infinite}
.count div:nth-child(2) .dial img{animation-direction:reverse}
.dial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 24px/1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,245,238,.9)}
.count i{font:400 11px/1 var(--f-head);letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-style:normal}

/* timeline */
.tl{list-style:none;margin:4px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.tl li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0 14px;position:relative}
.tl li+li:before{content:"";position:absolute;top:-4px;left:50%;width:40%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(192,138,108,.6),transparent)}
.tl .ic{height:64px;width:auto;max-width:90px;object-fit:contain}
.tl .tm{font:400 13px/1.3 var(--f-head);letter-spacing:2.5px;color:var(--gold);text-transform:uppercase}
.tl .tt{font:400 22px/1.2 var(--f-head);color:var(--rose)}
.tl .tv{font:400 16px/1.4 var(--f-body);color:var(--ink)}
.tl .tw{font:italic 400 15px/1.4 var(--f-body);color:var(--muted)}
.lnk{font:400 11px/1 var(--f-head);letter-spacing:2.5px;text-transform:uppercase;color:var(--rose);text-decoration:none;border-bottom:1px solid var(--gold);padding:6px 0 4px}

.venue{width:116%;max-width:none;height:auto;margin:4px -8% 0;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.pill{display:inline-block;margin-top:10px;padding:13px 24px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(255,251,246,.85);color:var(--rose);text-decoration:none;cursor:pointer;
  font:400 12px/1 var(--f-head);letter-spacing:2.5px;text-transform:uppercase;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 2px 6px rgba(110,55,45,.12)}
.pill.solid{position:relative;overflow:hidden;color:#fff;border-color:#b77462;background:var(--rg);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;text-shadow:0 1px 2px rgba(90,40,30,.45);font-size:13px;padding:16px 28px}

.dress{margin:0;width:100%;display:flex;flex-direction:column;gap:14px}
.dress div{display:flex;flex-direction:column;gap:2px}
.dress dt{font:400 19px/1.25 var(--f-head);color:var(--rose)}
.dress dd{margin:0;font:400 16px/1.45 var(--f-body);color:var(--ink)}

#story{display:flex;flex-direction:column;gap:18px;width:100%}
#story div{display:flex;flex-direction:column;gap:3px;align-items:center}
#story b{font:400 13px/1.3 var(--f-head);letter-spacing:3px;color:var(--gold)}
#story i{font:italic 500 20px/1.25 var(--f-body);color:var(--rose)}
#story span{font:400 16px/1.5 var(--f-body);color:var(--ink)}
#story div+div:before{content:"";width:9px;height:9px;transform:rotate(45deg);margin:0 0 10px;background:linear-gradient(135deg,#fff,#d7b3a6 45%,#fff 55%,#c79583);box-shadow:0 0 0 1px rgba(192,138,108,.6)}

/* rsvp */
.rl{list-style:none;margin:4px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}
.rl li{display:flex;flex-direction:column;gap:7px;padding:12px 0;border-bottom:1px solid rgba(192,138,108,.35)}
.rl .nm{font:400 20px/1.2 var(--f-head);color:var(--rose)}
.rl .wh{font:italic 400 15px/1.3 var(--f-body);color:var(--muted)}
.rl .opts{display:flex;flex-direction:column;gap:7px}
.rl .opts button{border:1.5px solid var(--gold);background:rgba(255,251,246,.85);color:var(--ink);font:400 12px/1 var(--f-head);letter-spacing:2px;text-transform:uppercase;padding:12px 10px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7)}
.rl .opts button.on{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
textarea{width:100%;margin-top:12px;border:1px solid rgba(192,138,108,.55);background:rgba(255,252,248,.85);border-radius:14px;padding:12px;font:400 16px/1.4 var(--f-body);color:var(--ink);resize:vertical}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* closing */
.end{position:relative;padding:70px 24px 90px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.end .med{width:132px}
.end .med span{font-size:38px}
.end .small{font-size:19px;color:var(--ink)}

/* hanging latkans sway */
.latkan{position:absolute;top:calc(var(--k)*40);width:30px;height:auto;z-index:4;transform-origin:50% 0;animation:sway 4.6s ease-in-out infinite;filter:drop-shadow(0 6px 6px rgba(110,55,45,.22))}
.latkan.l{left:calc(var(--k)*215)}
.latkan.r{right:calc(var(--k)*215);animation-delay:-2.3s;animation-duration:5.2s}
.end .latkan{top:0}
.end .latkan.l{left:16%}.end .latkan.r{right:16%}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

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

/* ---------- motion: everything lifts off the page ---------- */
.rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv .in>*{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rv.in .in>*{opacity:1;transform:none}
.rv .rosette,.rv .med{filter:drop-shadow(0 0 0 rgba(110,55,45,0));transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.6s ease}
.rv.in .rosette,.rv.in .med{filter:drop-shadow(0 8px 9px rgba(110,55,45,.28))}
.tl li{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.tl li.on{opacity:1;transform:none}
.tl .ic{filter:drop-shadow(0 0 0 rgba(110,55,45,0));transform:translateY(6px) scale(.9);transition:filter 1.4s ease .2s,transform 1.2s cubic-bezier(.2,.8,.2,1) .1s}
.tl li.on .ic{filter:drop-shadow(0 8px 8px rgba(110,55,45,.25));transform:none}

#snd{position:fixed;right:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:30;width:38px;height:38px;border-radius:50%;border:1px solid rgba(192,138,108,.7);background:rgba(255,250,245,.85);color:var(--rose);font-size:15px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s}
body.opened #snd{opacity:1;pointer-events:auto}
#snd.off{opacity:.5;text-decoration:line-through}
@media (prefers-reduced-motion: reduce){.rv,.rv .in>*,.tl li{opacity:1;transform:none;transition:none}.rosette,.dial img,.latkan,.tap{animation:none}}

/* ================= the full-invite kit (../_full/fx.css) in mirror work =================
   No pearls here: the ring round every card, photo, the film and the scratch card is a band of
   little mirror tiles set in rose-gold grout, and the same specular band (--g) that sweeps the
   arches sweeps those tiles too. Cards are ivory glass; buttons are the rose-gold pill. */
:root{
  --fx-ink:#5b3b37; --fx-muted:#8e6c66; --fx-accent:#b36f5e; --fx-accent-2:#c08a6c; --fx-soft:#b36f5e; --fx-err:#a2453a;
  --fx-head:"EB Garamond",Georgia,serif; --fx-caps-font:"Marcellus",Georgia,serif;
  --fx-card:linear-gradient(160deg,rgba(255,255,255,.96),rgba(250,241,234,.94) 60%,rgba(244,232,224,.94));
  --fx-line:rgba(192,138,108,.55);
  --fx-edge-w:7px; --fx-radius:12px;
  --fx-shadow:0 6px 16px rgba(110,55,45,.12); --fx-shadow-lg:0 12px 26px rgba(110,55,45,.22);
  --fx-btn:linear-gradient(160deg,#fffdfb,#f6ebe3); --fx-btn-ink:#b36f5e;
  --fx-on:linear-gradient(180deg,#c47f6c,#a3604f); --fx-on-ink:#fff; --fx-on-line:#b77462;
  --fx-field:rgba(255,252,248,.88);
  --fx-card-solid:#fdf8f2; --fx-langs-bg:rgba(255,250,245,.9); --fx-langs-ink:#b36f5e;
  --fx-foil-1:#8f9ba2; --fx-foil-2:#dfe5e8; --fx-foil-3:#ffffff; --fx-foil-dots:#e9c2b0; --fx-foil-ink:rgba(110,55,45,.85); --fx-scr-shape:oval;
  --fx-lb-bg:rgba(60,34,30,.94); --fx-lb-ink:#fbeee6;
}
/* the mirror-tile ring: grout lines over silvered tiles, plus the moving specular band */
:root,.mir{
  --fx-edge:linear-gradient(118deg,transparent calc(var(--g)*1% - 16%),rgba(255,255,255,.95) calc(var(--g)*1%),transparent calc(var(--g)*1% + 16%)),
    linear-gradient(90deg,#b98270 0 1.3px,transparent 1.3px) 0 0/8px 8px,
    linear-gradient(0deg,#b98270 0 1.3px,transparent 1.3px) 0 0/8px 8px,
    linear-gradient(135deg,#ffffff 0 22%,#c3cdd2 42%,#f5f8f9 55%,#9eacb3 78%,#e6ecef) 0 0/8px 8px,
    #d9a58f;
}
.fx-h{margin:0 0 4px}
.mir .fx-card{padding:18px 18px 16px}
.fx-ch{font:400 21px/1.2 var(--f-head);color:var(--rose)}
.fx-cb{font:400 16px/1.45 var(--f-body)}
.fx-cb strong{font-family:var(--f-head);color:var(--gold)}
.fx-caps{font-family:var(--f-head);color:var(--rose);letter-spacing:2.5px;font-size:11.5px}
.fx-lnk{font:400 11px/1.2 var(--f-head);letter-spacing:2.5px;color:var(--rose);border-bottom-color:var(--gold)}
/* every kit button is the template's rose-gold pill, its sheen riding the same --g band */
.fx-btn{border:1.5px solid #9c5a4a;color:#fff;background:linear-gradient(100deg,#86463a 0%,#a8634f 24%,#cf957f 42%,#9e5b49 60%,#b9765f 80%,#86463a 100%);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;text-shadow:0 1px 2px rgba(70,25,18,.7);
  font:400 12.5px/1 var(--f-head);letter-spacing:2.2px;padding:15px 24px;white-space:normal;line-height:1.25;max-width:100%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 4px 10px rgba(110,55,45,.2)}
.fx-card .fx-btn{padding:12px 14px;font-size:11.5px;letter-spacing:1px;white-space:nowrap}
.fx-opts button{font:italic 400 16px/1.1 var(--f-body);color:var(--ink);border-color:var(--gold);white-space:normal;padding:11px 14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7)}
.fx-opts button.on{box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 3px 8px rgba(110,55,45,.25)}
.fx-qL{font:400 20px/1.25 var(--f-head);color:var(--rose)}
.fx-q{border-bottom-color:rgba(192,138,108,.35)}
.fx-field,.fx-sec textarea,#fxRForm textarea{font-family:var(--f-body);font-size:16px;margin-top:0}
#fxSend{margin-top:12px}
/* the narrow mirror arch: kit pieces fit inside its glass, never over the mirror bands */
.mir .fx-looks{width:100%;margin:4px 0 0;padding:6px 2px 14px}
.mir .fx-look{flex-basis:88%}
.mir .fx-film{width:100%}
.mir .fx-scr{width:100%;max-width:260px}
.mir .fx-gal{gap:9px}
.mir .fx-shot{padding:6px}
.fx-shot figcaption{font-family:var(--f-body);font-size:14px}
.fx-day:before{left:74px}
.fx-day li{grid-template-columns:64px 1fr;gap:22px}
.fx-day li:before{left:69px;background:radial-gradient(circle at 35% 35%,#fff,#c3cdd2 55%,#8f9ba2);box-shadow:0 0 0 2px #d9a58f,0 2px 3px rgba(110,55,45,.3);border-radius:2px;transform:rotate(45deg);width:10px;height:10px}
.fx-day b{font:400 12.5px/1.6 var(--f-head);letter-spacing:.3px;color:var(--gold)}
.fx-dt{font:400 18px/1.2 var(--f-head);color:var(--rose)}
.fx-db{font:italic 400 15px/1.35 var(--f-body)}
/* scratch card: a jharokha of silvered glass, the foil a mirror */
.fx-scr{border-radius:50% 50% 14px 14px / 30% 30% 14px 14px}
#fxScr{background:linear-gradient(160deg,#fffdfb,#f1e2d8)}
.fx-scrUnder{background:radial-gradient(110% 70% at 50% 30%,#fffdf9,#f7ece4)}
.fx-scrD{font-family:var(--f-head);color:var(--rose);font-size:clamp(30px,10vw,40px)}
.fx-scrT{font-family:var(--f-body)}
.fx-scrP{font-family:var(--f-body);font-size:16px}
.fx-filmPlay{background:rgba(255,250,246,.9)}
.fx-filmPlay span{border-left-color:var(--rose)}
.fx-wish{background:var(--fx-card)}
.fx-wish blockquote{font:italic 400 17px/1.45 var(--f-body)}
.fx-wish figcaption{font-family:var(--f-head);color:var(--rose)}
.fx-ivN{font:400 18px/1.5 var(--f-body)}
.fx-ivL{font-family:var(--f-body);color:var(--rose)}
.fx-upi code{font:500 15px/1.3 var(--f-body);word-break:break-all}
.fx-invoc{margin:0}
.fx-invoc img#fxInvImg{width:min(30vw,116px)}
.fx-invL{color:var(--rose);font-size:20px}
.fx-invV{font-size:14px}
.fx-invoc .div{width:82%;margin:8px 0 0}
.tl li [data-fx-cal]{display:flex;justify-content:center}
.mir .fx-cal{margin-top:10px}

/* story chapters with a photo: the picture in a small jharokha framed by mirror tiles */
#story .chImg{position:relative;margin:0 0 8px;width:78%;max-width:220px;aspect-ratio:4/5;border-radius:50% 50% 10px 10px / 32% 32% 10px 10px;padding:8px;box-sizing:border-box;
  background:linear-gradient(160deg,#fffdfb,#f1e2d8);box-shadow:0 10px 22px rgba(110,55,45,.2)}
#story .chImg:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:7px;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{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
#story .ch.has-img + .ch:before,#story .ch + .ch:before{content:"";width:9px;height:9px;transform:rotate(45deg);margin:0 0 10px;background:linear-gradient(135deg,#fff,#d7b3a6 45%,#fff 55%,#c79583);box-shadow:0 0 0 1px rgba(192,138,108,.6)}

/* Devanagari: Latin keeps Marcellus/Garamond, the letters come from Noto; no tracking, no capitals, no fake italic */
.lang-hi{--f-head:"Marcellus","Noto Serif Devanagari",Georgia,serif;--f-body:"EB Garamond","Noto Serif Devanagari",Georgia,serif;
  --fx-head:"EB Garamond","Noto Serif Devanagari",Georgia,serif;--fx-caps-font:"Marcellus","Noto Serif Devanagari",Georgia,serif}
.lang-hi .tap,.lang-hi .cue,.lang-hi .heroText .date,.lang-hi .caps,.lang-hi .parents b,.lang-hi .count i,.lang-hi .tl .tm,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .pill,.lang-hi .fx-btn,.lang-hi #story b,.lang-hi .fx-caps,.lang-hi .fx-wish figcaption,.lang-hi .fx-day b{letter-spacing:.3px;text-transform:none}
.lang-hi .caps,.lang-hi .parents b,.lang-hi .count i,.lang-hi .tl .tm,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .fx-caps,.lang-hi .fx-day b{font-size:14px}
.lang-hi .fx-btn,.lang-hi .pill,.lang-hi .tap,.lang-hi #fxSend{font-size:16px}
.lang-hi .it,.lang-hi .and,.lang-hi .heroText .pre,.lang-hi .heroText .city,.lang-hi .tl .tw,.lang-hi #story i,.lang-hi .fx-opts button,.lang-hi .fx-wish blockquote,.lang-hi .fx-db{font-style:normal}
.lang-hi .heroText h1,.lang-hi .names,.lang-hi .sec{line-height:1.35}
.lang-hi .heroText h1 span{padding-top:.08em}
/* mirror work sits in a rose-gold channel: a metal rim outside and inside the tile band */
.mir .fx-card,.mir .fx-shot{box-shadow:0 0 0 1px #c08a6c,inset 0 0 0 8px #c08a6c,var(--fx-shadow)}
/* the scratch heading sits lower, where the arch is wide enough for it */
#fxScrSec{padding-top:calc(var(--k)*215 + 34px)}
/* wide kit headings wrap before they reach the curve of the arch */
.mir .in > .fx-h{padding:0 12px}
.lang-hi .fx-card .fx-btn{font-size:13.5px;padding:12px 12px}
.lang-hi .mir .in > .sec{padding:0 12px}
.mir.fx-sec .in > .small{padding:0 14px}