/* Keep every photograph inside its frame, with all four edges visible. */
.project-image {
  display: grid;
  place-items: center;
  height: clamp(260px, 34vw, 460px);
  background: #e9e5df;
}

.project-card:first-child .project-image,
.project-card:last-child:nth-child(even) .project-image {
  height: clamp(300px, 42vw, 620px);
}

.project-card .project-image img,
.project-card:first-child .project-image img,
.project-card:last-child:nth-child(even) .project-image img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
  transition: none;
}

.project-button:hover img { transform: none; }

/* Place the number and open control below the photograph. */
.project-aside { max-width: 35%; flex-shrink: 0; text-align: end; }
.project-aside .project-type { display: inline-block; max-width: 100%; }
.project-meta-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.project-index { position: static; padding: 0; border: 0; background: none; color: var(--muted); }
.project-open { position: static; width: 34px; height: 34px; font-size: 20px; border: 1px solid var(--line); background: var(--paper); }
.project-button:hover .project-open { transform: none; }

/* A rectangular hero frame preserves the photograph's corners. */
.hero-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  width: 100%;
  padding: 18px;
  border-radius: 3px;
  overflow: visible;
  background: #ebe7e0;
}
.hero-art::after { display: none; }
.hero-photo {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.art-top-label, .art-bottom-label, .art-coordinate {
  position: static;
  transform: none;
  color: #756874;
}
.art-top-label { grid-column: 1 / -1; margin-bottom: 14px; text-align: center; }
.art-bottom-label, .art-coordinate { margin-top: 12px; align-self: center; }
.art-coordinate { text-align: left; }

#dialog-image {
  width: 100%;
  height: clamp(220px, 56dvh, 620px);
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: #e9e5df;
}
.gallery-thumbnails img { object-fit: contain; background: #e9e5df; }

@media (max-width: 720px) {
  .project-image,
  .project-card:first-child .project-image,
  .project-card:last-child:nth-child(even) .project-image {
    height: clamp(240px, 70vw, 360px);
  }
  .hero-art { padding: 12px; }
  .project-meta-actions { gap: 8px; margin-top: 8px; }
  .project-open { width: 30px; height: 30px; font-size: 18px; }
  #dialog-image { height: clamp(200px, 50dvh, 460px); }
}