/* One page frame for every scene. Keep nested content out of the outer gutter
   calculation so the hero, PR chapters, fees and closing scene share an edge. */
:root {
  --page-gutter: clamp(16px, 4vw, 80px);
  --scene-max-width: 1600px;
  --content-max-width: 1200px;
  --page-edge: max(var(--page-gutter), calc((100% - var(--scene-max-width)) / 2));
}

#main,
body > footer {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--scene-max-width);
  margin-inline: auto;
}
#main > section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-width: 0;
}

/* Quiet information sections retain a readable content width inside the frame. */
#main > .section,
.system-inner.section {
  max-width: none;
  padding-inline: max(5%, calc((100% - var(--content-max-width)) / 2));
}
.site-header { padding-inline: var(--page-edge); }

@media (max-width: 900px) {
  :root { --page-gutter: 16px; }
  /* The outer frame supplies the image gutter, so never add it a second time. */
  .hero-photo.hero-photo-artwork { margin: 15px 0 0; width: 100%; }
  .hero-copy { padding-inline: 8px; }
  #main > .section,
  .system-inner.section,
  .trust-scene,
  .family-story,
  .final-section,
  body > footer { padding-inline: 16px; }
  .pr-copy,
  .pr-invitation { padding-inline: 16px; }
  .story-copy { padding-inline: 0; }
  .trust-point { padding-inline: 5px; }
  .trust-description { text-wrap: pretty; }
  .mobile-menu:not([hidden]) { padding-inline: var(--page-gutter); }
}

/* The app's narrow preview pane can be smaller than a 375px phone. */
@media (max-width: 374px) {
  .system-heading h2 { font-size: clamp(25px, 8.6vw, 32px); }
}