.cslist { border-top: 1px solid var(--rule-2); }
.csrow {
  display: grid;
  gap: 22px 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
@media (min-width: 900px) {
  .csrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
.csrow:hover .h3 { color: var(--seal); }
.csrow-head h2 { max-width: 26ch; }
.csrow-head p { max-width: 56ch; }

.csrow-metrics,
.cshead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
}
.csrow-metrics { border-top: 1px solid var(--rule); padding-top: 18px; }
@media (min-width: 900px) { .csrow-metrics { border-top: 0; padding-top: 4px; } }
.csrow-metrics dt, .cshead dt {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.csrow-metrics dd, .cshead dd {
  margin: 7px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 22ch;
}
.cshead dt { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* ---------------------------------------------- eleven questions -------- */

.qlist { border-top: 1px solid var(--ink); }
.qrow {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 8px 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.qrow-n { font-size: 0.75rem; color: var(--faint); padding-top: 6px; }
.qrow-q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
  max-width: 46ch;
}
.qrow-cite { grid-column: 2; }
@media (min-width: 1000px) {
  .qrow { grid-template-columns: 2.75rem minmax(0, 1fr) 14rem; }
  .qrow-cite { grid-column: 3; grid-row: 1; text-align: right; padding-top: 8px; }
}

.gaps { border-top: 1px solid var(--rule-2); }
.gaprow {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 6px 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.gaprow-n { font-size: 0.75rem; color: var(--faint); padding-top: 4px; }
.gaprow-cite { grid-column: 2; }
@media (min-width: 1000px) {
  .gaprow { grid-template-columns: 2.75rem minmax(0, 1fr) 14rem; }
  .gaprow-cite { grid-column: 3; grid-row: 1; text-align: right; padding-top: 5px; }
}

@media print {
  .qrow { break-inside: avoid; }
}
