/* The original composition, sized for a phone without cutting it into slides. */
@media (max-width: 760px) {
  html { scroll-padding-top: 20px; }
  .header { height: 90px; }
  .header nav { top: 100%; }
  .header select, .menu-toggle { min-height: 44px; }
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    max-height: none;
    padding-inline: 6%;
  }
  .hero-editorial {
    position: relative;
    inset: auto;
    max-width: none;
    margin-top: auto;
    padding-top: clamp(135px, 24svh, 205px);
    padding-bottom: 25px;
  }
  .hero h1 { font-size: clamp(44px, 12.8vw, 62px); margin-block: 17px; }
  .hero-editorial .eyebrow { letter-spacing: 1.6px; }
  .hero-promise { max-width: 290px; margin-bottom: 15px; }
  .hero .button-light { padding-block: 14px; min-height: 46px; }
  .hero-baseline {
    position: relative;
    inset: auto;
    margin: 0;
    padding-block: 15px max(18px, env(safe-area-inset-bottom));
    flex-shrink: 0;
  }
  .hero-scroll, .hero-baseline .photo-button { min-height: 44px; }
  .section { padding: 48px 6%; }
  .brand-story { padding-block: 30px 40px; }
  .brand-copy h2 { font-size: clamp(40px, 10.8vw, 46px); }
  .stay { gap: 28px; }
  .stay-images { margin-right: 8%; padding-bottom: 35px; }
  .stay-images .living { aspect-ratio: 1.05; max-height: 310px; }
  .stay-images .dining { bottom: 8px; }
  .stay .section-copy h2 { font-size: clamp(46px, 12.8vw, 56px); margin-bottom: 20px; }
  .amenities { gap: 12px; margin-block: 24px; }
  .section-heading h2 { font-size: clamp(40px, 10.8vw, 46px); }
  .room-grid { gap: 36px; }
  .room-image img { height: clamp(240px, 43svh, 360px); aspect-ratio: auto; }
  .room h3 { font-size: 29px; }
  .rooms-note { margin-top: 30px; }
  .business-stay { margin-top: 28px; }
  .ducks-photo { min-height: clamp(280px, 52svh, 430px); }
  .ducks-copy { padding: 38px 8% 44px; }
  .ducks h2 { font-size: clamp(44px, 12vw, 52px); }
  .area-photo img { height: clamp(245px, 44svh, 340px); }
  .practical { gap: 28px; }
  .practical h2 { font-size: clamp(42px, 11.5vw, 48px); }
  .guestbook { padding-block: 38px 80px; }
  .guestbook-page { min-height: clamp(390px, 60svh, 480px); padding-block: 20px; }
  .guestbook-review { padding-block: 22px; }
  .guestbook-review blockquote { font-size: 38px; margin-block: 22px 16px; }
  .review-signature { margin-top: 24px; }
  .booking { gap: 32px; }
  .booking h2 { font-size: clamp(40px, 10.8vw, 47px); }
  .booking-intro > img { margin-block: 16px 0; }
  .booking-card { padding: 22px; }
  .planner-dialog { max-height: calc(100svh - 12px); }
  input, textarea, form select { font-size: 16px; }
  .planner-name input { font-size: 16px; }
}

/* A light settling point where the complete composition fits naturally. */
@media (max-width: 760px) and (orientation: portrait) and (min-height: 550px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
  .hero, .brand-story, .guestbook { scroll-snap-align: start; scroll-snap-stop: normal; }
  html:has(dialog[open]), html.planner-modal-open,
  html:has(input:focus, textarea:focus, select:focus) { scroll-snap-type: none; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .hero h1 { font-size: 44px; }
  .hero-editorial { padding-top: 125px; padding-bottom: 20px; }
  .hero-promise { margin-bottom: 10px; }
  .hero-baseline { padding-block: 12px; }
  .guestbook { padding-block: 28px 70px; }
  .guestbook-page, .guestbook-review { padding-block: 18px; }
  .guestbook-review blockquote { font-size: 36px; margin-block: 20px 14px; }
  .review-signature { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce), print {
  html { scroll-snap-type: none !important; }
}