/* Authoritative two-state layout for About, Context, Partners and Contact.
   Mobile ends at 1180px; desktop starts at 1181px. */
@media (max-width: 1180px) {
  html[data-qc-mobile-page] body.editorial-reference-page > .masthead {
    box-sizing: border-box !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    padding: env(safe-area-inset-top, 0px) 20px 0 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .masthead .masthead__brand {
    position: fixed !important;
    top: calc(26px + env(safe-area-inset-top, 0px)) !important;
    left: 50vw !important;
    transform: translate(-50%, -50%) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .masthead .masthead__brand img {
    width: auto !important;
    height: 30px !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .masthead.qc-mobile-hero-past .masthead__brand img {
    height: 28px !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page:is(.menu-open, .site-menu-open, .menu-closing) > .masthead .masthead__brand img {
    height: 30px !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page > .masthead .masthead__menu {
    position: absolute !important;
    top: calc(50% + env(safe-area-inset-top, 0px) / 2) !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-shell {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside .editorial-page-statement {
    max-width: 16ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: #f5f1e8 !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside .editorial-page-kicker {
    margin-bottom: 12px !important;
    color: rgba(245, 241, 232, .78) !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-aside .about2-standfirst {
    color: rgba(245, 241, 232, .88) !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page :is(.about2-copy, .contact2-copy, .partners2-copy) {
    box-sizing: border-box !important;
    width: min(100%, 46rem) !important;
    max-width: 46rem !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page :is(.about2-copy, .contact2-copy, .partners2-copy) p:not(.about2-actions):not(.about2-copy__closing):not(.about2-closing-copy):not(.about2-closing-kicker):not(.contact-note-form__error):not(.contact-note-form__status):not(.contact-note-form__hint) {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  html[data-qc-mobile-page] body.editorial-reference-page .about2-caption,
  html[data-qc-mobile-page="partners"] body.partners2-page .intro-opener__caption {
    box-sizing: border-box !important;
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
    margin: 0 !important;
    color: rgba(245, 241, 232, .76) !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* The About credit sits over the bright snow at the foot of its image. */
  html[data-qc-mobile-page="about"] body.about2-page--about .about2-caption {
    color: rgba(21, 35, 28, .72) !important;
  }

  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;
  }
}

@media (min-width: 1181px) {
  html body.editorial-reference-page > .masthead.masthead--inner .masthead__brand img,
  html body.editorial-reference-page:is(.menu-open, .site-menu-open, .menu-closing) > .masthead.masthead--inner .masthead__brand img {
    width: auto !important;
    height: 27px !important;
  }

  body.editorial-reference-page {
    --qc-editorial-shell-edge: max(4vw, calc((100vw - 1260px) / 2));
  }

  /* The fixed masthead is 54px high: begin the opening directly below it. */
  body.editorial-reference-page .about2-content {
    padding-top: 54px !important;
  }

  body.editorial-reference-page .about2-shell {
    padding-top: 0 !important;
  }

  /* Place the page statement near the top of the opening instead of
     vertically centring it beside the photograph. */
  body.editorial-reference-page .about2-aside {
    box-sizing: border-box;
    padding-top: clamp(40px, 3vw, 48px) !important;
  }

  body.editorial-reference-page .about2-aside__inner {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  /* Keep the editorial grid on the left, but let the opening image meet the
     right viewport edge. Partners uses the second selector for the same image. */
  body.editorial-reference-page .about2-story > .about2-figure,
  body.editorial-reference-page .partners2-media > .intro-opener__figure {
    width: calc(100% + var(--qc-editorial-shell-edge)) !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.editorial-reference-page .about2-story > .about2-figure > img,
  body.editorial-reference-page .partners2-media > .intro-opener__figure > img {
    display: block;
    width: 100% !important;
    max-width: none !important;
  }

  /* The photograph may touch the edge; its caption should not. */
  body.editorial-reference-page .about2-story > .about2-figure > .about2-caption,
  body.editorial-reference-page .partners2-media > .intro-opener__figure > .about2-caption {
    box-sizing: border-box;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
  }
}