/* Impact — the CV's numbers. Not in the reference: added because the proof
   is the strongest thing this portfolio has. */
.impact {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}
.metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 190px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric:nth-child(3n) { border-right: 0; }
.metric:nth-child(n + 4) { border-bottom: 0; }
.metric-n {
  font-size: var(--text-metric);
  line-height: var(--text-metric-lh);
  font-weight: 400;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-d {
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--muted);
  /* Two lines, broken by hand in the copy. Wrapping stays on, so a longer
     browser translation takes a third line instead of running into the next cell. */
  overflow-wrap: break-word;
}

@media (max-width: 1100px) { .metric { padding: 24px; min-height: 170px; } }
@media (max-width: 640px) {
  /* One column: the figure on the left, its two lines on the right — two
     columns at this width can't hold two lines of copy. */
  .impact { margin-top: 80px; gap: 28px; }
  .impact-grid { grid-template-columns: 1fr; }
  .metric {
    min-height: 0;
    padding: 18px;
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 16px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .metric:last-child { border-bottom: 0 !important; }
  .metric > .metric-n, .metric > .metric-top { flex: 0 0 112px; }
  .metric-n { font-size: 34px; }
  .metric-d { font-size: 13px; }
}

/* "15h" is a figure like the rest; "→ min" is a note on it, small and
   muted on the figure's baseline. The drums expose no text baseline, so the
   note sits on the bottom of the 1em box, lifted by the descender share. */
.metric-top { display: flex; align-items: flex-end; gap: 10px; }
.metric-to {
  font-size: var(--text-small);
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: calc(var(--text-metric) * 0.235);
}
@media (max-width: 640px) { .metric-to { padding-bottom: calc(34px * 0.235); } }

/* ------------------------------------------------------------- odometer
   Digit columns built by js/odometer.js. Each column is one figure tall and
   clips its strip vertically; a little side room lets the motion blur show. */
.odo-row { display: inline-flex; align-items: flex-start; }
.odo-col, .odo-fix { display: inline-block; height: 1em; line-height: 1; }
.odo-col { overflow: hidden; clip-path: inset(0 -0.15em); }
.odo-strip { display: block; will-change: transform; }
.odo-strip > span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo-flap .odo-col { overflow: visible; }
.odo-flap .odo-strip { transform-origin: 50% 50%; backface-visibility: hidden; }

/* Glass drum: a taller window, the neighbouring digits above and below seen
   through frosted bands and fading out; the current one sharp in the middle. */
.odo-drum .odo-row { align-items: flex-start; }
.odo-drum .odo-col {
  position: relative;
  height: 1.56em; padding-top: 0.28em;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
}
.odo-drum .odo-col::before, .odo-drum .odo-col::after {
  content: ""; position: absolute; left: -0.15em; right: -0.15em; height: 0.34em; z-index: 1;
  -webkit-backdrop-filter: blur(3px) saturate(1.2); backdrop-filter: blur(3px) saturate(1.2);
  background: rgba(237, 237, 237, 0.18);
  pointer-events: none;
}
.odo-drum .odo-col::before { top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.odo-drum .odo-col::after  { bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.odo-drum .odo-fix { margin-top: 0.28em; }

/* Glint: a soft band of light that crosses the figure as it lands. */
.odo-glint { position: relative; display: inline-block; overflow: hidden; }
.odo-shine {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  opacity: 0; pointer-events: none;
}