/*
 * Site-wide type scale and section spacing.
 * Desktop: H1 50px, H2 40px, H3 36px, H4 30px, paragraph 18px, small 16px, section 6rem.
 * Phone (under 768px): H1 30px, H2 26px, H3 24px, H4 22px, paragraph 16px, small 12px, section 3rem.
 * Hero sections keep their own top offset so content clears the fixed header.
 */

html body h1,
html body .cv-hero__title { font-size: 50px; line-height: 1.1; }
html body h2 { font-size: 40px; line-height: 1.15; }
html body h3 { font-size: 36px; line-height: 1.25; }
html body h4 { font-size: 30px; line-height: 1.3; }
html body p,
html body .cv-hero__subtitle { font-size: 18px; line-height: 1.6; }
html body small,
html body figcaption { font-size: 16px; }

section:not([class*="hero"]) {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

@media (max-width: 767px) {
	html body h1,
	html body .cv-hero__title { font-size: 30px; }
	html body h2 { font-size: 26px; }
	html body h3 { font-size: 24px; }
	html body h4 { font-size: 22px; }
	html body p,
	html body .cv-hero__subtitle { font-size: 16px; }
	html body small,
	html body figcaption { font-size: 12px; }

	section:not([class*="hero"]) {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}