/* ==========================================================================
   Section: Proof stats band (#stats)
   Four counter-up figures separated by hairlines. Understated, typographic —
   deliberate breathing room between two heavy sections.
   Every selector is scoped under .s-stats.
   ========================================================================== */

.s-stats {
  --stat-rule: var(--border-strong);
  --stat-size: var(--step-7);
  --stat-item-y: var(--space-8);
}

/* ---- Layout -------------------------------------------------------------- */

.s-stats__layout {
  display: block;
}

.s-stats__body {
  min-width: 0;
}

/* ---- Head ---------------------------------------------------------------- */

.s-stats__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure-short);
  margin-block-end: var(--space-9);
}

.s-stats__title {
  font-size: var(--step-5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* ---- Grid ---------------------------------------------------------------- */
/* Row gap stays 0 so the hairlines sit flush against the item edges; the
   breathing space comes from each item's own padding instead. */

.s-stats__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: 0;
  margin: 0;
  padding: 0;
}

.s-stats__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  padding-block: var(--stat-item-y);
}

/* Horizontal hairline above every stacked item but the first. */
.s-stats__item + .s-stats__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    var(--stat-rule),
    color-mix(in oklab, var(--stat-rule) 15%, transparent)
  );
}

/* Vertical hairline, drawn in the column gap. Hidden until columns exist.
   The warm top fade is the kiln-heat cue — it reads as a lit edge, not a border. */
.s-stats__item::after {
  content: "";
  position: absolute;
  inset-block: var(--space-2);
  inset-inline-start: calc(var(--grid-gap) / -2);
  width: 1px;
  background-image: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--accent) 55%, transparent),
    var(--stat-rule) 22%,
    color-mix(in oklab, var(--stat-rule) 10%, transparent)
  );
  opacity: 0;
}

/* ---- Item parts ---------------------------------------------------------- */
/* DOM order is <dt> then <dd> so the description list stays valid; the grid
   rows put the figure above its label. */

.s-stats__value {
  grid-row: 1;
  display: block;
  max-width: none;
  font-size: var(--stat-size);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
}

.s-stats__label {
  grid-row: 2;
  max-width: 20ch;
  font-size: var(--step--1);
  font-weight: var(--weight-book);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---- Source note --------------------------------------------------------- */

.s-stats__note {
  position: relative;
  max-width: var(--measure);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  font-size: var(--step--2);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
}

.s-stats__note::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--space-9);
  height: 1px;
  background-color: var(--stat-rule);
}

/* ---- 2 up ---------------------------------------------------------------- */

@media (width >= 40rem) {
  .s-stats {
    --stat-item-y: var(--space-9);
  }

  .s-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Rules now belong to the row above, not the item above. Each half extends
     into the column gutter so the row reads as one continuous hairline. */
  .s-stats__item:nth-child(2)::before { content: none; }

  .s-stats__item:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background-image: none;
    background-color: var(--stat-rule);
  }

  .s-stats__item:nth-child(odd)::before { inset-inline-end: calc(var(--grid-gap) / -2); }
  .s-stats__item:nth-child(even)::before { inset-inline-start: calc(var(--grid-gap) / -2); }

  /* Second column of each row gets the vertical rule. */
  .s-stats__item:nth-child(even)::after { opacity: 1; }
}

/* ---- 4 up ---------------------------------------------------------------- */

@media (width >= 64rem) {
  .s-stats {
    --stat-size: var(--step-8);
    --stat-item-y: 0;
  }

  .s-stats__head {
    max-width: var(--measure);
    margin-block-end: var(--space-10);
  }

  /* The figures carry the section; the heading steps back out of their way. */
  .s-stats__title {
    font-size: var(--step-4);
    letter-spacing: var(--tracking-snug);
  }

  .s-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .s-stats__item { gap: var(--space-4); }

  /* One flat row of four: every horizontal rule goes away. Matches the
     specificity of the nth-child(n + 3) rule above and wins on source order. */
  .s-stats__item:nth-child(n)::before { content: none; }

  .s-stats__item::after { inset-block: 0; }

  .s-stats__item:not(:first-child)::after { opacity: 1; }

  .s-stats__label { max-width: 18ch; }

  /* Off-centre anchor: the note hangs under the last column instead of
     centring a paragraph beneath four identical buckets. */
  .s-stats__note {
    width: max(18rem, calc((100% - 3 * var(--grid-gap)) / 4));
    max-width: 100%;
    margin-inline-start: auto;
    margin-block-start: var(--space-9);
  }
}

/* ---- Wide: heading becomes a left rail ----------------------------------- */

@media (width >= 90rem) {
  .s-stats__layout {
    display: flex;
    align-items: start;
    gap: var(--space-10);
  }

  .s-stats__head {
    flex: 0 1 22rem;
    max-width: 22rem;
    margin-block-end: 0;
  }

  .s-stats__body { flex: 1 1 auto; }

  .s-stats__item { gap: var(--space-5); }
}

/* ---- Reduced motion ------------------------------------------------------ */
/* No section-owned animation to tame; the shared .reveal rules already opt
   out, and KW.countUp writes the final value straight away. */