/* ============================================================
   eLearningTrends — Liquid Glass
   Dark-first, backdrop-blurred, ambient-lit editorial UI.
   Tokens -> Atmosphere -> Reset -> Layout -> Components -> Utilities
   ============================================================ */

/* -------- Tokens -------------------------------------------- */
:root {
	color-scheme: light dark;

	/* Base (light, primary) — sunlit frosted-glass */
	--bg:              #f2f2f7;
	--bg-deep:         #eaeaf1;
	--ink:             #0b0b12;
	--ink-2:           rgba(11, 11, 18, 0.78);
	--ink-3:           rgba(11, 11, 18, 0.55);
	--ink-muted:       rgba(11, 11, 18, 0.40);

	/* Glass layers */
	--glass-1:         rgba(255, 255, 255, 0.55);
	--glass-2:         rgba(255, 255, 255, 0.66);
	--glass-3:         rgba(255, 255, 255, 0.78);
	--glass-4:         rgba(255, 255, 255, 0.88);
	--glass-heavy:     rgba(255, 255, 255, 0.72);
	--edge:            rgba(11, 11, 18, 0.08);
	--edge-strong:     rgba(11, 11, 18, 0.14);
	--rim:             rgba(255, 255, 255, 0.95);
	--rim-soft:        rgba(255, 255, 255, 0.65);
	--inset-shadow:    rgba(11, 11, 18, 0.12);

	/* Aurora accents */
	--aurora-1:        #8b5cf6;   /* violet */
	--aurora-2:        #22d3ee;   /* cyan */
	--aurora-3:        #f59e0b;   /* amber */
	--aurora-4:        #ec4899;   /* magenta */
	--accent:          #7c3aed;   /* primary interactive */
	--accent-2:        #0891b2;   /* secondary interactive */
	--accent-ink:      #ffffff;

	/* Semantic */
	--success:         #059669;
	--warning:         #d97706;
	--danger:          #dc2626;

	/* Radii */
	--r-xs:            10px;
	--r-sm:            14px;
	--r-md:            20px;
	--r-lg:            28px;
	--r-xl:            36px;
	--r-pill:          999px;

	/* Shadows / depth */
	--shadow-1:        0 1px 0 var(--rim) inset, 0 10px 30px -16px rgba(11, 11, 18, 0.22);
	--shadow-2:        0 1px 0 var(--rim) inset, 0 0 0 1px var(--edge) inset, 0 24px 60px -28px rgba(11, 11, 18, 0.28);
	--shadow-3:        0 1px 0 var(--rim) inset, 0 0 0 1px var(--edge-strong) inset, 0 40px 100px -50px rgba(11, 11, 18, 0.35);
	--glow-violet:     0 0 60px -18px rgba(139, 92, 246, 0.45);
	--glow-cyan:       0 0 60px -18px rgba(34, 211, 238, 0.35);

	/* Blur */
	--blur-1:          blur(12px) saturate(140%);
	--blur-2:          blur(24px) saturate(160%);
	--blur-3:          blur(48px) saturate(180%);

	/* Typography — system-only stack (no external font requests, DSGVO-konform).
	   Display + body + UI all share the system sans; mono stays mono. */
	--font-display:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", "Arial", system-ui, sans-serif;
	--font-serif:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", "Arial", system-ui, sans-serif;
	--font-ui:         -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", "Arial", system-ui, sans-serif;
	--font-mono:       ui-monospace, SFMono-Regular, "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

	/* Layout */
	--container:       1240px;
	--container-narrow: 780px;
	--container-prose:  700px;

	/* Space scale */
	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
	--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
	--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

	--header-h:        76px;
	--ease:            cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark mode — opt-in via OS preference or manual toggle. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:              #07070c;
		--bg-deep:         #040407;
		--ink:             #f5f5f7;
		--ink-2:           rgba(245, 245, 247, 0.78);
		--ink-3:           rgba(245, 245, 247, 0.56);
		--ink-muted:       rgba(245, 245, 247, 0.42);

		--glass-1:         rgba(255, 255, 255, 0.04);
		--glass-2:         rgba(255, 255, 255, 0.06);
		--glass-3:         rgba(255, 255, 255, 0.09);
		--glass-4:         rgba(255, 255, 255, 0.14);
		--glass-heavy:     rgba(10, 10, 16, 0.62);
		--edge:            rgba(255, 255, 255, 0.08);
		--edge-strong:     rgba(255, 255, 255, 0.14);
		--rim:             rgba(255, 255, 255, 0.18);
		--rim-soft:        rgba(255, 255, 255, 0.08);

		--shadow-1:        0 1px 0 var(--rim-soft) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
		--shadow-2:        0 1px 0 var(--rim) inset, 0 0 0 1px var(--edge) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.25);
		--shadow-3:        0 1px 0 var(--rim) inset, 0 0 0 1px var(--edge-strong) inset, 0 40px 100px -40px rgba(0, 0, 0, 0.85), 0 8px 24px -12px rgba(0, 0, 0, 0.45);

		--accent:          #a78bfa;
		--accent-2:        #67e8f9;
		--accent-ink:      #0a0a0f;

		--success:         #34d399;
		--warning:         #fbbf24;
		--danger:          #fb7185;
	}
}

[data-theme="dark"] {
	--bg:              #07070c;
	--bg-deep:         #040407;
	--ink:             #f5f5f7;
	--ink-2:           rgba(245, 245, 247, 0.78);
	--ink-3:           rgba(245, 245, 247, 0.56);
	--ink-muted:       rgba(245, 245, 247, 0.42);

	--glass-1:         rgba(255, 255, 255, 0.04);
	--glass-2:         rgba(255, 255, 255, 0.06);
	--glass-3:         rgba(255, 255, 255, 0.09);
	--glass-4:         rgba(255, 255, 255, 0.14);
	--glass-heavy:     rgba(10, 10, 16, 0.62);
	--edge:            rgba(255, 255, 255, 0.08);
	--edge-strong:     rgba(255, 255, 255, 0.14);
	--rim:             rgba(255, 255, 255, 0.18);
	--rim-soft:        rgba(255, 255, 255, 0.08);

	--shadow-1:        0 1px 0 var(--rim-soft) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	--shadow-2:        0 1px 0 var(--rim) inset, 0 0 0 1px var(--edge) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.25);
	--shadow-3:        0 1px 0 var(--rim) inset, 0 0 0 1px var(--edge-strong) inset, 0 40px 100px -40px rgba(0, 0, 0, 0.85), 0 8px 24px -12px rgba(0, 0, 0, 0.45);

	--accent:          #a78bfa;
	--accent-2:        #67e8f9;
	--accent-ink:      #0a0a0f;

	--success:         #34d399;
	--warning:         #fbbf24;
	--danger:          #fb7185;
}

/* -------- Reset --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}
body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -0.005em;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--edge); margin: var(--s-12) 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

::selection { background: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--ink); }

/* Skip link */
.elt-skip {
	position: fixed; left: -9999px; top: 16px;
	background: var(--ink); color: var(--bg);
	padding: 10px 18px; border-radius: var(--r-pill);
	font-weight: 600; z-index: 1000; letter-spacing: -0.01em;
}
.elt-skip:focus { left: 16px; }

/* -------- Atmosphere: aurora, grain, cursor glow ------------ */
body::before {
	content: "";
	position: fixed;
	inset: -20vh -10vw;
	z-index: -3;
	background:
		radial-gradient(42% 42% at 12% 10%, rgba(139, 92, 246, 0.22), transparent 65%),
		radial-gradient(32% 32% at 88% 18%, rgba(34, 211, 238, 0.18), transparent 68%),
		radial-gradient(38% 38% at 72% 78%, rgba(236, 72, 153, 0.14), transparent 72%),
		radial-gradient(48% 38% at 22% 90%, rgba(245, 158, 11, 0.12), transparent 72%),
		var(--bg-deep);
	filter: saturate(130%);
	pointer-events: none;
	animation: elt-drift 28s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body::before {
		background:
			radial-gradient(45% 45% at 18% 12%, rgba(139, 92, 246, 0.45), transparent 62%),
			radial-gradient(35% 35% at 82% 20%, rgba(34, 211, 238, 0.32), transparent 65%),
			radial-gradient(40% 40% at 70% 75%, rgba(236, 72, 153, 0.28), transparent 70%),
			radial-gradient(50% 40% at 22% 88%, rgba(245, 158, 11, 0.22), transparent 70%),
			var(--bg-deep);
		filter: saturate(120%);
	}
}
[data-theme="dark"] body::before {
	background:
		radial-gradient(45% 45% at 18% 12%, rgba(139, 92, 246, 0.45), transparent 62%),
		radial-gradient(35% 35% at 82% 20%, rgba(34, 211, 238, 0.32), transparent 65%),
		radial-gradient(40% 40% at 70% 75%, rgba(236, 72, 153, 0.28), transparent 70%),
		radial-gradient(50% 40% at 22% 88%, rgba(245, 158, 11, 0.22), transparent 70%),
		var(--bg-deep);
	filter: saturate(120%);
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
	opacity: 0.08;
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Cursor-following glow — set via JS */
.elt-cursor-glow {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 30%),
		color-mix(in oklab, var(--aurora-1) 35%, transparent),
		color-mix(in oklab, var(--aurora-2) 18%, transparent) 40%,
		transparent 62%);
	transition: opacity 0.4s var(--ease);
	opacity: 0.9;
}
@media (pointer: coarse) { .elt-cursor-glow { display: none; } }

@keyframes elt-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-3%, -2%, 0) scale(1.06); }
	100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}

/* -------- Layout primitives --------------------------------- */
.elt-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--s-6);
	position: relative;
}
.elt-container--narrow { max-width: var(--container-narrow); }

.elt-section { padding: var(--s-20) 0; position: relative; }
.elt-section--lg { padding: var(--s-24) 0; }
.elt-section--sm { padding: var(--s-12) 0; }

@media (max-width: 768px) {
	.elt-section { padding: var(--s-16) 0; }
	.elt-section--lg { padding: var(--s-20) 0; }
	.elt-section--sm { padding: var(--s-10) 0; }
}

.elt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin: 0 0 var(--s-5);
	padding: 6px 14px 6px 10px;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	backdrop-filter: var(--blur-1);
	-webkit-backdrop-filter: var(--blur-1);
}
.elt-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 14px var(--accent), 0 0 28px color-mix(in oklab, var(--accent) 60%, transparent);
}

.elt-section-head { margin-bottom: var(--s-12); max-width: 760px; }
.elt-section-head h2 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0 0 var(--s-4);
	font-weight: 800;
	font-style: normal;
	color: var(--ink);
}
.elt-section-head h2 em {
	font-style: italic;
	background: linear-gradient(100deg, var(--aurora-2) 0%, var(--aurora-1) 50%, var(--aurora-4) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.elt-section-head p {
	font-family: var(--font-ui);
	color: var(--ink-2);
	font-size: 1.0625rem;
	max-width: 62ch;
	margin: 0;
	line-height: 1.55;
}

/* -------- Glass primitive (used by cards, panels) ----------- */
.elt-glass {
	position: relative;
	background: linear-gradient(180deg, var(--glass-3) 0%, var(--glass-1) 60%);
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
	backdrop-filter: var(--blur-2);
	-webkit-backdrop-filter: var(--blur-2);
	box-shadow: var(--shadow-2);
	overflow: hidden;
	isolation: isolate;
}
.elt-glass::before {
	/* Specular top highlight */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 22%);
	pointer-events: none;
	z-index: 0;
}
.elt-glass > * { position: relative; z-index: 1; }

/* -------- Header / Nav -------------------------------------- */
.elt-header {
	position: sticky;
	top: 12px;
	z-index: 60;
	padding: 0 var(--s-4);
	margin-top: 12px;
	transition: top 0.3s var(--ease);
}
.elt-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	height: var(--header-h);
	padding: 0 16px 0 20px;
	max-width: var(--container);
	margin: 0 auto;
	position: relative;
	background: var(--glass-heavy);
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	backdrop-filter: var(--blur-3);
	-webkit-backdrop-filter: var(--blur-3);
	box-shadow: var(--shadow-2);
	transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), border-radius 0.3s var(--ease);
}
.elt-header__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%);
	pointer-events: none;
}
.elt-header.is-scrolled .elt-header__inner {
	box-shadow: var(--shadow-3);
}

.elt-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.012em;
	color: var(--ink);
	z-index: 1;
}
.elt-brand img, .elt-brand svg { height: 30px; width: auto; }
.elt-brand__mark {
	width: 30px; height: 30px;
	border-radius: 9px;
	background:
		radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--aurora-1) 85%, white) 0%, var(--aurora-1) 40%, var(--aurora-4) 100%);
	color: white;
	display: inline-grid;
	place-items: center;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 12px -4px rgba(139, 92, 246, 0.5);
}

.elt-nav {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-left: auto;
	position: relative;
	z-index: 1;
}
.elt-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.elt-nav__list a {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
	padding: 8px 14px;
	border-radius: var(--r-pill);
	transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.elt-nav__list a:hover { color: var(--ink); background: var(--glass-3); }
.elt-nav__list .current-menu-item > a,
.elt-nav__list .current_page_item > a {
	color: var(--ink);
	background: var(--glass-4);
	box-shadow: 0 1px 0 var(--rim-soft) inset, 0 0 0 1px var(--edge) inset;
}

.elt-nav__actions { display: flex; align-items: center; gap: 6px; }

.elt-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill);
	display: inline-grid;
	place-items: center;
	color: var(--ink-2);
	background: transparent;
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.elt-icon-btn:hover { background: var(--glass-3); color: var(--ink); }
.elt-icon-btn:active { transform: scale(0.94); }
.elt-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }

.elt-nav__toggle {
	display: none;
	width: 44px; height: 44px;
	border-radius: var(--r-pill);
	color: var(--ink);
	background: var(--glass-2);
	border: 1px solid var(--edge);
	backdrop-filter: var(--blur-1);
	place-items: center;
}
.elt-nav__toggle:hover { background: var(--glass-3); }

@media (max-width: 960px) {
	.elt-nav__toggle { display: inline-grid; }
	.elt-nav__list, .elt-nav__actions { display: none; }

	/* Open state — make .elt-nav itself the sheet, anchored to the viewport
	   so width doesn't collapse to 0 like it does in the inline-flex layout.
	   Background is near-opaque so menu items stay readable even when
	   backdrop-filter is unsupported or disabled by data-perf-mode="lite". */
	.elt-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: fixed;
		top: calc(var(--header-h) + 24px);
		left: 16px;
		right: 16px;
		max-height: calc(100vh - var(--header-h) - 48px);
		overflow-y: auto;
		padding: var(--s-3) var(--s-5);
		background: rgba(255, 255, 255, 0.96);
		border: 1px solid var(--edge-strong);
		border-radius: var(--r-lg);
		backdrop-filter: var(--blur-3);
		-webkit-backdrop-filter: var(--blur-3);
		box-shadow: var(--shadow-3);
		z-index: 70;
		margin: 0;
	}
	[data-theme="dark"] .elt-nav.is-open {
		background: rgba(10, 10, 16, 0.96);
	}
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .elt-nav.is-open {
			background: rgba(10, 10, 16, 0.96);
		}
	}
	.elt-nav.is-open .elt-nav__list,
	.elt-nav.is-open .elt-nav__actions {
		display: flex;
		width: 100%;
	}
	.elt-nav.is-open .elt-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--s-2) 0 var(--s-3);
		border-bottom: 1px solid var(--edge);
		margin-bottom: var(--s-3);
	}
	.elt-nav.is-open .elt-nav__list a {
		padding: 14px 4px;
		font-size: 15.5px;
		border-radius: 0;
		border-bottom: 1px solid var(--edge);
	}
	.elt-nav.is-open .elt-nav__list li:last-child a { border-bottom: 0; }
	.elt-nav.is-open .elt-nav__list a:hover { background: transparent; color: var(--accent); }
	.elt-nav.is-open .elt-nav__actions {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0 0 var(--s-3);
	}
	.elt-nav.is-open .elt-nav__actions .elt-icon-btn { flex: 0 0 44px; height: 44px; }
	.elt-nav.is-open .elt-nav__actions .elt-btn { flex: 1; min-width: 140px; height: 44px; }
}

/* -------- Buttons ------------------------------------------- */
.elt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	border-radius: var(--r-pill);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 14.5px;
	letter-spacing: -0.006em;
	white-space: nowrap;
	border: 1px solid transparent;
	backdrop-filter: var(--blur-1);
	-webkit-backdrop-filter: var(--blur-1);
	transition: transform 0.15s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.25s var(--ease);
	position: relative;
	isolation: isolate;
}
.elt-btn:hover { transform: translateY(-1px); }
.elt-btn:active { transform: translateY(0) scale(0.98); }

.elt-btn--primary {
	background:
		radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--aurora-2) 60%, transparent), transparent 60%),
		linear-gradient(180deg, var(--aurora-1) 0%, color-mix(in oklab, var(--aurora-1) 85%, black) 100%);
	color: white;
	border-color: color-mix(in oklab, white 20%, transparent);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 0 0 1px color-mix(in oklab, white 12%, transparent) inset,
		0 10px 30px -10px rgba(139, 92, 246, 0.55),
		0 2px 6px rgba(0, 0, 0, 0.3);
}
.elt-btn--primary:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.35) inset,
		0 0 0 1px color-mix(in oklab, white 18%, transparent) inset,
		0 18px 40px -10px rgba(139, 92, 246, 0.65),
		0 4px 10px rgba(0, 0, 0, 0.35);
}

.elt-btn--ghost {
	background: var(--glass-2);
	color: var(--ink);
	border-color: var(--edge);
	box-shadow: 0 1px 0 var(--rim-soft) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}
.elt-btn--ghost:hover {
	background: var(--glass-3);
	border-color: var(--edge-strong);
}

.elt-btn--quiet { background: transparent; color: var(--ink-2); }
.elt-btn--quiet:hover { color: var(--ink); background: var(--glass-2); }

.elt-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.elt-btn--lg { height: 54px; padding: 0 28px; font-size: 15.5px; }

/* -------- Hero ---------------------------------------------- */
.elt-hero {
	position: relative;
	padding: clamp(var(--s-12), 10vw, var(--s-24)) 0 var(--s-16);
	overflow: visible;
}
.elt-hero__inner { position: relative; z-index: 1; }
.elt-hero__lede { max-width: 880px; }

.elt-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-style: normal;
	font-size: clamp(2.75rem, 8vw, 6.25rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
	margin: 0 0 var(--s-6);
	color: var(--ink);
}
.elt-hero__title em {
	background: linear-gradient(100deg, var(--aurora-2) 0%, var(--aurora-1) 40%, var(--aurora-4) 80%, var(--aurora-3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: italic;
	font-weight: 800;
}

.elt-hero__subtitle {
	font-family: var(--font-ui);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	color: var(--ink-2);
	max-width: 60ch;
	margin: 0 0 var(--s-10);
	line-height: 1.55;
	letter-spacing: -0.005em;
}

.elt-hero__actions {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
	align-items: center;
}

/* Entrance animation for hero text */
@keyframes elt-rise {
	from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
	to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.elt-hero .elt-eyebrow  { animation: elt-rise 0.7s var(--ease-out) both; }
.elt-hero__title        { animation: elt-rise 0.9s var(--ease-out) 0.08s both; }
.elt-hero__subtitle     { animation: elt-rise 0.9s var(--ease-out) 0.2s both; }
.elt-hero__actions      { animation: elt-rise 0.9s var(--ease-out) 0.32s both; }

/* -------- Homepage grids ------------------------------------ */
.elt-featured-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--s-6);
	margin-top: var(--s-10);
}
@media (max-width: 980px) { .elt-featured-grid { grid-template-columns: 1fr; } }

.elt-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6);
}
@media (max-width: 980px) { .elt-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .elt-card-grid { grid-template-columns: 1fr; } }

.elt-side-stack {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

/* -------- Article cards ------------------------------------- */
.elt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	background: linear-gradient(180deg, var(--glass-3) 0%, var(--glass-1) 60%);
	border: 1px solid var(--edge);
	border-radius: var(--r-md);
	overflow: hidden;
	backdrop-filter: var(--blur-2);
	-webkit-backdrop-filter: var(--blur-2);
	box-shadow: var(--shadow-1);
	isolation: isolate;
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.25s var(--ease-out);
}
.elt-card::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%);
	pointer-events: none;
	z-index: 1;
}
.elt-card::after {
	/* Aurora halo on hover */
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--aurora-2), var(--aurora-1) 50%, var(--aurora-4));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
	pointer-events: none;
	z-index: 2;
}
.elt-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-3);
	border-color: transparent;
}
.elt-card:hover::after { opacity: 0.8; }

.elt-card__media {
	aspect-ratio: 16/10;
	background: var(--glass-2);
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.elt-card__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--bg-deep) 40%, transparent));
	pointer-events: none;
}
.elt-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out), filter 0.4s var(--ease-out);
	filter: saturate(1.1) contrast(1.02);
}
.elt-card:hover .elt-card__media img { transform: scale(1.05); filter: saturate(1.25) contrast(1.05); }

.elt-card__body {
	padding: var(--s-5) var(--s-6) var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	position: relative;
	z-index: 2;
}
.elt-card__cat {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
.elt-card__title {
	font-family: var(--font-ui);
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.018em;
	margin: 0;
	font-weight: 600;
}
.elt-card__title a { color: var(--ink); transition: color 0.18s var(--ease); }
.elt-card:hover .elt-card__title a { color: var(--ink); }
.elt-card__excerpt {
	font-family: var(--font-ui);
	color: var(--ink-3);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elt-card__meta {
	display: flex; align-items: center; gap: var(--s-3);
	color: var(--ink-muted);
	font-size: 12.5px;
	margin-top: auto;
	font-variant-numeric: tabular-nums;
}

/* Featured (large) card */
.elt-card--featured .elt-card__media { aspect-ratio: 16/10; }
.elt-card--featured .elt-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-style: normal;
	font-size: clamp(1.75rem, 3vw, 2.625rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.elt-card--featured .elt-card__excerpt {
	font-size: 1.0625rem;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	line-height: 1.55;
}
.elt-card--featured .elt-card__body { padding: var(--s-8); gap: var(--s-4); }

/* Compact (sidebar) card */
.elt-card--compact { flex-direction: row; align-items: stretch; }
.elt-card--compact .elt-card__media { flex: 0 0 36%; aspect-ratio: 1/1; }
.elt-card--compact .elt-card__body { padding: var(--s-4) var(--s-5); gap: var(--s-2); }
.elt-card--compact .elt-card__title { font-size: 1.0625rem; }
.elt-card--compact .elt-card__excerpt { display: none; }

/* -------- Tag pills ----------------------------------------- */
.elt-tags {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; padding: 0; margin: 0;
}
.elt-tag {
	display: inline-flex; align-items: center;
	padding: 6px 14px;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	color: var(--ink-2);
	border-radius: var(--r-pill);
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
	backdrop-filter: var(--blur-1);
	-webkit-backdrop-filter: var(--blur-1);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.elt-tag:hover {
	background: var(--glass-3);
	color: var(--ink);
	border-color: color-mix(in oklab, var(--accent) 40%, var(--edge));
}

/* -------- Article (single) ---------------------------------- */
.elt-article { padding: var(--s-16) 0 var(--s-20); }

.elt-article__head {
	max-width: var(--container-narrow);
	margin: 0 auto var(--s-12);
}
.elt-article__head .elt-meta__cat {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 6px 14px;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	backdrop-filter: var(--blur-1);
	margin-bottom: var(--s-6);
}
.elt-article__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-style: normal;
	font-size: clamp(2.25rem, 5.5vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin: 0 0 var(--s-6);
	color: var(--ink);
}
.elt-article__title em {
	font-style: italic;
}
.elt-article__deck {
	font-family: var(--font-ui);
	font-size: 1.1875rem;
	color: var(--ink-2);
	line-height: 1.5;
	max-width: 62ch;
	margin: 0;
	font-weight: 400;
}

.elt-article__hero {
	max-width: var(--container);
	margin: 0 auto var(--s-12);
	padding: 6px;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: var(--r-xl);
	backdrop-filter: var(--blur-2);
	-webkit-backdrop-filter: var(--blur-2);
	box-shadow: var(--shadow-3);
	position: relative;
}
.elt-article__hero::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 24%);
	pointer-events: none;
}
.elt-article__hero img {
	aspect-ratio: 16/9;
	object-fit: cover;
	width: 100%;
	border-radius: calc(var(--r-xl) - 6px);
	display: block;
	filter: saturate(1.08);
}

/* Prose — serif body */
.elt-prose {
	max-width: var(--container-prose);
	margin: 0 auto;
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	line-height: 1.7;
	color: var(--ink);
	font-weight: 400;
	letter-spacing: -0.003em;
}
.elt-prose > p,
.elt-prose > ul,
.elt-prose > ol,
.elt-prose > blockquote,
.elt-prose > figure,
.elt-prose > pre,
.elt-prose > table { margin: 0 0 1.35em; }

.elt-prose h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-style: normal;
	font-size: clamp(1.75rem, 2.8vw, 2.25rem);
	letter-spacing: -0.022em;
	line-height: 1.08;
	margin: 2.2em 0 0.65em;
	color: var(--ink);
}
.elt-prose h3 {
	font-family: var(--font-ui);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	margin: 1.9em 0 0.55em;
	color: var(--ink);
}

.elt-prose__lead {
	font-family: var(--font-serif);
	font-size: 1.3125rem;
	line-height: 1.5;
	color: var(--ink-2);
	font-weight: 400;
	margin-bottom: 1.6em;
}
.elt-prose__lead::first-letter {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 800;
	font-size: 4.6em;
	line-height: 0.85;
	letter-spacing: -0.04em;
	float: left;
	padding: 0.08em 0.12em 0 0;
	background: linear-gradient(160deg, var(--aurora-2), var(--aurora-1) 55%, var(--aurora-4));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.elt-prose a {
	color: var(--ink);
	background-image: linear-gradient(transparent 88%, color-mix(in oklab, var(--accent) 55%, transparent) 0);
	background-size: 100% 100%;
	transition: color 0.18s var(--ease), background-image 0.25s var(--ease);
}
.elt-prose a:hover {
	color: var(--accent);
	background-image: linear-gradient(transparent 78%, color-mix(in oklab, var(--accent) 30%, transparent) 0);
}
.elt-prose a[rel~="sponsored"]::after {
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	margin-left: 4px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
	opacity: 0.8;
}

.elt-prose blockquote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.625rem;
	line-height: 1.3;
	color: var(--ink);
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1em;
	border-left: 2px solid var(--accent);
	position: relative;
}
.elt-prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--glass-2);
	padding: 1px 7px;
	border-radius: 6px;
	border: 1px solid var(--edge);
}
.elt-prose pre {
	background: var(--glass-2);
	border: 1px solid var(--edge);
	padding: var(--s-5);
	border-radius: var(--r-sm);
	overflow-x: auto;
	font-size: 0.9em;
	backdrop-filter: var(--blur-1);
}
.elt-prose img, .elt-prose figure img { border-radius: var(--r-sm); box-shadow: var(--shadow-1); }
.elt-prose figcaption {
	font-family: var(--font-ui);
	font-size: 0.875em;
	color: var(--ink-muted);
	text-align: center;
	margin-top: var(--s-2);
}
.elt-prose ul, .elt-prose ol { padding-left: 1.3em; }
.elt-prose li { margin-bottom: 0.4em; }
.elt-prose hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--edge-strong), transparent);
	margin: var(--s-12) auto;
	max-width: 180px;
}

.elt-prose .alignwide,
.elt-prose .alignfull,
.elt-prose .wp-block-image.alignwide,
.elt-prose .wp-block-image.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
.elt-prose .alignwide {
	max-width: min(100vw, 960px);
	margin-left: auto; margin-right: auto;
}

/* Article meta line */
.elt-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	color: var(--ink-3);
	font-family: var(--font-ui);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}
.elt-meta__sep {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor; opacity: 0.45;
}
.elt-meta__cat {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 11.5px;
}
.elt-meta__author strong { color: var(--ink); font-weight: 500; }

/* Article footer: tags + share */
.elt-article__foot {
	max-width: var(--container-prose);
	margin: var(--s-16) auto 0;
	padding-top: var(--s-8);
	border-top: 1px solid var(--edge);
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}
.elt-share {
	display: flex; align-items: center; gap: var(--s-3);
	color: var(--ink-muted);
	font-family: var(--font-ui);
	font-size: 13.5px;
	letter-spacing: -0.005em;
}
.elt-share a {
	width: 38px; height: 38px;
	border-radius: var(--r-pill);
	display: inline-grid; place-items: center;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	color: var(--ink-2);
	backdrop-filter: var(--blur-1);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.elt-share a:hover {
	background: var(--glass-3);
	color: var(--accent);
	border-color: color-mix(in oklab, var(--accent) 40%, var(--edge));
	transform: translateY(-1px);
}
.elt-share svg { width: 16px; height: 16px; }

/* Source attribution card */
.elt-source {
	max-width: var(--container-prose);
	margin: var(--s-10) auto 0;
	padding: var(--s-5) var(--s-6);
	display: flex;
	gap: var(--s-4);
	align-items: center;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: var(--r-md);
	backdrop-filter: var(--blur-2);
	-webkit-backdrop-filter: var(--blur-2);
	position: relative;
	overflow: hidden;
}
.elt-source::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
	pointer-events: none;
}
.elt-source__icon {
	flex: 0 0 44px; width: 44px; height: 44px;
	border-radius: 12px;
	background:
		radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--aurora-2) 50%, transparent), transparent 55%),
		var(--accent);
	color: white;
	display: grid; place-items: center;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 24px -8px rgba(139, 92, 246, 0.5);
	position: relative;
	z-index: 1;
}
.elt-source__icon svg { width: 22px; height: 22px; }
.elt-source__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.elt-source__label {
	font-family: var(--font-ui);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.elt-source__link {
	display: block;
	font-family: var(--font-ui);
	color: var(--ink);
	font-weight: 500;
	margin-top: 3px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	letter-spacing: -0.006em;
}
.elt-source__link:hover { color: var(--accent); }
.elt-source__host {
	color: var(--ink-muted);
	font-size: 13px;
	font-family: var(--font-mono);
}

/* AdSense block */
.elt-ad-block {
	max-width: var(--container-prose);
	margin: var(--s-12) auto !important;
	padding: var(--s-5);
	background: var(--glass-2);
	border: 1px dashed var(--edge-strong);
	border-radius: var(--r-md);
	backdrop-filter: var(--blur-1);
	-webkit-backdrop-filter: var(--blur-1);
	position: relative;
}
.elt-ad-block::before {
	content: "Anzeige";
	position: absolute;
	top: -11px; left: 20px;
	padding: 3px 10px;
	background: var(--glass-heavy);
	color: var(--ink-muted);
	font-family: var(--font-ui);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	backdrop-filter: var(--blur-2);
}

/* -------- Newsletter CTA ------------------------------------ */
.elt-cta {
	margin: var(--s-24) 0 var(--s-16);
	padding: var(--s-16);
	border-radius: var(--r-xl);
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(34, 211, 238, 0.22), transparent 60%),
		radial-gradient(80% 100% at 0% 100%, rgba(139, 92, 246, 0.25), transparent 60%),
		radial-gradient(60% 60% at 50% 100%, rgba(236, 72, 153, 0.14), transparent 70%),
		var(--glass-2);
	border: 1px solid var(--edge-strong);
	backdrop-filter: var(--blur-3);
	-webkit-backdrop-filter: var(--blur-3);
	box-shadow: var(--shadow-3);
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--s-10);
	align-items: center;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.elt-cta::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 20%);
	pointer-events: none;
	z-index: 0;
}
.elt-cta > * { position: relative; z-index: 1; }

@media (max-width: 880px) {
	.elt-cta { grid-template-columns: 1fr; padding: var(--s-10); }
}

.elt-cta__title {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-4);
}
.elt-cta__text {
	color: var(--ink-2);
	margin: 0 0 var(--s-5);
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 42ch;
}
.elt-cta__form {
	display: flex;
	gap: 6px;
	background: var(--glass-heavy);
	padding: 6px;
	border-radius: var(--r-pill);
	border: 1px solid var(--edge);
	backdrop-filter: var(--blur-2);
	box-shadow: var(--shadow-2);
}
.elt-cta__form input[type="email"] {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 12px 18px;
	font-size: 15px;
	min-width: 0;
	color: var(--ink);
}
.elt-cta__form input[type="email"]::placeholder { color: var(--ink-muted); }
.elt-cta__form input[type="email"]:focus { outline: 0; }
.elt-cta__form .elt-btn {
	height: 42px;
	padding: 0 22px;
	font-size: 14px;
}
.elt-cta__hint {
	font-size: 12.5px;
	color: var(--ink-muted);
	margin: var(--s-3) 0 0;
}

/* -------- Pagination ---------------------------------------- */
.elt-pagination, nav.pagination {
	max-width: var(--container-prose);
	margin: var(--s-12) auto 0;
}
.nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	padding: 6px;
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	backdrop-filter: var(--blur-1);
	width: fit-content;
	margin: 0 auto;
}
.page-numbers {
	display: inline-grid; place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.page-numbers:hover { background: var(--glass-3); color: var(--ink); }
.page-numbers.current {
	background: var(--accent);
	color: white;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 16px -4px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* -------- Forms (search, comments) -------------------------- */
.elt-input,
.elt-search input[type="search"],
.elt-comment-form input,
.elt-comment-form textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	background: var(--glass-2);
	color: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	backdrop-filter: var(--blur-1);
	font-size: 15px;
	font-family: var(--font-ui);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.elt-input:focus,
.elt-search input:focus,
.elt-comment-form input:focus,
.elt-comment-form textarea:focus {
	outline: 0;
	border-color: color-mix(in oklab, var(--accent) 50%, var(--edge));
	background: var(--glass-3);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}

.elt-search {
	position: relative;
	display: flex;
	max-width: 580px;
	margin: 0 auto;
}
.elt-search input[type="search"] {
	padding-left: 48px;
	height: 56px;
	border-radius: var(--r-pill);
	background: var(--glass-heavy);
	backdrop-filter: var(--blur-2);
	box-shadow: var(--shadow-2);
}
.elt-search::before {
	content: "";
	position: absolute;
	left: 18px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px;
	background: var(--ink-muted);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
	pointer-events: none;
}
.elt-search button[type="submit"] {
	position: absolute;
	right: 7px; top: 50%; transform: translateY(-50%);
	height: 42px;
	padding: 0 20px;
}

/* -------- Comments ------------------------------------------ */
.elt-comments { max-width: var(--container-prose); margin: var(--s-16) auto 0; }
.elt-comments__title {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	font-size: 2rem;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-8);
	color: var(--ink);
}
.elt-comment-list { list-style: none; padding: 0; margin: 0 0 var(--s-12); }
.elt-comment { padding: var(--s-6) 0; border-bottom: 1px solid var(--edge); }
.elt-comment .children {
	list-style: none;
	padding-left: var(--s-8);
	border-left: 1px solid var(--edge);
	margin-top: var(--s-4);
}
.elt-comment__header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.elt-comment__avatar { border-radius: 50%; border: 1px solid var(--edge); }
.elt-comment__author strong { display: block; font-weight: 600; color: var(--ink); }
.elt-comment__author time { color: var(--ink-muted); font-size: 13px; }
.elt-comment__footer { margin-top: var(--s-3); font-size: 13.5px; }
.elt-comment__footer a { color: var(--accent); font-weight: 500; }
.elt-comment-form { display: grid; gap: var(--s-4); }

/* -------- Archive / Page header ----------------------------- */
.elt-archive-head {
	padding: var(--s-12) 0 var(--s-6);
	text-align: left;
	position: relative;
}
.elt-archive-head h1 {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0 0 var(--s-3);
	color: var(--ink);
}
.elt-archive-head .description,
.elt-archive-head p {
	color: var(--ink-2);
	font-size: 1.0625rem;
	max-width: 62ch;
	margin: 0;
	line-height: 1.55;
}
.elt-archive-head em {
	font-style: italic;
	background: linear-gradient(100deg, var(--aurora-2), var(--aurora-1) 60%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.elt-page {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: var(--s-16) var(--s-6);
}
.elt-page__title {
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0 0 var(--s-8);
	color: var(--ink);
}

/* -------- Footer -------------------------------------------- */
.elt-footer {
	margin-top: var(--s-24);
	padding: var(--s-20) 0 var(--s-10);
	position: relative;
}
.elt-footer::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0; height: 1px;
	background: linear-gradient(90deg, transparent, var(--edge-strong), transparent);
}
.elt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--s-10);
}
@media (max-width: 880px) { .elt-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
@media (max-width: 540px) { .elt-footer__grid { grid-template-columns: 1fr; } }

.elt-footer__brand p {
	color: var(--ink-3);
	margin: var(--s-4) 0 0;
	max-width: 34ch;
	font-size: 0.9375rem;
	line-height: 1.55;
}
.elt-widget__title {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 var(--s-4);
}
.elt-widget ul,
.elt-widget .menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.elt-widget a {
	color: var(--ink-2);
	font-size: 14.5px;
	transition: color 0.18s var(--ease);
}
.elt-widget a:hover { color: var(--accent); }

.elt-footer__bottom {
	margin-top: var(--s-12);
	padding-top: var(--s-5);
	border-top: 1px solid var(--edge);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	font-size: 13px;
	color: var(--ink-muted);
	flex-wrap: wrap;
}

/* -------- Empty state / 404 -------------------------------- */
.elt-empty {
	padding: var(--s-24) 0;
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.elt-empty__code {
	font-family: var(--font-display);
	font-style: normal;
	font-size: clamp(5rem, 22vw, 13rem);
	line-height: 0.85;
	font-weight: 800;
	letter-spacing: -0.06em;
	margin: 0;
	background: linear-gradient(135deg, var(--aurora-2), var(--aurora-1) 45%, var(--aurora-4));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 40px color-mix(in oklab, var(--aurora-1) 40%, transparent));
}
.elt-empty h1 {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 2.25rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: var(--s-4) 0 var(--s-3);
}
.elt-empty p {
	color: var(--ink-2);
	margin: 0 0 var(--s-8);
	font-size: 1.0625rem;
}

/* -------- Utilities ----------------------------------------- */
.elt-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.elt-flex { display: flex; }
.elt-flex--center { align-items: center; }
.elt-flex--between { justify-content: space-between; }
.elt-gap-2 { gap: 8px; }
.elt-gap-4 { gap: 16px; }
.elt-gap-6 { gap: 24px; }

/* Reveal utility (activated by JS on scroll) */
[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	will-change: transform, opacity;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* -------- Mobile polish ----------------------------------- */
@media (max-width: 720px) {
	/* Larger tap targets per Apple/Google HIG (≥44px). */
	.elt-icon-btn { width: 44px; height: 44px; }
	.elt-share a { width: 44px; height: 44px; }
	.elt-icon-btn svg { width: 20px; height: 20px; }

	/* Sticky header offset is tighter on small screens. */
	.elt-header { top: 8px; margin-top: 8px; }
	.elt-header__inner { height: 64px; padding: 0 12px 0 16px; }

	/* Reduce visual breathing-space on big surfaces so content lands faster. */
	.elt-hero { padding: var(--s-10) 0 var(--s-8); }
	.elt-hero__title { font-size: clamp(2.25rem, 9.5vw, 3.5rem); letter-spacing: -0.04em; }
	.elt-hero__subtitle { margin-bottom: var(--s-6); }
	.elt-cta { padding: var(--s-8); margin: var(--s-12) 0; gap: var(--s-6); }
	.elt-cta__form { flex-direction: column; padding: 8px; border-radius: var(--r-md); gap: 8px; }
	.elt-cta__form input[type="email"] { padding: 14px 16px; }
	.elt-cta__form .elt-btn { width: 100%; height: 48px; }
	.elt-article { padding: var(--s-10) 0 var(--s-12); }
	.elt-article__head { margin-bottom: var(--s-8); }
	.elt-article__hero { padding: 4px; border-radius: var(--r-lg); }
	.elt-article__hero img { border-radius: calc(var(--r-lg) - 4px); }
	.elt-prose { font-size: 1.0625rem; line-height: 1.65; }
	.elt-prose h2 { font-size: 1.5rem; margin: 1.8em 0 0.5em; }

	/* Source card stacks on small screens */
	.elt-source { padding: var(--s-4) var(--s-5); gap: var(--s-3); }
	.elt-source__icon { flex-basis: 36px; width: 36px; height: 36px; }

	/* Container side padding */
	.elt-container { padding: 0 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.elt-card:hover, .elt-btn:hover { transform: none; }
	body::before { animation: none; }
	[data-reveal] { opacity: 1; transform: none; }
}

/* Graceful fallback when backdrop-filter is not supported */
@supports not (backdrop-filter: blur(1px)) {
	.elt-header__inner,
	.elt-card,
	.elt-glass,
	.elt-cta,
	.elt-source,
	.elt-tag,
	.elt-eyebrow,
	.elt-search input[type="search"],
	.nav-links {
		background: color-mix(in oklab, var(--bg-deep) 86%, var(--glass-4));
	}
}

/* Lite perf mode — set by JS on low-memory devices and slow connections.
   Drops backdrop-filter (most GPU-expensive effect) and the cursor glow,
   substitutes opaque surfaces. */
[data-perf-mode="lite"] .elt-cursor-glow { display: none; }
[data-perf-mode="lite"] body::before { animation: none; filter: saturate(110%); }
[data-perf-mode="lite"] .elt-header__inner,
[data-perf-mode="lite"] .elt-card,
[data-perf-mode="lite"] .elt-glass,
[data-perf-mode="lite"] .elt-cta,
[data-perf-mode="lite"] .elt-source,
[data-perf-mode="lite"] .elt-tag,
[data-perf-mode="lite"] .elt-eyebrow,
[data-perf-mode="lite"] .elt-toc,
[data-perf-mode="lite"] .elt-author-bio,
[data-perf-mode="lite"] .elt-pull,
[data-perf-mode="lite"] .elt-teaser,
[data-perf-mode="lite"] .elt-pillar,
[data-perf-mode="lite"] .elt-cookie,
[data-perf-mode="lite"] .elt-pulse,
[data-perf-mode="lite"] .elt-chart,
[data-perf-mode="lite"] .elt-barometer,
[data-perf-mode="lite"] .elt-search input[type="search"],
[data-perf-mode="lite"] .nav-links {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: color-mix(in oklab, var(--bg) 88%, var(--ink) 4%);
}