/* Mobile refinements retain each page's existing desktop typography. */
@media (max-width: 760px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .mobile-display-heading,
  .mobile-section-label {
    box-sizing: border-box;
    width: 100%;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep the short labels and rules above page titles centred too. */
  div:has(> h1) > div {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  h1,
  h2,
  h3,
  h4,
  .mobile-display-heading {
    min-width: 0;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: manual;
  }

  /* Important declarations override the pages' inline desktop type styles. */
  h1 {
    font-size: clamp(34px, 8.5vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
  }

  h2,
  .mobile-display-heading {
    font-size: clamp(26px, 6.5vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  h3 {
    font-size: clamp(23px, 5.75vw, 28px) !important;
    line-height: 1.2 !important;
  }

  h4 {
    line-height: 1.25 !important;
  }

  .mobile-section-label {
    font-size: clamp(18px, 4.5vw, 22px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em !important;
  }

  /* Let title columns shrink within the padded mobile content area. */
  div:has(> h1) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}