/*
 * A single headline figure (DESIGN.md §5): the number in Henrietta, the unit
 * or delta beside it in small text. The label comes from the surrounding
 * .section or from a .stat__label.
 */
@layer components {
  .stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
  }

  .stat__value {
    font: var(--text-display-l);
    color: var(--color-ink);
  }

  .stat__unit {
    font: var(--text-lead);
    color: var(--color-muted);
  }
}