/* Masked parallax. A full-bleed picture drifts inside a fixed window as the window scrolls past.
   Measured from Sadewa's About "story" photo (teardown 09-30): window 800px tall at 1440 (a 1440:800 ratio
   that holds down to 217px on a phone), picture 300px taller than the window and parked 300px up, then pushed
   down 0 -> 300px over the 1800px of scroll after the window's top enters the screen: 1/6 of the scroll speed.
   part.js sets --mpar-travel from rate x range; the CSS here only sizes and parks the picture. */
.mpar {
  --mpar-h: min(800px, 55.56vw);   /* window height: 800px, or the 1440:800 ratio on narrower screens */
  --mpar-travel: 300px;            /* how far the picture drifts (part.js writes rate x range here) */
  position: relative;
  height: var(--mpar-h);
  overflow: hidden;
  contain: paint;
}
.mpar__media {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--mpar-travel));
  width: 100%;
  height: calc(100% + var(--mpar-travel));
  object-fit: cover;               /* for <img> / <video>; an inline <svg> uses preserveAspectRatio="... slice" */
  display: block;
  will-change: transform;
  transform-origin: 50% 50%;
}