/*
 * The two variations of the single project page (2026-10-04), chosen at the
 * top of single-project.php or previewed with ?variation=a / ?variation=b.
 * Loaded on project pages only, by inc/enqueue.php.
 *
 *   A  "The stage world, credited"  template-parts/project-variation-a.php
 *   B  "The stage world"            template-parts/project-variation-b.php
 *
 * Both open the same way (template-parts/project-stage.php,
 * project-essay.php: "Shared by A and B" below). Pieces of the site's look
 * they use (facts, date rows, credits, funders band, invitation, photo
 * viewer, the spiky top edge): style.css § 16 and § 18. Scripts:
 * assets/js/project.js (wobble, jump bar, reveal), site.js § 6 (viewer).
 */

.bfc-project-a,
.bfc-project-b {
	color: var(--bfc-color-text-default);
	/* Texts come from wp-admin: a long word or web address breaks rather
	   than pushing the page wider than the screen. */
	overflow-wrap: anywhere;
}

/* A photo link's cut corner would clip its focus outline: the cut opens
   while the link has keyboard focus, and the outline sits inside, in white. */
.bfc-project-essay__photo-link:focus-visible {
	clip-path: none;
	outline-color: var(--bfc-color-text-inverse-default);
	outline-offset: calc(-1 * var(--bfc-border-width-thick) - 2px);
}


/* ==== Shared by A and B =================================================== */

/* Links within the page ("See all dates", the jump bar) land below the
   sticky header. */
html:has(.bfc-project-a, .bfc-project-b) {
	scroll-padding-top: var(--bfc-space-4xl);
}

/* ---- The stage: the photo fills the first screen (project-stage.php) ---- */

.bfc-project-stage {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.bfc-project-stage__photo img {
	display: block;
	width: 100%;
	/* The screen's height, less the header and room for the title's first
	   line, so the title shows at the foot of the first screen. */
	height: clamp(22rem, 100svh - 14rem, 56rem);
	object-fit: cover;
}

/* Rises over the photo's lower part. */
.bfc-project-stage__title-band {
	position: relative;
	margin-top: calc(-1 * var(--bfc-spike-height) - var(--bfc-space-4xl));
	padding-bottom: var(--bfc-space-2xl);
}

.bfc-project-stage__title {
	margin: 0 0 var(--bfc-space-s);
	font-size: clamp(3rem, 1.2rem + 8vw, 10rem);
	line-height: 0.95;
}

.bfc-project-stage__title--long {
	font-size: clamp(2.5rem, 1.3rem + 4.5vw, 6rem);
	line-height: 1;
}

.bfc-project-stage__dates-link {
	gap: var(--bfc-space-2xs);
	margin-top: var(--bfc-space-xl);
}

.bfc-project-stage__subtitle {
	max-width: 40rem;
	margin-bottom: var(--bfc-space-xl);
	font-family: var(--bfc-text-heading-3-family);
	font-size: var(--bfc-text-heading-3-size);
	font-weight: var(--bfc-text-heading-3-weight);
	line-height: var(--bfc-text-heading-3-line-height);
}

/* ---- The essay: the text in one calm column, photos between (project-essay.php) ---- */

.bfc-project-essay {
	padding-block: var(--bfc-space-2xl) var(--bfc-space-4xl);
	container-type: inline-size; /* 100cqw below: the page's width */
}

.bfc-project-essay__paragraph {
	max-width: 42rem;
	margin: 0 auto var(--bfc-space-l);
}

/* The first paragraph is .bfc-text-lead (style.css § 6); the rest: */
.bfc-project-essay__paragraph:not(.bfc-text-lead) {
	font-size: var(--bfc-font-size-l);
	line-height: var(--bfc-font-leading-normal);
}

.bfc-project-essay__photo {
	margin: 0;
}

.bfc-project-essay__photo-link {
	display: block;
}

.bfc-project-essay__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bfc-project-essay__photo-gap {
	display: grid;
	gap: var(--bfc-space-l);
	margin-block: var(--bfc-space-2xl) var(--bfc-space-3xl);
}

/* One photo: the screen's full width. */
.bfc-project-essay__photo-gap--1 {
	margin-inline: calc(50% - 50cqw);
}

.bfc-project-essay__photo-grid {
	display: grid;
	gap: var(--bfc-space-s);
	margin: var(--bfc-space-2xl) 0 0;
	padding: 0;
	list-style: none;
}

.bfc-project-essay__photo-grid--1 {
	max-width: 42rem;
	margin-inline: auto;
}

@media (min-width: 48rem) {
	/* Two photos side by side, the second lower: staggered like Card Beta. */
	.bfc-project-essay__photo-gap--2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.bfc-project-essay__photo-gap--2 > :nth-child(2) {
		margin-top: var(--bfc-space-4xl);
	}

	.bfc-project-essay__photo-gap--2 img {
		aspect-ratio: 4 / 5;
	}

	.bfc-project-essay__photo-gap--1 img {
		aspect-ratio: 21 / 9;
	}

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

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

/* Frames in front of a shape only slide while they arrive: faded, the
   shape would show through (as on the home page). */
@media (prefers-reduced-motion: no-preference) {
	:root:not(.bfc-motion-off) .bfc-funders-band__inner.bfc-reveal.is-waiting,
	:root:not(.bfc-motion-off) .bfc-project-b__ensemble-frame.bfc-reveal.is-waiting {
		opacity: 1;
	}
}


/* ==== A. The stage world, credited ======================================== */

.bfc-project-a {
	/* The rubber springs' stretch in px, 0 at rest (project.js § 3, the
	   home page's springs); the long pointy shape adds it to its points. */
	--bfc-rubber-a: 0px;
	--bfc-rubber-b: 0px;
}

.bfc-project-a__section-title {
	margin-bottom: var(--bfc-space-xl);
	font-size: var(--bfc-text-display-size);
	line-height: var(--bfc-text-display-line-height);
}

.bfc-project-a__trailer,
.bfc-project-a__dates {
	padding-bottom: var(--bfc-space-4xl);
}

/* The trailer inside the essay, after the first paragraph (project-trailer.php):
   spaced like the photos between paragraphs, not like a section. */
.bfc-project-a__trailer.bfc-project-essay__trailer {
	margin-block: var(--bfc-space-2xl) var(--bfc-space-3xl);
	padding-bottom: 0;
}

/* The last black section before the supporters: more room below, on the
   section itself, since the black is its background. */
.bfc-project-a__credits {
	padding-bottom: calc(var(--bfc-space-4xl) + var(--bfc-space-2xl));
}

/* ---- Supporters on the vivid gradient ---- */
/* Room around the supporters' frame for the shapes. The purple shape, the
   long pointy shape and the burst are for wide screens only (new style
   guide, "Shapes"); the small triangles on the edges show everywhere. */

.bfc-project-a__supporters {
	position: relative;
	isolation: isolate;
	padding-top: var(--bfc-space-2xl);
	overflow: clip; /* the shapes stay inside the band */
}

.bfc-project-a__supporters .bfc-funders-band {
	position: relative;
	z-index: 1;
	padding-block: 0 var(--bfc-space-3xl);
}

/* Small black triangles on the band's top and bottom edges, pointing out of
   the black above and below, so the edges are not one straight line. 1px
   past the edge, or rounding leaves a hairline. */
.bfc-project-a__edge-triangle {
	position: absolute;
	z-index: 2;
	background-color: var(--bfc-color-bg-inverse);
}

.bfc-project-a__edge-triangle--top-1 {
	top: -1px;
	left: 58%;
	width: 2.5rem;
	height: 2rem;
	clip-path: polygon(0 0, 100% 0, 35% 100%);
}

.bfc-project-a__edge-triangle--top-2 {
	top: -1px;
	left: 82%;
	width: 1.5rem;
	height: 3rem;
	clip-path: polygon(0 0, 100% 0, 70% 100%);
}

.bfc-project-a__edge-triangle--bottom-1 {
	bottom: -1px;
	left: 34%;
	width: 2.5rem;
	height: 2.25rem;
	clip-path: polygon(60% 0, 100% 100%, 0 100%);
}

.bfc-project-a__supporters-shape,
.bfc-project-a__pointy-shape,
.bfc-project-a__burst {
	display: none;
}

@media (min-width: 64rem) {
	.bfc-project-a__supporters {
		padding-top: var(--bfc-space-4xl);
	}

	.bfc-project-a__supporters .bfc-funders-band {
		padding-bottom: var(--bfc-space-4xl);
	}

	/* Behind the frame (52rem, centred), lower and further right, so it
	   shows below and beside it. */
	.bfc-project-a__supporters-shape {
		position: absolute;
		z-index: 0;
		top: calc(var(--bfc-space-4xl) + var(--bfc-space-2xl));
		bottom: var(--bfc-space-xl);
		left: calc(50% - 22rem);
		width: 52rem;
		display: block;
	}

	/* The home page's long pointy shape ($about_purple_spike_rising in
	   home.css), in black: its base on the screen's left edge at the band's
	   foot, the long point rising to the right, up to the frame's edge. The
	   same outline and the same rubber: the point takes the whole stretch
	   (--bfc-rubber-a), the other points a fraction, so the point is the
	   wobbliest part. */
	.bfc-project-a__pointy-shape {
		position: absolute;
		z-index: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: min(13rem, calc(50% - 25rem)); /* the point stops short of the frame */
		aspect-ratio: 263 / 706;
		background-color: var(--bfc-color-bg-inverse);
		clip-path: polygon(
			40.68% calc(18.13% + var(--bfc-rubber-b) * 0.5),
			calc(100% - max(0px, var(--bfc-rubber-a)) * 0.5) calc(0% + max(0px, var(--bfc-rubber-a))),
			46.39% calc(20.68% + var(--bfc-rubber-b) * 0.5),
			calc(18.25% + var(--bfc-rubber-a) * 0.3) 67.14%,
			11.79% 71.81%,
			6.84% 79.04%,
			7.98% 91.08%,
			calc(19.47% + var(--bfc-rubber-b) * 0.6) 95.86%,
			5.32% 96.03%,
			0 100%,
			0 52.27%,
			8.75% 63.03%
		);
	}

	/* A green burst in front of the frame's top right corner, where no text
	   is, turning with the same springs. */
	.bfc-project-a__burst {
		position: absolute;
		z-index: 2;
		top: var(--bfc-space-xl);
		left: calc(50% + 26rem - 3.5rem);
		display: block;
		width: 10rem;
		height: 10rem;
		fill: var(--bfc-color-gradient-vivid-2);
		/* --bfc-rubber-turn: the same stretch as a plain number (project.js). */
		transform: rotate(calc(var(--bfc-rubber-turn, 0) * -1deg));
	}
}


/* ==== B. The stage world ================================================== */

/* The jump bar at the bottom never hides what the keyboard has focused. */
html:has(.bfc-project-b) {
	scroll-padding-bottom: var(--bfc-space-4xl);
}

.bfc-project-b__section-title {
	margin-bottom: var(--bfc-space-xl);
	font-size: var(--bfc-text-display-size);
	line-height: var(--bfc-text-display-line-height);
}

.bfc-project-b__trailer {
	padding-bottom: var(--bfc-space-4xl);
}

/* ---- The ensemble: an amber frame on the purple shape ---- */

.bfc-project-b__ensemble {
	padding-block: var(--bfc-space-4xl) calc(var(--bfc-space-4xl) * 2);
	overflow-x: clip; /* the shape reaches past the frame */
}

.bfc-project-b__ensemble-inner {
	position: relative;
	isolation: isolate;
}

/* Desktop only (new style guide, "Shapes"). */
.bfc-project-b__ensemble-shape {
	display: none;
}

.bfc-project-b__ensemble-frame {
	padding-block: var(--bfc-space-2xl);
}

/* ---- Dates: a spiky black band rising out of the ensemble's gradient ---- */

.bfc-project-b__dates {
	margin-top: calc(-1 * var(--bfc-spike-height) - var(--bfc-space-2xl));
	padding-bottom: var(--bfc-space-4xl);
}

.bfc-project-b__dates .bfc-date-rows,
.bfc-project-b__dates .bfc-date-rows__more {
	max-width: 60rem;
}

/* ---- The jump bar at the bottom of the screen ---- */

.bfc-jump-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 25; /* under the header (30) */
	padding: var(--bfc-space-xs) var(--bfc-space-s);
	background-color: var(--bfc-color-bg-reading);
	color: var(--bfc-color-text-default);
}

.bfc-jump-bar[hidden] {
	display: none;
}

.bfc-jump-bar__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bfc-space-2xs) var(--bfc-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-jump-bar a {
	color: inherit;
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-font-weight-semibold);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-decoration: none;
	text-transform: var(--bfc-text-label-default-text-transform);
}

.bfc-jump-bar a:hover,
.bfc-jump-bar a:focus-visible {
	text-decoration: underline;
}

/* ---- B on wider screens ---- */

@media (min-width: 48rem) {
	/* A narrow bar in the middle, cut at both upper corners. */
	.bfc-jump-bar {
		right: auto;
		bottom: var(--bfc-space-s);
		left: 50%;
		padding-inline: var(--bfc-space-2xl);
		transform: translateX(-50%);
		clip-path: polygon(var(--bfc-space-s) 0, calc(100% - var(--bfc-space-s)) 0, 100% 100%, 0 100%);
	}
}

@media (min-width: 64rem) {
	.bfc-project-b__ensemble-shape {
		position: absolute;
		z-index: -1;
		inset: calc(-1 * var(--bfc-space-2xl)) calc(-1 * var(--bfc-space-xl)) calc(-1 * var(--bfc-space-3xl)) 15%;
		display: block;
	}

	.bfc-project-b__ensemble-frame {
		padding: var(--bfc-space-3xl);
	}
}