/* Reading layout for pages (chapters / kolofon). Built entirely from the
   design tokens in theme.css so it matches the home page. Enqueued only on
   is_page(). */

.vrba-prose > *:first-child { margin-top: 0; }

.vrba-prose p {
	margin: 0 0 1.25em;
	text-align: justify;
	hyphens: auto;
}

.vrba-prose h2 {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 2em 0 0.6em;
}

.vrba-prose h3 {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(19px, 2.4vw, 26px);
	line-height: 1.15;
	margin: 1.6em 0 0.5em;
}

.vrba-prose a {
	color: var(--color-accent-700);
	text-underline-offset: 3px;
}

.vrba-prose ul,
.vrba-prose ol {
	margin: 0 0 1.25em;
	padding-left: 1.4em;
}

.vrba-prose li {
	margin: 0 0 0.4em;
}

.vrba-prose blockquote {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: clamp(19px, 2.4vw, 26px);
	line-height: 1.3;
	color: var(--color-neutral-700);
	margin: 1.6em 0;
}

.vrba-prose figure {
	margin: 2em 0;
}

.vrba-prose img {
	width: 100%;
	height: auto;
	display: block;
}

.vrba-prose figcaption {
	font-size: 11px;
	color: var(--color-neutral-600);
	margin-top: 10px;
}

.vrba-prose hr {
	height: 1px;
	border: 0;
	margin: 2.4em 0;
	background: var(--color-divider);
}

/* A definition list reads well for the kolofon metadata. */
.vrba-prose dl {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(16px, 3vw, 40px);
	row-gap: 10px;
	margin: 1.5em 0;
	font-size: 13px;
	border-top: 1px solid var(--color-gold);
	padding-top: 16px;
}

.vrba-prose dt {
	color: var(--color-neutral-600);
	letter-spacing: 0.04em;
}

.vrba-prose dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}