:root, :host {
    --body-width: 80vw;
    --nav-ratio: .25;
    --main-ratio: calc(1 - var(--nav-ratio));
    --body-padding: calc((var(--nav-ratio) / (1 + var(--nav-ratio))) * var(--body-width)); /* Needs to be equal to `var(--nav-width)`. */
    --body-content-width: calc(var(--body-width) - var(--body-padding));
    --main-width: calc(var(--main-ratio) * var(--body-content-width));
    --nav-width: calc(var(--nav-ratio) * var(--body-content-width));
    --margin-width: calc((100vw - var(--main-width)) / 2);
    --note-content-width: calc(var(--margin-width) - 10 * var(--spacing));
}

body {
    display: flex;
    flex-direction: row;
    counter-reset: sidenote-counter;
    width: var(--body-width);
    padding-right: var(--body-padding);
    margin-inline: auto;
}

#navigation {
    display: inline-block;
    width: var(--nav-width);
    padding-left: 1.25em;
    padding-right: 3em;
    padding-top: 2.2em;
    padding-bottom: 1em;
    text-align: right;
}

main {
    display: inline-block;
    width: var(--main-width);
}

.sidenote, .margin-note, .margin-note-left {
    width: var(--margin-width);
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.8em;
    line-height: 1.2;
    vertical-align: baseline;
    position: absolute;
}

.sidenote, .margin-note {
    padding-right: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 6);
    right: 0;
    text-align: left;
}

.margin-note-left {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 6);
    left: 0;
    text-align: right;
}

.sidenote::before {
    position: absolute;
    vertical-align: baseline;
    content: counter(sidenote-counter);
    font-size: 0.8rem;
    top: -0.5rem;
    right: calc(var(--note-content-width) + var(--spacing) * 5);
}

label.sidenote-number {
    display: inline-block;
    max-height: 2rem;
}

.sidenote-number {
    counter-increment: sidenote-counter;

    &::after {
        content: counter(sidenote-counter);
        font-size: 0.8rem;
        top: -0.5rem;
        position: relative;
        vertical-align: baseline;
    }
}

@media(max-width: 1367px) {
    :root, :host {
        font-size: 19px;
   }
}

@media(max-width: 960px) {
    body {
        width: 100vw;
        margin-inline: 0;
        padding-inline: calc(var(--spacing) * 4);
    }

    .sidenote, .margin-note, .margin-note-left {
        position: static;
        margin: 0;
        padding: 0;
        font-size: 1rem;

        &::before {
            content: " (";
            position: static;
            font-size: 1rem;
        }

        &::after {
            content: ") ";
            position: static;
            font-size: 1rem;
        }
    }
}

@media(max-width: 767px) {
    body {
        flex-direction: column;
    }

    main {
        padding-block: calc(var(--spacing) * 8);
    }

    #navigation {
        width: 100%;
        position: static;
        text-align: center;
        display: none;
    }

    main {
        width: 100%;
    }
}