/* An original line drawing remains underneath each species reference photo.
   Reserve the existing photo geometry: lazy loading never changes card size. */
.bird-photo {
  display: block;
  position: relative;
  overflow: hidden;
  background: #ece7dd url('../images/bird-placeholder.svg') center / 140px auto no-repeat;
}
.bird-photo > img[data-bird-photo] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .18s ease, transform .6s ease;
}
.bird-photo[data-image-state="loading"] > img,
.bird-photo[data-image-state="error"] > img { opacity: 0; }
.card-image > .bird-photo, .detail-photo > .bird-photo { width: 100%; height: 100%; }
.bird-photo-note {
  position: absolute;
  bottom: 15px;
  left: 8px;
  right: 8px;
  text-align: center;
  color: #655e53;
  font-size: 10px;
  letter-spacing: .04em;
}
.bird-photo-note[hidden] { display: none; }
.checkin-bird > .bird-photo { aspect-ratio: 4 / 5; margin-top: 28px; }
.checkin-bird .bird-photo > img { position: absolute; inset: 0; margin: 0; }
.matched-bird > .bird-photo { width: 130px; height: 150px; background-size: 100px auto; }
@media (max-width: 620px) {
  .checkin-bird > .bird-photo { grid-row: 2 / 6; width: 108px; height: 130px; margin-top: 20px; background-size: 90px auto; }
  .matched-bird > .bird-photo { width: 105px; height: 130px; background-size: 90px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bird-photo > img[data-bird-photo] { transition: none; }
}