/* Compact brand header and normal document flow prevent footer overlap. */
.brand{padding-top:24px;padding-bottom:0}
.brand img{width:340px;height:auto;max-height:none;mix-blend-mode:normal}
.intro{position:static;padding-top:24px;animation:none}
.invitation-panel{margin-top:24px}
footer{position:static;clear:both;margin-top:16px}
input[type="date"]{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #a7bdc9;border-radius:8px;padding:13px;font-size:15px;color:var(--ink);background:#fff;min-height:50px}
@media(max-width:560px){.brand{padding-top:22px}.brand img{width:290px;max-width:100%}.intro{padding-top:22px}.invitation-panel{margin-top:6px}}
@media(min-width:1000px){.intro{position:static;top:auto;padding-top:24px}.invitation-panel{margin-top:24px}}

/* Desktop: use the available screen instead of creating a tall landing page. */
@media(min-width:1000px){
  body{min-height:100svh;display:flex;flex-direction:column}
  .brand{width:100%;padding-top:12px;padding-bottom:0}
  .brand img{width:300px}
  main{width:100%;flex:1;grid-template-rows:1fr auto;column-gap:38px;row-gap:12px;padding-bottom:12px}
  .intro{padding:16px 0 12px}
  .eyebrow{margin-bottom:10px}
  h1{font-size:56px}
  h1 span{font-size:29px;margin-top:10px}
  .intro-copy{margin:18px 0;font-size:14px;line-height:1.6}
  .event-details{margin-top:20px;gap:18px}
  .event-details>div{gap:5px}
  .booking-note{margin-top:15px}
  .invitation-panel{margin:12px 0 0;padding:22px 26px;border-radius:14px}
  .panel-top{margin-bottom:16px}
  h2{font-size:29px;margin-bottom:12px}
  .muted{margin:10px 0;font-size:13px}
  label:not(.choice){margin:16px 0 7px}
  select,textarea{padding:10px 12px;font-size:14px}
  input[type="date"]{padding:10px 12px;min-height:44px;font-size:14px}
  .field-note{font-size:11px;margin:7px 0 12px}
  .primary{margin-top:16px;padding:12px 16px;min-height:44px}
  footer{margin-top:0;padding:8px 0 0;align-self:end;gap:8px 20px}
  footer p{width:auto;margin:0 8px 0 0;font-size:14px}
  .personal-heading h2{font-size:29px}
  .text-button{margin-bottom:14px}
  .invitation-copy{font-size:13px;line-height:1.55;margin:10px 0}
  .role-note{font-size:12px;line-height:1.45;padding:11px 13px;margin:12px 0}
  fieldset{margin:16px 0}
  legend{font-size:14px;margin-bottom:9px}
  .choice{padding:11px 10px}
  .choice small{display:none}
  .privacy{margin-top:12px;font-size:10px}
}
@media(min-width:1000px) and (max-height:780px){
  .brand{padding-top:8px}
  .brand img{width:270px}
  main{column-gap:32px;row-gap:8px}
  .intro{padding-top:10px}
  h1{font-size:48px}
  h1 span{font-size:25px;margin-top:8px}
  .intro-copy{margin:14px 0;font-size:13px}
  .event-details{margin-top:16px;gap:14px}
  .event-details strong{font-size:14px}
  .event-details>div{font-size:12px}
  .invitation-panel{margin-top:6px;padding:17px 22px}
  .panel-top{margin-bottom:10px}
  .panel-top .eyebrow{font-size:9px}
  h2{font-size:26px}
  label:not(.choice){margin-top:12px}
  .field-note{margin-bottom:9px}
  .primary{margin-top:12px}
  footer{font-size:10px}
}

/* Keep the brand/footer with the invitation, so the form starts at the top. */
body{display:block}
main{padding-top:20px}
.intro>.brand{padding:0;margin:0 0 18px;max-width:none}
.intro>footer{margin-top:20px;padding:14px 0 0;border-top:1px solid var(--line);gap:10px 18px}
.intro>footer p{width:100%;margin:0 0 3px;font-size:15px}
@media(min-width:1000px){
  main{flex:none;grid-template-rows:auto;align-items:start;row-gap:0;padding-top:24px;padding-bottom:20px}
  .intro{padding:0}
  .intro>.brand{margin-bottom:18px}
  .intro>.brand img{width:300px}
  .invitation-panel{margin-top:0}
  .intro>footer{align-self:auto;margin-top:20px;padding-top:14px}
}
@media(min-width:1000px) and (max-height:780px){
  main{padding-top:16px}
  .intro>.brand{margin-bottom:14px}
  .intro>.brand img{width:270px}
  .intro>footer{margin-top:14px;padding-top:12px}
}
@media(max-width:999px){.intro{padding-top:0}.intro>.brand{margin-bottom:24px}.intro>footer{padding-bottom:0}.invitation-panel{margin-top:12px}}