/* Bear Park — site-wide film grain (Josh, 11 Jul: "re-added to all
   backgrounds... super crisp and high res"). One 512px gaussian tile
   (assets/textures/grain.png) drawn at 256 CSS px, so 2x displays read
   it pixel-for-pixel - crisp, never mushy.

   Two strengths:
   - body::after   a quiet global pass over the whole page
   - .grainy       a stronger local pass for FLAT COLOUR grounds
                   (forest / orange bands), where the texture does the
                   most work. Add the class to the band's section. */

body::after {
  content: ""; position: fixed; inset: 0;
  z-index: 2147482600; /* above content, below the transition curtain */
  pointer-events: none;
  background: url("../assets/textures/grain.png") repeat;
  background-size: 256px 256px;
  opacity: .05;
  mix-blend-mode: overlay;
}

.grainy { position: relative; }
.grainy::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background: url("../assets/textures/grain.png") repeat;
  background-size: 256px 256px;
  opacity: .13;
  mix-blend-mode: overlay;
}
/* a band's own content sits above its grain */
.grainy > * { position: relative; z-index: 2; }

@media print { body::after, .grainy::after { display: none; } }