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

:root {
	--content-size: 40rem;

	/* @link https://utopia.fyi/type/calculator/?c=360,18,1.2,1240,18,1.25,5,1 */
	--font-size--1: clamp(0.9rem, 0.9528rem + -0.0682vw, 0.9375rem);
	--font-size-0: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
	--font-size-1: clamp(1.35rem, 1.327rem + 0.1023vw, 1.4063rem);
	--font-size-2: clamp(1.62rem, 1.5636rem + 0.2506vw, 1.7578rem);
	--font-size-3: clamp(1.944rem, 1.8404rem + 0.4605vw, 2.1973rem);
	--font-size-4: clamp(2.3328rem, 2.1635rem + 0.7523vw, 2.7466rem);
	--font-size-5: clamp(2.7994rem, 2.5401rem + 1.1525vw, 3.4332rem);

	--spacing: var(--spacing-m);
	/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,18,1.25 */
	--spacing-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--spacing-2xs: clamp(0.5625rem, 0.5625rem + 0vw, 0.5625rem);
	--spacing-xs: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
	--spacing-s: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
	--spacing-m: clamp(1.6875rem, 1.6875rem + 0vw, 1.6875rem);
	--spacing-l: clamp(2.25rem, 2.25rem + 0vw, 2.25rem);
	--spacing-xl: clamp(3.375rem, 3.375rem + 0vw, 3.375rem);
	--spacing-2xl: clamp(4.5rem, 4.5rem + 0vw, 4.5rem);
	--spacing-3xl: clamp(6.75rem, 6.75rem + 0vw, 6.75rem);
	--site-meta-spacing: var(--spacing-s);

	--color-bg: #000;
	--color-fg: #E2E2E2;
	--color-brand-primary: #F007FF;
	--color-brand-secondary: #65FE43;
	--color-accent: #14FDFF; /* XXX: misnomer? */

	--border-thin: 1px solid;
	--border-thick: 2px solid;
	--border-brand-gradient: linear-gradient(to right,
			var(--color-brand-primary) 0%,
			var(--color-accent) 100%)
		1;

	--animation-duration: 200ms;
}

html {
	--frame-size: 2px;

	border-block: var(--frame-size) solid var(--color-brand-primary);
	border-block-end-color: var(--color-brand-secondary);

	/* prevent font-size inflation; cf.
	   https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	color-scheme: dark;
	color: var(--color-fg);
	background-color: var(--color-bg);
}

body {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: var(--font-size-0);
	line-height: 1.6;
	background: linear-gradient(145deg, #0e0e0e, #010d47); /* XXX: magic value to get feedback on the direction */

	> * { /* XXX: stack helper? */
		margin-block: 0;

		&:not(.nonvisual, .announcement) + * { /* XXX: special-casing */
			margin-block-start: var(--spacing-3xl);
		}
	}
}

main {
	min-height: 100vh; /* XXX: unnecessarily forces scroll */
	scroll-padding-top: 39px; /* FIXME: corresponds to logo height */

	> * { /* XXX: stack helper? */
		margin-block: 0;

		& + * {
			margin-block-start: var(--spacing);
		}
	}

	> :not(.fullbleed) {
		/* constrain maximum width while ensuring minimum margin */
		margin-inline: max(var(--spacing),
				0.5 * (100vw - var(--bleed-factor, 1) * var(--content-size)));

		&.semibleed {
			--bleed-factor: 2;
		}
	}
}

h1,
h2,
h3,
h4 {
	font-family: Oswald;
	font-weight: 200;
	text-wrap: balance;
}

h1,
h2,
h3 {
	--spacing: var(--spacing-xl);

	text-transform: uppercase;
	color: var(--color-brand-primary);
}

h1 {
	font-size: var(--font-size-5);
}

h2 {
	font-size: var(--font-size-4);
}

h3 {
	font-size: var(--font-size-3);
}

h4 {
	font-size: var(--font-size-2);
}

p {
	text-wrap: pretty;
}

strong {
	font-weight: normal;
	color: var(--color-accent);
}

/* XXX: a11y might be impacted by insufficient color contrast */

a {
	text-underline-offset: 0.25em; /* XXX: magic value */
	color: currentColor;

	@media (prefers-reduced-motion: no-preference) {
		transition-property: text-underline-offset, text-decoration-color;
		transition-duration: var(--animation-duration);
	}

	&:not(:focus, :hover, :active) {
		text-underline-offset: 0.15em; /* XXX: magic value */
		text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
	}
}

img {
	max-width: 100%;
	height: auto;
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
}

.form-row {
	display: flex;
	flex-direction: column;
}

/* cf. https://prepitaph.org/snippets/text-animation/ */

@supports (background-clip: text) {
	.text-flood {
		--text-flood-offset: 0%;

		text-decoration: none; /* for cross-browser consistency */
		color: transparent;
		background-image: radial-gradient(circle at 50%,
				var(--text-flood-color-alt) var(--text-flood-offset),
				var(--text-flood-color) var(--text-flood-offset));
		background-clip: text;

		@media (prefers-reduced-motion: no-preference) {
			transition: --text-flood-offset var(--animation-duration) linear;
		}

		&:focus,
		&:hover,
		&:active {
			--text-flood-offset: 100%;
		}
	}

	@property --text-flood-offset {
		syntax: "<percentage>";
		inherits: true;
		initial-value: 0%;
	}
}

header[role=banner] {
	position: sticky;
	top: 0;
	justify-content: space-between;
	padding: var(--spacing-s) var(--site-meta-spacing);
	background-color: var(--color-bg);

	&,
	& nav {
		display: flex;
		gap: var(--spacing-m);
	}

	nav {
		flex-grow: 1;
		justify-content: right;
	}

	&::before { /* smooth edge */
		content: "";
		position: absolute;
		inset: 100% 0 auto;
		height: 8px;
		background-image: linear-gradient(to bottom, var(--color-bg), transparent);
	}

	&:has(nav > .unicorn:last-child) {
		padding-inline-end: 0;
	}

	a {
		--text-flood-color: var(--color-fg);
		--text-flood-color-alt: var(--color-brand-primary);

		text-transform: uppercase;
		text-decoration: none; /* XXX: controversial */

		font-family: Oswald;
		font-size: var(--font-size-0);
		font-weight: 300;
		letter-spacing: 0.1em; /* XXX: magic value */
	}

	nav {
		align-items: center;

		.unicorn { /* FIXME: insufficiently distinct from `.text-flood` */
			color: var(--color-brand-primary);
		}

		@media (width < 55rem) { /* XXX: magic value */
			> a {
				display: none;
			}
		}
		@media (width >= 55rem) { /* XXX: magic value (corresponds to the above) */
			> details {
				display: none;
			}
		}
	}

	summary {
		margin-inline-end: var(--site-meta-spacing);
		list-style-type: none;
		cursor: pointer;

		.menu-icon {
			display: block;
			height: 1lh;
		}
	}

	details {
		order: 1; /* required to preserve `:last-child` above */

		&[open] > :not(summary) {
			position: absolute;
			right: 0;
			display: flex;
			max-width: 100%;
			flex-direction: column;
			align-items: end;
			gap: var(--spacing);
			padding: var(--spacing) var(--site-meta-spacing);

			/* NB: stacked backdrop filters increase contrast for readability, which
				   requires a pseudo-element; cf. https://stackoverflow.com/a/76207141 */
			&::before,
			> * {
				backdrop-filter: blur(2px) brightness(20%);
			}
			&::before {
				content: "";
				position: absolute;
				inset: 0;
			}
		}
	}
}

.nav-menu {
	.menu-icon line {
		stroke: currentColor;
		stroke-width: 3px;
		stroke-linecap: round;
		opacity: 1;
		translate: 0;
		rotate: 0deg;

		@media (prefers-reduced-motion: no-preference) {
			transition: none 300ms ease; /* XXX: magic number */
			transition-property: transform-origin, translate, rotate, opacity;
		}

		&:first-of-type {
			transform-origin: 2px 8px;
		}

		&:nth-of-type(2) {
			animation-duration: 150ms; /* XXX: magic number */
		}

		&:last-of-type {
			transform-origin: 2px 26px;
		}
	}
	&[open] .menu-icon line {
		&:first-of-type,
		&:last-of-type {
			translate: 0 -1.5px;
			transform-origin: 7px 23px;
			rotate: -45deg;
		}

		&:first-of-type {
			rotate: 45deg;
			transform-origin: 4px 13px;
		}

		&:nth-of-type(2) {
			opacity: 0;
		}
	}
}

@font-face {
	font-display: swap;
	font-family: Oswald;
	font-style: normal;
	font-weight: 200 700;
	src: url("/assets/oswald-7db278c7d2dd108352a61e4a534bf28d.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: Montserrat;
	font-style: normal;
	font-weight: 100 900;
	src: url("/assets/montserrat-bda255b9cc9299310d099d7257597915.woff2") format("woff2");
}

.nonvisual:not(:focus, :active) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	padding: var(--spacing);
	outline: var(--spacing) solid var(--color-accent);
	color: var(--color-fg);
	background-color: var(--color-bg);
}

.social-links {
	display: flex;
	gap: var(--spacing-s);

	a {
		display: flex;
		padding: var(--spacing-2xs);
		border: var(--border-thin) var(--color-fg);
		border-radius: 100%;
		background-color: var(--color-fg);
		transition: scale var(--animation-duration) ease;

		&:focus,
		&:hover {
			scale: 1.1;
		}
	}
}

.cta-filled,
.cta-outline {
	--spacing: var(--spacing-l); /* XXX: smell */

	display: inline-block;
	padding: var(--spacing-s) var(--spacing-m);
	font-family: Oswald;
	font-weight: 300;
	letter-spacing: 0.1em; /* XXX: magic value */
	text-transform: uppercase;
	text-decoration: none;
}

.cta-filled {
	color: black; /* XXX: magic value */
	background-color: var(--color-accent);
}

.cta-outline {
	color: var(--color-accent);
	border: var(--border-thick) var(--color-accent);
}

.callout-box {
	border: var(--border-thick);
	border-image: var(--border-brand-gradient);
	padding: var(--spacing-s) var(--spacing-m);
}

footer[role=contentinfo] {
	padding: var(--spacing) var(--site-meta-spacing);

	justify-content: space-between;
	flex-wrap: wrap;

	&,
	> *,
	.legal-links {
		display: flex;
		gap: var(--spacing-s);

		> * { /* XXX: stack helper? */
			margin-block: 0;
		}
	}

	> *,
	.legal-links {
		flex-direction: column;
		justify-content: space-between;
	}

	.legal-links a {
		text-transform: uppercase;
		text-decoration: none;
	}

	@media (min-width: 32rem) { /* XXX: magic value */
		.social-links { /* XXX: breaks encapsulation */
			justify-content: end;
		}
		.legal-links {
			align-items: end;
		}
	}
}

.announcement {
	padding: calc(var(--spacing-xs) - var(--frame-size)) var(--spacing) var(--spacing-xs);
	text-align: center;
	background-color: var(--color-brand-primary);
}

.virtueller-kaffee-cta {
	position: fixed;
	bottom: var(--spacing);
	right: var(--spacing);
	z-index: 1;
	width: 12rem; /* XXX: magic value */
	height: auto;
	aspect-ratio: 1;
	margin: 0 !important; /* XXX: smell; neutralizes container default */
	place-content: center;
	text-align: center;
	text-decoration: none;
	color: var(--color-fg);
	clip-path: circle(50%);

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		rotate: 0;
		background-color: var(--color-brand-primary);
		transition-property: rotate;
		/* https://css-generators.com/starburst-shape/ */
		clip-path: polygon(100% 50%, 87.42% 56.6%, 96.98% 67.1%, 82.91% 69%,
				88.3% 82.14%, 74.43% 79.11%, 75% 93.3%, 63% 85.71%,
				58.68% 99.24%,
				50% 88%, 41.32% 99.24%,
				37% 85.71%, 25% 93.3%, 25.57% 79.11%, 11.7% 82.14%,
				17.09% 69%, 3.02% 67.1%, 12.58% 56.6%, 0% 50%, 12.58% 43.4%,
				3.02% 32.9%, 17.09% 31%, 11.7% 17.86%, 25.57% 20.89%,
				25% 6.7%, 37% 14.29%, 41.32% 0.76%, 50% 12%, 58.68% 0.76%,
				63% 14.29%, 75% 6.7%, 74.43% 20.89%, 88.3% 17.86%,
				82.91% 31%, 96.98% 32.9%, 87.42% 43.4%);

		@media (prefers-reduced-motion: no-preference) {
			transition: rotate var(--animation-duration) ease-in-out;
		}
	}

	&:is(:focus, :hover, :active)::before {
		rotate: 30deg;
	}

	&::after {
		content: "☕️";
		content: "☕️" / "";
		position: relative;
		z-index: 1;
		font-size: 3rem; /* XXX: magic value */
	}

	b {
		display: block;
		position: relative;
		z-index: 1;
	}
}

main.story > header {
	h1 {
		margin-block: 0;
	}

	time {
		display: block;
		margin-block: var(--spacing-s) 0;
		font-weight: bold;
	}
}

.story-gallery {
	display: flex;
	gap: var(--spacing-l);
	flex-wrap: wrap;
}

.story-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	flex: 1 0 45%;
	border: var(--border-thick);
	border-image: var(--border-brand-gradient);
	padding: var(--spacing-xs) var(--spacing-m);
	max-width: 100%;

	&:hover {
		border-image: linear-gradient(to right, var(--color-accent) 0%, var(--color-brand-primary) 100%) 1;
	}

	h3 {
		/* XXX: excessive resetting; smell */
		margin-block: 0;
		font-size: var(--font-size-1);
		font-weight: bold;
		text-transform: none;
		color: inherit;

		a {
			text-decoration: none;
		}
	}

	> a {
		flex-grow: 1;
		align-self: center;
		place-content: center;
	}
}

.team-gallery {
	display: flex;
	gap: var(--spacing-l);
	flex-wrap: wrap;
}

.team-member {
	display: flex;
	flex: 1 0 min-content;
	flex-direction: column;
	padding-inline: var(--spacing-2xs);
	align-items: center;
	text-align: center;

	p,
	.title {
		width: 24ch; /* XXX: magic value */
	}

	.title {
		order: -1;
		margin-block: var(--spacing-3xs) 0;

		h4 + & {
			margin-block-start: var(--spacing-s);
		}
	}

	.avatar {
		order: -2;
		border-radius: 100%;
	}
}

.customer-gallery {
	display: flex;
	flex-wrap: wrap;
    gap: var(--spacing-m);
	align-items: center;

	list-style: none;
}