/* Mobile-only editorial opening shared by About, Contact, Context and Partners. */
.qc-mobile-hero-backdrop {
  display: none;
}

.qc-mobile-hero-cue {
  display: none;
}

@media screen and (max-width:1180px) {
  /* A transformed or filtered main becomes a containing block for fixed
     descendants in WebKit. Keep this mobile opening on the root plane. */
  html[data-qc-mobile-page] body.editorial-reference-page:not(.is-page-leaving) > main {
    animation: none !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    background: transparent !important;
    background-image: none !important;
    transform: none !important;
    filter: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-content {
    padding-top: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-shell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 40px) !important;
    gap: 0 !important;
    padding-top: 0 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside {
    position: absolute !important;
    inset: 0 0 auto !important;
    z-index: 6 !important;
    height: 100svh !important;
    width: 100% !important;
    padding: calc(env(safe-area-inset-top, 0px) + 52px + clamp(75px, 13svh, 125px)) 20px 0 !important;
    pointer-events: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside__inner {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside .editorial-page-kicker {
    opacity: var(--qc-hero-kicker-opacity, 1) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside .editorial-page-statement,
  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside .about2-standfirst {
    opacity: var(--qc-hero-title-opacity, 1) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-story {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-figure,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .intro-opener__figure.about2-figure {
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    height: 100svh !important;
    min-height: 0 !important;
    margin: 0 -20px !important;
    overflow: visible !important;
    cursor: pointer !important;
    touch-action: pan-y !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-figure img,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .intro-opener__figure.about2-figure img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    transform: none !important;
    will-change: auto !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page.qc-mobile-hero-ready .about2-story > .about2-figure > img,
  html[data-qc-mobile-page="partners"] body.partners2-page.qc-mobile-hero-ready #intro .intro-opener__figure.about2-figure > img {
    visibility: hidden !important;
  }

  /* Also neutralise a previously cached script's old movement class. */
  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-figure.qc-mobile-fixed-hero > img,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .intro-opener__figure.about2-figure.qc-mobile-fixed-hero > img {
    transform: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-figure.qc-image-past > img,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .intro-opener__figure.about2-figure.qc-image-past > img {
    visibility: hidden !important;
  }

  /* Opaque copy and following sections pass naturally over the fixed photo. */
  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-copy,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .lead-grid {
    position: relative !important;
    z-index: 7 !important;
    isolation: isolate !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-copy::before,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .lead-grid::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background: #ddd5c9 !important;
    z-index: -1 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page main > :not(.about2-content) {
    position: relative !important;
    z-index: 7 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-story > .about2-figure::after,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .intro-opener__figure.about2-figure::after {
    content: none !important;
    display: none !important;
  }

  /* Retire the older in-figure vignettes. They move with the document in
     iOS Safari and are replaced by the fixed root-level overlay below. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-figure::before,
  html[data-qc-mobile-page="partners"] body.partners2-page #intro .intro-opener__figure.about2-figure::before,
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-mobile-fade {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 4 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100lvh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: visible !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue {
    position: fixed !important;
    z-index: 8 !important;
    left: 50% !important;
    top: 58svh !important;
    bottom: auto !important;
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, .82) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    opacity: 0;
    animation: qcMobileHeroCueReveal 900ms 650ms ease-out both;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue > svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    animation: qcMobileHeroChevronDrift 2400ms 1550ms cubic-bezier(.45, 0, .25, 1) infinite;
  }

  /* The About hero ends in bright snow; match its dark image credit. */
  html[data-qc-mobile-page="about"] body.about2-page--about > .qc-mobile-hero-cue {
    color: rgba(21, 35, 28, .68) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue:focus-visible {
    outline: 1px solid rgba(245, 241, 232, .72) !important;
    outline-offset: -5px !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue:is(:active, :focus:not(:focus-visible)) {
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Touch taps must not briefly paint the rectangular keyboard-focus ring.
     The focus-visible treatment above remains available to keyboard users. */
  @media (hover: none) and (pointer: coarse) {
    html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue:focus-visible {
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue.is-hidden,
  html[data-qc-mobile-page] body.editorial-reference-page:is(.menu-open, .site-menu-open, .menu-closing) > .qc-mobile-hero-cue {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    animation: none !important;
    transition: opacity 320ms ease, visibility 0s linear 320ms !important;
  }

  @keyframes qcMobileHeroCueReveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes qcMobileHeroChevronDrift {
    0%, 100% { transform: translateY(-2px); }
    48% { transform: translateY(5px); }
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-backdrop > .qc-mobile-hero-backdrop__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transform: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-backdrop > .qc-mobile-hero-backdrop__vignette {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background: linear-gradient(to bottom, rgba(8, 22, 18, .32), transparent 46%) !important;
  }

  html[data-qc-mobile-page="about"] body.about2-page--about > .qc-mobile-hero-backdrop > .qc-mobile-hero-backdrop__vignette {
    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="partners"] body.partners2-page > .qc-mobile-hero-backdrop > .qc-mobile-hero-backdrop__vignette {
    background: linear-gradient(
      to bottom,
      rgba(12, 27, 23, .42) 0%,
      rgba(12, 27, 23, .25) 25%,
      rgba(12, 27, 23, .07) 45%,
      transparent 62%
    ) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-backdrop.is-hidden {
    visibility: hidden !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-caption,
  html[data-qc-mobile-page="partners"] body.partners2-page .intro-opener__caption {
    position: absolute !important;
    z-index: 6 !important;
    opacity: var(--qc-hero-credit-opacity, .68) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead:not(.qc-mobile-hero-past) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #f5f1e8 !important;
  }

  /* The sitewide solid-header rule is intentionally very specific. Override
     its shadow only while this mobile masthead is still over the photograph. */
  html[data-qc-mobile-page]:not(.qc-place-page):not(.menu-surface-open) body.editorial-reference-page:not(.quietcation-home):not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.masthead--inner:not(.qc-mobile-hero-past)[class] {
    box-shadow: none !important;
    -webkit-filter: none !important;
    filter: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead:not(.qc-mobile-hero-past) .masthead__brand img {
    content: url("https://www.quietcation.com/Quietcation-Logo-Off-White.png") !important;
    filter: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead:not(.qc-mobile-hero-past) .menu-toggle {
    color: #f5f1e8 !important;
    background: transparent !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead:not(.qc-mobile-hero-past) .menu-toggle span {
    background-color: #f5f1e8 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.qc-mobile-hero-past {
    background: #d8cdc0 !important;
    color: #15231c !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:not(.menu-open):not(.site-menu-open):not(.menu-closing) > .masthead.qc-mobile-hero-past .masthead__brand img {
    content: url("https://www.quietcation.com/Quietcation-Green.png") !important;
  }

  html[data-qc-mobile-page="partners"] body.partners2-page #intro .partners2-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

}

@media screen and (max-width:1180px) and (prefers-reduced-motion: reduce) {
  html[data-qc-mobile-page] body.editorial-reference-page {
    --qc-hero-kicker-opacity: 1 !important;
    --qc-hero-title-opacity: 1 !important;
    --qc-hero-credit-opacity: 1 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue {
    opacity: 1;
    animation: none !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .qc-mobile-hero-cue > svg {
    animation: none !important;
  }
}