.archive-page { min-height: 100svh; min-height: 100dvh; }
.archive-intro { position: absolute; top: 126px; left: var(--dels-edge); right: var(--dels-edge); display: grid; grid-template-columns: 57.3% 1fr; align-items: start; pointer-events: none; }
.archive-intro h1 { margin: 0; font-size: clamp(70px, 6.4vw, 94px); line-height: 1; font-weight: 400; letter-spacing: -.055em; text-transform: lowercase; }
.archive-copy { padding-top: 33px; max-width: 220px; font-size: 12px; line-height: 1.05; text-transform: uppercase; white-space: pre-line; }
.archive-track { position: fixed; inset: auto 0 0; display: flex; align-items: flex-end; gap: 8px; height: min(600px, calc(100svh - 290px)); padding: 0 var(--dels-edge) 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; overflow-anchor: none; cursor: grab; touch-action: pan-x; }
.archive-track::-webkit-scrollbar { display: none; }
.archive-track.is-dragging { cursor: grabbing; user-select: none; }
.archive-item { flex: 0 0 auto; width: calc(270px * var(--archive-ratio)); height: 270px; transition: width .65s cubic-bezier(.22,1,.36,1), height .65s cubic-bezier(.22,1,.36,1); }
.archive-item.is-expanded { width: calc(min(594px, 100svh - 306px) * var(--archive-ratio)); height: min(594px, calc(100svh - 306px)); }
.archive-card { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: color-mix(in srgb, var(--dels-ink) 10%, var(--dels-bg)); color: inherit; cursor: pointer; transform: scale(var(--archive-motion-scale, 1)); transform-origin: center; }
.archive-item.is-expanded .archive-card { transform: scale(1); }
.archive-card:focus-visible { outline: 2px solid var(--dels-ink); outline-offset: 2px; }
.archive-image, .archive-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-video { position: absolute; inset: 0; opacity: 0; }
.archive-card.is-playing .archive-video { opacity: 1; }
.archive-empty { position: fixed; bottom: 16px; left: var(--dels-edge); margin: 0; text-transform: uppercase; }
@media (min-width: 701px) and (max-width: 1300px) { .archive-intro { top: 142px; } }
@media (max-width: 700px) {
  .archive-page { overflow: clip; padding-top: 108px; }
  .archive-intro { position: static; display: block; margin: 0 var(--dels-edge); }
  .archive-intro h1 { font-size: 58px; line-height: 1; }
  .archive-copy { max-width: 250px; padding-top: 0; margin-top: 39px; line-height: 1.1; }
  .archive-track { position: static; display: flex; flex-direction: column; align-items: flex-end; height: auto; margin-top: 99px; padding: 0 var(--dels-edge) 8px; overflow: visible; cursor: auto; touch-action: pan-y; }
  .archive-item { width: min(63.3vw, 320px); height: auto; aspect-ratio: var(--archive-ratio); }
  .archive-item.is-expanded { width: calc(100vw - 16px); height: auto; }
  .archive-card { height: 100%; }
  .archive-card { transform: none; }
  .archive-empty { position: static; margin: 100px 8px 16px; }
}
@media (prefers-reduced-motion: reduce) { .archive-item { transition-duration: .01ms; } }

/* Tablet keeps the editorial introduction and scrolls media vertically. */
@media (min-width: 768px) and (max-width: 1024px) {
  .archive-page:where(:not(.dels-scene.is-route-preview *)) { padding-top: 142px; }
  .archive-page:where(:not(.dels-scene.is-route-preview *)) .archive-intro { position: relative; top: auto; left: auto; right: auto; margin-inline: var(--dels-edge); }
  .archive-page:where(:not(.dels-scene.is-route-preview *)) .archive-track { position: relative; inset: auto; flex-direction: column; align-items: flex-end; height: auto; gap: 22px; margin-top: 100px; overflow: visible; cursor: auto; touch-action: pan-y; }
  .archive-page:where(:not(.dels-scene.is-route-preview *)) .archive-item { width: calc((100% - 8px) / 2); height: auto; aspect-ratio: var(--archive-ratio); }
  .archive-page:where(:not(.dels-scene.is-route-preview *)) .archive-item.is-expanded { width: 100%; height: auto; }
  .archive-page:where(:not(.dels-scene.is-route-preview *)) .archive-card { transform: none; }
  .archive-page:where(:not(.dels-scene.is-route-preview *)) .archive-empty { position: static; margin: 100px var(--dels-edge) 16px; }
}