@font-face {
	font-family: 'Haptik-Regular';
	src:
		url('../fonts/GT-Haptik-Regular.woff2') format('woff2'),
		url('../fonts/GT-Haptik-Regular.woff') format('woff');
	font-weight: normal;
	font-display: block;
}

@font-face {
	font-family: 'Haptik-Regular-Rotalic';
	src:
		url('../fonts/GT-Haptik-Regular-Rotalic.woff2') format('woff2'),
		url('../fonts/GT-Haptik-Regular-Rotalic.woff') format('woff');
	font-weight: normal;
	font-display: block;
}

@font-face {
	font-family: 'Haptik-Oblique';
	src:
		url('../fonts/GT-Haptik-Regular-Oblique.woff2') format('woff2'),
		url('../fonts/GT-Haptik-Regular-Oblique.woff') format('woff');
	font-weight: normal;
	font-display: block;
}

/* ----------------------------------------- */
/* BASE */

:root {
	--bgBlack: rgba(0,0,0,1);
	--bgWhite: rgba(255,255,255,1);
	--bgTrans: transparent;
	--bgColor: rgba(255,255,255,1);
	--textColor: rgba(0,0,0,1);
	--textColorBlend: rgba(255,255,255,1);
	--colorACCGray: rgba(132, 131, 131, 1);
	--colorBlack: rgba(0,0,0,1);
	--colorWhite: rgba(255,255,255,1);
	--colorDisabled: rgba(196, 196, 196, 1);
	--fillDisabled: rgba(196, 196, 196, 1);
	--fillBlack: rgba(0,0,0,1);
	--fillWhite: rgba(255,255,255,1);
	--strokeBlack: rgba(0,0,0,1);
	--strokeWhite: rgba(255,255,255,1);
	--fillTrans: transparent;
	--body-ex-small: 1rem;
	--body-small: 1.4rem;
	--body-reg: 2rem;
	--body-menu-controls: 1.4rem;
	--body-menu: 3.8rem;
	--body-line-height: 1.2;
	--body-large: 2.8rem;
	--body-large-exh: 3.2rem;
	--header-small: 2.3rem;
	--header-reg: 2.6rem;
	--header-line-height: 1.1;
	--header-large: 3.2rem;
	--header-xlarge: 3.2rem;
	--minFontSize: 1.4rem;
	--maxFontSize: 10rem;
	--scaler: 10vw;
	--fig-caption: 1.5rem;
	--column: 4;
	--pad-top: 2.7rem;
	--pad-left: 5.375vw;
	--bp-w-extra-small: 380px;
	--bp-w-small: 767px;
	--bp-w-medium: 1024px;
	--bp-w-large: 1204px;
	--bp-h-extra-extra-small: 380px;
	--bp-h-extra-small: 480px;
	--bp-h-small: 670px;
	--viewport-h: 100svh;
	--col-width: 25%;
	--border-1px-solid: 1px solid rgba(0,0,0,.5);
	--border-1px-trans: 1px solid transparent;
	--vp-height: 100svh;
	--max-h: 100svh;
	--aspect-ratio: 16/9;
	--img-col-width: 16vw;

	--gap-xs: 2rem; /* for grids */
	--gap-sm: 8rem; /* for inline gap between columns */
	--gap-md: 12rem; /* for bottom margin of nav header */
	--gap-lg: 24rem; /* for block gap between modules */

	--page-space-inline: 2rem;
	--caption-pad-top: 2rem;
	--caption-pad-bottom: 4rem;
}

.dark-mode {
	--bgColor: rgba(0,0,0,1);
	--textColor: rgba(255,255,255,1);
}

@media only screen and (max-width: 1024px) {
	:root {
		--type-preset--marquee--font-size: 2.4rem;
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--body-small: 1.2rem;
		--body-reg: 1.6rem;
		--body-line-height: 1.2;
		--body-large: 2.8rem;
		--body-large-gar: 3.2rem;
		--header-small: 2rem;
		--header-reg: 1.6rem;
		--header-line-height: 1.1;
		--header-large: 2.0rem;
		--header-xlarge: 2.4rem;
		--minFontSize: 1.4rem;
		--maxFontSize: 10rem;
		--scaler: 10vw;
		--fig-caption: 1.5rem;
		--column: 4;
		--pad-message: 0;
		--pad-left: 1rem;
		--img-col-width: 20vw;
		--vp-height: 100dvh;
	}
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
}

html {
	font-size: 10px;
	line-height: 10px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	height: 100%;
}

body {
	font-family: 'Haptik-Regular', sans-serif;
	font-size: var(--body-small);
	/* mix-blend-mode: difference; */
	font-weight: normal;
	line-height: var(--body-line-height);
	height: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background-color: var(--bgColor);
	color: var(--textColor);
	padding: 0;
	margin: 0;
}
body.nav-active {
	overflow: hidden;
}
/* ----------------------------------------- */
/* ACCESSIBILITY */

.screen-reader-shortcut {
	position: absolute !important;
	top: 0.5rem;
	left: 0.5rem;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	padding: 1.5rem 2rem 1rem;
	border: 0;
	overflow: hidden;
	-webkit-transition: all ease 0.2s;
	transition: all ease 0.2s;
}

.screen-reader-shortcut:focus {
	font-size: 2rem;
	line-height: 1;
	font-weight: normal;
	clip: auto !important;
	height: 5rem;
	width: auto;
	display: block;
	color: #000;
	background: var(--bgColor);
	color: var(--textColor);
	z-index: 100000;
	text-decoration: none;
	box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}

.off_screen {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

/* ----------------------------------------- */
/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
	color: var(--textColor);
	font-weight: normal;
	font-size: var(--body-small);
	line-height: var(--body-line-height);
}

p, a, ul li, figcaption, .caption {
	color: var(--textColor);
	font-size: var(--body-small);
	line-height: var(--body-line-height);
}

p a:hover,
dd a:hover,
ul li a:hover,
footer a:hover,
.subnav a:hover,
.newsletter > summary:hover,
.related-content-item a:hover {
	opacity: .5;
}

a, a:visited {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: .1em;
}

p {
	margin-bottom: 2rem;
}

p:last-child {
	margin-bottom: 0;
}

figcaption, .caption {
	padding: var(--caption-pad-top) var(--page-space-inline) var(--caption-pad-bottom);
	margin: 0;
	font-style: normal;
}

.title-field--italic, .publication-field {
	font-family: 'Haptik-Regular-Rotalic';
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button {
	position: relative;
	background: transparent;
	border: none;
	font-size: var(--body-small);
	line-height: var(--body-line-height);
	color: var(--textColor);
}

button:hover,
.archive-active button.archive-toggle {
	text-decoration: underline;
}

.nav-toggle.active::before {
	content: '\2193';
	position: absolute;
	top: 0.125rem;
	left: -1rem;
	font-size: var(--body-ex-small);
}

.cursor-text {
	position: fixed;
	z-index: 1000;
	height: 2.5rem;
	font-family: 'Aeonik Reg', sans-serif;
	font-size: var(--body-small);
	line-height: var(--body-line-height);
	mix-blend-mode: difference;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 1rem;
	border-radius: 2rem;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.cursor-text::after {
	border-radius: 2rem;
	content: '';
	color: white;
	height: 100%;
	left: 0;
	opacity: .2;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1	;
}

/* .vjs-playing .cursor-text::after {
	content: 'Pause';
} */

/* ----------------------------------------- */
/* LISTS */

ul, ol, dl {
	list-style: none;
	padding: 0;
	margin: 0;
}

dl {
	/* use for list of exhibitions with dates */
}

dt ~ dt {
	margin-top: 1em;
}

.date-list dt {
	text-transform: uppercase;
}

/* ----------------------------------------- */
/* FIGURE */

img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
}

figure {
	position: relative;
	top: 0;
}

figure a {
	text-decoration: none;
}

/* figure iframe {
	width: 100%;
	height: auto;
} */

.media-module figure:has(iframe) {
	aspect-ratio: 381 / 390;
	overflow: hidden;
}

.media-module iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	position: relative;
}

.media-module.videos-50-50 figure.col {
	position: relative;
	aspect-ratio: 381 / 390;
	overflow: hidden;
}

.media-module.videos-50-50 figure.col iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 110%;
	height: 110%;
	transform: translate(-50%, -50%);
	border: 0;
	display: block;
}

.media-module.videos-50-50 figure.col {
	aspect-ratio: auto;
	overflow: visible;
}

.media-module.videos-50-50 .video-frame {
	position: relative;
	aspect-ratio: var(--aspect-ratio, 381 / 390);
	overflow: hidden;
}

/* Keep the caption outside the clipped, fixed-ratio video area. */
.media-module.video-100 > .video-frame {
	position: relative;
	aspect-ratio: var(--aspect-ratio, 16 / 9);
}

.media-module.video-100 > .video-frame iframe {
	position: absolute;
	inset: 0;
}

.video-frame {
	overflow: hidden;
}
[data-vimeo-poster] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

[data-vimeo-poster] > img.vimeo-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    filter: blur(2rem);
    transform: scale(1.15);
    pointer-events: none;
}

.vimeo-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    mix-blend-mode: difference;
    pointer-events: none;
}

[data-vimeo-poster].is-playing > img.vimeo-poster,
[data-vimeo-poster].is-playing > .vimeo-loading,
[data-vimeo-poster] > img.vimeo-poster[hidden] {
    display: none;
}

.media-module.videos-50-50 .video-frame iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 110%;
	height: 110%;
	transform: translate(-50%, -50%);
	border: 0;
	display: block;
}

/* ----------------------------------------- */
/* FULLSCREEN SPLASH */

.splash-content {
	z-index: 2;
	position: fixed;
	inset: 0;
	display: none;
	pointer-events: none;
}

.splash-content img {
	position: absolute;
	inset: 0;
	width: 100lvw;
	height: 100lvh;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
}

.splash-content img.is-active {
	opacity: 1;
	visibility: visible;
}

body:not(.is-scrolling) figure:focus-within .splash-content,
body:not(.is-scrolling) .splash-content.splash-visible,
body:not(.is-scrolling) figure:has(:active) .splash-content {
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	body:not(.is-scrolling) figure:hover .splash-content {
		display: block;
	}
}

figure:hover a :is(img, figcaption),
figure:focus-within a :is(img, figcaption),
.splash-visible ~ a :is(img, figcaption) {
	position: relative;
	z-index: 3;
}

.splash-content.swatch {
	background-color: var(--swatch-color);
}

/* ----------------------------------------- */
/* FLOW */

.flow > * + * {
	margin-top: var(--flow-space, var(--gap-lg));
}

.flow .primary-header + * {
	margin-top: var(--gap-md);
}

.flow .primary-header + .hero {
	margin-top: 0;
}

.primary-header + .flow {
	margin-top: var(--flow-space, var(--gap-lg));
}

.single-work .primary-header + .flow {
	margin-top: 0;
	margin-bottom: var(--gap-md);
}

.archive .primary-header + .flow {
	margin-bottom: var(--gap-md);
}

.flow-xs {
	--flow-space: var(--gap-xs);
}

.flow-sm {
	--flow-space: var(--gap-sm);
}

.flow-md {
	--flow-space: var(--gap-md);
}

.my-lg, .home main.my-lg {
	margin-top: var(--gap-lg);
	margin-bottom: var(--gap-lg);
}

.mt-md {
	margin-top: var(--gap-md);
}

/* ----------------------------------------- */
/* SINGLE & DOUBLE & GUTTER ROWS */

.single-row, .double-row {
	width: 100%;
}

.double-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.double-row > * {
	flex: 1 1 50%;
}

.double-row > .double-row:nth-child(2n) > :nth-child(2n),
.double-row > .double-row:nth-child(2n+1) > :nth-child(2n+1) {
	flex-basis: 33%;
}
.double-row > .double-row:nth-child(2n) > :nth-child(2n+1),
.double-row > .double-row:nth-child(2n+1) > :nth-child(2n) {
	flex-basis: 67%;
}

:not(.double-row) > .double-row > *:first-child:last-child {
	flex-grow: 0;
	margin-left: auto;
}

.gutter.double-row.no-photo-credit > *:first-child:last-child {
	flex-grow: 0;
	margin-left: 0;
	margin-right: auto;
}

@media (max-width: 1020px) {
	.double-row > .double-row {
		flex-wrap: wrap;
		row-gap: var(--gap-sm);
	}
}

@media (max-width: 767px) {
	.double-row.gutter {
		flex-wrap: wrap;
		row-gap: var(--gap-sm);
	}
	.double-row.gutter.hero-caption {
		row-gap: var(--gap-xs);
	}
	.double-row.gutter > * {
		flex-basis: 100%;
	}
	.primary-header .double-row.gutter {
		justify-content: space-between;
	}
	.primary-header .double-row.gutter > * {
		flex-basis: fit-content;
	}
}

.gutter {
	gap: var(--gap-xs) var(--gap-sm);
	padding-inline: var(--page-space-inline);
}

.gutter > .gutter {
	padding-inline: 0;
}

/* ----------------------------------------- */
/* HEADER */

.primary-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9;
}

.primary-header .gutter {
	padding-block: var(--gap-xs);
}

.primary-header a,
.subnav a:not([aria-current="page"]) {
	text-decoration: none;
}

.archive .subnav a.archive {
	text-decoration: underline;
}

.primary-header .double-row > * {
	flex-grow: 0;
}

/* ----------------------------------------- */
/* FOOTER */

footer {
	padding-block: var(--gap-xs);
}

.fixed-footer {
	position: fixed;
	bottom: 0;
	z-index: 8;
}

.brand {
	text-decoration: none;
	text-transform: uppercase;
}

.fixed-footer {
	mix-blend-mode: difference;
	color: white;
}

.fixed-footer .brand {
	color: white;
}

.copyright {
	translate: -1em;
}

footer .social-links {
	min-width: min(100%, 20ch);
}

.under-header {
	padding-top: calc(2rem + 1lh);
}

/* ----------------------------------------- */
/* PROJECT GRID */

.project-grid {
	/* up to 4 columns across */
	display: grid;
	--min-project-width: 10rem;
	--fraction: 25%;
	align-items: end;
	gap: var(--gap-xs);
	margin-inline: var(--page-space-inline);
	grid-template-columns: repeat(auto-fit,
		minmax(
			max(
				calc(var(--fraction) - var(--gap-xs)),
				var(--min-project-width)
			),
			1fr
		)
	);
}

.project-grid-6 {
	/* up to 6 columns across */
	--fraction: 16%;
}

.project-grid figcaption {
	padding: 1em 0;
}

/* ----------------------------------------- */
/* CLEARING */

.container:after,
.row:after,
.u-cf {
	content: "";
	display: table;
	clear: both;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .clearfix {
	zoom: 1;
}

/* IE6 */
*:first-child+html .clearfix {
	zoom: 1;
}

/* ----------------------------------------- */
/* GRID */

main {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 0;
}

main section {
	position: relative;
	display: flex;
	flex-direction: column;
	/*padding-left: var(--pad-message);*/
	/*border-bottom: 3px solid black;*/
	border-color: var(--borderColorCAB);
	scroll-margin-block: var(--flow-space, var(--gap-sm));
}

@media only screen and (max-width: 767px) {
	main {
		/*padding: 0 2rem;*/
	}
	.page-work-index main {
		padding: 0;
	}
}


/* ----------------------------------------- */
/* HOUR Custom */

.message-404 {
	min-height: calc(100lvh - 2 * var(--gap-md));
}

/* ----------------------------------------- */
/* SINGLE WORK */

.single-work {
	--flow-space: var(--gap-md);
}

.single-work .nav-difference,
.single-work .hero-caption {
	mix-blend-mode: difference;
	color: white;
}

.single-work .nav-difference h1,
.single-work .hero-caption figcaption {
	color: white;
}

.work-details > * > * {
	max-width: 44ch;
}

.work-hero {
	position: relative;
	background-color: var(--work-hero-background, var(--bgColor));
}

@media (hover: hover) {
	body.single-work:has(.primary-header.nav-difference:hover, .fixed-footer.gutter:hover) .work-hero-media > picture,
	body.single-work:has(.primary-header.nav-difference:hover, .fixed-footer.gutter:hover) .work-hero-media.video {
		opacity: 0;
	}
}

.hero-caption {
	position: absolute;
	inset: 0 0 auto;
	padding-block: var(--gap-xs);
}

.hero-caption figcaption {
	padding: 0;
}

.hero-caption figcaption em {
	font-family: 'Haptik-Regular-Rotalic';
}

.invisible {
	color: transparent;
	opacity: 0;
}

/* ----------------------------------------- */
/* ABOUT/INFO PAGE */

.about-contact .newsletter {
	margin-top: var(--gap-xs);
}

.newsletter > summary {
	display: block;
	list-style: none;
	cursor: pointer;
	text-decoration: underline;
}

.newsletter > summary::-webkit-details-marker {
	display: none;
}

.newsletter-close-label {
	display: none;
}

.newsletter[open] .newsletter-close-label {
	display: inline;
}

.newsletter-form {
	width: 100%;
	max-width: 37rem;
	margin-block: 1rem;
}

.newsletter-form fieldset {
	display: grid;
	gap: 1rem;
	min-width: 0;
	border: 0;
}

.newsletter-form input[type="email"] {
	width: 100%;
	min-width: 0;
	padding: .5em;
	border: 1px solid currentColor;
	border-radius: 0;
	background: var(--bgColor);
	color: inherit;
	font: inherit;
}

.newsletter-form input[type="email"]:focus {
	outline: 1px solid #000;
	outline-offset: 0;
	border-radius: 2px;
}

.newsletter-form button {
	justify-self: start;
	font: inherit;
	text-decoration: none;
	-webkit-appearance: button;
	cursor: pointer;
	outline: 0;
	padding: .5rem .875rem;
	border: 1px solid rgba(0,0,0,.35);
}

.newsletter-form button:hover {
	color: white;
	background: rgba(0,0,0,.85);
}

.flow-sm > .cv-section.flow-xs:not(:first-of-type) {
	margin-top: 4rem;
}

.page-template-about-page .gutter.flow {
	display: flex;
	flex-flow: row nowrap;
}

details.credit {
	position: relative;
	display: inline-block;
	min-width: 5.25em;
	margin: 0;
	color: var(--textColor);
	font-size: var(--body-small);
	line-height: var(--body-line-height);
	vertical-align: baseline;
	translate: 1.5rem;
}

details.credit summary,
details.credit .site-by {
	display: block;
	font: inherit;
	line-height: inherit;
	margin: 0;
}

details.credit summary {
	list-style: none;
	cursor: pointer;
	text-decoration: underline;
}

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

details.credit .site-by {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

details.credit[open] summary {
	visibility: hidden;
}

details.credit[open] .site-by {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 767px) {
	.about p,
	.about img {
		max-width: 44ch;
	}
	details.credit {
		translate: .5rem;
		text-align: right;
	}
	details.credit .site-by {
		left: auto;
		right: 0;
	}
	.gutter.flow {
		justify-content: space-between;
	}
}

/* ----------------------------------------- */
/* HOME PAGE */

.home .nav-difference {
	mix-blend-mode: difference;
	color: white;
}

.landing-hero {
	position: relative;
	z-index: 2;
	container-type: size;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: white;
}

.landing-hero iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	translate: -50% -50%;
	border: 0;
	display: block;
	pointer-events: none;
}

/* Match the current Vimeo export (1920 × 1080) and cover the hero. */
@container (min-aspect-ratio: 16/9) {
	.landing-hero iframe {
		width: 100cqw;
		height: 56.25cqw;
	}
}

@container (max-aspect-ratio: 16/9) {
	.landing-hero iframe {
		width: 177.777778cqh;
		height: 100cqh;
	}
}

/*
 * Alternative for a future 640 × 310 (approximately 2.06:1) video.
 * To use, remove or comment out both active 16:9 queries above, then
 * uncomment both queries below.
 *
@container (min-aspect-ratio: 640/310) {
	.landing-hero iframe {
		width: 100cqw;
		height: 48.4375cqw;
	}
}

@container (max-aspect-ratio: 640/310) {
	.landing-hero iframe {
		width: 206.451613cqh;
		height: 100cqh;
	}
}
*/

.landing-scrim {
	z-index: 1;
	position: absolute;
	inset: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.landing-scrim {
		/* Black for 2.5s, then white for 1.5s. */
		animation: 4s landing-scrim steps(1, end) both;
	}

	.home .primary-header .header-wrapper > a {
		animation: 0.4s landing-nav-reveal 0.5s ease-out both;
	}

	.home .primary-header .header-wrapper > a:nth-child(2) {
		animation-delay: 1s;
	}

	.home .primary-header .header-wrapper > a:focus-visible {
		animation: none;
	}
}

.landing-hero ~ main.home {
	position: sticky;
	bottom: min(10rem, calc(100lvh - var(--work-height, 62lvh) - var(--flow-space, var(--gap-md))));
}

@keyframes landing-scrim {
	0% {
		background: black;
	}
	62.5% {
		background: white;
	}
	100% {
		background: transparent;
	}
}

@keyframes landing-nav-reveal {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}