/* Key Facts — stats section. Background scrubs from black (continuing the
   video/statement scene) to the site's light tone as you scroll in; the
   numbers count up when they enter. Behaviour in assets/js/keyfacts.js. */

#tw-keyfacts {
  /* grey at the very top (meeting the hero), white where Selected Work begins */
  background: linear-gradient(to bottom, #EFEEEC 0%, #FFFFFF 30%, #FFFFFF 100%);
  --kf-bg: #efeeec;
  --kf-ink: #1a1a1a;
  --kf-ink-soft: #6b6b6b;
  --kf-green: #35E07F;
  --kf-line: rgba(0, 0, 0, 0.18);
  --kf-mono: Figtree, "Figtree Fallback", system-ui, sans-serif;
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--kf-bg);
  color: var(--kf-ink);
  /* the site's actual display font -- plain inherit resolved to generic
     sans-serif here, which is why the section never quite matched */
  font-family: "Figtree", "Figtree Placeholder", sans-serif;
  padding: 15vh 6vw 0;
  overflow: hidden;
}

:where(#tw-keyfacts *) { box-sizing: border-box; margin: 0; padding: 0; }

.kf-label {
  display: block;
  font-family: var(--kf-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kf-green);
  margin-bottom: 6vh;
}

.kf-intro {
  max-width: 30ch;
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #121212;
}
.kf-sub {
  max-width: 52ch;
  margin-top: 2.5vh;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--kf-ink-soft);
}

/* ---- clean 3-column stats: big numbers in the site's display font ---- */
.kf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vw;
  margin-top: 10vh;
  border-top: 1px solid var(--kf-line);
  border-bottom: 1px solid var(--kf-line);   /* closing separator line */
  padding-top: 7vh;
  padding-bottom: 7vh;
}
.kf-stat { border-left: 1px solid var(--kf-line); padding-left: 2.2vw; }
.kf-stat:first-child { border-left: none; padding-left: 0; }

.kf-num {
  display: flex;
  align-items: baseline;
  font-size: clamp(64px, 7vw, 124px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kf-num .kf-suffix { color: var(--kf-green); margin-left: 0.04em; }
/* odometer: each digit is a rolling column, clipped to one digit height */
.kf-reel { display: inline-block; overflow: hidden; height: 1em; }
.kf-col { display: block; }
.kf-col span { display: block; height: 1em; line-height: 1; }

.kf-title {
  margin-top: 1.8vh;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 600;
}
.kf-desc {
  margin-top: 0.8vh;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kf-ink-soft);
  max-width: 30ch;
}

/* intro + sub now use the blur-focus word reveal (.rt) — only the stats still fade-up */
.kf-stat {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
#tw-keyfacts.kf-in .kf-intro { opacity: 1; transform: none; }
#tw-keyfacts.kf-in .kf-sub { opacity: 1; transform: none; transition-delay: 0.12s; }
#tw-keyfacts.kf-in .kf-stat { opacity: 1; transform: none; }
#tw-keyfacts.kf-in .kf-stat:nth-child(1) { transition-delay: 0.2s; }
#tw-keyfacts.kf-in .kf-stat:nth-child(2) { transition-delay: 0.34s; }
#tw-keyfacts.kf-in .kf-stat:nth-child(3) { transition-delay: 0.48s; }

@media (max-width: 900px) {
  #tw-keyfacts { padding: 12vh 7vw 14vh; }
  .kf-grid { grid-template-columns: 1fr; gap: 6vh; }
  .kf-stat { border-left: none; padding-left: 0; border-top: 1px solid var(--kf-line); padding-top: 3.5vh; }
  .kf-stat:first-child { border-top: none; padding-top: 0; }
}