@layer components {
  /* ===================================================
     Canonical unified masthead typography
     Batch 2B.4: extracted from layout/site-header.css's
     .site-header.minimal:not(.with-hero-media) family so
     reusable hero/breadcrumb-title typography is owned by the
     components layer rather than layout. Values are unchanged
     from their previous layout-layer declarations — only
     ownership moved. Colour, opacity, margin and structural
     positioning remain in site-header.css or site-masthead.css, since they are not
     part of the shared typography role.

     shop.css's body.shop-product-scoped overrides for these same
     selectors are unconditionally more specific (they add a
     "body.shop-product" qualifier that this file's selectors do
     not have), so they continue to win by ordinary CSS specificity
     once both rules sit in the same layer — no source-order
     dependency was needed for this family, unlike the .btn family
     in Batch 2B.2.

     .hero-title/.hero-subtitle are additionally excluded from the
     unified masthead eyebrow / breadcrumb roles
     contexts (episode/part reading pages, unrelated to this batch's
     shop scope) via :not(:has(...)), since site-masthead.css's own
     :has() variants for those contexts remain in @layer components and
     are untouched — this exclusion keeps them the sole, layer-
     order-independent authority for their own narrower context,
     exactly as they already were before this file existed.
     =================================================== */

  .site-header.minimal:not(.with-hero-media) .pillar-title {
    font-family: var(--font-display);
    font-size: var(--type-pillar-title-size, clamp(0.78rem, 1.25vw, 0.95rem));
    font-weight: var(--type-weight-bold, 700);
    line-height: 1.25;
    letter-spacing: var(--type-pillar-title-tracking, 0.18em);
    text-transform: uppercase;
  }

  .site-header.minimal:not(.with-hero-media) .series-title {
    font-family: var(--font-display);
    font-size: var(--type-series-title-size, clamp(1rem, 1.8vw, 1.35rem));
    font-weight: var(--type-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: var(--type-series-title-tracking, 0.12em);
    text-transform: uppercase;
  }

  .site-header.minimal:not(.with-hero-media):not(:has(.site-masthead__eyebrow)):not(:has(.site-masthead__breadcrumbs)) .hero-title {
    font-family: var(--page-title);
    font-size: var(--type-hero-title-size, clamp(1.55rem, 3.8vw, 2.9rem));
    font-weight: var(--type-weight-bold, 700);
    line-height: var(--type-hero-title-line, 1.06);
    letter-spacing: var(--type-hero-title-tracking, 0.025em);
    text-shadow: var(--header-title-shadow);
  }

  .site-header.minimal:not(.with-hero-media):not(:has(.site-masthead__breadcrumbs)) .hero-subtitle {
    width: min(100%, 52ch);
    font-family: var(--font-serif, "Libre Baskerville", serif);
    font-size: var(--type-hero-copy-size, clamp(0.98rem, 1.6vw, 1.18rem));
    font-style: italic;
    font-weight: var(--type-weight-regular, 400);
    line-height: var(--type-hero-copy-line, 1.55);
    letter-spacing: var(--type-hero-copy-tracking, 0.01em);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  @media (max-width: 768px) {
    .site-header.minimal:not(.with-hero-media)
    .pillar-title {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
    }

    .site-header.minimal:not(.with-hero-media)
    .series-title {
      font-size: clamp(0.9rem, 3.8vw, 1.08rem);
      letter-spacing: 0.09em;
    }

    .site-header.minimal:not(.with-hero-media)
    .hero-title {
      font-size: var(--type-hero-title-size-compact-mobile, clamp(1.35rem, 7vw, 2rem));
      line-height: var(--type-hero-title-line-compact-mobile, 1.08);
    }

    .site-header.minimal:not(.with-hero-media)
    .hero-subtitle {
      width: min(100%, 42ch);
      font-size: var(--type-hero-copy-size-mobile, clamp(0.95rem, 4vw, 1.08rem));
      line-height: var(--type-hero-copy-line-mobile, 1.5);
    }
  }

  @media (max-width: 420px) {
    .site-header.minimal:not(.with-hero-media)
    .pillar-title {
      font-size: 0.7rem;
    }

    .site-header.minimal:not(.with-hero-media)
    .series-title {
      font-size: 0.88rem;
    }

    .site-header.minimal:not(.with-hero-media)
    .hero-title {
      font-size: var(--type-hero-title-size-compact-narrow, clamp(1.2rem, 7.2vw, 1.7rem));
    }

    .site-header.minimal:not(.with-hero-media)
    .hero-subtitle {
      font-size: var(--type-hero-copy-size-narrow, 0.92rem);
      line-height: var(--type-hero-copy-line-narrow, 1.48);
    }
  }
}