:root{
  --ivory:#fdfaf5; --cream:#f7efe4; --gold:#c0916b; --acc:#c0916b; --line:#dccb98; --deep:#7a5c46; --ink:#9a7558; --soft:#efe3d6;
  --script:'Aref Ruqaa',serif; --serif:'Amiri',serif; --kufi:'Reem Kufi',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--serif);color:var(--ink);font-size:1.15rem;min-height:100vh;-webkit-font-smoothing:antialiased;background:linear-gradient(#e9dfd0,#dccdb8)}
body.locked{overflow:hidden}
button,input,textarea{font-family:inherit}
.foil{color:var(--gold);font-family:var(--script);font-weight:400}
.muted{opacity:.9}
canvas#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.7}
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--gold);transform-origin:right;transform:scaleX(0)}

/* soft blurred-flower background, like the reference */
#site{max-width:480px;margin:0 auto;position:relative;box-shadow:0 0 70px rgba(80,55,30,.25);overflow:hidden;
  background:
    radial-gradient(55% 14% at 18% 6%,#f4e4dd 0,transparent 70%),
    radial-gradient(45% 12% at 88% 22%,#efe5d6 0,transparent 70%),
    radial-gradient(60% 14% at 12% 48%,#f5e7e0 0,transparent 70%),
    radial-gradient(50% 12% at 90% 70%,#f0e6d8 0,transparent 70%),
    radial-gradient(60% 14% at 20% 92%,#f4e4dd 0,transparent 70%),var(--ivory)}
.sec{padding:4.2rem 1.6rem;text-align:center;position:relative}
h2{font-size:2.1rem;line-height:1.7;margin-bottom:1.4rem}
.big{font-size:2.5rem;line-height:1.6}

.r{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.r.in{opacity:1;transform:none}

/* GATES */
#gates{position:fixed;inset:0;z-index:100;display:flex;direction:ltr;perspective:1600px;overflow:hidden}
#gates.gone{display:none}
.door{width:50%;height:100%;position:relative;transition:transform 2s cubic-bezier(.75,0,.2,1);background:linear-gradient(100deg,#fdfaf5,#f1e5d7);box-shadow:inset 0 0 0 1px var(--line),inset 0 0 50px rgba(150,110,70,.12)}
.door::after{content:"";position:absolute;inset:16px;border:1px solid var(--line)}
.door.dl{transform-origin:left center}.door.dr{transform-origin:right center}
#gates.open .door.dl{transform:rotateY(-105deg)}
#gates.open .door.dr{transform:rotateY(105deg)}
.crest{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;z-index:2;transition:opacity .8s,transform 1s}
#gates.open .crest{opacity:0;transform:scale(1.25);pointer-events:none}
.medal{position:relative;width:150px;height:150px;display:grid;place-items:center;border-radius:50%;background:#fffdf9;box-shadow:0 8px 30px rgba(150,110,70,.18)}
.medal svg{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);fill:none;stroke:var(--line);stroke-width:1}
.mono{position:relative;font-size:2rem;white-space:nowrap}
.inv{font-family:var(--script);font-size:1.9rem;color:var(--gold)}
.open-btn{border:1px solid var(--gold);background:transparent;color:var(--gold);padding:.7rem 2.2rem;border-radius:999px;font-size:1.15rem;cursor:pointer;transition:.3s}
.open-btn:hover{background:var(--gold);color:#fff}

/* MUSIC */
.music{position:fixed;left:max(14px,calc(50% - 226px));bottom:22px;width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);box-shadow:0 6px 16px rgba(80,55,30,.3);z-index:90;cursor:pointer;display:grid;place-items:center}
.music svg{width:20px;height:20px;fill:#fff;grid-area:1/1}
.music .i-play{display:none}.music.off .i-pause{display:none}.music.off .i-play{display:block}

/* HERO */
.hero{padding:3.2rem 2.2rem 3.4rem;text-align:center;position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;gap:1rem}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--line)}
.hero::before{inset:14px}
.hero::after{inset:20px;border-width:1px}
.co{position:absolute;width:44px;height:44px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23cdb98a' stroke-width='1.3'%3E%3Cpath d='M2 2h40v10H32v10H22v10H12v10H2z'/%3E%3Cpath d='M12 2v10M22 2v10M32 2v10M2 12h10M2 22h10M2 32h10M12 12h10v10H12z'/%3E%3C/svg%3E") center/contain no-repeat}
.co.c1{top:30px;left:30px}.co.c2{top:30px;right:30px;scale:-1 1}.co.c3{bottom:30px;left:30px;scale:1 -1}.co.c4{bottom:30px;right:30px;scale:-1 -1}
.window{width:min(70vw,290px);aspect-ratio:300/420;max-height:44svh;position:relative;margin-top:1rem}
.window svg{width:100%;height:100%;display:block;overflow:visible}
.hosts{width:100%;display:flex;flex-direction:column;align-items:center;gap:.3rem;line-height:1.5}
.hosts .hi{font-size:1.05rem;color:var(--ink)}
.hosts b{font-size:clamp(1.35rem,6vw,1.65rem);font-weight:700;color:var(--deep);line-height:1.5}
.hosts em{font-style:normal;font-family:var(--script);font-size:1.3rem;color:var(--gold);line-height:1}
.title{font-size:clamp(1.5rem,6.5vw,1.9rem);line-height:1.5}
.names{font-family:var(--script);color:var(--gold);line-height:1.35;font-size:clamp(2.6rem,13vw,3.5rem);display:flex;align-items:center;gap:.7rem;justify-content:center;flex-wrap:wrap}
.names em{font-style:normal;font-size:1.8rem}
.div{width:70%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.3rem 0}
.info{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;margin-top:.4rem}
.info>div{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:0 .4rem;line-height:1.45;font-size:.95rem}
.info>div+div{border-inline-start:1px solid var(--line)}
.info svg{width:40px;height:40px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.2rem}
.info b{font-weight:400;font-size:1.05rem;color:var(--deep)}
.info span{letter-spacing:.08em;font-family:var(--kufi);font-size:.8rem;color:var(--ink)}
.cue{margin-top:auto;width:24px;height:38px;border:1.5px solid var(--gold);border-radius:13px;display:block;position:relative;flex:none}
.cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:scroll 1.8s infinite}
@keyframes scroll{60%{transform:translateY(12px);opacity:0}}
.lantern{transform-box:fill-box;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.lantern.b{animation-duration:6.4s;animation-delay:-2s}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.glow{animation:pulse 3.5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.tw{animation:pulse 2.6s ease-in-out infinite}
.ripple{animation:ripple 6s ease-in-out infinite}
@keyframes ripple{50%{transform:translateX(5px)}}

/* VERSE */
.star-div{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.star-div i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.star-div i:first-child{background:linear-gradient(270deg,transparent,var(--line))}
.star-div b{width:9px;height:9px;rotate:45deg;background:var(--gold)}
.quote{font-size:1.55rem;line-height:2.1;color:var(--deep)}
.src{font-size:1.4rem;margin-top:1rem}

/* RINGS */
.rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:1.4rem}
.ring{position:relative;aspect-ratio:1}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:2;stroke-linecap:round}
.ring .bg{stroke:var(--line);opacity:.6}
.ring .fg{stroke:var(--gold);transition:stroke-dashoffset .9s linear}
.ring b{position:absolute;inset:0;display:grid;place-content:center;font-family:var(--kufi);font-weight:400;font-size:1.35rem;color:var(--deep);line-height:1}
.ring b small{font-family:var(--serif);font-size:.85rem;margin-top:.3rem;color:var(--ink)}
.longdate{font-size:1.2rem;line-height:1.9;color:var(--deep)}

/* TIMELINE */
.tl{position:relative;display:flex;flex-direction:column;gap:1.3rem;text-align:start}
.tl::before{content:"";position:absolute;right:50%;top:0;bottom:0;width:1px;background:var(--line)}
.ev{position:relative;background:rgba(255,255,255,.75);padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;width:calc(50% - 1.1rem)}
.ev:nth-child(even){margin-inline-start:auto}
.ev::after{content:"";position:absolute;top:50%;margin-top:-5px;width:9px;height:9px;rotate:45deg;background:var(--gold)}
.ev:nth-child(odd)::after{inset-inline-end:calc(-1.1rem - 4.5px)}
.ev:nth-child(even)::after{inset-inline-start:calc(-1.1rem - 4.5px)}
.ev .t{font-family:var(--kufi);font-size:.95rem;color:var(--gold)}
.ev .n{font-size:1.15rem;color:var(--deep);line-height:1.5}

/* VENUE CARD */
.card{position:relative;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.2rem 1.6rem;transition:transform .2s,opacity 1s}
.corner{display:none}
.vimg{margin:0 auto 1.3rem;width:min(100%,320px);aspect-ratio:415/517;border-radius:100px 100px 12px 12px;overflow:hidden;border:1px solid var(--line);position:relative}
.vimg img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;transition:transform 1.2s ease}
.vimg:hover img{transform:scale(1.05)}
.vname{font-size:1.6rem;font-weight:700;color:var(--deep);line-height:1.6}
.ribbon{margin:1.1rem 0 0;padding:.7rem 1rem;border-radius:10px;background:var(--soft);color:var(--deep)}
.btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.3rem}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);background:transparent;padding:.65rem 1.4rem;border-radius:999px;font-size:1.1rem;text-decoration:none;cursor:pointer;transition:.3s}
.btn:hover{background:var(--gold);color:#fff}
.btn.solid{background:var(--gold);color:#fff}
.btn.solid:hover{background:var(--deep);border-color:var(--deep)}

/* FORM */
form{display:flex;flex-direction:column;gap:1rem}
textarea{width:100%;font-size:1.2rem;color:var(--deep);background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:14px;padding:1rem;outline:0;resize:vertical;transition:.3s}
textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(150,110,70,.15)}
.thanks{padding:1.5rem 0}
.foot{padding-bottom:7rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.r{opacity:1;transform:none}}
.preview .hero{display:none}

/* ---- interactivity ---- */
.hint{font-size:.9rem;color:var(--gold);margin-top:-.4rem;animation:hintp 2.4s ease-in-out infinite}
.hint.done{opacity:0!important;animation:none;transition:opacity .6s}
@keyframes hintp{50%{opacity:.45}}
#near .lantern{cursor:pointer}
.lantern .glow{transform-box:fill-box;transform-origin:center;transition:transform .6s,opacity .6s}
.lantern.lit .glow{animation:none;opacity:1;transform:scale(2.1)}
.names span,.names em{cursor:pointer;display:inline-block;transition:transform .3s}
.names span:active{transform:scale(1.08) rotate(-2deg)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chips button{border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--deep);padding:.4rem .9rem;border-radius:999px;font-size:1rem;cursor:pointer;transition:.25s}
.chips button:hover,.chips button:active{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-2px)}
.count{text-align:start;color:var(--ink);opacity:.7;margin-top:-.5rem;font-family:var(--kufi);font-size:.8rem}
.vimg{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:120;background:rgba(40,28,18,.88);display:grid;place-items:center;padding:1rem;cursor:zoom-out;animation:fadein .3s}
#lightbox[hidden]{display:none}
#lightbox img{max-width:100%;max-height:92vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lightbox span{position:absolute;top:14px;right:20px;color:#fff;font-size:2.4rem;line-height:1}
@keyframes fadein{from{opacity:0}}
#toast{position:fixed;left:50%;bottom:90px;translate:-50% 20px;background:var(--deep);color:#fff;padding:.6rem 1.3rem;border-radius:999px;opacity:0;pointer-events:none;transition:.4s;z-index:130;font-size:1.05rem}
#toast.show{opacity:1;translate:-50% 0}
.ring{cursor:pointer;transition:transform .3s}.ring:active{transform:scale(.92)}
.ev{transition:transform .3s,box-shadow .3s;cursor:default}.ev:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(150,110,70,.18)}
.foot .btn{margin-top:1.2rem}

/* lanterns: big + obvious */
.lantern .ping{fill:none;stroke:#b99a5b;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:lping 2.4s ease-out infinite}
.lantern.b .ping{animation-delay:-1.2s}
@keyframes lping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.lantern.lit .ping{animation:none;opacity:0}
.cheer{margin-bottom:1.6rem}
#cheerBtn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--gold);background:var(--gold);color:#fff;padding:.8rem 2rem;border-radius:999px;font-size:1.25rem;cursor:pointer;transition:transform .2s,box-shadow .3s;box-shadow:0 8px 20px rgba(150,110,70,.35)}
#cheerBtn svg{width:24px;height:24px;fill:#fff;transition:transform .3s}
#cheerBtn:active{transform:scale(.94)}#cheerBtn:active svg{transform:scale(1.4)}
#cheerBtn.beat svg{animation:beat .5s}
@keyframes beat{40%{transform:scale(1.6)}}
.cheer p{margin-top:.6rem;font-size:1.05rem}
.strip{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem 1rem;margin:0 -.6rem}
.strip img{flex:none;width:78%;aspect-ratio:3/4;object-fit:cover;border-radius:90px 90px 12px 12px;border:1px solid var(--line);scroll-snap-align:center;cursor:zoom-in;transition:transform .4s}
.strip img:active{transform:scale(.97)}
.guest-line{font-size:1.1rem;color:var(--gold);margin-top:-.2rem}

/* ---- botanical theme (olive + ivory + gold) ---- */
.co{display:none}
.hero::before{inset:14px;border-color:var(--acc)}
.hero::after{display:none}
.hero>*{position:relative;z-index:1}
.hero>.arc{position:absolute;z-index:0;left:-46%;top:10%;width:92%;aspect-ratio:1;border-radius:50%;background:rgba(214,170,140,.12);border:1px solid var(--line)}
.fl{position:absolute;pointer-events:none;z-index:0}
.fl svg{width:100%;height:auto;display:block;overflow:visible}
.hero>.fl{position:absolute;z-index:0}
.hero>.fl-a{left:-30px;top:36%;width:clamp(110px,34vw,170px)}
.hero>.fl-b{right:-26px;bottom:9%;width:clamp(90px,28vw,140px);scale:-1 1}
.hero>.fl-c{right:-14px;top:-4px;width:clamp(90px,28vw,130px);opacity:.5;rotate:180deg}
.door .fl{z-index:1}
.door.dl .fl{left:-24px;bottom:-14px;width:min(46vw,230px)}
.door.dr .fl{right:-24px;top:-14px;width:min(46vw,230px);rotate:180deg}
.sec>.fl{opacity:.75;width:120px}
.sec .fl.fr{right:-26px;top:-6px;scale:-1 1}
.sec .fl.fl2{left:-26px;bottom:-8px}
.sec>*:not(.fl){position:relative;z-index:1}
.names,.foil,h2{color:var(--gold)}
.names em{color:var(--acc)}
.star-div b,.ev::after{background:var(--acc)}
.medal{box-shadow:0 8px 30px rgba(150,110,70,.2)}
.mono{color:var(--gold)}
.cnames{font-family:var(--script);font-size:2.3rem;color:var(--gold);line-height:1.4}
.csub{font-size:1.05rem;color:var(--ink);margin-top:-.6rem;letter-spacing:0}
.inv{color:var(--acc)}
.ev .t{color:var(--acc)}
.ribbon{background:var(--soft)}

/* date bar like the reference: day | big date | time */
.datebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;width:100%;margin-top:.2rem}
.datebar>div{display:flex;flex-direction:column;align-items:center;justify-content:center}
.dd1,.dd3{font-size:1.05rem;color:var(--deep);padding:.55rem 0;border-block:1px solid var(--line);margin-inline:.2rem;letter-spacing:0}
.dd2{border-inline:1px solid var(--line);padding:.2rem 1.3rem;line-height:1.1}
.dd2 b{font-family:var(--kufi);font-weight:500;font-size:2.7rem;color:var(--gold)}
.dd2 span{font-size:1.15rem;color:var(--deep);margin-top:.2rem}
.dd2 small{font-family:var(--kufi);font-size:.85rem;color:var(--ink);letter-spacing:.2em;margin-top:.2rem}
.vblock{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-top:.3rem}
.vblock svg{width:42px;height:42px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round}
.vblock b{font-size:1.35rem;font-weight:700;color:var(--deep);line-height:1.5}
.prog{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:.4rem}
.prog>div{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:0 .3rem;line-height:1.4}
.prog>div+div{border-inline-start:1px solid var(--line)}
.prog svg{width:38px;height:38px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.prog b{font-weight:400;font-size:.98rem;color:var(--deep)}
.prog span{font-family:var(--kufi);font-size:.78rem;color:var(--ink)}
.lantern .ping{stroke:var(--acc)}
.hero>.arc{left:-92%;top:6%;width:128%;background:rgba(214,170,140,.10);border-color:#dccb98}
.hero>.fl-b{right:-48px;bottom:-2%;width:clamp(90px,26vw,128px)}

.hero>.arc{display:none}

/* small red touches */
:root{--red:#b8404f}
.hrt{font-style:normal;color:var(--red);-webkit-text-fill-color:var(--red);font-size:.55em;vertical-align:middle;display:inline-block;animation:hb 2.4s ease-in-out infinite}
@keyframes hb{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.2)}}
.names em{color:var(--red)}
.star-div b{background:var(--red)}
#cheerBtn{background:#fff;color:var(--gold);border-color:var(--gold)}
#cheerBtn svg{fill:var(--red)}
.ring:last-child .fg{stroke:var(--red)}
.ribbon{border-inline-start:3px solid var(--red)}
.foot .muted::before{content:"♥ ";color:var(--red)}
.hosts em{color:var(--red)}

/* ---- animated, tappable section separators ---- */
.sep{display:flex;align-items:center;gap:.7rem;padding:.4rem 1.6rem;position:relative;z-index:1}
.sep .ln{flex:1;height:1px;position:relative;overflow:hidden;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .15s}
.sep .ln.a{background:linear-gradient(270deg,transparent,var(--gold));transform-origin:left center}
.sep .ln.b{background:linear-gradient(270deg,var(--gold),transparent);transform-origin:right center}
.sep.in .ln{transform:scaleX(1)}
.sep .ln::after{content:"";position:absolute;top:0;bottom:0;width:35%;left:-45%;background:linear-gradient(90deg,transparent,#fff,transparent)}
.sep.shine .ln::after{animation:sweep .9s ease-out}
@keyframes sweep{to{left:120%}}
.orn{position:relative;width:48px;height:48px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;transform:scale(0) rotate(-120deg);transition:transform 1s cubic-bezier(.3,1.5,.5,1) .55s;-webkit-tap-highlight-color:transparent}
.sep.in .orn{transform:none}
.orn::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--line);animation:sepring 3.2s ease-out infinite}
@keyframes sepring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.orn svg{width:30px;height:30px;fill:rgba(192,145,107,.14);stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.6,.5,1);animation:sepbob 4s ease-in-out infinite}
.orn svg.heart{fill:var(--red);stroke:none}
@keyframes sepbob{50%{translate:0 -3px}}
.orn:hover svg{transform:scale(1.25) rotate(18deg)}
.orn:active svg{transform:scale(.85)}
.orn.pop svg{animation:sepbob 4s ease-in-out infinite,spinpop .85s cubic-bezier(.3,1.4,.5,1)}
@keyframes spinpop{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.6)}100%{transform:rotate(360deg) scale(1)}}
.orn.pop::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:popring .8s ease-out forwards}
@keyframes popring{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.sep .ln{transform:none}.orn{transform:none}}

/* =========================================================
   DESKTOP VIEW (>= 900px): its own layout, mobile stays a phone-style column
   ========================================================= */
@media (min-width:900px){
  body{background:radial-gradient(120% 90% at 50% 0,#f1e8dc,#dccdb8)}
  #site{max-width:1180px;margin:2rem auto;border-radius:6px;box-shadow:0 20px 80px rgba(80,55,30,.25)}
  .music{left:28px;bottom:28px;width:52px;height:52px}
  .sec{padding:6.5rem 4rem}
  h2{font-size:3rem;margin-bottom:2.4rem}
  .sep{padding:.6rem 6rem}

  /* hero: arch window on one side, invitation text on the other */
  .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:4.5rem;row-gap:1.1rem;align-content:center;justify-items:center;padding:5rem 5rem 4.5rem;min-height:100vh;text-align:center}
  .hero::before{inset:22px}.hero::after{inset:30px}
  .co{width:56px;height:56px}.co.c1{top:40px;left:40px}.co.c2{top:40px;right:40px}.co.c3{bottom:40px;left:40px}.co.c4{bottom:40px;right:40px}
  .window{grid-column:1;grid-row:1 / span 6;align-self:center;width:min(32vw,400px);max-height:none;margin:0}
  .hint{grid-column:1;grid-row:7;margin:0}
  .hosts{grid-column:2;grid-row:1}
  .title{grid-column:2;grid-row:2;font-size:2.4rem}
  .names{grid-column:2;grid-row:3;font-size:clamp(3.6rem,5.2vw,5.2rem);flex-wrap:nowrap}
  .names em{font-size:2.4rem}
  .datebar{grid-column:2;grid-row:4;max-width:560px}
  .vblock{grid-column:2;grid-row:5}
  .prog{grid-column:2;grid-row:6;max-width:560px}
  .cue{grid-column:1 / -1;grid-row:8;margin-top:1rem;justify-self:center}
  .hosts b{font-size:1.9rem}
  .hosts .hi{font-size:1.2rem}
  .dd2 b{font-size:3.4rem}
  .vblock b{font-size:1.6rem}
  .prog b{font-size:1.05rem}

  /* verse + countdown */
  .quote{font-size:2.1rem;max-width:880px;margin-inline:auto}
  .rings{max-width:640px;margin-inline:auto;gap:1.4rem}
  .ring b{font-size:1.9rem}.ring b small{font-size:1rem}
  .longdate{font-size:1.4rem}

  /* program: three cards in a row on a horizontal line */
  .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:980px;margin:2.4rem auto 0;text-align:center}
  .tl::before{left:0;right:0;top:-20px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .ev,.ev:nth-child(even){width:auto;margin:0;padding:1.4rem 1rem}
  .tl .ev::after{inset:auto;top:-25px;left:50%;margin:0 0 0 -4.5px}
  .ev .t{font-size:1.15rem}.ev .n{font-size:1.4rem}
  .ev:hover{transform:translateY(-6px)}

  /* venue: photo left, details right */
  .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:center;max-width:1000px;margin-inline:auto;padding:2.2rem;text-align:start}
  .card .vimg{grid-column:1;grid-row:1 / span 5;width:100%;margin:0}
  .card>*:not(.vimg):not(.corner){grid-column:2}
  .card .btns{justify-content:flex-start}
  .vname{font-size:2.1rem}
  .ribbon{font-size:1.2rem}

  /* message */
  #rsvp form,#rsvp .cheer,#rsvp .thanks{max-width:680px;margin-inline:auto}
  #rsvp .cheer{margin-bottom:2rem}
  .strip img{width:30%}
  .foot .big{font-size:3.4rem}
}
@media (min-width:900px) and (max-height:760px){
  .hero{min-height:760px}
}
@media (min-width:900px){
  .window{width:min(34vw,440px)}
  .hint{margin-top:-3.4rem}
  .card{grid-template-rows:repeat(5,auto);align-content:center;row-gap:.9rem}
  .card .vimg{align-self:center}
}

/* ---- language switch button + English typography + LTR fixes ---- */
.langbtn{position:fixed;top:14px;left:max(14px,calc(50% - 226px));z-index:110;border:1px solid var(--gold);background:rgba(255,250,245,.92);color:var(--gold);padding:.3rem .95rem;border-radius:999px;font-family:'Reem Kufi',sans-serif;font-size:.9rem;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 14px rgba(120,86,60,.15);transition:.25s;-webkit-tap-highlight-color:transparent}
.langbtn:hover{background:var(--gold);color:#fff}
@media (min-width:900px){.langbtn{left:28px;top:28px}}
html[lang=en]{--script:'Great Vibes','Aref Ruqaa',cursive;--serif:'Cormorant Garamond','Amiri',serif;--kufi:'Cormorant Garamond','Reem Kufi',serif}
html[lang=en] body{font-size:1.28rem;font-weight:500}
html[lang=en] h2{font-size:2.7rem}
html[lang=en] .names{font-size:clamp(3.1rem,15vw,4.3rem)}
html[lang=en] .title{font-size:clamp(2rem,8.5vw,2.6rem)}
html[lang=en] .hosts b{font-size:clamp(1.45rem,6vw,1.75rem);font-weight:600}
html[lang=en] .hosts .hi{font-size:1.2rem}
html[lang=en] .hosts em{font-size:1.6rem}
html[lang=en] .dd2 b{font-size:3rem}.dd2 span{font-size:1.2rem}
html[lang=en] .quote{font-style:italic;font-size:1.75rem;line-height:1.7}
html[lang=en] .cnames{font-size:2.8rem}
html[lang=en] .inv{font-size:2.2rem}
html[lang=en] .csub{font-size:1.3rem}
html[lang=en] .vblock b,html[lang=en] .vname{font-weight:600}
html[lang=en] .btn,html[lang=en] .chips button,html[lang=en] .open-btn{font-size:1.15rem}
html[lang=en] .ev .n{font-size:1.3rem}
html[lang=en] .ring b small{font-size:.95rem}
html[dir=ltr] .sep .ln.a{background:linear-gradient(90deg,transparent,var(--gold));transform-origin:right center}
html[dir=ltr] .sep .ln.b{background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left center}
@media (min-width:900px){
  html[lang=en] .names{font-size:clamp(4rem,6vw,6rem)}
  html[lang=en] .hosts b{font-size:2.1rem}
  html[lang=en] .quote{font-size:2.3rem}
}
/* language button: top centre (clear of the frame corners) */
.langbtn{left:50%;translate:-50% 0;top:24px}
@media (min-width:900px){.langbtn{left:50%;top:28px}}
html[lang=en] .names{font-size:clamp(2.7rem,12.5vw,3.7rem);flex-wrap:nowrap;gap:.4rem}
html[lang=en] .names em{font-size:1.5rem}
html[lang=en] .title{font-size:clamp(1.7rem,7.2vw,2.3rem);white-space:nowrap}
html[lang=en] .hosts b{font-size:clamp(1.3rem,5.4vw,1.6rem)}
@media (min-width:900px){
  html[lang=en] .names{font-size:clamp(3.6rem,5vw,5.2rem)}
  html[lang=en] .title{font-size:2.7rem}
  html[lang=en] .hosts b{font-size:1.9rem}
}

.hosts b{text-wrap:balance}

/* ---- basmala at the top + numeric date + language button moved to the bottom corner ---- */
.basmala{font-family:'Amiri',serif;font-size:1.75rem;line-height:1.7;color:var(--gold);text-align:center;margin:0;direction:rtl}
.hero>.basmala{margin-top:-.4rem}
.gate-basmala{position:absolute;top:7vh;left:0;right:0;font-size:2rem}
html[lang=en] .basmala{direction:ltr;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;letter-spacing:.02em}
html[lang=en] .gate-basmala{font-size:1.35rem;padding:0 1.5rem}
.numdate{font-family:'Reem Kufi',sans-serif;font-size:1.05rem;letter-spacing:.28em;color:var(--deep);margin:-.2rem 0 0;direction:ltr}
.langbtn{top:auto;bottom:22px;left:auto;right:max(14px,calc(50% - 226px));translate:none;width:48px;height:48px;padding:0;display:grid;place-items:center;font-size:.85rem}
@media (min-width:900px){
  .langbtn{left:auto;right:28px;bottom:28px;top:auto;width:52px;height:52px}
  .hero>.basmala{grid-column:1 / -1;grid-row:1;margin:0;font-size:2.3rem}
  html[lang=en] .hero>.basmala{font-size:1.5rem}
  .window{grid-row:2 / span 7}
  .hint{grid-row:9}
  .hosts{grid-row:2}.title{grid-row:3}.names{grid-row:4}.datebar{grid-row:5}.numdate{grid-column:2;grid-row:6}.vblock{grid-row:7}.prog{grid-row:8}.cue{grid-row:10}
  .gate-basmala{font-size:2.6rem}
}
@media (max-width:360px){html[lang=en] .names{font-size:2.5rem}html[lang=en] .title{font-size:1.55rem}}

html[lang=en] body{font-variant-numeric:lining-nums}

/* basmala stays Arabic (same look) in the English version */
html[lang=en] .basmala{direction:rtl;font-family:'Amiri',serif;font-style:normal;font-weight:400;font-size:1.75rem;letter-spacing:0;line-height:1.7}
html[lang=en] .gate-basmala{font-size:2rem;padding:0}
@media (min-width:900px){
  html[lang=en] .hero>.basmala{font-size:2.3rem}
  html[lang=en] .gate-basmala{font-size:2.6rem}
}