@layer ds.block {
    .article-body__prose {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        font-size: var(--text-lead);
        line-height: var(--line-height-base);
        color: var(--color-text);
    }

    .article-body__prose > p { margin: 0; }

    .article-body__prose > p:first-child {
        font-family: var(--font-display);
        font-size: var(--text-h4);
        line-height: 1.6;
        color: var(--color-heading);
    }

    .article-body__prose h2 {
        margin: var(--space-3) 0 0;
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--font-weight-bold);
        color: var(--color-heading);
    }

    .article-body__prose h3 {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--text-h4);
        font-weight: var(--font-weight-bold);
        color: var(--color-heading);
    }

    .article-body__prose hr { border: none; border-top: 1px solid var(--color-border); margin: 0; }

    .article-body__prose ul,
    .article-body__prose ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-2); }

    .article-body__prose em { color: var(--color-secondary); }

    .article-body__prose a { color: var(--color-primary); font-weight: var(--font-weight-medium); }

    .article-body__prose .article-body__callout {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        background: var(--color-surface);
        border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
        border-radius: var(--radius-ui);
        padding: var(--space-6) var(--space-7);
    }

    .article-body__prose .article-body__callout ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-4); counter-reset: article-tip; }

    .article-body__prose .article-body__callout li { counter-increment: article-tip; display: flex; gap: var(--space-3); }

    .article-body__prose .article-body__callout li::before {
        content: counter(article-tip) ".";
        font-family: var(--font-display);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        flex-shrink: 0;
    }

    .article-body__prose .article-body__sources {
        margin-top: var(--space-3);
        padding-top: var(--space-6);
        border-top: 1px solid var(--color-border);
        font-size: var(--text-small);
        color: var(--color-text-muted);
    }

    .article-body__prose .article-body__sources p { margin: 0 0 var(--space-2); font-weight: var(--font-weight-bold); color: var(--color-text); }
    .article-body__prose .article-body__sources ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
    .article-body__prose .article-body__sources a { word-break: break-word; }
}
