@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@400;500;700;800&display=swap');

:root{--wine:#3a0710;--wine-deep:#24040a;--wine-soft:#5c1320;--gold:#c59b27;--gold-bright:#f3d477;--gold-pale:#f7e5a9;--cream:#fbf7ee;--paper:#f7f1e8;--ink:#4a2511;--muted:#8b6b5d;--line:rgba(197,155,39,.42);--shadow:0 18px 55px rgba(0,0,0,.32)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--wine);color:var(--ink);font-family:'Tajawal',sans-serif;overflow-x:hidden}.latin{font-family:Georgia,'Times New Roman',serif;letter-spacing:.2em;direction:ltr}.is-hidden{display:none!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 24%,rgba(123,24,44,.28),transparent 29%),radial-gradient(circle at 50% 90%,rgba(0,0,0,.22),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.02),transparent 35%)}
.star-field{position:fixed;inset:0;opacity:.68;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 8% 18%,#f9d477 0 1px,transparent 2px),radial-gradient(circle at 82% 12%,#f9d477 0 1px,transparent 2px),radial-gradient(circle at 17% 75%,#fff2cc 0 1px,transparent 2px),radial-gradient(circle at 89% 75%,#fff2cc 0 1px,transparent 2px);background-size:170px 190px,210px 210px,240px 180px,230px 240px}
.ambient{position:fixed;width:175px;height:175px;pointer-events:none;z-index:0;opacity:.76;filter:drop-shadow(0 0 14px rgba(125,20,41,.34))}.ambient:before,.ambient:after{content:"";position:absolute;inset:28px;border:1px solid rgba(246,218,144,.62);border-radius:50%;box-shadow:0 0 0 9px rgba(197,155,39,.08),0 0 0 19px rgba(197,155,39,.06)}.ambient:after{inset:4px;border:0;box-shadow:none;background:radial-gradient(circle at 56% 42%,#9b2037 0 11%,#641326 12% 22%,transparent 23%),radial-gradient(circle at 34% 60%,#a82c42 0 8%,#67152a 9% 16%,transparent 17%),radial-gradient(circle at 73% 73%,#8f1f36 0 9%,#4f0b18 10% 16%,transparent 17%),radial-gradient(circle at 52% 63%,#e6d8bc 0 3%,transparent 4%),radial-gradient(circle at 26% 32%,#f5e8cd 0 3%,transparent 4%)}.ambient-top-left{top:-42px;left:-40px;transform:rotate(-22deg)}.ambient-top-right{top:-42px;right:-40px;transform:rotate(22deg)}.ambient-bottom-left{bottom:-48px;left:-38px;transform:rotate(22deg)}.ambient-bottom-right{bottom:-48px;right:-38px;transform:rotate(-22deg)}
.opening-screen{min-height:100svh;display:grid;place-items:center;padding:28px 16px;position:relative;z-index:2;background:radial-gradient(circle at center,rgba(80,10,23,.55),rgba(26,2,8,.5) 58%,rgba(12,1,5,.72))}.opening-screen.opening-closing{animation:openingOut .52s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}.opening-card{width:min(420px,100%);min-height:540px;padding:38px 28px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border:1px solid var(--gold);border-radius:42px 42px 28px 28px;background:linear-gradient(160deg,rgba(63,6,17,.95),rgba(36,3,10,.97));box-shadow:inset 0 0 0 8px rgba(197,155,39,.06),0 24px 80px rgba(0,0,0,.36);text-align:center}.opening-card:before{content:"";position:absolute;inset:9px;border:1px solid rgba(197,155,39,.6);border-radius:35px 35px 21px 21px;pointer-events:none}.opening-border{position:absolute;inset:18px;border:1px solid rgba(247,229,169,.22);border-radius:29px 29px 15px 15px;pointer-events:none}.micro-label{font-size:10px;color:rgba(247,229,169,.58);margin-bottom:30px}.opening-kicker{color:var(--gold-pale);font-family:Amiri,serif;font-size:17px;margin:0 0 18px}.opening-names{font-family:Amiri,serif;color:var(--gold-pale);font-size:31px;margin:18px 0 7px;font-weight:700}.opening-date,.opening-place{font-family:Amiri,serif;color:rgba(247,229,169,.76);font-size:14px;margin:1px 0}.opening-place{font-size:13px;margin-bottom:30px}.opening-footer{margin-top:30px;color:rgba(247,229,169,.45);font-size:9px}.seal{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;border:1px solid #d7b44d;background:radial-gradient(circle at 32% 25%,#fff8d0,#d9b94f 23%,#8a6214 58%,#f3db7a 61%,#71480b 68%,#fbefa5 71%,#9c6b10 73%);box-shadow:0 0 0 5px rgba(197,155,39,.18),0 0 0 13px rgba(197,155,39,.06),0 7px 26px rgba(0,0,0,.25)}.seal:before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(74,37,17,.7)}.seal span{position:relative;font-family:Amiri,serif;font-size:48px;font-weight:700;color:#4a2114;transform:rotate(-8deg);line-height:1}.seal-large{width:100px;height:100px}.seal-large span{font-size:58px}.gold-button{border:0;cursor:pointer;color:var(--wine-deep);font:700 16px Tajawal,sans-serif;background:linear-gradient(90deg,#966a17,#e2bc4c 49%,#966a17);border-radius:999px;box-shadow:0 0 26px rgba(212,175,55,.35);padding:14px 24px;min-width:265px;transition:.3s}.gold-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.gold-button span{font-size:12px;margin:0 5px}
@keyframes openingOut{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.035);filter:blur(2px)}}
.invitation-shell{position:relative;z-index:1;padding:56px 14px 72px;min-height:100svh}.invitation-card{width:min(650px,100%);margin:0 auto;background:var(--paper);border-radius:44px 44px 24px 24px;position:relative;overflow:hidden;border:1px solid #a57d1c;box-shadow:var(--shadow)}.invitation-card:before,.invitation-card:after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(170,126,27,.5);z-index:1}.invitation-card:before{inset:8px;border-radius:37px 37px 18px 18px}.invitation-card:after{inset:15px;border-radius:31px 31px 11px 11px;border-color:rgba(170,126,27,.24)}.hero-section{text-align:center;padding:54px 28px 13px;position:relative;background:linear-gradient(180deg,#fffdf8,#f9f3e9)}.hero-section:before{content:"";position:absolute;inset:26px 38px auto;height:1px;background:linear-gradient(90deg,transparent,rgba(176,133,33,.48),transparent)}.hero-kicker,.hero-intro,.hero-caption{font-family:Amiri,serif}.hero-kicker{font-size:19px;margin:18px 0 1px}.hero-intro{font-size:19px;margin:0;color:#3d2416}.crown{font-size:38px;line-height:1;color:#ad7d13;filter:drop-shadow(0 2px 0 #ecd68b);margin-bottom:10px}.hero-title{font-family:Amiri,serif;font-size:39px;margin:5px 0 2px;color:#26150e;line-height:1.1}.gold-rule{width:220px;height:18px;display:flex;gap:8px;align-items:center;justify-content:center;color:#ae7b13;margin:4px auto 7px}.gold-rule:before,.gold-rule:after{content:"";height:1px;flex:1;background:#bb8d29}.gold-rule span{font-size:11px}.hero-latin{font-size:9px;color:#9a7c53;margin:0 0 15px}.names-plaque{width:min(390px,100%);margin:0 auto;padding:10px 20px 8px;border:1px solid rgba(195,159,70,.52);border-radius:11px;background:linear-gradient(90deg,#faf1df,#f4e9d6,#faf1df);display:flex;align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;color:#6b1d2b;font-family:Amiri,serif;font-size:33px;line-height:1}.names-plaque b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;font:700 17px Georgia;color:#a17a24;background:#fff6d8;border:1px solid #d6b95f}.names-plaque small{width:100%;font-size:8px;color:#ae9366;margin-top:-4px}.hero-caption{font-size:18px;line-height:1.8;margin:16px 0 0}.countdown-section{padding:0 28px 11px;text-align:center}.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto}.countdown-box{padding:9px 4px;border:1px solid rgba(192,158,70,.5);border-radius:11px;background:linear-gradient(#fffaf0,#f3eadb)}.countdown-box strong{display:block;color:#722335;font:700 24px Georgia,serif;line-height:1.1}.countdown-box span{font-family:Amiri,serif;font-size:13px;color:#705441}
.looks-section{padding:15px 26px 30px}.section-heading{display:flex;align-items:center;justify-content:center;gap:9px;color:#b27d16;margin:0 auto 8px}.section-heading h2{font:700 28px Amiri,serif;color:#2b1a12;margin:0;text-align:center}.section-heading span{font-size:15px}.section-note{text-align:center;font:17px/1.7 Amiri,serif;margin:3px 0 13px;color:#6a4a3a}.reel-cta,.reel-button{border:0;cursor:pointer;color:var(--gold-pale);background:linear-gradient(90deg,#781d31,#4b0c19);box-shadow:0 4px 12px rgba(73,10,22,.15);font:700 12px Tajawal,sans-serif;border-radius:999px;padding:9px 15px;transition:.25s}.reel-cta{display:block;margin:0 auto 20px}.reel-cta:hover,.reel-button:hover{filter:brightness(1.15);transform:translateY(-1px)}.looks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.look-card{background:linear-gradient(145deg,#fffaf3,#f6ecdf);border:1px solid rgba(192,158,70,.48);border-radius:15px;padding:13px 11px 12px;box-shadow:0 7px 18px rgba(94,57,29,.05);position:relative}.look-card:before{content:"W&M";position:absolute;inset:8px auto auto 10px;font:9px Georgia;color:rgba(169,128,49,.52);letter-spacing:.1em;direction:ltr}.look-day{font:16px Amiri,serif;color:#713041;text-align:center;margin:0 0 1px}.look-date{font:10px Georgia,serif;color:#9c7f57;direction:ltr;text-align:center;margin:0 0 12px}.look-order{text-align:center;font:14px Amiri,serif;color:#8f6834;margin:0 0 2px}.look-name{text-align:center;font:700 24px Amiri,serif;color:#3b1a12;margin:0 0 12px}.presence-actions{display:flex;gap:6px}.presence-actions button{flex:1;padding:8px 4px;border-radius:8px;cursor:pointer;font:700 11px Tajawal,sans-serif;border:1px solid rgba(197,155,39,.42);background:rgba(255,255,255,.75);color:#6e473b;transition:.2s}.presence-actions button:hover{background:#fff5dc}.presence-actions button.active{background:linear-gradient(90deg,#8c6218,#c59b27);color:#fff;box-shadow:0 3px 7px rgba(136,94,20,.2)}
.rsvp-section{padding:0 26px 35px}.small-heading h2{font-size:24px}.rsvp-intro,.summary-label{font:16px/1.7 Amiri,serif;text-align:center;color:#4d3428}.summary-label{margin:13px 0 8px;color:#6d4632}.summary-label span{font-size:13px;color:#9a7765}.summary-list{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:18px}.summary-chip{border:1px solid rgba(197,155,39,.42);background:#fffaf1;color:#633d2f;border-radius:999px;padding:7px 10px;font:12px Tajawal,sans-serif;cursor:pointer}.summary-chip.is-absent{background:#f2ebe3;color:#977f72;border-color:rgba(138,100,80,.22)}.summary-chip b{color:#8c6218}.rsvp-form{display:flex;flex-direction:column;gap:8px}.rsvp-form label{font:16px Amiri,serif;color:#5b3d30}.rsvp-form label span{font-size:12px;color:#a18573}.rsvp-form input,.rsvp-form textarea{width:100%;border:1px solid rgba(197,155,39,.46);background:#fffdf8;border-radius:11px;padding:12px 13px;color:#4a2511;font:14px Tajawal,sans-serif;outline:none;resize:vertical;transition:.2s}.rsvp-form input:focus,.rsvp-form textarea:focus{border-color:#9f761a;box-shadow:0 0 0 3px rgba(197,155,39,.11)}.submit-button{margin-top:8px;cursor:pointer;border:0;border-radius:999px;padding:13px 14px;color:#fff;background:linear-gradient(90deg,#7a1c2e,#a06f1a,#7a1c2e);font:700 14px Tajawal,sans-serif;box-shadow:0 6px 18px rgba(98,26,39,.16)}.submit-button:hover{filter:brightness(1.08)}.submit-button span{margin-right:5px;color:#ffe8a5}.form-status{font:15px Amiri,serif;text-align:center;color:#7c5319;min-height:23px;margin:0}.form-status.error{color:#8a2532}
.invitation-footer{padding:0 26px 42px;text-align:center}.footer-divider{width:min(260px,82%);margin:0 auto 10px;color:#b17e19}.footer-divider:before,.footer-divider:after{content:"";display:inline-block;width:39%;height:1px;vertical-align:middle;background:linear-gradient(90deg,transparent,#bc8b28)}.footer-divider:after{background:linear-gradient(90deg,#bc8b28,transparent)}.footer-divider span{padding:0 9px}.footer-thanks{font:18px/1.8 Amiri,serif;color:#4e3428;margin:0 0 20px}.event-details{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.event-details>div{display:flex;flex-direction:column;gap:3px;border-left:1px solid rgba(197,155,39,.26);padding:4px}.event-details>div:last-child{border:0}.event-details > div:nth-of-type(1){padding-top:1px;padding-right:24px;padding-bottom:3px;padding-left:0}.event-details > div:nth-of-type(2){margin-right:100px;margin-left:-84px;padding-right:0;padding-left:29px}.detail-label{font:13px Amiri,serif;color:#9b6e24}.event-details b{font:14px Amiri,serif;color:#543124}.event-details small{font:10px Amiri,serif;color:#927662}.footer-waiting{font:20px Amiri,serif;color:#762034;margin:24px 0 6px}.footer-signature{font-size:9px;color:#9a7c53}.footer-signature span{color:#b27d16}
.floating-actions{position:fixed;top:15px;left:15px;z-index:7;display:flex;gap:7px;align-items:center}.icon-button{height:36px;width:36px;cursor:pointer;border:1px solid rgba(243,212,119,.65);color:#fbe8aa;background:rgba(62,7,17,.92);border-radius:50%;font:18px Georgia;box-shadow:0 5px 18px rgba(0,0,0,.2)}.reel-button{padding:8px 12px;font-size:11px}.reel-modal{position:fixed;inset:0;display:none;place-items:center;z-index:20}.reel-modal.open{display:grid}.reel-backdrop{position:absolute;inset:0;background:rgba(19,1,7,.82);backdrop-filter:blur(6px)}.reel-panel{width:min(430px,calc(100% - 32px));position:relative;padding:12px;border:1px solid #c9a642;border-radius:25px;background:linear-gradient(145deg,#5a1020,#27050c);box-shadow:0 18px 60px rgba(0,0,0,.45);animation:modalIn .35s ease}.modal-close{position:absolute;top:10px;left:13px;border:0;background:transparent;color:#f4d984;font-size:30px;line-height:1;cursor:pointer}.reel-stage{min-height:380px;border:1px solid rgba(243,212,119,.55);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f7e5a9;background:radial-gradient(circle at center,rgba(166,102,18,.25),transparent 43%)}.reel-stage .seal{margin-bottom:18px}.reel-stage p{font:14px/2 Amiri,serif}.reel-stage h2{font:28px Amiri,serif;margin:3px 0}.reel-line{width:150px;height:1px;background:#d6b34c;margin:6px 0}.reel-glow{position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(239,194,63,.17);filter:blur(26px);pointer-events:none}@keyframes modalIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(max-width:540px){.opening-card{min-height:530px;border-radius:34px;padding-inline:22px}.opening-names{font-size:29px}.invitation-shell{padding:48px 7px 56px}.invitation-card{border-radius:32px 32px 18px 18px}.invitation-card:before{inset:7px;border-radius:27px 27px 13px 13px}.invitation-card:after{inset:12px;border-radius:21px 21px 8px 8px}.hero-section{padding:47px 21px 12px}.hero-title{font-size:35px}.hero-kicker,.hero-intro{font-size:17px}.names-plaque{font-size:28px;gap:11px}.section-heading h2{font-size:25px}.looks-section,.rsvp-section,.invitation-footer{padding-inline:18px}.looks-grid{gap:9px}.look-card{padding-inline:7px}.look-name{font-size:21px}.presence-actions button{font-size:10px;padding-inline:2px}.event-details b{font-size:12px}.event-details small{font-size:9px}.floating-actions{left:9px;top:9px}.reel-button{font-size:10px}.icon-button{height:32px;width:32px;font-size:16px}}
@media(min-width:700px){.invitation-shell{padding-top:72px}.invitation-card{width:650px}.opening-card{width:430px}.looks-grid{gap:15px}.look-card{padding:16px}.rsvp-section,.looks-section{padding-inline:48px}}
