/* Root styles */


@font-face {
	font-family: 'Aura Antikva Text';
	font-weight: normal;
	font-style: normal;
	src:
		url('fonts/AuraAntiqua-Text.woff2') format('woff2'),
		url('fonts/AuraAntiqua-Text.woff') format('woff');
}



@font-face {
	font-family: 'Aura Antikva Text';
	font-weight: normal;
	font-style: italic;
	src:
		url('fonts/AuraAntiqua-TextItalic.woff2') format('woff2'),
		url('fonts/AuraAntiqua-TextItalic.woff') format('woff');
}

@font-face {
	font-family: 'Eero';
	font-weight: normal;
	font-style: normal;
	src:
		url('fonts/Eero-Regular.woff2') format('woff2'),
		url('fonts/Eero-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Eero';
	font-weight: normal;
	font-style: italic;
	src:
		url('fonts/Eero-Italic.woff2') format('woff2'),
		url('fonts/Eero-Italic.woff') format('woff');
}

@font-face {
	font-family: 'Eero';
	font-weight: bold;
	font-style: normal;
	src:
		url('fonts/Eero-Bold.woff2') format('woff2'),
		url('fonts/Eero-Bold.woff') format('woff');
}



:root {
  --auraColor: #ebdd78;
  --projectColor: #dbff73;
  --eventColor: #acedf7;
  --aboutColor: #d7a1a1;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
}

	p a {
		border-style: solid;
		border-color: black;
		border-width: 0 0 1px 0;
	}
	
	p a:hover {
		background-color: black;
		color: white;
	}

img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

	
html {
	padding: 0;
	margin: 0;
	width: 100%;
}
	
body {
	margin: 0;
	width: auto;
	padding: 12px;
	font-size: 18px;
	line-height: 30px;
	font-family: "Aura Antikva Text", serif;
	font-variant-numeric: oldstyle-nums;
	-moz-font-feature-settings: "onum";
	-webkit-font-feature-settings: "onum";
	font-feature-settings: "onum";
	
}	

@media only screen and (min-width: 700px) {

	body {
		padding: 30px;
	}
		
}



/* Main sections */
	
	
main {
	margin: 0 auto;
	width: 90vw;
	max-width: 900px;
}	
	

section {
	margin-top: 44px;
}

article {
	margin-top: 44px;
}

@media only screen and (min-width: 700px) {

	article {
		padding: 0 12vw;
	}

	
}




/* Header */

header {
	margin: 0 auto;
	width: 90vw;
	max-width: 900px;
}

	#logo {
		position: relative;
		left: -3px;
	}

	nav {
		font-family: "Eero", sans-serif;
		display: flex;
   		flex-direction: column;
   		margin: 0 -3px;
	}
	
	
		a.nav_item {
			padding: 0 3px;
			align-self: flex-start;
		}



@media only screen and (min-width: 700px) {

	header {
		display: grid;
		grid-template-columns: 1fr 4fr;
	}
	
		nav {
			flex-grow: 2;
			flex-direction: row;
			margin-left: auto;
		}
	
			a.nav_item {
				margin-left: 12px;
			}

	
}






/* Nav item colors */

#aura:hover {
	background-color: var(--auraColor);
}

#aura.active {
	background-color: var(--auraColor);
}


#project:hover {
	background-color: var(--projectColor);
}

#project.active {
	background-color: var(--projectColor);
}

#event:hover {
	background-color: var(--eventColor);
}

#event.active {
	background-color: var(--eventColor);
}

#about:hover {
	background-color: var(--aboutColor);
}

#about.active {
	background-color: var(--aboutColor);
}





/* Article Elements */

figure {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
	
	figure a {
		background-color: #ccc;
		padding: 3px;
	}
	
	figure img {
		max-height: 448px;
		filter: grayscale(1);
		mix-blend-mode: multiply;
	}

	figcaption {
		text-align: center;
		text-wrap: balance;
		font-style: italic;
		font-size: 16px;
		line-height: 24px;
		margin-top: 6px;
	}






/* Gallery Elements */



section.gallery {
	
}

	.gallery_item {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30px;
	}
	
		.gallery a {
			background-color: #ccc;
			padding: 3px;
		}
	
			.gallery img {
				max-height: 448px;
				filter: grayscale(1);
				mix-blend-mode: multiply;
			}
			

@media only screen and (min-width: 700px) {
	section.gallery {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 30px;
	}
	
	.gallery_item {
		margin-bottom: 0;
	}
	
}



			
			
/* Home Elements */			



section.home {
	
}

	.home h2 {
		font-size: 24px;
		line-height: 30px;
	}
	
	.home h3 {
		font-size: 18px;
		line-height: 24px;
	}

	.home_item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-bottom: 30px;
	}
	
		.home a {
		}
		
		.home_img {
			background-color: #ccc;
			padding: 3px;
			margin-bottom: 12px;
		}
		
			.home_img img {
				max-height: 448px;
				filter: grayscale(1);
				mix-blend-mode: multiply;
			}
	
	
@media only screen and (min-width: 700px) {
	section.home {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}
	
		.home_item {
			margin: 0;
		}
	
}



/* News Elements */


section.news {
}

section.news h2 {
	font-size: 24px;
	line-height: 30px;
}

	.news_item {
		display: block;
		padding: 6px 12px 24px 12px;
		background-color: var(--eventColor);
		margin-bottom: 18px;
	}	
	
	.news_item:hover {
		background-color: black;
		color: white;
	}
	
		.news_mobile_marker {
			font-family: Eero;
			font-size: 16px;
			line-height: 24px;
			position: relative;
			top: 6px;
		}

@media only screen and (min-width: 700px) {

	section.news {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30px;
	}
	
		.news_mobile_marker {
			display: none;
		}

}


/* Events Elements */




.event {
	background-color: var(--eventColor);
	margin-bottom: 24px;
	padding: 12px;
}

.completed {
	opacity: 0.25;
}

	.event h5 {
		margin-top: 0;
		line-height: 24px;
	}


	.event_details {
		margin-bottom: 18px;
		font-size: 16px;
		line-height: 24px;
		font-family: "Eero";
		
	}
	
		
		.event_type {
			font-family: "Aura Antikva Text", serif;
			font-style: italic;
			line-height: 24px;
			margin-bottom: 12px;
		}
		
		.event_link a {
			padding: 0px 6px 0px 0px;
		}

		.event_link a::before {
			content: "→ ";
			 
		}
			
		.event_link a:hover {
			background-color: white;
		}


@media only screen and (min-width: 700px) {

	.event {
		display: grid;
		
		grid-template-columns: 1fr 5fr;
		gap: 18px;
	}
	
		.event_details {
			margin: 0;
			width: 220px;
			
		}
		
		.event_description {
			margin-left: 30px;
		}

}



/* Footer */






footer {
	margin-top: 60px;
	font-family: Eero;
	font-size: 16px;
	line-height: 24px;
	opacity: 0.75;
}

	.address_press {
		text-align: center;
	}

		address {
			font-style: normal;
			margin-bottom: 18px;
			padding: 0 6px;
			text-align: center;
		}

	.sponsors {
	}
	
		.sponsor_notice {
			text-align: center;
			margin-bottom: 30px;
		}
		
		.logos {
			display: grid;
			align-items: center;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 30px;
		}

		.logos img {
			filter: grayscale(1);
			mix-blend-mode: multiply;
		}


@media only screen and (min-width: 700px) {

	footer {
		padding: 0 10vw;
	}

	.address_press {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		max-width: 500px;
		margin: 0 auto;	
	}
	
	.sponsors {
		display: flex;
		margin-top: 32px;
		align-items: center;
	}
	
		.sponsor_notice {
			margin: 0 44px 0 0;
			text-wrap: nowrap;
			align-items: center;
		}
	
		.logos {
			flex-grow: 2;
		}
	
}


/* Enlarge sponsor logos for small screens */

@media only screen and (max-width: 400px) {

	.logos {
		grid-template-columns: 1fr 1fr;
	}

}


/* Typography */


h1 {
	font-family: "Eero", sans-serif;
	margin: 0;
	padding: 0 3px;
	text-wrap: nowrap;
	font-size: 18px;
	line-height: 30px;
}

h2 {
	font-family: "Eero";
	font-weight: bold;
	font-size: 36px;
	line-height: 40px;
	margin: 0px;
	text-wrap: balance;
}

h3 {
	font-family: "Eero";
	font-weight: normal;
	font-size: 30px;
	line-height: 36px;
	margin: 6px 0 0 0;
	text-wrap: balance;
}

h4 {
	font-weight: normal;
	font-size: 22px;
	line-height: 30px;
	margin: 16px 0;
}

h5 {
	font-family: "Eero";
	font-weight: bold;
	font-size: 18px;
	line-height: 30px;
	margin: 30px 0 0 0;
	text-wrap: balance;
}

time {
	font-family: "Eero";
	font-size: 16px;
	line-height: 18px;
}


blockquote {
	font-style: italic;
	margin: 16px 2.4rem;
	font-size: 22px;
	line-height: 30px;
	transform: rotate(-1deg);
}

blockquote::before {
	content: "“";
	float: left;
	margin-right: 0.6rem;
	font-size: 30px;
	position: relative;
	top: 6px;
}

	blockqoute span {
		background-color: #ccc;
	}

p {
	margin: 0;
}

p+p {
	margin-top: 30px;
}



h2+p {
	margin-top: 24px;
}

h3+p {
	margin-top: 24px;
}


em {
	font-style: italic;
}

figcaption em {
	font-style: normal;
}

.all_smcp {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.02rem;
}

.smcp {
	font-variant-caps: small-caps;
	letter-spacing: 0.02rem;
}