/* =====================================================================
   photo.css: photo placeholder blocks
   ---------------------------------------------------------------------
   A .photo element is a colored box with a small label until a real
   image is added. Pick its color with an inline --tone, e.g.
     <li class="photo" style="--tone: var(--photo-2)">
   Put an <img> inside it and the image fills the box (object-fit: cover).
   Used by landing.html (date photos) and venue.html (venue photo).
   ===================================================================== */

.photo {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--tone, var(--photo-1));
  display: grid; place-items: center;
}
.photo__label {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(43, 42, 38, .55); text-align: center; padding: 0 12px;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }