@layer infra {
	@layer typography {
		/* @link https://utopia.fyi/type/calculator/?c=320,14,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root {
			overflow-y: scroll;

			--ff-primary: rig-sans, sans-serif;
			--ff-secondary: arboria, sans-serif;
			--ff-accent: Inter, sans-serif;

			/* --fs-step--2: clamp(.61rem, calc(.6rem + .06vw), .64rem);
			--fs-step--1: clamp(.73rem, calc(.7rem + .12vw), .8rem);
			--fs-step-0: clamp(.88rem, calc(.83rem + .22vw), 1rem);
			--fs-step-1: clamp(1.05rem, calc(.98rem + .35vw), 1.25rem);
			--fs-step-2: clamp(1.26rem, calc(1.15rem + .53vw), 1.56rem);
			--fs-step-3: clamp(1.51rem, calc(1.36rem + .77vw), 1.95rem);
			--fs-step-4: clamp(1.81rem, calc(1.6rem + 1.09vw), 2.44rem);
			--fs-step-5: clamp(2.18rem, calc(1.87rem + 1.52vw), 3.05rem); */
			--fs-small: 1em;
			--fs-medium: 1.125em;
			--fs-large: 1.625em;
			--fs-xl: 2.25em;
		}

		body {
			overflow-x: hidden;
			background-color: hsl(var(--clr-dark-gray));
		}

		body.no-scroll {
			overflow-y: hidden;
			height: 100vh;
		}

		#main {
			background-color: white;
		}

		h1,
		.h1 {
			font-size: 3.5em;
			line-height: calc(.25rem + 1em);
			font-family: var(--ff-secondary);
			font-weight: 300;
			margin-bottom: var(--space-xs);
		}

		@media(min-width: 1025px) {
			h1,
			.h1 {
				font-size: 3.5em;
			}
		}

		h2,
		.h2 {
			font-size: 1.9em;
			font-family: var(--ff-secondary);
			font-weight: 400;
			margin-bottom: var(--space-2xs);
		}

		@media(min-width: 1025px) {
			h2,
			.h2 {
				font-size: 1.9em;
			}
		}

		h3,
		.h3 {
			font-size: 1.65em;
			font-family: var(--ff-secondary);
			font-weight: 400;
			margin-bottom: var(--space-2xs);
			color: hsl(var(--clr-deep-blue));
		}

		@media(min-width: 1025px) {
			h3,
			.h3 {
				font-size: 1.65em;
				font-weight: 400;
				color: hsl(var(--clr-deep-blue));
			}
		}

		h4,
		.h4 {
			font-size: 1.35em;
			font-family: var(--ff-primary);
			font-weight: 500;
			margin-bottom: var(--space-3xs);
		}

		@media(min-width: 1025px) {
			h4,
			.h4 {
				font-size: 1.35em;
			}
		}

		h5,
		.h5 {
			display: revert-layer;
			font-size: 1.1em;
			font-weight: 700;
			margin-bottom: var(--space-3xs);
		}

		h6,
		.h6 {
			font-size: .85em;
			font-style: normal;
			font-weight: 800;
			letter-spacing: .24em;
			margin-bottom: 0;
			color: hsl(var(--clr-deep-blue));
			text-transform: uppercase;
		}

		p {
			font-size: 1.0625em;
			line-height: 1.45em;
			margin-bottom: var(--space-s);
		}

		@media(min-width: 1025px) {
			p {
				font-size: 1.125em;
			}
		}

		ul,
		ol {
			padding-left: 1.333em;
		}

		ul li,
		ol li {
			font-size: 1.125rem;
			margin-bottom: var(--space-2xs);
		}

		small,
		.small {
			font-size: .875em;
		}

		sup,
		sub,
		.sub {
			font-size: .875em;
		}

		mark.special {
			background-color: inherit;
			color: inherit;
			position: relative;
			z-index: 0;
		}

		mark.special:after {
			content: '';
			position: absolute;
			inset: 50% -.15em 0;
			background-color: hsl(var(--clr-medium-teal));
			z-index: -1;
		}

		a,
		a:link {
			color: hsl(var(--clr-deep-blue));
			font-weight: inherit;
			text-decoration: none;
			text-decoration-color: transparent;
			transition: text-decoration-color .3s;
		}

		a:hover {
			color: hsl(var(--clr-deep-teal));
			text-decoration: underline;
			text-decoration-color: hsl(var(--clr-medium-teal));
			text-underline-offset: 6px;
			text-decoration-skip: none;
			text-decoration-skip-ink: none;
		}

		blockquote cite {
			text-align: inherit;
		}

		figure figcaption {
			height: 0;
			overflow: hidden;
		}

		span.icon {
			font-family: FontAwesome;
			font-size: 1.375em;
			font-weight: 100;
			position: relative;
			top: .15em;
			margin-left: .25em;
		}

		span.icon a:hover {
			text-decoration: none;
		}

		span.aqua-dot {
			position: relative;
			display: inline-block;
			height: .15em;
			width: .15em;
			background-color: hsl(var(--clr-medium-teal));
			border-radius: 50%;
		}

		.frosted {
			background: rgba(255, 255, 255, .75);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
		}

		.table-wrapper {
			position: relative;
			max-width: 100%;

			@media(max-width: 768px) {
				&:after {
					pointer-events: none;
					content: '';
					width: 40px;
					position: absolute;
					inset: 0 0 1rem auto;
					box-shadow: inset -20px 0 20px rgba(0, 0, 0, .5);
					z-index: 1;
				}
			}
		}

		.table-wrapper-inner {
			overflow: scroll;
		}
	}

	@layer spacing {
		/* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1240,22,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root {
			--space-3xs: clamp(.25rem, calc(.21rem + .22vw), .38rem);
			--space-2xs: clamp(.44rem, calc(.35rem + .43vw), .69rem);
			--space-xs: clamp(.69rem, calc(.56rem + .65vw), 1.06rem);
			--space-s: clamp(.88rem, calc(.7rem + .87vw), 1.38rem);
			--space-m: clamp(1.31rem, calc(1.05rem + 1.3vw), 2.06rem);
			--space-l: clamp(1.75rem, calc(1.4rem + 1.74vw), 2.75rem);
			--space-xl: clamp(2.63rem, calc(2.1rem + 2.61vw), 4.13rem);
			--space-2xl: clamp(3.5rem, calc(2.8rem + 3.48vw), 5.5rem);
			--space-3xl: clamp(5.25rem, calc(4.21rem + 5.22vw), 8.25rem);

			/* One-up pairs */
			--space-3xs-2xs: clamp(.25rem, calc(.1rem + .76vw), .69rem);
			--space-2xs-xs: clamp(.44rem, calc(.22rem + 1.09vw), 1.06rem);
			--space-xs-s: clamp(.69rem, calc(.45rem + 1.2vw), 1.38rem);
			--space-s-m: clamp(.88rem, calc(.46rem + 2.07vw), 2.06rem);
			--space-m-l: clamp(1.31rem, calc(.81rem + 2.5vw), 2.75rem);
			--space-l-xl: clamp(1.75rem, calc(.92rem + 4.13vw), 4.13rem);
			--space-xl-2xl: clamp(2.63rem, calc(1.63rem + 5vw), 5.5rem);
			--space-2xl-3xl: clamp(3.5rem, calc(1.85rem + 8.26vw), 8.25rem);
			--container-max-width: 103.125rem;

			/* column gap */
			--column-gap: 2rem;
		}
	}

	@layer colors {
		:root {
			--clr-deep-teal: 133.9, 51.9%, 30.98%;
			--clr-deep-blue: 205, 58%, 26%;
			--clr-capital-blue: 211.2, 80.1%, 29.6%;
			--clr-medium-teal: 128.7, 52.5%, 46.3%;
			--clr-gradient-teal: 177, 76%, 59%;
			--clr-gradient-blue: 187, 100%, 71%;
			--clr-white: 0, 0%, 100%;
			--clr-black: 0, 0%, 0%;
			--clr-light-gray: 0, 0%, 97%;
			--clr-dark-gray: 180, 3%, 14%;
			--clr-dark-gold: 42.5, 38%, 66.5%;
		}
	}

	/*
	Generally components ought to contain their own layout styles
	As well as the layout styles of their direct children, but these
	are here in the case of one-off components as well as to show the
	team "recipes" on how certain layouts can be achieved and can
	"copy-mod-paste" within newer patterns

	(What about retaining these classes, but each component just copies
	whatever styles it needs based on these recipes? That way we don't have
	styles split like <div class="hero-area auto-grid">
	*/

	@layer layout {
		.layout-centered {
			display: grid;
			place-items: center;
			gap: var(--column-gap);
		}

		.layout-centered-stacked {
			display: grid;
			grid-template-areas: "content";
			place-items: center;
			isolation: isolate;
		}

		.layout-centered-stacked > * {
			grid-area: content;
		}

		.layout-cluster {
			--column-gap: 1rem;

			display: flex;
			flex-wrap: wrap;
			gap: var(--column-gap);
		}

		.layout-cluster-stretch {
			display: flex;
			flex-wrap: wrap;
			gap: var(--column-gap);
		}

		.layout-cluster-stretch > * {
			--new-row-breakpoint: 0;

			flex: 1 1 var(--new-row-breakpoint);
		}

		.layout-bootstrap-grid {
			--row-gap: var(--column-gap);

			display: grid;
			grid-template-columns: repeat(12, [col-start] 1fr);
			row-gap: var(--row-gap);
			column-gap: var(--column-gap);
			container: auto-grid / inline-size;
		}

		.layout-bootstrap-grid > * {
			grid-column: span 12;
		}

		@media (min-width: 1025px) {
			/* gte 800px */
			.layout-bootstrap-grid > [data-row-span="1"] {
				grid-column: span 1;
			}

			.layout-bootstrap-grid > [data-row-span="2"] {
				grid-column: span 2;
			}

			.layout-bootstrap-grid > [data-row-span="3"] {
				/* grid-column: span 3; */
				max-width: 25%;
				flex: 0 0 25%;
			}

			.layout-bootstrap-grid > [data-row-span="4"] {
				grid-column: span 4;
			}

			.layout-bootstrap-grid > [data-row-span="5"] {
				grid-column: span 5;
			}

			.layout-bootstrap-grid > [data-row-span="6"] {
				grid-column: span 6;
			}

			.layout-bootstrap-grid > [data-row-span="7"] {
				grid-column: span 7;
			}

			.layout-bootstrap-grid > [data-row-span="8"] {
				grid-column: span 8;
			}

			.layout-bootstrap-grid > [data-row-span="9"] {
				grid-column: span 9;
			}

			.layout-bootstrap-grid > [data-row-span="10"] {
				grid-column: span 10;
			}

			.layout-bootstrap-grid > [data-row-span="11"] {
				grid-column: span 11;
			}

			.layout-bootstrap-grid > [data-row-span="12"] {
				grid-column: span 12;
			}
		}

		.layout-flex-grid {
			--row-gap: var(--column-gap);
			--column-gap: 0;

			display: flex;
			flex-wrap: wrap;
			row-gap: var(--row-gap);
			margin-left: calc(var(--column-gap) / -2);
			margin-right: calc(var(--column-gap) / -2);
			container: auto-grid / inline-size;
		}

		.layout-flex-grid > * {
			max-width: 100%;
			flex: 0 0 100%;
			padding-left: calc(var(--column-gap) / 2);
			padding-right: calc(var(--column-gap) / 2);
			text-decoration: none;
			display: grid;
		}

		.layout-flex-grid > * > * {
			min-width: 0;
		}

		.layout-flex-grid > [data-row-span="0"] {
			max-width: none;
			flex: 1 1 50%;
		}

		@media(min-width: 1025px) {
			/* gte 800px */
			.layout-flex-grid > [data-row-span="0"] {
				max-width: none;
				flex: 1;
			}

			.layout-flex-grid > [data-row-span="1"] {
				max-width: 8.3333333333%;
				flex: 0 0 8.3333333333%;
			}

			.layout-flex-grid > [data-row-span="2"] {
				max-width: 16.6666666667%;
				flex: 0 0 16.6666666667%;
			}

			.layout-flex-grid > [data-row-span="3"] {
				max-width: 25%;
				flex: 0 0 25%;
			}

			.layout-flex-grid > [data-row-span="4"] {
				max-width: 33.3333333333%;
				flex: 0 0 33.3333333333%;
			}

			.layout-flex-grid > [data-row-span="5"] {
				max-width: 41.6666666667%;
				flex: 0 0 41.6666666667%;
			}

			.layout-flex-grid > [data-row-span="6"] {
				max-width: 50%;
				flex: 0 0 50%;
			}

			.layout-flex-grid > [data-row-span="7"] {
				max-width: 58.3333333333%;
				flex: 0 0 58.3333333333%;
			}

			.layout-flex-grid > [data-row-span="8"] {
				max-width: 66.6666666667%;
				flex: 0 0 66.6666666667%;
			}

			.layout-flex-grid > [data-row-span="9"] {
				max-width: 75%;
				flex: 0 0 75%;
			}

			.layout-flex-grid > [data-row-span="10"] {
				max-width: 83.3333333333%;
				flex: 0 0 83.3333333333%;
			}

			.layout-flex-grid > [data-row-span="11"] {
				max-width: 91.6666666667%;
				flex: 0 0 91.6666666667%;
			}

			.layout-flex-grid > [data-row-span="12"] {
				max-width: 100%;
				flex: 0 0 100%;
			}

			.layout-flex-grid > [data-row-span="50"] {
				max-width: 50vw;
				flex: 0 0 50vw;
			}
		}

		.layout-bootstrap-grid .layout-bootstrap-grid,
		.layout-bootstrap-grid .layout-flex-grid,
		.layout-flex-grid .layout-flex-grid,
		.layout-flex-grid .layout-bootstrap-grid {
			container: none;
		}

		.layout-reel {
			--column-size: 200px;

			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: var(--column-size);
			gap: var(--column-gap);
			overflow-x: scroll;
			scroll-snap-type: x mandatory;
			scroll-padding: 1rem;
		}

		.layout-reel > * {
			scroll-snap-align: start;
		}

		.reel-controls {
			max-width: var(--container-max-width);
			display: flex;
			justify-content: flex-end;
			gap: var(--row-gap);
			margin-right: var(--row-gap);
		}

		/*
			While this is a useful "drop-in" sort of layout class, the fact that
			the layout only works when edited in two places isn't optimal. It's a
			small learning curve so it's not that massive of a downside, but it's probably
			better to just have the layout code within each component rather than be its own
			class(es).

			There's no need to abstract over CSS grids.
		*/
		.layout-railed {
			--min-rail-margin: 5%;
			--max-column-size: var(--container-max-width);
			--row-gap: 0;

			display: grid;
			grid-template-columns: [full-start] minmax(var(--min-rail-margin), 1fr) [main-start] minmax(0, var(--max-column-size)) [main-end] minmax(var(--min-rail-margin), 1fr) [full-end];
			row-gap: var(--row-gap);
			position: relative;
			overflow-x: hidden;
		}

		.layout-railed > * {
			grid-column: main;
			width: 100%;
		}

		.layout-railed .layout-flex-grid {
			width: auto;
		}

		.layout-railed > .full-bleed.layout-flex-grid {
			grid-column: full;
			width: 100%;
		}

		.layout-railed > .full-bleed.layout-flex-grid > *:first-child {
			padding-left: 0;
		}

		.layout-railed > .full-bleed.layout-flex-grid > *:last-child {
			padding-right: 0;
		}

		.layout-railed > .right-bleed.layout-flex-grid {
			grid-column-end: full-end;
			margin-right: 0;
		}

		.layout-railed > .right-bleed.layout-flex-grid > *:last-child {
			padding-right: 0;
			padding-left: 0;
		}

		.layout-railed > .left-bleed.layout-flex-grid {
			grid-column-start: full-start;
			margin-left: 0;
		}

		.layout-railed > .left-bleed.layout-flex-grid > *:first-child {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

.layout-railed .wp-block-image.aligncenter {
	display: block;
}

#stadia-body #CookiebotWidget {
	display: none;
}

#stadia-body #CybotCookiebotDialog {
	background-color: #f8f8f8;
	box-shadow: 2px 2px 14px 2px #12121269;
	color: #232323;
	font-family: var(--ff-primary);
	font-size: 11pt;

	/* bottom: 0; */

	/* top: auto !important; */
}

#stadia-body #CybotCookiebotDialog div {
	font-family: var(--ff-primary);
	line-height: 1.25;
	font-size: 12px !important;
}

#stadia-body #CybotCookiebotDialogBody {
	max-width: 1000px;
}

#stadia-body #CybotCookiebotDialogBodyContent {
	font-size: 10.5pt;
}

#stadia-body #CybotCookiebotDialogBodyContentTitle {
	font-family: var(--ff-primary);
}

#stadia-body .CybotCookiebotDialogBodyButton {
	padding: .15em 1em !important;
	font-size: 14px;
	font-weight: 400 !important;
	text-align: center;
	text-decoration: none;
	border-radius: 35px !important;
	background-color: hsl(var(--clr-deep-blue)) !important;
	border: 0 !important;
	position: relative;
	display: inline-block;
	cursor: pointer;
	webkit-touch-callout: inherit;
	transition: background-color .3s, color .3s, border-color .3s;
	margin-top: 9px;
	max-width: 100px;
}

#CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyBottomWrapper {
	margin-top: 0 !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
	font-size: 13px;
}

#CybotCookiebotDialog.CybotEdge {
	padding: 10px !important;
}