@layer infra {
	body.no-scroll{
		overflow: hidden;
		height: 100%;
	}

	@layer typography {
		/* @link https://utopia.fyi/type/calculator/?c=320,14,1.25,1240,16,1.26,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */

		:root {
			--ff-primary: elza-text, sans-serif;
			--ff-accent: silva-text, sans-serif;
			--fs-step--2: clamp(0.56rem, calc(0.54rem + 0.12vw), 0.63rem);
			--fs-step--1: clamp(0.70rem, calc(0.67rem + 0.16vw), 0.79rem);
			--fs-step-0: clamp(0.88rem, calc(0.83rem + 0.22vw), 1.00rem);
			--fs-step-1: clamp(1.09rem, calc(1.04rem + 0.29vw), 1.26rem);
			--fs-step-2: clamp(1.37rem, calc(1.29rem + 0.38vw), 1.59rem);
			--fs-step-3: clamp(1.71rem, calc(1.61rem + 0.51vw), 2.00rem);
			--fs-step-4: clamp(2.14rem, calc(2.00rem + 0.67vw), 2.52rem);
			--fs-step-5: clamp(2.67rem, calc(2.49rem + 0.88vw), 3.18rem);
		}

		h1,
		.h1 {
			font-size: var(--fs-step-5);
			font-family: var(--ff-accent);
			line-height: 1.15;
			font-weight: 300;
		}

		h2,
		.h2 {
			font-size: var(--fs-step-3);
			font-family: var(--ff-accent);
			line-height: 1;
			font-weight: 200;
		}

		h3,
		.h3 {
			font-size: var(--fs-step-2);
			line-height: 1;
			font-weight: 300;
		}

		h4,
		.h4 {
			font-size: var(--fs-step-1);
			line-height: 1.25;
			font-weight: 500;
		}

		h5,
		.h5 {
			font-size: var(--fs-step-1);
			font-weight: 500;
		}

		h6,
		.h6,
		body {
			font-size: var(--fs-step-0);
			font-weight: 300;
		}

		small,
		.small,
		.eyebrow {
			font-size: var(--fs-step--1);
		}

		sup,
		sub,
		.sub {
			font-size: var(--fs-step--2);
		}
	}

	@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: 102.5rem;

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

		@media(min-width: 768px){
			:root{
				--column-gap: 2rem;
			}
		}
	}

	@layer colors {
		:root {
			/* Palette Colors - HSL notation */
			--clr-teal: 194, 55%, 31%;
			--clr-dark-teal: 195, 55%, 22%;
			--clr-off-white: 40, 100%, 99%;
			--clr-cream: 43, 30%, 95%;
			--clr-sand: 40, 45%, 92%;
			--clr-brown: 24, 67%, 11%;
			--clr-dark-brown: 319, 93%, 5%;
			--clr-yellow: 43, 82%, 57%;
			--clr-red: 0, 89%, 27%;

			/* Color assignments */
			--clr-primary-400: var(--plt-deep-green-step-0);
		}
	}

	/*
	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(6, [col-start] 1fr);
			row-gap: var(--row-gap);
			column-gap: var(--column-gap);
			container: auto-grid / inline-size;
		}

		@media(min-width: 768px){
			.layout-bootstrap-grid {
				grid-template-columns: repeat(12, [col-start] 1fr);
			}
		}

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

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

		@container auto-grid (min-width: 768px) {
			.layout-bootstrap-grid > * {
				grid-column: span 12;
			}
			/* 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;
			}

			.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-reel {
			--column-size: calc((102.5rem / 3) - 1.333rem);

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

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

		/*
			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 {
			--rail-width: var(--column-gap);
			--min-rail-margin: 0;
			--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];
			column-gap: var(--rail-width);
			row-gap: var(--row-gap);
		}

		@media(min-width: 768px){
			.layout-railed {
				--min-rail-margin: 1rem;
			}
		}

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

		.layout-railed > .full-bleed {
			grid-column: full;
		}

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

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