/* ===========================================================================
   Milestones
   ===========================================================================
   A figure and a caption. Scoped under .milestone, every colour falling back
   to something sensible, so it works dropped into a page that has none of the
   site's custom properties.

   Inline-level elements set to display:block, for the same reason as the
   scroller: a shortcode can be typed anywhere, including mid-paragraph, and a
   <div> inside a <p> makes the parser close the paragraph early.
   =========================================================================== */

.milestone {
  display: block;
  text-align: center;
}

.milestone-figure {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--brand, #136fbf);
  /* Figures line up in a row of boxes only if they are all the same width. */
  font-variant-numeric: tabular-nums;
}

/* The + or % rides smaller and higher than the number it belongs to. */
.milestone-affix {
  font-size: .55em;
  vertical-align: .45em;
  font-weight: 600;
  opacity: .8;
}

.milestone-label {
  display: block;
  margin-top: .45rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #5c6b7a);
}

.milestone-note {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--text-muted, #5c6b7a);
  opacity: .85;
}

/* While the figure is counting it must not change width, or the whole row
   jitters as the digits tick. Reserving the width of the final number keeps
   the layout still. */
.milestone.is-counting .milestone-value {
  display: inline-block;
  min-width: var(--milestone-width, auto);
}

@media (prefers-reduced-motion: reduce) {
  /* The script does not animate at all in this case; this is only here so the
     reserved width never applies either. */
  .milestone.is-counting .milestone-value { min-width: 0; }
}