/* Comfortable phone reading, safe touch targets, and compact stationery. */
html,body{max-width:100%;overflow-x:clip}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#envelope{height:100vh;height:100dvh;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
#invitation nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.language-switch button,footer .language-switch button{min-width:66px;min-height:44px}
.button{min-height:48px}
@media(max-width:800px){
#invitation nav{padding:8px 24px;height:auto;min-height:62px;gap:28px}
#invitation nav a:first-child{display:none}
#envelope{padding-inline:22px;gap:22px}
#envelope .envelope-top{padding:8px 0}
#envelope .envelope-top .eyebrow{font-size:11px;letter-spacing:1px;line-height:1.7}
html:lang(ar) #envelope .envelope-top .eyebrow{font-size:14px;letter-spacing:0}
#envelope .envelope-top h1,html[lang=en] #envelope .envelope-top h1{font-size:clamp(44px,12vw,74px);line-height:1.4;margin:14px 0 18px}
html:lang(ar) #envelope .envelope-top h1{font-size:clamp(53px,15vw,72px);line-height:1.5}
#envelope .envelope-top .date{font-size:12px;letter-spacing:4px}
#envelope #seal{width:150px;height:150px}
#envelope .envelope-bottom{gap:18px;padding:6px 0;max-width:100%}
#envelope .open-hint{font-size:11px;letter-spacing:2px}
#envelope .open-hint span{font-size:22px;letter-spacing:0;line-height:1.5}
html:lang(ar) #envelope .open-hint{font-size:14px;letter-spacing:0}
html:lang(ar) #envelope .open-hint span{font-size:23px}
#invitation>section{padding:66px 34px}
#invitation .hero{padding:48px 30px 52px;min-height:calc(100svh - 62px)}
#invitation .hero .halo{top:22px;bottom:22px;height:auto;width:calc(100% - 34px)}
#invitation .hero>.eyebrow{font-size:9px;letter-spacing:.7px;line-height:1.6;max-width:100%}
html:lang(ar) #invitation .hero>.eyebrow{font-size:14px;letter-spacing:0}
.rings{width:234px;height:132px;max-width:100%;margin:22px auto 16px}
.rings img{width:142px;height:142px}
.ring-silver{left:10px;top:7px}.ring-diamond{right:5px;top:-8px}
#invitation .hero .intro{font-size:23px;line-height:1.7}
html:lang(ar) #invitation .hero h1{font-size:clamp(61px,17vw,76px);line-height:1.5;margin:10px 0}
html[lang=en] #invitation .hero h1{font-size:clamp(44px,12.5vw,72px);line-height:1.5;margin:12px 0}
#invitation .hero .ornament{margin:14px auto}
#invitation .hero .fullnames{font-size:24px;line-height:1.6}
html[lang=en] #invitation .hero .fullnames{font-size:22px;line-height:1.5}
#invitation .hero .date{margin-top:22px;font-size:13px;letter-spacing:4px}
#invitation .hero .scroll{margin-top:24px;font-size:11px;line-height:1.7;letter-spacing:0}
html:lang(ar) #invitation .hero .scroll{font-size:14px}
#invitation .hero .scroll span{font-size:24px;margin-top:4px}
html:lang(ar) .families h2,html:lang(ar) .families .family-names{font-size:clamp(20px,6vw,32px);line-height:1.85;white-space:nowrap}
html[lang=en] .families h2,html[lang=en] .families .family-names{font-size:clamp(23px,6.5vw,34px);line-height:1.45;white-space:normal}
.families .family-divider{width:min(260px,90%);margin:15px auto}
.family-divider svg{width:54px;height:30px}
html:lang(ar) .families .invitation-copy{font-size:24px;margin:30px 0 20px}
html:lang(ar) .families .invitation-copy em{font-size:44px}
html[lang=en] .families .invitation-copy{font-size:24px;line-height:1.65;margin:28px 0 18px}
html[lang=en] .families .invitation-copy em{font-size:46px;line-height:1.5}
html:lang(ar) .families>p:last-child{font-size:16px;line-height:1.9}
html[lang=en] .families>p:last-child{font-size:14px;line-height:1.9}
html:lang(ar) .details h2{font-size:35px;line-height:1.6}
html[lang=en] .details h2{font-size:36px;line-height:1.2}
.date-display{gap:12px;margin-top:24px}
.date-display strong{font-size:80px;padding:0 14px}
.date-display>span{font-size:12px;white-space:nowrap}
#countdown{padding:20px 0;width:100%;margin:30px auto 20px}
#countdown strong{font-size:36px}
#countdown span{font-size:10px;letter-spacing:.5px}
#countdown-note{font-size:20px}
#invitation .venue{margin:0 12px;padding:66px 28px}
html:lang(ar) .venue h2,html[lang=en] .venue h2{font-family:'Great Vibes',cursive;font-size:clamp(40px,12vw,66px);line-height:1.5;white-space:nowrap}
.venue p:not(.eyebrow){font-size:16px;line-height:1.9}
html[lang=en] .venue p:not(.eyebrow){font-size:14px}
.button{display:flex;width:100%;max-width:310px;margin-inline:auto;min-height:48px;padding:12px 16px;line-height:1.7;text-align:center;white-space:normal}
html:lang(ar) .button{font-size:14px}html[lang=en] .button{font-size:12px}
#invitation .original{display:grid;grid-template-columns:minmax(0,1fr);gap:42px;padding:74px 38px;max-width:100%;text-align:center}
.original>div,.original>a{min-width:0;max-width:100%}
.original img{width:100%;max-width:330px;margin:auto;border-width:8px;outline-offset:4px;transform:rotate(-1deg)}
html:lang(ar) .original h2{font-size:34px;line-height:1.6}
html[lang=en] .original h2{font-size:38px;line-height:1.2}
.text-link{min-height:44px;line-height:1.8;padding:10px 0}
footer{padding:64px 34px calc(64px + env(safe-area-inset-bottom,0px))}
html:lang(ar) footer h2{font-size:50px}html[lang=en] footer h2{font-size:56px}
footer #reopen{min-height:44px;margin-top:16px}
footer .language-switch{margin-top:20px}
}
@media(max-width:360px){
#invitation>section{padding-inline:30px}
#invitation .hero{padding-inline:26px}
.families:after{inset:14px}
.date-display{gap:8px}.date-display strong{font-size:72px;padding:0 10px}.date-display>span{font-size:11px}
#countdown strong{font-size:32px}
html:lang(ar) .details h2{font-size:31px}
#invitation .original{padding-inline:34px}
}
@media(max-height:650px) and (max-width:800px){#envelope{gap:16px;padding-block:max(22px,env(safe-area-inset-top))}#envelope #seal{width:112px;height:112px}#envelope .envelope-top h1,html[lang=en] #envelope .envelope-top h1,html:lang(ar) #envelope .envelope-top h1{font-size:50px;margin:8px 0 12px}#envelope .envelope-bottom{gap:14px}}
html[lang=en] #countdown{direction:ltr}