/* Arabic typography and gentle native scroll settling. */
html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-block-start:18px}
html:has(#envelope:not(.opened)){scroll-snap-type:none}
main>section,main>footer{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-block-start:0}
html:lang(ar){font-family:'Noto Naskh Arabic',serif}
html:lang(ar) body{font-family:'Noto Naskh Arabic',serif;font-size:18px;line-height:1.8}
html:lang(ar) h1,html:lang(ar) h2,html:lang(ar) .invitation-copy em{font-family:'Aref Ruqaa',serif;font-weight:400;letter-spacing:0}
html:lang(ar) .fullnames,html:lang(ar) .intro,html:lang(ar) .invitation-copy,html:lang(ar) .family-names,html:lang(ar) .open-hint span,html:lang(ar) footer>span{font-family:'Noto Naskh Arabic',serif;letter-spacing:0}
html:lang(ar) .eyebrow,html:lang(ar) .scroll{letter-spacing:0}
html:lang(ar) .eyebrow{font-size:16px}
html:lang(ar) h2{font-size:51px;line-height:1.65}
html:lang(ar) .hero h1{font-size:100px;line-height:1.6;margin:12px 0 10px}
html:lang(ar) .hero h1 span{font-family:'Noto Naskh Arabic',serif;font-size:.42em}
html:lang(ar) .fullnames{font-size:29px;line-height:1.7}
html:lang(ar) .intro{font-size:27px}
html:lang(ar) #envelope .envelope-top h1{font-family:'Aref Ruqaa',serif;font-size:94px;line-height:1.6;margin:10px 0 16px}
html:lang(ar) #envelope .eyebrow{font-size:16px}
html:lang(ar) #envelope .open-hint{font-size:16px}
html:lang(ar) #envelope .open-hint span{font-size:25px;line-height:1.7}
html:lang(ar) .family-names{font-size:28px}
html:lang(ar) .invitation-copy{font-size:28px}
html:lang(ar) .invitation-copy em{font-size:52px;line-height:1.9}
html:lang(ar) .original h2{font-size:46px}
html:lang(ar) .venue h2{font-family:'Great Vibes',cursive;font-size:89px;line-height:1.4}
html:lang(ar) nav{font-size:15px}
html:lang(ar) .button{font-size:16px}
html:lang(ar) .scroll{font-size:15px}
html:lang(ar) footer h2{font-size:58px}
html:lang(ar) .families>p:last-child{font-size:18px;max-width:660px;margin-inline:auto;line-height:1.9}
.language-switch button{font-family:'Noto Sans Arabic',sans-serif}
.rings{animation:none}
@media(prefers-reduced-motion:no-preference){
.celebration-open .ring-silver{animation:silver-arrive 1.8s cubic-bezier(.16,1,.3,1) .35s both,silver-drift 7s ease-in-out 2.15s infinite}
.celebration-open .ring-diamond{animation:diamond-arrive 1.8s cubic-bezier(.16,1,.3,1) .5s both,diamond-drift 7s ease-in-out 2.3s infinite}
@keyframes silver-arrive{from{opacity:0;transform:translate(-65px,14px) rotate(-35deg) scale(.94)}to{opacity:1;transform:translate(0,0) rotate(-18deg) scale(1)}}
@keyframes diamond-arrive{from{opacity:0;transform:translate(65px,-10px) rotate(30deg) scale(.94)}to{opacity:1;transform:translate(0,0) rotate(13deg) scale(1)}}
@keyframes silver-drift{0%,100%{transform:translateY(0) rotate(-18deg)}50%{transform:translateY(-4px) rotate(-19deg)}}
@keyframes diamond-drift{0%,100%{transform:translateY(0) rotate(13deg)}50%{transform:translateY(3px) rotate(14deg)}}
}
@media(max-width:800px){
html:lang(ar) #envelope .envelope-top h1{font-size:clamp(56px,15vw,76px);line-height:1.65;margin:10px 0 16px}
html:lang(ar) #envelope .eyebrow{font-size:14px}
html:lang(ar) #envelope .open-hint{font-size:14px}
html:lang(ar) #envelope .open-hint span{font-size:23px}
html:lang(ar) .hero h1{font-size:76px;line-height:1.65;margin:8px 0}
html:lang(ar) .fullnames{font-size:25px;line-height:1.7}
html:lang(ar) h2,html:lang(ar) .original h2{font-size:38px}
html:lang(ar) .family-names{font-size:23px}
html:lang(ar) .invitation-copy{font-size:25px}
html:lang(ar) .invitation-copy em{font-size:44px}
html:lang(ar) .venue h2{font-size:64px}
html:lang(ar) .button{font-size:14px}
html:lang(ar) .hero .eyebrow{font-size:14px}
html:lang(ar) .families>p:last-child{font-size:16px}
html:lang(ar) .hero{min-height:1015px}
html:lang(ar) .hero .halo{height:940px}
html:lang(ar) nav{font-size:14px}
}
@media(max-height:650px){html:lang(ar) #envelope .envelope-top h1{font-size:54px;line-height:1.5;margin:5px 0 10px}html:lang(ar) #envelope .open-hint span{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}.rings,.rings img{animation:none!important}}
html.navigating{scroll-snap-type:none;scroll-behavior:auto}

/* Each family occupies its own centred line. */
.families .family-names{display:block;margin:12px auto 0}
html:lang(ar) .families h2{font-size:clamp(24px,6.5vw,43px);line-height:1.9;white-space:nowrap;margin:24px auto 6px}
html:lang(ar) .families .family-names{font-family:'Aref Ruqaa',serif;font-size:clamp(24px,6.5vw,40px);line-height:1.9;white-space:nowrap}
html[lang=en] .families h2{font-size:clamp(22px,4.5vw,40px);line-height:1.4;max-width:850px;margin:24px auto 8px}
html[lang=en] .families .family-names{font-size:clamp(22px,4.3vw,36px);line-height:1.4;max-width:850px}

/* Matching family lines separated by a fine botanical flourish. */
html:lang(ar) .families h2,html:lang(ar) .families .family-names{font-family:'Aref Ruqaa',serif;font-size:clamp(24px,6.5vw,43px);font-weight:400;font-style:normal;line-height:1.9;letter-spacing:0;color:#896b39}
html[lang=en] .families h2,html[lang=en] .families .family-names{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(22px,4.5vw,40px);font-weight:400;font-style:normal;line-height:1.4;letter-spacing:0;color:#896b39}
.families .family-names p{color:inherit;font:inherit;margin:0}
.families .family-divider{display:flex;align-items:center;justify-content:center;gap:12px;width:min(330px,80%);margin:18px auto 12px;color:#a38650}
.family-divider:before,.family-divider:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#b5996077)}
.family-divider:after{transform:rotate(180deg)}
.family-divider svg{display:block;width:64px;height:32px;flex-shrink:0}
html:lang(ar) .families h2,html[lang=en] .families h2{margin-bottom:0}
.families .family-names{margin-top:0}