/* Temporary photo-selection presentation. Existing photo boxes keep their shape. */
.photo-placeholder-image {
  filter: none !important;
  opacity: 1 !important;
  object-position: center !important;
  scroll-margin-top: 144px;
}
.photo-slot-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 12px 8px;
  background: #292b27;
  color: #f0ebe0;
  text-align: center;
  pointer-events: none;
  font: 400 12px/1.45 var(--font-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
}
.photo-slot-label .photo-slot-ref {font-size: 12px; color: #d4b988; letter-spacing: .08em; white-space: nowrap;}
.photo-slot-label .photo-slot-purpose {font: 400 17px/1.35 var(--font-body, serif); max-width: 24ch; text-wrap: balance;}
.photo-slot-label .photo-slot-status {font-size: 11px; color: #d3d1c9;}
.photo-slot-label.is-compact {padding: 6px; gap: 3px;}
.photo-slot-label.is-compact .photo-slot-purpose {display: none;}
.photo-slot-label.is-compact .photo-slot-status {font-size: 10px;}
.photo-slot-label.photo-card-label {top: 24px; right: 24px; left: auto; transform: none; padding: 8px 12px;}
.photo-hero-note {
  position: relative;
  z-index: 7;
  width: fit-content;
  max-width: 100%;
  margin-top: 26px;
  padding: 10px 14px;
  border: 1px solid #5b5e52;
  background: #292b27;
  color: #f0ebe0;
  font: 400 12px/1.6 var(--font-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
}
.photo-hero-note strong {color: #d4b988; font-weight: 600; white-space: nowrap;}
@media (max-width: 600px) {
  .photo-slot-label {gap: 5px;}
  .photo-slot-label .photo-slot-purpose {font-size: 15px;}
}