@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400&family=JetBrains+Mono:wght@400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
	--ink: #173a6b;
	--accent: #0b6d78;
	--accent-soft: #dceef1;
	--bg: #e9e2d0;
	--border: #d4cbb8;
	--shadow: 0 10px 24px rgba(20, 40, 60, 0.07);
	--font-serif: "Source Serif 4", "Times New Roman", Georgia, serif;
	--font-sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "JetBrains Mono", "Courier New", monospace;
	--font-mono-body: "Inconsolata", "Courier New", monospace;
	--transition: 0.25s ease;
	--text-main: #1e3a8a;
	--text-meta: #5a7090;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-serif);
	line-height: 1.7;
	color: var(--text-main);
	text-rendering: optimizeLegibility;
	background-color: var(--bg);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n2)' opacity='0.05'/%3E%3C/svg%3E");
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

/* Desktop only: vertical centering + compact layout so home fits without scrolling */
@media (min-width: 1000px) {
	body.page-home {
		justify-content: center;
		overflow: hidden;
		height: 100vh;
	}

	body.page-home > .container {
		max-width: 1200px;
		margin-top: auto;
		margin-bottom: auto;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	body.page-home .site-header {
		padding-bottom: 10px;
	}

	body.page-home .content-wrapper {
		margin-top: 14px;
		gap: 24px;
	}

	body.page-home .sidebar {
		flex: 0 0 150px;
	}

	body.page-home .introduction p {
		font-size: clamp(15px, 1.8vw, 17px);
		margin-bottom: 9px;
		line-height: 1.6;
	}

	body.page-home .affiliations {
		margin: 12px 0 10px;
	}

	body.page-home .affil-item {
		line-height: 1.8;
	}

	body.page-home .docs-line {
		margin-bottom: 18px;
	}

	body.page-home .selected-pubs {
		margin-top: 35px;
		margin-bottom: 22px;
	}
	body.page-home .selected-pubs h2 {
		margin-top: 0;
	}

	.connect-label {
		margin-top: 20px;
	}
}

a {
	color: var(--ink);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* container for consistent width */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 0 40px;
}

.container h2 {
	font-size: clamp(20px, 4vw, 23px);
	letter-spacing: 0.04em;
	color: var(--accent);
	font-family: var(--font-sans);
	margin-top: 40px;
}

h3 {
	margin: 14px 0 8px;
	font-size: 20px;
	color: var(--accent);
	font-family: var(--font-sans);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-bottom: 16px;
	position: relative;
}

.site-title h1 {
	font-size: clamp(18px, 2.8vw, 22px);
	color: var(--ink);
	font-weight: 400;
	font-family: var(--font-mono);
	letter-spacing: 0.3px;
}

.site-title h1::before {
	content: none;
}

.site-title h1 svg {
	width: 1.3em;
	height: 1.3em;
}

body.page-home .site-title h1 {
	font-size: clamp(30px, 5.5vw, 42px);
	font-family: var(--font-serif);
	font-weight: 300;
	letter-spacing: -0.01em;
}

body.page-home .site-title h1::before {
	content: none;
}

.site-title a {
	color: inherit;
}

.site-title a:hover {
	text-decoration: none;
}

/* navigation tabs styling */
.nav-tabs {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	flex-wrap: wrap;
	row-gap: 6px;
}

.nav-tabs>li {
	position: relative;
}

.nav-tabs>li>a {
	display: block;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 13.5px;
	font-weight: 400;
	font-family: var(--font-mono);
	color: #777 !important;
	transition: background var(--transition), color var(--transition);
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.nav-tabs>li>a::before {
	content: '/';
	opacity: 0.5;
	margin-right: 2px;
}

.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus-visible {
	background: #d6cdb8;
	color: var(--text-main) !important;
	text-decoration: none;
}

.nav-tabs>li>a:hover::after {
	content: '_';
	animation: blink 1s step-end infinite;
	margin-left: 1px;
}


@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* dropdown menus */
.nav-tabs li ul {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	list-style: none;
	padding: 8px 0;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #f5f0e4;
	box-shadow: var(--shadow);
	z-index: 100;
}

.nav-tabs li ul li {
	width: 100%;
}

.nav-tabs li ul a {
	display: block;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 500;
	color: #1d2b35 !important;
	transition: background var(--transition);
}

.nav-tabs li ul a:hover {
	background: #e8e0cc;
	text-decoration: none;
}

.nav-tabs li:hover>ul,
.nav-tabs li:focus-within>ul {
	display: block;
}

/* ========================================
   HAMBURGER MENU (mobile)
   ======================================== */

.hamburger {
	display: none;
	/* hidden on desktop */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border: none;
	background: transparent;
	padding: 4px;
	border-radius: 8px;
	transition: background var(--transition);
	z-index: 200;
}

.hamburger:hover,
.hamburger:focus-visible {
	background: var(--accent-soft);
	outline: none;
}

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
	transition: all 0.3s ease;
	margin: 3px 0;
}

/* hamburger open state: X */
.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(4px, 4px);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   CONTENT AREAS
   ======================================== */

/* content wrapper for side by side layout */
.content-wrapper {
	display: flex;
	gap: 32px;
	width: 100%;
	align-items: flex-start;
}

body.page-home .content-wrapper {
	align-items: flex-start;
}

.bio-column {
	flex: 1;
	min-width: 0;
}

/* sidebar with image - aligned with header */
.sidebar {
	flex: 0 0 170px;
	max-width: 200px;
}

.side-image {
	width: 100%;
	display: block;
	border-radius: 10px;
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	transition: transform var(--transition), box-shadow var(--transition);
}

.side-image:hover {
	transform: scale(1.02);
	box-shadow: 0 14px 32px rgba(20, 40, 60, 0.12);
}

/* introduction styling */
.introduction {
	flex: 1;
	background-color: transparent;
}

.introduction h2 {
	margin: 18px 0 12px;
	color: var(--accent);
	font-size: 22px;
	font-family: var(--font-sans);
}

.introduction p {
	margin-bottom: 14px;
	font-size: clamp(15px, 1.8vw, 17px);
	font-family: var(--font-mono-body);
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.introduction a {
	color: #2d5fae !important;
}

/* dividers */
hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 22px 0;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
	margin-top: auto;
	background-color: transparent;
	padding: 6px 0 8px;
	border-top: 1px solid var(--border);
	color: var(--text-meta);
	text-align: center;
	font-size: 14px;
	font-family: var(--font-sans);
}

.site-footer .container {
	padding: 0 18px;
	max-width: 800px;
}

/* ===== Active nav indicator ===== */
.nav-tabs > li > a.nav-current {
	background: #d6cdb8;
	color: var(--text-main) !important;
}

.nav-tabs > li > a.nav-current::before {
	content: '/';
	opacity: 0.7;
	margin-right: 1px;
}


/* ========================================
   HOME+BIO: AFFILIATIONS STRIP
   ======================================== */

.affiliations {
	margin: 20px 0 6px;
}

.affil-item {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.85;
}

/* CV / Résumé document links, placed below affiliations */
.docs-line {
	margin: 6px 0 24px;
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
}

.docs-line a {
	color: var(--text-main);
	text-decoration: none;
	transition: color var(--transition);
}

.docs-line a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.docs-line .doc-sep {
	margin: 0 8px;
	opacity: 0.45;
}

/* ========================================
   HOME: CONNECT LINKS
   ======================================== */

.connect-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.connect-social-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.connect-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: #5c6bc0;
	text-decoration: none;
	transition: color var(--transition);
}

.connect-links a:hover {
	color: var(--accent);
	text-decoration: none;
}

.connect-links svg {
	flex-shrink: 0;
	display: block;
	opacity: 0.75;
	transition: opacity var(--transition);
}

.connect-links a:hover svg {
	opacity: 1;
}

.connect-links .connect-divider {
	width: 1px;
	height: 16px;
	background: var(--border);
	flex-shrink: 0;
}

/* ========================================
   BIO: EXPERIENCE CARDS
   ======================================== */

.exp-container {
	display: block;
	width: 100%;
}

.exp-container .content-wrapper {
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
}

.exp-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 220px;
	max-width: 260px;
	border-radius: 10px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	background-color: #ffffff;
	padding: 14px 16px;
	height: 100%;
	transition: transform var(--transition), box-shadow var(--transition);
}

.exp-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(20, 40, 60, 0.12);
}

.exp-card--lg {
	flex-basis: 320px;
	max-width: 320px;
}

.exp-card--md {
	flex-basis: 260px;
	max-width: 260px;
}

.exp-card--sm {
	flex-basis: 210px;
	max-width: 210px;
}

.exp-header h3 {
	margin: 0 0 4px 0;
	font-size: 16px;
}

.exp-card-sidebar {
	flex: 0 0 80px;
	max-width: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.exp-card-side-image {
	width: 100%;
	display: block;
	border-radius: 8px;
	border: 1px solid var(--border);
	background-color: #ffffff;
}

/* ========================================
   BIO & EXPERIENCE SHARED COMPONENTS
   ======================================== */

/* Standard Card Component */
.bio-card {
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 20px;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(20, 40, 60, 0.04);
	transition: transform var(--transition), box-shadow var(--transition);
	height: 100%;
}

.bio-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 40, 60, 0.08);
}

.bio-section, .edu-list, .skills-grid {
	display: grid;
	gap: 20px;
	margin: 16px 0 28px;
}

.card-header {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 12px;
}

.bio-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #ffffff;
	flex-shrink: 0;
}

.bio-meta {
	font-size: 14px;
	color: var(--text-meta);
	font-family: var(--font-sans);
	margin-top: 1px;
}

.role-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.role-item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-top: 1px dashed var(--border);
}

.role-item:first-child {
	border-top: none;
	padding-top: 0;
}

.role-title {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	color: #1d2b35;
}

.role-dates {
	font-size: 13px;
	color: #5d6b77;
	white-space: nowrap;
}

.bio-note {
	font-size: 15px;
	margin: 20px 0;
	color: var(--text-meta);
}

/* ========================================
   BIO: EDUCATION
   ======================================== */

.edu-list {
	display: grid;
	gap: 16px;
	margin: 16px 0 30px;
}

.edu-item {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 6px 14px rgba(20, 40, 60, 0.05);
	transition: transform var(--transition), box-shadow var(--transition);
}

.edu-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(20, 40, 60, 0.10);
}

.edu-logo {
	width: 100%;
	max-width: 52px;
	aspect-ratio: 1/1;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #ffffff;
}

.edu-details h3 {
	margin: 0 0 4px;
	font-size: 15px;
}

.edu-details p {
	margin: 3px 0;
	font-size: 14px;
}

.edu-subdegree {
	font-weight: 600;
	font-family: var(--font-sans);
}

/* Skills Grid */
.skills-grid {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	margin-top: 12px;
}

.skill-card h3 {
	margin-top: 0;
	color: var(--ink);
	padding-bottom: 6px;
	margin-bottom: 10px;
	font-size: 16px;
	border-bottom: 1px solid var(--border);
}

.skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.skill-tags li {
	background: var(--bg);
	border: 1px solid var(--border);
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-family: var(--font-sans);
	color: var(--text-main);
}

/* education cards */
.edu-container .content-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.edu-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	background-color: #ffffff;
}

.edu-header h3 {
	margin: 0 0 2px 0;
	font-size: 15px;
}

.edu-content a,
.edu-content a:link,
.edu-content a:visited,
.edu-content a:active {
	color: #2d5fae !important;
	text-decoration: none;
}

.img-container {
	width: 90px;
	aspect-ratio: 1 / 1;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	background-color: transparent;
}

.card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	background-color: transparent;
}

/* ========================================
   PROJECTS LIST
   ======================================== */

.project-list {
	margin: 0 auto;
	padding-left: 0;
	margin-top: 8px;
	margin-bottom: 16px;
	box-sizing: border-box;
	text-align: left;
	list-style-position: outside;
	list-style: none;
}

/* Performance: skip rendering of off-screen components */
.project-list, .bio-section, .edu-list, .ieee-refs, .exp-container {
	content-visibility: auto;
	contain-intrinsic-size: 1px 500px;
}

.project-list li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 12px;
	font-size: 15px;
	word-break: normal;
	overflow-wrap: break-word;
	border-left: 2px solid rgba(11, 109, 120, 0.5);
	list-style: none;
	transition: border-color var(--transition);
}

.project-list li:hover {
	border-left-color: var(--accent);
}

.project-list li a {
	font-size: inherit !important;
	color: #2d5fae;
	text-decoration: none;
	font-weight: normal;
}

.project-list li::marker {
	content: "";
}

/* Clean Citation Style */
.cite-pill {
	display: inline-block;
	background: var(--accent-soft);
	color: var(--accent);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-family: var(--font-sans);
	font-weight: 600;
	text-transform: uppercase;
	margin-left: 6px;
	border: 1px solid var(--border);
}

/* ===== Back to Top Button ===== */
.back-to-top {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: 52px;
	height: 52px;
	padding: 0;
	background-color: var(--bg);
	color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	cursor: pointer;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	line-height: 1.1;
	font-weight: 400;
	font-family: var(--font-mono);
	box-shadow: 0 2px 8px rgba(23, 58, 107, 0.12);
	z-index: 1000;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.back-to-top .top-text {
	font-size: 9px;
	margin-top: 1px;
	display: block;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.back-to-top:hover {
	background-color: var(--ink);
	color: var(--bg);
	transform: translateX(-50%) scale(1.05);
}

.back-to-top.show {
	display: flex;
}

/* ========================================
   TABLES
   ======================================== */

table {
	border-collapse: collapse;
	width: 98%;
}

td,
th {
	border: 1px solid var(--border);
	text-align: left;
	padding: 8px;
	font-size: 15px;
}

tr:nth-child(even) {
	background-color: #e9e4da !important;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet: 600px - 900px */
@media screen and (max-width: 900px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.site-header {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.nav-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: center;
		width: 100%;
	}

	.nav-tabs>li>a {
		font-size: 14px;
		padding: 4px 10px;
	}

	.proj-grid {
		gap: 16px;
	}

	.teaching-role {
		margin: 20px 0 28px;
	}

	.eval-note {
		margin-top: 16px;
	}
}

/* Mobile: <= 768px  — hamburger menu activated */
@media screen and (max-width: 768px) {
	body {
		overflow-y: auto;
	}

	.site-title h1 {
		font-size: 28px;
	}

	/* show hamburger button */
	.hamburger {
		display: flex;
	}

	.site-header {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	/* mobile nav: hidden by default, shown when toggled */
	.nav-tabs {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #ffffff;
		border: 1px solid var(--border);
		border-top: none;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 12px 32px rgba(20, 40, 60, 0.12);
		padding: 12px 0;
		z-index: 150;
		flex-direction: column;
		gap: 0;
	}

	.nav-tabs.open {
		display: flex;
	}

	.nav-tabs>li {
		width: 100%;
	}

	.nav-tabs>li>a {
		font-size: 15px;
		padding: 11px 20px;
		text-align: left;
		border-radius: 0;
	}

	.nav-tabs>li>a:hover,
	.nav-tabs>li>a:focus-visible {
		background: var(--accent-soft);
	}

	/* mobile dropdowns: always show nested items inline */
	.nav-tabs li ul {
		position: static;
		display: none;
		width: 100%;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0;
		background: #fafcfd;
	}

	.nav-tabs li.dropdown-open>ul {
		display: block;
	}

	.nav-tabs li ul a {
		padding: 10px 20px 10px 36px;
		font-size: 16px;
	}

	/* layout fixes */
	.content-wrapper {
		flex-direction: column;
		align-items: stretch;
	}

	.sidebar {
		max-width: 200px;
		margin: 0 auto;
	}

	.exp-card {
		max-width: 100%;
	}

	.exp-card--lg,
	.exp-card--md,
	.exp-card--sm {
		flex-basis: 100%;
		max-width: 100%;
	}

	.exp-card-sidebar {
		justify-self: center;
	}

	.bio-block {
		padding: 14px 14px;
	}

	.bio-block-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.role-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.role-dates {
		white-space: normal;
	}

	.edu-item {
		grid-template-columns: 1fr;
	}

	.nav-tabs {
		width: 100%;
		justify-content: center;
	}
}

/* Small mobile: <= 480px */
@media screen and (max-width: 480px) {
	.container {
		padding: 20px 16px 28px;
	}

	.site-title h1 {
		font-size: 24px;
	}

	.nav-tabs>li>a {
		font-size: 16px;
		padding: 10px 16px;
	}

	.introduction h2 {
		font-size: 18px;
	}

	.introduction p {
		font-size: 15px;
		text-align: left;
	}

	.teaching-intro {
		text-align: left;
		font-size: 15px;
	}

	.connect-links {
		gap: 8px;
	}

	.connect-links > a span {
		font-size: 12.5px;
	}

	.eval-quotes {
		padding: 10px 12px;
	}

	.proj-card-body {
		padding: 14px 16px 16px;
	}
}

/* Large desktop: >= 1000px */
@media screen and (min-width: 1000px) {

	body.page-bio .bio-section {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	body.page-bio .edu-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Extra-large desktop: >= 1200px */
@media screen and (min-width: 1200px) {

	body.page-home .content-wrapper {
		gap: 24px;
	}

	body.page-home .sidebar {
		flex: 0 0 150px;
		max-width: 150px;
	}

	body.page-home .side-image {
		max-height: 300px;
		object-fit: cover;
	}

	body.page-home .site-footer,
	body.page-bio .site-footer {
		padding: 10px 0 14px;
	}

	body.page-bio .bio-block {
		padding: 12px 14px;
	}

	body.page-bio .role-item {
		padding: 7px 0;
	}
}

/* ========================================
   TEACHING PAGE
   ======================================== */

.teaching-group-label {
	font-family: var(--font-sans);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 700;
	color: var(--accent);
	margin: 52px 0 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--accent);
}

.teaching-group-label:first-of-type {
	margin-top: 0;
}

.teaching-role {
	margin: 28px 0 40px;
}

.teaching-role h2 {
	margin-top: 0;
}

.teaching-intro {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.8;
	margin: 8px 0 12px;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.pedagogy-link-note {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--accent);
	line-height: 1.7;
	font-weight: 600;
	border-left: 3px solid var(--accent);
	padding-left: 12px;
	margin: 0 0 8px;
}

.pedagogy-github-note {
	font-family: var(--font-mono-body);
	font-size: clamp(12px, 1.5vw, 13px);
	color: var(--text-meta);
	line-height: 1.6;
	margin: 0 0 20px;
}

.module-grid {
	display: block;
	margin-top: 12px;
}

.module-card {
	padding: 14px 0;
	border: none;
	border-top: 1px solid var(--border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.module-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
	padding-bottom: 0;
	border-bottom: none;
}

.module-code {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid var(--border);
	white-space: nowrap;
	flex-shrink: 0;
}

.module-title {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	color: #1d2b35;
}

.module-context {
	font-family: var(--font-mono-body);
	font-size: 14px;
	color: var(--text-meta);
	margin: 0 0 8px;
	font-style: italic;
}

.module-desc {
	font-family: var(--font-mono-body);
	font-size: 13.5px;
	color: var(--text-meta);
	line-height: 1.65;
	margin: 2px 0 10px;
	font-style: italic;
}

.assess-strip {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	padding: 12px 0 0;
	border-top: 1px dashed var(--border);
}

.assess-label {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid var(--border);
	white-space: nowrap;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.assess-items {
	font-family: var(--font-mono-body);
	font-size: 13.5px;
	color: var(--text-meta);
}

.module-card .skill-tags {
	display: block;
	gap: 0;
}

.module-card .skill-tags li {
	display: inline;
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	font-size: 14px;
	font-family: var(--font-mono-body);
	color: var(--text-main);
}

.module-card .skill-tags li::after {
	content: ' · ';
	opacity: 0.45;
}

.module-card .skill-tags li:last-child::after {
	content: '';
}

/* ===== Teaching: TA semester timeline ===== */
.ta-timeline {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.ta-timeline > li {
	padding: 16px 0;
	border-top: 1px solid var(--border);
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.8;
}

.ta-timeline > li:first-child {
	border-top: none;
}

.ta-timeline > li strong {
	display: block;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 4px;
}

.ta-timeline > li p {
	margin: 0;
}

.ta-timeline > li p + p {
	margin-top: 3px;
}

.ta-assessment {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.8;
	margin: 10px 0 0;
}

.ta-assessment strong {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
}

/* ===== Teaching: pedagogy list ===== */
.pedagogy-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pedagogy-list li {
	overflow: hidden;
}

.pedagogy-list li strong {
	display: block;
	margin-bottom: 5px;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--accent);
}

.pedagogy-list li p {
	margin: 6px 0 0;
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.8;
}

.pedagogy-figure {
	float: right;
	width: 180px;
	margin: 0 0 12px 20px;
}

.pedagogy-figure img {
	width: 180px;
	height: auto;
	max-height: 220px;
	object-fit: contain;
	display: block;
	border-radius: 4px;
	opacity: 0.92;
	cursor: zoom-in;
}

.pedagogy-figure figcaption {
	font-family: var(--font-mono-body);
	font-size: 13px;
	color: var(--text-meta);
	margin-top: 5px;
	text-align: center;
	font-style: italic;
}

/* Two-column grid layout for li items that have a floated figure */
.pedagogy-list li.has-figure {
	display: grid;
	grid-template-columns: 1fr 165px;
	column-gap: 20px;
}

.pedagogy-list li.has-figure strong {
	grid-column: 1 / -1;
}

.pedagogy-list li.has-figure .pedagogy-figure {
	grid-column: 2;
	grid-row: 2;
	float: none;
	width: 100%;
	margin: 0;
	align-self: start;
}

.pedagogy-list li.has-figure .pedagogy-figure img {
	width: 100%;
	height: auto;
	max-height: none;
}

.pedagogy-list li.has-figure > p {
	grid-column: 1;
	grid-row: 2;
	margin-top: 0;
	min-width: 0;
	overflow-x: auto;
}

/* Assessment paragraph: same typography as content, separate line */
.pedagogy-list li p.pedagogy-assessment {
	margin-top: 12px;
}

.pedagogy-list li p.pedagogy-assessment strong {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin-bottom: 0;
	text-decoration: underline;
}

.pedagogy-list li.has-figure > p.pedagogy-assessment {
	grid-column: 1;
	grid-row: 3;
	margin-top: 0;
	min-width: 0;
	overflow-x: auto;
}

.wave-optics-figures {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	margin-top: 20px;
	clear: both;
}

.wave-optics-figures figure {
	margin: 0;
	text-align: center;
}

.wave-optics-figures img {
	width: 100%;
	max-height: 150px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	cursor: zoom-in;
}

.wave-optics-figures figcaption {
	font-family: var(--font-mono-body);
	font-size: 13px;
	color: var(--text-meta);
	font-style: italic;
	margin-top: 6px;
}

.pedagogy-attribution {
	font-family: var(--font-mono-body);
	font-size: 10.5px;
	color: var(--text-meta);
	margin: 4px 0 0;
	font-style: italic;
	text-align: right;
	clear: both;
}

.wave-optics-figures .pedagogy-attribution {
	grid-column: 1 / -1;
	margin: 0;
}

.wave-optics-figures + p {
	margin-top: 18px;
}

.explore-link {
	display: block;
	margin-top: 5px;
}

/* Extra breathing room between consecutive paragraphs in pedagogy items */
.pedagogy-list li p + p {
	margin-top: 10px;
}

/* Wave Optics sub-topic bullet list */
.wave-optics-topics {
	list-style: disc inside;
	margin: 14px 0 0;
	padding-left: 4px;
}

.wave-optics-topics > li {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.8;
	overflow-x: auto;
	overflow-y: visible;
	margin-bottom: 12px;
}

.wave-optics-topics > li:last-child {
	margin-bottom: 0;
}

/* Wave Optics sub-topic labels: bold sans, not italic, so they read as mini-headings */
.pedagogy-list li p > em:first-child,
.wave-optics-topics > li > em:first-child {
	font-style: normal;
	font-weight: 600;
	font-family: var(--font-sans);
	font-size: 15px;
	color: #1d2b35;
}

.pedagogy-tag {
	display: inline-block;
	margin-left: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-meta);
	background: var(--accent-soft);
	padding: 1px 7px;
	border-radius: 4px;
	border: 1px solid var(--border);
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ===== Teaching: evaluation note ===== */
.eval-note {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px dashed var(--border);
}

.eval-note h3 {
	font-size: 17px;
	margin: 0 0 4px;
}

.eval-note > p {
	font-family: var(--font-mono-body);
	font-size: 15px;
	color: var(--text-meta);
	margin: 0 0 10px;
	font-style: italic;
}

.eval-context {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-meta);
	margin: 2px 0 10px;
	letter-spacing: 0.04em;
}

.eval-intro {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.7;
	margin: 0 0 14px;
}

.eval-note .diss-details {
	margin: 0;
}

.eval-note .diss-details summary {
	font-size: 0.88rem;
	background: #f5f1e8;
	border-color: var(--border);
	color: var(--text-meta);
	font-weight: 400;
}

.eval-note .diss-details summary:hover {
	background: #ede8dc;
}

.eval-quotes {
	list-style: none;
	padding: 10px 14px 10px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #f9f6ef;
	border-radius: 0 0 6px 6px;
	border: 1px solid var(--border);
	border-top: none;
}

.eval-quotes li {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: #3d4f6a;
	line-height: 1.75;
	padding-left: 10px;
	border-left: 2px solid #c8d8e8;
}

.eval-module-tag {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-meta);
	opacity: 0.75;
	margin-top: 3px;
	letter-spacing: 0.03em;
}

/* Pull quote — standalone (no heading above, used in outreach) */
.pull-quote {
	padding: 10px 14px;
	margin: 16px 0 20px;
	background: #f9f6ef;
	border-radius: 6px;
	border: 1px solid var(--border);
}

.pull-quote p {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: #3d4f6a;
	line-height: 1.75;
	padding-left: 10px;
	border-left: 2px solid #c8d8e8;
	text-align: left;
	hyphens: none;
	margin-bottom: 0;
}

/* Outreach photos */
.outreach-photo {
	margin: 20px 0 6px;
}
.outreach-photo img {
	width: 100%;
	border-radius: 6px;
	display: block;
}
.outreach-diagram-pair {
	display: grid;
	grid-template-columns: 220px 220px;
	gap: 16px;
	margin-top: 16px;
}
.outreach-diagram-pair figure {
	margin: 0;
}
.outreach-diagram-pair img {
	width: 100%;
	display: block;
	border-radius: 4px;
	border: 1px solid var(--border);
	background: #fff;
	padding: 8px;
}
.outreach-diagram-pair figcaption {
	font-family: var(--font-mono-body);
	font-size: 11.5px;
	color: var(--text-meta);
	margin-top: 6px;
	text-align: center;
	font-style: italic;
}
@media (max-width: 500px) {
	.outreach-diagram-pair { grid-template-columns: 1fr; }
}

.outreach-photo-pair {
	display: grid;
	grid-template-columns: 200px 200px;
	gap: 10px;
	margin: 20px 0 6px;
}
.outreach-photo-pair img {
	width: 100%;
	border-radius: 6px;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
.outreach-photo-caption,
.outreach-entry p.outreach-photo-caption {
	font-family: var(--font-mono-body);
	font-size: 13px;
	color: var(--text-meta);
	margin-top: 6px;
	text-align: center;
	font-style: italic;
	line-height: 1.4;
}
@media (max-width: 480px) {
	.outreach-photo-pair {
		grid-template-columns: 1fr;
	}
}

/* ===== Outreach page ===== */
.outreach-epigraph {
	text-align: center;
	margin: 32px auto 44px;
	max-width: 480px;
}
.outreach-epigraph p {
	font-family: 'IM Fell English', serif;
	font-style: italic;
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.88;
	color: #2d3f55;
}
.outreach-epigraph .epigraph-attrib {
	display: block;
	margin-top: 14px;
	font-family: var(--font-mono-body);
	font-style: normal;
	font-size: 12px;
	color: var(--text-meta);
	text-align: right;
}

.outreach-entry {
	margin: 0 0 32px;
}
.outreach-entry h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
	hyphens: none;
	-webkit-hyphens: none;
}
.outreach-entry p,
.outreach-entry ul {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	color: var(--text-main);
	line-height: 1.8;
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
	margin-bottom: 8px;
}
.outreach-entry p:last-child {
	margin-bottom: 0;
}
.outreach-entry .pull-quote p {
	font-size: clamp(15px, 1.8vw, 17px);
	color: #3d4f6a;
	text-align: left;
	hyphens: none;
	-webkit-hyphens: none;
}
.outreach-entry ul {
	list-style: disc;
	padding-left: 20px;
	text-align: left;
}
.outreach-entry ul li {
	margin-bottom: 4px;
}
.outreach-entry ul.eval-quotes {
	list-style: none;
	padding-left: 0;
}
.outreach-entry ul.eval-quotes li {
	border-left: none;
	padding-left: 10px;
}
.outreach-entry ul li strong {
	font-family: var(--font-sans);
	font-weight: 600;
	color: #1d2b35;
}
.cluster-rule {
	border: none;
	border-top: 1px solid var(--border);
	margin: 28px 0;
}
.entry-with-photo {
	display: grid;
	grid-template-columns: 1fr 270px;
	gap: 20px;
	align-items: start;
	margin-bottom: 12px;
}
.entry-with-photo--wide {
	grid-template-columns: 1fr 420px;
}
.physics-outreach-wrap {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 28px;
	align-items: start;
	margin-top: 12px;
}
.physics-diagrams {
	margin: 0;
}
.physics-diagrams img {
	width: 100%;
	display: block;
	border-radius: 4px;
}
.physics-diagrams-captions {
	display: grid;
	grid-template-columns: 1024fr 820fr;
	margin-top: 5px;
	font-family: var(--font-mono-body);
	font-size: 13px;
	color: var(--text-meta);
	font-style: italic;
	text-align: center;
	line-height: 1.4;
}
.entry-photo img {
	width: 100%;
	border-radius: 5px;
	display: block;
}
.entry-photo .outreach-photo-caption {
	text-align: center;
}
.entry-photo .pull-quote {
	margin: 10px 0 0;
}
.diwali-photo-strip {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}
.diwali-photo-strip img {
	width: 100%;
	border-radius: 5px;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
@media (max-width: 600px) {
	.entry-with-photo,
	.entry-with-photo--wide {
		grid-template-columns: 1fr;
	}
	.entry-photo {
		order: -1;
	}
	.physics-outreach-wrap {
		grid-template-columns: 1fr;
	}
	.physics-diagrams {
		width: 100%;
		margin: 0;
	}
	.diwali-photo-strip {
		grid-template-columns: 1fr;
	}
}

/* ===== Research page: Dissertation Promo ===== */
.dissertation-promo {
	margin: 40px 0 32px;
	padding: 0;
	text-align: center;
}

.dissertation-promo p {
	font-size: 1.25rem;
	font-family: var(--font-sans);
	line-height: 1.6;
	margin: 0;
	color: var(--ink);
	font-weight: 700;
}

.dissertation-promo a {
	color: var(--ink) !important;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color var(--transition);
}

.dissertation-promo a:hover {
	border-bottom-color: var(--accent);
}


/* ===== Research page: collapsible dissertation ===== */
.diss-details {
	margin: 12px 0 20px;
}

.diss-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--accent);
	font-size: .97rem;
	padding: 10px 16px;
	background: #f0f6fc;
	border-radius: 6px;
	border: 1px solid #d8e6f3;
	transition: background .2s ease;
	list-style: none;
}

.diss-details summary::-webkit-details-marker {
	display: none;
}

.diss-details summary::before {
	content: "▸ ";
	font-size: .85rem;
	transition: transform .2s ease;
	display: inline-block;
}

.diss-details[open] summary::before {
	content: "▾ ";
}

.diss-details summary:hover {
	background: #e2effa;
}

.proj-talk summary {
	cursor: pointer;
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	font-weight: normal;
	color: var(--accent);
	list-style: none;
}

.proj-talk summary::-webkit-details-marker {
	display: none;
}

.proj-talk summary::before {
	content: "\25B8  ";
	font-size: .85em;
	display: inline-block;
}

.proj-talk[open] summary::before {
	content: "\25BE  ";
}

.dissertation-overview {
	margin: 20px 0 8px;
}

.dissertation-overview .diss-abstract {
	font-size: .97rem;
	line-height: 1.8;
	color: var(--text);
	margin-bottom: 24px;
}

.pillar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
}

.pillar-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.pillar-card img {
	width: 100%; /* Ensure image fills its container */
	height: 240px; /* Increased height for better visibility */
	object-fit: contain;
	background: #fafbfc;
	padding: 6px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}

.pillar-card figcaption {
	font-size: 0.7rem;
	color: #5a6d7e;
	text-align: center;
	padding: 4px 12px 2px;
	font-style: italic;
	line-height: 1.4;
	background: #fafbfc;
	border-bottom: 1px solid var(--border);
}

.theme-figure figcaption,
.proj-section figcaption {
	font-family: var(--font-mono-body);
	font-size: 13px;
	color: var(--text-meta);
	text-align: center;
	padding: 4px 0 8px;
	font-style: italic;
	line-height: 1.4;
}

/* Lightbox overlay for enlarged figure view */
.figure-lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .75);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.figure-lightbox.active {
	display: flex;
}

.figure-lightbox img {
	width: 85vw;
	height: 80vh;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
	object-fit: contain;
	background: var(--bg);
}

.pillar-card .pillar-body {
	padding: 14px 18px 18px;
}

.pillar-card h4 {
	font-family: var(--font-heading);
	color: var(--primary);
	font-size: 1.02rem;
	margin: 0 0 6px;
}

.pillar-card p {
	font-size: .9rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* ===== Research themes with side-by-side figures ===== */
.research-theme {
	margin: 20px 0;
	padding: 18px 22px;
	background: #fff;
	border-left: 4px solid var(--accent);
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.theme-content {
	display: flex; /* Changed to flex for better alignment control */
	gap: 20px;
	align-items: flex-start; /* Aligned to top to prevent misalignment with multiple figures */
}

.theme-text {
	flex: 1;
	min-width: 0;
}

.theme-figure {
	flex: 0 0 350px; /* Increased flex-basis for larger figures */
	align-self: center;
}

.theme-figure img {
	width: 100%;
	border-radius: 6px;
}

.research-theme h4 {
	font-family: var(--font-heading);
	color: var(--primary);
	font-size: 1.02rem;
	margin: 0 0 8px;
}

.research-theme p {
	font-size: .93rem;
	line-height: 1.6;
	margin: 0 0 10px;
}

.theme-refs {
	font-size: .87rem !important;
	color: #777;
	margin: 4px 0 0 !important;
}

.research-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 20px 0 30px;
}

.summary-card {
	display: block;
	background: var(--accent-soft);
	padding: 16px;
	border-radius: 10px;
	border: 1px solid var(--border);
	text-align: left;
	transition: transform var(--transition), box-shadow var(--transition);
	text-decoration: none !important;
}

.summary-card strong {
	display: block;
	color: var(--ink);
	margin-bottom: 6px;
	font-family: var(--font-sans);
}

/* Unified Alignment for Lists */
.harvard-refs, .presentation-list {
	padding-left: 32px;
	margin: 20px 0;
}

/* Selected Publications on Bio page */
.selected-pubs {
	margin-top: 16px;
	margin-bottom: 16px;
}
.pub-cv-link {
	margin-top: 22px;
	font-family: var(--font-sans);
	font-size: clamp(14px, 1.6vw, 15px);
	font-weight: 600;
}
.pub-cv-link a {
	color: var(--accent);
	text-decoration: none;
}
.pub-cv-link a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.selected-pubs-label {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}
.connect-location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-meta);
}
.connect-location svg {
	flex-shrink: 0;
	display: block;
	opacity: 0.6;
}
.connect-label {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin-top: 28px;
	margin-bottom: 10px;
}
.selected-pubs .harvard-refs li a:visited {
	color: var(--text-main);
	text-decoration: none;
}
.selected-pubs .harvard-refs {
	padding-left: 0;
	margin: 6px 0;
	list-style-position: inside;
}
.selected-pubs .harvard-refs li {
	font-family: var(--font-serif);
	font-size: clamp(14px, 1.6vw, 15px);
	color: var(--text-main);
	line-height: 1.7;
	margin-bottom: 16px;
	padding-left: 1.8em;
	text-indent: -1.8em;
}
.selected-pubs .harvard-refs li a {
	color: var(--text-main);
	text-decoration: none;
}
.selected-pubs .harvard-refs li a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.presentation-list li {
	padding-left: 4px;
}

.summary-card p {
	font-size: 0.85rem;
	margin: 0 !important;
	line-height: 1.4;
	color: var(--text-main);
}

.summary-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 15px rgba(20, 40, 60, 0.1);
}

/* ===== Conference/Presentation List (Non-CV style) ===== */
.presentation-list {
	list-style: none;
}

.presentation-list li {
	margin-bottom: 18px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-main);
}

.presentation-meta {
	display: block;
	color: #5d6b77;
	font-size: 0.88rem;
	margin-top: 3px;
}

/* ===== IEEE-style numbered publications ===== */
.ieee-refs {
	padding-left: 28px;
	margin: 12px 0;
}

.ieee-refs li {
	font-size: .93rem;
	line-height: 1.6;
	margin-bottom: 10px;
	padding-left: 4px;
}

@media screen and (max-width: 768px) {
	.pillar-grid {
		grid-template-columns: 1fr;
	}

	.theme-content {
		flex-direction: column;
	}

	.theme-figure {
		flex: none;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}

	.research-theme {
		padding: 14px 16px;
	}

	.pillar-card img {
		height: 150px;
	}
}

/* Touch device dropdown handling */
@media (hover: none) {
	.nav-tabs li ul {
		min-width: 220px;
	}
}

/* ========================================
   PROJECT CARDS GRID (projects.html)
   ======================================== */

.proj-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 32px 0 40px;
}

.proj-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-top: 3px solid var(--accent);
	border-radius: 0;
	background: #ffffff;
	text-decoration: none !important;
	color: inherit;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.proj-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 36px rgba(20, 40, 60, 0.14);
	text-decoration: none !important;
}

.proj-card-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #ffffff;
	border-bottom: 1px solid var(--border);
	overflow: hidden;
	flex-shrink: 0;
}

.proj-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 12px;
	transition: transform 0.4s ease;
}

.proj-card:hover .proj-card-img img {
	transform: scale(1.04);
}

.proj-card-img--placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #142038 0%, #0b3a42 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.18);
	letter-spacing: 0.08em;
	flex-shrink: 0;
}

.proj-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

.proj-card-title {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
	margin: 0;
}

.proj-card-desc {
	font-family: var(--font-mono-body);
	font-size: 13.5px;
	color: var(--text-meta);
	line-height: 1.65;
	margin: 0;
	flex: 1;
}

.proj-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.proj-tag {
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1d5c8a;
	background: #dceef9;
	border: 1px solid #b5d5ea;
	padding: 3px 8px;
	border-radius: 0;
	white-space: nowrap;
}

/* Back link on project detail pages */
.proj-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--text-meta);
	text-decoration: none;
	margin: 18px 0 4px;
	transition: color var(--transition);
	letter-spacing: 0.02em;
}

.proj-back::before {
	content: '←';
}

.proj-back:hover {
	color: var(--accent);
	text-decoration: none;
}

/* Body text on project detail pages */
.proj-text {
	font-family: var(--font-mono-body);
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.75;
	color: var(--text-main);
	margin-bottom: 14px;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.proj-text a {
	color: #2d5fae !important;
}

/* ========================================
   TERMINAL EQUATION BLOCKS (research_theory.html)
   ======================================== */

.terminal-block {
	background: #0d1117;
	border: 1px solid #30363d;
	border-left: 3px solid var(--accent);
	border-radius: 0 4px 4px 0;
	padding: 20px 26px 22px;
	margin: 24px 0;
	overflow-x: auto;
}

.terminal-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	color: #4a6388;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #21262d;
}

.terminal-block p {
	font-family: var(--font-mono-body);
	font-size: 14px;
	line-height: 1.8;
	color: #8ba5c8;
	margin: 10px 0 0;
}

/* Equations stay near-white (Terminal A color) */
.terminal-block mjx-container {
	color: #e6edf3 !important;
}

.terminal-block mjx-container svg {
	color: #e6edf3;
}

.eq-note {
	font-family: var(--font-mono-body);
	font-size: 13px;
	color: var(--text-meta);
	font-style: italic;
	margin: 6px 0 20px;
}

@media screen and (max-width: 900px) {
	.proj-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 640px) {
	.proj-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ========================================
   PROJECT DETAIL PAGES
   ======================================== */

/* Override .research-theme p specificity for detail page body text */
.research-theme .proj-text {
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.75;
	margin-bottom: 14px;
}

/* Section without card background */
.proj-section {
	margin: 36px 0 44px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
}

.proj-section h3 {
	margin-top: 0;
}

/* Light equation block (replaces dark terminal-block for detail pages) */
.eq-block {
	background: #f5f1e8;
	border-left: 3px solid var(--accent);
	border-radius: 0 4px 4px 0;
	padding: 16px 22px 18px;
	margin: 20px 0;
	overflow-x: auto;
}

.eq-block .eq-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}

.eq-block p {
	font-family: var(--font-mono-body);
	font-size: clamp(14px, 1.6vw, 15px);
	color: var(--text-main);
	line-height: 1.75;
	margin: 8px 0 0;
}

/* Publication list items on detail pages (outside .selected-pubs context) */
.harvard-refs li {
	font-size: clamp(14px, 1.6vw, 15px);
	line-height: 1.75;
	margin-bottom: 14px;
}

.harvard-refs li a {
	color: var(--text-main);
	text-decoration: none;
}

.harvard-refs li a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}