/* Couture Peacock: an olive-velvet couture invitation. The peacock's tail opening
   is real motion (a generated clip); every pearl, crystal and zardozi piece on top
   is a transparent sprite animated in code; every word is live data. */
:root{
  --vel:#2e2613; --deep:#1c170b; --gold:#d6b679; --gold2:#f1dfb0; --gold3:#a8874e; --pearl:#efe6d4; --muted:#c9b48a;
  --f-head:"Cormorant Garamond", Georgia, serif;
  --f-caps:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --col:min(100vw, 480px); --valH:calc(var(--col) * .5 + 4px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--deep);color:var(--gold2);font-family:var(--f-head);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 0%,#3a3218,var(--deep) 70%) fixed}
body.locked{overflow:hidden;height:100%}
#page{width:var(--col);margin:0 auto;background:var(--vel) url(art/velvet.jpg) center top/100% auto repeat-y;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.55)}
section{position:relative;width:100%}
img{max-width:100%}

/* ---------- gate: the hero's first frame (the panel) shows through ---------- */
#gate{position:fixed;inset:0;z-index:20;overflow:hidden;cursor:pointer}
#gate:before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 45%,transparent 45%,rgba(15,12,4,.4));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,236,190,.14) 50%,transparent);animation:sheen 6.5s ease-in-out infinite}
@keyframes sheen{0%{left:-70%}60%,100%{left:120%}}
.monoBox{position:absolute;left:50%;top:var(--my,40%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.monoBox .fl{width:min(18vw,78px);height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.monoBox .fl.bot{transform:scaleY(-1)}
.mono{margin:0;font:500 clamp(54px,17vw,76px)/1 var(--f-head);color:var(--gold);letter-spacing:1px;white-space:nowrap;
  background:linear-gradient(100deg,#b8955a 0%,#f3dfa8 calc(var(--g,50)*1% - 12%),#fff6dc calc(var(--g,50)*1%),#f3dfa8 calc(var(--g,50)*1% + 12%),#b8955a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 1.5px rgba(10,8,2,.7)) drop-shadow(0 0 10px rgba(240,215,160,.18))}
.mono small{font-size:.42em;vertical-align:.55em;margin:0 .04em;font-style:italic}
.tap{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:13px 26px;border-radius:999px;border:1px solid rgba(241,223,176,.7);background:rgba(28,23,10,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;font:400 15px/1 var(--f-caps);letter-spacing:3px;color:var(--gold2);cursor:pointer;box-shadow:0 0 0 3px rgba(214,182,121,.18),0 6px 16px rgba(0,0,0,.4);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}
#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.08);filter:blur(3px);transition:opacity .9s ease,transform 1s ease,filter .9s ease}
#gate.gone{display:none}
.glint{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0 9%,rgba(255,244,214,.85) 20%,transparent 56%),linear-gradient(90deg,transparent 47%,rgba(255,246,220,.95) 50%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(255,246,220,.95) 50%,transparent 53%);z-index:4}

/* ---------- hero ---------- */
.hero{height:100vh;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;background:#2a2311 url(art/tail-first.jpg) center/cover}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transition:filter 2.4s ease}
/* the light comes up on the open tail as the names rise */
body.named .heroV{filter:brightness(1.1) contrast(1.05) saturate(.92)}
.tailShine{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--ox,50%) var(--oy,90%),transparent calc(var(--r,0px) - 60px),rgba(255,244,215,.75) var(--r,0px),transparent calc(var(--r,0px) + 50px));
  -webkit-mask-image:url(art/tail-mask.webp);mask-image:url(art/tail-mask.webp);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
body.named .tailShine{opacity:1;transition:opacity 1.5s ease}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.spk img{position:absolute;left:0;top:0;width:22px;margin:-11px 0 0 -11px}
.drops{position:absolute;inset:0;pointer-events:none;z-index:3}
.drops img{position:absolute;top:-6px;height:auto;transform-origin:50% 0;opacity:0;filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))}
.heroText{position:absolute;left:50%;top:var(--ty,42%);width:var(--tw,64%);transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;visibility:hidden}
.heroText .pre{margin:0 0 6px;font:400 13px/1.3 var(--f-caps);letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
.heroText h1{margin:0;font:500 50px/1.02 var(--f-head);white-space:nowrap}
.heroText h1 span{display:block;padding:0 .04em;
  background:linear-gradient(100deg,#b8955a 0%,#f3dfa8 calc(var(--g,50)*1% - 14%),#fff7df calc(var(--g,50)*1%),#f3dfa8 calc(var(--g,50)*1% + 14%),#b8955a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.heroText h1 .amp{font:italic 500 .8em/1 var(--f-head)}
.heroText .date{margin:10px 0 0;font:400 16px/1.3 var(--f-caps);letter-spacing:1.5px;color:var(--gold2)}
.heroText .city{margin:4px 0 0;font:italic 500 18px/1.2 var(--f-head);color:var(--muted)}
.heroText .pre,.heroText h1,.heroText .date,.heroText .city{text-shadow:none;filter:drop-shadow(0 2px 2px rgba(8,6,1,.75))}

/* ---------- velvet pages ---------- */
.pageV{padding:var(--valH) 26px 60px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.val{position:absolute;left:-2%;top:-4px;width:104%;max-width:none;transform-origin:50% 0;z-index:2;pointer-events:none;filter:drop-shadow(0 7px 6px rgba(0,0,0,.4))}
.rv .val{opacity:0;transform:translateY(-26px);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.rv.in .val{opacity:1;transform:none;animation:vsway 6s ease-in-out 1.6s infinite}
@keyframes vsway{0%,100%{transform:skewX(0)}30%{transform:skewX(1.6deg)}70%{transform:skewX(-1.4deg)}}
.small{margin:0;font:400 17px/1.5 var(--f-head);color:var(--muted)}
.it{font-style:italic}
.caps{margin:0;font:400 13px/1.6 var(--f-caps);letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.names{margin:0;font:500 clamp(34px,10vw,44px)/1.1 var(--f-head);color:var(--gold2)}
.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(--gold2);letter-spacing:.5px}
.big{margin:0;font:500 24px/1.3 var(--f-head);color:var(--gold2)}
.divider{width:62%;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:400 12px/1.4 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.parents span{font:400 17px/1.35 var(--f-head);color:var(--pearl)}
.corner{position:absolute;width:30%;max-width:150px;pointer-events:none;z-index:1}
.corner.tl{left:-4px;top:calc(var(--valH) - 30px)}
.corner.tr{right:-4px;top:calc(var(--valH) - 30px);transform:scaleX(-1)}
.foot{position:relative;width:calc(100% + 52px);height:120px;margin:0 -26px -60px}
.foot .corner.bl{left:-4px;bottom:-4px;transform:scaleY(-1)}
.foot .corner.br{right:-4px;bottom:-4px;transform:scale(-1,-1)}

/* welcome: text above the embroidered spray */
.welcome{padding-bottom:0;gap:0}
.welcome .inner{padding:10px 8% 0;display:flex;flex-direction:column;gap:12px;z-index:2}
.welcome h2{margin:0;font:500 clamp(30px,8.6vw,38px)/1.15 var(--f-head);color:var(--gold2)}
.welcome p{margin:0;font:400 18px/1.55 var(--f-head);color:var(--pearl)}
.spray{width:calc(100% + 52px);max-width:none;margin:-36% -26px 0;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}

/* countdown medallions */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:calc(100% + 30px)}
.count div{display:flex;flex-direction:column;align-items:center;gap:8px}
.med{position:relative;width:100%;aspect-ratio:1;display:block}
.med img{width:100%;height:100%;object-fit:contain;display:block}
.med b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 28px/1 var(--f-head);color:var(--gold2);font-variant-numeric:tabular-nums}
.count i{font:400 12px/1 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-style:normal}

/* timeline */
.tl{list-style:none;margin:6px 0 0;padding:0;width:100%;position:relative}
.tl:before{content:"";position:absolute;left:50%;top:10px;bottom:10px;border-left:2px dotted rgba(214,182,121,.6)}
.tl li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:16px 0}
.tl li:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--vel);border:1.5px solid var(--gold)}
.tl .ic{justify-self:end;position:relative;width:96px;aspect-ratio:1;display:block}
.tl .ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tl .ic img.e{inset:22%;width:56%;height:56%}
.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 21px/1 var(--f-head);color:var(--gold2)}
.tl .tt{font:400 13px/1.4 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.tl .tv{font:italic 400 15px/1.35 var(--f-head);color:var(--muted)}
.tl .tw{font:italic 400 15px/1.35 var(--f-head);color:var(--pearl)}
.lnk{font:400 12px/1 var(--f-caps);letter-spacing:2px;text-transform:uppercase;color:var(--gold2);text-decoration:none;border-bottom:1px dotted var(--gold);padding-bottom:3px;margin-top:4px}
.tl .tx .lnk{align-self:flex-start}
.tl li:nth-of-type(even) .tx .lnk{align-self:flex-end}
.bead{position:absolute;left:50%;top:0;width:24px;height:24px;margin-left:-12px;z-index:3;pointer-events:none}
.bead img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.tl li .ic,.tl li .tx{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.tl li.on .ic{opacity:1;transform:none;filter:drop-shadow(0 7px 7px rgba(0,0,0,.4))}
.tl li.on .tx{opacity:1;transform:none}
.tl li.on:after{background:var(--gold)}

/* pictures stitched on the velvet */
.pic{width:calc(100% + 52px);max-width:none;margin:-6% -26px;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 58%,transparent);mask-image:radial-gradient(50% 50% at 50% 50%,#000 58%,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% 47% at 50% 50%,#000 70%,transparent);mask-image:radial-gradient(50% 47% at 50% 50%,#000 70%,transparent)}
.in .dress img.rise{filter:none}
.count div:nth-child(2) .rise,.dress img+img{transition-delay:.45s}

/* beaded pill buttons */
.bp{display:inline-block;margin-top:14px;padding:15px 30px;border-radius:999px;border:0;background:rgba(28,23,10,.45);color:var(--gold2);font:500 19px/1 var(--f-head);text-decoration:none;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 5px rgba(28,23,10,.5),inset 0 0 0 6.5px rgba(241,223,176,.55),0 6px 14px rgba(0,0,0,.35);position:relative}
.bp:before{content:"";position:absolute;inset:-5px;border-radius:999px;background:radial-gradient(circle,#f6ecd6 0 1.6px,transparent 2.2px) 0 0/9px 9px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:3px;opacity:.85;pointer-events:none}
.bp.solid{background:linear-gradient(180deg,#4a4020,#2a2410)}

/* story arch: the embroidered arch stretches with the chapters (crown on top, the pearl
   pillars and peacock feathers repeat down the sides, the flower bed closes it) */
.archS{--s:calc(var(--col) / 900);border-style:solid;border-width:calc(var(--s) * 700) calc(var(--s) * 150) calc(var(--s) * 240);
  border-image:url(art/arch.jpg) 700 150 240 round;padding:0 4px;
  /* the velvet inside the arch: the art's own centre, stretched (no tile seams) */
  background:url(art/arch.jpg) 50% 74.47% / 150% calc(100% * 1612 / 672) no-repeat;background-origin:padding-box;background-clip:padding-box;
  -webkit-mask-image:linear-gradient(transparent,#000 1.5%,#000 98.5%,transparent);mask-image:linear-gradient(transparent,#000 1.5%,#000 98.5%,transparent)}
.archS .inner{position:relative;margin-top:calc(var(--s) * -361);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.archS h2{margin:0 0 calc(var(--s) * 361 - 52px);font:500 clamp(28px,8vw,34px)/1.15 var(--f-head);color:var(--gold2);filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
#story{display:flex;flex-direction:column;gap:26px;width:100%}
#story .ch{display:flex;flex-direction:column;align-items:center;gap:12px}
#story .ch:not(.has-img):before{content:"";display:block;width:24px;height:24px;margin:0 auto -4px;background:url(art/pearl.webp) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
#story .chTx b{display:block;font:400 13px/1.4 var(--f-caps);letter-spacing:3px;color:var(--gold)}
#story .chTx i{display:block;font:italic 500 21px/1.25 var(--f-head);margin:2px 0;color:var(--gold2)}
#story .chTx span{font:400 16px/1.45 var(--f-head);color:var(--pearl);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* a chapter's photo hangs in a pearl-and-zardozi oval, sides alternate their tilt */
#story .chImg{position:relative;margin:0;width:72%;max-width:230px;aspect-ratio:4/5;border-radius:50%/42%;padding:9px;box-sizing:border-box;
  background:linear-gradient(160deg,#e9d39c,#a8874e 45%,#6e5427);box-shadow:0 12px 22px rgba(0,0,0,.45);
  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:6px;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;box-shadow:inset 0 0 0 2px #2a2410}
.in #story .chImg{opacity:1;transform:rotate(-1.5deg)}
.in #story .ch.alt .chImg{transform:rotate(1.5deg)}

/* rsvp */
#rForm{width:100%}
.rl{list-style:none;margin:6px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px}
.rl li{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px dotted rgba(214,182,121,.45)}
.rl .nm{font:500 22px/1.2 var(--f-head);color:var(--gold2)}
.rl .wh{font:italic 400 15px/1.3 var(--f-head);color:var(--muted)}
.rl .opts{display:flex;gap:8px;justify-content:center}
.rl .opts button{border:1.5px solid rgba(214,182,121,.7);background:rgba(28,23,10,.4);color:var(--gold2);font:italic 500 17px/1 var(--f-head);white-space:nowrap;padding:12px 16px;border-radius:999px;cursor:pointer}
.rl .opts button.on{background:linear-gradient(180deg,#e9d39c,#b8955a);border-color:var(--gold2);color:#2a2410;box-shadow:0 3px 8px rgba(0,0,0,.35)}
textarea{width:100%;margin-top:14px;border:1px solid rgba(214,182,121,.5);background:rgba(20,16,6,.45);border-radius:12px;padding:12px;font:400 17px/1.4 var(--f-head);color:var(--gold2);resize:vertical}
textarea::placeholder{color:rgba(201,180,138,.7)}
.sign{margin:0;font:italic 500 30px/1.2 var(--f-head);color:var(--gold2)}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* ---------- motion: sections lift, embroidery rises off the velvet with a growing shadow ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(22px) scale(.97);filter:drop-shadow(0 0 0 rgba(0,0,0,0));transition:opacity 1.3s ease .25s,transform 1.7s cubic-bezier(.2,.8,.2,1) .25s,filter 1.7s ease .25s}
.in .rise{opacity:1;transform:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.42))}
.in .corner.tr.rise{transform:scaleX(-1)}
.in .foot .corner.bl.rise{transform:scaleY(-1)}
.in .foot .corner.br.rise{transform:scale(-1,-1)}
.corner.tr.rise{transform:scaleX(-1) translateY(22px)}
.foot .corner.bl.rise{transform:scaleY(-1) translateY(22px)}
.foot .corner.br.rise{transform:scale(-1,-1) translateY(22px)}
.pic.rise,.spray.rise{filter:none}
.in .pic.rise,.in .spray.rise{filter:none}
.count div:nth-child(2) .rise{transition-delay:.4s}.count div:nth-child(3) .rise{transition-delay:.55s}.count div:nth-child(4) .rise{transition-delay:.7s}

#bits{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#bits img{position:absolute;left:0;top:0;width:12px;opacity:.9;will-change:transform}
#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(--gold);background:rgba(28,23,10,.75);color:var(--gold2);font-size:15px;cursor:pointer}
#snd.off{opacity:.55;text-decoration:line-through}

@media (prefers-reduced-motion: reduce){
  .rv,.rise,.tl li .ic,.tl li .tx,.rv .val,#story .chImg{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .corner.tr{transform:scaleX(-1)!important}.foot .corner.bl{transform:scaleY(-1)!important}.foot .corner.br{transform:scale(-1,-1)!important}
  .tap,#gate .sheen:after{animation:none!important}
}

/* ================= the full-invite kit (../_full/fx.css) in olive velvet, pearls and zardozi ================= */
:root{
  --fx-ink:#efe6d4; --fx-muted:#c9b48a; --fx-accent:#d6b679; --fx-accent-2:#f1dfb0; --fx-soft:#e3c98f; --fx-err:#f0a58f;
  --fx-head:"Cormorant Garamond",Georgia,serif; --fx-caps-font:"Marcellus","Cormorant Garamond",Georgia,serif;
  --fx-card:linear-gradient(180deg,rgba(64,54,27,.94),rgba(34,28,12,.95));
  --fx-line:rgba(214,182,121,.5);
  /* seed pearls couched on a twisted gold zardozi cord */
  --fx-edge:radial-gradient(circle at 42% 38%,#fffaf0 0 1.3px,#e8dcc2 2.1px,#9c7d47 3px,transparent 3.5px) 0 0/8px 8px,
    repeating-linear-gradient(45deg,#7a5e2e 0 1.4px,#f1dfb0 1.4px 2.6px,#b8955a 2.6px 4px);
  --fx-edge-w:5px;
  --fx-radius:18px; --fx-shadow:0 8px 18px rgba(0,0,0,.4); --fx-shadow-lg:0 14px 30px rgba(0,0,0,.55);
  --fx-btn:linear-gradient(180deg,#4a4020,#2a2410); --fx-btn-ink:#f1dfb0;
  --fx-on:linear-gradient(180deg,#e9d39c,#b8955a); --fx-on-ink:#2a2410; --fx-on-line:#f1dfb0;
  --fx-field:rgba(20,16,6,.45);
  --fx-foil-1:#6e5427; --fx-foil-2:#c9a660; --fx-foil-3:#f3e1ae; --fx-foil-dots:#fffaf0; --fx-foil-ink:rgba(42,34,14,.9); --fx-scr-shape:oval;
  --fx-card-solid:#2e2613; --fx-langs-bg:rgba(28,23,10,.85); --fx-langs-ink:#f1dfb0;
  --fx-lb-bg:rgba(20,16,6,.95); --fx-lb-ink:#f1dfb0;
}
.fx-h{margin:0 0 6px}
.fx-sec .small.it{margin-bottom:4px}
/* buttons: the template's beaded pill */
.fx-btn{display:inline-block;margin-top:14px;padding:15px 30px;border-radius:999px;border:0;background:linear-gradient(180deg,#4a4020,#2a2410);color:var(--gold2);
  font:500 19px/1 var(--f-head);letter-spacing:.3px;text-transform:none;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 5px rgba(28,23,10,.5),inset 0 0 0 6.5px rgba(241,223,176,.55),0 6px 14px rgba(0,0,0,.35)}
.fx-btn:not(.bp):before{content:"";position:absolute;inset:-5px;border-radius:999px;background:radial-gradient(circle,#f6ecd6 0 1.6px,transparent 2.2px) 0 0/9px 9px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:3px;opacity:.85;pointer-events:none}
#fxSend{padding:17px 34px;font-size:20px}
.fx-lnk{font:400 12px/1.4 var(--f-caps);letter-spacing:2px;color:var(--gold2);border-bottom:1px dotted var(--gold)}
.fx-cal{gap:14px}
.tl .tx [data-fx-cal]{display:flex}
.tl li:nth-of-type(even) .tx [data-fx-cal]{justify-content:flex-end}
.tl .tx [data-fx-cal] .fx-lnk{margin-top:2px}
/* fields + choices on velvet */
.fx-field,.fx-sec textarea,#fxRForm textarea{margin-top:0;color-scheme:dark;font-size:18px}
.fx-field::placeholder,.fx-sec textarea::placeholder,#fxRForm textarea::placeholder{color:rgba(201,180,138,.7)}
.fx-opts button{background:rgba(28,23,10,.4);border-color:rgba(214,182,121,.7);color:var(--gold2)}
.fx-q{border-bottom:1px dotted rgba(214,182,121,.45);border-radius:0}
.fx-rl li{border-bottom:1px dotted rgba(214,182,121,.45)}
.fx-nm,.fx-qL{color:var(--gold2)}
.fx-optin input{accent-color:var(--gold)}
/* cards sit on the velvet like stitched patches */
.fx-ch{color:var(--gold2)}
.fx-cb strong{color:var(--gold)}
.fx-upi code{background:rgba(0,0,0,.3);color:var(--gold2)}
.fx-wish{box-shadow:inset 0 0 0 1px var(--fx-line),var(--fx-shadow)}
/* the scratch card: a velvet medallion, gold zardozi foil, the template's own pearls and crystals burst out */
#fxScr{background:#2e2613 url(art/velvet.jpg) center/cover}
.fx-scrUnder{background:radial-gradient(closest-side,#4a3f1f,#2a2310)}
.fx-scrD{color:var(--gold2)}
.fx-scrT{color:var(--pearl)}
.fx-scrSpk img{width:16px}
/* film */
.fx-filmPlay{background:rgba(28,23,10,.82);box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 2px var(--gold),inset 0 0 0 6px rgba(28,23,10,.5),inset 0 0 0 7.5px rgba(241,223,176,.55)}
.fx-filmPlay span{border-left-color:var(--gold2)}
/* wedding day */
.fx-day li:before{background:radial-gradient(circle at 40% 35%,#fffaf0,#e8dcc2 45%,#9c7d47);box-shadow:0 0 0 3px var(--vel),0 2px 3px rgba(0,0,0,.45)}
.fx-dt{color:var(--gold2)}
.fx-day b{color:var(--gold)}
/* invocation under the valance */
.fx-invoc{margin:0 0 6px}
.fx-invoc img#fxInvImg{width:min(30vw,118px)}
.fx-invoc .flo{width:min(18vw,74px);height:auto;margin-top:8px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.fx-invL{color:var(--gold2)}
.fx-invV{color:var(--muted)}
.fx-inviters .fx-caps{color:var(--gold)}
.fx-ivN{color:var(--pearl)}
.fx-langs{border-color:var(--gold);background:rgba(28,23,10,.85)}
.fx-langs a{color:var(--gold2)}
.closing{gap:6px}
.closing .divider{margin-top:0}

/* Devanagari: no wide letter-spacing or upper-casing; a font that has the letters */
.lang-hi{--f-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--f-caps:Georgia,"Noto Serif Devanagari","Marcellus",Georgia,serif;
  --fx-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--fx-caps-font:Georgia,"Noto Serif Devanagari","Marcellus",Georgia,serif}
.small{text-wrap:balance}
/* the gold gradient is clipped to the text box: give the matras above the line room */
.lang-hi .heroText h1 span{padding:.2em .06em .04em;margin-top:-.16em}
.lang-hi .tl .tt{font-size:16px}
.lang-hi .fx-day b{font-size:14px}
.lang-hi .fx-wish figcaption{font-size:13px}
.lang-hi .archS h2{font-size:30px}
.lang-hi .caps,.lang-hi .tap,.lang-hi .count i,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .tl .tt,.lang-hi .parents b,.lang-hi #story .chTx b,.lang-hi .heroText .date{letter-spacing:.3px;text-transform:none}
.lang-hi .caps,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .parents b,.lang-hi .count i{font-size:14px}
.lang-hi .fx-btn,.lang-hi .bp{font-size:17px;line-height:1.3}
.lang-hi .heroText h1,.lang-hi .names{line-height:1.3}
.lang-hi .sec,.lang-hi .archS h2,.lang-hi .welcome h2{line-height:1.4}
.lang-hi .mono small{font-style:normal}
/* Devanagari has no true italic; the browser fakes a slant */
.lang-hi .it,.lang-hi .and,.lang-hi .tl .tv,.lang-hi .tl .tw,.lang-hi .heroText .city,.lang-hi .heroText h1 .amp,.lang-hi #story .chTx i,.lang-hi .sign{font-style:normal}