/*------------------------------------------------------------------------------------
	GLOBAL
------------------------------------------------------------------------------------*/

/*/////////////////////////////////////////////
// RESET //////////////////////////////////////
/////////////////////////////////////////////*/

	* {
		margin: 0;
		padding: 0;
		color: inherit;
		border: none;
		text-align: left;
		font-family: inherit;
		font-weight: normal;
		font-size: inherit;
		line-height: inherit;
		text-decoration: none;
		text-shadow: inherit;
		list-style-type: none;
		list-style-position: inside;
	}
	:root {
		--font-size-regular: 0.866rem;
		--font-size-regular: .925rem;
		--font-size-small: 0.6265rem;
		--font-size-small: 0.6777rem;
		
		--line-height-zero-five: calc(var(--line-height-regular) * .5);
		--line-height-regular: 1.333em;
		--line-height-one-five: calc(var(--line-height-regular) * 1.75);
		--line-height-two: calc(var(--line-height-regular) * 2);
		--line-height-two-five: calc(var(--line-height-regular) * 2.5);
		--line-height-three: calc(var(--line-height-regular) * 3);
		--line-height-two-seventyfive: calc(var(--line-height-regular) * 2.75);
		--line-height-four: calc(var(--line-height-regular) * 4);
		
		--image-border-radius: 0;
		
		--paper-color: hsl(0, 0%, 95%);
		--text-color: hsl(0, 0%, 15%);
		--link-color: #00c;
	}



/*/////////////////////////////////////////////
// GLOBAL DEFAULTS ////////////////////////////
/////////////////////////////////////////////*/

	body {
		padding-bottom: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
		font-family: 'AtlasGroteskRegular', Arial, Helvetica, sans-serif;
		font-size: var(--font-size-regular);
		line-height: var(--line-height-regular);
		color: var(--text-color);
		background-color: var(--text-color);
	}
	a {
		cursor: pointer;
		text-decoration: none;
	}
	.portrait-only { display: block; }
	.landscape-only { display: none; }



/*/////////////////////////////////////////////
// BACKGROUND /////////////////////////////////
/////////////////////////////////////////////*/

	#BackgroundWrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 120vh;
		z-index: 0;
	}



/*/////////////////////////////////////////////
// WORK ///////////////////////////////////////
/////////////////////////////////////////////*/

	/* WRAPPER //////////////////////////////*/

	#WorkWrapper {
		display: inline-block;
		position: relative;
		width: 100vw;
		min-height: 100vh;
		z-index: 10;
		box-sizing: border-box;
		padding: var(--line-height-regular);
		background-color: var(--paper-color);
	}

	/* PROJECT LIST /////////////////////////*/

	#WorkWrapper #ProjectList {
		display: inline-block;
		min-height: 100vh;
	}
	#WorkWrapper #ProjectList .project-anchor {
		white-space: nowrap;
	}
	#WorkWrapper #ProjectList .about-item .project-anchor {
		white-space: normal;
	}
	#WorkWrapper .break-after-zero-twentyfive {
		margin-bottom: calc(var(--line-height-regular) / 4) !important;
	}
	#WorkWrapper .break-after-zero-five {
		margin-bottom: var(--line-height-zero-five) !important;
	}
	#WorkWrapper .break-after {
		margin-bottom: var(--line-height-regular) !important;
	}
	#WorkWrapper .break-after-one-five {
		margin-bottom: var(--line-height-one-five) !important;
	}
	#WorkWrapper .break-after-two {
		margin-bottom: var(--line-height-two) !important;
	}
	#WorkWrapper .break-after-two-five {
		margin-bottom: var(--line-height-two-five) !important;
	}
	#WorkWrapper .break-after-three {
		margin-bottom: var(--line-height-three) !important;
	}
	#WorkWrapper .break-after-two-seventyfive {
		margin-bottom: var(--line-height-two-seventyfive) !important;
	}

	/* PROJECT CONTAINER ////////////////////*/

	.project-container {
		width: 100%;
		display: none;
		margin-top: var(--line-height-regular);
		margin-bottom: var(--line-height-four);
	}

	/* PARAGRAPHS AND CHARACTERS ////////////*/

	.project-container p,
	.project-container ul {
		width: 100%;
		max-width: 75vw;
	}
	.project-container p {
		margin-bottom: var(--line-height-regular);
	}
	.project-container a {
		color: var(--link-color);
	}
	.project-container p.image-caption span.image-counter {
		margin-right: 0.35em;
	}
	.project-container .image-caption,
	.project-container .project-data,
	.project-container ul {
		font-size: var(--font-size-small);
		line-height: var(--line-height-regular);
	}
	.project-container ul.credits li {
		display: inline;
	}
	.project-container ul.credits li::after {
		content: ', ';
	}
	.project-container ul.credits li:nth-of-type(1)::after,
	.project-container ul.credits li:last-of-type::after {
		content: '';
	}

	/* IMAGES ////////////////////*/

	.image-container {
		background-color: var(--paper-color);
		width: fit-content;
		margin-left: calc(var(--line-height-regular) * -.5);
		width: calc(100vw - var(--line-height-regular));
		height: fit-content;
	}
	.project-container > .image-container > img {
		border-radius: var(--image-border-radius);
		width: 100%;
		height: auto;
		/* max-height: 70vh; */
		object-fit: scale-down;
		object-position: 0 0;
		cursor: ew-resize;
		display: none;
		mix-blend-mode: multiply;
	}
	.project-container > .image-container > img.visible-img {
		display: initial;
	}

	/* CONTENT SPACINGS /////////////////////*/

	.project-container .image-container + p {
		margin-top: var(--line-height-regular);
	}

	/* SWITCHES ////////////////////*/

	.project-container > *.portrait {
		display: block;
	}
	.project-container > *.landscape {
		display: none;
	}
	.project-container p.project-information {
		display: none;
	}



/*/////////////////////////////////////////////
// ABOUT //////////////////////////////////////
/////////////////////////////////////////////*/

	/* PARAGRAPHS AND CHARACTERS ////////////*/

	.about-container {
		margin-top: var(--line-height-two);
	}
	.about-container ul.client-list {
		/* white-space: nowrap; */
	}





/*------------------------------------------------------------------------------------
	LANDSCAPE ONLY
------------------------------------------------------------------------------------*/

@media only screen and (orientation: landscape) {

	/*/////////////////////////////////////////////
	// GLOBAL DEFAULTS ////////////////////////////
	/////////////////////////////////////////////*/

		:root {
			/* --font-size-regular: 0.833rem; */
		}
		a:hover {
			text-decoration: underline;
		}

		.landscape-only { display: block; }
		.portrait-only { display: none; }

	/*/////////////////////////////////////////////
	// WORK ///////////////////////////////////////
	/////////////////////////////////////////////*/

		/* WRAPPER //////////////////////////////*/

		#WorkWrapper > ul {
			width: 25vw;
			overflow-x: hidden;
		}

		/* PROJECT CONTAINER ////////////////////*/

		.project-container {
			position: absolute;
			top: 0;
			right: var(--line-height-regular);
			width: 70vw;
			/* margin-top: 0; */
			z-index: 20;
			background-color: transparent;
		}
		.project-container.no-main-pic {
			margin-top: var(--line-height-regular);
		}

		/* IMAGES AND FADERS ////////////////////*/

		.image-container {
			background-color: var(--paper-color);
			/* box-shadow: 0 2px 8px inset hsl(0, 0%, 87.5%); */
		}
		.project-container > .image-container > img {
			object-fit: contain;
			width: initial;
			max-height: 75vh;
			max-width: 70vw;
			mix-blend-mode: multiply;
		}
		.project-container p,
		.project-container ul {
			width: 40vw;
			min-width: 25rem;
		}
		.project-container p,
		.project-container ul.client-list {
			font-size: var(--font-size-regular);
		}
		.project-container > *.portrait {
			display: none;
		}
		.project-container > *.landscape {
			display: block;
		}

		/* STICKY BAR ///////////////////////////*/

		.sticky-bar {
			display: none;
		}

}





/*------------------------------------------------------------------------------------
	GLOBAL
------------------------------------------------------------------------------------*/

/*/////////////////////////////////////////////
// SWITCHES ///////////////////////////////////
/////////////////////////////////////////////*/

	.expanded .project-anchor {
		text-decoration: underline;
	}
	.expanded .project-container {
		display: block;
	}
	.missing {
		display: none;
	}