/* Striped monospace placeholders for imagery we don't have yet */
.ph {
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.04) 0 2px,
    rgba(0, 0, 0, 0.00) 2px 14px
  ), linear-gradient(180deg, #d6cfbd 0%, #c8c0ab 100%);
  color: rgba(20, 18, 14, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ph--dark {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0 2px,
    rgba(255, 255, 255, 0.00) 2px 14px
  ), linear-gradient(180deg, #2a3027 0%, #1a1f18 100%);
  color: rgba(240, 235, 220, 0.75);
}
.ph--green {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0 2px,
    rgba(255, 255, 255, 0.00) 2px 14px
  ), linear-gradient(180deg, #3d5838 0%, #2a3d29 100%);
  color: rgba(240, 235, 220, 0.8);
}
.ph__label {
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
  backdrop-filter: blur(2px);
}