/* Shared typography roles. Important declarations in this named layer take
   precedence over legacy unlayered page overrides without specificity wars.
   Only recurring components and FAQ are in scope; other page/hero titles stay. */
@layer qc-type-roles {
  html[data-qc-mobile-page] {
    --qc-type-body: 17px;
    --qc-type-intro: 24px;
    --qc-type-card: 32px;
    --qc-type-contact: 48px;
    --qc-type-faq-title: 60px;
    --qc-type-question: 22px;
    --sans: "Inter", Arial, sans-serif !important;
  }
  @media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
    html[data-qc-mobile-page] {
      --qc-type-body: 17px;
      --qc-type-intro: 21px;
      --qc-type-card: 26px;
      --qc-type-contact: 34px;
      --qc-type-faq-title: 34px;
      --qc-type-question: 21px;
    }
  }
  html[data-qc-mobile-page] :is(.contact-04 h2,
      .elsewhere__title) {
    font-family: "larken", "Newsreader", Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: -.015em !important;
    line-height: 1.1 !important;
  }
  html[data-qc-mobile-page] .elsewhere__name {
    font-family: "larken", "Newsreader", Georgia, serif !important;
    font-weight: 300 !important;
    font-synthesis: none !important;
    font-variation-settings: "wght" 300 !important;
    letter-spacing: -.025em !important;
    line-height: 1.08 !important;
  }
  html[data-qc-mobile-page] .contact-04 h2 {
    font-size: var(--qc-type-contact) !important;
  }
  /* Action typography is separate from editorial titles, including child
     spans with legacy page-specific display-font declarations.
     Popup buttons deliberately retain their sans-serif UI typography. */
  html[data-qc-mobile-page] :is(.contact-04__mail, .browse-places-link,
      .contact2-enquiries-mail),
  html[data-qc-mobile-page] :is(.contact-04__mail, .browse-places-link,
      .contact2-enquiries-mail) span {
    font-family: "Newsreader", Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html[data-qc-mobile-page] :is(.modal-mail, .launch-modal__mail),
  html[data-qc-mobile-page] :is(.modal-mail, .launch-modal__mail) span {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: .115em !important;
    text-transform: uppercase !important;
  }
  @media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
    html[data-qc-mobile-page] :is(.modal-mail, .launch-modal__mail),
    html[data-qc-mobile-page] :is(.modal-mail, .launch-modal__mail) span {
      font-size: 10px !important;
    }
  }
  html[data-qc-mobile-page] :is(.contact-04__mail, .browse-places-link,
      .contact2-enquiries-mail, .modal-mail, .launch-modal__mail) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 44px !important;
  }
  html[data-qc-mobile-page] :is(.contact-04__mail, .browse-places-link,
      .contact2-enquiries-mail, .modal-mail, .launch-modal__mail) svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html[data-qc-mobile-page] .elsewhere__title {
    font-size: var(--qc-type-card) !important;
  }
  html[data-qc-mobile-page] .elsewhere__name {
    font-family: "larken", "Italiana", Georgia, serif !important;
    font-size: var(--qc-card-title-size) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-synthesis: none !important;
    font-variation-settings: "wght" 300 !important;
    line-height: var(--qc-card-title-leading) !important;
    letter-spacing: -.025em !important;
  }
  html[data-qc-mobile-page] :is(.about2-standfirst, .about2-copy__lead,
      .about2-copy > p:not(.about2-actions):not(.about2-copy__closing),
      .contact2-text-block p, .partners2-copy p:not(.about2-actions),
      .partners2-copy p:not(.about2-actions) a,
      .contact-04__copy,
      .after-opening-pair__copy p, .city-story__copy p, .faq-intro, .faq-answer p,
      .faq-aside p, .qc-newsletter-intro, .context-evidence .context-coverage-table__group p) {
    font-family: "Newsreader", Georgia, serif !important;
    font-size: var(--qc-type-body) !important;
    font-weight: 350 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
  }
  /* Newsletter and directory signup copy stays lighter and consistent with
     the homepage popup; keep the broader editorial body text at weight 350. */
  html[data-qc-mobile-page] body #themesPanel .qc-newsletter-intro,
  html[data-qc-mobile-page] body #directory-launch-modal .qc-newsletter-intro {
    font: 300 17px/1.5 "Newsreader", Georgia, serif !important;
    text-rendering: auto !important;
  }
  @media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
    html[data-qc-mobile-page] body #themesPanel .qc-newsletter-intro,
    html[data-qc-mobile-page] body #directory-launch-modal .qc-newsletter-intro {
      font-size: 19px !important;
    }
  }
  html[data-qc-mobile-page] :is(.modal-text, .launch-modal__text) {
    font-weight: 350 !important;
  }
  /* Opening essays retain their original Larken 400 styling and 30px
     desktop / 21px mobile scale from the place styles below. */
  html[data-qc-mobile-page] :is(.editorial-statement > p, .location-note__body > p:first-child) {
    font-family: "Newsreader", Georgia, serif !important;
    font-size: var(--qc-type-intro) !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-align-last: left !important;
  }
  /* Secondary reading ink on light surfaces; never apply to heroes or
     inverted contact panels. Headings retain their existing primary ink. */
  html[data-qc-mobile-page] :is(.about2-standfirst, .about2-copy__lead,
      .about2-copy > p:not(.about2-actions):not(.about2-copy__closing),
      .contact2-text-block p, .partners2-copy p:not(.about2-actions),
      .partners2-copy p:not(.about2-actions) a,
      
      .after-opening-pair__copy p, .city-story__copy p,
      .location-note__body p, .faq-intro, .faq-answer p,
      .context-evidence .context-coverage-table__group p,
      .context-evidence .context-coverage-table__group p a,
      .context-evidence .context-coverage-table__group strong,
      .context-evidence .context-evidence-note) {
    color: #5b635b !important;
  }
  html[data-qc-mobile-page] .contact-04:not(.about-context-card):not(.context-about-card) .contact-04__copy {
    color: #5b635b !important;
  }
  html[data-qc-mobile-page] :is(.editorial-page-kicker, .places-section-label,
      .about2-caption,
      .intro-opener__caption, .caption, .credit, .kicker, .eyebrow,
      .hero__credit-row, .hero__credit-row span, .hero__credit-row strong,
      .contact-04__links a,
      .elsewhere__kicker) {
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: .08em !important;
  }
  html[data-qc-mobile-page] :is(.caption, .hero__credit-row strong) {
    letter-spacing: .02em !important;
  }
  html[data-qc-mobile-page] .footer :is(a:hover, a:focus-visible) {
    color: #b0a898 !important;
  }
  html[data-qc-mobile-page="index"] .hero :is(.hero-footer-link, .hero-footer-copy) {
    font-size: 8.5px !important;
    color: rgba(245, 241, 232, .6) !important;
  }
  html[data-qc-mobile-page="index"] .hero .hero-footer-link:is(:hover, :focus-visible) {
    color: #f5f1e8 !important;
  }
  html[data-qc-mobile-page="faq"] #faq-title {
    font-family: "larken", "Newsreader", Georgia, serif !important;
    font-size: var(--qc-type-faq-title) !important;
    font-weight: 400 !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
    text-wrap: balance;
  }
  html[data-qc-mobile-page="faq"] .faq-question__text {
    font-family: "larken", "Newsreader", Georgia, serif !important;
    font-size: var(--qc-type-question) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-wrap: pretty;
  }
  html[data-qc-mobile-page="faq"] .faq-question {
    grid-template-columns: minmax(0, 1fr) 20px !important;
    gap: 20px !important;
    min-height: 60px !important;
  }
  html[data-qc-mobile-page="faq"] .faq-answer p {
    max-width: 65ch !important;
  }
}

/* Version 600: one mobile scale for narrow windows and primary touch devices.
   Tablets share the phone typography in either orientation. Desktop retains
   its existing scale. Short landscape viewports only change layout geometry.
   Load last on every active page; no root scaling or viewport manipulation. */
/* The same desktop editorial hierarchy also applies at narrow desktop widths;
   the old 981–1180px tablet heading reductions are no longer a third scale. */
@media screen and (min-width: 981px) {
  html[data-qc-mobile-page] body .editorial-page-statement,
  html[data-qc-mobile-page="faq"] body .faq-heading #faq-title {
    font-family: "larken", "Newsreader", Georgia, serif !important;
    font-size: clamp(54px, 5vw, 82px) !important;
    font-weight: 400 !important;
    line-height: .98 !important;
    letter-spacing: -.02em !important;
  }
  html[data-qc-mobile-page="faq"] body .faq-question__text {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  html[data-qc-mobile-page="faq"] body .faq-heading .faq-intro {
    font-size: 16.5px !important;
    line-height: 1.62 !important;
  }
}
@media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
  html[data-qc-mobile-page] {
    --qc-mobile-body: 17px;
    --qc-mobile-editorial: 18px;
    --qc-mobile-intro: 21px;
    --qc-mobile-title: 34px;
    --qc-mobile-hero-title: 38px;
    --qc-mobile-chapter: 23px;
    --qc-mobile-space-copy: 18px;
    --qc-mobile-space-section: 52px;
    --qc-mobile-logo: 30px;
    --qc-mobile-logo-compact: 28px;
  }

  /* The wordmark becomes quieter, not the hit area around the menu icon. */
  html[data-qc-mobile-page] body .masthead .masthead__brand img,
  html[data-qc-mobile-page] body.menu-open .masthead .masthead__brand img {
    width: auto !important;
    height: var(--qc-mobile-logo) !important;
    max-width: calc(100vw - 112px) !important;
    object-fit: contain !important;
  }
  html[data-qc-mobile-page] body .masthead.is-scrolled .masthead__brand img {
    height: var(--qc-mobile-logo-compact) !important;
  }
  html[data-qc-mobile-page].qc-place-page body > .masthead {
    height: 58px !important;
  }
  html[data-qc-mobile-page].qc-place-page body > .masthead.is-scrolled {
    height: 52px !important;
  }
  /* Editorial mastheads already have a compact 52px shell + safe-area inset. */
  html[data-qc-mobile-page] body.editorial-reference-page .masthead__brand img,
  html:is([data-qc-mobile-page="faq"], [data-qc-mobile-page="imprint"], [data-qc-mobile-page="places"]) body .masthead .masthead__brand img {
    height: var(--qc-mobile-logo-compact) !important;
  }
  html[data-qc-mobile-page="index"] body.quietcation-home .masthead,
  html[data-qc-mobile-page="index"] body.quietcation-home:not(.menu-open) .masthead.is-scrolled {
    height: 58px !important;
    min-height: 58px !important;
  }
  html[data-qc-mobile-page="index"] body.quietcation-home:not(.menu-open) .masthead:not(.is-scrolled) .masthead__brand img {
    height: 40px !important;
    max-width: calc(100vw - 112px) !important;
  }
  html[data-qc-mobile-page="index"] body.quietcation-home:not(.menu-open) .masthead.is-scrolled .masthead__brand img {
    height: 30px !important;
  }
  html[data-qc-mobile-page="index"] .quietcation-intro__logo {
    width: 62vw;
  }
  /* Also honor the existing completion timer when reduced-motion rules
     suppress the intro's closing animation. Never leave an opaque blocker. */
  html[data-qc-mobile-page="index"] body.quietcation-intro-complete .quietcation-intro {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html[data-qc-mobile-page] body :is(.menu-toggle, .site-menu-toggle) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html[data-qc-mobile-page] body :is(.menu-overlay, .site-menu-overlay) {
    padding-top: calc(84px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html[data-qc-mobile-page] body :is(.menu-overlay__meta, .site-menu-overlay__meta) {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  /* Place stories: same hierarchy, less headline/body-size competition. */
  html[data-qc-mobile-page] main.qc-place {
    --qc-copy-size: var(--qc-mobile-body);
    --qc-heading-size: var(--qc-mobile-chapter);
    --qc-space-copy: var(--qc-mobile-space-copy);
    --qc-space-section: var(--qc-mobile-space-section);
  }
  html[data-qc-mobile-page] main.qc-place .quiet-story {
    --article-space: var(--qc-mobile-space-section);
    --article-gap: 24px;
    --article-essay-size: var(--qc-mobile-intro);
  }
  html[data-qc-mobile-page] main.qc-place .hero h1 {
    font-size: var(--qc-mobile-hero-title) !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;
  }
  html[data-qc-mobile-page] main.qc-place .hero__lede {
    margin-top: 18px !important;
    font-size: var(--qc-mobile-body) !important;
    line-height: 1.5 !important;
  }
  html[data-qc-mobile-page] main.qc-place .hero__content {
    gap: 24px;
    padding-bottom: max(60px, 8svh);
  }
  html[data-qc-mobile-page] main.qc-place .kicker { margin-bottom: 14px; }
  html[data-qc-mobile-page] body main #presence .opening__full-copy p,
  html[data-qc-mobile-page] body main.qc-place .editorial-statement > p,
  html[data-qc-mobile-page] body main.qc-place .location-note__body > p:first-child {
    font-size: var(--qc-mobile-intro) !important;
    line-height: 1.5 !important;
  }
  html[data-qc-mobile-page] body main.qc-place :is(.after-opening-pair__copy, .city-story__copy) p {
    font-size: var(--qc-mobile-body) !important;
    line-height: 1.55 !important;
  }
  html[data-qc-mobile-page] body main.qc-place :is(.after-opening-pair__copy, .city-story__copy) h3,
  html[data-qc-mobile-page] body main.qc-place .location-note > h2 {
    font-size: var(--qc-mobile-chapter) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--qc-mobile-space-copy) !important;
  }
  html[data-qc-mobile-page] body main.qc-place :is(.opening__media-title, .stay-intro__facts) h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  html[data-qc-mobile-page] body main.qc-place :is(.after-opening-pair, .city-story) {
    row-gap: 24px !important;
  }
  html[data-qc-mobile-page] body main.qc-place .opening__media,
  html[data-qc-mobile-page] body main.qc-place .opening__media-sticky {
    gap: 26px !important;
  }
  html[data-qc-mobile-page] body main.qc-place .stay-intro__facts {
    margin-top: 30px;
  }
  html[data-qc-mobile-page] body main.qc-place .practical__grid dl {
    padding-block: 11px;
  }
  /* Tables (14px), tags/captions (10–11px), media crops and native swipe rails
     are deliberately not reduced along with the large editorial typography. */
  html[data-qc-mobile-page] body main.qc-place .location-note__grid { gap: 26px !important; }
  html[data-qc-mobile-page] body main.qc-place > .colophon {
    padding-block: 24px;
  }
  html[data-qc-mobile-page] body .elsewhere {
    padding-top: 44px;
    padding-bottom: 52px;
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__title {
    font-size: 30px !important;
    margin-bottom: 20px;
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__name {
    font-family: "larken", "Italiana", Georgia, serif !important;
    font-size: var(--qc-card-title-size-mobile) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-synthesis: none !important;
    font-variation-settings: "wght" 300 !important;
    line-height: 1.04 !important;
    margin-bottom: 12px;
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__copy { padding: 22px 20px; }

  /* Preserve the original portrait proportions of preview photographs.
     Keep the image-specific focal points and the native horizontal scrolling. */
  html[data-qc-mobile-page] body .elsewhere .elsewhere__media {
    padding-top: 125%;
  }
  html[data-qc-mobile-page="manna-arcadia"] body main.qc-place .quiet-story :is(#nature-gallery, #winter-gallery) img {
    aspect-ratio: 4 / 5;
  }

  /* Compact visible controls, without sacrificing their touch surfaces. */
  html[data-qc-mobile-page] .qc-actions-dock .qc-actions-trigger {
    min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  html[data-qc-mobile-page] .qc-actions-layer .qc-actions-heading h2 { font-size: 22px; }
  html[data-qc-mobile-page] .qc-actions-layer .qc-actions-heading { margin-bottom: 16px; }
  html[data-qc-mobile-page] .qc-actions-layer .qc-actions-link {
    min-height: 48px;
    padding-block: 12px;
  }
  html[data-qc-mobile-page] .qc-actions-layer .qc-actions-primary {
    min-height: 48px;
    padding-block: 12px;
  }
  html[data-qc-mobile-page] body .modal-overlay .modal-card,
  html[data-qc-mobile-page] body .launch-modal .launch-modal__card {
    padding: 28px 22px 24px !important;
  }
  html[data-qc-mobile-page] body .modal-overlay .modal-card .modal-title,
  html[data-qc-mobile-page] body .launch-modal .launch-modal__card .launch-modal__title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  html[data-qc-mobile-page] body .modal-overlay .modal-card .modal-text,
  html[data-qc-mobile-page] body .launch-modal .launch-modal__card .launch-modal__text {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }
  html[data-qc-mobile-page] body .modal-overlay .modal-card .modal-close,
  html[data-qc-mobile-page] body .launch-modal .launch-modal__card .launch-modal__close {
    width: 44px !important;
    height: 44px !important;
    top: 3px !important;
    right: 3px !important;
  }
  html[data-qc-mobile-page] body .modal-overlay .modal-card .modal-mail,
  html[data-qc-mobile-page] body .launch-modal .launch-modal__card .launch-modal__mail {
    min-height: 44px !important;
  }
  html[data-qc-mobile-page] body :is(input, select, textarea) { font-size: 16px; }

}
/* Home and directory calibration. Load after each page's existing styles. */
@media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
  html[data-qc-mobile-page="index"] body.quietcation-home .hero-sub {
    font-size: 17.5px !important;
    line-height: 1.5 !important;
  }
  html[data-qc-mobile-page="index"] body.quietcation-home .hero-sub br { display: none; }
  html[data-qc-mobile-page="index"] body.quietcation-home :is(.places2-see-more, .hero-footer-link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .masthead__subtitle {
    font-size: 15.5px !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home:not(.menu-open) .masthead:not(.is-scrolled) .masthead__brand {
    transform: translateY(24px) !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .hero-actions {
    margin-top: var(--qc-mobile-space-copy, 18px) !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .hero-actions .btn {
    box-sizing: border-box !important;
    flex: 0 1 185px !important;
    width: 185px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    min-width: 124px !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    font-size: 10px !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home #places #places-title,
  html[data-qc-mobile-page="places"] body.about2-page #main-content #places-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home #places #places-title + .about2-standfirst {
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
  }

  html[data-qc-mobile-page="places"] body.about2-page #main-content #places-title + .about2-standfirst {
    font-size: 16.5px !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home #places .about2-content {
    padding-top: 76px !important;
    padding-bottom: 70px !important;
  }

  html[data-qc-mobile-page="places"] body.about2-page #main-content > .about2-content {
    padding-top: 80px !important;
    padding-bottom: 58px !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home #places .about2-shell,
  html[data-qc-mobile-page="places"] body.about2-page #main-content > .about2-content .about2-shell {
    gap: 30px !important;
  }


  html[data-qc-mobile-page="index"] body.quietcation-home .contact-04,
  html[data-qc-mobile-page="places"] body.about2-page #main-content .contact-04 {
    min-height: 0 !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .contact-04__inner,
  html[data-qc-mobile-page="places"] body.about2-page #main-content .contact-04__inner {
    padding-block: 64px !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .contact-04 h2,
  html[data-qc-mobile-page="places"] body.about2-page #main-content .contact-04 h2 {
    font-size: 35px !important;
    line-height: 1.02 !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .contact-04__copy,
  html[data-qc-mobile-page="places"] body.about2-page #main-content .contact-04__copy {
    font-size: var(--qc-mobile-body, 17px) !important;
    line-height: 1.5 !important;
    margin-top: 23px !important;
    margin-bottom: 23px !important;
  }

  html[data-qc-mobile-page="index"] body.quietcation-home .contact-04__mail,
  html[data-qc-mobile-page="places"] body.about2-page #main-content .contact-04__mail,
  html[data-qc-mobile-page="index"] body.quietcation-home .contact-04__links a,
  html[data-qc-mobile-page="places"] body.about2-page #main-content .contact-04__links a {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
  }
}

/* Editorial pages: optical sizing at normal browser zoom. */
@media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-content {
    min-height: 0 !important;
    padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0 !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-shell {
    width: calc(100% - 40px) !important;
    gap: 28px !important;
    padding: 22px 0 var(--qc-mobile-space-section, 52px) !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about #about2-title.editorial-page-statement,
  html[data-qc-mobile-page="contact"] body.contact2-page #contact2-title.editorial-page-statement,
  html[data-qc-mobile-page="context"] body.contact2-page #contact2-title.editorial-page-statement,
  html[data-qc-mobile-page="partners"] body.partners2-page #listing-title.editorial-page-statement {
    font-size: var(--qc-mobile-title, 34px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    max-width: 16ch !important;
  }

  /* Preserve the existing 16.5px standfirst and readable caption/kicker sizes. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-story > .about2-copy,
  html[data-qc-mobile-page="contact"] body.contact2-page .about2-story > .contact2-copy,
  html[data-qc-mobile-page="context"] body.contact2-page .about2-story > .contact2-copy,
  html[data-qc-mobile-page="partners"] body.partners2-page .about2-story .partners2-copy {
    margin-top: 0 !important;
    padding-top: 32px !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page.about2-page--about .about2-copy > p:not(.about2-actions):not(.about2-copy__closing),
  html[data-qc-mobile-page="contact"] body.contact2-page .contact2-copy .contact2-text-block p,
  html[data-qc-mobile-page="context"] body.contact2-page .contact2-copy > p.about2-copy__lead {
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    text-align-last: left !important;
    text-justify: auto !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-copy > p + p,
  html[data-qc-mobile-page="contact"] body.contact2-page .contact2-copy .contact2-text-block p + p {
    margin-top: var(--qc-mobile-space-copy, 18px) !important;
  }

  /* About's two closing panels keep their full-width composition. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-shell {
    padding-bottom: 0 !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-closing-block {
    min-height: 0 !important;
    margin-top: var(--qc-mobile-space-section, 52px) !important;
    padding: 64px 24px !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-closing-block > .about2-copy__closing {
    font-size: var(--qc-mobile-title, 34px) !important;
    line-height: 1.08 !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page.about2-page--about .about2-copy .about2-closing-block > p.about2-closing-copy {
    width: 100% !important;
    max-width: 34ch !important;
    margin-top: 24px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.55 !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-closing-block > .about2-actions {
    margin-top: 20px !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-closing-block .about2-actions .browse-places-link {
    min-height: 44px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
  }

  /* Contact's enquiry row follows the text without an equal-height blank row. */
  html[data-qc-mobile-page="contact"] body.contact2-page .about2-shell {
    padding-bottom: 0 !important;
  }

  html[data-qc-mobile-page="contact"] body.contact2-page .contact2-copy {
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
    gap: 36px !important;
    padding-bottom: 48px !important;
  }

  html[data-qc-mobile-page="contact"] body.contact2-page .contact2-copy p > a.contact2-enquiries-mail {
    min-height: 44px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.4 !important;
  }

  /* Coverage rows retain their separate small-source hierarchy. */
  html[data-qc-mobile-page="context"] body.contact2-page .context-coverage-table {
    margin-top: 40px !important;
  }

  html[data-qc-mobile-page="context"] body.contact2-page .context-coverage-table h2 {
    margin-bottom: 24px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  html[data-qc-mobile-page="context"] body.contact2-page .contact2-copy .context-coverage-row {
    min-height: 44px !important;
    padding: 15px 8px !important;
    gap: 6px !important;
  }

  html[data-qc-mobile-page="context"] body.contact2-page .context-coverage-row__title {
    font-size: var(--qc-mobile-body, 17px) !important;
    line-height: 1.45 !important;
  }

  /* Editorial mobile heroes: give About, Context and Contact the same
     visual authority as a Places opening image without turning them into
     listing cards. The title remains above the image; the image becomes the
     immersive first scene of the page. */
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-figure {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-figure img {
    height: clamp(440px, 68svh, 680px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    transform: scale(1.06) !important;
    transform-origin: center center !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-caption {
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 16px !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    text-align: center !important;
    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;
    opacity: .68 !important;
    text-shadow: 0 1px 8px rgba(7, 20, 14, .22) !important;
  }

  /* The About image ends in bright snow; use the dark Quietcation green there. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-caption {
    color: #15231c !important;
    text-shadow: 0 1px 7px rgba(245, 241, 232, .42) !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-title {
    opacity: 1 !important;
    color: #f5f1e8 !important;
    text-shadow: 0 2px 14px rgba(24, 18, 12, .38), 0 0 3px rgba(24, 18, 12, .16) !important;
  }

  /* About has a bright, snowy upper image area; add only enough fade for the
     light title to remain legible without making the image feel tinted. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-figure::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(35, 23, 14, .28) 0%,
      rgba(35, 23, 14, .16) 20%,
      rgba(35, 23, 14, .06) 38%,
      rgba(35, 23, 14, .015) 50%,
      transparent 62%
    ) !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about .about2-mobile-fade {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(35, 23, 14, .28) 0%,
      rgba(35, 23, 14, .16) 20%,
      rgba(35, 23, 14, .06) 38%,
      rgba(35, 23, 14, .015) 50%,
      transparent 62%
    ) !important;
  }

  html[data-qc-mobile-page="context"] body.contact2-page .about2-figure img {
    object-position: 56% center !important;
  }

  /* The other three images are dark in the lower area; keep their credits light. */
  html:is([data-qc-mobile-page="context"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="partners"]) body.editorial-reference-page :is(.about2-caption, .intro-opener__caption) {
    color: #f5f1e8 !important;
  }

  /* Editorial mobile opening: the title shares the first image as one quiet,
     immersive scene; the caption and copy remain below the image. */
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-shell {
    position: relative !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-aside {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: start !important;
    position: relative !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(42px, 12vw, 88px) 24px 0 !important;
    color: #f5f1e8 !important;
    text-align: center !important;
    pointer-events: none !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-aside__inner {
    width: min(100%, 25rem) !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-aside .editorial-page-kicker {
    color: rgba(245, 241, 232, .82) !important;
    margin-bottom: 12px !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-title {
    color: #f5f1e8 !important;
    font-size: clamp(34px, 9.5vw, 40px) !important;
    line-height: 1.02 !important;
    text-shadow: 0 2px 16px rgba(24, 18, 12, .22) !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-story {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 1 !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-story > .about2-copy,
  html[data-qc-mobile-page="partners"] body.partners2-page .about2-story > .partners2-copy {
    margin-top: 28px !important;
  }

  /* Final optical size: page-specific ID rules above the legacy layer must
     not reduce these four opening titles again. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-aside #about2-title.editorial-page-statement,
  html[data-qc-mobile-page="contact"] body.contact2-page .about2-aside #contact2-title.editorial-page-statement,
  html[data-qc-mobile-page="context"] body.contact2-page .about2-aside #contact2-title.editorial-page-statement,
  html[data-qc-mobile-page="partners"] body.partners2-page .about2-aside #listing-title.editorial-page-statement {
    font-size: clamp(34px, 9.5vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  /* Partners already has a smaller 17px reading size; preserve it. */
  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .partners2-copy :is(.mobile-heading-break, .partners2-section-title:empty),
  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .partners2-copy > p:empty {
    display: none !important;
  }
  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .intro-opener__figure.about2-figure {
    left: 0 !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .partners2-copy p:not(.about2-actions),
  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .partners2-copy > p:not(.about2-actions) a {
    font-size: 17px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    text-align-last: left !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }

  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .partners2-copy .about2-actions {
    margin-top: 28px !important;
  }

  html[data-qc-mobile-page="partners"] body.partners2-page main #intro .partners2-copy .about2-actions .browse-places-link {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  html[data-qc-mobile-page="partners"] body.partners2-page .about2-content > div[aria-hidden="true"] {
    height: 0 !important;
  }

  /* Both FAQ content and its accordions use a denser reading rhythm. */
  html[data-qc-mobile-page="faq"] body .faq-editorial {
    width: calc(100% - 40px) !important;
    gap: 28px !important;
    padding: 38px 0 var(--qc-mobile-space-section, 52px) !important;
  }

  html[data-qc-mobile-page="faq"] body .faq-heading #faq-title {
    font-size: var(--qc-mobile-title, 34px) !important;
    line-height: 1.06 !important;
  }

  html[data-qc-mobile-page="faq"] body .faq-heading .faq-intro {
    margin-top: 20px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.55 !important;
  }

  html[data-qc-mobile-page="faq"] body .faq-question {
    min-height: 56px !important;
    padding: 18px 0 !important;
    grid-template-columns: minmax(0, 1fr) 20px !important;
    gap: 14px !important;
  }

  html[data-qc-mobile-page="faq"] body .faq-question__text {
    font-size: 21px !important;
    line-height: 1.2 !important;
  }

  html[data-qc-mobile-page="faq"] body .faq-answer p {
    padding: 0 0 24px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.55 !important;
  }

  /* Natural panel height replaces oversized viewport-based mobile minimums. */
  html[data-qc-mobile-page="about"] body .contact-04.about-context-card,
  html[data-qc-mobile-page="context"] body .contact-04.context-about-card,
  html[data-qc-mobile-page="faq"] body .contact-04.contact-card,
  html[data-qc-mobile-page="faq"] body .contact-04.about-context-card {
    min-height: 0 !important;
  }

  html[data-qc-mobile-page="about"] body .contact-04.about-context-card .contact-04__inner,
  html[data-qc-mobile-page="context"] body .contact-04.context-about-card .contact-04__inner,
  html[data-qc-mobile-page="faq"] body .contact-04 .contact-04__inner {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 64px 24px !important;
  }

  html[data-qc-mobile-page="about"] body .contact-04.about-context-card h2,
  html[data-qc-mobile-page="context"] body .contact-04.context-about-card h2,
  html[data-qc-mobile-page="faq"] body .contact-04 h2 {
    font-size: var(--qc-mobile-title, 34px) !important;
    line-height: 1.08 !important;
  }

  html[data-qc-mobile-page="about"] body .contact-04.about-context-card .contact-04__copy,
  html[data-qc-mobile-page="context"] body .contact-04.context-about-card .contact-04__copy,
  html[data-qc-mobile-page="faq"] body .contact-04 .contact-04__copy {
    width: 100% !important;
    max-width: 34ch !important;
    margin: 24px auto 20px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
    line-height: 1.55 !important;
  }

  html[data-qc-mobile-page="about"] body .contact-04.about-context-card .contact-04__mail,
  html[data-qc-mobile-page="context"] body .contact-04.context-about-card .contact-04__mail,
  html[data-qc-mobile-page="faq"] body .contact-04 .contact-04__mail {
    min-height: 44px !important;
    font-size: var(--qc-mobile-editorial, 18px) !important;
  }

  /* Keep the legal notice in its original scrollable panel. */
  html[data-qc-mobile-page="imprint"] body.imprint-page .content-layer {
    padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
  }

  html[data-qc-mobile-page="imprint"] body.imprint-page .listing-breadcrumb__list {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .06em !important;
  }

  html[data-qc-mobile-page="imprint"] body.imprint-page .listing-breadcrumb__item a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  html[data-qc-mobile-page="imprint"] body.imprint-page #imprint.section {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }

  /* Use the desktop type scale and tracking, not the old smaller mobile
     variant. The page's existing responsive square panel handles scrolling. */
  html[data-qc-mobile-page="imprint"] body.imprint-page #imprint .legal-scrollbox .lead-copy__dek,
  html[data-qc-mobile-page="imprint"] body.imprint-page #imprint .legal-scrollbox .lead-copy p,
  html[data-qc-mobile-page="imprint"] body.imprint-page #imprint .legal-scrollbox .lead-copy li,
  html[data-qc-mobile-page="imprint"] body.imprint-page #imprint .legal-scrollbox .lead-copy a,
  html[data-qc-mobile-page="imprint"] body.imprint-page #imprint #listing-title {
    font-size: .58rem !important;
    letter-spacing: .14em !important;
  }
}

/* Shared mobile geometry. Legacy tablet typography is overridden above;
   this layer also prevents desktop columns/sticky offsets on touch devices. */
@media screen and (max-width: 980px), screen and (hover: none) and (pointer: coarse) {
  html[data-qc-mobile-page] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --qc-mobile-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  html[data-qc-mobile-page] body { --page: calc(100% - 2 * var(--qc-mobile-gutter)); }
  html[data-qc-mobile-page] body > .masthead {
    height: 58px !important;
    min-height: 0 !important;
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)) !important;
  }
  html[data-qc-mobile-page] body :is(.menu-overlay, .site-menu-overlay) {
    box-sizing: border-box;
    height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  html[data-qc-mobile-page] body :is(.menu-overlay__nav, .site-menu-overlay__nav) { flex-shrink: 0; }
  html[data-qc-mobile-page] body :is(.modal-card, .launch-modal__card) {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  html[data-qc-mobile-page] body.editorial-reference-page .about2-shell,
  html[data-qc-mobile-page] body .faq-editorial {
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 2 * var(--qc-mobile-gutter)) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }

  /* The opening image starts directly below the fixed mobile masthead. */
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-content {
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
  }

  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body.editorial-reference-page .about2-shell {
    padding-top: 0 !important;
  }
  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside__inner,
  html[data-qc-mobile-page] body .faq-heading {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
  html[data-qc-mobile-page] body.editorial-reference-page :is(.about2-aside, .about2-story),
  html[data-qc-mobile-page] body :is(.faq-heading, .faq-story, .faq-list, .faq-item, .faq-answer, .faq-answer__inner) {
    min-width: 0;
    max-width: 100%;
  }
  html[data-qc-mobile-page] body .faq-editorial { padding-top: 88px !important; }
  html[data-qc-mobile-page] body .faq-heading { text-align: center; }
  html[data-qc-mobile-page] body .faq-heading :is(h1, .faq-intro) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html[data-qc-mobile-page] body .faq-story { width: 100% !important; }
  html[data-qc-mobile-page] body .faq-question__text { min-width: 0; overflow-wrap: anywhere; }
  html[data-qc-mobile-page] body .faq-answer__inner { min-height: 0; }
  html[data-qc-mobile-page] body .faq-answer p { overflow-wrap: anywhere; }
  html[data-qc-mobile-page] body .faq-answer a { font-size: inherit !important; }
  html[data-qc-mobile-page] body.editorial-reference-page .about2-standfirst { font-size: 16.5px !important; }
  html[data-qc-mobile-page] body :is(.editorial-page-kicker, .eyebrow, .contact-04__kicker) { font-size: 10.5px !important; }
  html[data-qc-mobile-page] body.editorial-reference-page :is(.about2-caption, .intro-opener__caption) { font-size: 10.5px !important; }
  html[data-qc-mobile-page] body .modal-overlay .modal-card .modal-kicker,
  html[data-qc-mobile-page] body .launch-modal .launch-modal__card .launch-modal__kicker { font-size: 11px !important; }
  html[data-qc-mobile-page] body .contact-04 .contact-04__mail,
  html[data-qc-mobile-page] body .contact-04 .contact-04__mail span { font-size: 18px !important; }
  html[data-qc-mobile-page] body main.qc-place .credit { font-size: 9px !important; }
  html[data-qc-mobile-page] body main.qc-place .colophon p { font-size: 12px !important; }
  html[data-qc-mobile-page="index"] body .quietcation-intro__volume-copy { font-size: 8.294px !important; }

  html[data-qc-mobile-page="index"] body.quietcation-home {
    --home-header-height: 58px;
    --home-header-compact: 58px;
    --home-logo-height: 40px;
    --home-logo-compact: 30px;
    --home-logo-offset: 24px;
    --home-logo-max: calc(100vw - 112px);
    --home-hero-copy-size: 17.5px;
    --home-hero-subtitle-size: 14px;
    --home-hero-button-size: 10px;
    --home-hero-button-width: 185px;
    --home-hero-button-height: 44px;
    --home-hero-button-padding: 10px 13px;
    --home-hero-footer-size: 10px;
  }
  html[data-qc-mobile-page="index"] #home-masthead .masthead-sound-toggle { display: none !important; }
  html[data-qc-mobile-page="index"] body.quietcation-home .hero .hero-content { max-width: 568px !important; }
  html[data-qc-mobile-page="index"] body.quietcation-home .hero .hero-sub br { display: none; }
  html:is([data-qc-mobile-page="index"], [data-qc-mobile-page="places"]) body :is(#places, #main-content) .about2-shell {
    display: block !important;
    padding-inline: max(24px, var(--qc-mobile-gutter)) !important;
  }
  html:is([data-qc-mobile-page="index"], [data-qc-mobile-page="places"]) body :is(#places, #main-content) .about2-aside {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 30px !important;
  }
  html:is([data-qc-mobile-page="index"], [data-qc-mobile-page="places"]) body :is(#places, #main-content) .about2-aside__inner {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
  html:is([data-qc-mobile-page="index"], [data-qc-mobile-page="places"]) body :is(#places, #main-content) .about2-story { width: 100% !important; }

  html[data-qc-mobile-page] body main.qc-place .hero__content {
    width: calc(100% - 2 * var(--qc-mobile-gutter)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding-top: 100px;
  }
  html[data-qc-mobile-page] body main.qc-place .hero__credits { display: none !important; }
  html[data-qc-mobile-page] body main.qc-place .hero h1 { max-width: 18ch !important; }
  html[data-qc-mobile-page] body main.qc-place .hero__lede { max-width: 38ch !important; }
  html[data-qc-mobile-page] body main.qc-place .kicker { font-size: 10.5px !important; }
  html[data-qc-mobile-page] body main.qc-place :is(.opening, .after-opening-pair, .city-story, .grace-pair, .location-note) {
    width: calc(100% - 2 * var(--qc-mobile-gutter)) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-qc-mobile-page] body main.qc-place :is(.opening__media, .location-note__grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-qc-mobile-page] body main.qc-place .qc-sticky-managed,
  html[data-qc-mobile-page] body main.qc-place .qc-sticky-managed.qc-can-stick {
    position: relative !important;
    top: auto !important;
  }
  html[data-qc-mobile-page] body main.qc-place .location-note__map {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__card { grid-template-columns: minmax(0, 1fr); }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__media {
    box-sizing: content-box;
    width: 100%;
    height: 0;
    min-height: 0;
    padding-top: 75%;
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__description { font-size: 16.5px !important; }
}

/* Landscape is a layout adaptation within mobile, never a third type scale. */
@media screen and (max-width: 980px) and (max-height: 600px) and (orientation: landscape),
       screen and (hover: none) and (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  html[data-qc-mobile-page="index"] body.quietcation-home {
    --home-header-height: 48px;
    --home-header-compact: 48px;
    --home-logo-height: 34px;
    --home-logo-offset: 8px;
  }
  html[data-qc-mobile-page="index"] body #home-masthead { height: 48px !important; }
  html[data-qc-mobile-page] body :is(.menu-overlay, .site-menu-overlay) {
    padding-top: 64px !important;
    padding-bottom: 20px !important;
    justify-content: flex-start !important;
  }
  html[data-qc-mobile-page] body main.qc-place .hero {
    min-height: max(100svh, 340px);
  }
  html[data-qc-mobile-page] body main.qc-place .hero__content {
    padding-top: 90px !important;
    padding-bottom: 44px !important;
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__card {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
  html[data-qc-mobile-page] body .elsewhere .elsewhere__media {
    height: auto;
    min-height: 224px;
    padding-top: 0;
  }
}
/* Mobile horizontal rails are full-bleed. The viewport reaches both screen
   edges, while the first item keeps the same quiet inset as the page content. */
@media (max-width: 980px) {
  html[data-qc-mobile-page] body :is(.city-story__images, .triptych) {
    --qc-rail-edge: calc((100vw - var(--page)) / 2);
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: var(--qc-rail-edge) !important;
    padding-right: var(--qc-rail-edge) !important;
    box-sizing: border-box !important;
  }
}

/* Place-page image rails: the viewport itself reaches both screen edges,
   while the first image keeps the normal page gutter at rest. */
@media (max-width: 980px) and (orientation: portrait) {
  html[data-qc-mobile-page] body main.qc-place .quiet-story :is(.city-story__images, .triptych) {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: var(--qc-rail-edge) !important;
    padding-right: var(--qc-rail-edge) !important;
    box-sizing: border-box !important;
  }
}