/* Compact monochrome project index; detail galleries retain their original colors. */
.project-index {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  max-width: 920px;
  margin: 24px auto 34px;
}

.project-index .project,
.project-index .project:first-child { grid-column: auto; position: relative; }

.project-index .image { background: #262826; }

.project-index .project img,
.project-index .project:first-child img {
  aspect-ratio: 1;
  filter: grayscale(1) contrast(1.06);
  transition: transform .45s ease, filter .35s ease;
}

.project-index .project:hover img,
.project-index .project:focus-visible img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.035);
}

.project-index .caption {
  position: absolute;
  inset: auto 0 0;
  align-items: end;
  min-height: 44%;
  padding: 38px 11px 10px;
  color: white;
  background: linear-gradient(transparent, rgba(12, 13, 12, .76));
  pointer-events: none;
}

.project-index .caption h2 {
  max-width: 95%;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
}

.project-index .caption span { display: none; }

@media (max-width: 760px) {
  .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
  .project-index .caption h2 { font-size: 14px; }
}