/* Saadgi — digital wedding card styles
   Layout: a phone-width stack of ivory cards. 1 unit (--u) = 1px of a 1080px-wide card. */
:root{
  --col:min(100vw,460px); --u:calc(var(--col)/1080);
  --linen:#E6D7C1; --linen-d:#CDBA9E; --ivory:#FBF1E1; --vellum:rgba(255,252,246,.62);
  --ink:#2E2822; --ink-soft:#6E6253; --gold:#B8924A; --gold-d:#8E6B2F; --gold-l:#E8CF97; --hair:rgba(184,146,74,.45);
  --f-disp:"EB Garamond",Garamond,Georgia,serif; --f-sans:"Jost","Century Gothic",Futura,sans-serif;
  --f-ar:"Amiri",serif; --f-ur:"Noto Nastaliq Urdu",serif;
  --foil:linear-gradient(100deg,#7E5D24 0%,#9A7536 25%,#B88F45 40%,#CDA75E 46%,#B08840 54%,#946F31 72%,#7E5D24 100%);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--linen);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--f-disp);background:var(--linen) url("../assets/paper/grain.jpg");background-size:256px;background-blend-mode:multiply}
img{display:block;max-width:100%}
button{font:inherit}
.caps{font-family:var(--f-sans);font-weight:500;text-transform:uppercase;letter-spacing:.3em}
.foil{background:var(--foil);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:foil 7s ease-in-out infinite}
@keyframes foil{0%{background-position:100% 0}60%,100%{background-position:0 0}}

/* line art: a gold drawing plus a brighter copy that a band of light sweeps across */
.art{position:relative;pointer-events:none}
.art img{width:100%;height:auto}
.art .sheen{position:absolute;inset:0;filter:brightness(1.6) saturate(.85);
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 50%,transparent 60%);mask-image:linear-gradient(100deg,transparent 40%,#000 50%,transparent 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%{-webkit-mask-position:100% 0;mask-position:100% 0}60%,100%{-webkit-mask-position:0 0;mask-position:0 0}}
.js .draw{clip-path:inset(100% 0 0 0);transition:clip-path 2.8s cubic-bezier(.45,0,.2,1) .2s}
.js .draw.slow{transition-duration:3.4s;transition-delay:.9s}
.js .sec.in .draw,.js .sec.in.draw{clip-path:inset(0 0 0 0)}
.divider{width:calc(420*var(--u));margin:0 auto}
.js .divider{clip-path:inset(0 50% 0 50%);transition:clip-path 1.6s cubic-bezier(.45,0,.2,1) .5s}
.js .sec.in .divider{clip-path:inset(0 0 0 0)}

/* ================= OPENING ================= */
#opening{position:fixed;inset:0;z-index:40;overflow:hidden;background:var(--linen-d)}
#opening::before{content:"";position:absolute;inset:-40px;background:var(--img) center/cover;filter:blur(22px) brightness(1.02);opacity:.9}
.scene{position:absolute;left:50%;top:50%;width:min(118vw,77dvh,640px);aspect-ratio:1024/1536;container-type:inline-size;
  transform:translate(-50%,-50%) scale(var(--z,1));transition:transform 2.4s cubic-bezier(.5,0,.2,1)}
.scene > .linen{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 70%,transparent 100%)}
.gate{position:absolute;perspective:220cqi}
.inside{position:absolute;inset:0;background:var(--ivory) url("../assets/paper/grain.jpg");background-size:60cqi;background-blend-mode:multiply;box-shadow:inset 0 0 6cqi rgba(120,90,40,.25)}
.inside-glow{position:absolute;inset:0;opacity:0;transition:opacity 1.4s .6s;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,250,236,1),rgba(255,244,214,.4) 60%,transparent)}
.panel{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;transition:transform 2s cubic-bezier(.6,.02,.2,1)}
.panel.l{left:0;transform-origin:0 50%}.panel.r{right:0;transform-origin:100% 50%}
.face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face img{position:absolute;max-width:none;height:auto}
.face.back{transform:rotateY(180deg);background:var(--ivory) url("../assets/paper/grain.jpg");background-size:60cqi;background-blend-mode:multiply;box-shadow:inset 0 0 4cqi rgba(120,90,40,.2)}
.panel.r .face.front{box-shadow:inset .5cqi 0 .8cqi -.4cqi rgba(90,60,20,.25)}
.open .panel.l{transform:rotateY(-172deg)}
.open .panel.r{transform:rotateY(172deg)}
.open .inside-glow{opacity:1}
.band{position:absolute;left:-1.5%;right:-1.5%;top:44%;height:13%;z-index:3;transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .9s}
.band-strip{position:absolute;inset:0;background:linear-gradient(180deg,#F3E6D2,#FBF3E6 40%,#EFE0C9);
  box-shadow:0 .8cqi 2cqi rgba(90,60,25,.25),inset 0 .35cqi 0 #fff,inset 0 -.25cqi 0 rgba(140,105,50,.2)}
.band-strip::before,.band-strip::after{content:"";position:absolute;left:0;right:0;height:.25cqi;background:var(--foil);background-size:260% 100%;animation:foil 7s ease-in-out infinite}
.band-strip::before{top:9%}.band-strip::after{bottom:9%}
.crest{position:absolute;left:50%;top:50%;width:36cqi;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;cursor:pointer;border-radius:50%;
  background:radial-gradient(circle,#FFFCF5 0%,#FBF2E3 62%,#F2E4CD 100%);box-shadow:0 1.2cqi 3cqi rgba(90,60,25,.3),inset 0 0 0 .3cqi #fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.crest .wreath{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.crest .mono{position:relative;font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:9.4cqi;line-height:1;display:flex;align-items:baseline;gap:.6cqi}
.crest .mono b,.crest-sm .mono b{font-weight:500;background:var(--foil);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:foil 7s ease-in-out infinite}
.crest .mono i{font-size:.55em;color:var(--gold-d)}
.crest .cdate{position:relative;margin-top:1.2cqi;font-family:var(--f-sans);font-weight:500;font-size:2.1cqi;letter-spacing:.32em;color:var(--gold-d)}
.crest::after{content:"";position:absolute;inset:-2.6cqi;border-radius:50%;border:.25cqi solid var(--gold-l);opacity:0;animation:ring 2.8s ease-out infinite 1.5s}
@keyframes ring{0%{opacity:.9;transform:scale(.88)}100%{opacity:0;transform:scale(1.18)}}
.crest:hover{transform:translate(-50%,-50%) scale(1.03)}
.crest:focus-visible{outline:.4cqi solid var(--gold-d);outline-offset:1cqi}
.tag{position:absolute;left:12%;right:12%;top:69%;display:flex;flex-direction:column;align-items:center;gap:1.4cqi;text-align:center;transition:opacity .7s}
.tag .to{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:5cqi;color:var(--ink);line-height:1.2}
.tag .inv{font-family:var(--f-sans);font-weight:500;font-size:2.3cqi;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-d)}
.untie .band{transform:translateY(55%);opacity:0;pointer-events:none}
.untie .tag{opacity:0}
.hint{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;z-index:2;transition:opacity .5s}
.hint span{display:inline-block;padding:8px 18px;border-radius:999px;background:rgba(251,241,225,.82);color:var(--gold-d);border:1px solid var(--hair);
  font-family:var(--f-sans);font-size:12px;letter-spacing:.3em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.untie ~ .hint{opacity:0}
#flash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .7s ease;background:radial-gradient(circle at 50% 50%,#FFFDF8,#FBF1E1 70%,#F1E3CB)}
#flash.on{opacity:1}
#petals{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}

/* ================= CONTROLS ================= */
.langbtn,.replay,.musicbtn{position:fixed;z-index:70;cursor:pointer;color:var(--gold-d);background:rgba(251,243,230,.82);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(90,60,25,.12)}
.langbtn{top:calc(14px + env(safe-area-inset-top,0px));left:max(14px,calc(env(safe-area-inset-left,0px) + 14px));padding:5px 14px;border-radius:999px;font-family:var(--f-ur);font-size:14px;line-height:1.9}
html.ur .langbtn{font-family:var(--f-sans);font-size:12px;letter-spacing:.2em;line-height:1.6;padding:7px 14px;text-transform:uppercase}
.replay{top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,calc(env(safe-area-inset-right,0px) + 14px));display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  font-family:var(--f-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.replay svg{width:14px;height:14px}
.musicbtn{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(14px,calc(env(safe-area-inset-right,0px) + 14px));width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.musicbtn svg{width:20px;height:20px}
.musicbtn .slash{display:none}.musicbtn.off{color:#B5A893}.musicbtn.off .slash{display:inline}
.musicbtn:not(.off) svg{animation:beat 2.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.08)}}
@media (min-width:461px){ .langbtn{left:calc(50% - 230px + 14px)} .replay{right:calc(50% - 230px + 14px)} .musicbtn{right:calc(50% - 230px + 14px)} }

/* ================= THE STACK ================= */
#card{position:relative;width:var(--col);margin:0 auto;padding-top:12px}
.sec{position:sticky;top:0;min-height:100svh;margin-top:12px;overflow-x:clip;transform-origin:50% 0;
  background:var(--ivory) url("../assets/paper/grain.jpg");background-size:256px;background-blend-mode:multiply;
  box-shadow:0 -10px 28px rgba(90,60,25,.16),0 -1px 2px rgba(90,60,25,.12)}
.sec::before{content:"";position:absolute;left:0;right:0;top:-12px;height:14px;background:url("../assets/paper/deckle.png") repeat-x;background-size:512px 14px;filter:drop-shadow(0 -2px 2px rgba(90,60,25,.12))}
.sec:nth-child(odd)::before{background-position:173px 0}
.sec::after{content:"";position:absolute;inset:0;pointer-events:none;background:#3A2C1C;opacity:var(--dim,0)}
.in-wrap{position:relative;z-index:2;padding:calc(250*var(--u)) calc(90*var(--u)) calc(200*var(--u));text-align:center;display:flex;flex-direction:column;align-items:center}
.js .rise{opacity:0;transform:translateY(calc(34*var(--u)));transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .sec.in .rise{opacity:1;transform:none}
.sec.in .rise:nth-child(2){transition-delay:.15s}.sec.in .rise:nth-child(3){transition-delay:.3s}.sec.in .rise:nth-child(4){transition-delay:.45s}.sec.in .rise:nth-child(5){transition-delay:.6s}.sec.in .rise:nth-child(6){transition-delay:.75s}
.art.bottom{position:absolute;left:0;right:0;bottom:calc(30*var(--u));margin:0 auto;z-index:1}
.mv{position:absolute;pointer-events:none;z-index:1}

/* headings */
.head{display:flex;flex-direction:column;align-items:center;gap:calc(20*var(--u));margin-bottom:calc(70*var(--u))}
.eyebrow{font-size:max(11px,calc(24*var(--u)));color:var(--gold-d);font-weight:400}
.h{margin:0;font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:calc(104*var(--u));line-height:1.1;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.85);text-wrap:balance}
p{text-wrap:pretty}
.vellum{position:relative;width:100%;margin-top:calc(60*var(--u));padding:calc(40*var(--u)) calc(50*var(--u));background:var(--vellum);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(90,60,25,.1)}
.vellum::before,.vellum::after{content:"";position:absolute;left:calc(40*var(--u));right:calc(40*var(--u));height:1px;background:var(--hair)}
.vellum::before{top:calc(16*var(--u))}.vellum::after{bottom:calc(16*var(--u))}
.vellum .ar{font-family:var(--f-ar);font-size:calc(52*var(--u));line-height:1.75;color:var(--gold-d)}
.vellum p{margin:calc(6*var(--u)) 0 0;font-style:italic;font-size:max(14.5px,calc(38*var(--u)));line-height:1.55;color:var(--ink-soft)}

/* 1 · COVER */
.s-cover .in-wrap{padding-top:calc(230*var(--u))}
.bism{font-family:var(--f-ar);font-size:calc(64*var(--u));color:var(--gold-d);line-height:1.6}
.bism-en{margin:calc(2*var(--u)) 0 calc(36*var(--u));font-style:italic;font-size:max(13.5px,calc(34*var(--u)));line-height:1.5;color:var(--ink-soft)}
.archwrap{position:relative;width:calc(820*var(--u));margin-top:calc(40*var(--u))}
.arch-in{position:absolute;left:18%;right:18%;top:27%;bottom:5.5%;display:flex;flex-direction:column;align-items:center}
.wed-of{font-size:max(11px,calc(21*var(--u)));letter-spacing:.24em;color:var(--gold-d);white-space:nowrap}
.names{margin:calc(26*var(--u)) 0 0;font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:calc(122*var(--u));line-height:1;display:flex;flex-direction:column;align-items:center}
.names em{font-size:.5em;color:var(--gold);margin:calc(10*var(--u)) 0;font-style:italic}
.names .foil{padding:0 .08em}
.couple{width:calc(330*var(--u));margin-top:auto}
.names.sm{flex-direction:row;align-items:baseline;gap:.2em;font-size:calc(104*var(--u));margin:0}
.names.sm em{margin:0}

/* 2 · DAWAT */
.frame{position:absolute;inset:calc(40*var(--u)) calc(28*var(--u));border-style:solid;border-width:calc(190*var(--u));
  border-image:url("../assets/lines/dawat-border.png") 230 / calc(190*var(--u)) stretch;z-index:1}
.s-dawat .in-wrap{min-height:100svh;justify-content:space-evenly;padding:calc(250*var(--u)) calc(140*var(--u)) calc(230*var(--u))}
.s-dawat .h{font-size:calc(84*var(--u))}
.crest-sm{position:relative;width:calc(250*var(--u));aspect-ratio:1;display:grid;place-items:center}
.crest-sm .wreath{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.crest-sm .mono{font-family:var(--f-disp);font-style:italic;font-size:calc(62*var(--u));display:flex;align-items:baseline;gap:calc(6*var(--u))}
.crest-sm .mono i{font-size:.55em;color:var(--gold-d)}
.invite{display:flex;flex-direction:column;align-items:center;gap:calc(40*var(--u))}
.dear{font-style:italic;font-weight:500;font-size:max(17px,calc(56*var(--u)));color:var(--ink)}
.invite .sal{font-size:max(11px,calc(25*var(--u)));color:var(--gold-d)}
.invite .hosts{font-family:var(--f-sans);font-weight:400;font-size:max(13px,calc(36*var(--u)));letter-spacing:.14em;color:var(--ink)}
.invite p{margin:0;font-style:italic;font-size:max(15.5px,calc(44*var(--u)));line-height:1.65;color:var(--ink-soft);max-width:calc(720*var(--u))}
.couple-names{display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u))}
.couple-names .nm{font-style:italic;font-weight:500;font-size:calc(98*var(--u));line-height:1.18;padding:0 .1em}
.couple-names .joiner{font-style:italic;font-size:calc(38*var(--u));color:var(--gold-d)}
.couple-names small{margin-top:calc(4*var(--u));font-family:var(--f-sans);font-weight:400;font-size:max(12px,calc(28*var(--u)));letter-spacing:.06em;color:var(--ink-soft)}

/* 3 · DATE */
.s-date .in-wrap{padding-bottom:calc(520*var(--u))}
.faisal{width:calc(1000*var(--u))}
.dateblock{display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--u));width:100%}
.dmonth,.dyear{font-size:max(11px,calc(30*var(--u)));color:var(--gold-d);letter-spacing:.42em;padding-inline-start:.42em}
.drow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(26*var(--u));width:100%}
.dside{font-size:max(11px,calc(27*var(--u)));color:var(--ink);padding:calc(18*var(--u)) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);letter-spacing:.24em;white-space:nowrap}
.dday{font-family:var(--f-disp);font-weight:500;font-size:calc(230*var(--u));line-height:1;padding:0 .04em;font-variant-numeric:lining-nums}
.venue{display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u));margin-top:calc(56*var(--u))}
.venue .lab{font-size:max(11px,calc(22*var(--u)));color:var(--gold-d)}
.venue b{font-weight:500;font-size:max(17px,calc(50*var(--u)));color:var(--ink)}
.venue .addr{font-family:var(--f-sans);font-weight:400;font-size:max(12px,calc(29*var(--u)));color:var(--ink-soft);letter-spacing:.03em}
.prog{list-style:none;margin:calc(56*var(--u)) 0 0;padding:0;width:calc(760*var(--u))}
.prog li{display:flex;align-items:baseline;gap:calc(16*var(--u));padding:calc(12*var(--u)) 0}
.prog li b{font-family:var(--f-sans);font-weight:400;font-size:max(11px,calc(27*var(--u)));letter-spacing:.18em;color:var(--gold-d);white-space:nowrap}
.prog li i{flex:1;border-bottom:1px dotted var(--gold);opacity:.7;transform:translateY(-.3em)}
.prog li span{font-style:italic;font-size:max(15.5px,calc(42*var(--u)));color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 24px;margin-top:calc(60*var(--u));cursor:pointer;text-decoration:none;
  font-family:var(--f-sans);font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d);background:transparent;border:1px solid var(--gold);border-radius:2px;
  transition:background .3s,color .3s}
.btn:hover{background:rgba(184,146,74,.1)}
.btn svg{width:15px;height:15px}
.btn.solid{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn.solid:hover{background:#463C32}
.btn:focus-visible,.inp:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.birds{width:calc(170*var(--u));animation:glide 26s linear infinite}
.birds img{animation:bob 3s ease-in-out infinite}
.birds.b1{top:calc(1200*var(--u));animation-delay:-6s}
.birds.b2{top:calc(1150*var(--u));animation-delay:-15s}
@keyframes glide{from{left:calc(-200*var(--u))}to{left:calc(1200*var(--u))}}
@keyframes bob{50%{transform:translateY(calc(-14*var(--u))) rotate(-2deg)}}

/* 4 · COUNTDOWN */
.moon{width:calc(380*var(--u));margin-bottom:calc(30*var(--u))}
.lantern{top:-2px;right:calc(80*var(--u));width:calc(96*var(--u));transform-origin:50% 0;animation:swing 5s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(2.2deg)}50%{transform:rotate(-2.2deg)}}
.s-count .in-wrap{min-height:100svh;justify-content:center;padding-top:calc(160*var(--u))}
.cd{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
.cd div{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--u));padding:calc(10*var(--u)) 0}
.cd div + div{border-inline-start:1px solid var(--hair)}
.cd b{font-family:var(--f-disp);font-weight:500;font-size:calc(124*var(--u));line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.cd span{font-family:var(--f-sans);font-size:max(11px,calc(21*var(--u)));letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d)}
.until{margin:calc(56*var(--u)) 0 0;font-style:italic;font-size:max(15.5px,calc(44*var(--u)));color:var(--ink-soft)}
.until em{color:var(--gold-d)}
.cdnote{margin:0;font-style:italic;font-size:max(15px,calc(46*var(--u)));color:var(--ink)}

/* 5 · CELEBRATIONS */
.s-events .in-wrap{padding-bottom:calc(660*var(--u))}
.badshahi{width:calc(960*var(--u))}
.events{display:flex;flex-direction:column;align-items:center;gap:calc(40*var(--u));width:100%}
.ev{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--u))}
.ev h3{margin:0;font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:calc(84*var(--u));line-height:1.15}
.ev .meta{font-size:max(11px,calc(24*var(--u)));color:var(--gold-d);letter-spacing:.24em}
.ev .vn{font-weight:500;font-size:max(16px,calc(44*var(--u)));color:var(--ink);margin-top:calc(6*var(--u))}
.ev .ad{font-family:var(--f-sans);font-weight:400;font-size:max(12px,calc(28*var(--u)));color:var(--ink-soft)}
.ev .note{font-style:italic;font-size:max(14.5px,calc(36*var(--u)));color:var(--gold-d)}
.ev .links{display:flex;gap:calc(40*var(--u));margin-top:calc(14*var(--u))}
.ev .links a{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:8px 0;border-bottom:1px solid var(--gold)}
.ev .links svg{width:14px;height:14px;color:var(--gold-d)}
.events .divider{width:calc(300*var(--u))}

/* 6 · FAMILIES */
.trees{width:100%;bottom:0}
.s-family .in-wrap{min-height:100svh}
.fam{position:absolute;left:calc(170*var(--u));right:calc(170*var(--u));bottom:calc(330*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(40*var(--u))}
.fam > div:not(.art){display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u))}
.fam h3{margin:0 0 calc(10*var(--u));font-size:max(11px,calc(23*var(--u)));color:var(--gold-d);font-weight:400}
.fam span{font-weight:500;font-size:max(16.5px,calc(46*var(--u)));color:var(--ink);line-height:1.4}
.fam .divider{width:calc(320*var(--u))}

/* 7 · STORY */
.s-story .in-wrap{padding-bottom:calc(600*var(--u))}
.hands{width:calc(960*var(--u))}
.timeline{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(70*var(--u));width:100%}
.st + .st::after{content:"";position:absolute;left:50%;top:calc(-62*var(--u));height:calc(52*var(--u));width:1px;background:var(--hair);transform-origin:top;
  transform:scaleY(var(--tl,0));transition:transform 1.4s cubic-bezier(.45,0,.2,1) .8s}
.sec.in .st + .st::after{--tl:1}
.st{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u));padding:0 calc(30*var(--u));max-width:calc(760*var(--u))}
.st::before{content:"";width:calc(18*var(--u));height:calc(18*var(--u));transform:rotate(45deg);border:1px solid var(--gold);background:var(--ivory);margin-bottom:calc(14*var(--u))}
.st .when{font-size:max(11px,calc(22*var(--u)));color:var(--gold-d)}
.st h4{margin:0;font-style:italic;font-weight:500;font-size:calc(68*var(--u));color:var(--ink)}
.st p{margin:0;font-size:max(14.5px,calc(37*var(--u)));line-height:1.55;color:var(--ink-soft)}

/* 8 · RSVP */
.s-rsvp .in-wrap{padding-bottom:calc(560*var(--u))}
.envelope{width:calc(640*var(--u))}
.rs{width:100%;text-align:start}
.f{display:flex;flex-direction:column;gap:4px;margin-top:calc(34*var(--u))}
.f:first-child{margin-top:0}
.f > span,legend{font-family:var(--f-sans);font-size:max(11px,calc(22*var(--u)));letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d)}
.inp{width:100%;font-family:var(--f-disp);font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:8px 2px;border-radius:0;outline:none;resize:none}
.inp:focus{border-bottom-color:var(--gold-d)}
.inp::placeholder{color:#B4A690;font-style:italic}
fieldset{border:0;margin:calc(34*var(--u)) 0 0;padding:0}
legend{padding:0;margin-bottom:10px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{display:grid;place-items:center;text-align:center;min-height:46px;padding:8px 6px;cursor:pointer;font-style:italic;font-size:16.5px;color:var(--ink);border:1px solid var(--hair);transition:.25s}
.choice input:checked + label{border-color:var(--gold-d);background:rgba(184,146,74,.12);color:var(--gold-d)}
.choice input:focus-visible + label{outline:2px solid var(--gold-d);outline-offset:2px}
.err{color:#8E2A1E;font-size:14px;margin:12px 0 0}
#rsvp .btn{width:100%}
.done{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:center;font-style:italic;font-size:16px;color:var(--ink-soft)}
.done .btn{margin-top:14px}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:calc(50*var(--u));padding-top:calc(30*var(--u));border-top:1px solid var(--hair);
  font-family:var(--f-sans);font-weight:400;font-size:13px;color:var(--ink-soft);letter-spacing:.04em;text-align:center}
.wa{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-weight:400}
.wa svg{width:20px;height:20px}

/* 9 · SHUKRIYA */
.s-thanks .in-wrap{min-height:100svh;justify-content:center;padding-bottom:calc(640*var(--u))}
.dome{width:calc(560*var(--u))}
.signoff{margin-top:calc(46*var(--u));font-size:max(11px,calc(24*var(--u)));color:var(--gold-d)}
.foot{text-align:center;padding:26px 0 calc(80px + env(safe-area-inset-bottom,0px));font-size:10px;color:var(--gold-d);letter-spacing:.5em}

/* ================= URDU ================= */
html.ur body{font-family:var(--f-ur)}
html.ur .caps,html.ur .eyebrow,html.ur .btn,html.ur .hint span,html.ur .replay span,html.ur .f > span,html.ur legend,html.ur .cd span,html.ur .ev .links a,html.ur .tag .inv,html.ur .venue .lab,html.ur .fam h3,html.ur .st .when,html.ur .dside{
  font-family:var(--f-ur);letter-spacing:0;text-transform:none}
html.ur .h,html.ur .names,html.ur .couple-names .nm,html.ur .ev h3,html.ur .st h4,html.ur .dear,html.ur .tag .to{font-family:var(--f-ur);font-style:normal;font-weight:600;line-height:2}
html.ur .h{font-size:calc(70*var(--u))}
html.ur .names{font-size:calc(84*var(--u));line-height:1.9}
html.ur .names.sm{font-size:calc(80*var(--u))}
html.ur .arch-in .names{flex-direction:row;align-items:baseline;gap:.25em;font-size:calc(76*var(--u))}
html.ur .arch-in .names em{margin:0}
.mono,.cdate{direction:ltr;unicode-bidi:isolate}
html.ur .couple-names .nm{font-size:calc(64*var(--u))}
html.ur .ev h3{font-size:calc(58*var(--u))}
html.ur .st h4{font-size:calc(48*var(--u))}
html.ur .tag .to{font-size:3.6cqi}
html.ur .invite p,html.ur .vellum p,html.ur .st p,html.ur .until,html.ur .bism-en,html.ur .ev .note,html.ur .done,html.ur .choice label,html.ur .prog li span{font-style:normal;line-height:2.1}
html.ur .invite .hosts,html.ur .venue b,html.ur .ev .vn,html.ur .fam span{font-family:var(--f-ur);letter-spacing:0;line-height:2}
html.ur .dmonth,html.ur .dyear{letter-spacing:0;padding:0}
html.ur .inp{font-family:var(--f-ur);font-size:15px;line-height:2}
html.ur .dday,html.ur .cd b{font-family:var(--f-disp)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .birds{display:none}
}