/* ============================================================
   Prolific Society — atmosphere.

   ONE FLUSH PHOTO behind the whole page, in a real fixed DIV, with
   a LIGHT scrim over it. Each page sets its own image on
   .page-bg-img; every band is transparent so the single photo reads
   continuously from header to footer.

   TWO mistakes were made here before this version, both worth
   keeping written down:

   1. The scrim ran at 0.78–0.94 and buried the photograph. It is
      ~0.34 through the middle now. The photo IS the page; legibility
      is carried by solid cards and by a local veil behind copy that
      sits on the image — never by darkening the whole picture.

   2. The photo was painted with `body::before { z-index:-2 }` while
      body still had an opaque background colour. The colour painted
      straight over the photo and nothing showed. A negative-z-index
      pseudo-element cannot be relied on to sit behind a painted
      background — hence the real .page-bg div, which is what
      prolificgrowthpartners.com does.
   ============================================================ */

:root{
  --ps-gold:#c9a227;
  --ps-gold-lt:#e4c766;
  --ps-ink:#08152b;
  --ps-ink-deep:#040c1a;
  --ps-card:#122544;                 /* SOLID card fill */
  --ps-card-2:#0d1c34;
  --ps-line:#2b4671;
  --ps-txt:#f4f7fd;
  --ps-dim:#c2cee5;                  /* lifted: this sits over a photo */
  --ps-dim2:#94a5c4;
  --ps-shadow:2,7,20;
}

/* the base colour lives on html; body must stay transparent so the
   photo behind it is visible */
html{ background-color:var(--ps-ink); }
body{ background-color:transparent; color:var(--ps-txt); }

/* ---- the fixed photo layer ---- */
.page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.page-bg-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:saturate(1.1) contrast(1.05) brightness(var(--ps-photo-dim, 1));
}
/* light, near-uniform scrim — heavier only at the very top and bottom
   where the sticky header and the footer need separation */
.page-bg-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,17,36,.60) 0%,
    rgba(6,17,36,.34) 20%,
    rgba(6,17,36,.34) 76%,
    rgba(4,12,26,.70) 100%);
}

/* ---- everything else sits ABOVE the photo and never paints over it ---- */
header, main, footer{ position:relative; z-index:1; }
main > section{ position:relative; background-color:transparent; }
main > section > *{ position:relative; z-index:1; }
.band{ background-color:transparent; }

/* ---- copy sitting straight on the photo ----
   A text-shadow alone is not enough over a busy image, so each block
   also gets a soft radial veil that darkens the photo locally and
   fades to nothing — the picture still reads everywhere there is no text. */
.on-photo{
  position:relative;
  text-shadow:0 2px 18px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9);
}
.on-photo::before{
  content:''; position:absolute; inset:-30px -46px; z-index:-1;
  pointer-events:none; border-radius:34px;
  background:radial-gradient(68% 78% at 50% 50%,
    rgba(6,13,26,.88) 0%, rgba(6,13,26,.70) 46%, rgba(6,13,26,0) 100%);
}
@media(max-width:700px){ .on-photo::before{ inset:-20px -24px; } }