/* Labelled image placeholders (handoff section 9), loaded on every designed page incl. the homepage.
   A placeholder keeps the final ratio of its image so the layout does not move when the image arrives. */
.drc-ph{display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;background:#d3dee3;border:1px solid #8ea6b1;color:#2d4c5a;padding:14px;width:100%}
.drc-ph-id{font:600 12px var(--tech);letter-spacing:1px;overflow-wrap:anywhere}
.drc-ph-meta{font:12px/1.4 var(--body);color:#4f6b78;max-width:28ch}

/* Homepage device explorer: one category composition per slide (3:2), sized to the stage height so the
   whole group stays visible. The slide animation moves only this layer; the workshop background stays put. */
.device-cutout.device-group{left:0;right:0;margin-inline:auto;width:min(94%,765px);height:auto;aspect-ratio:3/2;bottom:21px;object-fit:initial;filter:none;background:#d3dee3e6}
@media(max-width:850px){.device-cutout.device-group{width:min(94%,520px);bottom:15px}}
@media(max-width:420px){.device-cutout.device-group{width:min(94%,470px)}}

/* Final category compositions (CAT-*): same box as their placeholders, transparent artwork with the
   homepage's device shadow. */
img.device-cutout.device-group{background:none;object-fit:contain;filter:drop-shadow(0 20px 17px #0a1d334d)}