/* Hero background.
   The source was a 1.7MB PNG of a photograph -- PNG is lossless and a poor fit
   for photos. Now served as responsive WebP (~14-40KB) with a JPEG fallback.
   Declaration order matters: each later rule overrides the previous one only in
   browsers that understand it, so the plain url() stays as the universal fallback. */
.hero-visual {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  background-image: url("hero-v2-1152.jpg");
  background-image: -webkit-image-set(url("hero-v2-1152.webp") 1x);
  background-image: image-set(url("hero-v2-1152.webp") type("image/webp"),
                              url("hero-v2-1152.jpg")  type("image/jpeg"));
}

/* Phones: a 1152px image is wasted bandwidth on a small panel. */
@media (max-width: 720px) {
  .hero-visual {
    background-image: url("hero-v2-768.jpg");
    background-image: -webkit-image-set(url("hero-v2-768.webp") 1x);
    background-image: image-set(url("hero-v2-768.webp") type("image/webp"),
                                url("hero-v2-768.jpg")  type("image/jpeg"));
  }
}

/* Large or high-DPI displays get the full-resolution asset. */
@media (min-width: 1400px), (min-resolution: 2dppx) {
  .hero-visual {
    background-image: url("hero-v2-1536.jpg");
    background-image: -webkit-image-set(url("hero-v2-1536.webp") 1x);
    background-image: image-set(url("hero-v2-1536.webp") type("image/webp"),
                                url("hero-v2-1536.jpg")  type("image/jpeg"));
  }
}