/* Wide screens (≥1600px).
   The reference capped <body> at 1800px with `margin:auto`, but enhancements.css later resets
   `body{margin:0}`, so on big monitors the whole site sat pinned to the left with an empty band on
   the right. Here backgrounds run full-bleed and the content is held in a centred column instead. */
@media (min-width: 1600px) {
  body {
    max-width: none;
    margin: 0;
  }

  /* Gutters grow so content stays within ~1640px, never below each section's original padding. */
  header,
  header.new-header,
  .collection,
  .combo-section,
  footer {
    padding-left: max(5%, calc((100% - 1640px) / 2));
    padding-right: max(5%, calc((100% - 1640px) / 2));
  }
  .values,
  .questions,
  .interest-band,
  .giving-statement {
    padding-left: max(8%, calc((100% - 1640px) / 2));
    padding-right: max(8%, calc((100% - 1640px) / 2));
  }
  .ritual {
    padding-left: max(6%, calc((100% - 1640px) / 2));
    padding-right: max(6%, calc((100% - 1640px) / 2));
  }

  /* Inner pages: span full width (so the intro's divider runs edge to edge) and align the text with
     the header instead of the reference's narrower 1500px box. */
  .page-intro,
  .content-block:not(.note-block) {
    max-width: none;
    padding-left: max(7%, calc((100% - 1640px) / 2));
    padding-right: max(7%, calc((100% - 1640px) / 2));
  }
  .content-block.note-block {
    max-width: 1640px;
  }

  /* Image/text splits: keep the photo from becoming a thin strip on very wide screens. */
  .philosophy > img,
  .story-split > img {
    height: min(760px, 34vw);
  }
  .philosophy > div,
  .story-split > div {
    max-width: 820px;
  }

  /* Full-bleed banners shouldn't take over the whole screen. */
  .banner-hero > img,
  .wholesale-band img {
    max-height: 78vh;
    object-fit: cover;
  }
}