/* ============================================================
   Aceptionist — photography, deliberately minimal.
   ONE background photograph on the site, in the landing hero,
   occupying a corner rather than the whole field. Everything
   else is flat colour, so nothing competes and nothing
   expensive has to repaint while scrolling.
   ============================================================ */

.herophoto {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.herophoto img {
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  opacity: 0.13;
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(1.7);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 92% 44%, #000 0%, rgba(0,0,0,.38) 40%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 80% at 92% 44%, #000 0%, rgba(0,0,0,.38) 40%, transparent 72%);
}
@media (max-width: 900px) {
  .herophoto img { width: 100%; opacity: 0.09; }
}

/* the only other photographs on the site: the two vertical cards */
.vert__img img { filter: grayscale(.3) contrast(1.05) saturate(.9); }
.figframe img  { filter: grayscale(.32) contrast(1.05) saturate(.88); }
.photoband img { filter: grayscale(.24) contrast(1.04) saturate(.92); }

/* ============================================================
   HERO — image background only. No dot pattern.
   The photograph covers the hero, duotoned to the palette, and
   masked so it is faintest directly behind the headline and
   strongest toward the edges. The text never fights it.
   ============================================================ */
.z-hero::after { display: none !important; }   /* the dots, removed */

.herophoto { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.herophoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: 0.26;
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(1.55) contrast(1.02);
  -webkit-mask-image: radial-gradient(ellipse 56% 50% at 50% 42%, transparent 0%, rgba(0,0,0,.45) 58%, #000 88%);
          mask-image: radial-gradient(ellipse 56% 50% at 50% 42%, transparent 0%, rgba(0,0,0,.45) 58%, #000 88%);
}
@media (max-width: 900px) {
  .herophoto img { opacity: 0.16; }
}