#archive figure.reveal {
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 18px;
  padding: 10px;
  background: color-mix(in oklab, var(--card) 72%, transparent);
  box-shadow: 0 18px 45px #0000003d, inset 0 1px 0 #ffffff0f;
  transition:
    opacity 1.2s cubic-bezier(.2, .7, .2, 1),
    transform 1.2s cubic-bezier(.2, .7, .2, 1),
    box-shadow .45s ease,
    border-color .45s ease,
    background-color .45s ease;
}

#archive figure.reveal.in:hover {
  transform: translateY(-8px);
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  background: color-mix(in oklab, var(--card) 86%, transparent);
  box-shadow: 0 30px 70px #00000059, inset 0 1px 0 #ffffff14;
}

#archive figure.reveal > div.relative {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 28px #00000040;
}

#archive figure.reveal img {
  border-radius: 14px;
}