.guest-page{min-height:calc(100svh - 24px);display:flex;flex-direction:column}
.guest-page .hero{padding-inline:clamp(16px,4vw,64px)}
.hero-placeholder{display:grid;place-items:center;aspect-ratio:2.7;min-height:165px;border:1px dashed #b48373;border-radius:6px;background:#fff7e75c;color:#794d42;font:italic clamp(14px,2vw,18px) Georgia,serif}
.guest-page .accommodations-title h1{width:auto;max-width:84%;min-width:0}
.guest-page .accommodations-title h1 img{height:clamp(64px,12vw,175px);max-width:100%;width:auto;object-fit:contain}
@media(max-width:600px){.hero-placeholder{aspect-ratio:1.7}}
.guest-page main{flex:1}

.activities-poster .lodge-poster-still{object-position:center bottom}

.welcome-message {
  max-width: 42rem;
  margin: 1.5rem auto 2.5rem;
  padding-inline: clamp(1rem, 5vw, 2rem);
  text-align: center;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.65;
}

.welcome-message h2 {
  margin: 0 0 1.25rem;
  font-family: Display, Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
}

.welcome-message h2 img {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  margin-inline: auto;
}

.welcome-message p {
  margin: 0;
}

.welcome-message p + p::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 1.25rem auto;
  background: currentColor;
}

.welcome-message-signoff em {
  font-size: 1.25em;
}

.welcome-bottom {
  container-type: inline-size;
}

.welcome-bottom .welcome-message {
  position: relative;
  z-index: 1;
  width: 43%;
  padding-inline: .5rem;
  margin-bottom: 0;
}

.welcome-corners {
  --vignette-width: min(44cqw, 30rem);
  position: relative;
  margin-top: calc(-2.25 * var(--vignette-width) - 6px);
  display: grid;
  align-items: end;
  padding-top: 12px;
}

.welcome-corners > * {
  grid-area: 1 / 1;
}

.welcome-vignette {
  display: block;
  width: var(--vignette-width);
  height: auto;
  justify-self: start;
}

.welcome-vignette:last-child {
  justify-self: end;
}

.welcome-corners .wedding-celebration {
  z-index: 1;
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translate(-50%, 50%);
  width: min(36%, 420px);
  padding: 0;
}

@media (min-width: 850px) {
  .welcome-corners {
    --vignette-width: min(39.6cqw, 27rem);
  }

  .welcome-corners .wedding-celebration {
    bottom: 13.333%;
    width: min(43.2%, 504px);
    clip-path: inset(0 17%);
  }
}

@media (max-width: 849px) {
  .welcome-bottom .welcome-message {
    width: 49%;
  }

  .welcome-corners {
    --vignette-width: min(40cqw, 20rem);
  }
}

main:has(.welcome-bottom) + .wedding-footer {
  margin-top: 0;
}