/* ---------------------------------------------------------------
   Band polarity.

   The site is light with dark bands through it, so a component cannot
   know its own colours: the same card sits on white in one section and on
   navy in another. These three tokens carry the answer, and a section
   with a dark background redefines them for everything inside it.

   Components below use the tokens instead of naming a colour, so moving a
   section from light to dark takes the card, the heading link, the date
   and the excerpt with it, and nothing has to be edited twice.
   --------------------------------------------------------------- */

:root {
	--bovf-ink:      var(--wp--preset--color--navy);
	--bovf-ink-soft: var(--wp--preset--color--navy-soft);
	--bovf-accent:   var(--wp--preset--color--green);
	--bovf-card-bg:  var(--wp--preset--color--paper);
}

.has-navy-background-color,
.has-navy-deep-background-color {
	/* A section that sets only its background leaves its text at the page
	   default, which is navy — invisible here. Setting the colour on the
	   band itself means everything inside inherits it, including headings,
	   which no longer pin themselves to white. */
	color: var(--wp--preset--color--paper);

	--bovf-ink:      var(--wp--preset--color--paper);
	--bovf-ink-soft: var(--wp--preset--color--grey);
	--bovf-accent:   var(--wp--preset--color--sage);
	--bovf-card-bg:  var(--wp--preset--color--navy-deep);
}

.has-green-background-color {
	color: var(--wp--preset--color--paper);

	--bovf-ink:      var(--wp--preset--color--paper);
	--bovf-ink-soft: var(--wp--preset--color--grey);
	--bovf-accent:   var(--wp--preset--color--grey);
	--bovf-card-bg:  var(--wp--preset--color--navy-deep);
}

/* Sage is the one pale band in the palette, so it inverts the others: dark
   text on light, not light on dark. Without this rule it inherited the page
   default and kept whatever a block had been given for a navy band, which
   put #F2F4F7 on #6BAA7D — 2.48:1, well under the 4.5:1 small text needs.
   Only the navy tones clear that bar on sage; navy-soft reaches 3.54 and is
   deliberately not used here.

   Grey and paper are here for the same reason. Every pale band in the
   palette needs this, and listing them one at a time as each is found in
   the wild is how the same bug arrives three times. */
.has-sage-background-color,
.has-grey-background-color,
.has-paper-background-color {
	color: var(--wp--preset--color--navy);

	--bovf-ink:      var(--wp--preset--color--navy);
	--bovf-ink-soft: var(--wp--preset--color--navy-deep);
	--bovf-accent:   var(--wp--preset--color--navy);
	--bovf-card-bg:  var(--wp--preset--color--paper);
}

/* The accent goes back to green on the two pale bands where it can be
   read. Sending every pale band to navy was a blunt fix for green on
   sage — 3.02:1 — and it cost the brand colour on white and grey, which
   is most of the site: eyebrows, read-more links and markers all came out
   navy, the same colour as the text beside them. Green is 8.27:1 on paper
   and 7.51:1 on grey. Sage keeps navy, which is the case that started
   this. */
.has-grey-background-color,
.has-paper-background-color {
	--bovf-accent: var(--wp--preset--color--green);
}

/* BOVF — supplementary styles for things theme.json cannot express. */

/* Animated figures in the stat band. Tabular numerals stop the width
   jittering while the value counts up. */
.bovf-stat {
	margin: 0 0 0.35em;
	color: var(--bovf-ink);
	font-size: var(--wp--preset--font-size--figure);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";

	/* "~191,000" was breaking after the comma and dropping the last digit
	   onto its own line, which reads as a different number. The figure size
	   is fluid down to 2rem, so nowrap cannot overflow a 320px column. */
	white-space: nowrap;
}

/* Issue cards: make the whole card a hit area without nesting links. */
.bovf-card {
	position: relative;
	transition: border-color 150ms ease, transform 150ms ease;
}

.bovf-card:has(a:hover),
.bovf-card:has(a:focus-visible) {
	border-color: var(--bovf-accent) !important;
}

.bovf-card h3 a {
	color: var(--bovf-ink);
	text-decoration: none;
}

.bovf-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bovf-card h3 a:hover,
.bovf-card h3 a:focus-visible {
	color: var(--bovf-accent);
}

/* Cards in a columns block should be equal height. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .bovf-card {
	align-self: stretch;
}

/* Outline button variant, used as the secondary action in hero and CTA. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--bovf-ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--bovf-accent);
	color: var(--bovf-accent);
	background: transparent;
}

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

/* Skip link. */
.bovf-skip-link {
	position: absolute;
	left: -9999px;
}

.bovf-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 999;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bovf-card {
		transition: none;
	}
}

/* Auto-fitting card grid, used by the secondary issues and issue archive. */
/* auto-fill, not auto-fit.

   auto-fit collapses the tracks nothing landed in, so a grid sized itself
   to how many cards it happened to hold: the branch list draws one grid per
   region, and Asia-Pacific's nine cards came out 379px wide against
   Europe's two at 584 and the Americas' single card at the full 1200. Same
   component, three different cards.

   auto-fill keeps the empty tracks, so a card is the same width whether its
   region has one branch or nine. */
.bovf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.bovf-grid > * {
	margin: 0;
}

/* Numbered steps in the concierge section. The numbers carry real sequence,
   so they stay visible rather than becoming decoration. */
.bovf-step-number {
	margin: 0 0 0.5em;
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* News and event rows. */
.bovf-news-item h3 a,
.bovf-news-item h2 a {
	color: var(--bovf-ink);
	text-decoration: none;
}

.bovf-news-item h3 a:hover,
.bovf-news-item h3 a:focus-visible,
.bovf-news-item h2 a:hover,
.bovf-news-item h2 a:focus-visible {
	color: var(--bovf-accent);
	text-decoration: underline;
}

.bovf-news-item > * {
	margin-block: 0.35em;
}

/* Footer link columns. */
.bovf-footer-links ul,
.bovf-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bovf-footer-links li,
.bovf-footer-list li {
	margin-bottom: 0.5em;
}

.bovf-footer-links a,
.bovf-footer-list a {
	color: var(--bovf-ink-soft);
	text-decoration: none;
}

.bovf-footer-links a:hover,
.bovf-footer-links a:focus-visible {
	color: var(--bovf-accent);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Mobile-first corrections.
   The layout is fluid by default; these handle the cases where
   fluid alone produces something awkward to use with a thumb.
   --------------------------------------------------------------- */

/* Nothing should ever push the page sideways.

   clip rather than hidden: overflow-x: hidden on an ancestor silently
   disables position: sticky on every descendant, which is why the
   sticky header did nothing. clip contains overflow without creating
   a scroll container, so sticky keeps working. */
body {
	overflow-x: clip;
}

/* Long unbroken words in headlines (e.g. "international") must not
   overflow narrow viewports. */
h1, h2, h3,
.wp-block-heading {
	/* break-word only intervenes when a word genuinely cannot fit, so a
	   long place name still wraps rather than overflowing. */
	overflow-wrap: break-word;
}

/* hyphens: auto used to apply to every heading, which hyphenated the hero
   into "internation-al fees" at desktop width. Hyphenation earns its place
   in a narrow column, not across a 1200px display heading. */
@media (max-width: 600px) {

	h2, h3,
	.wp-block-heading:not(.has-display-font-size) {
		hyphens: auto;
	}
}

/* Minimum 44px touch targets, on touch pointers only.

   Applying this to every navigation link at every width was wrong: it
   inflated the desktop dropdown items and forced them to wrap. Pointer
   coarse scopes it to devices actually driven by a thumb. */
@media (pointer: coarse) {
	.bovf-footer-links a,
	.bovf-footer-list a,
	.bovf-news-item h2 a,
	.bovf-news-item h3 a,
	.bovf-card h3 a {
		display: inline-block;
		/* min-height is a floor on the content box, so the padding below
		   was being added to it rather than counted inside it and every
		   one of these came out at 55px against the 44 asked for. Across
		   twenty-one footer links that alone was 230px of page. */
		box-sizing: border-box;
		min-height: 44px;
		line-height: 1.5;
		padding-block: 0.35rem;
	}
}

/* ---------------------------------------------------------------
   The footer on a phone

   Twenty-one links in three sections, stacked one per line, came to
   1766px — two and a bit screens of footer under every page. The
   links themselves are the whole of it; the logo, address and
   copyright together are under 200px.

   Two columns rather than fewer links, because which links belong in
   a footer is an editorial decision and not one to make in a
   stylesheet. Multi-column rather than grid so the reading order runs
   down one column and then down the next, the way a list of links is
   read, instead of left-to-right across pairs.

   781px is where WordPress stacks the column block, so this takes
   over at exactly the width the three columns become one.
   --------------------------------------------------------------- */
@media (max-width: 781px) {

	.bovf-footer-links ul,
	.bovf-footer-list {
		columns: 2;
		column-gap: 1.5rem;
	}

	/* A link split across the column break would be unreadable and
	   untappable at once. */
	.bovf-footer-links li,
	.bovf-footer-list li {
		break-inside: avoid;
		/* The tap target is 44px and already carries its own padding, so
		   this is only here to keep two adjacent targets from reading as
		   one. It does not need to be half a line. */
		margin-bottom: 0.25em;
	}
}

@media (max-width: 600px) {

	/* Full-width buttons stacked vertically. Two half-width buttons
	   side by side on a phone are hard to hit and read as less
	   important than they are. */
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding-block: 1rem;
	}

	/* The stat figures are the loudest thing on the page; on mobile
	   they need less air around them than on desktop. */
	.bovf-stat {
		margin-bottom: 0.2em;
	}

	/* Cards lose their outer radius flourish and tighten up. */
	.bovf-card {
		padding: 1.25rem !important;
	}

	/* Numbered steps sit inline with their heading to save vertical
	   space, since the number carries sequence rather than emphasis. */
	.bovf-step-number {
		font-size: var(--wp--preset--font-size--h3);
		margin-bottom: 0.25em;
	}
}

/* Between phone and desktop, let cards use two columns rather than
   jumping straight from one to three. */
@media (min-width: 601px) and (max-width: 900px) {
	.bovf-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Keep the sticky-ish header compact on short screens. */
@media (max-height: 700px) and (max-width: 600px) {
	.wp-site-blocks > header {
		padding-block: 0.5rem;
	}
}

/* ---------------------------------------------------------------
   Branches
   --------------------------------------------------------------- */

.bovf-branches__region {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h2);
	color: var(--bovf-ink);
}

.bovf-branches__region:first-child {
	margin-top: 0;
}

.bovf-branch {
	padding: var(--wp--preset--spacing--40);
	background: var(--bovf-card-bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
}

.bovf-branch h3 {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--h3);
}

.bovf-branch h3 a {
	color: var(--bovf-ink);
	text-decoration: none;
}

.bovf-branch h3 a:hover,
.bovf-branch h3 a:focus-visible {
	color: var(--bovf-accent);
}

/* The coordinator's name and the "forming" badge share one slot.

   The badge carries padding the plain name does not, so it stands 28.8px
   against the name's 20.8 — and because a grid row is as tall as its
   tallest card, the two branches still looking for a coordinator were
   making every card beside them 8px taller. The name matches the badge
   rather than the other way round, which leaves the badge as designed. */
.bovf-branch__coordinator {
	/* 1.8rem is the badge's own height. Only the name is padded up to it —
	   the badge sizes on its content box, so giving it the same min-height
	   added its padding on top and made it taller still. */
	min-height: 1.8rem;
}

.bovf-branch__coordinator {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bovf-accent);
}

/* A branch without a coordinator is a recruitment opportunity, so it
   reads as an invitation rather than an apology. */
.bovf-branch__status {
	display: inline-block;
	margin: 0 0 0.9rem;

	/* One line, always. Wrapped to two in a narrow card, which made the
	   slot 51px against a coordinator name's 29 and put the two branches
	   without a coordinator out of step with every other card below
	   1200px. The label is short enough for the 280px minimum column. */
	white-space: nowrap;
	padding: 0.2rem 0.6rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--sage);
	border-radius: 3px;
}

/* Every summary occupies the same five lines, so every branch card is the
   same height whatever that branch had to say.

   Stretching alone could not do this. Each region is its own grid, so a row
   equalises against its own tallest card and nothing else: Asia-Pacific came
   out at 329px, Africa 266, Europe 245, the Americas 233. The summary is the
   only part that varies between cards, so pinning it is what makes them
   match across the whole page rather than only across a row.

   Five lines fits every branch but one, and the card links to the branch's
   own page where the rest of it is. Said in lines rather than pixels because
   the same sentence wraps differently at every width. */
.bovf-branch__summary {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bovf-ink-soft);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;

	min-height: 6.5rem;            /* ≈ five lines, for browsers without lh */
	min-height: calc(5 * 1lh);
}

.bovf-branch__leads {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--bovf-ink);
}

.bovf-branch__leads span {
	display: block;
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bovf-ink-soft);
}

/* ---------------------------------------------------------------
   Header

   The header is light while the page below is dark. That inversion
   is deliberate: it separates navigation from content without a
   border, and it means the red call to action reads as the single
   brightest thing in the bar.
   --------------------------------------------------------------- */

.bovf-header {
	--bovf-header-ink: #0B1D3A;
	--bovf-header-muted: #4A5875;
	--bovf-header-line: rgba(11, 29, 58, 0.12);
	background: #FFFFFF;
	color: var(--bovf-header-ink);
	position: relative;
	z-index: 20;
}

.bovf-header a {
	color: var(--bovf-header-ink);
	text-decoration: none;
}

/* Utility bar ---------------------------------------------------- */

.bovf-utility-bar {
	padding-block: 0.4rem;
	border-bottom: 1px solid var(--bovf-header-line);
	background: var(--bovf-ink-soft);
	font-size: var(--wp--preset--font-size--eyebrow);
}

.bovf-utility-bar a {
	color: var(--bovf-header-muted);
	padding-block: 0.25rem;
	min-height: 0;
}

.bovf-utility-bar a:hover,
.bovf-utility-bar a:focus-visible {
	color: var(--bovf-header-ink);
	text-decoration: underline;
}

/* Main bar ------------------------------------------------------- */

.bovf-main-bar {
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--bovf-header-line);
}

.bovf-header-inner {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.bovf-brand {
	gap: 0.75rem;
	align-items: center;
	flex: none;
}

.bovf-brand .wp-block-site-logo img {
	border-radius: 6px;
	display: block;
}

.bovf-brand__text {
	line-height: 1.15;
}

.bovf-brand .wp-block-site-title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.bovf-brand .wp-block-site-tagline {
	margin: 0.1rem 0 0;
	font-size: 0.8125rem;
	color: var(--bovf-header-muted);
}

/* Primary navigation --------------------------------------------- */

.bovf-primary-nav {
	font-weight: 600;
}

.bovf-primary-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0;
	border-bottom: 2px solid transparent;
}

.bovf-primary-nav .wp-block-navigation-item__content:hover,
.bovf-primary-nav .wp-block-navigation-item__content:focus-visible,
.bovf-primary-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
	border-bottom-color: var(--wp--preset--color--red);
}

/* Dropdowns ------------------------------------------------------ */

.bovf-header .wp-block-navigation .wp-block-navigation__submenu-container {
	/* max-content sizes the panel to its longest item, so nothing
	   wraps; the cap stops a very long label running off screen. */
	width: max-content;
	min-width: 13rem;
	max-width: 22rem;
	padding: 0.4rem;
	background: #FFFFFF;
	border: 1px solid var(--bovf-header-line) !important;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(11, 29, 58, 0.16);
	overflow: hidden;
}

.bovf-header .wp-block-navigation .wp-block-navigation__submenu-container li {
	width: 100%;
}

.bovf-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	min-height: 0;
	padding: 0.5rem 0.75rem !important;
	border: 0;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
}

/* The hovered item inverts: the highlight is navy-soft, so the label has
   to go light with it. It was left on --bovf-header-ink, which is navy —
   navy on navy-soft is 1.4:1, so the item people were pointing at was the
   one item in the menu they could not read. Paper on navy-soft is 9.6:1. */
.bovf-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.bovf-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--bovf-ink-soft);
	color: var(--wp--preset--color--paper, #FFFFFF);
}

/* The parent item keeps its underline while its submenu is open. */
.bovf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	border-bottom: 0;
}

/* Header actions ------------------------------------------------- */

.bovf-header-actions {
	flex: none;
	align-items: center;
	gap: 0.75rem;
}

.bovf-header-actions .wp-block-button__link {
	padding: 0.6em 1.15em;
	border-radius: 6px;
	font-weight: 700;

	/* theme.json already asks for white on the red button and was losing.
	   It writes the rule as :root :where(.wp-element-button, ...), and
	   :where() contributes nothing to specificity — so that selector counts
	   as one class against .bovf-header a's one class and one element, and
	   the header's link colour won. The button came out navy on red at
	   3.38:1, under the 4.5 it needs at this size.

	   Two classes settles it. The plain-style rule below is three and still
	   wins for "My account", which should stay navy on white. */
	color: var(--wp--preset--color--paper);
}

.bovf-header-actions .is-style-plain .wp-block-button__link {
	background: transparent;
	color: var(--bovf-header-ink);
	padding-inline: 0.25em;
}

.bovf-header-actions .is-style-plain .wp-block-button__link:hover,
.bovf-header-actions .is-style-plain .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--red);
	background: transparent;
	text-decoration: underline;
}

.bovf-header :focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

/* Mobile --------------------------------------------------------- */

@media (max-width: 900px) {

	.bovf-header-inner {
		gap: 0.75rem;
	}

	.bovf-brand .wp-block-site-tagline {
		display: none;
	}

	.bovf-brand .wp-block-site-title {
		font-size: 1.0625rem;
	}

	/* The overlay is dark, so its contents invert.

	   Both selectors here carry a guard they do not appear to need, and it
	   is the whole reason the panel works. Core paints the open overlay
	   white and its text black unless the navigation block itself carries a
	   background, and it says so with four classes:

	     .wp-block-navigation:not(.has-background)
	       .wp-block-navigation__responsive-container.is-menu-open

	   :not() contributes the specificity of its argument, so that is four,
	   and the three classes this used to have lost to it. The result was a
	   white panel with the white link colour below still applying — every
	   item present, correctly sized and positioned, and invisible. It read
	   as a menu that had stopped working rather than as a colour bug.

	   Repeating core's own guard and keeping the header in front makes five,
	   which wins on specificity. !important would also have worked and would
	   have left the next person to discover this the same way. */
	.bovf-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--navy);
		padding: 1.5rem;
	}

	/* The close button draws itself in currentColor, so the container's own
	   colour has to be inverted and not just the links'. Core sets it to
	   black under the matching guard, which is why this needs one too. */
	.bovf-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
		color: var(--wp--preset--color--paper);
	}

	.bovf-header .wp-block-navigation__responsive-container.is-menu-open a {
		color: var(--wp--preset--color--paper);
	}

	.bovf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent;
		border: 0;
		box-shadow: none;
		padding-left: 1rem;
	}

	.bovf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		width: auto;
		max-width: none;
		box-shadow: none;
	}

	.bovf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
		white-space: normal !important;
	}

	.bovf-header-actions {
		gap: 0.4rem;
	}

	.bovf-header-actions .wp-block-button__link {
		padding: 0.5em 0.85em !important;
		width: auto !important;
		display: inline-block !important;
	}

	.bovf-header-actions > .wp-block-button {
		width: auto !important;
	}

	.bovf-header-actions {
		flex-direction: row !important;
		align-items: center !important;
	}

	/* The members' bar holds five links, of which the two people want —
	   My Account and Log Out — are last. Scrolling them sideways with the
	   scrollbar hidden meant that on a phone they were simply not there:
	   no edge, no arrow, nothing to suggest the row continued. Reported
	   from a real phone on launch night.

	   Wrapping onto a second line costs a few pixels of height and makes
	   every link visible, which for an audience largely over seventy is
	   the better trade. */
	.bovf-utility-bar .wp-block-navigation {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 0.1rem;
	}

	.bovf-utility-bar .wp-block-navigation-item {
		white-space: nowrap;
	}
}

/* Items that belong in the phone menu and nowhere else.

   "My account" is in the main menu so that it appears in the overlay,
   which is where somebody on a phone looks for it. On a wide screen the
   same link already sits in the header, and a second copy in the main
   navigation would sit oddly between Contact and nothing. */
.bovf-phone-only,
.wp-block-navigation .wp-block-navigation-item.bovf-phone-only {
	/* Core sets display:flex on every navigation item with two classes,
	   so a single-class rule here loses and the item shows at every
	   width — which is how it came to appear twice on a desktop. */
	display: none;
}

@media (max-width: 900px) {
	.wp-block-navigation .wp-block-navigation-item.bovf-phone-only {
		display: flex;
	}

	.bovf-phone-only {
		display: block;
	}
}

/* Below 900px the hamburger appears and the main menu carries "My
   account", so the header's own copy would be the second of two on a
   screen with no room for either. It goes, and "Join BOVF" — the one
   thing a first-time visitor should see — keeps the space.

   This was briefly the other way round: the header copy was hidden at
   600px while nothing else offered the link, which left a phone with no
   route to an account at all. Hiding it is right; hiding it with no
   replacement was not. */
@media (max-width: 900px) {
	.bovf-header-actions .is-style-plain {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Measure and rhythm utilities.

   These exist as classes rather than inline styles because inline
   styles that aren't backed by a block attribute fail WordPress's
   block validation — the editor re-renders from attributes, finds
   markup it didn't expect, and offers "Attempt recovery".
   --------------------------------------------------------------- */

.bovf-mb {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Reading measures.

   The width is carried in a custom property so the cap can be stated once,
   in a selector specific enough to survive both environments.

   A plain .bovf-measure-60 is specificity (0,1,0), and so is the core
   constrained-layout rule that sets max-width on every child:

     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))

   because :where() contributes nothing. Equal specificity means source
   order decides, and the order is not the same in both places: on the front
   end blocks.css is a linked stylesheet loading after the inline global
   styles and wins, while in the editor the layout CSS is injected into the
   canvas afterwards and wins instead. So the measure applied on the
   published page and not while editing it.

   Pairing the class with the parent gives (0,2,0), which outranks the core
   rule wherever it happens to sit.

   The margins are a separate problem: a constrained layout centres any
   child narrower than the container, so a capped measure was also being
   pushed into the middle of the section. Those need !important, because
   core sets them !important. */
.bovf-measure-24 { --bovf-measure: 24ch; }
.bovf-measure-60 { --bovf-measure: 60ch; }
.bovf-measure-65 { --bovf-measure: 65ch; }
.bovf-measure-70 { --bovf-measure: 70ch; }

[class*="bovf-measure-"] {
	max-width: var(--bovf-measure);
	/* A capped measure stranded the last word of a sentence on a line of
	   its own. pretty lets the browser pull a word back from the line
	   before; browsers without it wrap exactly as they did. */
	text-wrap: pretty;
}

.is-layout-constrained > [class*="bovf-measure-"] {
	max-width: var(--bovf-measure);

	/* A constrained layout centres each child with auto margins, so a child
	   capped narrower than its siblings drifts to the middle of the column.
	   These are reading measures, not centred display text, so the start
	   margin is pinned and only the end margin stays automatic.

	   This assumes the container IS the content column, which is how every
	   section here is built: a full-bleed wrapper with a constrained group
	   inside it. Put the width on the wrapper instead and its children are
	   positioned by auto margins against the whole viewport, at which point
	   pinning the start margin lands them on the padding edge. */
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* ---------------------------------------------------------------
   Card equalisation.

   Stretching the boxes is only half of it — the "Read more" link has
   to sit on a common baseline too, or cards with shorter text still
   look ragged. Each card becomes a flex column and the last child is
   pushed to the bottom.
   --------------------------------------------------------------- */

.bovf-grid {
	align-items: stretch;
}

.bovf-card {
	display: flex;
	flex-direction: column;
}

/* Deliberately no height here.

   A card that is itself a column is already stretched by the columns row,
   and `align-self: stretch` applies only when the item's cross size is
   auto. `height: 100%` is not auto, so setting it opts the card out of
   stretching altogether — the cards sized to their own text and came out
   ragged, and the vertical-alignment control in the editor appeared to do
   nothing because this rule was quietly cancelling it. */

/* A card nested inside a column is a different case: the column stretches,
   but the card inside it does not follow unless told to. The column's
   height is definite by then, so the percentage resolves. */
.wp-block-column > .bovf-card {
	height: 100%;
}

/* A Query Loop laid out as a grid is the same case again, one element
   further out. The grid stretches its <li> items so a row of them is
   already square, but the card inside an item sizes to its own text and
   leaves a gap under the short ones — which is what a ragged row of issue
   cards actually is. The item's height is definite by the time this
   resolves, so the percentage works; and because the card is the item's
   child rather than the item itself, this does not opt anything out of
   stretching the way it would one level up. */
.is-layout-grid > * > .bovf-card {
	height: 100%;
}

/* The final element — normally the Read more link — takes the slack. */
.bovf-card > *:last-child {
	margin-top: auto;
	padding-top: 1rem;
}

/* Except when the Read more is inside the excerpt block, which is how the
   core block renders it. The excerpt is then the card's last child and
   takes the slack itself, which drops the body copy to the bottom of the
   card and leaves a hole under the heading — the taller the card, the
   bigger the hole. Body copy belongs under its heading; the link is the
   part that belongs on a common baseline with the other cards.

   Same specificity as the rule above, so this has to follow it. */
.bovf-card > .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin-top: 0;
	padding-top: 0;
}

.bovf-card > .wp-block-post-excerpt > .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 1rem;
	margin-bottom: 0;
}

/* Headings and body copy keep their own rhythm rather than being
   stretched by the flex container. */
.bovf-card > * {
	flex: none;
}

/* When cards sit in a Columns block rather than the grid, the columns
   themselves need to stretch before their contents can. */
.wp-block-columns:has(.bovf-card) {
	align-items: stretch;
}

.wp-block-columns > .wp-block-column:has(> .bovf-card) {
	display: flex;
}

.wp-block-columns > .wp-block-column > .bovf-card {
	width: 100%;
}

/* The band a signed-in member sees for the issues they picked.
   
   A panel inside the content column rather than a full-bleed band like the
   rest of the homepage, and deliberately so: the page's own bands are what
   everybody sees, and this one is addressed to one person. Looking slightly
   apart from them is the point.
   
   It is also why the shortcode emits this section itself instead of sitting
   inside a group block on the page — a member with no interests gets no
   band at all, where an empty group would leave a padded gap on the
   homepage for the majority who have not picked any. */
.bovf-for-you {
	/* A band, not a card. It sat as a rounded panel with 48px of padding, so
	   its box lined up with the page while every word inside it started
	   48px further in than the heading of the band above. alignfull lets
	   WordPress's own layout break it out and put the root padding back,
	   which is what the page's other sections do.

	   No background: the section below it is grey, and two grey bands in a
	   row read as one. The eyebrow and the member's name carry the fact
	   that this part is addressed to them. */
	padding-block: var(--wp--preset--spacing--60);
}

/* The column, carrying the page's own side padding.
   
   Centring a 1200px box gets the left edge right on a wide screen by
   accident — the auto margins happen to land on it — and wrong on a narrow
   one, where the padding is what positions the text and there was none. So
   the padding is applied here and the cap is widened to hold it, which puts
   the content on 1200 at the same edge as every other band at any width. */
.bovf-for-you__inner {
	box-sizing: border-box;
	max-width: calc(
		1200px
		+ var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 2rem))
		+ var(--wp--style--root--padding-right, clamp(1.25rem, 4vw, 2rem))
	);
	margin-inline: auto;
	padding-inline:
		var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 2rem))
		var(--wp--style--root--padding-right, clamp(1.25rem, 4vw, 2rem));
}

.bovf-for-you > *,
.bovf-for-you__inner > * {
	margin-block: 0;
}

/* > h2 addressed a child of the section, and the heading is a child of the
   inner wrapper — so this matched nothing and the rule above, which zeroes
   the margin on everything in that wrapper, was the only one applying. The
   member's name sat directly on top of the first card with no gap at all.

   The space below is larger than the space above on purpose: the eyebrow
   and the heading are one unit, and the cards are the next. */
.bovf-for-you__inner > h2 {
	margin-block: 0.25rem var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
}

.bovf-for-you .bovf-card h3 {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--h-3);
}

.bovf-for-you .bovf-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--navy-soft);
}

/* What has happened on the issue, and what is about to. Separated from the
   summary by a rule rather than a gap, because a card of three paragraphs
   with nothing between them reads as one block of text. */
.bovf-for-you .bovf-for-you__item {
	margin-block-start: 0.7rem;
	padding-block-start: 0.7rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
	line-height: 1.45;
}

.bovf-for-you .bovf-for-you__item + .bovf-for-you__item {
	border-block-start: 0;
	padding-block-start: 0;
	margin-block-start: 0.4rem;
}

/* The cards had no surface of their own, so three issues read as three
   columns of loose text with a hairline in the middle of one of them —
   the rule above the "coming up" line was the only edge on the whole band
   and looked like a mistake rather than a divider. Giving each issue a
   panel makes the rule read as part of a card instead. */
.bovf-for-you .bovf-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
}

/* Pins the news and event lines to the foot of the card, so they line up
   across a row whose summaries are two, three and four lines long.

   Not :first-of-type — of-type counts elements, not classes, and the first
   <p> in a card is the summary. The selector matched nothing and the lines
   floated wherever the text left them. The rule below restores the gap
   between a pair of them, and needs the extra class to outrank this one. */
.bovf-for-you .bovf-card .bovf-for-you__item {
	margin-block-start: auto;
}

.bovf-for-you .bovf-card .bovf-for-you__item + .bovf-for-you__item {
	margin-block-start: 0.4rem;
}

.bovf-for-you .bovf-for-you__label {
	display: inline-block;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin-inline-end: 0.35rem;
}

/* A member who has chosen no issues gets this where the issue cards
   would be. Bordered rather than filled: it stands in for content that
   is missing, and a solid panel here would compete with the two real
   asks further down the band. */
.bovf-choose {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 6px;
}

.bovf-choose__text {
	flex: 1 1 20rem;
	margin: 0;
	max-width: 62ch;
	color: var(--bovf-ink-soft);
}

.bovf-choose__go {
	box-sizing: border-box;
	flex: none;
	display: inline-block;
	padding: 0.6em 1.2em;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 4px;
	color: var(--bovf-ink);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.bovf-choose__go:hover,
.bovf-choose__go:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

@media ( max-width: 30rem ) {

	.bovf-choose__go {
		display: block;
		inline-size: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------
   Becoming a member

   Navy, where the volunteering panel below it is grey. Two asks in a
   row otherwise read as one long list of things the reader is being
   told to do; a change of ground says they are separate questions and
   that this is the one with a number attached.

   Text and button side by side where there is room, so the ask stays
   one line of thought rather than a paragraph with a button parked
   under it.
   --------------------------------------------------------------- */
.bovf-upgrade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--navy);
	border-radius: 6px;
	color: var(--wp--preset--color--paper);
}

.bovf-upgrade__text {
	flex: 1 1 22rem;
}

.bovf-upgrade__heading {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
	color: var(--wp--preset--color--paper);
}

.bovf-upgrade__body {
	margin: 0;
	max-width: 62ch;
	/* Not the body ink: this sits on navy, and the soft grey used for
	   supporting text everywhere else would be under 4.5:1 here. */
	color: #C9D7EC;
	font-size: var(--wp--preset--font-size--caption);
}

.bovf-upgrade__go {
	flex: none;
	display: inline-block;
	padding: 0.7em 1.4em;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.bovf-upgrade__go:hover,
.bovf-upgrade__go:focus-visible {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
}

.bovf-upgrade__go:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 2px;
}

@media ( max-width: 30rem ) {

	/* Full width rather than shrink-wrapped: a button on its own line
	   that stops halfway across looks like it failed to load.

	   border-box because this theme sets no global one, so 100% of a
	   295px column plus 21px of padding either side came to 337 and hung
	   22px out of the panel — the third time this box model has caught
	   something on this page. */
	.bovf-upgrade__go {
		box-sizing: border-box;
		display: block;
		inline-size: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------
   Could you help?

   A tick list and a button, closing the member's band. Two columns of
   three where there is room, because six items in one column pushes
   the button below the fold on a phone and makes a short list look
   like a long commitment.

   The label is the target rather than the box beside it — a 13px
   checkbox is not something to ask a thumb to find.
   --------------------------------------------------------------- */
.bovf-volunteer {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--grey);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
}

.bovf-volunteer__heading {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.25;
}

.bovf-volunteer__intro {
	margin: 0 0 1rem;
	max-width: 60ch;
	color: var(--bovf-ink-soft);
	font-size: var(--wp--preset--font-size--caption);
}

.bovf-volunteer__list {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: 0.15rem 1.5rem;
}

@media ( min-width: 40rem ) {

	.bovf-volunteer__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
	}
}

.bovf-volunteer__role {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.bovf-volunteer__role input {
	/* Sized and nudged to sit on the first line of a label that wraps,
	   rather than centred against the whole two-line block. */
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin: 0.45rem 0 0;
	flex: none;
	accent-color: var(--bovf-accent);
}

.bovf-volunteer__role label {
	/* The padding is the tap target, so it is on the label and not the
	   list item — a gap between two labels should not select either. */
	padding-block: 0.45rem;
	line-height: 1.4;
	cursor: pointer;
}

.bovf-volunteer__go {
	display: inline-block;
	padding: 0.7em 1.4em;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
}

.bovf-volunteer__go:hover,
.bovf-volunteer__go:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

/* The same 44px floor the footer links keep, and the same trap: min-height
   bounds the content box, so without border-box the padding is added to it
   and a 44 becomes a 63. Applied on touch pointers only, because on a
   mouse it just spaces six short lines further apart than they need. */
@media ( pointer: coarse ) {

	.bovf-volunteer__role label {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		min-block-size: 44px;
	}

	.bovf-volunteer__role input {
		margin-block-start: 0.75rem;
	}
}

/* ---------------------------------------------------------------
   The news and events strip

   Two short lists under the issue cards. They exist because the
   per-issue lines can only appear once a story has been filed
   against that issue, and until that filing is done the band would
   otherwise be summaries and nothing else.

   Side by side where there is room, stacked where there is not, and
   each one capped so a long headline wraps inside its own column
   rather than setting the width of the pair.
   --------------------------------------------------------------- */
/* The person leading on the issue. Their name carries the line, so the role
   beside it takes the same quiet treatment as a date — it is context for the
   name rather than a second thing to read. */
.bovf-for-you .bovf-for-you__lead-name {
	font-weight: 600;
}

.bovf-for-you .bovf-for-you__contact {
	white-space: nowrap;
	font-weight: 600;
	color: var(--bovf-accent);
}

.bovf-for-you .bovf-for-you__contact:hover,
.bovf-for-you .bovf-for-you__contact:focus-visible {
	text-decoration: underline;
}

/* The card's title link covers the whole card so the card is clickable, and
   that layer sits over anything not lifted above it — the contact link was
   under it and could not be clicked at all. */
.bovf-for-you .bovf-card .bovf-for-you__item {
	position: relative;
	z-index: 1;
}

.bovf-for-you__strip {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

@media ( min-width: 48rem ) {

	.bovf-for-you__strip {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
		gap: var(--wp--preset--spacing--50);
	}
}

.bovf-for-you__feed-heading {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bovf-accent);
}

.bovf-feed {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A rule between entries rather than around each one. Four bordered boxes
   in a column under three bordered cards is more edge than content. */
.bovf-feed__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	padding-block: 0.55rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.bovf-feed__title {
	flex: 1 1 12rem;
	color: var(--bovf-ink);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.35;
}

.bovf-feed__title:hover,
.bovf-feed__title:focus-visible {
	color: var(--bovf-accent);
	text-decoration: underline;
}

.bovf-feed__when {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--bovf-ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bovf-feed__more {
	display: inline-block;
	margin-block-start: 0.7rem;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--bovf-accent);
	text-decoration: none;
}

.bovf-feed__more:hover,
.bovf-feed__more:focus-visible {
	text-decoration: underline;
}

.bovf-for-you__label {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bovf-accent);
	margin-inline-end: 0.15rem;
}

/* Where they are, and who runs it. Sits under the cards rather than beside
   them: it is one line and it applies to the member, not to any one issue. */
.bovf-for-you__branch {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--navy-soft);
	line-height: 1.5;
}

.bovf-for-you__branch a {
	color: var(--bovf-accent);
}

.bovf-for-you__when {
	white-space: nowrap;
	color: var(--wp--preset--color--navy-soft);
}

/* What membership includes: a tick per line rather than a bullet, because
   every line is something you get and a disc does not say that. The marker
   is a list-style string, so it is decoration and screen readers do not
   read "tick" before each item. */
.bovf-ticks {
	list-style: "\2713\00a0\00a0";
	padding-inline-start: 1.4rem;
}

.bovf-ticks li {
	padding-inline-start: 0.2rem;
	margin-block-end: 0.4rem;
}

.bovf-ticks li::marker {
	color: var(--bovf-accent);
	font-weight: 700;
}

/* The period after a price is not part of the number. */
.bovf-price-unit {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	color: var(--wp--preset--color--navy-soft);
}

/* News list: a rule between entries, not a box around each one.

   The markup asked for a border colour and a top width. WordPress turns a
   border colour into `border-style: solid` on all four sides, so the three
   sides with no width of their own fell back to the browser's default —
   1.5px — and every entry came out boxed. The separator lives here instead,
   where "every one but the last" can actually be said, which is what the
   prototype does and what a list of headlines wants: the eye should follow
   the headlines down, not count the boxes. */
.bovf-news-item {
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block-end: var(--wp--preset--spacing--40);
}

/* "Last" has to be asked of the list item, not of the entry. Each entry is
   the only child of its <li>, so :last-child on the entry itself is true
   every time and the rule disappeared from the whole list. */
.wp-block-post:last-child .bovf-news-item {
	border-block-end: 0;
	padding-block-end: 0;
}

/* The date is a label, not a sentence — a little weight separates it from
   the summary below without needing a second colour. */
.bovf-news-item .wp-block-post-date {
	font-weight: 500;
}

/* Headline line-height. The theme's heading rhythm is set for display
   sizes, where tight leading is what you want; at 24px over two or three
   lines it closes the lines up until the headline reads as a block. */
.bovf-news-item .wp-block-post-title {
	font-weight: 700;
	line-height: 1.3;
}

/* ---------------------------------------------------------------
   Sticky header.

   The sticky has to be on the outermost header, not on the bar inside
   it. A sticky element only travels within its own parent, and
   .bovf-header is exactly as tall as the header — so the bar was
   position: sticky, computed as sticky, and scrolled away with
   everything else because it had nowhere to travel to. The template
   part wrapper is a child of .wp-site-blocks, which is as tall as the
   page, so from there it can actually stick.

   That means the members' utility strip pins along with the main bar
   rather than scrolling away. Keeping only the bar would mean offsetting
   the header by the strip's measured height and maintaining that on
   resize; the strip is one line, and only signed-in members ever see it.
   --------------------------------------------------------------- */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--wp--preset--color--paper, #fff);
	/* The shadow only appears once the header has left its resting
	   place, so a page at the top looks unchanged. */
	transition: box-shadow 200ms ease;
}

.wp-site-blocks > header.is-stuck {
	box-shadow: 0 4px 20px rgba( 11, 29, 58, 0.14 );
}

/* Once it is floating over the page it can afford to be shorter. On a
   phone the header is already a sixth of the screen; giving some of that
   back to the thing somebody is actually reading matters more there than
   the logo being at full size. */
.wp-site-blocks > header .bovf-main-bar {
	transition: padding 200ms ease;
}

.wp-site-blocks > header.is-stuck .bovf-main-bar {
	padding-block: 0.55rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > header .bovf-main-bar {
		transition: none;
	}
}

/* WordPress inserts an admin bar for logged-in users, which would
   otherwise sit on top of the sticky header. */
.admin-bar .wp-site-blocks > header {
	top: 32px;
}

@media ( max-width: 782px ) {
	.admin-bar .wp-site-blocks > header {
		top: 46px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-site-blocks > header {
		transition: none;
	}
}
}

/* Anchor links must not land underneath the sticky bar. */
:where(h1, h2, h3, h4, [id]) {
	scroll-margin-top: 6rem;
}

/* On short screens a sticky bar eats a meaningful share of the
   viewport, so it is not worth the trade. */
@media (max-height: 480px) {
	.bovf-header .bovf-main-bar {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bovf-header .bovf-main-bar {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Section seams.

   Each full-width section carries its own vertical padding, so any
   block gap between them just exposes the page background as a band
   between coloured sections. Collapse it.
   --------------------------------------------------------------- */

.bovf-sections > .entry-content > *,
.bovf-sections > .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.bovf-sections > .entry-content,
.bovf-sections > .wp-block-post-content {
	--wp--style--block-gap: 0;
}

/* Consecutive sections sharing a background read as one block, which
   is intended — the padding provides the separation, not a gap. */
.bovf-sections section + section {
	margin-top: 0;
}

/* News listing rendered by [bovf_news]. */

.bovf-news-list .bovf-news-item {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}

.bovf-news-list .bovf-news-item:first-child {
	border-top: 0;
}

.bovf-news-item__date {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bovf-accent);
}

.bovf-news-list h3 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--h3);
}

.bovf-news-item__excerpt {
	margin: 0;
	color: var(--bovf-ink-soft);
	max-width: 70ch;
}

.bovf-news-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}

.bovf-news-pagination .page-numbers {
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	text-decoration: none;
}

.bovf-news-pagination .page-numbers.current {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);

	/* Paper, not the band's ink. --bovf-ink is navy on a pale band, and
	   navy on red is 3.38:1 — so the one number telling you where you are
	   was the least readable thing in the row. White on red is 4.96. */
	color: var(--wp--preset--color--paper);
	font-weight: 700;
}

/* Editor-only diagnostic under an empty news listing. */
.bovf-news-empty--hint {
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--bovf-accent);
	background: rgba(107, 170, 125, 0.08);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------
   Dated timeline, used by the achievements page.

   One rule down the left with a dot per entry. The dot is drawn here
   rather than marked up, so there is no empty element per entry and
   nothing for a screen reader to announce. It carries a ring in the page
   background so it reads as sitting on the rule rather than beside it.
   --------------------------------------------------------------- */

/* The eyebrow above a section heading. A class rather than a colour and
   three inline properties on every instance: it follows the band, and it
   keeps inline styles out of the markup, which is what the editor rejects
   when no attribute accounts for them. */
.bovf-eyebrow {
	color: var(--bovf-accent);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bovf-timeline {
	position: relative;
	padding-left: 2.25rem;

	/* Not the `line` colour: at 14% white it is meant for a hairline
	   between rows and all but disappears as a 2px rule running the height
	   of a section.

	   The dot sits on the rule and carries a ring so it reads as a marker
	   rather than a bulge, which means the ring has to match the colour
	   behind it. The default is the page background, because that is where
	   the pattern lands when someone inserts it. Inside a raised section,
	   add the modifier below. */
	--bovf-timeline-rule: var(--wp--preset--color--line);
	--bovf-timeline-ground: var(--wp--preset--color--paper);

	border-left: 2px solid var(--bovf-timeline-rule);
}

/* For a timeline inside a navy-deep section or card rather than straight
   on the page. */
/* For a timeline on a dark band rather than the page itself. */
.bovf-timeline--raised {
	--bovf-timeline-rule: rgba(255, 255, 255, 0.28);
	--bovf-timeline-ground: var(--wp--preset--color--navy-deep);
}

.bovf-timeline__item {
	position: relative;
}

.bovf-timeline__item + .bovf-timeline__item {
	margin-top: var(--wp--preset--spacing--50);
}

.bovf-timeline__item::before {
	content: "";
	position: absolute;

	/* Half the dot plus the rule's own width, so it centres on the rule
	   whatever the padding above is set to. */
	left: calc(-2.25rem - 1px - 0.4375rem);
	top: 0.55em;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--bovf-accent);
	box-shadow: 0 0 0 4px var(--bovf-timeline-ground);
}

/* The issue tags below an entry. */
.bovf-timeline__item a[href^="/issues/"] {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--caption);
	text-decoration: none;
}

.bovf-timeline__item a[href^="/issues/"]:hover,
.bovf-timeline__item a[href^="/issues/"]:focus-visible {
	border-color: var(--bovf-accent);
}

@media (max-width: 600px) {

	.bovf-timeline {
		padding-left: 1.5rem;
	}

	.bovf-timeline__item::before {
		left: calc(-1.5rem - 1px - 0.375rem);
		width: 0.75rem;
		height: 0.75rem;
	}
}

/* ---------------------------------------------------------------
   Top-level spacing.

   WordPress gives every direct child of .wp-site-blocks a
   margin-block-start of the global block gap. Header, main and footer are
   those children, and every section inside them already carries its own
   padding — so the gap contributed nothing but a 16px stripe of the page
   background above the header and again below it, which read as a stray
   dark band top and bottom of every page.

   Removed only at that level. Block gap inside the content is untouched.
   --------------------------------------------------------------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* The header's bars carry their own padding and were never meant to be
   separated by the global block gap. It only became visible because
   header.js inserts a sentinel as the first child for the sticky-header
   observer: that made the sentinel the :first-child WordPress zeroes the
   margin on, pushed the gap onto the main bar behind it, and the margin
   then collapsed out through the page as a dark band above the header. */
.bovf-header > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   People — trustees and policy group leads.

   An initials disc rather than a photograph: the prototype notes that
   real photographs would need each person's approval and proper alt
   text, and initials are honest until those exist.

   The disc is aria-hidden. It carries no information a screen reader
   needs — the name is right beside it — and read aloud "BD" before every
   name would be noise.
   --------------------------------------------------------------- */

.bovf-people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.bovf-person {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--bovf-card-bg);
}

.bovf-person__head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.bovf-person__initials {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bovf-person__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.3;
}

.bovf-person__role {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--bovf-accent);
}

.bovf-person__country {
	margin: 0.1rem 0 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--bovf-ink-soft);
}

.bovf-person__bio {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--bovf-ink-soft);
}

/* The link sits on a common baseline across a row, so cards with shorter
   biographies do not leave it floating mid-card. */
.bovf-person__leads {
	margin: auto 0 0;
	padding-top: 0.75rem;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
}

@media (max-width: 600px) {

	.bovf-person__initials {
		width: 3rem;
		height: 3rem;
	}
}

/* ---------------------------------------------------------------
   Full-width band.

   Nothing here sets the width — align:full and a flow layout do that in
   the markup. This only guards the case the band exists for: content that
   is genuinely wider than the window, a data table above all. Without the
   scroll container the table would push the page sideways and every other
   section with it.
   --------------------------------------------------------------- */

.bovf-band > table,
.bovf-band .brndt-table-wrap,
.bovf-band .wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------
   Body prose.

   The column is wide so the body lines up with the heading above it, but
   a line of text 1200px long is unreadable — so the text is capped here
   rather than by narrowing the column. Left-aligned, not centred: a
   constrained layout would otherwise centre anything narrower than the
   column and the prose would drift away from its own heading.

   Headings are capped wider than body text. They are read in a glance
   rather than line by line, and breaking a short heading early looks like
   a mistake.
   --------------------------------------------------------------- */

/* Everything in the body column shares one width — the callouts included.
   Capping the text but leaving the boxes on the full column made the boxes
   run 400px further right than the paragraph above them, which reads as
   two different layouts on one page. The prototype gives prose and
   callouts the same width, and so does this. */
.bovf-prose .wp-block-post-content > p,
.bovf-prose .wp-block-post-content > ul,
.bovf-prose .wp-block-post-content > ol,
.bovf-prose .wp-block-post-content > blockquote,
.bovf-prose .wp-block-post-content > .wp-block-group,
.bovf-prose .wp-block-post-content > figure,
.bovf-prose .wp-block-post-content > .wp-block-table {
	/* 48rem is 768px, the measure the prototype sets. Wider than the 65-75
	   characters usually recommended, but this is the design being matched
	   and the difference is one the client can see. */
	max-width: 48rem;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Callouts inherited from the old Astra theme.

   Astra wrote its palette into the class name — has-ast-global-color-0-
   background-color — and resolved it to a CSS variable it defined itself.
   That variable left with the theme, so the declaration is invalid and
   dropped, and what remains is a paragraph carrying 20px/38px of padding
   with nothing filling it: the text simply looks indented for no reason,
   on the 14 posts that use one.

   Repainting them rather than stripping the classes, because the classes
   are in the post content of live posts and the padding is doing real
   work — it is the shape of a callout, and only the fill is missing.

   The fill is a light surface deliberately, not Astra's original colour.
   Astra's -0 was the accent, and the paired text colour has already gone
   the same way, so the text now inherits the body navy. Painting the
   accent behind it would put navy on navy. A light panel is legible with
   whatever colour the text ended up inheriting, which is the property
   that matters when the original pairing can no longer be recovered. */
.bovf-prose .has-ast-global-color-0-background-color,
.bovf-prose .has-ast-global-color-5-background-color {
	background-color: var(--wp--preset--color--grey);
	border-inline-start: 3px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------
   An issue page: body column plus sidebar

   A single reading column left on its own looks stranded on a wide
   monitor — 768px of text with 800px of empty page beside it. The
   prototype does not have that problem because its issue pages are a
   three-column grid: the article spans two and an <aside> fills the
   third, so the width is used rather than abandoned.

   Below 60rem the two stack, article first. A third of a narrow window
   is not wide enough to hold a card, and the sidebar is supporting
   material — it belongs after the thing it supports, which is also the
   order it is written in, so nothing needs reordering.
   --------------------------------------------------------------------- */
.bovf-article {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/* WordPress gives a flow-layout group's children a top margin, which lands
   on the sidebar as well and adds itself to the gap. The gap is the
   spacing here. */
.bovf-article > *,
.bovf-aside > * {
	margin-block-start: 0;
}

@media ( min-width: 60rem ) {
	.bovf-article {
		grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
		gap: 3rem;
	}
}

.bovf-aside {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
}

/* Each entry sits on a rule rather than in a box of its own — four
   nested boxes down a narrow column is a lot of border for very little
   content. */
.bovf-aside-item + .bovf-aside-item {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block-start: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.bovf-aside .wp-block-post-title {
	margin-block: 0;
}

.bovf-aside .wp-block-post-title a {
	text-decoration: none;
}

.bovf-aside .wp-block-post-title a:hover,
.bovf-aside .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

/* Headings share the same measure. Capping them tighter gave the column a
   third right edge, and a long heading wrapped earlier than it needed to
   for no gain — one width reads as deliberate, three read as an accident. */
.bovf-prose .wp-block-post-content > h2,
.bovf-prose .wp-block-post-content > h3,
.bovf-prose .wp-block-post-content > h4 {
	max-width: 48rem;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* ---------------------------------------------------------------------
   Registration concierge band

   Two problems, both of them only visible once the window is wide.

   The first is the one the issue-page grid above already answers. A 24ch
   heading over a 70ch lede uses 480px of a 1200px band and abandons the
   rest, so the section reads as a column with half a page of margin
   beside it. The pitch splits instead — heading left, lede and call to
   action right — and the two halves are read as one statement.

   The second is the three steps. They were three runs of text separated
   by nothing but a column gap, and the numeral above each one was set in
   the same 14px uppercase as the section eyebrow, so "1" read as the
   label of a new section rather than the first of three. They are cards
   now, the numeral is a marker rather than a heading, and a hairline
   carries the eye across the gap from one to the next.

   Scoped through :has() rather than a class. The published homepage holds
   this section as post content, not as a live pattern render, so it cannot
   pick up a class added to concierge.php without the post being recreated
   — a class would have styled everything except the page that needs it.
   The shape it matches, a section wrapping a group wrapping .bovf-steps,
   is what both the pattern and the saved content produce.
   --------------------------------------------------------------------- */

@media ( min-width: 60rem ) {

	/* The pitch on the left, the three steps down the right, so the whole
	   band is one statement read left to right rather than a paragraph with
	   a row of boxes parked under it.

	   The steps used to sit full width beneath everything, which left the
	   right of the band empty beside the heading and then repeated the same
	   width again underneath. */
	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group {
		display: grid;
		grid-template-columns: minmax( 0, 5fr ) minmax( 0, 6fr );
		column-gap: 3rem;
		row-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	/* Flow spacing and centring both have to go. The block gap between
	   siblings would add itself to the row gap, and core sets auto inline
	   margins with !important, which in a grid cell centres the item rather
	   than filling the row it used to fill. */
	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > * {
		margin-block-start: 0;
		margin-inline-start: 0 !important;
	}

	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > .bovf-eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > h2 {
		grid-column: 1;
		grid-row: 2;
		margin-block-end: var(--wp--preset--spacing--20);
	}

	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > .bovf-measure-70 {
		grid-column: 1;
		grid-row: 3;
	}

	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > .wp-block-buttons {
		grid-column: 1;
		grid-row: 4;
		margin-block-start: var(--wp--preset--spacing--20);
	}

	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > .has-caption-font-size {
		grid-column: 1;
		grid-row: 5;
	}

	/* Spanning every row rather than being given one: the left column has
	   five items of its own, and the steps should run the height of all of
	   them however long the heading turns out to be. */
	.wp-block-group:has( > .wp-block-group > .bovf-steps ) > .wp-block-group > .bovf-steps {
		grid-column: 2;
		grid-row: 1 / 6;
	}

	/* One under another down the column, not three across it. */
	.bovf-steps {
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}
}

/* The steps themselves. Card colours come from the band tokens, so the
   three boxes are white on the grey band and navy-deep if the section is
   ever moved onto navy. */
.bovf-steps > .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	background: var(--bovf-card-bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
}

.bovf-steps > .wp-block-column > * {
	margin-block-start: 0;
}

.bovf-steps > .wp-block-column > *:last-child {
	margin-block-end: 0;
}

/* Wide enough for the steps to run down their own column, and the marker
   moves beside the step rather than sitting on top of it: the numeral,
   then the step it belongs to, on one line.

   This has to come after the rule above that makes the card a flex column,
   not before. Both are .bovf-steps > .wp-block-column, a media query adds
   no specificity, and equal specificity is settled by source order — sitting
   in the earlier block it was simply ignored. */
@media ( min-width: 60rem ) {

	.bovf-steps > .wp-block-column {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		column-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	/* The disc spans both rows so it stays level with the heading however
	   far the description below it runs. */
	.bovf-steps > .wp-block-column > .bovf-eyebrow {
		grid-column: 1;
		grid-row: 1 / 3;
		margin-block-end: 0;
	}

	.bovf-steps > .wp-block-column > h3,
	.bovf-steps > .wp-block-column > p {
		grid-column: 2;
	}
}

/* The number stops being a second eyebrow and becomes a marker. The
   uppercase tracking inherited from .bovf-eyebrow has to go with it: a
   single centred digit carrying 0.08em of trailing space sits visibly
   left of the middle of its circle. */
.bovf-steps .bovf-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	margin-block-end: var(--wp--preset--spacing--30);
	border-radius: 50%;

	/* Filled from the band tokens rather than named outright, so the marker
	   inverts with everything else: a navy disc on the grey band, and a pale
	   disc on navy or green, where a navy one would disappear. */
	background: var(--bovf-ink);
	color: var(--bovf-card-bg);

	/* !important because the block carries has-eyebrow-font-size, and a
	   WordPress preset class declares its size that way — without this the
	   rule is simply ignored and the numeral stays at the eyebrow's 14px
	   inside a 36px disc. */
	font-size: 1rem !important;
	letter-spacing: normal;
	flex: none;
}

.bovf-steps > .wp-block-column > h3 {
	margin-block-end: 0.5rem;
}

/* On a white card the pale-band ink tokens are navy and navy-deep, which
   are a shade apart and read as one colour — the step text ended up the
   same weight as the title above it. navy-soft is the tone that actually
   separates them, and it clears 4.5:1 on paper by a distance. It is set
   as the token rather than on the paragraph so a dark band still gets the
   light text the polarity block hands out. */
.has-grey-background-color .bovf-steps,
.has-paper-background-color .bovf-steps,
.has-sage-background-color .bovf-steps {
	--bovf-ink-soft: var(--wp--preset--color--navy-soft);
}

.bovf-steps > .wp-block-column > p:not(.bovf-eyebrow) {
	color: var(--bovf-ink-soft);
}

/* The hairline between one card and the next, drawn across the column
   gap at the height of the numerals so it joins the markers rather than
   the boxes. Its length is the gap, which the pattern sets to spacing-40;
   change the block gap there and this has to follow. Only while the
   columns are actually side by side — once they stack, a line pointing
   sideways out of a card means nothing. */
@media ( min-width: 60rem ) {
	.bovf-steps > .wp-block-column:not(:first-child)::before {
		content: "";
		position: absolute;
		inset-inline-end: 100%;
		inset-block-start: calc( var(--wp--preset--spacing--40) + 1.125rem );
		inline-size: var(--wp--preset--spacing--40);
		block-size: 1px;
		background: var(--wp--preset--color--line);
	}
}


/* ---------------------------------------------------------------------
   What we do — four activities

   Four runs of text with nothing tying them together, and 32px between
   each title and its own paragraph, so "We Engage" and the sentence
   explaining it read as two separate things rather than one.

   A rule above each, not a number. The concierge steps are numbered
   because they happen in order; these four happen at once, and numbering
   them would claim a sequence that is not there. The rule is enough to
   say "these four are a set" and stops short of saying more.
   --------------------------------------------------------------------- */

.bovf-activities > .wp-block-column {
	border-block-start: 2px solid var(--bovf-accent);
	padding-block-start: var(--wp--preset--spacing--30);
}

/* The title and its sentence belong to each other. */
.bovf-activities > .wp-block-column > * {
	margin-block-start: 0;
}

.bovf-activities > .wp-block-column > h3 {
	margin-block-end: 0.4rem;
}

.bovf-activities > .wp-block-column > p {
	margin-block-end: 0;
	line-height: 1.5;
}


/* The "Key issue" label on an issue card. A label, not a heading — the
   card's own title is the heading, and this says what kind of thing it
   is. Uppercase and tracked so it reads as a tag at a glance, and set in
   navy-soft: the prototype's lighter blue is 3.3:1 on white, which is
   under the 4.5:1 this size needs. */
.bovf-card__label {
	margin-block: 0 0.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The read-more link the excerpt block appends, on its own line and in
   the accent colour so it reads as the way into the page. */
.bovf-issue-grid .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-block-start: 0.9rem;
	color: var(--bovf-accent);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	text-decoration: none;
}

.bovf-issue-grid .wp-block-post-excerpt__more-link:hover,
.bovf-issue-grid .wp-block-post-excerpt__more-link:focus-visible {
	text-decoration: underline;
}

/* The link sits after the summary, so the summary takes the slack and a
   row of cards keeps its links on the same line. */
.bovf-issue-grid .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bovf-issue-grid .wp-block-post-excerpt__excerpt {
	flex: 1;
}

/* ---------------------------------------------------------------------
   Callout — a point lifted out of the prose

   For the thing a section turns on: a test being applied, a condition, a
   warning. A rule down the leading edge rather than a box all round, so it
   reads as emphasis within the argument rather than an aside beside it.

   The colour comes from the band tokens, so a callout is green on the pale
   bands where green can be read and sage on navy, without being told.
   --------------------------------------------------------------------- */

.bovf-callout {
	border-left: 4px solid var(--bovf-accent);
	border-radius: 0 6px 6px 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--bovf-card-bg);
}

.bovf-callout > *:first-child {
	margin-block-start: 0;
}

.bovf-callout > *:last-child {
	margin-block-end: 0;
}

/* The claim being made, above the qualification that follows it. */
.bovf-callout__title {
	margin-block-end: 0.4rem;
	font-weight: 700;
	color: var(--bovf-ink);
}

/* ---------------------------------------------------------------------
   Card footer

   A fact that belongs to the card rather than to its description — who
   leads a group, what a branch leads with — set below a rule at the foot,
   so a row of cards puts them on one line however long the text above
   runs. .bovf-card already gives the last child the slack; this adds the
   rule and drops the type a step.
   --------------------------------------------------------------------- */

.bovf-card__foot {
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--bovf-ink-soft);
}

.bovf-card__foot strong {
	color: var(--bovf-ink);
}

/* No lead yet is an opening rather than a gap, so it is the accent colour
   and not the muted one. */
.bovf-card__foot--vacant {
	color: var(--bovf-accent);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   Case studies

   One person's account, not a page of the site. The card leads with where
   they live, because "Thailand" and "Netherlands" are the first thing that
   tells a reader whether this is their situation.
   --------------------------------------------------------------------- */

.bovf-case h3 {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--h4);
}

.bovf-case h3 a {
	color: var(--bovf-ink);
	text-decoration: none;
}

.bovf-case h3 a:hover,
.bovf-case h3 a:focus-visible {
	color: var(--bovf-accent);
}

.bovf-case__summary {
	margin-block: 0;
	color: var(--bovf-ink-soft);
}

/* The last child, so .bovf-card puts it on a common baseline across a row
   however long the summary above it runs. */
.bovf-case__more {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--caption);
}

/* The promise made to the people in these stories. Quieter than the account
   itself, but never hidden — it is the reason they agreed to it. */
.bovf-case__note {
	margin-block-start: var(--wp--preset--spacing--30);
	margin-block-end: 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--bovf-ink-soft);
}

/* ---------------------------------------------------------------------
   Dated lists — the events diary and the news index

   A date block beside the event, because scanning a diary means scanning
   dates. The day is the part the eye lands on, so it is the part set large.
   --------------------------------------------------------------------- */

.bovf-dated-group + .bovf-dated-group {
	margin-block-start: var(--wp--preset--spacing--60);
}

.bovf-dated-group > h2 {
	margin-block-end: var(--wp--preset--spacing--40);
}

.bovf-dated-empty {
	margin: 0;
	max-width: 60ch;
	color: var(--bovf-ink-soft);
}

.bovf-dated-list {
	display: grid;
	gap: 0;
}

.bovf-dated {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* A rule between entries, not around each — a box per event down a long
   diary is a lot of border for a date and a line of text. */
.bovf-dated:last-child {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.bovf-date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 0.25rem;
	background: var(--wp--preset--color--grey);
	border-radius: 6px;
	line-height: 1.1;
	text-align: center;
}

.bovf-date-block__day {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bovf-ink);
	font-variant-numeric: tabular-nums;
}

.bovf-date-block__month {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bovf-accent);
}

.bovf-date-block__year {
	font-size: 0.6875rem;
	color: var(--bovf-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* A series name above the title: these entries are one story in parts, and
   the titles alone ("The Waiting") do not say so. */
.bovf-dated__series {
	margin: 0 0 0.15rem;
	color: var(--wp--preset--color--green, #1F5C3A);
	font-size: var(--wp--preset--font-size--eyebrow, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bovf-dated__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.3;
}

.bovf-dated__title a {
	color: var(--bovf-ink);
	text-decoration: none;
}

.bovf-dated__title a:hover,
.bovf-dated__title a:focus-visible {
	color: var(--bovf-accent);
	text-decoration: underline;
}

/* Where it happened, which for this organisation is half the information. */
.bovf-dated__meta {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--bovf-accent);
}

.bovf-dated__summary {
	margin: 0.5rem 0 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bovf-ink-soft);
}

@media (max-width: 600px) {

	.bovf-dated {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.bovf-date-block__day { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------
   Policy pages: the text beside an "On this page" list.

   The width is the other rebuilt pages' 1200px, but a legal text run the
   full width would be a hundred and fifty characters a line. So the list
   takes the left, stays in view while the text scrolls past it, and the
   text keeps a line length people can read.
   --------------------------------------------------------------------- */
.bovf-policy {
	gap: var(--wp--preset--spacing--60, 3rem);
}

.bovf-toc {
	margin-block: 0.5rem 0;
	padding: 0;
	list-style: none;
}

.bovf-toc li {
	padding-block: 0.3rem;
	line-height: 1.35;
}

.bovf-policy__text > :first-child {
	margin-block-start: 0;
}

@media (min-width: 782px) {

	.bovf-policy__toc {
		position: sticky;
		top: 9rem;
		align-self: flex-start;
		max-block-size: calc(100vh - 11rem);
		overflow-y: auto;
		padding-inline-end: 1rem;
		border-inline-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
	}
}

/* On a phone the list comes first and would be a long column of links
   before any text: two columns keep it short. */
@media (max-width: 781px) {

	.bovf-policy__toc .bovf-toc {
		columns: 2 8.5rem;
		column-gap: 1.5rem;
	}

	.bovf-policy__toc .bovf-toc li {
		break-inside: avoid;
	}
}

/* Jumping to a section lands its heading below the sticky header, not
   under it. The header is 126px where the menu wraps to two rows, so the
   margin clears that with room to spare. */
.wp-block-post-content h2[id] {
	scroll-margin-top: 9rem;
}