html.font-feature-settings {
	&, & .ff-text {
		/**
		 * Prefering `font-feature-settings` over `font-variant` despite the latter
		 * being recommended by MDN due to partial browser support of `font-variant`
		 *
		 * See: https://caniuse.com/font-variant-alternates
		 */
		font-feature-settings: 'pnum' on, 'lnum' on, 'ss02' on, 'ss03' on, 'ss04' on, 'ss05' on, 'ss06' on, 'ss07' on, 'ss08' on, 'liga' off;
	}

	& .ff-numeric, & li::marker {
		font-feature-settings: 'tnum' on, 'lnum' on, 'case' on;
	}

	& .ff-display,
	& .heading-0,
	& .heading-1,
	& .heading-2,
	& .heading-3,
	& .heading-4,
	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {
		font-feature-settings: 'pnum' on, 'lnum' on;
	}
}

.heading-1, h1 {
	@apply font-black text-[6rem] leading-[1.1];
}

.heading-2, h2 {
	@apply font-bold text-[4rem] leading-[1.1];
}

.layout {
	@apply font-normal text-[3rem] leading-[1.2];
}

ul, ol {
	@apply space-y-2;

	& ul, & ol {
		@apply mt-2
	}
}

ul {
	list-style-type: "-> ";
}

ol {
	list-style-type: decimal;
}

li {
	@apply ml-12;
}

li > ul, li > ol {
	@apply ml-16
}

code {
	@apply text-[0.8333em] font-mono p-2 bg-slate z-10 relative;
}

blockquote {
	@apply italic
}

blockquote + small {
	@apply flex items-center gap-2 text-theme;

	& hr {
		@apply flex-1 border-theme;
	}
}

blockquote.text-right + small {
	@apply flex-row-reverse;
}