/* Shared reading frame. Backgrounds stay full bleed; card rails can extend right. */
:root {
  --content-max:1440px;
  --content-inset:max(var(--gutter),calc((100vw - var(--content-max)) / 2));
}

/* Below 1440 + 48px gutters, retain every existing desktop/tablet/mobile layout. */
@media(min-width:1536px) {
  .header,
  body:not(.network-page) > footer,
  .auth-header,
  .preview-header,
  .page-head,
  .summary-bar,
  .how,
  .apply,
  .my,
  .result,
  .search-panel,
  .preview-result {
    padding-inline:var(--content-inset);
  }

  .hero-heading { padding-inline:var(--content-inset); }
  .hero-copy { left:var(--content-inset); }
  .how-motion-toggle { right:var(--content-inset); }

  /* Fixed-size cards reveal more neighbors on wide displays, never stretch. */
  .personas,.picker { padding-left:var(--content-inset); }
  .personas .persona-gallery > .controls { padding-right:var(--content-inset); }
  .personas .persona-progress { right:var(--content-inset); }
  .personas .persona-track,.picker .persona-track { padding-right:var(--content-inset); }

  .map-stage { margin-inline:var(--content-inset); }
  .done { margin-left:calc(var(--content-inset) - var(--gutter)); }

  /* Editorial sections include a separate reading-index rail on the left. */
  .story { --reading-inset:max(232px,var(--content-inset)); }
  .story main > .story-hero { padding-inline:var(--content-inset); }
  .story main > .story-section,
  .story main > .story-closing,
  .story main > .next-page {
    padding-left:var(--reading-inset);
    padding-right:var(--content-inset);
  }
  .story .story-toc-rail {
    width:184px;
    margin-left:calc(var(--reading-inset) - 184px);
    padding-left:16px;
  }
  .story main .story-back-to-top { right:var(--content-inset); }

  /* Review guides retain their own sidebar and cap the adjacent document. */
  .component-template main,.image-production main {
    max-width:calc(var(--content-max) + 2 * var(--gutter));
    margin-left:max(220px,calc((100vw - var(--content-max) - 2 * var(--gutter)) / 2));
    margin-right:auto;
  }
  .component-template .production-nav,.image-production .production-nav {
    left:max(24px,calc((100vw - var(--content-max) - 2 * var(--gutter)) / 2 - 196px));
  }
}