/* Story bands: section-level hooks on top of the ported design CSS.

   misfit/css/product-ui.css draws all three bands — .case-story with its
   floating element art, .unmask-story with the mask row, .suspects-story with
   the role cards — including every desktop override the design landed on. This
   file only re-points what the section's settings change. */

.case-story,
.unmask-story,
.suspects-story {
  background-color: var(--mm-story-bg, #070313);
}

/* pdp.css reserves 78px at the bottom of .misfit-page below 860px so the fixed
   buy bar cannot cover the end of the page. The design applies that once, to
   <body>; here every section root carries .misfit-page, so each band gives the
   space back at the design's own value and the last band on the template keeps
   the clearance for the whole page. The two dark bands pad their grid, not the
   section, so they take the space back entirely. */
@media (max-width: 860px) {
  .unmask-story.misfit-page,
  .suspects-story.misfit-page {
    padding-bottom: 0;
  }
}
@media (max-width: 800px) {
  .case-story.misfit-page {
    padding-bottom: 150px;
  }
}
@media (max-width: 480px) {
  .case-story.misfit-page {
    padding-bottom: 142px;
  }
}