/* ---------------------------------------------------------
   Design tokens — Studio Editorial Warm Neutrals
   --------------------------------------------------------- */
:root {
	--primary: oklch(62% 0.13 35);      /* Terracotta */
	--primary-ink: oklch(30% 0.09 35);  /* Terracotta, dunkler für Text-auf-hell */
	--ink: oklch(22% 0.01 260);         /* Ink Charcoal */
	--ink-soft: oklch(38% 0.015 260);
	--bg: oklch(97% 0.01 70);           /* warmes Off-White */
	--surface: oklch(99% 0.003 70);
	--sand: oklch(93% 0.02 70);         /* Warm Sand */
	--line: oklch(85% 0.02 70);
	--radius: 2px;
	--radius-feature: 6px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 420ms;

	--font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
	--font-body: "Work Sans", "Segoe UI", sans-serif;

	--type-ratio: 1.333;
	--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--step-2: clamp(1.6rem, 1.4rem + 1vw, 2rem);
	--step-3: clamp(2.1rem, 1.7rem + 2vw, 2.85rem);
	--step-4: clamp(2.6rem, 2rem + 3vw, 4.2rem);

	--container-max: 1240px;
	--space-2xs: 0.5rem;
	--space-xs: 0.85rem;
	--space-s: 1.5rem;
	--space-m: clamp(2rem, 1.4rem + 3vw, 4rem);
	--space-l: clamp(3rem, 1.8rem + 6vw, 6.5rem);
	--space-xl: clamp(4rem, 2rem + 10vw, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html.no-smooth-scroll { scroll-behavior: auto; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

.icon { width: 1.4em; height: 1.4em; flex: 0 0 auto; vertical-align: middle; }
.icon--flip { transform: scaleX(-1); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.12;
	margin: 0 0 0.5em;
	text-wrap: balance;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

ul { padding: 0; margin: 0; list-style: none; }

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section-pad { padding-block: var(--space-l); }

.eyebrow-rule {
	font-family: var(--font-body);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
	margin: 0 0 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
	display: inline-block;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem;
	width: auto; height: auto; clip: auto;
	background: var(--ink); color: var(--bg);
	padding: 0.75rem 1.25rem; z-index: 1000;
	border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}