.metrics {
  background: var(--ink-2);
  border-block: 1px solid var(--ink-line);
  color: var(--on-ink);
}
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.metric {
  padding: clamp(2rem, 4vw, 2.9rem) clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--ink-line);
  transition: background .45s var(--ease);
}
.metric:first-child { border-left: 0; }
.metric:hover { background: rgba(246,244,240,.025); }
.metric__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  line-height: 1; color: var(--on-ink);
  display: flex; align-items: baseline; gap: .06em;
}
.metric__num .suf { color: var(--gold); font-size: .55em; }
.metric__label {
  margin-top: .85rem; font-size: .875rem; line-height: 1.5;
  color: rgba(246,244,240,.78); letter-spacing: -.002em; max-width: 24ch;
}

@media (max-width: 860px) {
  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
}
@media (max-width: 640px) {
  .metrics__grid { grid-template-columns: 1fr; }
  .metric { border-left: 0; border-top: 1px solid var(--ink-line); }
  .metric:first-child { border-top: 0; }
}