:root {
	/* title */
	--h1-color: var(--color-midnight);
	--h2-color: var(--color-vermilion);
	--h3-color: var(--color-midnight);
	--subtext-color: var(--color-crimson);
	--span-color: var(--color-vermilion);
}

@media (prefers-color-scheme: dark) {
	:root {
		--h1-color: var(--color-almond);
		--h2-color: var(--color-daisy);
		--h3-color: var(--color-almond);
		--subtext-color: var(--color-mango);
		--span-color: var(--color-daisy);
	}
}

header {
	margin-bottom: calc(var(--space-base) * 5);
}

h1 {
	font-size: 2.5rem;
	line-height: 0.9;
	color: var(--h1-color);
	font-weight: 700;
	margin-bottom: calc(var(--space-base) / 1.5);
}

p.subhead {
	font-style: italic;
}

h2 {
	font-size: .875rem;
	text-transform: uppercase;
	color: var(--h2-color);
	margin-bottom: calc(var(--space-base) / 1.5);
	font-weight: 700;
}

h3 {
	font-size: 1.125rem;
	color: var(--h3-color);
	margin-bottom: calc(var(--space-base) / 1.5);
	font-weight: 700;
}

.content a {
	font-size: inherit;
	color: inherit;

	opacity: var(--item-opc);
}

.content a:hover {
	--item-opc: 93%;
	border-bottom: solid var(--border-color) 3.2px;
	border-radius: 2px;
}

.title {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-end;
}

h4 {
	font-size: .875rem;
	color: var(--subtext-color);
	margin-bottom: calc(var(--space-base) / 1.5);
}

p.subtext {
	font-size: .875rem;
	color: var(--subtext-color);
}

ul {
	list-style-type: "‣ ";
	margin-bottom: calc(var(--space-base) * 2);
	padding-left: calc(var(--space-base) * 1.5);
}

li {
	font-size: var(--body-fs);
	line-height: var(--body-lh);
	color: var(--text-color);
	margin-bottom: calc(var(--space-base) / 1.5);
}

.header {
	font-family: var(--font-family-special);
	font-size: 1.25rem;
	color: var(--span-color);
}


@media only screen and (max-width: 767px) {
	h1 {
		font-size: 2rem;
	}
}