/* ============================================================================
   MAPTAINER — Prosa (.article-body)
   Contrato tipográfico de los 62 artículos y 22 términos del glosario, y de
   la documentación funcional. El contenido llega desde JSON como HTML
   semántico SIN CLASES, así que todo se estiliza por descendencia.
   Cubre además h4, b, i, em, span y tablas, que hasta ahora quedaban sin
   estilo pese a aparecer 185, 613, 139, 278, 752 y 42 veces respectivamente.
   ============================================================================ */

/* El cuerpo del articulo es el unico sitio donde se lee seguido, asi que es
   el unico que usa la voz de lectura (Source Serif 4). Los titulares siguen
   en display: el mismo reparto de papeles que hace maptainer.com entre
   Space Grotesk y Source Serif. */
.article-body {
  font-family: var(--font-read);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: var(--measure);
}

.article-body > :first-child { margin-top: 0; }
.article-body > :last-child  { margin-bottom: 0; }

.article-body p { margin: 0 0 var(--sp-5); }

/* Dentro del articulo la escala se contiene: un h2 de 52px partiria la
   lectura. Se conserva el peso 500 y el interletraje cerrado del sistema. */
.article-body h2 {
  font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 500;
  line-height: var(--lh-snug); letter-spacing: var(--tracking-h2);
  margin: var(--sp-8) 0 var(--sp-4); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.article-body h3 {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
  line-height: var(--lh-snug); letter-spacing: var(--tracking-h3);
  margin: var(--sp-7) 0 var(--sp-3);
}
.article-body h4 {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500;
  line-height: var(--lh-snug); margin: var(--sp-5) 0 var(--sp-2); color: var(--ink);
}
.article-body h5 {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-2); margin: var(--sp-5) 0 var(--sp-2);
}

.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.article-body a:hover { color: var(--accent-deep); }

.article-body strong, .article-body b { font-weight: 700; color: var(--ink); }
.article-body em, .article-body i { font-style: italic; }
.article-body sup, .article-body sub { font-size: .75em; line-height: 0; }
.article-body small { font-size: var(--fs-cap); color: var(--ink-2); }
.article-body span { font: inherit; color: inherit; }

.article-body ul, .article-body ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.article-body li { margin-bottom: var(--sp-2); }
.article-body li::marker { color: var(--accent); }
.article-body ul ul, .article-body ol ol { margin-top: var(--sp-2); margin-bottom: 0; }

.article-body blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 2px solid var(--accent-hi);
  color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.5;
}
.article-body blockquote p:last-child { margin-bottom: 0; }

/* Las ilustraciones de los articulos se dibujaron sobre fondo claro. Sobre
   navy flotarian como recortes: el filete cian les cierra el borde y el halo
   las asienta en el plano. */
.article-body img {
  width: 100%; height: auto; margin: var(--sp-6) 0;
  border: 1px solid var(--rule-2); border-radius: var(--r-2);
  box-shadow: var(--glow);
}
.article-body figure { margin: var(--sp-6) 0; }
.article-body figcaption {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--ink-2); margin-top: var(--sp-2);
}

.article-body code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--accent-wash); border: 1px solid var(--rule);
  border-radius: var(--r-1); padding: .1em .35em; color: var(--accent);
}
.article-body pre {
  background: var(--navy-800); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-2);
  padding: var(--sp-4); overflow-x: auto; margin: var(--sp-6) 0;
  font-family: var(--font-mono); font-size: var(--fs-cap); line-height: 1.6;
}
.article-body pre code { background: none; border: 0; padding: 0; color: inherit; }
.article-body table { font-variant-numeric: tabular-nums; }

.article-body hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }

/* ---- Tablas: filete horizontal, sin sombreado alterno ---- */
.article-body table {
  width: 100%; border-collapse: collapse; margin: var(--sp-6) 0;
  font-size: var(--fs-cap);
}
.article-body th, .article-body td {
  text-align: left; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.article-body th {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2);
}
.article-body thead th { border-bottom-color: var(--rule-2); }
/* El contenido no lleva clases: el desbordamiento se resuelve en el contenedor */
.article-body table { display: block; overflow-x: auto; }

/* ---- Restos de KaTeX sin su hoja de estilos: se degradan a texto legible ---- */
.article-body .katex, .article-body .katex-html {
  font-family: var(--font-mono); font-size: .95em; white-space: normal;
}
.article-body .katex .vlist-r, .article-body .katex .base { display: inline; }