/* iPhone layouts, including the safe areas used by Safari in landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, summary { touch-action: manipulation; }
input, select, button { min-width: 0; }
img { max-width: 100%; }

@media (max-width: 700px) {
  :root { --mobile-gutter: clamp(20px, 6vw, 32px); }
  html { scroll-padding-top: 24px; }
  header {
    height: calc(86px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--mobile-gutter), env(safe-area-inset-left, 0px));
    gap: 8px;
  }
  .wordmark { flex-shrink: 0; font-size: 46px; }
  .wordmark span { font-size: 7px; letter-spacing: 1.2px; }
  .nav-book {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 11px;
    margin: 0 0 0 auto;
    white-space: nowrap;
  }
  .nav-book span { margin-left: 10px; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 24px;
  }
  nav {
    display: none;
    position: absolute;
    inset: calc(86px + env(safe-area-inset-top, 0px)) 0 auto;
    padding: 18px var(--mobile-gutter) 24px;
    background: var(--plum);
    gap: 0;
    box-shadow: 0 15px 30px #17101826;
  }
  nav.open { display: flex; flex-direction: column; }
  nav a { display: flex; align-items: center; min-height: 48px; font-size: 15px; border-bottom: 1px solid #ffffff25; }
  .hero { height: 100svh; min-height: 600px; max-height: none; }
  .hero-image { background-image: url('assets/photo-10-960.jpg'); background-position: 58% center; }
  .hero-top {
    top: calc(112px + env(safe-area-inset-top, 0px));
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .hero-top > span:last-child { display: none; }
  .hero-copy { left: var(--mobile-gutter); right: var(--mobile-gutter); top: 32%; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .hero h1 { font-size: clamp(46px, 14.8vw, 82px); line-height: 1.01; margin: 24px 0; }
  .hero-copy > p:last-child { font-size: 14px; line-height: 1.65; margin-top: 24px; }
  .hero-bottom {
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    gap: 16px;
    font-size: 8px;
    letter-spacing: 1px;
  }
  .hero-bottom > span { display: none; }
  .hero-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-bottom span { margin-left: 10px; }
  .hero-bottom > a:last-child { padding-bottom: 0; }
  .pause { height: min(76svh, 560px); min-height: 400px; }
  .pause-copy { padding: 0 var(--mobile-gutter); width: 100%; }
  .pause h2 { font-size: clamp(48px, 14.4vw, 80px); line-height: 1.04; }
  .pause .eyebrow { display: block; font-size: 8px; line-height: 1.6; letter-spacing: 1.2px; }
  .section, .journey-stage {
    padding: 64px max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) 64px max(var(--mobile-gutter), env(safe-area-inset-left, 0px));
  }
  h2, .essentials h2, .stay h2, .journey-heading h2 { font-size: clamp(40px, 11.5vw, 56px); line-height: 1.04; }
  .section-label { font-size: 10px; letter-spacing: 1.6px; }
  .rooms-heading { display: block; }
  .rooms-heading h2 { margin-top: 24px; }
  .rooms-note { margin-top: 24px; font-size: 14px; line-height: 1.65; }
  .rooms-note br { display: none; }
  .rooms-note small { display: none; }
  .room-controls { margin: 28px 0; gap: 12px; padding-bottom: 12px; }
  .room-controls .room-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .room-controls .room-tabs button { min-height: 56px; padding: 10px 3px; font-size: 12px; line-height: 1.35; text-wrap: balance; }
  .room-autoplay { min-width: 100px; min-height: 44px; padding: 12px; font-size: 12px; }
  .room-panel { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rooms .room-photo > .room-view-label { font-size: 10px; min-height: 40px; padding-top: 14px; }
  .room-description h3 { font-size: clamp(36px, 10vw, 46px); min-height: 2.04em; margin: 18px 0; }
  .room-description p { font-size: 14px; line-height: 1.65; max-width: none; min-height: 6.6em; }
  .room-description .eyebrow { font-size: 10px; }
  .room-features { font-size: 11px; line-height: 1.5; gap: 8px 16px; margin-top: 20px; }
  .text-link { font-size: 13px; min-height: 48px; max-width: 100%; gap: 24px; }
  .journey-heading { display: block; margin-bottom: 40px; }
  .journey-instructions a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .journey-track { gap: 56px; }
  .photo-frame img { width: auto; max-width: 100%; max-height: 72svh; object-fit: contain; }
  .photo-caption { gap: 12px; }
  .photo-caption > span { flex-shrink: 0; font-size: 10px; }
  .photo-caption strong { min-width: 0; flex: 1; font-size: 25px; line-height: 1.2; }
  .journey-controls { margin-top: 44px; }
  .neighbourhood, .essentials, .stay { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .location-content > p, .faq details p, .stay > div > p:last-child { font-size: 14px; line-height: 1.7; }
  .places > a { gap: 12px; padding: 24px 0; font-size: 26px; }
  .places small { font-size: 9px; line-height: 1.5; letter-spacing: .7px; }
  .faq summary { min-height: 56px; gap: 18px; padding: 22px 0; font-size: 14px; line-height: 1.5; }
  .faq summary span { flex: 0 0 auto; }
  .stay label { font-size: 11px; letter-spacing: 1.5px; }
  .stay input, .stay select { box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 52px; font-size: 16px; color-scheme: light; }
  .stay input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
  .stay input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
  .submit { min-height: 56px; font-size: 14px; align-items: center; gap: 12px; }
  .form-note, #form-status { font-size: 12px; line-height: 1.6; }
  footer { padding: 48px var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }
  .footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 18px; font-size: 12px; }
  .footer-top > a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
  .footer-top > a:last-child { font-size: 10px; }
  .footer-bottom { display: flex; flex-wrap: wrap; font-size: 10px; line-height: 1.6; gap: 16px; margin-top: 32px; }
  .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
  dialog {
    width: 100%;
    height: 100dvh;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(84px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  dialog figure { width: 100%; height: 100%; min-height: 0; }
  dialog img { width: auto; max-width: 100%; max-height: calc(100% - 64px); min-height: 0; object-fit: contain; }
  dialog figcaption { flex-shrink: 0; max-width: 100%; font-size: 12px; line-height: 1.5; text-align: center; margin-top: 16px; }
  dialog button { width: 44px; height: 44px; }
  .lightbox-close { right: max(16px, env(safe-area-inset-right, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); }
  .lightbox-prev { left: 20px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .lightbox-next { right: 20px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 370px) {
  .nav-book { font-size: 10px; padding: 10px; }
  .nav-book span { margin-left: 6px; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .room-controls .room-tabs button { font-size: 11px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 600px; }
  .pause { min-height: 400px; }
  .photo-frame img { max-height: none; max-width: 100%; }
  .journey-track { grid-template-columns: 1fr; }
}