@layer components {
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-6) 0 var(--space-1);

    & > div { display: grid; gap: 2px; min-width: 0; }
    & h1 { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
    & p { font-size: var(--text-sm); color: var(--ink-muted); }
  }

  .section-title { padding-top: var(--space-4); font-size: var(--text-lg); font-weight: 650; scroll-margin-top: var(--space-4); }
}