/*
 * Home page layout (page-home.php). Loaded on that page only, by
 * inc/enqueue.php. From Page 4 (copy) in Penpot. Shared pieces (buttons,
 * project card, calendar row, header, footer) live in style.css.
 *
 * Mobile first; the wide layout starts where the hero's two columns fit.
 */

/* The vivid gradient runs as one piece behind the header, hero and pillars,
   as in Penpot. It sits on <body> and ends at the bottom of the pillars:
   assets/js/home.js measures that height; without JavaScript it falls back
   to 110rem. Below it the page is black. */
.page-template-page-home-php {
	background-color: var(--bfc-color-bg-inverse);
	background-image: var(--bfc-gradient-vivid);
	background-size: 100% var(--bfc-home-top-gradient-height, 110rem);
	background-repeat: no-repeat;
}

.bfc-home {
	color: var(--bfc-color-text-default);
}


/* ==== Announcement bar (template-parts/announcement-bar.php) ============== */
/* One line that scrolls slowly to the left (prototype effect 1). The track
   holds the announcement several times; it moves by half its length and
   starts over, which looks seamless because both halves are the same. */

.bfc-announce {
	display: flex;
	align-items: center;
	gap: var(--bfc-space-gap-related);
	padding-right: var(--bfc-space-gutter);
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
}

.bfc-announce__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.bfc-announce__track {
	display: flex;
	width: max-content;
	font-size: var(--bfc-font-size-xs); /* smaller than text.callout (Georgios, 2026-10-03) */
	white-space: nowrap;
	text-transform: uppercase;
}

/* home.js adds .is-moving, so without JavaScript (and so without the pause
   button) the line stands still. */
.bfc-announce.is-moving .bfc-announce__track {
	animation: bfc-announce-slide var(--bfc-announce-duration, 60s) linear infinite; /* home.js sets the duration */
}

/* Paused by the button, and while the pointer or keyboard focus is on it. */
.bfc-announce.is-paused .bfc-announce__track,
.bfc-announce__viewport:hover .bfc-announce__track,
.bfc-announce__viewport:focus-within .bfc-announce__track {
	animation-play-state: paused;
}

@keyframes bfc-announce-slide {
	to { transform: translateX(-50%); }
}

.bfc-announce__item {
	display: flex;
	gap: var(--bfc-space-2xs);
	padding: var(--bfc-space-2xs);
	text-decoration-line: none;
}

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

.bfc-announce__toggle {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--bfc-space-2xs);
	padding: var(--bfc-space-2xs) var(--bfc-space-xs);
	border: 0;
	border-radius: 0;
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
	font-family: var(--bfc-text-caption-family);
	font-size: var(--bfc-text-caption-size);
	line-height: var(--bfc-text-caption-line-height);
	cursor: pointer;
}

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

.bfc-announce__toggle:hover,
.bfc-announce__toggle:focus {
	background-color: var(--bfc-color-bg-inverse);
	color: var(--bfc-color-text-inverse-default);
	text-decoration-line: underline;
}

/* Pause icon: two bars. Play icon: a triangle. Drawn in CSS. */
.bfc-announce__toggle-icon {
	width: var(--bfc-space-xs);
	height: var(--bfc-space-xs);
	border-inline: calc(var(--bfc-space-xs) / 3) solid currentColor;
}

.bfc-announce.is-paused .bfc-announce__toggle-icon {
	border-inline: 0;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Motion off: hidden entirely, for screen readers too. A ticker that stands
   still would have to wrap, which breaks the design, and the same project
   is listed further down the page. */
@media (prefers-reduced-motion: reduce) {
	.bfc-announce {
		display: none;
	}
}

.bfc-motion-off .bfc-announce {
	display: none;
}


/* ==== Hero ================================================================ */

.bfc-home__hero {
	display: grid;
	gap: var(--bfc-space-gap-block);
	padding-top: var(--bfc-space-xl);
	overflow-x: clip; /* the black shape runs a few pixels past the right edge */
}

/* Symbol | logo and phrase. Everything is sized from one number, the
   phrase's font size (--bfc-hero-phrase-size), in Penpot's ratios: logo
   316px = 6.58 × the 48px phrase, gaps 16px = a third of it. Each breakpoint
   changes only that number, so the composition shrinks as one piece. */
.bfc-home__hero-tagline {
	--bfc-hero-phrase-size: clamp(1.125rem, 5.5vw, 1.5rem); /* stays below the two-column size */
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end; /* the symbol's bottom sits on the phrase's last line */
	gap: var(--bfc-space-gap-content) calc(var(--bfc-hero-phrase-size) / 3);
	padding-inline: var(--bfc-space-xl);
	font-size: var(--bfc-hero-phrase-size);
}

/* Test: the pillars under the phrase instead of the white cards
   ($show_pillars_as_hero_titles in page-home.php). Titles in the phrase's
   font; each pillar's text below its title. */
.bfc-home__hero-pillars {
	grid-column: 2;
	width: 0;
	min-width: 100%; /* as wide as the logo, without widening the column */
}

.bfc-home__hero-pillars-list {
	display: grid;
	gap: var(--bfc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-home__hero-pillar-title {
	display: block;
	font-family: var(--bfc-text-heading-1-family);
	font-size: 0.75em;
	line-height: var(--bfc-text-heading-1-line-height);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The text sits in a one-row grid so it can open and close smoothly
   (0fr to 1fr). Open unless home.js makes the block collapsible: so on
   phones, with motion off and without JavaScript, every text shows. */
.bfc-home__hero-pillar-text {
	display: grid;
	grid-template-rows: 1fr;
	font-family: var(--bfc-text-body-default-family);
	font-size: var(--bfc-font-size-xs); /* 16px */
	line-height: var(--bfc-text-body-default-line-height);
	transition: grid-template-rows 0.5s ease, opacity 0.5s ease;
}

.bfc-home__hero-pillar-text > p {
	min-height: 0;
	overflow: hidden;
	margin: 0;
}

.bfc-home__hero-pillars.is-collapsible .bfc-home__hero-pillar:not(.is-open) .bfc-home__hero-pillar-text {
	grid-template-rows: 0fr;
	opacity: 0;
}

/* Phones: titles only (Georgios, 2026-10-03). The texts stay readable to
   screen readers, hidden the way .screen-reader-text hides things. */
@media (max-width: 63.99rem) {
	.bfc-home__hero-pillar-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* A small triangle pointing down, inviting to scroll. Only with the
   collapsible block; it fades once the page scrolls. */
.bfc-home__scroll-hint {
	display: none;
	width: 0.9rem;
	height: 0.6rem;
	margin-top: var(--bfc-space-s);
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transition: opacity 0.4s ease;
}

.bfc-home__hero-pillars.is-collapsible .bfc-home__scroll-hint {
	display: block;
}

.bfc-home__hero-pillars.is-scrolled .bfc-home__scroll-hint {
	opacity: 0;
}

/* The starburst is white in the design. It keeps its proportions:
   assets/js/home.js gives it the height of logo plus phrase, so its top
   lines up with the logo's top too. Without JavaScript it has a fixed
   height and only the bottom lines up. */
.bfc-home__hero-symbol {
	color: var(--bfc-color-bg-default);
}

.bfc-home__hero-symbol svg {
	display: block;
	width: auto;
	height: var(--bfc-hero-symbol-height, 5em);
}

/* Phones and tablets: logo and phrase side by side, the phrase broken into
   short lines and its bottom on the logo's bottom. */
.bfc-home__hero-heading {
	display: flex;
	align-items: flex-end;
	gap: calc(var(--bfc-hero-phrase-size) / 3);
	margin: 0;
	font-size: inherit; /* the phrase size, not the h1 size, so em works */
	text-transform: uppercase;
}

.bfc-home__hero-logo {
	flex-shrink: 0;
	display: block;
	width: 7em;
}

.bfc-home__hero-logo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible; /* letters arrive from just outside the box */
}

/* Logo assembles on load (prototype effect 2). Unlike the prototype,
   nothing is ever invisible (Decision 014): from the first paint the letters
   sit only slightly out of place, at full opacity, so the logo reads. Once
   the fonts are ready, home.js adds .is-assembled to the tagline and the
   letters and the starburst move into place together, transform only.
   The start state needs .bfc-js (set in <head> by inc/enqueue.php) and
   motion allowed; otherwise the logo is simply shown finished.
   Each word comes from its own side; letters follow their reading order
   (--bfc-letter-index, set in the SVG). */
.bfc-home__hero-logo .bfc-logo__bright    { --bfc-piece-offset: 0;  --bfc-arrive-x: 0%;   --bfc-arrive-y: -40%; --bfc-arrive-rotate: -14deg; }
.bfc-home__hero-logo .bfc-logo__future    { --bfc-piece-offset: 6;  --bfc-arrive-x: -30%; --bfc-arrive-y: 0%;   --bfc-arrive-rotate: 10deg; }
.bfc-home__hero-logo .bfc-logo__kollektiv { --bfc-piece-offset: 12; --bfc-arrive-x: 0%;   --bfc-arrive-y: 45%;  --bfc-arrive-rotate: 8deg; }

.bfc-home__hero-logo .bfc-logo__letter {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
	transition-delay: calc((var(--bfc-piece-offset) + var(--bfc-letter-index)) * 35ms);
}

/* About as long as all the letters together (21 × 35ms + 0.6s). */
.bfc-home__hero-symbol svg {
	transition: transform 1.3s cubic-bezier(0.3, 1.2, 0.5, 1);
}

@media (prefers-reduced-motion: no-preference) {
	:root.bfc-js:not(.bfc-motion-off) .bfc-home__hero-tagline:not(.is-assembled) .bfc-logo__letter {
		transform: translate(var(--bfc-arrive-x), var(--bfc-arrive-y)) rotate(var(--bfc-arrive-rotate)) scale(0.85);
	}

	:root.bfc-js:not(.bfc-motion-off) .bfc-home__hero-tagline:not(.is-assembled) .bfc-home__hero-symbol svg {
		transform: rotate(-180deg) scale(0.6);
	}
}

/* hyphens: manual: German's long compounds ("Künstlerinnenkollektiv") are
   wider than the logo the phrase is held to. They break only where the text
   has a soft hyphen, between the compound's parts ("Künstlerinnen-kollektiv",
   in the German Home page's field); the browser's own guess was
   "Künstlerinnenkol-lektiv" (Georgios, 2026-10-04). */
.bfc-home__hero-punchline {
	display: block;
	max-width: 7em;
	font-size: 1em;
	line-height: var(--bfc-text-heading-1-line-height);
	hyphens: manual;
}

/* Photo and intro text. The white is on the intro itself, so the black
   shape behind the panel (wide screens, below) can show around it. */
.bfc-home__hero-panel {
	position: relative;
	isolation: isolate; /* keeps the shape's z-index: -1 inside the panel */
	color: var(--bfc-color-text-default);
}

.bfc-home__hero-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1272 / 741;
	object-fit: cover;
	/* The mask and its breathing: .bfc-photo-masked, style.css § 16. */
}

.bfc-home__hero-intro {
	/* Bottom-left corner cut, the same size as the other cuts. */
	--bfc-intro-cut-x: var(--bfc-cut-x);
	--bfc-intro-cut-y: var(--bfc-cut-y);
	position: relative;
	padding: var(--bfc-space-xl); /* padding, so the white panel runs behind it */
	background-color: var(--bfc-color-bg-default);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--bfc-intro-cut-x) 100%,
		0 calc(100% - var(--bfc-intro-cut-y))
	);
}

.bfc-home__hero-intro > * {
	max-width: 46rem;
}

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

/* Experiment ($hero_intro_on_soft_gradient in page-home.php): the intro on
   a gradient instead of plain white. Under the text it stays a light amber
   (the amber at the top left of the page's background), so contrast stays
   high; the background's coral and purple only glow in at the right edge.
   The white background stays underneath, so it is never see-through. */
.bfc-home__hero--soft-intro .bfc-home__hero-intro {
	background-image: var(--bfc-gradient-frame-glow); /* style.css § 2 */
}

/* Two columns: tagline left, panel running to the right edge. */
@media (min-width: 64rem) {
	/* Smaller than the design (Georgios, 2026-10-03), for negative space:
	   a wider gap between the columns. The panel runs to the right edge. */
	.bfc-home__hero {
		grid-template-columns: auto 1fr;
		gap: var(--bfc-space-2xl);
		padding-top: var(--bfc-space-4xl);
	}

	/* In the design the symbol starts 8.5% of the width in from the left.
	   The phrase is 40px at 1920 (48px in the design) and shrinks with the
	   screen. The column runs the hero's full height, so the pillars below
	   can travel down with the page. */
	.bfc-home__hero-tagline {
		--bfc-hero-phrase-size: clamp(1.375rem, 2.1vw, 2.5rem);
		align-self: stretch;
		grid-template-rows: auto 1fr;
		padding-left: clamp(var(--bfc-space-3xl), 8.5vw, 10rem);
		padding-right: 0;
	}

	/* The pillars' area runs from below the phrase to the end of the column
	   (the bottom of the intro frame). Inside it the pillars stick 2rem above
	   the bottom of the screen. A sticky element never leaves its parent, so
	   they can't ride up over the phrase, and they stop at the frame's end. */
	.bfc-home__hero-pillars {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-self: stretch;
	}

	.bfc-home__hero-pillars-inner {
		position: sticky;
		bottom: var(--bfc-space-xl);
		padding-right: var(--bfc-space-l); /* clear of the white pieces beside the intro */
	}

	.bfc-home__hero-symbol svg {
		height: var(--bfc-hero-symbol-height, 9em); /* without JavaScript: about logo plus three lines */
	}

	/* Logo above the phrase, the phrase as wide as the logo. A word wider
	   than the logo (German "Künstlerinnenkollektiv", where the browser
	   can't hyphenate) widens the column instead of running into the
	   photo, so the gap before the photo stays. */
	.bfc-home__hero-heading {
		flex-direction: column;
		align-items: flex-start;
		width: 6.58em;
		min-width: min-content;
	}

	.bfc-home__hero-logo {
		width: 100%;
	}

	.bfc-home__hero-punchline {
		max-width: none;
	}

	.bfc-home__hero-intro {
		padding: var(--bfc-space-xl) var(--bfc-space-3xl) var(--bfc-space-2xl);
	}

	/* On narrower desktops the intro text is short and the pillars' column
	   runs longer, so the pillar shape ended far below the frame (Georgios,
	   2026-10-05). The panel stretches to the column's height; the frame
	   takes what is left below the photo, as if its bottom padding grew, so
	   its bottom meets the shape's. When the intro is the taller side,
	   nothing changes. */
	.bfc-home__hero-panel {
		display: flex;
		flex-direction: column;
	}

	.bfc-home__hero-intro {
		flex-grow: 1;
	}

	/* ---- Background shapes, from Penpot (planning/specs/home-page/penpot-shapes/) ---- */
	/* Only in the two-column layout: on phones the panel is full width and
	   the shapes would have nowhere to show. */

	/* Black slanted shape behind photo and intro. Placed in percentages of
	   the panel (1272 x 1143 in the design), so it keeps hugging the panel's
	   edges whatever the intro's length: it shows above the photo on the
	   right and down past the intro's left edge. */
	.bfc-home__hero-panel::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -4.86% -0.39% -5.73% -3.85%;
		background: url("../images/shapes/hero-black-shape.svg") 0 0 / 100% 100% no-repeat;
	}

	/* Two white pointed pieces 12px left of the intro, from its top. They
	   hang on the panel, not the intro, so the intro's cut corners don't clip
	   them. The intro starts below the photo, whose height is 741/1272 of the
	   panel's width: a percentage margin-top measures exactly that. */
	.bfc-home__hero-panel::after {
		content: "";
		position: absolute;
		top: 0;
		left: -4.375rem;  /* 12px gap + 58px width */
		width: 3.625rem;  /* 58px */
		height: 24rem;    /* 384px */
		margin-top: 58.255%;
		background: url("../images/shapes/hero-white-decoration.svg") 0 0 / 100% 100% no-repeat;
	}

	/* Test ($hero_black_shape_hidden in page-home.php): no black shape. */
	.bfc-home__hero--no-shape .bfc-home__hero-panel::before {
		display: none;
	}

	/* Experiment, continued: no white pieces or grey strip, so the pillars
	   need no room for them. */
	.bfc-home__hero--soft-intro .bfc-home__hero-pillars-inner {
		padding-right: 0;
	}

	.bfc-home__hero--soft-intro .bfc-home__hero-intro::before,
	.bfc-home__hero--soft-intro .bfc-home__hero-panel::after {
		display: none;
	}

	/* A light grey strip, 47px wide, along the text's height at the
	   intro's left edge. */
	.bfc-home__hero-intro::before {
		content: "";
		position: absolute;
		top: var(--bfc-space-xl);
		bottom: var(--bfc-space-2xl);
		left: 0;
		width: 2.9375rem; /* 47px */
		background-color: var(--bfc-color-neutral-lighter); /* #f5f5f5; no role token fits a decoration */
	}
}


/* ==== Pillars ============================================================= */

.bfc-home__pillars {
	padding-block: var(--bfc-space-section-y) var(--bfc-space-4xl);
	overflow-x: clip; /* the bands behind the cards stick out to the sides */
}

.bfc-home__pillars-list {
	display: grid;
	gap: var(--bfc-space-gap-group);
	margin: 0;
	padding: 0;
	list-style: none;
	isolation: isolate; /* keeps the bands' z-index: -1 inside the list */
}

.bfc-home__pillar {
	position: relative;
	padding: var(--bfc-space-xl) var(--bfc-space-s);
	background-color: var(--bfc-color-bg-default);
	color: var(--bfc-color-text-default);
}

.bfc-home__pillar-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: var(--bfc-text-heading-2-line-height);
	letter-spacing: var(--bfc-text-heading-2-letter-spacing);
	text-transform: uppercase;
	margin-bottom: var(--bfc-space-gap-related);
}

.bfc-home__pillar p {
	margin: 0;
}

/* A dark slanted band behind each card, from Penpot: 463 x 173 behind a
   419 x 214 card, sticking out 5% to each side and 12px above. */
.bfc-home__pillar::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -0.75rem;
	left: -5.4%;
	right: -5.1%;
	height: 81%;
	background: url("../images/shapes/pillar-shape.svg") 0 0 / 100% 100% no-repeat;
}

@media (min-width: 48rem) {
	.bfc-home__pillars-list {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ==== Supporters ========================================================== */

.bfc-home__supporters {
	padding-block: var(--bfc-space-xl);
	background-color: var(--bfc-color-bg-default);
	/* Purple, yellow and green from left to right, with a white glow over
	   the middle: the colour shows toward the edges, the logos and heading
	   sit on near-white. */
	background-image: var(--bfc-gradient-edges); /* style.css § 2 */
	color: var(--bfc-color-text-default);
	text-align: center;
}

.bfc-home__supporters-heading {
	margin-bottom: var(--bfc-space-s);
}

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

.bfc-home__supporter img {
	display: block;
	width: auto;
	max-width: 9rem;
	max-height: 3rem;
	object-fit: contain;
}


/* ==== Projects: upcoming calendar, or the picked projects ================= */

.bfc-home__projects-heading {
	margin-bottom: var(--bfc-space-gap-block);
	text-align: center;
	text-transform: uppercase;
}

.bfc-home__projects-list {
	display: grid;
	gap: var(--bfc-space-gap-block) var(--bfc-space-l);
	align-items: start;
}

@media (min-width: 48rem) {
	.bfc-home__projects-list {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ==== Who we are ========================================================== */

.bfc-home__about {
	/* How far the group photo overlaps the "Who we are" frame. The frame's
	   padding and the photo's position both read it. */
	--bfc-about-photo-tuck: var(--bfc-space-2xl);
}

.bfc-home__about-intro {
	/* Behind the group photo, which overlaps its bottom. */
	position: relative;
	/* Top-left and bottom-right corners cut, like Card Beta's image. */
	--bfc-about-cut-x: var(--bfc-cut-x);
	--bfc-about-cut-y: var(--bfc-cut-y);
	clip-path: polygon(
		var(--bfc-about-cut-x) 0,
		100% 0,
		100% calc(100% - var(--bfc-about-cut-y)),
		calc(100% - var(--bfc-about-cut-x)) 100%,
		0 100%,
		0 var(--bfc-about-cut-y)
	);
	max-width: 45.5rem; /* 728px in the design */
	margin-inline: auto;
	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);
	text-align: center;
}

/* When the photo follows, the frame's bottom padding grows by exactly the
   overlap, so the photo never covers the letters. */
.bfc-home__about-intro:has(+ .bfc-home__about-photo) {
	padding-bottom: calc(var(--bfc-space-xl) + var(--bfc-about-photo-tuck));
}

.bfc-home__about-intro h2 {
	text-transform: uppercase;
}

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

.bfc-home__about-members-panel {
	/* Both upper corners cut. The photo above rests on it: no gap. */
	clip-path: polygon(
		var(--bfc-space-xl) 0,
		calc(100% - var(--bfc-space-xl)) 0,
		100% var(--bfc-space-3xl),
		100% 100%,
		0 100%,
		0 var(--bfc-space-3xl)
	);
	padding: var(--bfc-space-xl) var(--bfc-space-l);
	background-color: var(--bfc-color-bg-default);
	background-image: var(--bfc-gradient-frame-amber);
	color: var(--bfc-color-text-default);
}

/* The group photo on its own, between the two boxes: in front of the
   "Who we are" frame, overlapping its bottom (wider than the frame, so it
   shows on both sides), and resting on the bios box. */
.bfc-home__about-photo {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin: calc(-1 * var(--bfc-about-photo-tuck)) auto 0;
}

/* Phones and tablets: edge to edge, out through the page's side padding. */
@media (max-width: 63.99rem) {
	.bfc-home__about-photo {
		max-width: none;
		margin-inline: calc(-1 * var(--bfc-space-gutter));
	}
}

/* Cut to Georgios's About mask, stretched to the photo's box (the photo
   itself keeps its proportions). */
.bfc-home__about-photo img {
	display: block;
	width: 100%;
	height: auto;
	mask: url("../images/masks-about/about-mask-01.svg") 0 0 / 100% 100% no-repeat;
}

.bfc-home__members {
	display: grid;
	gap: var(--bfc-space-gap-block);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-home__member-name {
	margin-bottom: var(--bfc-space-2xs);
	text-align: center;
}

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

/* Three columns. The design tilts each a little; left out for now. */
@media (min-width: 64rem) {
	/* A dark shape behind the white boxes, like the hero's: wider than the
	   "Who we are" frame so it shows beside it, but never taller than the
	   two boxes together. To revisit once the group photo is in. */
	.bfc-home__about {
		overflow-x: clip;
	}

	.bfc-home__about > .bfc-container {
		position: relative;
		isolation: isolate;
	}

	.bfc-home__about > .bfc-container::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: var(--bfc-space-xl);
		bottom: 40%;
		left: 12%;
		right: 12%;
		/* Filled with an intense, mostly purple gradient instead of black:
		   the shape's outline is used as a mask and the gradient shows through. */
		background-image: var(--bfc-gradient-shape); /* style.css § 2 */
		mask: url("../images/shapes/hero-black-shape.svg") 0 0 / 100% 100% no-repeat;
	}

	.bfc-home__about-members-panel {
		padding: var(--bfc-space-3xl);
	}

	.bfc-home__about {
		--bfc-about-photo-tuck: var(--bfc-space-4xl);
	}

	.bfc-home__members {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--bfc-space-xl);
	}
}


/* ==== Reveal on scroll (prototype effect 5, assets/js/home.js) ============ */
/* The shared .bfc-reveal rules are in style.css § 16 (the project page uses
   them too). Home only: */

@media (prefers-reduced-motion: no-preference) {
	/* The "Who we are" boxes only slide: faded, the shape behind them
	   would show through. */
	:root:not(.bfc-motion-off) .bfc-home__about-intro.bfc-reveal.is-waiting,
	:root:not(.bfc-motion-off) .bfc-home__about-members-panel.bfc-reveal.is-waiting {
		opacity: 1;
	}
}


/* ==== Penpot edits of 2026-10-04 (Decision 015) =========================== */
/* Georgios drew these in Penpot on the converter's copy of this page; the
   shapes here are his outlines, read through the MCP server, as percentages
   of their boxes. Each block belongs to one switch at the top of
   page-home.php. Desktop only for now, except the card pieces' colour. */

@media (min-width: 64rem) {

	/* $hero_photo_raised_above_fold: the photo 60px higher, so it sits above
	   the fold. The intro frame stays where it was. */
	.bfc-home--photo-raised .bfc-home__hero-image {
		position: relative;
		top: -3.75rem;
	}

	/* $hero_photo_white_echo: a white copy of the photo's shape behind it,
	   offset down and to the left. It takes the same random mask (site.js
	   § 4) and breathes with it. */
	.bfc-home--photo-white-echo .bfc-home__hero-image {
		position: relative;
	}

	.bfc-home--photo-white-echo .bfc-home__hero-image::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background-color: var(--bfc-color-bg-default);
		mask: var(--bfc-photo-mask, url("../images/masks/hero-mask-01.svg")) 50% 50% / 100% 100% no-repeat;
		transform: translate(-1.58%, 3.02%); /* 13.5px left, 15px down at 1280 */
		animation: bfc-photo-mask-breathe 14s ease-in-out infinite; /* style.css § 16 */
	}

	.bfc-home--photo-white-echo .bfc-home__hero-image.is-off-screen::before {
		animation-play-state: paused;
	}

	/* $pillars_on_reading_shape: a light amber shape behind the pillars,
	   calmer to read on than the gradient (Georgios: it may be taller than
	   the frames, since it serves reading). It fills the pillars' area from
	   just below the phrase to the end of the column, so the sticky pillars
	   always travel over it. Sizes in em of the phrase, so it shrinks with
	   the composition: 377 x 800 at 1280, the phrase 26.88px. */
	.bfc-home--pillars-on-reading-shape .bfc-home__hero-pillars {
		position: relative;
		isolation: isolate; /* keeps the shape's z-index: -1 inside */
		/* The pillars come to rest with their last line on the intro text's
		   last line, not the frame's bottom (Georgios): the same 3rem as the
		   intro frame's bottom padding. The shape still runs to the frame's
		   bottom (bottom: 0 of this padding box). */
		padding-bottom: var(--bfc-space-2xl);
	}

	/* The scroll triangle hangs below the list instead of taking room, so
	   the last pillar text is the bottom of the block. */
	.bfc-home--pillars-on-reading-shape .bfc-home__scroll-hint {
		position: absolute;
		top: 100%;
		left: 0;
	}

	.bfc-home--pillars-on-reading-shape .bfc-home__hero-pillars::before {
		content: "";
		position: absolute;
		z-index: -1;
		/* home.js § 10 raises the top when the pillars ride higher than the
		   shape's solid part (narrow or short screens, e.g. an iPad mini in
		   landscape), so the texts never sit on the bare gradient. */
		top: var(--bfc-pillars-shape-top, 1.637em);
		bottom: 0;
		left: -6.38em;
		width: 14.025em;
		background-color: var(--bfc-color-bg-reading);
		/* The spiky top is a fixed height (points in em from the top, solid
		   across the texts from 9.7em down); the foot is measured from the
		   bottom; the body between stretches. Points marked with
		   --bfc-rubber-a/b wobble on scroll (home.js § 9). */
		clip-path: polygon(
			25.73% calc(6.138em + var(--bfc-rubber-b) * 0.5),
			54.01% 9.077em,
			calc(58.62% + var(--bfc-rubber-a) * 0.2) calc(0em + max(0px, var(--bfc-rubber-a))),
			89.92% calc(9.635em + var(--bfc-rubber-b) * 0.4),
			100% calc(9.077em + var(--bfc-rubber-b) * 0.6),
			100% calc(100% - 2.485em),
			89.66% calc(100% - 0.037em),
			38.99% 100%,
			38.99% calc(100% - 3.594em),
			calc(0% + max(0px, var(--bfc-rubber-b)) * 0.5) calc(10.789em + var(--bfc-rubber-b)),
			38.99% 16.711em,
			32.36% calc(10.379em + var(--bfc-rubber-a) * 0.4)
		);
	}

	/* When the shape grows up past the phrase, the logo and phrase stay in
	   front of it. */
	.bfc-home--pillars-on-reading-shape .bfc-home__hero-symbol,
	.bfc-home--pillars-on-reading-shape .bfc-home__hero-heading {
		position: relative;
		z-index: 1;
	}

	/* Titles as large as the phrase, each with a white triangle pointing
	   at it (14.8 x 22 at 1280, 6px left of the title). */
	.bfc-home--pillars-on-reading-shape .bfc-home__hero-pillar-title {
		position: relative;
		font-size: 1em;
	}

	.bfc-home--pillars-on-reading-shape .bfc-home__hero-pillar-title::before {
		content: "";
		position: absolute;
		top: 0.112em;
		left: -0.763em;
		width: 0.551em;
		height: 0.818em;
		background-color: var(--bfc-color-bg-default);
		clip-path: polygon(0 0, 100% 45.45%, 0 100%);
	}

	/* $intro_frame_notch: a small notch rising 2rem into the intro frame's
	   bottom edge, three quarters along. The rest is the frame's cut corner
	   (home.css "Hero"). */
	.bfc-home--intro-notch .bfc-home__hero-intro {
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			81.74% 100%,
			77.67% calc(100% - 2rem),
			77.23% 100%,
			var(--bfc-intro-cut-x) 100%,
			0 calc(100% - var(--bfc-intro-cut-y))
		);
	}

	/* $supporters_jagged_top: white and green spikes rising from the band's
	   top edge, white over its white middle, green over its green end. They
	   sit behind the hero's text (z-index: -1), never over it. The 20px
	   margin every section has would leave a black strip between the
	   gradient and the band: gone. */
	.bfc-home--supporters-jagged-top .bfc-home__pillars {
		margin-bottom: 0;
	}

	.bfc-home--supporters-jagged-top .bfc-home__supporters {
		position: relative;
	}

	.bfc-home--supporters-jagged-top .bfc-home__supporters::before,
	.bfc-home--supporters-jagged-top .bfc-home__supporters::after {
		content: "";
		position: absolute;
		z-index: -1;
		bottom: calc(100% - 1px); /* 1px into the band, or rounding leaves a hairline */
	}

	.bfc-home--supporters-jagged-top .bfc-home__supporters::before {
		left: 7.38%;
		width: 55.16%;
		aspect-ratio: 706 / 263;
		background-color: var(--bfc-color-bg-default);
		/* Points marked with --bfc-rubber-a/b wobble on scroll (home.js § 9). */
		clip-path: polygon(
			18.13% calc(59.32% + var(--bfc-rubber-b) * 0.5),
			calc(0% + max(0px, var(--bfc-rubber-a)) * 0.5) calc(0% + max(0px, var(--bfc-rubber-a))),
			20.68% calc(53.61% + var(--bfc-rubber-b) * 0.5),
			67.14% calc(81.75% + var(--bfc-rubber-a) * 0.3),
			71.81% 88.21%,
			79.04% 93.16%,
			91.08% 92.02%,
			95.86% calc(80.53% + var(--bfc-rubber-b) * 0.6),
			96.03% 94.68%,
			100% 100%,
			52.27% 100%,
			63.03% 91.25%
		);
	}

	.bfc-home--supporters-jagged-top .bfc-home__supporters::after {
		left: 91.21%;
		width: 8.75%;
		aspect-ratio: 112 / 69;
		background-color: var(--bfc-color-gradient-vivid-2); /* the band's green end */
		clip-path: polygon(15.89% 79.71%, 35.09% 0, 58.3% 69.57%, 100% 100%, 0 100%);
	}
}

/* Second round of 2026-10-04, from Georgios's notes. */

/* Motion (home.js § 8 and § 9; at rest with motion off). The rubber
   springs' stretch, 0 at rest; the shapes below add it to some points. */
.bfc-home {
	--bfc-rubber-a: 0px;
	--bfc-rubber-b: 0px;
}

/* $about_drift_on_scroll: "Who we are"'s frame and group photo drift by
   --bfc-drift. translate, not transform, so the reveal on scroll (which
   uses transform) still works on the same elements. */
.bfc-home--about-drift .bfc-home__about-intro,
.bfc-home--about-drift .bfc-home__about-photo {
	translate: 0 var(--bfc-drift, 0px);
}

@media (min-width: 64rem) {

	/* $about_black_spikes_from_above: the supporters' white spikes (above),
	   upside down and black like the Upcoming section, hanging from its
	   bottom edge into "Who we are", behind everything in it. */
	.bfc-home--about-black-spikes .bfc-home__about {
		position: relative;
	}

	.bfc-home--about-black-spikes .bfc-home__about::before {
		content: "";
		position: absolute;
		top: -1px; /* 1px into the black above, or rounding leaves a hairline */
		left: 7.38%;
		width: 55.16%;
		aspect-ratio: 706 / 263;
		background-color: var(--bfc-color-bg-inverse);
		/* Points marked with --bfc-rubber-a/b wobble on scroll (home.js § 9). */
		clip-path: polygon(
			18.13% calc(40.68% + var(--bfc-rubber-b) * 0.5),
			calc(0% + max(0px, var(--bfc-rubber-a)) * 0.5) calc(100% - max(0px, var(--bfc-rubber-a))),
			20.68% calc(46.39% + var(--bfc-rubber-b) * 0.5),
			67.14% calc(18.25% + var(--bfc-rubber-a) * 0.3),
			71.81% 11.79%,
			79.04% 6.84%,
			91.08% 7.98%,
			95.86% calc(19.47% + var(--bfc-rubber-b) * 0.6),
			96.03% 5.32%,
			100% 0,
			52.27% 0,
			63.03% 8.75%
		);
	}

	/* $about_purple_spike_rising: the supporters' white spike turned a
	   quarter (its base on the screen's left edge, the long point rising to
	   the right), 1.3 times larger, in the purple of the gradient's corner.
	   A fixed size (342 x 918px), so on wide screens it doesn't grow up to
	   the photo: its tip stays behind the bios frame (Georgios), and its foot
	   sits 200px below the frame, partly hidden behind the footer. "Who we
	   are" becomes a stacking context so z-index: -1 stays above its own
	   background; the footer is lifted in front of it. */
	.bfc-home--about-purple-spike .bfc-home__about {
		position: relative;
		isolation: isolate;
	}

	.bfc-home--about-purple-spike .bfc-home__about::after {
		content: "";
		position: absolute;
		z-index: -1;
		bottom: calc(var(--bfc-space-section-y) - 12.5rem);
		left: 0;
		width: 21.375rem;
		aspect-ratio: 263 / 706;
		background-color: var(--bfc-color-gradient-vivid-4);
		/* Points marked with --bfc-rubber-a/b wobble on scroll (home.js § 9). */
		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%
		);
	}

	body:has(.bfc-home--about-purple-spike) .site-footer {
		position: relative;
		z-index: 1;
	}

	/* $bios_frame_notches: two notches rising 2rem into the bios frame's
	   bottom edge, shaped like the intro frame's (38px wide, the tip near
	   their left foot), at 30% and 70%. The frame's bottom padding (4rem)
	   keeps them clear of the text. */
	.bfc-home--bios-notches .bfc-home__about-members-panel {
		clip-path: polygon(
			var(--bfc-space-xl) 0,
			calc(100% - var(--bfc-space-xl)) 0,
			100% var(--bfc-space-3xl),
			100% 100%,
			calc(70% + 2.4rem) 100%,
			calc(70% + 0.25rem) calc(100% - 2rem),
			70% 100%,
			calc(30% + 2.4rem) 100%,
			calc(30% + 0.25rem) calc(100% - 2rem),
			30% 100%,
			0 100%,
			0 var(--bfc-space-3xl)
		);
	}

	/* $footer_spike: a black spike rising from the footer's top edge into
	   "Who we are", the green spike's outline (supporters, above), at the
	   same place on the right. The footer is outside <main>. */
	body:has(.bfc-home--footer-spike) .site-footer {
		position: relative;
	}

	body:has(.bfc-home--footer-spike) .site-footer::before {
		content: "";
		position: absolute;
		bottom: calc(100% - 1px);
		left: 91.21%;
		width: 8.75%;
		aspect-ratio: 112 / 69;
		background-color: var(--bfc-color-bg-inverse);
		clip-path: polygon(15.89% 79.71%, 35.09% 0, 58.3% 69.57%, 100% 100%, 0 100%);
	}
}

/* $hero_photo_tall_on_phones: below the two-column width the photo is cut
   taller, from where it starts (about 24.5rem down) to the bottom of the
   first screen: at least 15rem, at most a little taller than wide. The
   mask stretches with it. */
@media (max-width: 63.99rem) {
	.bfc-home--photo-tall-phones .bfc-home__hero-image img {
		aspect-ratio: auto;
		height: clamp(15rem, calc(100svh - 24.5rem), 125vw);
		object-position: 50% 35%; /* faces sit in the upper half */
	}
}

/* $upcoming_card_pieces_green: Card Beta's pointed pieces in the gradient's
   green (style.css § 15). At every width where the pieces show (48rem up). */
.bfc-home--card-pieces-green .bfc-card-beta {
	--bfc-card-pieces-color: var(--bfc-color-gradient-vivid-2);
}