@scope (htmlpress-page) {
  :scope {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: 2.5rem;
    padding: 2.5rem;
  }
  :scope > main {
    justify-self: center;
    width: 100%;
    min-width: 0;
    max-width: var(--htmlpress-width);
    color: var(--htmlpress-prose);
    line-height: 1.75;
    overflow-wrap: break-word;
  }
  :scope > main > :first-child {
    margin-top: 0;
  }

  /* The content meets the header's first link: its 1rem padding, then, while the nav
     toggle shows, the 2rem toggle and its 1rem margin, then the links' 1.5rem padding.
     The default width is what that leaves on a 100rem viewport, gapped as much from the toc */
  @media (width > 56rem) {
    :scope > main {
      justify-self: start;
    }
    :root[data-scripted]:has(#htmlpress-sidebar) :scope {
      padding-left: 5.5rem;
      column-gap: 5.5rem;
    }
    :root[data-nav-collapsed] :scope > main {
      max-width: calc(var(--htmlpress-width) + var(--htmlpress-nav-width));
    }
  }

  @media (max-width: 80rem) {
    :scope {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 48rem) {
    :scope {
      padding: 2rem 1rem 1rem;
    }
  }
}