/* Museum pacing: each artifact receives its own field of view. */
@media (min-width: 841px) {
  .gallery-room {
    min-height: calc(100vh - 120px);
    padding-inline: clamp(36px, 5vw, 92px);
    overflow: visible;
  }

  .gallery-introduction {
    margin-bottom: clamp(3rem, 6vw, 5.5rem);
  }

  .collection-stage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 246px));
    align-items: start;
    justify-content: center;
    column-gap: clamp(3.5rem, 5.5vw, 6.75rem);
    row-gap: clamp(6rem, 9vw, 10rem);
    max-width: 1460px;
    padding: 1rem 1rem clamp(5rem, 8vw, 8rem);
  }

  .gallery-plaque,
  .gallery-plaque:nth-child(1),
  .gallery-plaque:nth-child(3) {
    --gallery-stagger: 0px;
    --gallery-angle: 1.6deg;
    width: 100%;
    max-width: 246px;
    transform: translateY(var(--gallery-stagger)) rotateY(var(--gallery-angle));
    transform-origin: center bottom;
  }

  .gallery-plaque:nth-child(even) {
    --gallery-stagger: 42px;
    --gallery-angle: -1.6deg;
  }

  .gallery-plaque:nth-child(4n + 3) { --gallery-angle: -1deg; }
  .gallery-plaque:nth-child(4n + 4) { --gallery-angle: 1deg; }

  .gallery-plaque:hover,
  .gallery-plaque:focus-visible {
    transform: translateY(calc(var(--gallery-stagger) - 12px)) rotateY(0deg) scale(1.035);
  }

  .plaque-image {
    width: 100%;
    aspect-ratio: .82 / 1;
    object-fit: cover;
    object-position: center;
  }

  .plaque-label {
    width: 94%;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .plaque-label strong {
    font-size: clamp(1rem, 1.35vw, 1.28rem);
  }

  .gallery-actions {
    max-width: 1380px;
    margin-top: clamp(1rem, 3vw, 3rem);
    padding-top: 1.5rem;
  }
}

@media (min-width: 841px) and (max-width: 1220px) {
  .collection-stage {
    grid-template-columns: repeat(3, minmax(0, 238px));
    column-gap: clamp(3rem, 7vw, 5.5rem);
  }
}

.placeholder-crystal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12%;
  text-align: center;
  background:
    linear-gradient(116deg, transparent 15%, rgba(255,255,255,.12) 23%, transparent 31%, transparent 70%, rgba(232,181,83,.1) 79%, transparent 86%),
    linear-gradient(180deg, rgba(18,17,14,.88), rgba(5,5,4,.96));
  border: 2px solid rgba(255,229,177,.62);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.05), inset 0 0 0 10px rgba(205,156,66,.2), 0 28px 48px rgba(0,0,0,.68);
}
.placeholder-crystal span { color: #d9af5c; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; }
.placeholder-crystal strong { margin: 18% 0 12%; color: #f2e9d8; font: 500 clamp(1.7rem, 3vw, 3rem)/1 Georgia, serif; }
.placeholder-crystal small { color: #b99a5d; font-size: .58rem; line-height: 1.7; letter-spacing: .16em; text-transform: uppercase; }
.gallery-plaque.in-preparation { filter: saturate(.7) brightness(.82); }
.gallery-plaque.in-preparation:hover, .gallery-plaque.in-preparation:focus-visible { filter: saturate(.82) brightness(.96); }

@media (max-width: 840px) {
  .collection-stage {
    gap: 12vw;
    padding-top: 2rem;
  }

  .gallery-plaque,
  .gallery-plaque:nth-child(1),
  .gallery-plaque:nth-child(3),
  .gallery-plaque:nth-child(even) {
    --gallery-stagger: 0px;
    --gallery-angle: 0deg;
    max-width: 390px;
    transform: none;
  }

  .plaque-image { aspect-ratio: .82 / 1; object-fit: cover; }
  .plaque-label { min-height: 104px; }
}