.data-lens {
  --lens-top: 0px;
  --lens-available: calc(100svh - var(--lens-top));
  background: #081d31;
  color: #eef8ff;
}

.mast + main > .data-lens { --lens-available: calc(100svh - 5.0625rem); }

.proximity-section .data-lens {
  --lens-top: 5.5rem;
  width: 100vw;
  margin: clamp(2rem, 5vw, 4rem) calc((100% - 100vw) / 2);
}

.data-lens-figure {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.65rem, 2vw, 1.5rem);
  min-width: 0;
  margin: 0;
  padding: clamp(1.1rem, 3vw, 2.5rem) clamp(1rem, 6vw, 6rem);
  background: radial-gradient(ellipse at 50% 53%, #173e57, #081d31 70%);
}

.data-lens[data-ready] {
  min-height: 245svh;
}

.data-lens[data-ready] .data-lens-figure {
  position: sticky;
  top: var(--lens-top);
  height: var(--lens-available);
}

.data-lens-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem 1rem;
}

.data-lens-heading h1 {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: none;
  margin: 0;
  color: #eef8ff;
  font: 700 clamp(1.75rem, 4vw, 3.6rem)/1.06 "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
}

.data-lens-heading a {
  grid-column: 2;
  grid-row: 1;
  color: #d5ebfc;
  font-size: .83rem;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.data-lens-kicker,
.data-lens-chapter {
  margin: 0;
  color: #a5defb;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.data-lens-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

.data-lens-art > * {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.data-lens:not([data-ready]) .data-lens-art {
  max-width: 56rem;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 840 / 500;
}

.data-lens-caption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .6rem 1.5rem;
}

.data-lens-caption strong {
  display: block;
  margin-top: .15rem;
  color: #eef8ff;
  font: 700 clamp(1.3rem, 2.8vw, 2.4rem)/1.08 "Space Grotesk", sans-serif;
  letter-spacing: -.025em;
}

.data-lens-caption [data-lens-description] {
  max-width: 52ch;
  margin: .35rem 0 0;
  color: #c4dcea;
  font-size: clamp(.83rem, 1.35vw, 1rem);
  line-height: 1.48;
}

.data-lens-controls { display: none; }

.data-lens[data-ready] .data-lens-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  color: #c4dcea;
  font-size: .83rem;
}

.data-lens-controls button {
  flex: none;
  min-height: 2.75rem;
  padding: .3rem .7rem;
  border: 1px solid #688da5;
  border-radius: 999px;
  background: #142f46;
  color: #e0f1fc;
  font: inherit;
  cursor: pointer;
}

.data-lens-controls button:focus-visible,
.data-lens-heading a:focus-visible {
  outline: 2px solid #a1defd;
  outline-offset: 3px;
}

.data-lens-progress {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: #2b4c63;
}

.data-lens-progress span {
  display: block;
  height: 100%;
  background: #a1defd;
  transform: scaleX(0);
  transform-origin: left;
}

.data-lens:not([data-ready]) .data-lens-progress { display: none; }

.data-lens-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  padding: 1rem clamp(1rem, 6vw, 6rem) 2rem;
}

.data-lens[data-ready]:not([data-static]) .data-lens-steps {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.data-lens-step {
  padding-left: 1rem;
  border-left: 2px solid #517992;
  color: #c4dcea;
}

.data-lens-step > span { color: #a5defb; font-size: .8rem; }
.data-lens-step h3 { margin: .25rem 0; color: #eef8ff; }
.data-lens-step p { margin: 0; max-width: 39ch; line-height: 1.55; }

.data-lens[data-static] { min-height: 0; }
.data-lens[data-static] .data-lens-figure { position: relative; top: auto; height: auto; }
.data-lens[data-static] .data-lens-art { max-height: 52svh; aspect-ratio: 840 / 500; }
.data-lens[data-static] .data-lens-controls,
.data-lens[data-static] .data-lens-progress { display: none; }

@media (max-width: 680px) {
  .proximity-section .data-lens { --lens-top: 5.15rem; }
  .mast + main > .data-lens { --lens-available: calc(100svh - 4.5625rem); }
  .data-lens-caption { display: grid; }
  .data-lens-controls button { min-height: 2.75rem; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .data-lens[data-ready] .data-lens-figure {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    padding-block: .7rem;
  }
  .data-lens-heading { grid-column: 1 / -1; }
  .data-lens-heading h1 { font-size: 1.55rem; }
  .data-lens-art { grid-row: 2 / 4; }
  .data-lens-caption { display: grid; grid-row: 2 / 4; align-content: center; }
}