/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
	font-size: 125%;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1em;
	font-weight: 300;
	color: #444;
}

/* 1200px */
@media (max-width: 75em) {

	html {
		font-size: 112.5%;
	}

}

/* 900px */
@media (max-width: 56.25em) {

	html {
		font-size: 100%;
	}

}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
	margin: 2rem 0 1rem;
	font-family: inherit;
	font-weight: 300;
	color: var(--color-primary);
}

h1, .h1 {
	margin-top: 0;
	font-size: 3.2rem;
}

main h1 {
	font-size: 2.4rem;
}

h2, .h2 {
	font-size: 2.074rem;
}

h3, .h3 {
	font-size: 1.728rem;
}

h4, .h4 {
	font-size: 1.44rem;
}

h5, .h5 {
	font-size: 1.2rem;
}

h2:first-child, .h2:first-child,
h3:first-child, .h3:first-child,
h4:first-child, .h4:first-child,
h5:first-child, .h5:first-child {
	margin-top: 0;
}

p {
	margin-top: 1rem;
}

small {
	font-size: 0.833em;
}

/* 900px */
@media (max-width: 56.25em) {

	h1, .h1 {
		font-size: 3rem;
	}

}

/* 600px */
@media (max-width: 37.5em) {

	h1, .h1 {
		font-size: 2rem;
	}

	h2, .h2 {
		font-size: 1.6rem;
	}
	
	h3, .h3 {
		font-size: 1.4rem;
	}
	
	h4, .h4 {
		font-size: 1.2rem;
	}
	
	h5, .h5 {
		font-size: 1.1rem;
	}

}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: var(--color-primary);
	text-decoration: underline;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
}


/* Utility Classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.txt-center {
	text-align: center;
}

.txt-flow > * + *:not(h1, h2, h3, h4, h5) {
	margin-top: 1rem;
}

.txt-flow > *:first-child {
	margin-top: 0;
}

.txt-clip {
	width: 1px;
	height: 1px;
	position: absolute;
	clip-path: rect(0 0 0 0);
	overflow: hidden;
}

.spacing-small {
	letter-spacing: 0.075em;
}

.spacing-medium {
	letter-spacing: 0.275em;
}

/* 600px */
@media (max-width: 37.5em) {

	.spacing-small {
		letter-spacing: 0.05em;
	}
	
	.spacing-medium {
		letter-spacing: 0.125em;
	}

}