/* Responsive page gutters, with a centered var(--content-max-width, 100rem) content column. */
:root { --page-gutter: 32px; }
@media (min-width: 1100px) {
  :root { --page-gutter: clamp(16px, calc((100vw - var(--content-max-width, 100rem)) / 2), 80px); }
}
main { max-width: calc(var(--content-max-width, 100rem) + 2 * var(--page-gutter)); padding-inline: var(--page-gutter); }
.latest-layout { max-width: calc(var(--content-max-width, 100rem) + 2 * var(--page-gutter)); margin-inline: auto; }
.latest-layout > main { max-width: var(--content-max-width, 100rem); }
@media (min-width: 1001px) {
  html[data-latest-visible="true"] .latest-layout { max-width: calc(var(--content-max-width, 100rem) + 292px + 2 * var(--page-gutter)); }
}
@media (min-width: 1800px) {
  html[data-latest-visible="true"] .latest-layout { max-width: calc(var(--content-max-width, 100rem) + 320px + 2 * var(--page-gutter)); }
}
.header { max-width: none; margin-inline: 0; }
.header::after { inset-inline: var(--page-gutter); }
main > section > .shelf { padding-inline: 0; margin-inline: 0; }
.site-footer.system-footer { padding-inline: var(--page-gutter); }
.system-footer-meta { margin-inline: 0; }
.site-footer.previous-footer { max-width: none; margin-inline: var(--page-gutter); }

/* Respond to the available section width, including the Latest sidebar. */
#content { container: content-cards / inline-size; }
#content-list { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: normal; }
@container content-cards (max-width: 900px) {
  #content-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container content-cards (max-width: 600px) {
  #content-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --page-gutter: 20px; }
}

/* Full-width is independent of the saved cap, so switching back restores it. */
:root[data-full-width-content="true"] { --page-gutter: 16px; }
:root[data-full-width-content="true"] main,
:root[data-full-width-content="true"] .latest-layout,
:root[data-full-width-content="true"] .latest-layout > main,
:root[data-full-width-content="true"] footer.site-footer.previous-footer { max-width: none; }