.chapter-three-archive-page {
  --paper: #f4f3f5;
  --accent: #2c8e82;
  overflow: hidden;
  background: var(--paper);
}

.chapter-three-archive-page .chapter-header,
.chapter-three-archive-page .chapter-index-footer { border: 0; }

.chapter-three-archive-page .chapter-header,
.chapter-three-archive-page .chapter-index-footer { background: rgba(244, 243, 245, .96); }

.chapter-three-archive-page .index-introduction { width: min(315px, 24vw); }
.chapter-three-archive-page .index-introduction__subtitle { max-width: 260px; }
.chapter-three-archive-page .index-introduction__zh { max-width: 260px; }

.chapter-three-archive-page .scene-field__background {
  color: transparent;
  font-size: clamp(70px, 12vw, 190px);
  -webkit-text-stroke-color: rgba(44, 142, 130, .11);
}

.chapter-three-archive-page .scene-card__image { aspect-ratio: 1.406; }
.chapter-three-archive-page .scene-card img {
  object-fit: contain;
  background: transparent;
  filter: saturate(.82) contrast(.98);
}

.chapter-three-archive-page .scene-card:hover img,
.chapter-three-archive-page .scene-card:focus-within img,
.chapter-three-archive-page .scene-card.is-active img {
  filter: saturate(1.04) contrast(1.01);
}

.chapter-three-archive-page .focus-preview {
  max-width: min(43vw, 760px);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.chapter-three-archive-page .focus-preview img {
  width: min(43vw, 760px);
  max-width: min(43vw, 760px);
  max-height: 58vh;
  object-fit: contain;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.chapter-three-archive-page .focus-preview figcaption { grid-template-columns: 45px 1fr auto; }
.chapter-three-archive-page .index-readout h2 { font-size: clamp(18px, 1.65vw, 28px); }

.chapter-three-original-link {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 0;
  border: 0;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chapter-three-original-link:hover { color: var(--accent); }

@media (max-width: 900px) {
  .chapter-three-archive-page { overflow-y: auto; }
  .chapter-three-archive-page .scene-card img { filter: saturate(.94) contrast(.99); }
  .chapter-three-original-link { margin-bottom: 8px; }
}