#document {
    margin-inline: auto;
    inline-size: min(100%, 80ch);
    display: grid;
    grid-template-areas: 'title' 'content';
    padding-inline: 1rem;
    padding-block-end: 4rem;

    .editorial { grid-area: content; }

    .article-updated {
        color: var(--gray);
        font-size: 0.875rem;
        font-style: italic;
        margin-block-end: 2rem;
    }

    .article-toc {
        background: white;
        border-inline-start: 4px solid var(--color-1);
        padding: 1rem 1.5rem;
        margin-block-end: 2.5rem;
        border-radius: 0.25rem;

        ol { padding-inline-start: 1.5rem; }
        li { margin-block: 0.25rem; }
    }

    .article-table {
        inline-size: 100%;
        border-collapse: collapse;
        margin-block: 1rem;
        font-size: 0.9375rem;

        th, td {
            text-align: start;
            padding: 0.625rem 0.875rem;
            border-block-end: 1px solid hsl(0 0% 90%);
            vertical-align: top;
        }

        th {
            background: var(--yellow-desaturated);
            font-weight: 600;
        }

        code {
            background: transparent;
            padding: 0;
            font-weight: 600;
        }
    }

    .article-contact {
        margin-block-start: 3rem;
        padding-block-start: 1.5rem;
        border-block-start: 1px solid hsl(0 0% 90%);
        font-size: 0.9375rem;
        color: var(--gray);
    }
}