/* ---------- Site graph: top of the right-hand margin column ---------- */
.site-graph,
.site-graph-links {
	--sg-link: var(--gg-graph-link);
	/* node colours match the tags on the Research page */
	--sg-page: var(--gg-heading);
	--sg-goal: var(--gg-accent);
	--sg-project: var(--gg-sand);
	--sg-organism: var(--gg-yellow);
	--sg-method: var(--gg-red);
	--sg-topic: color-mix(in srgb, var(--gg-muted) 70%, transparent);
	--sg-current: var(--gg-accent);
	--sg-hover: var(--gg-yellow);
	--sg-text: var(--gg-text);
}

.site-graph { margin-bottom: 1.5rem; }

/* Narrow screens: graph and list flow after the page content */
body.site-graph-inline .site-graph,
body.site-graph-inline .site-graph-links {
	max-width: 600px;
	margin: 2rem auto 0;
	padding: 0 1rem;
	text-align: left;
}

.site-graph-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.site-graph-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gg-muted);
}

#site-graph-expand {
	background: none;
	border: none;
	color: var(--gg-muted);
	font-size: 1.1rem;
	line-height: 1;
	padding: 2px 4px;
	cursor: pointer;
}
#site-graph-expand:hover { color: var(--gg-heading); }

.site-graph-canvas {
	border: 1px solid var(--gg-border);
	border-radius: 8px;
	background: var(--gg-bg);
}

#site-graph-svg {
	display: block;
	width: 100%;
	height: 240px;
}
body.site-graph-inline #site-graph-svg { height: 300px; }

/* Full-screen graph */
.site-graph.fullscreen .site-graph-canvas {
	position: fixed;
	inset: calc(var(--gg-navbar-h) + 2vh) 4vw 4vh 4vw;
	z-index: 2000;
	box-shadow: 0 0 0 100vmax rgba(10, 10, 14, 0.7);
}
.site-graph.fullscreen #site-graph-svg { height: 100%; }
.site-graph.fullscreen .sg-node text { opacity: 0.9; font-size: 12px; }
.site-graph.fullscreen #site-graph-expand {
	position: fixed;
	top: calc(var(--gg-navbar-h) + 2vh + 8px);
	right: calc(4vw + 12px);
	z-index: 2001;
}

/* Connected pages list */
.site-graph-links { margin-top: 1.5rem; font-size: 0.9rem; }
.site-graph-links ul {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
}
.site-graph-links li { margin: 0.3rem 0; }
.site-graph-links li a { color: var(--gg-text); }
.site-graph-links li a:hover { color: var(--gg-accent); }
.site-graph-links li::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.6rem;
	border-radius: 50%;
	vertical-align: middle;
	background: var(--sg-topic);
}
.site-graph-links li.sg-li-page::before { background: var(--sg-page); }
.site-graph-links li.sg-li-goal::before { background: var(--sg-goal); }
.site-graph-links li.sg-li-project::before { background: var(--sg-project); }
.site-graph-links li.sg-li-organism::before { background: var(--sg-organism); }
.site-graph-links li.sg-li-method::before { background: var(--sg-method); }

/* Graph marks */
.sg-links line {
	stroke: var(--sg-link);
	stroke-width: 1;
	transition: stroke 0.15s, opacity 0.15s;
}

.sg-node circle {
	fill: var(--sg-topic);
	transition: fill 0.15s, opacity 0.15s;
}
.sg-node.sg-page circle { fill: var(--sg-page); }
.sg-node.sg-goal circle { fill: var(--sg-goal); }
.sg-node.sg-project circle { fill: var(--sg-project); }
.sg-node.sg-organism circle { fill: var(--sg-organism); }
.sg-node.sg-method circle { fill: var(--sg-method); }
/* "you are here": a glowing ring around the current page or project */
.sg-node.sg-current circle {
	stroke: var(--sg-current);
	stroke-width: 3;
	paint-order: stroke;
	filter: drop-shadow(0 0 4px var(--sg-current));
}

.sg-node text {
	font-family: "Assistant", sans-serif;
	font-size: 10px;
	fill: var(--sg-text);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}
/* Page and current-node labels always visible; others appear on hover or in full screen */
.sg-node.sg-page text,
.sg-node.sg-current text { opacity: 0.9; }

/* Hover: fade everything except the hovered node and its neighbours */
.site-graph.hovering .sg-node { opacity: 0.2; }
.site-graph.hovering .sg-links line { opacity: 0.15; }
.site-graph.hovering .sg-node.sg-active { opacity: 1; }
.site-graph.hovering .sg-node.sg-active text { opacity: 1; }
.site-graph.hovering .sg-links line.sg-active { opacity: 1; stroke: var(--sg-hover); }
.sg-node:hover circle { stroke: var(--sg-hover); stroke-width: 2.5; }

/* ---------- Welcome page ---------- */
.quarto-about-jolla p { font-size: 1.1rem; }
.quarto-about-jolla .subtitle,
.quarto-about-jolla .quarto-title { text-align: center; }

/* ---------- Publications ---------- */
/* Pandoc wraps a block's spans in one <p>; stack them */
.pub > p, .pub-intro > p, .pub-year-group > p { margin: 0; }
.pub > p > span { display: block; }

/* Google Scholar link under the page title */
.pub-intro > p { color: var(--gg-muted); }

/* Year rail on the left, entries on the right */
.pub-year-group {
	display: grid;
	grid-template-columns: 3.6rem minmax(0, 1fr);
	column-gap: 0.4rem;
	padding: 1.1rem 0;
	border-top: 1px solid var(--gg-border);
}
.pub-year-group:first-of-type { border-top: none; }
.pub-year-group > p { grid-column: 1; grid-row: 1 / span 20; }
.pub-year-group > .pub { grid-column: 2; }
.pub-year {
	position: sticky;
	top: calc(var(--gg-navbar-h) + 1rem);
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--gg-accent);
	font-variant-numeric: tabular-nums;
}

.pub {
	position: relative;
	padding: 0.15rem 0 0.15rem 0.7rem;
	border-left: 2px solid transparent;
	transition: border-color 0.2s;
}
.pub + .pub { margin-top: 1.4rem; }
.pub:hover { border-left-color: var(--gg-accent); }

.pub-title {
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gg-heading);
}
.pub-authors {
	margin-top: 0.3rem;
	font-size: 0.93rem;
	line-height: 1.5;
	color: var(--gg-muted);
}
.pub-authors strong { color: var(--gg-text); font-weight: 700; }
.pub-venue { margin-top: 0.15rem; font-size: 0.93rem; }

/* Link pills */
.pub-links { margin-top: 0.55rem; }
.pub-links a {
	display: inline-block;
	margin: 0 0.4rem 0.3rem 0;
	padding: 0.1rem 0.65rem;
	border: 1px solid color-mix(in srgb, var(--gg-accent) 45%, transparent);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--gg-accent);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* link from a publication to its research project page */
.pub-links a.pub-project {
	border-color: var(--gg-accent);
	background: color-mix(in srgb, var(--gg-accent) 14%, transparent);
}
.pub-links a:hover {
	background: var(--gg-accent);
	border-color: var(--gg-accent);
	color: var(--gg-bg);
}

@media (max-width: 575.98px) {
	.pub-year-group { grid-template-columns: 1fr; row-gap: 0.6rem; }
	.pub-year-group > p, .pub-year-group > .pub { grid-column: 1; grid-row: auto; }
	.pub-year { position: static; }
}

/* Jolla centres everything; keep the link list readable */
.quarto-about-jolla main ul,
.quarto-about-jolla ul:not(.navbar-nav) {
	display: inline-block;
	text-align: left;
}

/* ---------- Photo banner (top) and photo background ---------- */
.photo-hero {
	position: relative;
	height: var(--hero-h, 42vh);
	min-height: 220px;
	overflow: hidden;
	/* long, eased fade so the banner dissolves gradually into the page */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.85) 65%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.3) 86%, rgba(0, 0, 0, 0.1) 94%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.85) 65%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.3) 86%, rgba(0, 0, 0, 0.1) 94%, transparent 100%);
}

.photo-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.photo-slide.visible { opacity: 1; }
.photo-slide.instant { transition: none; }

/* What the banner photos' faded edges dissolve into (light theme: the page itself) */
body.quarto-dark .photo-hero { background: #000; }

/* Slow "Ken Burns" drift on the banner */
.photo-hero .photo-slide.zooming { animation: hero-drift 16s ease-out forwards; }
@keyframes hero-drift {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* Slight darkening at the top so the navbar stays legible */
.photo-hero-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--gg-hero-top) 0%, transparent 30%);
	pointer-events: none;
}

.photo-caption {
	position: absolute;
	right: 1.25rem;
	bottom: 32%;
	font-size: 0.85rem;
	font-style: italic;
	color: #f6f1ed;
	opacity: 0.8;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.photo-caption.empty { display: none; }

/* Pull the page title up so it overlaps the bottom of the banner */
body.has-photo-hero #quarto-content { margin-top: -4.5rem; position: relative; z-index: 1; }
body.quarto-dark.has-photo-hero .quarto-title-block .title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }

/* Fixed background: very dim so text stays readable */
.photo-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.photo-bg .photo-slide { filter: saturate(0.8) blur(2px); transform: scale(1.03); }
.photo-bg .photo-slide.visible { opacity: var(--gg-photo-opacity); }
.photo-bg-veil {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, var(--gg-veil-inner) 0%, var(--gg-veil-outer) 100%);
}
/* Placeholders are already dark; let them show a little more */
body.photo-placeholders .photo-bg .photo-slide.visible { opacity: var(--gg-placeholder-opacity); }

@media (prefers-reduced-motion: reduce) {
	.photo-slide { transition: none; }
	.photo-hero .photo-slide.zooming { animation: none; }
}

/* On the home page the round portrait sits over the banner edge */
.quarto-about-jolla .about-image { box-shadow: 0 0 0 4px var(--gg-bg), 0 8px 30px rgba(0, 0, 0, 0.5); }

/* ---------- Light / dark switch (right-hand end of the top bar) ---------- */
.quarto-navbar-tools .quarto-color-scheme-toggle { display: none !important; }

.theme-switch {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 58px;
	height: 28px;
	padding: 0 7px;
	border: 1px solid var(--gg-border);
	border-radius: 999px;
	background: var(--gg-surface);
	color: var(--gg-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.theme-switch:hover { border-color: var(--gg-accent); }
.theme-switch:focus-visible { outline: 2px solid var(--gg-accent); outline-offset: 2px; }

.theme-switch .theme-switch-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gg-ember);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	transition: transform 0.25s ease;
}
/* Knob sits over the sun in light mode, over the moon in dark mode */
body.quarto-dark .theme-switch .theme-switch-knob { transform: translateX(30px); }

/* Keep the search icon clear of the switch */
.navbar #quarto-search { margin-right: 70px; }

/* ---------- Teaching: philosophy + courses side by side, photo collage ---------- */
.eyebrow {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gg-muted);
}

.teaching-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
	margin: 1.25rem 0 2.75rem;
}
.teaching-philosophy p { font-size: 1.05rem; line-height: 1.7; }
.teaching-courses {
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--gg-border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--gg-surface) 55%, transparent);
}
.teaching-courses .course-list { margin: 0.25rem 0 0.75rem; }
.course-note { display: block; font-size: 0.8rem; color: var(--gg-muted); font-style: italic; }
@media (max-width: 767.98px) {
	.teaching-intro { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Collage: one large photo, two tall portraits, four small tiles (4 columns x 3 rows, no gaps) */
.photo-collage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 165px;
	grid-auto-flow: dense;
	gap: 10px;
	margin: 0 0 3rem;
}
.collage-item.tall { grid-row: span 2; }
.collage-item.big { grid-column: span 2; grid-row: span 2; }
.collage-item,
.collage-item .quarto-figure,
.collage-item figure,
.collage-item figure > p {
	position: relative;
	height: 100%;
	margin: 0;
}
.collage-item figure { overflow: hidden; border-radius: 8px; }
.collage-item figure a { display: block; height: 100%; }
.collage-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.collage-item:hover img { transform: scale(1.04); }

/* Caption slides up over the photo on hover (always shown on touch screens) */
.collage-item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 1.5rem 0.75rem 0.6rem;
	font-size: 0.82rem;
	line-height: 1.3;
	color: #f6f1ed;
	background: linear-gradient(to top, rgba(15, 13, 16, 0.85), transparent);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s, transform 0.25s;
	pointer-events: none;
}
.collage-item:hover figcaption { opacity: 1; transform: none; }
@media (hover: none) {
	.collage-item figcaption { opacity: 1; transform: none; }
}
@media (max-width: 767.98px) {
	.photo-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}

.course-list {
	border-left: 2px solid var(--gg-border);
	margin: 1rem 0 2rem;
	padding-left: 1.25rem;
}
.course {
	position: relative;
	padding: 0.45rem 0;
}
.course::before {
	content: "";
	position: absolute;
	left: calc(-1.25rem - 6px);
	top: 0.85rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gg-accent);
	box-shadow: 0 0 0 3px var(--gg-bg);
}
/* Pandoc wraps the three spans in one <p>; stack them */
.course > p { margin: 0; }
.course > p > span { display: block; }
.course-years {
	color: var(--gg-accent);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.course-name { font-size: 1rem; line-height: 1.35; }
.course-meta { font-size: 0.88rem; color: var(--gg-muted); }

/* ---------- Responsive layout ----------
   ≥ 992px  : main column + right sidebar (graph, outline, connected list)
   < 992px  : single column; graph + connected list flow below the content
   < 768px  : narrower side gutters for phones                              */
@media (max-width: 991.98px) {
	body .page-columns,
	body.floating .page-columns,
	body.docked .page-columns {
		grid-template-columns: [screen-start] var(--gg-side-gutter, 2.5rem) [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0px, 1fr) [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] var(--gg-side-gutter, 2.5rem) [screen-end] !important;
	}
	/* the outline has no room beside the text here; the graph moves below the content */
	#quarto-margin-sidebar { display: none !important; }
}
@media (max-width: 767.98px) {
	:root { --gg-side-gutter: 1rem; }
}

/* ---------- Phone and tablet refinements ---------- */
@media (max-width: 767.98px) {
	/* shorter banner so the page title shows without scrolling */
	.photo-hero { height: min(var(--hero-h, 42vh), 34vh); min-height: 180px; }
	.photo-hero .photo-slide.has-narrow-pos { background-position: var(--narrow-pos) !important; }
	.quarto-about-jolla .subtitle,
	.quarto-about-jolla .quarto-title { text-align: center; }
}
/* phones held sideways: very little height, keep the banner modest */
@media (max-height: 500px) and (orientation: landscape) {
	.photo-hero { height: 45vh; min-height: 150px; }
}

/* ---------- Research: questions, project cards, organisms & methods ---------- */
/* Each research question is a section heading; long, so no hairline after it */
#quarto-document-content h2.goal-heading {
	display: block;
	line-height: 1.3;
}
#quarto-document-content h2.goal-heading::after { display: none; }
.goal-desc { display: block; color: var(--gg-muted); margin-bottom: 1rem; }

/* Project cards */
.project-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1rem;
}
.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gg-border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--gg-surface) 60%, transparent);
	color: var(--gg-text);
	text-decoration: none !important;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover {
	transform: translateY(-3px);
	border-color: var(--gg-accent);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
	color: var(--gg-text);
}
.project-card-img {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
}
.project-card-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.project-card-title {
	font-size: 1.08rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--gg-heading);
}
.project-card-title a { color: inherit; font-weight: inherit; text-decoration: none; }
.project-card:hover .project-card-title { color: var(--gg-accent); }
.project-card-desc {
	margin-top: 0.4rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--gg-muted);
}
.project-tags { margin-top: auto; padding-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Tags: organism = yellow, method = red, research question = orange */
.project-tag {
	display: inline-block;
	padding: 0.05rem 0.55rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
}
.tag-organism { color: var(--gg-yellow); }
.tag-method { color: var(--gg-red); }
.tag-goal { color: var(--gg-accent); }

/* Study organisms & methods: one row of cards each (image or icon
   on top, text below), each opening a pop-up */
.facet-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1rem 0 2.5rem;
}
.facet-cards.facet-method { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facet-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--gg-border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--gg-surface) 60%, transparent);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.facet-card:hover {
	transform: translateY(-3px);
	border-color: var(--facet-accent);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.facet-organism { --facet-accent: var(--gg-yellow); }
.facet-method { --facet-accent: var(--gg-red); }
.facet-card-img {
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}
.facet-card:hover .facet-card-img { transform: scale(1.05); }
/* icon tiles for cards without a photo */
.facet-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6rem;
	color: var(--facet-accent);
	background:
		radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--facet-accent) 28%, transparent), transparent 65%),
		radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--gg-accent) 22%, transparent), transparent 60%),
		var(--gg-surface);
}
.facet-card-body { padding: 0.8rem 1rem 0.9rem; border-top: 2px solid var(--facet-accent); }
.facet-card-name { font-size: 1.1rem; font-weight: 650; line-height: 1.3; color: var(--gg-heading); }
.facet-card-name a { color: inherit; text-decoration: none; }
.facet-card:hover .facet-card-name { color: var(--facet-accent); }
.facet-card-count { margin-top: 0.3rem; font-size: 0.8rem; color: var(--gg-muted); }

/* Pop-up */
.facet-modal .modal-content {
	overflow: hidden;
	border: 1px solid var(--gg-border);
	border-radius: 12px;
	background: var(--gg-bg);
	color: var(--gg-text);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.facet-modal .facet-modal-img {
	flex: 0 0 auto;
	height: 220px;
	background-size: cover;
	background-position: center 45%;
}
.facet-modal .facet-card-icon { font-size: 4rem; }
.facet-modal#modal-organism-other,
.facet-modal[id^="modal-organism-"] { --facet-accent: var(--gg-yellow); }
.facet-modal[id^="modal-method-"] { --facet-accent: var(--gg-red); }
.facet-modal .modal-header { border-bottom: 1px solid var(--gg-border); border-top: 3px solid var(--facet-accent); }
.facet-modal .modal-title { font-size: 1.5rem; font-weight: 700; color: var(--gg-heading); }
.facet-modal .btn-close { filter: var(--gg-close-filter, none); }
body.quarto-dark .facet-modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.facet-modal-desc { font-size: 1.02rem; line-height: 1.65; }
.facet-modal-label {
	margin: 1.25rem 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gg-muted);
}
.modal-backdrop.show { opacity: 0.7; }
.facet-projects {
	list-style: none;
	margin: 0;
	padding: 0;
}
.facet-projects li { margin: 0.4rem 0; line-height: 1.4; }
.facet-projects a { color: var(--gg-text); font-weight: 600; }
.facet-projects a:hover { color: var(--gg-accent); }
.facet-projects .project-tag { font-size: 0.68rem; margin-left: 0.3rem; }

@media (max-width: 991.98px) {
	.facet-cards.facet-method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: the three organism cards stack too, with a shorter photo */
@media (max-width: 575.98px) {
	.facet-cards.facet-organism { grid-template-columns: minmax(0, 1fr); }
	.facet-organism .facet-card-img { aspect-ratio: 16 / 7; }
}
@media (max-width: 400px) {
	.facet-cards { gap: 0.6rem; }
	.facet-card-body { padding: 0.6rem 0.75rem 0.7rem; }
}

/* Project page header: back link + goal / organism / method tags */
.project-header { margin: -0.5rem 0 1.5rem; }
.project-header p { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.project-back { font-size: 0.9rem; color: var(--gg-muted); }
.project-back:hover { color: var(--gg-accent); }
.project-header a.project-tag { text-decoration: none; }
.project-header a.project-tag.tag-goal { white-space: normal; border-radius: 0.9rem; }
.project-header a.project-tag:hover { background: color-mix(in srgb, currentColor 15%, transparent); }

/* Three-photo collage (Outreach): one large photo, two stacked beside it */
.photo-collage.three {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 190px;
}
@media (max-width: 767.98px) {
	.photo-collage.three { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
}

/* Public talks: same timeline, full width */
.talk-list { margin-top: 0.5rem; }
.talk-list .course-name { font-size: 1.02rem; }

/* ---------- Mentoring ---------- */
.mentee-groups {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 0.5rem 0 2rem;
}
.mentee-group ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.mentee-group li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--gg-border);
}
.mentee-tag {
	display: inline-block;
	padding: 0.02rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.tag-award { color: var(--gg-yellow); }
.tag-grad { color: var(--gg-accent); }
.tag-hired { color: var(--gg-red); }
.mentee-legend p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--gg-muted); }
.mentee-legend .mentee-tag { margin-right: 0.35rem; }
@media (max-width: 767.98px) {
	.mentee-groups { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Home: buttons below the bio ---------- */
.home-buttons p { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; }
.home-buttons a {
	padding: 0.4rem 1.25rem;
	border: 1px solid var(--gg-accent);
	border-radius: 999px;
	color: var(--gg-accent);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.home-buttons a:hover { background: var(--gg-ember); border-color: transparent; color: #1d1c21; }

/* ---------- CV page ---------- */
.cv-contact p { margin: 0 0 0.25rem; }
.cv-updated { font-size: 0.85rem; color: var(--gg-muted); }
.cv-actions { margin: 1rem 0 0.5rem; }
a.cv-download {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	background: var(--gg-ember);
	color: #1d1c21;
	font-weight: 700;
	text-decoration: none;
}
a.cv-download:hover { color: #1d1c21; filter: brightness(1.08); }
a.cv-download .bi { margin-right: 0.35rem; }
.cv-pubs { margin: 1rem 0 2rem; }
.cv-rows p { margin: 0 0 0.7rem; }

/* The CV as a clean printed page; also what scripts/build-cv-pdf.sh turns into the PDF */
@media print {
	@page { size: letter; margin: 0.55in 0.75in; }
	body.cv-page #quarto-header, body.cv-page #photo-hero, body.cv-page #photo-bg,
	body.cv-page #quarto-margin-sidebar, body.cv-page #quarto-sidebar, body.cv-page .site-graph,
	body.cv-page .site-graph-links, body.cv-page .nav-footer, body.cv-page footer,
	body.cv-page .theme-switch, body.cv-page .cv-actions, body.cv-page .anchorjs-link { display: none !important; }
	body.cv-page { background: #fff !important; padding-top: 0 !important; font-size: 10.5pt; }
	body.cv-page #quarto-content { display: block !important; margin: 0 !important; padding: 0 !important; }
	body.cv-page main.content { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
	body.cv-page #quarto-document-content, body.cv-page #quarto-document-content * {
		color: #111 !important;
		background: transparent !important;
		-webkit-text-fill-color: #111 !important;
		text-shadow: none !important;
	}
	body.cv-page #quarto-document-content a { text-decoration: none; }
	body.cv-page h1.title { font-size: 20pt !important; margin: 0 0 0.3rem !important; }
	body.cv-page h1.title::after { display: none !important; }
	body.cv-page #quarto-document-content h2 {
		display: block;
		margin: 1.1rem 0 0.5rem;
		padding-bottom: 0.15rem;
		border-bottom: 1px solid #888;
		font-size: 13pt;
		break-after: avoid;
	}
	body.cv-page #quarto-document-content h2::after { display: none; }
	body.cv-page #quarto-document-content h3 { font-size: 11pt; margin: 0.8rem 0 0.3rem; break-after: avoid; }
	body.cv-page .pub, body.cv-page .course { break-inside: avoid; }
	body.cv-page .pub { padding-left: 0; border-left: none; }
	body.cv-page .pub + .pub { margin-top: 0.6rem; }
	body.cv-page .pub-year-group { padding: 0.4rem 0; border-top: none; }
	body.cv-page .pub-year { position: static; font-size: 10.5pt; }
	body.cv-page .pub-title { font-size: 10.5pt; }
	body.cv-page .pub-authors, body.cv-page .pub-venue, body.cv-page .course-meta { font-size: 9.5pt; }
	body.cv-page .course-list { margin: 0.4rem 0 0.8rem; padding-left: 0.9rem; border-left-color: #bbb; }
	body.cv-page .course { margin-bottom: 0.3rem; }
	/* date in its own column, as on a printed CV */
	body.cv-page .course > p { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: 0.5rem; }
	body.cv-page .course-years { grid-column: 1; grid-row: 1 / span 2; font-size: 9.5pt; }
	body.cv-page .course-name, body.cv-page .course-meta { grid-column: 2; }
	body.cv-page .course-list { border-left: none; padding-left: 0; }
	body.cv-page .mentee-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	body.cv-page .mentee-group ul { margin-bottom: 0.5rem; }
	body.cv-page .mentee-group li { margin: 0; padding: 0.05rem 0; font-size: 10pt; }
	body.cv-page .mentee-group .eyebrow { margin-bottom: 0.2rem; font-size: 8pt; }
	body.cv-page .cv-rows p { margin-bottom: 0.3rem; }
	body.cv-page .cv-rows, body.cv-page .mentee-groups { break-inside: avoid; }
	body.cv-page .course-list { margin-bottom: 0.5rem; }
	body.cv-page .course > p { line-height: 1.3; }
	body.cv-page .pub > p { line-height: 1.3; }
	body.cv-page .course::before { display: none; }
	body.cv-page .course-name { font-size: 10.5pt; }
	body.cv-page .mentee-tag { border: 1px solid #888; font-size: 8pt; }
}