:root {
  /* Let backgrounds reach the display edge while keeping every frame clear of
     a landscape camera cutout. Use the larger side so frames stay centered. */
  --page-frame-safe-inline-inset: max(
    env(safe-area-inset-left, 0px),
    env(safe-area-inset-right, 0px)
  );
  --page-frame-phone-inset: max(20px, var(--page-frame-safe-inline-inset));
  /* Two 44px publishing rows, 24px padding, and the 1px divider. */
  --page-header-phone-height: 113px;
  --publishing-frame-maximum: 45rem;
}

.page-frame {
  width: min(
    calc(100% - var(--page-frame-inset) - var(--page-frame-inset)),
    var(--page-frame-maximum)
  );
  margin-inline: auto;
}

.site-shell {
  --page-frame-inset: var(--page-frame-phone-inset);
  --page-frame-maximum: var(--publishing-frame-maximum);
}

.standalone-shell {
  --page-frame-inset: max(48px, var(--page-frame-safe-inline-inset));
  --page-frame-maximum: 1312px;
}

@media (max-width: 1050px) {
  .standalone-shell {
    --page-frame-inset: max(32px, var(--page-frame-safe-inline-inset));
  }
}

@media (max-width: 700px) {
  .standalone-shell {
    --page-frame-inset: var(--page-frame-phone-inset);
  }
}

@media (max-width: 680px) {
  .page-frame > .page-header {
    min-height: var(--page-header-phone-height);
  }
}