/* Placeholder image well - striped, monospace label. Used for every [TAG]. */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  background-color: #0b0b0c;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.018) 0 2px,
      rgba(255,255,255,0) 2px 9px
    ),
    radial-gradient(ellipse at 30% 20%, rgba(15,71,97,0.22), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.8), transparent 70%);
  overflow: hidden;
  isolation: isolate;
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.ph-label {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
  z-index: 2;
}
.ph-corner {
  position: absolute;
  top: 12px; right: 14px;
  width: 18px; height: 18px;
  border-top: 1px solid rgba(255,255,255,0.28);
  border-right: 1px solid rgba(255,255,255,0.28);
  z-index: 2;
}
.ph-corner.bl {
  top: auto; right: auto;
  bottom: 12px; left: 14px;
  border-top: 0; border-right: 0;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  border-left: 1px solid rgba(255,255,255,0.28);
}
.ph-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.ph-watermark span {
  font-family: "Oswald", "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 6vw, 72px);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.04);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Ken-Burns slow drift on hero */
.ph-kenburns {
  position: absolute; inset: -6%;
  background-image:
    radial-gradient(ellipse at 40% 35%, rgba(15,71,97,0.38), transparent 55%),
    radial-gradient(ellipse at 65% 70%, rgba(122,10,10,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.04), transparent 55%),
    repeating-linear-gradient(120deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 11px),
    #050507;
  animation: kenburns 22s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes kenburns {
  0%   { transform: scale(1.00) translate(0,0); }
  100% { transform: scale(1.08) translate(-1.5%, -1.2%); }
}


/* ============================================================
   PHOTO PLACEHOLDERS - when .ph.has-photo is set, show the real image
   ============================================================ */
.ph.has-photo {
  background-image: none;
  background-color: #000;
}
.ph.has-photo .ph-watermark { display: none; }
.ph.has-photo::after {
  /* keep a subtle bottom-top grade so text overlays read */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.45) 100%);
}
.ph-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
/* Ken-Burns version drifts the photo itself */
.ph-photo.kenburns {
  animation: kenburns 22s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}
/* hide the legacy fake-gradient kenburns layer where a photo exists */
.ph.has-photo .ph-kenburns { display: none; }
/* label stays visible but lifts contrast on photos */
.ph.has-photo .ph-label {
  color: rgba(255,255,255,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.ph.has-photo .ph-corner {
  border-color: rgba(255,255,255,0.45);
}