/* iPad frame on a flat colour field, for case-study screenshots.
   Markup: <div class="project-image device-stage" style="--stage: #…"><span class="ipad-frame"><img …></span></div> */

.device-stage {
    display: flex;
    align-items: center;
    padding: 8% 9%;
    background: var(--stage, #e6eeee);
}
/* padding % resolves against the row, which is twice the stage width */
.project-image-row .device-stage { padding: 6% 3.6%; }

.ipad-frame {
    position: relative;
    display: block;
    width: 100%;
    padding: 2.4%;
    /* elliptical radius keeps the corners round on a 4:3 frame */
    border-radius: 5% / 6.6%;
    background: #1b1f21;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ipad-frame::before { /* front camera, on the long side in landscape */
    content: '';
    position: absolute;
    left: 1.05%;
    top: 50%;
    width: 0.55%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3a4145;
    transform: translateY(-50%);
}
.ipad-frame img { border-radius: 2.4% / 3.2%; }

/* Software windows and panels that bring their own chrome: just the colour field.
   Markup: <div class="project-image shot-stage" style="--stage: #…"><img …></div> */
.shot-stage { display: flex; align-items: center; justify-content: center; padding: 7%; background: var(--stage, #e6eeee); }
.project-image-row .shot-stage { padding: 6% 4%; }