/*
Metric — a figure, the word for what it counts, and a sentence saying what it means.

    <li class="metric">
      <span class="metric__value count">500+</span>
      <span class="metric__label">Studies</span>
      <span class="metric__desc">Our therapies are validated through …</span>
    </li>

It is a component and not three rules inside block 05 because the design uses it again on
the treatment pages, and because it was already on the inventory in docs/design-system.md
waiting to be built. The block that holds one owns the row it sits in — how many share the
width, what divides them, what happens when they stack — and nothing about the metric
itself.

It does not own its size, the way the two-tone heading does not own its size: the three
type sizes and the two gaps arrive as custom properties and the block sets them, so the
same component is 80px on the desktop and 100 on the phone without a second rung.

    --metric-fs-value / --metric-ls-value / --metric-lh-value
    --metric-fs-label / --metric-ls-label / --metric-lh-label
    --metric-fs-desc  / --metric-ls-desc  / --metric-lh-desc
    --metric-gap-value    between the figure and the label
    --metric-gap-label    between the label and the sentence

It owns the three colours, because they are what makes a metric read as one: the figure in
--ink, the label in --accent, the sentence in --ink-muted. A block cannot set them, which
is the same closed list the two-tone heading keeps over its tones.

The figure counts up when it carries `count` — the Counter component, assets/js/counter.js.
That is left to the markup rather than assumed here: a metric is a way of setting out a
number, and not every number on the site is going to run.
*/
.metric__value {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--metric-fs-value);
  font-weight: var(--fw-bold);
  letter-spacing: var(--metric-ls-value);
  line-height: var(--metric-lh-value);
}

.metric__label {
  display: block;
  margin-top: var(--metric-gap-value);
  color: var(--accent);
  font-size: var(--metric-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--metric-ls-label);
  line-height: var(--metric-lh-label);

  /*
  The design sets the label in capitals and the client types it in sentence case — every
  one of them, in the spec and in the render. Done here rather than by asking the editor to
  hold down shift: a label typed in lower case has to look like the others.
  */
  text-transform: uppercase;
}

.metric__desc {
  display: block;
  margin-top: var(--metric-gap-label);
  color: var(--ink-muted);
  font-size: var(--metric-fs-desc);
  font-weight: var(--fw-regular);
  letter-spacing: var(--metric-ls-desc);
  line-height: var(--metric-lh-desc);
}