/* reference.css — styles for the generated vocabulary reference pages.
   Layered on top of blog.css, which already supplies .container, .section,
   .article-head, .pill, .h1, .lead, .byline, .table-wrap, .datatable,
   .more-list and the nav/footer. Only the new pieces live here. */

/* ---- stat strip under the lead ---- */
.statstrip{
  display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 30px;
}
.statstrip .stat{
  flex:1 1 150px; min-width:140px;
  border:1px solid rgba(16,24,40,.09); border-radius:16px;
  background:#fff; padding:16px 18px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 24px -18px rgba(16,24,40,.22);
}
.statstrip .v{
  display:block; font-weight:800; font-size:26px; line-height:1.1;
  letter-spacing:-.02em; color:#101828;
}
.statstrip .k{
  display:block; margin-top:5px; font-size:12.5px; font-weight:600;
  letter-spacing:.02em; color:#667085;
}

/* ---- the data tables ---- */
.datatable .term{ font-weight:700; color:#101828; white-space:nowrap; }
.datatable .pron{ color:#667085; font-size:13.5px; white-space:nowrap; }
.datatable .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.datatable th.num, .datatable td.num{ text-align:right; }
.datatable .rank{
  display:inline-block; font-weight:800; font-size:12.5px; color:#1f6feb;
  background:rgba(31,111,235,.09); border-radius:999px; padding:2px 8px;
  font-variant-numeric:tabular-nums;
}
.datatable .pctl{ color:#667085; font-size:12.5px; margin-left:6px; white-space:nowrap; }
.datatable .rare{ color:#98a2b3; font-size:12.5px; font-style:italic; }
.datatable tbody tr:nth-child(odd){ background:rgba(16,24,40,.015); }

/* long reference tables get a capped, scrollable body on big screens */
.table-wrap{ max-height:none; }

/* ---- hub page list ---- */
.hublist{
  display:grid; gap:10px; margin:22px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.hublist a{
  display:block; padding:14px 16px; border-radius:14px; text-decoration:none;
  border:1px solid rgba(16,24,40,.09); background:#fff; color:#101828;
  font-weight:650; font-size:14.5px; line-height:1.35;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hublist a span{
  display:block; margin-top:4px; font-weight:500; font-size:12.5px;
  color:#667085; letter-spacing:.01em;
}
.hublist a:hover{
  transform:translateY(-1px); border-color:rgba(31,111,235,.35);
  box-shadow:0 8px 20px -14px rgba(16,24,40,.45);
}

/* ---- call to action card ---- */
.cta-card{
  margin:34px 0 10px; padding:24px 26px; border-radius:20px;
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
  border:1px solid rgba(16,24,40,.08);
}
.cta-card h3{ margin:0 0 6px; font-size:19px; letter-spacing:-.01em; }
.cta-card p{ margin:0 0 16px; color:#475467; font-size:15px; line-height:1.55; }

@media (max-width:640px){
  .statstrip .v{ font-size:22px; }
  .statstrip .stat{ flex:1 1 44%; min-width:0; padding:13px 14px; }
  .datatable .pron{ display:none; }
  .datatable th:nth-child(4){ display:none; }
}