/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--cr-bg);
	color: var(--cr-ink);
	font-family: var(--cr-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

.cr-container {
	max-width: var(--cr-container);
	margin: 0 auto;
	padding-left: var(--cr-pad-x);
	padding-right: var(--cr-pad-x);
}
.cr-container--inner {
	max-width: var(--cr-container-inner);
}

.cr-serif  { font-family: var(--cr-serif); }
.cr-sans   { font-family: var(--cr-sans);  }
.cr-mono   { font-family: var(--cr-mono);  }

.cr-kicker {
	font-family: var(--cr-mono);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--cr-accent);
}
.cr-eyebrow {
	font-family: var(--cr-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cr-accent);
}
.cr-caption {
	font-family: var(--cr-mono);
	font-size: 12px;
	color: var(--cr-mute-2);
}

h1, h2, h3 {
	font-family: var(--cr-serif);
	font-weight: 600;
	letter-spacing: -.5px;
	color: var(--cr-ink);
	margin: 0;
}