@layer patterns {
    .element-lead,
    .element-text {
        /* Mobile values (default) */
        --prose-flow-sm: var(--size-2); /*  8px */
        --prose-flow: var(--size-4); /* 16px */
        --prose-head-md: var(--size-5); /* 20px */
        --prose-head-lg: var(--size-8); /* 32px */

        /* Desktop values: bump up at the same breakpoint as element spacing */
        @media (min-width: 1280px) {
            --prose-flow-sm: var(--size-3); /* 12px */
            --prose-flow: var(--size-4); /* 16px (unchanged) */
            --prose-head-md: var(--size-8); /* 32px */
            --prose-head-lg: var(--size-16); /* 64px */
        }
    }

    /* Reset UA margins so spacing is fully driven by the rules below. */
    .element-text :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre) {
        margin-block: 0;
    }

    /* Default 16px between any two siblings */
    .element-text > :is(.col, .col-offset) > * + * {
        margin-block-start: var(--prose-flow);
    }

    /* 12px: H4 ↔ body */
    .element-text > :is(.col, .col-offset) > h4 + p,
    .element-text > :is(.col, .col-offset) > p + h4 {
        margin-block-start: var(--prose-flow-sm);
    }

    /* 32px: body → button/link/list */
    .element-text > :is(.col, .col-offset) > p + p:has(> .btn),
    .element-text > :is(.col, .col-offset) > p + p:has(> .link-box) {
        margin-block-start: var(--prose-head-md);
    }

    /* 64px desktop / 32px mobile: any sibling → H2 starts a new top-level section */
    .element-text > :is(.col, .col-offset) > * + h2 {
        margin-block-start: var(--prose-head-lg);
    }

    /* Override: H2 immediately followed by H3 is heading + subheading, 16px */
    .element-text > :is(.col, .col-offset) > h2 + h3 {
        margin-block-start: var(--prose-flow);
    }
}