/* banner-window: a banner that looks fixed while the page scrolls.
   The figure is an ordinary in-flow box of the banner's height; the image
   inside is position: fixed, so it stays put relative to the viewport, and
   the figure's clip-path: inset(0) clips it to the figure's box. As the
   figure scrolls by, the reader sees a window moving over a fixed picture.
   This is the background-attachment: fixed effect without
   background-attachment, which iOS Safari does not honour; clip-path on an
   ancestor clips fixed descendants everywhere.
   Reduced motion: the image sits in the figure like any other. */
.banner-window {
  position: relative;
  margin: 0 0 1.5rem;
  height: clamp(160px, 32vh, 320px);
  clip-path: inset(0);
  overflow: hidden;
  background: #3a3a3a;
}
.banner-window img {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  image-rendering: pixelated;
}
.banner-window figcaption {
  position: absolute;
  right: 0.5rem; bottom: 0.25rem;
  font-size: 0.7rem;
  color: #d1d5db;
  text-shadow: 0 0 4px #000;
}
@media (prefers-reduced-motion: reduce) {
  .banner-window { clip-path: none; }
  .banner-window img { position: static; width: 100%; height: 100%; z-index: auto; }
}