@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600&display=swap');
:root{--navy:#101e31;--paper:#f7f5f0;--gold:#dcc59f;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font:16px/1.8 var(--sans);background:var(--navy);color:var(--paper)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1}h2{font-size:clamp(38px,4.6vw,66px)}em{font-weight:400;color:var(--gold)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}[hidden]{display:none!important}img{display:block;width:100%;height:auto}
.backdrop{position:fixed;inset:-30px;z-index:0;background:linear-gradient(#101e31b8,#101e31ed),url('assets/golden.webp') center/cover;filter:blur(12px);transform:translateY(var(--backdrop-drift,0px)) scale(1.08);pointer-events:none}
main{position:relative;z-index:1;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;outline:none}
.scene{position:relative;min-height:100vh;min-height:100dvh;width:100%;padding:80px 7% 45px;scroll-snap-align:start;scroll-snap-stop:always;display:flex;justify-content:center;align-items:center;text-align:center;isolation:isolate}
.scene-content{width:100%;max-width:700px;margin:auto}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--gold)}.scene-content>h2{margin:22px 0 28px}.fine-line{width:50px;height:1px;background:#b9a27e;margin:28px auto}.button{min-height:48px;padding:11px 22px;border:1px solid #ddc9a6b3;background:#101e3180;color:#fff;backdrop-filter:blur(5px);display:inline-flex;justify-content:center;align-items:center;gap:25px;font-size:14px;transition:background .2s}.button:hover{background:#29425d}.button-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}.button-gold:hover{background:#efdfc6}
.hero{height:100vh;height:100dvh;min-height:620px;overflow:hidden;align-items:flex-start;padding:0}.hero-photo{position:absolute;inset:auto 0 0;height:100%;pointer-events:none}.hero-photo img{height:100%;object-fit:contain;object-position:center bottom}.hero-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#101e31b0,transparent 50%,#101e3140)}.hero-content{position:relative;z-index:2;padding:35px 70px 15px;width:100%;background:linear-gradient(180deg,#101e3160,#101e3120,transparent);text-shadow:0 2px 12px #000a}.reception-heading{font-size:19px;letter-spacing:.13em;line-height:1.5}.reception-heading span{display:block}.hero h1{font-size:clamp(54px,6vw,86px);letter-spacing:-.04em;margin:12px 0}.hero-date{font-size:13px;letter-spacing:.12em}.guest{margin-top:15px}.guest p{font-size:14px}.guest strong{display:block;font:500 25px/1.4 var(--serif);overflow-wrap:anywhere;max-width:80vw;margin:auto}.open-invitation{position:absolute;z-index:3;bottom:max(34px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);white-space:nowrap}
.arabic{font:34px/1.8 Georgia,serif;margin:28px 0}.blessing blockquote{font:italic 28px/1.5 var(--serif);margin:0 auto 25px;max-width:630px}.verse{font-size:13px;letter-spacing:.06em;color:var(--gold)}
.couple-content{max-width:850px}.invitation-intro{max-width:700px;margin:0 auto 20px;font-size:15px;line-height:1.7;color:#e1e3e8}.greeting{margin-bottom:10px;color:#fff}.couple-heading{margin:18px 0 22px}.couple-layout{display:grid;grid-template-columns:220px 1fr;gap:50px;align-items:center;max-width:750px;margin:auto}.couple-portrait{width:220px;height:290px;border-radius:120px 120px 0 0;outline:1px solid #bea980;outline-offset:6px;overflow:hidden}.couple-portrait img{height:100%;object-fit:contain;background:#192b40}.person .full-name{font-size:27px;line-height:1.3;letter-spacing:-.015em}.family-label{font-size:13px;color:#c9cdd3;margin:12px 0 3px}.parent-name{font-size:16px;line-height:1.7}.union{display:block;font:italic 30px var(--serif);color:var(--gold);margin:12px auto}
.date-lockup{display:flex;justify-content:center;align-items:center;gap:25px;margin:20px 0}.date-lockup strong{font:110px/1 var(--serif)}.date-lockup span{border-left:1px solid #baa789;padding-left:25px;text-align:left;font-size:13px;letter-spacing:.15em;line-height:1.9}.time{font-size:17px}.venue{font-size:34px;margin-bottom:10px}.reception .button{margin-top:28px}.calendar{display:block;margin-top:22px;font-size:14px;color:#f0dfc4}.countdown-intro{margin:25px 0;font-size:16px;color:#e1e3e8}.countdown{display:flex;justify-content:center;gap:35px;margin:35px 0 18px}.countdown div{min-width:56px;display:flex;flex-direction:column}.countdown strong{font:64px/1.2 var(--serif)}.countdown span{font-size:11px;letter-spacing:.17em;margin-top:8px}#countdown-caption{font-size:13px;color:#d2d7df}.rsvp .button{margin-top:15px}#rsvp-note{font-size:14px;color:#e1e3e8;margin:20px auto;max-width:400px}.closing p:not(.eyebrow){font-size:15px;color:#e1e3e8;margin-bottom:18px}.closing .salam-close{margin-top:25px}.signature{font:60px var(--serif);margin:28px 0 15px}
.floral-frame{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}.flower{position:absolute;width:230px;opacity:.9;filter:drop-shadow(0 3px 8px #0003);will-change:transform}.flower-left{left:-15px;top:-185px;transform:translateY(var(--flower-a,0px)) rotate(62deg)}.flower-right{right:-15px;top:-185px;transform:translateY(var(--flower-b,0px)) scaleX(-1) rotate(62deg)}
.menu-toggle{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));width:48px;height:48px;z-index:10;background:#101e31b8;border:1px solid #d9c09a8c;border-radius:50%;padding:13px;display:flex;flex-direction:column;justify-content:center;gap:5px;backdrop-filter:blur(12px)}.menu-toggle span{display:block;width:20px;height:1px;background:#f0dfc4;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.menu-panel{position:fixed;right:20px;bottom:82px;z-index:9;min-width:235px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 110px);overflow:auto;padding:12px;background:#101e31f0;border:1px solid #d9c09a66;border-radius:14px;box-shadow:0 12px 35px #0005;backdrop-filter:blur(16px)}.menu-panel a{display:block;padding:10px 15px;font-size:14px;text-align:left;border-radius:5px}.menu-panel a:hover,.menu-panel a[aria-current=page]{background:#ddc9a622;color:#f0dfc4}
@media(max-width:600px){
  .scene{padding:78px 6% 48px}.scene-content>h2{font-size:clamp(36px,10vw,46px)}.hero{padding:0;height:100dvh;min-height:540px}.hero-photo{height:auto;aspect-ratio:1;width:100%;max-height:72%;bottom:0}.hero-photo img{object-fit:contain;object-position:center bottom}.hero-content{padding:20px 6% 10px}.reception-heading{font-size:17px}.hero h1{font-size:clamp(44px,12vw,62px);margin:8px 0}.hero-date{font-size:11px;letter-spacing:.05em}.guest{margin-top:10px}.guest strong{font-size:23px}.open-invitation{bottom:max(28px,env(safe-area-inset-bottom));font-size:14px;min-height:44px;padding:9px 18px}.hero-photo:after{background:linear-gradient(180deg,#101e3170,transparent 25%,transparent 83%,#101e3155)}
  .arabic{font-size:29px}.blessing blockquote{font-size:24px}.eyebrow{font-size:11px}.couple{padding-left:5%;padding-right:5%}.invitation-intro{font-size:14px;line-height:1.6;margin-bottom:15px}.greeting{margin-bottom:8px}.couple-heading{margin:12px 0 16px}.couple-layout{display:flex;flex-direction:column;gap:17px}.couple-portrait{width:80px;height:110px;outline-offset:4px}.couple-identities{width:100%}.person .full-name{font-size:clamp(17px,4.7vw,22px);line-height:1.3}.family-label{margin-top:7px;font-size:13px}.parent-name{font-size:14px;line-height:1.65}.union{font-size:23px;margin:9px auto}.countdown{gap:20px}.countdown strong{font-size:48px}.countdown div{min-width:44px}.countdown-intro{font-size:15px}.date-lockup strong{font-size:95px}.venue{font-size:31px}.reception .scene-content>p:not(.eyebrow){font-size:14px}.closing p:not(.eyebrow){font-size:14px}.signature{font-size:49px}.flower{width:195px}.flower-left{left:-45px;top:-158px}.flower-right{right:-45px;top:-158px}.menu-toggle{right:14px;bottom:16px}.menu-panel{right:14px;bottom:76px}
}
@media(max-height:700px){.scene{padding-top:54px;padding-bottom:35px}.couple-portrait{height:85px;width:65px}.couple-layout{gap:12px}.invitation-intro{margin-bottom:10px}.couple-heading{margin:8px 0 12px}.union{margin:5px auto}.family-label{margin-top:4px}.hero{padding:0}.hero-content{padding-top:14px}.hero h1{margin:5px 0}.guest{margin-top:7px}}
.floral-frame{opacity:0;transform:scale(1.035);transition:opacity .16s ease,transform .2s ease;will-change:opacity;z-index:3}
.floral-frame.is-visible{opacity:1;transform:scale(1);transition:opacity .65s ease,transform .9s ease}
.floral-edge{position:absolute;pointer-events:none;background-image:url('assets/floral-accent.png');filter:drop-shadow(0 2px 6px #0003)}
.edge-left,.edge-right{top:0;bottom:0;width:145px;background-size:145px 218px;background-repeat:repeat-y;background-position:center}
.edge-left{left:-48px}.edge-right{right:-48px;transform:scaleX(-1)}
.edge-top,.edge-bottom{left:0;right:0;height:90px;background-size:155px 233px;background-repeat:repeat-x;background-position:center 45%}
.edge-top{top:-28px}.edge-bottom{bottom:-28px;transform:rotate(180deg)}
.bottom-nav{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:94%;display:flex;justify-content:space-around;gap:10px;z-index:8;background:#101e31c7;backdrop-filter:blur(14px);border:1px solid #d9c09a75;border-radius:40px;padding:6px 15px}
.bottom-nav a{font-size:14px;padding:8px 12px;border-radius:25px}.bottom-nav a:hover,.bottom-nav a[aria-current=page]{color:#f4d6a3;background:#ddc9a618}
.scene{padding-bottom:100px}.hero{padding:0}.open-invitation{bottom:max(98px,calc(env(safe-area-inset-bottom) + 80px))}
.hero-content{padding-top:65px}.couple-content{max-width:920px}.couple-layout{grid-template-columns:200px minmax(0,1fr);max-width:840px}.couple-portrait{width:200px}.person .full-name{font-size:clamp(21px,2.1vw,27px)}
@media(max-width:600px){
  .scene{padding-left:9%;padding-right:9%;padding-top:70px;padding-bottom:90px}.hero{padding:0}.hero-content{padding-top:50px}.edge-left,.edge-right{width:108px;background-size:108px 162px}.edge-left{left:-42px}.edge-right{right:-42px}.edge-top,.edge-bottom{height:65px;background-size:125px 188px}.edge-top{top:-23px}.edge-bottom{bottom:-23px}
  .bottom-nav{width:94%;gap:0;padding:4px 7px}.bottom-nav a{font-size:11px;padding:10px 7px}.open-invitation{bottom:88px}.couple{padding-left:6%;padding-right:6%}.couple-portrait{width:80px;height:110px}.person .full-name{font-size:clamp(16px,4.5vw,21px)}.parent-name{font-size:14px}.invitation-intro{font-size:14px}
}
@media(min-width:601px) and (max-width:900px){.couple-layout{display:flex;flex-direction:column;gap:18px}.couple-portrait{width:100px;height:135px}.person .full-name{font-size:24px}}
@media(max-height:700px){.hero-content{padding-top:35px}.couple-portrait{height:80px;width:60px}.scene:not(.hero){padding-top:55px;padding-bottom:85px}}
@media(prefers-reduced-motion:reduce){main{scroll-behavior:auto}*{transition:none!important}.flower{will-change:auto}.backdrop,.flower{--flower-a:0px!important;--flower-b:0px!important;--backdrop-drift:0px!important}.floral-frame{transform:none}}
@media(min-width:901px){
  .couple-content{max-width:1000px}
  .couple-layout{max-width:960px;grid-template-columns:clamp(230px,24vw,310px) minmax(0,1fr);gap:45px}
  .couple-portrait{width:auto;max-width:100%;height:clamp(260px,43vh,420px);aspect-ratio:853/1280;justify-self:center;border-radius:180px 180px 0 0}
  .couple-portrait img{width:100%;height:100%;object-fit:contain}
}
@media(max-width:600px){.bottom-nav a{padding-left:5px;padding-right:5px}}
.whatsapp-icon{width:21px;height:21px;display:inline-grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;font:700 14px/1 Arial}
.person .full-name{font-size:clamp(2rem,2.8vw,2.5rem);line-height:1.2;text-wrap:balance}
@media(min-width:901px){.couple-content{max-width:1120px}.couple-layout{max-width:1080px;gap:35px}}
@media(max-width:600px){.person .full-name{font-size:clamp(1.375rem,6vw,1.75rem);line-height:1.25}}