/* Keep the iOS viewport corners opaque under viewport-fit=cover. */
html {
  background-color: #f1eee7;
}
html:has(body.listing-page--nohero) {
  background-color: #ddd5c9;
}

/* Shared navigation and editorial surface treatments. The footer is owned
   exclusively by newsletter-footer.css. */

/* Calm, fully opaque navigation surface without animated effects. */
html body.listing-page--nohero {
  background-color: #ddd5c9 !important;
}

html body.listing-page--nohero::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: #ddd5c9;
  pointer-events: none;
}

body.listing-page--nohero:not(.site-menu-open) .topbar,
body.is-scrolled:not(.site-menu-open) .topbar,
body:not(.menu-open) .masthead.is-scrolled {
  background: var(--quiet-nav-surface, #dfd1bf) !important;
  animation: none !important;
  transition: background-color 1600ms cubic-bezier(.22, .72, .24, 1) !important;
}

html body.index-page--listing4.is-scrolled:not(.site-menu-open) .topbar {
  background: var(--quiet-nav-surface, #dfd1bf) !important;
  animation: none !important;
  transition:
    background-color 1600ms cubic-bezier(.22, .72, .24, 1),
    color 900ms ease !important;
}

body.index-page--listing4.nav-surface--hero { --quiet-nav-surface: #d9cdbc; }
body.index-page--listing4.nav-surface--places { --quiet-nav-surface: #ddd5c9; }
body.index-page--listing4.nav-surface--contact { --quiet-nav-surface: #e6dfd3; }
body.index-page--listing4.nav-surface--footer { --quiet-nav-surface: #d2c5b4; }

/* Place pages retain Woodnest's separate, viewport-fixed header and menu.
   The browser/root surface owns the iPhone edges, not extra covering strips. */
html.qc-place-page body > .masthead,
html.qc-place-page body > .masthead.is-scrolled {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* Fade between hero and paper; the resting scrolled state stays opaque. */
  transition: height .35s ease,
    background-color .55s cubic-bezier(.22, .72, .24, 1),
    color .55s ease, border-color .55s ease !important;
}

html.qc-place-page body > .masthead :is(a, button) {
  transition: color .55s ease;
}

html.qc-place-page body:not(.menu-open) > .masthead:not(.is-scrolled) {
  background: transparent !important;
}

html.qc-place-page body:not(.menu-open) > .masthead.is-scrolled {
  background: var(--quiet-nav-surface, #ddd5c9) !important;
}

html.qc-place-page body.menu-open > .masthead {
  background: #15231c !important;
}

html.qc-place-page body > .menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: #15231c !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* An immediately opened menu must not sit beneath the page-entry veil. */
html.qc-place-page:has(body.menu-open)::after {
  z-index: 39;
}

/* Keep the scrolled navigation opaque, but preserve the transparent hero
   state at scroll position zero, including its light logo and controls. */
@media (max-width: 980px) {
  html.qc-place-page body:not(.menu-open) > .masthead.is-scrolled {
    background: var(--quiet-nav-surface, #ddd5c9) !important;
    color: #15231c;
  }
  html.qc-place-page body:not(.menu-open) > .masthead.is-scrolled :is(a, button) {
    color: #15231c;
  }
  html.qc-place-page body:not(.menu-open) > .masthead.is-scrolled .masthead__brand img {
    content: normal;
    opacity: 1;
  }

  html.qc-place-page body > .menu-overlay {
    transition: none !important;
  }
  html.qc-place-page body > .menu-overlay > :is(.menu-overlay__nav, .menu-overlay__meta) {
    opacity: 0;
    transition: opacity .35s ease;
  }
  html.qc-place-page body > .menu-overlay.is-open > :is(.menu-overlay__nav, .menu-overlay__meta) {
    opacity: 1;
  }

  html.qc-place-page body > .share-dock {
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    background: var(--quiet-nav-surface, #ddd5c9) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
    visibility: hidden;
  }
  html.qc-place-page body > .share-dock.is-header-visible:not(.is-over-footer):not(.is-near-booking) {
    visibility: visible;
  }
  html.qc-place-page body.menu-open > .share-dock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html.qc-place-page body > .share-dock .share-dock__trigger {
    /* St. Moritz previously blurred the trigger as well as the container. */
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The full-viewport page veil also fades its edge pixels. Article fades
     remain active, but mobile navigation is no longer covered by that veil. */
  html.qc-place-page::after {
    content: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.qc-place-page body > .masthead,
  html.qc-place-page body > .masthead.is-scrolled,
  html.qc-place-page body > .masthead :is(a, button),
  html.qc-place-page body > .menu-overlay > :is(.menu-overlay__nav, .menu-overlay__meta) {
    transition: none !important;
  }
}

body.listing-page--nohero:not(.site-menu-open) .topbar .nav,
body.is-scrolled:not(.site-menu-open) .topbar .nav {
  background: transparent !important;
}

/* Match the working Place masthead geometry: the fixed header itself is 68px.
   Safari's physical top area is coloured by theme-color/html, not by adding
   safe-area padding to the document header. */
@media (max-width: 980px) {
  html body .topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    top: calc(0px - env(safe-area-inset-top, 0px)) !important;
    width: 100% !important;
    height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(68px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box !important;
    overflow: visible;
    background-clip: border-box;
    -webkit-transform: none !important;
    transform: none !important;
    isolation: isolate;
  }

  html body.listing-page--nohero:not(.site-menu-open) .topbar,
  html body.index-page--listing4.is-scrolled:not(.site-menu-open) .topbar {
    background: var(--quiet-nav-surface, #ddd5c9) !important;
    background-color: var(--quiet-nav-surface, #ddd5c9) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body .topbar::before {
    content: none !important;
    display: none !important;
  }

  html body .topbar .nav,
  html body.listing-page--nohero:not(.site-menu-open) .topbar .nav,
  html body.index-page--listing4.is-scrolled:not(.site-menu-open) .topbar .nav {
    position: relative;
    z-index: 1;
    height: 68px;
    min-height: 68px;
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* Mobile material system: the shared palette owns the grain on every
   breakpoint. Keep this layer free of a second page-wide texture. */
@media (max-width: 760px) {
  /* Editorial image descriptions follow the same small sans-serif hierarchy
     as ABOUT / CONTEXT / PLACES. Card and photographer credits stay separate. */
  html body.about2-page .about2-caption,
  html body.about2-page .intro-opener__caption,
  html body.imprint-page .intro-opener__caption {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }
}

/* Editorial captions use the same small-type system throughout mobile and
   tablet; narrative captions on individual Place stories remain untouched. */
@media (max-width: 1180px) {
  html body.about2-page .about2-caption,
  html body.about2-page .intro-opener__caption,
  html body.imprint-page .intro-opener__caption {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }
}

/* Unified directory popup — shared by editorial and place pages. */
html body .modal-overlay,
html body .launch-modal {
  padding: 24px !important;
  background: rgba(7, 20, 14, .46) !important;
  -webkit-backdrop-filter: blur(6px) saturate(103%) !important;
  backdrop-filter: blur(6px) saturate(103%) !important;
}

html body .modal-overlay .modal-card,
html body .launch-modal .launch-modal__card {
  box-sizing: border-box !important;
  width: min(520px, calc(100vw - 48px)) !important;
  max-width: 520px !important;
  padding: 34px 36px 30px !important;
  border: 1px solid rgba(21, 35, 28, .14) !important;
  border-radius: 6px !important;
  background: rgba(245, 242, 235, .985) !important;
  color: #15231c !important;
  text-align: center !important;
  box-shadow: 0 20px 56px rgba(7, 12, 10, .24) !important;
}

html body .modal-overlay .modal-card .modal-close,
html body .launch-modal .launch-modal__card .launch-modal__close {
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #15231c !important;
  font: 300 18px/1 Inter, Arial, sans-serif !important;
  opacity: .62 !important;
}

html body .modal-overlay .modal-card .modal-kicker,
html body .launch-modal .launch-modal__card .launch-modal__kicker {
  margin: 0 0 12px !important;
  color: rgba(21, 35, 28, .58) !important;
  font: 500 10px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body .modal-overlay .modal-card .modal-title,
html body .launch-modal .launch-modal__card .launch-modal__title {
  max-width: 100% !important;
  margin: 0 auto 12px !important;
  color: #15231c !important;
  font-family: "larken", Newsreader, Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-wrap: balance;
}

html body .modal-overlay .modal-card .modal-text,
html body .launch-modal .launch-modal__card .launch-modal__text {
  max-width: 38ch !important;
  margin: 0 auto 22px !important;
  color: rgba(21, 35, 28, .76) !important;
  font-family: Newsreader, Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 350 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

html body .modal-overlay .modal-card .modal-mail,
html body .launch-modal .launch-modal__card .launch-modal__mail {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 36px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 14px 9px !important;
  border: 1px solid #173129 !important;
  border-radius: 3px !important;
  background: #173129 !important;
  color: #f5f1e8 !important;
  font: 500 10px/1.2 Inter, Arial, sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

@media (max-width: 980px) {
  html body .modal-overlay,
  html body .launch-modal {
    padding: 16px !important;
  }

  html body .modal-overlay .modal-card,
  html body .launch-modal .launch-modal__card {
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    padding: 30px 24px 27px !important;
  }

  html body .modal-overlay .modal-card .modal-kicker,
  html body .launch-modal .launch-modal__card .launch-modal__kicker {
    margin-bottom: 11px !important;
    font-size: 11px !important;
  }

  html body .modal-overlay .modal-card .modal-title,
  html body .launch-modal .launch-modal__card .launch-modal__title {
    margin-bottom: 12px !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
  }

  html body .modal-overlay .modal-card .modal-text,
  html body .launch-modal .launch-modal__card .launch-modal__text {
    max-width: 34ch !important;
    margin-bottom: 22px !important;
    font-size: 19px !important;
    font-weight: 350 !important;
    line-height: 1.5 !important;
  }

  html body .modal-overlay .modal-card .modal-mail,
  html body .launch-modal .launch-modal__card .launch-modal__mail {
    min-height: 36px !important;
    padding: 10px 13px 9px !important;
    font-size: 10px !important;
  }
}