/* studioniemeyer — static rebuild of the former Cargo site */

@font-face {
	font-family: "Geist";
	src: url("fonts/Geist.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("fonts/Geist-Italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Geist Mono";
	src: url("fonts/GeistMono.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist Mono";
	src: url("fonts/GeistMono-Italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--ink: 255, 255, 255;
	--bg: #0a0b1d; /* night blue, picks up the UV light of the installations */
	--text: rgb(var(--ink));
	--text-dim: rgba(var(--ink), 0.8);
	--line: rgb(var(--ink));
	--link: #0000ff;
	--gutter: 0.5rem;
	--side: 6vw;
	--bar-h: 3.9rem; /* two lines of nav without JavaScript; main.js sets the measured height */
	--sans: "Geist", "Helvetica Neue", Arial, sans-serif;
	--mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
	color-scheme: dark;
}

/* Root size scales with the viewport like Cargo did (≈18px at 2560px wide) */
html {
	font-size: clamp(13px, 0.4vw + 8px, 22px);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

/* ---------- scrollbar: hairline thumb, wide and blue on hover ---------- */

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track {
	background: var(--bg);
}
::-webkit-scrollbar-thumb {
	background: rgba(var(--ink), 0.22);
	border-left: 8px solid var(--bg);
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
	background-color: var(--link);
	border-left-width: 0;
}
::-webkit-scrollbar-corner {
	background: var(--bg);
}
@supports not selector(::-webkit-scrollbar) {
	html {
		scrollbar-width: thin;
		scrollbar-color: rgba(var(--ink), 0.22) var(--bg);
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1.1rem;
	font-weight: 340; /* running text light … */
	line-height: 1.1;
	letter-spacing: -0.012em;
	-webkit-font-smoothing: antialiased;
	cursor: crosshair;
}
/* … bars and headings stay normal */
.bar,
.intro h1,
.statement-title,
.cv h1,
.cv h2 {
	font-weight: 480;
}
body *,
.gallery figure {
	cursor: crosshair;
}

::selection {
	background: var(--link);
	color: #fff;
}

a {
	color: var(--link);
	text-decoration: none;
}
a:not(.home):hover {
	background: var(--link);
	color: var(--bg);
}
a.home {
	color: inherit;
}
html:not(.js) a[data-u] { display: none; } /* see the <noscript> address next to it */
a:active,
.gallery img:active {
	opacity: 0.7;
}
a:focus-visible,
button:focus-visible,
.gallery figure:focus-visible {
	outline: 1px solid var(--text);
	outline-offset: 2px;
}

hr {
	background: var(--line);
	border: 0;
	height: 1px;
	margin: 0 0 1.1rem;
}

i,
em {
	font-style: italic;
}

/* ---------- 12-column grid ---------- */

.cols {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
	align-items: start;
}
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-2 { grid-column: span 2; }
.cols.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols.thirds.wide-gap { column-gap: 1rem; }
.right { text-align: right; }

/* ---------- fixed top / bottom bars ---------- */

.bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--bg);
	padding: 0.8rem var(--side) 0.6rem;
}
.bar--top {
	top: 0;
	border-bottom: 0.1rem solid var(--line);
}
.bar--top nav a.is-active,
.bar--top .nav-available.is-here {
	color: var(--text);
}
.nav-available { white-space: nowrap; }
.aktuell {
	margin-left: 2.5em;
}
.aktuell a {
	color: var(--link);
}
.progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.1rem;
	height: 0.1rem;
	background: var(--link);
	transform: scaleX(0);
	transform-origin: left;
}
.bar--bottom {
	bottom: 0;
	border-top: 0.1rem solid var(--line);
}
.bar .mobile-only { display: none; }

main {
	padding: var(--bar-h) var(--side) calc(var(--bar-h) + 0.6rem);
}

section,
.gallery {
	scroll-margin-top: var(--bar-h);
}

/* ---------- opening sentence ---------- */

.hero {
	margin: 0;
	padding: 11vh 0 9vh;
	max-width: 18ch;
	font-size: 4.2vw;
	font-weight: 520;
	line-height: 0.95;
	letter-spacing: -0.045em;
}

/* ---------- text blocks ---------- */

.intro {
	padding: 1rem 0 0.6rem;
	border-top: 0.4rem solid var(--link);
	border-bottom: 0.1rem solid var(--line);
	margin-bottom: 0.6rem;
}
.intro h1 {
	grid-column: span 6;
}
.intro .span-4 {
	grid-column: 7 / span 6;
}
.intro h1,
.statement h2 {
	font: inherit;
	margin: 0;
}
.intro p,
.statement p,
.cv p {
	margin: 0 0 1.1em;
}
.intro p:last-child {
	margin-bottom: 0.6rem;
}

/* ---------- justified galleries ---------- */

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gutter);
	align-items: flex-start;
	padding-top: 0.8rem;
	padding-bottom: 10rem;
}
.gallery--other {
	padding-bottom: 8rem;
}
.gallery figure {
	position: relative;
	margin: 0;
	/* JS sets the exact width; this is the no-JS fallback */
	width: calc(25% - var(--gutter));
	transition: opacity 0.8s ease;
}
.reveal .gallery figure:not(.is-in) {
	opacity: 0;
}
.gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.45rem;
	background: rgba(var(--ink), 0.04);
	filter: contrast(1.105) saturate(1.105);
}
.gallery figure:hover img {
	outline: 2px solid var(--link);
	outline-offset: -2px;
}
/* fixed figure number in the corner, e.g. "fig. SKI-26.03" */
.gallery figure[data-fig]::before {
	content: "fig. " attr(data-fig);
	position: absolute;
	top: 0.45rem;
	left: 0.6rem;
	z-index: 1;
	font: 400 0.75rem var(--mono);
	color: #fff;
	pointer-events: none;
}
/* build.js marks images with a bright top-left corner */
.gallery figure.on-light::before {
	color: #000;
}
.caption,
.gallery figcaption {
	display: inline-block;
	margin: 0.5em 0 2em;
	padding: 0.4rem 0 0.4rem 0.8rem;
	border-left: 0.1rem solid var(--line);
	border-bottom: 0.1rem solid var(--line);
	font-family: var(--mono);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--text);
}

figcaption p {
	margin: 0;
}
figcaption p + p {
	margin-top: 1.35em;
}

/* ---------- artist statement / CV ---------- */

.statement {
	padding: 0.8rem 0 0.6rem;
	border-bottom: 0.1rem solid var(--line);
}
.cv {
	padding: 2.2rem 0 0.6rem;
}
.cv h1,
.cv h2 {
	font: inherit;
}
.cv h1 {
	margin: 0 0 2.2em;
}
.cv h2 {
	margin: 2.2em 0 1.1em;
}
.cv h1 + p {
	margin-bottom: 2.2em;
}

/* ---------- big wordmark ---------- */

.wordmark {
	display: block;
	margin: 0;
	padding: 2rem 0;
	font-family: var(--sans);
	font-weight: 650;
	line-height: 0.75;
	letter-spacing: -0.022em;
	color: rgba(var(--ink), 0.06);
	white-space: nowrap;
	font-size: 12vw; /* JS refines this to fit exactly */
	overflow: hidden;
}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */

.mobile-legal {
	display: none;
	margin: 0 0 1rem;
}
.legal-page {
	margin-top: 2.5rem;
	padding-bottom: 6rem;
}
.legal-page h2 {
	font: inherit;
	margin: 2.2em 0 1.1em;
}
.legal-page h2:first-child {
	margin-top: 0;
}
.legal-page p,
.legal-page ul {
	margin: 0 0 1.1em;
}
.legal-page ul {
	padding-left: 1.2em;
}
.legal-page .note {
	color: var(--text-dim);
}
.todo {
	background: #ff0;
	color: #000;
	padding: 0 0.2em;
}

/* ---------- lightbox ---------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 3rem 5rem;
	background: rgba(10, 11, 29, 0.7);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}
.lightbox.open {
	display: flex;
}
.lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
}
.lb-btn {
	position: absolute;
	z-index: 2;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	font: 400 0.85rem var(--mono);
	opacity: 0.85;
}
.lb-btn:hover { opacity: 1; }
.lb-btn:active { opacity: 0.7; }
.lb-btn svg { display: none; }
.lb-close::after { content: "schließen ×"; }
.lb-prev::after { content: "← zurück"; }
.lb-next::after { content: "weiter →"; }
.lb-meta {
	position: absolute;
	left: 20px;
	right: 90px;
	bottom: 18px;
	z-index: 2;
	display: flex;
	gap: 1.6rem;
	align-items: baseline;
	font: 400 0.8rem/1.35 var(--mono);
	color: var(--text-dim);
}
.lb-count { color: var(--text); white-space: nowrap; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
body.lb-open { overflow: hidden; }

/* ---------- Laborelemente (assets/labor.js) ---------- */

/* 1 · Zerfall: hairlines become SVG backgrounds that wander and break up, fig. numbers drift */
.zerfall .bar--top { border-bottom-color: transparent; }
.zerfall .bar--bottom { border-top-color: transparent; }
.zerfall .intro {
	position: relative;
	border-color: transparent;
}
.zerfall .intro::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--shard-top, 0px));
	height: var(--shard-h, 0px);
	background: var(--shard, none) no-repeat left top / 100% 100%;
	pointer-events: none;
}
.zerfall .gallery figcaption { border-color: transparent; }
.zerfall .gallery figure[data-fig]::before {
	content: "fig. " attr(data-fig-z);
	transform: translate(var(--fx, 0), var(--fy, 0));
}
.wm-drawn .wordmark { color: transparent; }
.wm-canvas {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	opacity: 0.4;
}

/* 2 · Beobachtereffekt */
.gallery img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 3 · Messinstrument (only with a mouse) */
.mess .h,
.mess .v {
	position: fixed;
	z-index: 50;
	pointer-events: none;
	background: rgba(var(--ink), 0.16);
}
.mess .h { left: 0; right: 0; top: 0; height: 1px; }
.mess .v { top: 0; bottom: 0; left: 0; width: 1px; }
.mess .out {
	position: fixed;
	z-index: 50;
	left: var(--side);
	bottom: calc(var(--bar-h) + 1.4rem);
	padding: 0.4rem 0.6rem 0.45rem 0;
	background: var(--bg);
	font: 400 0.75rem/1.45 var(--mono);
	white-space: pre;
	pointer-events: none;
}

/* 4 · Geiger: sparks, sound question, sound switch */
.funken {
	position: fixed;
	inset: 0;
	z-index: 200;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
}
button.ton {
	padding: 0;
	border: 0;
	background: none;
	color: var(--link);
	font: inherit;
	letter-spacing: inherit;
}
button.ton:hover {
	background: var(--link);
	color: var(--bg);
}
.ton-frage {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: grid;
	place-items: center;
	padding: var(--side);
	background: rgba(10, 11, 29, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.ton-box {
	max-width: 24rem;
	padding: 1rem 1.2rem 1.1rem;
	background: var(--bg);
	border: 0.1rem solid var(--line);
	border-top: 0.4rem solid var(--link);
	font: 400 0.85rem/1.45 var(--mono);
}
.ton-box p { margin: 0 0 1rem; }
.ton-box p:last-child { margin: 0; display: flex; gap: 1.6rem; }
.ton-box button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--link);
	font: inherit;
}
.ton-box button:hover,
.ton-box button:focus-visible {
	background: var(--link);
	color: var(--bg);
	outline: 0;
}

/* 5 · Feld am Seitenende */
.feld {
	position: relative;
	height: 62svh;
	margin-top: 3rem;
	border-top: 0.1rem solid var(--line);
	border-bottom: 0.1rem solid var(--line);
}
.feld canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.feld p {
	position: absolute;
	left: 0;
	bottom: 0.6rem;
	margin: 0;
	padding: 0.2rem 0.4rem 0.2rem 0;
	background: var(--bg);
	font: 400 0.8rem var(--mono);
	pointer-events: none;
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
	html {
		font-size: 13.5px;
	}
	:root {
		--side: 0.8rem;
		--bar-h: 2.6rem;
	}
	.hero {
		padding: 8vh 0 6vh;
		font-size: 9vw;
	}
	.intro h1,
	.intro .span-4 {
		grid-column: auto;
	}
	.wordmark { font-size: 13.4vw; }
	.aktuell {
		display: block;
		margin: 0.2em 0 0;
	}
	.lb-meta { bottom: 12px; left: 12px; right: 12px; flex-direction: column; gap: 0.3rem; }
	.bar .desktop-only { display: none; }
	.bar .mobile-only { display: grid; }
	.bar .cols { grid-template-columns: 1fr auto; }
	.bar .cols > * { grid-column: auto; }

	.cols:not(.bar-cols),
	.cols.thirds {
		display: block;
	}
	.cols > * + * {
		margin-top: 1.6rem;
	}
	.bar .cols > * + * { margin-top: 0; }

	.gallery figure { width: 100%; }
	.mobile-legal { display: block; }

	.lightbox { padding: 10px; }
	.lb-prev { left: 25px; }
	.lb-next { right: 25px; }
	.lb-close { top: 25px; right: 25px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}