/* ──────────────────────────────────────────────────────────
   Vist · docs (loads after site.css; article pages use site.css)
   The index is a ruled table of contents, grouped by category.
   ────────────────────────────────────────────────────────── */

.docs-header { padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); border-bottom: 1.5px solid var(--ink); }
.docs-header h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; }
.docs-header .sub { margin-top: 18px; font-size: 20px; color: var(--ink-2); max-width: 34em; }

.docs-body { padding: clamp(32px, 4vw, 56px) 0 var(--section-y); }
.docs-group { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding: 28px 0; border-bottom: 1px solid var(--rule); }
.docs-category { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--paper-2); }
.docs-card {
  position: relative; display: block; padding: 20px 48px 22px 22px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: background .18s var(--ease-out);
}
.docs-card:nth-child(odd) { border-right: 1px solid var(--rule); }
.docs-card:hover { background: var(--mark); }
.docs-card h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: 6px; }
.docs-card .dek { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.docs-card:hover .dek { color: var(--ink); }
.docs-card .card-arrow { position: absolute; top: 22px; right: 18px; color: var(--ink-3); }
.docs-card:hover .card-arrow { color: var(--ink); }
.docs-grid::after { content: ""; } /* keeps the ruled grid closed when a row is half full */

@media (max-width: 760px) {
  .docs-group { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-card:nth-child(odd) { border-right: 0; }
}