.profile-archive-stack,
.profile-archive-stack * {
  box-sizing: border-box;
}

.profile-archive-stack {
  --profile-archive-scale: 0.333333;
  width: min(400px, 30vw);
  min-width: 240px;
  position: absolute;
  top: clamp(7.5rem, 10vh, 9rem);
  left: clamp(1.5rem, 4vw, 4rem);
  z-index: 20;
  transform: scale(var(--profile-archive-scale));
  transform-origin: top left;
  transition: transform 0.25s ease;
}

.profile-archive-stack:hover {
  transform: scale(var(--profile-archive-scale)) rotate(5deg);
}

.profile-archive-card {
  padding: 5% 5% 15%;
  border: 4px solid #111;
  background-color: #fff;
  color: #111;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

.profile-archive-card::before,
.profile-archive-card::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 4px solid #111;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.profile-archive-card::before {
  transform: translateY(-2%) rotate(-6deg);
}

.profile-archive-card::after {
  transform: translateY(2%) rotate(6deg);
}

.profile-archive-stack:hover .profile-archive-card::before {
  transform: translateY(-2%) rotate(-4deg);
}

.profile-archive-stack:hover .profile-archive-card::after {
  transform: translateY(2%) rotate(4deg);
}

.profile-archive-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 4px solid #111;
  background-color: #eee;
  position: relative;
  overflow: hidden;
}

.profile-archive-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-archive-caption {
  margin: 0;
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 3.5%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.72rem, 1vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
}

@media (max-width: 767px) {
  .profile-archive-stack {
    width: min(72vw, 330px);
    min-width: 0;
    top: 6.5rem;
    left: 1rem;
  }

  .profile-archive-stack:hover {
    transform: scale(var(--profile-archive-scale)) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-archive-stack,
  .profile-archive-card::before,
  .profile-archive-card::after {
    transition: none;
  }
}