/**
 * Visual polish.
 *
 * The layer that gives the site its face. Everything here is presentation:
 * colour, depth, rhythm and motion. Nothing in this file changes markup,
 * wording or reading order, so removing the file returns the site to the plain
 * typographic layout underneath without breaking anything.
 *
 * It loads last, so it can override the earlier sheets without !important.
 *
 * Kept in its own file on purpose: the brief was "the site looks bland", and a
 * separate sheet is the difference between reverting a look and unpicking it
 * from five stylesheets.
 */

/* ==========================================================================
   0. Extra tokens
   ========================================================================== */

:root {
	/* Depth. The earlier sheets deliberately had almost none; cards need it to
	 * read as objects rather than as boxes drawn on the page. */
	--bsl-shadow-card: 0 1px 2px rgba(12, 68, 79, 0.06), 0 8px 24px -12px rgba(12, 68, 79, 0.18);
	--bsl-shadow-card-hover: 0 2px 4px rgba(12, 68, 79, 0.08), 0 20px 44px -16px rgba(12, 68, 79, 0.3);
	--bsl-shadow-header: 0 1px 0 rgba(12, 68, 79, 0.08), 0 6px 20px -12px rgba(12, 68, 79, 0.25);

	/* Tints of the four area hues, for surfaces rather than rules. */
	--bsl-area-1-tint: #fbeeeb;
	--bsl-area-2-tint: #e7eff1;
	--bsl-area-3-tint: #eaf0eb;
	--bsl-area-4-tint: #efebf4;

	--bsl-duration-slow: 420ms;

	/* The old floor was 1rem, which left body text 16px from the edge of a
	 * phone. 1.25rem is the smallest that still reads as a margin. */
	--bsl-gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);

	/* 90rem is 1440px: on a 1440px screen the wide container filled the window
	 * edge to edge and the archives sat hard against the left of the browser.
	 * 84rem always leaves a margin on a laptop. */
	--bsl-container-wide: 84rem;
}

/* Archives use the wide container, and it is the one place where the gutter
 * alone is not enough breathing room once the grid is four cards across. */
@media (min-width: 64em) {
	.bsl-container--wide {
		padding-inline: max(var(--bsl-gutter), 3rem);
	}
}

/* ==========================================================================
   1. Full-bleed bands
   --------------------------------------------------------------------------
   A band escapes its container to the viewport edges and then pushes its own
   content back to where the container had it, so text stays on the grid.

   The pairing matters. `margin-inline` alone was what broke the impact page
   before: it pulled the block out but left the content out there with it.

   `100vw` includes the scrollbar, so a band overhangs the page by a few pixels
   on a scrolling desktop page. `overflow-x: clip` on .bsl-main (base.css)
   absorbs that overhang without creating a scrollbar of its own. `clip` and
   not `hidden`: `hidden` would make the sticky header stop sticking.
   ========================================================================== */

.bsl-band {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/* ==========================================================================
   2. Brand logotype
   ========================================================================== */

.bsl-brand {
	display: inline-flex;
	align-items: center;
}

.bsl-brand__logo {
	display: block;
	width: auto;
	height: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	max-width: 100%;
}

.bsl-site-footer__brand {
	margin: 0 0 var(--bsl-space-5);
}

.bsl-site-footer__brand .bsl-brand__logo {
	height: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

/* The logotype is the wordmark, so the link around it needs no underline —
 * but it still has to answer to the keyboard. */
.bsl-brand:hover .bsl-brand__logo {
	opacity: 0.82;
}

.bsl-brand:focus-visible {
	outline: var(--bsl-focus-width) solid var(--bsl-focus);
	outline-offset: var(--bsl-focus-offset);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.bsl-site-header {
	position: sticky;
	top: 0;
	z-index: var(--bsl-z-header);
	/* Opaque enough that headings scrolling underneath do not read through it;
	 * the blur is what keeps it from looking like a flat bar. */
	background-color: rgba(244, 243, 233, 0.96);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--bsl-duration) var(--bsl-ease),
		border-color var(--bsl-duration) var(--bsl-ease);
}

/* nav.js sets this once the page has scrolled past the header. */
.bsl-site-header[data-scrolled="true"] {
	border-bottom-color: rgba(12, 68, 79, 0.1);
	box-shadow: var(--bsl-shadow-header);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bsl-site-header {
		background-color: var(--bsl-paper);
	}
}

/* The language switcher was butted against the last menu item. In Spanish
 * that item is "Colabora con BACKSLASH", a filled button, so the ES chip
 * looked like part of it. A rule and real space separate the two. */
.bsl-site-header .bsl-lang-wrap {
	margin-inline-start: var(--bsl-space-5);
	padding-inline-start: var(--bsl-space-5);
	border-inline-start: 1px solid var(--bsl-line-soft);
}

@media (max-width: 60em) {
	.bsl-site-header .bsl-lang-wrap {
		margin-inline-start: var(--bsl-space-3);
		padding-inline-start: var(--bsl-space-3);
	}
}

/* ==========================================================================
   4. Hero
   --------------------------------------------------------------------------
   Was: dark type on the same paper as everything below it, with the right-hand
   half of a 1440px screen empty. Now a deep teal band that gives the page a
   top, and the brand's own slash motif filling the space the text does not.
   ========================================================================== */

.bsl-home .bsl-container > .bsl-hero,
.bsl-hero--band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
	border-bottom: 0;
	background-color: var(--bsl-teal);
	background-image:
		radial-gradient(80rem 42rem at 78% -10%, rgba(195, 90, 73, 0.34), transparent 62%),
		radial-gradient(52rem 40rem at 4% 108%, rgba(9, 56, 67, 0.85), transparent 60%);
	color: var(--bsl-paper);
	--bsl-text: var(--bsl-paper);
	--bsl-text-muted: #c3ced1;
	--bsl-link: #f0b7ac;
	--bsl-focus: #9fd0ff;
}

/* The photograph, in the half the text does not use. It is masked into the
 * teal from the right rather than butted against it, so there is no visible
 * edge and the headline never sits on top of a busy area. Painted as a
 * background because it carries no information the text does not already
 * carry: nothing here needs alternative text. */
.bsl-home .bsl-container > .bsl-hero::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset-block: 0;
	inset-inline-end: 0;
	width: 58%;
	background-image: var(--bsl-hero-photo, none);
	background-size: cover;
	background-position: 50% 45%;
	opacity: 0.66;
	-webkit-mask-image: linear-gradient(to left, #000 34%, transparent 92%);
	mask-image: linear-gradient(to left, #000 34%, transparent 92%);
	pointer-events: none;
}

@media (max-width: 55.99em) {
	/* On a phone the text runs the full width, so the photograph goes behind
	 * it and drops to a level where it cannot compete with the words. */
	.bsl-home .bsl-container > .bsl-hero::before {
		width: 100%;
		opacity: 0.2;
		-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
		mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	}
}

/* The mark: four slashes, drawn the way the logotype draws them. Purely
 * decorative, hidden from assistive technology by being a background. */
.bsl-home .bsl-container > .bsl-hero::after,
.bsl-hero--band::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -12%;
	inset-inline-end: -4%;
	width: 46%;
	/* Faint: over the photograph a heavier stripe read as a printing fault. */
	background-image: repeating-linear-gradient(
		108deg,
		rgba(244, 243, 233, 0.07) 0 14px,
		transparent 14px 62px
	);
	-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
	mask-image: linear-gradient(to left, #000 30%, transparent 100%);
	pointer-events: none;
}

@media (max-width: 55.99em) {
	.bsl-home .bsl-container > .bsl-hero::after,
	.bsl-hero--band::after {
		width: 70%;
		opacity: 0.6;
	}
}

.bsl-home .bsl-hero h1,
.bsl-hero--band h1 {
	max-width: 18ch;
	color: var(--bsl-paper);
	text-wrap: balance;
}

.bsl-home .bsl-hero .bsl-hero__text,
.bsl-hero--band .bsl-hero__text {
	max-width: 46ch;
	color: #cfd8da;
}

/* Solid button on teal: paper, so it carries the most weight on the page.
 * Terracotta on teal is only 2.4:1 and would sink into the background. */
.bsl-home .bsl-hero .wp-block-button__link,
.bsl-hero--band .wp-block-button__link,
.bsl-home .bsl-hero .bsl-button--primary,
.bsl-hero--band .bsl-button--primary {
	background-color: var(--bsl-paper);
	border-color: var(--bsl-paper);
	color: var(--bsl-teal);
}

.bsl-home .bsl-hero .wp-block-button__link:hover,
.bsl-hero--band .wp-block-button__link:hover,
.bsl-home .bsl-hero .bsl-button--primary:hover,
.bsl-hero--band .bsl-button--primary:hover {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--bsl-teal);
}

.bsl-home .bsl-hero .is-style-outline .wp-block-button__link,
.bsl-hero--band .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid rgba(244, 243, 233, 0.55);
	color: var(--bsl-paper);
}

.bsl-home .bsl-hero .is-style-outline .wp-block-button__link:hover,
.bsl-hero--band .is-style-outline .wp-block-button__link:hover {
	background-color: rgba(244, 243, 233, 0.12);
	border-color: var(--bsl-paper);
	color: var(--bsl-paper);
}

/* ==========================================================================
   5. Section rhythm
   --------------------------------------------------------------------------
   Every section sat on the same paper, so the page read as one long column
   with gaps in it. Alternating surfaces give the eye somewhere to rest and cut
   the whitespace that was standing in for the boundaries.
   ========================================================================== */

/* These blocks also carry `alignwide`, whose max-width of 84rem was winning:
 * the band stopped at 1344px instead of reaching the window, so on a wide
 * screen it ended a third of the way from the right and the figures inside it
 * were squeezed into three columns. The band needs the full viewport and the
 * padding that puts its content back on the container grid. */
.bsl-home .bsl-container > .bsl-impact,
.bsl-home .bsl-container > .bsl-cards--news {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--bsl-gutter), calc(50vw - var(--bsl-container) / 2));
	background-color: var(--bsl-bg-sunken);
}

.bsl-home .bsl-container > .bsl-cards--news {
	padding-block: var(--bsl-space-section);
	margin-block: var(--bsl-space-section) 0;
}

/* The closing call to action, the last group on the home page. */
.bsl-home .bsl-container > .bsl-cards--news + h2,
.bsl-home .bsl-container > .bsl-cards--news ~ .wp-block-buttons {
	position: relative;
}

/* ==========================================================================
   5b. The reading column
   --------------------------------------------------------------------------
   .bsl-prose caps itself at a comfortable measure but had no horizontal
   margin, so on a wide screen the text sat hard against the left edge of the
   container with several hundred pixels of nothing to its right. Centring the
   column fixes that, and it also gives every `alignwide` child a centred
   containing block to break out of — which is what the impact figures need in
   order to sit in the middle of the page rather than in the middle of the
   text column.
   ========================================================================== */

.bsl-prose {
	margin-inline: auto;
}

/* ------------------------------------------------------- two columns
 * The text pages are a single narrow column, so on a laptop they leave a
 * third of the window empty on either side. Long lists are the natural thing
 * to widen: a list of eleven priorities reads better as two columns of six
 * than as one column the length of the screen.
 *
 * Only lists with enough items get this. `break-inside: avoid` keeps an item
 * from being split across the column gap, which is what makes multi-column
 * text unreadable when it goes wrong. */
@media (min-width: 62em) {
	/* Inside a split the body column is already wide, so the list only needs
	 * the second column, not a breakout of its own. The breakout it used to
	 * have now fights the split and leaves the two halves ragged. */
	.bsl-secsplit__body > ul.wp-block-list:has(> li:nth-child(5)),
	.bsl-secsplit__body > ol.wp-block-list:has(> li:nth-child(5)),
	.bsl-prose > ul.wp-block-list:has(> li:nth-child(5)),
	.bsl-prose > ol.wp-block-list:has(> li:nth-child(5)) {
		columns: 2;
		column-gap: var(--bsl-space-8);
	}

	.bsl-secsplit__body > ul.wp-block-list:has(> li:nth-child(5)) > li,
	.bsl-secsplit__body > ol.wp-block-list:has(> li:nth-child(5)) > li,
	.bsl-prose > ul.wp-block-list:has(> li:nth-child(5)) > li,
	.bsl-prose > ol.wp-block-list:has(> li:nth-child(5)) > li {
		break-inside: avoid;
		margin-block: 0 var(--bsl-space-4);
	}
}

/* Browsers without :has() keep the single column: nothing breaks, it is only
 * narrower. */

.bsl-prose .alignwide {
	/* The containing block is now centred, so the classic breakout is safe:
	 * pull out to the viewport, then pad back to the container width. The
	 * scrollbar overshoot is absorbed by `overflow-x: clip` on .bsl-main. */
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--bsl-gutter), calc(50vw - var(--bsl-container) / 2));
}

/* ==========================================================================
   5c. Two-column sections
   --------------------------------------------------------------------------
   inc/split-sections.php pairs each H2 with the blocks under it. Here that
   pairing becomes a heading column and a text column, so a page uses the width
   it has instead of running down the middle of the screen.

   Below the breakpoint it is one column and reads exactly as before.
   ========================================================================== */

.bsl-secsplit + .bsl-secsplit {
	margin-block-start: var(--bsl-space-8);
}

.bsl-secsplit__head > :first-child,
.bsl-secsplit__body > :first-child {
	margin-block-start: 0;
}

.bsl-secsplit__body > * + * {
	margin-block-start: var(--bsl-space-5);
}

@media (min-width: 68em) {
	.bsl-secsplit {
		display: grid;
		/* A fixed heading column and a reading column, the pair centred in the
		 * container. Letting the body take 1fr filled the left two thirds and
		 * left the right third empty, which is the thing this was meant to
		 * fix. */
		grid-template-columns: minmax(0, 18rem) minmax(0, 68ch);
		justify-content: center;
		column-gap: var(--bsl-space-8);
		align-items: start;
	}

	/* The heading stays with its text while that text scrolls past, which is
	 * what makes a long page feel navigable rather than endless. It stops
	 * short of the sticky site header. */
	.bsl-secsplit__head {
		position: sticky;
		top: calc(var(--bsl-header-height, 4.5rem) + var(--bsl-space-5));
	}

	.bsl-secsplit__head h2 {
		margin: 0;
		font-size: var(--bsl-text-xl);
		line-height: var(--bsl-leading-tight);
		text-wrap: balance;
	}

	.bsl-secsplit__body {
		max-width: none;
	}
}

/* The prose column stops being the thing that limits the width once the
 * content is in two columns: the split element takes the full container and
 * decides its own proportions. */
.bsl-prose:has(> .bsl-secsplit) {
	max-width: none;
}

/* Stacked, there are no columns to justify dropping the reading measure, and
 * without it the opening paragraph wrapped at 550px while the text under the
 * first heading ran to 830px: the same page in two different measures. */
@media (max-width: 67.99em) {
	.bsl-prose:has(> .bsl-secsplit) {
		max-width: var(--bsl-measure);
		margin-inline: auto;
	}
}

/* A grid that follows a split is a new thing, not the last line of the
 * paragraph above it. Wherever the split appears, in the reading column or on
 * the home page, what comes after it gets room. */
.bsl-secsplit + .alignwide,
.bsl-secsplit + .bsl-areas,
.bsl-secsplit + .bsl-cards,
.bsl-secsplit + .bsl-impact,
.bsl-secsplit + ul,
.bsl-secsplit + .wp-block-buttons {
	margin-block-start: var(--bsl-space-7);
}

.bsl-prose:has(> .bsl-secsplit) > .alignwide {
	margin-block: var(--bsl-space-8);
}

/* ==========================================================================
   5d. Vertical rhythm
   --------------------------------------------------------------------------
   Sections had no consistent measure between them, so a band could end and the
   next heading start immediately underneath it. A band is a box: it gets its
   padding on all four sides, and it never touches what follows.
   ========================================================================== */

.bsl-home .bsl-container > .bsl-impact,
.bsl-home .bsl-container > .bsl-cards--news {
	padding-block: var(--bsl-space-9);
	margin-block: 0 var(--bsl-space-9);
}

.bsl-home .bsl-container > .bsl-hero + .bsl-impact {
	margin-block-start: 0;
}

/* Every top-level section on the home page keeps its distance from the next. */
.bsl-home .bsl-container > h2 {
	margin-block-start: var(--bsl-space-8);
}

.bsl-home .bsl-container > .bsl-impact + h2,
.bsl-home .bsl-container > .bsl-cards--news + h2 {
	margin-block-start: 0;
}

.bsl-home .bsl-container > .bsl-cards,
.bsl-home .bsl-container > .bsl-areas {
	margin-block-end: var(--bsl-space-9);
}

/* ==========================================================================
   6. Impact figures
   --------------------------------------------------------------------------
   A number set in the body colour above a hairline reads as a table. Set in
   terracotta, at display size, over a card, it reads as a result.
   ========================================================================== */

/* 11rem columns could not hold a display-size "903,063": the figure broke
 * across three lines and read as three different numbers. Wider columns, a
 * figure that never wraps, and a size that shrinks with the viewport instead
 * of overflowing. */
.bsl-impact__grid {
	gap: var(--bsl-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bsl-impact--cols-4 .bsl-impact__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bsl-impact__item {
	position: relative;
	padding: var(--bsl-space-5) var(--bsl-space-5) var(--bsl-space-5);
	background-color: var(--bsl-bg-raised);
	border: 1px solid var(--bsl-line-soft);
	border-top: 3px solid var(--bsl-accent);
	border-radius: var(--bsl-radius);
	box-shadow: var(--bsl-shadow-sm);
}

.bsl-impact__number {
	display: block;
	font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
	line-height: 0.95;
	color: var(--bsl-accent-strong);
	white-space: nowrap;
}

.bsl-impact__prefix {
	color: var(--bsl-accent-strong);
}

.bsl-impact__label {
	font-size: var(--bsl-text-sm);
	color: var(--bsl-text-muted);
}

/* On the sunken home-page band the cards are white, so they lift off it. */
.bsl-home .bsl-impact__item {
	background-color: #ffffff;
	border-color: transparent;
	border-top-color: var(--bsl-accent);
	box-shadow: var(--bsl-shadow-card);
}

/* ==========================================================================
   7. Strategic areas
   ========================================================================== */

.bsl-areas {
	gap: var(--bsl-space-4);
}

.bsl-areas__item {
	overflow: hidden;
	isolation: isolate;
	padding: var(--bsl-space-6) var(--bsl-space-5) var(--bsl-space-6);
	border-color: transparent;
	box-shadow: var(--bsl-shadow-card);
	transition: transform var(--bsl-duration) var(--bsl-ease),
		box-shadow var(--bsl-duration) var(--bsl-ease);
}

.bsl-areas__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--bsl-shadow-card-hover);
}

.bsl-areas__item--area-1 { background-color: var(--bsl-area-1-tint); }
.bsl-areas__item--area-2 { background-color: var(--bsl-area-2-tint); }
.bsl-areas__item--area-3 { background-color: var(--bsl-area-3-tint); }
.bsl-areas__item--area-4 { background-color: var(--bsl-area-4-tint); }

/* The area number, big and faint behind its own card. Decorative: the visible
 * number stays in the flow for anyone reading the markup. */
.bsl-areas__number {
	position: absolute;
	inset-block-start: -0.35em;
	inset-inline-end: 0.15em;
	z-index: -1;
	margin: 0;
	font-size: 7rem;
	line-height: 1;
	color: rgba(12, 68, 79, 0.07);
	user-select: none;
}

.bsl-areas__title {
	font-size: var(--bsl-text-lg);
	font-family: var(--bsl-font-display);
}

/* ==========================================================================
   8. Cards
   ========================================================================== */

.bsl-card > article {
	overflow: hidden;
	height: 100%;
	background-color: var(--bsl-bg-raised);
	border-color: transparent;
	border-radius: var(--bsl-radius);
	box-shadow: var(--bsl-shadow-card);
	transition: transform var(--bsl-duration) var(--bsl-ease),
		box-shadow var(--bsl-duration) var(--bsl-ease);
}

.bsl-card > article:hover {
	transform: translateY(-4px);
	box-shadow: var(--bsl-shadow-card-hover);
}

.bsl-card__media {
	overflow: hidden;
	background-color: var(--bsl-bg-sunken);
}

.bsl-card__media img {
	display: block;
	width: 100%;
	transition: transform var(--bsl-duration-slow) var(--bsl-ease);
}

.bsl-card > article:hover .bsl-card__media img {
	transform: scale(1.045);
}

/* Portrait photographs are shown whole, over the brand panel, rather than
 * cropped to a landscape band out of their middle. */
.bsl-card__media--portrait {
	background-color: var(--bsl-teal);
	background-image: repeating-linear-gradient(
		108deg,
		rgba(244, 243, 233, 0.12) 0 10px,
		transparent 10px 44px
	);
}

.bsl-card__media--portrait img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

/* A card with no featured image gets the slash motif rather than a grey box. */
.bsl-card__media--generated {
	background-color: var(--bsl-teal);
	background-image: repeating-linear-gradient(
		108deg,
		rgba(244, 243, 233, 0.13) 0 10px,
		transparent 10px 44px
	);
	color: var(--bsl-paper);
}

.bsl-card__eyebrow {
	color: var(--bsl-accent-strong);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	font-size: var(--bsl-text-xs);
}

.bsl-card__title {
	text-wrap: balance;
}

/* ==========================================================================
   9. Buttons and links
   ========================================================================== */

.bsl-button,
.wp-block-button__link {
	transition: background-color var(--bsl-duration) var(--bsl-ease),
		border-color var(--bsl-duration) var(--bsl-ease),
		color var(--bsl-duration) var(--bsl-ease),
		transform var(--bsl-duration-fast) var(--bsl-ease);
}

.bsl-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* The ghost button was a transparent box with body-coloured text, which on the
 * sunken band left "See all news" barely visible. It now has its own surface
 * and a real hover state: it fills with teal and the label flips to paper. */
.bsl-button--ghost {
	background-color: var(--bsl-bg-raised);
	border-color: var(--bsl-teal);
	color: var(--bsl-teal);
	box-shadow: var(--bsl-shadow-sm);
}

.bsl-button--ghost:visited {
	background-color: var(--bsl-bg-raised);
	border-color: var(--bsl-teal);
	color: var(--bsl-teal);
}

.bsl-button--ghost:hover,
.bsl-button--ghost:focus-visible,
.bsl-button--ghost:visited:hover {
	background-color: var(--bsl-teal);
	border-color: var(--bsl-teal);
	color: var(--bsl-paper);
	box-shadow: var(--bsl-shadow);
}

/* Every button gains a visible change under the pointer, not just the ghost. */
.bsl-button--primary:hover,
.bsl-button--primary:visited:hover {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	box-shadow: 0 6px 18px -8px rgba(168, 65, 47, 0.7);
}

.bsl-button--secondary:hover {
	box-shadow: 0 6px 18px -8px rgba(12, 68, 79, 0.6);
}

.bsl-cards__more .bsl-button {
	padding-inline: var(--bsl-space-6);
}

/* --------------------------------------------------- Gutenberg buttons
 * The buttons written into page content are core Gutenberg blocks, not the
 * theme's .bsl-button, so they were picking up the ordinary link styling:
 * underlined, and in the link colour rather than in a colour chosen to sit on
 * the fill. On terracotta that left dark red text on dark red.
 *
 * The two brand colours swap on hover, which is both the change the client
 * asked for and the simplest way to keep the label readable in every state.
 * Both pairings are measured: paper on terracotta 5.1:1, paper on teal 9.6:1,
 * teal on paper 9.6:1.
 */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--bsl-space-3) var(--bsl-space-6);
	border: var(--bsl-border-width-thick) solid var(--bsl-accent-strong);
	border-radius: var(--bsl-radius);
	background-color: var(--bsl-accent-strong);
	color: var(--bsl-paper);
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-semibold);
	line-height: 1.25;
	text-decoration: none;
}

.wp-block-button__link:visited,
.wp-element-button:visited {
	color: var(--bsl-paper);
}

/* Terracotta to teal. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
	background-color: var(--bsl-teal);
	border-color: var(--bsl-teal);
	color: var(--bsl-paper);
	text-decoration: none;
	box-shadow: 0 6px 18px -8px rgba(12, 68, 79, 0.65);
}

/* The outline variant starts as teal on paper and fills with terracotta. */
.is-style-outline .wp-block-button__link,
.is-style-outline .wp-element-button {
	background-color: transparent;
	border-color: var(--bsl-teal);
	color: var(--bsl-teal);
}

.is-style-outline .wp-block-button__link:visited,
.is-style-outline .wp-element-button:visited {
	color: var(--bsl-teal);
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible,
.is-style-outline .wp-element-button:hover,
.is-style-outline .wp-element-button:focus-visible {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	color: var(--bsl-paper);
	box-shadow: 0 6px 18px -8px rgba(168, 65, 47, 0.7);
}

/* On the teal hero the fill is paper, so hovering to teal would make the label
 * vanish. There the pair inverts: paper fills with terracotta. */
.bsl-home .bsl-hero .wp-block-button__link:hover,
.bsl-hero--band .wp-block-button__link:hover,
.bsl-home .bsl-hero .wp-block-button__link:focus-visible,
.bsl-hero--band .wp-block-button__link:focus-visible {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	color: var(--bsl-paper);
}

/* Both hero buttons go to the BACKSLASH terracotta on hover, the outlined one
 * included: it was filling with paper, which read as the same button twice. */
.bsl-home .bsl-hero .is-style-outline .wp-block-button__link:hover,
.bsl-hero--band .is-style-outline .wp-block-button__link:hover,
.bsl-home .bsl-hero .is-style-outline .wp-block-button__link:focus-visible,
.bsl-hero--band .is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	color: var(--bsl-paper);
}

/* Any button on a dark surface behaves like the hero ones, wherever it is: on
 * teal, a teal hover would erase the label, so the pair runs paper → terracotta
 * instead. Keyed on the surface rather than on the section, so a button added
 * to a new dark band later inherits the right behaviour without another rule. */
.bsl-inverse .wp-block-button__link,
.bsl-inverse .bsl-button--primary {
	background-color: var(--bsl-paper);
	border-color: var(--bsl-paper);
	color: var(--bsl-teal);
}

.bsl-inverse .wp-block-button__link:hover,
.bsl-inverse .wp-block-button__link:focus-visible,
.bsl-inverse .bsl-button--primary:hover,
.bsl-inverse .bsl-button--primary:focus-visible {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	color: var(--bsl-paper);
}

.bsl-inverse .is-style-outline .wp-block-button__link,
.bsl-inverse .bsl-button--ghost {
	background-color: transparent;
	border-color: rgba(244, 243, 233, 0.55);
	color: var(--bsl-paper);
	box-shadow: none;
}

.bsl-inverse .is-style-outline .wp-block-button__link:hover,
.bsl-inverse .is-style-outline .wp-block-button__link:focus-visible,
.bsl-inverse .bsl-button--ghost:hover,
.bsl-inverse .bsl-button--ghost:focus-visible {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	color: var(--bsl-paper);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
}

/* --------------------------------------------------------- main menu
 * The menu had no hover state at all: the pointer changed and nothing else
 * did. The link takes the brand terracotta, and the filled call to action
 * goes the other way, to teal, so both move and both stay readable. */
.bsl-nav__list a {
	transition: color var(--bsl-duration) var(--bsl-ease),
		background-color var(--bsl-duration) var(--bsl-ease);
}

.bsl-nav__list > li > a:hover,
.bsl-nav__list > li > a:focus-visible {
	color: var(--bsl-accent-strong);
}

.bsl-nav__list .bsl-menu-cta > a:hover,
.bsl-nav__list .bsl-menu-cta > a:focus-visible {
	background-color: var(--bsl-teal);
	border-color: var(--bsl-teal);
	color: var(--bsl-paper);
}

/* Submenu items get the same treatment plus a tint, so the row being pointed
 * at is obvious in a dropdown. */
.bsl-nav__list ul a:hover,
.bsl-nav__list ul a:focus-visible {
	background-color: rgba(176, 74, 56, 0.08);
	color: var(--bsl-accent-strong);
}

/* The language chips already had a hover; the current one now shows it too so
 * the pair behaves consistently. */
.bsl-lang a:hover,
.bsl-lang a:focus-visible {
	background-color: var(--bsl-bg-sunken);
	color: var(--bsl-accent-strong);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: var(--bsl-focus-width) solid var(--bsl-focus);
	outline-offset: var(--bsl-focus-offset);
}

/* ==========================================================================
   9b. Pagination
   --------------------------------------------------------------------------
   The pager is a <ul>, and nothing had turned its markers off, so a bullet sat
   between every page number.
   ========================================================================== */

.bsl-pagination ul,
.bsl-pagination ol,
nav[class*="pagination"] ul,
.bsl-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsl-pagination li,
nav[class*="pagination"] li {
	list-style: none;
	margin: 0;
}

.bsl-pagination li::marker,
nav[class*="pagination"] li::marker {
	content: "";
}

/* ==========================================================================
   10. Interior page headers
   --------------------------------------------------------------------------
   /impact/ opened with a title, then most of a screen of nothing, then the
   first heading. The band closes that gap and gives interior pages the same
   top the home page has.
   ========================================================================== */

.bsl-page-header {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
	background-color: var(--bsl-bg-sunken);
	background-image: radial-gradient(60rem 30rem at 88% -30%, rgba(195, 90, 73, 0.1), transparent 60%);
	border-bottom: 1px solid var(--bsl-line-soft);
}

/* A page with `_bsl_header_image` set gets that photograph in the half its
 * title does not use, masked into the band from the right exactly as the home
 * page hero is, so the two read as the same device rather than as a banner
 * bolted onto an interior page. The title keeps a clear field to sit on. */
.bsl-page-header:has(> .bsl-container) {
	--bsl-header-mask: linear-gradient(to left, #000 26%, transparent 88%);
}

.bsl-page-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 0;
	inset-inline-end: 0;
	width: 52%;
	background-image: var(--bsl-header-photo, none);
	background-size: cover;
	background-position: 50% 45%;
	opacity: 0.5;
	-webkit-mask-image: var(--bsl-header-mask, linear-gradient(to left, #000 26%, transparent 88%));
	mask-image: var(--bsl-header-mask, linear-gradient(to left, #000 26%, transparent 88%));
	pointer-events: none;
}

/* The heading has to stay readable over the fade, so the paper is reinforced
 * behind it rather than the photograph being dimmed into mud. */
.bsl-page-header:has(+ * ) .bsl-page-header__title,
.bsl-page-header__title,
.bsl-page-header__intro {
	position: relative;
	z-index: 1;
}

@media (max-width: 55.99em) {
	.bsl-page-header::after {
		width: 100%;
		opacity: 0.16;
		-webkit-mask-image: linear-gradient(to top, #000 8%, transparent 82%);
		mask-image: linear-gradient(to top, #000 8%, transparent 82%);
	}
}

.bsl-page-header__title {
	text-wrap: balance;
}

.bsl-page-header__intro {
	max-width: 58ch;
}

/* The breadcrumbs sit directly above the header band; without this they float
 * in their own strip of paper. */
.bsl-breadcrumbs {
	padding-block: var(--bsl-space-4) var(--bsl-space-3);
}

/* The first section after a page header does not need a full section's worth
 * of padding on top of the band's own. This is where most of the empty screen
 * on /impact/ was coming from. */
.bsl-page-header + .bsl-section,
.bsl-page-header + .bsl-container.bsl-section {
	padding-block-start: clamp(1.75rem, 1rem + 2.6vw, 3rem);
}

.bsl-page-header + .bsl-section > .bsl-prose > .bsl-impact:first-child,
.bsl-section > .bsl-prose > .bsl-impact:first-child {
	padding-block-start: 0;
}

/* The figures block brought a full section's padding of its own on top of the
 * paragraph spacing above it, which left most of a screen empty between the
 * introduction and the first number. */
.bsl-prose > .bsl-impact {
	padding-block: var(--bsl-space-7);
}

/* ==========================================================================
   10b. Flipbook and milestones
   ========================================================================== */

/* A ratio box, so the flipbook keeps its shape at every width instead of
 * needing a fixed height that is wrong on one device or the other. */
.bsl-flipbook {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-block: var(--bsl-space-6);
	background-color: var(--bsl-bg-sunken);
	border: 1px solid var(--bsl-line-soft);
	border-radius: var(--bsl-radius);
	overflow: hidden;
}

.bsl-flipbook iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 47.99em) {
	/* On a phone a spread is unreadable, so the box goes taller and narrower
	 * rather than shrinking the pages to nothing. */
	.bsl-flipbook {
		aspect-ratio: 3 / 4;
	}
}

/* The milestones read as a list of dates, so the date leads and the rest
 * follows it rather than the whole line running at one weight. */
.bsl-milestones {
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
}

.bsl-milestones > li {
	position: relative;
	margin-block: 0 var(--bsl-space-5);
	padding-inline-start: var(--bsl-space-6);
	border-inline-start: 2px solid var(--bsl-line-soft);
	padding-block: var(--bsl-space-1) var(--bsl-space-2);
}

.bsl-milestones > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -5px;
	inset-block-start: 0.7em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--bsl-accent);
}

.bsl-milestones > li strong {
	color: var(--bsl-text);
}

/* ==========================================================================
   11. Funding notice and the EU emblem
   --------------------------------------------------------------------------
   The uploaded PNG has "Co-funded by the European Union" set in dark blue,
   which disappeared against the teal footer. The emblem now ships as SVG and
   the wordmark is real text, so it takes the colour of whatever it sits on and
   translates with the rest of the page.
   ========================================================================== */

/* Emblem and disclaimer side by side. Stacked, the emblem sat alone on a line
 * with the paragraph underneath it and the whole right half of the footer
 * empty. */
.bsl-funding {
	display: grid;
	gap: var(--bsl-space-5) var(--bsl-space-7);
	grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 44em) {
	.bsl-funding {
		grid-template-columns: 1fr;
	}
}

.bsl-eu {
	display: flex;
	gap: var(--bsl-space-4);
	align-items: center;
	margin: 0;
}

.bsl-eu__flag {
	flex: none;
	display: block;
	width: 4.5rem;
	height: 3rem;
	border-radius: 1px;
}

.bsl-eu__words {
	max-width: 14ch;
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-semibold);
	line-height: 1.25;
	color: var(--bsl-text);
}

.bsl-funding p {
	color: var(--bsl-text-muted);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.bsl-site-footer {
	background-image: radial-gradient(70rem 34rem at 92% 0%, rgba(195, 90, 73, 0.16), transparent 60%);
}

/* EN and ES were on different baselines: the current language is a <span>
 * with a background box and the other is a bare <a>, so only one of them had
 * padding. Give both the same box and the pair lines up. */
.bsl-lang {
	display: flex;
	align-items: center;
	gap: var(--bsl-space-1);
}

/* `.bsl-site-footer li + li { margin-top: … }` spaces the footer link lists,
 * and it was also catching the second language chip: 8px of top margin on ES
 * and none on EN, which is the 4px offset between them. The selector below is
 * more specific, so the chips are exempt while the lists keep their spacing. */
.bsl-lang li,
.bsl-site-footer .bsl-lang li + li,
.bsl-site-header .bsl-lang li + li {
	display: flex;
	align-items: center;
	margin-top: 0;
}

/* A fixed height on both, not a minimum. In the footer the linked language
 * measured 40px and the current one 32px: the link carries a longer piece of
 * screen-reader text, and that was enough to make the two chips sit on
 * different lines. Equal boxes cannot drift apart. */
.bsl-lang a,
.bsl-lang span[aria-current],
.bsl-lang span.bsl-lang__unavailable {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.5rem;
	height: 2rem;
	min-height: 0;
	padding: 0 var(--bsl-space-2);
	border-radius: var(--bsl-radius);
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	line-height: 1;
	text-decoration: none;
}

.bsl-site-footer h2 {
	color: var(--bsl-paper);
}

/* The bottom strip holds three things of different heights: a paragraph, a
 * list of legal links and the language chips. Each was sitting on its own
 * baseline. Centring them on one line and stripping the paragraph's margin
 * puts them level. */
.bsl-site-footer__bottom {
	align-items: center;
	row-gap: var(--bsl-space-4);
}

.bsl-site-footer__bottom > * {
	margin-block: 0;
	display: flex;
	align-items: center;
}

.bsl-site-footer__bottom nav .bsl-social {
	align-items: center;
	gap: var(--bsl-space-5);
}

.bsl-site-footer__bottom .bsl-social li {
	margin-top: 0;
	display: flex;
	align-items: center;
}

/* ==========================================================================
   13. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bsl-card > article,
	.bsl-card > article:hover,
	.bsl-areas__item,
	.bsl-areas__item:hover,
	.bsl-card__media img,
	.bsl-card > article:hover .bsl-card__media img,
	.bsl-button:active,
	.wp-block-button__link:active {
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
	.bsl-home .bsl-container > .bsl-hero,
	.bsl-hero--band,
	.bsl-page-header,
	.bsl-site-footer {
		background: none;
		color: #000;
	}

	.bsl-home .bsl-container > .bsl-hero::after,
	.bsl-hero--band::after {
		display: none;
	}
}