@layer reset, vars, theme, typography, layout, components, utilities;
/** CSS reset **/
@layer reset {
	/* simpler sizing */
	*, *::before, *::after {
		box-sizing: border-box;
	}

	/* remove default margin */
	* {
		margin: 0;
	}

	/* enable keyword animations */
	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	/* color mode user-agent styles */
	html {
		color-scheme: light;
	}

	body {
		/* min body height */
		min-height: 100svh;
		/* default to system fonts */
		font-family: system-ui, sans-serif;
		/* improve text rendering & line-sizing */
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeSpeed;
		line-height: 1.5;
		hanging-punctuation: first last;
	}

	/* improve media controls */
	img, svg, video, canvas, audio, iframe, embed, object {
		/* responsive embeds, maintain aspect ratios */
		display: block;
		max-width: 100%;
		vertical-align: middle;
		shape-margin: 1rem;
	}
	img, svg, video, canvas {
		height: auto;
	}
	audio:not([controls]) { display: none; }
	audio { width: 100%; }
	picture { display: contents; }
	source { display: none; }

	/* spacing & fallback tweaks*/
	img, picture, video {
		font-style: italic;
		text-align: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* inherit fonts for form controls */
	input, button, textarea, select {
		font: inherit;
	}

	/* legacy browser cleanup */
	img { border-style: none; }
	svg { overflow: hidden; }
	article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
		display: block;
	}
	[type='checkbox'], [type='radio'] {
		box-sizing: border-box;
		padding: 0;
	}

	/* cleaner type layouts */
	h1, h2, h3, h4, h5, h6 {
		text-wrap: balance;
		/* avoid text overflows */
		overflow-wrap: break-word;
		line-height: initial;
	}
	p {
		text-wrap: pretty;
	}

	/* switch to em units for headings */
	h1 { font-size: 2em; }
	h2 { font-size: 1.5em; }
	h3 { font-size: 1.17em; }
	h4 { font-size: 1.00em; }
	h5 { font-size: 0.83em; }
	h6 { font-size: 0.67em; }

	/* keep h1 margins consistent, even when nested */
	h1 {
		margin: 0.67em 0;
	}

	/* don't overflow <pre>s by default */
	pre { white-space: pre-wrap; }

	/* <a> elements that don't have a class get default styles */
	a:not([class]) {
		text-decoration-skip-ink: auto;
	}

	/* uniform baseline horizontal rule */
	hr {
		border-style: solid;
		border-width: 1px 0 0;
		color: inherit;
		height: 0;
		overflow: visible;
	}

	/* table improvements */
	table {
		border-collapse: collapse;
	}

	th, td {
		border: 1px solid;
		vertical-align: baseline;
	}

	th, caption {
		text-align: start;
	}

	thead th {
		vertical-align: bottom;
	}

	th, td, caption {
		padding: 0.25rem 0.75rem;
	}


	/* animate & pad same-page navigation */
	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
		:has(:target) {
			scroll-padding-top: 3rem;
		}
	}

	/* ignore children for <a> & <button> event listeners */
	:is(a, button) * {
		pointer-events: none;
	}

	/* maintain 'hidden' behaviour when overriding 'display' values */
	[hidden] {
		display: none;
	}

	/* remove list styles and default spacing 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: 0;

		& li {
			margin: 0;
		}
	}
}

/**** Variables ****/
@layer variables {
    :where(:root) {
		/* Text & Spacing Scales */
		--font-step--2: clamp(0.64em,  12.8px, 0.8em);
		--font-step--1: clamp(0.8em,  16px, 1em);
		--font-step-0: clamp(1em,  20px, 1.25em);
		--font-step-1: clamp(1.25em,  25px, 1.563em);
		--font-step-2: clamp(1.563em,  31.25px, 1.953em);
		--font-step-3: clamp(1.953em,  39.063px, 2.441em);
		--font-step-4: clamp(2.441em,  48.828px, 3.052em);
		--font-step-5: clamp(3.052em,  61.035px, 3.815em);

		--space-3xs: clamp(0.25rem, 0.2369rem + 0.0525vw, 0.3125rem);
		--space-2xs: clamp(0.5rem, 0.4737rem + 0.105vw, 0.625rem);
		--space-xs: clamp(0.75rem, 0.7106rem + 0.1576vw, 0.9375rem);
		--space-s: clamp(1rem, 0.9475rem + 0.2101vw, 1.25rem);
		--space-m: clamp(1.5rem, 1.4212rem + 0.3151vw, 1.875rem);
		--space-l: clamp(2rem, 1.895rem + 0.4202vw, 2.5rem);
		--space-xl: clamp(3rem, 2.8424rem + 0.6303vw, 3.75rem);
		--space-2xl: clamp(4rem, 3.7899rem + 0.8403vw, 5rem);
		--space-3xl: clamp(6rem, 5.6849rem + 1.2605vw, 7.5rem);

		/* Semantic Text & Spacing */
		--text-size-small: var(--font-step--1);
		--text-size-base: var(--font-step-0);
		--text-size-large: var(--font-step-1);
		--text-size-h3: var(--font-step-2);
		--text-size-h2: var(--font-step-3);
		--text-size-h1: var(--font-step-4);
		--text-size-massive: var(--font-step-5);

		--line-height-xs: 1.2;
		--line-height-s: 1.4;
		--line-height-m: 1.5;

		--gap-default: var(--space-s);

		--border-radius-s: 0.25em;
		--border-radius-m: 0.5em;
		--border-radius-l: 1.3125em;
		--border-radius-circle: 50%;

		/* Color Palette */
		--color-medium-sea-green-base: #37bc76;
		/* --color-medium-sea-green-hue: 155.53; */
		/* --color-medium-sea-green-chroma: 0.8763760917673724; */

		/* --color-msu-green-base: #154249; */
		/* --color-msu-green-hue: 209.42; */
		/* --color-msu-green-chroma: 0.3670487299853267; */

		/* --color-platinum-base: #dfeae5; */
		/* --color-platinum-hue: 167.16; */
		/* --color-platinum-chroma: 0.33707399418058975; */

		--color-gray-base: #808080;
		--color-gray-hue: 0;
		--color-gray-chroma: 0;

		--color-gray-05: oklch(18.5% calc(.08 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-10: oklch(24% calc(.1 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-20: oklch(32.5% calc(.135 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-30: oklch(40% calc(.16 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-40: oklch(47% calc(.185 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-50: oklch(57% calc(.2 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-60: oklch(67% calc(.175 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-70: oklch(75% calc(.13 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-80: oklch(83.5% calc(.085 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-90: oklch(92% calc(.04 * var(--color-gray-chroma)) var(--color-gray-hue));
		--color-gray-95: oklch(96% calc(.02 * var(--color-gray-chroma)) var(--color-gray-hue));

		/* Semantic Colors */
		--color-neutral-fill-muted: var(--color-gray-95);
		--color-neutral-fill-accent: var(--color-gray-90);
		--color-neutral-fill-vivid: var(--color-gray-30);
		--color-neutral-border-muted: var(--color-gray-90);
		--color-neutral-border-accent: var(--color-gray-80);
		--color-neutral-border-vivid: var(--color-gray-40);
		--color-neutral-text-muted: var(--color-gray-10);
		--color-neutral-text-accent: var(--color-gray-10);
		--color-neutral-text-vivid: white;
		--color-neutral-outline: var(--color-gray-20);

		/* Color Uses */
		/*   Branding */
		--brand-green: var(--color-medium-sea-green-base);

		/*   Page & Text  */
		--color-background: white;
		--color-text-normal: var(--color-gray-10);
		--color-text-muted: var(--color-gray-50);
		--color-text-input: var(--color-gray-30);
		/* --color-text-code: var(--color-pink-50); */
		/* --color-highlight: #fbf9c9; */
		/* --color-fill-highlight: var(--color-highlight); */
		/* --color-on-highlight: inherit; */
		/* --color-text-link: var(--color-blue-50); */
		/* --color-text-link-hover: var(--color-blue-40); */
		--decoration-text-link: underline dotted;
		--decoration-text-link-hover: underline;

		/*   State */
		--color-checked: var(--color-blue-50);
		--color-checked-icon: white;

		/*   Mixes */
		--color-mix-hover: black 10%;
		--color-mix-active: black 20%;
		--color-mix-transparent: transparent 20%;
		--color-mix-deleted: transparent 40%;

		/*   Focus */
		/* --focus-ring-color: var(--color-blue-50); */
		--focus-ring-style: solid;
		--focus-ring-width: var(--size-6xs);
		--focus-ring-offset: var(--size-6xs);
		--focus-ring-radius: 3px;


		/* --surface-color: var(--color-light);
		--text-color: var(--color-dark); */

		--focus-outline: 5px solid var(--color-focused, currentColor);
		--focus-offset: 3px;
		--focus-radius: 3px;

		/* --border-color: var(--text-color);
		--border: 1px solid var(--border-color); */
	}
}
/**** Fonts ****/
/* Figtree variable fonts (display font)*/
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	src: url('/assets/fonts/figtree-vf-latin-regular-v8.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	font-style: italic;
	src: url('/assets/fonts/figtree-vf-latin-italic-v8.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Atkinson Hyperlegible Next variable fonts (body font)*/
@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	font-style: normal;
	src: url('/assets/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
	font-weight: 200 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	font-style: italic;
	src: url('/assets/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
	font-weight: 200 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer variables {
    :where(:root) {
		--font-base:
			'Atkinson Hyperlegible Next',
			system-ui,
			sans-serif;
		--font-display:
			'Figtree',
			system-ui,
			sans-serif;
		--font-mono:
			ui-monospace,
			monospace;
	}
}
/**** Theme ****/
@layer variables {
	:where(:root) {
		--border-size-s: 1px;
		--border-size-m: 2px;
		--border-size-l: 4px;

		/* TODO style this */
		--border-color: black;

		/* Drawn borders from PaperCSS (https://www.getpapercss.com) & Open Props (https://open-props.style) */
		--radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
		--radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
		--radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
		--radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
		--radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
		--radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;

		/* Shadows from Open Props */
		--shadow-color: 220 3% 15%;
		--shadow-strength: 1%;
		--inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
		--shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
		--shadow-2:
			0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
		--shadow-3:
			0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
			0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
			0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
			0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
			0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
		--shadow-4:
			0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
			0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
			0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
			0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
		--shadow-5:
			0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
			0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
			0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
			0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
		--shadow-6:
		0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
			0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
			0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
			0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
			0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
			0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
		--inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
		--inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
		--inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
		--inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
		--inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);

		/* Gradient generated from https://www.joshwcomeau.com/gradient-generator/ */
		--gradient-1: linear-gradient(
			140deg,
			hsl(0deg 100% 52%) 0%,
			hsl(347deg 100% 50%) 8%,
			hsl(339deg 100% 50%) 17%,
			hsl(330deg 100% 50%) 25%,
			hsl(321deg 100% 50%) 33%,
			hsl(312deg 100% 50%) 42%,
			hsl(302deg 100% 50%) 50%,
			hsl(287deg 100% 66%) 58%,
			hsl(268deg 100% 72%) 67%,
			hsl(243deg 100% 76%) 75%,
			hsl(221deg 100% 68%) 83%,
			hsl(209deg 100% 59%) 92%,
			hsl(202deg 100% 50%) 100%
		);
		--gradient-2: linear-gradient(
			0deg,
			hsl(188deg 55% 18%) 0%,
			hsl(183deg 55% 22%) 0%,
			hsl(178deg 55% 26%) 0%,
			hsl(172deg 55% 30%) 0%,
			hsl(167deg 55% 34%) 1%,
			hsl(162deg 55% 38%) 2%,
			hsl(156deg 55% 42%) 3%,
			hsl(151deg 55% 46%) 5%,
			hsl(149deg 50% 50%) 7%,
			hsl(149deg 50% 55%) 10%,
			hsl(150deg 49% 60%) 13%,
			hsl(150deg 48% 66%) 18%,
			hsl(151deg 46% 71%) 24%,
			hsl(152deg 43% 77%) 31%,
			hsl(152deg 36% 83%) 42%,
			hsl(153deg 21% 90%) 63%
		);
		--gradient-3: linear-gradient(
			197deg,
			hsl(300deg 100% 52%) 0%,
			hsl(278deg 100% 69%) 5%,
			hsl(222deg 100% 68%) 9%,
			hsl(200deg 100% 50%) 14%,
			hsl(195deg 100% 50%) 18%,
			hsl(191deg 100% 50%) 23%,
			hsl(188deg 100% 50%) 27%,
			hsl(185deg 100% 50%) 32%,
			hsl(183deg 100% 50%) 36%,
			hsl(172deg 100% 48%) 41%,
			hsl(161deg 100% 49%) 45%,
			hsl(150deg 100% 52%) 50%,
			hsl(138deg 100% 64%) 55%,
			hsl(126deg 100% 69%) 59%,
			hsl(113deg 100% 70%) 64%,
			hsl(102deg 100% 68%) 68%,
			hsl(93deg 100% 66%) 73%,
			hsl(86deg 100% 64%) 77%,
			hsl(79deg 100% 62%) 82%,
			hsl(74deg 100% 59%) 86%,
			hsl(68deg 100% 57%) 91%,
			hsl(64deg 100% 54%) 95%,
			hsl(60deg 100% 51%) 100%
		);
		--gradient-4: linear-gradient(
			0deg,
			hsl(188deg 0% 18%) 0%,
			hsl(183deg 0% 22%) 0%,
			hsl(178deg 0% 26%) 0%,
			hsl(172deg 0% 30%) 0%,
			hsl(167deg 0% 34%) 1%,
			hsl(162deg 0% 38%) 2%,
			hsl(156deg 0% 42%) 3%,
			hsl(151deg 0% 46%) 5%,
			hsl(149deg 0% 50%) 7%,
			hsl(149deg 0% 55%) 10%,
			hsl(150deg 0% 60%) 13%,
			hsl(150deg 0% 66%) 18%,
			hsl(151deg 0% 71%) 24%,
			hsl(152deg 0% 77%) 31%,
			hsl(152deg 0% 83%) 42%,
			hsl(153deg 0% 90%) 63%
		);
	}

	/* TODO: dark mode &/or themes */
	/* @media (prefers-color-scheme: dark) {
		:where(:root) {
			--shadow-color: 220 40% 2%;
			--shadow-strength: 25%;
			--inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
		}
	} */
}

@layer theme {
	body {
		background: var(--color-background);
		color: var(--text-color);
	}


	#page-content {
		/* background: var(--gradient-2); */
	}

	.border,
	:where(.child-borders > *) {
		border-color: var(--border-color);
		border-style: solid;
		border-width: var(--border-size-m);
	}
	.border-s,
	:where(.child-borders.border-s > *) {
		border-width: var(--border-size-s);
	}
	.border-m,
	:where(.child-borders.border-m > *) {
		border-width: var(--border-size-m);
	}
	.border-l,
	:where(.child-borders.border-l > *) {
		border-width: var(--border-size-l);
	}

	.border,
	.border-1,
	:where(.child-borders > *:nth-child(6n+1)) {
		border-radius: var(--radius-drawn-1);
	}
	.border-2,
	:where(.child-borders > *:nth-child(6n+2)) {
		border-radius: var(--radius-drawn-2);
	}
	.border-3,
	:where(.child-borders > *:nth-child(6n+3)) {
		border-radius: var(--radius-drawn-3);
	}
	.border-4,
	:where(.child-borders > *:nth-child(6n+4)) {
		border-radius: var(--radius-drawn-4);
	}
	.border-5,
	:where(.child-borders > *:nth-child(6n+5)) {
		border-radius: var(--radius-drawn-5);
	}
	.border-6,
	:where(.child-borders > *:nth-child(6n+6)) {
		border-radius: var(--radius-drawn-6);
	}

	.hard-shadow {
		--d: 2px;
		--shadow-color: var(--h, 120) var(--s, 100%) 15%;
		filter:
			drop-shadow(calc((var(--d) + 1px) * -1)  calc(var(--d) + 2px) 0 black)
			drop-shadow(0 0 calc(var(--d) + 3px) hsl(var(--shadow-color) / 30%))
			drop-shadow(0 0 calc(var(--d) + 8px) hsl(var(--shadow-color) / 10%));
	}

	#page-content a:not([class]),
	a.underline-decorate {
		--underline-size: var(--border-size-m);
		text-decoration: none;
		padding-block-end: 0.1lh;
		background:
			linear-gradient(rgb(90, 90, 90)),
    		var(--gradient-1);
		background-size: 100% var(--underline-size), 0 calc(var(--underline-size) * 2);
		background-position: 100% 100%, 0 100%;
		background-repeat: no-repeat;
  		transition: background-size .2s ease-in-out;

		&:where(:hover, :focus) {
			background-size: 0 var(--underline-size), 100% calc(var(--underline-size) * 2);
		}

		:is(h1, h2, h3, h4) & {
			--underline-size: .1ch;
		}

	}



    :is(#site-home, a:not([class]), a.button, .styled-btn, .donate-link) {
		outline-offset: var(--space-2xs);
		border-radius: var(--radius-drawn-1);

		&:where(:focus, :focus-visible) {
			outline: var(--focus-outline);
		}
	}
    :is(li, h1, h2, h3, h4):has(> a:where(:focus, :focus-visible)),
    :is(li, h1, h2, h3, h4):has(> q > a:where(:focus, :focus-visible)) {
		height: fit-content;
	}
    :is(li, h1, h2, h3, h4):has(> a:where(:focus, :focus-visible)),
    :is(li, h1, h2, h3, h4):has(> q > a:where(:focus, :focus-visible)) {
		outline: var(--focus-outline);
		outline-offset: var(--space-2xs);
		border-radius: var(--radius-drawn-2);
		/* border-radius: var(--focus-outline-radius); */
		border-color: transparent !important;

		&.border,
		#page-footer & {
			outline-offset: unset;
		}

		& > a,
		& q > a {
			outline: none !important;
		}
	}

	/* #page-content a {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			inset: auto auto 1lh;
			background-color: red;
			height: 5px;

			scale: 0;
			transition: scale .2s;
			transform-origin: left;
		}

		&:where(:hover, :focus-visible) {
			&::after {
				scale: 1;
			}
		}
	} */

	.wordmark:where(:focus, :focus-visible) {
		outline: var(--focus-outline);
		border-radius: var(--radius-drawn-1);
	}


	#page-footer {
		--footer-text: white;
		color: var(--footer-text);
		background-color: black;

		& svg {
			fill: var(--footer-text);
		}
	}
	#page-footer .wordmark {
		--yga-text-color: var(--footer-text);
		--yga-arrow-color: var(--footer-text);

		&:where(:hover, :focus, :focus-within) {
			--yga-arrow-color: var(--brand-green);
		}
	}

	#page-footer a:not([class]) {
		color: currentColor;
		text-decoration: none;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			inset: auto var(--hitbox-padding) var(--hitbox-padding);
			background-color: currentColor;
			height: 1px;

			scale: 0;
			transition: scale .2s;
			transform-origin: left;
		}

		&:where(:hover, :focus-visible) {
			&::after {
				scale: 1;
			}
		}
	}
}
/**** Typography ****/
@layer typography {
	body {
		font-family: var(--font-base);
        font-size: var(--text-size-base);
		font-weight: 350;
		line-height: 1.7;
	}

	strong, .bold { font-weight: 650; }
	em, .italic { font-style: italic; }

	h1, h2, h3, h4,
	hgroup, .display,
	button, .button {
		font-family: var(--font-display);
	}

	h1, .h1 {
		font-size: var(--text-size-h1);
		font-weight: 800;
	}
    h2, .h2 {
		font-size: var(--text-size-h2);
		font-weight: 750;
	}
    h3, .h3 {
		font-size: var(--text-size-h3);
		font-weight: 725;
	}
    h4, .h4 {
		font-size: var(--text-size-large);
		font-weight: 700;
	}
	h1, h2, h3, h4, button, .button { line-height: 1.1; }

	hgroup {
		&:has(h1),
		&.hg-centered {
			display: grid;
			justify-items: center;
			text-align: center;

			& p {
				max-width: 45ch;
			}
		}

		& > :first-child {
			margin-block-start: 0;
		}
		& p {
			font-size: var(--text-size-large);
			font-weight: 700;
		}

		& .visually-hidden + * {
			--flow-space: 0;
		}

	}

	th { font-weight: 600; }

	caption {
		font-size: var(--text-size-large);
		font-weight: 500;
	}

	dd, ul, ol {
		padding-inline-start: var(--space-l);
	}

	:is(ul, ol) :is(ul, ol) {
		padding-inline-start: var(--space-m);
	}

	/* style for ~plain~ unordered lists */
	ul:not([class]) li {
		padding-inline-start: var(--space-xs);
	}

	/* style marker for ordered lists */
	ol {
		list-style-type: decimal;

		& > li > ol {
			list-style-type: lower-roman;

			& > li > ol {
				list-style-type: lower-latin;

				& ::marker {
					font-family: var(--font-mono);
				}
			}
		}
	}

	:is(ul, ol)[role='list'] {
		&, & > li {
			padding-inline-start: 0;
		}
	}

	blockquote:not([class]) {
		padding-inline: var(--space-s) 0;
		padding-block: var(--space-2xs);
		border-inline-start: var(--space-2xs) solid;
		font-style: italic;
		font-size: var(--text-size-large);
		font-weight: 300;

		& em {
			font-style: normal;
		}

		& cite {
			display: block;
			text-align: right;
		}
	}

	a {
		color: currentColor;

		&:not([class]) {
			text-decoration-color: var(--color-primary, currentColor);
			text-decoration-thickness: 0.3ex;
			text-underline-offset: 0.3ex;
		}
	}

	.flow, hgroup {
		& h1 { margin-block-end: 0; }

		& > * + *,
		& :is(ul, ol, td) > * + *,
		& li > :is(ul, ol) {
			margin-block-start: var(--flow-space, var(--space-s));
		}

		& :is(h1, h2, h3, hgroup, blockquote),
		& hgroup + * {
			--flow-space: var(--space-l);
		}

		& :is(h1, h2, h3) + * {
			--flow-space: var(--space-xs);
		}

		& :is(ul, ol) > *  {
			--flow-space: var(--space-3xs);
		}
	}

	button, .button,
	.trim-text {
		text-box-edge: cap alphabetic;
		text-box-trim: trim-both;
	}

	#page-footer {
		& a,
		& .cr {
			--hitbox-padding: var(--space-xs);
			padding: var(--hitbox-padding);
			text-box-edge: text;
        	text-box-trim: trim-both;
		}

		& section[aria-label="Primary"] {
			font-family: var(--font-display);
			font-weight: 800;
		}
		& section[aria-label="Legal"] {
			font-size: var(--text-size-small);
		}
	}

	.episode-page h1 {
		font-size: var(--text-size-massive);
		text-align: center;
	}
}
/**** Layout ****/
@layer layout {
	:root {
		--gutter: clamp(16px, 11vw - 50px, 60px);
		--__article-max-width: 1000px;
		--__content-max-width: 1600px;
		--__full-width: calc(100vw - (var(--gutter) * 2));

		--article-width: min(var(--__article-max-width), var(--__full-width));
		--content-width: min(var(--__content-max-width), var(--__full-width));
		--content-side-width: calc( (var(--content-width) - var(--article-width)) / 2);

		scrollbar-gutter: stable;
	}

	body {
		display: grid;
		grid-template-columns:
			var(--gutter)
			[full-width-start]
				1fr
				[content-start]
					var(--content-side-width)
					[article-start]
						var(--article-width)
					[article-end]
					var(--content-side-width)
				[content-end]
				1fr
			[full-width-end]
			var(--gutter);
		grid-template-rows: 1fr auto;
	}

	#page-header,
	#page-content,
	#page-footer,
	.subgrid {
		display: grid;
		grid-template-columns: subgrid;
		grid-auto-rows: min-content;
	}

	#page-header,
	#page-content,
	#page-footer {
		grid-column: 1/-1;
	}
	:where(#page-header > *),
	:where(#page-content > *),
	:where(#page-content > picture > img),
	:where(#page-footer > *) {
		grid-column: content;
	}

	.edge-content > * { grid-column: 1 / -1; }
	.full-content > *  { grid-column: full-width; }
	.content-content > * { grid-column: content; }
	.article-content > * { grid-column: article; }

	.col-edge { grid-column: 1 / -1; }
	.col-full  { grid-column: full-width; }
	.col-content { grid-column: content; }
	.col-article { grid-column: article; }

	#page-content {
		padding-block-start: var(--gutter);
		overflow-y: clip;
	}

	#page-content > :first-child,
	#page-content > hgroup:first-child > :first-child {
		margin-block-start: 0;
	}

	section[aria-labelledby="show-links"] {
		--size: var(--space-l);
		display: grid;
		justify-content: center;
	}

	#page-content:not(:has(figure[aria-label="Audio Player"])) {
		margin-block-end: var(--gutter);
	}

	#page-footer {
		z-index: 1;
		padding-block: var(--space-s);

		& > nav,
		& .site-nav,
		& section {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
		}

		& > nav {
			gap: var(--space-s) var(--space-2xl);
		}

		& section[aria-label="Primary"] {
			flex-grow: 1;

			.site-nav {
				gap: 0 var(--space-2xs);

				& li {
					text-align: center;
				}
			}
		}

		& section[aria-label="External"] {
			gap: var(--space-s);
			margin-inline-end: auto;
		}

		& section[aria-label="Legal"] {
			justify-content: center;
		}

		& .site-nav a {
			display: block;
		}

		@media (width < 575px) {
			& nav {
				display: grid;
				justify-items: center;
        		justify-content: center;
			}
			& section[aria-label="Primary"] .site-nav {
				flex-direction: column;
				/* justify-content: center; */
			}
			& .site-nav {
				justify-content: center;
			}
			& section[aria-label="External"] {
				margin-inline-end: unset;
        		justify-content: center;
			}
		}
	}
}
/**** Components ****/
@layer variables {
	:where(:root) {
		--episode-card-target: clamp(350px, 30vw, 400px);
	}
}


@layer components {
	.svg-icon {
		width: var(--size, 1em);
		height: var(--size, 1em);
		flex-shrink: 0;

		&.inline {
			--size: 1lh;
			display: inline-block;
			margin-inline-end: 0.25ch;
			vertical-align: bottom;
			fill: currentColor;
		}
	}

	.donate-link {
		display: flex;
		align-items: center;
		gap: 1ch;
		width: fit-content;
		padding: .5em .75em;

		font-family: var(--font-display);
      	font-weight: 800;

		& svg {
			--size: 1em;
			fill: currentColor;
		}

		#page-footer & {
			color: black;
			background-color: white;
			outline-color: white;
		}
	}

	nav.pagination {
		/* margin-block-start: var(--space-s); */
		font-family: var(--font-display);
		font-weight: 600;

		&, & > ul {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: var(--gap-default);
		}
		& > ul {
			--spacing: var(--space-xs);
			list-style: none;
			padding: 0;

			& li {
				margin: 0;
				padding: 0;

				&.truncation,
				& a {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				& a {
					position: relative;
					margin: var(--spacing);

					&::before {
						content: "";
						position: absolute;
						inset: calc(-1*var(--spacing));
						border-radius: inherit;
					}
				}
				&:not(.prevnext) a {
					min-width: 3ch;
				}

				&:has(a:where([aria-current="page"], [aria-current="page"], [aria-hidden="true"])) {
					opacity: .5;
				}
				& > a[aria-hidden="true"] {
					background: none;

					&::before {
						content: none;
					}
				}
			}
		}
		& a { text-decoration: none; }
	}

	.podcast-links {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		padding: var(--space-l);
		gap: var(--space-l);

		& li {
			margin: 0;
		}

		& a {
			display: block;

			& > svg {
				transition: fill .2s ease-in-out;
			}

			&:where(:hover, :focus, :focus-within) {
				&[title="Spotify"] > svg {
					fill: #1ed760;
				}
				&[title="Apple Podcasts"] > svg {
					fill: #bc59ea;
				}
				&[title="YouTube Music"] > svg {
					fill: #ff0000;
				}
				&[title="Podcast RSS"] > svg {
					fill: #ee802f;
				}
			}
		}
	}


	podcast-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(var(--episode-card-target), 100%), 1fr));
		/* grid-auto-rows: 1fr auto; */
		column-gap: var(--space-l);
	}

	podcast-list .load-btn {
		grid-column: 1/-1;
		width: fit-content;
		margin-block: var(--space-s);
		margin-inline: auto;
	}
	podcast-list:defined + nav.pagination {
		display: none;
	}

	podcast-episode {
		display: grid;
		justify-items: center;
		padding: var(--space-l);
		/* box-shadow: var(--shadow-3); */
		background-color: var(--color-background);

		/* Open Props shadow-3 */
		/* --z: 2px; */
		/* --shadow-color: var(--h, 120) var(--s, 100%) 30%; */
		/* --shadow-strength: .1; */
		/* filter:
			drop-shadow(0 1px calc(var(--z) - 2px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .07)))
			drop-shadow(0 1px calc(var(--z) + 1px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .05)))
			drop-shadow(0 3px calc(var(--z) + 8px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .04)))
			drop-shadow(0 6px calc(var(--z) + 12px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .03))); */

		&:nth-of-type(12n + 1) {
			--h: 30deg;
		}
		&:nth-of-type(12n + 2) {
			--h: 60deg;
		}
		&:nth-of-type(12n + 3) {
			--h: 90deg;
		}
		&:nth-of-type(12n + 4) {
			--h: 120deg;
		}
		&:nth-of-type(12n + 5) {
			--h: 150deg;
		}
		&:nth-of-type(12n + 6) {
			--h: 180deg;
		}
		&:nth-of-type(12n + 7) {
			--h: 210deg;
		}
		&:nth-of-type(12n + 8) {
			--h: 240deg;
		}
		&:nth-of-type(12n + 9) {
			--h: 270deg;
		}
		&:nth-of-type(12n + 10) {
			--h: 300deg;
		}
		&:nth-of-type(12n + 11) {
			--h: 330deg;
		}
		&:nth-of-type(12n + 12) {
			--h: 360deg;
		}

		& figure {
			display: grid;
			justify-items: center;

			& :is(h2, h3, h4) {
				text-align: center;
				line-height: 1.4
			}

			& q::before,
			& q::after {
				content: unset;
			}
		}

		& .styled-btn {
			--d: 1px;
		}
	}

	.styled-btn {
		--s: 0%;
		/* --shadow-color: var(--h, 120) var(--s, 100%) 30%; */
		/* --shadow-strength: .05; */
		padding: var(--space-s);
		border-width: var(--border-size-m);

		font-size: var(--font-step-2);
		font-weight: 800;

		color: currentColor;
		background-color: hsl(var(--h, 120), var(--s, 100%), var(--l, 100%));
		/* filter:
			drop-shadow(0 1px calc(var(--z) - 2px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .07)))
			drop-shadow(0 1px calc(var(--z) + 1px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .05)))
			drop-shadow(0 3px calc(var(--z) + 8px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .04)))
			drop-shadow(0 6px calc(var(--z) + 12px) hsl(var(--shadow-color) / calc(var(--shadow-strength) + .03))); */

		--timing: .1s var(--ease-in-3);
		transition:
			transform var(--timing),
			/* filter var(--timing), */
			background-color var(--timing);
		transform: translateY(0px) scale(.95);

		&:disabled {
			--s: 0%;
			opacity: .3;
		}

		/* podcast-episode:where(:hover, :focus, :focus-within) & {
			--l: 95%;
		} */

		&:not(:disabled):where(:hover, :focus, focus-visible) {
			--l: 90%;
			--z: 4px;
			--s: 100%;
			transform: translateY(0px) scale(1);
		}

		&:not(:disabled):active {
			--l: 85%;
			--z: 0px;
			transform: translateY(2px) scale(.85);
		}

		&:not(:focus-visible) {
			outline: none;
		}
	}

	podcast-episode[data-loading] {
		background-color: grey;
		& > * {
			display: none;
		}
	}

	podcast-list podcast-episode {
		grid-row: span 3;
		grid-template-rows: subgrid;
		margin-block-end: var(--space-l);

		& figure {
			grid-row: span 2;
			grid-template-rows: subgrid;
		}
	}

	figure:has(audio-player:empty:not(:defined)) {
		display: none;
	}

	audio-player:not(:empty):not(:defined) {
		display: contents;
		height: fit-content;

		/* only applies to Chrome / Webkit browsers */
		& audio::-webkit-media-controls-panel {
			background-color: var(--color-background);
		}
	}

	/* audio-player[data-player-for="page"] {
		filter:
			drop-shadow(-3px 4px 0 black)
			drop-shadow(0 0 5px hsl(220 3% 15% / 30%))
			drop-shadow(0 0 10px hsl(220 3% 15% / 10%));
	} */

	figure:has(audio-player:defined[data-player-for="page"]) {
		--animation-time: .5s;
		position: sticky;
		inset-block-end: 0;
		z-index: 1;
		padding: var(--space-xs) var(--space-m) var(--space-m);
		background: linear-gradient(to bottom, transparent 0px, var(--color-background) var(--space-l));
		transform: translateY(0%);
		transition: transform var(--animation-time) ease-in-out;
		animation: show var(--animation-time) ease-in forwards;
		transition-behavior: allow-discrete;

		@starting-style {
			content-visibility: hidden;
			transform: translateY(100%);
		}
	}

	figure:has(audio-player:defined[data-player-for="page"]:state(empty)) {
  		animation: hide var(--animation-time) ease-out forwards;
		transform: translateY(100%);
	}

	section:has(podcast-list) + figure:has(audio-player:defined) {
		margin-block-start: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	audio-player:defined[data-player-for="page"] {
		scale: .975;
		transition: scale .2s var(--ease-out-5);

		figure:where(:hover, :focus, :focus-within) & {
			scale: 1;
		}
	}
}
@layer variables {
	:where(:root) {
		--rainbow-shift-linear: rainbow-shift linear infinite;
		--rainbow-shift-steps: rainbow-shift steps(12) infinite;

		/* Easings & animations from Open Props (https://open-props.style) */
		--ease-in-3: cubic-bezier(.70, 0, 1, 1);
		--ease-out-3: cubic-bezier(0, 0, .3, 1);
		--ease-out-5: cubic-bezier(0, 0, 0, 1);
  		--animation-shake-z: shake-z .75s var(--ease-out-5);
		--animation-spin: spin 2s linear;
	}
}

@layer theme {
	.focus-wiggle:where(:hover, :focus, :focus-within),
	a:where(:hover, :focus, :focus-within) > .focus-wiggle {
		animation: var(--animation-shake-z);
		transform-origin: bottom;
	}
}

@keyframes shake-z {
	0%, 100% { transform: rotate( 0deg) }
	20%      { transform: rotate(-2deg) }
	40%      { transform: rotate( 2deg) }
	60%      { transform: rotate(-2deg) }
	80%      { transform: rotate( 2deg) }
}

@keyframes spin {
  to { transform: rotate(1turn) }
}

@keyframes rainbow-shift {
	from { filter: hue-rotate(  0deg); }
	to   { filter: hue-rotate(360deg); }
}

/* Show/hide from MDN */
@keyframes show {
	from { content-visibility: hidden; }
	to { content-visibility: visible; }
}

@keyframes hide {
	from { content-visibility: visible; }
	to { content-visibility: hidden; }
}

/* View transitions, if browser-supported */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

#page-header { view-transition-name: page-header; }
#page-footer { view-transition-name: page-footer; }
audio-player { view-transition-name: audio-player; }
/**** Utilities ****/
@layer utilities {
	/* hide from view, but leave enabled for screen reader accessability
	* (see https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) */
	.visually-hidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
	/* allow the element to be focusable when navigated to via the keyboard */
	.hidden-focusable:where(:active, :focus) {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		white-space: normal;
		width: auto;
	}
	.clear-floats {
		clear: both;
	}
}
@media print {
	html {
		font-size: 8pt;
	}

	*,
	*::before,
	*::after,
	*:first-letter,
	p:first-line,
	div:first-line,
	blockquote:first-line,
	li:first-line {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
		font-size: revert;
		overflow: revert;
	}

	body {
		display: block;
	}

	body > *:not(main),
	#page-content:has(> .article-content) > *:not(.article-content),
	.article-content .article-other {
		display: none;
	}

	a,
	a:visited {
		text-decoration: underline;
		color: #000;
	}

	abbr[title]::after {
		content: ' (' attr(title) ')';
	}

	a[href]:not([href^="#"], [href^="javascript:"])::after {
		content: ' (' attr(href) ')';
	}

	pre {
		white-space: pre-wrap !important;
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	p,
	h2,
	h3,
	h4 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3,
	h4 {
		page-break-after: avoid;
	}
}
@layer components {
	audio-player,
	audio-player > div {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	audio-player {
		--btn-size: var(--space-l);
		--transition-timing: .2s ease;
		--range-height: var(--space-s);
		--range-radius: var(--radius-drawn-6);
		--range-thumb-size: var(--space-m);
		--range-thumb-radius: var(--radius-drawn-5);
		--component-color: black;
		padding: 1em;
		flex-wrap: wrap;
		gap: var(--space-xs);
		container-type: inline-size;
		background-color: var(--color-background);
	}

	#progress-controls {
		flex: 0 0 200px;
		gap: var(--space-xs);

		@container (width < 1000px) {
			flex-basis: 100%;
		}
	}

	#track-progress {
		flex: 1 1 500px;
		flex-wrap: wrap;
		column-gap: var(--space-xs);

		& #track-timestamps {
			flex-shrink: 0;
			font-variant-numeric: tabular-nums lining-nums slashed-zero;
			display: flex;
			align-items: center;
		}

		& #progress-bar {
			flex: 1 1 350px;
		}

	}
	#volume-controls {
		flex: 0 0 200px;
	}

	#progress-controls button:disabled,
	#progress-bar:disabled,
	audio-player:state(empty) #track-timestamps {
		cursor: default;
		opacity: .1;
	}

	/* audio-player:state(empty):where(:hover, :focus, :focus-within) {
		& > :not(#volume-controls) {
			--component-color: red;
		}
	} */

	#vol-bar {
		padding-left: var(--space-xs);
	}


audio-player input[type="range"] {
		/* disable defaults*/
		-webkit-appearance: none;
		appearance: none;
		width: 7.5em;
		cursor: pointer;
		background: transparent;
		padding-block: .2rem;

		&:focus {
			outline: none;
		}

		/* --- Chrome, Safari, Opera and Edge Chromium */
		/* style slider */
		&::-webkit-slider-runnable-track {
						background-color: var(--component-color);
			border-radius: var(--range-radius);
			height: var(--range-height);

		}

		/* style thumb */
		&::-webkit-slider-thumb {
			-webkit-appearance: none; /* disable default */
			appearance: none;
			margin-top: -0.4em;

			/* customize */
						background-color: var(--component-color);
			height: var(--range-thumb-size);
			width: var(--range-thumb-size);
			border-radius: var(--range-thumb-radius);
			transform: scale(.8);
			transform-origin: center left;
			transition: transform var(--transition-timing);

		}

		&:focus::-webkit-slider-thumb {
						{# border: 1px solid var(--color-bg-secondary); #}
			outline: 3px solid var(--component-color));
			outline-offset: 0.125rem;

		}

		/* --- Firefox */
		/* style slider */
		&::-moz-range-track {
						background-color: var(--component-color);
			border-radius: var(--range-radius);
			height: var(--range-height);

		}

		/* style thumb */
		&::-moz-range-thumb {
			border: none; /* disable default */

			/* customize */
						background-color: var(--component-color);
			height: var(--range-thumb-size);
			width: var(--range-thumb-size);
			border-radius: var(--range-thumb-radius);
			transform: scale(.8);
			transform-origin: center left;
			transition: transform var(--transition-timing);

		}

		&:focus::-moz-range-thumb {
						{# border: 1px solid var(--color-bg-secondary); #}
			outline: 3px solid var(--component-color));
			outline-offset: 0.125rem;

		}
	}

	/* style progress */
	#progress-bar::-moz-range-progress,
	#vol-bar::-moz-range-progress {
					background-color: var(--component-color);
			border-radius: var(--range-radius);
			height: var(--range-height);

	}

	/* --- fade effects */
	.fades,
	#progress-bar::-webkit-slider-runnable-track,
	#play-btn[title="Pause Audio"] {
		opacity: .5;
		transition: opacity var(--transition-timing);
	}
	.fades:where(:hover, :focus, :focus-within),
	#progress-bar:hover::-webkit-slider-runnable-track,
	#play-btn[title="Pause Audio"]:where(:hover, :focus, :focus-within),
	#play-btn[title="Play Audio"] {
		opacity: 1;
	}
	#progress-bar:where(:hover, :focus, :focus-within)::-webkit-slider-thumb,
	#volume-controls:where(:hover, :focus, :focus-within) #vol-bar::-webkit-slider-thumb {
		transform: scale(1);
	}

	#progress-bar,
	#vol-bar {
		&::-moz-range-track {
			opacity: .5;
			transition: opacity var(--transition-timing);
		}

		&:hover::-moz-range-track {
			opacity: 1;
		}
	}
	#progress-bar:where(:hover, :focus, :focus-within)::-moz-range-thumb,
	#volume-controls:where(:hover, :focus, :focus-within) #vol-bar::-moz-range-thumb {
		transform: scale(1);
	}

	audio-player {
		& button {
			width: var(--btn-size);
			height: var(--btn-size);/* --- Firefox */
			cursor: pointer;
			fill: var(--component-color);
			border: none;
			background: none;

			& > svg {
				--size: 100%;
			}

			&:focus-visible {
				outline: var(--focus-outline);
				outline-offset: var(--space-2xs);
			}
		}

		& #play-btn {
			--btn-size: var(--space-2xl);
		}

		& time {
			font-size: var(--text-size-base);
			text-box-trim: trim-both;
        	text-box-edge: text alphabetic;
		}
	}

	audio-player:state(playing) {
		& #play-btn {
			animation: var(--animation-shake-z) forwards;
		}
	}


	#fwd-btn:active {
		animation: spin 1s var(--ease-in-3);
	}
	#back-btn:active {
		animation: spin 1s var(--ease-out-3) reverse;
	}
}