/* Correct the requested top/bottom orientation everywhere the logo appears. */
.brand img,.invitation-logo,.closing-logo{rotate:180deg}
.envelope{transition:opacity .22s ease,visibility 0s .22s;touch-action:pan-y}
.envelope[hidden]{display:none}.envelope.opening{touch-action:pan-y}
@media(pointer:coarse),(max-width:759px){
 .hero picture,.invitation-open .hero picture{animation:none;transform:none}
 .hero picture img,.photo-interlude>img{transform:none}
 .reveal{transition:opacity .45s ease,transform .65s var(--ease-luxury);transform:translateY(12px)}
 .reveal.is-visible,.gallery button.reveal.is-visible{transform:none}
 .invitation-open .hero-text>.eyebrow,.invitation-open .hero-text>p,.invitation-open .hero-text>.hero-link,.invitation-open .title-line>span{animation-delay:.08s;animation-duration:.7s}
 .portrait img,.gallery img{transition-duration:.6s}
 .music-toggle.playing .music-icon{animation:none}
}
@media(prefers-reduced-motion:reduce){.envelope{transition:none}}
/* Keep the opening action visible on short phones and landscape screens. */
@media(max-height:700px) and (max-width:759px){
 .envelope .invitation{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none}
}
@media(max-height:450px){
 .envelope .invitation{top:50%;bottom:auto;transform:translateY(-50%);padding:8px;width:52%;right:2%}
 .envelope .invitation h1{font-size:36px;margin:2px 0;line-height:1.2}
 .envelope .invitation .eyebrow{font-size:7px;letter-spacing:1px}
 .envelope .invitation .invitation-logo{width:42px!important;height:27px!important;margin-bottom:2px}
 .envelope .invitation p{font-size:10px;margin-bottom:1px;line-height:1.5}
 .envelope .invitation .guest{font-size:15px;margin:2px 0 5px}
 .envelope .invitation .rule{margin:5px auto}
 .envelope .invitation small{display:none}
 .envelope .invitation .button{min-height:44px;padding:8px 18px}
 .skip-intro{bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(max-width:759px) and (min-height:451px){
 .envelope .invitation{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none}
}
@media(max-width:759px) and (min-height:451px) and (max-height:700px){
 .tulip-cover{height:70%;bottom:auto}
}
@media(pointer:coarse),(max-width:759px){
 .invitation-open .title-line:nth-child(2)>span{animation-delay:.16s}
}
@media(max-width:359px) and (min-height:701px){
 .envelope .invitation h1{font-size:clamp(40px,13vw,46px)}
}
@media(max-height:450px){
 .music-toggle{width:44px;height:44px;padding:6px;justify-content:center;right:12px}
 #music-label{display:none}
 .skip-intro{right:76px}
}