@layer components {
  .view-header { display: flex; flex-direction: column; gap: var(--space); }
  .view-header__title { font-size: var(--text-xl); }
  /* Body size, not below it. Muted ink is already saying "this is the
     secondary line"; setting it smaller as well made the sentence that
     explains the page the smallest thing on the page, and dropped every page
     from 44px to 16px in one step without touching the size everything else
     is set in. */
  .view-header__standfirst {
    color: var(--ink-muted);
    font-size: var(--text-base);
    max-width: var(--measure);
  }
}