/* ============================================================================
   HOME PAGE — IMAGE PLACEHOLDERS (RR-authored, 2026-08-12)

   home-lab.css (verbatim copy of design-lab/assets/lab.css) styles real <img>
   elements for the hero portrait/scene, the about portrait, and the
   treatment cards. This site does NOT ship the design lab's photographs —
   they are AI-generated mockup crops with synthetic, unlicensed faces, and
   design-lab/index.html says outright they "NEVER deploy" (see that file's
   header comment). This stylesheet gives a neutral placeholder block the
   same box geometry the real <img> rules expect, so the layout/rhythm reads
   correctly until the Phase 2 shoot supplies real photography.
   ============================================================================ */

/* position:absolute + inset:0, matching how home-lab.css's own .hero__portrait
   img / .about__portrait img / .card img rules fill their (relative- or
   absolute-positioned) parent — a plain width/height:100% block would
   collapse in .about__portrait, whose height comes only from min-height. */
.ph-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface),
    var(--color-surface) 10px,
    var(--color-surface-deep) 10px,
    var(--color-surface-deep) 20px
  );
  border: var(--hairline);
  color: var(--color-text-subtle);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-mid);
  text-align: center;
  padding: var(--space-1);
}