:root {
    /* /lire includes its gutters; /compte/profil has 860px of usable content. */
    --page-width-wide: 1600px;
    --page-width-narrow: 860px;
    --page-gutter: 24px;
}

.page-frame {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: var(--page-width-wide);
    margin: 0 auto;
    padding: 22px var(--page-gutter) 50px;
}

.page-frame--narrow {
    max-width: calc(var(--page-width-narrow) + 2 * var(--page-gutter));
}

/* A page section uses its frame instead of defining another page width. */
.page-section {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.page-frame > .page-section {
    margin-block: 0;
    padding-block: 0;
}

.page-frame .form-page {
    max-width: none;
    margin: 0;
}

/* The same editor fragment also appears in a dialog with its own padding. */
.page-frame > .reading-editor {
    max-width: none;
    padding: 0;
}

.page-frame--reader { padding-block: 0; }

.site-footer {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--page-width-wide);
    padding: 2rem var(--page-gutter);
}

.has-social-rails .site-footer {
    width: 100%;
}

@media (min-width: 1101px) {
    /* Keep the same frame on pages that have no shortcut rails. */
    body:not(.has-social-rails):not(.admin) .page-frame,
    body:not(.has-social-rails) > .site-footer {
        width: 100%;
    }
}

@media (max-width: 760px) {
    :root { --page-gutter: 12px; }
    .page-frame { padding-block: 16px 35px; }
    .page-frame--reader { padding-block: 0; }
}

@media print {
    .page-frame { width: 100%; max-width: none; margin: 0; padding: 0; }
}