@media (orientation: portrait) {
    body {
        display: grid;
        margin: 0; padding: 0;
        grid-template: max-content max-content max-content / 100%;
        background-color: var(--background-color);
    }
    body > header {
        margin: 1em;
        margin-bottom: 0;
        grid-area: 1 / 1;
    }
    body > nav {
        margin: 1em;
        padding-top: 1em;
        border-right: none;
        border-top:  1px solid var(--etch-color);
        min-width: 10vw;
        grid-area: 3 / 1;
    }
    body > main {
        margin: 1em;
        margin-left: 1em;
        grid-area: 2 / 1;
    }
    body > div.overlay:has(main) {
        grid-area: 1 / 1 / span 3 / 1;
        z-index: 2;
        background: none;
        display: grid;
    }
    body > div.overlay > main {
        margin: 1em;
        max-width: 100%;
        border: none;
        background-color: var(--background-color);
    }
}