/* BIAF project detail page — load after the site’s main stylesheet */
.project-page {
	--pink: #ff0085;
	--white: #f4f1ee;
	--muted: #aaa6a3;
	max-width: 1920px;
	margin: 0 auto;
	padding: 40px 78px 140px;
	background: #050505;
	color: var(--white);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden
}

.project-page * {
	box-sizing: border-box
}

.project-hero__head {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: center;
	margin-bottom: 104px
}

.project-kicker, .project-back {
	margin: 0;
	font-size: 15px;
	letter-spacing: .08em
}

.project-kicker {
	color: var(--pink)
}

.project-back {
	color: var(--white);
	text-decoration: none
}

.project-back:hover {
	color: var(--pink);
	text-decoration: none
}

.project-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
	gap: 80px;
	align-items: end;
	margin-bottom: 58px
}

.project-hero__title {
	margin: 0;
	font-size: clamp(68px, 9.8vw, 176px);
	font-weight: 400;
	letter-spacing: -.07em;
	line-height: .9;
	text-transform: uppercase
}

.project-hero__artist {
	margin: 34px 0 0;
	color: var(--pink);
	font-size: clamp(20px, 2vw, 31px);
	letter-spacing: -.035em
}

.project-facts {
	margin: 0;
	display: grid;
	gap: 17px
}

.project-facts div {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 18px;
	border-top: 1px solid #494747;
	padding-top: 10px
}

.project-facts dt, .project-facts dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.15
}

.project-facts dt {
	color: var(--muted)
}

.project-facts dd {
	color: var(--white)
}

.project-hero__media {
	aspect-ratio: 16/9;
	margin: 0;
	background: #1b1b1b;
	overflow: hidden
}

.project-hero__media img, .project-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.project-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 9vw;
	row-gap: 42px;
	padding: 110px 0 130px
}

.project-intro__lead {
	margin: 0;
	font-size: clamp(30px, 3.35vw, 58px);
	line-height: .98;
	letter-spacing: -.055em
}

.project-intro__body {
	max-width: 580px;
	padding-top: 5px;
	font-size: 19px;
	line-height: 1.35;
	color: var(--muted)
}

.project-intro__body p {
	margin: 0 0 18px
}

.project-ticket {
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	gap: 74px;
	align-items: center;
	min-width: 265px;
	padding: 18px 20px;
	background: var(--pink);
	color: #050505;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: .07em
}

.project-ticket span {
	font-size: 26px;
	line-height: .7
}

.project-media-section, .project-video, .project-credits {
	padding: 0 0 128px
}

.project-section-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 32px;
	border-top: 1px solid #5c5957;
	padding-top: 11px
}

.project-section-head p, .project-section-head h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 400
}

.project-section-head p {
	color: var(--pink)
}

.project-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.project-gallery__item {
	aspect-ratio: 4/3;
	margin: 0;
	overflow: hidden;
	background: #1b1b1b
}

.project-gallery__item--wide {
	grid-column: span 2;
	aspect-ratio: 16/8
}

.project-video__frame {
	aspect-ratio: 16/9;
	background: #181818
}

.project-video__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0
}

.project-credits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 20px
}

.project-credits__grid p {
	margin: 0 0 9px;
	color: var(--muted);
	font-size: 14px
}

.project-credits__grid strong {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.1
}

@media(max-width:800px) {
	.project-page {
		padding: 18px 18px 76px
	}

	.project-hero {
		padding-top: 28px
	}

	.project-hero__head {
		margin-bottom: 76px
	}

	.project-hero__grid {
		grid-template-columns: 1fr;
		gap: 52px;
		margin-bottom: 36px
	}

	.project-hero__title {
		font-size: clamp(64px, 18vw, 108px);
		line-height: .8
	}

	.project-hero__artist {
		margin-top: 22px
	}

	.project-facts {
		max-width: none
	}

	.project-facts div {
		grid-template-columns: 90px 1fr
	}

	.project-intro {
		grid-template-columns: 1fr;
		padding: 70px 0 86px;
		gap: 30px
	}

	.project-intro__body {
		font-size: 17px
	}

	.project-ticket {
		grid-column: 1;
		width: 100%;
		justify-content: space-between
	}

	.project-media-section, .project-video, .project-credits {
		padding-bottom: 82px
	}

	.project-section-head {
		margin-bottom: 20px;
	}

	.project-gallery {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-right: -18px;
		padding-right: 18px
	}

	.project-gallery__item, .project-gallery__item--wide {
		flex: 0 0 85%;
		aspect-ratio: 4/3;
		scroll-snap-align: start
	}

	.project-credits__grid {
		grid-template-columns: 1fr 1fr;
		gap: 34px 18px
	}

	.project-credits__grid strong {
		font-size: 18px
	}

}

@media(max-width:430px) {
	.project-hero__head {
		font-size: 13px
	}

	.project-hero__title {
		font-size: 62px
	}

	.project-facts dt, .project-facts dd {
		font-size: 14px
	}

	.project-credits__grid {
		grid-template-columns: 1fr
	}

	.project-credits__grid {
		gap: 26px
	}

}