@layer base {
	/* 
	  Global styles 
	*/

	hr {
		border: none;
		-webkit-border-before: var(--hr-stroke, var(--stroke));
		border-block-start: var(--hr-stroke, var(--stroke));
		margin-block: var(--flow-space, var(--space-xl));
	}

	svg:not([class]) {
		width: auto;
		height: 1lh;
	}

	svg {
		flex-shrink: 0;
	}

	svg[role='img'][width][height] {
		/* Allow the width and height attributes to take over */
		width: revert;
		height: revert;

		/* We've got a dark theme on this site, so if there's no background, dark lines will be hard to see */
		background: var(--color-light);

		/* A tiny bit of padding frames the image nicely */
		padding: var(--space-xs);
	}

	/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */

	form > * + * {
		margin-top: var(--flow-space, 1rem);
	}

	:is(input, select, textarea) {
		accent-color: var(--color-primary);
	}

	:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea) {
		padding: 0.5em 0.8em;
		border-radius: var(--form-border-radius, 0);
		border: var(--stroke-solid);
		color: var(--color-light);
		width: 100%;
	}

	:is(
			input:not([type='checkbox'], [type='radio'], [type='color']),
			select,
			textarea
		)::-webkit-input-placeholder {
		color: var(--color-mid);
		opacity: 1;
	}

	:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea)::-moz-placeholder {
		color: var(--color-mid);
		opacity: 1;
	}

	:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea):-ms-input-placeholder {
		color: var(--color-mid);
		opacity: 1;
	}

	:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea)::-ms-input-placeholder {
		color: var(--color-mid);
		opacity: 1;
	}

	:is(
			input:not([type='checkbox'], [type='radio'], [type='color']),
			select,
			textarea
		)::-webkit-input-placeholder {
		color: var(--color-mid);
		opacity: 1;
	}

	:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea)::placeholder {
		color: var(--color-mid);
		opacity: 1;
	}

	label {
		line-height: var(--leading-fine);
		font-weight: var(--font-medium);
	}

	/* Creates a line break, but maintains its inline behaviour */

	label::after {
		content: '\A';
		white-space: pre;
	}

	/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */

	label:has(input) {
		display: flex;
		align-items: baseline;
		gap: var(--space-s);
		font-weight: var(--font-normal);
	}

	label:has(input) + label:has(input) {
		--flow-space: var(--space-s-m);
	}

	/* Slightly adjusts the vertical position of the check/radio */

	label:has(input) input {
		transform: translateY(-0.1ex);
	}

	input:disabled {
		background: var(--color-mid);
	}

	input:disabled,
	label input:disabled + * {
		cursor: not-allowed;
	}

	fieldset {
		border: var(--stroke);
		padding: var(--space-s);
	}

	legend {
		font-weight: var(--font-medium);
		padding-inline: var(--space-xs);
	}

	/* Details and summary */

	summary {
		font-weight: var(--font-bold);
		cursor: pointer;
	}

	details[open] summary {
		-webkit-margin-after: var(--space-s);
		margin-block-end: var(--space-s);
	}

	/*** 
	
	BUTTONS AND LINKS 
	
	***/

	a {
		text-decoration: none;
		color: inherit;
		cursor: pointer;
	}

	.btn {
		--button-bg: var(--color-primary);
		--button-text: var(--color-light);
		--button-x-padding: 2.2em;
		--button-y-padding: 1.65em;
		--button-gutter: 1ch;
		--focus-color: var(--color-light);
		--btn-font-size: var(--step--2);

		position: relative;
		overflow: hidden;
		display: inline-flex;
		gap: var(--button-gutter);
		align-items: center;
		justify-content: center;
		border: none;
		cursor: pointer;
		background: var(--button-bg);
		color: var(--button-text);
		border-radius: var(--soft-edges);
		padding: var(--button-y-padding) var(--button-x-padding);
		font-size: var(--btn-font-size);
		text-transform: uppercase;
		text-decoration: none;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		will-change: transform;
		font-weight: normal;

		/*** just icon btn ***/

		&.btn-icon {
			--button-x-padding: 0.5em;
			--button-y-padding: 0.5em;
			--btn-font-size: var(--step-2);
			aspect-ratio: 1/1;
		}

		i {
			transform: scale(1.9);
		}

		&:active {
			transform: scale(99%);
		}

		.btn-inner {
			z-index: 1;
			display: block;
			position: relative;
			will-change: transform;
			font-family: var(--font-button);
			letter-spacing: var(--letterspacing-loose);
			font-weight: var(--font-medium);
		}
	}

	/* Only apply hover animations if they are actually not supported */
	@media (hover: hover) and (pointer: fine) {
		.btn,
		.btn-inner {
			transition: transform 0.5s var(--transition-alt);
		}

		/* Fake a duplicate text element using text shadow without blur  */
		/* We save the distance in a variable for easy use in the CSS animation */
		.btn-inner {
			--text-duplicate-distance: 3em;
			text-shadow: 0px var(--text-duplicate-distance) currentColor;
		}

		/* Scale down the button and rotate it slightly */
		.btn:hover {
			transform: scale(0.975);
		}

		/* Move up the text span to reveal its text-shadow */
		.btn:hover .btn-inner {
			transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
		}

		/* When hovering a card, animate the contained button */
		a.card:hover .btn {
			transform: scale(0.975);
		}

		a.card:hover .btn .btn-inner {
			transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
		}

		/* Prevent re-triggering animation when hovering the button itself inside a card */
		a.card .btn:hover {
			transform: scale(0.975);
		}

		a.card .btn:hover .btn-inner {
			transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
		}
	}

	/* Variant exceptions */

	.btn.btn-light {
		--button-bg: var(--color-light);
		--button-text: var(--color-dark);
		--focus-color: var(--color-light);
	}

	/* LINKS */

	.underline-link {
		color: inherit;
		position: relative;
		white-space: nowrap;
		overflow-x: clip;
		overflow-clip-margin: calc(var(--underline-link-height) * 3);
		display: block;

		&::after,
		&::before {
			content: '';
			display: inline-block;
			position: absolute;
			width: 100%;
			height: var(--underline-link-height);
			background: currentColor;
			top: auto;
			bottom: var(--underline-link-offset);
			left: 0;
			pointer-events: none;
		}

		&::before {
			transform-origin: 0% 50%;
			transform: scale3d(0, 1, 1);
			transition: transform 0.5s var(--transition-alt);
			width: 200%;
			right: 0;
			left: auto;
		}

		&::after {
			transition: transform 0.5s var(--transition-alt);
			transform-origin: 100% 50%;
		}

		&:hover::before {
			transform: scale3d(1, 1, 1);
		}

		&:hover::after {
			transform: scale3d(0, 1, 1);
		}
	}
	/*** underline link - no starting underline ***/

	.underline-link-alt {
		text-decoration: none;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			bottom: var(--underline-link-offset);
			left: 0;
			width: 100%;
			height: var(--underline-link-height);
			background-color: currentColor;
			transition: transform 0.5s var(--transition-alt);
			transform-origin: right;
			transform: scaleX(0) rotate(0.001deg);
		}
	}

	@media (hover: hover) and (pointer: fine) {
		[data-hover]:hover .underline-link-alt::before,
		.underline-link-alt:hover::before {
			transform-origin: left;
			transform: scaleX(1) rotate(0.001deg);
		}
	}

	/*** 
	
	CARDS
	
	***/

	/* Layouts are completely controlled by the layout compositions, flow and cluster. All we do in this component is configure their spacing and the visual appearance of links. */

	.nav {
		--flow-space: var(--space-m);
		--gutter: var(--space-m) var(--space-l);

		line-height: var(--leading-flat);
	}

	/* The default behaviour for links is to have an underline. We remove that only if the item isn't being hovered or is the current active page */

	.nav a:not(:hover):not([aria-current='page']) {
		text-decoration: none;
	}

	.prose {
		--flow-space: var(--space-l);
	}

	.prose :is(h1, h2, h3) {
		/* Allow words to break by default. Great for small viewports */
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	.prose :is(p, li, dl, figcaption, blockquote) {
		max-width: 60ch;
		text-wrap: pretty;
	}

	/* Heading flow for elements that follow them */

	.prose :is(h1, h2, h3, h4) + *:not([class]) {
		--flow-space: var(--space-m);
	}

	/* Add more space on and around figures and tables */

	.prose :is(figure, table),
	.prose :is(figure, table) + * {
		--flow-space: var(--space-2xl);
	}

	/* Add more space to headings on block start */

	.prose * + :is(h1, .h1, .jumbo-text, h2, h3, h4):not([class]) {
		--flow-space: var(--space-xl);
	}

	.prose :is(ul, ol):not([class]) li + li,
	.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
		--flow-space: var(--space-2xs);
	}

	.prose hr {
		--flow-space: var(--space-2xl);
	}

	.prose :is(img, picture, video) {
		border: var(--stroke-solid);
	}

	@media (min-width: 760px) {
		.prose :is(h1, .h1, .jumbo-text, h2, h3) {
			overflow-wrap: unset;
			-webkit-hyphens: unset;
			-ms-hyphens: unset;
			hyphens: unset;
		}
	}

	/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter, var(--space-m));
		justify-content: var(--cluster-horizontal-alignment, flex-start);
		align-items: var(--cluster-vertical-alignment, center);
	}

	/* 
	Utopia Grid 
	Utilities 
	*/
	.u-container {
		max-width: var(--grid-max-width);
		padding-inline: var(--grid-gutter);
		margin-inline: auto;
	}

	.u-grid {
		display: grid;
		gap: var(--grid-gutter);
		grid-template-columns: repeat(var(--grid-columns), 1fr);
	}

	.grid-col-1 {
		grid-column: 1 / span var(--grid-span);
	}

	.grid-col-2 {
		grid-column: 2 / span var(--grid-span);
	}

	.grid-col-3 {
		grid-column: 3 / span var(--grid-span);
	}

	.grid-col-4 {
		grid-column: 4 / span var(--grid-span);
	}

	.grid-col-5 {
		grid-column: 5 / span var(--grid-span);
	}

	.grid-col-6 {
		grid-column: 6 / span var(--grid-span);
	}

	.grid-col-7 {
		grid-column: 7 / span var(--grid-span);
	}

	.grid-col-8 {
		grid-column: 8 / span var(--grid-span);
	}

	.grid-col-9 {
		grid-column: 9 / span var(--grid-span);
	}

	.grid-col-10 {
		grid-column: 10 / span var(--grid-span);
	}

	.grid-col-11 {
		grid-column: 11 / span var(--grid-span);
	}

	.grid-col-12 {
		grid-column: 12 / span var(--grid-span);
	}

	.span-1 {
		--grid-span: 1;
	}

	.span-2 {
		--grid-span: 2;
	}

	.span-3 {
		--grid-span: 3;
	}

	.span-4 {
		--grid-span: 4;
	}

	.span-5 {
		--grid-span: 5;
	}

	.span-6 {
		--grid-span: 6;
	}

	.span-7 {
		--grid-span: 7;
	}

	.span-8 {
		--grid-span: 8;
	}

	.span-9 {
		--grid-span: 9;
	}

	.span-10 {
		--grid-span: 10;
	}

	.span-11 {
		--grid-span: 11;
	}

	.span-12 {
		--grid-span: 12;
	}

	/* 
AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes
*/

	.auto-grid {
		display: grid;
		grid-gap: var(--gutter, var(--space-s-l));
	}

	@supports (width: min(var(--device-min-width), 100%)) {
		.auto-grid {
			grid-template-columns: repeat(auto-fit, minmax(min(var(--device-min-width), 100%), 1fr));
		}
	}

	.cover {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-block-size: calc(100dvh - 5rem);
	}

	/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/ 
*/

	.flow > * + * {
		-webkit-margin-before: var(--flow-space, 1em);
		margin-block-start: var(--flow-space, 1em);
	}

	.flow-space-gutter {
		--flow-space: var(--gutter);
	}

	.flow-space-3xs {
		--flow-space: var(--space-3xs);
	}

	.flow-space-2xs {
		--flow-space: var(--space-2xs);
	}

	.flow-space-xs {
		--flow-space: var(--space-xs);
	}

	.flow-space-s {
		--flow-space: var(--space-s);
	}

	.flow-space-s-m {
		--flow-space: var(--space-s-m);
	}

	.flow-space-m {
		--flow-space: var(--space-m);
	}

	.flow-space-m-l {
		--flow-space: var(--space-m-l);
	}

	.flow-space-l {
		--flow-space: var(--space-l);
	}

	.flow-space-l-xl {
		--flow-space: var(--space-l-xl);
	}

	.flow-space-xl {
		--flow-space: var(--space-xl);
	}

	.flow-space-xl-2xl {
		--flow-space: var(--space-xl-2xl);
	}

	.flow-space-2xl {
		--flow-space: var(--space-2xl);
	}

	.flow-space-2xl-3xl {
		--flow-space: var(--space-2xl-3xl);
	}

	.flow-space-3xl {
		--flow-space: var(--space-3xl);
	}

	.region-space-3xl-4xl {
		--region-space: var(--space-3xl-4xl);
	}

	/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

	.grid {
		display: grid;
		grid-template-columns: repeat(
			var(--grid-placement, auto-fill),
			minmax(var(--grid-min-item-size, 16rem), 1fr)
		);
		gap: var(--gutter, var(--space-l));
	}

	/* A split 50/50 layout */

	.grid[data-layout='50-50'] {
		--grid-placement: auto-fit;
		--grid-min-item-size: clamp(16rem, 50vw, 33rem);
	}

	/* Three column grid layout */

	.grid[data-layout='thirds'] {
		--grid-placement: auto-fit;
		--grid-min-item-size: clamp(16rem, 33%, 20rem);
	}

	/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

	.repel {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: var(--repel-vertical-alignment, center);
		gap: var(--gutter, var(--space-m));
	}

	.repel[data-nowrap] {
		flex-wrap: nowrap;
	}

	/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
 --gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

	.sidebar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter, var(--space-s-l));
	}

	.sidebar:not([data-direction]) > :first-child {
		flex-basis: var(--sidebar-target-width, 20rem);
		flex-grow: 1;
	}

	.sidebar:not([data-direction]) > :last-child {
		flex-basis: 0;
		flex-grow: 999;
		min-width: var(--sidebar-content-min-width, 50%);
	}

	.sidebar[data-reversed] {
		flex-direction: row-reverse;
	}

	.sidebar[data-direction='rtl'] > :last-child {
		flex-basis: var(--sidebar-target-width, 20rem);
		flex-grow: 1;
	}

	.sidebar[data-direction='rtl'] > :first-child {
		flex-basis: 0;
		flex-grow: 999;
		min-width: var(--sidebar-content-min-width, 50%);
	}

	/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

	.switcher {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter, var(--space-l));
		align-items: var(--switcher-vertical-alignment, flex-start);
	}

	.switcher > * {
		flex-grow: 1;
		flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
	}

	/* Max 2 items,
so anything greater than 2 is ful width */

	.switcher > :nth-child(n + 3) {
		flex-basis: 100%;
	}

	/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

	.wrapper {
		margin-inline: auto;
		max-width: var(--grid-max-width);
		padding-inline: var(--grid-gutter);
		position: relative;
	}

	.indent {
		-webkit-border-start: var(--indent-size, var(--space-xs-l)) solid var(--indent-color, currentColor);
		border-inline-start: var(--indent-size, var(--space-xs-l)) solid var(--indent-color, currentColor);
	}

	/*
VIMEO LIGHTBOX STYLES
For vimeo lightbox component
*/

	.vimeo-lightbox {
		z-index: 99999;
		pointer-events: none;
		justify-content: center;
		align-items: center;
		padding: 5vw;
		display: flex;
		position: fixed;
		inset: 0;
		overflow: hidden;
	}

	.vimeo-lightbox__calc {
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		display: flex;
		position: relative;

		@media screen and (max-width: 932px) {
			z-index: 9999999;
		}
	}

	.vimeo-lightbox__calc-wrap {
		width: 100%;
		position: relative;
	}

	/* Cover */
	.vimeo-lightbox[data-vimeo-update-size='cover'] .vimeo-lightbox__calc-wrap {
		height: 100%;
	}

	.vimeo-lightbox[data-vimeo-update-size='cover'] [data-vimeo-lightbox-player] {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		height: 100%;
		min-height: 100%;
		max-height: 100%;
	}

	.vimeo-lightbox__player {
		pointer-events: auto;
		color: var(--color-light);
		isolation: isolate;
		background-color: var(--color-dark);
		border-radius: 1em;
		justify-content: center;
		align-items: center;
		width: 100%;
		display: flex;
		position: relative;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.625, 0.05, 0, 1);
		opacity: 0;
		visibility: hidden;
		transform: scale(0.9) rotate(0.001deg) translateX(0);
	}

	.vimeo-lightbox[data-vimeo-activated='true'] .vimeo-lightbox__player {
		opacity: 1;
		visibility: visible;
		transform: scale(1) rotate(0.001deg) translateX(0);

		@media screen and (max-width: 932px) {
			.vimeo-lightbox__placeholder,
			.vimeo-lightbox__dark,
			.vimeo-lightbox__play,
			.vimeo-lightbox__pause,
			.vimeo-lightbox__interface,
			.vimeo-lightbox__loading {
				display: none !important;
			}
		}
	}

	.vimeo-lightbox__before {
		padding-top: 62.5%;
		pointer-events: none;
	}

	/* Dark BG */
	.vimeo-lightbox__bg {
		pointer-events: auto;
		background-color: var(--color-dark);
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.3s cubic-bezier(0.625, 0.05, 0, 1);
		opacity: 0;
		visibility: hidden;

		.vimeo-lightbox__loading-svg {
			width: 5em;
			height: 5em;
			aspect-ratio: 1/1;
		}
	}

	.vimeo-lightbox[data-vimeo-activated='loading'] .vimeo-lightbox__bg,
	.vimeo-lightbox[data-vimeo-activated='true'] .vimeo-lightbox__bg {
		opacity: 1;
		visibility: visible;
	}

	/* Close Button */
	.vimeo-lightbox__close {
		z-index: 600;
		pointer-events: auto;
		cursor: pointer;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		width: 3em;
		height: 3em;
		display: flex;
		position: absolute;
		top: 2.5vw;
		right: 2.5vw;
		transition: all 0.5s cubic-bezier(0.625, 0.05, 0, 1);
		opacity: 0;
		visibility: hidden;
	}

	.vimeo-lightbox[data-vimeo-activated='true'] .vimeo-lightbox__close {
		opacity: 1;
		visibility: visible;
	}

	.vimeo-lightbox__close-bar {
		background-color: currentColor;
		width: 1em;
		height: 0.125em;
		position: absolute;
		transform: rotate(-45deg);
	}

	.vimeo-lightbox__close-bar.is--duplicate {
		transform: rotate(45deg);
	}

	.vimeo-lightbox__iframe {
		pointer-events: none;
		width: 100%;
		height: 100%;
		position: absolute;

		@media screen and (max-width: 932px) {
			pointer-events: auto;
			z-index: 9999;
		}
	}

	/* Loading */
	.vimeo-lightbox__loading {
		pointer-events: none;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		transition: opacity 0.3s linear;
		display: flex;
		position: absolute;
		opacity: 0;

		img {
			width: 5em;
			height: 5em;
			aspect-ratio: 1/1;
		}
	}

	.vimeo-lightbox[data-vimeo-playing='true'] .vimeo-lightbox__loading {
		opacity: 1;
	}

	.vimeo-lightbox[data-vimeo-playing='true'][data-vimeo-loaded='true'] .vimeo-lightbox__loading {
		opacity: 0;
	}

	/* Dark (Overlay) */
	.vimeo-lightbox__dark {
		opacity: 0.5;
		pointer-events: none;
		background-color: var(--color-dark);
		width: 100%;
		height: 100%;
		transition: opacity 0.3s linear;
		position: absolute;
	}

	.vimeo-lightbox[data-vimeo-playing='false'] .vimeo-lightbox__dark {
		opacity: 0.33;
	}

	.vimeo-lightbox[data-vimeo-activated='false'][data-vimeo-playing='false'] .vimeo-lightbox__dark {
		opacity: 0;
	}

	.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-loaded='true'] .vimeo-lightbox__dark {
		opacity: 0;
	}

	@media (hover: hover) and (pointer: fine) {
		.vimeo-lightbox[data-vimeo-hover='true']:hover .vimeo-lightbox__dark {
			opacity: 0.33 !important;
		}
	}

	/* Placeholder */
	.vimeo-lightbox__placeholder {
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%;
		height: 100%;
		transition: opacity 0.3s linear;
		display: block;
		position: absolute;
	}

	.vimeo-lightbox[data-vimeo-loaded='true'] .vimeo-lightbox__placeholder {
		opacity: 0;
	}

	.vimeo-lightbox__play,
	.vimeo-lightbox__pause {
		cursor: pointer;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
	}

	.vimeo-lightbox__btn {
		-webkit-backdrop-filter: blur(1em);
		backdrop-filter: blur(1em);
		background-color: #64646433;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		width: 6em;
		height: 6em;
		transition: opacity 0.3s linear;
		display: flex;
		position: relative;
	}

	.vimeo-lightbox__btn-play-svg {
		width: 40%;
	}

	.vimeo-lightbox__btn-pause-svg {
		width: 50%;
	}

	/* Pause */
	.vimeo-lightbox .vimeo-lightbox__pause {
		display: none;
	}

	.vimeo-lightbox[data-vimeo-playing='true'] .vimeo-lightbox__pause {
		display: flex;
	}

	.vimeo-lightbox .vimeo-lightbox__pause .vimeo-lightbox__btn {
		opacity: 0;
	}

	.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-playing='false']
		.vimeo-lightbox__pause
		.vimeo-lightbox__btn,
	.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-hover='true']:hover
		.vimeo-lightbox__pause
		.vimeo-lightbox__btn {
		opacity: 1;
	}

	@media (hover: none) and (pointer: coarse) {
		.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-playing='true']
			.vimeo-lightbox__pause
			.vimeo-lightbox__btn {
			opacity: 0 !important;
		}
	}

	/* Play */
	.vimeo-lightbox[data-vimeo-playing='true'] .vimeo-lightbox__play {
		opacity: 0;
	}

	/* Interface - Variables */
	.vimeo-lightbox {
		--timeline-rounded-corners: 1.5em;
		--timeline-dot-height: 0.75em;
		--timeline-dot-color: #ffffff;
		--progress-bg: rgba(239, 238, 236, 0.2);
		--progress-fill-bg: #ffffff;
		--progress-height: 0.2em;
	}

	.vimeo-lightbox__interface {
		pointer-events: none;
		flex-flow: column;
		justify-content: flex-end;
		align-items: stretch;
		width: 100%;
		height: 100%;
		padding: min(2em, 4vw);
		transition-property: opacity;
		transition-duration: 0.3s;
		transition-timing-function: linear;
		display: flex;
		position: absolute;
		opacity: 0;
	}

	.vimeo-lightbox[data-vimeo-activated='false'][data-vimeo-playing='false'] .vimeo-lightbox__interface {
		opacity: 1;
	}

	.vimeo-lightbox .vimeo-lightbox__interface * {
		pointer-events: all; /* Make children of div clickable by user */
	}

	.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-playing='false'] .vimeo-lightbox__interface,
	.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-hover='true']:hover .vimeo-lightbox__interface {
		opacity: 1;
	}

	@media (hover: none) and (pointer: coarse) {
		.vimeo-lightbox[data-vimeo-activated='true'][data-vimeo-playing='true'] .vimeo-lightbox__interface {
			opacity: 0 !important;
		}
	}

	.vimeo-lightbox__interface-bottom {
		grid-column-gap: 1em;
		grid-row-gap: 1em;
		justify-content: flex-start;
		align-items: center;
		display: flex;
	}

	/* Interface - Timeline */
	.vimeo-lightbox__timeline {
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		height: 1.5em;
		display: flex;
		position: relative;
	}

	.vimeo-lightbox__timeline-input {
		pointer-events: auto;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-color: var(--color-dark);
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
	}

	.vimeo-lightbox__timeline-progress {
		vertical-align: top;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		height: var(--progress-height);
		border-radius: var(--timeline-rounded-corners);
		color: var(--progress-fill-bg);
		background-color: var(--color-dark);
		border: none;
		width: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		left: 0;
		overflow: hidden;
	}

	.vimeo-lightbox progress::-webkit-progress-bar {
		border-radius: var(--timeline-rounded-corners);
		background-color: var(--progress-bg);
		box-shadow: 0;
	}

	.vimeo-lightbox progress::-webkit-progress-value {
		background: var(--progress-fill-bg);
	}

	.vimeo-lightbox progress::-moz-progress-bar {
		border-radius: var(--timeline-rounded-corners);
		background: var(--progress-fill-bg);
		box-shadow: 0;
	}

	.vimeo-lightbox progress::-ms-fill {
		border-radius: var(--timeline-rounded-corners);
	}

	/* Interface - Range */
	.vimeo-lightbox [type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
	}

	.vimeo-lightbox [type='range']:focus {
		outline: none;
	}

	.vimeo-lightbox [type='range']::-ms-track {
		width: 100%;
		cursor: pointer;
		background-color: transparent;
		border-color: transparent;
		color: transparent;
	}

	.vimeo-lightbox [type='range']::-webkit-slider-runnable-track {
		width: 100%;
		height: var(--progress-height);
		cursor: pointer;
		background-color: var(--progress-bg);
		border-radius: var(--timeline-rounded-corners);
		background-color: transparent;
		border-color: transparent;
		color: transparent;
	}

	.vimeo-lightbox [type='range']::-webkit-slider-thumb {
		box-shadow: 0;
		height: var(--timeline-dot-height);
		width: var(--timeline-dot-height);
		border-radius: var(--timeline-rounded-corners);
		background-color: var(--timeline-dot-color);
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: calc((var(--progress-height) / 2) - (var(--timeline-dot-height) / 2));
	}

	.vimeo-lightbox [type='range']::-webkit-slider-runnable-track,
	.vimeo-lightbox [type='range']:focus::-webkit-slider-runnable-track {
		background-color: transparent;
		border-color: transparent;
		color: transparent;
	}

	.vimeo-lightbox [type='range']::-moz-range-track {
		width: 100%;
		height: var(--progress-height);
		cursor: pointer;
		background: var(--progress-bg);
		border-radius: 0;
		border: 0;
		border-radius: var(--timeline-rounded-corners);
		overflow: hidden;
		opacity: 1 !important;
	}

	.vimeo-lightbox [type='range']::-moz-range-thumb {
		box-shadow: 0;
		border: 0;
		height: var(--timeline-dot-height);
		width: var(--timeline-dot-height);
		border-radius: var(--timeline-rounded-corners);
		background: var(--timeline-dot-color);
		cursor: pointer;
		box-shadow: 0;
	}

	/* Interface - Duration */
	.vimeo-lightbox__duration {
		flex-shrink: 0;
		width: 2.25em;
	}

	.vimeo-lightbox__duration-span {
		text-align: center;
		white-space: nowrap;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		width: 100%;
		display: block;
	}

	/* Interface - Mute */
	.vimeo-lightbox__mute {
		cursor: pointer;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 1.5em;
		height: 1.5em;
		display: flex;
		position: relative;
	}

	.vimeo-lightbox__volume-up-svg {
		width: 100%;
		position: absolute;
	}

	.vimeo-lightbox__volume-mute-svg {
		width: 100%;
		position: absolute;
	}

	.vimeo-lightbox .vimeo-lightbox__mute svg:nth-child(2),
	.vimeo-lightbox[data-vimeo-muted='true'] .vimeo-lightbox__mute svg:nth-child(1) {
		display: none;
	}

	.vimeo-lightbox .vimeo-lightbox__mute svg:nth-child(1),
	.vimeo-lightbox[data-vimeo-muted='true'] .vimeo-lightbox__mute svg:nth-child(2) {
		display: block;
	}

	/* Interface - Fullscreen */
	.vimeo-lightbox__fullscreen {
		cursor: pointer;
		justify-content: center;
		align-items: center;
		width: 1.5em;
		height: 1.5em;
		display: flex;
		position: relative;
	}

	.vimeo-lightbox__fullscreen-scale-svg {
		width: 100%;
		position: absolute;
	}

	.vimeo-lightbox__fullscreen-shrink-svg {
		width: 100%;
		position: absolute;
	}

	.vimeo-lightbox .vimeo-lightbox__fullscreen svg:nth-child(2),
	.vimeo-lightbox[data-vimeo-fullscreen='true'] .vimeo-lightbox__fullscreen svg:nth-child(1) {
		display: none;
	}

	.vimeo-lightbox .vimeo-lightbox__fullscreen svg:nth-child(1),
	.vimeo-lightbox[data-vimeo-fullscreen='true'] .vimeo-lightbox__fullscreen svg:nth-child(2) {
		display: block;
	}

	/*
MAIN CONTENT
Padding top to offset fixed header
*/

	@-webkit-keyframes noise {
		0% {
			transform: translate3d(0, 9rem, 0);
		}

		10% {
			transform: translate3d(-1rem, -4rem, 0);
		}

		20% {
			transform: translate3d(-8rem, 2rem, 0);
		}

		30% {
			transform: translate3d(9rem, -9rem, 0);
		}

		40% {
			transform: translate3d(-2rem, 7rem, 0);
		}

		50% {
			transform: translate3d(-9rem, -4rem, 0);
		}

		60% {
			transform: translate3d(2rem, 6rem, 0);
		}

		70% {
			transform: translate3d(7rem, -8rem, 0);
		}

		80% {
			transform: translate3d(-9rem, 1rem, 0);
		}

		90% {
			transform: translate3d(6rem, -5rem, 0);
		}

		to {
			transform: translate3d(-7rem, 0, 0);
		}
	}

	@keyframes noise {
		0% {
			transform: translate3d(0, 9rem, 0);
		}

		10% {
			transform: translate3d(-1rem, -4rem, 0);
		}

		20% {
			transform: translate3d(-8rem, 2rem, 0);
		}

		30% {
			transform: translate3d(9rem, -9rem, 0);
		}

		40% {
			transform: translate3d(-2rem, 7rem, 0);
		}

		50% {
			transform: translate3d(-9rem, -4rem, 0);
		}

		60% {
			transform: translate3d(2rem, 6rem, 0);
		}

		70% {
			transform: translate3d(7rem, -8rem, 0);
		}

		80% {
			transform: translate3d(-9rem, 1rem, 0);
		}

		90% {
			transform: translate3d(6rem, -5rem, 0);
		}

		to {
			transform: translate3d(-7rem, 0, 0);
		}
	}

	#main-content {
		padding-top: 5rem;
		position: relative;
		overflow: hidden;
		border-bottom: 1px solid hsl(0deg 0% 50% / 30%);

		&:after {
			position: absolute;
			top: -10rem;
			left: -10rem;
			width: calc(100% + 20rem);
			height: calc(100% + 20rem);
			-webkit-animation: noise 1s infinite;
			animation: noise 1s infinite;
			background-image: url(/assets/images/noise.png);
			background-position: 50%;
			content: '';
			will-change: transform;
			pointer-events: none;
			z-index: 1;
		}
	}

	.u-section {
		padding-block: var(--space-2xl-3xl);
	}

	.bg-light {
		background: var(--color-light);
		color: var(--color-dark);
	}

	.bg-white {
		background: var(--color-white);
		color: var(--color-dark);
	}
}