/* ==========================================================================
   Paul Lamp-Böckelmann — Personal Site
   Direction: "Dispatch" — amber signal on warm slate, mono labels,
   soft-cornered cards with an amber status stripe. Techy + logistics.
   ========================================================================== */

/* Self-hosted fonts (no external requests) */
@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/public-sans-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/public-sans-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Public Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/public-sans-400-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/rubik-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/rubik-600.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-700.woff2') format('woff2');
}

/* Global variables — LIGHT (warm paper) */
:root {
	/* Neutrals (slate-warm ramp: low = ink, high = ground) */
	--gray-0: #12161a;
	--gray-50: #1b2026;
	--gray-100: #273038;
	--gray-200: #38434e;
	--gray-300: #4f5b66;
	--gray-400: #64717d;
	--gray-500: #808d99;
	--gray-600: #9aa6b0;
	--gray-700: #c6ccc9;
	--gray-800: #e4e2db;
	--gray-900: #efeee8;
	--gray-999-basis: 45, 22%, 96%;
	--gray-999_40: hsla(var(--gray-999-basis), 0.55);
	--gray-999: #f6f5f1;

	/* Accent — dispatch amber */
	--accent-light: #ffb066;
	--accent-regular: #d9700f;
	--accent-dark: #8f4410;
	--accent-overlay: hsla(28, 100%, 55%, 0.16);
	--accent-subtle-overlay: hsla(28, 90%, 45%, 0.14);
	--accent-text-over: #1a1206;

	--link-color: var(--accent-regular);

	/* Amber top-glow behind the page header */
	--glow: hsla(28, 100%, 52%, 0.13);

	/* Gradients */
	--gradient-accent: linear-gradient(150deg, var(--accent-light), var(--accent-regular), var(--accent-dark));
	--gradient-accent-orange: linear-gradient(100deg, #ffb066, #d9700f 45%, #8f4410);
	--gradient-subtle: linear-gradient(150deg, var(--gray-900) 19%, var(--gray-999) 150%);
	--gradient-stroke: linear-gradient(180deg, var(--gray-900), var(--gray-700));

	/* Shadows */
	--shadow-sm:
		0px 6px 3px rgba(9, 11, 17, 0.01), 0px 4px 2px rgba(9, 11, 17, 0.01),
		0px 2px 2px rgba(9, 11, 17, 0.02), 0px 0px 1px rgba(9, 11, 17, 0.03);
	--shadow-md:
		0px 28px 11px rgba(9, 11, 17, 0.01), 0px 16px 10px rgba(9, 11, 17, 0.03),
		0px 7px 7px rgba(9, 11, 17, 0.05), 0px 2px 4px rgba(9, 11, 17, 0.06);
	--shadow-lg:
		0px 62px 25px rgba(9, 11, 17, 0.01), 0px 35px 21px rgba(9, 11, 17, 0.05),
		0px 16px 16px rgba(9, 11, 17, 0.1), 0px 4px 9px rgba(9, 11, 17, 0.12);

	/* Text Sizes */
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.625rem;
	--text-2xl: 2.125rem;
	--text-3xl: 2.625rem;
	--text-4xl: 3.5rem;
	--text-5xl: 4.5rem;

	/* Fonts */
	--font-system:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
		"Open Sans", "Helvetica Neue", sans-serif;
	--font-body: "Public Sans", var(--font-system);
	--font-brand: Rubik, var(--font-system);
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;

	/* Transitions */
	--theme-transition: 0.2s ease-in-out;
}

/* DARK (warm slate + amber — the "Dispatch" world) */
:root.theme-dark {
	--gray-0: #f2f4f6;
	--gray-50: #e6e9ec;
	--gray-100: #dfe3e7;
	--gray-200: #c3ccd4;
	--gray-300: #93a0ac;
	--gray-400: #7d8a96;
	--gray-500: #64717d;
	--gray-600: #4f5b66;
	--gray-700: #333c45;
	--gray-800: #2a333d;
	--gray-900: #181e25;
	--gray-999-basis: 210, 21%, 8%;
	--gray-999_40: hsla(var(--gray-999-basis), 0.5);
	--gray-999: #0f1317;

	--accent-light: #8f4410;
	--accent-regular: #ff8a3d;
	--accent-dark: #ffb066;
	--accent-overlay: hsla(28, 100%, 62%, 0.28);
	--accent-subtle-overlay: hsla(28, 90%, 52%, 0.22);
	--accent-text-over: #1a1206;

	--link-color: var(--accent-dark);

	--glow: hsla(24, 100%, 58%, 0.17);

	--gradient-accent-orange: linear-gradient(100deg, #ffb066, #ff8a3d 42%, #c2410c);
	--gradient-subtle: linear-gradient(150deg, var(--gray-900) 19%, var(--gray-999) 81%);
	--gradient-stroke: linear-gradient(180deg, var(--gray-600), var(--gray-800));

	--shadow-sm:
		0px 6px 3px rgba(0, 0, 0, 0.14), 0px 4px 2px rgba(0, 0, 0, 0.12),
		0px 2px 2px rgba(0, 0, 0, 0.12), 0px 0px 1px rgba(0, 0, 0, 0.12);
	--shadow-md:
		0px 28px 11px rgba(0, 0, 0, 0.05), 0px 16px 10px rgba(0, 0, 0, 0.14),
		0px 7px 7px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.24);
	--shadow-lg:
		0px 62px 25px rgba(0, 0, 0, 0.05), 0px 35px 21px rgba(0, 0, 0, 0.18),
		0px 16px 16px rgba(0, 0, 0, 0.3), 0px 4px 9px rgba(0, 0, 0, 0.36);
}

/* ==========================================================================
   Base
   ========================================================================== */
html,
body {
	min-height: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--gray-999);
	color: var(--gray-200);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

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

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

a {
	color: var(--link-color);
}

h1,
h2,
h3,
h4,
h5 {
	line-height: 1.1;
	font-family: var(--font-brand);
	font-weight: 600;
	color: var(--gray-100);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.wrapper {
	width: 100%;
	max-width: 83rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.stack {
	display: flex;
	flex-direction: column;
}

.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-15 { gap: 3.75rem; }
.gap-20 { gap: 5rem; }
.gap-30 { gap: 7.5rem; }
.gap-48 { gap: 12rem; }

@media (min-width: 50em) {
	.lg\:gap-2 { gap: 0.5rem; }
	.lg\:gap-4 { gap: 1rem; }
	.lg\:gap-8 { gap: 2rem; }
	.lg\:gap-10 { gap: 2.5rem; }
	.lg\:gap-15 { gap: 3.75rem; }
	.lg\:gap-20 { gap: 5rem; }
	.lg\:gap-30 { gap: 7.5rem; }
	.lg\:gap-48 { gap: 12rem; }
}

.icon-svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* Mono label / eyebrow */
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-regular);
}

/* ==========================================================================
   Page background — clean amber glow + subtle grain (no more purple blobs)
   ========================================================================== */
.backgrounds {
	min-height: 100%;
	isolation: isolate;
	background:
		url('../images/backgrounds/noise.png') top center / 220px repeat,
		radial-gradient(130% 80% at 82% -8%, var(--glow), transparent 55%),
		var(--gray-999);
	background-blend-mode: overlay, normal, normal;
}

@media (forced-colors: active) {
	.backgrounds {
		background: none;
		background-blend-mode: none;
	}
}

/* ==========================================================================
   Navigation
   ========================================================================== */
nav {
	z-index: 9999;
	position: relative;
	font-family: var(--font-brand);
	font-weight: 500;
	margin-bottom: 3.5rem;
}

.menu-header {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1.5rem;
}

.site-title {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	line-height: 1.1;
	color: var(--gray-0);
	text-decoration: none;
	font-weight: 600;
}

.site-title .icon-svg {
	font-size: 1.6em;
	color: var(--accent-regular);
}

.menu-button {
	position: relative;
	display: flex;
	border: 0;
	border-radius: 999rem;
	padding: 0.5rem;
	font-size: 1.5rem;
	color: var(--gray-300);
	background: radial-gradient(var(--gray-900), var(--gray-800) 150%);
	box-shadow: var(--shadow-md);
	cursor: pointer;
}

.menu-button[aria-expanded='true'] {
	color: var(--gray-0);
	background:
		linear-gradient(180deg, var(--gray-600), transparent),
		radial-gradient(var(--gray-900), var(--gray-800) 150%);
}

.menu-button[hidden] {
	display: none;
}

.menu-button::before {
	position: absolute;
	inset: -1px;
	content: '';
	background: var(--gradient-stroke);
	border-radius: 999rem;
	z-index: -1;
}

.menu-content {
	position: absolute;
	left: 0;
	right: 0;
}

.menu-content[hidden] {
	display: none;
}

.nav-items {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-family: var(--font-mono);
	font-size: var(--text-md);
	line-height: 1.2;
	list-style: none;
	padding: 2rem;
	background-color: var(--gray-999);
	border-bottom: 1px solid var(--gray-800);
}

.nav-items .link {
	display: inline-block;
	color: var(--gray-300);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.nav-items .link[aria-current='page'] {
	color: var(--gray-0);
}

.menu-footer {
	--icon-size: var(--text-xl);
	--icon-padding: 0.5rem;

	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.5rem 2rem 1.5rem 1.5rem;
	background-color: var(--gray-999);
	border-radius: 0 0 0.75rem 0.75rem;
	box-shadow: var(--shadow-lg);
}

.socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	font-size: var(--icon-size);
}

.social {
	display: flex;
	padding: var(--icon-padding);
	text-decoration: none;
	color: var(--accent-regular);
	transition: color var(--theme-transition);
}

.social:hover,
.social:focus {
	color: var(--gray-0);
}

.theme-toggle-wrapper {
	display: flex;
	align-items: center;
	height: calc(var(--icon-size) + 2 * var(--icon-padding));
}

@media (min-width: 50em) {
	nav {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		padding: 2.5rem 5rem;
		gap: 1rem;
	}

	.menu-header {
		padding: 0;
	}

	.site-title {
		font-size: var(--text-lg);
	}

	.menu-content,
	.menu-content[hidden] {
		display: contents;
	}

	.nav-items {
		position: relative;
		flex-direction: row;
		font-size: var(--text-sm);
		border-radius: 999rem;
		border: 0;
		padding: 0.5rem 0.5625rem;
		background: radial-gradient(var(--gray-900), var(--gray-800) 150%);
		box-shadow: var(--shadow-md);
	}

	.nav-items::before {
		position: absolute;
		inset: -1px;
		content: '';
		background: var(--gradient-stroke);
		border-radius: 999rem;
		z-index: -1;
	}

	.nav-items .link {
		padding: 0.5rem 1rem;
		border-radius: 999rem;
		transition:
			color var(--theme-transition),
			background-color var(--theme-transition);
	}

	.nav-items .link:hover,
	.nav-items .link:focus {
		color: var(--gray-100);
		background-color: var(--accent-subtle-overlay);
	}

	.nav-items .link[aria-current='page'] {
		color: var(--accent-text-over);
		background-color: var(--accent-regular);
	}

	.menu-footer {
		--icon-padding: 0.375rem;

		justify-self: flex-end;
		align-items: center;
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.socials {
		display: none;
	}
}

@media (min-width: 60em) {
	.socials {
		display: flex;
		justify-content: flex-end;
		gap: 0;
	}
}

@media (forced-colors: active) {
	.nav-items .link[aria-current='page'] {
		color: SelectedItem;
	}
}

/* Theme toggle */
.theme-toggle {
	display: flex;
	border: 0;
	border-radius: 999rem;
	padding: 0;
	background-color: var(--gray-999);
	box-shadow: inset 0 0 0 1px var(--accent-overlay);
	cursor: pointer;
}

.theme-toggle .icon {
	z-index: 1;
	position: relative;
	display: flex;
	padding: 0.5rem;
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
	color: var(--accent-overlay);
}

.theme-toggle .icon.light::before {
	content: '';
	z-index: -1;
	position: absolute;
	inset: 0;
	background-color: var(--accent-regular);
	border-radius: 999rem;
}

.theme-dark .theme-toggle .icon.light::before {
	transform: translateX(100%);
}

.theme-dark .theme-toggle .icon.dark,
html:not(.theme-dark) .theme-toggle .icon.light {
	color: var(--accent-text-over);
}

@media (prefers-reduced-motion: no-preference) {
	.theme-toggle .icon,
	.theme-toggle .icon.light::before {
		transition:
			transform var(--theme-transition),
			color var(--theme-transition);
	}
}

@media (forced-colors: active) {
	.theme-toggle .icon.light::before {
		background-color: SelectedItem;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-text {
	font-size: var(--text-lg);
	text-align: center;
}

.hero-text .eyebrow,
.hero-text .title,
.hero-text .tagline {
	max-width: 40ch;
	margin-inline: auto;
}

.hero-text .title {
	font-size: var(--text-3xl);
	color: var(--gray-0);
}

@media (min-width: 50em) {
	.hero-text {
		font-size: var(--text-xl);
	}

	.hero-text.start {
		text-align: start;
	}

	.hero-text.start .eyebrow,
	.hero-text.start .title,
	.hero-text.start .tagline {
		margin-inline: unset;
	}

	.hero-text .title {
		font-size: var(--text-5xl);
	}
}

/* Home page hero layout */
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.roles {
	display: none;
}

/* No forced ratio on small screens: the portrait is a tall 768x1344, so any
   wide crop would cut off the face. Show it whole and let the page scroll. */
.hero img {
	object-fit: cover;
	object-position: top;
	border-radius: 1.25rem;
	box-shadow: var(--shadow-md);
}

@media (min-width: 50em) {
	.hero {
		display: grid;
		grid-template-columns: 6fr 4fr;
		padding-inline: 2.5rem;
		gap: 3.75rem;
	}

	.roles {
		margin-top: 0.5rem;
		display: flex;
		gap: 0.5rem;
	}

	.hero img {
		aspect-ratio: 3 / 4;
		border-radius: 1.75rem;
		object-fit: cover;
	}
}

/* Pill */
.pill {
	display: flex;
	padding: 0.45rem 1rem;
	gap: 0.5rem;
	color: var(--accent-text-over);
	border: 1px solid var(--accent-regular);
	background-color: var(--accent-regular);
	border-radius: 999rem;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	align-items: center;
}

.pill .icon-svg {
	font-size: 1.2em;
}

/* ==========================================================================
   Skills
   ========================================================================== */
.box {
	border: 1px solid var(--gray-800);
	border-radius: 0.875rem;
	padding: 1.5rem;
	background-color: var(--gray-999_40);
	box-shadow: var(--shadow-sm);
}

.skills {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.skills h2 {
	font-size: var(--text-lg);
}

.skills p {
	color: var(--gray-400);
}

.skills .icon-svg {
	font-size: 2.5rem;
	color: var(--accent-regular);
}

@media (min-width: 50em) {
	.box {
		border-radius: 1.125rem;
		padding: 2.5rem;
	}

	.skills {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rem;
	}

	.skills h2 {
		font-size: var(--text-2xl);
	}
}

/* ==========================================================================
   Concepts — soft-cornered cards with an amber status stripe (C-style boxes)
   ========================================================================== */
.concepts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.concept-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	border: 1px solid var(--gray-800);
	border-top: 3px solid var(--accent-regular);
	border-radius: 0.875rem;
	padding: 1.5rem;
	background-color: var(--gray-999_40);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--theme-transition), transform var(--theme-transition);
}

.concept-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.concept-card .icon-svg {
	font-size: 2.5rem;
	color: var(--accent-regular);
}

.concept-card h3 {
	font-size: var(--text-lg);
	color: var(--gray-100);
}

.concept-card p {
	color: var(--gray-400);
	font-size: var(--text-base);
}

@media (min-width: 50em) {
	.concepts {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.concept-card {
		border-radius: 1.125rem;
		padding: 2rem;
	}

	.concept-card h3 {
		font-size: var(--text-xl);
	}
}

/* ==========================================================================
   Call to action button
   ========================================================================== */
.cta-button {
	position: relative;
	display: flex;
	place-content: center;
	align-items: center;
	text-align: center;
	padding: 0.56em 2em;
	gap: 0.8em;
	color: var(--accent-text-over);
	text-decoration: none;
	font-family: var(--font-brand);
	font-weight: 500;
	line-height: 1.1;
	border-radius: 999rem;
	overflow: hidden;
	background: var(--gradient-accent-orange);
	box-shadow: var(--shadow-md);
	white-space: nowrap;
}

@media (min-width: 20em) {
	.cta-button {
		font-size: var(--text-lg);
	}
}

.cta-button::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: background-color var(--theme-transition);
	mix-blend-mode: overlay;
}

.cta-button:focus::after,
.cta-button:hover::after {
	background-color: hsla(var(--gray-999-basis), 0.3);
}

@media (min-width: 50em) {
	.cta-button {
		padding: 1.125rem 2.5rem;
		font-size: var(--text-xl);
	}
}

/* ==========================================================================
   Contact CTA
   ========================================================================== */
.contact-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
	border-top: 1px solid var(--gray-800);
	border-bottom: 1px solid var(--gray-800);
	padding: 5rem 1.5rem;
	background-color: var(--gray-999_40);
	box-shadow: var(--shadow-sm);
}

.contact-cta h2 {
	font-size: var(--text-xl);
	text-align: center;
	max-width: 15ch;
}

@media (min-width: 50em) {
	.contact-cta {
		padding: 7.5rem;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.contact-cta h2 {
		font-size: var(--text-3xl);
		text-align: left;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	margin-top: auto;
	padding: 3rem 2rem 3rem;
	text-align: center;
	color: var(--gray-400);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

footer a {
	color: var(--gray-400);
	text-decoration: 1px solid underline transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--theme-transition);
}

footer a:hover,
footer a:focus {
	text-decoration-color: currentColor;
}

footer .group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

footer .socials {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: inherit;
}

@media (min-width: 50em) {
	footer {
		flex-direction: row;
		justify-content: space-between;
		padding: 2.5rem 5rem;
	}

	footer .group {
		flex-direction: row;
		gap: 1rem;
		flex-wrap: wrap;
	}

	footer .socials {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   About page
   ========================================================================== */
.about {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
}

.about section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--gray-200);
}

.about .section-title {
	grid-column-start: 1;
	font-size: var(--text-xl);
	color: var(--gray-0);
}

.about .content {
	grid-column: 2 / 4;
}

.about .content a {
	text-decoration: 1px solid underline transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--theme-transition);
}

.about .content a:hover,
.about .content a:focus {
	text-decoration-color: currentColor;
}

@media (min-width: 50em) {
	.about {
		display: grid;
		grid-template-columns: 1fr 60% 1fr;
	}

	.about > :first-child {
		grid-column-start: 2;
	}

	.about section {
		display: contents;
		font-size: var(--text-lg);
	}
}

/* ==========================================================================
   Dispatch details — icon module tiles, route motif, framed portrait
   ========================================================================== */

/* Icon "module" tiles for skills + concepts */
.skills .icon-svg,
.concept-card .icon-svg {
	font-size: 2rem;
	padding: 0.8rem;
	box-sizing: content-box;
	border-radius: 0.85rem;
	color: var(--accent-regular);
	background:
		linear-gradient(180deg, var(--accent-subtle-overlay), transparent),
		var(--gray-999_40);
	border: 1px solid var(--gray-800);
	box-shadow: var(--shadow-sm), inset 0 1px 0 hsla(28, 100%, 72%, 0.12);
	align-self: flex-start;
	vertical-align: middle;
}

/* Logistics route divider */
.route {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.route .dot {
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background: var(--accent-regular);
	box-shadow: 0 0 0 4px var(--accent-subtle-overlay);
}

.route .line {
	flex: 1 1 auto;
	height: 0;
	border-top: 2px dashed var(--accent-regular);
	opacity: 0.45;
}

.route .label {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray-400);
	white-space: nowrap;
}

.route .pkg {
	flex: none;
	display: inline-flex;
	color: var(--accent-regular);
}

.route .pkg .icon-svg {
	font-size: 1.4rem;
}

@media (max-width: 34em) {
	.route .label {
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		white-space: normal;
		text-align: center;
	}
}

/* Framed, "tracked" portrait */
.portrait {
	position: relative;
	align-self: center;
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
}

.portrait::before {
	content: '';
	position: absolute;
	inset: -6% -5% -8% -5%;
	background: radial-gradient(58% 46% at 68% 22%, var(--glow), transparent 72%);
	z-index: -1;
}

.portrait img {
	position: relative;
	z-index: 1;
	width: 100%;
}

.portrait .tick {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid var(--accent-regular);
	z-index: 2;
	pointer-events: none;
}

.portrait .tick.tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.portrait .tick.tr { top: -7px; right: -7px; border-left: 0; border-bottom: 0; }
.portrait .tick.bl { bottom: -7px; left: -7px; border-right: 0; border-top: 0; }
.portrait .tick.br { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }

.portrait .loc {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: 1;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	color: var(--gray-100);
	background: hsla(var(--gray-999-basis), 0.72);
	border: 1px solid var(--gray-800);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.portrait .loc .pulse {
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--accent-regular);
	box-shadow: 0 0 0 3px var(--accent-subtle-overlay);
}

@media (min-width: 50em) {
	.portrait {
		max-width: none;
	}
}

/* ==========================================================================
   Impressum (legal notice)
   ========================================================================== */
.imprint-body {
	max-width: 62ch;
	color: var(--gray-200);
}

.imprint-body h2 {
	font-size: var(--text-lg);
	color: var(--gray-0);
}

.imprint-body address {
	font-style: normal;
	line-height: 1.7;
}

.imprint-body a {
	color: var(--link-color);
	text-decoration: 1px solid underline transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--theme-transition);
}

.imprint-body a:hover,
.imprint-body a:focus {
	text-decoration-color: currentColor;
}