/* One shell for every internal page, including CMS preview and editing. */
:root {
  --subpage-content-max: 90rem;
  --subpage-top-gap: clamp(2.5rem, 5vw, 5rem);
  --subpage-header-offset: clamp(0.75rem, 1.5vw, 1.25rem);
}

body[data-layout='subpage'] {
  --content-max: var(--subpage-content-max);
}

/* Normal flow accounts for the real header height and CMS toolbar body padding. */
body[data-layout='subpage'] .site-header {
  position: relative;
  top: auto;
  margin-top: var(--subpage-header-offset);
}

body[data-layout='subpage'] #page-content {
  padding-top: var(--subpage-top-gap);
}

body[data-layout='subpage'] #page-content > :first-child {
  padding-top: 0;
}

body[data-layout='subpage'] .prose-intro > .container,
body[data-layout='subpage'] .prose-section > .container {
  width: min(calc(100% - (2 * var(--space-page))), var(--subpage-content-max));
  max-width: none;
}

body[data-layout='subpage'] .prose-content,
body[data-layout='subpage'] .art-prose {
  max-width: none;
}

/* Keep the mobile navigation toggle above its full-screen menu while scrolling. */
@media (max-width: 768px) {
  body[data-layout='subpage'] .site-nav {
    padding-top: calc(var(--cms-toolbar-height, 0px) + 7.5rem);
  }

  body[data-layout='subpage'].menu-is-open .site-header {
    position: fixed;
    top: var(--cms-toolbar-height, 0px);
  }
}