:root{--dark:#07150f;--emerald:#10261b;--gold:#d6b87b;--lightgold:#eddab6;--ivory:#f1e9d9;--ink:#263526;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--script:'Great Vibes',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--dark);color:var(--ivory);font-family:var(--serif);overflow-x:hidden}body.locked{overflow:hidden}button,a{touch-action:manipulation}a{color:inherit}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--lightgold);outline-offset:5px}.grain{pointer-events:none;position:fixed;inset:0;z-index:30;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.eyebrow{font:500 .68rem/1.7 var(--sans);letter-spacing:.32em;color:var(--gold)}.arabic{font-size:clamp(1.25rem,3vw,1.8rem);color:var(--lightgold);line-height:1.8}.opening{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1.4rem;text-align:center;background:radial-gradient(ellipse at 50% 40%,#183b29 0%,#0b2117 45%,#06120d 100%);transition:opacity .9s ease,visibility .9s}.opening:before,.closing:before{content:'';position:absolute;inset:2.5%;border:1px solid rgba(214,184,123,.24);pointer-events:none}.opening:after{content:'';position:absolute;inset:4%;border:1px solid rgba(214,184,123,.09);pointer-events:none}.opening.opened{opacity:0;visibility:hidden;pointer-events:none}.opening-ornament{font-size:2rem;color:var(--gold);margin-bottom:1.25rem}.opening .arabic{margin:0}.opening .eyebrow{margin:.1rem 0 1.25rem;font-size:.55rem}.opening h1{font-weight:400;font-size:clamp(2.8rem,7vw,4.5rem);margin:1rem 0 .1rem}.opening-sub{font-size:1.25rem;margin:0 0 1.3rem;color:#d2cfbf}.opening-foot{position:absolute;bottom:4.6%;font:500 .55rem var(--sans);letter-spacing:.22em;color:#c4b492}.envelope-scene{perspective:900px;width:min(320px,70vw);height:225px;display:grid;place-items:center}.envelope{width:100%;height:185px;position:relative;transform-style:preserve-3d;filter:drop-shadow(0 25px 25px #0008)}.envelope .letter{position:absolute;left:8%;right:8%;top:5%;height:87%;background:#f8f1df;color:#38503b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid #d8bd86;box-shadow:0 0 0 5px #f8f1df,0 0 0 6px #b69661;transition:transform 1.1s .25s ease;z-index:1}.letter span,.letter small{font:500 .5rem var(--sans);letter-spacing:.24em}.letter strong{font:400 1.85rem var(--script)}.letter i,.seal i{font-style:normal;color:#a3844a}.flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 60%);background:linear-gradient(150deg,#fff8e8,#d8c39f);z-index:4;transform-origin:top;transition:transform .85s ease;backface-visibility:hidden}.front{position:absolute;inset:0;background:linear-gradient(135deg,#f6e9d1,#ead5ae);clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%);z-index:3;box-shadow:inset 0 0 0 2px #c9aa70}.seal{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);z-index:5;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#c4946e,#762e35 75%);border:3px double #e9c7a5;color:#fae6cf;display:grid;place-items:center;font-size:.8rem;box-shadow:0 3px 10px #3b1b1b99;transition:opacity .4s}.opening.animate .flap{transform:rotateX(180deg);z-index:1}.opening.animate .seal{opacity:0}.opening.animate .letter{transform:translateY(-90px)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.05rem 1.35rem;min-height:52px;text-decoration:none;font:600 .66rem/1.4 var(--sans);letter-spacing:.2em;cursor:pointer;transition:background .3s,color .3s,transform .3s,border-color .3s}.button:hover{transform:translateY(-3px)}.button span{font-size:1.1rem;font-weight:400}.button-light{color:var(--dark);background:var(--gold);border:1px solid var(--gold);min-width:220px}.button-light:hover{background:var(--lightgold)}.invitation{visibility:hidden}.invitation.active{visibility:visible}.topbar{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1.35rem clamp(1.5rem,5vw,5rem);font:500 .58rem var(--sans);letter-spacing:.25em}.monogram{text-decoration:none;font:1.25rem var(--serif);letter-spacing:0}.monogram span{color:var(--gold)}.sound{border:1px solid #d5bd835e;border-radius:100px;background:#0b211797;color:var(--gold);min-width:68px;min-height:40px;cursor:pointer}.sound small{font:.53rem var(--sans);letter-spacing:.07em}.hero{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;text-align:center;overflow:hidden;background:#08160f}.hero-art{position:absolute;inset:0;background:url('assets/couple.png') center 48%/cover no-repeat;opacity:.47;animation:zoom 18s ease-out both;z-index:-2}.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#06130da8 0%,#06150f83 32%,#0717109c 65%,#07150f 100%),radial-gradient(circle,transparent 15%,#07150fb3 85%);z-index:-1}@keyframes zoom{from{transform:scale(1.13)}to{transform:scale(1)}}.hero-content{padding:6rem 1rem 4rem;width:100%;max-width:1050px}.hero-kicker{font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;margin:2.5rem 0 .3rem}.hero h2,.closing h2{font:400 clamp(5rem,12vw,10.5rem)/1.1 var(--script);color:#f3e4c5;text-shadow:0 2px 35px #d9b56b65;margin:.1rem 0}.hero h2 em,.closing h2 em{font:400 .45em var(--serif);vertical-align:middle;color:var(--gold)}.rule{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--gold);margin:1.5rem auto}.rule:before,.rule:after{content:'';width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.rule:after{transform:rotate(180deg)}.family{font-size:1.3rem;margin:0}.hero-date{font:500 .67rem/1.8 var(--sans);letter-spacing:.18em;margin:2.2rem 0;color:#e0d4ba}.hero-date span{color:var(--gold);padding:.3rem}.scroll-cue{display:inline-flex;align-items:center;gap:1rem;margin-top:1.5rem;text-decoration:none;font:500 .58rem var(--sans);letter-spacing:.22em;color:var(--lightgold)}.scroll-cue span{font-size:1.5rem;animation:drift 2s infinite}@keyframes drift{50%{transform:translateY(7px)}}.section{position:relative;padding:clamp(6rem,12vw,10rem) 1.5rem;text-align:center}.section-inner{position:relative;max-width:730px;margin:auto}.ivory{background:var(--ivory);color:var(--ink)}.dark-label{color:#93723a}.welcome{overflow:hidden}.welcome h2,.rsvp h2,.countdown h2{font-weight:400;font-size:clamp(3.5rem,7vw,6rem);line-height:1.05;margin:1.1rem auto 2rem}.welcome p:not(.eyebrow):not(.verse-ref),.rsvp p:not(.eyebrow):not(.contact){font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.5;max-width:620px;margin:1.1rem auto}.flourish{color:#a9874a;font-size:2.2rem}.corner{position:absolute;color:#aa8955;font-size:7rem;line-height:1;opacity:.22}.corner-tl{top:0;left:2%}.corner-br{bottom:0;right:2%;transform:rotate(180deg)}.mini-rule{width:80px;height:1px;background:#aa8955;margin:2.2rem auto}.welcome .verse{font-style:italic}.verse-ref{font:500 .6rem var(--sans);letter-spacing:.25em;color:#8c7246}.event{background:radial-gradient(circle at 70% 35%,#214432,#0d2118 55%,#07150f);overflow:hidden}.halo{position:absolute;width:700px;height:700px;border:1px solid #c5a66b16;border-radius:50%;top:5%;left:-300px;box-shadow:0 0 0 90px #c5a66b08,0 0 0 180px #c5a66b05}.event-layout{position:relative;max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,8rem);align-items:center;text-align:left}.event-lead h2{font:400 clamp(4rem,7vw,7rem)/.93 var(--serif);margin:1.4rem 0}.event-lead h2 em{color:var(--gold);font-weight:400}.event-lead>p:not(.eyebrow){font-size:1.5rem;max-width:370px;color:#d5d4c5}.date-large{display:flex;gap:1rem;align-items:center;margin-top:2.6rem;color:var(--gold)}.date-large>span{font-size:6rem;line-height:1}.date-large div{font:.85rem/1.8 var(--sans);letter-spacing:.2em}.date-large strong{font-size:1.25rem;font-weight:400}.invitation-card{padding:12px;border:1px solid #d9bd80a0;background:linear-gradient(135deg,#11271d,#0a1a13);box-shadow:0 25px 70px #0008,0 0 50px #bd974319}.card-border{border:1px solid #d9bd805c;min-height:620px;display:flex;align-items:center;flex-direction:column;padding:2rem 1.1rem;text-align:center}.card-bismillah{font-size:1.5rem;color:var(--lightgold)}.card-ornament{font-size:2rem;color:var(--gold);margin:.3rem 0 1rem}.invitation-card h3{font:400 clamp(3.2rem,5vw,4.5rem)/1.15 var(--script);color:var(--lightgold);margin:1.2rem 0}.invitation-card h3 i{font:400 .6em var(--serif)}.card-details{width:min(310px,100%);border-top:1px solid #d9bd8061;margin:0 auto 1.5rem}.card-details div{padding:1.05rem .2rem;border-bottom:1px solid #d9bd8038;display:flex;flex-direction:column;gap:.4rem}.card-details span{font:500 .6rem var(--sans);letter-spacing:.22em;color:var(--gold)}.card-details strong{font:400 1.35rem/1.2 var(--serif)}.button-outline{border:1px solid var(--gold);color:var(--gold)}.button-outline:hover{background:var(--gold);color:var(--dark)}.art-panel{position:relative;height:min(850px,110svh);min-height:600px;overflow:hidden;background:#16281c;display:flex;align-items:center}.art-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%;filter:brightness(.72)}.art-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07150fe8 0%,#07150fab 43%,transparent 88%),linear-gradient(0deg,#07150f88,transparent 50%)}.art-copy{position:relative;z-index:1;width:min(1100px,100%);margin:auto;padding:2rem}.art-copy h2{font-size:clamp(4rem,8vw,8rem);line-height:.92;font-weight:400;margin:1.5rem 0}.art-copy h2 em{color:var(--gold);font-weight:400}.art-copy p:last-child{font-size:1.5rem;max-width:350px}.countdown{background:#091911;background-image:radial-gradient(circle at 50% 15%,#35513955,transparent 55%)}.countdown h2{margin-bottom:3rem}.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.time-grid>div{border-top:1px solid #bf9b6077;border-bottom:1px solid #bf9b6077;padding:1.5rem .2rem}.time-grid strong{display:block;font:400 clamp(2.8rem,6vw,5.4rem)/1 var(--serif);color:var(--lightgold);font-variant-numeric:tabular-nums}.time-grid span{display:block;margin-top:.6rem;font:500 .55rem var(--sans);letter-spacing:.2em;color:var(--gold)}.countdown-note{font-size:1.3rem;margin-top:2rem;color:#d1cbbd}.rsvp{padding-block:9rem}.rsvp .button{margin-top:1.7rem}.button-dark{background:#11291c;color:var(--ivory);border:1px solid #11291c}.button-dark:hover{background:#24503a}.contact{font:500 .75rem var(--sans);letter-spacing:.13em;margin-top:1rem;color:#735c37}.closing{min-height:780px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#1c3929,#07150f 70%)}.closing .section-inner{z-index:1}.closing .arabic{font-size:2.3rem}.prayer{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.35;margin:1rem auto 2rem;max-width:620px}.closing-star{color:var(--gold);font-size:1.5rem;display:block;margin-bottom:2rem}.closing h2{font-size:clamp(4.7rem,10vw,8rem);margin:.7rem 0}.closing-date{font:.66rem var(--sans);letter-spacing:.23em;color:var(--gold)}.farewell{font-size:1.4rem;margin-top:3rem}.arch-lines{position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:min(790px,100%);height:120%;border:1px solid #c6ab6a24;border-radius:48% 48% 0 0;box-shadow:0 0 0 35px #c6ab6a08,0 0 0 72px #c6ab6a08,0 0 0 110px #c6ab6a06}footer{background:#05110c;border-top:1px solid #cfb77739;min-height:105px;padding:2rem clamp(1.5rem,5vw,5rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;font:500 .6rem var(--sans);letter-spacing:.12em;color:#cebc98}footer span{font:1.3rem var(--serif)}footer i{color:var(--gold)}footer a{text-decoration:none}.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s ease,transform .85s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:700px){.topbar{padding:1.2rem}.topbar>span{font-size:.47rem}.hero-art{background-position:center center;opacity:.42}.hero h2{font-size:clamp(4.7rem,16vw,7rem)}.hero-kicker{margin-top:1rem}.hero-content{padding-top:5rem}.line-label{font-size:.55rem;letter-spacing:.18em}.hero-date{font-size:.55rem;line-height:2}.event-layout{grid-template-columns:1fr;max-width:500px}.event-lead{text-align:center}.event-lead>p:not(.eyebrow){margin-inline:auto}.date-large{justify-content:center}.event{padding:5rem 1rem}.card-border{min-height:590px}.art-panel{min-height:680px;height:90svh;align-items:end}.art-panel img{object-position:center}.art-panel:after{background:linear-gradient(0deg,#07150fec 0%,#07150f82 42%,transparent 78%)}.art-copy{text-align:center;padding:2rem 1.2rem 3rem}.art-copy h2{font-size:clamp(3.8rem,12vw,5.5rem)}.art-copy p:last-child{margin:auto}.time-grid{gap:.3rem}.time-grid>div{padding:1rem 0}.time-grid strong{font-size:clamp(2.4rem,10vw,4rem)}.time-grid span{font-size:.47rem;letter-spacing:.1em}.closing{min-height:700px}footer{flex-wrap:wrap}footer small{display:none}}@media(max-width:360px){.opening-foot{font-size:.48rem}.hero h2{font-size:4.3rem}.card-border{padding:1.3rem .5rem}.time-grid strong{font-size:2.3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* Motion layer: restrained depth, staggered reveal, and a cinematic opening. */
.scroll-progress{position:fixed;z-index:12;top:0;left:0;width:100%;height:2px;background:var(--lightgold);transform:scaleX(0);transform-origin:left;pointer-events:none;box-shadow:0 0 12px #e9cf8caa}.transition-curtain{position:fixed;inset:0;z-index:18;display:grid;place-items:center;background:radial-gradient(circle,#31573c,#07150f 68%);clip-path:circle(0 at 50% 50%);pointer-events:none;opacity:0}.transition-curtain span{font-size:3rem;color:var(--gold);animation:curtain-star 3s linear infinite}.transition-curtain.play{animation:curtain-reveal 1.35s ease-in-out both}@keyframes curtain-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:1}38%{clip-path:circle(115% at 50% 50%);opacity:1}62%{clip-path:circle(115% at 50% 50%);opacity:1}100%{clip-path:circle(0 at 50% 50%);opacity:1}}@keyframes curtain-star{to{transform:rotate(180deg)}}
.opening-ornament{animation:ornament-breathe 4s ease-in-out infinite}@keyframes ornament-breathe{50%{opacity:.45;transform:rotate(45deg) scale(1.15)}}.opening:before,.opening:after{animation:frame-in 1.6s .15s both}@keyframes frame-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.opening .arabic,.opening .eyebrow,.opening h1,.opening-sub,.opening .button{animation:enter-up .85s both}.opening .arabic{animation-delay:.12s}.opening .eyebrow{animation-delay:.25s}.opening h1{animation-delay:.5s}.opening-sub{animation-delay:.64s}.opening .button{animation-delay:.78s}@keyframes enter-up{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.envelope-scene{animation:envelope-arrive 1.2s .35s both}@keyframes envelope-arrive{from{opacity:0;transform:translateY(35px) rotateX(12deg) scale(.94)}to{opacity:1;transform:none}}.envelope:not(.animate){animation:envelope-float 5s ease-in-out infinite}@keyframes envelope-float{50%{transform:translateY(-7px) rotate(1deg)}}.opening.animate .envelope{animation:none}.opening.animate .envelope-scene{animation:none}
.hero-sparkles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.hero-sparkles span{position:absolute;color:#e4c78e;opacity:0;text-shadow:0 0 12px #f5e2aa;animation:spark-drift 8s ease-in-out infinite}.hero-sparkles span:nth-child(1){left:18%;top:28%;font-size:.8rem;animation-delay:0s}.hero-sparkles span:nth-child(2){right:18%;top:22%;font-size:1.2rem;animation-delay:2s}.hero-sparkles span:nth-child(3){left:12%;bottom:25%;font-size:.55rem;animation-delay:4s}.hero-sparkles span:nth-child(4){right:10%;bottom:35%;font-size:.9rem;animation-delay:1s}.hero-sparkles span:nth-child(5){left:72%;top:48%;font-size:.5rem;animation-delay:5s}@keyframes spark-drift{0%,100%{opacity:0;transform:translate3d(0,12px,0) rotate(0)}35%,65%{opacity:.65}50%{transform:translate3d(8px,-14px,0) rotate(28deg)}}.hero-content>*{opacity:0;transform:translateY(20px);filter:blur(5px);transition:opacity .9s ease,transform .9s ease,filter .9s ease}.invitation.active .hero-content>*{opacity:1;transform:none;filter:none}.hero-content>:nth-child(1){transition-delay:.17s}.hero-content>:nth-child(2){transition-delay:.31s}.hero-content>:nth-child(3){transition-delay:.44s}.hero-content>:nth-child(4){transition-delay:.6s}.hero-content>:nth-child(5){transition-delay:.72s}.hero-content>:nth-child(6){transition-delay:.83s}.hero-content>:nth-child(7){transition-delay:.95s}.hero-content>:nth-child(8){transition-delay:1.05s}
.section .eyebrow,.event-lead .eyebrow,.art-copy .eyebrow{position:relative;display:inline-block}.section .eyebrow:after,.event-lead .eyebrow:after,.art-copy .eyebrow:after{content:'';position:absolute;bottom:-10px;left:50%;height:1px;width:60px;background:currentColor;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform 1s .35s ease}.event-lead .eyebrow:after,.art-copy .eyebrow:after{left:0;transform:scaleX(0)}.reveal.visible .eyebrow:after{transform:translateX(-50%) scaleX(1)}.event-lead.reveal.visible .eyebrow:after,.art-copy.reveal.visible .eyebrow:after{transform:scaleX(1)}.reveal{filter:blur(7px);transition:opacity .95s ease,transform .95s cubic-bezier(.2,.75,.2,1),filter .95s ease}.reveal.visible{filter:none}.invitation-card{transform-style:preserve-3d;transition:opacity .95s ease,transform .55s ease,filter .95s ease,box-shadow .55s ease}.invitation-card.visible:hover{box-shadow:0 35px 85px #000a,0 0 75px #bd974327}.card-border{transform:translateZ(12px)}.card-ornament{animation:ornament-breathe 6s ease-in-out infinite}.halo{animation:halo-breathe 12s ease-in-out infinite}@keyframes halo-breathe{50%{transform:scale(1.12);opacity:.65}}.art-panel img{transform:scale(1.08) translate3d(0,var(--art-shift,0px),0);transition:transform .25s linear}.art-copy.reveal.visible{transition-delay:.15s}.date-large>span{font-variant-numeric:lining-nums}.time-grid>div{transition:background .4s,transform .4s}.time-grid>div:hover{background:#d6b87b13;transform:translateY(-4px)}.time-grid strong.tick{animation:digit-settle .35s ease}@keyframes digit-settle{from{opacity:.55;transform:translateY(-7px)}to{opacity:1;transform:none}}.button{position:relative;overflow:hidden}.button:after{content:'';position:absolute;top:-40%;left:-60%;height:180%;width:30%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,#fff5db55,transparent);transition:left .7s ease;pointer-events:none}.button:hover:after,.button:focus-visible:after{left:140%}.flourish{animation:ornament-breathe 6s ease-in-out infinite}.closing-star{animation:closing-glow 3s ease-in-out infinite}@keyframes closing-glow{50%{text-shadow:0 0 24px #e8ca82;transform:scale(1.25)}}.arch-lines{animation:arch-breathe 9s ease-in-out infinite}@keyframes arch-breathe{50%{opacity:.5;transform:translateX(-50%) scale(1.03)}}
@media(max-width:700px){.invitation-card.visible:hover{box-shadow:0 25px 70px #0008}.art-panel img{transform:scale(1.05)}.hero-sparkles span:nth-child(n+4){display:none}}@media(prefers-reduced-motion:reduce){.transition-curtain{display:none}.hero-content>*{opacity:1;transform:none;filter:none}.reveal{filter:none}.envelope:not(.animate){animation:none}.art-panel img{transform:none}.hero-sparkles{display:none}}
/* Editorial refinement: typography, composition, and individually paced type. */
:root{--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--display:'Bodoni Moda',Georgia,serif;--script:var(--display);--ivory:#f3eddf;--gold:#caa66a;--lightgold:#e3c992}
body{letter-spacing:.005em}.eyebrow{font-size:.71rem;letter-spacing:.24em;font-weight:600}.opening{background:radial-gradient(ellipse at 50% 35%,#193222 0%,#081911 58%,#04110b 100%)}.opening:before{inset:1.2rem;border-color:#caa66a55}.opening:after{inset:1.55rem;border-color:#caa66a27}.opening h1{font:400 clamp(2.5rem,7vw,5.3rem)/1.05 var(--display);letter-spacing:-.055em;max-width:12ch;margin:1.35rem auto .4rem}.opening-sub{font:italic 1.35rem var(--serif);color:#d9cfbb}.opening .letter strong{font:400 1.2rem var(--display);letter-spacing:-.05em}.opening .button{margin-top:.2rem}.button{font-size:.7rem;letter-spacing:.14em}.opening-foot{font-size:.65rem}.topbar{padding-top:2rem}.topbar>span{letter-spacing:.27em}.monogram{font:400 1.3rem var(--display)}
.hero{min-height:100svh;text-align:left;place-items:stretch;display:flex;align-items:center}.hero-art{inset:3.5rem 3.6% 3.5rem 42%;background-position:center 58%;opacity:.9;animation:zoom 20s ease-out both;clip-path:inset(0 0 0 0)}.hero-art:after{content:'';position:absolute;inset:0;border:1px solid #e3c99255}.hero-vignette{background:linear-gradient(90deg,#07150f 0%,#07150ff2 35%,#07150f80 59%,#07150f17 100%),linear-gradient(0deg,#07150f 0%,transparent 22%,transparent 78%,#07150f88 100%)}.hero-content{max-width:none;width:100%;padding:10rem clamp(2rem,9vw,10rem) 5rem;position:relative;z-index:1}.hero-kicker{font:italic clamp(1.5rem,2.5vw,2.1rem) var(--serif);margin:2.5rem 0 1.2rem;color:#e8ddc8}.hero h2{font:400 clamp(5.4rem,10.8vw,11.5rem)/.85 var(--display);letter-spacing:-.095em;margin:0;max-width:7ch;color:#f3e8d1;text-shadow:0 10px 35px #07150f9c}.hero h2 .name-line{display:block;white-space:nowrap}.hero h2 em{display:block;font:italic .34em/1.1 var(--serif);letter-spacing:0;margin:.15em 0 .03em 1.6em;color:var(--gold)}.hero .rule{justify-content:flex-start;margin:2.3rem 0}.hero .rule:before,.hero .rule:after{width:55px}.hero .family{font-size:1.35rem}.hero-date{font-size:.75rem;line-height:2.2;max-width:480px}.scroll-cue{font-size:.69rem;margin-top:2.1rem}.hero-content>*{transition-duration:1.1s}.hero-content>:nth-child(3){transition-delay:.4s}
.section{padding-block:clamp(7rem,13vw,12rem)}.section-inner{max-width:760px}.welcome{background:#f2eadb;background-image:radial-gradient(circle at center,#fbf6ea 0%,#e9dfce 100%)}.welcome h2,.rsvp h2,.countdown h2{font:400 clamp(3.1rem,6.5vw,6.5rem)/1.08 var(--display);letter-spacing:-.075em}.welcome p:not(.eyebrow):not(.verse-ref),.rsvp p:not(.eyebrow):not(.contact){line-height:1.55}.welcome strong{font-weight:500}.event{background:radial-gradient(ellipse at 75% 45%,#1b3728,#081911 68%)}.event-lead h2{font:400 clamp(4rem,7.6vw,8rem)/.96 var(--display);letter-spacing:-.075em}.event-lead h2 em{font:italic .8em var(--serif);letter-spacing:-.03em}.date-large>span{font:400 6rem/.95 var(--display);letter-spacing:-.1em}.invitation-card{background:linear-gradient(155deg,#10271c,#081810);box-shadow:0 35px 100px #0009,0 0 0 1px #d1b57a22}.card-border{padding-block:2.7rem}.invitation-card h3{font:400 clamp(2.6rem,4vw,4.1rem)/1.2 var(--display);letter-spacing:-.08em}.invitation-card h3 i{font:italic .8em var(--serif);letter-spacing:0}.card-details strong{font-size:1.5rem}.card-details span{font-size:.68rem}.art-copy h2{font:400 clamp(3.7rem,7.4vw,7.8rem)/1.02 var(--display);letter-spacing:-.075em}.art-copy h2 em{font:italic .85em var(--serif);letter-spacing:-.035em}.art-copy p:last-child{line-height:1.5}.time-grid strong{font-family:var(--display);letter-spacing:-.08em}.time-grid span{font-size:.64rem}.closing h2{font:400 clamp(4.2rem,8vw,8rem)/1.2 var(--display);letter-spacing:-.08em}.closing h2 em{font:italic .65em var(--serif);letter-spacing:0}.prayer{font-style:italic}.farewell{font-style:italic}
.motion-ready .token-mask{display:inline-block;vertical-align:baseline;overflow:hidden;padding-block:.12em;margin-block:-.12em}.motion-ready .token-inner{display:inline-block;opacity:0;transform:translate3d(0,105%,0) rotateX(-25deg);filter:blur(4px);will-change:transform,opacity}.motion-ready.motion-play .token-inner{animation:letter-rise .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 43ms + var(--base-delay,0ms))}@keyframes letter-rise{to{opacity:1;transform:translate3d(0,0,0) rotateX(0);filter:blur(0)}}.motion-ready[data-split="words"] .token-inner{transform:translate3d(0,85%,0);filter:blur(6px)}.motion-ready[data-split="words"].motion-play .token-inner{animation-duration:1s;animation-delay:calc(var(--i) * 130ms + var(--base-delay,0ms))}.opening h1.motion-ready{animation:none}.hero .name-line.motion-ready{overflow:visible}.hero h2 .name-line:first-child{--base-delay:150ms}.hero h2 .name-line:last-child{--base-delay:520ms}
@media(max-width:700px){.opening h1{font-size:clamp(2.5rem,10vw,4rem)}.opening .eyebrow{font-size:.6rem}.hero{align-items:end;text-align:center}.hero-art{inset:0;background-position:center 43%;opacity:.75;clip-path:none}.hero-vignette{background:linear-gradient(0deg,#07150f 0%,#07150ff2 21%,#07150fb8 47%,#07150f36 77%,#07150f9c 100%)}.hero-content{padding:7rem 1.15rem 3rem}.hero h2{font-size:clamp(4.7rem,15vw,7.4rem);margin:auto;max-width:none}.hero h2 .name-line{display:block}.hero h2 em{margin:.1em auto}.hero-kicker{margin:0 0 1rem}.hero .rule{justify-content:center;margin:1.3rem auto}.hero .family{font-size:1.2rem}.hero-date{font-size:.66rem;margin:1.25rem auto}.scroll-cue{margin-top:.7rem}.event-lead h2{font-size:clamp(4rem,13vw,6.5rem)}.art-copy h2{font-size:clamp(3.5rem,11vw,5.3rem)}.welcome h2,.rsvp h2,.countdown h2{font-size:clamp(3rem,10vw,4.8rem)}.time-grid strong{font-size:clamp(2.1rem,9vw,3.8rem)}.time-grid span{font-size:.56rem}.topbar>span{display:none}.topbar{padding:1rem 1.2rem}.hero-content .line-label{font-size:.58rem}.closing h2{font-size:clamp(3.3rem,11vw,5.5rem)}}
@media(max-width:370px){.hero h2{font-size:4.5rem}.hero-content{padding-bottom:2rem}.opening-foot{font-size:.53rem}.opening .arabic{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.motion-ready .token-inner{opacity:1;transform:none;filter:none;will-change:auto}.motion-ready.motion-play .token-inner{animation:none}.hero-art{animation:none}}
/* A distinct gold spark follows each name letter, with enough pause to see the spelling unfold. */
.hero .name-line.motion-ready .token-mask,.closing .closing-name.motion-ready .token-mask{position:relative;overflow:visible;isolation:isolate}
.hero .name-line.motion-ready .token-inner,.closing .closing-name.motion-ready .token-inner{transform:translate3d(0,.4em,0) scale(.85);filter:blur(9px);opacity:0}
.hero .name-line.motion-ready.motion-play .token-inner,.closing .closing-name.motion-ready.motion-play .token-inner{animation:gold-letter 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--base-delay,0ms) + var(--i) * 240ms)}
.hero .name-line .token-mask::after,.closing .closing-name .token-mask::after{content:'✦';position:absolute;z-index:2;top:-.31em;right:-.18em;font:400 .17em/1 var(--serif);color:#fff4c4;text-shadow:0 0 5px #fff,0 0 13px #f5ce72,0 0 23px #c99739;opacity:0;pointer-events:none}
.hero .name-line.motion-play .token-mask::after,.closing .closing-name.motion-play .token-mask::after{animation:gold-spark .85s ease-out both;animation-delay:calc(var(--base-delay,0ms) + var(--i) * 240ms + 100ms)}
.hero h2 .name-line:first-child{--base-delay:280ms}.hero h2 .name-line:last-child{--base-delay:2050ms}.closing h2 .closing-name:first-child{--base-delay:100ms}.closing h2 .closing-name:last-child{--base-delay:1850ms}
@keyframes gold-letter{0%{opacity:0;transform:translate3d(0,.4em,0) scale(.85);filter:blur(9px);text-shadow:0 0 0 transparent}35%{opacity:1;filter:blur(1px);text-shadow:0 0 28px #f5d996,0 0 52px #d49b45}62%{opacity:1;transform:translate3d(0,0,0) scale(1.025);filter:blur(0);text-shadow:0 0 15px #edc878}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);text-shadow:0 0 2px #e3c99255}}
@keyframes gold-spark{0%,100%{opacity:0;transform:translate3d(-.3em,.3em,0) scale(.15) rotate(-25deg)}23%{opacity:1;transform:translate3d(0,0,0) scale(1.3) rotate(20deg)}45%{opacity:.65;transform:translate3d(.25em,-.3em,0) scale(.75) rotate(60deg)}70%{opacity:.25;transform:translate3d(.55em,-.65em,0) scale(.35) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.hero .name-line.motion-ready .token-inner,.closing .closing-name.motion-ready .token-inner{opacity:1;transform:none;filter:none}.hero .name-line.motion-ready.motion-play .token-inner,.closing .closing-name.motion-ready.motion-play .token-inner{animation:none}.hero .name-line.motion-play .token-mask::after,.closing .closing-name.motion-play .token-mask::after{animation:none}}
/* Actual Bodoni glyph outlines are traced before the gold fill settles. */
.draw-name{display:inline-flex;vertical-align:baseline;align-items:baseline;white-space:nowrap;height:.98em;line-height:1}
.hero .draw-name{display:flex}.closing .draw-name{justify-content:center}
.draw-glyph{position:relative;display:inline-flex;flex:none;height:1em;align-items:center;justify-content:center;overflow:visible}
.draw-glyph svg{display:block;height:1em;overflow:visible;filter:drop-shadow(0 0 9px #f5d2889c) drop-shadow(0 0 22px #cf944d80)}
.draw-glyph path{fill:#f8e9c8;fill-opacity:0;stroke:#ffe2a0;stroke-width:17;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.draw-glyph.drawing path{animation:glyph-trace 1.55s cubic-bezier(.45,0,.26,1) forwards,glyph-fill .72s 1.08s ease-out forwards}
.draw-glyph.complete path{fill-opacity:1;stroke:#ffe8af;opacity:1;stroke-dashoffset:0!important}
@keyframes glyph-trace{0%{opacity:0;stroke-dashoffset:var(--path-length)}7%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes glyph-fill{0%{fill-opacity:0;filter:drop-shadow(0 0 18px #ffd77e)}55%{fill-opacity:.7;filter:drop-shadow(0 0 34px #fff0bd)}100%{fill-opacity:1;filter:drop-shadow(0 0 6px #e3c992)}}
.draw-glyph .ember{position:absolute;top:8%;right:-.13em;z-index:3;font:400 .21em/1 var(--serif);color:#fff8d0;text-shadow:0 0 6px #fff,0 0 16px #ffc15c,0 0 30px #ffbd52;opacity:0;pointer-events:none}
.draw-glyph .ember::before,.draw-glyph .ember::after{content:'✦';position:absolute;top:0;left:0;font-size:.55em;color:#fff5bb;opacity:0}
.draw-glyph.drawing .ember{animation:ember-burst 1.25s .4s ease-out both}
.draw-glyph.drawing .ember::before{animation:ember-up .95s .55s ease-out both}
.draw-glyph.drawing .ember::after{animation:ember-down 1.05s .55s ease-out both}
@keyframes ember-burst{0%,100%{opacity:0;transform:translate(-.5em,.5em) scale(.2)}25%{opacity:1;transform:translate(0,0) scale(1.35)}60%{opacity:.75;transform:translate(1em,-.5em) scale(.7)}90%{opacity:.1;transform:translate(1.9em,-1em) scale(.2)}}
@keyframes ember-up{0%{opacity:0;transform:translate(0,0) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(3em,-3.5em) scale(.2)}}
@keyframes ember-down{0%{opacity:0;transform:translate(0,0) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(3.8em,2em) scale(.2)}}
@media(max-width:700px){.hero h2 .draw-name{justify-content:center}.closing h2 .draw-name{display:flex}.closing h2 em{display:block;margin:.15em auto}.draw-glyph svg{filter:drop-shadow(0 0 7px #f5d288b0) drop-shadow(0 0 15px #cf944d8c)}}
@media(prefers-reduced-motion:reduce){.draw-glyph path,.draw-glyph.drawing path{animation:none;opacity:1;fill-opacity:1;stroke-dashoffset:0!important}.draw-glyph .ember,.draw-glyph.drawing .ember,.draw-glyph.drawing .ember::before,.draw-glyph.drawing .ember::after{animation:none;opacity:0}}
@font-face{font-family:'Bodoni Invitation';src:url('assets/bodoni-moda.ttf') format('truetype');font-display:swap;font-weight:400}
:root{--display:'Bodoni Invitation',Georgia,serif}
.closing h2{font-size:clamp(3.5rem,6.5vw,6.2rem)}
@media(max-width:700px){.closing h2{font-size:clamp(3.3rem,11vw,5.5rem)}}
/* A brief glowing handoff visually joins one finished stroke to the next. */
.draw-name .draw-glyph + .draw-glyph{margin-left:-.025em}
.draw-name .draw-glyph:not(:last-child)::after{content:'';position:absolute;z-index:1;right:-.08em;top:51%;width:.18em;height:2px;border-radius:100%;background:linear-gradient(90deg,#fff0bd,#ffcb69,transparent);box-shadow:0 0 7px 2px #ffd57d,0 0 19px 5px #c68a36;opacity:0;transform:scaleX(0);transform-origin:left;pointer-events:none}
.draw-name .draw-glyph.drawing:not(:last-child)::after{animation:stroke-handoff .48s 1.14s ease-out both}
@keyframes stroke-handoff{0%{opacity:0;transform:scaleX(0)}35%{opacity:1;transform:scaleX(1)}70%{opacity:.8;transform:scaleX(1.15)}100%{opacity:0;transform:scaleX(1.35)}}
@media(prefers-reduced-motion:reduce){.draw-name .draw-glyph.drawing:not(:last-child)::after{animation:none}}
/* Faster opening lettering, followed by two restrained focus pulses. */
.hero .draw-glyph.drawing path{animation:glyph-trace 1.24s cubic-bezier(.45,0,.26,1) forwards,glyph-fill .54s .86s ease-out forwards}
.hero .draw-glyph.drawing .ember{animation:ember-burst 1s .28s ease-out both}
.hero .draw-glyph.drawing .ember::before{animation:ember-up .8s .4s ease-out both}
.hero .draw-glyph.drawing .ember::after{animation:ember-down .9s .4s ease-out both}
.hero .draw-name .draw-glyph.drawing:not(:last-child)::after{animation:stroke-handoff .38s .74s ease-out both}
.hero h2.name-complete .draw-name{animation:name-focus .56s ease-in-out 2}
@keyframes name-focus{0%,100%{filter:brightness(1)}42%{filter:brightness(2.2) drop-shadow(0 0 22px #ffd57c)}68%{filter:brightness(.82)}}
@media(prefers-reduced-motion:reduce){.hero .draw-glyph.drawing path,.hero .draw-glyph.drawing .ember,.hero .draw-glyph.drawing .ember::before,.hero .draw-glyph.drawing .ember::after,.hero .draw-name .draw-glyph.drawing:not(:last-child)::after,.hero h2.name-complete .draw-name{animation:none}}
/* One-time illuminated pen line weaving through the celebration heading. */
.event-lead h2{position:relative;isolation:isolate}
.event-lead h2 .gold-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.gold-trail path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--trail-length);stroke-dashoffset:var(--trail-length);opacity:0}
.gold-trail .trail-halo{stroke:#f1bd5b;stroke-width:8;filter:blur(6px);opacity:0}
.gold-trail .trail-line{stroke:#ffe5a0;stroke-width:1.9;filter:drop-shadow(0 0 6px #ffd279)}
.gold-trail .trail-tip{fill:#fff6d8;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #ffbd56);opacity:0}
.event-lead h2.trail-play .gold-trail path{animation:trail-write 2.6s cubic-bezier(.24,.04,.3,1) both,trail-vanish .45s 2.65s forwards}
.event-lead h2.trail-play .gold-trail .trail-halo{animation:trail-glow 2.6s both,trail-vanish .45s 2.65s forwards}
@keyframes trail-write{0%{stroke-dashoffset:var(--trail-length);opacity:0}5%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes trail-glow{0%{stroke-dashoffset:var(--trail-length);opacity:0}8%{opacity:.62}100%{stroke-dashoffset:0;opacity:.62}}
@keyframes trail-vanish{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.event-lead h2 .gold-trail{display:none}}
/* The gold trace travels as a short tail behind the moving tip, outside the text. */
.event-lead h2 .gold-trail{z-index:1}
.event-lead h2 .token-mask{position:relative;z-index:2}
.event-lead h2{font-size:clamp(3rem,3.6vw,3.75rem);line-height:1.07}
@media(max-width:700px){.event-lead h2{font-size:clamp(2.2rem,6vw,2.8rem)}}
.gold-trail path{stroke-dasharray:var(--trail-segment) var(--trail-length);stroke-dashoffset:var(--trail-segment)}
.gold-trail .trail-halo{stroke-width:6;filter:blur(5px)}
.gold-trail .trail-line{stroke-width:1.6}
.event-lead h2.trail-play .gold-trail path,.event-lead h2.trail-play .gold-trail .trail-halo{animation:trail-snake 2.45s linear both}
@keyframes trail-snake{0%{stroke-dashoffset:var(--trail-segment);opacity:0}7%{opacity:.95}90%{opacity:.95}100%{stroke-dashoffset:var(--trail-end);opacity:0}}
.hero .draw-glyph.drawing path{animation:glyph-trace 1.04s cubic-bezier(.45,0,.26,1) forwards,glyph-fill .5s .72s ease-out forwards}
.hero .draw-glyph.drawing .ember{animation:ember-burst .85s .22s ease-out both}
.hero .draw-name .draw-glyph.drawing:not(:last-child)::after{animation:stroke-handoff .3s .58s ease-out both}
@media(prefers-reduced-motion:reduce){.hero .draw-glyph.drawing path,.hero .draw-glyph.drawing .ember,.hero .draw-name .draw-glyph.drawing:not(:last-child)::after{animation:none}}
/* Filled letters emerge along a broad writing path, with a tiny attached spark. */
.hero h2 .draw-name{position:relative;clip-path:none;filter:drop-shadow(0 0 9px #eac07170)}
.hero h2 .draw-glyph path:not(.ink-route){fill:#f8e9c8;fill-opacity:1;stroke:none;opacity:1;stroke-dashoffset:0!important}
.hero h2 .draw-glyph svg{filter:drop-shadow(0 0 7px #f5d2889c)}
.hero h2 .draw-name::after,.hero h2 .draw-glyph::before{display:none}
.hero .ink-route{stroke-dasharray:var(--ink-length);stroke-dashoffset:var(--ink-length)}
.hero h2.wipe-play .ink-route{animation:ink-flow .82s var(--wipe-delay) linear forwards}
.hero .ink-finish{opacity:0}
.hero h2.wipe-play .ink-finish{animation:ink-solid .01s calc(var(--wipe-delay) + .82s) forwards}
.hero .ink-tip{opacity:0;offset-distance:0%;offset-rotate:0deg;filter:drop-shadow(0 0 20px #fff0b6) drop-shadow(0 0 42px #ffcc6c)}
.hero .ink-tip circle{fill:#fff1bd}
.hero .ink-tip circle:not(:first-child){opacity:.55}
.hero h2.wipe-play .ink-tip{animation:tip-travel .82s var(--wipe-delay) linear both}
.hero h2 em{opacity:0}
.hero h2.wipe-play em{animation:amp-reveal .35s 2.85s ease-out both}
@keyframes ink-flow{to{stroke-dashoffset:0}}
@keyframes ink-solid{to{opacity:1}}
@keyframes tip-travel{0%{offset-distance:0%;opacity:0}12%{opacity:.85}82%{opacity:.7}100%{offset-distance:100%;opacity:0}}
@keyframes amp-reveal{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .ink-route{stroke-dashoffset:0;animation:none!important}.hero .ink-finish{opacity:1;animation:none!important}.hero .ink-tip{display:none}.hero h2 em{opacity:1;animation:none!important}}

/* Approved one-name preview; retain the original SVG until the animation loads. */
.hero .first-name .shaista-writing{display:none;width:3.84em;height:1.02em;object-fit:contain;flex:none}
.hero .first-name.writing-loaded .draw-glyph{display:none}
.hero .first-name.writing-loaded .shaista-writing{display:block}
.music-glitter{position:fixed;inset:0;z-index:9;pointer-events:none}
/* Keep scroll reveals on the compositor instead of repainting blurred text. */
.grain{display:none}
.reveal,.motion-ready .token-inner{filter:none!important}
@media(max-width:700px){.halo,.arch-lines{animation:none}}
/* Let the original 07 glyphs travel into place; never crop their serifs. */
.date-large .date-write{display:inline-block;flex:none;white-space:nowrap;overflow:visible}
.date-write .date-zero,.date-write .date-seven{display:inline-block;opacity:0;transform-origin:center}
.date-write.is-visible .date-zero{animation:date-zero-arrive 1.35s cubic-bezier(.22,.7,.22,1) forwards}
.date-write.is-visible .date-seven{animation:date-seven-arrive 1.25s .62s cubic-bezier(.22,.7,.22,1) forwards}
@keyframes date-zero-arrive{0%{opacity:0;transform:translate(-.38em,.25em) rotate(-18deg) scale(.7);text-shadow:0 0 0 transparent}55%{opacity:1;transform:translate(.03em,-.04em) rotate(3deg) scale(1.06);text-shadow:0 0 22px #edd08a}100%{opacity:1;transform:none;text-shadow:none}}
@keyframes date-seven-arrive{0%{opacity:0;transform:translate(.32em,-.34em) rotate(18deg) scale(.7);text-shadow:0 0 0 transparent}55%{opacity:1;transform:translate(-.02em,.03em) rotate(-3deg) scale(1.05);text-shadow:0 0 22px #edd08a}100%{opacity:1;transform:none;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.date-write .date-zero,.date-write .date-seven{opacity:1!important;transform:none!important;animation:none!important}}

/* Give animated word masks room for italic and display-font overhangs. */
.hero-kicker.motion-ready .token-mask,.countdown h2.motion-ready .token-mask{padding-inline:.18em;margin-inline:-.18em}

/* A small dua gesture beside Ameen in the closing prayer. */
.ameen-mark{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:0 auto 1.1rem}
.ameen-mark .arabic{margin:0;line-height:1.25}
.dua-hands{display:inline-block;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:2rem;line-height:1;filter:grayscale(1) sepia(1) saturate(1.3) brightness(1.35);transform:translateY(.08em)}