:root{--bg:#281b15;--paper:#38261d;--gold:#c9a66b;--cream:#f1e3c5;--ink:#ead9b8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 'Cormorant Garamond',serif;overflow-x:hidden}.cover,.panel{min-height:100svh;display:grid;place-items:center;position:relative;padding:32px 22px;text-align:center;background:radial-gradient(circle at 50% 35%,#513727 0,var(--bg) 62%)}.cover{position:fixed;inset:0;z-index:10;transition:transform 1.1s cubic-bezier(.76,0,.24,1),opacity .8s}.cover.opened{transform:translateY(-105%);opacity:.4;pointer-events:none}.arch{width:min(100%,430px);height:calc(100svh - 32px);border:1px solid #c9a66b80;border-radius:220px 220px 18px 18px;padding:24px 22px 18px;box-shadow:inset 0 0 70px #0005,0 20px 80px #0007;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.arch:before,.arch:after{content:'❦';position:absolute;color:var(--gold);font-size:76px;opacity:.42;animation:sway 4s ease-in-out infinite}.arch:before{left:-12px;top:78px;transform:rotate(-42deg)}.arch:after{right:-12px;bottom:80px;transform:rotate(138deg);animation-delay:-2s}.arabic{font:28px/1.6 Amiri,serif;color:var(--gold)}h1,h2,h3,p{margin:.5em 0}h1,.hero h2{font:clamp(50px,15vw,76px)/.95 'Great Vibes',cursive;color:var(--cream);font-weight:400}h1 i,h2 i{display:block;font-size:.65em;color:var(--gold)}button,.map{border:1px solid var(--gold);background:var(--gold);color:#241710;padding:13px 24px;border-radius:2px;font:700 16px 'Cormorant Garamond';letter-spacing:.08em;text-decoration:none;cursor:pointer;transition:transform .18s ease-out,background .18s}button:hover,.map:hover{transform:translateY(-2px);background:var(--cream)}.couple{width:230px;margin:auto}.couple svg{overflow:visible;filter:drop-shadow(0 12px 10px #0006);animation:float 4s ease-in-out infinite}.halo{fill:none;stroke:#c9a66b50;stroke-width:2}.skin{fill:#b98765}.hijab,.dress{fill:#ded2b4}.dress{stroke:#c9a66b;stroke-width:3}.cap,.suit{fill:#24382d}.gold{fill:none;stroke:var(--gold);stroke-width:5}.to{font-size:16px}.panel{min-height:100svh;background-color:var(--paper);background-image:radial-gradient(#fff1 1px,transparent 1px);background-size:5px 5px;align-content:center}.panel:nth-child(even){background-color:#eee2c8;color:#38261d}.panel>p{max-width:560px}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:13px;color:var(--gold)}.panel h2{font:clamp(42px,12vw,68px)/1 'Great Vibes';font-weight:400}.names,.events{display:grid;gap:22px;width:min(100%,680px);margin:34px auto}.names h3,.closing h3{font:38px 'Great Vibes';color:#a87a39}.names>b{font:36px 'Great Vibes';color:var(--gold)}.events article{border:1px solid #9a713b66;padding:25px 18px}.events span{letter-spacing:.2em;text-transform:uppercase;font-size:13px}.events h3{font:38px 'Great Vibes';color:#a87a39}.events time{font-weight:700}.countdown{display:flex;gap:8px;justify-content:center;margin:35px 0}.countdown span{min-width:68px;border:1px solid #c9a66b77;padding:10px 5px}.countdown b,.countdown small{display:block}.countdown b{font:600 28px/1 system-ui,sans-serif}.countdown small{font:600 12px/1.5 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--cream)}address{font-style:normal;margin:24px auto 35px}.scroll{position:absolute;bottom:28px;font-size:12px;letter-spacing:.15em;animation:pulse 1.7s infinite}.couple-image{max-width:280px;width:100%;height:auto;margin:24px auto;display:block;border-radius:8px;box-shadow:0 8px 24px #0004}#quran-trans{font:18px 'Cormorant Garamond';color:var(--ink);margin:12px 0 6px}#quran-src{font-size:13px;color:var(--gold);letter-spacing:.08em}form{width:min(100%,500px);margin:24px auto}fieldset{border:1px solid #c9a66b77;padding:20px;border-radius:4px;background:rgba(201,166,107,.05)}legend{padding:0 8px;color:var(--gold);font-weight:700}label{display:block;margin:16px 0;font-size:16px}input,select,textarea{width:100%;padding:10px;margin:8px 0 0;border:1px solid #c9a66b77;border-radius:3px;font:inherit;color:inherit;background:rgba(255,255,255,.05)}textarea{resize:vertical;font-family:inherit}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,166,107,.2)}.action-buttons,.primary{display:block;margin:20px auto 0}.primary{padding:12px 24px;background:var(--gold);color:#241710;border:none;border-radius:2px;font:700 16px 'Cormorant Garamond';letter-spacing:.08em;cursor:pointer;transition:transform .18s,background .18s}.primary:hover{transform:translateY(-2px);background:var(--cream)}.guest-list{margin:24px 0;max-width:560px}.guest-list article{border-left:3px solid var(--gold);padding:14px 16px;margin:12px 0;background:rgba(201,166,107,.08);border-radius:2px}.guest-list h4{margin:.25em 0 .5em;font-size:16px;color:var(--gold)}.guest-list p{margin:.25em 0;font-size:15px}.gift-info{max-width:560px;margin:24px auto;padding:16px;border:1px solid #c9a66b44;border-radius:4px;background:rgba(201,166,107,.05)}.gift-info ul{margin:12px 0;padding-left:22px}@media(max-width:679px){.couple-image{max-width:220px}form{margin:16px auto}fieldset{padding:16px}label{font-size:15px}input,select,textarea{font-size:16px}}.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s ease-out,transform .9s ease-out}.reveal.visible{opacity:1;transform:none}dialog{border:1px solid var(--gold);background:#322219;color:var(--cream);padding:34px 26px;text-align:center;width:min(88vw,390px);box-shadow:0 24px 80px #000b}dialog::backdrop{background:#140d09d9;backdrop-filter:blur(5px)}dialog h2{font:45px 'Great Vibes';color:var(--gold)}@keyframes float{50%{transform:translateY(-8px)}}@keyframes sway{50%{margin-top:8px}}@keyframes pulse{50%{opacity:.35;transform:translateY(5px)}}@media(max-width:679px){.cover{padding:8px}.arch{height:calc(100svh - 16px);padding:18px 16px 14px}.arch>.arabic{font-size:20px}.arch>p{margin:.15em 0}.arch h1{font-size:46px;margin:.1em 0}.arch h1 i{display:inline}.couple{width:min(42vw,170px)}.to{font-size:14px;line-height:1.25}.arch button{padding:10px 20px}}@media(max-height:650px){.couple{width:125px}.arch h1{font-size:38px}.arch>.arabic{font-size:18px}}@media(min-width:680px){.names{grid-template-columns:1fr auto 1fr;align-items:center}.events{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
