/* Wide screens. Hero and nav content stays inside the 1440px stage set in
   base.css (--stage, --side) while backgrounds keep running edge to edge. */

/* A */
.a-nav__in, .a-foot__in { max-width: var(--stage); margin-inline: auto; }
.a-hero { max-width: var(--stage); margin-inline: auto; }

/* B */
.b-hero { padding-inline: var(--side); }
.b-nav { left: calc(var(--side) + 88px); }

/* C: photo stays beside the name and fades out on both sides */
@media (min-width: 1101px) {
  .c-nav { left: calc(var(--side) + 88px); }
  .c-hero__text { left: calc(var(--side) + 88px); }
  .c-hero__photo { right: var(--side); width: min(46%, 662px); }
}
@media (min-width: 1500px) {
  .c-hero__photo { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 80%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 80%, transparent 100%); }
}

/* D: the arch runs to the right edge, the photo stays near the name */
@media (min-width: 1101px) {
  .d-nav { padding-inline: calc(var(--side) + 120px) calc(var(--side) + 150px); }
  .d-hero__text { left: calc(var(--side) + 158px); }
  .d-hero__arch { width: calc(min(44%, 634px) + var(--side)); }
  .d-hero__arch img { width: calc(100% - var(--side)); }
  .d-foot { padding-inline: calc(var(--side) + 80px); }
}
@media (min-width: 1500px) {
  .d-hero__arch img { -webkit-mask: linear-gradient(90deg, #000 75%, transparent); mask: linear-gradient(90deg, #000 75%, transparent); }
}