:root {
	--font-size-branding: 1.5rem;
	--font-size-title: 2rem;
	--line-length: 75ch;
	--content-width: 84ch;
}

body {
	font-family: sans-serif;
	line-height: 1.5;
}

:is(
	p,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
) {
	max-inline-size: var(--line-length);
}

:is(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.title,
) {
	line-height: 1.1;
}

:is(nav ul) {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	padding-inline-start: 0;
}

pre:has(> code) {
	border: 0.1em solid currentColor;
	max-inline-size: var(--content-width);
	padding: calc(2ch - 0.1em);
	white-space: pre-wrap;
}

table {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

:is(td, th):has(+ :is(td, th)) {
	padding-inline-end: 1rem;
}

.masthead {
	& > .container {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	& a:not(:hover) {
		text-decoration: none;
	}
}

.container {
	margin-inline: auto;
	max-inline-size: var(--content-width);
}

.branding {
	font-size: var(--font-size-branding);
	font-weight: 700;
	margin-block: 0;
}

.content__header {
	& p:has(date) {
		margin-block: 0;

		& + p:has(date) {
			margin-block-start: 0;
		}
	}
}

.title {
	font-size: var(--font-size-title);
	font-weight: 700;
	margin-block: 0.67em;;
}

.colophon :is(p, li) {
	font-size: smaller;
}