:root {
	/*
	* Responsive rules must override these same role tokens.
	* Do not create separate mobile-, tablet-, or desktop-prefixed variables.
	*/
	--font-family-heading: "Hoss Round", "Arial Rounded MT Bold", Arial, sans-serif;
	--font-family-body: "Poppins", Arial, sans-serif;
	--font-family-script: "Pacifico", cursive;
	--font-family-caveat: "Caveat", cursive;

	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	--font-weight-black: 900;

	--letter-spacing-default: 0px;

	/* Desktop heading scale */
	--font-size-display-72: 72px;
	--line-height-display-72: 86px;
	--font-size-heading-1: 62px;
	--line-height-heading-1: 74.4px;
	--font-size-heading-2: 52px;
	--line-height-heading-2: 62.4px;
	--font-size-heading-3: 46px;
	--line-height-heading-3: 55.2px;
	--font-size-heading-4: 40px;
	--line-height-heading-4: 48px;
	--font-size-heading-5: 32px;
	--line-height-heading-5: 38.4px;
	--font-size-heading-6: 26px;
	--line-height-heading-6: 31.2px;

	/* Desktop body/display scale */
	--font-size-script-52: 52px;
	--line-height-script-52: 62.4px;
	--font-size-footer-tagline: 64px;
	--line-height-footer-tagline: 77px;
	--font-size-hoss-42: 42px;
	--line-height-hoss-42: 50.4px;
	--font-size-hoss-32: 32px;
	--line-height-hoss-32: 38.4px;
	--font-size-hoss-30: 30px;
	--line-height-hoss-30: 36px;
	--font-size-script-28: 28px;
	--line-height-script-28: 33.6px;
	--font-size-hoss-24: 24px;
	--line-height-hoss-24: 28.8px;
	--font-size-hoss-22: 22px;
	--line-height-hoss-22: 26.4px;
	--font-size-hoss-20: 20px;
	--line-height-hoss-20: 24px;
	--font-size-body-20: 20px;
	--line-height-body-20: 24px;
	--font-size-body-18: 18px;
	--line-height-body-18: 21.6px;
	--font-size-hoss-18: 18px;
	--line-height-hoss-18: 21.6px;
	--font-size-hoss-16: 16px;
	--line-height-hoss-16: 19.2px;
	--font-size-body-16: 16px;
	--line-height-body-16: 19.2px;
	--line-height-body-16-medium: 25.6px;
	--line-height-button: 24px;
	--font-size-form-control: 16px;
	--line-height-form-control: 19.2px;
	--font-size-body-14: 14px;
	--line-height-body-14: 16.8px;

	--font-size-split-tagline: 46px;
	--line-height-split-tagline: 55px;
	--font-size-menu: 56px;
	--line-height-menu: 67px;
	--letter-spacing-menu: 1.12px;
}

@media (max-width: 1366px) {
	:root {
		--font-size-display-72: 68px;
		--line-height-display-72: 82px;
		--font-size-heading-1: 58px;
		--line-height-heading-1: 70px;
		--font-size-heading-2: 49px;
		--line-height-heading-2: 59px;
		--font-size-heading-3: 44px;
		--line-height-heading-3: 53px;
		--font-size-heading-4: 38px;
		--line-height-heading-4: 46px;
		--font-size-heading-5: 31px;
		--line-height-heading-5: 37px;
		--font-size-heading-6: 25px;
		--line-height-heading-6: 30px;
		--font-size-hoss-42: 40px;
		--line-height-hoss-42: 48px;
		--font-size-hoss-20: 19px;
		--line-height-hoss-20: 23px;
		--font-size-hoss-22: 21px;
		--line-height-hoss-22: 25px;
		--font-size-hoss-18: 17px;
		--line-height-hoss-18: 20px;
		--font-size-hoss-32: 30px;
		--line-height-hoss-32: 36px;
		--font-size-hoss-30: 29px;
		--line-height-hoss-30: 35px;
		--font-size-script-28: 27px;
		--line-height-script-28: 32px;
		--font-size-hoss-24: 23px;
		--line-height-hoss-24: 28px;
		--font-size-body-20: 19px;
		--line-height-body-20: 23px;
		--font-size-body-18: 17px;
		--line-height-body-18: 21px;
		--font-size-split-tagline: 44px;
		--line-height-split-tagline: 53px;
		--font-size-script-52: 50px;
		--line-height-script-52: 60px;
		--font-size-footer-tagline: 58px;
		--line-height-footer-tagline: 70px;
		--font-size-menu: 52px;
		--line-height-menu: 62px;
		--letter-spacing-menu: 1.04px;
	}
}

@media (max-width: 1280px) {
	:root {
		--font-size-display-72: 64px;
		--line-height-display-72: 77px;
		--font-size-heading-1: 52px;
		--line-height-heading-1: 67px;
		--font-size-heading-2: 44px;
		--line-height-heading-2: 56px;
		--font-size-heading-3: 42px;
		--line-height-heading-3: 50px;
		--font-size-heading-4: 37px;
		--line-height-heading-4: 44px;
		--font-size-heading-5: 30px;
		--line-height-heading-5: 36px;
		--font-size-heading-6: 24px;
		--line-height-heading-6: 29px;
		--font-size-hoss-42: 38px;
		--line-height-hoss-42: 46px;
		--font-size-hoss-32: 29px;
		--line-height-hoss-32: 35px;
		--font-size-hoss-30: 28px;
		--line-height-hoss-30: 34px;
		--font-size-script-28: 26px;
		--line-height-script-28: 31px;
		--font-size-hoss-24: 22px;
		--line-height-hoss-24: 27px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-body-20: 18px;
		--line-height-body-20: 22px;
		--font-size-body-18: 17px;
		--line-height-body-18: 21px;
		--font-size-hoss-22: 20px;
		--line-height-hoss-22: 25px;
		--font-size-split-tagline: 42px;
		--line-height-split-tagline: 50px;
		--font-size-script-52: 48px;
		--line-height-script-52: 58px;
		--font-size-footer-tagline: 54px;
		--line-height-footer-tagline: 65px;
		--font-size-menu: 50px;
		--line-height-menu: 60px;
		--letter-spacing-menu: 1px;
	}
}

@media (max-width: 1166px) {
	:root {
		--font-size-display-72: 56px;
		--line-height-display-72: 70px;
		--font-size-heading-1: 52px;
		--line-height-heading-1: 62px;
		--font-size-heading-2: 42px;
		--line-height-heading-2: 53px;
		--font-size-heading-3: 40px;
		--line-height-heading-3: 48px;
		--font-size-heading-4: 35px;
		--line-height-heading-4: 42px;
		--font-size-heading-5: 29px;
		--line-height-heading-5: 35px;
		--font-size-heading-6: 23px;
		--line-height-heading-6: 28px;
		--font-size-hoss-42: 36px;
		--line-height-hoss-42: 43px;
		--font-size-hoss-32: 28px;
		--line-height-hoss-32: 34px;
		--font-size-hoss-30: 27px;
		--line-height-hoss-30: 32px;
		--font-size-script-28: 25px;
		--line-height-script-28: 30px;
		--font-size-hoss-24: 22px;
		--line-height-hoss-24: 26px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-22: 20px;
		--line-height-hoss-22: 24px;
		--font-size-body-20: 18px;
		--line-height-body-20: 22px;
		--font-size-body-18: 17px;
		--line-height-body-18: 21px;
		--font-size-split-tagline: 40px;
		--line-height-split-tagline: 48px;
		--font-size-script-52: 46px;
		--line-height-script-52: 55px;
		--font-size-footer-tagline: 50px;
		--line-height-footer-tagline: 60px;
		--font-size-menu: 48px;
		--line-height-menu: 58px;
		--letter-spacing-menu: 0.96px;
	}
}

@media (max-width: 1024px) {
	:root {
		--font-size-display-72: 52px;
		--line-height-display-72: 62px;
		--font-size-heading-1: 48px;
		--line-height-heading-1: 58px;
		--font-size-heading-2: 41px;
		--line-height-heading-2: 49px;
		--font-size-heading-3: 38px;
		--line-height-heading-3: 46px;
		--font-size-heading-4: 33px;
		--line-height-heading-4: 40px;
		--font-size-heading-5: 28px;
		--line-height-heading-5: 34px;
		--font-size-heading-6: 22px;
		--line-height-heading-6: 27px;
		--font-size-hoss-42: 34px;
		--line-height-hoss-42: 41px;
		--font-size-hoss-32: 27px;
		--line-height-hoss-32: 32px;
		--font-size-hoss-30: 26px;
		--line-height-hoss-30: 31px;
		--font-size-script-28: 24px;
		--line-height-script-28: 29px;
		--font-size-hoss-24: 21px;
		--line-height-hoss-24: 25px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-18: 16px;
		--line-height-hoss-18: 19px;
		--font-size-body-20: 18px;
		--line-height-body-20: 22px;
		--font-size-hoss-22: 20px;
		--line-height-hoss-22: 24px;
		--font-size-body-18: 16px;
		--line-height-body-18: 20px;
		--font-size-split-tagline: 36px;
		--line-height-split-tagline: 43px;
		--font-size-script-52: 42px;
		--line-height-script-52: 50px;
		--font-size-footer-tagline: 44px;
		--line-height-footer-tagline: 53px;
		--font-size-menu: 44px;
		--line-height-menu: 53px;
		--letter-spacing-menu: 0.88px;
	}
}

@media (max-width: 768px) {
	:root {
		--font-size-display-72: 44px;
		--line-height-display-72: 53px;
		--font-size-heading-1: 43px;
		--line-height-heading-1: 52px;
		--font-size-heading-2: 37px;
		--line-height-heading-2: 44px;
		--font-size-heading-3: 36px;
		--line-height-heading-3: 43px;
		--font-size-heading-4: 31px;
		--line-height-heading-4: 37px;
		--font-size-heading-5: 27px;
		--line-height-heading-5: 32px;
		--font-size-heading-6: 22px;
		--line-height-heading-6: 26px;
		--font-size-hoss-42: 32px;
		--line-height-hoss-42: 38px;
		--font-size-hoss-32: 26px;
		--line-height-hoss-32: 31px;
		--font-size-hoss-30: 25px;
		--line-height-hoss-30: 30px;
		--font-size-script-28: 23px;
		--line-height-script-28: 28px;
		--font-size-hoss-24: 21px;
		--line-height-hoss-24: 25px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-18: 16px;
		--line-height-hoss-18: 19px;
		--font-size-hoss-22: 19px;
		--line-height-hoss-22: 23px;
		--font-size-body-20: 18px;
		--line-height-body-20: 22px;
		--font-size-body-18: 16px;
		--line-height-body-18: 19px;
		--font-size-split-tagline: 32px;
		--line-height-split-tagline: 38px;
		--font-size-script-52: 36px;
		--line-height-script-52: 43px;
		--font-size-footer-tagline: 38px;
		--line-height-footer-tagline: 46px;
		--font-size-menu: 38px;
		--line-height-menu: 46px;
		--letter-spacing-menu: 0.76px;
	}
}

@media (max-width: 480px) {
	:root {
		--font-size-display-72: 34px;
		--line-height-display-72: 41px;
		--font-size-heading-1: 38px;
		--line-height-heading-1: 46px;
		--font-size-heading-2: 30px;
		--line-height-heading-2: 36px;
		--font-size-heading-3: 32px;
		--line-height-heading-3: 38px;
		--font-size-heading-4: 28px;
		--line-height-heading-4: 34px;
		--font-size-heading-5: 25px;
		--line-height-heading-5: 30px;
		--font-size-heading-6: 21px;
		--line-height-heading-6: 25px;
		--font-size-hoss-42: 29px;
		--line-height-hoss-42: 35px;
		--font-size-hoss-32: 24px;
		--line-height-hoss-32: 29px;
		--font-size-hoss-30: 24px;
		--line-height-hoss-30: 29px;
		--font-size-script-28: 22px;
		--line-height-script-28: 26px;
		--font-size-hoss-24: 20px;
		--line-height-hoss-24: 24px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-18: 16px;
		--line-height-hoss-18: 19px;
		--font-size-body-20: 17px;
		--line-height-body-20: 21px;
		--font-size-hoss-22: 18px;
		--line-height-hoss-22: 22px;
		--font-size-split-tagline: 27px;
		--line-height-split-tagline: 33px;
		--font-size-script-52: 30px;
		--line-height-script-52: 36px;
		--font-size-footer-tagline: 32px;
		--line-height-footer-tagline: 38px;
		--font-size-menu: 32px;
		--line-height-menu: 38px;
		--letter-spacing-menu: 0.64px;
	}

	/* Keep non-paragraph controls on their authored type roles. */
	p {
		--font-size-body-20: 14px;
		--line-height-body-20: 20px;
		--font-size-body-18: 14px;
		--line-height-body-18: 20px;
		--font-size-body-16: 14px;
		--line-height-body-16: 20px;
		--line-height-body-16-medium: 20px;

		font-size: var(--font-size-body-16);
		line-height: var(--line-height-body-16);
	}
}

/* Covers fractional 375px device emulation while keeping 376px unchanged. */
@media (max-width: 375.98px) {
	:root {
		--font-size-heading-2: 26px;
		--line-height-heading-2: 31px;
		--font-size-hoss-42: 26px;
		--line-height-hoss-42: 31px;
	}
}

@media (max-width: 360px) {
	:root {
		--font-size-display-72: 30px;
		--line-height-display-72: 36px;
		--font-size-heading-1: 35px;
		--line-height-heading-1: 42px;
		--font-size-heading-2: 26px;
		--line-height-heading-2: 31px;
		--font-size-heading-3: 29px;
		--line-height-heading-3: 36px;
		--font-size-heading-4: 26px;
		--line-height-heading-4: 31px;
		--font-size-heading-5: 24px;
		--line-height-heading-5: 29px;
		--font-size-heading-6: 20px;
		--line-height-heading-6: 24px;
		--font-size-hoss-42: 23px;
		--line-height-hoss-42: 32px;
		--font-size-hoss-32: 23px;
		--line-height-hoss-32: 28px;
		--font-size-hoss-30: 22px;
		--line-height-hoss-30: 27px;
		--font-size-script-28: 21px;
		--line-height-script-28: 25px;
		--font-size-hoss-24: 19px;
		--line-height-hoss-24: 23px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-18: 16px;
		--line-height-hoss-18: 19px;
		--font-size-hoss-22: 17px;
		--line-height-hoss-22: 21px;
		--font-size-body-20: 17px;
		--line-height-body-20: 21px;
		--font-size-split-tagline: 26px;
		--line-height-split-tagline: 31px;
		--font-size-script-52: 28px;
		--line-height-script-52: 34px;
		--font-size-footer-tagline: 30px;
		--line-height-footer-tagline: 36px;
		--font-size-menu: 30px;
		--line-height-menu: 36px;
		--letter-spacing-menu: 0.6px;
	}
}

/*
* Reduce the existing type roles for short landscape viewports. Components
* continue to consume the global typography system; no page-specific font
* sizes are introduced.
*/
@media (min-width: 769px) and (max-height: 720px) {
	:root {
		--font-size-display-72: 54px;
		--line-height-display-72: 65px;
		--font-size-heading-1: 50px;
		--line-height-heading-1: 60px;
		--font-size-heading-2: 42px;
		--line-height-heading-2: 50px;
		--font-size-heading-3: 38px;
		--line-height-heading-3: 46px;
		--font-size-heading-4: 34px;
		--line-height-heading-4: 41px;
		--font-size-heading-5: 28px;
		--line-height-heading-5: 34px;
		--font-size-heading-6: 23px;
		--line-height-heading-6: 28px;
		--font-size-hoss-42: 36px;
		--line-height-hoss-42: 43px;
		--font-size-hoss-32: 28px;
		--line-height-hoss-32: 34px;
		--font-size-hoss-30: 27px;
		--line-height-hoss-30: 32px;
		--font-size-script-28: 25px;
		--line-height-script-28: 30px;
		--font-size-hoss-24: 22px;
		--line-height-hoss-24: 26px;
		--font-size-hoss-20: 18px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-22: 20px;
		--line-height-hoss-22: 24px;
		--font-size-split-tagline: 38px;
		--line-height-split-tagline: 46px;
		--font-size-script-52: 44px;
		--line-height-script-52: 53px;
		--font-size-menu: 46px;
		--line-height-menu: 55px;
	}
}

@media (min-width: 769px) and (max-height: 620px) {
	:root {
		--font-size-display-72: 48px;
		--line-height-display-72: 58px;
		--font-size-heading-1: 44px;
		--line-height-heading-1: 53px;
		--font-size-heading-2: 36px;
		--line-height-heading-2: 43px;
		--font-size-heading-3: 34px;
		--line-height-heading-3: 41px;
		--font-size-heading-4: 30px;
		--line-height-heading-4: 36px;
		--font-size-heading-5: 26px;
		--line-height-heading-5: 31px;
		--font-size-heading-6: 21px;
		--line-height-heading-6: 25px;
		--font-size-hoss-42: 31px;
		--line-height-hoss-42: 37px;
		--font-size-hoss-32: 25px;
		--line-height-hoss-32: 30px;
		--font-size-hoss-30: 24px;
		--line-height-hoss-30: 29px;
		--font-size-script-28: 23px;
		--line-height-script-28: 28px;
		--font-size-hoss-24: 21px;
		--line-height-hoss-24: 25px;
		--font-size-hoss-20: 16px;
		--line-height-hoss-20: 22px;
		--font-size-hoss-22: 19px;
		--line-height-hoss-22: 23px;
		--font-size-split-tagline: 34px;
		--line-height-split-tagline: 41px;
		--font-size-script-52: 40px;
		--line-height-script-52: 48px;
		--font-size-menu: 42px;
		--line-height-menu: 50px;
	}
}

@media (max-width: 768px) and (max-height: 560px) and (orientation: landscape) {
	:root {
		--font-size-display-72: 34px;
		--line-height-display-72: 41px;
		--font-size-heading-1: 38px;
		--line-height-heading-1: 46px;
		--font-size-heading-2: 33px;
		--line-height-heading-2: 40px;
		--font-size-heading-3: 32px;
		--line-height-heading-3: 38px;
		--font-size-heading-4: 28px;
		--line-height-heading-4: 34px;
		--font-size-heading-5: 25px;
		--line-height-heading-5: 30px;
		--font-size-heading-6: 21px;
		--line-height-heading-6: 25px;
		--font-size-hoss-42: 29px;
		--line-height-hoss-42: 35px;
		--font-size-hoss-32: 24px;
		--line-height-hoss-32: 29px;
		--font-size-hoss-30: 24px;
		--line-height-hoss-30: 29px;
		--font-size-script-28: 22px;
		--line-height-script-28: 26px;
		--font-size-hoss-24: 20px;
		--line-height-hoss-24: 24px;
		--font-size-hoss-22: 18px;
		--line-height-hoss-22: 22px;
		--font-size-split-tagline: 27px;
		--line-height-split-tagline: 33px;
		--font-size-script-52: 30px;
		--line-height-script-52: 36px;
		--font-size-menu: 32px;
		--line-height-menu: 38px;
	}
}


/* Mobile H1 scale: keep compact headings from 375px down. */
@media (max-width: 375px) {
	:root {
		--font-size-heading-1: 32px;
		--line-height-heading-1: 38px;
	}
}