@layer base {
	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		background: var(--color-paper);
		color: var(--color-ink);
		font-family: var(--font-serif);
		font-size: var(--text-body);
		line-height: var(--leading-body);
		font-optical-sizing: auto;
		text-rendering: optimizeLegibility;
	}

	a {
		color: inherit;
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	a:hover {
		text-decoration-thickness: 2px;
	}

	:focus-visible {
		outline: 2px solid var(--color-ink);
		outline-offset: 3px;
	}

	img,
	video,
	iframe {
		max-width: 100%;
	}

	img {
		height: auto;
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-serif);
		font-weight: 700;
		line-height: 1.15;
		text-wrap: balance;
	}

	::selection {
		background: var(--color-ink);
		color: var(--color-paper);
	}
}