/* Couture Lake: an invitation of ivory satin and heavy 3D pearl and gold
   beadwork. The opening is a real camera move (a generated clip) through the
   pearl arch onto the lake palace; everything placed on top (monogram, names,
   wisteria, crystals, water shimmer, pearl glints) is code-animated; every word
   is live data. */
:root{
  --satin:#f3ebde; --satin2:#eadfcd; --ink:#4e3b2a; --muted:#7d6650; --gold:#b08a4f; --gold2:#d9bb83; --gold3:#7c5a2c; --blush:#c98f80; --sage:#6f7a5a;
  --gt:linear-gradient(100deg,#7c5a2c 0%,#a9813f 20%,#e6cf98 38%,#9a7333 55%,#c6a35e 75%,#7c5a2c 100%);
  --f-head:"Cormorant", Georgia, serif;
  --f-didone:"Bodoni Moda", "Didot", Georgia, serif;
  --col:min(100vw, 480px);
  --g:50;
}
*{box-sizing:border-box}
html,body{margin:0;background:#e6dac6;color:var(--ink);font-family:var(--f-head);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 70% at 50% 0%,#f1e8da,#ddcfb8 80%) fixed}
body.locked{overflow:hidden;height:100%}
#page{position:relative;width:var(--col);margin:0 auto;overflow:hidden;box-shadow:0 0 70px rgba(90,65,35,.18);
  background:linear-gradient(rgba(246,239,228,.5),rgba(246,239,228,.5)),var(--satin) url(art/satin.jpg) center top/100% auto repeat-y}
section{position:relative;width:100%}
img{display:block;max-width:100%}

/* ---------- hero = gate ---------- */
.hero{height:100vh;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;background:var(--satin2) url(art/gate.jpg) center/cover}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.still{will-change:opacity}
/* a pearl string seams the lake panel onto the satin pages */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 45% 40%,#fffef9 0 1.6px,#efe2c8 2.7px,#b9996a 3.9px,transparent 4.5px) 0 50%/10px 11px repeat-x,linear-gradient(#e9dcc4,#e9dcc4) 0 50%/100% 3px no-repeat;
  filter:drop-shadow(0 2px 2px rgba(80,55,25,.35))}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,transparent calc(var(--g)*1% - 24%),rgba(255,250,238,.5) calc(var(--g)*1% - 6%),#fff calc(var(--g)*1%),rgba(255,250,238,.5) calc(var(--g)*1% + 6%),transparent calc(var(--g)*1% + 24%))}
.shimmer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen}
.hero .shimmer{transition:opacity 1.2s ease}
body.playing .hero .shimmer{opacity:0;transition:opacity .3s}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.glint{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 9%,rgba(255,246,222,.85) 20%,transparent 56%),linear-gradient(90deg,transparent 46%,rgba(255,248,228,.95) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(255,248,228,.95) 50%,transparent 54%);
  animation:glint 3.4s ease-in-out infinite}
@keyframes glint{0%,68%,100%{opacity:0;transform:scale(.2) rotate(0)}82%{opacity:1;transform:scale(1) rotate(45deg)}}
body.playing .hero .spk{opacity:0}
.hero .spk{transition:opacity 1s ease}

/* wisteria strands hang in front of the panel and sway; crystals drift off them */
.wist{position:absolute;inset:0;pointer-events:none;z-index:3}
.wist img{position:absolute;top:-2%;transform-origin:50% 0;filter:drop-shadow(0 8px 8px rgba(80,55,25,.28));will-change:transform}
body.playing .wist img{opacity:0;transition:opacity .5s ease}

/* the monogram sits in the empty satin of the panel */
.mono{position:absolute;left:50%;top:var(--my,45%);transform:translate(-50%,-50%);z-index:5;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.mono .orn{width:calc(var(--mw,170px)*.42);height:auto;filter:drop-shadow(0 2px 2px rgba(80,55,25,.3))}
.mono .orn.flip{transform:scaleY(-1)}
.mono span{font:400 var(--ms,74px)/1 var(--f-didone);letter-spacing:-1px;white-space:nowrap;
  background:var(--gt);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,250,238,.95)) drop-shadow(0 3px 4px rgba(90,60,25,.35))}
.mono span em{font:italic 400 .62em/1 var(--f-didone);margin:0 .02em;position:relative;top:-.08em}
.tap{position:absolute;left:50%;top:var(--ty,58%);transform:translateX(-50%);margin:0;z-index:5;padding:12px 26px;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:rgba(250,244,233,.86);box-shadow:0 4px 18px rgba(90,60,25,.2);
  font:500 13px/1 var(--f-didone);letter-spacing:4px;text-transform:uppercase;color:var(--gold3);animation:breathe 2.4s ease-in-out infinite}
.tap:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:4px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#fffdf6 0 1.6px,#d6bf96 2.3px,transparent 2.9px) 0 0/7px 7px;
  -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)}
@keyframes breathe{50%{opacity:.6;transform:translateX(-50%) scale(.97)}}
body.opened .mono{pointer-events:none}
body.opened .tap{opacity:0;animation:none;transition:opacity .4s ease}

.heroText:before{content:"";position:absolute;left:-6%;right:-6%;top:-14%;bottom:-10%;z-index:-1;background:radial-gradient(closest-side,rgba(250,245,236,.62),rgba(250,245,236,.3) 60%,transparent);opacity:var(--glow,1)}
.heroText{position:absolute;left:12%;right:12%;top:var(--nt,12%);text-align:center;z-index:3;pointer-events:none;visibility:hidden}
.heroText .pre{margin:0 0 6px;font:italic 500 20px/1.3 var(--f-head);color:var(--muted)}
.heroText h1{margin:0;font:500 clamp(46px,13.4vw,58px)/1.0 var(--f-head);color:var(--gold3)}
.heroText h1 span{display:block;background:var(--gt);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em .04em}
.heroText h1 .amp{font:italic 500 .6em/1.25 var(--f-head)}
.heroText .date{margin:16px 0 0;font:500 14px/1.3 var(--f-didone);letter-spacing:3.5px;color:var(--ink)}
.heroText .city{margin:6px 0 0;font:italic 500 19px/1.2 var(--f-head);color:var(--muted)}
.heroText .date,.heroText .city{text-shadow:0 0 12px rgba(250,244,233,.9)}
.cue{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;z-index:5;opacity:0;pointer-events:none;
  font:500 11px/1 var(--f-didone);letter-spacing:4px;text-transform:uppercase;color:#fffaf0;text-shadow:0 1px 4px rgba(60,40,20,.7)}
.cue:after{content:"";display:block;width:1px;height:22px;margin:8px auto 0;background:linear-gradient(#fffaf0,transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- satin pages under a small beaded arch ---------- */
.pg{padding:0 26px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.crown{width:76%;margin:18px auto 2px;opacity:0;transform:translateY(-18px) scale(.96);filter:drop-shadow(0 0 0 rgba(80,55,25,0));
  transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1),filter 1.6s ease}
.pg.in .crown{opacity:1;transform:none;filter:drop-shadow(0 8px 8px rgba(80,55,25,.22))}
.pg > .crown + *{margin-top:-7%}
.corner{position:absolute;bottom:4px;width:30%;max-width:140px;pointer-events:none;opacity:0;transform-origin:0 100%;transition:opacity 1.2s ease .3s,transform 1.6s cubic-bezier(.2,.8,.2,1) .3s}
.corner.l{left:-6px;transform:translate(-30%,20%) rotate(-8deg)}
.corner.r{right:-6px;transform-origin:50% 100%;transform:scaleX(-1) translate(-30%,20%) rotate(-8deg)}
.pg.in .corner{opacity:1;filter:drop-shadow(0 6px 6px rgba(80,55,25,.22))}
.pg.in .corner.l{transform:none;animation:sway 6s ease-in-out 1.9s infinite}
.pg.in .corner.r{transform:scaleX(-1);animation:swayR 6.8s ease-in-out 1.9s infinite}
@keyframes sway{50%{transform:rotate(1.6deg)}}
@keyframes swayR{50%{transform:scaleX(-1) rotate(1.6deg)}}
.pg:has(.corner){padding-bottom:140px}

.small{margin:0;font:500 18px/1.5 var(--f-head);color:var(--muted)}
.it{font-style:italic}
.caps{margin:0;font:500 12px/1.6 var(--f-didone);letter-spacing:3px;text-transform:uppercase;color:var(--gold3)}
.names{margin:0;font:500 clamp(42px,12.5vw,54px)/1.08 var(--f-head);background:var(--gt);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em}
.and{margin:-4px 0;font:italic 500 26px/1 var(--f-head);color:var(--gold)}
.sec{margin:0 0 6px;font:500 clamp(32px,9vw,38px)/1.12 var(--f-head);color:var(--gold3);letter-spacing:.5px}
.big{margin:0;font:500 24px/1.3 var(--f-head);color:var(--ink)}
.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 10.5px/1.5 var(--f-didone);letter-spacing:2px;text-transform:uppercase;color:var(--gold3)}
.parents span{font:500 17px/1.35 var(--f-head);color:var(--ink)}
.pdiv{width:74%;margin:6px 0}
.lotus{width:92px}

/* beadwork rises off the satin and its shadow grows */
.rise{opacity:0;transform:translateY(22px) scale(.94);filter:drop-shadow(0 0 0 rgba(80,55,25,0));transition:opacity 1.3s ease .2s,transform 1.6s cubic-bezier(.2,.8,.2,1) .2s,filter 1.6s ease .2s}
.in .rise{opacity:1;transform:none;filter:drop-shadow(0 7px 7px rgba(80,55,25,.22))}

/* ---------- framed satin panels (generated art, live text on top) ---------- */
.framed .bg,.band .bg{display:block;width:100%;height:auto;opacity:0;transform:translateY(28px) scale(.97);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)}
.framed.in .bg,.band.in .bg{opacity:1;transform:none}
.framed .inner{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;opacity:0;transform:translateY(14px);transition:opacity 1.2s ease .9s,transform 1.2s ease .9s}
.framed.in .inner{opacity:1;transform:none}
.framed h2{margin:0;font:500 clamp(32px,9vw,40px)/1.12 var(--f-head);color:var(--gold3)}
.framed p{margin:0;font:500 19px/1.55 var(--f-head);color:var(--ink)}
.framed .bg{-webkit-mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent)}
.welcome .inner{left:17%;right:17%;top:15%;bottom:15%}
.welcome .lotus{width:84px;margin-bottom:4px}
.venue .shimmer{z-index:1}
.venue .inner{left:12%;right:12%;top:59%;bottom:5%;gap:4px;z-index:2}
.venue h2{font-size:clamp(30px,8.6vw,38px)}
.band .bg{-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.band{margin:-10px 0}
#story{display:flex;flex-direction:column;gap:22px;margin-top:4px;padding:0 6%}
#story div b{display:block;font:500 12px/1.4 var(--f-didone);letter-spacing:3px;color:var(--gold3)}
#story div i{display:block;font:italic 600 21px/1.2 var(--f-head);margin:2px 0;color:var(--ink)}
#story div span{font:500 16px/1.4 var(--f-head);color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- countdown: beaded medallions ---------- */
.count{display:flex;gap:8px;justify-content:center;margin-top:8px}
.count div{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(18px) scale(.88);transition:opacity 1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.in .count div{opacity:1;transform:none}
.in .count div:nth-child(2){transition-delay:.12s}.in .count div:nth-child(3){transition-delay:.24s}.in .count div:nth-child(4){transition-delay:.36s}
.med{position:relative;width:min(20vw,86px);aspect-ratio:1;display:block;filter:drop-shadow(0 6px 7px rgba(80,55,25,.25))}
.med img{width:100%;height:100%;object-fit:contain}
.med b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 25px/1 var(--f-didone);color:var(--gold3);font-variant-numeric:tabular-nums}
.count i{font:500 11px/1 var(--f-didone);letter-spacing:2px;text-transform:uppercase;color:var(--gold3);font-style:normal}

/* ---------- timeline on a pearl string ---------- */
.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;width:8px;margin-left:-4px;
  background:radial-gradient(circle at 50% 50%,#fffdf6 0 1.4px,#e7d6b8 2.4px,#b9996a 3.4px,transparent 3.9px) 50% 0/8px 9px repeat-y}
.tl li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:16px 0}
.tl .ic{justify-self:end;width:auto;max-width:92px;max-height:92px}
.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 13px/1.2 var(--f-didone);letter-spacing:1.5px;color:var(--muted)}
.tl .tt{font:600 25px/1.1 var(--f-head);color:var(--gold3)}
.tl .tv{font:italic 500 16px/1.35 var(--f-head);color:var(--ink)}
.tl .tw{font:italic 500 16px/1.35 var(--f-head);color:var(--blush)}
.lnk{font:500 10.5px/1 var(--f-didone);letter-spacing:2px;text-transform:uppercase;color:var(--gold3);text-decoration:none;border-bottom:1px solid var(--gold2);padding-bottom:3px;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 3px 3px rgba(80,55,25,.35))}
.tl li .ic{opacity:0;transform:translateY(16px) scale(.88);filter:drop-shadow(0 0 0 rgba(80,55,25,0));transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s ease}
.tl li .tx{opacity:0;transform:translateY(12px);transition:opacity .9s ease .1s,transform .9s ease .1s}
.tl li.on .ic{opacity:1;transform:none;filter:drop-shadow(0 7px 6px rgba(80,55,25,.25))}
.tl li.on .tx{opacity:1;transform:none}

/* ---------- pearl-beaded buttons ---------- */
.pearl{position:relative;display:inline-block;margin-top:10px;padding:15px 30px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,#fbf6ec,#efe3cd);box-shadow:inset 0 0 0 5px rgba(255,255,255,0),inset 0 0 0 6px rgba(176,138,79,.55),0 5px 14px rgba(90,60,25,.2);
  font:500 12px/1 var(--f-didone);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold3)}
.pearl:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:4.5px;pointer-events:none;
  background:radial-gradient(circle at 45% 40%,#fffef9 0 1.3px,#efe2c8 2.2px,#bb9b68 3.1px,transparent 3.6px) 0 0/7.5px 7.5px;
  -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)}
.pearl.send{padding:18px 34px;font-size:13px}

/* ---------- 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 solid rgba(176,138,79,.3)}
.rl .nm{font:600 23px/1.2 var(--f-head);color:var(--gold3)}
.rl .wh{font:italic 500 16px/1.3 var(--f-head);color:var(--muted)}
.rl .opts{display:flex;gap:8px;justify-content:center}
.rl .opts button{position:relative;border:1.5px solid rgba(176,138,79,.7);background:rgba(252,248,240,.8);color:var(--ink);font:italic 500 18px/1 var(--f-head);white-space:nowrap;padding:12px 17px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.rl .opts button.on{background:linear-gradient(180deg,#c9a660,#9c7638);border-color:#e8d3a2;color:#fffaf0;box-shadow:0 3px 9px rgba(90,60,25,.3),inset 0 0 0 2px rgba(255,250,235,.4)}
textarea{width:100%;margin-top:14px;border:1px solid rgba(176,138,79,.45);background:rgba(252,248,240,.75);border-radius:14px;padding:12px;font:500 18px/1.4 var(--f-head);color:var(--ink);resize:vertical}
.sign{margin:0;font:italic 500 32px/1.2 var(--f-head);color:var(--gold3)}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- section reveal: lift up ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

#bits{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#bits img{position:absolute;left:0;top:0;width:13px;opacity:.95;will-change:transform;filter:drop-shadow(0 2px 2px rgba(80,55,25,.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:1px solid var(--gold2);background:rgba(250,244,233,.85);color:var(--gold3);font-size:15px;cursor:pointer;box-shadow:0 2px 8px rgba(90,60,25,.2)}
#snd.off{opacity:.55;text-decoration:line-through}

@media (prefers-reduced-motion: reduce){
  .rv,.rise,.crown,.corner,.framed .bg,.band .bg,.framed .inner,.count div,.tl li .ic,.tl li .tx{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .corner.r{transform:scaleX(-1)!important}
  .tap,.glint,.cue:after{animation:none!important}
}
#story .ch:not(.has-img):before{content:"";display:block;width:26px;height:24px;margin:0 auto 6px;background:url(art/b-5.webp) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(80,55,25,.25))}

/* ================= the full-invite kit (../_full/fx.css) in this template's material =================
   Ivory Lake IS the kit's default look (pearl on satin), so only small fits live here. */
.fx-h{margin:0 0 6px}
.tl .tx [data-fx-cal]{display:flex}
.tl li:nth-of-type(even) .tx [data-fx-cal]{justify-content:flex-end}
.fx-sec .fx-btn.pearl{box-shadow:inset 0 0 0 5px rgba(255,255,255,0),inset 0 0 0 6px rgba(176,138,79,.55),0 5px 14px rgba(90,60,25,.2)}
#fxScr{background:linear-gradient(180deg,#fbf6ec,#e9dcc2)}
.fx-scrUnder{background:radial-gradient(closest-side,#fffaf0,#f3e8d4)}
.fx-invoc{margin-top:26px}

/* story chapters with a photo: an oval pearl-framed picture beside the words, sides alternate */
#story .ch{display:flex;flex-direction:column;align-items:center;gap:12px}
#story .ch.has-img:before{display:none}
#story .chImg{position:relative;margin:0;width:62%;max-width:240px;aspect-ratio:4/5;border-radius:50%/42%;padding:8px;
  background:linear-gradient(180deg,#fbf6ec,#e9dcc2);box-shadow:0 10px 22px rgba(90,60,25,.22);
  opacity:0;transform:translateY(22px) scale(.94) rotate(-2deg);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
#story .ch.alt .chImg{transform:translateY(22px) scale(.94) rotate(2deg)}
#story .chImg:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:5px;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 45% 40%,#fffef9 0 1.5px,#efe2c8 2.4px,#bb9b68 3.3px,transparent 3.9px) 0 0/8px 8px;
  -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}
.in #story .chImg{opacity:1;transform:rotate(-1.5deg)}
.in #story .ch.alt .chImg{transform:rotate(1.5deg)}
#story .chTx b,#story .chTx i,#story .chTx span{display:block}
#story .chTx span{-webkit-line-clamp:5}
@media (prefers-reduced-motion: reduce){#story .chImg{opacity:1!important;transition:none!important}}

/* Devanagari: no wide letter-spacing or upper-casing; a font that has the letters */
.lang-hi{--f-head:Georgia,"Noto Serif Devanagari","Cormorant",Georgia,serif}
.lang-hi .caps,.lang-hi .tap,.lang-hi .cue,.lang-hi .count i,.lang-hi .lnk,.lang-hi .pearl,.lang-hi .parents b,.lang-hi #story div b,.lang-hi .heroText .date,.lang-hi .wish figcaption{letter-spacing:.3px;text-transform:none;font-family:Georgia,"Noto Serif Devanagari",var(--f-didone)}
.lang-hi .caps,.lang-hi .lnk{font-size:14px}
.lang-hi .pearl{font-size:15px}
.lang-hi .heroText h1,.lang-hi .names{line-height:1.3}
.lang-hi .sec{line-height:1.35}

/* Devanagari has no true italic; the browser fakes a slant */
.lang-hi .it,.lang-hi .qH,.lang-hi .q .opts button,.lang-hi .rl .wh,.lang-hi .tl .tv,.lang-hi .tl .tw,.lang-hi .ivL,.lang-hi .heroText .pre,.lang-hi .heroText .city,.lang-hi .wish blockquote,.lang-hi .look .lookT,.lang-hi #story div i,.lang-hi .day .db{font-style:normal}

/* Chrome misplaces Devanagari vowel signs inside background-clip:text, so Hindi names are solid antique gold */
.lang-hi .names,.lang-hi .heroText h1 span,.lang-hi .mono span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#8a6532}