/* The stats front door. Layout only; the palette is app.css. */

.content { max-width: 1080px; }

.hero { margin: 2.5rem 0 2rem; }
.hero h1 { font-size: 2.1rem; margin: 0 0 0.5rem; }
.hero .lede { color: var(--muted); margin: 0; max-width: 46rem; font-size: 1.05rem; }

/* auto-fit here, unlike the search grid: there are exactly six tiles and they
   should spread to fill the row rather than leave a gap at the end. */
.stats {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.25rem; text-align: center;
}
.stat .figure {
  display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.1;
  /* Tabular figures so the tiles do not jitter in width as counts change. */
  font-variant-numeric: tabular-nums;
}
.stat .label {
  display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.85rem;
}

.pitch {
  display: grid; gap: 1.25rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pitch .card { margin: 0; }
.pitch h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.pitch p { color: var(--muted); margin: 0 0 0.75rem; }

ul.formats { list-style: none; padding: 0; margin: 0 0 0.75rem; }
ul.formats li {
  padding: 0.4rem 0; border-bottom: 1px solid var(--line-2);
  color: var(--muted); font-size: 0.92rem;
}
ul.formats li:last-child { border-bottom: 0; }
ul.formats strong { color: var(--ink); }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.6rem; }
  .stat .figure { font-size: 1.7rem; }
}