@media (width >= 700px) { body { padding-inline: var(--spacing); } }
@media (width >= 900px) { body { padding-inline: calc(var(--spacing) * 2); } }
@media (width >= 100em) { body { padding-inline: padding-inline: 0; } }
body {
  line-height: var(--line-height);
  background-color: hsl(var(--color-bg));
  overflow-y: scroll;
  main.site-main {
    section.flash { min-height: calc(var(--spacing) * var(--line-height) + var(--spacing-half)); }
    section.site-nav + section.page-content { padding-top: calc(var(--spacing) * var(--line-height) + var(--spacing-half)); }
    section.page-content { padding-bottom: calc(var(--spacing) * var(--line-height) + var(--spacing-half)); }
    section.page-content > section.page-wrapper { margin: var(--margin-auto-center); width: var(--page-wrapper-max-width); }
  }
}