/* =========================================================================================
   #stats  (P2) · yellow · CALL-E P07 "Pegged receipt": statement left, receipt hung from a peg right.
   The receipt carries the four stats; js/stats.js counts them up once the receipt hangs in.
   Kit parts used: .cl.y .wrap .t-h2m .mk .lead .up .line-row .cord .hg.drop .pin .receipt .rrow .rdash
   .t-num .t-label .t-cap. Only semantic variables below (dark mode is a variable swap).
   ========================================================================================= */

/* split: 1 column, 2 columns from the CALL-E 992 breakpoint (CALL-E #results: 596 | 72 | 596 at 1440) */
#stats .st-grid { display: grid; gap: 56px clamp(40px, 5vw, 72px); align-items: start; }
#stats .st-text { display: grid; gap: 20px; justify-items: start; min-width: 0; }
#stats .st-text .t-h2m { max-width: 22ch; text-wrap: balance; }
#stats .st-text .lead { max-width: 46ch; text-wrap: balance; }
@media (width >= 992px) {
  #stats .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stats .st-text { padding-top: 64px; }           /* the cord runs above the text, as on CALL-E */
}
@media (width >= 1200px) {
  #stats .st-text .mk { white-space: nowrap; }      /* keep the accent on one line on wide screens */
}

/* the receipt (one peg, slight tilt, drop shadow on the hanger because clip-path would cut a box-shadow) */
#stats .st-row { min-width: 0; }
#stats .st-hg { --r: -1.5deg; --d: 0.4s; width: min(100%, 500px); }
#stats .st-logo { display: block; line-height: 0; }
#stats .st-logo img { width: auto; height: 34px; }   /* no display here: base.css swaps the light/dark variant */

#stats .st-list { margin: 0; padding: 0; list-style: none; }
#stats .st-list > li { align-items: center; }
#stats .st-list > li + li { margin-top: 22px; padding-top: 22px; border-top: 2px dashed var(--rule); }
#stats .st-list .t-num { flex: none; min-width: 3ch; font-size: clamp(48px, 4vw + 4px, 64px); }
#stats .st-list .t-label { max-width: 21ch; color: var(--fg2); text-align: right; }
#stats .st-src { text-align: center; }

@media (width <= 767px) {
  #stats .st-hg { --r: -1.2deg; width: 100%; }
  #stats .st-list > li { gap: 14px; }
  #stats .st-list > li + li { margin-top: 18px; padding-top: 18px; }
  #stats .st-list .t-num { font-size: clamp(40px, 11vw, 48px); }
  #stats .st-list .t-label { max-width: 20ch; }
}