.research-figures {
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 7.8vw, 9rem);
  background: #07111d;
  color: #f7f9fa;
}

.research-figures > header {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 6vw;
  align-items: end;
  margin-bottom: 3rem;
}

.research-figures h2 {
  margin: 0;
  font: 400 clamp(2.3rem, 4.4vw, 4.8rem)/1.04 Manrope, sans-serif;
  letter-spacing: -.05em;
}

.research-figures > header > p {
  margin: 0;
  color: #91a0ac;
  line-height: 1.7;
  font-size: .92rem;
}

.surface-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.surface-card {
  margin: 0;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.15);
  background: radial-gradient(circle at 70% 10%, rgba(203,168,106,.08), transparent 30%), #0b1b2b;
  overflow: hidden;
}

.surface-card canvas {
  display: block;
  width: 100%;
  height: 330px;
  cursor: grab;
  touch-action: none;
}

.surface-card canvas:active { cursor: grabbing; }

.surface-card figcaption {
  min-height: 78px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  border-top: 1px solid rgba(255,255,255,.12);
}

.surface-card figcaption b {
  color: #f2f5f6;
  font: 500 .88rem/1.3 Manrope, sans-serif;
}

.surface-card figcaption span,
.surface-card figcaption {
  color: #7f909c;
  font: 400 .65rem/1.45 "DM Mono", monospace;
}

.compact-surface { max-width: 610px; }
.compact-surface canvas { height: 245px; }
.compact-surface figcaption { min-height: 0; color: #82929d; }

@media (max-width: 1050px) {
  .surface-grid { grid-template-columns: 1fr; }
  .surface-card canvas { height: 390px; }
}

@media (max-width: 700px) {
  .research-figures > header { grid-template-columns: 1fr; gap: 1.5rem; }
  .surface-card canvas { height: 300px; }
  .compact-surface canvas { height: 220px; }
}