/* Final responsive layout: no horizontal overflow, balanced content and scalable lettering */
html,body,#root{max-width:100%;min-width:0}
body{overflow-x:hidden}
.wedding-header-lockup{width:min(100%,1080px);min-width:0;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.65fr) 1px minmax(0,1fr);gap:clamp(4px,1.6vw,20px)}
.wedding-header-lockup .header-couple{min-width:0;max-width:100%;width:100%}
.wedding-header-lockup .header-names-one-line{max-width:none;letter-spacing:.012em}
.wedding-header-lockup .header-couple .header-blessing{max-width:100%;text-align:center}
.wedding-header-lockup .header-couple-art{max-width:100%;height:auto;max-height:145px}
header .header-monogram{max-width:100%;height:auto}
.invitation{min-width:0}
.invitation .intro,.invitation .rsvp{min-width:0;max-width:100%}
.intro .handwritten-title{max-width:100%;overflow:visible}
.intro .handwritten-title-text{width:auto;max-width:none;overflow:visible;clip-path:inset(0 100% 0 0);animation:reveal-wedding-title 2.9s steps(34,end) .25s both}
@keyframes reveal-wedding-title{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.intro .handwritten-title-text{animation:none;clip-path:none}}
@media(min-width:901px){
 .invitation{width:min(100%,1200px);max-width:1200px;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);gap:clamp(28px,4vw,64px);align-items:start;margin:clamp(35px,4vw,62px) auto 80px;padding:0 clamp(24px,3vw,44px)}
 .invitation .intro{padding-top:18px}
}
@media(min-width:601px) and (max-width:900px){
 .invitation{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,650px);gap:30px;margin:35px auto 65px;padding:0 28px;align-items:start}
 .invitation .intro{padding-top:0}
 .invitation .rsvp{padding:32px}
}
@media(max-width:600px){
 header{padding:10px 8px;min-height:84px}
 .wedding-header-lockup{grid-template-columns:minmax(0,1fr) 1px minmax(0,1.8fr) 1px minmax(0,1fr);gap:clamp(3px,1vw,8px)}
 .wedding-header-lockup .header-divider{height:48px}
 .wedding-header-lockup .header-couple .header-blessing{font-size:clamp(7px,1.65vw,10px)}
 .wedding-header-lockup .header-couple-art{width:100%;max-height:88px}
 header .header-monogram{width:100%!important;max-width:85px;height:auto!important}
 .invitation{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;width:100%;margin:32px auto 55px;padding:0 clamp(14px,4vw,24px)}
 .invitation .intro{padding-top:0}
 .invitation .rsvp{padding:clamp(19px,5vw,29px)}
 .choices{flex-wrap:wrap}.choice{min-width:120px}
 .wedding-details{max-width:100%}
}
@media(max-width:360px){.wedding-header-lockup .header-couple .header-blessing{font-size:7px}.rsvp .grid{gap:8px}}
/* Refined name sizing: more breathing room in the center header panel */
.wedding-header-lockup .header-names-one-line{
  font-size:clamp(26px,4.65vw,55px);
  letter-spacing:0;
  word-spacing:.07em;
  max-width:100%;
}
@media(max-width:760px){
  .wedding-header-lockup .header-names-one-line{font-size:clamp(19px,4.75vw,32px)}
}
@media(max-width:380px){
  .wedding-header-lockup .header-names-one-line{font-size:clamp(17px,4.55vw,22px)}
}

/* Tall tablet viewports: distribute spare height rather than leaving a large
   empty strip below the invitation and RSVP card. */
@media (min-width:761px) and (max-width:1199px) and (min-height:950px) and (orientation:portrait){
  main.invitation{
    min-height:calc(100vh - 145px);
    min-height:calc(100dvh - 145px);
    margin-top:0;
    margin-bottom:0;
    padding-top:clamp(26px,4vh,58px);
    padding-bottom:clamp(18px,3vh,38px);
    grid-template-rows:minmax(0,1fr) auto;
    align-items:center;
    align-content:stretch;
  }
  main.invitation>.intro,main.invitation>.rsvp{align-self:center}
  main.invitation>footer{grid-column:1/-1;align-self:end;margin-top:clamp(24px,3vh,42px)}
}
@media (min-width:761px) and (max-width:900px) and (min-height:950px) and (orientation:portrait){
  main.invitation{grid-template-rows:auto auto auto;align-content:center;row-gap:clamp(24px,3vh,42px)}
  main.invitation>footer{margin-top:0}
}