/* A shared desktop container keeps page sections on the same vertical edges.
   Nested reading columns retain their own width; mobile layouts stay intact. */
@media (min-width: 851px) {
  :root {
    --page-width: 1200px;
    --page-gutter: 5vw;
    --page-inset: max(var(--page-gutter), calc((100% - var(--page-width)) / 2));
  }

  .home-hero,
  .services,
  .work-area,
  .home-about,
  .about-story,
  .denise-background,
  .personal-page-layout,
  .page-content,
  .footer,
  .menu-body {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: 0;
  }

  .header,
  .menu-topbar,
  .menu-bottom,
  .navigation-fallback,
  .contact-band,
  .certifications,
  .page-title,
  .about-hero {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-inset);
  }

  /* The profile hero used a second percentage inset inside its left column. */
  .about-hero {
    column-gap: clamp(32px, 5vw, 72px);
  }
  .about-hero .hero-copy {
    padding-inline: 0;
  }
  .about-portrait {
    margin-right: 0;
  }

  /* Keep long text readable without centering it independently of its title. */
  .page-content > * {
    max-width: 780px;
  }
  .page-content > p,
  .page-content > ul,
  .page-content > ol,
  .personal-page-layout .section-body {
    max-width: 74ch;
  }
}