*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--vv2-bg);
	color: var(--vv2-ink);
	font-family: var(--vv2-font-body);
	font-weight: var(--vv2-weight-body);
	font-size: var(--vv2-text-body);
	line-height: var(--vv2-leading-body);
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
	font-family: var(--vv2-font-heading);
	font-weight: var(--vv2-weight-heading);
	line-height: var(--vv2-leading-heading);
	margin: 0;
	color: var(--vv2-ink);
}
h1 { font-size: var(--vv2-text-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--vv2-text-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--vv2-text-h3); }
h4 { font-size: var(--vv2-text-h4); }

p { margin: 0; max-width: 62ch; }
small, .vv2-text-small { font-size: var(--vv2-text-small); }

a { color: inherit; }

/* Visible focus — never suppressed, always on-brand rather than the
browser default blue ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--vv2-accent);
	outline-offset: 2px;
}

.vv2-container {
	max-width: var(--vv2-container-width);
	margin-inline: auto;
	padding-inline: var(--vv2-space-sm);
}
.vv2-container--narrow { max-width: var(--vv2-container-width-narrow); }

@media (min-width: 782px) {
	.vv2-container { padding-inline: var(--vv2-space-md); }
}