/* 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%;
}
/* Pass mode (data-mpar-mode="pass"): the media fills the frame exactly and part.js scales it up for its overscan
   (A = 1 + clamp(H x 60%, 40, 480) / H) instead of making it taller. Size the frame with --mpar-h (or any height /
   aspect-ratio); --mpar-radius rounds it (the source's photo frames: 16px). */
.mpar[data-mpar-mode="pass"] { border-radius: var(--mpar-radius, 0); }
.mpar[data-mpar-mode="pass"] .mpar__media { top: 0; left: 0; width: 100%; height: 100%; }