/* Lighter photo treatment (October 2026). Loads after site.css. */

/* Photo cards: clear at the top so the picture shows, shaded only behind the words */
.card.img:before{
  background:linear-gradient(180deg,rgba(0,21,13,.05) 0%,rgba(0,21,13,.18) 22%,rgba(0,21,13,.62) 48%,rgba(0,21,13,.84) 72%,rgba(0,21,13,.92) 100%);
}
/* Cards with a lot of text: the shade starts a little higher */
.grid.four .card.img:before,.grid.two .card.img:before,#ways .card.img:before{
  background:linear-gradient(180deg,rgba(0,21,13,.12) 0%,rgba(0,21,13,.35) 18%,rgba(0,21,13,.72) 40%,rgba(0,21,13,.88) 65%,rgba(0,21,13,.94) 100%);
}
.card.img p{color:#f3efe4}
.card.img>.bg{filter:saturate(1)}
.card.img:hover>.bg,.card.img:focus-within>.bg{filter:saturate(1.08)}
.card.img h3,.card.img p,.card.img .tag,.card.img .num,.card.img .quote{text-shadow:0 1px 14px rgba(0,21,13,.7),0 1px 2px rgba(0,21,13,.65)}

/* Welcome panel on the homepage: let the shelf photo through */
.welcome-box:before{
  background:linear-gradient(110deg,rgba(1,34,25,.86) 0%,rgba(1,34,25,.55) 45%,rgba(1,34,25,.15) 100%);
}
.welcome-box .wb-bg{opacity:.6}

/* Faded background photos behind light sections: more visible, with a little colour */
.sec>.wash{opacity:.2;filter:grayscale(.35) contrast(.95) brightness(1.05)}
.bg-mist>.wash{opacity:.22}
.hero.light .hero-wash{opacity:.32}