.page-hero-media {
  overflow-x: clip;
  overflow-y: visible;
}

.archive-section {
  background: var(--paper-deep);
}

.archive-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  margin-top: clamp(42px, 6vw, 72px);
}

.archive-card {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  position: relative;
}

.archive-card-wide {
  grid-row: span 2;
  min-height: 660px;
}

.archive-card:not(.archive-card-wide) {
  min-height: 320px;
}

.archive-card img,
.archive-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-card::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(to bottom, transparent, rgb(6 12 10 / .86));
  pointer-events: none;
}

.archive-card figcaption,
.archive-card .archive-caption {
  z-index: 1;
  position: absolute;
  inset: auto 0 0;
  padding: clamp(22px, 3vw, 38px);
}

.archive-card small {
  display: block;
  margin-bottom: 8px;
  color: var(--acid);
  font: 700 .73rem/1.2 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.archive-card strong {
  color: var(--white) !important;
  max-width: 19ch;
  font: italic 500 clamp(1.8rem, 3.2vw, 3.6rem)/.98 var(--serif);
  display: block;
}

.motion-archive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(42px, 6vw, 72px);
}

.motion-card {
  min-width: 0;
  background: var(--ink);
  color: var(--white);
  border: 1px solid rgb(255 255 255 / .12);
}

.motion-card video {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #041b25;
  object-fit: cover;
  display: block;
}

.motion-card figcaption {
  padding: 22px 24px 26px;
}

.motion-card small {
  color: var(--acid);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.motion-card strong {
  margin-top: 8px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.08;
  display: block;
}

@media (max-width: 800px) {
  .archive-grid,
  .motion-archive {
    grid-template-columns: 1fr;
  }

  .archive-card-wide {
    grid-row: auto;
    min-height: 440px;
  }

  .archive-card:not(.archive-card-wide) {
    min-height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}