/*
Theme Name: bfc
Description: GeneratePress child theme for arts, design, theatre and performance portfolios. Built for Bright Future Collective and reused from there.
Author: Georgios Kondylis
Template: generatepress
Version: 0.1.0
Requires PHP: 8.2
Text Domain: bfc-theme
*/

/*
 * Hand-written styles. Values come from assets/css/tokens.css (synced from
 * Penpot, never edited by hand). Use role tokens here, not base tokens:
 * --bfc-color-text-default, not --bfc-color-neutral-darkest (Decision 006).
 *
 * Mobile first: rules outside a media query are for phones; wider screens
 * add to them. Breakpoints go where the layout breaks, not at device sizes.
 *
 * Contents
 *   1. Fonts
 *   2. Derived values (gradients)
 *   3. Base elements
 *   4. Focus and accessibility
 *   5. Motion (Decision 014)
 *   6. Typography classes
 *   7. Layout
 *   8. Icons
 *   9. Footer
 *  10. Buttons
 *  11. Header
 *  12. Project card
 *  13–14. Removed 2026-10-05 (calendar row, upcoming card: the alternatives Card Beta beat)
 *  15. Card Beta
 *  16. The new look: frames, surfaces, cut corners (Decision 015)
 *  17. Consent banner (Complianz)
 *  18. Project pieces: facts, dates, credits, funders, invitation, photo viewer
 */


/* ==== 1. Fonts ============================================================ */
/* Self-hosted, so no visitor data goes to Google. Licences in assets/fonts/.
   The latin-ext files load only when a page uses one of their letters. */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900; /* one variable file covers every weight */
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bebas-neue-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==== 2. Derived values =================================================== */
/* Built here from tokens, because Penpot's colour tokens cannot hold a
   gradient. Each gradient blends four corner colours: one soft glow per
   corner, over a flat mix of all four so the middle never turns white. */

:root {
	--bfc-gradient-soft:
		radial-gradient(ellipse at 0% 0%, var(--bfc-color-gradient-soft-1), transparent 70%),
		radial-gradient(ellipse at 100% 0%, var(--bfc-color-gradient-soft-2), transparent 70%),
		radial-gradient(ellipse at 0% 100%, var(--bfc-color-gradient-soft-3), transparent 70%),
		radial-gradient(ellipse at 100% 100%, var(--bfc-color-gradient-soft-4), transparent 70%),
		linear-gradient(
			color-mix(in oklab, color-mix(in oklab, var(--bfc-color-gradient-soft-1), var(--bfc-color-gradient-soft-2)), color-mix(in oklab, var(--bfc-color-gradient-soft-3), var(--bfc-color-gradient-soft-4))),
			color-mix(in oklab, color-mix(in oklab, var(--bfc-color-gradient-soft-1), var(--bfc-color-gradient-soft-2)), color-mix(in oklab, var(--bfc-color-gradient-soft-3), var(--bfc-color-gradient-soft-4)))
		);

	--bfc-gradient-vivid:
		radial-gradient(ellipse at 0% 0%, var(--bfc-color-gradient-vivid-1), transparent 70%),
		radial-gradient(ellipse at 100% 0%, var(--bfc-color-gradient-vivid-2), transparent 70%),
		radial-gradient(ellipse at 0% 100%, var(--bfc-color-gradient-vivid-3), transparent 70%),
		radial-gradient(ellipse at 100% 100%, var(--bfc-color-gradient-vivid-4), transparent 70%),
		linear-gradient(
			color-mix(in oklab, color-mix(in oklab, var(--bfc-color-gradient-vivid-1), var(--bfc-color-gradient-vivid-2)), color-mix(in oklab, var(--bfc-color-gradient-vivid-3), var(--bfc-color-gradient-vivid-4))),
			color-mix(in oklab, color-mix(in oklab, var(--bfc-color-gradient-vivid-1), var(--bfc-color-gradient-vivid-2)), color-mix(in oklab, var(--bfc-color-gradient-vivid-3), var(--bfc-color-gradient-vivid-4)))
		);

	/* ---- The new look (Decision 015, an experiment the client has not seen) ----
	   Built from the same four vivid corners. Shown in the "Style guide (new
	   look)" page. Every text-carrying one keeps body text at 9:1 or better. */

	/* A light, mostly amber-yellow surface for frames that hold text. The
	   darkest point is the amber at 85%: text contrast above 13:1. */
	--bfc-gradient-frame-amber:
		radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--bfc-color-gradient-vivid-1) 85%, white), transparent 70%),
		radial-gradient(ellipse at 100% 100%, color-mix(in oklab, var(--bfc-color-gradient-vivid-1) 60%, white), transparent 70%),
		linear-gradient(to right, color-mix(in oklab, var(--bfc-color-gradient-vivid-1) 70%, white), var(--bfc-color-gradient-soft-3));

	/* The same, with the background's coral (top) and purple (bottom)
	   glowing in at the right edge only, away from the text. */
	--bfc-gradient-frame-glow:
		radial-gradient(ellipse 30% 70% at 100% 0%, var(--bfc-color-gradient-vivid-3), transparent),
		radial-gradient(ellipse 30% 70% at 100% 100%, var(--bfc-color-gradient-vivid-4), transparent),
		var(--bfc-gradient-frame-amber);

	/* Purple, yellow and green toward the left and right edges, a white
	   glow over the middle where text and logos sit. Over white. */
	--bfc-gradient-edges:
		radial-gradient(ellipse 45% 120% at 50% 50%, var(--bfc-color-bg-default) 40%, transparent),
		linear-gradient(to right, var(--bfc-color-gradient-vivid-4), var(--bfc-color-gradient-soft-3) 50%, var(--bfc-color-gradient-vivid-2));

	/* An intense, mostly purple fill for decorative shapes (no text on it). */
	--bfc-gradient-shape:
		radial-gradient(ellipse at 0% 0%, var(--bfc-color-gradient-vivid-3), transparent 60%),
		linear-gradient(135deg, var(--bfc-color-gradient-vivid-4), color-mix(in oklab, var(--bfc-color-gradient-vivid-4) 70%, black));

	/* How much a cut corner takes off: width, then height. A little taller
	   than wide, so the cut slants like the pointed shapes. */
	--bfc-cut-x: 2.5rem;
	--bfc-cut-y: 4rem;
}


/* ==== 3. Base elements ==================================================== */
/* Plain tags take their role's variables, so text the client writes in the
   editor, which carries no classes, is styled (Decision 006). */

body {
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
	font-family: var(--bfc-text-body-default-family);
	font-size: var(--bfc-text-body-default-size);
	font-weight: var(--bfc-text-body-default-weight);
	line-height: var(--bfc-text-body-default-line-height);
	letter-spacing: var(--bfc-text-body-default-letter-spacing);
}

h1,
h2,
h3 {
	color: inherit;
	margin-top: 0;
	margin-bottom: var(--bfc-space-gap-content);
	text-wrap: balance; /* evens out line lengths in short headings */
}

h1 {
	font-family: var(--bfc-text-heading-1-family);
	font-size: var(--bfc-text-heading-1-size);
	font-weight: var(--bfc-text-heading-1-weight);
	line-height: var(--bfc-text-heading-1-line-height);
	letter-spacing: var(--bfc-text-heading-1-letter-spacing);
}

h2 {
	font-family: var(--bfc-text-heading-2-family);
	font-size: var(--bfc-text-heading-2-size);
	font-weight: var(--bfc-text-heading-2-weight);
	line-height: var(--bfc-text-heading-2-line-height);
	letter-spacing: var(--bfc-text-heading-2-letter-spacing);
}

h3 {
	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);
	letter-spacing: var(--bfc-text-heading-3-letter-spacing);
}

p {
	margin-top: 0;
	margin-bottom: var(--bfc-space-gap-content);
}

strong,
b {
	font-weight: var(--bfc-text-emphasis-weight);
}

small {
	font-size: var(--bfc-text-caption-size);
	line-height: var(--bfc-text-caption-line-height);
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: var(--bfc-border-width-thin);
	text-underline-offset: 0.2em;
}

/* GeneratePress turns links near-black on hover and focus, which hides them
   on dark sections. Links keep the colour of the text around them instead. */
a:hover,
a:focus,
a:active {
	color: inherit;
}

a:hover {
	text-decoration-thickness: var(--bfc-border-width-thick);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}


/* ==== 4. Focus and accessibility ========================================== */

/* A visible outline for keyboard users only. currentColor keeps it readable
   on both light and dark sections. */
:focus-visible {
	outline: var(--bfc-border-width-thick) solid currentColor;
	outline-offset: 3px;
}

/* Hidden until a keyboard user tabs to it, then shown top left. */
.skip-link:focus {
	position: fixed;
	top: var(--bfc-space-s);
	left: var(--bfc-space-s);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--bfc-space-control-y) var(--bfc-space-control-x);
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
	font-family: var(--bfc-text-label-strong-family);
	font-size: var(--bfc-text-label-strong-size);
	font-weight: var(--bfc-text-label-strong-weight);
	text-decoration: none;
}


/* ==== 5. Motion (Decision 014) ============================================ */
/* Everything is complete and readable at rest. Animation stops when the
   visitor's system asks for less motion, or when the site's own motion
   switch adds .bfc-motion-off to <html> (the switch comes with the home page). */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

.bfc-motion-off *,
.bfc-motion-off *::before,
.bfc-motion-off *::after {
	animation-duration: 0.01ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}


/* ==== 6. Typography classes =============================================== */
/* Only for elements whose tag does not match their role, e.g. a <p> that
   should look like a label. Built from the same variables as the tags. */

.bfc-text-display {
	font-family: var(--bfc-text-display-family);
	font-size: var(--bfc-text-display-size);
	font-weight: var(--bfc-text-display-weight);
	line-height: var(--bfc-text-display-line-height);
	letter-spacing: var(--bfc-text-display-letter-spacing);
}

.bfc-text-body-small {
	font-family: var(--bfc-text-body-small-family);
	font-size: var(--bfc-text-body-small-size);
	font-weight: var(--bfc-text-body-small-weight);
	line-height: var(--bfc-text-body-small-line-height);
	letter-spacing: var(--bfc-text-body-small-letter-spacing);
}

.bfc-text-caption {
	font-family: var(--bfc-text-caption-family);
	font-size: var(--bfc-text-caption-size);
	font-weight: var(--bfc-text-caption-weight);
	line-height: var(--bfc-text-caption-line-height);
	letter-spacing: var(--bfc-text-caption-letter-spacing);
}

.bfc-text-label {
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-text-label-default-weight);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
}

.bfc-text-label-strong {
	font-family: var(--bfc-text-label-strong-family);
	font-size: var(--bfc-text-label-strong-size);
	font-weight: var(--bfc-text-label-strong-weight);
	line-height: var(--bfc-text-label-strong-line-height);
	letter-spacing: var(--bfc-text-label-strong-letter-spacing);
}

.bfc-text-emphasis {
	font-family: var(--bfc-text-emphasis-family);
	font-size: var(--bfc-text-emphasis-size);
	font-weight: var(--bfc-text-emphasis-weight);
	line-height: var(--bfc-text-emphasis-line-height);
	letter-spacing: var(--bfc-text-emphasis-letter-spacing);
}

.bfc-text-callout {
	font-family: var(--bfc-text-callout-family);
	font-size: var(--bfc-text-callout-size);
	font-weight: var(--bfc-text-callout-weight);
	line-height: var(--bfc-text-callout-line-height);
	letter-spacing: var(--bfc-text-callout-letter-spacing);
}

/* The new look (Decision 015). A text's first paragraph, larger: the
   project essay's opening, the home page's intro in variation A. */
.bfc-text-lead {
	font-size: var(--bfc-font-size-xl);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-font-leading-snug);
}

/* People's names large, in the display font: the project credits, the
   members in "Who we are" (home page variation A). */
.bfc-text-name-large {
	font-family: var(--bfc-text-heading-2-family);
	font-size: var(--bfc-text-heading-2-size);
	font-weight: var(--bfc-text-heading-2-weight);
	line-height: 1.05;
	letter-spacing: var(--bfc-text-heading-2-letter-spacing);
}


/* ==== 7. Layout =========================================================== */

/* GeneratePress puts a 20px margin round <main>, which shows as a white strip
   between dark sections. The theme's templates set their own spacing. */
.separate-containers .site-main {
	margin: 0;
}

/* Centres content at the design's maximum width, with a gutter on phones. */
.bfc-container {
	width: 100%;
	max-width: calc(var(--bfc-size-content) + 2 * var(--bfc-space-gutter));
	margin-inline: auto;
	padding-inline: var(--bfc-space-gutter);
}

/* A full-width band of the page, with the design's vertical rhythm. */
.bfc-section {
	padding-block: var(--bfc-space-section-y);
}

/* Dark section: light text on black. */
.bfc-section--inverse {
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
}

.bfc-gradient-soft {
	background-image: var(--bfc-gradient-soft);
}

.bfc-gradient-vivid {
	background-image: var(--bfc-gradient-vivid);
}


/* ==== 8. Icons ============================================================ */
/* Lucide icons from assets/images/icons/, inlined with bfc_inline_svg().
   They draw in currentColor, so they take the colour of the text around them. */

.bfc-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
}

.bfc-icon svg {
	width: 100%;
	height: 100%;
}


/* ==== 9. Footer =========================================================== */
/* From the FooterUpper and "Footers / Footer Alfa" boards on Page 4 (copy). */

.site-footer {
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
}

.site-footer a {
	text-decoration-line: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration-line: underline;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* More side padding than the page gutter on phones; from 48rem on the
   footer lines up with the rest of the page again. */
.site-footer .bfc-container {
	padding-inline: var(--bfc-space-xl);
}

@media (min-width: 48rem) {
	.site-footer .bfc-container {
		padding-inline: var(--bfc-space-gutter);
	}
}

/* ---- Top: logo and contact ---- */

.site-footer__top {
	display: grid;
	gap: var(--bfc-space-gap-block);
	padding-block: var(--bfc-space-4xl);
}

.site-footer__logo svg {
	display: block;
	width: 100%;
	max-width: 12rem;
	height: auto;
	rotate: -4.2deg; /* the logo's board in Penpot is rotated 355.8° */
}

.site-footer__intro {
	margin-bottom: var(--bfc-space-gap-content);
}

.site-footer__heading {
	font-family: var(--bfc-text-heading-1-family);
	font-size: var(--bfc-text-heading-1-size);
	font-weight: var(--bfc-text-heading-1-weight);
	line-height: var(--bfc-text-heading-1-line-height);
	letter-spacing: var(--bfc-text-heading-1-letter-spacing);
	margin-bottom: var(--bfc-space-gap-content);
}

.site-footer__contact-list {
	display: grid;
	gap: var(--bfc-space-gap-content);
}

.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--bfc-space-s);
}

.site-footer__contact-item a {
	overflow-wrap: anywhere; /* long email addresses wrap on phones */
}

.site-footer__contact-label {
	display: block;
	font-family: var(--bfc-text-label-strong-family);
	font-size: var(--bfc-text-label-strong-size);
	font-weight: var(--bfc-text-label-strong-weight);
	line-height: var(--bfc-text-label-strong-line-height);
	letter-spacing: var(--bfc-text-label-strong-letter-spacing);
}

/* Side by side once there is room for the logo and the contact column. */
@media (min-width: 48rem) {
	.site-footer__top {
		grid-template-columns: auto 1fr;
		column-gap: var(--bfc-space-4xl);
	}

	.site-footer__logo svg {
		max-width: 17.5rem;
	}

	.site-footer__contact-item {
		gap: var(--bfc-space-xl);
	}

	/* The design steps the contact block in from the intro line. */
	.site-footer__contact {
		padding-left: var(--bfc-space-3xl);
	}
}

/* ---- Bottom: menu, copyright, legal links ---- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bfc-space-gap-content);
	padding-block: var(--bfc-space-m);
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bfc-space-2xs) var(--bfc-space-gap-content);
}

.site-footer__nav--main {
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-text-label-default-weight);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bfc-space-2xs) var(--bfc-space-gap-content);
	color: var(--bfc-color-text-inverse-muted);
	font-family: var(--bfc-text-caption-family);
	font-size: var(--bfc-text-caption-size);
	line-height: var(--bfc-text-caption-line-height);
}

.site-footer__copyright {
	margin: 0;
}


/* ==== 10. Buttons ========================================================= */
/* .bfc-button on a link or <button>. From "Sub-items / Atoms / Buttons" on
   Page 4 (copy). Square corners, the design default. */

.bfc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--bfc-space-control-y) var(--bfc-space-control-x);
	border: var(--bfc-border-width-thin) solid currentColor;
	border-radius: var(--bfc-radius-none);
	background-color: transparent;
	color: inherit;
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-text-label-default-weight);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
	text-decoration: none;
	cursor: pointer;
}

.bfc-button:hover,
.bfc-button:focus-visible {
	text-decoration-line: underline;
}

/* A light button for dark sections: "Read more" on the project cards. */
.bfc-button--light {
	border-color: var(--bfc-color-bg-default);
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
}

.bfc-button--light:hover,
.bfc-button--light:focus,
.bfc-button--light:active {
	color: var(--bfc-color-text-default);
}


/* ==== 11. Header ========================================================== */
/* From "Headers / Header Alfa" on Page 4 (copy): logo left, menu and
   language switch right. Transparent with dark text: on the home page it
   sits on the vivid gradient, elsewhere on white. */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px); /* WordPress's admin bar height, set when logged in */
	z-index: 30;
	background-color: transparent; /* GeneratePress makes it white */
	color: var(--bfc-color-text-default);
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrolled (assets/js/site.js): black with white text, slimmer, and a
   smaller logo. The size change is not animated (layout properties); the
   script keeps the page from jumping. The open phone menu (.is-menu-open)
   takes the same black, even at the top of the page. */
.site-header.is-compact,
.site-header.is-menu-open {
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
}

.site-header.is-compact .site-header__inner {
	padding-block: var(--bfc-space-2xs);
}

.site-header.is-compact .site-header__logo-full svg {
	width: 10rem;
}

/* Phones: one row, the logo and a menu button (needs .bfc-js, set in
   <head> before the page paints, so the layout never jumps; site.js does
   the opening). The button opens the right side (menu, language and
   motion switches) as a panel over the page, so nothing below moves.
   Without JavaScript the right side shows as on wider screens. Scrolled,
   the wordmark swaps to "BF" without the letter animation. */
.site-header__menu-toggle {
	display: none;
}

@media (max-width: 47.99rem) {
	.bfc-js .site-header .site-header__inner {
		flex-wrap: nowrap;
	}

	.bfc-js .site-header .site-header__menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;  /* 44px: a comfortable tap target */
		height: 2.75rem;
		margin-right: calc(-1 * var(--bfc-space-xs)); /* the icon, not the button's edge, lines up with the gutter */
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.bfc-js .site-header .site-header__menu-toggle:hover,
	.bfc-js .site-header .site-header__menu-toggle:focus {
		background: none;
		color: inherit;
	}

	/* Three bars that turn into an X. Transforms only; with motion off the
	   change is instant. */
	.site-header__menu-toggle-icon {
		position: relative;
		width: 1.375rem; /* 22px */
		height: 1rem;
	}

	.site-header__menu-toggle-icon > span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
		transition: transform 0.3s ease, opacity 0.2s ease;
	}

	.site-header__menu-toggle-icon > span:nth-child(1) { top: 0; }
	.site-header__menu-toggle-icon > span:nth-child(2) { top: calc(50% - 1px); }
	.site-header__menu-toggle-icon > span:nth-child(3) { bottom: 0; }

	.site-header.is-menu-open .site-header__menu-toggle-icon > span:nth-child(1) {
		transform: translateY(calc(0.5rem - 1px)) rotate(45deg);
	}

	.site-header.is-menu-open .site-header__menu-toggle-icon > span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.site-header.is-menu-open .site-header__menu-toggle-icon > span:nth-child(3) {
		transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg);
	}

	/* The panel: under the header row, over the page, black like the open
	   header above it. */
	.bfc-js .site-header .site-header__right {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bfc-space-l);
		padding: var(--bfc-space-m) var(--bfc-space-gutter) var(--bfc-space-xl);
		background-color: var(--bfc-color-bg-inverse);
		color: var(--bfc-color-text-inverse-default);
	}

	.site-header.is-menu-open .site-header__right {
		display: flex;
	}

	.bfc-js .site-header .site-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bfc-space-s);
		font-size: var(--bfc-font-size-l);
	}

	.site-header.is-compact .site-header__logo-full {
		display: none;
	}

	.site-header.is-compact .site-header__logo-short {
		position: static;
		display: block;
		width: 5.5rem;
	}
}

/* WordPress lets its admin bar scroll away below 600px, so the header
   sticks to the very top there (only matters when logged in). */
@media (max-width: 600px) {
	.site-header {
		top: 0;
	}
}


.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bfc-space-gap-related) var(--bfc-space-gap-group);
	padding: var(--bfc-space-m) var(--bfc-space-gutter);
}

.site-header__logo a {
	position: relative;
	display: block;
	color: inherit;
}

.site-header__logo svg {
	display: block;
	height: auto;
	overflow: visible; /* letters may move outside the box */
}

.site-header__logo-full svg {
	width: 12rem;
}

/* Logo morph (prototype effect 4). The short "BF" logo lies over the
   wordmark so its B and F land where the wordmark's are: the BF file is
   43.553% as wide (125.54 / 288.24 viewBox units) and starts 14.57 units
   further left (-5.055%). On scroll the wordmark's letters drop away one by
   one and BF fades in. With motion off the swap is instant. */
.site-header__logo-short {
	position: absolute;
	top: 0;
	left: -5.055%;
	width: 43.553%;
	opacity: 0;
	transform: scale(0.94);
	transform-origin: 0 50%;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.site-header__logo-short svg {
	width: 100%;
}

.site-header__logo-short .bfc-logo__symbol {
	display: none; /* the header logo has no starburst */
}

.site-header__logo-full .bfc-logo__letter {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: opacity 0.3s ease, transform 0.4s ease;
	transition-delay: calc(var(--bfc-letter-index, 0) * 25ms);
}

.site-header.is-compact .site-header__logo-full .bfc-logo__letter {
	opacity: 0;
	transform: translateY(-40%) rotate(-10deg);
}

.site-header.is-compact .site-header__logo-short {
	opacity: 1;
	transform: none;
	transition-delay: 0.2s;
}

/* Home page: no logo in the header at the top, since the hero shows the big
   one. Only "BF" appears, once the page scrolls; the open phone menu shows
   the full wordmark. Hidden, not just transparent, so the invisible link is
   skipped by keyboard and screen readers too. */
.page-template-page-home-php .site-header:not(.is-menu-open) .site-header__logo-full {
	visibility: hidden;
}

.page-template-page-home-php .site-header:not(.is-compact):not(.is-menu-open) .site-header__logo a {
	visibility: hidden;
}

.site-header__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bfc-space-gap-related) var(--bfc-space-gap-group);
}

.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bfc-space-2xs) var(--bfc-space-gap-content);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--bfc-text-body-default-family);
	font-size: var(--bfc-text-label-default-size);
}

.site-header__menu a {
	text-decoration-line: none;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible,
.site-header__menu .current-menu-item > a {
	text-decoration-line: underline;
}

/* Language switch: two boxes side by side, no outline. The current language
   is the high-contrast black box; the other is white with muted text. */
.bfc-lang-switcher {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-lang-switcher a {
	display: block;
	padding: var(--bfc-space-2xs) var(--bfc-space-xs);
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-muted);
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-font-size-xs);
	font-weight: var(--bfc-text-label-default-weight); /* regular, as a test (todo 2026-10-03) */
	line-height: var(--bfc-text-label-default-line-height);
	text-transform: uppercase;
	text-decoration-line: none;
}

.bfc-lang-switcher a:hover,
.bfc-lang-switcher a:focus-visible {
	color: var(--bfc-color-text-default);
	text-decoration-line: underline;
}

.bfc-lang-switcher .is-current a,
.bfc-lang-switcher .is-current a:hover {
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
	text-decoration-line: none;
}

/* Motion switch (Decision 014): two boxes like the language switch, the
   label white and the state black. aria-pressed="true" means motion is on. */
.bfc-motion-switch {
	display: inline-flex;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-font-size-xs);
	font-weight: var(--bfc-text-label-default-weight);
	line-height: var(--bfc-text-label-default-line-height);
	text-transform: uppercase;
	cursor: pointer;
}

.bfc-motion-switch[hidden] {
	display: none;
}

.bfc-motion-switch__label,
.bfc-motion-switch__state {
	display: block;
	padding: var(--bfc-space-2xs) var(--bfc-space-xs);
}

.bfc-motion-switch__label {
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
}

.bfc-motion-switch__state {
	min-width: 3.5em; /* "On" and "Off" take the same room */
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
	text-align: center;
}

.bfc-motion-switch:hover .bfc-motion-switch__label,
.bfc-motion-switch:focus-visible .bfc-motion-switch__label {
	text-decoration-line: underline;
}

.bfc-motion-switch[aria-pressed="true"] .bfc-motion-switch__off,
.bfc-motion-switch[aria-pressed="false"] .bfc-motion-switch__on {
	display: none;
}

/* Only announced when the system setting is what keeps motion off. */
.bfc-motion-switch:not(.is-off-by-system) .bfc-motion-switch__system-note {
	display: none;
}

/* On the black header (scrolled, or the phone menu open) the boxes swap
   colours. */
.site-header:is(.is-compact, .is-menu-open) .bfc-lang-switcher a,
.site-header:is(.is-compact, .is-menu-open) .bfc-motion-switch__state {
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-muted);
}

.site-header:is(.is-compact, .is-menu-open) .bfc-lang-switcher .is-current a,
.site-header:is(.is-compact, .is-menu-open) .bfc-motion-switch__label {
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
}

.site-header:is(.is-compact, .is-menu-open) .bfc-lang-switcher a:hover,
.site-header:is(.is-compact, .is-menu-open) .bfc-lang-switcher a:focus-visible,
.site-header:is(.is-compact, .is-menu-open) .bfc-motion-switch__state {
	color: var(--bfc-color-text-inverse-default);
}

.site-header:is(.is-compact, .is-menu-open) .bfc-lang-switcher .is-current a:hover {
	color: var(--bfc-color-text-default);
}

@media (min-width: 64rem) {
	.site-header__logo-full svg {
		width: 23rem; /* 367px in the design */
	}

	/* BF shows at 43.5% of this: about 6rem wide. */
	.site-header.is-compact .site-header__logo-full svg {
		width: 14rem;
	}

	.site-header__menu {
		font-size: var(--bfc-text-body-default-size);
	}

	/* Set the language switch apart from the menu. */
	.site-header__languages {
		margin-left: var(--bfc-space-xl);
	}
}


/* ==== 12. Project card ==================================================== */
/* template-parts/project-card.php. From "Cards / Card Charlie" on Page 4
   (copy). The whole card is clickable: the title link stretches over it. */

.bfc-project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bfc-space-gap-content);
}

.bfc-project-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 610 / 365;
	object-fit: cover;
}

.bfc-project-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bfc-space-gap-content);
}

.bfc-project-card__body > * {
	margin: 0;
}

.bfc-project-card__title a {
	text-decoration-line: none;
}

.bfc-project-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bfc-project-card:hover .bfc-project-card__title a {
	text-decoration-line: underline;
}

/* The focus outline goes round the whole card, since the link covers it. */
.bfc-project-card:has(.bfc-project-card__title a:focus-visible) {
	outline: var(--bfc-border-width-thick) solid currentColor;
	outline-offset: 4px;
}

.bfc-project-card__title a:focus-visible {
	outline: none;
}


/* ==== 15. Card Beta ======================================================= */
/* template-parts/project-card-beta.php. From "Cards / Card Beta" on Page 5
   (Penpot): two white pointed pieces | image | text, on black. Georgios's
   changes: the image's corners are cut, and cards in a list are staggered.
   The whole card is clickable. */

.bfc-card-beta {
	/* How much is cut off each corner of the image: width, then height.
	   A little taller than wide, so the cut slants like the pieces beside it.
	   0 means no cut. */
	--bfc-card-cut-bottom-left-x: var(--bfc-cut-x);
	--bfc-card-cut-bottom-left-y: var(--bfc-cut-y);
	--bfc-card-cut-top-right-x: 0rem;
	--bfc-card-cut-top-right-y: 0rem;

	position: relative;
	display: grid;
	gap: var(--bfc-space-gap-content);
}

.bfc-card-beta--cut-both {
	--bfc-card-cut-top-right-x: var(--bfc-cut-x);
	--bfc-card-cut-top-right-y: var(--bfc-cut-y);
}

/* On phones the pieces would squeeze the image; they appear from 48rem.
   The SVG only gives their shape (as a mask); their colour is
   --bfc-card-pieces-color, white unless a page sets another. */
.bfc-card-beta__decoration {
	display: none;
	width: 4.875rem; /* 78px */
	aspect-ratio: 78 / 190;
	background-color: var(--bfc-card-pieces-color, var(--bfc-color-bg-default));
	mask: url("assets/images/shapes/card-side-pieces.svg") 0 0 / 100% 100% no-repeat;
}

.bfc-card-beta__image img {
	display: block;
	width: 100%;
	aspect-ratio: 507 / 363;
	object-fit: cover;
	clip-path: polygon(
		0 0,
		calc(100% - var(--bfc-card-cut-top-right-x)) 0,
		100% var(--bfc-card-cut-top-right-y),
		100% 100%,
		var(--bfc-card-cut-bottom-left-x) 100%,
		0 calc(100% - var(--bfc-card-cut-bottom-left-y))
	);
}

.bfc-card-beta__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bfc-space-gap-related);
}

.bfc-card-beta__body > * {
	margin: 0;
}

.bfc-card-beta__when {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--bfc-space-l);
}

/* Montserrat semibold 24px in the design: the heading-3 style h3 already has. */
.bfc-card-beta__title a {
	text-decoration-line: none;
}

.bfc-card-beta__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bfc-card-beta:hover .bfc-card-beta__title a {
	text-decoration-line: underline;
}

.bfc-card-beta:has(.bfc-card-beta__title a:focus-visible) {
	outline: var(--bfc-border-width-thick) solid currentColor;
	outline-offset: 4px;
}

.bfc-card-beta__title a:focus-visible {
	outline: none;
}

.bfc-card-beta__text {
	margin-bottom: var(--bfc-space-gap-content);
}

/* Pieces | image | text, in the design's proportions (78 | 507 | 587 of
   1188), the button at the bottom of the text column. */
@media (min-width: 48rem) {
	.bfc-card-beta {
		grid-template-columns: auto minmax(0, 507fr) minmax(0, 587fr);
		column-gap: var(--bfc-space-s);
	}

	.bfc-card-beta__decoration {
		display: block;
	}

	.bfc-card-beta__body {
		height: 100%;
		padding-left: var(--bfc-space-2xs); /* 24px from the image in total, as in the design */
	}

	.bfc-card-beta__body .bfc-button {
		margin-top: auto;
	}
}

/* A list of Card Beta: one card further left, the next further right.
   The shift grows with the screen and is nothing on phones. */
.bfc-card-beta-list {
	--bfc-card-stagger: clamp(0rem, 8vw - 2.5rem, 6rem);
	display: grid;
	gap: var(--bfc-space-4xl);
}

.bfc-card-beta-list > :nth-child(odd) {
	margin-right: var(--bfc-card-stagger);
}

.bfc-card-beta-list > :nth-child(even) {
	margin-left: var(--bfc-card-stagger);
}

/* 'look' => 'stage': THE project card of the new look (Georgios,
   2026-10-04), built on the projects listing's rows: no button, the whole
   card is the link. The title as large as the credits' names (§ 6
   .bfc-text-name-large), the facts strip (§ 18) a size smaller than on the
   project page. */
.bfc-card-beta--stage .bfc-card-beta__body {
	gap: var(--bfc-space-s);
	/* Titles and taglines come from wp-admin: a long word breaks rather
	   than pushing the page wider than a phone's screen. */
	overflow-wrap: anywhere;
}

.bfc-card-beta--stage .bfc-card-beta__title {
	font-family: var(--bfc-text-heading-2-family);
	font-size: var(--bfc-text-heading-2-size);
	font-weight: var(--bfc-text-heading-2-weight);
	line-height: 1.05;
	letter-spacing: var(--bfc-text-heading-2-letter-spacing);
}

/* No underline on hover: the arrow and the photo's mask say "link". */
.bfc-card-beta--stage:hover .bfc-card-beta__title a {
	text-decoration-line: none;
}

.bfc-card-beta--stage .bfc-card-beta__text {
	margin-bottom: 0;
}

.bfc-card-beta--stage .bfc-facts {
	gap: var(--bfc-space-s) var(--bfc-space-xl);
}

.bfc-card-beta--stage .bfc-facts dd {
	font-size: var(--bfc-font-size-l);
}

/* Hover and keyboard focus: something extra, nothing essential. The arrow
   after the title is there but invisible until then, so the title never
   shifts; the photo takes one of the photo masks instead of its cut (the
   big photos' shapes, still, without their breathing) and grows a little. */
.bfc-card-beta__arrow {
	display: inline-block;
	opacity: 0;
	transform: translateX(-0.25em);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.bfc-card-beta--stage:hover .bfc-card-beta__arrow,
.bfc-card-beta--stage:focus-within .bfc-card-beta__arrow {
	opacity: 1;
	transform: none;
}

.bfc-card-beta--stage .bfc-card-beta__image img {
	transition: transform 0.4s ease;
}

.bfc-card-beta--stage:hover .bfc-card-beta__image img,
.bfc-card-beta--stage:focus-within .bfc-card-beta__image img {
	clip-path: none;
	mask: var(--bfc-photo-mask, url("assets/images/masks/hero-mask-01.svg")) 50% 50% / 100% 100% no-repeat;
	transform: scale(1.03);
}

/* With motion off (the switch, or the system setting), § 5 already stops
   every transition; the growing photo and the sliding arrow are movement
   even when instant, so they stay put. The mask and the arrow still show. */
.bfc-motion-off .bfc-card-beta--stage:hover .bfc-card-beta__image img,
.bfc-motion-off .bfc-card-beta--stage:focus-within .bfc-card-beta__image img,
.bfc-motion-off .bfc-card-beta--stage .bfc-card-beta__arrow {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bfc-card-beta--stage:hover .bfc-card-beta__image img,
	.bfc-card-beta--stage:focus-within .bfc-card-beta__image img,
	.bfc-card-beta--stage .bfc-card-beta__arrow {
		transform: none;
	}
}

/* 'number_in_series' and 'status_above_title' (the projects listing,
   variation B): "No. 04" in the display font, then the "Coming up" tag or
   the premiere's year as a label, on one line above the title. */
.bfc-card-beta__series-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bfc-space-2xs) var(--bfc-space-s);
}

.bfc-card-beta__number {
	font-family: var(--bfc-font-family-display);
	font-size: var(--bfc-text-heading-2-size);
	line-height: 1;
	letter-spacing: var(--bfc-text-display-letter-spacing);
}

.bfc-card-beta__year {
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
}

/* Side by side, the photo fills the card's height, cropped, so its bottom
   always meets the bottom of the text (Georgios, 2026-10-04): the photo
   is as tall as the text. The ::before keeps it from becoming a strip
   when the text is short: never wider than twice its height.
   Without the pointed pieces (every context but the home page's upcoming
   projects), the photo starts at the card's edge. */
@media (min-width: 48rem) {
	.bfc-card-beta--stage:not(.bfc-card-beta--side-pieces) {
		grid-template-columns: minmax(0, 507fr) minmax(0, 587fr);
	}

	.bfc-card-beta--stage .bfc-card-beta__image {
		position: relative;
	}

	.bfc-card-beta--stage .bfc-card-beta__image::before {
		content: "";
		display: block;
		aspect-ratio: 2 / 1;
	}

	.bfc-card-beta--stage .bfc-card-beta__image img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

/* A grid of Card Beta, each card upright: image above, text below, no side
   pieces. Three side by side on wide screens, the middle one lower, like
   the project essay's staggered photos. */
.bfc-card-beta-grid {
	display: grid;
	gap: var(--bfc-space-3xl) var(--bfc-space-xl);
	align-items: start;
}

.bfc-card-beta-grid .bfc-card-beta {
	grid-template-columns: minmax(0, 1fr);
}

.bfc-card-beta-grid .bfc-card-beta__decoration {
	display: none;
}

.bfc-card-beta-grid .bfc-card-beta__image::before {
	display: none;
}

.bfc-card-beta-grid .bfc-card-beta__image img {
	position: static;
	height: auto;
	aspect-ratio: 4 / 5;
}

.bfc-card-beta-grid .bfc-card-beta__body {
	padding-left: 0;
}

@media (min-width: 48rem) {
	.bfc-card-beta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.bfc-card-beta-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bfc-card-beta-grid > :nth-child(3n + 2) {
		margin-top: var(--bfc-space-4xl);
	}
}


/* ==== 16. The new look: frames, surfaces, cut corners ===================== */
/* Decision 015: an experiment beyond the Penpot design, not yet the
   direction. Layout and sizes still come from Penpot; these give a page the
   home page's look. Shown in the "Style guide (new look)" page. */

/* A frame that holds text, on the light amber gradient (over white, so it
   is never see-through). */
.bfc-frame {
	padding: var(--bfc-space-xl);
	background-color: var(--bfc-color-bg-default);
	background-image: var(--bfc-gradient-frame-amber);
	color: var(--bfc-color-text-default);
}

.bfc-frame > :last-child {
	margin-bottom: 0;
}

/* The same frame with coral and purple glowing in at the right edge. The
   glow covers the right 30%, so the frame keeps its text out of it. */
.bfc-frame--glow {
	padding-right: max(var(--bfc-space-xl), 28%);
	background-image: var(--bfc-gradient-frame-glow);
}

/* A full-width band with colour toward the edges, white in the middle. */
.bfc-surface-edges {
	background-color: var(--bfc-color-bg-default);
	background-image: var(--bfc-gradient-edges);
	color: var(--bfc-color-text-default);
}

/* Cut corners. A cut also clips anything that sticks out of the element
   (outlines, decorations): hang those on a parent instead. */
.bfc-cut-bottom-left {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bfc-cut-x) 100%, 0 calc(100% - var(--bfc-cut-y)));
}

.bfc-cut-top-left-bottom-right {
	clip-path: polygon(
		var(--bfc-cut-x) 0, 100% 0,
		100% calc(100% - var(--bfc-cut-y)), calc(100% - var(--bfc-cut-x)) 100%,
		0 100%, 0 var(--bfc-cut-y)
	);
}

.bfc-cut-top {
	clip-path: polygon(
		var(--bfc-cut-x) 0, calc(100% - var(--bfc-cut-x)) 0,
		100% var(--bfc-cut-y), 100% 100%,
		0 100%, 0 var(--bfc-cut-y)
	);
}

/* A decorative slanted shape (the hero's outline) filled with the purple
   gradient. Give it a size and place it behind content; it carries no text. */
.bfc-shape-purple {
	background-image: var(--bfc-gradient-shape);
	mask: url("assets/images/shapes/hero-black-shape.svg") 0 0 / 100% 100% no-repeat;
}

/* A big photo cut to one of Georgios's mask shapes (assets/images/masks/).
   The mask stretches to the photo's box; the photo itself never stretches
   (give the img object-fit: cover and an aspect-ratio). site.js swaps in a
   random mask on each page load from data-bfc-photo-masks
   (bfc_photo_mask_urls()). Used by the home hero and the project page. */
.bfc-photo-masked img {
	mask: var(--bfc-photo-mask, url("assets/images/masks/hero-mask-01.svg")) 50% 50% / 100% 100% no-repeat;
	/* The mask breathes: it grows about 3% and drifts a little, slowly.
	   Animating a mask repaints the photo each frame, so it stays slow and
	   small, and site.js pauses it while the photo is off screen. Motion
	   off (§ 5) stops it at its starting shape. */
	animation: bfc-photo-mask-breathe 14s ease-in-out infinite;
}

.bfc-photo-masked.is-off-screen img {
	animation-play-state: paused;
}

@keyframes bfc-photo-mask-breathe {
	50% {
		mask-size: 103% 102%;
		mask-position: 46% 54%;
	}
}

/* The vivid gradient behind the header and the top of a page, then black.
   Put .bfc-top-gradient on <main> and data-bfc-top-gradient-end on the last
   element that sits on the gradient; site.js measures where it ends. The
   home page does the same in its own way (home.css, home.js). */
body:has(.bfc-top-gradient) {
	background-color: var(--bfc-color-bg-inverse);
	background-image: var(--bfc-gradient-vivid);
	background-size: 100% var(--bfc-top-gradient-height, 70rem);
	background-repeat: no-repeat;
}


/* A spiky top edge, for black bands that rise over what is above them (the
   project page variations' title and facts bands). Straight edges only. The
   spikes take --bfc-spike-height off the top of the element: its padding
   keeps the content below them. A clip-path, so the converter reads it. */
.bfc-edge-spiky-top {
	--bfc-spike-height: var(--bfc-space-2xl);
	padding-top: calc(var(--bfc-spike-height) + var(--bfc-space-xl));
	clip-path: polygon(
		0 var(--bfc-spike-height),
		7% calc(var(--bfc-spike-height) * 0.45),
		11% var(--bfc-spike-height),
		24% 0,
		30% var(--bfc-spike-height),
		52% calc(var(--bfc-spike-height) * 0.6),
		58% var(--bfc-spike-height),
		77% calc(var(--bfc-spike-height) * 0.15),
		83% var(--bfc-spike-height),
		100% calc(var(--bfc-spike-height) * 0.5),
		100% 100%,
		0 100%
	);
}

@media (min-width: 64rem) {
	.bfc-edge-spiky-top {
		--bfc-spike-height: var(--bfc-space-4xl);
	}
}

/* Reveal on scroll (home.js § 5, project.js): blocks start visible. Only
   those still below the screen when the page loads wait, and only while
   motion is allowed: slightly lower and at 60% opacity, never invisible
   (Decision 014). They settle as they arrive. */
.bfc-reveal {
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: calc(var(--bfc-reveal-index, 0) * 120ms);
}

@media (prefers-reduced-motion: no-preference) {
	:root:not(.bfc-motion-off) .bfc-reveal.is-waiting {
		opacity: 0.6;
		transform: translateY(var(--bfc-space-l));
	}
}


/* ==== 17. Consent banner (Complianz) ====================================== */
/* Square corners, like everything else on the site (Georgios, 2026-10-04).
   Complianz takes its corners from these variables; the banner's own
   settings in wp-admin may say otherwise, and this wins. "body" makes the
   rules outrank Complianz's, whichever stylesheet loads last. */

body .cmplz-cookiebanner,
body .cmplz-manage-consent {
	--cmplz_banner_border_radius: 0;
	--cmplz_button_border_radius: 0;
	border-radius: 0;
}

body .cmplz-cookiebanner .cmplz-btn {
	border-radius: 0;
}


/* ==== 18. Project pieces ================================================== */
/* Shared by the project page variations (single-project.php,
   template-parts/project-*.php), shown in the "Style guide (new look)".
   Each takes its colours from where it sits: white on black, black on the
   amber frames. */

/* ---- Facts: a small label over a large value (template-parts/project-facts.php) ---- */

.bfc-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bfc-space-l) var(--bfc-space-2xl);
	margin: 0;
}

.bfc-facts dt {
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-text-label-default-weight);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
}

.bfc-facts dd {
	margin: 0;
	font-family: var(--bfc-font-family-display);
	font-size: var(--bfc-text-heading-1-size);
	line-height: 1;
}

.bfc-facts__detail {
	display: block;
	margin-top: var(--bfc-space-2xs);
	font-family: var(--bfc-text-body-small-family);
	font-size: var(--bfc-text-body-small-size);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-text-body-small-line-height);
}

/* ---- Tags: "Premiere", "Coming up" ---- */

.bfc-tag {
	display: inline-block;
	padding: 0 var(--bfc-space-2xs);
	border: var(--bfc-border-width-thin) solid currentColor;
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
	white-space: nowrap;
}

/* The gradient's green: about 15:1 under black text. */
.bfc-tag--highlight {
	border-color: var(--bfc-color-gradient-vivid-2);
	background-color: var(--bfc-color-gradient-vivid-2);
	color: var(--bfc-color-text-default);
}

/* ---- Date rows (template-parts/project-date-rows.php) ---- */

.bfc-date-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-date-rows__row {
	display: grid;
	gap: var(--bfc-space-2xs) var(--bfc-space-l);
	padding-block: var(--bfc-space-s);
	border-top: var(--bfc-border-width-thin) solid currentColor;
}

.bfc-date-rows__day {
	font-family: var(--bfc-font-family-display);
	font-size: var(--bfc-text-heading-1-size);
	line-height: 1;
	white-space: nowrap; /* a date never breaks inside */
}

.bfc-date-rows__details p {
	margin: 0;
}

.bfc-date-rows__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bfc-space-2xs);
}

.bfc-date-rows__venue {
	font-weight: var(--bfc-font-weight-semibold);
}

.bfc-date-rows__address {
	font-size: var(--bfc-text-body-small-size);
	line-height: var(--bfc-text-body-small-line-height);
}

/* 'show_project_title': the project's name on each date, a link in the
   text's colour. Long titles break anywhere rather than widen the page. */
.bfc-date-rows__project {
	font-weight: var(--bfc-font-weight-semibold);
	overflow-wrap: anywhere;
}

.bfc-date-rows__project a {
	color: inherit;
}

/* 'filter_view': a date the filter leaves out (the row's display: grid
   would otherwise win over the hidden attribute). */
.bfc-date-rows__row[hidden] {
	display: none;
}

/* Room for the date and the details side by side. */
@media (min-width: 30rem) {
	.bfc-date-rows__row {
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: start;
	}
}

/* Grid: each date a block, side by side, no lines and no frame: the text
   takes the colour of where it sits (Georgios, 2026-10-04: the straight
   dividers did not fit the look, nor did amber cards). Day above the
   details whatever the width. */
.bfc-date-rows--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--bfc-space-2xl) var(--bfc-space-xl);
}

.bfc-date-rows--grid .bfc-date-rows__row {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	padding: 0;
	border-top: 0;
}

.bfc-date-rows__more > .bfc-date-rows--grid {
	margin-top: var(--bfc-space-s);
}

.bfc-date-rows__more > summary {
	margin-top: var(--bfc-space-s);
	list-style: none;
}

.bfc-date-rows__more > summary::-webkit-details-marker {
	display: none;
}

.bfc-date-rows__more[open] > summary {
	margin-bottom: var(--bfc-space-s);
}

/* ---- Credits, the people large (template-parts/project-credits-large.php) ---- */

.bfc-credits-large {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--bfc-space-xl) var(--bfc-space-2xl);
	margin: 0;
}

.bfc-credits-large dt {
	margin-bottom: var(--bfc-space-2xs);
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-text-label-default-line-height);
	letter-spacing: var(--bfc-text-label-default-letter-spacing);
	text-transform: var(--bfc-text-label-default-text-transform);
}

/* The names: .bfc-text-name-large (§ 6). */
.bfc-credits-large dd {
	margin: 0;
}

/* ---- Funders on the edges band (template-parts/project-funders-band.php) ---- */
/* The band's colour is at the screen's edges; the funders sit in an amber
   frame in the middle, so no text ever lands on the purple or green. */

.bfc-funders-band {
	padding-block: var(--bfc-space-3xl);
}

.bfc-funders-band__inner {
	display: grid;
	gap: var(--bfc-space-l);
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

.bfc-funders-band__title {
	margin: 0;
	font-size: var(--bfc-text-heading-2-size);
	line-height: var(--bfc-text-heading-2-line-height);
}

.bfc-funders-band__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--bfc-space-s) var(--bfc-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-funders-band__funder img {
	display: block;
	width: auto;
	max-width: 12rem;
	height: 3.5rem;
	object-fit: contain;
}

.bfc-funders-band__name {
	font-weight: var(--bfc-font-weight-semibold);
}

/* Partners: under the funders, a step down (Georgios, 2026-10-05). */
.bfc-funders-band__subtitle {
	margin: var(--bfc-space-s) 0 0;
	font-family: var(--bfc-text-label-default-family);
	font-size: var(--bfc-text-label-default-size);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-text-label-default-line-height);
}

.bfc-funders-band__list--partners .bfc-funders-band__funder img {
	max-width: 9rem;
	height: 2.5rem;
}

.bfc-funders-band__funder a {
	color: inherit;
}

.bfc-funders-band__text > :last-child {
	margin-bottom: 0;
}

/* ---- The invitation at the end (template-parts/project-invite.php) ---- */

.bfc-invite {
	padding-block: var(--bfc-space-4xl);
}

.bfc-invite__frame {
	max-width: 60rem;
	padding-block: var(--bfc-space-2xl);
}

.bfc-invite__title {
	margin-bottom: var(--bfc-space-s);
	font-size: var(--bfc-text-display-size);
	line-height: var(--bfc-text-display-line-height);
}

.bfc-invite__text {
	font-size: var(--bfc-font-size-l);
}

.bfc-invite__button {
	text-transform: none;
	overflow-wrap: anywhere;
}

/* On phones the glow's empty right edge would leave the text too narrow. */
@media (max-width: 47.99rem) {
	.bfc-invite__frame.bfc-frame--glow {
		padding-right: var(--bfc-space-xl);
		background-image: var(--bfc-gradient-frame-amber);
	}
}

@media (min-width: 48rem) {
	.bfc-invite__frame {
		padding: var(--bfc-space-3xl) max(var(--bfc-space-3xl), 28%) var(--bfc-space-3xl) var(--bfc-space-3xl);
	}
}

/* ---- Full-screen photo viewer (template-parts/photo-viewer.php, site.js § 6) ---- */
/* Black, the photo as large as fits, square white buttons: close top right,
   previous and next at the sides (at the bottom on phones). */

.bfc-photo-viewer {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--bfc-space-4xl) var(--bfc-space-s) calc(var(--bfc-space-4xl) + var(--bfc-space-xl));
	border: 0;
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
}

.bfc-photo-viewer::backdrop {
	background-color: var(--bfc-color-bg-inverse);
}

/* The page behind does not scroll while the viewer is open. */
html:has(.bfc-photo-viewer[open]) {
	overflow: hidden;
}

.bfc-photo-viewer__figure {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: var(--bfc-space-s);
	width: 100%;
	height: 100%;
	margin: 0;
}

.bfc-photo-viewer__image {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
}

.bfc-photo-viewer__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--bfc-space-s);
	font-size: var(--bfc-text-body-small-size);
	text-align: center;
}

.bfc-photo-viewer__button {
	position: absolute;
	display: grid;
	place-items: center;
	width: var(--bfc-space-2xl);
	height: var(--bfc-space-2xl);
	padding: 0;
	border: 0;
	border-radius: var(--bfc-radius-none);
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
	font-family: var(--bfc-font-family-display);
	font-size: var(--bfc-text-heading-2-size);
	line-height: 1;
	cursor: pointer;
}

/* GeneratePress greys buttons on hover and focus: keep them white. */
.bfc-photo-viewer__button:hover,
.bfc-photo-viewer__button:focus {
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
}

/* The outline in white, so it shows on the black around the button. */
.bfc-photo-viewer__button:focus-visible {
	outline-color: var(--bfc-color-text-inverse-default);
}

.bfc-photo-viewer__button--close {
	top: var(--bfc-space-s);
	right: var(--bfc-space-s);
}

.bfc-photo-viewer__button--previous {
	bottom: var(--bfc-space-s);
	left: var(--bfc-space-s);
}

.bfc-photo-viewer__button--next {
	right: var(--bfc-space-s);
	bottom: var(--bfc-space-s);
}

.bfc-photo-viewer__button[hidden] {
	display: none;
}

@media (min-width: 48rem) {
	.bfc-photo-viewer {
		padding: var(--bfc-space-3xl) calc(var(--bfc-space-2xl) + var(--bfc-space-xl)) var(--bfc-space-xl);
	}

	.bfc-photo-viewer__button--previous,
	.bfc-photo-viewer__button--next {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
}