@layer components {
  /* Home masthead image — the site banner, full-bleed. Pulled up by the header's
     height so it sits *behind* the sticky, frosted header; a light scrim only at
     the very top keeps the nav legible. The editor sets it as the homepage's featured
     image (--hero-image, inline on the element); the bundled hero.jpg — resolved
     relative to this file (sites/zohar/hero.jpg) — is the fallback. */
  .homepage-hero {
    margin-block-start: calc(-1 * var(--header-height));
    min-block-size: clamp(22rem, 66vh, 38rem);
    background-image:
      linear-gradient(to bottom,
        oklch(0% 0 0 / 0.28) 0%,
        oklch(0% 0 0 / 0.04) 24%,
        oklch(0% 0 0 / 0.04) 62%,
        oklch(0% 0 0 / 0.16) 100%),
      var(--hero-image, url("/assets/sites/zohar/hero-ca4e1bfb.jpg"));
    background-size: cover;
    background-position: center 42%;
  }
}