/* All page frames share the weekly edition's responsive width. */
:root {
    --site-page-max-width: 1600px;
    --site-page-gutter: clamp(24px, 4vw, 64px);
}

@media screen {
    /* Target page frames only; cards, forms and dialogs retain their own sizing. */
    html .site-header-inner,
    html body > .container,
    html body > .drafts-main,
    html body > .edit-main,
    html body > .learn-main,
    html body > .scholar-main,
    html body > .wrap,
    html body.auth-page,
    html[data-weekly-theme] .paper,
    html[data-weekly-theme] .reader-modal-content {
        box-sizing: border-box;
        width: calc(100% - var(--site-page-gutter));
        max-width: var(--site-page-max-width);
        min-width: 0;
        margin-inline: auto;
    }

    html .site-header-inner .nav-pills {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
    }
}

@media screen and (max-width: 760px) {
    html .site-header-inner .nav-pills {
        justify-content: flex-start;
    }
}