@layer base, components, print;

@layer base {
	:root {
		--color-key: rgb(255, 95, 101);
		--color-accent: oklch(52% 0.105 223.128);
		--color-accent-light: oklch(71.5% 0.143 215.221);
		--color-accent-dark: oklch(30.2% 0.056 229.695);
		--color-accent-alt: #1864ab;
		--color-shade: oklch(30.2% 0.056 229.695);
		--color-shade-2: oklch(70.4% 0.04 256.788);
		--color-shade-3: oklch(92.9% 0.013 255.508);
		--color-shade-warm: var(--color-shade-3); // deprecated
		--color-text: oklch(12.9% 0.042 264.695);
		--color-bright: oklch(98.4% 0.003 247.858);

		@media (prefers-color-scheme: dark) {
			/* --color-shade: #222;
			--color-text: #fff;
			--color-shade-2: rgb(134, 146, 161);
			--color-shade-3: rgb(51, 53, 54);
			--color-shade-warm: #1c1917;
			--color-bright: rgb(51, 53, 54);

			--color-accent: #20c997;
			--color-accent-light: oklch(90.5% 0.093 164.15);
			--color-accent-dark: oklch(45.5% 0.093 164.15);
			--color-accent-alt: #1864ab; */
		}
	}


	@view-transition {
		navigation: auto;
	}

	::target-text {
		background-color: var(--color-accent);
		mix-blend-mode: difference;
	}

	* {
		box-sizing: border-box;
	}

	html,
	body,
	figure,
	input,
	button {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
		Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-size: 16px;
		margin: 0;
		padding: 0;
	}

	body {
		display: grid;
		background-color: var(--color-shade-3);
		color: var(--color-text);
	}

	/* Because :heading does not work yet, except behind flags in Firefox */
	h1, h2, h3, h4, h5, h6 {
		margin-block: 0.5em 0.75em;
		font-weight: bold;
		line-height: 1.2;
	}
	:heading {
		margin-block: 0.5em 0.75em;
		font-weight: bold;
		line-height: 1.2;
	}

	h1 {
		font-size: calc(0.0125 * 100vw + 2rem);
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	h4,
	h5,
	h6 {
		font-size: 1rem;
	}

	sup {
		line-height: 0;
	}

	a {
		color: currentColor;

		&[href^="mailto"] {
			word-break: keep-all;
			hyphens: none;
		}
	}


	blockquote {
		font-family: "Playfair Display", serif;
		font-size: 1.4rem;
		line-height: 1.333;
		font-style: normal;
		margin-block: 1.5rem 1.5rem;
		margin-inline: 0 0;
		color: var(--color-accent-dark);
		padding-block: 1rem 1rem;
		padding-inline: 2rem 2rem;
	}

	blockquote :where(footer:last-child, em:last-child, cite) {
		display: block;
		margin-top: 0.5ch;
		text-align: right;
		font-size: 1rem;
		font-style: normal;
	}

	cite,
	blockquote > p > em:last-child {
		color: var(--color-accent);

		a {
			color: currentColor;
			text-decoration: none;
			border-bottom: thin solid currentColor;
		}
	}

	blockquote::before {
		content: "\201C";
		font-size: 4rem;
		position: absolute;
		margin-block-start: -1.5rem;
		margin-inline-start: -2rem;
		color: var(--color-accent);
	}

	main iframe {
		width: 100%;
		height: auto;
		margin-block: 3rem 3rem;
		margin-inline: 0 0;
	}

	main .text {
		pre {
			font-size: 0.85rem;
			padding-block: 1rem;
			padding-inline: 1.5rem;
			line-height: 1.333;
			background-color: #f1f3f5;
			color: #1864ab;
		}

		p:first-of-type {
			font-size: 1.25rem;
			font-weight: 500;
		}

		pre,
		p img {
			margin-block: 1rem 1rem;
			margin-inline: 0 0;
		}

		code {
			word-break: break-all;
			white-space: pre-wrap;
		}

		:not(pre) code {
			color: var(--color-shade);
		}

	}

	main blockquote p {
		max-width: 100%;
		margin-block-end: 1rem;

		&:only-of-type {
			margin: 0;
		}
	}

	/* Screenreader only helper */
	.sr-only:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	button.button,
	button[type="submit"] {
		appearance: none;
		border: unset;
		display: inline-block;
	}

	.button,
	.action a {
		font-weight: bold;
		color: var(--color-key);
		text-decoration-thickness: 0.15rem;
		border-radius: 0.5rem;
	}

	li:not(:last-of-type) {
		margin-block-end: 0.5rem;
	}

	dl dt {
		text-transform: uppercase;
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0.025em;
		color: var(--color-accent);
	}

	dl dd {
		margin-inline: 0;
		margin-block-end: 1rem;

		p:first-of-type {
			margin-block-start: 0;
		}
	}

	details summary {
		cursor: pointer;
		font-weight: 500;
	}
}

@layer components {
	p + .action {
		margin-block-start: -1.5rem;
	}

	.action p a {
		position: relative;
		z-index: 10;
		font-size: 1rem;
		margin-block-end: 0.5rem;
		background-image: linear-gradient(145deg, var(--color-accent),var(--color-accent-dark));
		font-weight: 500;
		font-style: normal;
		letter-spacing: 0.025em;
		color: var(--color-bright);
		border: 0;
		min-width: 8rem;
		text-align: center;
	}

	.action p {
		position: relative;
		display: inline-block;
	}

	.site_notice {
		width: 100%;
		padding-block: 0.5rem 0.5rem;
		padding-inline: 0 0;
		text-align: center;
		font-weight: 500;
		background-color: var(--color-accent-dark);
		color: var(--color-bright);
	}

	.site_notice p {
		display: inline-block;

		&:not(:last-of-type) {
			margin-inline-end: 0.325em;
		}
	}

	.page-header-wrapper {
		width: 100%;
		margin-block: 0;
		margin-inline: auto auto;
		display: flex;
		justify-content: center;
		background-color: var(--color-shade-3);
		color: var(--color-text);
	}

	.page-header {
		display: grid;
		grid-auto-flow: row;
		gap: 0;
	}

	@media (min-width: 48em) {
		.page-header {
			gap: 1rem;
			grid-auto-flow: column;
			grid-template-columns: 3fr minmax(auto, 100%);
			padding-block: 2rem 2rem;
		}
	}

	@media (min-width: 60em) {
		.page-header {
			grid-template-columns: minmax(20rem, auto) minmax(17.5rem, 37.5rem) minmax(8rem, auto);
			max-width: 60rem;
		}
	}

	.me {
		font-size: 1.4rem;
		display: flex;
		align-items: flex-start;
		gap: 1rem;
		margin-block: 2rem 1rem;
		margin-inline: 1rem 2rem;
		padding-block: 0.15rem 0.15rem;
		padding-inline: 0 0;

		@media (min-width: 42em) {
			margin: 0;
			font-size: 2rem;
		}
	}

	.me .me_portrait {
		position: relative;
		margin: 0;
		padding: 0;
		height: 5rem;
		width: 5rem;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 50%;
	}

	.me .me_portrait::after {
		content: "";
		position: absolute;
		z-index: 0;
		top: -0.15rem;
		right: -0.15rem;
		bottom: -0.15rem;
		left: -0.15rem;
		border-radius: 50%;
		background-image: linear-gradient(105deg, var(--color-accent),var(--color-accent-dark));
		mask-image: linear-gradient(105deg, var(--color-accent), var(--color-accent-dark));
	}

	.me_portrait img {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		aspect-ratio: 1/1;
		border-radius: 50%;
	}

	@media (min-width: 48em) {
		.page-header-title {
			margin-inline-start: 0;
		}
	}

	.page-header-title a {
		display: inline;
		text-decoration: none;
		color: var(--color-text);
	}

	.page-header-title .subhead {
		display: block;
		margin-block-start: 0.5ch;
		font-size: 1.1rem;
		line-height: 1.2;
		font-weight: 500;
	}

	.navigation {
		text-align: center;
		margin-block: 0.5rem 0.75rem;
		margin-inline: 0.5rem;

		@media (min-width: 48em) {
			margin-block-end: 0;
			margin-inline-end: 0;
		}
	}

	.navigation.languages {
		position: absolute;
		right: 0;

		@media (min-width: 48em) {
			position: static;
		}
	}


	.navigation.languages ul {
		display: flex;
		justify-content: end;
		margin-inline-end: 1rem;
		gap: 0.5em;

		@media (min-width: 48em) {
			margin-inline-end: 0;
		}
	}

	.navigation-list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	@media (min-width: 48em) {
		.navigation-list {
			display: inline-flex;
			gap: 0.5rem;
		}
	}

	.navigation-list a {
		position: relative;
		padding-block: 0.5rem;
		padding-inline: 0.25rem;
		text-decoration: none;
		font-weight: 500;
		font-size: 1.1rem;
	}


	.navigation-list .social-link a {
		display: inline-block;
		padding: 0;

		svg {
			display: block;
			width: auto;
			height: 1.5rem;
			fill: var(--color-text);
		}
	}

	.navigation-list .is-active a::after {
		content: "";
		display: block;
		position: absolute;
		background-color: #ced4da;
		background-image: linear-gradient(145deg, var(--color-accent), var(--color-accent-dark));
		height: 0.1rem;
		width: calc(100% - 0.5rem);
		left: 0.25rem;
		right: 0.25rem;
		bottom: 0.375rem;
	}

	.standout {
		font-size: 1.5rem;
	}

	.standout :where(ul, ol) {
		font-size: 1.25rem;
	}

	.action a {
		position: relative;
		text-decoration: none;
	}

	.standout .action a::after {
		content: unset;
	}

	.button,
	.action a {
		display: inline-flex;
		padding-block: 0.6rem;
		padding-inline: 1.5rem;
		justify-content: center;
		color: var(--color-bright);
		background-color: var(--color-text);
		text-decoration: none;
		font-weight: normal;
		width: auto;
	}

	@media (min-width: 42em) {
		.standout .action a {
			width: auto;
		}
	}

	.standout {
		position: relative;
		display: block;
		background-color: var(--color-shade-3);
		color: var(--color-text);
		padding-inline: 1rem;
	}

	.page-header-title a {
		position: relative;
	}

	.mdash {
		display: inline-block;
		transform: scaleX(400%) translateX(50%);
		color: var(--color-bright);
		-webkit-text-fill-color: currentColor;
	}

	/* Layout standards */
	.width-small {
		max-width: 37.5rem;
		margin: 0 auto;
	}

	.width-default {
		max-width: 60rem;
		margin: 0 auto;
	}

	.width-full {
		max-width: 100%;
		margin: 0 auto;
	}

	.width-full .width-default {
		padding-left: 0;
		padding-right: 0;
	}

	@media (max-width: 60em) {
		body
		:is(.width-default, .width-grid, .width-small, .width-full .width-default) {
			padding-block: 1rem 1rem;
		}
	}

	.width-grid > div {
		grid-template-rows: auto auto;
		grid-template-columns: unset;
	}

	.width-grid figure img {
		box-shadow: none;
	}

	.action a {
		display: inline-block;
		transition: all 125ms ease-in-out;
		transition-property: text-decoration-color, text-decoration-thickness;
	}

	.action :where(:focus, :hover) {
		text-decoration-color: var(--color-key);
		text-decoration-thickness: 0.2em;
	}

	.teaser {
		margin-block: 2rem 2rem;
	}

	.page-list {
		list-style: none;
		padding: 0;
	}

	.page-list article {
		margin-block-end: 2rem;
	}

	.page-list article header {
		font-size: 0.85rem;
		color: var(--color-shade);

		&::before {
			content: "———";
			font-size: 1rem;
			font-weight: 900;
			color: var(--color-shade-2);
			display: block;
		}
	}

	.page-list article h3 {
		margin-block: 0.25rem 0.5rem;
		color: var(--color-text);
	}

	.page-list article h3 a {
		text-decoration: none;
	}

	.photo-grid {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: masonry;
	}

	@media (min-width: 42em) {
		.photo-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.photo-grid img {
		max-width: 100%;
		display: block;
		width: 100%;
		object-fit: cover;
		aspect-ratio: 1/1;
	}

	.photo-grid figure {
		margin: 0;
		display: grid;
		grid-template-rows: 1fr auto;
	}

	.photo-grid figure > img {
		grid-row: 1 / -1;
		grid-column: 1;
	}

	.footer {
		margin-block-start: 4rem;
		padding-block: 4rem;
		padding-inline: 4rem;
		background-color: var(--color-shade);
		color: var(--color-bright);
	}

	.footer-content {
		display: grid;
		gap: 1rem;
		margin-block: 0;
		margin-inline: auto;
		max-width: 100%;
	}

	@media (min-width: 60em) {
		.footer-content {
			grid-template-columns: repeat(3, 1fr);
			gap: 4rem;
			width: 60rem;
		}
	}

	.footer :is(h3, h4, h5, h6) {
		margin-block-start: 0;
	}

	.footer ul {
		list-style: none;
		padding: 0;
	}

	.footer li {
		margin-block-end: 0.5rem;
	}

	.page-home {
		display: flex;
		flex-wrap: wrap;
	}

	.page-home img {
		min-height: 0;
		width: auto;
		max-height: 8rem;
	}

	.page-home .width-full.standout:not(:first-child) {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: var(--color-shade-3);
		color: var(--color-text);
		border: 0.5rem solid var(--color-bright);
		box-shadow: 0 0 1rem -0.5rem var(--color-shade-2);
	}

	.page-home {
		display: grid;
		grid-template-columns: 1fr;
	}

	@media (min-width: 42em) {
		.page-home {
			grid-template-columns:
			[sidebar-left]1fr [content] minmax(auto, 30rem) [content-2] minmax(
			auto,
			30rem
			)
			[sidebar-right] 1fr;
			gap: 1rem;

			:is(h1, h2, h3, h4, h5, h6) {
				grid-column: span 3 / -1;
			}
		}
	}

	@media (min-width: 42em) {
		.page-home :first-child.width-full {
			grid-column: span 4;
/*
			p:not(:first-child), li {
				opacity: 0.5;
				transition: opacity 125ms ease-in-out;
				transition-property: opacity;

				&:hover {
					opacity: 1;
				}
			} */
		}
	}

	.page-home > section {
		max-width: 100%;
		margin: 0;
		background-color: var(--color-bright);
		padding: 1.75rem;
	}

	.page-home > section h3 {
		margin-block: 0 1rem;
		margin-inline: 0 0;
	}

	.page-home > section ul,
	.page-home > section ol {
		margin: 0;
		padding-block: 0 0;
		padding-inline: 0 1rem;
	}

	.page-home > section dl {
		margin: 0;
		padding: 0;
	}

	.page-home > section dd {
		margin-block: 0 0.5rem;
		margin-inline: 0 0;
		padding: 0;
	}

	.page-home > section:not(:first-child),
	.customers-logos {
		font-size: 1.125rem;
		box-shadow: 0 0 1rem -0.5rem var(--color-shade-2);
	}

	.page-home > section:nth-child(2n + 0) {
		grid-column: content;
	}

	.page-home > section:nth-child(2n + 1) {
		grid-column: content-2;
	}

	.page-home section iframe {
		margin-block: 1rem 0;
		margin-inline: 0 0;
		aspect-ratio: 16/9;
	}

	.page-home .standout:first-of-type img {
		max-width: 16rem;
		border-radius: 16rem;
	}

	.page-home .standout:first-of-type {
		background-color: var(--color-shade-3);
		color: var(--color-text);
	}

	.page-home .standout:first-of-type p {
		color: currentColor;
	}

	.customers-logos {
		margin-block: 0 2rem;
		max-width: 100%;
		grid-column: span 4;
		background-color: var(--color-bright);
		padding: 2rem;
	}

	.customers-logos ul {
		max-width: 100rem;
		display: flex;
		flex-wrap: wrap;
		gap: 4rem;
		align-items: center;
		justify-content: center;
		list-style: none;
		padding: 0;
		margin: 0 auto;

		img {
			height: 3rem;
			width: auto;
			max-width: 100%;
			object-fit: contain;
			filter: grayscale(100%) contrast(100%);
			aspect-ratio: unset;
		}

		figure {
			display: flex;
			gap: 0.5rem;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		figcaption {
			font-size: 0.875rem;
			text-align: center;
			color: var(--color-text);
			font-weight: 500;
			letter-spacing: 0.025em;
			max-width: 14rem;
			margin-block-start: 0.5rem;
		}
	}

	.main {
		line-height: 1.4;
	}

	.main:not(.page-home) {
		max-width: 60rem;
		margin: 0 auto;
	}

	.main.compact {
		max-width: 100%;
		padding-inline: 2rem;
	}

	.main .text {
		max-width: 42.5rem;
		font-size: 1.125rem;
	}

	.main .text strong,
	.main .text h3,
	.main .text h4 {
		color: var(--color-text);
		animation: unset;
		background: unset;
		background-clip: unset;
		mask-image: none;
		-webkit-text-fill-color: var(--color-text);
	}

	.main header .introtext strong {
		color: var(--color-accent);
		font-weight: 600;
		letter-spacing: 0.025em;
		background-image: linear-gradient(145deg, var(--color-accent), var(--color-accent-dark));
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 1.667rem;
		line-height: 1.25;
	}

	@media (min-width: 42em) {
		.main.has-sidebar .layout-content {
			display: grid;
			gap: 4rem;
			grid-template-columns: 1fr minmax(auto, 24rem);
		}
	}

	.sidebar {
		padding-block: 0.5rem 0.5rem;
		padding-inline: 2rem;
		background-color: var(--color-bright);
		box-shadow: 0 0 1rem -0.5rem rgba(0, 0, 0, 0.125);

		dd {
			margin: 0;
		}

		dd ul {
			margin-block: 0.5rem 0.5rem;
			margin-inline: 0 0;
			padding: 0;
			list-style-type: symbols(cyclic "–");
		}

		.button {
			position: relative;
			font-size: 1rem;
			margin-block-end: 0.5rem;
			background-image: linear-gradient(145deg, var(--color-accent),var(--color-accent-dark));
			font-weight: 500;
			font-style: normal;
			letter-spacing: 0.025em;
			color: var(--color-bright);
			border: 0;
			min-width: 8rem;
			text-align: center;
		}
	}
}

@layer print {
	@media print {
		html {
			font-size: 1.3ch;
		}
		body {
			font-size: 1rem;
			box-sizing: border-box;
			max-width: 100%;
			padding-block: 0 0;
			padding-inline: 4rem 4rem;
			display: block;
		}
		.page-header-wrapper .navigation,
		.footer {
			display: none;
		}
		.main.compact,
		.main,
		.page-header-wrapper,
		.page-header-wrapper .page-header,
		.main .text {
			max-width: 100%;
		}
	}
}