@import "reset.css";

:root {
	
	--base-color: #000;
	--light-grey-color: #bfbfbf;
	--mid-grey-color: #999999;
	
	--text-base: 18px;
	--text-sm: .8rem;
	--text-lg: 1.25rem;
	
	--column-gap: clamp(1.5rem, 6vw, 3rem);
	
	--font-sans-serif: 'CMU Sans Serif', Arial, sans-serif;
	
}

/* @group FONTS */

@font-face {
  font-family: 'CMU Serif';
  src: url('cmunrm-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CMU Serif';
  src: url('cmunti-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'CMU Serif';
  src: url('cmunbx-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'CMU Serif';
  src: url('cmunbi-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'CMU Sans Serif';
  src: url('cmunss-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CMU Sans Serif';
  src: url('cmunsi-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'CMU Sans Serif';
  src: url('cmunsx-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'CMU Sans Serif';
  src: url('cmunso-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

/* @end */

/* @group GENERAL */

html,
body {
	color: var(--base-color);
	font-family: 'CMU Serif', Times, serif;
	font-size: 18px;
	line-height: 1.4em;
}

small,
.small {
	font-family: var(--font-sans-serif);
	font-size: var(--text-sm);
	line-height: 1.4em;
}

h1,
h2 {
	font-size: 1.5rem;
	line-height: 1.2em;
}

p + h1 {
	margin-top: 3rem;
}

h3 {
	margin-top: 1.4em;
	margin-bottom: .7em;
	font-weight: bold;
}

em,
i {
	font-style: italic;
}

strong {
	font-weight: bold;
}

p:not(:last-child) {
	margin-bottom: 1em;
}

h1 + p {
	margin-top: 1.4em;
}

ol:not(:last-child),
ul:not(:last-child) {
	margin-bottom: 1em;
}

	ol li {
		display: table;
		counter-increment: counter;
	}
	
		ol li::before {
			content: counter(counter) ".";
	    display: table-cell;
	    width: 1.25em;
		}
		
figure {
	margin-bottom: 2em;
}

figcaption {
	margin-top: .5em;
	font-family: var(--font-sans-serif);
	font-size: var(--text-sm);
	line-height: 1.4em;
	text-align: right;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .1em;
}

	h2 a {
		text-decoration: none;
	}

/* @end */

/* @group LAYOUT */

body {
	display: grid;
	max-width: 96rem;
	margin-right: auto;
	margin-left: auto;
}

	@media (min-width: 1000px) {
		
		body {
			grid-template-columns: 1fr 3fr;
		}
		
		.footer {
			grid-column-end: span 2;
		}
		
	}

/* @end */

/* @group Header */

.header {
	padding: var(--column-gap);
	text-align: center;
}

	@media (min-width: 1000px) {
		
		.header {
			position: sticky;
			top: 0;
			max-height: 100vh;
			overflow-y: hidden;
		}
		
	}

/* @end */

/* @group Banner */

.banner {
	margin-top: var(--column-gap);
	margin-bottom: 2rem;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.1em;
}

	.banner span {
		display: block;
		font-size: 1rem;
		font-weight: normal;
		letter-spacing: 0.02em;
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	font-size: 1.2rem;
	line-height: 1.3em;
}

	.menu a {
		text-decoration: none;
	}
	
	.menu a.active,
	.menu a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
	}

/* @end */

/* @group Main */

.main {
	padding: var(--column-gap);
}

/* @end */

/* @group Text */

.text {
	max-width: 40em;
}

/* @end */

/* @group Publications */

.publications {
	display: grid;
	gap: 2rem;
}

	
	@media (min-width: 800px) {
		
		.publications {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.publications > *:first-child {
				grid-column: span 2;
			}
	
	}
	
	@media (min-width: 1400px) {
		
		.publications {
			grid-template-columns: repeat(3, 1fr);
		}
		
			.publications > *:first-child {
				grid-column: span 3;
			}
		
	}

/* @end */

/* @group Publication */

.publication {
	display: flex;
	flex-direction: column;
	padding: 1rem 1rem 1.4rem;
	border: 1px solid var(--base-color);
}
	
	.publication > * {
		max-width: 22rem;
	}

	.publication__date-and-type {
		font-family: var(--font-sans-serif);
		font-size: var(--text-sm);
		line-height: 1.4em;
	}
	
	.publication__title {
		margin-top: .5em;
		margin-bottom: .5em;
	}
	
	.publication__event {
		margin-bottom: 1.4rem;
		line-height: 1.3em;
	}
	
	.publication__event + .publication__comment {
		margin-top: -.7rem;
	}
	
	.publication__comment {
		margin-bottom: 1.4rem;
	}
	
	.publication__publishedin {
		font-family: var(--font-sans-serif);
		font-size: var(--text-sm);
		line-height: 1.4em;
	}
	
	.publication__publishedin:not(:last-child) {
		margin-bottom: 1.4rem;
	}
	
	.publication__title + .publication__publishedin {
		margin-top: 1.4rem;
	}
	
	.publication__publications {
		font-family: var(--font-sans-serif);
		font-size: var(--text-sm);
		line-height: 1.4em;
	}
	
	.publication__publishedin + .publication__publications {
		margin-top: -.7rem;
	}
	
	.publication__publications:not(:last-child) {
		margin-bottom: 1.4rem;
	}
	
	.publication__link {
		margin-top: auto;
	}
	

/* @end */

/* @group Article */

.article {
	max-width: 40em;
	font-size: var(--text-lg);
	line-height: 1.5em;
}

/* @end */

/* @group Footer */

.footer {
	padding-top: var(--column-gap);
}

/* @end */