/* Fade only a 2–4px strip of empty paper at the three artwork boundaries.
   Overlays retain the animated SVGs' visible overflow and all their motion.
   The Imagine host already multiplies: white resolves to the page beneath it. */
.fox-quiet-storybook .fox-playful-hero,
.fox-quiet-storybook .fox-imagine-art-selected,
.fox-quiet-storybook .fox-final-invitation {
  --fox-art-edge: clamp(2px, .4vw, 4px);
}
.fox-quiet-storybook .fox-playful-hero::after,
.fox-quiet-storybook .fox-imagine-art-selected::after,
.fox-quiet-storybook .fox-final-invitation::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --fox-art-edge-color: var(--fox-cream);
  background:
    linear-gradient(to right, var(--fox-art-edge-color), transparent) left / var(--fox-art-edge) 100% no-repeat,
    linear-gradient(to left, var(--fox-art-edge-color), transparent) right / var(--fox-art-edge) 100% no-repeat,
    linear-gradient(to bottom, var(--fox-art-edge-color), transparent) top / 100% var(--fox-art-edge) no-repeat,
    linear-gradient(to top, var(--fox-art-edge-color), transparent) bottom / 100% var(--fox-art-edge) no-repeat;
}
.fox-quiet-storybook .fox-imagine-art-selected::after {
  --fox-art-edge-color: #fff;
}
/* Overlay the reading image's existing grid cell without masking/resampling
   its pixels. Explicit placement preserves the original two-item arrangement. */
.fox-quiet-storybook .fox-final-invitation > img {
  grid-column: 2;
  grid-row: 1;
}
.fox-quiet-storybook .fox-final-invitation::after {
  position: static;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  align-self: end;
}
@media (max-width: 700px) {
  .fox-quiet-storybook .fox-final-invitation > img,
  .fox-quiet-storybook .fox-final-invitation::after {
    grid-column: 1;
    grid-row: 2;
  }
  .fox-quiet-storybook .fox-final-invitation::after {
    max-width: 440px;
    margin-inline: auto;
    align-self: center;
  }
}