@layer layout-base {

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body > * {
	isolation: isolate;
}

* {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
ul {
	padding: 0;
	margin: 0;
}

ul {
	list-style: none;
}

address {
	font-style: normal;
}

input,
button,
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	background-color: transparent;
	border: none;
	padding: 0;
	font: inherit;
	text-align: left;
}

figure {
	padding: 0;
	margin: 0;
}

iframe,
img,
svg,
video {
	display: block;
}

label {
	cursor: pointer;
}

q {
	quotes: "«" "»";
}

fieldset {
	border: unset;
	margin: unset;
	padding: unset;
}

dd {
	margin: unset;
}

summary {
	cursor: pointer;
}
}

@layer layout-base {
@layer core {
	:root {
		/* ROOT
	*/

		/* Fallback usage */
		font-size: clamp(
			var(--font-rootSize-min, 16px),
			var(--font-rootSize-base, 16px),
			var(--font-rootSize-max, 16px)
		);

		/* Usage if round() is supported */
		font-size: clamp(
			var(--font-rootSize-min, 16px),
			round(up, var(--font-rootSize-base, 16px), 1px),
			var(--font-rootSize-max, 16px)
		);

		/* SIZES
	*/

		/* For convenience, not for usage anywhere else */
		--_font-size-25: calc(1rem * var(--font-sizeMultiplier-25, 0.25));
		--_font-size-50: calc(1rem * var(--font-sizeMultiplier-50, 0.5));
		--_font-size-100: calc(1rem * var(--font-sizeMultiplier-100, 1));
		--_font-size-150: calc(1rem * var(--font-sizeMultiplier-150, 1.5));
		--_font-size-200: calc(1rem * var(--font-sizeMultiplier-200, 2));
		--_font-size-250: calc(1rem * var(--font-sizeMultiplier-250, 2.5));
		--_font-size-300: calc(1rem * var(--font-sizeMultiplier-300, 3));
		--_font-size-350: calc(1rem * var(--font-sizeMultiplier-350, 3.5));
		--_font-size-400: calc(1rem * var(--font-sizeMultiplier-400, 4));
		--_font-size-450: calc(1rem * var(--font-sizeMultiplier-450, 4.5));
		--_font-size-500: calc(1rem * var(--font-sizeMultiplier-500, 5));

		/* Fallback usage */
		--font-size-25: var(--_font-size-25);
		--font-size-50: var(--_font-size-50);
		--font-size-100: var(--_font-size-100);
		--font-size-150: var(--_font-size-150);
		--font-size-200: var(--_font-size-200);
		--font-size-250: var(--_font-size-250);
		--font-size-300: var(--_font-size-300);
		--font-size-350: var(--_font-size-350);
		--font-size-400: var(--_font-size-400);
		--font-size-450: var(--_font-size-450);
		--font-size-500: var(--_font-size-500);

		/* Usage if round() is supported */
		--font-size-25: round(up, var(--_font-size-25), 1px);
		--font-size-50: round(up, var(--_font-size-50), 1px);
		--font-size-100: round(up, var(--_font-size-100), 1px);
		--font-size-150: round(up, var(--_font-size-150), 1px);
		--font-size-200: round(up, var(--_font-size-200), 1px);
		--font-size-250: round(up, var(--_font-size-250), 1px);
		--font-size-300: round(up, var(--_font-size-300), 1px);
		--font-size-350: round(up, var(--_font-size-350), 1px);
		--font-size-400: round(up, var(--_font-size-400), 1px);
	}
}
}

@layer layout-base {
@layer core {
	:root {
		/* For convenience, not for usage anywhere else */
		--_size-25: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-25, 0.5)
		);
		--_size-50: calc(var(--size-base, 1rem) * var(--sizeMultiplier-50, 1));
		--_size-100: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-100, 2)
		);
		--_size-200: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-200, 4)
		);
		--_size-300: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-300, 8)
		);
		--_size-400: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-400, 16)
		);
		--_size-500: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-500, 32)
		);
		--_size-600: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-600, 64)
		);
		--_size-700: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-700, 128)
		);

		/* Fallback usage */
		--size-25: var(--_size-25);
		--size-50: var(--_size-50);
		--size-100: var(--_size-100);
		--size-200: var(--_size-200);
		--size-300: var(--_size-300);
		--size-400: var(--_size-400);
		--size-500: var(--_size-500);
		--size-600: var(--_size-600);
		--size-700: var(--_size-700);

		/* Usage if round() is supported */
		--size-25: round(up, var(--_size-25), 1px);
		--size-50: round(up, var(--_size-50), 1px);
		--size-100: round(up, var(--_size-100), 1px);
		--size-200: round(up, var(--_size-200), 1px);
		--size-300: round(up, var(--_size-300), 1px);
		--size-400: round(up, var(--_size-400), 1px);
		--size-500: round(up, var(--_size-500), 1px);
		--size-600: round(up, var(--_size-600), 1px);
		--size-700: round(up, var(--_size-700), 1px);

		/* Other sizes with fallbacks */
		--size-100dvh: 100vh;
		--size-100dvh: 100dvh;
		--size-1dvh: 1vh;
		--size-1dvh: 1dvh;
		--size-100svh: 90vh;
		--size-100svh: 100svh;
		--size-1svh: 0.9vh;
		--size-1svh: 1svh;
	}
}
}

@layer layout-base {

:root {
	/* PROJECT
	*/

	--page-maxWidth: 1400px;
	--page-paddingInline: var(--layout-space-200);
	--pageHero-height: 40vh;
	--pageHero-logoSize: min(16vmax, var(--layout-space-500));
	--pageSection-gapBlock: 0px;
	--pageSection-gapInline: var(--layout-space-200);

	--borderRadius-10: 3px;
	--borderRadius-50: 0.3rem;
	--borderRadius-100: 0.4rem;

	--line-width-focus: 3px;

	--icon-lineWidth: var(--line-width-200);
	--icon-size: 1.1em;

	--color-red-100: #eb7063;
	--color-blue-100: #788fff;
	--color-gray-100: #d9d9d9;
	--color-gray-200: #eaeaea;

	--color-main-0: hsl(215, 15%, 0%);
	--color-main-100: hsl(215, 15%, 12%);
	--color-main-200: hsl(215, 15%, 27%);
	--color-main-300: hsl(210, 15%, 43%);
	--color-main-400: hsl(210, 15%, 60%);
	--color-main-700: hsl(210, 15%, 82%);
	--color-main-800: hsl(210, 15%, 92%);
	--color-main-900: hsl(210, 15%, 95%);
	--color-main-950: hsl(210, 15%, 98%);
	--color-main-1000: hsl(210, 15%, 100%);

	--color-error-50: hsl(18 100% 30%);
	--color-error-100: hsl(18 100% 40%);
	--color-error-200: hsl(18 100% 70%);
	--color-error-300: hsl(18 100% 90%);

	--color-text-100: var(--color-main-100);
	--color-text-200: var(--color-main-300);
	--color-text-300: var(--color-main-400);

	--color-focus-100: var(--color-3-200);
	--color-softHighlight-100: var(--color-main-950);

	--media-aspectRatio-wide-50: 1.14;
	--media-aspectRatio-wide-100: 1.72;
	--media-aspectRatio-wide-200: 2.5;
	--media-aspectRatio-wide-300: 3;
	--media-aspectRatio-wide-400: 3.5;
	--media-aspectRatio-wide-500: 4;
	--media-aspectRatio-tall-100: 0.75;

	/* CORE
	*/

	--font-rootSize-min: 16px;
	--font-rootSize-max: 25px;
	--font-rootSize-base: calc((0.2px + 0.1vw) * 16);

	/**/
	--font-sizeMultiplier-50: 0.8;
	--font-sizeMultiplier-100: 1;
	--font-sizeMultiplier-200: 2;
	--font-sizeMultiplier-300: 2.6;
	--font-sizeMultiplier-400: 4;
	--font-sizeMultiplier-500: 5;

	--font-weight-50: 200;
	--font-weight-100: 400;
	--font-weight-200: 600;

	--text-lineHeight-50: 1.15;
	--text-lineHeight-100: 1.3;
	--text-width-50: 40ch;
	--text-width-100: 80ch;

	--layout-space-25: var(--size-25);
	--layout-space-50: var(--size-50);
	--layout-space-100: var(--size-100);
	--layout-space-200: var(--size-200);
	--layout-space-300: var(--size-300);
	--layout-space-400: var(--size-400);
	--layout-space-500: var(--size-500);
	--layout-space-600: var(--size-600);

	--line-width-50: 1px;
	--line-width-100: 2px;
	--line-width-200: 3px;
	--line-width-300: 4px;
	--line-width-400: 5px;
	--line-width-focus: 3px;

	--ms-300: 1500ms;
	--ms-200: 600ms;
	--ms-100: 300ms;
	--ms-75: 200ms;
	--ms-50: 100ms;

	--ease-bounce-100: cubic-bezier(0.68, -0.6, 0.32, 1.6);

	--size-base: 1rem;
	--sizeMultiplier-25: 0.4;
	--sizeMultiplier-50: 0.6;
	--sizeMultiplier-100: 1;
	--sizeMultiplier-200: 1.5;
	--sizeMultiplier-300: 2.5;
	--sizeMultiplier-400: 4;
	--sizeMultiplier-500: 8;
	--sizeMultiplier-600: 16;

	--z-front: 100;
	--z-midFront: 75;
	--z-center: 50;
	--z-midBack: 25;
	--z-back: 0;
}

/*@media (width <= 1400px) {
	:root {
		--font-rootSize-multiplier: 1;
	}
}*/

/*@media (width <= 1000px) {
}*/

/*@media (width <= 600px) {
}*/
}

@layer layout-base {

:root {
	font-family: "Euclid", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Euclid";
	font-weight: 400;
	src: url("/fonts/EuclidCircularA-Regular-WebTrial.woff") format("woff");
}


@font-face {
	font-family: "Euclid";
	font-weight: 500;
	src: url("/fonts/EuclidCircularA-Medium-WebTrial.woff") format("woff");
}
}

@layer layout-base {

body {
	font-size: var(--font-size-100);
	color: var(--color-text-100);
	line-height: var(--text-lineHeight-100);
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: inherit;
}
}

@layer layout-base {
[data-as-site] {


}
}

@layer layout-base {
[data-as-page] {
	display: flex;
	flex-direction: column;
	background-color: var(--page-color-1);
	color: var(--page-color-2);
	position: relative;
}
}

@layer layout-base {


:root {
	--layout-gap-x: var(--layout-space-300);
	--layout-gap-y: var(--layout-space-300);
}


[data-as-layout] {
	--layout-col-offsetTop: var(--layout-space-400);

	--media-maxHeight: 40min;
	--media-tall-maxHeight: 50vmin;
	--media-objectPosition: bottom center;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: reapeat(2, auto);
	grid-auto-flow: dense;
	gap: var(--layout-gap-y) var(--layout-gap-x);

	> * {
		min-height: 0;
		min-width: 0;
	}
}

[data-as-layout-group] {
	display: contents;
}

[data-as-layout-group]:nth-child(odd) > * {
	grid-column: 1;
}

[data-as-layout-group]:nth-child(even) > * {
	grid-column: 2;
}

[data-as-layout-block~="offset:top"] {
	transform: translateY(calc(var(--layout-col-offsetTop) + var(--layout-gap-y)));
}


[data-as-layout-block]:has(.image) {
	align-self: end;
	justify-self: center;
}


[data-as-layout-block~="type:claim"] {
	height: fit-content;
	align-self: end;

	&:has(br) {
		transform: translateY(calc(1lh + 0.2em));
	}
}
}

@layer layout-base {
[data-as-page-sections] {
	--layout-gap-x: var(--layout-space-300);
	--layout-gap-y: var(--layout-space-300);

	display: flex;
	flex-direction: column;
	gap: var(--layout-space-300);
	margin-block: var(--layout-space-500);
	align-items: center;
	padding-inline: var(--page-paddingInline);

	section {
		width: 100%;
		max-width: var(--page-maxWidth);
	}
}
}

@layer layout-base {

[data-as-page-section] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pageSection-gapBlock) var(--pageSection-gapInline);

	padding-inline: var(--page-paddingInline);
}

@media (width <= 1000px) {
	[data-as-page-section] {
		grid-template-columns: 1fr;
	}
}
}

@layer layout-base {

[data-as-text~="50"] {
	font-size: var(--font-size-50);
	line-height: var(--text-lineHeight-100);
}

[data-as-text~="100"] {
	font-size: var(--font-size-100);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="200"] {
	font-size: var(--font-size-200);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="300"] {
	font-size: var(--font-size-300);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="400"] {
	font-size: var(--font-size-400);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="500"] {
	font-size: var(--font-size-500);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="claim"] {
	font-size: var(--font-size-300);
	line-height: var(--text-lineHeight-50);
	font-weight: 500;
	* {
		max-width: 20ch;
	}
}
}

@layer layout-base {


[data-as-button-round] {
	position: relative;

	margin: auto;
	width: fit-content;
	height: auto;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 1em;

	cursor: pointer;

	&::after {
		content: "";
		inset: 0;
		margin: auto;
		position: absolute;
		border-radius: 50%;
		border: var(--line-width-100) solid var(--buttonRound-color-outline, blue);
		background-color: var(--buttonRound-color-fill, red);
		display: block;
		z-index: 20;
	}
}


[data-as-button-round-label] {
	position: relative;
	color: var(--buttonRound-color-text, orange);
	text-transform: uppercase;
	font-weight: 500;
}
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}:root {
		--viewTransition-general-duration: 400ms;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0ms;
	}

	/*::view-transition-old(expandingButton) {
		animation: blendOut var(--viewTransition-general-duration)
			var(--viewTransition-general-duration) ease-in-out forwards;
	}*/

	::view-transition-old(page-background) {
		animation: blendOut var(--viewTransition-general-duration) ease-out
			forwards;
	}

	::view-transition-new(page-background) {
		animation: blendIn 4000ms ease-out
			forwards;
	}

	::view-transition-old(page-main) {
		animation: blendOut 0ms ease-in-out
			forwards;
	}

	::view-transition-new(page-main) {
		animation: blendIn 4000ms
			ease-in-out both;
	}

	@keyframes blendIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes blendOut {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}