/**
 * Base layer: self-hosted type, reset, layout primitives and accessibility.
 */

@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree/Figtree-Latin.woff2") format("woff2-variations");
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--mv-bg);
	color: var(--mv-text);
	font-family: var(--mv-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease);
}

img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; flex: none; }
.mv-icon { display: block; }

h1, h2, h3, h4 {
	font-family: var(--mv-font-heading);
	color: var(--mv-text);
	line-height: 1.12;
	letter-spacing: -0.035em;
	margin: 0 0 var(--mv-space-4);
	font-weight: 750;
	text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.35rem + 2.5vw, 4rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem); }

p { margin: 0 0 var(--mv-space-4); }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a {
	color: var(--mv-silo-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color var(--mv-dur) var(--mv-ease);
}
a:hover { color: var(--mv-text); }

.is-inert { color: inherit; text-decoration: none; cursor: default; }

.mv-shell {
	width: calc(100% - (var(--mv-gutter) * 2));
	max-width: var(--mv-container);
	margin-inline: auto;
}

.mv-main { display: block; overflow: clip; }

.mv-section { padding-block: var(--mv-section-space); }
.mv-section__title { margin: 0 0 clamp(var(--mv-space-6), 4vw, var(--mv-space-8)); }
.mv-section__title--center { text-align: center; }

.mv-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mv-space-4);
	margin-bottom: var(--mv-space-5);
}
.mv-sec__head--center { justify-content: center; position: relative; }
.mv-sec__head--center .mv-section__title { margin-bottom: 0; }
.mv-sec__title { margin: 0; font-family: var(--mv-font-body); font-size: 1.1rem; letter-spacing: -0.01em; }
.mv-sec__link {
	display: inline-flex;
	align-items: center;
	gap: var(--mv-space-2);
	min-height: 44px;
	font-size: 0.88rem;
	font-weight: 650;
	color: var(--mv-text-muted);
	text-decoration: none;
	white-space: nowrap;
}
.mv-sec__link:hover { color: var(--mv-silo-text); }
.mv-sec__link svg { transition: transform var(--mv-dur) var(--mv-ease); }
.mv-sec__link:hover svg { transform: translateX(var(--mv-space-1)); }

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

.mv-skip {
	position: absolute;
	left: var(--mv-space-4);
	top: -100px;
	z-index: 999;
	background: var(--mv-surface);
	color: var(--mv-text);
	padding: var(--mv-space-3) var(--mv-space-4);
	border-radius: var(--mv-radius-sm);
	box-shadow: var(--mv-shadow);
	transition: top var(--mv-dur) var(--mv-ease);
}
.mv-skip:focus { top: var(--mv-space-4); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mv-focus);
	outline-offset: var(--mv-focus-offset);
	border-radius: var(--mv-radius-xs);
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.mv-sec__head { align-items: flex-start; }
	.mv-sec__head--center { justify-content: space-between; }
}

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