/* One shared desktop content edge, independent of each page's layout. */
@media (min-width: 761px) {
  body {
    --desktop-content-width: min(88%, 1180px);
    --desktop-content-gutter: max(6%, calc((100% - 1180px) / 2));
  }

  body > header,
  body > footer {
    padding-left: var(--desktop-content-gutter);
    padding-right: var(--desktop-content-gutter);
  }

  body main > section:not(.hero),
  body[data-page="home"] main > .pHomeSection,
  body[data-page="sobre-mi"] main > .innerHero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--desktop-content-gutter) !important;
    padding-right: var(--desktop-content-gutter) !important;
  }

  /* These containers already own their content width: do not add a second gutter. */
  body main > section.storyChapter,
  body main > section.blogListing,
  body[data-page="sobre-mi"] main > .aboutChapter,
  body main > .serviceCatalogue,
  body[data-page="sobre-mi"] main > .aboutBiography,
  body[data-page="sobre-mi"] main > .aboutNav,
  body[data-page="servicios"] main > .serviceNav,
  body .blogArticleMain > .blogArticle,
  body .legalMain > .legalContent {
    width: var(--desktop-content-width);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Align introductions and prose with their section rather than centering them again. */
  body .proposalIntro > div,
  body[data-page="mediadora-simbolica"] .pageProse,
  body .aboutWorkingCopy {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body[data-page="home"] .heroText {
    margin-left: var(--desktop-content-gutter);
    padding-left: 0;
  }

  /* Long reading pages retain a comfortable line length within the shared canvas. */
  body .blogArticle .articleProse,
  body .legalContent > section,
  body[data-page="sobre-mi"] .aboutBiography .aboutChapterCopy {
    max-width: 90ch;
  }
}