/* One content frame for every public page, including the legacy templates. */
:root {
  --site-content-max: 1920px;
  --site-content-padding: 3%;
}

body :is(.container, .experience-container, .site-container,
  .main-content, .page-head, .article-page, .author-card, .cta-box,
  .related-posts, .manage-header, .manage-card),
body .g-header > .inner,
body .g-footer > .inner,
body .g-footer > .copy {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-content-max);
  margin-inline: auto;
  padding-inline: var(--site-content-padding);
}

/* Keep rules and ornaments on the same edges as the section contents. */
.brand-site :is(.stripe-divider, .research-editorial, .related) {
  background-clip: content-box;
}
.brand-site .hero-dots,
.brand-site .section-headphones {
  right: var(--site-content-padding);
}
/* Balance the first-view illustration within the wider desktop frame. */
@media (min-width: 1051px) {
  .brand-site .hero-art { width: 72%; max-width: 1080px; }
}
@media (max-width: 620px) {
  .brand-site #site-nav { padding-inline: var(--site-content-padding); }
}
@media (max-width: 480px) {
  .brand-site .hero-art { width: 100%; max-width: 100%; margin-inline: 0; }
  .brand-site .hero-ring { right: var(--site-content-padding); }
}