/* B&W editorial placeholders rendered via inline SVG data-URIs.
   Each placeholder has a soft tonal gradient + monospace label so it's
   obvious where a real photo should go, but it still reads as elegant
   editorial when viewed at scale. */

/* generic gradient placeholders, varied composition cues */
.ph-a { background-image: linear-gradient(140deg, #1a1a1a 0%, #3a3a3a 40%, #6a6a6a 100%); }
.ph-b { background-image: linear-gradient(160deg, #0a0a0a 0%, #2a2a2a 50%, #888 100%); }
.ph-c { background-image: linear-gradient(120deg, #2a2a2a 0%, #555 50%, #aaa 100%); }
.ph-d { background-image: linear-gradient(180deg, #1f1f1f 0%, #4a4a4a 60%, #7a7a7a 100%); }
.ph-e { background-image: linear-gradient(135deg, #0d0d0d 0%, #333 45%, #999 100%); }
.ph-f { background-image: linear-gradient(155deg, #2c2c2c 0%, #6a6a6a 70%, #c0c0c0 100%); }
.ph-g { background-image: linear-gradient(170deg, #141414 0%, #2c2c2c 30%, #5a5a5a 70%, #969696 100%); }
.ph-h { background-image: linear-gradient(110deg, #0a0a0a 0%, #444 50%, #b0b0b0 100%); }

/* Texture overlay using SVG noise */
.ph-noise::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

/* Subtle subject silhouettes drawn with SVG to suggest editorial photography */
.ph-figure-1 {
  background-image:
    radial-gradient(ellipse 35% 50% at 50% 55%, rgba(0,0,0,0.45), transparent 70%),
    linear-gradient(160deg, #1c1c1c 0%, #555 50%, #c8c8c8 100%);
}
.ph-figure-2 {
  background-image:
    radial-gradient(ellipse 30% 40% at 35% 60%, rgba(0,0,0,0.5), transparent 70%),
    radial-gradient(ellipse 25% 35% at 70% 50%, rgba(0,0,0,0.35), transparent 70%),
    linear-gradient(140deg, #0f0f0f 0%, #444 50%, #aaa 100%);
}
.ph-figure-3 {
  background-image:
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(0,0,0,0.5), transparent 70%),
    linear-gradient(180deg, #2a2a2a 0%, #6a6a6a 60%, #b6b6b6 100%);
}
.ph-figure-4 {
  background-image:
    radial-gradient(circle 40% at 40% 40%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(120deg, #050505 0%, #2c2c2c 50%, #707070 100%);
}
.ph-figure-5 {
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 65%, rgba(0,0,0,0.55), transparent 75%),
    linear-gradient(200deg, #1a1a1a 0%, #555 60%, #9c9c9c 100%);
}
.ph-figure-6 {
  background-image:
    radial-gradient(ellipse 40% 55% at 60% 40%, rgba(0,0,0,0.45), transparent 70%),
    linear-gradient(150deg, #111 0%, #3a3a3a 40%, #888 100%);
}
.ph-figure-7 {
  background-image:
    radial-gradient(ellipse 30% 50% at 40% 50%, rgba(0,0,0,0.5), transparent 65%),
    radial-gradient(ellipse 25% 40% at 65% 60%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(130deg, #0a0a0a 0%, #404040 50%, #a8a8a8 100%);
}
.ph-figure-8 {
  background-image:
    radial-gradient(ellipse 70% 25% at 50% 85%, rgba(0,0,0,0.5), transparent 70%),
    linear-gradient(170deg, #161616 0%, #4a4a4a 50%, #b0b0b0 100%);
}

/* The actual node that paints the image takes one of these classes */
.img.ph { position: absolute; inset: 0; }
.img.ph::after {
  content: attr(data-caption);
  position: absolute;
  left: 16px; top: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  z-index: 3;
  mix-blend-mode: difference;
}