h2,
h3,
h4 {
	display: flex;
	align-items: center;
	gap: 0.5em;

	&::before,
	&::after {
		content: "";
		height: 0;
		border-width: 1px;
		border-color: var(--neutral-color);
		border-top-style: solid;
	}

	&::before {
		width: 0.5em;
	}

	&::after {
		flex-grow: 1;
	}
}

h2 {
	font-weight: 400;
}

h3 {
	font-weight: 400;
	vertical-align: bottom;

	>time {
		align-self: flex-end;
		font-size: 1rem;
		font-weight: 300;
	}
}

h4 {
	font-weight: 300;

	&::before,
	&::after {
		border-top-style: dashed;
	}
}

article,
section {
	display: flex;
	flex-direction: column;
	gap: 8px;

	>footer {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		gap: 8px;
	}
}

article {
	width: 80%;
	min-width: 30rem;
	box-sizing: border-box;
	margin: 0 auto 1.5rlh;
	border-bottom: 1px solid var(--neutral-color);
	padding-bottom: 0.5rlh;
}

section {
	margin: 0.5rlh 1%;
	padding-bottom: 0.5rlh;
	border-bottom: 1px dashed var(--neutral-color);
}

ul,
ol {
	padding-left: 2em;

	li.line {
		list-style: none;
		margin: 12px 0 10px;
		border-top: 1px dashed var(--neutral-color);
	}
}

dl {
	margin: 0.5rlh 0;

	>dt {
		font-size: 110%;
	}

	>*+dt {
		margin-top: 0.5rlh;
	}

	>dd {
		border-top: 1px dashed var(--neutral-color);
		padding-left: 2em;
		font-size: 90%;
	}
}

details {
	margin: 0 1%;

	>summary {
		translate: -8px;
	}
}

code {
	margin: 0 4px;
	padding: 2px;
	border-radius: 2px;
	background-color: #8884;
}

:root[data-will-change="on"] .will-change-off {
	display: none;
}

:root:not([data-will-change="on"]) .will-change-on {
	display: none;
}