@layer components {
  .eyebrow {
    color: var(--color-ink-muted);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .eyebrow--accent {
    color: var(--color-emerald-700);
  }

  .eyebrow--light {
    color: var(--color-slate-400);
  }

  .title {
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.15;
  }

  .title--xl {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
  }

  .subtitle {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .lede {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .caption {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }
}