:root {
    --direction: row; /* row-reverse */
    --toc-grow: 1;
    --toc-min-width: 10rem;
    --toc-max-width: 20rem;
    --article-grow: 4;
    --article-max-width: 50rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-inline-start: 2rem;
}

body {
    margin: 1rem;
}

#toc {
    font-family: sans-serif;
}
#toc ol {
    list-style: none;
    padding-inline-start: 0;
}
#toc > ol > li {
    padding-inline-start: 0;
}
#toc li {
    padding-inline-start: 1em;
}

@media (min-width: 50rem) {
    main {
        display: flex;
        flex-direction: var(--direction);
        justify-content: center;
        align-items: flex-start;
        gap: 2rem;
    }
    #toc {
        flex: var(--toc-grow) 0 var(--toc-min-width);
        max-width: var(--toc-max-width);
        position: sticky;
        top: 1rem;
    }
    article {
        flex: var(--article-grow);
        max-width: var(--article-max-width);
    }
}