/* Project pages: the coded template in template-parts/project/.
 *
 * Every value here was read off the Elementor documents these pages replaced
 * and checked against a render of them at ten widths, so a project page looks
 * exactly as it did when it was built in the panel. Colours come through the
 * Kit's custom properties, so a change in Site Settings still reaches these
 * pages; the fallbacks only apply if Elementor is ever removed.
 *
 * Breakpoints are the site's: 1180 laptop, 1000 tablet extra, 900 tablet,
 * 760 mobile extra, 640 mobile.
 */

.project-page {
	--p-ground: var(--e-global-color-ground, #080807);
	--p-raised: var(--e-global-color-raised, #0B0A09);
	--p-surface: var(--e-global-color-surface, #131210);
	--p-ink: var(--e-global-color-ink, #F2EFE9);
	--p-mist: var(--e-global-color-mist, #C9C4BA);
	--p-muted: var(--e-global-color-muted, #8F887C);
	--p-dim: var(--e-global-color-dim, #6F695E);
	--p-gold: var(--e-global-color-gold, #C6A86A);
	--p-rule: var(--e-global-color-rule, rgba(242, 239, 233, .2));
	--p-hair: var(--e-global-color-hair, rgba(242, 239, 233, .14));
	--p-gutter: clamp(24px, 4vw, 56px);
	--p-serif: "Newsreader", Georgia, serif;
	--p-sans: "Archivo", sans-serif;
	display: block;
}

.project-page *,
.project-page *::before,
.project-page *::after {
	box-sizing: border-box;
}

.project-page h1,
.project-page h2,
.project-page p,
.project-page figure {
	margin: 0;
	padding: 0;
}

.project-page a {
	color: inherit;
	text-decoration: none;
}

/* The small tracked capitals every label on the page is set in. */
.project-page .project-crumbs,
.project-page .project-meta,
.project-page .project-trailer__button,
.project-page .project-label,
.project-page .project-section__sub,
.project-page .project-credit__role,
.project-page .project-next__label,
.project-page .project-next__word,
.project-page .project-plate__caption,
.project-page .slate-kicker,
.project-page .slate-fact__label,
.project-page .slate-next__label,
.project-page .slate-next__all {
	font-family: var(--p-sans);
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .22em;
	line-height: normal;
}

/* A shell: 1400px of content, the gutter outside it. */
.project-page .project-shell {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

/* ---------- released: head ---------- */

.project-page .project-head {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 78vh;
	overflow: hidden;
}

.project-page .project-head__image,
.project-page .project-head__wash {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.project-page .project-head__image {
	background-color: #131210;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.project-page .project-head__wash {
	/* The bottom stop is a full 1, not .97. At .97 three per cent of the plate
	   survives the wash, and the head then ends on a colour that is not the
	   page's own - measured (13,13,12) against (8,8,7) on the row below, a
	   visible rule across the full width. It only shows on a bright plate,
	   which is why it went unseen until one landed. */
	background-image: linear-gradient(0deg, rgba(8, 8, 7, 1) 0%, rgba(8, 8, 7, .1) 100%);
}

.project-page .project-head__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: calc(1400px + 2 * var(--p-gutter));
	margin: 0 auto;
	padding: clamp(170px, 21vh, 230px) var(--p-gutter) clamp(40px, 6vh, 64px);
}

.project-page .project-crumbs {
	margin-bottom: clamp(20px, 3vh, 32px);
	font-size: 10px;
	color: #C9C4BA;
}

/* The slate head sets a kicker under this one, so the two sit closer. */
.project-page .slate-head__inner .project-crumbs {
	margin-bottom: clamp(18px, 2.6vh, 26px);
}

.project-page .project-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every step keeps its width except the project's own name, which is the long
   one and the only one allowed to wrap. Fixed, it pushed a 320px phone sideways. */
.project-page .project-crumbs li {
	flex: none;
}

.project-page .project-crumbs li:last-child {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.project-page .project-crumbs__sep,
.project-page .project-crumbs [data-crumb-current] {
	color: #8F887C;
}

.project-page .project-crumbs a {
	transition: color .3s;
}

.project-page .project-crumbs a:hover,
.project-page .project-crumbs a:focus-visible {
	color: var(--p-gold);
}

/* A 15px link: the tap area grows, the layout does not. */
.project-page .project-crumbs a,
.project-page .slate-next__all {
	padding-block: 6px;
	margin-block: -6px;
}

.project-page .project-arrow {
	display: block;
	flex: none;
}

.project-page .project-title {
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(2.8rem, 8vw, 8rem);
	line-height: .94em;
	letter-spacing: -.015em;
	color: #F2EFE9;
}

.project-page .project-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(18px, 2vw, 30px);
	margin-top: clamp(20px, 3vh, 30px);
	font-size: 10px;
	color: #C9C4BA;
}

/* ---------- released: logline, synopsis, trailer ---------- */

.project-page .project-story {
	padding: clamp(30px, 5vh, 60px) var(--p-gutter) clamp(80px, 12vh, 140px);
}

.project-page .project-logline {
	max-width: 22ch;
	margin-bottom: clamp(40px, 6vh, 72px) !important;
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(1.7rem, 4.4vw, 3.6rem);
	line-height: 1.16em;
	letter-spacing: -.01em;
	color: #C6A86A;
}

.project-page .project-synopsis {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(40px, 6vw, 100px);
}

.project-page .project-synopsis p {
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	line-height: 1.7em;
	color: #C9C4BA;
}

.project-page .project-trailer {
	margin-top: clamp(40px, 6vh, 64px);
}

.project-page .project-trailer__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border: 1px solid rgba(242, 239, 233, .22);
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .22em;
	line-height: normal;
	color: #8F887C;
	cursor: pointer;
	transition: color .3s, border-color .3s;
}

.project-page .project-trailer__button[disabled] {
	cursor: default;
}

.project-page .project-trailer__button:hover,
.project-page .project-trailer__button:focus {
	background: none;
	color: #8F887C;
}

.project-page .project-trailer__button[data-yt]:hover,
.project-page .project-trailer__button[data-yt]:focus-visible {
	color: #C6A86A;
	border-color: #C6A86A;
}

/* ---------- released: the ruled sections ---------- */

/* dist caps content at 1400 and pads outside it, so a ruled section is 1512
 * wide and its top rule runs the full width of that. */
.project-page .project-band {
	width: 100%;
	max-width: 1512px;
	margin: 0 auto;
}

.project-page .project-section {
	display: flex;
	flex-direction: column;
	padding: clamp(80px, 12vh, 150px) var(--p-gutter);
	border-top: 1px solid rgba(242, 239, 233, .1);
}

.project-page .project-section--stills {
	display: grid;
	grid-template-columns: 1fr;
}

.project-page .project-section__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px 20px;
	margin-bottom: clamp(30px, 5vh, 52px);
	padding-bottom: 22px;
	border-bottom: 1px solid var(--p-rule);
}

.project-page .project-label {
	font-size: 12px;
	font-weight: 600;
	color: #F2EFE9;
}

.project-page .project-label--ruled {
	margin-bottom: clamp(30px, 5vh, 52px) !important;
	padding-bottom: 22px !important;
	border-bottom: 1px solid rgba(242, 239, 233, .2);
}

.project-page .project-section__sub {
	font-size: 10px;
	line-height: 1.1em;
	color: var(--p-muted);
}

/* ---------- stills ---------- */

.project-page .project-stills {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 3vw, 48px);
}

.project-page .project-plate {
	cursor: pointer;
}

.project-page .project-plate__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: #131210;
}

.project-page .project-plate__image {
	position: absolute;
	inset: 0;
	background-color: #131210;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* The scroll parallax in gsap-motion.js owns `transform` on this element and
	   writes it every frame, so nothing here transitions `transform`: that would
	   drag the parallax a second behind the scroll. GSAP also writes `scale: none`
	   inline alongside it, so while the parallax runs the hover zoom below does
	   not show — this still zooms only where the parallax is absent. */
	transition: scale 1100ms cubic-bezier(.19, 1, .22, 1);
}

.project-page .project-plate:hover .project-plate__image {
	scale: 1.06;
}

.project-page .project-plate__mark {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #F2EFE9;
	fill: #F2EFE9;
	/* white on a pale sky would vanish: a soft shadow keeps it readable on any still */
	filter: drop-shadow(0 1px 3px rgba(8, 8, 7, .7));
	opacity: 0;
	transform: scale(.6);
	transition: opacity 400ms ease, transform 450ms cubic-bezier(.34, 1.56, .64, 1);
}

.project-page .project-plate__mark svg {
	width: 100%;
	height: 100%;
}

.project-page .project-plate:hover .project-plate__mark,
.project-page .project-plate:focus-visible .project-plate__mark {
	opacity: 1;
	transform: scale(1);
}

.project-page .project-stills--upcoming .project-plate__frame,
.project-page .project-stills--upcoming .project-plate__image {
	background-color: var(--p-surface);
}

.project-page .project-plate__caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--p-rule);
	font-size: 10px;
}

.project-page .project-plate__caption [data-still-label] {
	color: var(--p-muted);
}

.project-page .project-plate__caption [data-still-shape] {
	color: var(--p-dim);
}

/* ---------- credits ---------- */

.project-page .project-credits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

.project-page .project-credit {
	padding-top: 16px;
	border-top: 1px solid rgba(242, 239, 233, .14);
}

.project-page .project-credit__role {
	margin-bottom: 10px;
	font-size: 10px;
	color: #C6A86A;
}

.project-page .project-credit__name {
	font-family: var(--p-serif);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	line-height: 1.2em;
	color: #F2EFE9;
}

/* ---------- next ---------- */

.project-page .project-section--next {
	gap: clamp(20px, 3vh, 30px);
}

.project-page .project-next__label {
	font-size: 10px;
	color: #8f887c;
}

.project-page .project-next {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
}

.project-page .project-next__title {
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(2rem, 5.5vw, 4.4rem);
	line-height: 1em;
	letter-spacing: 0;
	color: #F2EFE9;
}

.project-page .project-next__action {
	display: flex;
	align-items: center;
	gap: 4.72px;
	color: #C6A86A;
}

/* Both halves are one-line flex boxes centred on the same axis. As block lines
   of body text, the caps sat on a baseline and the icon hung from the top of
   its line, which drew the arrow 4px above the word. */
.project-page .project-next__line {
	display: flex;
	align-items: center;
}

.project-page .project-next__word {
	font-size: 11px;
	line-height: 1;
}

.project-page .project-next__icon {
	display: flex;
	font-size: 15px;
	line-height: 15px;
}

/* ---------- announced: head ---------- */

.project-page .slate-head {
	position: relative;
	padding: clamp(170px, 21vh, 230px) var(--p-gutter) clamp(40px, 6vh, 64px);
}

.project-page .slate-head__image,
.project-page .slate-head__wash {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(300px, 46vh, 460px);
}

.project-page .slate-head__image {
	z-index: 0;
	background-color: var(--p-surface);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.project-page .slate-head__wash {
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(0deg, rgba(8, 8, 7, .72) 42%, rgba(8, 8, 7, .5) 100%);
}

.project-page .slate-head__wash::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(0deg, rgba(8, 8, 7, 1) 0%, rgba(8, 8, 7, 0) 42%);
}

.project-page .slate-head__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	max-width: 1400px;
	margin: 0 auto;
}

.project-page .slate-kicker {
	margin-bottom: clamp(18px, 2.6vh, 26px);
	font-size: 11px;
	color: var(--p-gold);
}

.project-page .slate-title {
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(2.4rem, 7vw, 6.6rem);
	line-height: .96;
	letter-spacing: -.015em;
	color: var(--p-ink);
}

.project-page .slate-logline {
	max-width: 52ch;
	margin-top: clamp(20px, 3vh, 30px) !important;
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	line-height: 1.6;
	color: var(--p-gold);
}

/* ---------- announced: body ---------- */

.project-page .slate-body {
	padding: clamp(30px, 5vh, 60px) var(--p-gutter) clamp(80px, 12vh, 140px);
}

.project-page .slate-body > .project-shell {
	display: grid;
	grid-template-columns: 1fr;
}

.project-page .project-label--slate {
	margin-bottom: clamp(24px, 3.5vh, 34px) !important;
	padding-bottom: 22px !important;
	border-bottom: 1px solid var(--p-rule);
	color: var(--p-ink);
}

.project-page .slate-story {
	max-width: 70ch;
	margin-bottom: 20px !important;
	font-family: var(--p-serif);
	font-weight: 300;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.75;
	color: var(--p-mist);
}

.project-page .slate-space {
	height: clamp(50px, 8vh, 80px);
}

.project-page .slate-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.project-page .slate-fact {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--p-hair);
	background-color: var(--p-raised);
}

.project-page .slate-fact__label {
	margin-bottom: 12px;
	font-size: 10px;
	color: var(--p-dim);
}

.project-page .slate-fact__value {
	font-family: var(--p-serif);
	font-weight: 400;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.5;
	color: var(--p-ink);
}

.project-page .slate-next {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin-top: clamp(50px, 8vh, 90px);
	padding-top: clamp(26px, 4vh, 40px);
	border-top: 1px solid var(--p-rule);
}

.project-page .slate-next__left {
	display: flex;
	flex-direction: column;
}

.project-page .slate-next__label {
	margin-bottom: 10px;
	font-size: 10px;
	color: var(--p-dim);
}

.project-page .slate-next__title {
	font-family: var(--p-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	line-height: normal;
	color: var(--p-ink);
	transition: color .3s;
}

.project-page .slate-next__title:hover,
.project-page .slate-next__title:focus-visible {
	color: var(--p-gold);
}

/* Centred, not baseline: on the baseline the 14px arrow's foot met the caps'
   foot and its middle sat 4px above theirs. */
.project-page .slate-next__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	color: var(--p-muted);
	transition: color .3s;
}

.project-page .slate-next__arrow {
	display: inline-block;
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M7 17 L17 7'/%3E%3Cpath d='M8.5 7 H17 V15.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M7 17 L17 7'/%3E%3Cpath d='M8.5 7 H17 V15.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.project-page .slate-next__all:hover,
.project-page .slate-next__all:focus-visible {
	color: var(--p-gold);
}

/* The hero, from the variables studio_project_hero_style() writes. Wider than
   a phone only: below 641 the phone copy takes over, and no rule a phone can
   match names the full file. */
@media (min-width: 641px) {
	.project-page .project-head__image,
	.project-page .slate-head__image {
		background-image: var(--hero-full);
	}
}

/* ---------- breakpoints ---------- */

@media (max-width: 1180px) {
	.project-page .project-head {
		min-height: calc(78vh + clamp(60px, 9vh, 90px));
		padding-bottom: clamp(60px, 9vh, 90px);
	}

	.project-page .project-title,
.project-page .slate-title {
		font-size: min(clamp(2.2rem, 7.4vw, 5rem), 13vw);
	}

	.project-page .slate-head {
		padding-bottom: clamp(60px, 9vh, 90px);
	}
}

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

@media (max-width: 760px) {
	.project-page .project-synopsis,
.project-page .project-stills--released {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	/* The label and arrow take a line of their own under the title. */
	.project-page .project-next__action {
		width: 100%;
	}

	/* Half a screen, like the home hero. The floor is 50vh; a long title still
	   grows it. With no trail to clear, the title sits 152px down, as on Home, and the
	   gold logline follows the meta line by 56px instead of 160. */
	.project-page .project-head {
		min-height: 50vh;
		padding-bottom: 0;
	}

	/* The phone cut of the hero, set by studio_project_hero_style(). */
	.project-page .project-head__image,
	.project-page .slate-head__image {
		background-image: var(--hero-phone) !important;
	}

	/* And its AVIF twin, where the browser can take it and one was made. */
	@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
		.project-page .project-head__image[style*="--hero-phone-set"],
		.project-page .slate-head__image[style*="--hero-phone-set"] {
			background-image: var(--hero-phone-set) !important;
		}
	}

	.project-page .project-head__inner {
		padding-top: 152px;
		padding-bottom: 32px;
	}

	/* A meta item that wraps sits just under the line, not a column gap away. */
	.project-page .project-meta {
		row-gap: 10px;
	}

	.project-page .project-story {
		padding-top: 24px;
		padding-bottom: 56px;
	}

	.project-page .slate-head {
		padding-top: 152px;
	}

	/* The phone section rhythm every Elementor page uses: 56px a side. */
	.project-page .project-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.project-page .slate-body {
		padding-bottom: 56px;
	}

	/* No visible trail on a phone, the same as every Elementor page. The
	   BreadcrumbList in the head is untouched, so search engines still get it. */
	.project-page .project-crumbs {
		display: none;
	}

	/* Same size as every other button on a phone: 36px tall, 18px sides. */
	.project-page .project-trailer__button {
		padding: 11px 18px;
	}

	.project-page .project-credits,
.project-page .project-stills,
.project-page .slate-facts {
		grid-template-columns: 1fr;
	}
}