/*********************************************************
	typography
*********************************************************/

html {
	font-size: var(--font-size-base);
}

body {
	font-size: var(--font-size-md);
	font-family: var(--font-body);
	line-height: 150%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, .h1, .heading-1, .title-1,
h2, .h2, .heading-2, .title-2,
h3, .h3, .heading-3, .title-3 {
	font-family: var(--font-heading);
	font-weight: 400;
}

h1, .h1, .heading-1, .title-1 {
	font-size: var(--font-size-jumbo);
	line-height: 120%;
	letter-spacing: -0.01em;
}

h2, .h2, .heading-2, .title-2 {
	font-size: var(--font-size-xxxl);
	line-height: 125%;
}

h3, .h3, .heading-3, .title-3 {
	font-size: var(--font-size-xxl);
	line-height: 133.333%;
}

.title-4 {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.body-text {
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 0;
}

.body-text-sm {
	font-size: var(--font-size-sm);
	line-height: 142.857%;
}

.body-text-xs {
	font-size: var(--font-size-xs);
	line-height: 153.84%;
}

.body-text-lg,
.body-text-large {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: 400;
	line-height: 133.333%;
	letter-spacing: -0.01em;
}

h4, .h4, .heading-4, .heading-label {
	font-family: var(--font-label);
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 142.857%;
}

.heading-label-xs {
	font-size: var(--font-size-xs);
	line-height: 153.84%;
}

blockquote {
	padding-left: 1rem;
	border-left: 2px solid var(--gray-300);
}

.pullquote {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-style: italic;
	font-weight: 400;
	line-height: 160%;
}

p, hr {
	margin: 1.5rem 0;
}

ul, ol {
	margin: 1.5rem 0 1.5rem 1.5rem;
}

hr {
	border-color: var(--gray-300);
}

@media (max-width:960px) {

	h1, .h1, .heading-1, .title-1, .page-title, .mobile-title-2 {
		font-size: var(--font-size-xxxl);
		line-height: 125%;
	}

	h2, .h2, .heading-2, .title-2, .mobile-title-3 {
		font-size: var(--font-size-xxl);
		line-height: 133.333%;
	}

	h3, .h3, .heading-3, .title-3 {
		font-size: var(--font-size-xl);
		line-height: 120%;
	}

	.title-4 {
		font-size: var(--font-size-lg);
		line-height: 133.333%;
	}
}