.booking-page {width:100%;max-width:none;margin:0;padding:0;background:#faf4eb}
.booking-page .booking-hero {display:block;margin:0;padding:7rem 5.5vw 3rem;color:white;border:0;background:linear-gradient(90deg,#192c40cf,transparent),url("../images/hero-1920.webp") center 55%/cover}
.booking-hero .eyebrow {color:#f4cf86}
.booking-hero h1 {font-size:clamp(2.7rem,4.7vw,5.5rem);line-height:1.02;margin:.5rem 0}
.booking-hero p:last-child {font:italic clamp(1.2rem,1.7vw,1.8rem)/1.4 var(--serif);color:inherit;max-width:32ch}
.booking-layout {display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:2.3vw;padding:clamp(1rem,3vw,3rem) 4vw;max-width:1650px;margin:auto}
.booking-card,.booking-photo {border:1px solid #dfd1ba;border-radius:1rem;padding:clamp(1.2rem,2.4vw,3rem);box-shadow:0 3px 16px #40341c12}
.booking-page h2 {font-size:clamp(1.7rem,2.6vw,3rem);margin:0 0 .5rem}
.booking-card fieldset {grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;margin:0}
.booking-card .date-field,.booking-card fieldset > p:has(#suite),.booking-card .capacity-note {grid-column:1/-1}
.booking-card select {border-radius:.45rem}
.booking-card button {border-radius:.55rem}
.booking-photo {display:flex;flex-direction:column;justify-content:flex-end;color:white;background:linear-gradient(0deg,#19271bf5,transparent 65%),var(--booking-image, url("../images/ocean-suite-1280.webp")) center/cover}
.booking-photo a {color:#ffe4ad}
.booking-info {background:#243729;color:#fff8ea;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;padding:2.3rem 4vw}
.booking-info div {padding:.5rem 2vw}
.booking-info div+div {border-inline-start:1px solid #87907d}
.booking-info h2 {font-size:1.4rem}
@media(min-width:801px){
.page-reservations .site-header {position:absolute;inset:0 0 auto;z-index:5;background:transparent;color:white;border:0}
.page-reservations .site-header :is(a,.brand p) {color:white}
}
@media(max-width:800px){
.booking-page .booking-hero {padding-top:3rem}
.booking-layout {grid-template-columns:minmax(0,1fr)}
.booking-photo {min-height:18rem}
}
@media(max-width:540px){
.booking-info {grid-template-columns:1fr;gap:1rem}
.booking-info div+div {border:0;border-top:1px solid #87907d;padding-top:1rem}
}

.booking-card .capacity-note {
  box-sizing:border-box;
  height:6em;
  min-height:6em;
  line-height:1.5;
  overflow:auto;
}
@media(max-width:540px) {
  .booking-card .capacity-note { height:9em; min-height:9em; }
}
.booking-card select,
.booking-card .date-parts select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23343c2d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 14px center;
  background-size:12px 8px;
  background-repeat:no-repeat;
}
@media(forced-colors:active) {
  .booking-card select,
  .booking-card .date-parts select {
    appearance:auto;
    background-image:none;
  }
}