/* =========================================================
   STUDIO BANNER — a photo behind each page's opening (hero) text.
   Photo is black & white at 30% opacity with a colour wash on top.
   Drop photos in /images/banners/ (see README.txt there).
   ========================================================= */
:root{
  --sb-wash: linear-gradient(120deg, rgba(255,46,126,.22) 0%, rgba(120,30,80,.16) 55%, rgba(205,163,93,.18) 100%);
}
:root[data-theme="light"]{
  --sb-wash: linear-gradient(120deg, rgba(216,27,103,.14) 0%, rgba(229,66,127,.08) 55%, rgba(164,122,44,.14) 100%);
}

/* sits inside the hero section, under its text and slider; fades into the page at the bottom */
.studio-banner{
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.studio-banner img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: .3;
}
.studio-banner::after{ content:""; position: absolute; inset: 0; background: var(--sb-wash); }