/* The shared content frame. Page backgrounds can extend past its edges. */
body.magazine {
  --site-max: 1320px;
  --site-gutter: max(18px, 4%);
  --site-frame: min(var(--site-max), calc(100% - 2 * var(--site-gutter)));
  --site-edge: max(var(--site-gutter), calc((100% - var(--site-max)) / 2));
}

body.magazine > main#main:not(.home-index, .admin-page, .admin-login),
.site-header .masthead,
.models-nav-inner,
.public-page-toolbar {
  width: var(--site-frame);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

body.magazine > .site-header {
  max-width: none;
  padding-inline: 0;
}

.site-footer,
.home-index .home-index-models {
  padding-inline: var(--site-edge);
}

body.magazine > main.home-index { max-width: none; }
.home-index > #browse { width: var(--site-frame); }

/* Keep prose and forms readable inside the shared frame. */
.prose-page > :is(p, ul, ol, blockquote) { max-width: 75ch; }
.form-page > :is(.form-intro, .form-panel, .notice) { max-width: 870px; }

@media (min-width: 751px) {
  .home-index .entry {
    /* The search tint continues past the content frame to the page edge. */
    --search-edge: calc(44% + .12 * var(--site-edge));
    padding-inline: var(--site-edge);
    background: linear-gradient(to right, var(--home-light) var(--search-edge), var(--home-dark) var(--search-edge));
  }

  .home-index .entry-intro { padding-inline-start: 0; }
  .home-index .entry-action { padding-inline-end: 0; }
}

@media (min-width: 1435px) {
  .format-nav { padding-inline: var(--site-edge); }
  .format-nav a {
    flex: 1 1 auto;
    padding-inline: 6px;
    white-space: normal;
  }
}

@media (max-width: 750px) {
  body.magazine { --site-gutter: 18px; }
  .home-index .entry-intro,
  .home-index .entry-action,
  .format-menu summary { padding-inline: var(--site-edge); }
}