/* Color palette */
:root {
	color-scheme: light;
	--text: #000;
	--link: #1772d0;
	--accent: #b35500;
	--surface: #f0f0f0;
	--border-strong: #c0c0c0;
	--border-soft: #ddd;
	--award-bg: #fff3e0;
	--button-hover: #d0d0d0;
	--body-font: 'Avenir Next Pro', 'Lato', Verdana, Helvetica, sans-serif;
}

/* Load fonts.

   Avenir Next Pro (MyFonts webfont kit, Build ID 3867246):

     The fonts listed in this notice are subject to the End User License
     Agreement(s) entered into by the website owner. All other parties are
     explicitly restricted from using the Licensed Webfont(s).
     You may obtain a valid license at https://www.myfonts.com/
     Avenir Next Pro Regular / Italic / Demi / Demi Italic by Linotype.
     (c) 2026 MyFonts Inc.
*/
@font-face {
	font-family: 'Avenir Next Pro';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/AvenirNext/avenirnext-regular.woff2) format('woff2');
}

@font-face {
	font-family: 'Avenir Next Pro';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/AvenirNext/avenirnext-demi.woff2) format('woff2');
}

@font-face {
	font-family: 'Avenir Next Pro';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/AvenirNext/avenirnext-italic.woff2) format('woff2');
}

@font-face {
	font-family: 'Avenir Next Pro';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/AvenirNext/avenirnext-demiitalic.woff2) format('woff2');
}

/* Lato — fallback only; fetched solely if Avenir Next Pro is unavailable. */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/Lato/lato-regular.woff2) format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/Lato/lato-bold.woff2) format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/Lato/lato-italic.woff2) format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/Lato/lato-bolditalic.woff2) format('woff2');
}

/* General declarations */
body {
	border: 0;
	max-width: 60em;
	margin: auto;
	padding: 1em;
	font-family: var(--body-font);
	font-size: 1em;
	line-height: 1.3;
	color: var(--text);
}

h1 {
	/* text-align: center; */
	color: var(--text);
}

h2 {
	font-size: 125%;
	margin: 1.2em 0 0.5em 0;
}

h3 {
	font-size: 110%;
	margin: 0 0 0.5em 1em;
	padding: 0;
}

/* Balance headline wrapping so a short title doesn't drop a single word onto its own line */
h1, h2, h3 {
	text-wrap: balance;
}

p, ul, ol, iframe, table, figure, pre {
	text-align: justify;
	margin: 0 0 1em 1em;
	padding: 0;
	width: calc(100% - 1em);
}

/* Improve paragraph wrapping: avoid short last lines and allow hyphenation of long words */
p {
	text-wrap: pretty;
	hyphens: auto;
}

/* Code uses a modern monospace stack, inline and block alike */
pre, code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background-color: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: 0.25em;
	font-size: 90%;
}

/* Block code: a preformatted block fills the column and scrolls sideways if needed */
pre {
	padding: 1em;
	width: calc(100% - 3em);
	overflow-x: auto;
}

/* Inline code sits inside running text with light padding, no block box */
code {
	padding: 0.1em 0.3em;
}

/* A code element nested in a pre must not double the background and border */
pre code {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
}

img, iframe {
	border: none;
}

/* Images never overflow their container; height follows to keep aspect ratio */
img {
	max-width: 100%;
	height: auto;
}

/* Video embeds keep a 16:9 aspect ratio at any width. */
iframe.video, video.video {
	aspect-ratio: 16 / 9;
	height: auto;
}

video {
	display: block;
	width: calc(100% - 1em);
	height: auto;
	margin: 0 0 1em 1em;
}

table {
	border-collapse: collapse;
}

td, th {
	padding: 0.25em;
	border: 1px solid var(--border-strong);
}

th {
	font-weight: bold;
	background: var(--surface);
}

/* A heavier rule under the header row separates it from the body rows */
thead th {
	border-bottom-width: 2px;
}

/* Zebra striping and a hover highlight make dense syllabus/agenda tables easier to scan */
tbody tr:nth-child(even) {
	background: var(--surface);
}

tbody tr:hover {
	background: var(--button-hover);
}

/* Wrapper that lets a wide table scroll sideways without dropping its table semantics */
.table-wrap {
	overflow-x: auto;
}

li {
	margin: 0 0 0.5em 1em;
}

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

a:focus, a:hover, a:active {
	color: var(--accent);
	text-decoration:none;
}

/* Scrolling */
/* In-page anchor targets stop short of the viewport edge instead of sitting flush against it */
/* Any element can be an anchor target here: sections, but also the resource paragraphs in the paper template */
[id] {
	scroll-margin-top: 1em;
}

/* Animate anchor jumps, unless the reader has asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Uncomment to always reserve room for the scrollbar, so the centered page does not shift sideways between short and long pages */
/* html { scrollbar-gutter: stable; } */

/* Accessibility helpers */
/* Hidden from sight but still available to screen readers and keyboard focus */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Skip link: stays hidden until focused, then appears at the top-left corner */
.skip-link:focus {
	position: fixed;
	top: 0.5em;
	left: 0.5em;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.5em 1em;
	clip: auto;
	clip-path: none;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	z-index: 100;
}

/* Header material */
/* Lab logo */
#logo {
	float: right;
	margin-left: 2em;
}

/* Author and venue lines in the header read as text, not as section headings; these rules keep the former h2 look */
.authors, .venue {
	margin: 0.83em 0;
	width: auto;
	font-size: 125%;
	font-weight: bold;
	text-align: left;
}

/* Navigation lists */
nav > ul {
	margin-left: 0;
	list-style-type: none;
	font-weight: bold;
	font-size: 110%;
}

/* Nav items sit on a single row. */
nav > ul > li {
	display: inline-block;
	margin-right: 1em;
	margin-left: 0;
}

/* Metadata lists (time, location, instructor, …) — styled like the nav lists but not a navigation landmark */
ul.details {
	margin-left: 0;
	list-style-type: none;
	font-weight: bold;
	font-size: 110%;
}

ul.details > li {
	margin-right: 1em;
	margin-left: 0;
}

/* Teaser figure in header */
#teaser {
	margin-bottom: 0;
}

#teaser > img {
	width: 100%;
	margin: 0 0 0.5em 0;
}

#teaser > figcaption {
	font-style: italic;
	font-size: 90%;
}

/* Body figure that should span the content width, like the teaser does. */
figure.full > img {
	width: 100%;
}

/* Personal information */
/* Personal photo beside a multi-column contact list */
#personal {
	display: flex;
	align-items: center;
}

#personal > img {
	margin: 0 0 1em 1em;
}

#personal > ul {
	display: flex;
	flex-flow: wrap column;
	width: fit-content;
	max-height: 9.375em;
	gap: 0.5em;
	column-gap: 1em;
	list-style-type: none;
	font-weight: bold;
}

#personal > ul > li {
	margin: 0;
}

/* List of papers in personal website */
figure.entry img {
	display: inline-block;
	box-sizing: border-box;
	height: 5em;
	width: 5em;
	vertical-align: middle;
	object-fit: cover;
}

figure.entry figcaption {
	display: inline-block;
	width: calc(100% - 1em - 5em);
	vertical-align: middle;
}

figure.entry figcaption p {
	margin-bottom: 0;
}

/* Different galleries: competitions, authors */
figure.gallery, iframe.gallery, figure.person {
	display: inline-block;
	text-align: center;
	margin: 0 1em 1em 1em;
	width: calc(50% - 3em);
}

figure.gallery img {
	display: inline-block;
	margin: auto;
	max-width: 100%;
	height: 15em;
}

figure.person img {
	border-radius: 50%;
	width: 10em;
	height: 10em;
}

figure.gallery figcaption, figure.person figcaption {
	margin-top: 0.25em;
	text-align: center;
}

/* When a link wraps a person card, the link carries the sizing so focus outlines wrap the whole card */
a.person {
	display: inline-block;
	margin: 0 1em 1em 1em;
	width: calc(50% - 3em);
}

a.person > figure.person {
	width: 100%;
	margin: 0;
}

/* Presenter cards wrap and stay centered for any count, so an odd trailing card is centered rather than orphaned at the left */
#presenters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

/* Keep the section heading on its own full-width line, left-aligned like every other h2 */
#presenters > h2 {
	flex-basis: 100%;
}

.award {
	color: var(--accent);
	background: var(--award-bg);
	margin-left: 0.5em;
	padding: 0.2em 0.4em;
	border-radius: 0.25em;
}

.distinction {
	margin-left: 1em;
}

/* For course competitions */
.fa-trophy {
	color: var(--accent);
}

/* Copy button for bibtex entries */
.copy {
	position: relative;
	float: right;
	border: none;
	/* background-color: #e7e7e7; */
	border-radius: 0.25em;
	/* Padding keeps the tap target at least ~1.5em (WCAG 2.5.8) */
	padding: 0.4em;
}

.copy:focus, .copy:hover, .copy:active {
	background-color: var(--button-hover);
	cursor: pointer;
}

/* Footer material */
footer {
	font-style: italic;
}

/* Adjustments for narrow screens */
@media (max-width: 48em) {
	/* Stack the personal photo and contact list vertically */
	#personal {
		display: block;
	}

	#personal > img {
		display: block;
		margin: 0 auto 1em auto;
	}

	#personal > ul {
		max-height: none;
	}

	/* Justified text reads poorly in narrow columns */
	p, ul, ol, iframe, table, figure, pre {
		text-align: left;
	}
}

/* Printing */
@media print {
	/* Force black text on the white page and use the full paper width */
	body {
		color: #000;
		max-width: none;
	}

	/* Links cannot be clicked on paper, so drop the screen color and underline them */
	a {
		color: #000;
		text-decoration: underline;
	}

	/* Interactive and heavy-media chrome does not belong on paper */
	.skip-link,
	.copy,
	iframe.video,
	video,
	model-viewer {
		display: none;
	}

	/* Keep a figure or a table row from splitting across a page break */
	figure,
	tr {
		break-inside: avoid;
	}
}