@layer components {
  /* ===================================================
     Canonical .section-heading typography
     Batch 2B.1: extracted from layout/page-structure.css so
     reusable heading typography is owned by the components
     layer rather than layout. Values are unchanged from the
     previous layout-layer declarations — only ownership moved.
     Context-specific rules (margin, colour, masthead sizing,
     alignment) remain local to their own components/pages and
     override this via normal selector specificity.
     =================================================== */

  :where(.section-heading) {
    font-family: var(--page-title);
    font-size: var(--type-section-heading-size, clamp(1.8rem, 3vw, 2.7rem));
    line-height: var(--type-heading-line, 1.08);
    letter-spacing: 0;
    text-transform: none;
  }

  @media (max-width: 768px) {
    :where(.section-heading) {
      font-size: clamp(1.55rem, 7vw, 2rem);
      line-height: 1.1;
    }
  }

  @media (max-width: 420px) {
    :where(.section-heading) {
      font-size: clamp(1.4rem, 8vw, 1.85rem);
      line-height: 1.12;
    }
  }
}