:root {
  --ink: #000000;
  --paper: #ffffff;
  --light: #ffffff;
  --muted: rgba(255,255,255,0.74);
  --accent: #f92a00;
  --display: 'Bomstad Display', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.015em;
  --hero-viewports: 13;
  --scrim-side: 0.78;
  --scrim-top: 0.52;
}
.scroll-section { height: calc(var(--hero-viewports) * 100vh); }
.scroll-scrim {
  background:
    linear-gradient(to right, rgba(6,10,22,var(--scrim-side)) 0%, rgba(6,10,22,calc(var(--scrim-side) * 0.54)) 38%, rgba(6,10,22,0) 68%),
    linear-gradient(to bottom, rgba(6,10,22,var(--scrim-top)) 0%, rgba(6,10,22,0) 32%);
}

/* On a phone the copy has no empty column to sit in: it is full width over the picture, so the
   scrim has to carry it. A side gradient does nothing there. This darkens only the band the words
   occupy and leaves the rest of the film alone. */
@media (max-width: 767px) {
  .scroll-scrim {
    background: linear-gradient(
      to bottom,
      rgba(6,10,22,0.88) 0%,
      rgba(6,10,22,0.76) 26%,
      rgba(6,10,22,0.34) 48%,
      rgba(6,10,22,0.06) 64%,
      rgba(6,10,22,0) 76%
    );
  }
}