/* Static, cached print grain. Background painting stays beneath readable content. */
:root {
  --grain-dark: url("../textures/grain-dark.png");
  --grain-light: url("../textures/grain-light.png");
  --grain-art: url("../textures/grain-art.png");
  --grain-size: 192px 192px;
}

body,
body.career-page,
.services,
.about,
.content-matters,
.selected-stories,
.selected-stories .mf-story-scene,
.clients,
.careers-teaser,
.contact,
.career-page .footer {
  background-image: var(--grain-dark);
  background-size: var(--grain-size);
  background-repeat: repeat;
}

/* White grain on navy; brand blue keeps dark-only grain to protect white text. */
body:not(.career-page),
.content-matters,
.selected-stories .mf-story-reporting,
.contact,
.career-page .footer {
  background-image: var(--grain-light);
}

/* The existing shade already sits between the globe/stars and the hero content. */
.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain-dark) repeat 0 0 / var(--grain-size);
  opacity: .3;
  pointer-events: none;
}

/* Keep the two exact Careers shapes, adding texture inside their silhouettes. */
.careers-teaser .careers-portrait--minimal::before,
.careers-teaser .careers-portrait--minimal::after {
  background-image: var(--grain-art);
  background-size: var(--grain-size);
  background-repeat: repeat;
}

.studio-portrait.has-art-grain,
.mf-story-art.has-art-grain,
.career-page-visual.has-art-grain {
  position: relative;
  isolation: isolate;
}

/* Only this decorative layer is masked. Original image alpha remains untouched. */
.studio-portrait.has-art-grain:not(.careers-portrait--minimal)::after,
.mf-story-art.has-art-grain::after,
.career-page-visual.has-art-grain::after,
.careers-portrait--minimal.has-art-grain > .art-grain {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--grain-art) repeat 0 0 / var(--grain-size);
  opacity: .65;
  pointer-events: none;
  -webkit-mask-image: var(--art-grain-mask, linear-gradient(transparent, transparent));
  mask-image: var(--art-grain-mask, linear-gradient(transparent, transparent));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

@media (forced-colors: active), (prefers-contrast: more), print {
  body,
  .services,
  .about,
  .content-matters,
  .selected-stories,
  .selected-stories .mf-story-scene,
  .clients,
  .careers-teaser,
  .contact,
  .career-page .footer,
  .careers-teaser .careers-portrait--minimal::before,
  .careers-teaser .careers-portrait--minimal::after {
    background-image: none !important;
  }
  .hero-shade::after,
  .studio-portrait.has-art-grain:not(.careers-portrait--minimal)::after,
  .mf-story-art.has-art-grain::after,
  .career-page-visual.has-art-grain::after,
  .careers-portrait--minimal.has-art-grain > .art-grain {
    display: none;
  }
}