@charset "UTF-8";

/* variables */
:root {
	--warm-black:      rgb(4,   2,   0);
	--very-light-gray: rgb(245, 243, 241);
	--light-gray:      rgb(200, 198, 196);
	--dark-gray:       rgb(130, 128, 126);
	--highlight:       rgb(240, 240, 0);
}

/* reset */
/* http://meyerweb.com/eric/tools/css/reset/ */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* keep sizes the same, even with borders/padding */
*, *:after, *:before {
	-webkit-box-sizing:	border-box;
 	-moz-box-sizing: 	  border-box;
 	box-sizing: 		    border-box;
}

@font-face {
	font-family: CooperHewitt-Book;
	src:         url(CooperHewitt-Book.otf);
}
@font-face {
	font-family: CooperHewitt-BookItalic;
	src:         url(CooperHewitt-BookItalic.otf);
}
@font-face {
	font-family: CooperHewitt-Bold;
	src:         url(CooperHewitt-Bold.otf);
}
@font-face {
	font-family: CooperHewitt-BoldItalic;
	src:         url(CooperHewitt-BoldItalic.otf);
}

/* basic setup */
html, body {
	background: white;

	/* fonts */
	font-family: CooperHewitt-Book, Helvetica, Arial, sans-serif;
	font-size:   16px;
	line-height: 1.3em;
	color:       var(--warm-black);
}
::selection {
  background: var(--highlight);
}

/* type */
h1 {
	font-family: CooperHewitt-Bold, Helvetica, Arial, sans-serif;
	font-size:   2.6em;
	line-height: 1.3em;

	margin-top:  0.6em;
}
h2 {
	font-family: CooperHewitt-Bold, Helvetica, Arial, sans-serif;
	font-size:   2em;
	line-height: 1.3em;
}
h3 {
	font-family: CooperHewitt-Bold, Helvetica, Arial, sans-serif;
	font-size:   1.6em;
	line-height: 1.3em;
}
h4 {
	font-family: CooperHewitt-Bold, Helvetica, Arial, sans-serif;
	font-size:   1.3em;
	line-height: 1.3em;
}
p {
	font-size:     1em;
	line-height:   1.5em;

	margin-bottom: 1em;
}
ul {
	font-size:   1em;
	line-height: 1.5em;
}
li {
	font-size:   1em;
	line-height: 1.5em;
}
figcaption {
	font-size:   1em;
	font-style:  italic;
	line-height: 1.5em;
	
	margin: 0.3em 0 2em 0;
}
em {
	font-family: CooperHewitt-BookItalic;
	font-style:  italic;
}
.non-em {
	font-style: normal !important;
}
strong {
	font-family: CooperHewitt-Bold;
	font-style:  normal;
}
blockquote {
	margin-bottom: 1.6em;
	padding-left:  1em;
	border-left:   0.3em solid var(--light-gray);
}
blockquote, cite {
	color: var(--dark-gray);
}
cite {
	padding-top: 0.6em;
	display:     block;
}
cite::before {
	content: "— ";
}

/* links */
a, a:link, a:visited {
	color: 				    var(--warm-black);
	text-decoration:  underline;

	background-color:	transparent;
}
button {
	color: 				   var(--warm-black);
	text-decoration: none;
}
a:active, a:hover, button:hover {
	background-color: var(--highlight);
}
#projects a {
	background-color: transparent;
	text-decoration:  none;
}
#projects a:hover {
	text-decoration: underline;
}
#home-button {
	text-decoration:  none;
	background-color: transparent;
}

/* media */
img {
	width:  100%;
	height: auto;
	
	border: 1px solid var(--light-gray);
}
video {
	/* video should never be larger than 80%
	   the height of the screen */
	width:         100%; 
	height:        auto;
	max-height:    80vh;
	margin-bottom: -5px;

	border: 1px solid var(--light-gray);
	background-color: var(--very-light-gray);
}
audio {
	width:      100%;
	margin-top: 1em;

	border: 1px solid var(--light-gray);
}

/* layout */
#wrapper {
	width:     100%;
	min-width: 320px;
	max-width: 1000px;
	margin:    0 auto;
	padding:   2em 2em 5em 2em;
}
header {
	margin-bottom: 2em;
}
footer {
	margin-top:  2em;
	padding-top: 2em;
	border-top:  1px solid var(--light-gray);
}
#metadata {
	margin-bottom: 2em;
}

/* main menu */
.menu li {
	margin-bottom: 0.6em;
}

/* list of projects */
#projects ul {
	/* https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe */
	max-width: 1200px;
	margin:    0 auto;
	display:   grid;
	gap:       1rem;
	
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#projects li {
	padding-bottom: 1em;
}
#projects img {
	aspect-ratio: 1/1;
}

/* individual artwork */
#artwork p {
	text-align: justify;
}
#artwork p:last-of-type {
	margin-bottom: 3em;
}
.project-link {
	font-family: CooperHewitt-Book;
	font-size:   0.9em;

/*	margin:  0.8em 0 2em 0;*/
	margin:  -0.6em 0 2em 0;
	padding: 1em 1.6em 0.5em 1.6em;

	background-color: var(--very-light-gray);
	border:           1px solid var(--light-gray);
	border-radius:    0.3em;
}
.project-link:hover {
	background-color: var(--highlight);
	border-color:     var(--dark-gray);
	cursor:           pointer;
}
ul.bulleted-list {
	/* normal bulleted lists pls! */
	margin-top:  -0.6em;
	list-style-type:     square;
	list-style-position: inside;
}
ul.bulleted-list li {
	margin:  0;
}
.credit {
	color:      var(--dark-gray);
	text-align: left !important;
	font-style: italic;
}
/*#artwork h1 {
	position:      sticky;
	top:           0;
	padding-top:   0.6em;
	height:        2.3em;

	background-color: white;
}*/
.bots h4 {
	margin: 0.6em 0 0.3em 0;
}
.bots p {
	margin-bottom: 3em;
}

/* cv */
#cv {
	/* hack to get my name in the right place
	   up near the nav arrow */
	margin-top: -1.6em;
}
#cv section:not(:last-of-type) {
	margin-bottom:  1.6em;
	padding-bottom: 1.6em;
	border-bottom:  1px solid var(--light-gray);
}
#cv h2 {
	margin:           1.3em 0 0.6em 0;
	background-color: white;

	/*
	margin-bottom: 0.6em;
	position:      sticky;
	top:           0;
	padding-top:   0.6em;
	height:        2.3em;
	*/
}
#cv h4:not(:first-of-type) {
	margin-top: 1.3em;
}
#cv ul {
	margin:         -0.6em 0 1em 0;
	list-style-type: square;
}
#cv li {
	margin-left: 1em;
}
#navigation li {
	list-style-type: none;
	margin:          0;
}
.cv-move-up {
	margin-top: -1.3em;
}
.upside-down-text {
	/* damnit heidi and your weird show titles! :) */
	display:   inline-block;
	transform: rotate(180deg);
}
.show-listings p::first-line {
	font-family: CooperHewitt-Bold;
}
.not-bold {
	font-family: CooperHewitt-Book;
}
#workshops h2,
#curatorial h2:not(:first-of-type) {
	margin-top: 1.6em;
}
#contact {
	padding-bottom: 1.3em !important;
}
#press ul,
#lectures ul {
	column-count: 1;
	list-style-type: none;
}
/* nicer bullets too pls */
#press li,
#lectures li {
	margin:       0;
	padding-left: 1em;
	text-indent: -1em;  /* align second line */
}
#press li::before,
#lectures li::before {
	content:       "\2022";
	padding-right: 0.6em;
}
#cv .light {
	color: var(--light-gray);
}

.side-by-side audio:first-of-type,
.side-by-side   img:first-of-type,
.side-by-side video:first-of-type {
	margin-bottom: 1em;
}

/* larger screens */
@media screen and (min-width: 600px) {
	/* div with images or video next to each other */
	.side-by-side {
		width:      100%;
		text-align: center;
		background: none;
	}
	.side-by-side audio,
	.side-by-side img,
	.side-by-side video {
		width: calc(50% - 0.5em);
	}
	/* no top margin when side by side (a hack) */
	.side-by-side audio,
	.side-by-side img,
	.side-by-side video {
		margin: 0 !important;
	}
	/* another hack: spacing apart properly */
	.side-by-side audio:last-of-type,
	.side-by-side   img:last-of-type,
	.side-by-side video:last-of-type {
		margin-left: 0.6em !important;
	}
}
@media screen and (min-width: 460px) {
	/* footer list inline, pls */
	.menu li {
		display:      inline-block;
		margin-right: 1.6em;
	}

	/* little down-arrows on cv nav */
	#navigation li::before {
		list-style-type: none;
		content:         "\2193";
		padding-right:   1em;
	}	

	/* multi-col on cv */
	#press ul,
	#lectures ul {
		column-count: 2;
	}
}