@charset "UTF-8";
@layer oss,oss.reset,oss.enhancer,oss.properties,oss.elements;@layer oss.reset
{

	:root
	{
		font-size: 10px;
	}

	*:where(:not(iframe, canvas, dialog, img, svg, video):not(svg *, symbol *))
	{
		all: unset;
		display: revert;
	}

	*,
	*::before,
	*::after
	{
		box-sizing: border-box;
	}

	a, button
	{
		cursor: revert;
	}

	body
	{
		height: 100%;
		margin: 0;
		padding: 0;
	}

	img
	{
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		font-style: italic;
		max-width: 100%;
		shape-margin: 1rem;
	}

	ol,
	ul,
	menu
	{
		list-style: none;
	}

	table
	{
		border-collapse: collapse;
	}

	textarea
	{
		white-space: revert;
	}
	meter
	{
		-webkit-appearance: revert;
		appearance: revert;
	}

	::placeholder
	{
		color: unset;
	}

	:where([hidden])
	{
		display: none;
	}

	:where([contenteditable])
	{
		-moz-user-modify: read-write;
		-webkit-user-modify: read-write;
		-webkit-line-break: after-white-space;
		overflow-wrap: break-word;
	}

	:where([draggable="true"])
	{
		-webkit-user-drag: element;
	}
	
	/* */
	iframe
	{
		border: none;
	}

}@layer oss.enhancer
{

	p,
	li,
	h1,
	h2,
	h3,
	h4
	{
		hyphens: none;
		overflow-wrap: break-word;
	}

}@layer oss.properties
{

	:root
	{
		--color-accent: blue;
		--color-accent-contrast: #FFFFFF;
		--color-primary-background: #F7F7F7;
		--color-primary-border: #E2E2E2;
		--color-primary-foreground: #333333;

		--color-secondary-background: #FFFFFF;
		--color-secondary-border: #F2F2F2;
		--color-secondary-foreground: #333333;
	}

}
@layer oss.properties
{

	/* :::: fonts-family */
	:root 
	{}

	/* :::: fonts-size */
	:root
	{
		--font-size-xxxs: clamp(0.65536rem, -0.060894cqi + 0.679718rem, 0.601773rem);
		--font-size-xxs: clamp(0.8192rem, -0.019359cqi + 0.826944rem, 0.802164rem);
		--font-size-xs: clamp(1.024rem, 0.05146cqi + 1.003416rem, 1.069285rem);
		--font-size-s: clamp(1.28rem, 0.165178cqi + 1.213929rem, 1.425356rem);
		--font-size: clamp(1.6rem, 0.340909cqi + 1.463636rem, 1.9rem);
		--font-size-m: clamp(2rem, 0.605341cqi + 1.757864rem, 2.5327rem);
		--font-size-l: clamp(2.5rem, 0.995556cqi + 2.101778rem, 3.376089rem);
		--font-size-xl: clamp(3.125rem, 1.562871cqi + 2.499851rem, 4.500327rem);
		--font-size-xxl: clamp(3.90625rem, 2.378052cqi + 2.955029rem, 5.998936rem);
		--font-size-xxxl: clamp(4.882813rem, 3.538373cqi + 3.467463rem, 7.996581rem);
	}
	/* :::: fonts-weight */
	:root {
		--font-weight: var(--font-weight-normal);
		--font-weight-thin: 100;
		--font-weight-extraLight: 200;
		--font-weight-light: 300;
		--font-weight-normal: 400;
		--font-weight-medium: 500;
		--font-weight-semiBold: 600;
		--font-weight-bold: 700;
		--font-weight-extraBold: 800;
		--font-weight-black: 900;
	}

	@supports not(font-size: 1cqi)
	{
		:root
		{
			--font-size-xxxs: .8rem;
			--font-size-xxs: 1rem;
			--font-size-xs: 1.2rem;
			--font-size-s: 1.4rem;
			--font-size: 1.6rem;
			--font-size-m: 1.8rem;
			--font-size-l: 2rem;
			--font-size-xl: 2.4rem;
			--font-size-xxl: 2.8rem;
			--font-size-xxxl: 3.2rem;
		}
	}

}@layer oss.properties
{

	/* :::: gaps */
	:root
	{
		--gap-double-width: calc(var(--gap-width) * 2);
		--gap-double-and-half-width: calc(var(--gap-width) * 2.5);
		--gap-eighth-width: calc(var(--gap-width) / 8);
		--gap-fourfold-width: calc(var(--gap-width) * 4);
		--gap-half-and-width: calc(var(--gap-width) * 1.5);
		--gap-half-width: calc(var(--gap-width) / 2);
		--gap-quarter-width: calc(var(--gap-width) / 4);
		--gap-three-quarter-width: calc(var(--gap-width) / 4 * 3);
		--gap-threefold-width: calc(var(--gap-width) * 3);
		--gap-third-width: calc(var(--gap-width) / 3);
		--gap-two-thirds-width: calc(var(--gap-width) / 3 * 2);
		--gap-width: 1.6rem;
	}

}@layer oss.properties
{

	/* :::: ratios */
	:root
	{
		--ratio-golden: 1.6180/1;
		--ratio-golden-vertical: 1/1.6180;
		--ratio-landscape: 4/3;
		--ratio-portrait: 3/4;
		--ratio-square: 1;
		--ratio-ultrawide: 18/5;
		--ratio-widescreen: 16/9;
	}

}@layer oss.properties
{

	/* :::: site */
	:root
	{
		--site-constrained-max-width: 96rem;
		--site-constrained-padding-inline: var(--gap-width);
		--site-constrained-padding-inline_safe: max(var(--site-constrained-padding-inline),env(safe-area-inset-right),env(safe-area-inset-left));
		--site-padding-inline: max(var(--gap-width),env(safe-area-inset-right),env(safe-area-inset-left));
	}

}@layer oss.elements
{

	.œBadge
	{
		display: inline-grid;
		font-size: var(--font-size-s);
		line-height: 1;
		padding: 0;
		width: fit-content;

		&:empty
		{
			display: none;
		}

	}

	.œBadge.-notification
	{}

	.œBadge.-cartouche
	{
		align-items: center;
		border-radius: 100vw;
		display: inline-flex;
		font-size: 12px;
		font-weight: bolder;
		justify-content: center;
		min-width: 2.4rem;
	}

	@supports not (selector(&))
	{}

	@supports not (grid-template-columns: subgrid)
	{}

}

@layer oss.elements {

	.œBadge2 {
		display: inline-grid;
		font-size: var(--font-size-s);
		line-height: 1;
		padding: 0;
		width: fit-content;

		&:empty {
			display: none;
		}
	}

	.œBadge2.-notification {
		align-items: center;
		background-color: var(--color-accent);
		color: #FFFFFF;
		border: .1px solid;
		border-radius: 100vw;
		display: inline-flex;
		font-family: monospace;
		font-size: 12px;
		font-weight: bolder;
		justify-content: center;
		height: 2.4rem;
		min-width: 2.4rem;
		opacity: .8;
	}

	.œBadge2.-cartouche {
		align-items: center;
		background-color: var(--color-accent);
		color: #FFFFFF;
		border: .1px solid;
		border-radius: 100vw;
		display: inline-flex;
/*		font-family: monospace;*/
		font-size: 12px;
		font-weight: bolder;
		justify-content: center;
		height: 2.4rem;
		min-width: 2.4rem;
		opacity: .8;
	}

}@layer oss.elements
{

	.œButton
	{
		--œButton-border-color: transparent;
		--œButton-border-radius: .8rem;
		--œButton-border-width: .1rem;
		--œButton-column-gap: var(--gap-half-width);
		--œButton-color-background: ;
		--œButton-color-foreground: ;
		--œButton-min-height: ;

		align-items: center;
		background-color: var(--œButton-color-background);
		border: var(--œButton-border-width) solid var(--œButton-border-color);
		border-radius: var(--œButton-border-radius);
		color: var(--œButton-color-foreground);
		column-gap: var(--œButton-column-gap);
		display: inline-grid;
		fill: var(--œButton-color-foreground);
		font-size: var(--font-size);
		justify-items: center;
		min-height: var(--œButton-color-min-height);
		padding-block: 1ch;
		padding-inline: 2ch;

		&:has(.__leading)
		{
			grid-template-columns: auto 1fr;
		}
	}

	@supports not (selector(&))
	{
		.œButton:has(.__leading)
		{
			grid-template-columns: auto 1fr;
		}
	}

	.œButton.-primary
	{
		--œButton-color-background: var(--color-accent);
		--œButton-color-foreground: var(--color-accent-contrast);
	}
	
	.œButton.-secondary
	{
		--œButton-border-color: var(--color-accent);
		--œButton-color-foreground: var(--color-accent);
	}

}.œField
{	
	--œField-border-radius: 0;
	--œField-color-label: #646464;
	--œField-color-placeholder: #A2A2A2;
	--œField-padding-inline: var(--gap-width);

	border-radius: var(--œField-border-radius);
}

.œField.-floatingLabel
{


	display: grid;

	& input
	{
		font-size: var(--font-size);
		grid-column: 1 / -1;
		padding-block: 0.5ch;
		padding-inline: var(--œField-padding-inline);
	}

	& input::placeholder
	{
		color: var(--œField-color-placeholder);
	}

	& label
	{
		align-self: center;
		color: var(--œField-color-label);
		display: block;
		grid-column: 1 / -1;
		padding-inline: var(--œField-padding-inline);
	}


	@media (prefers-reduced-motion: reduce)
	{
		
	}

	@media (prefers-reduced-motion: no-preference)
	{
		& label
		{
			font-size: var(--font-size-s);
			font-weight: bold;
			padding-block: var(--gap-quarter-width);
		}
	}

}

@supports not(selector(&))
{
	.œField.-floatingLabel > input
	{
		font-size: var(--font-size);
		grid-column: 1 / -1;
		padding-block: 0.5ch;
		padding-inline: var(--œField-padding-inline);
	}

	.œField.-floatingLabel > input::placeholder
	{
		color: var(--œField-color-placeholder);
	}

	.œField.-floatingLabel label
	{
		align-self: center;
		color: var(--œField-color-label);
		display: block;
		grid-column: 1 / -1;
		padding-inline: var(--œField-padding-inline);
	}

	@media (prefers-reduced-motion: no-preference)
	{
		.œField.-floatingLabel label
		{
			font-size: var(--font-size-s);
			font-weight: bold;
			padding-block: var(--gap-quarter-width);
		}
	}

}@layer oss.elements
{

	.œPage
	{
		--œPage-gutter-min-width: max(var(--gap-width),max(env(safe-area-inset-left),env(safe-area-inset-right)));
		--œPage-constrained-max-width: var(--site-constrained-max-width);

		display: grid;
		font-size: var(--font-size);
		gap: 0;
		grid-template-columns: 
			[bleed-start]
				minmax(var(--œPage-gutter-min-width),1fr)
			[constrained-start]
				minmax(0, var(--œPage-constrained-max-width))
			[constrained-end]
				minmax(var(--œPage-gutter-min-width),1fr)
			[bleed-end];

		& > :not(.__cover,.__bleed)
		{
			grid-column: constrained;
		}

		& > .__cover
		{
			grid-column: bleed;
			grid-row: 1;
		}

		& > .__bleed
		{
			grid-column: bleed;
		}

	}
	
	@supports not (selector(&))
	{

		.œPage > :not(.__cover,.__bleed)
		{
			grid-column: constrained;
		}

		.œPage > .__cover
		{
			grid-column: bleed;
			grid-row: 1;
		}

		.œPage & > .__bleed
		{
			grid-column: bleed;
		}

	}

	/* workaround for named line grid */
	@supports not(selector(&))
	{
		.œPage
		{
		grid-template-columns: 
				minmax(var(--œPage-gutter-min-width),1fr)
				minmax(0, var(--œPage-constrained-max-width))
				minmax(var(--œPage-gutter-min-width),1fr)
		}

		.œPage > :not(.__cover,.__bleed)
		{
			grid-column: 2 / -2;
		}

		.œPage > .__bleed,
		.œPage > .__cover
		{
			grid-column: 1 / -1 !important;
		}


	}

}@layer oss.elements
{

	:is(ol,ul).œScroller
	{
		--œScroller-gap-width: var(--gap-width);
		--œScroller-padding-inline: var(--gap-width);
		--œScroller-padding-inline: 0;

		column-gap: var(--œScroller-gap-width);
		display: grid;
		grid: auto / auto-flow max-content;
		isolation: isolate;
		max-width: 100vw;
		overflow-x: scroll;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		padding-inline: var(--œScroller-padding-inline);
		position: relative;
		scrollbar-width: none;

		& > li
		{
			isolation: isolate;
		}

		&::-webkit-scrollbar
		{
			display: none;
		}
	}

	@media screen and (max-width: 1024px) {
		:is(ol,ul).œScroller[data-translate-x="start"] {
			padding-inline: max(var(--gap-width),max(env(safe-area-inset-left),env(safe-area-inset-right)));
		}
	}

	@media screen and (min-width: 1024px) {
		
		:is(ol,ul).œScroller[data-translate-x="start"] > li {
			transform: translateX(calc(max(1024px, 100vw)/2 - (var(--site-constrained-max-width) / 2)));
		}
	}

	@supports not (selector(&))
	{
		:is(ol,ul).œScroller > li
		{
			isolation: isolate;
		}

		:is(ol,ul).œScroller::-webkit-scrollbar
		{
			display: none;
		}
	}
}@layer oss.elements
{

	.œSectionHeader
	{
		color: var(--color-primary-foreground);
		container: œSectionbHeader / inline-size;
		display: grid;
		grid-auto-rows: min-content;

		&:has(.__leading)
		{
			grid-row: 1 / -1;
			grid-template-columns: auto 1fr;
			
			& >:not(.__Leading,.__trailing)$
			{
				grid-column-start: 2;
			}

		}

		&:has(.__trailing)
		{
			grid-template-columns: 1fr auto;

			& >:not(.__leading,.__trailing)
			{
				grid-column-end: -2;
			}

		}

		&:has(.__leading):has(.__trailing)
		{
			grid-template-columns: auto 1fr auto;
		}

		& .__eyebrow
		{
			grid-row: 1;
		}

		& .__leading 
		{
			grid-row: 1 / -1;
		}

		& .__trailing
		{
			grid-row: 1 / -1;
			justify-self:  stretch;
		}

	}

	@supports not (selector(&))
	{
		.œSectionHeader:has(.__leading)
		{
			grid-row: 1 / -1;
			grid-template-columns: auto 1fr;
		}

		.œSectionHeader:has(.__leading) > :not(.__Leading,.__trailing)
		{
			grid-column-start: 2;
		}

		.œSectionHeader:has(.__trailing)
		{
			grid-template-columns: 1fr auto;
		}

		.œSectionHeader:has(.__trailing) > :not(.__leading,.__trailing)
		{
			grid-column-end: -2;
		}

		.œSectionHeader:has(.__leading):has(.__trailing)
		{
			grid-template-columns: auto 1fr auto;
		}

		.œSectionHeader	> .__eyebrow
		{
			grid-row: 1;
		}

		.œSectionHeader .__leading 
		{
			grid-row: 1 / -1;
		}

		.œSectionHeader .__trailing
		{
			grid-row: 1 / -1;
			justify-self:  stretch;
		}

	}

}

@layer oss.elements
{
}.œView
{
	--œView-gutter-min-width: max(var(--gap-width),max(env(safe-area-inset-left),env(safe-area-inset-right)));
	--œView-constrained-max-width: var(--site-constrained-max-width);
	display: grid;
	gap: 0;
	grid-template-columns: 
		[bleed-start]
			minmax(var(--œView-gutter-min-width),1fr)
		[constrained-start]
			minmax(0, var(--œView-constrained-max-width))
		[constrained-end]
			minmax(var(--œView-gutter-min-width),1fr)
		[bleed-end];
	
	& > :not(.__bleed)
	{
		grid-column: constrained;
	}

	& > .__bleed
	{
		grid-column: bleed;
	}
}

@supports not (selector(&))
{
	.œView
	{
	grid-template-columns: 
			minmax(var(--œPage-gutter-min-width),1fr)
			minmax(0, var(--œPage-constrained-max-width))
			minmax(var(--œPage-gutter-min-width),1fr)
	}

	.œView > :not(.__bleed)
	{
		grid-column: 2 / -2;
	}

	.œView > .__bleed
	{
		grid-column: 1 / -1 !important;
	}
}


.œView.-sheet
{
	
}@layer oss.elements
{

	.œWide
	{
		--site-constrained-max-width: 96rem;
		--site-gutter-min-width: max(var(--gap-width),env(safe-area-inset-right),env(safe-area-inset-left));;
	}

	.œWide
	{

		--œView-column-gap: 0;
		--œView-constrained-column: minmax(0, var(--œView-constrained-max-width));
		--œView-constrained-max-width: var(--site-constrained-max-width);
		--œView-gutter-min-width: var(--site-gutter-min-width);
	}

	.œWide
	{
		display: grid;
		gap: 0;
		grid-template-columns:
			[bleed-start]
				minmax(var(--œView-gutter-min-width),1fr)
			[constrained-start]
				var(--œView-constrained-column)
			[constrained-end]
				minmax(var(--œView-gutter-min-width),1fr)
			[bleed-end];

		& > :not(.__bleed)
		{
			grid-column: constrained;
		}

		& > .__bleed
		{
			grid-column: bleed;
		}
	}

	@supports not (selector(&))
	{
		.œWide
		{
		}

		.œWide > :not(.__bleed)
		{
			grid-column: constrained;
		}

		.œWide > ._bleed
		{
			grid-column: bleed;
		}

	}

}