:root {
	--font-family-title: "gotham", sans-serif;
	--font-family-body: "gotham", sans-serif;
	--font-family-sans: var(--font-family-body);

	/* Aqua */
	--color-aqua-300: #c2e6f2;
	--color-aqua-400: #8acfe8;
	--color-aqua-primary: #00b2f0;

	/* Teal */
	--color-teal-300: #7addb5;
	--color-teal-400: #00cc92;
	--color-teal-primary: #029B75;
	--color-teal-primary-hover: #008563;

	/* Lime */
	--color-lime-300: #e2efd0;
	--color-lime-primary: #c4dfa1;

	/* Neutrals */
	--color-white: #ffffff;
	--color-surface: var(--color-white);
	--color-surface-muted: #f2f2f2;
	--color-surface-subtle: #e8e8e8;
	--color-neutrals-light: #737476;
	--color-neutrals-dark: #58595b;

	--color-navy: #203b59;
	--color-gold: #A46701;
	--color-red: #9d2620;

	--color-text: var(--color-neutrals-dark);

	/* Type — mobile / base */
	--font-size-h1: 48px;
	--font-size-h2: 40px;
	--font-size-h3: 32px;
	--font-size-h4: 36px;
	--font-size-h5: 20px;
	--font-size-h6: 18px;
	--font-size-body-lrg: 18px;
	--font-size-body-md: 16px;
	--font-size-body: 15px;
	--font-size-body-sm: 12px;

	--line-height-h1: 1;
	--line-height-h2: 1.107;
	--line-height-h3: 1.25;
	--line-height-h4: 1.107;
	--line-height-h5: 1.5;
	--line-height-h6: 1.333;
	--line-height-body-lrg: 1.667;
	--line-height-body-md: 1.688;
	--line-height-body: 1.6;
	--line-height-body-sm: 1.5;

	--layout-max-width: 1240px;
	--layout-max-width-md: 900px;
	--layout-max-width-lg: 1314px;
	--header-height: 82px;
}

@media (min-width: 769px) {
	:root {
		--font-size-h1: 54px;
		--font-size-h2: 48px;
		--font-size-h3: 40px;
		--font-size-h5: 24px;
		--font-size-body-lrg: 20px;
		--font-size-body-md: 18px;
		--font-size-body: 16px;

		--line-height-h2: 1.333;
		--line-height-h5: 1.25;
		--line-height-body-lrg: 1.5;
		--line-height-body-md: 1.5;
		--line-height-body: 1.5;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
	/* Basic View Transitions */
	@view-transition {
		navigation: auto;
	}
	::view-transition-group(auto) {
		animation-duration: 2s;
	}
}

body {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: 500;
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-surface);
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture {
	display: block;
	width: 100%;
	height: auto;
}

html {
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

[id] {
	scroll-margin-block-start: 2ex;
}


/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-title);
	color: var(--color-text);
	margin: 0;
}

h1,
h2 {
	text-wrap: balance;
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: 900;
	line-height: var(--line-height-h1);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: 900;
	line-height: var(--line-height-h2);
	text-transform: uppercase;
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: 900;
	line-height: var(--line-height-h3);
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: 900;
	line-height: var(--line-height-h4);
	text-transform: uppercase;
}

h5 {
	font-size: var(--font-size-h5);
	font-weight: 700;
	line-height: var(--line-height-h5);
	text-transform: uppercase;
}

h6 {
	font-size: var(--font-size-h6);
	font-weight: 900;
	line-height: var(--line-height-h6);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

p {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: 500;
	line-height: var(--line-height-body);
	margin: 0;
}

@supports (text-wrap: pretty) {
	p {
		text-wrap: pretty;
	}
}

.p--md {
	font-size: var(--font-size-body-md);
	font-weight: 500;
	line-height: var(--line-height-body-md);
}

.p--lrg {
	font-size: var(--font-size-body-lrg);
	font-weight: 500;
	line-height: var(--line-height-body-lrg);
}

.p--small {
	font-size: var(--font-size-body-sm);
	font-weight: 400;
	line-height: var(--line-height-body-sm);
}

a {
	color: var(--color-text);
}

a:hover,
a:focus {
	color: var(--color-text-hover);
}
a:visited {
	color: var(--color-text);
}