/* Black editorial statistics with a scroll-driven arc of project photographs. */
.impact-scroll {
  --impact-step: 52svh;
  --impact-space: 24svh;
  --impact-tail: clamp(64px, 12svh, 160px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #000;
  color: #fff;
}
.impact-surface,
.impact-theme-shade,
.impact-outro-surface {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.impact-surface { z-index: 0; }
.impact-outro-surface { z-index: 1; background: #fff; }
.insights.impact-next-section {
  position: relative;
  isolation: isolate;
  background: #000;
  color: #fff;
}
.impact-next-section > .impact-outro-surface { z-index: -1; }
.insights.impact-next-section--light { color: #000; }
.impact-next-section:not(.impact-next-section--light) .button-dark { background: #fff; color: #000; }
.about-story-panel.impact-theme-panel { position: relative; isolation: isolate; }
.impact-theme-shade { z-index: -1; }
.impact.impact-orbit {
  z-index: 2;
  display: block;
  height: auto;
  min-height: 100svh;
  padding: var(--impact-space) var(--gutter) var(--impact-tail);
  background: transparent;
  color: inherit;
}
.impact-orbit .impact-heading {
  position: absolute;
  top: 9svh;
  left: var(--gutter);
  width: 28%;
  font-size: min(2.083333vw, 4svh);
  line-height: 1.12;
  text-align: start;
  text-transform: uppercase;
}
.impact-layout {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 46fr);
  gap: 8%;
  align-items: start;
  direction: ltr;
}
.impact-gallery {
  position: sticky;
  top: 10svh;
  grid-column: 1;
  min-width: 0;
}
.impact-orbit-wheel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.impact-orbit-frame { width: 100%; aspect-ratio: 1; margin: 0; overflow: hidden; }
.impact-orbit-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.impact-orbit .statistics {
  display: block;
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
.impact-orbit .statistics > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  height: var(--impact-step);
  padding: 0;
  border: 0;
  text-align: left;
}
.impact-orbit .statistics > div:last-child {
  height: auto;
  min-height: calc(var(--impact-step) * .65);
}
.impact-orbit .statistics dd {
  order: -1;
  font-size: min(clamp(80px, 9.166667vw, 176px), 18svh);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  text-align: inherit;
}
.impact-orbit .statistics dt {
  margin-inline-start: clamp(28px, 5vw, 96px);
  font-size: min(clamp(32px, 4.166667vw, 80px), 9svh);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.025em;
  opacity: .82;
}
.impact-scroll--animated { background: #f4f4ea; color: #000; }
.impact-scroll--animated.impact-scroll--dark { color: #fff; }
.impact-scroll--animated .impact-layout { display: block; }
.impact-scroll--animated .statistics { width: 46%; margin-left: 54%; }
.impact-scroll--animated .impact-gallery { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.impact-scroll--animated .impact-orbit-drift { position: absolute; top: 120svh; left: 0; width: 0; height: 0; }
.impact-scroll--animated .impact-orbit-wheel { position: absolute; top: 0; left: 0; display: block; width: 0; height: 0; transform-origin: 0 0; }
.impact-scroll--animated .impact-orbit-frame { position: absolute; top: 0; left: 0; }
.impact-scroll--active .impact-orbit-wheel,
.impact-scroll--active .impact-orbit-drift { will-change: transform; }
html[dir='rtl'] .impact-orbit .impact-heading { text-align: right; line-height: 1.3; }
html[dir='rtl'] .impact-orbit .statistics { direction: rtl; }
html[dir='rtl'] .impact-orbit .statistics > div { text-align: right; }
html[dir='rtl'] .impact-orbit .statistics dt { line-height: 1.3; }
@media (max-width: 899px) {
  .impact-scroll { --impact-step: 36svh; --impact-space: 32svh; }
  .impact-orbit .impact-heading { top: 12svh; width: 38%; font-size: clamp(18px, 3.5vw, 28px); }
  .impact-orbit .statistics dd { font-size: clamp(48px, 15.4vw, 92px); }
  .impact-orbit .statistics dt { margin-inline-start: 16px; font-size: clamp(20px, 5.64vw, 36px); line-height: 1.12; }
  .impact-orbit-wheel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .impact-scroll--animated .impact-orbit-drift { top: 90svh; }
}
@media (max-height: 479px) {
  .impact-scroll { --impact-step: max(230px, 52svh); --impact-space: 80px; }
  .impact-orbit .impact-heading { top: 24px; font-size: 20px; }
  .impact-orbit .statistics dd { font-size: 64px; }
  .impact-orbit .statistics dt { font-size: 28px; }
}