/* Phone layout keeps the same artwork, film and motion timeline. */
@media(max-width:799px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .site-header{gap:6px}.brand{min-width:0;gap:7px}.brand>span:last-child{white-space:nowrap}.header-actions{flex-shrink:0;gap:2px}
 #site-menu{max-height:calc(100dvh - var(--header) - env(safe-area-inset-top) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:42px 24px 22px}
 #site-menu nav a{font-size:1.6rem;min-height:48px;padding:10px 0}
 .invitation .section-inner{min-height:calc(100svh - var(--header) - env(safe-area-inset-top));padding:70px 28px 65px}
 .invitation .section-inner:before{inset:22px 16px}
 .invitation .blessing{font-size:1.25rem;margin-bottom:25px;max-width:285px}
 .invitation .names{font-size:clamp(3.6rem,15vw,5.4rem)}
 .invitation .invitation-message{font-size:1.15rem;line-height:1.6}
 .details .section-inner{padding:65px 18px 48px}.details h2{font-size:clamp(1.9rem,7.6vw,2.8rem)}
 .details .event,.details .event+.event{padding:125px 22px 28px;min-height:410px;height:auto}
 .event h3{font-size:2rem}.event .time{font-size:2.9rem}.event .pending{min-height:0}
 .attire .section-inner,.guest-details .section-inner,.rsvp .section-inner{min-height:0;padding:65px 22px}
 .attire h2{font-size:1.8rem}.attire-art{gap:24px}.swatch-list{gap:20px 12px}.swatch-list li{font-size:.68rem;min-width:40px;max-width:54px}.swatch{width:40px;height:40px}
 .closing .section-inner{min-height:760px;padding:400px 24px 65px}.closing h2{font-size:2.8rem}
 .address-panel{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}
 #envelope-film{width:100%;height:100%;object-fit:contain}.cinema-backdrop{display:block}
 .cinema-opening,.welcome .cinema-opening{height:100dvh}
}
@media(max-width:360px){
 .brand{font-size:.8rem;gap:5px}.brand-seal{width:28px;height:28px;font-size:.9rem}.site-header{padding-left:8px;padding-right:4px}.site-header .sound-toggle{min-width:60px;font-size:.6rem;padding:7px 5px}.site-header #menu-open{width:40px}
 .invitation .section-inner{padding-left:22px;padding-right:22px}.invitation .blessing{font-size:1.13rem}.invitation .names{font-size:3.5rem}
 .details .section-inner{padding-left:14px;padding-right:14px}.details .event,.details .event+.event{padding-left:20px;padding-right:20px}
 #fecha .section-inner{padding-left:18px;padding-right:18px}.countdown-units span{font-size:2.1rem}
 .attire .section-inner{padding-left:16px;padding-right:16px}.swatch-list{gap:18px 9px}
}
@media(max-height:500px) and (orientation:landscape){#site-menu{max-height:calc(100dvh - 80px)}.cinema-opening #open-invitation{bottom:58px;padding:10px 23px;min-height:44px}}