/* Couture Blush: a scroll invitation of blush silk, pearl-edged gold beadwork
   arches and translucent glass flowers. The arches sliding apart are real
   motion (a generated clip); everything on top is code: names rising off the
   silk, glass flowers drifting down with a refraction shimmer, pearl strands
   swaying, a light sweep across the beadwork. Every word is live data. */
:root{
  --silk:#efd3c6; --silk2:#f6e3da; --ink:#5e3a33; --muted:#8c6a60; --rose:#9d5552; --gold:#b0844a; --gold2:#e2c48e; --gold3:#8a6430;
  --goldtx:linear-gradient(100deg,#8a6430 0%,#b98d4f 22%,#f1dcae 40%,#a77a3f 58%,#d4ad6e 78%,#8a6430 100%);
  --goldd:linear-gradient(100deg,#6e4d22 0%,#94693a 24%,#d8b77c 42%,#7f5a2a 60%,#a97f44 80%,#6e4d22 100%);
  --goldn:linear-gradient(100deg,#5e4019 0%,#7d5728 30%,#b98f50 48%,#d6b678 50%,#b98f50 52%,#7d5728 70%,#5e4019 100%);
  --f-head:"Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --f-body:"Cormorant Garamond", Georgia, serif;
  --col:min(100vw, 480px);
  --g:50;
}
*{box-sizing:border-box}
html,body{margin:0;background:#e6cfc3;color:var(--ink);font-family:var(--f-body);-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 0%,#f1ddd3,#dcbcae 75%) fixed}
body.locked{overflow:hidden;height:100%}
#page{position:relative;width:var(--col);margin:0 auto;overflow:hidden;box-shadow:0 0 70px rgba(110,60,45,.22);
  background:linear-gradient(rgba(248,230,222,.28),rgba(248,230,222,.28)),var(--silk) url(art/silk.jpg) center top/100% auto repeat-y}
section,footer{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(--silk) url(art/first.jpg) center/cover}
.heroV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* a soft band of light runs across the beadwork (--g moves it) */
.sweep{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(112deg,transparent calc(var(--g)*1% - 24%),rgba(255,246,236,.55) calc(var(--g)*1% - 6%),#fff calc(var(--g)*1%),rgba(255,246,236,.55) calc(var(--g)*1% + 6%),transparent calc(var(--g)*1% + 24%))}
body.opened .hero .sweep{-webkit-mask-image:radial-gradient(ellipse 34% 30% at 50% 47%,transparent 60%,#000 100%);mask-image:radial-gradient(ellipse 34% 30% at 50% 47%,transparent 60%,#000 100%)}
.spk{position:absolute;inset:0;pointer-events:none;z-index:4}
.spk i{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0 9%,rgba(255,240,226,.85) 20%,transparent 56%),linear-gradient(90deg,transparent 46%,rgba(255,246,236,.95) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(255,246,236,.95) 50%,transparent 54%)}

/* the monogram sits live in the panel's empty arch */
.mono{position:absolute;left:var(--mx,60%);top:var(--my,57%);width:var(--mw,40%);transform:translate(-50%,-50%);z-index:5;border:0;padding:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px}
.mono span{display:flex;align-items:baseline;justify-content:center;font:500 calc(var(--mw-px,150px)*.42)/1 var(--f-body);white-space:nowrap;letter-spacing:-.01em;
  background:var(--goldd);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,244,236,.85)) drop-shadow(0 3px 3px rgba(110,60,40,.32))}
.mono span em{font-style:italic;font-size:.62em;margin:0 .02em}
.orn{display:block;width:44px;height:14px;margin:0 auto;opacity:.95;
  background:radial-gradient(circle at 50% 50%,var(--gold) 0 2.6px,transparent 3.2px),radial-gradient(circle,var(--gold2) 0 1.4px,transparent 1.9px) 0 50%/8px 8px repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.tap{position:absolute;left:var(--mx,60%);top:var(--ty,82%);transform:translateX(-50%);margin:0;padding:12px 22px;border-radius:999px;z-index:5;white-space:nowrap;pointer-events:none;
  background:rgba(250,236,228,.86);border:1px solid rgba(176,132,74,.75);box-shadow:0 4px 18px rgba(110,60,45,.2),inset 0 0 0 3px rgba(255,255,255,.55);
  font:500 15px/1 var(--f-head);letter-spacing:3px;color:var(--rose);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translateX(-50%) scale(.97)}}
body.opened .mono,body.opened .tap{opacity:0;pointer-events:none;animation:none;transition:opacity .6s ease,transform .8s ease}
body.opened .mono{transform:translate(-50%,-50%) scale(1.1)}

.heroText{position:absolute;left:20%;right:20%;top:var(--hy,30%);text-align:center;z-index:3;pointer-events:none;visibility:hidden;display:flex;flex-direction:column;align-items:center;gap:12px}
.heroText .pre{margin:0;font:500 15px/1.2 var(--f-head);letter-spacing:4px;color:var(--gold3)}
.heroText h1{margin:0;font:600 46px/1.06 var(--f-head);letter-spacing:2px;color:var(--ink)}
.heroText h1 span{display:block;background:var(--goldn);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em}
.heroText h1 .amp{font:italic 400 .7em/1.2 var(--f-body)}
.heroText .date{margin:6px 0 0;font:500 17px/1.3 var(--f-head);letter-spacing:3px;color:var(--ink)}
.heroText .city{margin:0;font:500 15px/1.2 var(--f-head);letter-spacing:4px;color:var(--muted)}
.cue{position:absolute;left:50%;bottom:calc(2.6% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;z-index:3;font:500 13px/1 var(--f-head);letter-spacing:4px;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%}}

/* ---------- pearl strands (built in code) sway from the top ---------- */
.strands{position:absolute;left:0;right:0;top:0;height:0;z-index:4;pointer-events:none}
.strand{position:absolute;top:-4px;width:12px;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.strand b{display:block;width:12px;height:var(--h,120px);
  background:url(art/g-pearl.webp) 50% 0/10px 10px repeat-y,linear-gradient(90deg,transparent 5.5px,rgba(176,132,74,.7) 5.5px 6.5px,transparent 6.5px);
  filter:drop-shadow(0 3px 2px rgba(110,60,45,.22))}
.strand img{width:30px;max-width:none;margin:-4px 0 0 -9px;filter:drop-shadow(0 4px 4px rgba(110,60,45,.25))}
.strand.sm b{width:9px;background-size:7px 7px,auto;background-position:50% 0,-1.5px 0}
.strand.sm img{width:22px;margin-left:-6px}
@keyframes sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.rv .strand{transform:scaleY(0);transition:transform 1.8s cubic-bezier(.3,0,.2,1)}
.rv.in .strand{transform:none}

/* ---------- glass flowers drift down; a refraction sweep runs through each ---------- */
#fall{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.gf{position:absolute;left:0;top:0;width:var(--s,30px);will-change:transform}
.gf img{width:100%;height:auto;opacity:.92;filter:drop-shadow(0 4px 5px rgba(110,60,45,.18))}
.gf:after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 30%,rgba(190,235,255,.55) 42%,#fff 48%,rgba(255,205,225,.7) 54%,transparent 66%) 0 0/300% 100% no-repeat;
  animation:refract var(--rd,2.8s) ease-in-out infinite}
@keyframes refract{0%{background-position:120% 0}100%{background-position:-20% 0}}

/* ---------- plain text on silk ---------- */
.plain{padding:64px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.small{margin:0;font:400 18px/1.5 var(--f-body);color:var(--muted)}
.it{font-style:italic}
.caps{margin:0;font:500 14px/1.5 var(--f-head);letter-spacing:3px;color:var(--gold3)}
.names{margin:0;font:500 clamp(32px,9.4vw,42px)/1.1 var(--f-head);letter-spacing:1.5px;color:var(--ink)}
.and{margin:0;font:italic 400 28px/1 var(--f-body);color:var(--gold)}
.sec{margin:0 0 6px;font:500 clamp(28px,8.2vw,36px)/1.12 var(--f-head);letter-spacing:2px;color:var(--ink)}
.sec.big2{font-size:clamp(44px,13vw,58px);margin:0}
.big{margin:0;font:500 24px/1.25 var(--f-body);color:var(--ink)}
.div{width:74%;height:auto;margin:8px 0}
.parents{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.parents div{display:flex;flex-direction:column;gap:4px}
.parents b{font:500 13px/1.4 var(--f-head);letter-spacing:2px;color:var(--rose)}
.parents span{font:400 16px/1.4 var(--f-body);color:var(--ink)}
.parents span+b{margin-top:8px}
.corner{position:absolute;width:30%;max-width:150px;pointer-events:none;z-index:0}
.corner.tl{left:-4px;top:-6px;transform:scaleY(-1)}
.corner.tr{right:-4px;top:-6px;transform:scale(-1,-1)}
.corner.bl{left:-4px;bottom:-6px}
.corner.br{right:-4px;bottom:-6px;transform:scaleX(-1)}
.plain>*{position:relative;z-index:1}
.plain>.corner{position:absolute;z-index:0}
.plain>.strands{position:absolute;z-index:4}

/* pieces rise off the silk and their shadow grows */
.rise{opacity:0;filter:drop-shadow(0 0 0 rgba(110,60,45,0));transition:opacity 1.3s ease,filter 1.6s ease,translate 1.6s cubic-bezier(.2,.8,.2,1);translate:0 20px}
.in .rise{opacity:1;translate:0 0;filter:drop-shadow(0 7px 7px rgba(110,60,45,.24))}

/* ---------- framed silk cards (generated art, text on top) ---------- */
.card{overflow:hidden}
.card .bg{width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);opacity:0;transform:translateY(28px) scale(.97);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1)}
.card.in .bg{opacity:1;transform:none}
.card .inner{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;z-index:3}
.card .inner>*{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card.in .inner>*{opacity:1;transform:none}
#sDear .inner{left:22%;right:18%;top:25%;bottom:36%;gap:6px}
#sDear h2{margin:0;font:500 clamp(28px,8.4vw,36px)/1.15 var(--f-head);letter-spacing:1.5px;color:var(--ink)}
#sDear p{margin:0;font:400 17px/1.5 var(--f-body);color:var(--ink)}
#sVenue .inner{left:16%;right:16%;top:56%;bottom:9%;gap:6px}
#sDress .inner{left:20%;right:20%;top:64%;bottom:15%;gap:6px}
#sDressList{padding-top:6px}
#sVenue .sec,#sDress .sec{order:-1}

.pill{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:13px 24px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(252,240,234,.88);color:var(--rose);text-decoration:none;cursor:pointer;
  font:600 15px/1 var(--f-head);letter-spacing:2px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 0 0 3px rgba(226,196,142,.35),0 3px 8px rgba(110,60,45,.16)}
.pill.solid{color:#fff;border-color:#a77a3f;background:var(--goldtx);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;text-shadow:0 1px 2px rgba(90,50,20,.5);font-size:15px;padding:16px 28px;margin-top:16px}

/* ---------- countdown: numbers inside pearl medallions ---------- */
.hang{padding-top:150px}
#countdown .sec{white-space:pre-line}
.count{display:flex;gap:6px;justify-content:center;margin:16px 0 4px}
.count div{display:flex;flex-direction:column;align-items:center;gap:6px}
.med{position:relative;display:block;width:min(21vw,86px);aspect-ratio:1}
.med img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(110,60,45,.22))}
.med b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 27px/1 var(--f-body);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.count i{font:500 13px/1 var(--f-head);letter-spacing:1.5px;color:var(--muted);font-style:normal}
#countdown .count div{opacity:0;transform:translateY(18px) scale(.86);transition:opacity 1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
#countdown.in .count div{opacity:1;transform:none}
#countdown.in .count div:nth-child(2){transition-delay:.12s}#countdown.in .count div:nth-child(3){transition-delay:.24s}#countdown.in .count div:nth-child(4){transition-delay:.36s}
.med:after{content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(112deg,transparent calc(var(--g)*1% - 22%),#fff calc(var(--g)*1%),transparent calc(var(--g)*1% + 22%))}

/* ---------- timeline ---------- */
#sCel{padding-bottom:110px}
.tl{list-style:none;margin:6px 0 0;padding:0;width:100%;position:relative}
.tl:before{content:"";position:absolute;left:34%;top:14px;bottom:14px;width:6px;margin-left:-3px;
  background:radial-gradient(circle at 40% 35%,#fff 0 14%,#efe3da 34%,#cbb2a3 62%,transparent 68%) 50% 0/6px 9px repeat-y}
.tl li{position:relative;display:grid;grid-template-columns:34% 66%;align-items:center;padding:14px 0}
.tl li:after{content:"";position:absolute;left:34%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--silk2);border:1.5px solid var(--gold);box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.tl .ic{justify-self:center;width:auto;max-width:78px;max-height:72px;margin-right:14px}
.tl .tx{text-align:left;display:flex;flex-direction:column;gap:2px;padding-left:22px}
.tl .tt{font:600 19px/1.2 var(--f-head);letter-spacing:2px;color:var(--rose)}
.tl .tm{font:500 15px/1.3 var(--f-head);letter-spacing:1px;color:var(--ink)}
.tl .tv{font:italic 400 16px/1.35 var(--f-body);color:var(--muted)}
.tl .tw{font:italic 400 16px/1.35 var(--f-body);color:var(--gold3)}
.lnk{align-self:flex-start;font:600 13px/1 var(--f-head);letter-spacing:2px;color:var(--rose);text-decoration:none;border-bottom:1px solid var(--gold);padding:6px 0 4px;margin-top:2px}
.bead{position:absolute;left:34%;top:0;width:22px;height:22px;margin-left:-11px;z-index:3;pointer-events:none}
.bead img{width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(110,60,45,.3))}
.tl li .ic{opacity:0;transform:translateY(14px) scale(.88);filter:drop-shadow(0 0 0 rgba(110,60,45,0));transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.2s 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 6px 6px rgba(110,60,45,.26))}
.tl li.on .tx{opacity:1;transform:none}
.tl li.on:after{background:var(--gold2)}

/* dress list */
.dress{margin:0;width:100%;display:flex;flex-direction:column;gap:8px}
.dress div{display:flex;flex-direction:column;gap:1px}
.dress dt{font:600 15px/1.25 var(--f-head);letter-spacing:2px;color:var(--rose)}
.dress dd{margin:0;font:400 17px/1.35 var(--f-body);color:var(--ink)}

/* ---------- arch sections: one transparent arch sprite, nine-sliced ---------- */
.arch{--fw:calc(var(--col) - 8px);--k:calc(var(--fw) / 1006);isolation:isolate;margin:30px 4px;width:auto;min-height:calc(var(--k)*1300);
  padding:calc(var(--k)*415) calc(var(--k)*190 + 6px) calc(var(--k)*300 + 10px)}
.arch:after{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(var(--k)*160);right:calc(var(--k)*160);top:calc(var(--k)*240);bottom:calc(var(--k)*120);
  background:radial-gradient(60% 55% at 50% 45%,rgba(255,244,238,.75),rgba(255,244,238,0) 100%)}
.arch:before{content:"";position:absolute;inset:0;pointer-events:none;border-style:solid;border-color:transparent;z-index:1;
  border-width:calc(var(--k)*460) calc(var(--k)*190) calc(var(--k)*330);
  border-image:url(art/arch.webp) 460 190 330 / calc(var(--k)*460) calc(var(--k)*190) calc(var(--k)*330) stretch round;
  filter:saturate(.8) brightness(1.02) drop-shadow(0 0 0 rgba(110,60,45,0));transition:filter 1.8s ease}
.arch.in:before{filter:saturate(.8) brightness(1.02) drop-shadow(0 9px 12px rgba(110,60,45,.26))}
.arch .box{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
#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:600 14px/1.3 var(--f-head);letter-spacing:3px;color:var(--gold3)}
#story i{font:italic 500 22px/1.25 var(--f-body);color:var(--rose)}
#story span{font:400 17px/1.5 var(--f-body);color:var(--ink)}
#story div+div:before{content:"";width:10px;height:10px;border-radius:50%;margin:0 0 12px;background:radial-gradient(circle at 38% 32%,#fff 0 18%,#efe3da 40%,#c9ae9e 80%);box-shadow:0 1px 2px rgba(110,60,45,.3)}

/* rsvp */
#rForm{width:100%}
.rl{list-style:none;margin:4px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.rl li{display:flex;flex-direction:column;gap:7px;padding:12px 0;border-bottom:1px solid rgba(176,132,74,.35)}
.rl .nm{font:600 20px/1.2 var(--f-head);letter-spacing:1.5px;color:var(--rose)}
.rl .wh{font:italic 400 16px/1.3 var(--f-body);color:var(--muted)}
.rl .opts{display:flex;flex-direction:column;gap:8px}
.rl .opts button{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--gold);background:rgba(252,240,234,.9);color:var(--ink);font:500 18px/1 var(--f-body);padding:12px 10px;border-radius:999px;cursor:pointer;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 0 0 3px rgba(226,196,142,.3)}
.rl .opts button:before{content:"";width:16px;height:16px;flex:none;background:var(--rose);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.rl .opts button.y{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E")}
.rl .opts button.n{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.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),0 0 0 3px rgba(226,196,142,.5)}
.rl .opts button.on:before{background:#fff}
textarea{width:100%;margin-top:12px;border:1px solid rgba(176,132,74,.55);background:rgba(252,242,237,.9);border-radius:14px;padding:12px;font:400 18px/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{padding:120px 24px 90px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.med.big{width:150px}
.med.big:after{opacity:.5}
.med.big span{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font:600 44px/1 var(--f-body);white-space:nowrap;
  background:var(--goldn);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,244,236,.8)) drop-shadow(0 2px 2px rgba(110,60,40,.35))}
.med.big span em{font-style:italic;font-size:.62em}
.sign{margin:0;font:500 30px/1.2 var(--f-head);letter-spacing:2px;color:var(--ink)}

/* ---------- motion: sections lift up ---------- */
.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}
.arch .box>*{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.arch.in .box>*{opacity:1;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(176,132,74,.7);background:rgba(250,238,232,.88);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,.rise,.card .bg,.card .inner>*,.arch .box>*,#countdown .count div,.tl li .ic,.tl li .tx,#story .chImg{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
  .tap,.strand,.gf:after,.cue:after{animation:none!important}
}

/* story chapters with a photo: a little beaded arch window (pearls on a glass rail), a glass
   flower pinned at its point; sides tilt in turn */
#story .ch.has-img{gap:4px}
#story .chImg{position:relative;margin:0 0 12px;width:82%;max-width:230px;aspect-ratio:4/5;border-radius:50% 50% 14px 14px / 34% 34% 14px 14px;padding:8px;box-sizing:border-box;
  background:linear-gradient(160deg,#fbefe9,#ecd2c6);box-shadow:inset 0 0 0 1.5px rgba(176,132,74,.6),0 10px 20px rgba(110,60,45,.2);
  opacity:0;transform:translateY(22px) scale(.95) rotate(-1.5deg);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
#story .ch.alt .chImg{transform:translateY(22px) scale(.95) rotate(1.5deg)}
#story .chImg:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:5px;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:first-child{width:100%;height:100%;object-fit:cover;border-radius:50% 50% 8px 8px / 32% 32% 8px 8px;display:block}
#story .chImg .chGf{position:absolute;left:50%;top:-16px;width:40px;margin-left:-20px;z-index:2;filter:drop-shadow(0 3px 4px rgba(110,60,45,.3))}
.in #story .chImg{opacity:1;transform:rotate(-1deg)}
.in #story .ch.alt .chImg{transform:rotate(1deg)}
#story .ch.has-img + .ch:before,#story .ch + .ch.has-img:before{display:none}

/* ================= the full-invite kit (../_full/fx.css) in blush silk, glass flowers and pearls ================= */
:root{
  --fx-ink:#5e3a33; --fx-muted:#8c6a60; --fx-accent:#9d5552; --fx-accent-2:#e2c48e; --fx-soft:#c07a78; --fx-err:#a5463f;
  --fx-head:"Cormorant Garamond",Georgia,serif; --fx-caps-font:"Cormorant SC","Cormorant Garamond",Georgia,serif;
  /* a pane of blush glass: frosted, with a cool refraction at one edge */
  --fx-card:linear-gradient(160deg,rgba(255,250,247,.86),rgba(250,232,225,.8) 55%,rgba(236,244,248,.72));
  --fx-line:rgba(176,132,74,.45);
  /* seed pearls strung on an iridescent glass rail */
  --fx-edge:radial-gradient(circle at 40% 35%,#fff 0 1.2px,#f6ebe5 2px,#cdb0a2 2.9px,transparent 3.4px) 0 0/7.5px 7.5px,
    linear-gradient(115deg,#e9c7b9,#f8e7ef 25%,#dcebf2 45%,#f6dfd6 65%,#c9a46a 85%,#ecd0c4);
  --fx-edge-w:4.5px;
  --fx-radius:20px; --fx-shadow:0 8px 18px rgba(110,60,45,.14); --fx-shadow-lg:0 14px 30px rgba(110,60,45,.24);
  --fx-btn:linear-gradient(180deg,#fdf3ee,#f4dfd6); --fx-btn-ink:#9d5552;
  --fx-on:#9d5552; --fx-on-ink:#fff; --fx-on-line:#9d5552;
  --fx-field:rgba(252,242,237,.9);
  --fx-foil-1:#b47e6c; --fx-foil-2:#e6bba9; --fx-foil-3:#fbebe3; --fx-foil-dots:#fffdfb; --fx-foil-ink:rgba(110,55,48,.85); --fx-scr-shape:oval;
  --fx-card-solid:#f6e3da; --fx-langs-bg:rgba(252,240,234,.92); --fx-langs-ink:#9d5552;
  --fx-lb-bg:rgba(60,34,30,.93); --fx-lb-ink:#fbe9e1;
}
.fx-h{margin:0 0 6px}
.fx-sec .small.it{margin-bottom:4px}
/* buttons: the template's pearl-edged pill (gold for the main action) */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:14px 26px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(252,240,234,.92);color:var(--rose);text-decoration:none;cursor:pointer;
  font:600 15px/1 var(--f-head);letter-spacing:2px;text-transform:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 0 0 3px rgba(226,196,142,.35),0 3px 8px rgba(110,60,45,.16)}
.fx-btn.solid{color:#fff;border-color:#a77a3f;background:var(--goldtx);background-size:260% 100%;background-position:calc(var(--g)*1%) 0;text-shadow:0 1px 2px rgba(90,50,20,.5);padding:16px 28px;margin-top:16px}
#fxSend{font-size:15px}
.fx-lnk{font:600 13px/1.3 var(--f-head);letter-spacing:2px;color:var(--rose);border-bottom:1px solid var(--gold);text-transform:none}
.fx-cal{gap:12px}
.tl .tx [data-fx-cal]{display:flex}
.tl .tx [data-fx-cal] .fx-lnk{margin-top:0;padding-top:6px;font-size:12px}
/* fields + choices: the RSVP pills */
.fx-field,.fx-sec textarea,#fxRForm textarea{margin-top:0;border-color:rgba(176,132,74,.55);font-family:var(--f-body)}
.fx-opts button{border-color:var(--gold);background:rgba(252,240,234,.92);font-family:var(--f-body);font-style:normal;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 0 0 2px rgba(226,196,142,.3)}
.fx-opts button.on{box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 0 0 3px rgba(226,196,142,.5)}
.fx-qL,.fx-nm{font-family:var(--f-head);letter-spacing:1.5px;color:var(--rose);font-size:20px}
.fx-q{border-bottom-color:rgba(176,132,74,.35);border-radius:0}
.fx-rl li{border-bottom-color:rgba(176,132,74,.35)}
.arch #fxRBody{gap:10px}
.arch .fx-opts button{padding:11px 13px;font-size:16px}
/* cards: frosted glass panes on the silk */
.fx-card{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.fx-ch{font-family:var(--f-head);letter-spacing:1.5px;font-size:22px;color:var(--rose)}
.fx-cb strong{font-family:var(--f-head);color:var(--gold3)}
.fx-upi code{background:rgba(255,255,255,.7);color:var(--ink);font-family:var(--f-body);font-size:17px}
/* the scratch card: a beaded arch window, rose-gold foil; glass flowers and pearls burst out */
#fxScr{border-radius:50% 50% 18px 18px / 36% 36% 18px 18px;background:linear-gradient(160deg,#fbefe9,#ecd2c6)}
.fx-scrUnder{background:radial-gradient(closest-side,#fffaf7,#f6e2da)}
.fx-scrD{color:var(--rose)}
.fx-scrSpk img{width:22px}
.fx-scrSpk img[src*=pearl]{width:12px}
/* film + gallery frames */
.fx-filmPlay{background:rgba(253,243,238,.9)}
.fx-filmPlay span{border-left-color:var(--rose)}
.fx-shot figcaption{font-family:var(--f-body)}
/* the wedding day: a strand of pearls, a pearl at each hour */
.fx-day:before{width:6px;left:81px;background:radial-gradient(circle at 40% 35%,#fff 0 14%,#efe3da 34%,#cbb2a3 62%,transparent 68%) 50% 0/6px 9px repeat-y}
.fx-day li:before{background:radial-gradient(circle at 38% 32%,#fff 0 18%,#efe3da 40%,#c9ae9e 80%);box-shadow:0 0 0 3px var(--silk2),0 1px 3px rgba(110,60,45,.3)}
.fx-dt{font-family:var(--f-head);letter-spacing:1px;color:var(--rose);font-size:20px}
.fx-day b{font-family:var(--f-head);color:var(--gold3)}
/* invocation */
.fx-invoc{margin:0 0 6px}
.fx-invoc .div{width:60%;margin:10px 0 2px}
.fx-invL{color:var(--rose)}
.fx-inviters .fx-caps{color:var(--gold3)}
.arch .fx-ivN{font-size:19px}
.fx-wish figcaption{font-family:var(--f-head);color:var(--rose)}
.fx-langs{border-color:var(--gold);background:rgba(252,240,234,.92)}
.fx-langs a{color:var(--rose)}
.fx-langs a.on{background:var(--rose);color:#fff}
.plain > .fx-looks{position:relative}
#sDressList .fx-looks{margin-top:0}
#sDressList:has(#fxLooks:not([hidden])){padding-top:22px}

/* Devanagari: no wide letter-spacing or small caps; a font that has the letters */
.lang-hi{--f-head:Georgia,"Noto Serif Devanagari","Cormorant SC",Georgia,serif;--f-body:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;
  --fx-head:Georgia,"Noto Serif Devanagari","Cormorant Garamond",Georgia,serif;--fx-caps-font:Georgia,"Noto Serif Devanagari","Cormorant SC",Georgia,serif}
.lang-hi .caps,.lang-hi .tap,.lang-hi .cue,.lang-hi .count i,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .pill,.lang-hi .fx-btn,.lang-hi .parents b,.lang-hi #story b,.lang-hi .heroText .pre,.lang-hi .heroText .date,.lang-hi .heroText .city,
.lang-hi .tl .tt,.lang-hi .tl .tm,.lang-hi .dress dt,.lang-hi .sec,.lang-hi .names,.lang-hi .heroText h1,.lang-hi .sign,.lang-hi #sDear h2,.lang-hi .fx-qL,.lang-hi .fx-nm,.lang-hi .fx-ch,.lang-hi .fx-dt{letter-spacing:.3px}
.lang-hi .caps,.lang-hi .lnk,.lang-hi .fx-lnk,.lang-hi .parents b,.lang-hi .count i{font-size:14px}
.lang-hi .pill,.lang-hi .fx-btn{font-size:16px;line-height:1.3}
.lang-hi .heroText h1{line-height:1.3}
.lang-hi .heroText h1 span{padding:.2em .06em .04em;margin-top:-.16em}
.lang-hi .names,.lang-hi .sec,.lang-hi #sDear h2{line-height:1.35}
.lang-hi .sec.big2{font-size:clamp(36px,10vw,46px)}
.lang-hi .mono span em,.lang-hi .med.big span em{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 h1 .amp,.lang-hi #story i{font-style:normal}
.lang-hi .fx-wish figcaption{font-size:13px}
.lang-hi .fx-day b{font-size:14px}