* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

html { 
	font-size: 0.85vw; 
	font-size: 14px;
/* 	font-size: 1.4vw;  */
	} 
	
html, body {
  overflow-x: hidden;
}	
	
body {
	font-family: "NeueHaasGrot";
	font-family: "Lettera";
	font-size: 1rem;
	line-height: 1.3;
	transition: background-color 250ms ease;
	color: black;
	overflow-x: hidden;
/* 	letter-spacing: -0.05rem; */
	background: white;

	}
	
	
em {
	font-style: italic;
	}
	

	
input {
	font-family: "Lettera";
	font-size: 1rem;
	line-height: 1.2;
	}
	
/*	
	
main, nav {
	background: lightyellow;
	}
	
.col {
	background: lightpink;
	}
	


body.profile  {
	background-color: #0068ff;
	background-color: #cb5616;
	}
*/


.error {
	background:#ff5000;height:100vh;width:100vw;position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;display:flex;align-items:center;justify-content:center;
	}


	
a, a:visited {
	color: black;
	}
	
:visited {
	color: inherit;
	}
	

	

	

a:not([href]) {
	cursor: not-allowed;
	}
	
.text a,
.text a:visited {
	text-decoration: underline;
	text-decoration-color: #d9d9d9;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.075em;
	transition: color 250ms ease, text-decoration-color 250ms ease;
	}
	
	
.text a:hover {
	color: #808080;
	transition: color 250ms ease, text-decoration-color 250ms ease;
	}

p a {
	b
	}
	
	
p, ul {
	color: #000;
	margin: 0 0 1em 0;
	}
	
p + ul {
	margin-top: 1em !important;
	}
	

p:last-of-type, ul:last-of-type {
	margin: 0;
	}		
	
ul {
	list-style: none;
	}
	
	ul li {
		text-indent: -1.3em;
		padding-left: 1.3em;
		}
		
.col.experience p a, 
	.col.recognition p a {
		text-decoration: none;
		}		
		
/*
	.col.experience p, .col.recognition p, .col.contact {
		padding-left: 1.2em;
		position: relative;
		margin: 0;
		}
		
	.col.experience p a, 
	.col.recognition p a {
		text-decoration: none;
		}
		
		.col.experience p time {
			position: absolute;
			left: 22.75vw;	
			}
*/
		
.imgLink {
	display: inline-block;
	}
	
h2 {
	display: inline-block;
	}



	

/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Index		*/


/*
body:not([class]), body[class=""] {
	background: black;
	transition: background-color 250ms ease;
	}
	
body:not([class]) nav li:after,
body[class=""] nav li:after {
		color: white;
		}	
	
	
body:not([class]) a, body:not([class]) a:visited, body[class=""] a {
	color: white;
	}	
	
	
	
.invert figure {
	filter: invert();
	}	
		
*/	

.cycle-slideshow {

	align-self: flex-end;
	float: right;
	}
	
.cycle-slideshow .col {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	}

.cycle-slideshow .block, .cycle-slideshow .block:first-of-type {
	margin: 0;
	}

/*


.block.preview.projects.show {
	display: flex;
	}

	
.highlight {
	color: black;
	}
*/


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Video intro		*/

body > video.playing {
  opacity: 1;
  transition: opacity 500ms ease;
}

body > video {
	width: 100%;
	height: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 500ms ease;
	z-index: 9999;
	}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Layout		*/



[data-barba="wrapper"] {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	}

main {
	width: 100%;
	}
	
.project .col {
	width: 45.5vw;
	}		
	
.credits-block .col {
	width: 21.25vw;
	width: 45.5vw;
	column-count: 2;
	column-gap: 3vw;
	
	}
	
.credits-block .col p,
.credits-block .col li {	
	break-inside: avoid-column;
	}


header {
	width: 46.5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	


	
nav.primaryNav {
	width: 100%;
	padding: 3vw 3vw 0 3vw;
	display: flex;
	box-sizing: border-box;
	position: absolute;
	flex-direction: row;
	justify-content: space-between;
	z-index: 99998;
	pointer-events: none;
    mix-blend-mode: difference;
	
	}
	
	nav.primaryNav * {
		pointer-events: auto;
	}
	
	nav.primaryNav a {
		color: white;
		
		transition: color 250ms ease;
		}
	
	nav.primaryNav a:hover {
		color: #808080;
		}
	
nav.secondaryNav {
	position: fixed;
	padding: 3vw;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	}	
	
	nav.secondaryNav * {
		pointer-events: auto;
	}
	
nav.secondaryNav.is-hidden {
  opacity: 0;
  transform: translateY(-6vw);
  transition: transform 500ms, opacity 500ms;
}
nav.secondaryNav.is-visible {
  opacity: 1;
  transform: translateY( 0);
  transition: transform 500ms, opacity 500ms;
}	


body.home nav.secondaryNav,
body.homepage-thumbnails nav.secondaryNav {
	display:none;
}

body[class^="project"] nav.primaryNav .info {
	display: none;
	}
	

	
body p,
body span,
body .slide-counter,
body h2,
body figure,
body iframe,
body slide,
body .cycle-slideshow,
body .col,
body .next-project,
body .error {
	transition: opacity 250ms ease;
	}	
		
body[class*="nav"] p,
body[class*="nav"] span,
body[class*="nav"] .slide-counter,
body[class*="nav"] h2,
body[class*="nav"] figure,
body[class*="nav"] iframe,
body[class*="nav"] slide,
body[class*="nav"] .cycle-slideshow,
body[class*="nav"] .col,
body[class*="nav"] .next-project,
body[class*="nav"] .error {
	opacity: 0;
	}	
	

		

.project {
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-left: 3vw;
	padding-right: 3vw;
	}		

	
.block {
	margin: 0 0 3vw 0;
	width: 100%;
	}
/*
	
	.block:first-of-type {
		margin-top: 3vw;
		}
*/
	


		
		
.block.width-12 {
	width: 100%;
	}	
	
.block.width-9 {
	width: 70.5vw;
	width: 100%;
	}	
	
.block.width-6 {
	width: 47vw;
	}		
	
.block.width-4 {
	width: 31.33vw;
	}	
		
.project .block.text {
	}
	
.videoText {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	}	
	

	
.block.text h2 {
	color: #808080;
	}		
		
a.block:hover {
	text-decoration: none;
	}	
	

	
	a.block:hover h2 {
/* 		text-decoration: underline; */
		}	
		
	a.block:hover, a.block:hover p {
		color: #808080;
		}


	

		
	.marquee {
		width: 22.75vw !important;
		height: 22.75vw;
		transition: opacity 1s ease;
		opacity: 1;

		}

		
	.center {
		opacity: 0;
		}
		
/*
[data-barba="wrapper"] {
	width: 80vw;
	margin: 0 10vw;
	}		
		
main {
	width: 80vw;
	}	
*/		
		
		
.projectGrid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 4rem 2.25vw 0 2.25vw;
	}
	
	.projectGrid .block {
		width: 22.375vw;
		margin: 0 0.75vw 1.5vw 0.75vw;
		position: relative;
		}
		
		
	.projectGrid .block .block-info {
		color: black;
		padding: 0.75em 0 1.5em;
		
		}
		
	.projectGrid .block .block-info p {
		color: #808080; 
/* 		margin-left: 1.25em; */
		}
		
	.projectGrid .block .block-info h2, p {
		max-width: 90%;
	}	


.projectGridFooter {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 4rem;	
	margin-bottom: 3vw;
	box-sizing: border-box;
	padding-right: 3vw;
	padding-left: 3vw;
	}
	
	.projectGridFooter a {
		display: inline-block;
		color: #808080;
		transition: color 250ms ease;
		}
	
		
	.projectGridFooter a:hover {
		color: black;
		}
	



.ItemCard {

    transition: transform .2s cubic-bezier(.215, .61, .355, 1),
                box-shadow .5s cubic-bezier(.215, .61, .355, 1);
    transform: perspective( 600px ) translate3d( 0, 0, 0 );
}

/*
	
.col.title h2:before {
	content: '\00a0\00a0';
	}	
*/	

/*
	.projectGrid .block .block-info {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;

		}
		
	a.block .block-info {
		opacity: 0;
		}	
		
	a.block:hover .thumb {
		opacity: 0;
		}
		
	a.block:hover .block-info {
		opacity: 1;
		}	
	 
*/
		
.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 3vw;
	}
	
body {
	position: relative;
	}
	
.marquee-container {
	height: 100vh;
	margin: 0;
	width: 100vw;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	}
	
	.marquee-container a {
		pointer-events: auto;
		}
		
.slideshow-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	}
	
	.slide, .cycle-slideshow {
		width: 100%;
		}
/*
	
	
.project .col.text, .project .col.title {
	width: 100%;
	font-size: 1.5rem;
	}
	
.project .col.title {
	margin-bottom: 1rem;
}

.sticky p {
	display: none;
	}
	
body {
	font-size: 1.3rem;
}
*/



[data-barba="container"] {
	display: flex;
	flex-direction: row;
	}

/*
.project-thumb .col:first-of-type .sticky {
	display: none;
}
*/

/*

.project .col.text, .project .col.title {
	width: 100%;

	}
	
.project .col.title {
	display: none;
	}*/
	

.project .col.text p {
	max-width: 85%;
}
	
.project .col.title {
	margin-bottom: 1rem;
}

.project .cycle-slideshow {
	z-index: -1;
	height: auto;
	}
	
.project .block.text {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}


.reverseLayout {
	flex-direction: row-reverse;
	}
	
/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Tags	*/	

.active-tag {
	margin-top: 3vw;
	}

.tags {
	padding: 1rem 0;
	}
	
.active-tag-link {
	margin-top: -0.3rem;	
	margin-left: 8rem;
	position: relative;
	z-index: 999999;
	transform: translateX(3vw);
	}

.projectTag {

	}
	
.pill {
	display: inline-block;
	background: #E8E8E8;
	color: #808080;
	height: 1.9rem;
	border-radius: 0.95rem;
	padding: 0 .9rem;
	text-decoration: none !important;
	line-height: 1.85rem;
	transition: color 200ms ease-in-out, background 200ms ease-in-out !important;
	}
	
	a.pill {
		color: #808080;
	}
	
	.pill:hover {
		background: #ccc;
		color: black !important;
		}
	
.tags a.pill {
	margin-bottom: 0.75rem;
	}		
	
	
/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Slideshow	*/	


.slideshow {
	position: relative;
}

.cycle-slideshow figure {
	padding-top: 56.25%;
	}
	
.cycle-slideshow figure img {
	width: auto;
	left: 50%;
	transform: translateX(-50%);
	height: 95%;
	top: 2.5%;
	}

.cycle-slideshow figure iframe {
	width: 100%;
	left: 0;
	z-index: 1;
	height: 95%;
	top: 2.5%;
	}
	
.fullBleed .cycle-slideshow figure iframe,
.fullBleed .cycle-slideshow figure img {
	height: 100%;
	top: 0;
	}
	
.medium .cycle-slideshow figure iframe,
.medium .cycle-slideshow figure img {
	height: 90%;
	top: 5%;
	}	
	
.cycle-prev, .cycle-next {
	position: absolute;
	height: 100%;
	width: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	}
	
.cycle-next {
	left: 50%;
	}
	
.slideshowControlContainer {
	width: 100%;
	padding-top: 56.25%;
	position: absolute;
	top: 0;
	cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */	
	}	
	
	
.slideshowControl {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */		
}	

.cycle-slide {
	cursor: pointer;
}		
	
.slideshowControl a {
	display: inline-block;
	background: #F8F8F8;
	color: #808080;
	opacity: 0;
	height: 1.8rem;
	border-radius: 0.9rem;
	padding: 0 .9rem;
	line-height: 1.8rem;
	
	}
	
.slideshowControl:hover a {
	opacity: 1;
	
	}
	
.cycle-slideshow {
	overflow-y: visible;
	}
	
.slideCaption, .slide-counter {
	margin: 1rem 0;

}	


.slideCaption {
	width: 45.5vw;
	float: right;
	}

.slide-counter {
	position: absolute;
	top: 100%;
	}
	
.slideCaption p {
	margin: 0;
	}
	
	
/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Tags	*/		


.activeTags .project-thumb {
	display: none;
	}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Mute button 	*/


button.mute {
	position: absolute;
	width: 3vw;
	height: 3vw;
	background: url('/svg/mute-unmute.svg') no-repeat;
	background-position-x: left;
	background-position-y: 0%;
	background-size: auto 100%;
	bottom: 1.5vw;
	right: 1.5vw;
	text-indent: -9999px;
	opacity: 1;
	transition: opacity 200ms ease;
	z-index: 10;
	padding: 0;
	margin: 0;
	border: none;
    -webkit-appearance: none;
    -moz-appearance: none;	
	}
	
	button.mute:hover {
		opacity: 0.5;
		}
	
	button.mute[data-vimeo="muted"] {
		background-position-x: right;
		}
		
/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Credits 	*/	

.col.credits,
.col.credits p,
.col.credits ul,
.col.credits ul li,
.col.credits ul li a {
	color: #808080;
	}	
	
.credits-block {
	display: flex;
	flex-direction: row;
	padding-bottom: 3vw;
	padding-right: 3vw;
	padding-left: 3vw;
	justify-content: space-between;
	}
	

/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	STicky title 	*/				


.project-title-sticky {
	display: none;
	float: left;
	width: 22.75vw;
	margin-top: 1rem;
	}
	
.intro.block:first-of-type {
	margin-top: -1.2rem;
	}	
	
.intro {
	float: right;
	width: 22.75vw;
	}
	

	
.opening-new {
	display: none;
}	


.intro-text-indent {
	margin-left: 1.25rem;
	}
	
.opening-old {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	}
	
.col.title {
	width: 21.25vw;
	margin-right: 3vw;
	}
	


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Next project 	*/	


.next-project {	
	display: flex;
	flex-direction: row;
	width: 100vw;
	min-height: 100px;
	background: black;	
	color: white;
	padding: 3vw;
	}
	
	.next-project .block {
		margin: 0;
	}
	
.block.project-next {
	justify-content: space-between;
}
	
	.next-project .col {
		width: 21.25vw;
		}
	
	.next-project.gray {
		background: #f2f2f2;
		}
		
		
	.next-project h2 {
		color: white;
		}
		
	.next-project.gray h2 {
		color: black;
		}			
		
	.next-project a {
		display: flex;
		flex-direction: row;	
		}	
		
	.next-project p {
		margin-left: 1.25rem;
	}	
	
	.next-project a,
	.next-project p  {
		color: #808080;
		transition: color 250ms ease;
		}	
		
	.next-project a:hover {
		color: white;
		transition: color 250ms ease;
		}
		
	.next-project.gray a:hover {
		color: black;
		}
		
/*
	.next-project figure:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.25);
		}		
*/


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Profile test2	*/

/*

main .profile {
	display: flex;
	flex-direction: row;
	padding-bottom: 3vw;
	}
	
.textColumns {
	display: flex;
	flex-direction: row;
	margin: auto !important;
	padding-bottom: 0;
	}
	
.col-4 {
	margin: 0 1.5vw;
	width: 21.25vw;
	}
	
.col-4:first-of-type {
	margin-left: 0;
	}
	
.col-4:last-of-type {
	margin-right: 0;
	}
	
	

.profile .videoText .col:first-of-type {
	padding-top: 3vw;
	}

	
body.profile .primaryNav .info , 
body.profile-2022 .primaryNav .info {
	display: none;
	}
	
	
.project.profile .col.text,
.project.profile .videoText .col,
.project.profile .block.videoText {
	width: 21.25vw;
	margin-left: 3vw;
	}		
	
.project.profile .col.text p,
.project.profile .col.text li {
	max-width: 85%;
}	
	
.project.profile .col.text:first-of-type {
	margin-left: 24.25vw;
	}	

*/

/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Profile test 1	*/



main .profile {
	display: flex;
	flex-direction: column;
	padding-bottom: 3vw;
	}
	
.textColumns {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin: auto !important;
	padding-bottom: 0;
	}
	
	
.col-4 {
	margin: 0 1.5vw;
	width: 21.25vw;
	overflow-wrap: break-word;
	}
	
.col-4 p,
.col-4 li,
.col-4 h4 {
	max-width: 80%;
}
	
.col-4:first-of-type {
	margin-left: 0;
	}
	
.col-4:last-of-type {
	margin-right: 0;
	}

.profile .videoText .col:first-of-type {
	padding-top: 0;
	margin-left: 24.25vw;
	width: 45.5vw;
	}
	
.profile .videoText .col:last-of-type {
	width: 21.25vw;
	}	

body.info .primaryNav .info , 
body.profile-2022 .primaryNav .info {
	display: none;
	}
	
main .profile h4 {
	color: #808080;
}
	




/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Images/video		*/
			

figure {
	position: relative;
	background: #cccccc;
	height: 0;
	overflow: hidden;
	width: 100%;
	}	

figure iframe,
figure object,
figure embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	}
	
.reel figure iframe,
.reel figure object,
.reel figure embed {	
	pointer-events: all;	
	}

	
	figure.poster iframe, 
	figure.poster object, 
	figure.poster embed, 
	figure.poster img {
		height: 95%;
		top: 2.5%;
		}
		
	figure.poster img {
		width: auto;
		left: 50%;
		transform: translateX(-50%);
		}
		
	.black {
		background-color: black;
		}
	
	.ratio-1-1 {
		padding-top: 100%;
		}
		

	.ratio-3-2 {
		padding-top: 66.6667%;
		}
		
		
	.ratio-16-9 {
		padding-top: 56.25%;
		background: white;
		}	
		
	.ratio-2-3-9 {
		padding-top: 41.89453125%;
		}
		
figure img {
	display: block;
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	}




/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Zoom		*/
	
.project figure, .project figure img, .project figure iframe {
/* 	cursor: zoom-in;  */
	}
	
.project .cycle-slideshow figure {
	pointer-events: none;
	cursor: default;
	}
	
.project figure img {
	transition: height 500ms ease, width 500ms ease;
}
	
figure.open {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 !important;
	height: 100vh;
	width: 100vw;
	cursor: zoom-out;
	z-index: 10;
	background: black;
	}
	
	figure.open iframe,
	figure.open img {
		height: 94%;
		top: 3%;
		}
		
	figure.open img {
		width: auto;
		left: 50%;
		transform: translateX(-50%);
		}
	
	.block.video figure.open img {
		opacity: 0;
		}
		
/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Image links		*/


.text figure {
	position: relative;
	display: inline-block;
	height: auto;
	overflow: hidden;
	width: auto;	
	border-radius: 0.4rem;
	height: 0.8rem;
	width: 0.8rem;
	background: black;
	background-color: rgb(0,0,0,1);
	position: absolute;
	transition: height 500ms ease, width 500ms ease, border-radius 500ms ease, transform 500ms ease, background-color 500ms ease;
	margin-left: -0.8em;
	top: 0.2em;
	cursor: default;
	pointer-events: none;
	}
	
	figure.imgLink img {
		opacity: 0 !important;
		}
	
	figure.active.animate {
		transition: height 500ms ease, width 500ms ease, border-radius 500ms ease, transform 500ms ease, background-color 500ms ease;
		}
	
	figure.active {
		width: 19.1vw;
		height: 10vw;
		z-index: 999;
		background-color: rgb(0,0,0,0);
		transition: height 500ms ease, width 500ms ease, border-radius 500ms ease, transform 0ms ease, background-color 500ms ease;
		}
		
		figure.imgLink.active img {
			opacity: 1 !important;
			}
		
a.imgLink {
	padding-right: 1rem; 
	}		
		
		
p {
	position: relative;
}
	
.text figure img {
	display: inline-block;
	position: static;
	transition: opacity 500ms ease, top 500ms ease, left 500ms ease;
	}	
	
	.text figure:hover img {
		}		


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Reel		*/


main > .reel {
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2.5vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	}
	
	
	main > .reel figure {
		max-width: 80vw;
		max-height: 80vh;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		}
	
body.reel {
	background: white;	
	}

	
body.reel input {
	border: none;
	background: rgba(255,255,255,0);
	color: #666;
	text-align: left;
	}
	
	::placeholder {
		color: #6666;
		}
	
/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Kitchen sink		*/	

body.kitchen-sink {
	overflow: hidden;
	}

body.kitchen-sink nav {
	}
	
	body.kitchen-sink nav h1,
	body.kitchen-sink nav a {
		color: #808080;
		}

.kitchen-sink .cycle-slideshow {
	height: auto;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 50%; 
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	z-index: -10000;
	}
	
.kitchen-sink .cycle-slideshow .slide {
	width: 100vw;
	height: 100vh;
	position: relative;
	}	
	
.kitchen-sink .cycle-slideshow iframe {
	position: absolute;
	min-width: 100%; 
	min-height: 100%; 
	width: auto; 
	height: auto;
	z-index: -1000; 
	overflow: hidden;
	top: 50%; 
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);	
	}
	
.kitchen-sink .cycle-slideshow figure {
	max-width: 100vw;
	max-height: 100vh;
	width: auto;
	height: auto;
	}
	
.slide-counter {

	}
	
	.cycle-pager span {
		opacity: 0;
		display: none;
		}
	
	.cycle-pager span.cycle-pager-active {
		opacity: 1;
		display: inline-block;
		}
		
.slide-nav {
	height: 100vh;
	width: 30vw;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	cursor: hand;
	padding: 2.5vw;
	opacity: 0;
	transition: 250ms ease-in-out;
	color: #808080;
	}
	
	.slide-nav:hover {
		opacity: 1;
		}
	
	.slide-nav#next {
		align-items: flex-end;
		left: 70vw;
		}
		
.more-info {
	position: absolute;
	bottom: 2.5vw;
	right: 2.5vw;
	color: #808080;
	}	
	


#cycle-caption {
	opacity: 0.2;	
	transition: opacity 250ms linear;
	}

#cycle-caption:hover {
	opacity: 1;
	}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Animations		*/



.barba-leave-active,
.barba-enter-active {
	transition: opacity 250ms ease;
	}

.barba-leave,
.barba-enter-to {
	opacity: 1;
	}

.barba-enter,
.barba-leave-to {
	opacity: 0;
	}

/* || Page load fade in */


.load { 
	opacity: 0;
    animation: fadeInAnimation ease 1s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    animation-delay: 500ms;
	} 



@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
		} 
				
    100% { 
        opacity: 1; 
		} 
	} 
	


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Responsive		*/	



@media (max-width: 1440px) {
	

	
	.projectGrid .block {
		width: 30.33vw;
		margin: 0 0.75vw 1.5vw 0.75vw;
		}

	}
	
	
@media (max-width: 1280px) {
	
	
	/* increased margins to 5vw */
	

		
	nav.primaryNav,
	nav.secondaryNav {
		padding: 5vw;
		}
		

		
	.projectGrid {
		margin-right: 4vw; /* 4vw + 1vw = 5vw */
		margin-left: 4vw;
		}	
	
	
	.projectGrid .block {
		width: 28.667vw;
		margin: 0 1vw 1.5vw 1vw;
		}
		

		
	main .profile {
		padding-bottom: 5vw;
	}
	
	.project, .credits-block, .next-project {
		padding-left: 5vw;
		padding-right: 5vw;
		}
		
	.block {
		margin: 0 0 5vw 0;
		}
		
	.project .col,
	.credits-block .col,
	.slideCaption {
		width: 42.5vw;
		}
		
	.next-project {
		padding: 5vw;
		}
		
	.col.title {
		width: 18.8vw;
		margin-right: 5vw;
		}
		
	.col-4 {
		width: 18.8vw;
		margin: 0 2.5vw;
	}		
		
	.credits-block .col {
		column-count: 1;
		}
		
		
	.profile .videoText .col:first-of-type {
		margin-left: 23.667vw;
		width: 42.5vw;
		}
		
	.profile .videoText .col:last-of-type {
		width: 18.8vw;
		}	
		
		
	.active-tag-link {
		margin-left: 10rem;
	}	
	
	
	

}
	
@media (max-width: 900px) {
	
	
	html { 
		font-size: 12px; 
		} 

		
		
	.projectGridFooter {
		padding-left: 5vw;
		padding-right: 5vw;
		margin-bottom: 5vw;	
	}	

		
	.projectGrid {

		}	
		
	.opening-old {
		flex-direction: column;
		align-items: flex-end;
		}
		
	.col.title {
		margin: 0;
		}
		
		.project .opening-old .col {
			width: 42.5vw;
			}
	
	
	.projectGrid .block {
		width: 43.75vw;
		}
		
		
	.project .col {
		width: 90vw;
		}	
		
		
	.credits-block {
		padding-bottom: 5vw;
	}
		
/*
	.opening-old {
		margin-top: 4rem;
		flex-direction: column;
		}	
*/
		
	.videoText {
		flex-direction: column;
		}
		
	.videoText .col:first-child {
		margin-bottom: 5vw;
		}
	
	.videoText .col:first-child figure {
		padding-top: 56.25%!important;
		
		}
		
	.videoText .col:first-child figure iframe,
	.videoText .col:first-child figure img {
		height: 90%;
		top: 5%;
		width: auto;
		left: 50%;
		transform: translateX(-50%);
		}
		

	.credits-block h2 {
		margin-bottom: 1rem;
	}
		
	.credits-block .col {
		width: 42.5vw;
		}

	
	.next-project .col {
		width: 42.5vw;
		}
		
		
	.profile .videoText .col:first-of-type {
		width: 42.5vw;
		margin-left: 47.5vw;
		}
		
	.profile .videoText .col:last-of-type {
		width: 100%;
		}	
		
		.textColumns {
		  	flex-direction: column;
		  	flex-wrap: wrap;
			height: 90rem;
			justify-content: flex-start;
			}
		
	
	
		.col-4 {
			width: 42.5vw;
			margin: 0 2.5vw;
			margin-bottom: 2rem;
			
			}

			
		.col-4:nth-child(1),
		.col-4:nth-child(2) {
			margin-left: 0;
			}
			
		.col-4:nth-child(3),
		.col-4:nth-child(4) {
			margin-right: 0;
			}	
			
	.ratio-16-9.mobileCrop {
		padding-top: 100%;
		}	
		
		figure.ratio-16-9.mobileCrop iframe,
		figure.ratio-16-9.mobileCrop img {
			height: 100%;
			width: auto; 
			aspect-ratio: 16 / 9;
			top: 0;
			bottom:0;
			left: 50%;
			transform: translateX(-50%);
		}			
		

	}		
	
	
	
	
@media (max-width: 600px) {
	
		
		html {
			font-size: 10px;
			}
	
	
	
/*
		.project .col.title {
			margin-bottom: 0rem;
			}
			
		.opening-old .col.text {
			margin-left: 1.25rem;
			}
*/
	


			
		
		
	}
	
@media (hover: none) {
	
		nav {
			height: auto;
			}		
			
		nav ul, nav ul:hover, nav ul:active {
			width: 17rem;
			height: 3.2rem;
			line-height: normal;
			}	
			
			
		nav ul:hover h1,
		nav ul:active h1 {
			opacity: 1;
			}			
			
		nav ul li {
			opacity: 1;
			top: auto;
			}		
			
			
		.headroom--unpinned {
		    transform: translateY(-18vw);
			}	
	
		nav ul {
			background: none;
			}
	
		nav ul:hover,
		nav ul:active,	
		nav.headroom--pinned.headroom--not-top ul:hover,
		nav.headroom--pinned.headroom--not-top ul:active,
		nav.headroom--unpinned.headroom--bottom ul:hover,
		nav.headroom--unpinned.headroom--bottom ul:active {
			background: none;
			}	
			
		nav.headroom--pinned.headroom--not-top ul,
		nav.headroom--unpinned.headroom--bottom ul {
			background: #f2f2f2;
			}	
			
		body[class*="nav"] p,
		body[class*="nav"] span,
		body[class*="nav"] .slide-counter,
		body[class*="nav"] h2,
		body[class*="nav"] figure,
		body[class*="nav"] iframe,
		body[class*="nav"] slide,
		body[class*="nav"] .cycle-slideshow,
		body[class*="nav"] .col,
		body[class*="nav"] .next-project,
		body[class*="nav"] .error {
			opacity: 1;
			}	
			
		body.navProjects {
			background: #ffffff !important;
			}
		
		body.navReel {
			background: #ffffff !important;
			}
			
		body.navKitchenSink {
			background: #ffffff !important;
			}	
			
		body.navProfile {
			background: #ffffff !important;
			}	
			
		nav li a { 
			color: #808080 !important;
			opacity: 1;
			}
			
		body[class*="nav"] nav li a {
			color: #808080 !important;
			opacity: 1;
			}
			
		nav li a:hover,
		nav li a:active {
			color: #808080 !important;
			opacity: 1;		
			}	
			
    
	}	
	
/*
@media (prefers-color-scheme: dark) {
	body {
		background: #302515;
		color: white;
	}
	
	figure {
		background: black;
	}
	
	p, ul, a, a:visited, .projectGrid .block .block-info {
		color: white;
	}	
	
	.text a, .text a:visited {
		text-decoration-color: rgba(255,255,255,.2);
	}
	
	.slideshowControl a {
		color: black;
	}
	
	.next-project.gray a {
		color: black;
	}
	
	.pill {
		background: black;
	}
	
	

}
*/

[data-barba="container"] {
  will-change: transform;
  position: relative;
  min-height: 100vh;
}


/* |||||||||||||||||||||||||||||||||||||||||||||||||||| 	Feed		*/

	
	.primaryNav {
	  transition: color 0.7s cubic-bezier(0.87, 0, 0.13, 1);
	}


	[data-barba-namespace="home"] {
		background-color: white;
		}


	[data-barba-namespace="feed"], .feed-panel {
		background: black;
		background: #1A140C;
		color: white;		
	}
	
	body.feed nav.secondaryNav {
		display: none;
	}
	
	body.feed figure,
	.feed-panel figure {
		background: black;
	}	
	
	
	[data-barba-namespace="feed"] p, 
	[data-barba-namespace="feed"] ul, 
	[data-barba-namespace="feed"] a,
	[data-barba-namespace="feed"] a:visited,
	[data-barba-namespace="feed"] .projectGrid .block .block-info {
		color: white;
	}	
	
	
	.feed-panel p, 
	.feed-panel ul, 
	.feed-panel a,
	.feed-panel a:visited,
	.feed-panel .projectGrid .block .block-info {
		color: white;
	}	
/*
	
	#feed {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		margin: 0 auto;		
		
		@media (max-width: 768px) {	

			width: 90%;
		
		}
	}
*/

#feed {
	padding: 4rem 3vw 3vw 3vw;
}
	
#feed article {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 80px 0;
	

	
}

#feed article {
	text-align: center;
}

#feed article time {
	padding: 1em;
	display: inline-block;
	color: #808080;
}
	
	
/* Base container styles with a smooth transition */
#feed {
  transition: all 0.3s ease-in-out;
}

/* Single-column layout: each post is centered with a max width */
.single-column .post {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 600px;
}

/* Grid layout: use CSS Grid for posts */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-layout .post {
  width: 100%;
}

/* Ensure each post animates transforms smoothly */
.post {
  transition: transform 0.5s ease;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
@media (max-width: 600px) {
  .grid-layout {
    grid-template-columns: repeat(1, 1fr);
  }
}
*/
	
	
button.toggle {
	font-family: inherit;
	position: sticky;
	top: 86vh;
	left: 50%;
	transform: translateX(-50%);
	height: 2.5em;
	width: 150px;
	z-index: 9999;
	display: flex;
	border: 0px solid transparent;
	flex-direction: row;
	border-radius: 1.75em;
	padding: 0;
	margin-top: -2.5em;
	background: rgba(236,236,236,.8);
/* 	mix-blend-mode: plus-lighter; */
}

button.toggle:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background: rgba(255,255,255,1);
	border-radius: 1.75em;
	z-index: -1;
	transition: transform 0.5s ease;
/*
	border: 2px solid rgba(120,120,120,.3);
	box-sizing: border-box;
*/
}

button.toggle.active:after {
	transform: translateX(100%);
}

button.toggle span {
	width: 50%;
	height: 100%;
	line-height: 2.5em;
	z-index: 1;
	color: black;
	transition: opacity 1s ease;
}

button.toggle.active span:first-child {
	opacity: 50%;
}

button.toggle span:last-child {
	opacity: 50%;
}

button.toggle.active span:last-child {
	opacity: 100%;
}


.article-inner {
	width: 100%;
}

	

.pageSlider {
  display: flex;
  width: 200vw;
  height: 100vh;
  transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
}

.pageSlider.show-feed {
  transform: translateX(-100vw);
}

.pagePanel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow-y: auto;
  position: relative;
  padding-top: 3vw;
}

body.home {
	height: 100vh;
	overflow-y: hidden;
}

.pageSliderWrapper {
  overflow-x: scroll;
/*   scroll-snap-type: x mandatory; */
scroll-snap-type: x mandatory;
  width: 100vw;
  height: 100vh;
}

.pageSlider {
  display: flex;
  width: 200vw;
  height: 100%;
}

.panel {
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  overflow-y: auto;
}

.dots-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* allows clicks to pass through unless you want the wrapper to catch events */
}


.slide-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 1rem; /* makes entire area clickable */
  cursor: pointer;
  transform: translateY(-0.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

	


.ns-home .slide-dots {
  opacity: 1;
  pointer-events: auto;
}

.primaryNav a.info {
  opacity: 0;
  pointer-events: none;	
}

.ns-home .primaryNav a.info {
  opacity: 1;
  pointer-events: auto;	
}


.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  transition: background-color 1s cubic-bezier(0.87, 0, 0.13, 1);
  pointer-events: none; /* ensures container gets the click */
}

.dot.active {
  background-color: #fff;
}


@media (max-width: 900px) {
	
		.dot {
			width: 6px;
			height: 6px;
		}
		
		.slide-dots {
			gap: 6px;
			}
	}


#feed {
	margin: 0;
	padding: 0;
}

.projectGrid {
	margin-top: 0;
}

.projectGrid, #feed {
	padding-top: 6vw;
}

.project {
	margin-top: 3vw;
}

.active-tag-link {
	transform: translateX(3vw) translateY(3vw);
}


@media (max-width: 1280px) {
	
		.project {
			margin-top: 5vw;
		}
		
		.active-tag-link {
			transform: translateX(3vw) translateY(5vw);
		}

	
		.projectGrid, #feed {
			padding-top: 12vw;
		}
	}