:root {
	--header-font-family: bryant-web, sans-serif;
	--header-line-height: 1.225;

	--font-size-h1: var(--rem-4xl);
	--font-size-h2: var(--rem-2xl);
	--font-size-h3: var(--rem-xl);
	--font-size-h4: var(--rem-l);
	--font-size-h5: var(--rem-base);
	--font-size-h6: var(--rem-base);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.mw-headline {
	font-family: var(--header-font-family);
	font-size: inherit;
	line-height: 1.225;
	font-weight: bold;
	white-space: normal;
	-webkit-margin-before: initial;
	-webkit-margin-after: initial;
	margin-block-start: 0;
	margin-block-end: 0;
}

h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

h1.h-margin, .h1.h-margin,
h2.h-margin, .h2.h-margin,
h3.h-margin, .h3.h-margin,
h4.h-margin, .h4.h-margin,
h5.h-margin, .h5.h-margin,
h6.h-margin, .h6.h-margin {
	-webkit-margin-before: var(--scale8-2);
	-webkit-margin-after: var(--scale8-2);
}

h1.h-margin-top, .h1.h-margin-top,
h2.h-margin-top, .h2.h-margin-top,
h3.h-margin-top, .h3.h-margin-top,
h4.h-margin-top, .h4.h-margin-top,
h5.h-margin-top, .h5.h-margin-top,
h6.h-margin-top, .h6.h-margin-top {
	-webkit-margin-before: var(--scale8-2);
}

h1.h-margin-bottom, .h1.h-margin-bottom,
h2.h-margin-bottom, .h2.h-margin-bottom,
h3.h-margin-bottom, .h3.h-margin-bottom,
h4.h-margin-bottom, .h4.h-margin-bottom,
h5.h-margin-bottom, .h5.h-margin-bottom,
h6.h-margin-bottom, .h6.h-margin-bottom {
	-webkit-margin-after: var(--scale8-2);
}

/* Headings inside content blocks */
/*=============================================================*/

.font-content h1, .font-content .h1,
.font-content h2, .font-content .h2,
.font-content h3, .font-content .h3,
.font-content h4, .font-content .h4,
.font-content h5, .font-content .h5,
.font-content h6, .font-content .h6,
.font-content .mw-headline {
	font-family: var(--header-font-family);
	margin-top: 16px;
	margin-bottom: 12px;
}

.font-content h1, .font-content .h1 {
	font-size: 1.332em;
	margin-top: 0;
}

.font-content h2, .font-content .h2 {
	font-size: 16px;
}

.font-content h3, .font-content .h3,
.font-content h4, .font-content .h4,
.font-content h5, .font-content .h5,
.font-content h6, .font-content .h6 {
	font-size: 0.956em;
}


/* Adaptive heading font-size */
/*=============================================================*/

/*

This should effectively be replaced by the adaptive rules below, keep just in case for reference

@media all and (min-width: 905px) {
	h1, .h1 { font-size: var(--rem-4xl);  }
	h2, .h2 { font-size: var(--rem-2xl);  }
	h3, .h3 { font-size: var(--rem-xl);   }
	h4, .h4 { font-size: var(--rem-base); }
	h5, .h5 { font-size: var(--rem-base); }
	h6, .h6 { font-size: var(--rem-base); }
}
@media all and (max-width: 599px) {
	h1, .h1 { font-size: var(--rem-2xl);  }
	h2, .h2 { font-size: var(--rem-xl);   }
	h3, .h3 { font-size: var(--rem-l);    }
	h4, .h4 { font-size: var(--rem-base); }
	h5, .h5 { font-size: var(--rem-base); }
	h6, .h6 { font-size: var(--rem-base); }
}
@media all and (max-width: 599px) {
	h1, .h1 { font-size: var(--rem-xl);   }
	h2, .h2 { font-size: var(--rem-l);    }
	h3, .h3 { font-size: var(--rem-base); }
	h4, .h4 { font-size: var(--rem-s);    }
	h5, .h5 { font-size: var(--rem-xs);   }
	h6, .h6 { font-size: var(--rem-2xs);  }
}
*/


@media all and (max-width: 904px) {
	:root {
		--font-size-h1: var(--rem-2xl);
		--font-size-h2: var(--rem-xl);
		--font-size-h3: var(--rem-l);
		--font-size-h4: var(--rem-l);
		--font-size-h5: var(--rem-l);
		--font-size-h6: var(--rem-l);
	}
}

@media all and (max-width: 599px) {
	:root {
		--font-size-h1: var(--rem-xl);
		--font-size-h2: var(--rem-l);
		--font-size-h3: var(--rem-l);
		--font-size-h4: var(--rem-base);
		--font-size-h5: var(--rem-base);
		--font-size-h6: var(--rem-base);
	}
}
