@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	--page-width: 800px;
	--page-padding: 30px;
	--padding: calc( (100% - (min(100%, var(--page-width)) - 2*var(--page-padding)) )/2 );
}

@media screen and (max-width:800px) {
	:root {
		--page-padding: 15px;
	}
}

body {
	font: 400 16px/1.5 "Open Sans", sans-serif;
	color:#111;
	background-color:#fdfdfd;
	font-feature-settings: "kern" 1;
	font-kerning: normal;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	margin:0;
	padding:0;
}

body > header {
	border-top: 5px solid #424242;
	border-bottom: 1px solid #e8e8e8;
	min-height: 55px;
	position: relative;
	padding:0 var(--padding);
	display:flex;
	flex-flow:row wrap;
}

.site-title, .site-title:visited {
	color: #424242;
}

.site-title {
	display:block;

	font-size:26px;
	font-weight:300;
	line-height:54px;
	letter-spacing:-1px;

	flex-shrink:0;
}

.site-logo {
	display:block;

	width:55px;
	height:55px;
	margin-left:-15px;
	margin-right:5px;
}

nav {
	display:flex;
	flex-flow:row;
	flex-grow:1;
	justify-content:end;
}

nav input, nav label {
	display:none;
}

nav a {
	display:block;
	line-height:54px;
	margin:0 0 0 20px;
}

nav a, nav a:visited {
	color:#111;
}

@media screen and (max-width:600px) {
	nav label[for="nav-toggle"] {
		display:block;
		width:32px;
		height:26px;
		line-height:0;
		padding:10px 0 0 0;
		margin:0;
		text-align:center;
	}
	nav {
		display:flex;
		flex-flow:column;
		align-items:end;
		position:absolute;
		top:9px;
		right:15px;
		background:#fdfdfd;
		border:1px solid #e8e8e8;
		border-radius:5px;
	}
	/*
	nav input ~ .menu {
		display:none;
	}
	nav input:checked ~ .menu {
		display:flex;
		flex-flow:column;
		gap:0;
		align-items:end;
	}
	*/
	nav input ~ a {
		display:none;
	}
	nav input:checked ~ a {
		display:block;
	}
	nav a {
		padding:5px 10px;
		margin:0 0 0 20px;
		line-height:unset;
	}
}

a {
	text-decoration:none;
	color:#b00;
}
a:visited {
	color:#6f0000;
}
a:hover {
	text-decoration:underline;
	color:#111;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin:0 0 15px 0;
}

h1 {
	font-weight: 300;
}

p {
	margin: 0 0 15px 0;
	padding: 0;
}

.boxed {
	border:1px solid #000;
	padding:8px;
}

main {
	display:block;
	padding:30px var(--padding) 30px var(--padding);
	margin:0;
}

footer {
	border-top: 1px solid #e8e8e8;
	padding:30px var(--padding) ;
	margin:0;
}

footer h1 {
	font-size:18px;
	margin:0 0 15px 0;
	font-weight:400;
}

footer .footer-cols {
	display: flex;
	flex-flow: row wrap;
	gap:20px 30px;
}

.footer-contact, .footer-social-media, .footer-brief {
	font-size:15px;
	color:#828282;
	margin-bottom:15px;
}

.footer-contact {
	width:max-content;

	list-style:none;
	margin:0;
	padding:0;

	font-size:12.8px;
}
.footer-social-media {
	width:max-content;

	list-style:none;
	margin:0;
	padding:0;
}
.footer-social-media li + li {
	padding-top:5px;
}

.footer-brief {
	width:160px;
	flex-grow:1;
}

.colophon {
	font-size:12.8px;
	color:#828282;
}

.colophon a {
	color:unset;
}

/* ----------- publications list ----------- */

ul.publication-list {
	display:flex;
	flex-flow:column;
	margin:0;
	padding:0;
}

ul.publication-list > li {
	display:block;
	margin:0 0 10px 108px;
	padding:4px 4px 4px 24px;
	position:relative;
	min-height:100px;
}

ul.publication-list > li .thumbnail {
	display:block;
	position:absolute;
	top:0;
	left:-112px;

	width:100px;
	height:100px;
	padding:4px;
	margin:0;

	text-align:right;
}

ul.publication-list > li .thumbnail img {
	max-width:100px;
	max-height:100px;
	width:auto;
	height:auto;
	margin:0;
	padding:0;
}

ul.publication-list > li .title {
	display:block;
	margin:0 0 0 -20px;
	padding:0;
}

ul.publication-list > li .authors {
	display:flex;
	flex-flow:row wrap;
	padding:0;
	margin:0;
	font-size:90%;
}

ul.publication-list > li .authors > li {
	display:block;
	margin:0;
	padding: 0 0.3em 0 0;
}

ul.publication-list > li .note {
	font-size:9pt;
}

ul.publication-list > li .venue {
	display:block;
	padding:0;
	margin:0;
	font-size:90%;
	color:#999;
}

/* ----------- posts list ----------- */

ul.posts {
	display:flex;
	flex-flow:column;
	margin:0;
	padding:0;
}

ul.posts > li {
	display:block;
	margin:0 0 30px 0;
	padding:0;
}
ul.posts > li > time {
	display:block;
	color:#888;
	font-size:14px;

	margin:0;
	padding:0;
}

ul.posts > li > h2 {
	margin:0;
	padding:0;
}

ul.posts > li > ul.authors {
	font-size:14px;

	display:flex;
	flex-flow:row wrap;
	margin:0 0 0 30px;
	padding:0;
}

ul.posts > li > ul.authors:before {
	content:"by";
}

ul.posts > li > ul.authors > li {
	display:block;
	padding:0 0 0 0.3em;
	margin:0;
}


/* ----------- projects list ----------- */

ul.project-list {
	display:flex;
	flex-flow:column;
	margin:0;
	padding:0;
}

ul.project-list > li {
	display:block;

	margin:0 0 10px 0;
	padding:0;
	position:relative;
	min-height:100px;
}

ul.project-list > li > a {
	display: grid;

	border:4px solid #eee;
	background:#f8f8f8;

	grid-template-columns: 112px 1fr;
	grid-template-rows: 0fr 1fr;
	padding:4px 4px 4px 4px;

	text-decoration:none;
}

ul.project-list > li > a:hover {
	background:#f3f3f3;
}

ul.project-list > li > a > img.thumbnail {
	display:block;
	grid-column: 1;
	grid-row: 1 / span 2;

	max-width:100px;
	max-height:100px;
	width:auto;
	height:auto;
	margin:0;
	padding:0;
}

ul.project-list > li > a > .title {
	display:block;
	grid-column: 2;
	grid-row: 1;

	margin:0;
	padding:0;

	font-size:18px;
}

ul.project-list > li > a:hover > .title {
	text-decoration:underline;
}

ul.project-list > li > a > .title > .dates {
	display:block;
	grid-column: 2 / span 2;
	grid-row: 1;
	float:right;
	max-width:150px;

	background:#fff;
	color:#888;
	font-size:16px;
	margin:-4px -4px 0 0;
	padding:2px 2px;
	border-radius:0 0 0 5px;
}

ul.project-list > li > a > p {
	display:block;
	grid-column: 2;
	grid-row: 2;
	margin:0;
	padding:0;

	text-decoration:none;
	color:#111;
}

figure {
	text-align:center;
}

/* ----------- publication page ----------- */
/* & some project page stuff */
/* & some post page stuff */

main.publication header, main.project header, main.post header {
	margin:0 0 30px 0;
	padding:0;
	min-height:100px;
}

main.post header {
	display:flex;
	flex-flow:row wrap;
}

main.publication header img.thumbnail, main.project header img.thumbnail {
	display:block;
	float:left;
	max-width:100px;
	max-height:100px;
	width:auto;
	height:auto;
	margin:0 5px 0 calc(-1 * var(--page-padding));
	padding:0;
}

main.publication header h1, main.project header h1, main.post header h1  {
	font-size: 35px;
	letter-spacing: -1px;
	line-height: 1.1;
	margin: 0 5px 0 0;
	padding:0;
}
main.post header h1  {
	font-size:42px;
	line-height:1;
	/* force it to take the whole row in the container */
	width:100%;
}

main.publication header ul.authors, main.project header ul.people  {
	display: flex;
	flex-flow: row wrap;
	margin:0;
	padding:0;
	background:#f8f8f8;
	justify-content:left;
}
main.publication header ul.authors li, main.project header ul.people li {
	display: block;
	margin:0 10px;
}

main.publication header .note {
	display:block;
	font-size:9pt;
	margin:0 10px;
	padding:0;
	text-align:right;
}

main.project header .dates {
	font-size:24px;
	color:#888;
}

main.post > header > time {
	display:block;

	font-size:14px;
	color:#888;
}

main.publication figure {
	margin:0;
	padding:0;
}
main.publication figure img {
	width:100%;
	display:block;
}

main.post > header > ul.authors {
	display:flex;
	flex-flow:row wrap;
	padding:0;
	margin:0;
	font-size:14px;

	flex-grow:1;
}

main.post > header > ul.authors:before {
	content:"//";
	color:#ddd;
	padding:0 5px;
	text-align:center;
}

main.post > header > ul.authors > li {
	display:block;
	margin:0;
	padding: 0 0.3em 0 0;
}


main.post > header > ul.revisions {
	display:flex;
	flex-flow:row wrap;
	padding:0;
	margin:0;

	font-size:14px;
	color:#888;

	justify-content:end;
}

main.post > header > ul.revisions:before {
	content:"(revised";
	padding:0 5px;
	text-align:center;
}
main.post > header > ul.revisions:after {
	content:")";
}

main.post > header > ul.revisions > li {
	display:inline;
	margin:0;
}

main.post > header > ul.revisions > li > .author:before {
	content:" by ";
}
main.post > header > ul.revisions > li > .author > a {
	color:unset;
}

main.post > header > ul.revisions > li:after {
	content:",";
}
main.post > header > ul.revisions > li:last-child:after {
	content:unset;
}


main.post > header > .series-nav {
	display:flex;
	background:#ddd;
	flex-flow: row;
	width:100%;
	justify-content:space-between;

	margin:15px 0 0 0;
	padding:0;
}

main.post > header > .series-nav > span {
	display:block;
}
main.post > header > .series-nav > span.next, main.post > header > .series-nav > span.prev {
	padding:0 5px;
}

main.post > header > .series-nav > span.series {
	flex-grow:1;
	text-align:center;
}

/* ----------- links list with images ----------- */

ul.image-links {
	display:flex;
	flex-flow:column;
	margin:0 0 15px 0;
	padding:0;
}

ul.image-links > li {
	display:block;
	margin:0;
	padding:0;
}

ul.image-links > li a {
	display:grid;
	grid-template-columns:110px 1fr;
	align-items:center;
	margin:0 10px;
	position:relative;
	min-height:100px;
	padding:10px;
	border-radius:10px;
}

ul.image-links > li:hover a {
	background:#f3f3f3;
}

ul.image-links > li a img {
	justify-self:center;
	max-width:100px;
	max-height:100px;
	width:auto;
	height:auto;
	box-shadow:2px 2px 5px grey;
	display:block;
	color:#111;
	margin:0 10px 0 0;
}

ul.image-links > li:hover a span span.presenters {
	text-decoration:none;
}

ul.image-links > a span span.presenters {
	display:block;
	color:#111;
	text-decoration:none;
}

ul.image-links > li a span span.note {
	display:block;
	color:#555;
	text-decoration:none;
}

/* ----------- footnotes ----------- */
.footnote {
	font-size:15px;
}

/* ----------- ul/ol as comma-separated lists ----------- */

.comma-list:has(:nth-child(3)) > li:after {
	content:",";
}
.comma-list > li:last-child:after {
	content:unset;
}
.comma-list:has(:nth-child(2)) > li:last-child:before {
	content:"and ";
}

/* ----------- code ----------- */

pre, code {
	font:400 14px/1.3 "IBM Plex Mono", monospace;
}

pre {
	padding:0;
	margin:0 0 15px 0;

	white-space:pre-wrap;
	word-break:break-all;
	tab-size:4;
}

code {
	background:#eef;
	color:#000;
	padding:1px 3px;
	border-radius:3px;
}

pre > code {
	margin:24px 0 0 0; /* 15px + 9px for raised label */
	padding:8px 12px;
	display:block;

	border:1px solid #bbb;
	border-radius:3px;

	position:relative;
}

pre > code:before {
	display:block;
	padding:1px 5px;
	margin:0;

	color:#558;
	background:#eef;
	font: 400 12px/1.0 "Open Sans", sans-serif;

	position:absolute;
	left:6px;
	top:-9px;
	height:13px;
	border-radius:3px;
	border:1px solid #bbb;
}

pre > code.bibtex:before {
	content:"BibTeX";
}