@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'Instrument Serif';
	src: url('/fonts/site/instrument-serif-regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Barlow Regular';
	src: url('/fonts/site/barlow-regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow Bold';
	src: url('/fonts/site/barlow-bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Imbue';
	src: url('/fonts/site/imbue-variable.ttf') format('truetype');
}

html {
	background-color:#000000;
	--section-heading-space: 2rem;
	--content-space: 2rem;
	--gallery-gap: 10px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	max-width: 100%;
}

body {
	font-family: 'Barlow Regular', sans-serif;
	color:#fff;
	margin: 20px auto;
	max-width: 100%;
	width: calc(100% - 40px);
	/* font-size: 16px; */
	container-type: inline-size;
}

li {
	list-style:none;
	position:relative;
	padding-left: 0.5rem;
	line-height:1.5em;
}

li::before {
	content:"△";
	position:absolute;
	left:-1.25rem;
	transform:rotate(90deg);
}

a,
a:visited,
a:active {
	text-decoration:none;
	color:#e2827d;
}

a:hover {
	color:#b0fdda;
}

h1 {
	line-height:1em;
	font-size: clamp(1rem, 11.85cqw, 60px);
	font-family: 'Instrument Serif', serif;
	margin-block:var(--content-space);
}

h2 {
	line-height:1.5em;
	font-size:clamp(16px, 4vw, 18px);
	font-weight:normal;
}

h3 {
	line-height:1em;
	margin-block:var(--section-heading-space);
	font-size:14px;
	font-family: 'Barlow Bold', sans-serif;
}

h4 {
	line-height:1em;
	font-size:12px;
}

nav {
	--nav-gap:clamp(20px, 20px, 20px);
	display:flex;
	flex-wrap:nowrap;
	column-gap:var(--nav-gap);
	row-gap:15px;
	line-height:1em;
	font-size:18px;
	margin-block:var(--content-space);
}

.project-sort {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:0.5rem;
	margin-block:var(--section-heading-space) 0;
	font-family:'Barlow Bold', sans-serif;
	font-size:18px;
}

.project-sort select {
	border:1px solid #f7706b;
	border-radius:0;
	padding:0.2rem 1.75rem 0.2rem 0.4rem;
	background-color:#000;
	color:#f7706b;
	font:inherit;
}

.project-sort select:hover {
	border-color:#b0fdda;
	color:#b0fdda;
}

.project-sort select:focus-visible {
	outline:2px solid #b0fdda;
	outline-offset:2px;
}

body.homepage {
	margin:0;
	width:100%;
}

.homepage-layout {
	display:grid;
	grid-template-columns:minmax(0, 3fr) minmax(0, 7fr);
	width:100%;
}

.homepage-intro {
	container-type:inline-size;
	min-width:0;
	padding:20px;
}

.navigation-disclosure {
	display:none;
}

.navigation-content {
	display:contents;
}

.homepage-intro > .navigation-content > .nav--five,
.projects-navigation {
	--nav-gap:clamp(10px, 2cqw, 20px);
	font-size:clamp(14px, 3.5cqw, 18px);
	line-height:1em;
}

.homepage-intro > .navigation-content > .nav--five {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	row-gap:var(--nav-gap);
	margin-inline-start:20px;
}

.homepage-nav-group,
.project-series ul {
	display:flex;
	flex-direction:column;
	row-gap:var(--nav-gap);
}

.homepage-nav-group {
	width:100%;
	min-width:0;
}

.homepage-intro > .navigation-content > .nav--five a {
	min-width:min-content;
	overflow-wrap:normal;
	word-break:normal;
	hyphens:none;
	white-space:nowrap;
}

.homepage-name {
	font-size:clamp(18px, 12cqw, 36pt);
	font-weight:bold;
	margin-block:0 var(--content-space);
	white-space:nowrap;
}

.homepage-name > span {
	display:inline;
}

.homepage-name a {
	color:#fff;
}

.homepage-name a:visited,
.homepage-name a:active,
.homepage-name a:hover {
	color:#fff;
}

.project-grid {
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:var(--gallery-gap);
	margin-block:var(--content-space);
}

.homepage .project-grid {
	align-self:start;
	min-width:0;
	margin:0;
	padding:0;
}

.project-cell {
	position:relative;
	overflow:hidden;
	aspect-ratio:1;
	background-color:#1d1d1d;
}

.project-cell picture,
.project-cell img {
	display:block;
	width:100%;
	height:100%;
}

.project-cell img {
	object-fit:cover;
}

.project-title {
	position:absolute;
	right:auto;
	bottom:4px;
	left:3px;
	width:max-content;
	padding:1px 2px;
	max-height:calc(100% - 10px);
	max-width:calc(100% - 6px);
	overflow:hidden;
	font-family:'Barlow Regular', sans-serif;
	font-size:14px;
	font-weight:normal;
	line-height:1.2;
	overflow-wrap:anywhere;
	background-color:var(--project-title-background, #1d1d1d);
	color:var(--project-title-color, #fff);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.project-cell:hover .project-title,
.project-cell:focus-within .project-title {
	opacity:1;
	visibility:visible;
}

.project-card-link {
	display:block;
	color:inherit;
}

.projects-navigation {
	display:block;
	margin-block:var(--content-space);
	margin-inline-start:20px;
}

.project-links-disclosure > summary {
	cursor:pointer;
	list-style:none;
	color:#e2827d;
}

.project-links-disclosure > summary::-webkit-details-marker {
	display:none;
}

.project-links-disclosure {
	interpolate-size:allow-keywords;
}

.project-links-disclosure::details-content {
	block-size:0;
	overflow:clip;
	opacity:0;
	transition:block-size 200ms ease-out, opacity 160ms ease-out, content-visibility 200ms allow-discrete;
}

.project-links-disclosure[open]::details-content {
	block-size:auto;
	opacity:1;
}

@media (prefers-reduced-motion:reduce) {
	.project-links-disclosure::details-content {
		transition:none;
	}
}

.project-links-disclosure > .projects-navigation {
	margin-block:var(--nav-gap) 0;
}

.project-series + .project-series {
	margin-block-start:var(--content-space);
}

.project-series h3 {
    margin-block:0;
    color:#733b38;
}

.project-series ul {
	margin:calc(var(--nav-gap) / 2) 0 0;
	padding:0;
	list-style:none;
}

.project-links-disclosure .project-series ul {
	row-gap:0;
}

.projects-navigation li {
	padding-left:0;
	line-height:inherit;
}

.projects-navigation li::before {
	content:"-";
	position:static;
	margin-inline-end:0.5ch;
	transform:none;
}

.project-links-disclosure > .projects-navigation li::before {
	content:none;
}

.homepage-intro > .navigation-content > .nav--five .project-links-disclosure .projects-navigation a {
	display:block;
	white-space:normal;
	text-wrap:balance;
	line-height:calc(1em + var(--nav-gap));
	padding-inline-start:0.5em;
	text-indent:-0.5em;
}

.homepage-intro > .navigation-content > .nav--five a,
.projects-navigation a {
	font-size:inherit;
	line-height:inherit;
}

.projects-navigation a[aria-current="page"] {
	color:#b0fdda;
	font-family:'Barlow Bold', sans-serif;
}

.project-detail-page {
	margin:0;
	width:100%;
}

.project-detail-layout {
	display:grid;
	grid-template-columns:minmax(0, 3fr) minmax(0, 7fr);
	grid-template-areas:"sidebar main";
	align-items:start;
}

.project-detail-layout > .homepage-intro {
	grid-area:sidebar;
}

.project-copy > [data-project-overview-title] {
	margin-block-start:0;
	margin-block-end:var(--content-space);
	padding-block-end:var(--content-space);
	border-block-end:1px solid #fff;
}

.project-main {
	grid-area:main;
	display:flex;
	flex-direction:column;
	gap:var(--content-space);
	min-width:0;
}

.project-copy {
	padding:0 0 20px;
}

.project-gallery {
	min-width:0;
	width:100%;
}

.project-media-track {
	display:flex;
	width:100%;
	aspect-ratio:16 / 9;
	margin:0;
	padding:0;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	list-style:none;
	background-color:#000;
}

.project-media-track::-webkit-scrollbar {
	display:none;
}

.project-media-item {
	position:relative;
	isolation:isolate;
	flex:0 0 100%;
	width:100%;
	height:100%;
	padding:0;
	overflow:hidden;
	background-color:var(--project-media-background, #000);
	background-image:var(--project-media-edge-gradient, none);
	line-height:0;
	scroll-snap-align:start;
}

.project-media-item::before {
	position:absolute;
	inset:-22%;
	z-index:0;
	content:"";
	pointer-events:none;
	background:var(--project-media-watercolor-light, none);
	background-repeat:no-repeat;
	background-size:160% 160%, 140% 150%, 150% 135%, 135% 145%;
	background-position:0% 0%, 100% 0%, 55% 100%, 0% 70%;
	opacity:.65;
}

.project-media-item > img,
.project-media-item > picture,
.project-media-item > picture > img {
	display:block;
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
}

.project-media-item--near-widescreen > img,
.project-media-item--near-widescreen > picture > img {
	object-fit:cover;
}

.project-media-item > img,
.project-media-item > picture > img {
	cursor:zoom-in;
}

.project-lightbox {
	position:fixed;
	inset:0;
	z-index:10;
	display:grid;
	place-items:center;
	padding:50px;
	background-color:var(--project-media-background, #202020);
	background-image:var(--project-media-edge-gradient, none);
	touch-action:none;
	isolation:isolate;
}

.project-lightbox::before {
	position:absolute;
	inset:-22%;
	z-index:0;
	content:"";
	pointer-events:none;
	background:var(--project-media-watercolor-light, none);
	background-repeat:no-repeat;
	background-size:160% 160%, 140% 150%, 150% 135%, 135% 145%;
	background-position:0% 0%, 100% 0%, 55% 100%, 0% 70%;
	opacity:.65;
}

.project-lightbox > img {
	display:block;
	position:relative;
	z-index:1;
	max-width:calc(100vw - 100px);
	max-height:calc(100vh - 100px);
	object-fit:contain;
}

.project-lightbox-control {
	position:absolute;
	z-index:1;
	top:50%;
	transform:translateY(-50%);
	width:44px;
	height:64px;
	border:0;
	background:rgb(0 0 0 / 0.25);
	color:#fff;
	font-size:32px;
	line-height:1;
	cursor:pointer;
}

.project-lightbox-control--previous {
	left:0;
}

.project-lightbox-control--next {
	right:0;
}

.project-lightbox-control:focus-visible {
	outline:2px solid #fff;
	outline-offset:-4px;
}

.project-media-item > media-player,
.project-media-item > video {
	display:block;
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	background-color:#000;
	object-fit:contain;
}

.project-thumbnails {
	display:flex;
	flex-direction:column;
	gap:var(--gallery-gap);
	margin-block-start:var(--gallery-gap);
}

.project-thumbnail-row {
	display:flex;
	gap:var(--gallery-gap);
}

.project-thumbnail {
	position:relative;
	width:var(--thumbnail-size);
	height:var(--thumbnail-size);
	margin:0;
	padding:0;
	border:0;
	background:#1d1d1d;
	cursor:pointer;
}

.project-thumbnail > img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	filter:grayscale(1) brightness(.55) contrast(.9);
	transition:filter 160ms ease;
}

.project-thumbnail[aria-current="true"] > img,
.project-thumbnail:hover > img {
	filter:saturate(1.35) brightness(1.08);
}

.project-thumbnail--video::before,
.project-thumbnail--video::after {
	position:absolute;
	top:50%;
	left:50%;
	content:"";
	pointer-events:none;
}

.project-thumbnail--video::before {
	width:36%;
	aspect-ratio:1;
	transform:translate(-50%, -50%);
	border-radius:50%;
	background:rgb(0 0 0 / 0.7);
}

.project-thumbnail--video::after {
	content:"▶";
	color:#fff;
	font-size:18px;
	line-height:1;
	transform:translate(-42%, -52%);
}

.project-thumbnail:focus-visible {
	outline:2px solid #FF00CE;
	outline-offset:2px;
}

.project-overview-title {
	font-family:'Barlow Bold', sans-serif;
	font-weight:normal;
	color:#fff;
}

.project-metadata {
	display:grid;
	grid-template-columns:max-content minmax(0, 1fr);
	gap:0.5rem 1rem;
	margin:var(--content-space) 0 var(--content-space);
}

.project-metadata dt {
	font-family:'Barlow Bold', sans-serif;
	color:#fff;
}

.project-metadata dd {
	margin:0;
	color:#fff;
}

.project-metadata #description {
	font-size:inherit;
}

.project-metadata #description > p {
	font-size:inherit;
	line-height:inherit;
}

.project-metadata #description > p:last-child {
	margin-block-end:0;
}

.project-copy .project-metadata {
	margin-block-start:0;
}

.editorial-page .homepage-name {
	font-family:'Instrument Serif', serif;
	line-height:1em;
}

.editorial-main {
	min-width:0;
	padding:20px;
}

.editorial-content {
	width:min(100%, 760px);
}

.editorial-content > h1 {
	margin-block-start:0;
}

.editorial-content h2 {
	font-family:'Barlow Bold', sans-serif;
	margin-block:var(--section-heading-space) 0.75rem;
}

.editorial-content p {
	line-height:1.5;
	margin-block:0 1rem;
}

.cv-header {
	margin-block-end:var(--content-space);
}

.cv-header p {
	margin-block-end:0.25rem;
}

.cv-entry {
	margin-block-end:0.35rem;
}

.cv-credit {
	color:#cfcfcf;
	margin-inline-start:1rem;
}

@media (min-width:800px) {
	.project-copy > [data-project-overview-title] {
		margin-block-end:var(--content-space);
	}
}

@media (max-width:799px) {
	.homepage-layout {
		grid-template-columns:1fr;
	}

	.homepage-intro {
		display:grid;
		grid-template-columns:auto minmax(0, 1fr);
		column-gap:var(--nav-gap);
		align-items:center;
	}

	.navigation-disclosure {
		display:block;
		grid-column:2;
		grid-row:1;
		justify-self:end;
	}

	.navigation-disclosure summary {
		display:block;
		cursor:pointer;
		font-size:1.5rem;
		line-height:1;
		list-style:none;
	}

	.navigation-disclosure summary::-webkit-details-marker {
		display:none;
	}

	.homepage-name {
		grid-column:1;
		grid-row:1;
		margin:0;
		font-size:clamp(18px, 8.5cqw, 36pt);
	}

	.navigation-content {
		display:block;
		grid-column:1 / -1;
		grid-row:2;
	}

	.navigation-disclosure:not([open]) ~ .navigation-content {
		display:none;
	}

	.homepage-intro > h2,
	.homepage-intro > .project-sort,
	.homepage-intro > .project-metadata {
		grid-column:1 / -1;
	}

	.editorial-main {
		padding:0 20px 20px;
	}

	.project-grid {
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}
}

@media (max-width:799px) {
	.project-detail-layout {
		grid-template-columns:1fr;
		grid-template-areas:
			"header"
			"gallery"
			"title"
			"metadata";
		row-gap:0;
	}

	.project-main {
		display:contents;
	}

	.project-gallery {
		grid-area:gallery;
	}

	.project-detail-layout > .homepage-intro {
		grid-area:header;
	}

	.project-copy {
		display:contents;
	}

	.project-copy > [data-project-overview-title] {
		grid-area:title;
		margin-block-start:var(--content-space);
	}

	.project-copy > .project-metadata {
		grid-area:metadata;
		margin-block-start:0;
	}

	.project-copy > [data-project-overview-title],
	.project-copy > .project-metadata {
		margin-inline:20px;
	}

}

@media (max-width:599px) {
	.project-grid {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

@media (max-width:560px) {
	nav {
		flex-wrap:wrap;
	}

	nav > a {
		flex:1 1 calc((100% - (2 * var(--nav-gap))) / 3);
		min-width:min-content;
		overflow-wrap:normal;
		word-break:normal;
		hyphens:none;
	}
}

@media (max-width:360px) {
	nav.nav--five > a:nth-child(-n+2) {
		flex-basis:calc((100% - var(--nav-gap)) / 2);
	}
}

@media (max-width:399px) {
	.project-grid {
		grid-template-columns:1fr;
		/* margin-inline:-20px; */
		max-width:none;
	}

	.project-cell {
		aspect-ratio:16 / 6;
	}

	.project-title {
		opacity:1;
		visibility:visible;
	}

	.project-cover--zzz,
	.project-cover--vvvoid,
	.project-cover--aamen {
		object-position:center top;
	}

	.project-cover--kissing-machine {
		object-position:center 25%;
	}

	.project-cover--parachute {
		object-position:center top;
	}

	.project-cover--atmospheric {
		object-position:center top;
	}

	.project-cover--5-i-d-e-w-a-y-s {
		object-position:left center;
	}
}

p {
	font-size:14px;
	line-height:1.5em;
	margin-block:0 var(--content-space);
}

div {
	font-size:14px;
}

.content_column iframe {
	display:block;
	margin-block:0 var(--content-space);
}