/*
 * Headings, from `heading_tag`. The variant picks the element and the step
 * together (large → h1, default → h2, small → h3, tiny → h4); the three big
 * steps are the serif at 700, `tiny` is a UI label in the condensed sans.
 */
@layer components {
  .heading {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-weight: var(--weight-bold);
    text-wrap: balance;
  }

  .heading--large {
    margin-block-end: var(--space-md);
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-tight);
  }

  .heading--default {
    margin-block-end: var(--space-sm);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: -0.005em;
  }

  .heading--small {
    margin-block-end: var(--space-xs);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  .heading--tiny {
    margin-block-end: var(--space-xs);
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
  }

  /* "Fiscal years to September", "$m", "trades per month": the serif
     italic beside a heading, at the row's end on the heading's baseline
     (`heading_tag … note:`). */
  .heading:has(> .heading__note) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3xs) var(--space-md);
  }

  .heading__note {
    color: var(--color-ink-muted);
    font-family: var(--font-prose);
    font-size: var(--text-note);
    font-style: italic;
    font-weight: var(--weight-regular);
    line-height: var(--leading-note);
    letter-spacing: normal;
  }
}