/* Empty state (empty()): left-aligned and typographic; the title speaks in the "note" voice (display face, upright 400). */
@layer components {
  .empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 10px; text-align: left; }
  .empty-title, .empty h3 {
    font-family: var(--font-display); font-size: 20px; font-style: var(--ital-style); font-weight: var(--ital-weight);
    letter-spacing: var(--ls-display); line-height: 1.2; font-variation-settings: var(--fvs-display);
  }
  .empty-text, .empty p { color: var(--ink-2); max-width: 46ch; }
  .empty-cta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
}