/* Yes the code's horrible, it's on the list of things to clean up. */

/* QUICK RESET */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* VARIABLES */
:root {
	--font-sans: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
	--font-serif: -apple-system-ui-serif, ui-serif, 'Georgia', serif;;
	--font-mono: ui-monospace, monospace;
	--font-size: 0.8rem;
	--line-height: 1.4;
	--line-height-derived: 0.8rem * 1.4;

	--color-bg: #F4F3F3;
	--color-copy: #312D2D;
	--color-subcopy: #535050;
	--color-border: #D4CDCD;
	--color-link: #57769A;
	--color-link-hover: #5093E0;

	--spacing-between: calc(2.1 * var(--line-height-derived));
	--spacing-inset: calc(1.4 * var(--line-height-derived));
	--spacing-heading: calc(0.7 * var(--line-height-derived));
}

html {
	background: var(--color-bg);
	color: var(--color-copy);
	font-family: var(--font-serif);
	font-size: var(--font-size);
	line-height: var(--line-height);
	padding: 1vh 0 5vh;
	border-top: 12px solid var(--color-border);
}

body {
	display: grid;
	grid-template-columns: 10vw 0 auto 0 10vw;
	grid-template-rows: auto;
	grid-row-gap: var(--spacing-between);
	grid-template-areas: 
		". . header . ."
		"gutterL sideL main sideR gutterR"
		". . footer . .";
	margin: var(--spacing-between) 0;
	padding: 0;
}

@media screen and (min-width: 600px) {
	body {
		grid-template-columns: 10vw 2fr minmax(200px, 800px) 2fr 10vw;
	}
}

header {
	grid-area: header;
	font-size: 1.3rem;
	padding-bottom: calc(var(--spacing-between) / 3);
	margin-bottom: calc(var(--spacing-between) / 3);
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	border-bottom:  1px solid var(--color-border);
}

@media screen and (min-width: 600px) {
	header {
		flex-direction: row;
		padding-bottom: var(--spacing-between);
		margin-bottom: var(--spacing-between);
	}
}

header h1{
	display: inline;
	font-size: inherit;
	line-height: 1.1;
	font-weight: bold;
}

@media screen and (min-width: 600px) {
	header h1 {
		font-weight: normal
	}
}

nav ul {
	list-style: none;
}

nav li {
	display: inline-block;
	margin-right: 16px;
}

@media screen and (min-width: 600px) {
	nav li {
		margin-left: 16px;
		margin-right: 0;
	}
}


nav a {
	display: block;
}

main {
	grid-area: main;
}

footer {
	grid-area: footer;
	padding: var(--spacing-between) 0;
	color: var(--color-subcopy);
}

.folio-items {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: calc(var(--spacing-between) / 2);
	grid-row-gap: calc(var(--spacing-between) / 2);
	list-style: none;
}

@media screen and (min-width: 600px) {
	.folio-items {
		grid-template-columns: 1fr 1fr;
	}
}


.folio-item {
}

.folio-item__title {
	padding-top: 1rem;
	font-size: 2rem;
	font-weight: normal;
	line-height: 1.1;
	margin-bottom: calc(var(--spacing-between) / 4);
}

.folio-item__thumbnail {
	width: 800px;
	max-width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 0 0 transparent;
	transition-property: box-shadow;
	transition-duration: 300ms;
	transition-delay: 0;
}

.folio-item__link {
	display: block;
	transition-property: color;
	transition-duration: 120ms;
	transition-delay: 0;
}

.folio-item__link:link,
.folio-item__link:visited {
	color: var(--color-copy);
}

.folio-item__link:hover {
	color: var(--color-link-hover);
}

.folio-item__link:hover .folio-item__thumbnail {
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.03), 0px 1px 4px rgba(42, 32, 32, 0.17), 0px 2px 21px -4px rgba(40, 34, 34, 0.25);
}

.hello,
.title {
	font-size: 2.7rem;
	line-height: 1.1;
	font-weight: normal;
	margin-bottom: var(--spacing-between);
}

@media screen and (min-width: 600px) {
	.hello,
	.title {
		font-size: 4rem;
	}
}

.section-title {
	font-size: 2.4rem;
	font-weight: normal;
	margin-bottom: calc(var(--spacing-between) / 2);
}

p {
	font-size: 1.4rem;
	line-height: 1.6;
	margin-bottom: calc(var(--spacing-between) / 3);
}

figure {
	margin-top: var(--spacing-between);
}

figure img {
	max-width: 100%;
	margin-bottom: calc(var(--spacing-between) / 3);
}

figcaption {
	font-size: 1.4rem;
	text-align: center;
}

sidebar,
.intro {
	display: grid;
	grid-template-columns: 1fr;
}

@media screen and (min-width: 600px) {
	sidebar,
	.intro {
		grid-template-columns: 1fr 300px;
	}
}

sidebar {
	margin-top: var(--spacing-between);
}

.intro img {
	max-width: 100%;
}

.intro p a {
	white-space: nowrap;
}

.hello {
	padding-bottom: var(--spacing-between);
}

a:link,
a:visited {
	color: var(--color-link);
	text-decoration: none;
}

a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

a:active {
	color: var(--color-link-hover);
}

a:not([href]) {
	filter: grayscale(1);
}

.list {
	list-style: none;
}

.list ol {
	padding-left: 12px;
	list-style: none;
}

.list ol li {
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
}

.list .label {
	display: block;
	order: 2;
	color: var(--color-subcopy);
}

.employer {
	font-weight: bold;
}