/* ==========================================================================
   Leespagina's — ComicsWorth

   De wizard is een toestel in een telefoonlijst; dit zijn pagina's om te
   lezen, en waar een zoekmachine op landt. Zelfde inkt en zelfde letters,
   maar een bladspiegel in plaats van een scherm.
   ========================================================================== */

.cw-artikelpagina {
  display: block;
  padding: var(--space-6) var(--space-4) 80px;
}

.cw-artikel {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--color-neutral-100);
  border: 3px solid var(--color-neutral-900);
  border-radius: 26px;
  box-shadow: 10px 12px 0 var(--color-accent-2-700), var(--shadow-lg);
  padding: var(--space-6) var(--space-5) var(--space-7);
}

.cw-artikel > * + * { margin-top: var(--space-4); }
.cw-artikel p { line-height: 1.62; }
.cw-artikel h2 { margin-top: 34px; }
.cw-artikel h3 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 20px; line-height: 1.25; margin: 26px 0 6px;
}
.cw-artikel ul, .cw-artikel ol { padding-left: 22px; line-height: 1.62; }
.cw-artikel li + li { margin-top: 6px; }
/* Leeslinks krijgen de accentkleur, knoppen niet: die hebben hun eigen
   achtergrond en zouden anders bruin op bruin worden. */
.cw-artikel a:not(.cw-btn) { color: var(--color-accent-700); }
.cw-artikel a.cw-btn { text-decoration: none; }

.cw-kruimels {
  font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--color-neutral-600); margin: 0 0 var(--space-3);
}
.cw-kruimels a { color: var(--color-neutral-700); }

/* Tabel met drukken: veel regels, dus rustig en met een vaste ritmiek. */
.cw-tabelwrap { overflow-x: auto; border: 2.5px solid var(--color-neutral-900); border-radius: 18px; }
.cw-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.cw-tabel th, .cw-tabel td {
  text-align: left; padding: 11px var(--space-3);
  border-bottom: 1px solid var(--color-neutral-300); vertical-align: top;
}
.cw-tabel thead th {
  background: var(--color-neutral-200); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-neutral-700);
}
.cw-tabel tbody tr:last-child td { border-bottom: none; }
.cw-tabel td:first-child,
.cw-tabel td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-tabel td:nth-child(2) { width: 1%; }
.cw-tabel .cw-fineprint { display: block; margin-top: 2px; }

.cw-linklijst { list-style: none; padding: 0; }
.cw-linklijst li + li { margin-top: 8px; }

.cw-reeksblok + .cw-reeksblok { margin-top: var(--space-6); }