@layer components {

    .prose > * + * {
        margin-top: var(--s-4);
    }

    .prose p,
    .prose li {
        font-size: var(--t-md);
        line-height: 1.65;
    }

    .prose__h {
        margin-top: var(--s-8);
        font-family: var(--f-display);
        font-size: var(--t-xl);
        font-weight: var(--fw-display);
        line-height: 1.15;
    }

    .prose > .prose__h:first-child {
        margin-top: 0;
    }

    .prose__list {
        display: grid;
        gap: var(--s-2);
        padding-left: 1.25em;
        list-style: disc;
    }

    .prose__list li::marker {
        color: var(--c-muted);
    }

    .prose--page {
        display: grid;
        grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--w-read)) minmax(var(--gutter), 1fr);
        padding-top: var(--s-8);
    }

    .prose--page > * {
        grid-column: 2;
        min-width: 0;
    }

    .prose--page > [data-largo] {
        grid-column: 1 / -1;
        width: 100%;
        max-width: min(1180px, 100% - 2 * var(--gutter));
        margin-top: var(--s-7);
        margin-inline: auto;
    }

    .prose--page > [data-largo] + * {
        margin-top: var(--s-7);
    }

    .prose--page:empty {
        display: none;
    }

}

@layer components {

    .steps {
        display: grid;
        counter-reset: passo;
        margin-top: var(--s-5);
        border-top: 1px solid var(--c-line);
    }

    .steps__item {
        position: relative;
        display: grid;
        gap: var(--s-1);
        padding: var(--s-5) 0 var(--s-5) 64px;
        border-bottom: 1px solid var(--c-line);
        counter-increment: passo;
    }

    .steps__item::before {
        content: counter(passo, decimal-leading-zero);
        position: absolute;
        left: 0;
        top: var(--s-5);
        font-family: var(--f-display);
        font-size: var(--t-xl);
        line-height: 1;
        color: var(--c-accent);
    }

    .steps__title {
        font-size: var(--t-md);
        font-weight: 500;
    }

    .prose .steps__text {
        font-size: var(--t-base);
        color: var(--c-muted);
    }

}

@layer components {

    .table-wrap {
        margin-top: var(--s-5);
        overflow-x: auto;
        border: 1px solid var(--c-line);
        border-radius: var(--r-1);
        background:
            linear-gradient(to right, var(--c-surface) 40%, transparent) left / 32px 100% no-repeat local,
            linear-gradient(to left, var(--c-surface) 40%, transparent) right / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, var(--c-muted), transparent) left / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, var(--c-muted), transparent) right / 14px 100% no-repeat scroll,
            var(--c-surface);
    }

    .table {
        width: 100%;
        min-width: 520px;
        font-size: var(--t-sm);
        line-height: 1.5;
    }

    .table th,
    .table td {
        padding: var(--s-3) var(--s-4);
        border-bottom: 1px solid var(--c-line);
        text-align: left;
        vertical-align: top;
    }

    .table th {
        font-size: var(--t-xs);
        font-weight: 500;
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-muted);
        white-space: nowrap;
    }

    .table tbody tr:last-child td {
        border-bottom: 0;
    }

    .table td:first-child {
        font-weight: 500;
    }

    .table__shade {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        white-space: nowrap;
    }

    .table__shade:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .table__chip {
        flex: none;
        width: 18px;
        height: 18px;
        border: 1px solid var(--c-line);
        border-radius: var(--r-pill);
        background: var(--c-swatch, linear-gradient(135deg, var(--c-surface) 46%, var(--c-line-strong) 46%, var(--c-line-strong) 54%, var(--c-surface) 54%));
    }

}

@layer components {

    .pull {
        margin-block: var(--s-7) var(--s-3);
        padding-left: var(--s-5);
        border-left: 2px solid var(--c-accent);
    }

    .prose .pull__text {
        font-size: var(--t-xl);
        line-height: 1.22;
    }

    .pull__by {
        margin-top: var(--s-3);
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .pull__by:empty {
        display: none;
    }

}

@layer components {

    .figure__img {
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 620px;
        border-radius: var(--r-1);
        background: var(--c-tile);
        object-fit: cover;
    }

    .figure__caption {
        margin-top: var(--s-2);
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .figure__caption:empty {
        display: none;
    }

}