/* Abdullah & Laiba wedding invitation. Plain CSS, no build step.
   Palette: emerald, gold, cream. Gold is a foreground only on emerald; on cream it is --gold-d. */
:root{
  --emerald:#0b3b2c; --emerald-d:#072a20; --emerald-l:#14543f;
  --gold:#c9a24a; --gold-l:#e8cd8a; --gold-d:#7a5a1a;
  --cream:#f7f0df; --paper:#efe5cc; --ink:#2b2217; --muted:#6b5d46; --line:#d8c9a2;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Great Vibes','Brush Script MT',cursive;
  --ar:'Amiri Quran','Amiri','Noto Naskh Arabic',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* the card is a 2:3 portrait; the envelope letter and the hero card share this width */
  --cw:min(92vw,calc((100svh - 204px) * 2 / 3),540px);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .17  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{background:var(--emerald-d);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
a,button,.env{touch-action:manipulation}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[lang=ar]{font-family:var(--ar);line-height:1.9}

/* ---------- shared ---------- */
.wrap{width:min(100% - 40px,760px);margin-inline:auto;position:relative;z-index:1}
.wrap.narrow{width:min(100% - 40px,560px)}
.center{text-align:center}
.sec{position:relative;padding:clamp(76px,14vw,128px) 0;overflow:hidden}
.sec-green{background:radial-gradient(120% 90% at 50% 0%,var(--emerald-l) 0%,var(--emerald) 52%,var(--emerald-d) 100%);color:var(--cream)}
.sec-cream{background:var(--cream)}
.sec-paper{background:var(--paper)}
.sec-paper::before,.sec-cream::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.5;pointer-events:none}
.pat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.eyebrow{font:700 12px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-d);margin-bottom:14px}
.sec-green .eyebrow{color:var(--gold-l)}
.title{font:600 clamp(36px,9vw,58px)/1.08 var(--serif);letter-spacing:-.005em;margin-bottom:clamp(28px,6vw,48px)}
.title em{font-family:var(--script);font-style:normal;font-weight:400;font-size:1.28em;line-height:.8;color:var(--gold-d);padding-left:.04em}
.sec-green .title em{color:var(--gold-l)}
.body{font:400 clamp(19px,4.6vw,22px)/1.65 var(--serif);color:var(--muted);max-width:34ch;margin-inline:auto}
.sec-green .body{color:#d9e6df}
.orn{width:30px;height:30px;color:var(--gold);margin:0 auto 22px}
.lnk{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}

.ic{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn .ic{width:19px;height:19px;margin-right:10px;margin-left:-4px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;border:1.5px solid transparent;font:700 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .14s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#f0d98a,#c9a24a);color:var(--emerald-d);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.btn-gold:hover{background:linear-gradient(135deg,#f6e3a1,#d6b05a)}
.btn-ghost{border-color:rgba(232,205,138,.6);color:var(--gold-l);background:rgba(7,42,32,.35);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(232,205,138,.14)}
.btn-outline{border-color:var(--gold-d);color:var(--gold-d)}
.btn-outline:hover{background:var(--gold-d);color:var(--cream)}
.btn-emerald{background:var(--emerald);color:var(--gold-l)}
.btn-emerald:hover{background:var(--emerald-l)}
.btn-lg{min-height:56px;width:100%;font-size:13.5px}

/* reveal on scroll. Hidden only when JS ran, so nothing is lost without it. */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}

/* ================= ENVELOPE ================= */
.env{position:fixed;inset:0;z-index:100;perspective:1600px;overflow:hidden;background:#d6cdb4;--seam:56%;cursor:pointer}
.env>*{position:absolute}
.paper{background-image:var(--noise),linear-gradient(160deg,#ece4cf,#ddd3b8)}
.env-back{inset:0;background-image:var(--noise),linear-gradient(180deg,#c9bd9d,#d6cbb0)}
.env-l{inset:0;z-index:4;clip-path:polygon(0 0,50% var(--seam),0 100%);background-image:var(--noise),linear-gradient(100deg,#eee6d2,#ded4ba)}
.env-r{inset:0;z-index:4;clip-path:polygon(100% 0,50% var(--seam),100% 100%);background-image:var(--noise),linear-gradient(260deg,#eee6d2,#ded4ba)}
.env-b{inset:0;z-index:4;clip-path:polygon(0 100%,50% var(--seam),100% 100%);background-image:var(--noise),linear-gradient(0deg,#f2ebd9,#e3dac2)}
.env-lines{inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.env-letter{left:50%;top:50%;width:var(--cw);aspect-ratio:2/3;translate:-50% -50%;z-index:3;transform:translateY(44%) scale(.78);filter:drop-shadow(0 14px 30px rgba(60,40,10,.35))}
.env-letter svg{width:100%;height:100%}
.env-flap{left:0;top:0;width:100%;height:var(--seam);z-index:6;transform-origin:top center;filter:drop-shadow(0 10px 14px rgba(60,40,10,.3))}
.env-flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background-image:var(--noise),linear-gradient(180deg,#e2d8bd,#efe7d3)}
.env-names{left:0;right:0;bottom:7%;text-align:center;z-index:5;font:400 clamp(34px,10vmin,64px)/1 var(--script);color:#8a7650;pointer-events:none}
.env-names small.after{margin:16px 0 0}
.env-names small{display:block;font:700 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:#8a7a58;margin-bottom:14px}
.env-hint{left:0;right:0;top:calc(var(--seam) + clamp(66px,14vmin,100px));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:8;font:700 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#6d5d3e;animation:hintPulse 2.4s ease-in-out infinite}
.env-hint .ic{width:30px;height:30px;stroke-width:1.5;animation:tapBob 1.5s ease-in-out infinite}
@keyframes tapBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(.9)}}

.seal{left:50%;top:var(--seam);translate:-50% -50%;z-index:8;width:clamp(104px,28vmin,156px);aspect-ratio:1;border:0;background:none;cursor:pointer;filter:drop-shadow(0 10px 14px rgba(40,25,5,.45));animation:sealBreath 2.6s ease-in-out infinite}
.seal svg{width:100%;height:100%;overflow:visible}
.seal:focus-visible{outline-offset:8px;border-radius:50%}
.seal-mono{font-family:var(--script);font-size:25px;text-anchor:middle}
.seal-mono-s{fill:#6b4c12;opacity:.9}
.seal-mono-h{fill:#fbefc2;opacity:.95}

.env.opening{pointer-events:none;animation:envOut .9s 2.05s ease forwards}
.env.opening .seal{animation:sealPop .55s var(--ease) forwards}
.env.opening .env-hint{animation:none;opacity:0;transition:opacity .25s}
.env.opening .env-flap{animation:flapOpen 1.05s .35s var(--ease) forwards}
.env.opening .env-letter{animation:letterUp 1.2s .95s var(--ease) forwards}
.env.opening .env-names{opacity:0;transition:opacity .5s .3s}
.env.done{display:none}

@keyframes sealBreath{0%,100%{scale:1}50%{scale:1.05}}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sealPop{0%{scale:1;opacity:1}35%{scale:1.16;opacity:1}100%{scale:.2;opacity:0}}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:6}49%{z-index:6}50%{transform:rotateX(90deg);z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@keyframes letterUp{0%{transform:translateY(44%) scale(.78);z-index:3}60%{transform:translateY(-3%) scale(.93);z-index:3}61%{z-index:7}100%{transform:translateY(0) scale(1);z-index:7}}
@keyframes envOut{to{opacity:0}}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 0 18px;background:radial-gradient(110% 80% at 50% 38%,var(--emerald-l) 0%,var(--emerald) 55%,var(--emerald-d) 100%);overflow:hidden}
.pat-hero{inset:-140px;width:calc(100% + 280px);height:calc(100% + 280px);animation:drift 80s linear infinite}
.pat-hero rect{opacity:1}
.vignette{position:absolute;inset:0;background:radial-gradient(75% 65% at 50% 46%,transparent 40%,rgba(3,20,14,.65) 100%);pointer-events:none}
@keyframes drift{to{transform:translate(85px,85px)}}

.dust{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dust i{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--gold-l);opacity:0;animation:rise var(--t) linear var(--dl) infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}85%{opacity:.5}100%{transform:translate(var(--dx),-108vh);opacity:0}}

.card{position:relative;z-index:2;width:var(--cw);aspect-ratio:2/3;container-type:inline-size;filter:drop-shadow(0 22px 44px rgba(0,0,0,.5))}
.tilt{position:absolute;inset:0;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.card-frame{position:absolute;inset:0;width:100%;height:100%}
.card-in{position:absolute;inset:0;padding:35cqw 13cqw 14cqw;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink)}
.bism{font-size:7.2cqw;color:var(--gold-d);line-height:1.8;margin-bottom:3.4cqw}
.eyebrow-c{font:700 max(11px,2.4cqw)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin-bottom:1.6cqw}
.sub{font:italic 500 4.6cqw/1.3 var(--serif);color:var(--muted);margin-bottom:2.4cqw}
.names{display:flex;flex-direction:column;align-items:center;font-weight:400;line-height:1}
.n{font:400 17.5cqw/1.08 var(--script);color:var(--ink);padding:0 .08em}
.amp{font:italic 500 7.5cqw/1 var(--serif);color:var(--gold-d);margin:-.6cqw 0 -.4cqw}
.dates{display:flex;align-items:center;gap:3.6cqw;margin-top:4.4cqw;font:600 9.5cqw/1 var(--serif);color:var(--ink)}
.dates i{width:1.6cqw;height:1.6cqw;background:var(--gold);transform:rotate(45deg)}
.month{font:700 max(11.5px,2.6cqw)/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d);margin-top:2.6cqw}

.scroll-cue{position:relative;z-index:3;margin-top:-4px;min-width:64px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--gold-l);font:700 11.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;padding-left:.28em}
.scroll-cue .ic{width:26px;height:26px;stroke-width:1.9;animation:cueBob 1.7s ease-in-out infinite}
.scroll-cue.hide{opacity:0;pointer-events:none;transition:opacity .35s}
@keyframes cueBob{0%,100%{transform:translateY(-3px);opacity:.6}50%{transform:translateY(5px);opacity:1}}
.hero-cta{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* hero intro: stays still until the envelope has finished opening (body.go) */
html.js .card,html.js .hero-cta,html.js .scroll-cue{opacity:0}
.go .card{animation:cardIn 1s var(--ease) both}
.go .hero-cta{animation:fadeUp .9s 1.5s var(--ease) both}
.go .scroll-cue{animation:cueIn .9s 2.1s var(--ease) both}
.go .scroll-cue.hide{animation:none;opacity:0}
@keyframes cueIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.go .card-in>*{animation:fadeUp .9s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * .13s)}
.go .card-in .names{animation:none}
.go .n{animation:wipe 1.5s var(--ease) both}
.go .n1{animation-delay:.95s}
.go .n2{animation-delay:1.35s}
.go .amp{animation:fadeUp .8s 1.2s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(-20% 100% -20% -5%)}to{clip-path:inset(-20% -5% -20% -5%)}}
html.js .n{opacity:0}
html.js .go .n{opacity:1}

/* ================= AYAH ================= */
.ayah-ar{font-size:clamp(26px,7vw,40px);line-height:2.05;color:var(--gold-l);max-width:20em;margin:0 auto 26px}
.ayah-en{font:italic 400 clamp(20px,4.8vw,26px)/1.6 var(--serif);color:#e3ece7;max-width:30em;margin:0 auto 20px}
.ref{font:700 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}

/* ================= SCRATCH ================= */
.scratch{position:relative;width:min(100%,440px);aspect-ratio:16/10;margin:0 auto 22px;border-radius:22px;overflow:hidden;border:1.5px solid var(--gold);background:#fffaf0;box-shadow:0 18px 40px rgba(60,40,10,.18)}
.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;background:radial-gradient(90% 90% at 50% 40%,#fffdf6,#f1e6c8)}
.scratch-under .eyebrow{margin-bottom:2px;font-size:12px}
.sd-big{font:600 clamp(34px,10vw,46px)/1 var(--serif);color:var(--emerald)}
.sd-month{margin-top:6px;font:700 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-d)}
.sd-script{font:400 clamp(22px,6.4vw,28px)/1.1 var(--script);color:var(--ink);margin-top:10px}
.sd-tag{font:700 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
#foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .9s var(--ease)}
#foil:active{cursor:grabbing}
.scratch.done #foil{opacity:0;pointer-events:none}
.scratch-cue{position:absolute;left:50%;top:66%;width:34px;height:34px;margin-left:-17px;color:rgba(70,45,8,.85);pointer-events:none;animation:swipeCue 1.8s ease-in-out infinite alternate;transition:opacity .3s}
.scratch.touched .scratch-cue,.scratch.done .scratch-cue{opacity:0;animation:none}
@keyframes swipeCue{from{transform:translateX(-52px) rotate(-10deg)}to{transform:translateX(52px) rotate(10deg)}}
.hint{font:italic 400 19px/1.4 var(--serif);color:var(--muted);margin-bottom:18px}
.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

/* ================= LETTER ================= */
.letter{max-width:600px}
.lead{font:400 clamp(20px,4.8vw,24px)/1.6 var(--serif);color:var(--muted);max-width:28em;margin:0 auto}
.lead b{color:var(--ink);font-weight:600}
.person{font:400 clamp(27px,8vw,50px)/1.2 var(--script);color:var(--emerald);margin:10px 0;text-wrap:balance}
.with{font:italic 500 20px/1 var(--serif);color:var(--gold-d);margin:2px 0}
.letter .body{margin-top:26px;color:var(--muted)}
.sig{margin-top:30px;font:400 clamp(34px,9vw,46px)/1.1 var(--script);color:var(--ink)}
.sig span{display:block;font:italic 500 20px/1 var(--serif);color:var(--muted);margin-bottom:8px}

/* ================= EVENTS ================= */
.tl{position:relative;max-width:620px;margin:0 auto;padding-left:54px}
.tl::before,.tl::after{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;border-radius:2px}
.tl::before{background:rgba(232,205,138,.2)}
.tl::after{background:linear-gradient(var(--gold-l),var(--gold));transform:scaleY(var(--p,0));transform-origin:top}
html:not(.js) .tl{--p:1}
.ev{position:relative;margin-bottom:26px}
.ev:last-child{margin-bottom:0}
.ev-node{position:absolute;left:-54px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--sans);letter-spacing:.06em;color:var(--gold-l);background:var(--emerald-d);border:1.5px solid rgba(232,205,138,.5);transition:background .5s,color .5s,border-color .5s}
.ev.in .ev-node{background:var(--gold);color:var(--emerald-d);border-color:var(--gold-l)}
.ev-card{position:relative;padding:24px 18px 22px;border-radius:20px;background:rgba(247,240,223,.055);border:1px solid rgba(232,205,138,.32);backdrop-filter:blur(2px)}
.ev-card::before{content:"";position:absolute;inset:6px;border-radius:15px;border:1px solid rgba(232,205,138,.13);pointer-events:none}
.ev-date{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ev-date b{font:600 52px/1 var(--serif);color:var(--gold-l)}
.ev-date span{font:700 12px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#cfe0d8}
.ev-card h3{font:600 clamp(32px,8vw,40px)/1.1 var(--serif);color:var(--cream)}
.ev-tag{font:italic 400 20px/1.3 var(--serif);color:var(--gold-l);margin:2px 0 18px}
.ev-times{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.ev-times div{padding:12px 12px;border-radius:12px;background:rgba(7,42,32,.55);border:1px solid rgba(232,205,138,.18)}
.ev-times dt{font:700 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#bcd0c7;margin-bottom:6px}
.ev-times dd{font:600 23px/1 var(--serif);color:var(--cream);white-space:nowrap}
.ev-where{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;font:500 18px/1.4 var(--serif);color:#e3ece7}
.ev-where b{font-weight:600;color:var(--cream)}
.ev-loc{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 200px}
.ev-loc em{font:italic 400 18px/1.35 var(--serif);color:#d9e6df}
.dir{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(232,205,138,.55);font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);transition:background .25s,transform .14s var(--ease)}
.dir .ic{width:17px;height:17px}
.dir:hover{background:rgba(232,205,138,.14)}
.dir:active{transform:scale(.97)}

/* ================= COUNTDOWN ================= */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2.4vw,16px);max-width:520px;margin:0 auto 26px}
.cd-b{padding:clamp(16px,4vw,26px) 4px;border-radius:16px;background:var(--emerald);border:1px solid var(--gold);box-shadow:0 12px 26px rgba(11,59,44,.22)}
.cd-n{display:block;font:600 clamp(34px,10vw,58px)/1 var(--serif);color:var(--gold-l);font-variant-numeric:tabular-nums}
.cd-n.tick{animation:tick .45s var(--ease)}
.cd-l{display:block;margin-top:10px;font:700 clamp(11px,2.9vw,12px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#bcd0c7}
@keyframes tick{from{opacity:0;transform:translateY(-34%)}to{opacity:1;transform:none}}
.cd-note{font:italic 400 clamp(19px,4.6vw,22px)/1.5 var(--serif);color:var(--muted);max-width:26em;margin:0 auto 18px}
.insha{font-size:30px;color:var(--gold-d)}

/* ================= VENUES ================= */
.venues{display:grid;gap:22px;max-width:720px;margin:0 auto}
@media(min-width:700px){.venues{grid-template-columns:1fr 1fr}}
.venue{padding:30px 22px 28px;border-radius:22px;background:rgba(247,240,223,.055);border:1px solid rgba(232,205,138,.32);display:flex;flex-direction:column;align-items:center}
.v-for{font:700 12px/1.3 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l);margin-bottom:10px}
.venue h3{font:600 clamp(26px,6.4vw,32px)/1.15 var(--serif);color:var(--cream)}
.v-addr{font:italic 400 19px/1.4 var(--serif);color:#d9e6df;margin-top:6px}
.v-days{font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#bcd0c7;margin:12px 0 20px}
.qr{padding:10px;border-radius:16px;background:#fff;border:2px solid var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.qr img{width:168px;height:168px;border-radius:6px}
.v-scan{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);margin:16px 0 18px}
.v-scan .ic{width:20px;height:20px}

/* ================= BLESSINGS & HOSTS ================= */
.duo{display:grid;gap:16px;margin:36px auto 0;max-width:620px}
@media(min-width:640px){.duo{grid-template-columns:1fr 1fr}}
.gift{padding:26px 22px;border-radius:18px;background:rgba(247,240,223,.055);border:1px solid rgba(232,205,138,.28)}
.gift h3{font:600 28px/1.15 var(--serif);color:var(--gold-l);margin-bottom:8px}
.gift p{font:400 19px/1.55 var(--serif);color:#d9e6df}
.dua-ar{margin-top:46px;font-size:clamp(24px,6.4vw,34px);color:var(--gold-l)}
.dua-en{font:italic 400 clamp(19px,4.6vw,23px)/1.55 var(--serif);color:#d9e6df;max-width:26em;margin:6px auto 0}
.hosts{display:grid;gap:16px;margin:56px auto 0;max-width:620px;padding-top:44px;border-top:1px solid rgba(232,205,138,.25)}
@media(min-width:640px){.hosts{grid-template-columns:1fr 1fr}}
.host h3{font:600 clamp(24px,5.8vw,28px)/1.2 var(--serif);color:var(--cream)}
.host p:last-child{font:italic 400 19px/1.4 var(--serif);color:#d9e6df;margin-top:6px}

/* ================= FOOTER ================= */
.foot{background:var(--emerald-d);color:var(--cream);text-align:center;padding:70px 20px calc(70px + env(safe-area-inset-bottom));border-top:1px solid rgba(232,205,138,.2)}
.mono{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:92px;height:92px;border-radius:50%;border:1.5px solid var(--gold);font-family:var(--script);font-size:34px;color:var(--gold-l);margin-bottom:22px}
.mono i{font:italic 500 20px/1 var(--serif);color:var(--cream);padding:0 2px}
.foot-t{font:italic 400 clamp(20px,5vw,24px)/1.5 var(--serif);color:#e3ece7}
.amin{font-size:30px;color:var(--gold-l);margin-top:12px}
.foot-d{margin-top:18px;font:700 12px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#bcd0c7}

/* ================= motion preferences ================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .dust,.pat-hero{animation:none}
  .dust{display:none}
  .seal,.env-hint,.env-hint .ic,.scratch-cue{animation:none}
  html.js .card,html.js .hero-cta,html.js .scroll-cue,html.js .n{opacity:1}
  .scroll-cue .ic{animation:none}
  .go .card,.go .hero-cta,.go .scroll-cue,.go .card-in>*,.go .n,.go .amp{animation:none}
  .tilt{transition:none}
  .tl{--p:1}
}
@media(max-height:560px) and (orientation:landscape){:root{--cw:min(60vw,calc(100svh * 2 / 3),400px)}.scroll-cue{display:none}}
@media print{.env,.dust{display:none}body.locked{overflow:visible;height:auto}}

/* small phones: two hero buttons stay on one row, countdown stays readable */
@media(max-width:380px){
  .btn{padding:0 20px;letter-spacing:.14em}
  .hero-cta{gap:10px}
  .cd{gap:6px}
  .cd-b{padding-inline:2px}
  .ev-date b{font-size:46px}
  .ev-card h3{font-size:30px}
}
@media(max-width:380px){
  .btn{padding:0 16px;letter-spacing:.1em;font-size:12px}
  .btn .ic{margin-right:7px;margin-left:-2px}
}
@media(max-height:640px) and (max-width:700px){
  .hero{gap:12px;padding:12px 0 10px}
  :root{--cw:min(92vw,calc((100svh - 164px) * 2 / 3),540px)}
}