@layer settings, elements, decorators, components, objects, state, overrides;

/*#region fonts */
@font-face {
	font-family: "Poppins";
	src: local(), url("/styles/fonts/Poppins-Regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: local(), url("/styles/fonts/Poppins-Italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: local(), url("/styles/fonts/Poppins-Bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: local(), url("/styles/fonts/Poppins-BoldItalic.woff2") format("woff2");
	font-style: italic;
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: local(), url("/styles/fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: local(), url("/styles/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}
/*#endregion fonts */

@layer settings {
	:root {
		/*#region typography */
		--ft-f-sans: 'Poppins', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
		--ft-f-serif: 'Playfair Display', Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
		--ft-f-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
		/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
		--ft-sz-sx: clamp(0.6944rem, 0.6856rem + 0.0444cqi, 0.72rem);
		--ft-sz-s: clamp(0.8333rem, 0.8101rem + 0.1159cqi, 0.9rem);
		--ft-sz-r: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem);
		--ft-sz-m: clamp(1.2rem, 1.1283rem + 0.3587cqi, 1.4063rem);
		--ft-sz-l: clamp(1.44rem, 1.3295rem + 0.5527cqi, 1.7578rem);
		--ft-sz-lx: clamp(1.728rem, 1.5648rem + 0.8161cqi, 2.1973rem);
		--ft-sz-lxx: clamp(2.0736rem, 1.8395rem + 1.1704cqi, 2.7466rem);
		--ft-sz-lxxx: clamp(2.4883rem, 2.1597rem + 1.6433cqi, 3.4332rem);
		--ft-sz-hero: clamp(3.1rem, 4vi, 90px);
		/*#endregion typography */
		/*#region colors */
		--clr-black: hsl(0 100% 0%);
		--clr-blue: hsl(220 58% 32%);
		--clr-gray: hsl(0 0% 93%);
		--clr-red: hsl(356 69% 55%);
		--clr-white: hsl(0 100% 100%);
		--clr-yellow: hsl(33 86% 61%);
		--clr-warning: var(--clr-red);
		--clr-success: forestgreen;
		--clr-edit-content: lime;
		--clr-edit-wrapper: steelblue;
		--clr-edit-section: blueviolet;
		/*#endregion colors */
		/*#region z-index */
		--z-flat: 0;
		--z-behind: -1;
		--z-back: -10;
		--z-front: 1;
		--z-top: 10;
		--z-float: 1000;
		/*#endregion z-index */
		/*#region inline sizing */
		--in-sz-min-content: 320px;
		--in-sz-min-column: calc(0.90 * var(--in-sz-min-content));
		--in-sz-max-text: 70ch;
		/*#endregion inline sizing */
		/*#region padding and spacing */
		--space-bl: 1rem; /* block padding is hard set at 1rem */
		--space-bl-013: calc(0.125 * var(--space-bl));
		--space-bl-025: calc(0.25 * var(--space-bl));
		--space-bl-050: calc(0.50 * var(--space-bl));
		--space-bl-075: calc(0.75 * var(--space-bl));
		--space-bl-150: calc(1.50 * var(--space-bl));
		--space-bl-200: calc(2.00 * var(--space-bl));
		--space-bl-250: calc(2.50 * var(--space-bl));
		--space-bl-300: calc(3.00 * var(--space-bl));
		--space-bl-350: calc(3.50 * var(--space-bl));
		--space-bl-400: calc(4.00 * var(--space-bl));
		--space-in: min(1em, 5cqi);
		--space-in-025: calc(0.25 * var(--space-in));
		--space-in-050: calc(0.50 * var(--space-in));
		--space-in-075: calc(0.75 * var(--space-in));
		--space-in-150: calc(1.50 * var(--space-in));
		--space-in-200: calc(2.00 * var(--space-in));
		--space-in-250: calc(2.50 * var(--space-in));
		--space-in-300: calc(3.00 * var(--space-in));
		--space-in-350: calc(3.50 * var(--space-in));
		--space-in-400: calc(4.00 * var(--space-in));
		/*#endregion padding and spacing */
		/*#region other*/
		--animation-duration: 0.15s;
		--brad: 0.25em; /* border radius */
		--shadow: 0 var(--space-bl-013) 16px rgb(0 0 0 / 0.2);
		/*#endregion other*/
	}
}

@layer elements {
	html {
		box-sizing: border-box;
		line-height: 1.6;
		interpolate-size: allow-keywords;
	}

		html:not([data-mode="edit"]) {
			scroll-behavior: smooth;
		}

	*, *::before, *::after {
		box-sizing: inherit;
		margin: 0;
		padding: 0;
		font: inherit;
	}

	/*#region body */
	body {
		display: flex;
		flex-direction: column;
		min-block-size: 100vb;
		min-inline-size: var(--in-sz-min-content);
	}

		body > :is(header, footer) {
			flex-grow: 0;
			flex-shrink: 1;
		}

		body > main {
			flex-grow: 1;
		}
	/*#endregion body */

	a:not([class]) {
		color: var(--clr-red);
		text-underline-offset: 0.33em;
	}

	b, strong {
		font-weight: 700;
	}

	em, i {
		font-style: italic;
	}

	hr {
		margin-block: var(--space-bl-050);
	}

	/*#region figure, iframe, img, svg, video */
	figure {
		max-inline-size: fit-content;
	}

		figure > img {
			object-position: top center;
			border-radius: calc(4 * var(--brad));
		}

	figcaption {
		contain: inline-size;
	}

	iframe, img, picture, svg, video {
		block-size: auto;
		vertical-align: middle;
		object-fit: cover;
		font-style: italic;
	}

	img, picture, video {
		max-inline-size: 100%;
	}

	iframe, svg {
		inline-size: 100%;
	}
	/*#endregion figure, img, svg, video */

	/*#region form elements (fieldset, inputs, select, textarea) */
	fieldset {
		padding-block: var(--space-bl);
		padding-inline: var(--space-in);
		border-radius: var(--brad);
	}

	input, select, textarea {
		padding-block: calc(0.25 * var(--space-bl));
		padding-inline: var(--space-bl);
		background-color: var(--clr-white);
		color: var(--clr-blue);
		accent-color: currentColor;
		border: 1px solid var(--clr-gray);
		border-radius: var(--brad);
	}

		input:where([type="text"],[type="email"]), textarea {
			inline-size: 100%;
		}

		input:where([type="number"], [type="tel"]) {
			max-inline-size: 10em;
		}

		input[type="checkbox"], input[type="radio"] {
			inline-size: 1em;
			aspect-ratio: 1;
		}

	select {
		inline-size: fit-content;
	}

		select[multiple] {
			block-size: 100%;
			overflow-y: auto;
		}

	textarea {
		min-block-size: 5lh;
		resize: block;
	}
	/*#endregion form elements (fieldset, inputs, select, textarea) */

	/*#region label, p, li and other text elements */
	kbd {
		font-family: var(--ft-f-mono);
	}

	label, li, p {
		text-wrap: pretty;
	}

	label, p {
		max-inline-size: var(--in-sz-max-text);
	}

	label {
		display: block;
		font-size: var(--ft-sz-s);
		line-height: 1.1;
	}
	/*#endregion label and other text elements */

	/*#region required fields */
	/* when a fieldset has required fields or a label is follwed by a required field, show the (required)  */
	:where(fieldset:has(:is(input, select, textarea)[required]) legend, label:has(+ :is(input, select, textarea)[required]))::after {
		content: '(required)';
		padding-inline-start: var(--space-in-025);
		font-size: 0.75em;
		filter: brightness(0.85);
	}

	/* Don't show (required) on a label if it is in a fieldset */
	fieldset:has(:is(input, select, textarea)[required]) label::after {
		content: '';
	}

	:where(fieldset:has(:is(input, select, textarea)[required]:user-invalid) legend, label:has(+ :is(input, select, textarea)[required]:user-invalid)) {
		color: var(--clr-white);
		background-color: var(--clr-warning);
	}
	/*#endregion required fields */

	nav {
		display: flex;
		flex-flow: row wrap;
		flex-grow: 1;
	}

	/*#region table */
	table {
		inline-size: 100%;
		border: none;
		border-collapse: collapse;
	}

	td, th {
		padding-inline: var(--space-in-025);
		padding-block: var(--space-bl-013) var(--space-bl-200);
		text-align: left;
	}

	td {
		text-align: left;
		vertical-align: top;
	}

	th {
		font-weight: bold;
		vertical-align: bottom;
		background-color: inherit;
		color: inherit;
	}
	/*#endregion table */

	/*#region ul, ol */
	:where(ol, ul)[role="list"] {
		list-style: none;
	}

	:where(ol, ul):not([role="list"]) {
		margin-block-start: var(--space-bl);
		margin-inline-start: var(--space-bl);
	}

		:where(ol, ul):not([role="list"]) > li {
			padding-inline-start: var(--space-in);
			margin-block-end: var(--space-bl-050);
		}
	/*#endregion ul, ol */

	/*#region u */
	u {
		position: relative;
		display: inline-block;
		background-color: inherit;
		color: inherit;
		text-decoration: none;
		z-index: var(--z-front);
	}

		u::after {
			content: '';
			position: absolute;
			inset: auto 0 0 0;
			scale: 0 1;
			block-size: 0.2em;
			background-color: var(--clr-yellow);
			translate: 0 -2px;
			/*			rotate: -1.5deg;*/
			animation: underline-it linear forwards 1s;
			z-index: var(--z-behind);
			transform-origin: left;
		}
	/*#endregion u */

	::backdrop {
		background-color: var(--clr-blue);
		opacity: 0.75;
	}

	:focus-visible {
		outline-color: currentColor;
	}

	:target {
		scroll-margin-block-start: 10rem;
	}
}

@layer decorators {
	/*#region padding block */
	[data-pad-bl] {
		--pad-bl-size: 1;
		--pad-bl: calc(var(--space-bl) * var(--pad-bl-size));
		padding-block: var(--pad-bl);
	}

	[data-pad-bl="1"] {
		--pad-bl-size: 1;
	}

	[data-pad-bl="2"] {
		--pad-bl-size: 2;
	}

	[data-pad-bl="3"] {
		--pad-bl-size: 3;
	}

	[data-pad-bl="4"] {
		--pad-bl-size: 4;
	}

	[data-pad-bl="5"] {
		--pad-bl-size: 5;
		min-block-size: 50vb;
	}

	[data-pad-bl="hero"] {
		--pad-bl-size: 5;
		min-block-size: 75vb;
	}
	/*#endregion padding block */

	/*#region padding inline */
	[data-pad-in] {
		--pad-in-size: 1;
		--pad-in: calc(var(--space-in) * var(--pad-in-size));
		padding-inline: clamp(1rem, var(--pad-in), 10%);
	}

	[data-pad-in="1"] {
		--pad-in-size: 1;
	}

	[data-pad-in="2"] {
		--pad-in-size: 2;
	}

	[data-pad-in="3"] {
		--pad-in-size: 3;
	}

	[data-pad-in="4"] {
		--pad-in-size: 4;
	}

	[data-pad-in="5"] {
		--pad-in-size: 5;
	}
	/*#endregion padding inline */

	/*#region  layouts */
	[data-lt="flex"], [data-lt="inline"] {
		--column-gap: var(--space-in);
		--row-gap: var(--space-bl);
		display: flex;
		flex-flow: row wrap;
		column-gap: var(--column-gap);
		row-gap: var(--row-gap);
	}

	[data-lt="flex"] {
		justify-content: space-evenly;
	}

		[data-lt="flex"] > * {
			inline-size: clamp(var(--in-sz-min-column), calc(23% - var(--column-gap)), 640px);
		}

	[data-lt="inline"] > * {
		flex: 1 0;
	}

	[data-lt^="grid"] {
		--desired-column-size: min(var(--in-sz-min-column), 100%);
		--column-gap: var(--space-in);
		display: grid;
		column-gap: var(--column-gap);
		row-gap: var(--space-bl);
		grid-template-columns: repeat(auto-fit, minmax(var(--desired-column-size), 1fr));
	}

	[data-lt^="grid-"] {
		--column-gap: 5%;
		--max-column-count: 10;
		--desired-column-size: max(var(--in-sz-min-column), calc((100% / var(--max-column-count)) - var(--column-gap)));
	}

	[data-lt="grid-2"] {
		--max-column-count: 2;
	}

	[data-lt="grid-3"] {
		--max-column-count: 3;
	}

	[data-lt="grid-4"] {
		--max-column-count: 4;
	}

	[data-lt="flow"] > * + * {
		margin-block-start: 1lh;
	}
	/*#endregion  layouts */

	/*#region gap */
	[data-gap] {
		column-gap: var(--cgap, var(--column-gap, inherit));
		row-gap: var(--rgap, var(--row-gap, inherit));
	}

	[data-gap="none"] {
		--cgap: 0;
		--rgap: 0;
	}

	[data-gap="l"] {
		--cgap: 5vi;
		--rgap: 10vb;
	}
	/*#endregion column gap */

	/*#region horizontal alignment */
	[data-hz-a] * {
		margin-inline: inherit;
	}

	[data-hz-a="l"] {
		margin-inline: 0 auto;
	}

	[data-hz-a="c"] {
		margin-inline: auto;
	}

	[data-hz-a="r"] {
		margin-inline: auto 0;
	}

	@media (width < 640px) {
		[data-hz-a="l-m"] {
			margin-inline: 0 auto;
		}

		[data-hz-a="c-m"] {
			margin-inline: auto;
		}

		[data-hz-a="r-m"] {
			margin-inline: auto 0;
		}
	}

	@media (width >= 640px) {
		[data-hz-a="l-d"] {
			margin-inline: 0 auto;
		}

		[data-hz-a="c-d"] {
			margin-inline: auto;
		}

		[data-hz-a="r-d"] {
			margin-inline: auto 0;
		}
	}

	/*#endregion horizontal alignment */

	/*#region vertical alignment */
	[data-vt-a="c"] {
		align-content: center;
	}

	[data-vt-a="b"] {
		align-content: end;
	}

	[data-vt-a] * {
		align-content: inherit;
	}
	/*#endregion vertical alignment */

	/*#region shape */
	[data-shape] {
		--aspect-ratio: var(--ar, auto);
	}

		[data-shape] > :is(img, embed, iframe, video) {
			aspect-ratio: var(--aspect-ratio);
		}

	[data-shape="square"] {
		--ar: 1;
	}

	[data-shape="rect"] {
		--ar: 16 / 9;
	}

	[data-shape="portrait"] {
		--ar: 3 / 4;
	}

	[data-shape="circle"] {
		--ar: 1;
	}

		[data-shape="circle"] > :is(img, embed, iframe, video) {
			border-radius: 50%;
		}

	/*#endregion shape */

	/*#region background colors */
	[data-bg-c] {
		background-color: var(--bg-c, inherit);
	}

	[data-bg-c="black"] {
		--bg-c: var(--clr-black);
	}

	[data-bg-c="blue"] {
		--bg-c: var(--clr-blue);
	}

	[data-bg-c="gray"] {
		--bg-c: var(--clr-gray);
	}

	[data-bg-c="red"] {
		--bg-c: var(--clr-red);
	}

	[data-bg-c="white"] {
		--bg-c: var(--clr-white);
	}

	[data-bg-c="yellow"] {
		--bg-c: var(--clr-yellow);
	}

	[data-bg-c="warning"] {
		--bg-c: var(--clr-warning);
	}

	[data-bg-c="success"] {
		--bg-c: var(--clr-success);
	}
	/*#endregion background colors */

	/*#region background blur */
	[data-bg-blur] {
		position: relative;
		z-index: var(--z-flat);
	}

		[data-bg-blur]::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: var(--z-behind);
			pointer-events: none;
			backdrop-filter: blur(1rem);
			-webkit-backdrop-filter: blur(1rem);
		}

	[data-bg-blur="overlay-75"]::before {
		height: 75%;
		bottom: auto;
	}

	[data-bg-blur="border"] {
		--blur-border-width: 2rem; /* default */
	}

		[data-bg-blur="border"]::before {
			inset: calc(var(--blur-border-width) * -1);
			clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% calc(var(--blur-border-width)), calc(var(--blur-border-width)) calc(var(--blur-border-width)), calc(var(--blur-border-width)) calc(100% - var(--blur-border-width)), calc(100% - var(--blur-border-width)) calc(100% - var(--blur-border-width)), calc(100% - var(--blur-border-width)) calc(var(--blur-border-width)), calc(var(--blur-border-width)) calc(var(--blur-border-width)), 0% calc(var(--blur-border-width)) );
		}

	/*#endregion background blur */

	/*#region background blendmode*/
	[data-bg-blend] {
		--blend: normal;
		background-blend-mode: var(--blend);
	}

	[data-bg-blend="soft"] {
		--blend: soft-light;
	}
	/*#endregion background blendmode*/

	/*#region background image */
	[data-bg-img] {
		--bg-img: none;
		background-image: var(--bg-img);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	/*#endregion background image */

	/*#region text colors */
	[data-ft-c] {
		color: var(--ft-c, inherit);
	}

	[data-ft-c="black"] {
		--ft-c: var(--clr-black);
	}

	[data-ft-c="blue"] {
		--ft-c: var(--clr-blue);
	}

	[data-ft-c="gray"] {
		--ft-c: var(--clr-gray);
	}

	[data-ft-c="red"] {
		--ft-c: var(--clr-red);
	}

	[data-ft-c="white"] {
		--ft-c: var(--clr-white);
	}

	[data-ft-c="yellow"] {
		--ft-c: var(--clr-yellow);
	}

	[data-ft-c="warning"] {
		--ft-c: var(--clr-warning);
	}

	[data-ft-c="success"] {
		--ft-c: var(--clr-success);
	}
	/*#endregion text colors */

	/*#region text alignment */
	[data-tx-a] {
		text-align: var(--tx-a, inherit);
	}

	[data-tx-a="l"] {
		--tx-a: left;
	}

	[data-tx-a="c"] {
		--tx-a: center;
	}

	[data-tx-a="r"] {
		--tx-a: right;
	}

	/* container query for desktop-only versions */
	@container (width >= 640px) {
		[data-tx-a="c-d"] {
			--tx-a: center;
		}

		[data-tx-a="l-d"] {
			--tx-a: left;
		}

		[data-tx-a="r-d"] {
			--tx-a: right;
		}
	}

	/* container query for mobile-only versions */
	@container (width < 640px) {
		[data-tx-a="c-m"] {
			--tx-a: center;
		}

		[data-tx-a="l-m"] {
			--tx-a: left;
		}

		[data-tx-a="r-m"] {
			--tx-a: right;
		}
	}
	/*#endregion text alignment */

	/*#region font sizes */
	[data-ft-sz] {
		font-size: var(--ft-sz, inherit);
		line-height: var(--ft-lh, inherit);
	}

	[data-ft-sz="sx"] {
		--ft-sz: var(--ft-sz-sx);
	}

	[data-ft-sz="s"] {
		--ft-sz: var(--ft-sz-s);
	}

	[data-ft-sz="r"] {
		--ft-sz: var(--ft-sz-r);
	}

	[data-ft-sz="m"] {
		--ft-sz: var(--ft-sz-m);
		--ft-lh: 1.5;
	}

	[data-ft-sz="l"] {
		--ft-sz: var(--ft-sz-l);
		--ft-lh: 1.4;
	}

	[data-ft-sz="lx"] {
		--ft-sz: var(--ft-sz-lx);
		--ft-lh: 1.3;
	}

	[data-ft-sz="lxx"] {
		--ft-sz: var(--ft-sz-lxx);
		--ft-lh: 1.2;
	}

	[data-ft-sz="lxxx"] {
		--ft-sz: var(--ft-sz-lxxx);
		--ft-lh: 1.1;
	}

	[data-ft-sz="hero"] {
		--ft-sz: var(--ft-sz-hero);
		--ft-lh: 1;
	}
	/*#endregion font sizes */

	/*#region font family */
	[data-ft-f] {
		font-family: var(--ft-f, inherit);
	}

	[data-ft-f="mono"] {
		--ft-f: var(--ft-f-mono);
	}

	[data-ft-f="sans"] {
		--ft-f: var(--ft-f-sans);
	}

	[data-ft-f="serif"] {
		--ft-f: var(--ft-f-serif);
	}
	/*#endregion font family */

	/*#region font weight */
	[data-ft-w] {
		font-weight: var(--ft-w, inherit);
	}

	[data-ft-w="thin"] {
		--ft-w: 200;
	}

	[data-ft-w="normal"] {
		--ft-w: 400;
	}

	[data-ft-w="bold"] {
		--ft-w: 700;
	}
	/*#endregion font weight */

	/*#region text transform */
	[data-tx-tr] {
		text-transform: var(--tx-tr, inherit);
	}

	[data-tx-tr="uc"] {
		--tx-tr: uppercase;
	}

	[data-tx-tr="lc"] {
		--tx-tr: lowercase;
	}
	/*#endregion text transform */
}

@layer components {
	/*#region accordion */
	.accordion {
		margin-block: var(--space-bl-400);
	}

		.accordion[data-has-entries] .accordion-placeholder {
			display: none;
		}

	.accordion-entries > * {
		border-block-start: 1px solid;
	}

		.accordion-entries > *:last-child {
			border-block-end: 1px solid;
		}

	.accordion-entry {
		padding-block: var(--space-bl);
	}

		.accordion-entry > .body-copy {
			padding-inline: 1.5rem;
			padding-block: var(--space-bl);
			inline-size: fit-content;
		}

		.accordion-entry > .button {
			inline-size: 100%;
			justify-content: space-between;
		}
	/*#endregion accordion */

	/*#region borders */
	.border {
		border: 1px solid;
	}

	.border-block {
		border-block: 1px solid;
	}
	/*#endregion borders */

	/*#region button */
	.button {
		--btn-bg: var(--bg-c, --clr-yellow);
		--btn-text: var(--ft-c, --clr-blue);
		--btn-pd-b: var(--space-bl-050);
		--btn-pd-i: 1em;
		appearance: none;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		column-gap: 1em;
		padding-block: var(--btn-pd-b);
		padding-inline: var(--btn-pd-i);
		inline-size: fit-content;
		line-height: 1;
		cursor: pointer;
		color: var(--btn-text);
		background-color: var(--btn-bg);
		border: 1px solid currentColor;
		border-radius: var(--brad, 0);
		text-align: center;
		text-decoration: none;
		transition: background-color ease-in-out var(--animation-duration);
	}

		.button[data-pad-bl] {
			padding-block: var(--pad-bl);
		}

		.button[data-pad-in] {
			padding-inline: var(--pad-in);
		}

		.button:where(:hover, :focus-visible) {
			background-color: var(--btn-text);
			color: var(--btn-bg);
		}

		.button[data-style="warning"] {
			--btn-bg: var(--clr-warning);
			--btn-bg-mix: var(--clr-black);
			--btn-text: var(--clr-white);
		}

		.button[data-variant="icon"] {
			flex-grow: 0;
			font-size: 1.33em;
		}

		.button.slim {
			--btn-pd-b: 2px;
			--btn-pd-i: 2px;
		}

		.button[disabled] {
			cursor: not-allowed;
			pointer-events: none;
			filter: brightness(0.5);
		}
	/*#endregion button */

	/*#region carousel */
	.carousel {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-around;
		column-gap: var(--space-in);
		row-gap: var(--space-bl-200);
		padding-block: var(--space-bl);
	}

	.carousel-item {
		flex-shrink: 0;
		inline-size: clamp(var(--in-sz-min-column), 20%, 50px);
	}
	/*#endregion carousel */

	.checkbox-wrapper {
		display: flex;
		align-items: start;
		gap: var(--space-in-050);
	}

	.column {
		display: flex;
		flex-flow: column nowrap;
		row-gap: var(--space-bl);
	}

	.container {
		container-type: inline-size;
		display: block;
	}

	.description {
		font-size: var(--ft-sz-sx);
		font-weight: 200;
		line-height: 1.1;
	}

	/*#region feedback*/
	.feedback-list {
		position: fixed;
		inset: auto var(--space-in) var(--space-bl) auto;
		list-style: none;
		z-index: var(--z-top);
	}

		.feedback-list:not(:has(.feedback-item)) {
			display: none;
		}

	.feedback-item {
		padding-block: var(--space-bl-050);
		padding-inline: var(--space-in-050);
		animation-delay: 10s;
	}
	/*#endregion feedback*/

	.financials {
		inline-size: clamp(15ch, 100%, 1200px);
	}

	.form-donate, .form-contact {
		inline-size: clamp(var(--in-sz-min-column), 100%, 700px);
		margin-inline: auto;
	}

	.heading {
		text-wrap: balance;
	}

	/*#region icon */
	.icon {
		inline-size: 1em;
		flex: 0 1 auto;
	}

		.icon.content {
			inline-size: min(50%, 160px);
			aspect-ratio: 1;
		}
	/*#endregion icon*/

	.input-wrapper {
		display: flex;
		flex-flow: column nowrap;
		row-gap: var(--space-bl-050);
		inline-size: 100%;
	}

	/*#region link */
	.link {
		background-color: inherit;
		color: inherit;
		text-decoration: none;
	}

		.link:visited {
			color: inherit;
		}
	/*#endregion link */

	.logo {
		display: block;
		inline-size: clamp(var(--in-sz-min-column), 25vi, 400px);
		flex-grow: 0;
	}

	/*#region main-menu */
	.main-menu {
		inline-size: max(var(--in-sz-min-column), 100%);
	}

	@media (width < 790px) {
		.main-menu {
			position: absolute;
			top: calc(8px + var(--space-bl-400));
			right: 0;
			padding-block: var(--space-bl);
			padding-inline: var(--space-in);
			background-color: var(--clr-white);
			z-index: var(--z-top);
			box-shadow: var(--shadow);
		}

			.main-menu li {
				text-align: end;
			}

				.main-menu li:not(:last-child) {
					border-block-end: 1px solid currentColor;
				}

			.main-menu > li:last-child > * {
				margin-block-start: var(--space-bl-150);
				margin-inline-start: auto;
			}

			.main-menu .button {
				--btn-pd-i: 0;
			}
	}

	@media (width >= 790px) {
		.main-menu {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			column-gap: var(--space-in);
			row-gap: var(--space-bl-025);
			align-items: center;
			justify-content: end;
		}
	}

	.main-menu .link {
		position: relative;
		display: block;
		padding-block: 0.25em;
	}

		.main-menu .link::after {
			content: "";
			position: absolute;
			inset: auto 0 0 0;
			border-bottom: 5px solid var(--clr-yellow);
			opacity: 0;
			scale: 0.75 0;
			translate: 0 0;
			transition: opacity ease-in-out var(--animation-duration), scale ease-in-out var(--animation-duration), translate ease-in-out var(--animation-duration);
			transform-origin: center;
		}

		.main-menu .link:where(:hover, :focus-visible)::after {
			opacity: 1;
			translate: 0 0.125em;
			scale: 1 1.05;
		}
	/*#endregion main-menu */

	/*#region menu-item */
	.menu-item :where(.button, .link) {
		padding-inline: 5px;
	}

	@media (width < 790px) {
		.menu-item {
			font-size: 1.33em;
		}
	}
	/*#endregion menu-item */

	.map-member {
		inline-size: clamp(var(--in-sz-min-column), 90%, 1280px);
		margin-inline: auto;
		aspect-ratio: 16 / 9;
	}

	/*#region menu-item.socials */
	.menu-item.socials {
		flex-wrap: nowrap;
		column-gap: clamp(1px, 1vi, 2rem);
	}

		.menu-item.socials > * {
			flex-grow: 0;
			margin-inline: auto;
		}
	/*#endregion menu-item.socials */

	.no-border {
		border-width: 0;
	}

	fieldset.no-border {
		padding-inline: 0;
	}

	.no-grow {
		flex-grow: 0;
	}

	.resource-item {
		display: flex;
		flex-flow: column nowrap;
		gap: var(--space-bl);
	}

	@media (width >= 640px) {
		.resource-item {
			display: grid;
			grid-template-columns: 2fr 3fr;
		}
	}

	.round-corners {
		border-radius: var(--brad);
	}

	.shadow {
		box-shadow: var(--shadow);
	}

	@media (width >= 790px) {
		.submenu {
			position: absolute;
			padding-block: var(--space-bl);
			padding-inline: var(--space-in);
			font-size: var(--ft-sz-s);
			background-color: var(--clr-white);
			box-shadow: var(--shadow);
		}
	}

	.table-container {
		overflow-x: auto;
	}

	.tag {
		display: block;
		padding-block: var(--space-bl-025);
		padding-inline: var(--space-in-050);
		margin-inline: auto 0;
		inline-size: fit-content;
		text-align: center;
		border: 1px solid;
		border-radius: .5em;
		box-shadow: var(--shadow);
	}

	.team {
		display: flex;
		flex-flow: row wrap;
		column-gap: var(--space-in);
		row-gap: var(--space-bl);
		justify-content: space-evenly;
	}

	.team-member {
		inline-size: clamp(var(--in-sz-min-column), 30%, 500px);
	}

	/*#region toolbar */
	.toolbar {
		display: flex;
		align-items: center;
		justify-content: start;
		margin-inline: 0;
	}

		.toolbar > * {
			flex-grow: 0;
		}
	/*#endregion toolbar */

	.truncated-text {
		max-width: 25ch;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*#region wrapper */
	.wrapper {
		block-size: 100%;
	}

		.wrapper[data-shape] {
			aspect-ratio: var(--aspect-ratio);
		}
	/*#endregion wrapper */
}

@layer state {
	@keyframes underline-it {
		to {
			scale: 1 1;
		}
	}

	@keyframes hide {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@keyframes show {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	[aria-expanded] .icon {
		transition: rotate linear var(--animation-duration);
	}

	[aria-expanded="true"] > .icon {
		rotate: 180deg;
	}

	[aria-expanded="false"] > .icon {
		rotate: 0deg;
	}

	[data-state], [data-mobile-state], [data-desktop-state] {
		animation-name: var(--animation-name);
		animation-duration: var(--animation-duration);
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
	}

	[data-state="open"] {
		--animation-name: show;
	}

	[data-state="closing"] {
		--animation-name: hide;
	}

	[data-state="closed"] {
		display: none;
	}

	@media (width < 790px) {
		[data-show="do"] { /* desktop only */
			display: none;
		}

		[data-mobile-state="open"] {
			--animation-name: show;
		}

		[data-mobile-state="closing"] {
			--animation-name: hide;
		}

		[data-mobile-state="closed"] {
			display: none;
		}
	}

	@media (width >= 790px) {
		[data-show="mo"] { /* mobile only */
			display: none;
		}

		[data-desktop-state="open"] {
			--animation-name: show;
		}

		[data-desktop-state="closing"] {
			--animation-name: hide;
		}

		[data-desktop-state="closed"] {
			display: none;
		}
	}
}

@layer objects {
	#main-menu-toggle {
		flex-grow: 0;
		margin-inline-start: auto;
	}

	#site-header {
		display: flex;
		align-items: start;
		justify-content: space-between;
		box-shadow: var(--shadow);
		position: sticky;
		top: 0;
		z-index: var(--z-float);
	}

	#mc_embed_signup {
		/*		background: #fff;
		false;
		clear: left;
		font: 14px Helvetica,Arial,sans-serif;
		width: px;*/
	}
}

@layer overrides {
	/*#region display */
	.hidden {
		display: none;
	}

	.visually-hidden:not(:focus) {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
	/*#endregion display */

	/*#region a11y */
	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		:root {
			--animation-duration: 0.01ms !important;
		}

		*,
		*::before,
		*::after {
			animation-duration: var(--animation-duration);
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		html:focus-within {
			scroll-behavior: auto;
		}
	}
	/*#endregion a11y */

	/*#region editor stuff */
	[data-editable] {
		--clr: var(--cls-edit-content);
		border: 4px dashed var(--clr);
		transition: background-color ease-in-out var(--animation-duration);
	}

		[data-editable] > * {
			scale: 1;
			transition: scale ease-in-out var(--animation-duration);
		}

	.section[data-editable] {
		--clr: var(--clr-edit-section);
	}

	.wrapper[data-editable] {
		--clr: var(--clr-edit-wrapper);
		block-size: auto;
		min-block-size: 5em;
	}

	:where(:not(.section, .wrapper))[data-editable] {
		--clr: var(--clr-edit-content);
	}

	.block-toolbar {
		margin-block-start: var(--space-bl);
		padding: 8px;
		background-color: var(--clr-gray);
		color: var(--clr-blue);
		border: 1px solid currentColor;
	}

		.block-toolbar:hover + [data-editable] {
			background-color: color-mix(in hsl, var(--clr), transparent 60%);
		}

			.block-toolbar:hover + [data-editable] > * {
				scale: 0.99;
			}

	.ql-editor {
		display: flex;
		flex-flow: column nowrap;
		row-gap: 1em; /* Space between paragraphs or elements */
		font-size: var(--ft-sz-r);
	}

	select.ql-symbols {
		max-inline-size: 3rem;
		font-size: var(--fs-300);
		border-radius: 0;
		border: none;
		background-color: var(--clr-gray);
		cursor: pointer;
	}
	/*#endregion editor stuff */
}