@layer components {

    /* ── Eyebrow ────────────────────────────────────────────────────
     Small uppercase label above section headings. Preceded by a
     hairline indicator rendered via ::before. */
    .c-eyebrow {
        font-size: var(--fs-caption);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }

    .c-eyebrow::before {
        content: "";
        width: 1.75rem;
        height: 1px;
        background: currentColor;
    }

    /* Soft variant for dark surfaces — uses accent-soft tint */
    .c-eyebrow--soft {
        color: var(--color-accent-soft);
    }
}