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

body {
	font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-body);
}

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

	html {
		font-size: 100%;
	}

}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
	margin: 2rem 0 1rem;
	font-family: inherit;
	font-weight: 700;
}

h1, .h1 {
	margin-top: 0;
	font-size: 2.5rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

h2, .h2 {
	font-size: 1.75rem;
	letter-spacing: -0.02em;
}

h3, .h3 {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

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

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

p {
	margin-block: 1rem;
}

small {
	font-size: 0.833em;
}

.font-size-l {
	font-size: 2rem;
	line-height: 1.1;
}

.txt-eyebrow {
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: 0.1em;
}

	.txt-eyebrow + :is(h1, h2, h3, h4, h5) {
		margin-top: 0.5rem;
	}

:is(h1, .h1)::after,
:is(h1, h2, h3, h4, h5).has-line::after {
	content: "";
	width: 6rem;
	height: 2px;
	display: block;
	margin: 1.25rem 0 1.75rem;
	background-color: var(--color-secondary);
}

:is(h1, .h1).has-text-align-center::after,
:is(h1, .h1, h2, h3, h4, h5).txt-center.has-line::after,
:is(h1, .h1, h2, h3, h4, h5).has-text-align-center.has-line::after {
	margin-inline: auto;
}

:is(h1, .h1).has-text-align-right::after,
:is(h1, .h1, h2, h3, h4, h5).has-text-align-right.has-line::after {
	margin-left: auto;
}

.no-line::after {
	display: none;
}

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

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

}

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

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

}


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

.txt-flow a:not(.btn),
a:not(.btn) {
	text-decoration: underline;
	text-decoration-color: rgb(204, 204, 204);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.25em;
	transition: 0.1s ease text-underline-offset;
}

.txt-flow a:hover,
a:hover {
	text-underline-offset: 0.35em;
	text-decoration-color: var(--color-primary);
}

a:not(.btn, :has(img))[target="_blank"]::after {
	content: "";
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: sub;
	margin-left: 0.25em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(6,83,136)'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V12L17.206 8.207L11.2071 14.2071L9.79289 12.7929L15.792 6.793L12 3H21Z'%3E%3C/path%3E%3C/svg%3E");
}


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

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

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

.txt-flow > :last-child {
	margin-bottom: 0;
}

.color-primary {
	color: var(--color-primary);
}