/* ============================================================
   RESULTS, metrics set at display scale
   ============================================================ */

.results { background: var(--ink); color: var(--on-dark); }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark);
}

.metric {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
}
.metric:last-child { border-right: 0; padding-right: 0; }

.metric__v {
  font-family: var(--font-display);
  font-size: var(--fs-metric);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: var(--on-dark);
  display: flex;
  align-items: baseline;
}
.metric__suffix { color: var(--bronze-lite); }

.metric__t {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  color: var(--on-dark);
}
.metric__d {
  margin-top: 0.55rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--on-dark-2);
  max-width: 30ch;
}

.results__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  line-height: 1.8;
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; padding-right: 0; }
}