@layer base {
  /* Page skeleton
  /* -------------------------------------------------------------------------- */

  :where(.main-content) {
    margin-inline: auto;
    max-inline-size: var(--main-width);
    min-block-size: calc(100dvh - var(--nav-height));
    /* Clears the fixed nav (height + iOS safe-area inset) plus breathing room */
    padding-block-start: calc(var(--nav-height) + var(--custom-safe-inset-top) + var(--block-space-double));
    padding-block-end: calc(var(--block-space-double) + var(--custom-safe-inset-bottom));
    padding-inline:
      calc(var(--main-padding) + var(--custom-safe-inset-left))
      calc(var(--main-padding) + var(--custom-safe-inset-right));
  }
}