@layer parts {

    .prose {
        line-height: var(--line-height-base);
        min-width: 0;
    }

    .prose a:not(.tag):not(.button):not(.toc__link) {
        color: var(--color-muted);
        transition: color var(--transition-speed);
    }

    .prose a:not(.tag):not(.button):not(.toc__link):hover {
        color: var(--color-text);
    }

    .prose > :first-child {
        margin-block-start: 0;
    }

    .prose > * + * {
        margin-block-start: calc(1.25em * var(--prose-scale, 1));
    }

    .prose h1 { font-size: var(--font-size-xxl, 2rem); }
    .prose h2 { font-size: var(--font-size-xl, 1.5rem); }
    .prose h3 { font-size: var(--font-size-lg, 1.25rem); }
    .prose h4 { font-size: var(--font-size-md, 1.125rem); }

    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        color: var(--color-heading, var(--color-text));
    }

    .prose h1, .prose h2, .prose h3, .prose h4 {
        margin-block-start: calc(2em * var(--prose-scale, 1));
        margin-block-end: calc(0.5em * var(--prose-scale, 1));
        scroll-margin-top: calc(var(--header-height, 0px) + var(--spacing-lg));
    }

    .prose ul, .prose ol:not(.toc__list) {
        padding-inline-start: 1.5em;
    }


    .prose li + li {
        margin-block-start: 0.5em;
    }

    .prose .toc__item + .toc__item {
        margin-block-start: 0;
    }

    .prose .toc--inline + h2,
    .prose .toc--inline + h3 {
        margin-block-start: var(--spacing-lg);
    }

    .prose blockquote {
        margin-inline: 0;
        padding-inline-start: var(--spacing-lg);
        border-inline-start: 3px solid var(--color-primary);
        color: var(--color-muted);
        font-style: italic;
    }

    .prose pre {
        background: var(--color-surface);
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        overflow-x: auto;
        font-size: var(--font-size-body-sm);
    }

    .prose code {
        background: var(--color-surface);
        padding: 0.15em 0.4em;
        border-radius: var(--radius-sm);
        font-size: 0.9em;
    }

    .prose pre code {
        background: none;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
    }

    .prose img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-image-md, var(--radius-md));
    }

    .prose figure {
        border-radius: var(--radius-image-md, var(--radius-md));
        overflow: hidden;
    }

    .prose figcaption {
        font-size: var(--font-size-body);
        color: var(--color-text);
        text-align: center;
        margin-block-start: var(--spacing-sm);
    }

    .prose table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--table-font-size, inherit);
    }

    .prose th, .prose td {
        padding: var(--table-cell-padding, var(--spacing-sm) var(--spacing-md));
        border-block-end: var(--table-border-width, 1px) solid var(--table-border-color, var(--color-border));
        text-align: start;
    }

    .prose :not(.table-wrap--bordered) > table tbody tr:last-child td {
        border-block-end: none;
    }

    .prose th {
        font-weight: var(--font-weight-heading);
        background: var(--table-header-bg, transparent);
        color: var(--table-header-color, inherit);
    }

    /* Striped */
    .prose .table-wrap--striped tbody tr:nth-child(even) {
        background: var(--table-stripe-color, var(--color-surface));
    }

    /* Bordered — border + radius on wrapper, cells only inner borders */
    .prose .table-wrap--bordered {
        border: var(--table-border-width, 1px) solid var(--table-border-color, var(--color-border));
        border-radius: var(--table-radius, 0);
    }
    .prose .table-wrap--bordered table {
        border-collapse: collapse;
    }
    .prose .table-wrap--bordered th,
    .prose .table-wrap--bordered td {
        border-block-end: var(--table-border-width, 1px) solid var(--table-border-color, var(--color-border));
        border-inline-end: var(--table-border-width, 1px) solid var(--table-border-color, var(--color-border));
    }
    .prose .table-wrap--bordered tr th:last-child,
    .prose .table-wrap--bordered tr td:last-child {
        border-inline-end: none;
    }
    .prose .table-wrap--bordered tbody tr:last-child td {
        border-block-end: none;
    }

    /* Minimal */
    .prose .table-wrap--minimal th,
    .prose .table-wrap--minimal td {
        border: none;
        border-block-end: var(--table-border-width, 1px) solid var(--table-border-color, var(--color-border));
    }
    .prose .table-wrap--minimal thead tr:first-child th {
        border-block-end-width: calc(var(--table-border-width, 1px) * 2);
    }

    /* Drop cap — shared */
    .prose--drop-cap-first > p:first-of-type::first-letter,
    .prose--drop-cap-all > p:first-of-type::first-letter,
    .prose--drop-cap-all > h1 + p::first-letter,
    .prose--drop-cap-all > h2 + p::first-letter,
    .prose--drop-cap-all > h3 + p::first-letter,
    .prose--drop-cap-all > h4 + p::first-letter,
    .prose--drop-cap-all > h5 + p::first-letter,
    .prose--drop-cap-all > h6 + p::first-letter {
        float: left;
        font-family: var(--drop-cap-font, var(--font-heading));
        font-weight: var(--drop-cap-weight, var(--font-weight-heading));
        font-size: var(--drop-cap-size, 3.5em);
        line-height: var(--drop-cap-line-height, 0.8);
        margin-inline-end: var(--drop-cap-margin-inline, 0.1em);
        margin-block-start: var(--drop-cap-margin-block, 0.05em);
        color: var(--drop-cap-color, var(--color-heading, inherit));
        font-style: var(--drop-cap-style, normal);
        background: var(--drop-cap-bg, transparent);
        padding: var(--drop-cap-padding, 0);
    }

    .prose hr {
        border: none;
        border-block-start: 1px solid var(--color-border);
        margin-block: 2em;
    }

}

/* Unlayered — table scroll wrapper */
.table-wrap {
    display: grid;
    overflow-x: auto;
    max-width: calc(100vw - 2 * var(--gutter));
}
