@charset "UTF-8";

/*	Styles are written following the document flow, and
	ordered into sections based on which pages they effect
*/

@font-face {
	font-family:InknutAntiqua;
	/* https://fonts.google.com/specimen/Inknut+Antiqua */
	src:url(../fonts/InknutAntiqua-Light.ttf);
}

@font-face {
	font-family:HelveticaNeue;
	src:url(../fonts/HelveticaNeueMedium.otf);
}

@font-face {
	font-family:AcuminProMedium;
	/* https://fonts.adobe.com/fonts/acumin */
	src:url(../fonts/AcuminPro-Medium.otf);
}

@font-face {
	font-family:AcuminProLight;
	/* https://fonts.adobe.com/fonts/acumin */
	src:url(../fonts/AcuminPro-Light.otf);
}
/*	fontface h1 "Helvetica Neue",Arial,sans-serif
	fontface everything else acumin-pro
*/

body {
	font-family:AcuminProLight, sans-serif;
	line-height:1;
	padding:2em;
}

a {
	color:unset;
	text-underline-position:under;
}

hr {
	border:none;
	margin:2em auto;
}

ol, ul {
	list-style-type:none;
	padding-left:0;
}

li {
	margin:0.8em 0;
	line-height:1.5;
}

q {
	quotes:"‘" "’" "“" "”";
}

header {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
}

header a {
	text-decoration:none;
	text-underline-position:unset;
}

header h1 {
	/*font-size:calc((1.7 - 1) * 1.2vw + 1rem);*/
	font-size:1.2em;
	font-weight:400;
	letter-spacing:0.17em;
	margin:0;
}

header ul {
	margin:0;
	text-align:right;
}

header li {
	display:inline-block;
	margin:0 0 0 2em;
}

header li#thispage,
header li a:hover {
	text-decoration:underline;
	text-underline-offset:0.6em;
}

main h2 {
	font-size:1em;
	line-height:1.5;
	text-transform:uppercase;
}

/*	Projects page	-	-	-	-	-	-	-	-	-	*/

ol#projects {
	font-family:InknutAntiqua, serif;
	font-size:calc((3.9 - 1) * 1.2vw + 1rem);
	line-height:1.3em;
	list-style-position:inside;
	padding:0;
	text-align:center;
}

ol#projects li {
	margin:1em 0;
}

ol#projects cite {
	font-style:normal;
}

ol#projects a {
	color:black;
	text-decoration:none;
}

ol#projects a:focus,
ol#projects a:hover {
	font-style:italic;
}

ol#projects a[href$="clean-up-efforts-underway.html"]:hover {
	cursor:url(../media/clean-up-efforts-underway_preview.jpg), auto;
}
ol#projects a[href$="my-father-my-father-friday-night.html"]:hover {
	cursor:url(../media/my-father-my-father-friday-night_preview.jpg), auto;
}
ol#projects a[href$="folie-a-deux.html"]:hover {
	cursor:url(../media/folie-a-deux_preview.jpg), auto;
}
ol#projects a[href$="then-daddy-takes-his-place-in-an-australian-landscape.html"]:hover {
	cursor:url(../media/then-daddy-takes-his-place-in-an-australian-landscape_preview.jpg), auto;
}
ol#projects a[href$="and-then-these-three-came-back-to-robert.html"]:hover {
	cursor:url(../media/and-then-these-three-came-back-to-robert_preview.jpg), auto;
}
ol#projects a[href$="under-the-jumpers.html"]:hover {
	cursor:url(../media/under-the-jumpers_preview.jpg), auto;
}

/*	About page	-	-	-	-	-	-	-	-	-	-	*/

main#about {
	display:grid;
	grid-gap:4em;
	margin-top:6em;
}

main#about cite {
	font-style:normal;
}

main#about section {
	margin-bottom:3em;
}

main#about section#intro {
	grid-column:1;
}

main#about section#cv {
	grid-column:2;
}

/*	Individual project's pages	-	-	-	-	-	-	*/

main#project {
	display:grid;
	grid-template-columns:auto 30%;
	grid-gap:4em;
	margin-top:6em;
}

main#project section#media {
	grid-column:1;
}

main#project section#info {
	grid-column:2;
}

main#project section#info h2 {
	font-weight:normal;
	margin-top:4em;
}

main#project figure {
	margin:0;
}

main#project figcaption {
	text-align:right;
}

main#project img,
main#project video {
	width:100%;
}

/*	Phone layout	-	-	-	-	-	-	-	-	-	*/

@media (max-width:500px) {
	header {
		grid-template-columns:unset;
		grid-template-rows:2;
		text-align:center;
	}

	header nav {
		margin-top:2em;
	}

	header ul {
		text-align:center;
	}

	header ul li:first-child {
		margin-left:0;
	}

	main#about section#intro,
	main#about section#cv,
	main#project section#media,
	main#project section#info {
		grid-column:unset;
	}

	main#about,
	main#project {
		grid-gap:0;
		margin-top:2em;
	}

	main#about li {
		line-height:1.3;
	}

	main#about section {
		margin-bottom:2em;
	}

	main#project {
		grid-template-columns:unset;
	}

	main#project section#media {
		grid-row:2;
	}

	main#project section#info {
		grid-row:1;
	}

	main#project section#info h2 {
		margin-top:2em;
	}

	main#project figcaption {
		font-size:x-small;
	}
}