*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--page);
	color: var(--body);
	font-family: var(--font-body);
	font-size: var(--body-size);
	line-height: var(--lh-body);
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--space-2);
	color: var(--ink);
	font-family: var(--font-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--track-display);
	text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

p, li { text-wrap: pretty; }

a { color: var(--accent); }
a:focus-visible,
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

hr { border: 0; border-top: var(--border-width) solid var(--line); }

.vl-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	display: block;
	z-index: 100000;
	top: 5px;
	left: 5px;
	width: auto;
	height: auto;
	padding: var(--space-4) var(--space-5);
	background: var(--surface);
	color: var(--ink);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 2px var(--accent);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

.vl-skip {
	position: absolute;
	left: -9999px;
}
.vl-skip:focus {
	left: var(--gutter);
	top: var(--gutter);
	z-index: 100;
	padding: var(--space-3) var(--space-4);
	background: var(--accent);
	color: var(--accent-ink);
}