/* Haveli — digital wedding card styles
   Layout: a phone-width column; each section is one room of the haveli, its lights coming on as it arrives. 1 --u = 1px of a 1080px-wide column. */
:root{
  --col:min(100vw,460px); --u:calc(var(--col)/1080);
  --paper:#FBE4C0; --paper-d:#F3D3A3; --cream:#FFF4E2; --ink:#3A2213; --ink-soft:#6E4B33;
  --terra:#A3432A; --terra-d:#7C2E1C; --teal:#1F5E63; --gold:#B8883A; --gold-l:#E9C987; --wood:#4A2615; --night:#14233A;
  --f-caps:"Cinzel","Trajan Pro",Georgia,serif; --f-body:"EB Garamond",Garamond,Georgia,serif; --f-ar:"Amiri",serif; --f-ur:"Noto Nastaliq Urdu",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#2A170C;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--f-body);background:#2A170C radial-gradient(120% 50% at 50% 0%,#4A2A16,#2A170C)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.caps{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.16em;font-weight:600}

/* ================= OPENING ================= */
#opening{position:fixed;inset:0;z-index:40;overflow:hidden;background:#2A170C}
.scene{position:absolute;left:50%;top:50%;width:max(100vw,calc(100dvh * 1024 / 1536));aspect-ratio:1024/1536;container-type:inline-size;
  transform:translate(-50%,-50%) scale(var(--z,1));transform-origin:50% 62%;transition:transform 1.6s cubic-bezier(.6,0,.3,1),opacity .8s}
.scene > img.bg{position:absolute;inset:0;width:100%;height:100%}
.door{position:absolute;perspective:180cqi}
.inner{position:absolute;inset:0;background:#1C0F07;overflow:hidden}
.glow{position:absolute;inset:0;opacity:0;transition:opacity 1s .3s;background:radial-gradient(ellipse 70% 60% at 50% 55%,#FFF2D2,#F7C66E 40%,#B9701E 80%,#5A2E0E)}
.leaf{position:absolute;top:0;width:50%;height:100%;overflow:hidden;transition:transform 2.1s cubic-bezier(.45,.05,.2,1)}
.leaf img{position:absolute;max-width:none;height:auto}
.leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,8,0,0),rgba(20,8,0,.55));opacity:0;transition:opacity 2s}
.leaf.l{left:0;transform-origin:0 50%;clip-path:polygon(0 12.6%,30% 6.2%,65% 2.2%,100% 0,100% 100%,0 100%)}
.leaf.r{right:0;transform-origin:100% 50%;clip-path:polygon(0 0,35% 2.2%,70% 6.2%,100% 12.6%,100% 100%,0 100%)}
.leaf.r::after{background:linear-gradient(270deg,rgba(20,8,0,0),rgba(20,8,0,.55))}
.open .leaf.l{transform:rotateY(-108deg)}
.open .leaf.r{transform:rotateY(108deg)}
.open .leaf::after,.open .glow{opacity:1}
.garland-front{position:absolute;left:23.44%;top:35.16%;width:54.69%;pointer-events:none;z-index:2}
.knock{position:absolute;z-index:3;width:15cqi;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1.4cqi}
.knock img{width:100%;filter:drop-shadow(0 1cqi 1.6cqi rgba(0,0,0,.55)) drop-shadow(0 0 2cqi rgba(255,210,120,.55));animation:knockGlow 2.2s ease-in-out infinite;transform-origin:50% 12%}
.knock span{white-space:nowrap;font-family:var(--f-caps);font-weight:600;font-size:min(2.6cqi,13px);letter-spacing:.2em;text-transform:uppercase;color:#FFF0D2;background:rgba(40,18,6,.78);padding:1cqi 2.6cqi;border-radius:99px;border:1px solid rgba(233,201,135,.6)}
@keyframes knockGlow{50%{filter:drop-shadow(0 1cqi 1.6cqi rgba(0,0,0,.55)) drop-shadow(0 0 4cqi rgba(255,210,120,.95))}}
.knock.hit img{animation:hit .5s ease-in-out 2}
@keyframes hit{30%{transform:rotate(-14deg)}60%{transform:rotate(4deg)}}
.knock:focus-visible{outline:2px solid var(--gold-l);outline-offset:6px;border-radius:12px}
.open .knock,.knocked .knock span{opacity:0;pointer-events:none;transition:opacity .4s}
.scene.through{opacity:0}
.hint{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;z-index:3;transition:opacity .4s}
.hint span{display:inline-block;padding:8px 16px;border-radius:99px;background:rgba(40,18,6,.75);color:#FFF0D2;font-family:var(--f-body);font-style:italic;font-size:15px;border:1px solid rgba(233,201,135,.45)}
.knocked ~ .hint{opacity:0}
.welcome{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity 1s;background:#2A170C;display:flex;align-items:center;justify-content:center}
.welcome .cut{position:absolute;left:50%;top:50%;width:max(100vw,calc(100dvh * 1024 / 1536));max-width:none;transform:translate(-50%,-50%) scale(1.06);filter:brightness(.35) saturate(.7);transition:filter 2.4s ease .3s,transform 4s ease}
.welcome.on{opacity:1}
.welcome.on .cut{filter:brightness(1) saturate(1);transform:translate(-50%,-50%) scale(1)}
.w-txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:-52vh;padding:18px 20px 12px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(251,228,192,.92),rgba(251,228,192,.75) 60%,transparent 75%);opacity:0;transform:translateY(10px);transition:opacity 1s 1s,transform 1s 1s}
.welcome.on .w-txt{opacity:1;transform:none}
.w-to{margin:0;font-style:italic;font-size:19px;color:var(--terra-d)}
.w-pre{font-size:11.5px;color:var(--ink-soft)}
#flash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(circle,#FFF6E4,#FBE4C0 60%,#F0C98C)}
#flash.on{opacity:1}
#sparks{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}

/* ================= CONTROLS ================= */
.langbtn,.replay,.musicbtn,.roomtag{position:fixed;z-index:70;color:#FFF0D2;background:rgba(58,34,19,.82);border:1px solid rgba(233,201,135,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.langbtn{top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,calc(env(safe-area-inset-left,0px) + 12px));padding:5px 13px;border-radius:99px;cursor:pointer;font-family:var(--f-ur);font-size:14px;line-height:1.9}
html.ur .langbtn{font-family:var(--f-caps);font-size:11px;letter-spacing:.12em;line-height:1.6;padding:7px 12px}
.replay{top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,calc(env(safe-area-inset-right,0px) + 12px));width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.replay svg{width:17px;height:17px}
.musicbtn{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(14px,calc(env(safe-area-inset-right,0px) + 14px));width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.musicbtn svg{width:21px;height:21px}
.musicbtn .slash{display:none}.musicbtn.off{color:#B9A58A}.musicbtn.off .slash{display:inline}
.roomtag{top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;white-space:nowrap;
  font-family:var(--f-caps);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.roomtag svg{width:15px;height:15px;color:var(--gold-l)}
.roomtag.swap span{animation:tagIn .5s ease}
@keyframes tagIn{from{opacity:0;transform:translateY(4px)}}
html.ur .roomtag{font-family:var(--f-ur);letter-spacing:0;text-transform:none;font-size:12px;line-height:1.9;padding:3px 14px}
@media (min-width:461px){ .langbtn{left:calc(50% - 230px + 12px)} .replay{right:calc(50% - 230px + 12px)} .musicbtn{right:calc(50% - 230px + 14px)} }

/* ================= THE HAVELI ================= */
#card{position:relative;width:var(--col);margin:0 auto;overflow:hidden;background:var(--paper) linear-gradient(180deg,#FCE9C9,#F8DDB3);box-shadow:0 0 60px rgba(0,0,0,.5)}
.room{position:relative;padding:calc(250*var(--u)) calc(60*var(--u)) calc(120*var(--u));display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(54*var(--u))}
.room + .room::before{content:"";position:absolute;top:0;left:calc(60*var(--u));right:calc(60*var(--u));height:calc(26*var(--u));
  background:linear-gradient(90deg,transparent,var(--terra) 12%,var(--terra) 88%,transparent) center/100% 2px no-repeat,
             radial-gradient(circle,var(--gold) 0 calc(9*var(--u)),transparent calc(10*var(--u))) center/calc(60*var(--u)) 100% repeat-x;opacity:.7}
.mv{position:absolute;pointer-events:none;z-index:4}
.mv img{width:100%}

.head{display:flex;flex-direction:column;align-items:center;gap:calc(18*var(--u))}
.floor{font-size:max(10px,calc(24*var(--u)));color:var(--terra);letter-spacing:.3em}
.h{margin:0;font-family:var(--f-caps);font-weight:600;font-size:calc(76*var(--u));line-height:1.15;color:var(--wood);letter-spacing:.06em;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.rule{display:block;width:calc(300*var(--u));height:calc(22*var(--u));background:
  radial-gradient(circle,var(--terra) 0 calc(7*var(--u)),transparent calc(8*var(--u))) center/calc(22*var(--u)) 100% no-repeat,
  linear-gradient(var(--gold),var(--gold)) left center/42% 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) right center/42% 1.5px no-repeat}
.sub{margin:0;font-style:italic;font-size:max(15px,calc(42*var(--u)));color:var(--ink-soft)}
.eyebrow{font-size:max(10px,calc(26*var(--u)));color:var(--terra);letter-spacing:.32em}

/* each room drawing: lights off until the room arrives */
.pic{position:relative;margin:0;width:calc(1000*var(--u));max-width:none;filter:drop-shadow(0 calc(16*var(--u)) calc(26*var(--u)) rgba(70,30,5,.35))}
.pic > img:first-child{width:100%;filter:brightness(.42) saturate(.65) sepia(.15);transition:filter 1.8s ease}
.room.lit .pic > img:first-child{filter:none}
.pic::after{content:"";position:absolute;inset:4%;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(255,214,140,.55),transparent 65%);opacity:0;mix-blend-mode:screen}
.room.lit .pic::after{animation:lampOn 2.4s ease .2s}
@keyframes lampOn{0%{opacity:0}12%{opacity:.9}18%{opacity:.2}26%{opacity:.85}100%{opacity:0}}

/* paper card */
.paper{background:var(--cream);border-radius:calc(10*var(--u));padding:calc(36*var(--u)) calc(44*var(--u));position:relative;
  box-shadow:inset 0 0 0 calc(5*var(--u)) var(--cream),inset 0 0 0 calc(7*var(--u)) var(--terra),inset 0 0 0 calc(12*var(--u)) var(--cream),inset 0 0 0 calc(13*var(--u)) var(--gold),0 calc(10*var(--u)) calc(24*var(--u)) rgba(70,30,5,.2)}
.dua{width:100%}
.dua .ar{font-family:var(--f-ar);font-size:calc(54*var(--u));line-height:1.75;color:var(--terra-d)}
.dua p{margin:calc(6*var(--u)) 0 0;font-style:italic;font-size:max(15px,calc(40*var(--u)));line-height:1.5;color:var(--ink-soft)}
.signoff{margin-top:calc(20*var(--u));padding-top:calc(18*var(--u));border-top:1px solid rgba(163,67,42,.35);font-size:max(11px,calc(26*var(--u)));color:var(--terra);letter-spacing:.2em}

/* brass nameplate */
.plate{position:relative;width:calc(860*var(--u));display:grid;place-items:center}
.plate img{width:100%}
.plate span{position:absolute;left:11%;right:11%;top:16%;bottom:16%;display:flex;align-items:center;justify-content:center;gap:.28em;flex-wrap:wrap;
  font-family:var(--f-caps);font-weight:700;font-size:calc(66*var(--u));line-height:1.05;letter-spacing:.06em;color:#5A3510;
  text-shadow:0 1px 0 rgba(255,236,180,.85),0 -1px 0 rgba(70,40,5,.45)}
.plate span i{font-family:var(--f-body);font-style:italic;font-weight:500;font-size:.8em;color:#7A4A16}
.plate.sm{width:min(78vw,340px)}
.plate.sm span{font-size:min(6.2vw,28px)}

/* cover */
.room[data-room="deorhi"]{padding-top:calc(230*var(--u))}
.bism{font-family:var(--f-ar);font-size:calc(68*var(--u));line-height:1.55;color:var(--terra-d)}
.bism-en{margin:0;font-style:italic;font-size:max(14px,calc(36*var(--u)));line-height:1.45;color:var(--ink-soft)}
.pigeons{width:calc(260*var(--u));animation:fly 16s linear infinite}
.pigeons.p1{top:calc(1060*var(--u));animation-delay:-3s}
.pigeons.p2{top:calc(560*var(--u));animation-delay:-9s;animation-duration:20s}
@keyframes fly{0%{left:calc(-300*var(--u));transform:translateY(0)}50%{transform:translateY(calc(-60*var(--u)))}100%{left:calc(1180*var(--u));transform:translateY(calc(-20*var(--u)))}}

/* dalaan */
.pankha{position:absolute;left:50%;top:calc(30*var(--u));width:calc(300*var(--u));transform-origin:50% 30%;animation:fan 5s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));z-index:4}
.room[data-room="baithak"]{padding-top:calc(330*var(--u))}
@keyframes fan{0%,100%{transform:translateX(-50%) rotateY(-28deg)}50%{transform:translateX(-50%) rotateY(28deg)}}
.scroll{position:relative;width:calc(900*var(--u));margin-top:calc(-10*var(--u))}
.scroll > img{width:100%}
.scroll-in{position:absolute;left:14%;right:14%;top:11%;bottom:28%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:calc(6*var(--u))}
.dear{font-style:italic;font-weight:500;font-size:max(15px,calc(44*var(--u)));color:var(--terra-d)}
.sal{font-size:max(10px,calc(24*var(--u)));color:var(--terra);letter-spacing:.24em}
.hosts{font-size:max(11px,calc(30*var(--u)));color:var(--wood);letter-spacing:.08em}
.scroll-in p{margin:0;font-style:italic;font-size:max(14px,calc(38*var(--u)));line-height:1.45;color:var(--ink-soft)}
.scroll-in .nm{font-family:var(--f-caps);font-weight:700;font-size:calc(58*var(--u));line-height:1.1;color:var(--terra-d)}
.joiner{font-style:italic;font-size:max(14px,calc(34*var(--u)));color:var(--gold);margin:calc(-6*var(--u)) 0}
.scroll-in small{font-style:italic;font-size:max(12px,calc(30*var(--u)));color:var(--ink-soft)}

/* bride's room: calendar */
.calendar{position:relative;width:calc(700*var(--u));margin-top:calc(-10*var(--u))}
.cal-in{position:absolute;left:15%;right:15%;top:31%;bottom:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8*var(--u))}
.cwk{font-size:max(11px,calc(28*var(--u)));color:var(--terra);letter-spacing:.24em}
.cday{font-family:var(--f-caps);font-weight:700;font-size:calc(230*var(--u));line-height:.95;color:var(--terra-d)}
.cmon{font-size:max(12px,calc(34*var(--u)));color:var(--wood);letter-spacing:.2em}
.ctime{font-style:italic;font-size:max(15px,calc(40*var(--u)));color:var(--ink-soft);border-top:1px solid rgba(163,67,42,.35);padding-top:calc(10*var(--u));margin-top:calc(6*var(--u))}
.venue{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--u))}
.venue .lab{font-size:max(10px,calc(22*var(--u)));color:var(--terra);letter-spacing:.3em}
.venue b{font-family:var(--f-caps);font-weight:600;font-size:max(16px,calc(46*var(--u)));color:var(--wood);letter-spacing:.04em}
.venue .addr{font-size:max(14px,calc(36*var(--u)));color:var(--ink-soft)}
.prog{list-style:none;margin:calc(26*var(--u)) 0 0;padding:0;width:calc(760*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.prog li{display:flex;align-items:baseline;gap:calc(16*var(--u))}
.prog li b{font-family:var(--f-caps);font-weight:600;font-size:max(11px,calc(28*var(--u)));letter-spacing:.06em;color:var(--terra);white-space:nowrap}
.prog li i{flex:1;border-bottom:1px dotted var(--gold);transform:translateY(-.3em)}
.prog li span{font-style:italic;font-size:max(15px,calc(40*var(--u)))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 24px;margin-top:calc(30*var(--u));cursor:pointer;text-decoration:none;border-radius:99px;
  font-family:var(--f-caps);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);background:transparent;border:1.5px solid var(--terra)}
.btn svg{width:15px;height:15px}
.btn.solid{background:linear-gradient(var(--terra),var(--terra-d));color:#FFF0D2;border-color:var(--terra-d);box-shadow:0 6px 16px rgba(124,46,28,.3)}
.btn:focus-visible,.inp:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* stairs: clock + countdown */
.lamp{top:-4px;left:calc(70*var(--u));width:calc(110*var(--u));transform-origin:50% 0;animation:swing 4.4s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
.clock{position:absolute;width:0;height:0}
.clock .hand{position:absolute;left:0;top:0;max-width:none;transform-origin:50% 92%;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.35))}
.clock .hand.m{height:calc(84*var(--u));width:auto;margin-left:calc(-7*var(--u));margin-top:calc(-77*var(--u))}
.clock .hand.h{height:calc(58*var(--u));width:auto;margin-left:calc(-5*var(--u));margin-top:calc(-53*var(--u))}
.clock .hand.s{width:calc(3*var(--u));height:calc(80*var(--u));margin-left:calc(-1.5*var(--u));margin-top:calc(-66*var(--u));transform-origin:50% 82%;background:var(--terra);filter:none}
.clock b{position:absolute;width:calc(10*var(--u));height:calc(10*var(--u));margin:calc(-5*var(--u));border-radius:50%;background:var(--terra-d)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(18*var(--u));width:100%}
.cd div{display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u));padding:calc(22*var(--u)) 0 calc(18*var(--u));border-radius:calc(14*var(--u));
  background:linear-gradient(#5A2F17,#3A1D0D);box-shadow:inset 0 0 0 calc(4*var(--u)) #6E3C1C,inset 0 0 0 calc(6*var(--u)) var(--gold),0 calc(8*var(--u)) calc(18*var(--u)) rgba(60,25,5,.35)}
.cd b{font-family:var(--f-caps);font-weight:700;font-size:calc(92*var(--u));line-height:1;color:var(--gold-l);font-variant-numeric:tabular-nums}
.cd span{font-family:var(--f-caps);font-weight:600;font-size:max(9px,calc(20*var(--u)));letter-spacing:.16em;text-transform:uppercase;color:#F3D9B0}
.until{margin:0;font-style:italic;font-size:max(15px,calc(42*var(--u)));color:var(--ink-soft)}
.until b{font-style:normal;font-family:var(--f-caps);font-weight:600;color:var(--terra-d);letter-spacing:.06em}
.cdnote{margin:0;font-style:italic;font-size:max(16px,calc(46*var(--u)))}

/* courtyard: events on carved plaques */
.toran{top:calc(10*var(--u));left:calc(90*var(--u));right:calc(90*var(--u));transform-origin:50% 0;animation:sway 6s ease-in-out infinite;z-index:5}
@keyframes sway{50%{transform:rotate(.7deg) translateY(calc(6*var(--u)))}}
.room[data-room="courtyard"]{padding-top:calc(540*var(--u))}
.diyas{display:flex;justify-content:space-between;width:calc(900*var(--u));margin-top:calc(-30*var(--u))}
.diyas img{width:calc(120*var(--u));animation:flick 1.8s ease-in-out infinite alternate}
.diyas img:nth-child(2){animation-delay:-.6s}.diyas img:nth-child(3){animation-delay:-1.1s}.diyas img:nth-child(4){animation-delay:-.3s}.diyas img:nth-child(5){animation-delay:-1.4s}
@keyframes flick{0%{filter:brightness(.95) drop-shadow(0 0 0 rgba(255,180,60,0))}100%{filter:brightness(1.12) drop-shadow(0 calc(-8*var(--u)) calc(18*var(--u)) rgba(255,190,80,.75))}}
.events{display:flex;flex-direction:column;align-items:center;gap:calc(50*var(--u));width:100%}
.ev{display:flex;flex-direction:column;align-items:center;gap:calc(20*var(--u));width:100%}
.takhti{position:relative;width:calc(940*var(--u))}
.takhti > img{width:100%}
.tk-in{position:absolute;left:12%;right:12%;top:34%;bottom:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4*var(--u));color:#FBE6C2}
.tk-in h3{margin:0;font-family:var(--f-caps);font-weight:700;font-size:calc(70*var(--u));line-height:1.05;letter-spacing:.08em;color:var(--gold-l);text-shadow:0 2px 2px rgba(0,0,0,.5)}
.tk-in .meta{font-family:var(--f-caps);font-weight:600;font-size:max(10px,calc(24*var(--u)));letter-spacing:.12em;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.ev .vn{font-family:var(--f-caps);font-weight:600;font-size:max(15px,calc(42*var(--u)));color:var(--wood)}
.ev .ad{font-size:max(14px,calc(34*var(--u)));color:var(--ink-soft);margin-top:calc(-10*var(--u))}
.ev .note{font-style:italic;font-size:max(14px,calc(36*var(--u)));color:var(--terra-d)}
.ev .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ev .btns .btn{margin-top:0;min-height:42px;padding:9px 18px;font-size:11.5px}

/* baithak */
.fam{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(16*var(--u));width:100%}
.fam .paper{display:flex;flex-direction:column;gap:calc(6*var(--u));padding:calc(34*var(--u)) calc(20*var(--u))}
.fam h3{margin:0 0 calc(8*var(--u));font-size:max(10px,calc(22*var(--u)));color:var(--terra);letter-spacing:.12em}
.fam span{font-size:max(14px,calc(36*var(--u)));line-height:1.3}
.fam .mithai{width:calc(200*var(--u))}

/* library: story in the jharokha */
.jharokha{position:relative;width:calc(760*var(--u))}
.jharokha > img{width:100%;position:relative;z-index:2;pointer-events:none}
.j-in{position:absolute;left:19%;right:19%;top:23%;bottom:24%;z-index:1;background:radial-gradient(ellipse at 50% 40%,#FFF6E6,#F8E2BD);display:grid}
.j-in .st{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10*var(--u));padding:calc(20*var(--u));opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s}
.j-in .st.on{opacity:1;transform:none}
.st .when{font-family:var(--f-caps);font-weight:600;font-size:max(10px,calc(22*var(--u)));letter-spacing:.2em;color:var(--terra)}
.st h4{margin:0;font-family:var(--f-caps);font-weight:700;font-size:calc(50*var(--u));color:var(--wood);line-height:1.1}
.st p{margin:0;font-style:italic;font-size:max(14px,calc(34*var(--u)));line-height:1.4;color:var(--ink-soft)}
.jnav{display:flex;gap:10px;margin-top:calc(-20*var(--u))}
.jnav button{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--terra);background:transparent;padding:0;cursor:pointer}
.jnav button.on{background:var(--terra)}

/* guest book */
.book{width:100%;text-align:start;background:#FFF8EA;border-radius:calc(8*var(--u));padding:calc(46*var(--u)) calc(50*var(--u)) calc(40*var(--u));position:relative;
  background-image:repeating-linear-gradient(transparent 0 calc(79*var(--u)),rgba(31,94,99,.14) calc(79*var(--u)) calc(80*var(--u)));
  box-shadow:inset calc(16*var(--u)) 0 0 rgba(163,67,42,.08),0 calc(12*var(--u)) calc(28*var(--u)) rgba(70,30,5,.22)}
.book::before{content:"";position:absolute;top:0;bottom:0;left:calc(36*var(--u));width:1.5px;background:rgba(163,67,42,.35)}
.f{display:flex;flex-direction:column;gap:4px;margin-top:calc(30*var(--u))}
.f:first-child{margin-top:0}
.f > span,legend{font-family:var(--f-caps);font-weight:600;font-size:max(10px,calc(22*var(--u)));letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.inp{width:100%;font-family:var(--f-body);font-style:italic;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(58,34,19,.35);padding:6px 2px;border-radius:0;outline:none;resize:none}
.inp:focus{border-bottom-color:var(--teal)}
fieldset{border:0;margin:calc(30*var(--u)) 0 0;padding:0}
legend{padding:0;margin-bottom:8px}
.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:16px;border:1.5px solid rgba(163,67,42,.4);border-radius:10px;color:var(--ink);transition:.2s}
.choice input:checked + label{background:var(--teal);border-color:var(--teal);color:#FFF4E2}
.choice input:focus-visible + label{outline:2px solid var(--teal);outline-offset:2px}
.err{color:#8E2A1E;font-size:15px;margin:12px 0 0}
#rsvp .btn{width:100%;margin-top:calc(40*var(--u))}
.done{display:flex;flex-direction:column;gap:12px;text-align:center;font-style:italic;font-size:17px}
.done .btn{margin-top:0}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:calc(40*var(--u));padding-top:calc(24*var(--u));border-top:1px solid rgba(163,67,42,.3);font-size:15px;color:var(--ink-soft);text-align:center}
.wa{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-weight:600}
.wa svg{width:20px;height:20px}

/* rooftop */
.room.night{background:linear-gradient(180deg,transparent,rgba(20,35,58,.08) 40%,rgba(20,35,58,.14))}
.fireworks{position:absolute;left:3%;right:3%;top:3%;height:45%;width:94%;pointer-events:none}
.cat{width:16%;top:56%;animation:walk 22s linear infinite}
.cat img{animation:step .5s ease-in-out infinite alternate}
@keyframes walk{0%{left:-18%}100%{left:104%}}
@keyframes step{to{transform:translateY(-2px)}}
.couple{position:absolute;width:24%;right:9%;bottom:5%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.foot{text-align:center;padding:10px 0 calc(80px + env(safe-area-inset-bottom,0px));font-size:10px;letter-spacing:.5em;color:var(--terra)}

/* reveal */
.js .room > :not(.mv):not(.pic){opacity:0;transform:translateY(calc(30*var(--u)));transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.js .room.in > :not(.mv):not(.pic){opacity:1;transform:none}

/* ================= URDU ================= */
html.ur body{font-family:var(--f-ur)}
html.ur .caps,html.ur .h,html.ur .btn,html.ur .f > span,html.ur legend,html.ur .cd span,html.ur .tk-in .meta,html.ur .venue b,html.ur .ev .vn,html.ur .st .when,html.ur .hint span,html.ur .knock span,html.ur .prog li b{font-family:var(--f-ur);letter-spacing:0;text-transform:none}
html.ur .h{font-size:calc(66*var(--u));line-height:2}
html.ur .plate span,html.ur .tk-in h3,html.ur .scroll-in .nm,html.ur .st h4{font-family:var(--f-ur);font-weight:600;letter-spacing:0;line-height:1.9}
html.ur .plate span{font-size:calc(50*var(--u))}
html.ur .plate.sm span{font-size:min(4.6vw,21px)}
html.ur .tk-in h3{font-size:calc(54*var(--u))}
html.ur .scroll-in .nm{font-size:calc(46*var(--u))}
html.ur .st h4{font-size:calc(42*var(--u))}
html.ur .scroll-in p,html.ur .dua p,html.ur .sub,html.ur .until,html.ur .st p,html.ur .ev .note,html.ur .bism-en,html.ur .ctime,html.ur .done,html.ur .choice label,html.ur .prog li span,html.ur .dear,html.ur .w-to{font-style:normal;line-height:2.05}
html.ur .scroll-in p{font-size:max(13px,calc(32*var(--u)))}
html.ur .inp{font-family:var(--f-ur);font-style:normal;font-size:15px;line-height:2}
html.ur .cday,html.ur .cd b{font-family:var(--f-caps)}

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