/* Resham Dhaaga v1.1.0 - copied unchanged from reference/resham-site-preview.html.
   Only additions are at the bottom: background images as files (relative to this css). */
:root{
  --fd:'Playfair Display',Georgia,serif; --fn:'Playfair Display',Georgia,serif; --fl:Cinzel,Georgia,serif; --fb:Lora,Georgia,serif; --nmw:600; --nmstyle:italic; --nmsize:66px;
  --maroon:#3E0F1B; --maroon-deep:#2A0911; --wine:#6B1E2E; --champ:#F1DFB6; --champ-soft:#E8D3A9; --ink:#4A1422; --gold:#C9A04A; --gold-d:#8F6B2E; --silk:#F6EEE0;
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--maroon:#3E0F1B}}
:root[data-theme="dark"]{--maroon:#3E0F1B}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--maroon-deep);color:var(--champ);font:400 18.7px/1.6 var(--fb);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--maroon)}
.page{max-width:480px;margin:0 auto;background-color:var(--maroon);background-size:300px;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.5)}
img{display:block;max-width:100%}
.lbl{font:500 12.1px/1.5 var(--fl);letter-spacing:.3em;text-transform:uppercase;color:var(--champ-soft);margin:0}
h2{font:italic 500 2.4rem/1.15 var(--fd);color:var(--champ);margin:.2em 0 0}
.orn{width:62%;max-width:260px;margin:10px auto 0}
.sec{position:relative;padding:64px 22px;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 24px;border:1px solid var(--gold);color:var(--champ);text-decoration:none;font:500 12.1px var(--fl);letter-spacing:.24em;text-transform:uppercase;background:rgba(42,9,17,.6);position:relative;cursor:pointer}
.btn::after{content:"";position:absolute;inset:3px;border:1px solid rgba(226,194,122,.35);pointer-events:none}
.btn.solid{background:linear-gradient(180deg,#7a2433,#5a1624)}

/* opener */
.opener{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background-color:var(--maroon);background-size:300px;transition:opacity .8s ease .5s,visibility 0s linear 1.3s}
.opener .inner{text-align:center;width:min(88vw,380px)}
.opener .for{font:italic 500 1.3rem var(--fd);color:var(--champ-soft);margin:0 0 22px}
.env3{position:relative;width:100%;aspect-ratio:4/3;perspective:1100px;filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}
.env3>div{position:absolute;inset:0}
.e-back{background-color:#4a1322;background-size:260px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(226,194,122,.35)}
.e-back::after{content:"";position:absolute;inset:0;background:rgba(20,4,8,.35)}
.e-lin{position:absolute;left:5%;right:5%;top:4%;height:60%;background-size:150px;opacity:.95;clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%)}
.e-card{left:7%!important;right:7%!important;top:9%!important;bottom:8%!important;background-color:var(--silk);background-size:200px;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.2,.8,.2,1) .55s;z-index:1}
.e-card .c1{font:500 11px var(--fl);letter-spacing:.3em;text-transform:uppercase;color:#8F6B2E;margin:0}
.e-card .c2{-webkit-text-stroke:.4px currentColor;font:italic 600 1.9rem/1.2 var(--fn);color:var(--wine);margin:6px 0}
.e-card .c2 span{font-size:.8em}
.e-card .c3{font:500 11px var(--fl);letter-spacing:.24em;color:#6E5A5D;margin:0}
.e-pocket{background-color:#3a0d18;filter:brightness(1.28) saturate(.95);background-size:260px;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);z-index:2;border-radius:0 0 4px 4px}
.e-pocket::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,220,200,.05),rgba(0,0,0,.22))}

.e-flap{z-index:3;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.5,0,.2,1) .25s}
.f-out,.f-in{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 62%)}
.f-out{background-color:#3a0d18;background-size:260px;filter:brightness(1.42) saturate(.95)}
.f-out::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.12))}
.f-in{transform:rotateX(180deg);background-size:150px;background-color:var(--silk)}
.trim{position:absolute;top:0;height:9px;width:68.3%;background-size:auto 100%;background-repeat:repeat-x;margin-top:-4px}
.trim.l{left:0;transform-origin:0 50%;transform:rotate(42.9deg)}
.trim.r{right:0;transform-origin:100% 50%;transform:rotate(-42.9deg)}
.e-seal{position:absolute;left:50%;top:62%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:5;border:0;padding:0;background:none;cursor:pointer;transition:transform .5s ease,opacity .45s ease;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.e-seal img:first-child{width:100%;height:100%;display:block}
.e-seal .ini{position:absolute;left:51%;top:51.5%;transform:translate(-50%,-50%);font:italic 600 clamp(22px,7.2vw,32px) var(--fn);white-space:nowrap;background:linear-gradient(135deg,#B8893E,#FFF1C8 45%,#C9A04A 60%,#8A6224);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.e-seal .ini em{font-size:.7em;margin:0 1px}
.e-seal .glint{position:absolute;left:50%;top:50%;width:90%;transform:translate(-50%,-50%) scale(0);mix-blend-mode:screen;opacity:0;pointer-events:none}
.e-seal:focus-visible{outline:2px solid #F1DFB6;outline-offset:4px;border-radius:50%}
.tap{margin-top:22px;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.opener.open .e-seal{transform:translate(-50%,-50%) scale(1.25);opacity:0}
.opener.open .e-seal .glint{animation:flash .7s ease-out forwards}
@keyframes flash{30%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
.opener.open .e-flap{transform:rotateX(178deg)}
.opener.flapped .e-flap{z-index:0}
.opener.open .e-card{transform:translateY(-56%)}
.opener.open .tap{animation:none;opacity:0}
.opener{transition:opacity .8s ease 2.6s,visibility 0s linear 3.4s}
.opener::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 0,rgba(10,2,4,.55) 75%);pointer-events:none}
.opener .inner{position:relative}
.opener.open{opacity:0;visibility:hidden}
.opener.open .tap{animation:none;opacity:0}

/* hero */
.hero{position:relative;height:100svh;min-height:640px;max-height:980px;overflow:hidden}
.hero .artclip{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 90%)}
.hero .art{position:absolute;left:0;right:0;top:23%;will-change:transform}
.hero .art img{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 92%,transparent 100%)}
.hero .sweep{position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,236,190,.28) 50%,transparent 60%);background-size:280% 100%;mix-blend-mode:screen;animation:sweep 6s ease-in-out 2.5s infinite;pointer-events:none}
@keyframes sweep{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
.hero .tw{position:absolute;width:34px;mix-blend-mode:screen;opacity:0;animation:tw 3.2s ease-in-out infinite;pointer-events:none}
@keyframes tw{0%,70%,100%{opacity:0;transform:scale(.3)}80%{opacity:1;transform:scale(1)}}
.hero .front{position:absolute;left:-2%;right:-2%;bottom:0;-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
.hero .front img{width:100%}
.hero .names{position:absolute;left:0;right:0;top:6.5%;text-align:center;padding:0 18px;will-change:transform,opacity}
.hero .names svg{width:100%;height:auto;overflow:visible}
.nm{font-style:var(--nmstyle);font-weight:var(--nmw);font-size:var(--nmsize);font-family:var(--fn)}
.nm-stroke{fill:none;stroke:#E2C27A;stroke-width:1.1;stroke-dasharray:1400;stroke-dashoffset:1400}
.nm-fill{fill:url(#gold);stroke:url(#gold);stroke-width:1.6;stroke-linejoin:round;paint-order:stroke;opacity:0;filter:drop-shadow(0 3px 6px rgba(20,4,8,.6))}
.started .nm-stroke{animation:draw 2.6s ease-in-out forwards}
.started .nm-fill{animation:fillin 1.2s ease 2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{opacity:1}}
.started .nm-stroke{animation:draw 2.6s ease-in-out forwards,hide .8s ease 2.8s forwards}
@keyframes hide{to{opacity:0}}
.hero .date{font:500 14.3px var(--fl);letter-spacing:.24em;color:var(--champ-soft);margin:2px 0 0;opacity:0;transition:opacity 1s ease 2.6s}
.hero .small{opacity:0;transition:opacity 1s ease .4s}
.started .date,.started .small{opacity:1}
.nm.big{font-size:92px}
.scrollhint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 11px var(--fl);letter-spacing:.28em;color:var(--champ);z-index:3;padding:7px 14px 6px;background:rgba(42,9,17,.78);border:1px solid rgba(226,194,122,.55);border-radius:20px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,4px)}}

/* vignette + scratch */
.vig{width:74%;margin:0 auto 14px}
.when{font:italic 400 1.3rem var(--fd);color:var(--champ-soft);margin:18px 0 10px}
.scratch{position:relative;width:min(300px,86%);margin:14px auto 0;aspect-ratio:5/2;border:1px solid rgba(226,194,122,.6);outline:1px solid rgba(226,194,122,.25);outline-offset:4px;background-color:var(--silk);background-size:220px;color:var(--ink);display:grid;place-items:center}
.scratch .d1{font:500 12.1px var(--fl);letter-spacing:.28em;color:#8F6B2E}
.scratch .d2{font:italic 500 2.2rem/1.1 var(--fd);color:var(--wine)}
.scratch .d3{font:500 11px var(--fl);letter-spacing:.22em;color:#6E5A5D}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .9s ease}
.scratch canvas.gone{opacity:0;pointer-events:none}
.hint{font:500 11px var(--fl);letter-spacing:.24em;color:var(--champ-soft);opacity:.8;margin-top:14px}

/* countdown */
.cd{background-color:#240810;background-size:150px;padding:56px 18px;overflow:hidden}
.cd .med{position:absolute;left:50%;top:50%;width:118%;transform:translate(-50%,-50%);opacity:.13;pointer-events:none}
.cd .row{display:flex;justify-content:center;gap:12px;margin-top:18px;position:relative}
.cd .row div{min-width:74px;padding:12px 4px 10px;background:rgba(36,8,16,.72);border:1px solid rgba(226,194,122,.55);outline:1px solid rgba(226,194,122,.2);outline-offset:3px}
.cd b{display:block;font:italic 400 2.4rem/1 var(--fd);color:var(--champ)}
.cd small{font:500 9.9px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--champ-soft)}

/* silk cards */
.card{position:relative;background-color:var(--silk);background-size:240px;color:var(--ink);padding:54px 26px 50px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card .cn{position:absolute;width:24%;max-width:116px;pointer-events:none}
.cn.tl{left:8px;top:8px}.cn.tr{right:8px;top:8px;transform:scaleX(-1)}.cn.bl{left:8px;bottom:8px;transform:scaleY(-1)}.cn.br{right:8px;bottom:8px;transform:scale(-1,-1)}
.card .lbl{color:#8F6B2E}
.card .bless{width:66%;margin:0 auto 6px;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.card p{margin:6px 0}
.card .n{-webkit-text-stroke:.45px currentColor;font-family:var(--fn);font-style:var(--nmstyle);font-weight:var(--nmw);font-size:2.6rem;line-height:1.15;color:var(--wine);margin:12px 0}
.card .parents{font-size:.92rem;color:#6E4A50;margin-top:16px}

/* gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.gf{position:relative}
.gf .ph{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.gf .ph img{width:100%;height:100%;object-fit:cover}
.gf .fr{position:relative;width:100%}

/* events */
.baraat{width:92%;margin:0 auto 6px}
.ev{display:flex;gap:14px;align-items:center;text-align:left;padding:18px 18px 18px 16px;margin:0 0 14px}
.ev .cn{width:46px}
.ev .ic{width:66px;height:66px;flex:none}
.ev .ic.small{transform:scale(1.18)}
.ev b{display:block;font:italic 500 1.7rem/1.1 var(--fd);color:var(--wine)}
.ev .t{font:500 11px var(--fl);letter-spacing:.18em;text-transform:uppercase;color:#8F6B2E;margin:4px 0 2px}
.ev .v{font-size:.92rem;color:#5c3a40}
.ev .acts{display:flex;gap:8px;margin-top:8px}
.ev .acts a{font:500 9.9px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);border:1px solid rgba(107,30,46,.4);padding:5px 9px;text-decoration:none}

/* venue */
.map{border:1px solid rgba(201,160,74,.7);padding:5px;background:#fff8ee;margin:14px 0 8px}
/* rsvp */
.door{width:60%;margin:0 auto 4px}
.choices{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:20px}
.rsvp{max-width:320px;margin:22px auto 0;text-align:left}
.fld{display:block;margin:0 0 14px}
.fld span{display:block;font:500 11px var(--fl);letter-spacing:.22em;text-transform:uppercase;color:var(--champ-soft);margin-bottom:6px}
.fld input{width:100%;min-height:46px;padding:10px 12px;background:rgba(42,9,17,.6);border:1px solid rgba(226,194,122,.55);color:var(--champ);font:400 17.6px var(--fb)}
.fld input::placeholder{color:rgba(232,211,169,.45)}
.step{display:flex;align-items:center;gap:18px}
.step button{width:44px;height:44px;border:1px solid var(--gold);background:rgba(42,9,17,.6);color:var(--champ);font-size:22px;cursor:pointer}
.step b{font:italic 600 2rem var(--fd);min-width:28px;text-align:center}
.rsvp .choices button{width:100%}
.rerr{color:#F3B3BE;font-size:.9rem;min-height:1.2em;text-align:center;margin:8px 0 0}
.rdone{position:relative;margin-top:22px}
[hidden]{display:none!important}
.rdone h3{font:italic 600 2.1rem var(--fd);margin:0 0 6px;color:var(--champ)}
.rdone .link{display:block;margin:14px auto 0;background:none;border:0;color:var(--champ-soft);font:500 11px var(--fl);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;cursor:pointer;min-height:44px}
.burst{position:absolute;left:50%;top:10px;width:0;height:0;pointer-events:none}
.burst img{position:absolute;width:22px;left:-11px;top:-11px;animation:pop 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pop{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(1);opacity:0}}

/* ending */
.end{padding:70px 22px 40px;overflow:hidden;min-height:560px}
.end .med{position:absolute;left:50%;top:40%;width:110%;transform:translate(-50%,-50%);opacity:.09;pointer-events:none}
.end .sc{width:44%;margin:0 auto}
.knot{position:relative;max-width:360px;margin:6px auto 0;touch-action:none}
.knot svg{width:100%;height:auto;display:block;overflow:visible}
.thr{fill:none;stroke:url(#thr);stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.thr-st{fill:none;stroke:#FFF1C8;stroke-width:1;stroke-dasharray:3 5;stroke-linecap:round;opacity:.7}
.hdl{cursor:grab;touch-action:none}
.hdl:focus-visible circle:nth-child(2){stroke:#fff;stroke-width:3}
.kheart{fill:none;stroke:url(#thr);stroke-width:3;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;opacity:0;filter:drop-shadow(0 0 6px rgba(243,213,142,.5))}
.tied .kheart{opacity:1;animation:draw 1.8s ease-in-out .5s forwards}
.tied .hdl{opacity:0;transition:opacity .4s}
.tied #tieBtn,.tied ~ #knotIntro .hint{visibility:hidden}
#tieBtn{display:block;margin:4px auto 0;background:none;border:0;color:var(--champ-soft);font:500 11px var(--fl);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;cursor:pointer;min-height:44px}
.after{opacity:0;transform:translateY(16px);transition:opacity 1.2s ease,transform 1.2s ease;pointer-events:none}
.end.done .after{opacity:1;transform:none;pointer-events:auto}
#kburst{left:50%;top:50%}
.end #fallLayer{opacity:0;transition:opacity 1.5s}
.end.done #fallLayer{opacity:1}
.ty svg{width:100%;height:auto;overflow:visible}
.ty-stroke{fill:none;stroke:#E2C27A;stroke-width:1;stroke-dasharray:900;stroke-dashoffset:900}
.ty-fill{fill:url(#gold);stroke:url(#gold);stroke-width:1.4;stroke-linejoin:round;opacity:0}
.end.done .ty-stroke{animation:draw 2.4s ease-in-out .8s forwards,hide .8s ease 3.4s forwards}
.end.done .ty-fill{animation:fillin 1s ease 2.8s forwards}
.fall{position:absolute;top:-40px;pointer-events:none;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,-40px) rotate(0)}50%{transform:translate(18px,320px) rotate(120deg)}100%{transform:translate(-10px,680px) rotate(240deg);opacity:.2}}
.closing{padding:10px 22px 10px}
.ccard{position:relative;padding:30px 18px 26px;border:1px solid rgba(226,194,122,.6);outline:1px solid rgba(226,194,122,.22);outline-offset:5px;background:rgba(36,8,16,.55)}
.ccard svg{width:100%;height:auto;display:block;overflow:visible;margin:4px 0 2px}
.cdate{margin:0;font:500 12px var(--fl);letter-spacing:.24em;color:var(--champ-soft)}
.foot{padding:26px 16px 40px;font:500 11px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--champ-soft);opacity:.85;text-align:center}
.heart{display:inline-block;color:#E07A8C;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.25)}40%{transform:scale(1.05)}}

/* scroll buddy */
.buddy{position:fixed;z-index:20;top:0;width:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));pointer-events:none;transition:opacity .4s}
.trail{position:fixed;z-index:19;top:0;width:2px;pointer-events:none;background:repeating-linear-gradient(180deg,#C9A04A 0 7px,transparent 7px 12px);opacity:.7}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .nm-stroke,.ty-stroke{display:none}.nm-fill,.ty-fill{opacity:1}
  .hero .date,.hero .small{opacity:1}.reveal{opacity:1;transform:none}
  .fall,.hero .sweep,.hero .tw{display:none}
}

/* ---- added: images that the reference set from JavaScript, now plain files ---- */
img{height:auto}
.page,.opener,.e-back,.e-pocket,.f-out{background-image:url(assets/velvet.webp)}
.e-lin,.f-in{background-image:url(assets/liner.webp)}
.e-card,.card,.scratch{background-image:url(assets/silk.webp)}
.trim{background-image:url(assets/trim.webp)}
.cd{background-image:url(assets/lattice.webp)}

/* ---- added in 1.1.0: Hindi and regional names. Latin text still uses the original fonts;
   other scripts fall back to Noto Serif, which the browser downloads only when such letters appear. ---- */
:root{
  --noto:'Noto Serif Devanagari','Noto Serif Gujarati','Noto Serif Gurmukhi','Noto Serif Bengali','Noto Serif Tamil','Noto Serif Telugu','Noto Serif Kannada','Noto Serif Malayalam';
  --fd:'Playfair Display',var(--noto),Georgia,serif; --fn:'Playfair Display',var(--noto),Georgia,serif;
  --fl:Cinzel,var(--noto),Georgia,serif; --fb:Lora,var(--noto),Georgia,serif;
}
.ev .acts a{cursor:pointer}