/* The closing divider, after the White Desert reference: two large pictures
   side by side on white, set to different depths so they never line up, with
   the headline under one and the comment under the other. The two columns
   travel at slightly different rates on scroll, so the pair slides past each
   other rather than moving as one block. */

.impact-close {
  /* The pair starts level — dead in line as they come into view — and only
     separates as they travel up the screen. Any resting offset here would show
     as a step between them before the slide has begun. */
  --close-offset: 0px;
  /* Shared with the scroll script and the clearance beneath the right image. */
  --close-travel: 130px;
  /* The six site rules run over the photographs here rather than over flat
     colour, where they read heavier against the detail. Carried lighter. */
  --lines-band: .55;
  position: relative;
  z-index: 2;
  display: grid;
  /* Touching, and edge to edge: no gap and no side padding, so the two pictures
     meet on the centre line and run off both sides of the page. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: clamp(9rem, 18svh, 16rem) 0 clamp(6rem, 14vh, 12rem);
  background: #fff;
  color: #19141f;
  overflow: clip;
}

.impact-close__col { display: grid; align-content: start; min-width: 0; }

/* Tall image windows give the closing pair a slower, more cinematic pass. */
.impact-close__figure {
  margin: 0;
  height: 128svh;
  overflow: hidden;
  background: #ece9ef;
  transform: translate3d(0, calc(var(--base, 0px) + var(--drift, 0px)), 0);
  will-change: transform;
}
.impact-close__col--trail .impact-close__figure { --base: var(--close-offset); }

.impact-close__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06) translate3d(0, var(--push, 0px), 0);
  will-change: transform;
}
/* The alpine frame is 4:3 and the summit 16:9, so a shared ratio crops one of
   them hard. Hold each to the part that carries the picture: the line of
   climbers sits low in the alpine frame, the raised arms high in the summit. */
.impact-close__col--lead .impact-close__figure img { object-position: 50% 32%; }
.impact-close__col--trail .impact-close__figure img { object-position: 50% 62%; }

.impact-close__title {
  max-width: 22ch;
  margin: clamp(3rem, 8vh, 7rem) 0 0;
  padding-right: clamp(1rem, 4vw, 4rem);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 3.1vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* The offset figure hangs below its column, so the note clears it by the
   offset as well as its own space — otherwise the picture would sit on it. */
.impact-close__note {
  max-width: 34rem;
  margin: calc(clamp(5rem, 13vh, 11rem) + var(--close-offset) + var(--close-travel)) 0 0;
  padding-right: clamp(1rem, 4vw, 4rem);
  color: #4a434f;
}
.impact-close__mark { display: block; margin-bottom: -1.4rem; color: #b9a8cd; font-family: "Playfair Display", Georgia, serif; font-size: 3rem; line-height: 1; }
.impact-close__note blockquote {
  margin: 0 0 1.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
}
.impact-close__note figcaption {
  color: #7d7683;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The pictures run off both page edges; only the copy is inset. */
.impact-close__col--lead .impact-close__title { padding-left: clamp(1.25rem, 4vw, 5rem); }
.impact-close__col--trail .impact-close__note { padding-left: clamp(1.25rem, 3vw, 3rem); }

/* One column on a phone: side by side at half width would make both pictures
   too small to carry the page out, so the offset is dropped and they stack. */
@media (max-width: 800px) {
  .impact-close { --close-offset: 0px; --close-travel: 0px; grid-template-columns: minmax(0, 1fr); padding-top: clamp(7rem, 14svh, 10rem); padding-bottom: clamp(4rem, 10vh, 7rem); }
  .impact-close__col--trail { padding-top: clamp(3rem, 8vh, 5rem); }
  .impact-close__figure { height: 98svh; transform: none; }
  .impact-close__title { margin-top: clamp(2rem, 6vh, 3.5rem); font-size: clamp(1.5rem, 6.4vw, 2.4rem); }
  .impact-close__note { margin-top: clamp(2.5rem, 7vh, 4rem); padding-left: clamp(1.25rem, 4vw, 5rem); }
  .impact-close__col--lead .impact-close__title { padding-left: clamp(1.25rem, 4vw, 5rem); }
}

/* The offset is the layout, not the motion, so it survives here — only the
   sliding stops. */
@media (prefers-reduced-motion: reduce) {
  .impact-close__figure { --drift: 0px; }
  .impact-close__figure img { transform: none; }
}