article {
	display: flow-root;
	max-width: 65ch;
	margin: calc(4 * var(--spacing)) 0;
}

article :not(header.main, header.main *, nav, nav *, small) {
	font-family: var(--font-sans);
	line-height: var(--lineheight-lg);
}

article {
	h2,
	h3 {
		text-wrap: balance;
		margin: 25px 0;
	}

	p {
		text-wrap: balance;
		margin-top: calc(5 * var(--spacing));
		margin-bottom: calc(5 * var(--spacing));
	}

	ol {
		list-style-type: decimal;
		margin-top: 1.25em;
		margin-bottom: 1.25em;
		padding-inline-start: 1.625em;

		& > li {
			padding-inline-start: 0.375em;
		}
	}

	ul {
		list-style-type: disc;
		margin-top: 1.25em;
		margin-bottom: 1.25em;
		padding-inline-start: 1.625em;

		& > li {
			padding-inline-start: 0.375em;
		}
	}

	li {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	hr {
		margin-top: 3em;
		margin-bottom: 3em;
	}

	blockquote {
		font-weight: 500;
		font-style: italic;
		border-inline-start-width: 0.25rem;
		quotes: '\201C' '\201D' '\2018' '\2019';
		margin-top: 1.6em;
		margin-bottom: 1.6em;
		padding-inline-start: 1em;
	}

	blockquote p:first-of-type::before {
		content: open-quote;
	}

	blockquote p:last-of-type::after {
		content: close-quote;
	}

	img,
	picture,
	figure,
	video {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	figure > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	figcaption {
		font-size: 0.875em;
		line-height: 1.4285714;
		margin-top: 0.8571429em;
		text-align: center;
	}

	picture > img {
		margin-top: 0;
		margin-bottom: 0;
	}

	kbd {
		font-weight: 500;
		font-size: 0.875em;
		border: var(--color-border) 1px solid;
		border-radius: 0.3125rem;
		padding-top: 0.1875em;
		padding-inline-end: 0.375em;
		padding-bottom: 0.1875em;
		padding-inline-start: 0.375em;
	}

	code {
		font-weight: 600;
		font-size: 0.875em;
	}

	code::before,
	code::after {
		content: '`';
	}

	pre {
		font-weight: normal;
		overflow-x: auto;
		font-size: 0.875em;
		line-height: 1.7142857;
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
		padding-top: 0.8571429em;
		padding-inline-end: 1.1428571em;
		padding-bottom: 0.8571429em;
		padding-inline-start: 1.1428571em;
	}

	pre code {
		font-weight: inherit;
	}

	pre code::before,
	pre code::after {
		content: none;
	}

	dl {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
	}

	dt {
		font-weight: 600;
		margin-top: 1.25em;
	}

	dd {
		margin-top: 0.5em;
		padding-inline-start: 1.625em;
	}

	hr + *,
	h2 + *,
	h3 + *,
	h4 + * {
		margin-top: 0;
	}

	figure.light-bg {
		background-color: var(--gray-300);
		color: var(--gray-50);
		border-radius: 5px;
		padding: 5px;
	}
}

article nav {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--lineheight-lg);
	float: right;
	margin: 0 0 calc(4 * var(--spacing)) calc(5 * var(--spacing));
	min-width: calc(var(--container) / 8);
	max-width: calc(var(--container) / 4);

	ol {
		list-style-type: none;
		padding-inline-start: 0;
	}

	ol > li > ol {
		padding-inline-start: 0.625em;
	}

	li {
		margin: 0;
		font-size: var(--text-xs);
	}
}

@media (max-width: 640px) {
	article nav {
		float: none;
		max-width: inherit;
		margin: calc(4 * var(--spacing)) 0;
	}
}