/* Retain each page's existing background gradients and theme colors. */
.page-hero {
  position: relative;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../img/hero_wave.jpg") right center / cover no-repeat;
  /* Remove the source image's red/gold hue; multiply its linework over
     the unchanged blue, green, stone, or warm page background. */
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: .85;
}
@media (max-width: 700px) {
  .page-hero::before { background-position: 72% center; }
}