/*
Theme Name: Erika Gherardi
Theme URI: https://erikagherardi.it
Author: Erika Gherardi
Description: Tema custom per il sito personale di Erika Gherardi, Program Manager e Sales Trainer. "Curious. Concrete. Experimental." Costruito da zero su PHP template + WordPress native APIs + CSS custom properties, senza page builder.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietario
Text Domain: erika-gherardi
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Porting 1:1 dal design system fornito (Claude Design export).
   Non alterare questi valori senza aggiornare anche il design system sorgente.
   ========================================================================== */

:root {
	/* Base palette */
	--neutral-0: #FFFFFF;
	--neutral-25: #F8F9FA;
	--neutral-100: #F1F5F9;
	--neutral-200: #E2E8F0;
	--neutral-300: #CBD5E1;
	--neutral-400: #94A3B8;
	--neutral-500: #64748B;
	--neutral-600: #475569;
	--neutral-700: #334155;
	--neutral-750: #253247;
	--neutral-800: #1E293B;
	--neutral-900: #0F172A;
	--neutral-950: #111827;

	--teal-50: #F0FDFA;
	--teal-300: #5EEAD4;
	--teal-500: #14B8A6;
	--teal-600: #0D9488;
	--teal-700: #0F766E;
	--teal-800: #115E59;

	--red-600: #B91C1C;
	--red-400: #F87171;
	--amber-600: #B45309;
	--amber-400: #FBBF24;

	/* Semantic — light (default) */
	--bg: var(--neutral-25);
	--surface: var(--neutral-0);
	--surface-hover: var(--neutral-100);
	--surface-muted: var(--neutral-100);
	--text-primary: var(--neutral-950);
	--text-secondary: var(--neutral-500);
	--text-disabled: var(--neutral-400);
	--border: var(--neutral-200);
	--border-strong: var(--neutral-300);
	--accent: var(--teal-600);
	--accent-ink: var(--teal-700);
	--accent-ink-hover: var(--teal-800);
	--accent-subtle: var(--teal-50);
	--on-accent: #FFFFFF;
	--focus-ring: var(--teal-600);
	--danger: var(--red-600);
	--inverse-bg: var(--neutral-950);
	--inverse-text: var(--neutral-100);
	--overlay: rgba(15, 23, 42, 0.40);

	--viz-1: var(--teal-700);
	--viz-2: var(--teal-500);
	--viz-3: var(--neutral-500);
	--viz-4: var(--neutral-300);
	--viz-highlight: var(--amber-600);
	--viz-grid: var(--neutral-200);

	/* Typography */
	--font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--fs-micro: 12px;
	--fs-small: 14px;
	--fs-body: 16px;
	--fs-lead: 20px;
	--fs-h3: 24px;
	--fs-h2: 40px;
	--fs-h1: 64px;
	--fs-display: 104px;

	--lh-display: 0.95;
	--lh-h1: 1.0;
	--lh-h2: 1.1;
	--lh-h3: 1.25;
	--lh-body: 1.6;
	--lh-small: 1.5;

	--ls-display: -0.045em;
	--ls-h1: -0.035em;
	--ls-h2: -0.025em;
	--ls-h3: -0.01em;
	--ls-body: 0;
	--ls-label: 0.06em;

	--measure: 64ch;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 72px;
	--space-9: 112px;
	--space-10: 160px;

	--radius-ui: 8px;
	--radius-card: 16px;
	--radius-small: 6px;
	--radius-pill: 999px;

	--shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	--shadow-overlay: 0 16px 40px -12px rgba(15, 23, 42, 0.18);

	--container: 1200px;
	--gutter: 24px;
	--section-gap: var(--space-9);

	/* Motion */
	--dur-micro: 150ms;
	--dur-short: 240ms;
	--dur-state: 360ms;
	--dur-reveal: 560ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--reveal-distance: 12px;
	--stagger: 60ms;

	/* Theme-level roles derived from the scale (one size per role, used everywhere) */
	--section-title-size: clamp(36px, 5vw, 64px);
	--subtitle-size: clamp(24px, 2.6vw, 32px);
	--section-pad: var(--space-8);
}

[data-theme="dark"] {
	--bg: var(--neutral-900);
	--surface: var(--neutral-800);
	--surface-hover: var(--neutral-750);
	--surface-muted: var(--neutral-750);
	--text-primary: var(--neutral-100);
	--text-secondary: var(--neutral-400);
	--text-disabled: var(--neutral-600);
	--border: var(--neutral-700);
	--border-strong: var(--neutral-600);
	--accent: var(--teal-500);
	--accent-ink: var(--teal-500);
	--accent-ink-hover: var(--teal-300);
	--accent-subtle: rgba(20, 184, 166, 0.12);
	--on-accent: var(--neutral-900);
	--focus-ring: var(--teal-500);
	--danger: var(--red-400);
	--inverse-bg: var(--neutral-100);
	--inverse-text: var(--neutral-900);
	--overlay: rgba(2, 6, 23, 0.60);
	--viz-1: var(--teal-500);
	--viz-2: var(--teal-300);
	--viz-3: var(--neutral-400);
	--viz-4: var(--neutral-600);
	--viz-highlight: var(--amber-400);
	--viz-grid: var(--neutral-700);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-micro: 0ms;
		--dur-short: 0ms;
		--dur-state: 0ms;
		--dur-reveal: 0ms;
		--reveal-distance: 0px;
	}
}

@keyframes eg-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html { scroll-behavior: smooth; background: var(--bg); color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-primary);
	font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-body);
	-webkit-font-smoothing: antialiased;
	transition: background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}

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

a {
	color: var(--accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
a:hover { color: var(--accent-ink-hover); }
a.no-underline { text-decoration: none; }

/* Selected text: a strong teal in both themes, readable even with the screen brightness turned down. */
::selection { background: var(--teal-300); color: var(--neutral-950); }
[data-theme="dark"] ::selection { background: var(--teal-700); color: #fff; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; }

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.screen-reader-text:focus {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	width: auto; height: auto;
	padding: var(--space-3) var(--space-4);
	background: var(--surface);
	color: var(--text-primary);
	border-radius: var(--radius-ui);
	box-shadow: var(--shadow-overlay);
	z-index: 100;
	clip: auto;
}

/* Everything sits above the fixed trace canvas (see assets/js/main.js). */
main, .eg-footer { position: relative; z-index: 1; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.eg-container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.eg-section { border-top: 1px solid var(--border); }
.eg-section--surface { background: var(--surface); }
.eg-section--first { border-top: none; }

.eg-section__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--section-pad) var(--gutter);
}

/* One header pattern for every section: index · label, title, optional lead. */
.eg-section__header { margin-bottom: var(--space-7); }
.eg-section__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-section__eyebrow-num { font-variant-numeric: tabular-nums; }
.eg-section__eyebrow-rule { width: 24px; height: 1px; background: var(--border-strong); }
.eg-section__title {
	font-weight: var(--fw-bold);
	font-size: var(--section-title-size);
	line-height: 1.05;
	letter-spacing: var(--ls-h1);
	text-wrap: balance;
	max-width: 18em;
}
.eg-section__lead {
	margin-top: var(--space-5);
	max-width: 36em;
	font: var(--fw-regular) var(--fs-lead) / 1.5 var(--font-body);
	color: var(--text-secondary);
	text-wrap: pretty;
}

.eg-subtitle {
	font-weight: var(--fw-bold);
	font-size: var(--subtitle-size);
	line-height: 1.15;
	letter-spacing: var(--ls-h2);
}

/* Scroll-progress bar — functional: shows how far down the page you are. */
.eg-scroll-trace {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	width: 100%;
	transform-origin: left;
	transform: scaleX(0);
	background: var(--accent);
	z-index: 30;
	pointer-events: none;
}

/* Trace canvas: cursor trail in the hero + the idle "wandering line". */
.eg-trace-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* Site header */
.eg-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
/* Logged-in only: keep the sticky header below the WordPress toolbar (fixed above 600px). */
.admin-bar .eg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .eg-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .eg-header { top: 0; } }
.eg-header__bar {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}
.eg-wordmark {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: 18px;
	letter-spacing: -0.035em;
	color: var(--text-primary);
	text-decoration: none;
	white-space: nowrap;
}
.eg-menu { display: flex; align-items: center; }
.eg-menu__extra { display: none; }
.eg-nav {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font: var(--fw-medium) 15px / 1 var(--font-body);
}
.eg-nav a { color: var(--text-primary); text-decoration: none; }
.eg-nav a:hover { color: var(--accent-ink); }

.eg-header__right {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.eg-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-ui);
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--text-primary);
	cursor: pointer;
}

/* Mobile: the menu becomes a full-width panel under the bar, with large
   touch targets (≥ 48px), the live project link and the socials. */
@media (max-width: 720px) {
	.eg-header__bar { gap: var(--space-3); }
	.eg-nav-toggle { display: flex; }
	.eg-header__badge { display: none; }
	.eg-header__right { gap: var(--space-3); }
	.eg-switch__label {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	.eg-menu {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		padding: var(--space-2) var(--gutter) var(--space-6);
		background: var(--bg);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-overlay);
	}
	.eg-menu.is-open { display: flex; }
	.eg-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.eg-nav a {
		display: flex;
		align-items: center;
		min-height: 56px;
		border-bottom: 1px solid var(--border);
		font: var(--fw-bold) 24px / 1.1 var(--font-heading);
		letter-spacing: var(--ls-h2);
	}
	.eg-menu__extra {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
		padding-top: var(--space-5);
	}
	.eg-menu__live { height: auto; min-height: 48px; padding: var(--space-3) var(--space-5); text-align: left; }
}

/* Social icon links */
.eg-socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eg-socials__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-primary);
	transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.eg-socials__link:hover { color: var(--accent-ink); border-color: var(--accent-ink); background: var(--accent-subtle); }
.eg-icon { width: 18px; height: 18px; }

/* Footer */
.eg-footer {
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.eg-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-6) var(--gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5);
	flex-wrap: wrap;
	font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body);
	color: var(--text-secondary);
}
.eg-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.eg-footer__monogram {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: 15px;
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
}
.eg-footer__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.eg-footer__links a { color: var(--text-secondary); }
.eg-footer__links a:hover { color: var(--accent-ink); }
.eg-footer__cookie { background: none; border: 0; padding: 0; font: inherit; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.eg-footer__cookie:hover { color: var(--accent-ink); }

/* Cookie banner (Klaro), dressed like the theme's cards. Yes and no look the same on purpose. */
.klaro { --dark1: var(--surface); --light1: var(--text-primary); --light2: var(--text-secondary); --light3: var(--text-secondary); --dark2: var(--text-primary); --green1: var(--text-primary); --green2: var(--text-primary); --green3: var(--accent); --red1: var(--text-primary); --red2: var(--text-primary); font-family: var(--font-body); }
.klaro .cookie-notice:not(.cookie-modal-notice), .klaro .cookie-modal .cm-modal.cm-klaro { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); font-family: var(--font-body); }
body div.klaro .cookie-notice:not(.cookie-modal-notice) { left: 16px; right: auto; bottom: 16px; width: min(420px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 20px 22px; animation: eg-cookie-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes eg-cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .klaro .cookie-notice:not(.cookie-modal-notice) { animation: none; } }
.klaro .cookie-notice:not(.cookie-modal-notice)::before { content: "Un cookie, uno solo"; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: var(--fw-medium, 500) var(--fs-micro, 12px) / 1.3 var(--font-body); letter-spacing: var(--ls-label, .04em); text-transform: uppercase; color: var(--accent-ink); }
html:lang(en) .klaro .cookie-notice:not(.cookie-modal-notice)::before { content: "Just one cookie"; }
.klaro .cookie-notice .cn-body { display: block; padding: 0; margin: 0; }
.klaro .cookie-notice .cn-body p { margin: 0 0 16px; font: var(--fw-regular, 400) var(--fs-small, 14px) / 1.55 var(--font-body); color: var(--text-secondary); }
.klaro .cookie-notice .cn-body .cn-ok { display: block; margin: 0; padding: 0; }
body div.klaro .cookie-notice .cn-body .cn-ok .cn-buttons { display: flex; flex-direction: row; gap: 10px; margin: 0; padding: 0; width: 100%; }
body div.klaro .cookie-notice .cn-body .cn-ok .cn-buttons .cm-btn { flex: 1 1 0; width: auto; margin: 0; }
.klaro .cookie-notice .cm-btn, .klaro .cookie-modal .cm-btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; border-radius: var(--radius-pill); padding: 10px 18px; border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--bg); cursor: pointer; transition: opacity .15s; }
.klaro .cookie-notice .cm-btn:hover, .klaro .cookie-modal .cm-btn:hover { opacity: .85; }
.klaro .cookie-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-danger, .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .cookie-modal .cm-btn.cm-btn-danger { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg); }
.klaro .cookie-modal p, .klaro .cookie-modal li, .klaro .cookie-modal h1, .klaro .cookie-modal label, .klaro .cookie-modal .cm-list-title { color: var(--text-primary); font-family: var(--font-body); }
.klaro .cookie-modal .cm-modal .cm-header, .klaro .cookie-modal .cm-modal .cm-footer, .klaro .cookie-modal .cm-modal .cm-body { background: var(--surface); border-color: var(--border); }
.klaro a, .klaro .cookie-modal a { color: var(--accent-ink); }
.klaro .cookie-modal .slider, .klaro .cookie-notice .slider { background: var(--neutral-400, #9aa4b2); }
.klaro .cm-list-input:checked + .cm-list-label .slider { background: var(--accent); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* Buttons */
.eg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 48px;
	padding: 0 var(--space-6);
	border-radius: var(--radius-ui);
	font: var(--fw-medium) 15px / 1 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.eg-btn:active { transform: translateY(1px); }
.eg-btn--primary { background: var(--accent-ink); color: var(--on-accent); }
.eg-btn--primary:hover { background: var(--accent-ink-hover); color: var(--on-accent); }
.eg-btn--secondary {
	background: var(--surface);
	color: var(--text-primary);
	border-color: var(--border-strong);
}
.eg-btn--secondary:hover { background: var(--surface-hover); color: var(--text-primary); }
.eg-btn__meta {
	font: var(--fw-medium) var(--fs-micro) / 1 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-btn--ghost {
	background: transparent;
	color: var(--text-primary);
	border-color: var(--border);
}
.eg-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Badge */
.eg-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 4px var(--space-3);
	border-radius: var(--radius-pill);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	white-space: nowrap;
}
.eg-badge--live { background: var(--accent-subtle); color: var(--accent-ink); }
.eg-badge__dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: currentColor;
	animation: eg-pulse 2s var(--ease-in-out) infinite;
}
.eg-header__badge-action { font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 2px; }
.eg-header__badge:hover .eg-badge--live { background: var(--accent-ink); color: var(--on-accent); }
.eg-badge--neutral { background: var(--surface-muted); color: var(--neutral-600); }
[data-theme="dark"] .eg-badge--neutral { color: var(--text-secondary); }
.eg-badge--experimental { background: rgba(180, 83, 9, 0.1); color: var(--amber-600); }
[data-theme="dark"] .eg-badge--experimental { color: var(--amber-400); background: rgba(251, 191, 36, 0.12); }
@media (prefers-reduced-motion: reduce) {
	.eg-badge__dot { animation: none; }
}

/* Tag (filter) */
.eg-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text-secondary);
	font: var(--fw-medium) var(--fs-small) / 1 var(--font-body);
	cursor: pointer;
	transition: all var(--dur-micro) var(--ease-out);
}
.eg-tag:hover { border-color: var(--border-strong); color: var(--text-primary); }
.eg-tag.is-selected {
	background: var(--accent-subtle);
	border-color: var(--accent-ink);
	color: var(--accent-ink);
}

/* Switch (theme toggle) */
/* Language switcher: IT · EN, the current one in ink, the other one a link. */
.eg-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font: var(--fw-semibold) var(--fs-micro) / 1 var(--font-body);
	letter-spacing: var(--ls-label);
}
.eg-lang a {
	display: inline-block;
	min-width: 28px;
	padding: 6px 8px;
	border-radius: var(--radius-pill);
	color: var(--text-secondary);
	text-align: center;
	text-decoration: none;
	transition: color var(--dur-state) var(--ease-out), background var(--dur-state) var(--ease-out);
}
.eg-lang a:hover { color: var(--text-primary); }
.eg-lang a.is-current { background: var(--text-primary); color: var(--bg); }
.eg-lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.eg-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-secondary);
	font: var(--fw-medium) var(--fs-small) / 1 var(--font-body);
}
.eg-switch__seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
}
.eg-switch__label { white-space: nowrap; }
.eg-header__right { flex-shrink: 0; }
.eg-switch__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 26px;
	border-radius: var(--radius-pill);
	color: var(--text-secondary);
	transition: color var(--dur-state) var(--ease-out), background var(--dur-state) var(--ease-out);
}
/* The current mode is the solid pill, the same way the current language is. */
.eg-switch__opt--light { background: var(--text-primary); color: var(--bg); }
[data-theme="dark"] .eg-switch__opt--light { background: transparent; color: var(--text-secondary); }
[data-theme="dark"] .eg-switch__opt--dark { background: var(--text-primary); color: var(--bg); }
.eg-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-pill); }
/* The "Night lab" name only has room on wide screens; elsewhere it stays as the tooltip and the screen-reader label. */
@media (max-width: 1360px) {
	.eg-switch__label {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
}

/* Stat */
.eg-stat__value {
	font: var(--fw-bold) 32px / 1 var(--font-heading);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.eg-stat__label {
	margin-top: var(--space-2);
	font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body);
	color: var(--text-secondary);
}

/* Reveal: content rises 12px with a fade when it enters the viewport. */
[data-reveal] {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; }
}

/* Toast (idle easter egg) */
.eg-toast {
	position: fixed;
	left: var(--gutter);
	bottom: var(--gutter);
	z-index: 40;
	max-width: min(380px, calc(100vw - 2 * var(--gutter)));
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	background: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-overlay);
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.eg-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.eg-toast__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-1);
	font: var(--fw-medium) var(--fs-small) / 1.4 var(--font-body);
	color: var(--accent-ink);
}
.eg-toast__text { font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body); }
.eg-toast__link { display: inline-block; margin-top: var(--space-2); font: var(--fw-medium) var(--fs-small) / 1.4 var(--font-body); }
.eg-toast__close {
	flex: none;
	background: none;
	border: 0;
	padding: 2px 6px;
	border-radius: var(--radius-small);
	color: var(--text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.eg-toast__close:hover { color: var(--text-primary); background: var(--surface-hover); }

/* ==========================================================================
   5. HOMEPAGE SECTIONS
   ========================================================================== */

/* Hero */
.eg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--gutter);
	align-items: start;
	padding-top: var(--space-8);
	padding-bottom: var(--section-pad);
}
.eg-hero__copy { padding-top: var(--space-7); }
.eg-hero__eyebrow {
	margin-bottom: var(--space-6);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-hero__name { color: var(--text-primary); font-weight: var(--fw-bold); }
.eg-hero__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: clamp(48px, 8.4vw, 112px);
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-wrap: balance;
}
.eg-hero__punct { cursor: pointer; }
.eg-hero__punct:hover { color: var(--accent-ink); }
.eg-hero__lead {
	margin-top: var(--space-7);
	max-width: 30em;
	font: var(--fw-regular) var(--fs-lead) / 1.5 var(--font-body);
	color: var(--text-secondary);
	text-wrap: pretty;
}
.eg-hero__ctas {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-7);
	flex-wrap: wrap;
}
.eg-hero__socials { margin-top: var(--space-5); }
.eg-hero__media { margin-top: var(--space-8); }
.eg-hero__portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--surface-muted);
}
.eg-hero__caption {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-3);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-hero__note {
	margin: var(--space-2) 0 0;
	font: var(--fw-regular) var(--fs-micro) / 1.4 var(--font-body);
	color: var(--text-secondary);
}
.eg-hero__placeholder-flag {
	display: inline-block;
	margin-top: var(--space-2);
	font: var(--fw-medium) 11px / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--amber-600);
}
[data-theme="dark"] .eg-hero__placeholder-flag { color: var(--amber-400); }

@media (max-width: 860px) {
	.eg-hero__grid { grid-template-columns: 1fr; padding-top: var(--space-7); }
	.eg-hero__copy { padding-top: 0; }
	.eg-hero__media { margin-top: 0; order: -1; max-width: 420px; }
}

/* Idea — the Curious → Improve loop plays on its own while in view. */
.eg-idea__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--gutter);
	align-items: start;
}
.eg-idea__intro { position: sticky; top: 104px; }
.eg-idea__intro .eg-section__header { margin-bottom: var(--space-6); }
.eg-idea__counter {
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}
.eg-idea__counter strong { font-weight: var(--fw-medium); color: var(--accent-ink); }

.eg-idea__step-btn {
	appearance: none;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--space-4);
	align-items: baseline;
	width: 100%;
	padding: var(--space-3) 0;
	background: none;
	border: 0;
	border-radius: var(--radius-ui);
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.eg-idea__num {
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
	transition: color var(--dur-state) var(--ease-out);
}
.eg-idea__word {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1;
	letter-spacing: var(--ls-h1);
	color: var(--text-secondary);
	transition: color var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out);
}
.eg-idea__bar {
	display: block;
	max-width: 240px;
	height: 2px;
	margin-top: var(--space-3);
	background: var(--accent);
	transform-origin: left;
	transform: scaleX(0);
}
.eg-idea__note {
	display: block;
	margin-top: var(--space-2);
	font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body);
	color: var(--text-secondary);
	opacity: 0;
	transition: opacity var(--dur-state) var(--ease-out);
}
.eg-idea__step.is-active .eg-idea__num { color: var(--accent-ink); }
.eg-idea__step.is-active .eg-idea__word { color: var(--text-primary); transform: translateX(8px); }
.eg-idea__step.is-active .eg-idea__note { opacity: 1; }
/* The bar doubles as the timer for the autoplay loop. */
.eg-idea__step.is-active .eg-idea__bar {
	transform: scaleX(1);
	transition: transform var(--idea-step, 1800ms) linear;
}
.eg-idea__steps.is-paused .eg-idea__step.is-active .eg-idea__bar {
	transition: transform var(--dur-reveal) var(--ease-out);
}
.eg-idea__steps.is-static .eg-idea__word { color: var(--text-primary); }
.eg-idea__steps.is-static .eg-idea__note { opacity: 1; }
.eg-idea__steps.is-static .eg-idea__bar { display: none; }

@media (max-width: 860px) {
	.eg-idea__grid { grid-template-columns: 1fr; }
	.eg-idea__intro { position: static; margin-bottom: var(--space-5); }
}

/* Work */
.eg-work__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: var(--space-7) var(--gutter);
}
.eg-work__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--text-primary);
}
.eg-work__letter {
	font: var(--fw-bold) var(--fs-micro) / 1.3 var(--font-heading);
	letter-spacing: var(--ls-label);
	color: var(--accent-ink);
}
.eg-work__desc {
	margin-top: var(--space-5);
	max-width: 34em;
	text-wrap: pretty;
}
.eg-section__cta { margin-top: var(--space-7); }

.eg-work__results { margin-top: var(--space-7); }
.eg-work__results-label {
	margin-bottom: var(--space-3);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--accent-ink);
}
.eg-work__results li { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.eg-work__results li:last-child { border-bottom: 1px solid var(--border); }
.eg-work__results a { color: var(--text-primary); text-decoration: none; }
.eg-work__results a:hover { color: var(--accent-ink); }

/* Lab */
.eg-lab__now {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--space-6);
}
.eg-lab__now-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.eg-lab__now-chip {
	padding: 4px var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--surface-muted);
	color: var(--text-primary);
	font: var(--fw-medium) var(--fs-small) / 1.4 var(--font-body);
}
.eg-lab__search { margin-bottom: var(--space-4); }
.eg-lab__search input {
	width: 100%;
	max-width: 420px;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-ui);
	background: var(--surface);
	color: var(--text-primary);
	font: var(--fw-regular) var(--fs-body) / 1.3 var(--font-body);
}
.eg-lab__search input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.eg-lab__filters {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--text-primary);
}
.eg-lab__item {
	display: grid;
	grid-template-columns: 52px minmax(0, 4fr) minmax(0, 5fr) 140px;
	gap: var(--gutter);
	align-items: baseline;
	padding: var(--space-6) var(--space-4);
	margin: 0 calc(-1 * var(--space-4));
	border-bottom: 1px solid var(--border);
	border-radius: var(--radius-ui);
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-micro) var(--ease-out);
}
.eg-lab__item:hover { background: var(--surface-hover); color: inherit; }
.eg-lab__item-icon { align-self: start; }
/* Icon tile shown next to every Lab project. */
.eg-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--accent-subtle);
	color: var(--accent-ink);
	transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.eg-icon-tile svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.eg-lab__item:hover .eg-icon-tile { background: var(--accent); color: var(--on-accent); }
.eg-icon-tile--lg { width: 68px; height: 68px; border-radius: 18px; }
.eg-icon-tile--lg svg { width: 34px; height: 34px; }
.eg-project__tags { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.eg-project__tags .eg-badge { margin: 0; }

.eg-lab__item-kind {
	display: block;
	margin-top: var(--space-2);
	font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body);
	color: var(--text-secondary);
}
.eg-lab__item-desc { max-width: 34em; }
.eg-lab__item-status { display: flex; justify-content: flex-end; }
.eg-lab__empty {
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
}

@media (max-width: 720px) {
	.eg-lab__item { grid-template-columns: 1fr; gap: var(--space-2); }
	.eg-lab__item-status { justify-content: flex-start; }
}

/* Story — chapters: period · role · what it was · numbers from that chapter */
.eg-story__chapters { border-top: 1px solid var(--text-primary); }
.eg-story__row {
	display: grid;
	grid-template-columns: 160px minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--gutter);
	align-items: start;
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--border);
}
.eg-story__period {
	padding-top: 10px;
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}
.eg-story__row.is-current .eg-story__period { color: var(--accent-ink); }
.eg-story__org {
	display: block;
	margin-top: var(--space-2);
	font: var(--fw-medium) var(--fs-small) / var(--lh-small) var(--font-body);
	color: var(--text-secondary);
}
.eg-story__desc { margin-top: var(--space-3); max-width: 34em; text-wrap: pretty; }
.eg-story__stats-label {
	margin-bottom: var(--space-3);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-story__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
}
.eg-story__stats dd { margin: 0; }
.eg-story__also { padding-top: var(--space-2); }
.eg-story__row--also { margin-top: var(--space-7); border-top: 1px solid var(--text-primary); }

.eg-media { margin-top: var(--space-7); scroll-margin-top: 96px; }
.eg-media__label {
	margin-bottom: var(--space-4);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--accent-ink);
}
.eg-media__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
}
@media (max-width: 900px) { .eg-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .eg-media__grid { grid-template-columns: 1fr; } }
.eg-media__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
}
.eg-media__meta {
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-media__text { font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body); color: var(--text-secondary); flex: 1; }
.eg-media__text a { color: var(--accent-ink); text-underline-offset: 2px; }
.eg-media__link { font: var(--fw-medium) var(--fs-small) / 1.4 var(--font-body); }
.eg-story__also li { padding: 2px 0; }

@media (max-width: 860px) {
	.eg-story__row { grid-template-columns: 1fr; gap: var(--space-3); }
	.eg-story__period { padding-top: 0; }
	.eg-story__stats-wrap { margin-top: var(--space-3); }
}

/* Final CTA — scoped dark via data-theme="dark" on the section */
.eg-cta { background: var(--bg); color: var(--text-primary); border-top: none; }
/* In dark mode the page is already navy: keep the alternation going (Story is bg, so CTA is surface). */
html[data-theme="dark"] .eg-cta { background: var(--neutral-800); }
.eg-cta .eg-section__inner { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.eg-cta__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ==========================================================================
   6. GENERIC PAGE / SINGLE CONTENT
   ========================================================================== */

.eg-page-header { padding: var(--space-9) 0 var(--space-7); }
.eg-page-header h1 {
	font-weight: var(--fw-bold);
	font-size: clamp(40px, 7vw, 88px);
	line-height: 0.98;
	letter-spacing: -0.04em;
}
.eg-page-header p { margin-top: var(--space-5); }
.eg-page-header .eg-badge + h1 { margin-top: var(--space-4); }
.eg-back-link {
	display: flex;
	width: fit-content;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	font: var(--fw-medium) var(--fs-small) / 1 var(--font-body);
	text-decoration: none;
}
.eg-entry-content {
	max-width: var(--measure);
	font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-body);
}
.eg-entry-content h2 { font: var(--fw-semibold) var(--fs-h2) / var(--lh-h2) var(--font-heading); letter-spacing: var(--ls-h2); margin: var(--space-8) 0 var(--space-4); }
.eg-entry-content h3 { font: var(--fw-semibold) var(--fs-h3) / var(--lh-h3) var(--font-heading); letter-spacing: var(--ls-h3); margin: var(--space-7) 0 var(--space-3); }
.eg-entry-content p { margin: 0 0 var(--space-5); }
.eg-entry-content ul, .eg-entry-content ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.eg-entry-content li { list-style: disc; margin-bottom: var(--space-2); }
.eg-entry-content img { border-radius: var(--radius-card); margin: var(--space-6) 0; }

/* Single Lab project: header with the facts beside it, then a summary rail + the article. */
.eg-project__header {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--space-8) var(--gutter);
	align-items: end;
}
.eg-project__header h1 { font-size: clamp(36px, 5vw, 64px); text-wrap: balance; }
.eg-project__header .eg-project-meta { margin: 0 0 var(--space-2); }

.eg-project-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--text-primary);
	font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body);
}
.eg-project-meta dt {
	margin-bottom: 2px;
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-project-meta dd { margin: 0; font-weight: var(--fw-medium); }

.eg-project__cover { width: 100%; height: auto; border-radius: var(--radius-card); margin-bottom: var(--space-8); }

/* The question reads like a section title; the other three points are short
   labelled notes in a row; the article sits in a centred reading column. */
.eg-project__label {
	margin: 0 0 var(--space-3);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--accent-ink);
}
.eg-project__question { padding-top: var(--space-6); border-top: 1px solid var(--text-primary); }
.eg-project__question-text {
	max-width: 20em;
	font-weight: var(--fw-bold);
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: var(--ls-h1);
	text-wrap: balance;
}
.eg-project__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
	margin-top: var(--space-8);
}
.eg-project-frame { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.eg-project-frame p { margin: 0; color: var(--text-secondary); text-wrap: pretty; }

.eg-project__main {
	max-width: var(--measure);
	margin: var(--space-9) auto 0;
	padding-top: var(--space-8);
	border-top: 1px solid var(--border);
}
.eg-project__main .eg-project__label { margin-bottom: var(--space-5); }
.eg-project__main .eg-entry-content h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--subtitle-size); line-height: 1.15; }
.eg-project__main .eg-entry-content h2:first-child { margin-top: 0; }
.eg-project__main .eg-entry-content > :first-child { margin-top: 0; }
.eg-project__main .eg-entry-content img { width: 100%; height: auto; }
.eg-project__main .eg-entry-content figure {
	position: relative;
	left: 50%;
	width: min(1120px, 100vw - var(--gutter) * 2 - 16px);
	max-width: none;
	margin: var(--space-8) 0;
	transform: translateX(-50%);
}
.eg-project__main .eg-entry-content figure a { display: block; }
.eg-project__main .eg-entry-content figure.eg-figure-row.eg-figure-gallery > div { display: block; column-count: 3; column-gap: var(--space-4); }
.eg-project__main .eg-entry-content figure.eg-figure-gallery img { display: block; width: 100%; height: auto; margin: 0 0 var(--space-4); break-inside: avoid; }
@media (max-width: 640px) { .eg-project__main .eg-entry-content figure.eg-figure-row.eg-figure-gallery > div { column-count: 2; } }
.eg-project__main .eg-entry-content figure.eg-video { left: auto; transform: none; width: 100%; max-width: 360px; margin: 0 auto var(--space-8); }
.eg-project__main .eg-entry-content figure.eg-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius-card); }
.eg-project__main .eg-entry-content figure.eg-figure-row > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.eg-project__main .eg-entry-content figure.eg-figure-row img { width: 100%; height: auto; }
@media (max-width: 640px) { .eg-project__main .eg-entry-content figure.eg-figure-row > div { grid-template-columns: 1fr; } }
.eg-project__main .eg-entry-content figure.eg-figure-pair > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .eg-project__main .eg-entry-content figure.eg-figure-pair > div { grid-template-columns: 1fr; } }
/* Phone screenshots: a narrower row that keeps three columns on every screen. */
.eg-project__main .eg-entry-content figure.eg-figure-narrow { width: min(680px, 100vw - var(--gutter) * 2 - 16px); }
.eg-project__main .eg-entry-content figure.eg-figure-phones { width: min(760px, 100vw - var(--gutter) * 2 - 16px); }
.eg-project__main .eg-entry-content figure.eg-figure-phones > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.eg-project__main .eg-entry-content figure.eg-figure-phones img { border-radius: var(--radius-ui); }
.eg-project__main .eg-entry-content figure img { margin: 0; border: 1px solid var(--border); }
.eg-project__main .eg-entry-content figcaption { margin-top: var(--space-3); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-body); color: var(--text-secondary); }
.eg-project__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.eg-project__gallery img { width: 100%; margin: 0; border-radius: var(--radius-ui); }

@media (max-width: 960px) {
	.eg-project__header { gap: var(--space-6); grid-template-columns: 1fr; }
	.eg-project-meta { flex-direction: row; flex-wrap: wrap; gap: var(--space-5) var(--space-7); }
	.eg-project__points { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
	.eg-project-frame p { font-size: var(--fs-small); line-height: var(--lh-small); }
	.eg-project__main { margin-top: var(--space-8); padding-top: var(--space-6); }
}

.eg-page { padding-bottom: var(--space-9); }
.eg-archive-grid { display: grid; gap: var(--space-2); padding-bottom: var(--space-9); }

/* Resume page (/resume/): same building blocks as the homepage. */
.eg-cv-header { padding-bottom: var(--space-8); }
.eg-cv-header__name {
	margin-bottom: var(--space-3);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-page-header .eg-cv-header__name { margin-top: 0; }

/* At-a-glance row under the intro. */
.eg-cv-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
	margin: var(--space-8) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--text-primary);
}
.eg-cv-facts dt {
	margin-bottom: var(--space-2);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}
.eg-cv-facts dd { margin: 0; font: var(--fw-medium) var(--fs-body) / 1.4 var(--font-body); }
.eg-cv-facts dd span { display: block; font-weight: var(--fw-regular); color: var(--text-secondary); }

/* Timeline rows, as in the homepage Story. */
.eg-cv__items { border-top: 1px solid var(--text-primary); }
.eg-cv__item {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--gutter);
	align-items: start;
	padding: var(--space-7) 0;
	border-bottom: 1px solid var(--border);
}
.eg-cv__period {
	padding-top: 10px;
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}
.eg-cv__item.is-current .eg-cv__period { color: var(--accent-ink); }
.eg-cv__body { max-width: 40em; }
.eg-cv__org {
	margin-top: var(--space-2);
	font: var(--fw-medium) var(--fs-small) / var(--lh-small) var(--font-body);
	color: var(--text-secondary);
}
.eg-cv__desc { margin-top: var(--space-4); text-wrap: pretty; }
.eg-cv__desc p + p { margin-top: var(--space-4); }
.eg-cv__results { margin-top: var(--space-6); }

/* Small accent label used for sub-groups (Certifications, skill groups, Languages). */
.eg-cv__sublabel {
	margin-bottom: var(--space-4);
	font: var(--fw-medium) var(--fs-micro) / 1.3 var(--font-body);
	letter-spacing: var(--ls-label);
	color: var(--accent-ink);
}
.eg-cv__sublabel--spaced { margin-top: var(--space-8); }

/* Skills: one column per group, plain lists with hairlines. */
.eg-cv-skills {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-7) var(--gutter);
}
.eg-cv-skills ul { border-top: 1px solid var(--text-primary); }
.eg-cv-skills li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
	font: var(--fw-regular) var(--fs-body) / 1.4 var(--font-body);
}

/* Languages: one cell each, name and level. */
.eg-cv-languages { margin-top: var(--space-8); }
.eg-cv-languages dl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gutter);
	margin: 0;
	border-top: 1px solid var(--text-primary);
}
.eg-cv-languages dl > div { padding-top: var(--space-4); }
.eg-cv-languages dt { font-weight: var(--fw-bold); font-size: var(--subtitle-size); line-height: 1.15; letter-spacing: var(--ls-h2); }
.eg-cv-languages dd { margin: var(--space-2) 0 0; color: var(--text-secondary); }

@media (max-width: 900px) {
	.eg-cv-skills,
	.eg-cv-languages dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.eg-cv-facts { grid-template-columns: 1fr; gap: var(--space-4); }
	.eg-cv__item { grid-template-columns: 1fr; gap: var(--space-3); }
	.eg-cv__period { padding-top: 0; }
}
@media (max-width: 480px) {
	.eg-cv-skills { grid-template-columns: 1fr; }
}

/* A resume gets printed: keep only the content, in black on white. */
@media print {
	#wpadminbar, .eg-header, .eg-footer, .eg-cta, .eg-back-link,
	.eg-scroll-trace, .eg-trace-canvas, .eg-toast { display: none !important; }
	body { background: #fff; color: #000; }
	.eg-section, .eg-section--surface { background: none; border: 0; }
	.eg-section__inner { padding: 12px 0; }
	.eg-section__title { font-size: 24px; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.eg-cv__item { break-inside: avoid; padding: 12px 0; }
	a { color: inherit; text-decoration: none; }
}


/* Lab project: next project + dice. */
.eg-project__topnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	margin-bottom: var(--space-6);
}
.eg-project__topnav .eg-back-link { margin-bottom: 0; }
.eg-back-link--next { color: var(--text-secondary); }
.eg-back-link--next:hover { color: var(--accent-ink); }
.eg-project-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-4);
	align-items: stretch;
	max-width: var(--measure);
	margin: var(--space-9) auto 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--border);
}
.eg-project-nav a {
	display: flex;
	text-decoration: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	transition: border-color var(--dur-short), background-color var(--dur-short);
}
.eg-project-nav a:hover { border-color: var(--accent); background: var(--surface-hover); }
.eg-project-nav__next { flex-direction: column; gap: var(--space-2); }
.eg-project-nav__label { font: var(--fw-medium) var(--fs-small) / 1 var(--font-body); color: var(--text-secondary); }
.eg-project-nav__title { font: var(--fw-semibold) var(--fs-h3) / var(--lh-h3) var(--font-heading); letter-spacing: var(--ls-h3); color: var(--text-primary); }
.eg-project-nav__dice { align-items: center; gap: var(--space-3); font: var(--fw-medium) var(--fs-small) / 1.2 var(--font-body); color: var(--text-primary); }
.eg-dice { flex: none; color: var(--accent-ink); }
.eg-project-nav__dice.is-rolling .eg-dice { animation: eg-dice-roll 600ms cubic-bezier(.3, .7, .3, 1); }
@keyframes eg-dice-roll {
	0% { transform: rotate(0) scale(1); }
	50% { transform: rotate(200deg) scale(1.25); }
	100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.eg-project-nav__dice.is-rolling .eg-dice { animation: none; }
}
@media (max-width: 560px) {
	.eg-project-nav { grid-template-columns: 1fr; }
}
@media print { .eg-project-nav, .eg-back-link--next { display: none; } }


/* 404 mini-game. */
.eg-runner { margin: var(--space-7) 0 var(--space-6); max-width: 720px; }
.eg-runner__canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 720 / 220;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: var(--surface);
	touch-action: manipulation;
	cursor: pointer;
}
.eg-runner__canvas:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.eg-runner__hint { margin-top: var(--space-3); font: var(--fw-regular) var(--fs-small) / 1.4 var(--font-body); color: var(--text-secondary); }
@media print { .eg-runner { display: none; } }


/* Lab articles: image lightbox (opened from the article images). */
.eg-entry-content a[href$=".jpg"], .eg-entry-content a[href$=".jpeg"], .eg-entry-content a[href$=".png"], .eg-entry-content a[href$=".webp"] { cursor: zoom-in; }
.eg-lightbox-open { overflow: hidden; }
.eg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6) var(--space-8);
	background: rgba(8, 12, 22, 0.88);
	animation: eg-lightbox-in var(--dur-short, 160ms) ease-out;
}
.eg-lightbox[hidden] { display: none; }
.eg-lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); cursor: zoom-out; }
.eg-lightbox__img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); margin: 0; }
.eg-lightbox__cap { max-width: 70ch; color: rgba(255, 255, 255, 0.82); font: var(--fw-regular) var(--fs-small) / 1.4 var(--font-body); text-align: center; }
.eg-lightbox__btn {
	position: absolute;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font: 28px / 1 var(--font-body);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.eg-lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }
.eg-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.eg-lightbox__btn[hidden] { display: none; }
.eg-lightbox__close { top: var(--space-5); right: var(--space-5); }
.eg-lightbox__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.eg-lightbox__next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
@keyframes eg-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eg-lightbox { animation: none; } }
@media (max-width: 600px) {
	.eg-lightbox { padding: var(--space-8) var(--space-3) var(--space-5); }
	.eg-lightbox__prev { left: var(--space-2); }
	.eg-lightbox__next { right: var(--space-2); }
}
@media print { .eg-lightbox { display: none; } }

.eg-entry-content img.eg-zoomable { cursor: zoom-in; }
.eg-entry-content img.eg-zoomable:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Tighter header between phone and desktop: shed the long bits first (the badge action, then the whole badge). */
@media (max-width: 1000px) { .eg-header__badge-action, .eg-header__badge-action + span, .eg-header__badge .eg-badge > span[aria-hidden="true"]:nth-of-type(2) { display: none; } }
@media (max-width: 900px) { .eg-header__badge { display: none; } }

/* Phones: keep wordmark, language, mode switch and menu button on one line. */
@media (max-width: 480px) {
	.eg-header__bar { gap: var(--space-2); }
	.eg-header__right { gap: var(--space-2); }
	.eg-wordmark { font-size: 16px; }
	.eg-lang a { min-width: 24px; padding: 6px; }
	.eg-switch__opt { width: 26px; }
	.eg-nav-toggle { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
	.eg-wordmark { font-size: 14px; }
	.eg-lang a { min-width: 22px; padding: 6px 5px; }
	.eg-switch__opt { width: 22px; height: 24px; }
	.eg-nav-toggle { width: 36px; height: 36px; }
}