/* mika.sh — homepage, corporate teal system (matched to the résumé)
   Type: Space Grotesk (display) · Inter (body) · IBM Plex Mono (labels)
   Colour tokens live in theme-light.css / theme-dark.css. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('pygment.css');

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
@font-face { font-family: MonacoB; src: url("monacob.otf") format("opentype"); }

:root {
	--font-display: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--radius: 16px;
	--radius-sm: 10px;
	--maxw: 1180px;
	--gutter: max(5vw, calc((100vw - var(--maxw)) / 2));
}

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

.material-icons {
	font-family: 'Material Icons' !important;
	font-weight: normal; font-style: normal; font-size: 1.2em; line-height: 1;
	letter-spacing: normal; text-transform: none; display: inline-block;
	white-space: nowrap; word-wrap: normal; direction: ltr;
	-webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}

.highlight * { font-size: 0.95em; font-family: 'MonacoB' !important; }
div.highlight { border-radius: 0.4em; padding: 0 1em; }
pre { white-space: pre; overflow: auto; padding: 10pt 2.5pt; }

body {
	margin: 0 auto;
	scrollbar-width: thin;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(15px, calc(12px + 0.36vw), 18px);
	line-height: 1.6;
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* always-on brand rule at the very top edge */
body::before {
	content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 260;
	background: linear-gradient(90deg, var(--accent), var(--accent2));
}

a { text-decoration: none; color: var(--link); transition: color 0.15s ease; }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.14; color: var(--ink); }

/* ---------- kicker section headings ---------- */
.focus-band > h2, #about > h2, #publications > h2, footer h2, .side-card h3 {
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.focus-band > h2, #about > h2, #publications > h2 {
	font-size: 0.74em;
	margin: 0 0 1.4em;
	padding-bottom: 0.7em;
	position: relative;
}
.focus-band > h2::after, #about > h2::after, #publications > h2::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 2.4em; height: 2.5px;
	border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2));
}

p { text-align: left; }

/* ---------- header ---------- */
header {
	font-family: var(--font-body);
	display: grid; grid-auto-flow: column; align-items: center;
	position: fixed; top: 0; left: 0; width: 100vw;
	font-size: 0.8em; z-index: 200;
	padding: 0.8em 0; user-select: none; transition: top 0.3s;
	background: var(--header-bg);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--line);
}
header .header-left { padding-left: var(--gutter); display: flex; align-items: center; }
header img { height: 1.7em; vertical-align: middle; margin-right: 0.55em; }
header .title, header .subtitle { font-family: var(--font-display) !important; }
header .title { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
header .subtitle, .subtitle a { font-weight: 500; color: var(--accent-ink); }

nav {
	display: grid; grid-gap: 1.35em; justify-content: right; align-content: center;
	grid-auto-flow: column; padding-right: var(--gutter); align-items: center;
}
nav span { user-select: none; }
nav ul { display: grid; list-style: none; margin: 0; padding: 0; grid-auto-flow: column; grid-gap: 0.3em; align-items: center; }
nav li { padding-left: 0.5em; }
nav a {
	font-family: var(--font-mono) !important; text-transform: uppercase;
	letter-spacing: 0.12em; font-size: 0.82em; font-weight: 500; color: var(--muted);
	padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
nav a:hover { color: var(--accent); border-bottom-color: var(--accent2); }
span#nightmode-icon { font-size: 1.5em; cursor: pointer; color: var(--accent); }
span#menu-icon { cursor: pointer; color: var(--accent); }

/* ---------- corner figure-inversion control (dark only) ---------- */
span#invert-icon {
	position: fixed; right: 1em; bottom: 1em; z-index: 150; display: none;
	font-size: 1.375em; line-height: 1; width: 1em; height: 1em; padding: 0.42em;
	border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
html.theme-dark span#invert-icon { display: flex; align-items: center; justify-content: center; }
html.theme-dark span#invert-icon.visible { opacity: 1; pointer-events: auto; }
@keyframes icon-flip { 0%, 100% { color: #d8e2e3; } 50% { color: var(--accent2); } }
span#invert-icon.blink { animation: icon-flip 0.9s ease-in-out 3; }
@keyframes icon-nudge { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.25);opacity:0.55;} }
.icon-nudge { animation: icon-nudge 0.7s ease-in-out 0.8s 3; }
@media (prefers-reduced-motion: reduce) { span#invert-icon.blink, .icon-nudge { animation: none; } }

/* ---------- mobile menu ---------- */
div#menu {
	display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	padding: 4.6em var(--gutter) 1.2em; text-align: right; text-transform: capitalize;
	user-select: none; transition: top 0.3s;
	background: var(--bg); border-bottom: 1px solid var(--line);
	box-shadow: 0 12px 26px var(--shadow);
}
div#menu ul { list-style: none; margin: 0; padding: 0; }
div#menu li { line-height: 2em; padding-bottom: 1em; }
div#menu a { font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9em; color: var(--muted); }
div#menu a:hover { color: var(--accent); }

/* ================= HERO ================= */
.hero {
	padding: 6.5em var(--gutter) 3.2em;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: 0.82fr 1fr;
	gap: 3.2em;
	align-items: center;
}
.hero-media { position: relative; }
.hero-media::before {
	content: ''; position: absolute; top: -1px; left: 1.4em; right: 1.4em; height: 4px; z-index: 2;
	border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.hero-media > img {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
	object-position: 50% 22%; border-radius: var(--radius);
	border: 1px solid var(--line); box-shadow: 0 18px 50px var(--shadow);
}
.eyebrow {
	font-family: var(--font-mono); font-size: 0.72em; font-weight: 600; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.9em;
}
.hero-body h1 { font-size: clamp(2em, 1.2em + 2.6vw, 3.1em); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.rule { display: block; width: 3.4em; height: 3px; margin: 0.85em 0 1em; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.lead-role { font-family: var(--font-display); font-weight: 500; font-size: 1.05em; color: var(--accent-ink); margin: 0 0 0.9em; }
.lead { color: var(--muted); font-size: 1.0em; max-width: 46ch; margin: 0 0 1.5em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8em; margin-bottom: 1.6em; }
.btn {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: var(--font-display); font-weight: 500; font-size: 0.95em;
	padding: 0.6em 1.2em; border-radius: 999px; border: 1.5px solid var(--chip-border);
	color: var(--ink); background: var(--chip-bg); transition: all 0.16s ease; cursor: pointer;
}
.btn:hover { border-color: var(--accent2); color: var(--accent); }
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent2)); background-origin: border-box; border-color: transparent; color: #fff; box-shadow: 0 8px 22px var(--accent-shadow); }
.btn-primary:hover { color: #fff; filter: brightness(1.06); }
.btn-sub { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.08em; opacity: 0.85; text-transform: uppercase; }

#social-icons { display: flex; flex-wrap: wrap; gap: 0.15em; align-items: center; }

/* ================= STATS ================= */
.stats-band { padding: 2.6em var(--gutter); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em; }
.stat { border-left: 2.5px solid; border-image: linear-gradient(180deg, var(--accent), var(--accent2)) 1; padding-left: 1em; }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: 2.2em; line-height: 1; color: var(--accent); letter-spacing: -0.02em; }
.stat .l { font-size: 0.74em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.6em; line-height: 1.25; }

/* ================= FOCUS ================= */
.focus-band { padding: 1.4em calc(var(--gutter) + 24em) 3em var(--gutter); }
.focus { display: flex; flex-wrap: wrap; gap: 0.6em; }
.chip {
	font-size: 0.86em; background: var(--chip-bg); border: 1px solid var(--chip-border);
	color: var(--chip-ink); padding: 0.42em 0.95em; border-radius: 999px; font-weight: 500;
}
.focus .chip { background: var(--chip-accent-bg); border-color: transparent; color: var(--accent-ink); }

/* ================= BODY GRID ================= */
.body-grid {
	padding: 1em var(--gutter) 2em;
	display: grid; grid-template-columns: 1fr 21em; gap: 3em; align-items: start;
}
.col-main { min-width: 0; }
#about { margin-bottom: 3em; }
#about p { color: var(--muted); font-size: 1.0em; max-width: 68ch; }
#about a, #publications a.inline { color: var(--link); }

/* ---------- publication cards ---------- */
.pub-list { display: flex; flex-direction: column; gap: 1.4em; }
#publications article {
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.6em 1.7em; margin: 0; box-shadow: 0 2px 12px var(--shadow);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#publications article:hover { border-color: var(--accent2); box-shadow: 0 12px 34px var(--shadow); }
article h3 { position: relative; padding-left: 0; font-weight: 600; font-size: 1.2em; letter-spacing: -0.01em; margin: 0 0 0.5em 1.1em; }
article h3::before {
	content: ''; position: absolute; left: 0; top: 0.12em; bottom: 0.12em; width: 0.28em;
	margin-left: -1.1em; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent2));
}
article p { font-size: 0.95em; }
article p:not([class]) {
	text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
	color: var(--muted); margin-top: 0.6em;
}
article p.authors { color: var(--ink); font-weight: 500; margin-bottom: 0.15em; }
article p.date { display: inline; font-family: var(--font-mono); font-size: 0.82em; color: var(--faint); }
article p.journal { display: inline; color: var(--accent-ink); font-weight: 500; font-size: 0.9em; }

div.reference-links { display: inline-block; padding-left: 0.35em; }
div.reference-links ul { list-style: none; margin: 0; padding: 0; }
div.reference-links li {
	display: inline-block; border-radius: 999px; padding: 0.32em 0.7em; vertical-align: middle;
	font-size: 0.5em; margin: 0 0.4em 0.3em 0; background: var(--chip-bg);
	border: 1px solid var(--chip-border); transition: background 0.15s ease, border-color 0.15s ease;
}
div.reference-links li:hover { background: linear-gradient(90deg, var(--accent), var(--accent2)); background-origin: border-box; border-color: transparent; }
div.reference-links a { font-family: var(--font-mono) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
div.reference-links li:hover a { color: #fff; }

/* ---------- galleries (behaviour preserved) ---------- */
p.gallery { margin-top: 1.1em; padding-top: 1em; text-align: left; position: relative; --fade-rgb: var(--bg-rgb); }
.gallery::before, .gallery::after { content: ''; position: absolute; top: 0; height: 100%; width: max(10%, 4.5em); z-index: 100; pointer-events: none; transition: opacity 0.2s ease; }
.gallery::before { left: 0; background: linear-gradient(to right, rgba(var(--fade-rgb),1) 0%, rgba(var(--fade-rgb),0.5) 50%, rgba(var(--fade-rgb),0) 100%); }
.gallery::after { right: 0; background: linear-gradient(to left, rgba(var(--fade-rgb),1) 0%, rgba(var(--fade-rgb),0.5) 50%, rgba(var(--fade-rgb),0) 100%); }
.gallery.at-start::before, .gallery.at-end::after { opacity: 0; }
p.gallery span { overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: auto; display: block; text-align: center; padding-bottom: 0.5em; scrollbar-color: var(--accent2) transparent; }
p.gallery a {
	display: inline-block; margin: 0.3em; border: 1px solid var(--line); border-radius: var(--radius-sm);
	overflow: hidden; line-height: 0; vertical-align: top;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
p.gallery a:hover { border-color: var(--accent2); box-shadow: 0 6px 20px var(--shadow); }
p.gallery img {
	display: block; height: 14em; image-rendering: -webkit-optimize-contrast;
	user-select: none; -webkit-user-select: none;
}
button.gallery-nav {
	position: absolute; top: calc(50% + 0.25em); transform: translateY(-50%); z-index: 101;
	display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; padding: 0;
	border: 1px solid var(--line); border-radius: 50%; cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; background: var(--chip-bg); box-shadow: 0 3px 12px var(--shadow);
}
button.gallery-nav-left { left: 0; } button.gallery-nav-right { right: 0; }
button.gallery-nav svg { width: 0.9em; height: 0.9em; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--accent); }
button.gallery-nav:hover { background: linear-gradient(90deg, var(--accent), var(--accent2)); background-origin: border-box; border-color: transparent; }
button.gallery-nav:hover svg { stroke: #fff; }
button.gallery-nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.active { cursor: grabbing; cursor: -webkit-grabbing; }
p.gallery span::-webkit-scrollbar { height: 0.35em; }
p.gallery span::-webkit-scrollbar-track { background: transparent; }
p.gallery span::-webkit-scrollbar-thumb { background: var(--accent2); border-radius: 999px; }

/* ================= SIDEBAR ================= */
.col-side { position: sticky; top: min(5.2em, calc(100vh - var(--side-h, 46em) - 1.25em)); align-self: start; display: flex; flex-direction: column; gap: 1.1em; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25em 1.35em; }
.side-card h3 { font-size: 0.66em; margin: 0 0 1em; padding-bottom: 0.7em; border-bottom: 1px solid var(--line); }
.side-id { display: flex; flex-direction: column; gap: 0.9em; }
.side-id-top { display: flex; align-items: center; gap: 0.9em; }
.side-id-top img { width: 3.6em; height: 3.6em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.side-id #social-icons { justify-content: space-between; gap: 0.5em; padding-top: 0.9em; border-top: 1px solid var(--line); flex-wrap: wrap; }
.side-id #social-icons img { height: 1.35em; margin-right: 0; }
.side-id .kv { margin-bottom: 0; }
.side-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05em; color: var(--ink); }
.side-role { font-size: 0.82em; color: var(--accent-ink); font-weight: 500; }

.kv { font-size: 0.82em; color: var(--muted); margin-bottom: 0.75em; line-height: 1.4; word-break: break-word; }
.kv:last-child { margin-bottom: 0; }
.kv b { display: block; font-family: var(--font-mono); font-size: 0.72em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.15em; }
.kv a { color: var(--accent-ink); }

.edu { margin-bottom: 1em; line-height: 1.35; }
.edu:last-child { margin-bottom: 0; }
.edu-y { display: block; font-family: var(--font-mono); font-size: 0.72em; color: var(--accent); font-weight: 500; }
.edu-d { display: block; font-size: 0.86em; color: var(--ink); font-weight: 600; margin-top: 0.1em; }
.edu-i { display: block; font-size: 0.8em; color: var(--muted); }
.contact-card { display: flex; flex-direction: column; gap: 1em; }
.contact-top { display: flex; gap: 1em; }
.contact-top .kv { flex: 1; margin-bottom: 0; }
#social-icons.icon-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; padding-top: 0.9em; border-top: 1px solid var(--line); flex-wrap: wrap; }
#social-icons.icon-row img { height: 1.5em; margin-right: 0; }
.keys-row { display: flex; gap: 1.2em; }
.keys-row .kv { flex: 1; margin-bottom: 0; }

.side-foot { font-size: 0.74em; color: var(--faint); margin-top: 1em; }
.side-foot a { color: var(--accent-ink); }

/* ================= anchors / offsets ================= */
.anchor { scroll-margin-top: 5em; }

/* ================= FOOTER ================= */
footer {
	margin-top: 4em; padding: 2.5em var(--gutter) 2.4em; font-size: 0.72em;
	background: var(--surface); color: var(--muted); border-top: 1px solid var(--line); position: relative;
}
footer::before { content: ''; position: absolute; top: -1px; left: var(--gutter); width: 3.5em; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
footer * { font-weight: 400; }
footer h2 { font-size: 1em; letter-spacing: 0.16em; margin: 1.8em 0 0.5em; }
footer h2:first-of-type { margin-top: 0; }
footer p { max-width: 80ch; }

/* ================= responsive ================= */
@media only screen and (max-width: 900px) {
	.hero { grid-template-columns: 1fr; gap: 2em; padding-top: 6em; text-align: left; }
	.hero-media { max-width: 22em; }
	.body-grid { grid-template-columns: 1fr; gap: 2.4em; }
	.focus-band { padding-left: var(--gutter); padding-right: var(--gutter); }
	.col-side { position: static; }
	.stats { grid-template-columns: repeat(2, 1fr); gap: 1.4em 1.2em; }
	ul#header-links { display: none; }
}
@media only screen and (min-width: 901px) { span#menu-icon { display: none; } }
@media only screen and (max-width: 560px) {
	.hero-media { max-width: 100%; }
	article p:not([class]) { text-align: left; }
	#publications article { padding: 1.2em 1.15em; }
	.stat .n { font-size: 1.9em; }
}

/* ================= misc / pages ================= */
section.page { padding: 6em var(--gutter) 2em; }
section.page h1 { font-size: 1.6em; }
p code { border-radius: 0.35em; padding: 0.12em 0.35em; font-family: 'MonacoB' !important; font-size: 0.85em; background: var(--code-bg); }
blockquote { border-left: 3px solid var(--accent); margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--muted); }
table { border-collapse: collapse; margin: 2em 0; }
th { font-weight: 700; } td, th { padding: 0.8em 3em 0.8em 0.8em; }
div.pagination { margin: 6em 0 4em; text-align: center; word-spacing: 3ch; font-size: 0.6em; }
div.pagination a.current { color: var(--faint); }