:root {
  --page-frame-phone-inset: 20px;
  /* Two 44px publishing rows, 24px padding, and the 1px divider. */
  --page-header-phone-height: 113px;
}

.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: 720px;
}

.standalone-shell {
  --page-frame-inset: 48px;
  --page-frame-maximum: 1312px;
}

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

@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);
  }
}