/** brand */

@view-transition {
	navigation: auto;
	--yt: https://youtu.be/quvE1uu1f_I;
}

#page-title {
	view-transition-name: titulus;
}
::view-transition-group(titulus) {
	animation-duration: 350ms;
}
::view-transition-old(titulus) {
}
::view-transition-new(titulus) {
}


.page-title,
.main-title,
.section-title {
	color: var(--color-title);
}

footer :is([class*="-title"]),
.dialog-title {
	color: var(--h4-color);
}

:is(b, strong) {
	/* font-family: var(--font-display); */
	font-weight: var(--font-weight-semibold);
}

[id=skip-links]:focus-within *:focus, 
[id=skip-links]:focus-within *:hover {
	all: unset;
	color: var(--compl-400);
}

.site-bar,
.page-title {
	font-size: var(--sizefl-7);
}

.site-bar {
	line-height: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.site-logo {
	object-fit: cover;
	object-position: center;
	height: var(--site-bar-height);
	width: auto;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #fff);
}

/* fancy multi-columns */
.layout {
	&:where(.cols-2, .cols-3, .cols-4) {
		--spacing: var(--sizefl-4);
		gap: var(--spacing);
		border-radius: 5px;
		contain: paint;
		isolation: isolate;
		grid-template-columns: [L] repeat(var(--deck-items, 2), 1fr) [R];
		&::before {
			content:'';
			position: absolute;
			inset: 0;
			background-image: var(--hero-image);
			background-position: var(--hero-pos, center center);
			background-size: cover;
			background-repeat: no-repeat;
			filter: blur(5px);
		}
		.col-wrapper {
			padding-block: var(--spacing);
		}
	}

	&[data-cover] {
		padding: var(--spacing);
		.col-wrapper {
			padding: var(--spacing);
		}
	}

	/* @modifier */
	&:is([class*="cols-"]).block-center .col-wrapper {
		place-self: center start;
	}

	&.m-pull-i:is([class*="cols-"]) {
		--spacing: 0;
	}

	&[data-teasers],
	&[data-cards] {
		article:not(:last-child):not(:only-child) {
			margin-bottom: var(--spacing);
		}
	}
}

@media (min-width: 36em) {
	.layout:is(.cols-2, .cols-3, .cols-4) {
		padding: var(--spacing);
	}
}

@media (min-width: 58em) {
	.layout:is(.cols-2, .cols-3, .cols-4) {
		grid-template-columns: repeat(var(--deck-items), 1fr);
	}
}

.card-deck:has(.m_card) {
	gap: var(--spacer);
	grid-template-areas: unset;
	margin-block: 0;
	border-radius: 6px;
	background-size: cover;
	&[data-bgimage] {
		--border-width: 2px;
		--shadow-shade: color(from hsl(var(--hsl, 0 0 0)) srgb r g b / 0.6);
		isolation: isolate;
		padding: var(--gutter);
		&::before {
			content: '';
			position: absolute;
			inset: -.5rem;
			background: inherit;
			filter: blur(8px) opacity(0.35);
			z-index: -1;
		}
	}
}

h1, .h1 {
	color: var(--color-title, var(--h1-color));
}
h2, .h2,
h3, .h3 {
	color: var(--color-title, var(--h2-color));
}
h4, .h4,
h5, .h5,
h6, .h6 {
	color: var(--color-title, var(--h4-color));
}

figure.-hero .card-title,
:is(section, article, header) :is(h1, h2) {
	text-transform: uppercase;
	font-weight: var(--font-weight-light);
	font-stretch: condensed;
	> :is(b, strong) {
		font-weight: var(--font-weight-normal);
	}
}

h1,.h1, h2,.h2, h3,.h3,
h4,.h4, h5,.h5, h6,.h6 {
	font-weight: var(--font-weight-normal);
	font-stretch: condensed;
	max-width: 72ch;
	> :is(b, strong) {
		font-weight: var(--font-weight-semibold);
		/* font-stretch: condensed; */
	}
}

:is(h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6) :is(i, em) {
	font-style: inherit;
}

.-kontur {
	outline: var(--outline-width) solid var(--outline-color);
}


a[href^="https://www.instagram.com/"] {
	--logo: url(/assets/images/Instagram_Logo.svg);
}
a[href^="https://bsky.app/"] {
	--logo: url(/assets/images/Bluesky_Logo.svg);
	&::before {scale:.9}
}
a[href^="https://www.facebook.com/"] {
	--logo: url(/assets/images/Facebook_Logo.svg);
	&::before {scale:.9}
}
a[href^="https://discord.gg/"] {
	--logo: url(/assets/images/Discord_Logo.svg);
}

/* social media icon module */
#nav-socials {
	display: block;
}
.social-media-icons {
	display: contents;
	> p {
		font-size: 1rem;
		line-height: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	:any-link {
		display: grid;
		grid-template-columns: 45px 1fr;
		grid-template-areas: "img txt";
		align-items: center;
	}
	:is(em, strong) {
		left: -100vw;
		position: absolute;
		max-width: 1px;
		max-height: 1px;
		padding: 0;
		overflow: hidden;
		border: none;
	}
	:any-link::before {
		grid-area: img;
		content: '';
		width: 45px;
		height: 45px;
		background-image: var(--logo);
		background-size: 45px 45px;
		filter: saturate(0) sepia(1) hue-rotate(140deg);
		mix-blend-mode: multiply;
	}
	:any-link:hover::before {
		filter: none;
	}
}


/* vars.fonts */
:root {
	--font-root: 14px;

	@media (width >= 42em), (pointer:coarse) {
		--font-root: 16px;
	}
	@media (width >= 64em) {
		--font-root: 18px;
	}

	--font-size: var(--font-root, 1rem);
	--font-body: system-ui, "Segoe UI", Arial, "Helvetica Neue", Ubuntu, Roboto, Oxygen, "Droid Sans", "Liberation Sans", "Open Sans", sans-serif, var(--font-emoji);
	--font-title: 'Bahnschrift', system-ui, "Segoe UI", Arial, "Helvetica Neue", Ubuntu, Roboto, Oxygen, "Droid Sans", "Liberation Sans", "Open Sans", sans-serif, var(--font-emoji);
	--font-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji";
	--font-display: var(--font-title);
	--font-mono: ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Ubuntu Monospace", "Noto Mono", "Roboto Mono", "Oxygen Mono", "Droid Sans Mono", "Source Code Pro", "Liberation Mono", monospace, var(--font-emoji);
	--font-weight: var(--font-weight-normal);

	--font-size-00: .75rem; /* 12	*/
	--font-size-0: 0.875rem; /* 14 */
	--font-size-1: 1.0rem; /* 16px - root-size	*/
	--font-size-2: 1.25rem; /* 20 */
	--font-size-3: 1.5rem; /* 24 */
	--font-size-4: 2.0rem; /* 32 */
	--font-size-5: 2.5rem; /* 40 */
	--font-size-6: 3.0rem; /* 48 */
	--font-size-7: 3.5rem; /* 52 */
	--font-size-8: 4rem;
	--font-size-mono: var(--font-size-0);

	--font-weight-thin: 100;
	--font-weight-extralight: 200;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-strong: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	--device-xxs: 23.25em;
	--device-xs: 30em;
	--device-sm: 36em;
	--device-smd: 40em;
	--device-md: 50em;
	--device-lg: 64em;
	--device-xl: 80em;
	--device-xxl: 90em;
	--device-hd: 120em;

/* props.sizes */
	--size-000: -.5rem;
	--size-00: -.25rem;
	--size-0: .25rem;
	--size-1: .5rem;
	--size-2: .625rem;
	--size-3: 1rem; /* 16px - $font-root-size	*/
	--size-4: 1.25rem; /* 20 */
	--size-5: 1.5rem; /* 24 */
	--size-6: 1.625rem; /* 26 */
	--size-7: 2rem; /* 32 */
	--size-8: 3.25rem; /* 52 */
	--size-9: 4rem;
	--size-10: 5rem;

	--sizem-1: .25em;
	--sizem-2: .625em;
	--sizem-3: 1em;
	--sizem-4: 1.25em;
	--sizem-5: 1.5em;
	--sizem-6: 1.625em;
	--sizem-7: 2em;
	--sizem-8: 3.25em;
	--sizem-9: 4em;
	--sizem-10: 5em;

	--sizex-1: .25ex;
	--sizex-2: .625ex;
	--sizex-3: 1ex;
	--sizex-4: 1.5ex;
	--sizex-5: 2ex;

/* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1440,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--sizefl-1: clamp(0.690rem, 0.615rem + 0.385vw, 1rem);
	--sizefl-2: clamp(0.775rem, 0.650rem + 0.600vw, 1.2rem);
	--sizefl-3: clamp(0.875rem, 0.670rem + 0.895vw, 1.5rem);
	--sizefl-4: clamp(		1rem, 0.730rem + 1.270vw, 1.875rem);
	--sizefl-5: clamp(1.110rem, 0.750rem + 1.765vw, 2.345rem);
	--sizefl-6: clamp(1.245rem, 0.765rem + 2.405vw, 2.930rem);
	--sizefl-7: clamp(1.400rem, 0.755rem + 5.285vw, 5.575rem);
	--sizefl-8: clamp(1.575rem, 0.720rem + 5.575vw, 6.75rem);

	--font-lineheight-00: .95;
	--font-lineheight-0: 1;
	--font-lineheight-1: 1.25;
	--font-lineheight-2: 1.25;
	--font-lineheight-3: 1.25;
	--font-lineheight-4: 1.35;
	--font-lineheight-5: 1.45;

	@media (width >= 42em) {
		--font-lineheight-2: 1.375;
		--font-lineheight-3: 1.625;
		--font-lineheight-4: 1.75;
		--font-lineheight-5: 2;
	}

	--form-element-spacing-block: var(--sizex-1);
	--form-element-spacing-inline: var(--sizex-3);

	--shadow-spread: 1ex;
	--shadow-dark: 0 calc(var(--shadow-spread) / 2) var(--shadow-spread) var(--shadow-shade);
	--shadow-md: 0 0.5ex 1ex var(--shadow-shade);
	--shadow-lg: 0 1ex 3ex var(--shadow-shade);
	--shadow-xl: 0 1rem 3.5rem var(--shadow-shade);
	--border-radius: 1em;
	--border-width: 1px;
	--outline-width: calc(var(--border-width) * 2);

/* basic theme */
	--panel-background-color: var(--surface-9);
	--panel-background-color-a: color(from var(--panel-background-color) srgb r g b / 0.7);
	--panel-border-color: var(--tertiary-400);
	--border-color: var(--tertiary-400);
	--outline-color: var(--primary-400);
	--form-element-focus-color: var(--primary-400);

	--h1-color: var(--primary-300);
	--h2-color: var(--primary-300);
	--h3-color: var(--primary-300);
	--h4-color: var(--secondary-300);
	--color-title: var(--secondary-300);
	--color-surface: var(--secondary-800);

	--transition: 350ms ease-in-out;

	--spacer: var(--size-6);
	--spacer-start: var(--spacer);
	--spacer-end: var(--spacer);
	--spacer-neg: calc(-2 * var(--spacer));
	
	--spacing: var(--size-6);
	--spacing-neg: calc(-2 * var(--spacing));
	--space-inside: var(--spacing);
	--space-inside-pull: calc(-1 * var(--space-inside));
	--space-inside-start: var(--space-inside);
	--space-inside-end: var(--space-inside);

	--site-bar-height: 3rem;
	--max-content-width: min(120ch, 100vw - 2 * var(--spacing));

  --square: 1/1;
  --square-fact: 1;
  --landscape: 4/3;
  --landscape-fact: 1.333;
  --portrait: 3/4;
  --portrait-fact: 0.75;
  --widescreen: 16/9;
  --widescreen-fact: 1.778;
  --ultrawide: 1.85/1;
  --ultrawide-fact: 1.85;
  --golden: 1.618/1;
  --golden-fact: 1.618;
  --double: 2/1;
  --double-fact: 2;
}