@layer reset, settings, elements, layout, blocks, theme,  utilities;

@layer settings {

	@layer color {
		@layer palette {
			html {
				/* ---------------------------------------------------------
					Color Palette — Primary
				--------------------------------------------------------- */
				/**
				 * Off White
				 * Fallback: n/a
				 * Approximate named color: white
				 */

				--rq1-color-offWhite: #EcEcEc;
				/**
				 * Off Black
				 * sRGB fallback: n/a
				 * Approximate named color: black
				 */
				--rq1-color-offBlack: #1c1c1c;
				/**
				 * Warm Grey
				 * sRGB fallback: n/a
				 * Approximate named color: dimgrey
				 */
				--rq1-color-warmGrey: #726658;
				/**
				 * Dijon Yellow
				 * sRGB fallback: n/a
				 * Approximate named color: darkkhaki
				 */
				--rq1-color-dijonYellow: #BBAA6F;
				/**
				 * Rhubarb Red
				 * sRGB fallback: #c40026
				 * Approximate named color: crimson
				 */
				--rq1-color-rhubarbRed: oklch(51.78% 0.2356 23.39);
				/**
				 * Ladybug Red
				 * sRGB fallback: #ff1317
				 * Approximate named color: red
				 */
				--rq1-color-ladybugRed: oklch(63.24% 0.2911 28.41);
				/**
				 * Fire Orange
				 * sRGB fallback: #fb4d00
				 * Approximate named color: orangered
				 */
				--rq1-color-fireOrange: oklch(66.09% 0.247 37.35);
				/**
				 * Orbital Blue
				 * sRGB fallback: #280083
				 * Approximate named color: midnightblue
				 */
				--rq1-color-orbitalBlue: oklch(29.93% 0.1806 280.29);
				/**
				 * Medium Blue
				 * sRGB fallback: #2701c7
				 * Approximate named color: mediumblue
				 */
				--rq1-color-mediumBlue: oklch(38.89% 0.2519 271.12);
				/**
				 * Skylla Blue
				 * sRGB fallback: #0075c3
				 * Approximate named color: royalblue
				 */
				--rq1-color-skyllaBlue: oklch(54.87% 0.192 248.31);

				/* ---------------------------------------------------------
					Gradient Palette —
				--------------------------------------------------------- */

				--rq1-gradient-offBlack: linear-gradient(
					to top,
					var(--rq1-color-offBlack, black),
					color-mix(
						in srgb,
						var(--rq1-color-offBlack, black),
						white 20%
					)
				);
				--rq1-gradient-black: linear-gradient(
					to top,
					black,
					color-mix(
						in srgb,
						black,
						white 20%
					)
				);
				--rq1-gradient-red: linear-gradient(
					to top,
					var(--rq1-color-rhubarbRed, crimson),
					var(--rq1-color-fireOrange, orangered)
				);
				--rq1-gradient-blue: linear-gradient(
					to top,
					var(--rq1-color-orbitalBlue, midnightblue),
					var(--rq1-color-skyllaBlue, darkcyan)
				);
			}
		}/* END layer color.palette */
		@layer usage {

			/** --------------------------------------------------------
			 * Color Usage
			 * - Use camelCase
			 * - Use CSS System Colors as fallback where appropriate
			 * {@link https://www.w3.org/TR/css-color-4/#css-system-colors}
			--------------------------------------------------------- */
			html{
				--rq1-color-canvas: var(--rq1-color-offWhite, Canvas);
				--rq1-color-canvasText: var(--rq1-color-offBlack, CanvasText);
				/* Color Usage — Headings */
				--rq1-color-headingDisplay: var(--rq1-color-warmGrey, CanvasText);
				--rq1-color-headingSub: var(--rq1-color-, CanvasText);
				/* Color Usage — Links */
				--rq1-color-linkText: var(--rq1-color-mediumBlue, LinkText);
				--rq1-color-hoverText: var(--rq1-color-rhubarbRed, #c40026);
				--rq1-color-activeText: var(--rq1-color-, ActiveText);
				/* Color Usage — Buttons  */
				--rq1-color-buttonFace: var(--rq1-color-linkText, ButtonFace);
				--rq1-color-buttonText: white;
			}
		}/* END layer color.usage */
	} /* END layer color */

	@layer typeface {
		@font-face {
			font-family: 'Questa Grande';
			font-stretch: normal;
			font-style: normal;
			font-weight: normal;
			font-display: swap;
			src: url('/stuff/fonts/questa-grande-regular.woff2') format('woff2');
		}
	}

	@layer font-stack {
		html {
			--rq1-font-heading: 'Questa Grande', Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; /* Type classification: Didione */
			--rq1-font-text: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; /* Type classification: Neo-Grotesque */
		}
	}

	@layer type-scale {
		/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

		html {
			--step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
			--step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
			--step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
			--step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
			--step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
			--step-3: clamp(1.9438rem, 1.7707rem + 0.8652vw, 2.4413rem);
			--step-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
			--step-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);
		}
	} /* END layer type-scale */

	@layer space-scale {
		/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

		html {
			--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
			--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
			--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
			--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
			--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
			--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
			--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
			--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
			--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

			/* One-up pairs */
			--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
			--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
			--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
			--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
			--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
			--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
			--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
			--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
		}
	} /* END layer space-scale */
} /* END layer settings */

@layer elements {

	body {
		/* Layout */
		/* Text */
		font-family: var(--rq1-font-text, sans-serif);
		/* Appearance */
		background-color: var(--rq1-color-canvas);
		color: var(--rq1-color-canvasText);
	}

	/* Phrasing Elements */
	a {
		/* Layout */
		/* Text */
		/* Appearance */
		color: var(--rq1-color-linkText, LinkText);

		&:hover {
			color: var(--rq1-color-hoverText, #c40026);
		}
		&:focus-visible {
			color: var(--rq1-color-hoverText, #c40026);
		}
		&:active {
			color: var(--rq1-color-activeText, ActiveText);
		}

		& span::before,
		& span::after {
			display: inline;
		}
		& span::before {
			padding-inline-end: 1ch;
		}
		& span::after {
			padding-inline-start: 1ch;
		}
	}

	/* Button & Link-Button */
	button,
	a.button {
		/* Layout */
		display: flex;
		align-items: center;
		padding-block: var(--space-2xs);
		padding-inline: var(--space-m);
		width: fit-content;
		/* Text */
		font-family: inherit;
		font-size: var(--step-0);
		font-weight: 900;
		letter-spacing: 0.0625ch;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		/* Appearance */
		background-color: var(--rq1-color-buttonFace);
		background-image: var(--rq1-gradient-offBlack);
		border-radius: calc(infinity * 1px);
		color: var(--rq1-color-buttonText);
		/* Behavior */
		touch-action: manipulation;
		user-select: none;

		&:hover {
			background-image: var(--rq1-gradient-black);
			--rq1-color-buttonText: white;
		}
		&:focus-visible {
			outline: 0.125em solid currentColor;
			outline-offset: -0.375em;
		}
		&:active {
			background-image: none;
			--rq1-color-buttonFace: var(--rq1-color-offBlack);
			--rq1-color-buttonText: var(--rq1-color-offWhite);
		}
	}/* END button */

	small {
		font-size: var(--step--2);
		line-height: 0.9;
	}

	/* Flow Elements */
	p, li {
		font-size: var(--step-0);
		line-height: 1.5;
		text-wrap: pretty;
	}

	/* Headings */
	h1,
	.mimic-h1 {
		/* Layout */
		/* Text */
		font-family: var(--rq1-font-heading, serif);
		font-size: var(--step-5);
		line-height: 1.1;
		/* Appearance */
		color: var(--rq1-color-headingDisplay);
	}
	h2,
	.mimic-h2 {
		/* Layout */
		/* Text */
		font-family: var(--rq1-font-heading, serif);
		font-size: var(--step-3);
		line-height: 1.1;
		/* Appearance */
		color: var(--rq1-color-headingSub);
	}
	h3,
	.mimic-h3 {
		/* Layout */
		/* Text */
		font-family: var(--rq1-font-heading, sans-serif);
		font-size: var(--step-2);
		line-height: 1.1;
		/* Appearance */
		color: var(--rq1-color-headingSub);
	}
	h4,
	.mimic-h4 {
		/* Layout */
		/* Text */
		font-family: var(--rq1-font-text, sans-serif);
		font-size: var(--step-1);
		line-height: 1.1;
		/* Appearance */
		color: var(--rq1-color-headingSub);
	}
	/* NOTE: temporary `margin-trim` solution until interoperable across browsers. */
	:where(h1, .mimic-h1, h2, .mimic-h2, h3, .mimic-h3, h4, .mimic-h4, p, li, ul, ol, dl, dt, dd, blockquote) {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}

	/* Grouping Elements */
	section {
		background-color: var(--rq1-color-canvas);
		color: var(--rq1-color-canvasText);
	}
} /* END layer elements */

@layer layout {
	:root {
		/* Custom Propertiers used by various layouts */
		--wrapper-max-width: 90rem;
		--gutter: var(--space-s-m, 1rem);
	}

	/**
	 * Layout: Page Wrapper
	 * A global page wrapper, one per page.
	 */
	.page-wrapper {
		min-height: 100vh;
		min-height: 100dvh;
		display: grid;
		grid-template:
			auto
			1fr
			auto;
	}

	/**
	 * Layout: Wrapper
	 * For wrappers/containers that constrains horiozntal layout.
	 *
	 * --wrapper-max-inline-size
	 * Defines maximum width (horizontal-tb langauges)
	 *
	 * --wrapper-padding-inline
	 * Defines padding at edges of container
	*/
	.l-wrapper {
		margin-inline: auto;
		max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
		padding-inline: var(--gutter, 1rem);
		position: relative;
	}

	/** Layout: Inline Bleed
	 * A inline-bleed layout.
	 * Requires: global variables
	*/
	.l-bleed {
		--wrapper-padding-block: var(--space-3xl);

		--section-padding-block: var(--wrapper-padding-block);
		--section-padding-inline-outer: 0;
		--section-padding-inline-inner: 3rem;

		/* Only 1 Child */
		/* Only child is _not_ an image */
		& > :not(img):only-child {
			max-inline-size: var(--wrapper-max-width, 90rem);
			/* Layout */
			align-items: center;
			margin-inline: auto;
			padding-inline: var(--gutter, var(--space-s-m, 1rem));
			padding-block: var(--wrapper-padding-block);
			/* Text */
			text-align: center;
		}
		/* Only is an image */
		/* & > img:only-child {} */

		/* Multiple Children */
		/* Any children that are _not_ an image */
		& > :not(img):not(:only-child) {
			padding-inline: var(--gutter, var(--space-s-m, 1rem));
			padding-block: var(--wrapper-padding-block);
		}
		/* Any children that are an image */
		/* & > img:not(:only-child) {} */

		@media only screen and (min-width: 600px) {
			display: grid;
			grid-template-columns:
				minmax(var(--gutter, var(--space-s-m, 1rem)), 1fr)
				repeat(2, minmax(0, calc(var(--wrapper-max-width, 90rem) / 2)))
				minmax(var(--gutter, var(--space-s-m, 1rem)), 1fr)
			;
			/* for positioning the pseudo-elements
					to fill in the rest of the background*/
			position: relative;

			/* Only 1 Child */
			/* Only child is _not_ an image */
			& > :not(img):only-child {
				/* Layout Self */
				grid-column: 2 / -2;
				padding-block: var(--space-3xl);
			}
			/* Only is an image */
			/* & > img:only-child {} */

			/* Multiple Children */
			/* Any children that are _not_ an image */
			/* & > :not(img):not(:only-child) {} */
			/* Any children that are an image */
			/* & > img:not(:only-child) {} */

			& > img:not(:only-child) {
				block-size: 100%;
				inline-size: 100%;
				object-fit: cover;

				&:first-child {
					grid-column: 1 / 3;
				}
				&:last-child {
					grid-column: 3 / -1;
				}
			}

			& > :not(img):not(:only-child) {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-block: var(--section-padding-block);

				&::after {
					content: '';
					position: absolute;
					inset: 0;
					background: inherit;
				}

				&:first-child {
					padding-left: var(--section-padding-inline-outer);
					padding-right: var(--section-padding-inline-inner);
					grid-column: 2 / 3;
					&::after {
						grid-column: 1 / 2;
					}
				}
				&:last-child {
					padding-left: var(--section-padding-inline-inner);
					padding-right: var(--section-padding-inline-outer);
					grid-column: 3 / -2;
					&::after {
						grid-column: -2 / -1;
					}
				}
			}
		}/* END 600 */
	}/* END l-bleed */

	/**
	 * Layout: Repel
	 * A layout that pushes items away from each other where
	there is space in the viewport and wraps in small viewports.
	 *
	 * --repel-gutter
	 * Defines the minimum space between items.
	 *
	 * --repel-vertical-alignment
	 * Vertical alignment. Accepts any flexbox alignment value.
	 *
	 * --repel-wrap
	 * Disable wrapping in small viewports with `nowrap`.
	 */
	.l-repel {
		display: flex;
		flex-wrap: var(--repel-wrap, wrap);
		justify-content: space-between;
		align-items: var(--repel-vertical-alignment, center);
		gap: var(--repel-gutter, var(--space-s-m, 1rem));
	}/* END l-repel */

	/**
	 * Layout: Stack
	 * A layout that evenly spaces items in a column.
	 *
	 * --stack-gap
	 * Defines the minimum space between items.
	 */
	.l-stack {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		& > * {
			margin-block: 0;
		}
		& > * + * {
			margin-block-start: var(--stack-gap, var(--space-s, 1.5rem));
		}
	}/* END l-stack */

	/**
	 * Layout: Switcher
	 * A layout that stacks items until a defined threshold, then switches to rows of evenly spaces items of equal size.
	 *
	 * --switcher-threshold
	 * Defines the inline-size threshold of the switch.
	 */
	.l-switcher {
		--switcher-threshold: 30rem;
		/* Layout */
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);
		& > * {
			flex-grow: 1;
			flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
		}
		/* Allow up to 4 items per row */
		& > :nth-last-child(n+ 5),
		& > :nth-last-child(n+ 5) ~ * {
			flex-basis: 100%;
		}
	}/* END l-switcher */
} /* END layer layout */

@layer blocks {
	header[role=banner] {
		/* Layout */
		padding-block: var(--space-s);
		padding-inline: var(--space-m);
		position: sticky;
		top: 0; /* sticky: to top */
		z-index: calc(infinity); /* sticky: top-most layer */
		/* Text */
		/* Appearance */
		background-color: color-mix(in srgb, white 100%, transparent 5%);
		box-shadow: 0 0 8px 2px hsl(0 100% 0% / 0.5);

		& a.button {
			/* Layout */
			padding-inline: var(--space-s);
			padding-block: var(--space-3xs);
			/* Text */
			font-size: var(--step--2);
		}
	}/* END globalHeader */

	footer[role=contentinfo] {
		background-color: var(--rq1-color-canvas);
		color: var(--rq1-color-canvasText);

		& a[href^=mailto] {
			text-decoration: none;
			&:is(:hover, :focus-within) {
				text-decoration: underline;
			}
		}
		@media only screen and (max-width: 599px) {
			& .l-bleed > .l-stack {
				padding-block-end: 0;
			}
			& .l-bleed > .l-stack + div {
				padding-block-start: var(--space-m);
			}
		}
		@media only screen and (min-width: 600px) {
			& .l-bleed {
				align-items: end;
			}
		}

		& > #footerFooter {
			/* Layout */
			padding-inline: var(--space-s);
			padding-block: var(--space-3xs);
			padding-block-end: var(--space-2xs);
			grid-column: 1 / -1;
			/* Text */
			/* Appearance */
			background-color: var(--rq1-color-canvas);
			color: var(--rq1-color-canvasText);
			& a {
				text-decoration: none;
			}
		}
	}/* END globalFooter */

	.site-name {
		/* Layout */
		display: block;
		width: 10rem;
		max-width: 50%;
		/* Text */
		/* Appearance */
		color: currentColor;

		&:hover {
			color: var(--rq1-color-ladybugRed);
		}
		&:focus-visible {
			outline-offset: var(--space-2xs);
		}
		&:active {
			color: var(--rq1-color-ladybugRed);
		}

		& path {
			fill: currentColor;
		}
	}/* END site-name */

	/**
	 * Block: Avatar
	 * Represents a person.
	 * Requirement: image must be square.
	 * Recomend size: 1024 × 1024 px.
	 */
	.avatar {
		/* Layout */
		aspect-ratio: 1 / 1;
		height: auto; /* required by aspect-ratio */
		/* Text */
		/* Appearance */
		clip-path: circle(50%);
	}/* END avatar */

	/**
	 * Block: Person
	 * Represents a person.
	 * Requirement: image must be square.
	 * Recomend size: 1024 × 1024 px.
	 */
	.l-person {

		& .avatar {
			margin-inline: auto;
			max-width: 75%;
		}

		@media only screen and (min-width: 600px){
			/* Layout */
			display: grid;
			grid-template-columns: 1fr 2fr;
			align-items: center;
			column-gap: var(--space-l-xl);
			row-gap: var(--stack-gap);
			/* Text */
			text-align: left;
			/* Appearance */
		}
	}/* END mq */

	/**
	 * Block: Hero Section
	 * Intended for use at start of page.
	 */
	#hero {
		/* Layout */
		/* Text */
		text-shadow: 0 0 2px hsl(0 100% 0% / 0.5); /* Defend against background-image contrast issues */
		/* Appearance */

		background-image: image-set(
			url('/stuff/images/bg-gel-flair-960w.webp') 1x,
			url('/stuff/images/bg-gel-flair-1920w.webp') 2x
		);
		background-size: cover;

		& > div {
			/* Layout */
			grid-column: 2 / 3;
			align-items: start;
			/* Text */
			text-align: start;
		}

		& p {
			font-size: var(--step-1);
		}

		& a.button {
			background-image: var(--rq1-gradient-blue);
			&:hover {
				background-image: var(--rq1-gradient-red);
			}
		}
	}/* END hero block */

	#showcase {
		& ul {
			margin-block-start: var(--space-l-xl);
			align-items: center;
		}
		& li {
			display: flex;
			justify-content: center;
		}
		& li img {
			max-width: 15rem;
		}
	}/* END showcase block */
}/* END layer blocks */

@layer theme {
	/**
	* Theme: DEFAULT INVERTED
	* Scheme: Dark
	* Intesity: Rich
	* Contrast: Moderate
	*/
	.t-invert {
		--rq1-color-canvas: var(--rq1-color-offBlack, black);
		--rq1-color-canvasText: var(--rq1-color-offWhite, white);
		--rq1-color-headingDisplay: var(--rq1-color-offWhite, white);
		--rq1-color-headingSub: var(--rq1-color-offWhite, white);
	}

	/**
	* Theme: Dim
	* Scheme: Light
	* Intesity: Low
	* Contrast: Lower
	*/
	.t-dim {
		--rq1-color-canvas: var(--rq1-color-dijonYellow);
		--rq1-color-canvasText: var(--rq1-color-offBlack);
		/* Color Usage — Headings */
		--rq1-color-headingDisplay: var(--rq1-color-canvasText);
		--rq1-color-headingSub: var(--rq1-color-canvasText);
		/* Color Usage — Links */
		--rq1-color-linkText: currentColor;
		--rq1-color-hoverText: var(--rq1-color-orbitalBlue);
		--rq1-color-activeText: var(--rq1-color-mediumBlue);

		/* Theme: Dim Invert */
		& .t-invert {
			--rq1-color-canvas: var(--rq1-color-offBlack);
			--rq1-color-canvasText: var(--rq1-color-dijonYellow);
			/* Color Usage — Headings */
			--rq1-color-headingDisplay: var(--rq1-color-canvasText);
			--rq1-color-headingSub: var(--rq1-color-canvasText);
			/* Color Usage — Links */
			--rq1-color-linkText: currentColor;
			--rq1-color-hoverText: white;
			--rq1-color-activeText: var(--rq1-color-offwhite);
		}
	}/* END t-dim */

	/**
	* Theme: Stark
	* Scheme: Light
	* Intesity: Low
	* Contrast: High
	*/
	.t-stark {
		--rq1-color-canvas: white;
		--rq1-color-canvasText: black;
		/* Color Usage — Headings */
		--rq1-color-headingDisplay: var(--rq1-color-canvasText);
		--rq1-color-headingSub: var(--rq1-color-canvasText);
		/* Color Usage — Links */
		--rq1-color-linkText: currentColor;
		--rq1-color-hoverText: blue;
		--rq1-color-activeText: currentColor;

		/* Theme: Stark Invert */
		&.t-invert {
			--rq1-color-canvas: black;
			--rq1-color-canvasText: white;
			/* Color Usage — Headings */
			--rq1-color-headingDisplay: var(--rq1-color-canvasText);
			--rq1-color-headingSub: var(--rq1-color-canvasText);
			/* Color Usage — Links */
			--rq1-color-linkText: currentColor;
			--rq1-color-hoverText: cyan;
			--rq1-color-activeText: var(--rq1-color-offwhite);

		}
	}/* END t-stark */

} /* END layer theme */

@layer utilities {
	/* Hide only visually, but have it available for screenreaders. */
	.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard. */
	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
}/* END layer utilities */

@layer reset {
	/* Box sizing rules */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Prevent  size inflation */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/* Remove default margin in favour of better control in authored CSS */
	body, h1, h2, h3, h4, p,
	figure, blockquote, dl, dd {
		margin: 0;
	}

	/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
	ul[role='list'],
	ol[role='list'] {
		list-style: none;
		padding-inline-start: 0;
	}

	/* Set core body defaults */
	body {
		min-height: 100vh;
		line-height: 1.5;
	}

	/* Set shorter line heights on headings and interactive elements */
	h1, h2, h3, h4,
	button, input, label {
		line-height: 1.1;
	}

	/* Balance text wrapping on headings */
	h1, h2, h3, h4 {
		text-wrap: balance;
	}

	/* Anchor elements that don't have a class get default styles */
	a:not([class]) {
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

	/* Make images easier to work with */
	img,
	picture,
	svg {
		height: auto;
		max-width: 100%;
		display: block;
	}

	/* Inherit fonts for inputs and buttons */
	input, button,
	textarea, select {
		font: inherit;
	}

	/* Anything that has been anchored to should have extra scroll margin */
	:target {
		scroll-margin-block: 5ex;
	}
} /* END layer reset */