/* Placeholder image patterns — subtle diagonal stripes with a caption */
.ph {
  position: relative;
  background-color: var(--ph-bg, #d4d2c4);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 12px,
    rgba(0, 0, 0, 0.04) 12px 13px
  );
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.ph::before {
  content: attr(data-label);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
  padding: 10px 12px;
  mix-blend-mode: multiply;
}
.ph.dark { --ph-bg: #3a4538; }
.ph.dark::before { color: rgba(255, 255, 255, 0.55); mix-blend-mode: screen; }
.ph.teal { --ph-bg: #8aa8a8; }
.ph.ocker { --ph-bg: #c9b38a; }
.ph.moss { --ph-bg: #a7b098; }