/* Reset + base typography. */

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

html, body {
	margin: 0;
	padding: 0;
	background: var(--ms-page);
	min-height: 100vh;
}

body {
	font-family: var(--ms-font-sans);
	color: var(--ms-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input, textarea, select {
	font-family: inherit;
}


.ms-eyebrow {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ms-muted);
	font-weight: 700;
}

.ms-mono {
	font-family: var(--ms-font-mono);
}

.ms-serif {
	font-family: var(--ms-font-serif);
}

.ms-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ms-arrow {
	display: inline-block;
	transition: transform 0.2s;
}

.ms-btn:hover .ms-arrow,
.ms-linkish:hover .ms-arrow {
	transform: translateX(4px);
}

.ms-fallback {
	padding: 80px var(--ms-pad-x);
}