/* Shared final presentation for Quietcation newsletter popups and burger menus.
   Load this after each page's legacy inline overrides. */

/* Newsletter overlays: one width, type scale, close control and scroll model. */
html body :is(#themesPanel, .modal-overlay, .launch-modal) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: rgba(7, 20, 14, .52) !important;
  -webkit-backdrop-filter: blur(6px) saturate(103%) !important;
  backdrop-filter: blur(6px) saturate(103%) !important;
}

html body :is(#themesPanel, .modal-overlay, .launch-modal):not(.is-open) {
  pointer-events: none !important;
}

html body :is(#themesPanel .modal-card, .modal-overlay .modal-card, .launch-modal .launch-modal__card) {
  box-sizing: border-box !important;
  width: min(520px, calc(100vw - 48px)) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  margin: auto !important;
  padding: 34px 36px 30px !important;
  overflow-y: auto !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 :is(#themesPanel .modal-title, .modal-overlay .modal-title, .launch-modal .launch-modal__title) {
  box-sizing: border-box !important;
  width: min(100%, 420px) !important;
  max-width: 420px !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;
  text-wrap: balance !important;
  white-space: normal !important;
}

html body :is(#themesPanel .qc-newsletter-intro, .modal-overlay .modal-text, .launch-modal .launch-modal__text) {
  box-sizing: border-box !important;
  width: min(100%, 420px) !important;
  max-width: 420px !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: 300 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-wrap: pretty !important;
}

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

html body :is(#themesPanel .modal-close, .modal-overlay .modal-close, .launch-modal .launch-modal__close) {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #15231c !important;
  font: 300 22px/1 "DM Sans", "Inter", Arial, sans-serif !important;
  opacity: .68 !important;
}

@media (max-width: 980px) {
  html body :is(#themesPanel .modal-card, .modal-overlay .modal-card, .launch-modal .launch-modal__card) {
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    padding: 30px 24px 27px !important;
  }
  html body :is(#themesPanel .modal-title, .modal-overlay .modal-title, .launch-modal .launch-modal__title) {
    margin-bottom: 12px !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  html body :is(#themesPanel .qc-newsletter-intro, .modal-overlay .modal-text, .launch-modal .launch-modal__text) {
    width: 100% !important;
    max-width: 420px !important;
    margin-bottom: 22px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 520px) {
  html body :is(#themesPanel .qc-newsletter-fields, .launch-modal .qc-newsletter-fields) {
    display: grid !important;
    gap: 8px !important;
  }
  html body :is(#themesPanel .qc-newsletter-submit, .launch-modal .qc-newsletter-submit) {
    width: 100% !important;
    height: 36px !important;
  }
}

/* Burger menu: same surface, placement, type, spacing and fade everywhere. */
/* A centred flex group moves by half the top-padding change. Twice the
   measured logo baseline keeps every link's distance to the logo identical,
   without changing the otherwise intentional masthead heights. */
html[data-qc-mobile-page] body > #site-menu.menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: calc(2 * var(--qc-menu-logo-bottom, 44px) + clamp(12px, calc(16vh - 88px), 72px)) max(24px, calc((100vw - min(1440px, calc(100vw - 64px))) / 2)) clamp(28px, 7vh, 64px) !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: #15231c !important;
  color: #f5f1e8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  clip-path: none !important;
  transform: none !important;
  transition: opacity 650ms cubic-bezier(.2, .75, .25, 1), visibility 0s linear 650ms !important;
}

html body .site-menu-overlay {
  z-index: 500 !important;
}

html body #site-menu.menu-overlay.is-open,
html body .site-menu-overlay.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip-path: none !important;
  transition-delay: 0s !important;
}

html body #site-menu.menu-overlay:not(.is-open),
html body .site-menu-overlay:not(.is-open) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__nav {
  display: flex !important;
  flex: 1 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: min-content !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  row-gap: 16px !important;
  text-align: center !important;
}

html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__nav a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  color: #f5f1e8 !important;
  font-family: "larken", "Newsreader", Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-decoration: none !important;
  text-transform: none !important;
}

html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__meta {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  flex: 0 0 auto !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  color: rgba(245, 241, 232, .7) !important;
  font: 400 10px/1.8 "DM Sans", "Inter", Arial, sans-serif !important;
  letter-spacing: .12em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__meta p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__meta * {
  font-family: "DM Sans", "Inter", Arial, sans-serif !important;
}

@media (max-width: 1180px) {
  html[data-qc-mobile-page] body > #site-menu.menu-overlay {
    padding: calc(2 * var(--qc-menu-logo-bottom, 44px) - env(safe-area-inset-top, 0px) - 4px) max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)) !important;
    scroll-padding-top: calc(var(--qc-menu-clear-top, 68px) + 16px);
    scroll-padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  }
  html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__nav {
    row-gap: 13px !important;
  }
  html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__nav a {
    font-size: 34px !important;
    line-height: .98 !important;
  }
  html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__meta {
    font-size: 9px !important;
  }
}

/* Desktop keeps every page's established masthead height and behaviour;
   only the wordmark receives a little more optical presence. */
@media (min-width: 1181px) {
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body > :is(#places-masthead, .masthead, .topbar) .masthead__brand img,
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > :is(#places-masthead, .masthead, .topbar) .masthead__brand img {
    width: auto !important;
    height: 30px !important;
  }
}

/* Preserve the subtle delayed credit reveal on Index and Places, using the
   actual in-menu credit rather than a second fixed copy outside the scroller. */
@media (max-width: 760px) {
  html:is([data-qc-mobile-page="index3"], [data-qc-mobile-page="places"]) body > #site-menu.menu-overlay .menu-overlay__meta {
    opacity: 0;
    transition: opacity .45s ease;
  }
  html:is([data-qc-mobile-page="index3"], [data-qc-mobile-page="places"]) body > #site-menu.menu-overlay.is-open .menu-overlay__meta {
    opacity: 1;
    transition: opacity .6s ease .15s;
  }
}

/* Landscape keeps the mobile type scale. Scroll the content instead of
   shrinking links or hiding overflow; the masthead remains fixed above it. */
@media (max-width: 1180px) and (max-height: 600px) and (orientation: landscape) {
  html[data-qc-mobile-page] body > #site-menu.menu-overlay {
    padding-top: calc(var(--qc-menu-logo-bottom, 44px) + 32px) !important;
    row-gap: 24px !important;
    overflow-y: auto !important;
  }
  html[data-qc-mobile-page] body > #site-menu.menu-overlay .menu-overlay__nav {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }
}

/* A landscape popup must fit the short viewport and remain internally scrollable. */
@media (max-width: 1180px) and (max-height: 600px) and (orientation: landscape) {
  html body :is(#themesPanel, .modal-overlay, .launch-modal) {
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
  html body :is(#themesPanel .modal-card, .modal-overlay .modal-card, .launch-modal .launch-modal__card) {
    width: min(560px, calc(100vw - 24px)) !important;
    max-width: 560px !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 20px 26px 18px !important;
  }
  html body :is(#themesPanel .modal-title, .modal-overlay .modal-title, .launch-modal .launch-modal__title) {
    margin-bottom: 8px !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
  }
  html body :is(#themesPanel .qc-newsletter-intro, .modal-overlay .modal-text, .launch-modal .launch-modal__text) {
    margin-bottom: 12px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
}

/* Compact navigation for every content page. The Index deliberately keeps
   its larger opening masthead. Keep one geometry across the ordinary,
   scrolled, menu-open/menu-closing and Place-actions states so neither the
   burger overlay nor the drawer can jump when its surface changes. */
@media (max-width: 1180px) {
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) {
    --qc-content-header-height: 50px;
    --qc-content-logo-height: 27px;
    --qc-menu-clear-top: calc(
      var(--qc-content-header-height) +
      env(safe-area-inset-top, 0px) +
      var(--qc-header-edge-space, 0px)
    );
  }

  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body > :is(#places-masthead, .masthead, .topbar),
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > :is(#places-masthead, .masthead, .topbar) {
    --qc-header-height: var(--qc-content-header-height) !important;
    --hero-header-height: var(--qc-content-header-height) !important;
    box-sizing: border-box !important;
    height: calc(
      var(--qc-content-header-height) +
      env(safe-area-inset-top, 0px) +
      var(--qc-header-edge-space, 0px)
    ) !important;
    min-height: 0 !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px) +
      var(--qc-header-edge-space, 0px)
    ) !important;
    padding-bottom: 0 !important;
  }

  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body > :is(#places-masthead, .masthead, .topbar) > .masthead__brand,
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > :is(#places-masthead, .masthead, .topbar) > .masthead__brand {
    position: absolute !important;
    top: calc(
      env(safe-area-inset-top, 0px) +
      var(--qc-header-edge-space, 0px) +
      25px
    ) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body > :is(#places-masthead, .masthead, .topbar) > .masthead__brand img,
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > :is(#places-masthead, .masthead, .topbar) > .masthead__brand img {
    width: auto !important;
    height: var(--qc-content-logo-height) !important;
  }

  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body > :is(#places-masthead, .masthead, .topbar) > .masthead__menu,
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]) body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > :is(#places-masthead, .masthead, .topbar) > .masthead__menu {
    position: absolute !important;
    top: calc(
      env(safe-area-inset-top, 0px) +
      var(--qc-header-edge-space, 0px) +
      25px
    ) !important;
    right: max(20px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* Desktop Place mastheads keep one stable geometry. Scrolling changes the
   surface, never the wordmark size or its vertical position. Full-bleed
   photography switches only the surface and foreground treatment. */
@media (min-width: 1181px) {
  html.qc-place-page body > .masthead,
  html.qc-place-page body > .masthead.is-scrolled,
  html.qc-place-page body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > .masthead,
  html.qc-place-page body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > .masthead.is-scrolled {
    height: 54px !important;
    min-height: 54px !important;
    align-items: center !important;
  }

  html.qc-place-page body > .masthead .masthead__brand,
  html.qc-place-page body > .masthead.is-scrolled .masthead__brand,
  html.qc-place-page body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > .masthead .masthead__brand {
    position: static !important;
    top: auto !important;
    align-self: center !important;
    transform: none !important;
  }

  html.qc-place-page body > .masthead .masthead__brand img,
  html.qc-place-page body > .masthead.is-scrolled .masthead__brand img,
  html.qc-place-page body:is(.menu-open, .site-menu-open, .menu-closing, .qc-actions-open) > .masthead .masthead__brand img {
    width: auto !important;
    height: 30px !important;
  }

  html.qc-place-page body:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.qc-over-fullbleed,
  html.qc-place-page body:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.is-scrolled.qc-over-fullbleed {
    color: #f5f1e8 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.qc-place-page body:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.qc-over-fullbleed :is(a, button) {
    color: #f5f1e8 !important;
  }

  html.qc-place-page body:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.qc-over-fullbleed .menu-toggle span {
    background-color: #f5f1e8 !important;
  }

  html.qc-place-page body:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.qc-over-fullbleed .masthead__brand img {
    content: url("https://www.quietcation.com/Quietcation-Logo-Off-White.png") !important;
    filter: none !important;
    opacity: 1 !important;
  }
}