body {
		margin:0;
		font-family: 'Montserrat', sans-serif;
}

img {
		display:block;
}

.button {
		background:#fff;
		color:#707070;
		padding:1.125em 3.5em;
		border:1px solid #40A1AE;
		border-radius:.56em;
		text-decoration:none;
		font-weight:800;
		letter-spacing:.2ch;
		text-transform:uppercase;
		transition:.5s color, .5s background;
		display:inline-block;
}

.button:hover {
		background:#40A1AE;
		color:#fff;
}

.full-bleed .project-header {
		flex-grow:1;
		align-items:flex-start;
}

.full-bleed .main-image {
		height:unset;
		position:absolute;
		inset:0;
		z-index:-1;
		padding:0;
}

.full-bleed .main-image img {
		object-fit:cover;
}

/*
* Intro Page
*/

#intro-page {
		display:flex;
		flex-direction:column;
		height:100dvh;
}

#intro-splash {
		background:url('/files/splashes/intro.jpg') center center;
		background-size:cover;
		flex-grow:1;
		/*aspect-ratio:2.5;*/
}

.intro-content-container {
		background:#F2F1EF;
		padding:6.25em;
}

.intro-content {
		display:flex;
		max-width:1525px;
		margin:auto;
		color:#5D5D5D;
		gap:2em;
		align-items:center;
}

.intro-title {
		white-space:nowrap;
		color:#40A1AE;
		font-weight:800;
		font-size:2.25rem;
		margin:0;
}

.intro-text {
		font-size:1.375rem;
		text-align:center;
		line-height:1.3;
}

@media (max-width:1200px) {

		.intro-content-container {
				padding:1em;
		}
		
		.intro-content {
				flex-direction:column;
		}

		.intro-text {
				font-size:1rem;
				line-height:1.6;
				max-width:80ch;
				margin:auto;
		}
}

/*
* Categories
*/
#categories-body {
		background:#161616;
}

#categories-page {
		display:flex;
		min-height:100dvh;
}

#categories-splash {
		background:url('/files/splashes/categories.jpg') center center;
		background-size:cover;
		height:100vh;
		aspect-ratio:.58;
}

.categories-title {
		color:#40A1AE;
		font-size:1.25rem;
		margin:0;
		font-weight:400;
		text-transform:uppercase;
		text-align:center;
}

.categories-menu {
		flex-grow:1;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		padding:1em;
}

.categories-nav ul {
		padding:0;
		list-style-type:none;
}

.categories-nav a {
		font-size:2.25rem;
		color:#EDE9E2;
		font-weight:300;
		text-decoration:none;
		text-align:center;
		display:block;
		padding:2vh 0;
		text-transform:uppercase;
}

.categories-nav a:hover {
		font-weight:900;
}

.categories-sidebar {
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
}

.categories-social-title {
		font-weight:300;
		text-transform:uppercase;
		transform:rotate(-90deg) translate(50%);
		margin:0;
		color:#fff;
		letter-spacing:.4ch;
		line-height:2;
		font-size:.9375rem;
}

.categories-social ul {
		list-style-type:none;
		padding:0;
}

.categories-social a {
		display:block;
		margin:1em 0;
}

.categories-social a:hover {
		box-shadow: 0 0 50px 5px #fff, 0 0 10px #fff, inset 0 0 50px 10px #fff9;
}

@media (max-width:1200px) {

		#categories-page {
				flex-wrap:wrap;
		}
		
		#categories-splash {
				width:100%;
				height:unset;
				aspect-ratio:4;
		}
		
}

@media (max-width:800px) {

		.categories-menu {
				width:100%;
		}
		
		.categories-nav a {
				font-size:1.4rem;
		}

		.categories-sidebar {
				width:100%;
		}
		
		.categories-social-title {
				transform:unset;
				line-height:unset;
		}

		.categories-social ul {
				display:flex;
				align-items:center;
				justify-content:center;
		}

		.categories-social a {
				margin:0 1em;
		}
		
}


/*
* Section Intros
*/
.section-intro-body {
		background:#F2F1EF;
}

.section-intro-page {
		display:flex;
		min-height:100dvh;
}

.section-intro-content-container {
		width:43.75%;
		display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
}

.section-intro-content {
		max-width:500px;
		padding:3em;
}

.section-intro-title {
		color:#40A1AE;
		text-transform:uppercase;
		font-size:2.125rem;
		font-weight:800;
		margin:0;
}

.section-intro-text {
		font-size:1.25rem;
		line-height:1.5;
		margin-bottom:1em;
		color:#707070;
}

.section-intro-splash {
		background-size:cover;
		background-position:center center;
		width:56.25%;
}

@media (max-width:1200px) {

		.section-intro-page {
				flex-direction:column-reverse;
		}

		.section-intro-content-container {
				width:unset;
		}
		
		.section-intro-content {
				max-width:80ch;
				margin:auto;
				padding:2em;				
		}

		.section-intro-text {
				font-size:1.125rem;
		}
		
		.section-intro-splash {
				flex-grow:1;
				width:unset;
				min-height:30vw;
		}
		
}

#photography-splash {
		background-image:url('/files/splashes/photography.jpg');
}

#film-splash {
		background-image:url('/files/splashes/film.jpg');
}

#animation-splash {
		background-image:url('/files/splashes/animation.jpg');
}

#interactive-splash {
		background-image:url('/files/splashes/interactive.jpg');
}

#web-splash {
		background-image:url('/files/splashes/web.jpg');
}

#branding-and-design-splash {
		background-image:url('/files/splashes/branding-and-design.jpg');
}

/*
* Projects
*/
.project-body {
		background:#161616;
}

.photo-page {
		display:flex;
		min-height:100dvh;
}

.carousel {
		height:100dvh;
		padding:5em 6em;
		padding:5vh;
		gap:2vh;
		display:flex;
		flex-direction:column;
		border-right:1px solid #6F6F6F;
		aspect-ratio:.34;
		box-sizing:border-box;
		justify-content:center;
		align-items:center;
}

.carousel-image {
		position:relative;
		aspect-ratio:1;
		flex-grow:1;
		height:20%;
		max-width:200px;
		max-height:200px;
}

.carousel-image:hover {
		cursor:pointer;
}

.carousel-image img {
		aspect-ratio:1;
		object-fit:cover;
		width:100%;
		height:100%;
		display:block;
}

.carousel-image.active:before,
.carousel-image:hover:before {
		content:" ";
		position:absolute;
		inset:0;
		border:4px solid #fff;
}

.carousel-image.active:after {
		content:" ";
		position:absolute;
		top:0;
		bottom:0;
		right:-2em;
		border-right:4px solid #fff;
}

.portfolio-item {
		flex-grow:1;
		display:flex;
		height:100dvh;
		width:100%;
		flex-direction:column;
}

.main-image {
		box-sizing:border-box;
		padding:0 10em;
		padding:0 3.5em;
		height:10%;
		flex-grow:1;
}

.main-image img {
		object-fit:contain;
		height:100%;
		width:100%;
}

.project-header {
		display:flex;
		justify-content:space-between;
		align-items:center;
		padding:3.5em;
}

.project-title {
		color:#fff;
		text-transform:uppercase;
		font-size:1.125rem;
		font-weight:400;
}

.next-prev {
		display:flex;
		justify-content:space-between;
		align-items:center;
		padding:1em;
}

.next-prev a {
		display:block;
		color:#fff;
		text-decoration:none;
		text-transform:uppercase;
		font-size:1.125rem;
		background:#16161666;
		padding:2em;
}

.next-prev a:hover {
		text-shadow:0 0 20px #fff, 0 0 10px #fff, 0 0 30px #fff;
}

#prev::before {
		content: "";
		height: 1em;
		aspect-ratio: 1;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		display: inline-block;
		transform: rotate(-45deg) translateY(25%);
		margin-right: 1em;
}

#prev:hover::before {
		box-shadow: inset 2px 2px 1px #fff;	
}

#next::after {
		content: "";
		height: 1em;
		aspect-ratio: 1;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		display: inline-block;
		transform: rotate(45deg) translateY(25%);
		margin-left: 1em;
}

#next:hover::after {
		box-shadow: inset -2px 2px 1px #fff;	
}

@media (max-aspect-ratio: 1) {
		
		.photo-page {
				flex-direction:column;
				height:100dvh;
		}

		.carousel {
				flex-direction:row;
				aspect-ratio:unset;
				height:unset;
				border-bottom:1px solid #6F6F6F;
				border-right:unset;
		}

		.carousel-image {
				height:unset;
		}
		
		.carousel-image.active:after {
				bottom:-2vh;
				top:unset;
				left:0;
				right:0;
				border-top:4px solid #fff;
				border-right:unset;
		}

		.photo-page .portfolio-item {
				height:10%;
		}

		.main-image {
				padding:0;
		}
		
		.project-header,
		.next-prev {
				padding:1em;
		}
		
}


/*
* Film
*/
.main-video {
		box-sizing:border-box;
		padding:0 3.5em;
		height:10%;
		flex-grow:1;
		display:flex;
		justify-content:center;
		align-items:center;
}

.film-page .portfolio-item {
		height:10%;
}

.film-title {
		color:#fff;
		font-size:2.125rem;
		font-weight:800;
}

.vimeo-video {		
		height: unset;
		max-width: 100%;
		max-height: 100%;
		aspect-ratio: 16/9;	
}

@media (max-aspect-ratio: 1) {
		
		.film-page {				flex-direction:column;
				height:100dvh;
				display:flex;
		}

		.main-video {
				padding:0;
		}
		
}

/*
* Animation
*/
.animation-page {
		display:flex;
		min-height:100dvh;
}