/* ==========================================================================
   About area: Our story, History timeline, Team, Partners.
   Loaded after components.css (see inc/assets.php). Tokens only: every colour,
   size and radius reads a theme.json variable. Logical properties throughout,
   so /he/ works without overrides. Nothing here needs JavaScript (the team's filter and
   one-open-at-a-time accordion are an enhancement: see the "Team: with the script" section).
   ========================================================================== */

/* ---- Shared ------------------------------------------------------------- */

.bnjc-timeline__more > summary {
	cursor: pointer;
}

.bnjc-timeline__more > summary:focus-visible,
.bnjc-partners__links a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

/* ---- Our story (the About page) ----------------------------------------- */

/* A note that stands out from the body: the coworking recognition, for one. */
.bnjc-about-note {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--custom--color--navy-tint);
	border-inline-start: var(--wp--custom--border--rule-width) solid var(--navy);
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-about-note p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--navy-darkest);
}

/* The charity registration: small, at the foot of the page. */
.bnjc-reg-line {
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--grey-700);
}

/* ---- Timeline ------------------------------------------------------------ */

/* The history page: a wide column of periods with a jump list beside it. Each period has a big heading
   (display type) with its dates, and a spine down the left of its entries; an entry is a native <details>,
   so it opens in place and works with no script. A highlight (a ticked entry) is set larger. Nothing is
   coloured by strand: Orthodox, Progressive, Reform and communal entries look the same. The one colour
   choice, per period, is set under Timeline, Periods, and arrives here as .is-accent-*.
   Phones are one column with the spine on the left; from 782px the date sits left of the spine and the
   words right of it; from 1024px the jump list becomes a column that stays in view. */

.bnjc-timeline {
	--tl-date: 7rem;
	--tl-gap: var(--wp--preset--spacing--70);
	--tl-top: calc(var(--header-h) + 56px + var(--wp--preset--spacing--60));
	margin-block: var(--wp--preset--spacing--70) 0;
}

.bnjc-timeline__era {
	--tl-accent: var(--navy);
	scroll-margin-block-start: calc(var(--header-h) + 72px);
}

.bnjc-timeline__era.is-accent-green {
	--tl-accent: var(--wp--preset--color--hove-green);
}

.bnjc-timeline__era.is-accent-pomegranate {
	--tl-accent: var(--wp--preset--color--ink-warm);
}

.bnjc-timeline__era.is-accent-argaman {
	--tl-accent: var(--berry);
}

.bnjc-timeline__era + .bnjc-timeline__era {
	margin-block-start: var(--wp--preset--spacing--110);
}

/* The jump list: a row of buttons on a phone. */
.bnjc-timeline__nav {
	margin-block-end: var(--wp--preset--spacing--80);
}

.bnjc-timeline__nav-label {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
	color: var(--grey-700);
}

.bnjc-timeline__nav ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnjc-timeline__nav a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min);
	padding-inline: var(--wp--preset--spacing--50);
	border: 1.5px solid var(--navy);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.bnjc-timeline__nav a:hover {
	background: var(--wp--custom--color--hover-wash);
}

.bnjc-timeline__nav a[aria-current="true"] {
	background: var(--navy);
	color: var(--white);
}

.bnjc-timeline__nav a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

/* The range is for the column version; a phone has the name only. */
.bnjc-timeline__nav-range {
	display: none;
}

/* A period's heading: its dates, the big name, an optional line. */
.bnjc-timeline__era-head {
	padding-block-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--70);
	border-block-start: var(--wp--custom--border--rule-width) solid var(--tl-accent);
}

.bnjc-timeline__era-range {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
	color: var(--tl-accent);
}

.bnjc-timeline__era-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 400;
	line-height: var(--wp--custom--typography--leading-display);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--tl-accent);
}

.bnjc-timeline__era-intro {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-inline-size: 52ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--ink);
}

/* The entries and their spine. */
.bnjc-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnjc-timeline__item {
	position: relative;
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--70);
	scroll-margin-block-start: calc(var(--header-h) + 72px);
}

/* The spine: one line down every entry, drawn here so it joins up. It starts at the first dot and ends at the last. */
.bnjc-timeline__item::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-start: 6px;
	inline-size: 2px;
	background: color-mix(in srgb, var(--tl-accent) 38%, transparent);
}

.bnjc-timeline__item:first-child::before {
	inset-block-start: 2.1rem;
}

.bnjc-timeline__item:last-child::before {
	inset-block-end: auto;
	block-size: 2.1rem;
}

.bnjc-timeline__item:only-child::before {
	display: none;
}

/* The dot. */
.bnjc-timeline__item::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: calc(2.1rem - 7px);
	inset-inline-start: 0;
	inline-size: 14px;
	block-size: 14px;
	box-sizing: border-box;
	background: var(--cream);
	border: 3px solid var(--tl-accent);
	border-radius: var(--wp--custom--radius--circle);
}

.bnjc-timeline__item.is-feature::after {
	inset-block-start: calc(2.1rem - 10px);
	inset-inline-start: -3px;
	inline-size: 20px;
	block-size: 20px;
	background: var(--tl-accent);
	box-shadow: 0 0 0 4px var(--cream);
}

.bnjc-timeline__item:target::after {
	background: var(--tl-accent);
}

.bnjc-timeline__static,
.bnjc-timeline__more > summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50) 0;
	border-block-end: 1px solid var(--wp--custom--color--divider);
}

.bnjc-timeline__item:last-child .bnjc-timeline__static,
.bnjc-timeline__item:last-child .bnjc-timeline__more:not([open]) > summary {
	border-block-end: 0;
}

.bnjc-timeline__more > summary {
	position: relative;
	padding-inline-end: calc(var(--touch-min) + var(--wp--preset--spacing--40));
	list-style: none;
	min-block-size: var(--wp--custom--layout--touch-min);
	cursor: pointer;
}

.bnjc-timeline__more > summary::-webkit-details-marker {
	display: none;
}

/* The control: a ringed disc with a chevron, 44px, at the end of the row. The chevron turns when the entry is open. */
.bnjc-timeline__more > summary::after {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-end: 0;
	inline-size: var(--touch-min);
	block-size: var(--touch-min);
	box-sizing: border-box;
	border: 2px solid var(--tl-accent);
	border-radius: var(--wp--custom--radius--circle);
	background: transparent;
}

.bnjc-timeline__more > summary::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--wp--preset--spacing--40) + 16px);
	inset-inline-end: 17px;
	inline-size: 10px;
	block-size: 10px;
	border-inline-end: 2px solid var(--tl-accent);
	border-block-end: 2px solid var(--tl-accent);
	transform: translateY(-2px) rotate(45deg);
}

.bnjc-timeline__more[open] > summary::before {
	transform: translateY(3px) rotate(-135deg);
}

.bnjc-timeline__more > summary:hover::after {
	background: var(--tl-accent);
}

.bnjc-timeline__more > summary:hover::before {
	border-color: var(--white);
}

.bnjc-timeline__more > summary:hover .bnjc-timeline__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {

	.bnjc-timeline__more > summary::before {
		transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
	}

	.bnjc-timeline__more > summary::after {
		transition: background-color var(--dur-fast) var(--ease-out);
	}
}

/* The date: the year large in the period's colour, a small lead-in (About, a month) above it, the strand under it. */
.bnjc-timeline__when {
	display: grid;
	gap: 2px;
	align-content: start;
}

.bnjc-timeline__when time,
.bnjc-timeline__when > span:first-child {
	display: grid;
}

.bnjc-timeline__lead {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	color: var(--grey-700);
}

.bnjc-timeline__year {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--typography--leading-display);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--tl-accent);
}

/* The strand: quiet text under the date (Orthodox, Progressive, Reform, Community...). Words only, no badge, no colour. */
.bnjc-timeline__strand {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--grey-700);
}

.bnjc-timeline__text {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
}

.bnjc-timeline__title {
	font-family: var(--font-display); /* Entry titles are set in Gyst like every other display heading on the site. */
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 400;
	line-height: var(--wp--custom--typography--leading-display);
	letter-spacing: -0.005em;
	color: var(--ink);
}

.bnjc-timeline__summary {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--grey-700);
	max-inline-size: 60ch;
}

/* An opened entry: a soft wash in the period's colour, the full text and the source underneath. */
.bnjc-timeline__more[open] {
	background: color-mix(in srgb, var(--tl-accent) 6%, var(--white));
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-timeline__more[open] > summary {
	border-block-end-color: transparent;
}

.bnjc-timeline__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding: 0 0 var(--wp--preset--spacing--60);
}

.bnjc-timeline__image img {
	inline-size: 100%;
	max-inline-size: 420px;
	block-size: auto;
	border-radius: var(--wp--custom--radius--md);
	display: block;
}

.bnjc-timeline__detail {
	max-inline-size: 62ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--leading-loose);
	color: var(--ink);
}

.bnjc-timeline__detail > :first-child {
	margin-block-start: 0;
}

.bnjc-timeline__detail > :last-child {
	margin-block-end: 0;
}

/* The source: small, readable, a link when it has an address. */
.bnjc-timeline__source {
	margin: 0;
	max-inline-size: 62ch;
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--grey-700);
}

.bnjc-timeline__source-label {
	font-weight: 700;
}

.bnjc-timeline__source a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bnjc-timeline__source a:focus-visible,
.bnjc-timeline-glance__item:focus-visible,
.bnjc-history-close a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

/* A highlight: larger type, a wash behind it all the time, the picture always showing. */
.bnjc-timeline__item.is-feature {
	margin-block: var(--wp--preset--spacing--40);
}

.bnjc-timeline__item.is-feature .bnjc-timeline__more,
.bnjc-timeline__item.is-feature .bnjc-timeline__static {
	background: color-mix(in srgb, var(--tl-accent) 7%, var(--white));
	border-radius: var(--wp--custom--radius--xs);
	box-shadow: inset 4px 0 0 var(--tl-accent);
	padding-inline: var(--wp--preset--spacing--50);
}

[dir="rtl"] .bnjc-timeline__item.is-feature .bnjc-timeline__more,
[dir="rtl"] .bnjc-timeline__item.is-feature .bnjc-timeline__static {
	box-shadow: inset -4px 0 0 var(--tl-accent);
}

.bnjc-timeline__item.is-feature .bnjc-timeline__more > summary,
.bnjc-timeline__item.is-feature .bnjc-timeline__static {
	border-block-end: 0;
	padding-block: var(--wp--preset--spacing--60);
}

.bnjc-timeline__item.is-feature .bnjc-timeline__more > summary {
	padding-inline-end: calc(var(--touch-min) + var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40));
}

.bnjc-timeline__item.is-feature .bnjc-timeline__more > summary::after {
	inset-block-start: var(--wp--preset--spacing--50);
	inset-inline-end: var(--wp--preset--spacing--50);
}

.bnjc-timeline__item.is-feature .bnjc-timeline__more > summary::before {
	inset-block-start: calc(var(--wp--preset--spacing--50) + 16px);
	inset-inline-end: calc(var(--wp--preset--spacing--50) + 17px);
}

.bnjc-timeline__item.is-feature .bnjc-timeline__body {
	padding-inline: 0;
}

.bnjc-timeline__item.is-feature .bnjc-timeline__title {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 400;
	line-height: var(--wp--custom--typography--leading-display);
	letter-spacing: -0.01em;
	color: var(--tl-accent);
}

.bnjc-timeline__item.is-feature .bnjc-timeline__summary {
	font-size: var(--wp--preset--font-size--medium);
}

@media (min-width: 782px) {

	.bnjc-timeline__item.is-feature .bnjc-timeline__summary {
		font-size: var(--wp--preset--font-size--large);
	}
}

.bnjc-timeline__item.is-feature .bnjc-timeline__year {
	font-size: var(--wp--preset--font-size--display-m);
}

.bnjc-timeline__figure {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.bnjc-timeline__figure img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.bnjc-timeline__item:target > .bnjc-timeline__more {
	outline: 2px solid var(--tl-accent);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--xs);
}

/* From 782px: the date sits left of the spine, the words right of it. */
@media (min-width: 782px) {

	.bnjc-timeline {
		--tl-date: 8.5rem;
	}

	.bnjc-timeline__era-title {
		font-size: var(--wp--preset--font-size--display-l);
	}

	.bnjc-timeline__item {
		padding-inline-start: 0;
	}

	.bnjc-timeline__item::before {
		inset-inline-start: calc(var(--tl-date) + var(--tl-gap) / 2 - 1px);
	}

	.bnjc-timeline__item::after {
		inset-inline-start: calc(var(--tl-date) + var(--tl-gap) / 2 - 7px);
	}

	.bnjc-timeline__item.is-feature::after {
		inset-inline-start: calc(var(--tl-date) + var(--tl-gap) / 2 - 10px);
	}

	.bnjc-timeline__static,
	.bnjc-timeline__more > summary {
		grid-template-columns: var(--tl-date) minmax(0, 1fr);
		column-gap: var(--tl-gap);
		align-items: start;
	}

	.bnjc-timeline__when {
		text-align: end;
	}

	.bnjc-timeline__when time,
	.bnjc-timeline__when > span:first-child {
		justify-items: end;
	}

	.bnjc-timeline__title {
		font-size: var(--wp--preset--font-size--heading-l);
	}

	.bnjc-timeline__body {
		padding-inline-start: calc(var(--tl-date) + var(--tl-gap));
		padding-inline-end: calc(var(--touch-min) + var(--wp--preset--spacing--40));
	}

	.bnjc-timeline__figure {
		margin-inline-start: calc(var(--tl-date) + var(--tl-gap));
	}

	/* A highlight's wash starts at the date column, so the date columns of every entry line up on the spine. */
	.bnjc-timeline__item.is-feature .bnjc-timeline__static,
	.bnjc-timeline__item.is-feature .bnjc-timeline__more {
		padding-inline-start: 0;
	}

	.bnjc-timeline__item.is-feature .bnjc-timeline__body {
		padding-inline-start: calc(var(--tl-date) + var(--tl-gap));
		padding-inline-end: calc(var(--touch-min) + var(--wp--preset--spacing--40));
	}

	.bnjc-timeline__item.is-feature .bnjc-timeline__title {
		font-size: var(--wp--preset--font-size--display-m);
	}

	.bnjc-timeline__more[open] .bnjc-timeline__summary {
		max-inline-size: none;
	}
}

/* From 1024px: the jump list is a column that stays in view beside the periods. */
@media (min-width: 1024px) {

	.bnjc-timeline:has(> .bnjc-timeline__nav) {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--100);
		align-items: start;
	}

	.bnjc-timeline__nav {
		position: sticky;
		inset-block-start: var(--tl-top);
		margin-block-end: 0;
	}

	.bnjc-timeline__nav ol {
		display: grid;
		gap: 0;
		border-inline-start: 2px solid var(--wp--custom--color--divider);
	}

	.bnjc-timeline__nav a {
		display: grid;
		gap: 2px;
		align-content: center;
		min-block-size: var(--wp--custom--layout--touch-min);
		margin-inline-start: -2px;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border: 0;
		border-inline-start: 4px solid transparent;
		border-radius: 0;
		background: transparent;
		color: var(--navy);
	}

	.bnjc-timeline__nav a[aria-current="true"] {
		border-inline-start-color: var(--navy);
		background: var(--wp--custom--color--hover-wash);
		color: var(--navy);
	}

	.bnjc-timeline__nav-name {
		font-family: var(--font-display);
		font-size: var(--wp--preset--font-size--display-xs);
		font-weight: 400;
		line-height: var(--wp--custom--typography--leading-display);
		letter-spacing: -0.01em;
	}

	.bnjc-timeline__nav-range {
		display: block;
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 600;
		color: var(--grey-700);
	}
}

/* ---- History page: the opening, at a glance, the closing ----------------------------------- */

/* The opening: the lead paragraph at full width, with the at-a-glance strip beside it on a wide screen. */
.bnjc-history-open {
	display: grid;
	gap: var(--wp--preset--spacing--80);
	max-inline-size: none;
}

.bnjc-history-open__words > * {
	margin: 0;
}

.bnjc-history-open__words > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.bnjc-history-open .bnjc-history-lead {
	max-inline-size: 34ch;
	font-size: var(--wp--preset--font-size--display-xs);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy-darkest);
	text-wrap: pretty;
}

.bnjc-history-open__words p:not(.bnjc-history-lead) {
	max-inline-size: 60ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--leading-loose);
}

@media (min-width: 782px) {

	.bnjc-history-open .bnjc-history-lead {
		max-inline-size: 36ch;
		font-size: var(--wp--preset--font-size--display-s);
	}
}

@media (min-width: 1024px) {

	.bnjc-history-open:has(.bnjc-timeline-glance) {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--110);
		align-items: start;
	}
}

/* At a glance: a few large years, each linking to its entry. */
.bnjc-timeline-glance {
	padding: var(--wp--preset--spacing--60);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-block-start: var(--wp--custom--border--rule-width) solid var(--navy);
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-timeline-glance__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
	color: var(--grey-700);
}

.bnjc-timeline-glance__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnjc-timeline-glance__list li + li {
	border-block-start: 1px solid var(--wp--custom--color--divider);
}

.bnjc-timeline-glance__item {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	grid-template-areas: "lead label" "value label";
	column-gap: var(--wp--preset--spacing--50);
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min);
	padding-block: var(--wp--preset--spacing--40);
	color: var(--ink);
	text-decoration: none;
}

.bnjc-timeline-glance__lead {
	grid-area: lead;
	align-self: end;
	min-block-size: 1.2em;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	color: var(--grey-700);
}

.bnjc-timeline-glance__value {
	grid-area: value;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--typography--leading-display);
	letter-spacing: -0.01em;
	color: var(--navy);
}

.bnjc-timeline-glance__label {
	grid-area: label;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: var(--wp--custom--typography--leading-heading);
}

.bnjc-timeline-glance__item:hover .bnjc-timeline-glance__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The closing: a band in Ink Blue that points to the Hub, then the Chief Rabbi's words follow. */
/* Everything starts on the page column's left edge (the hero's edge), not centred. */
.entry-content.wp-block-post-content .bnjc-history-close.alignfull {
	padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
}

.entry-content.wp-block-post-content .bnjc-history-close > * {
	max-inline-size: none;
	margin-inline: 0 !important;
}

.bnjc-history-close .wp-block-heading {
	margin: 0;
	color: inherit;
}

.bnjc-history-close p {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-inline-size: 56ch !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--typography--leading-body);
	color: inherit;
}

.bnjc-history-close .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--70);
}

.bnjc-history-close p.bnjc-history-close__note {
	margin-block-start: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-history-close a:not(.wp-block-button__link) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Team ---------------------------------------------------------------- */

/* The team block (plugins/bnjc-core/src/Blocks/Team*.php): sections of profile cards, one component in three variants.
   feature  Leadership: larger horizontal cards, one or two across.
   grid     The staff directory: a square photo over the name, two across on a phone and a tablet, three, then four on a laptop.
   compact  Trustees: a small photo beside the name, a short last row centred.
   Every size, space and colour below is a theme.json token; the tokens the block shares are set once, here.
   The page works with no JavaScript (a <details> accordion); assets/front/team.js keeps one bio open and eases it. */

.bnjc-team {
	--team-gap: var(--wp--preset--spacing--50);
	--team-gap-row: var(--wp--preset--spacing--70);
	--team-pad: var(--wp--preset--spacing--40);
	--team-radius: var(--wp--custom--radius--sm);
	--team-photo-pos: 50% 22%; /* Square crop: keep the head, trim the shoulders and the space above. */
	--team-measure: 62ch;
	--team-edge: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
	--card-role: var(--wp--preset--color--navy); /* Each card's main role colour (inline style), kept for accents; nothing uses it for a hover any more. */
	min-inline-size: 0;
}

/* A tinted section is a full-width band (set the block's Align to Full width): a soft Seafoam-deep ground. */
.bnjc-team--tint {
	padding-block: clamp(48px, 6vw, 80px);
	padding-inline: var(--team-edge);
	background: var(--wp--preset--color--cream-deep);
}

.bnjc-team__heading {
	margin: 0 0 var(--wp--preset--spacing--70);
	color: var(--navy);
}

.bnjc-team__heading:has(+ .bnjc-team__intro) {
	margin-block-end: var(--wp--preset--spacing--40);
}

.bnjc-team__intro {
	max-inline-size: var(--team-measure);
	margin: 0 0 var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--ink);
}

.bnjc-team__intro:has(+ .bnjc-team__intro) {
	margin-block-end: var(--wp--preset--spacing--40);
}

.bnjc-team__empty {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--custom--color--navy-tint);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--navy-darkest);
}

/* Sections on a page: one deliberate gap above each, as before each H2 (the page's flow grid zeroes block margins). */
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > .bnjc-team {
	margin-block-start: var(--bnjc-gap-section);
}

/* The welcome: the page's two opening paragraphs in one centred column, about 65 characters wide, one under the other
   at every screen size (Yosef, 2 Nov 2026: one column, not two). The page's flow grid starts every block on the left
   edge, so the column is centred with justify-self; the jump links above it share the same column (see .ab-jump). */
.bnjc-team-welcome {
	--team-welcome-measure: 65ch;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	justify-self: center;
	inline-size: min(100%, var(--team-welcome-measure));
}

.bnjc-team-welcome > p {
	margin: 0;
	max-inline-size: none;
	line-height: 1.6;
}

.bnjc-team-welcome > p:first-child {
	color: var(--navy);
}

/* ---- The grid and the card ---------------------------------------------------- */

.bnjc-team__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--team-gap-row) var(--team-gap);
	grid-auto-flow: row dense; /* An opened card takes a whole row; "dense" lets the cards after it fill the row it leaves. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnjc-team__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	scroll-margin-block-start: calc(var(--header-h, 80px) + var(--wp--preset--spacing--40));
}

/* The photo: always a square, never a link. No fixed card heights: the grid row is as tall as its tallest card. */
.bnjc-team__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--team-radius);
	background: var(--wp--custom--color--navy-tint);
}

.bnjc-team__photo {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: var(--team-photo-pos);
	transition: transform 0.5s var(--ease-out);
}

/* No photo (or no consent for one): the BNJC logo centred on a neutral tile, never initials and never a stand-in face. */
.bnjc-team__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	background: var(--wp--custom--color--navy-tint);
}

.bnjc-team__logo {
	display: block;
	inline-size: 55%;
	block-size: auto;
	max-block-size: 55%;
	object-fit: contain;
}

/* The words. The name leads, the job title sits directly under it, a business unit (YOFI, Shoresh, Cove) is plain
   small text beneath that. The controls are one row at the foot of the card, so they line up across a row. */
.bnjc-team__body {
	position: relative; /* The bio control's click area is stretched over this box (and never over the photo). */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-block-start: var(--team-pad);
}

.bnjc-team__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: var(--wp--custom--typography--leading-heading);
	color: var(--navy);
	overflow-wrap: break-word;
}

.bnjc-team__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--leading-tight);
	color: var(--grey-700);
}

.bnjc-team__unit {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--typography--leading-tight);
	color: var(--grey-700);
}

.bnjc-team__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

.bnjc-team__bio {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--grey-700);
}

/* The one control: "Read bio" / "Close bio". A real <summary>, 44px tall, with a chevron that turns when open. Its click
   area (::before) covers the card's words, so the name and job title open the bio too; the photo stays a plain picture. */
.bnjc-team__more {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--layout--touch-min);
	list-style: none;
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
}

.bnjc-team__more::-webkit-details-marker {
	display: none;
}

.bnjc-team__more::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bnjc-team__more::after {
	content: "";
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	margin-block-end: 3px;
	border-inline-end: 2px solid currentcolor;
	border-block-end: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-out);
}

.bnjc-team__bio[open] > .bnjc-team__more::after {
	margin-block: 3px 0;
	transform: rotate(-135deg);
}

.bnjc-team__more-open,
.bnjc-team__bio[open] > .bnjc-team__more .bnjc-team__more-closed {
	display: none;
}

.bnjc-team__bio[open] > .bnjc-team__more .bnjc-team__more-open {
	display: inline;
}

@media (hover: hover) and (pointer: fine) {

	.bnjc-team__card.has-bio:hover .bnjc-team__more {
		text-decoration-thickness: 2px;
	}
}

/* Keyboard focus rings the whole card (the click area is the card's words); an old browser without :has keeps the ring on the control. */
.bnjc-team__more:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

@supports selector(:has(*)) {

	.bnjc-team__card:not(.is-open):not(:has(.bnjc-team__bio[open])):has(.bnjc-team__more:focus-visible) {
		outline: 2px solid var(--focus-ring);
		box-shadow: 0 0 0 4px var(--focus-halo);
		outline-offset: 4px;
		border-radius: var(--team-radius);
	}

	.bnjc-team__card:not(.is-open):not(:has(.bnjc-team__bio[open])) .bnjc-team__more:focus-visible {
		outline: none;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bnjc-team__more::after {
		transition: none;
	}
}

/* LinkedIn: an icon-only link in the text colour, a 44px target of its own, always at the right end of the controls row
   (the foot of the card) and at the bottom right of an opened card. Above the click area, so it is its own control. */
.bnjc-team__linkedin {
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--layout--touch-min);
	block-size: var(--wp--custom--layout--touch-min);
	margin-inline: auto -11px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--navy);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.bnjc-team__linkedin svg {
	display: block;
	inline-size: 22px;
	block-size: 22px;
}

.bnjc-team__linkedin:hover {
	background: var(--wp--custom--color--hover-wash);
	color: var(--navy-darkest);
}

/* A card with an email and nothing to open: the address stays on the card. */
.bnjc-team__body > .bnjc-team__email {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.bnjc-team__email {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.bnjc-team__email a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min);
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bnjc-team__lede {
	font-weight: 600;
	color: var(--ink);
}

/* ---- Variant: grid (the team directory) ---------------------------------------------------------------- */
/* Two across on a phone and a tablet, three on a small laptop, four from 1200px. */

@media (min-width: 640px) {

	.bnjc-team--grid .bnjc-team__role,
	.bnjc-team--grid .bnjc-team__unit {
		font-size: var(--wp--preset--font-size--small);
	}

	.bnjc-team--grid .bnjc-team__grid {
		--team-gap: var(--wp--preset--spacing--60);
		--team-gap-row: var(--wp--preset--spacing--80);
	}
}

@media (min-width: 900px) {

	.bnjc-team--grid .bnjc-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.bnjc-team--grid .bnjc-team__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		--team-gap: var(--wp--preset--spacing--70);
	}
}

/* ---- Variant: feature (Leadership) -------------------------------------------------------------------- */
/* Horizontal cards: the photo at the left, the name in the display face at its side. One column to 899px, two from there. */

.bnjc-team--feature .bnjc-team__grid {
	grid-template-columns: minmax(0, 1fr);
	--team-gap-row: var(--wp--preset--spacing--60);
}

.bnjc-team--feature .bnjc-team__card {
	display: grid;
	grid-template-columns: clamp(112px, 24vw, 220px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

.bnjc-team--feature .bnjc-team__media {
	align-self: start;
}

.bnjc-team--feature .bnjc-team__body {
	padding-block-start: 0;
}

.bnjc-team--feature .bnjc-team__role,
.bnjc-team--feature .bnjc-team__unit {
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 640px) {

	.bnjc-team--feature .bnjc-team__name {
		font-size: var(--wp--preset--font-size--display-s);
	}

	.bnjc-team--feature .bnjc-team__role {
		font-size: var(--wp--preset--font-size--medium);
	}
}

@media (min-width: 900px) {

	.bnjc-team--feature .bnjc-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--team-gap: var(--wp--preset--spacing--80);
		--team-gap-row: var(--wp--preset--spacing--70);
	}

	.bnjc-team--feature .bnjc-team__card {
		grid-template-columns: clamp(150px, 34%, 240px) minmax(0, 1fr);
	}

	.bnjc-team--feature .bnjc-team__name {
		font-size: var(--wp--preset--font-size--display-xs);
	}
}

@media (min-width: 1100px) {

	.bnjc-team--feature .bnjc-team__name {
		font-size: var(--wp--preset--font-size--display-s);
	}
}

/* ---- Variant: compact (trustees) ----------------------------------------------------------------------- */
/* A small photo beside the name and role, on a white card. One column on a phone, two on a tablet, three from 1024px.
   The grid is twice as many tracks as columns and each card spans two, so a short last row can be centred. */

.bnjc-team--compact .bnjc-team__grid {
	--n: 1;
	grid-template-columns: repeat(calc(var(--n) * 2), minmax(0, 1fr));
	--team-gap: var(--wp--preset--spacing--40);
	--team-gap-row: var(--wp--preset--spacing--40);
}

.bnjc-team--compact .bnjc-team__card {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
	padding: var(--wp--preset--spacing--40);
	background: var(--white);
	border-radius: var(--team-radius);
}

.bnjc-team--compact .bnjc-team__media {
	align-self: start;
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-team--compact .bnjc-team__body {
	padding-block-start: 0;
}

.bnjc-team--compact .bnjc-team__name {
	font-size: var(--wp--preset--font-size--heading-m);
}

@media (min-width: 640px) {

	.bnjc-team--compact .bnjc-team__grid {
		--n: 2;
		--team-gap: var(--wp--preset--spacing--50);
		--team-gap-row: var(--wp--preset--spacing--50);
	}
}

@media (min-width: 1024px) {

	.bnjc-team--compact .bnjc-team__grid {
		--n: 3;
	}
}

/* Centre an incomplete last row (not while a card is open: the open card moves the rows, so the last row then reads from the left). */
@supports selector(:has(*)) {

	@media (min-width: 640px) and (max-width: 1023px) {

		.bnjc-team--compact .bnjc-team__grid:not(:has(.is-open, .bnjc-team__bio[open])) > .bnjc-team__card:nth-child(2n + 1):last-child {
			grid-column: 2 / span 2;
		}
	}

	@media (min-width: 1024px) {

		.bnjc-team--compact .bnjc-team__grid:not(:has(.is-open, .bnjc-team__bio[open])) > .bnjc-team__card:nth-child(3n + 1):last-child {
			grid-column: 3 / span 2;
		}

		.bnjc-team--compact .bnjc-team__grid:not(:has(.is-open, .bnjc-team__bio[open])) > .bnjc-team__card:nth-child(3n + 1):nth-last-child(2) {
			grid-column: 2 / span 2;
		}
	}
}

/* ---- An opened card ------------------------------------------------------------------------------------ */
/* A card with a bio is an accordion: its <details> opens inside the grid and the card takes the whole row (a white
   panel: the photo, a square, at the left; the words beside it; stacked on a phone). Closing puts it back. It works with
   no script (:has); the script also adds .is-open, so an older browser gets the same. */

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) {
	grid-column: 1 / -1;
	--open-pad: var(--wp--preset--spacing--60);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	align-self: start;
	gap: var(--wp--preset--spacing--60);
	padding: var(--open-pad);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--team-radius);
}

/* Room for the LinkedIn icon at the bottom right, so it never sits on the words. */
.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])):has(.bnjc-team__linkedin) {
	padding-block-end: calc(var(--open-pad) + var(--wp--custom--layout--touch-min));
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__media {
	inline-size: 100%;
	max-inline-size: 360px;
	align-self: start;
	border-radius: var(--team-radius);
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__body {
	position: static; /* So the LinkedIn icon is placed against the card, not the words. */
	display: block;
	padding: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__name {
	font-size: var(--wp--preset--font-size--display-s);
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__role {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ink);
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__unit {
	margin-block-start: var(--wp--preset--spacing--10);
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__actions {
	display: block;
	margin: 0;
	padding: 0;
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__bio {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ink);
}

/* Opened, the control is a plain "Close bio" row: no stretched click area, so the words can be selected and linked. */
.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__more::before {
	display: none;
}

.bnjc-team__bio-body {
	max-inline-size: var(--team-measure);
}

.bnjc-team__bio-body > :first-child {
	margin-block-start: 0;
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__bio-body > p {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__bio-body > p:last-child {
	margin-block-end: 0;
}

.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__linkedin {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--40);
	inset-inline-end: var(--wp--preset--spacing--40);
	margin: 0;
}

@media (min-width: 640px) {

	.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) {
		--open-pad: var(--wp--preset--spacing--70);
		grid-template-columns: 200px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}

	/* A long bio keeps the photo in view beside it. */
	.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__media {
		position: sticky;
		inset-block-start: calc(var(--header-h, 80px) + var(--wp--preset--spacing--40));
		max-inline-size: none;
	}
}

@media (min-width: 1100px) {

	.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) {
		--open-pad: var(--wp--preset--spacing--80);
		grid-template-columns: clamp(240px, 24%, 300px) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--90);
	}
}

/* ---- Work with BNJC: the band that follows the directory ----------------------------------------------- */
/* A white band under the trustees, then the quotation and the newsletter. Its words and buttons are ordinary blocks in the
   page (Group "bnjc-work": a heading and a paragraph in "bnjc-work__words", buttons in "bnjc-work__actions"). */

.bnjc-work {
	padding-block: clamp(48px, 7vw, 88px);
	background: var(--white);
}

.bnjc-work__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin-inline: auto;
}

.bnjc-work__words > * {
	margin-block: 0;
}

.bnjc-work__words > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.bnjc-work__words p {
	max-inline-size: 52ch;
}

.bnjc-work__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.bnjc-work__actions > * {
	margin-block: 0;
}

.bnjc-work__actions .wp-block-buttons {
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 900px) {

	.bnjc-work__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--wp--preset--spacing--120);
	}
}

/* The band is the last thing in the page, so the quotation follows straight on (no gap between them). */
body:not(.home) main#main:has(.entry-content > .bnjc-work:last-child) {
	padding-block-end: 0;
}

/* ---- Partners ------------------------------------------------------------- */

.bnjc-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnjc-partners__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-block-start: var(--wp--custom--border--rule-width) solid var(--navy);
	border-radius: var(--wp--custom--radius--xs);
}

/* The mark: a logo where there is one, the name as a quiet wordmark where there isn't. */
.bnjc-partners__mark {
	display: flex;
	align-items: center;
	min-block-size: 72px;
	margin-block-end: var(--wp--preset--spacing--30);
}

.bnjc-partners__logo {
	display: block;
	max-inline-size: 180px;
	max-block-size: 72px;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.bnjc-partners__wordmark {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: var(--wp--custom--typography--leading-display);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--navy);
}

.bnjc-partners__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 600;
	line-height: var(--wp--custom--typography--leading-heading);
	color: var(--ink);
}

.bnjc-partners__about {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--leading-body);
	color: var(--grey-700);
}

.bnjc-partners__when {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--ink);
}

.bnjc-partners__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	list-style: none;
	margin: auto 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
}

.bnjc-partners__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}


/* ---- About: the entry page (calm, plain) ---------------------------------------------- */

/* Who BNJC is: words on the left, the key facts beside them. */
.bnjc-about-who {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--90);
	align-items: start;
}

.bnjc-about-who > * {
	min-inline-size: 0;
}

.bnjc-about-who h2.wp-block-heading {
	margin-block: 0 var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-transform: none;
	color: var(--wp--preset--color--navy-darkest);
}

.bnjc-about-who p {
	max-inline-size: 60ch;
}

@media (max-width: 899px) {

	.bnjc-about-who {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}
}

.bnjc-keyfacts {
	padding: var(--wp--preset--spacing--60);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-block-start: var(--wp--custom--border--rule-width) solid var(--navy);
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-keyfacts__title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
	color: var(--grey-700);
}

.bnjc-keyfacts__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.bnjc-keyfacts__list dt {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--grey-700);
}

.bnjc-keyfacts__list dd {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ink);
	overflow-wrap: anywhere;
}

.bnjc-keyfacts__list a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mission, vision, purpose: side by side on a wide screen, stacked on a phone. */
.bnjc-statements {
	display: grid;
	gap: var(--wp--preset--spacing--80);
}

@media (min-width: 900px) {

	.bnjc-statements--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnjc-statements--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bnjc-statement {
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--rule-width) solid var(--navy);
}

.bnjc-statement__label {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-transform: none;
	color: var(--wp--preset--color--navy-darkest);
}

.bnjc-statement__text p {
	margin: 0;
	max-inline-size: 44ch;
	line-height: var(--wp--custom--typography--leading-body);
}

.bnjc-statement__text p + p {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* What happens here: one link per section, with a line each. */
.bnjc-about-doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
}

.bnjc-about-doors li {
	margin: 0;
}

.bnjc-about-doors a {
	display: block;
	box-sizing: border-box;
	block-size: 100%;
	min-block-size: var(--wp--custom--layout--touch-min);
	padding: var(--wp--preset--spacing--50);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--leading-body);
	text-decoration: none;
}

.bnjc-about-doors a strong {
	display: block;
	margin-block-end: 4px;
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--navy);
}

.bnjc-about-doors a:hover {
	background: var(--wp--custom--color--hover-wash);
}

.bnjc-about-doors a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

.bnjc-page-body .bnjc-about-doors,
.bnjc-about-doors {
	max-inline-size: none;
}

/* Nine doors: three across on a desktop (three rows of three) rather than auto-fit's five and four. */
@media (min-width: 900px) {

	.bnjc-about-doors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}



/* ---- A frame on every card ---------------------------------------------------------------------------------------
   The leadership and team cards had no edge; now each sits in a quiet frame like the trustees' cards: white, a hairline
   border and the site's small radius. The photo runs flush to the frame; the words have the card's padding. */
.bnjc-team--grid .bnjc-team__card,
.bnjc-team--feature .bnjc-team__card {
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--team-radius);
	overflow: hidden;
}

.bnjc-team--grid .bnjc-team__card:not(:is(.is-open, :has(.bnjc-team__bio[open]))) .bnjc-team__media,
.bnjc-team--feature .bnjc-team__card:not(:is(.is-open, :has(.bnjc-team__bio[open]))) .bnjc-team__media {
	border-radius: 0;
}

.bnjc-team--grid .bnjc-team__card:not(:is(.is-open, :has(.bnjc-team__bio[open]))) .bnjc-team__body {
	padding: var(--team-pad);
}

.bnjc-team--feature .bnjc-team__card:not(:is(.is-open, :has(.bnjc-team__bio[open]))) {
	gap: 0;
}

.bnjc-team--feature .bnjc-team__card:not(:is(.is-open, :has(.bnjc-team__bio[open]))) .bnjc-team__body {
	padding: var(--team-pad);
}

/* An opened card fills its row: the words run the full width of the panel, in two columns when the panel is wide. */
.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__bio-body {
	max-inline-size: none;
}

@media (min-width: 1100px) {

	.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__bio-body {
		columns: 2;
		column-gap: var(--wp--preset--spacing--70);
	}

	.bnjc-team__card:is(.is-open, :has(.bnjc-team__bio[open])) .bnjc-team__bio-body > p {
		break-inside: avoid-column;
	}
}


/* ---- On this page: a row of jump links under the hero (Yosef, 2 Nov 2026: more navigational, less scrolling) ---- */
.ab-jump {
	padding-block: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream-deep);
	border-block-end: 1px solid var(--wp--custom--color--border-subtle);
}

.ab-jump .ab-jump__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-jump .ab-jump__list li {
	margin: 0;
	padding: 0;
}

.ab-jump .ab-jump__list li::before {
	content: none;
}

.ab-jump .ab-jump__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.ab-jump .ab-jump__list a:hover,
.ab-jump .ab-jump__list a:focus-visible {
	text-decoration-color: currentColor;
}

.ab-jump .ab-jump__list a:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-halo);
}

/* On the team page the jump links sit in the same centred column as the welcome words below them: the nav carries the
   page's gutter, the list is the 65 characters, and its links line up with the first letter of the paragraphs. */
.ab-jump:has(+ .bnjc-team-welcome) .ab-jump__list {
	max-inline-size: 65ch;
	margin-inline: auto;
}