/* .page-heading (DESIGN.md §5): eyebrow, h1 in Henrietta, optional lead,
   ending on a rule. The one big gesture of a text page. */
@layer components {
  .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-8) var(--space-6);
    border-bottom: var(--rule);

    & h1 {
      font-size: var(--text-display-l);
      line-height: var(--leading-display-l);
      max-width: var(--width-reading);
    }
  }

  .page-heading__lead {
    max-width: var(--width-reading);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    font-weight: 500;
    color: var(--color-muted);
  }
}