/* Homepage overrides: keep the photo backdrop at every screen size. */
.hero__photos {
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: 0;
}
.hero__veil {
  display: block;
  background: linear-gradient(to bottom, rgb(249 245 237 / .92) 0%, rgb(249 245 237 / .88) 48%, rgb(249 245 237 / .45) 72%, rgb(249 245 237 / .08) 100%);
}
.hero__inner {
  min-height: 43rem;
  padding-bottom: 12rem;
}
.hero__art {
  position: absolute;
  right: var(--page-gutter);
  bottom: 1.5rem;
  width: 5rem;
}
@media (min-width: 40rem) and (max-width: 59.999rem) {
  .hero__inner { min-height: 38rem; }
  .hero__veil { background: linear-gradient(100deg, rgb(249 245 237 / .94), rgb(249 245 237 / .78) 55%, rgb(249 245 237 / .18)); }
}
@media (min-width: 60rem) {
  .hero__photos { left: 0; }
  .hero__inner { min-height: 35rem; padding-bottom: 6rem; }
  .hero__veil {
    /* Anchor the readable area to the centered copy, not a percentage of the
       viewport. The image remains full-bleed without a hard left edge. */
    --copy-edge: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
    background: linear-gradient(to right,
      rgb(249 245 237 / .95) 0,
      rgb(249 245 237 / .90) calc(var(--copy-edge) + 29rem),
      rgb(249 245 237 / .14) calc(var(--copy-edge) + 59rem),
      rgb(249 245 237 / .08) 100%);
  }
  .hero__art { position: relative; right: auto; bottom: auto; width: min(10rem, 15vw); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo--arriving { transition: none; }
}

/* Homepage recaps need only a date and headline, not a venue column. */
@media (min-width: 40rem) {
  .index__row { grid-template-columns: 9rem minmax(0, 1fr); }
}