/*
 * TYPOGRAPHY — jerarquía de títulos y contenido de prosa.
 */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--color-ink);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

/*
 * .prose: contenido libre del editor (entradas, páginas).
 * Ritmo vertical por flujo, no por márgenes individuales.
 */
.prose > * + * {
	margin-block-start: var(--space-4);
}

.prose > h2 { margin-block-start: var(--space-7); }
.prose > h3 { margin-block-start: var(--space-6); }

.prose a {
	color: var(--color-primary);
	font-weight: var(--weight-medium);
}

.prose ul,
.prose ol {
	padding-inline-start: 1.4em;
}

/* El punto de la marca, presente en cada lista. */
.prose li::marker {
	color: var(--color-accent);
	font-weight: var(--weight-bold);
}

.prose li + li {
	margin-block-start: var(--space-2);
}

.prose blockquote {
	border-inline-start: 3px solid var(--color-accent);
	padding-inline-start: var(--space-5);
	font-size: var(--text-lg);
	color: var(--color-ink-soft);
}

.prose img {
	border-radius: var(--radius-md);
}

.prose pre {
	overflow-x: auto;
	padding: var(--space-4);
	background-color: var(--color-primary-strong);
	color: var(--color-on-dark);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.prose code {
	font-size: 0.92em;
}

.prose :not(pre) > code {
	background-color: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	padding: 0.1em 0.35em;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	text-align: start;
	padding: var(--space-2) var(--space-3);
	border-block-end: 1px solid var(--color-line);
}

/* Cabeceras de página y sección */
.page-header__title {
	font-size: var(--text-3xl);
}

.page-header__meta {
	margin-block-start: var(--space-3);
	color: var(--color-ink-soft);
	font-size: var(--text-sm);
}

.section-header {
	max-width: var(--width-prose);
	margin-block-end: var(--space-7);
}

.section-header__title {
	font-size: var(--text-2xl);
}

.section-header__text {
	margin-block-start: var(--space-3);
	color: var(--color-ink-soft);
	font-size: var(--text-lg);
}