/* Approved R01 presentation (Play-Print Project). The source artwork and its
   paper margins stay as approved; only the page around them is styled.
   Owner corrections 2026-10-14: no captions or page numbers under the images,
   and one narrow gap between images, the same across and down. So the four
   mockups sit in the same two columns, gutters and --grid-gap as .project-media,
   each on a black square: the 4:5 image fills its height and shows at 80% of
   the width, which keeps the wider black at left and right asked for earlier. */
.project-mockup-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding: var(--section-space) var(--gutter); padding-inline: var(--gutter-start, var(--gutter)) var(--gutter-end, var(--gutter));
}
.project-mockup-stage {
  display: flex;
  justify-content: center;
  aspect-ratio: 1;
  margin: 0;
  background: #000;
}
.project-mockup-stage img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}
/* Phones: one column, as .project-media does. */
@media (max-width: 700px) {
  .project-mockup-gallery { grid-template-columns: minmax(0, 1fr); }
}