/* ─────────────────────────────────────────
   PAPER TEXTURE
   The multiply-blended paper texture laid over every section, the hero and the footer.
───────────────────────────────────────── */

.section::before,
.story-stage::before,   /* story.html: the texture sits on the fixed screen, so it never scrolls */
.hero::before,
main > .story-header::before,   /* story.html on phones: header above the timeline */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../assets/images/texture.jpg');
  background-size: 600px auto;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.section,
.hero,
.footer {
  position: relative;
}

/* keep all direct children above the texture */
.section > *,
.hero > *,
.footer > * {
  position: relative;
  z-index: 2;
}