/* Ink mask scroll (see part.js). Both layers share one grid cell; the generated .inkscroll__layer svg
   (mask + noise filter + your art) sits on top of the base. Give .inkscroll a size (aspect-ratio or height). */
.inkscroll {
  display: grid;
  position: relative;
  overflow: hidden;
  --ink-progress: 0; /* written by part.js, 0..1, for anything else you want to key off the reveal */
}
.inkscroll > * {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.inkscroll__base { position: relative; z-index: 1; }
.inkscroll__base > img,
.inkscroll__base > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.inkscroll__layer { position: relative; z-index: 2; display: block; pointer-events: none; overflow: hidden; }
/* before part.js runs (or if it fails) the art is not shown, so the page reads as the base */
.inkscroll > .inkscroll__top { visibility: hidden; }