/* Final responsive layer: preserve the approved palette and let copy grow. */
body.nav-open {
  position: fixed;
  inset-inline: 0;
  top: var(--nav-scroll-offset, 0px);
  width: 100%;
  overflow: hidden;
}
.timber-header .brand, .header-actions, .editorial-copy, .browser-copy,
.table-story, .article-prose, .room-detail-intro > *, .room-notes > * { min-width: 0; }
.article-prose, .policy-page, .photo-credits, .reservation-story,
.footer-top, .room-confirmation { overflow-wrap: anywhere; }
.cinema, .room-stage, .ritual-scene, .atlas-collage { touch-action: pan-y pinch-zoom; }
.timber-mobile { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
:focus-visible { outline: 2px solid var(--honey, #d3ad56); outline-offset: 4px; }

@media (max-width: 1000px) {
  .timber-mobile {
    inset: 116px max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left)) !important;
    max-height: calc(100dvh - 136px - env(safe-area-inset-bottom));
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  .timber-mobile a { min-height: 48px; display: flex; align-items: center; }
}
@media (max-width: 750px) {
  html { scroll-padding-top: 110px; }
  .timber-mobile { inset-block-start: 94px !important; max-height: calc(100dvh - 114px - env(safe-area-inset-bottom)); }
  header.timber-header .header-actions { gap: 4px; }
  header.timber-header .header-actions .button { min-height: 44px; white-space: nowrap; }
  header.timber-header .menu-toggle { width: 44px; min-width: 44px; height: 44px; }
  .inner-page h1, .article-heading h1, .room-detail-intro h1, .policy-page h1 {
    font-size: clamp(2.3rem, 10vw, 3.65rem);
    max-width: 100%; overflow-wrap: anywhere; line-height: 1.1;
  }
  .inner-page h2, .section-heading h2, .editorial-copy h2, .collection-intro h2,
  .home-film h2, .chapter-cta h2, .browser-copy h2, .table-story h2,
  .service-ledger > h2, .film-feature h2, .service-redesign .benefits-heading h2,
  .ritual-intro h2, .morning-redesign .morning-caption h2,
  .journal-wall-heading h2, .hotel-welcome h2, .article-prose h2 {
    font-size: clamp(2.25rem, 9.5vw, 3.5rem); overflow-wrap: anywhere;
  }
  .room-panel h3, .room-journey .room-panel h3, .service-deck .benefit-story h3 {
    font-size: clamp(2.2rem, 9.5vw, 3.4rem); overflow-wrap: anywhere;
  }
  .page-hero { height: auto; min-height: max(700px, 90svh); max-height: none; }
  .page-hero-copy { position: relative; inset: auto; width: 100%; padding: 170px 24px 130px; }
  .page-hero-copy h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); }
  .section-heading { flex-wrap: wrap; gap: 24px; }
  .cinema, html[data-motion="dissolve"] .cinema { min-height: max(840px, 100svh); }
  .cinema-content, html[data-motion="dissolve"] .cinema-content,
  html[data-motion="dissolve"] .cinema-slide.is-current .cinema-content {
    top: 148px; left: 24px; width: calc(100% - 48px);
  }
  .cinema-content .cinema-title, html[data-motion="dissolve"] .cinema-content .cinema-title {
    font-size: clamp(2.6rem, 10.8vw, 3.8rem); line-height: 1.05; max-width: 480px;
  }
  .cinema-controls button, .playback-toggle, .gallery-filters button,
  .memory-toolbar button, .voyage-controls button, .benefit-controls button,
  .photo-rail button, .property-lightbox button, .journal-categories button { min-height: 44px; }
  .playback-toggle { min-width: 44px; }
  .room-journey .room-stage { height: clamp(320px, 105vw, 450px); }
  .room-journey .room-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-journey .room-tabs button { min-width: 0; overflow-wrap: anywhere; }

  .morning-redesign .morning-stage {
    height: auto; min-height: 0; padding: 76px 24px 48px;
    display: flex; flex-direction: column;
  }
  .morning-redesign .ritual-intro { position: relative; inset: auto; order: 0; }
  .morning-redesign .morning-controls {
    position: relative; inset: auto; order: 1; margin: 24px 0 0; width: 100%;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  }
  .morning-redesign .morning-controls button { min-width: 0; min-height: 70px; }
  .morning-redesign .ritual-scene {
    position: relative; inset: auto; order: 2; width: calc(100% - 8px);
    height: clamp(280px, 90vw, 390px); flex: none; margin: 56px 0 70px 2px;
  }
  .morning-redesign .morning-caption { position: relative; inset: auto; order: 3; width: 100%; max-width: none; }
  .morning-redesign .ritual-bottom-note { position: relative; inset: auto; order: 4; margin-top: 32px; line-height: 1.8; }
  .voyage.atlas-body { height: auto; padding: 80px 24px 100px; }
  .voyage .atlas-collage { position: relative; inset: auto; width: 100%; height: 355px; }
  .voyage .atlas-note { position: relative; inset: auto; width: 100%; max-width: none; margin-top: 20px; }
  .voyage .atlas-note h3, .voyage .atlas-note h3.destination-title--long { font-size: clamp(2rem, 9vw, 3rem); overflow-wrap: anywhere; }
  .voyage-topline > :last-child { display: none; }
  .voyage-topline { right: 140px; }
  .voyage-controls { bottom: 26px; }
  .atlas-story-links { flex-wrap: wrap; }
  .gallery-top { flex-wrap: wrap; }
  .gallery-filters, .journal-categories { overscroll-behavior-x: contain; }
  .editorial-tools, .journal-tools { flex-wrap: wrap; }
  .journal-tools label { min-width: 0; max-width: 100%; }
  .stay-enquiry input, .stay-enquiry select, .stay-enquiry textarea,
  .availability-desk input, .availability-desk select, .journal-search { font-size: 16px; min-height: 48px; max-width: 100%; }
  .form-dates > *, .availability-fields > *, .ledger-grid > * { min-width: 0; }
  .whatsapp-submit, .availability-submit { white-space: normal; line-height: 1.4; }
  dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  #booking-dialog { width: calc(100% - 24px); padding: 28px 20px; }
  #booking-dialog h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .dialog-close { min-width: 44px; min-height: 44px; }
  .property-lightbox > div { flex-wrap: wrap; }
  .property-lightbox > img { max-height: 65dvh; }
  .timber-footer .footer-top > * { min-width: 0; }
  .policy-page { padding: 130px 24px 65px; }
}
@media (max-width: 430px) {
  .route-cards { grid-template-columns: minmax(0, 1fr); }
  .route-card img { height: 330px; }
  .ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .cinema-bottom { gap: 14px; }
  .cinema-scroll { font-size: .56rem; }
  .cinema-controls { gap: 12px; }
  .cinema-controls button { font-size: .78rem; }
  .timber-mobile > div { grid-template-columns: minmax(0, 1fr); }
  .timber-footer .footer-top { grid-template-columns: minmax(0, 1fr); }
  .form-dates { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema, .room-stage, .ritual-scene, .atlas-collage { scroll-behavior: auto; }
}