@import url("https://use.typekit.net/dco2ham.css");
@import url('https://fonts.googleapis.com/css2?family=Work Sans:wght@300&display=swap');

/*
font-family: work-sans, sans-serif;
font-weight: 300;
font-style: normal;

font-family: work-sans, sans-serif;
font-weight: 300;
font-style: normal;

font-family: 'Work Sans', sans-serif;
font-weight: 300;
font-style: normal;
*/

/* VARIABLES */

:root {
	--white:      #ffffff;
	--black:      rgba(0,0,0,.9);
	--blue:       #0074bb;
	--red:        #f14d1c;
	--light-gray: #bbbbbb;
	--selection:  rgba(0,0,0,.1);
	--gray-1:     #f7f7f7;
	--gray-2:     #e0e0e0;
	--gray-3:     #bebebe;
	--hover:      rgba(0,0,0,.45);
  }


/* GLOBAL */

* {
	box-sizing: border-box;
}


body {
	font-family: "Work Sans", sans-serif;
	font-weight: 300;
	line-height: 1.3em;
	color: var(--black);
	background-color: var(--white);
	padding: 6vw;
	max-width: 90rem;
	margin: 0 auto;

	-webkit-font-feature-settings:
	"kern" 1, "clig" 1, "liga" 1, "pnum" 1, "onum" 1;
	
	-moz-font-feature-settings:
	"kern" 1, "clig" 1, "liga" 1, "pnum" 1, "onum" 1;
	
	-ms-font-feature-settings:
	"kern" 1, "clig" 1, "liga" 1, "pnum" 1, "onum" 1;
	
	font-feature-settings:
	"kern" 1, "clig" 1, "liga" 1, "pnum" 1, "onum" 1;

}

	@media only screen and (min-width: 0px) and (max-width: 768px) {
		body {font-size: 1.4rem;}
	}

	@media only screen and (min-width: 769px) and (max-width: 1024px) {
		body {font-size: 1.5rem;}
	}

	@media only screen and (min-width: 1025px) and (max-width: 1440px) {
		body {font-size: 1.4rem;}
	}

	@media only screen and (min-width: 1441px) and (max-width: 1920px) {
		body {font-size: 1.5rem;}
	}

	@media only screen and (min-width: 1921px) and (max-width: 2560px) {
		body {font-size: 1.6rem;}
	}




nav {
	padding: 6vw 0 0 0;
	flex-grow: 1;
}

nav ul {
	column-count: 2;
	line-height: 2.1rem;
}

.sidebar {
	padding: 0 0 4rem 0;
	z-index: 1;
}

	#portrait-1 {
		margin-top: 10vw;
		align-self: flex-end;
	}

	#portrait-2 {
		display: none;
	}

section {
	column-count: 0;
	min-height: 104vh;
	margin: 0 -4vh 0 -4vh;
	padding: 4vh 4vh 4vh 4vh;
}

	section.curriculum-vitae div {
		display: flex;
		flex-wrap: nowrap;
	}

	section.curriculum-vitae div p:first-of-type {
		min-width: 2.5rem;
		letter-spacing: .03rem;
	}

	section.curriculum-vitae p:last-of-type {}

		section.curriculum-vitae div.gallery {
			display: block;
			margin: 0 0 2.5rem 2.5rem;
		}

		section.curriculum-vitae div.gallery img {
			margin: 0 0 .9rem 0;
		}

		section {
			padding-top: 6vw;
		}

		section:last-of-type {
			padding-bottom: 0rem;
		}

	.bonus { display: none; }

	.site-credit {
		margin: 0 0 0 0;
		position: absolute;
		padding-bottom: 2rem !important;
	}

	img#prWork Sanss-mark-a {
		display: block;
		margin: 3rem auto 4rem auto;
		width: 45% !important;
		max-width: 15rem !important;
		position: relative;
		left: -1.5%;
		z-index: -1;
	}

	img#prWork Sanss-mark-b {
		display: none;
	}


::selection {
	background-color: var(--selection);
	color: var(--black);
	}
	
::-moz-selection {
	background-color: var(--gray-2);
	color: var(--black);
	}








/*  T Y P O G R A P H Y  */


h1, h2 {
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-bottom: 1.8rem;
	line-height: inherit;

	-webkit-font-feature-settings:
	"kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
	
	-moz-font-feature-settings:
	"kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
	
	-ms-font-feature-settings:
	"kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
	
	font-feature-settings:
	"kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
}

	h1 { padding-bottom: 1.2rem; }	
	section.curriculum-vitae h2 { padding-left: 2.5rem; }

h3 {
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: .2em;
	margin: 0 0 1em 0;
}

p      { padding-bottom: 1.8rem;}
strong { font-weight: 700;}
em     { font-style: italic;}
i      { 
		-webkit-font-feature-settings: "c2sc" 1, "case" 1, "smcp" 1, "onum" 1;
		-moz-font-feature-settings:    "c2sc" 1, "case" 1, "smcp" 1, "onum" 1;
		-ms-font-feature-settings:     "c2sc" 1, "case" 1, "smcp" 1, "onum" 1;
		font-feature-settings:         "c2sc" 1, "case" 1, "smcp" 1, "onum" 1;
}

.sc {
	-webkit-font-feature-settings: "smcp" 1;
	-moz-font-feature-settings:    "smcp" 1;
	-ms-font-feature-settings:     "smcp" 1;
	font-feature-settings:         "smcp" 1;	
}

ul.specializations li {
	padding-left: .75em;
	text-indent: -.925em;
}

	ul.specializations li:before {
		content: "–";
		padding-right: .75rem;
	}


.callout {
	font-family: "Work Sans", sans-serif;
	font-weight: 300;
	font-size: 2rem !important;
	line-height: 1.3em;
}

.caption {
	font-size: 1.0rem;
	line-height: 1.3em;
	text-align: left !important;
}








/* LINKS */

a {
	color: var(--black);
	text-decoration: underline;
	text-underline-offset: .05em;
	text-decoration-thickness: 0.05em;
}

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

	.sidebar h1 a {
		text-decoration: none !important;
	}

	.sidebar nav a {
		text-decoration: none !important;
		-webkit-transition: padding-left 0.09s ease-out;
		-moz-transition: padding-left 0.09s ease-out;
		-o-transition: padding-left 0.09s ease-out;
	}

	.links {
		color: var(--light-gray);
		font-variant-numeric: lining-nums;
		margin-left: .1rem;
	}

	.links a {}
	.links a:link    { color: var(--light-gray); }
	.links a:visited { color: var(--light-gray); }
	.links a:hover   { color: var(--hover); }
	.links a:active  { color: var(--hover); }

	.top {
		margin-left: 0rem !important;
		
	}

	section.curriculum-vitae .top {
		margin-left: 2.5rem !important;
	}















/*   D E S K T O P   L A Y O U T   */


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

	body {
		font-family: "Work Sans", sans-serif;
		font-weight: 300;
		padding: 0;
	}

	h1, h2 {
		padding-bottom: 1.8rem;
	}

	h3 {
		padding: 0 0 .5rem 0;
	}

	.sidebar {
		position: fixed;
		padding-top: 4rem;
		padding-right: 8rem;
		padding-bottom: 6rem;
		padding-left: 4rem;
		height: 100vh !important;
	}

		.sidebar nav {
			padding: 0;
			border-top: none;
		}

		.sidebar nav ul {
			border: none;
			column-count: 1;
			line-height: 1.3em;
		}
	
		.sidebar nav a:hover {
			cursor: poWork Sans;
			padding-left: .5em !important;
			}

		#portrait-1 {
			display: none;
		}

		#portrait-2 {
			display: block;
			min-width: 25% !important;
			max-width: 35% !important;
			margin-top: 5%;
			position: relative;
			left: -.5rem;
		}

	.page {
		display: grid;
		grid-template-columns: 25rem auto;
	}

	.main {
		grid-column-start: 2;
		padding-right: 4rem;
	}


	section {
		position: relative;
		min-height: 100vh;
		padding-top: 4rem;
		margin-left: -1000rem;
		padding-left: 1000rem;
		margin-right: -1000rem;
		padding-right: 1000rem;
		}

		section.curriculum-vitae div p:first-of-type {
			min-width: 3rem;
			letter-spacing: .03rem;
		}

		section.curriculum-vitae h2 {
			padding-left: 3rem;
		}

		section.curriculum-vitae div.gallery {
			display: flex;
			align-items: stretch;
			width: 100%;
			gap: 1vw;
			flex-direction: row;
			flex-wrap: wrap;
			padding-left: 3rem !important;
			margin: 0 0 4rem 0 !important;
		}

			section.curriculum-vitae div.gallery img {
				margin: 0 0 0 0;
			}

				.gallery.small img {
					width: 48.5%;
				}

				.gallery.medium img {
					width: 67%;
				}

				.gallery.large img {
					width: 100%;
					padding-left: 3rem;
				}

		.bonus { display: block !important; }




	.callout {
		font-size: 2.5rem !important;
		line-height: 1.15em;
		max-width: 40ch;
		position: relative;
		top: -.2rem;
	}


	ul.specializations li {
		padding-left: 0;
		text-indent: 0;
	}
	
		ul.specializations li:before {
			display: none;
		}

	.quote-block {
		min-height: 0vh;
		margin: 15vh 0 15vh 0;
		padding: 0;
	}
	
	.quote-block .quote {
		font-size: 2.2rem;
		line-height: 1.3em;
		letter-spacing: .2rem;
		text-transform: uppercase;
		max-width: 55ch;
		margin-bottom: 1.5rem;
		-webkit-font-feature-settings: "kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
		-moz-font-feature-settings: "kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
		-ms-font-feature-settings: "kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
		font-feature-settings: "kern" 1, "clig" 1, "liga" 0, "pnum" 1, "onum" 1;
	}

	.caption.small  { max-width: 47%; }
	.caption.medium { max-width: 65%; }
	.caption.large  { max-width: 100%; padding-left: 3rem; }

	.top { display: none; }

	.site-credit {
		position: absolute;
		bottom: 4rem;
	}

	img#prWork Sanss-mark-a {
		display: none;
	}

	img#prWork Sanss-mark-b {
		display: block;
		height: 22vh;
		width: auto;
		max-height: 25rem;
		margin-bottom: 3vh;
		position: relative;
		left: -1%;
		z-index: -1;
	}

}