/* Breakthru AI — component styles.
 *
 * Built entirely on assets/css/tokens.css. Nothing here redefines a token
 * value; every colour, size, duration and radius is a var() reference.
 * Scope at this stage: global chrome only (build spec Section 4).
 */

/* ============================================================
   0. The AMP² wordmark — amp2-blog-template-spec.md §1
   ============================================================ */

/* The blog is always AMP² in rendered copy. The base rule is §1 verbatim and
   is the masthead display size (84px). The `top` offset is in em, so it scales
   with whatever it sits in — the two smaller variants below are §1's tuned
   values for the contexts where 0.34em/-1.62em reads too small and too high. */
.amp-sup{font-size:0.34em;font-weight:600;line-height:0;vertical-align:baseline;position:relative;top:-1.62em;margin-left:0.12em}

/* Inline headings and running text. */
.amp-sup.is-inline{font-size:0.5em;top:-1em;margin-left:0.1em}

/* Mono labels, bylines, small caps. */
.amp-sup.is-mono{font-size:0.62em;top:-0.66em;margin-left:0.1em}

/* Fallback. The class is what §1 specifies and every template emits it, but
   two of these live inside core rich-text blocks (the footer heading and the
   AMP² Weekly list item), where the editor owns the markup and can drop an
   attribute it does not recognise. If that ever happens the superscript still
   renders at the right size rather than collapsing to a browser default. */
:where(.bv-footer__heading, .bv-footer__list, .bv-nav, .bv-amp-masthead) sup:not([class]) {
	font-size: 0.5em;
	font-weight: 600;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: -1em;
	margin-left: 0.1em;
}

/* ============================================================
   1. Header — build spec 4.1
   ============================================================ */

.bv-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--surface-card);
	border-bottom: 1px solid transparent;
	transition: border-color var(--duration-base) var(--ease-standard);
}

/* Bottom hairline appears only once scrolled. */
.bv-header.is-scrolled {
	border-bottom-color: var(--border-hairline);
}

.bv-header .bv-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-9);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-page);
	height: var(--header-height);
	transition: height var(--duration-base) var(--ease-standard);
}

.bv-header.is-scrolled .bv-header__inner {
	height: var(--header-height-compact);
}

/* ---- Brand lockup: the client's artwork, linking home ----
   The live-text wordmark is retired. The client supplied a real transparent
   "Breakthru Ventures AI" lockup (1200x350, genuine alpha, tightly cropped with
   no transparent padding), which carries the cube, both words and the AI
   roundel as one piece — so the cube is no longer drawn separately here. The
   old ::before pseudo-element that painted logo-mark.png is gone with it;
   logo-mark.png itself stays, still used by the footer, the 404 and the
   JSON-LD publisher logo in inc/seo.php.

   The accessible name is the <img alt> in parts/header.html, not CSS, and the
   <a> deliberately carries no aria-label — one name, announced once.

   HEIGHT IS SET HERE AND WIDTH FOLLOWS. The <img> also carries its intrinsic
   width/height attributes, so the browser knows the 24:7 ratio before the file
   arrives and reserves the box: the header does not reflow on load. Setting a
   width instead would reintroduce that shift on a slow connection. */

.bv-brand {
	margin: 0;
	display: flex;
	align-items: center;
}

.bv-brand a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.bv-brand a:hover {
	text-decoration: none;
}

/* 40px in the 72px bar, 34px once it compacts to 56px — the same proportion
   the cube mark held, and the smallest size at which the "AI" roundel and the
   "Ventures" line stay legible. At 2x that asks 80px and 68px of the source's
   350px, so the artwork is oversupplied at every state and never upscaled. */
.bv-brand__logo {
	display: block;
	height: 40px;
	width: auto;
	transition: height var(--duration-base) var(--ease-standard);
}

.bv-header.is-scrolled .bv-brand__logo {
	height: 34px;
}

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

/* The nav is pushed right by the block layout, not from here: the navigation
   block carries `style.layout.selfStretch: "fill"`, which core serialises to
   `flex-grow: 1`, and its own `justifyContent: "right"` then seats the items
   against its right edge — hard against the CTA.

   This replaces a `.bv-nav { margin-left: auto }` rule that never once
   applied. Core's layout stylesheet sets `.is-layout-flex > :is(*, div)
   { margin: 0 }`, and `:is()` takes the specificity of its heaviest argument,
   so that selector weighs (0,1,1) against a bare class's (0,1,0) and won every
   time. Raising the weight here would work, but the block layout already
   expresses this natively — so it owns it, and the markup stays the source of
   truth. */

.bv-nav .wp-block-navigation__container {
	gap: var(--space-8);
}

/* Core forces `color: inherit` on nav links through a doubled class selector,
   so these have to out-weigh it rather than merely follow it. */
.bv-header .bv-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	/* Multi-word labels — "How It Works", "AMP Blog" — otherwise wrap inside
	   their own item between 900px and roughly 1000px, leaving those two items
	   two or three lines tall while the rest stay one. The row is nowrap at the
	   flex level, so this is the text wrapping, not the items reflowing. */
	white-space: nowrap;
	color: var(--text-secondary);
	text-decoration: none;
	padding-bottom: var(--space-2);
	border-bottom: 2px solid transparent;
	transition: var(--transition-color);
}

.bv-header .bv-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--text-primary);
	text-decoration: none;
}

/* Active state: 2px rule + weight 600. Not a pill, not a background fill. */
.bv-header .bv-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.bv-header .bv-nav .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.bv-header .bv-nav .current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--text-primary);
	font-weight: var(--weight-semibold);
	border-bottom-color: var(--accent-primary);
}

/* The CTA must not absorb the squeeze: as a flex item it shrinks before the
   row overflows, which compressed "Get Started" onto three lines at 900px
   rather than reporting as an overflow. */
.bv-header__cta {
	margin: 0;
	flex: none;
}

.bv-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/* Between the overlay breakpoint and roughly 1100px the bar is at its
   tightest: the full six-item nav, the brand and the CTA all have to fit, and
   with nowrap labels they no longer do at 900px — the CTA was pushed past the
   viewport edge. 4.1 fixes the overlay at 900px, so the gaps give way instead
   of the breakpoint moving. */
@media (min-width: 900px) and (max-width: 1099px) {
	.bv-header .bv-header__inner {
		gap: var(--space-7);
	}

	.bv-nav .wp-block-navigation__container {
		gap: var(--space-4);
	}
}

/* ---- Mobile: full-screen overlay below 900px ----
   Core switches the navigation block to its overlay at 600px; the spec calls
   for 900px, so the two core breakpoint rules are re-asserted here. Selector
   weight is raised past core's so print order cannot decide the outcome. */

@media (max-width: 899px) {
	.bv-header .bv-header__inner {
		gap: var(--space-5);
	}

	.bv-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.bv-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.bv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	/* CTA pinned to the bottom of the open panel (4.1). The button stays a
	   single element in the DOM — it is repositioned, never duplicated.
	   Core flags the open state on the overlay container itself, which is a
	   sibling of the CTA, so match the header with :has() rather than the
	   global body class (core does not put one there). */
	.bv-header:has(.wp-block-navigation__responsive-container.is-menu-open) .bv-header__cta {
		position: fixed;
		left: var(--gutter-page);
		right: var(--gutter-page);
		bottom: var(--space-7);
		z-index: 100001; /* core's overlay sits at 100000 */
		margin: 0;
	}

	.bv-header:has(.wp-block-navigation__responsive-container.is-menu-open) .bv-header__cta .wp-block-button,
	.bv-header:has(.wp-block-navigation__responsive-container.is-menu-open) .bv-header__cta .wp-block-button__link {
		width: 100%;
	}

	.bv-header:has(.wp-block-navigation__responsive-container.is-menu-open) .bv-header__cta .wp-block-button__link {
		min-height: 52px;
	}
}

/* ---- Overlay panel ---- */

/* Core derives the panel's alignment from this custom property, which the
   right-justified desktop bar sets to flex-end. The panel reads left. */
.bv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	background: var(--surface-card);
	/* Core derives the panel gutter from a clamp() over the root padding
	   custom properties, which does not resolve here. Set it from the token
	   directly so the panel lines up with the rest of the page. */
	padding-inline: var(--gutter-page);
	padding-top: var(--space-7);
	/* Clear the pinned CTA. */
	padding-bottom: calc(var(--space-7) + 52px + var(--space-7));
}

/* Core sets the justification property on the list and the items as well as
   on the container, so the panel has to be told at each level; align-items is
   set directly rather than left to the custom property alone. */
.bv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.bv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	--navigation-layout-justification-setting: flex-start;
	align-items: flex-start;
	width: 100%;
}

/* Phones: the bar has to hold brand + hamburger + CTA inside 390px. Trim the
   logo and the CTA padding rather than let "Get Started" wrap to two
   lines — Button.jsx keeps button labels on one line. */
@media (max-width: 599px) {
	/* 36px, not the 28px the old cube dropped to: the lockup carries both words
	   and the roundel now, and below about 34px the "Ventures" line and the "AI"
	   stop being readable. 36px is 123px wide, which still leaves room for the
	   44px menu button inside a 390px bar. */
	.bv-brand__logo {
		height: 36px;
	}

	.bv-header.is-scrolled .bv-brand__logo {
		height: 32px;
	}

	/* "Breakthru Ventures AI" is a long wordmark. On phones the bar carries the
	   brand and the menu button only; 4.1 puts the CTA at the bottom of the
	   open panel anyway, so it moves there rather than being squeezed out.

	   The .wp-block-buttons class is needed here: core's
	   `.wp-block-buttons.is-layout-flex { display: flex }` is two classes, so a
	   single-class rule loses to it and this never applied. The bar overflowed
	   at 360px as a result. */
	.bv-header .bv-header__cta.wp-block-buttons {
		display: none;
	}

	.bv-header:has(.wp-block-navigation__responsive-container.is-menu-open) .bv-header__cta.wp-block-buttons {
		display: flex;
	}

	.bv-header__cta .wp-block-button__link {
		padding-inline: var(--space-4);
		white-space: nowrap;
	}
}

/* 44px minimum hit targets inside the overlay. Nav stays in the UI face
   (build spec 3) — only the scale changes. */
.bv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-ui);
	font-size: var(--text-h3);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
}

.bv-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
}

/* ============================================================
   2. Footer — build spec 4.2
   ============================================================ */

.bv-footer {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.bv-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--gutter-page) var(--space-9);
}

.bv-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-9);
	align-items: start;
}

@media (max-width: 899px) {
	.bv-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 599px) {
	.bv-footer__cols {
		grid-template-columns: 1fr;
	}
}

.bv-footer__mark {
	height: 40px;
	aspect-ratio: 152 / 175;
	background: url("../img/logo-mark.png") no-repeat left center / contain;
}

.bv-footer__tagline {
	font-family: var(--font-display);
	font-size: var(--text-body);
	line-height: var(--leading-normal);
	color: var(--text-inverse-muted);
	max-width: 34ch;
	margin-top: var(--space-5);
}

.bv-footer :is(h1, h2, h3, h4, h5, h6) {
	color: var(--text-inverse);
}

.bv-footer .bv-footer__heading {
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	line-height: var(--leading-normal);
	text-transform: uppercase;
	color: var(--bv-blue-300);
	margin: 0 0 var(--space-5);
}

.bv-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	font-size: var(--text-body-sm);
}

.bv-footer a {
	color: var(--text-inverse-muted);
	text-decoration: none;
}

.bv-footer a:hover {
	color: var(--text-inverse);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Social row — official brand marks from core's social-links block.
   Weight raised past core's per-service logos-only colours, several of which
   (TikTok's black in particular) are invisible on navy. */
.bv-footer .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--text-inverse-muted);
}

.bv-footer .wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	color: var(--text-inverse);
}

.bv-footer .wp-block-social-links .wp-social-link svg {
	fill: currentColor;
}

.bv-footer__social {
	margin-top: var(--space-9);
}

.bv-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-5);
	border-top: 1px solid var(--border-inverse);
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--text-inverse-muted);
}

.bv-footer__bottom p {
	margin: 0;
	font-size: inherit;
	font-family: inherit;
}

.bv-footer__legal a + a {
	margin-left: var(--space-4);
	padding-left: var(--space-4);
	border-left: 1px solid var(--border-inverse);
}

/* Flow layout puts margin-block-start on every sibling after the first, which
   would stagger the grid columns and the bottom bar. The block markup sets
   blockGap 0 on both; this is the belt to that pair of braces. */
.bv-footer .bv-footer__cols > *,
.bv-footer .bv-footer__bottom > * {
	margin-block-start: 0;
}

/* Company column: labels are in place but intentionally unlinked pending the
   Amendment K link audit. Render them as text, not as links that go nowhere. */
.bv-footer .bv-footer__list li:not(:has(a)) {
	color: var(--text-faint);
}

/* WordPress's root flow layout puts block-gap between the top-level children
   of .wp-site-blocks, which drops a 24px band of page ground between the
   header and the first section (and above the footer). The chrome is meant to
   butt straight up against the content. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ============================================================
   3. Global chrome details
   ============================================================ */

/* Link underline geometry. theme.json can set `text-decoration` but not the
   offset or thickness, and the shorthand it emits resets the thickness. */
a:where(:not(.wp-element-button)) {
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* Never remove outlines (build spec 8.11). tokens.css sets the ring; this
   guarantees it survives on the inverse ground too. */
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.bv-footer :focus-visible {
	outline-color: var(--bv-blue-300);
}

/* Anchor targets clear the sticky header (e.g. /#book-review, /#solutions). */
:target {
	scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
   4. Home-page sections — build spec 5.1–5.4, Amendment D order
   ============================================================ */

/* ---- Shared section furniture ---- */

.bv-section {
	position: relative;
}

/* Anchor targets clear the sticky header. */
.bv-section[id] {
	scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.bv-section__inner,
.bv-hero__inner,
.bv-positioning__inner,
.bv-solutions__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-page);
	width: 100%;
}

/* 12px, weight 700, uppercase, 0.1em tracking, brand blue. */
.bv-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--accent-primary);
	margin: 0;
}

.bv-section__title {
	font-size: var(--wp--preset--font-size--h-2);
	margin: var(--space-4) 0 0;
}

/* ---- 5.1 Hero ---- */

.bv-hero {
	display: flex;
	align-items: center;
	min-height: 640px;
	background: var(--surface-inverse);
	color: var(--text-inverse);
	overflow: hidden;
	isolation: isolate;
}

/* 8.1 treatment (a): the recovered wave field at 45% over the navy ground.
   No protection gradient and no capsule behind the words — the whole band
   carries the scrim. */
.bv-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.bv-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}

/* The navy scrim of 8.1(a). Alpha is not specified there; 0.5 is the lowest
   value at which the spec's own on-navy tokens clear WCAG AA over the
   brightest part of the wave — white headline 9.5:1, sky accent 5.6:1,
   inverse-muted subhead 4.7:1. Uniform across the band, so it is a scrim and
   not a protection gradient behind the words. */
.bv-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--surface-inverse);
	opacity: 0.5;
}

.bv-hero__inner {
	padding-block: var(--space-12);
}

.bv-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--space-7);
	padding: var(--space-3) var(--space-5);
	background: var(--surface-brand-soft);
	color: var(--accent-primary);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	border-radius: var(--radius-pill);
}

.bv-hero__title {
	margin: 0;
	max-width: 14ch;
	font-size: var(--wp--preset--font-size--display-xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
	color: var(--text-inverse);
}

/* Amendment G: on-navy accents use sky, never brand blue. */
.bv-hero__accent {
	color: var(--bv-blue-300);
}

.bv-hero__sub {
	margin: var(--space-7) 0 0;
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-normal);
	color: var(--text-inverse-muted);
}

.bv-hero__ctas {
	margin-top: var(--space-9);
	gap: var(--space-5);
}

/* Button lg size, from the design system's Button.jsx. */
.bv-btn--lg .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-height: 52px;
	padding: 15px 28px;
	font-size: var(--text-body);
}

.bv-btn__icon {
	flex: none;
}

/* Secondary CTA on the navy ground — Button.jsx `inverse` variant. */
.bv-btn.is-style-inverse .wp-block-button__link {
	background: transparent;
	color: var(--text-inverse);
	border-color: rgba(255, 255, 255, 0.42);
}

.bv-btn.is-style-inverse .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.72);
	color: var(--text-inverse);
}

.bv-hero :focus-visible {
	outline-color: var(--bv-blue-300);
}

/* ---- 5.3 Positioning ---- */

.bv-positioning {
	background: var(--surface-page);
}

.bv-positioning__inner {
	padding-block: var(--section-y);
	text-align: center;
}

.bv-positioning__title {
	margin: var(--space-4) 0 0;
	font-size: var(--wp--preset--font-size--h-2);
}

.bv-positioning__body {
	margin: var(--space-6) auto 0;
	max-width: 66ch;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

/* ---- 5.4 Solutions ---- */

.bv-solutions {
	background: var(--surface-card);
}

.bv-solutions__inner {
	padding-block: var(--section-y);
	text-align: center;
}

/* Six tracks so the final row of a five-card set can be centred rather than
   stranded on the left (8.7). */
.bv-cards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-7);
	margin-top: var(--space-10);
	text-align: left;
}

.bv-cards > .bv-card {
	margin-block-start: 0;
	grid-column: span 2;
}

/* 8.7's centred final row, but only when there are exactly five cards.
 *
 * Six tracks give three cards a row. Five leave two stranded on the left, so
 * 8.7 centres them — and the rules that did it fired on card 4 and card 5
 * whatever the total. At six cards that pushed 4 and 5 into the centred
 * positions and left nowhere for 6, which wrapped alone: 3 / 2 / 1.
 *
 * Quantity queries fix it without a count class or a media query.
 * :nth-child(4):nth-last-child(2) matches the 4th element only when it is also
 * second from the end — true at five cards, false at six. So five centres and
 * six falls through to two clean rows of three, and the parked five-card
 * industries grid still centres correctly if it comes back. */
.bv-cards > .bv-card:nth-child(4):nth-last-child(2) {
	grid-column: 2 / span 2;
}

.bv-cards > .bv-card:nth-child(5):nth-last-child(1) {
	grid-column: 4 / span 2;
}

.bv-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-7);
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
	transition: box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

/* Hover adds shadow-sm and darkens the border. No lift, no scale, no tint. */
.bv-card:hover {
	box-shadow: var(--shadow-sm);
	border-color: var(--border-strong);
}

.bv-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-6);
	background: var(--surface-brand-soft);
	color: var(--accent-primary);
	border-radius: var(--radius-xs);
}

.bv-card__title {
	margin: 0 0 var(--space-4);
	font-size: var(--wp--preset--font-size--h-4);
}

.bv-card__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-solutions__closing {
	margin: var(--space-9) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--text-muted);
}

@media (max-width: 899px) {
	.bv-cards {
		grid-template-columns: 1fr;
		margin-top: var(--space-9);
	}

	.bv-cards > .bv-card,
	.bv-cards > .bv-card:nth-child(4),
	.bv-cards > .bv-card:nth-child(5) {
		grid-column: auto;
	}

	.bv-hero {
		min-height: 0;
	}

	.bv-hero__inner {
		padding-block: var(--space-11);
	}

	.bv-positioning__inner,
	.bv-solutions__inner {
		padding-block: var(--space-11);
	}
}

.bv-section__standfirst {
	margin: var(--space-6) auto 0;
	max-width: 66ch;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-step {
	position: relative;
	margin: 0;
}

/* The connector runs from this tile's centre to the next tile's centre and is
   covered by the opaque tiles, so it reads as passing behind them. */
.bv-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: calc(100% + var(--space-8));
	height: 1px;
	background: var(--border-hairline);
	z-index: 0;
}

.bv-step__icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--surface-brand-soft);
	color: var(--accent-primary);
	border-radius: var(--radius-xs);
}

.bv-step__num {
	margin: var(--space-6) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-mono);
	color: var(--accent-primary);
}

.bv-step__title {
	margin: var(--space-2) 0 var(--space-3);
	font-size: var(--wp--preset--font-size--h-4);
}

.bv-step__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

/* Labels, not filters: spans with a pill outline. */
.bv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-6);
}

.bv-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-4);
	border: 1px solid var(--accent-primary);
	border-radius: var(--radius-pill);
	color: var(--accent-primary);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	line-height: 1.7;
}

/* Amendment F puts the card on the paper ground. The section is paper here so
   that 8.9's alternation survives, so the card takes the surface tone instead
   — same relationship, inverted, and the card still reads as a card. */
.bv-quote {
	margin: 0;
	padding: var(--space-8);
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
}

/* The design system's 2px brand-blue rule above the quote. */
.bv-quote::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin-bottom: var(--space-6);
	background: var(--accent-primary);
}

.bv-quote__text {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-body);
	color: var(--text-primary);
}

.bv-quote__text p {
	margin: 0;
}

.bv-eyebrow--inverse {
	color: var(--bv-blue-300);
}

.bv-section__title--inverse {
	color: var(--text-inverse);
}

.bv-case {
	padding-left: var(--space-6);
	border-left: 2px solid var(--bv-blue-300);
}

.bv-case__claim {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--text-inverse);
}

.bv-case__support {
	margin: var(--space-4) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--leading-normal);
	color: var(--text-inverse-muted);
}

@media (max-width: 899px) {

	/* Connector is meaningless once the steps stack. */
	.bv-step:not(:last-child)::after {
		display: none;
	}
}

.bv-booking__inner,
.bv-final__inner,
.bv-about-hero__inner,
.bv-mission__inner,
.bv-values__inner,
.bv-contact__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-page);
	padding-block: var(--section-y);
	width: 100%;
}

/* The one coloured word in a headline, kept in its own span so it stays
   editable. Never red — red is the AMP Power desk (Amendment Q). */
.bv-accent {
	color: var(--accent-primary);
}

/* ---- 5.8 Consultation CTA (Amendment E) ---- */

/* Amendment S is retired. It moved 5.8 off brand-soft because 5.9 sat directly
   beneath it and the two shared a ground — brand-soft had to appear once, at
   the end, to tell a reader the page had closed. The client's September 2026
   revision removes 5.9, so 5.8 is now the last band and inherits that job.
   Amendment E's original ground is restored.

   5.9's rule below is kept: final-cta is parked, not deleted. */
.bv-booking {
	background: var(--surface-brand-soft);
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}

.bv-final {
	background: var(--surface-brand-soft);
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}

/* Adjacent hairlines would stack into a 2px rule. */
.bv-booking + .bv-final {
	border-top: 0;
}

.bv-booking__inner,
.bv-final__inner {
	text-align: center;
}

.bv-booking__ctas,
.bv-final__ctas {
	margin-top: var(--space-9);
}

/* Not optional: mailto: fails silently on webmail and where no mail client is
   configured, and this is what keeps the section working for those visitors. */
.bv-booking__address {
	margin: var(--space-6) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--text-secondary);
}

.bv-booking__alt {
	margin: var(--space-4) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
}

/* ---- 6.1 About ---- */

.bv-about-hero {
	background: var(--surface-card);
}

.bv-about-hero__title {
	margin: 0;
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--leading-snug);
}

.bv-about-hero__standfirst {
	margin: var(--space-6) 0 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-stat__figure {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: var(--weight-semibold);
	line-height: 1.1;
	color: var(--accent-primary);
}

.bv-stat__label {
	margin: var(--space-3) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-mission {
	background: var(--surface-card);
}

.bv-mission__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-10);
	align-items: start;
	text-align: left;
}

.bv-minicards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.bv-minicard {
	padding: var(--space-6);
	background: var(--surface-page);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
}

.bv-minicard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: var(--space-4);
	background: var(--surface-brand-soft);
	color: var(--accent-primary);
	border-radius: var(--radius-xs);
}

.bv-minicard__title {
	margin: 0 0 var(--space-2);
	font-size: var(--wp--preset--font-size--h-4);
}

.bv-minicard__line {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-mission__prose .bv-section__title {
	margin: var(--space-4) 0 0;
}

.bv-mission__para {
	margin: var(--space-5) 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-values {
	background: var(--surface-page);
}

.bv-values__inner {
	text-align: center;
}

.bv-minicards--values {
	margin-top: var(--space-9);
	gap: var(--space-6);
	text-align: left;
}

/* Values sit on the paper ground, so their cards take the surface tone —
   the same inversion as the pull-quote card in 5.10. */
.bv-minicards--values .bv-minicard {
	background: var(--surface-card);
}

/* ---- 6.2 Contact ---- */

.bv-contact {
	background: var(--surface-page);
}

/* Flow layout would stagger the columns with a margin on the second child. */
.bv-contact .bv-contact__cols > * {
	margin-block-start: 0;
}

/* The card is empty until the form is added on the site itself, so it needs a
   floor — otherwise it collapses to a 2px line next to a full-height column. */
.bv-formcard:empty {
	min-height: 220px;
}

.bv-contact__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-10);
	align-items: start;
	text-align: left;
}

.bv-contact__title {
	margin: var(--space-4) 0 0;
	font-size: var(--wp--preset--font-size--h-1);
}

.bv-contact__standfirst {
	margin: var(--space-5) 0 0;
	max-width: 50ch;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-contact__details {
	list-style: none;
	margin: var(--space-9) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.bv-contact__detail {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-contact__detail .bv-icon {
	flex: none;
	margin-top: 3px;
	color: var(--accent-primary);
}

.bv-formcard {
	padding: var(--space-8);
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
}

.bv-formcard__notice {
	margin: 0 0 var(--space-7);
	padding: var(--space-5);
	background: var(--surface-sunken);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
}

.bv-formcard__notice strong {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--text-primary);
}

.bv-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.bv-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.bv-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bv-field__label {
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

/* Brand blue, not red — red is the Power desk. */
.bv-field__req {
	color: var(--accent-primary);
}

.bv-field__input {
	width: 100%;
	min-height: 44px;
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-ui);
	font-size: var(--wp--preset--font-size--body);
	color: var(--text-primary);
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-xs);
	transition: var(--transition-color);
}

.bv-field__input:hover {
	border-color: var(--neutral-700);
}

.bv-field__input:focus-visible {
	border-color: var(--accent-primary);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.bv-field__textarea {
	min-height: 0;
	resize: vertical;
	line-height: var(--leading-normal);
}

.bv-form__submit {
	width: 100%;
	min-height: 48px;
	padding: var(--space-4) var(--space-7);
	font-family: var(--font-ui);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--weight-semibold);
	color: var(--text-inverse);
	background: var(--accent-primary);
	border: 1px solid var(--accent-primary);
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: var(--transition-color);
}

.bv-form__submit:hover:not([disabled]) {
	background: var(--accent-primary-hover);
	border-color: var(--accent-primary-hover);
}

.bv-form__submit[disabled] {
	background: var(--surface-sunken);
	color: var(--text-muted);
	border-color: var(--border-subtle);
	cursor: not-allowed;
}

@media (max-width: 899px) {
	.bv-booking__inner,
	.bv-final__inner,
	.bv-about-hero__inner,
	.bv-mission__inner,
	.bv-values__inner,
	.bv-contact__inner {
		padding-block: var(--space-11);
	}

	.bv-mission__cols,
	.bv-contact__cols {
		grid-template-columns: 1fr;
		gap: var(--space-9);
	}

	.bv-minicards,
	.bv-minicards--values {
		grid-template-columns: 1fr;
	}

	.bv-form__row {
		grid-template-columns: 1fr;
	}

	.bv-formcard {
		padding: var(--space-6);
	}
}

/* ============================================================
   7. AMP — editorial templates, build spec 7.3
   ============================================================ */

/* Desk colour resolves through one custom property, so every kicker, rule,
   pill and stat reads it the same way. */
.is-desk-ai,
.is-style-amp-ai {
	--bv-desk: var(--amp-ai);
}

.is-desk-money,
.is-style-amp-money {
	--bv-desk: var(--amp-money-on-light);
}

.is-desk-power,
.is-style-amp-power {
	--bv-desk: var(--amp-power);
}

.is-desk-government,
.is-style-amp-government {
	--bv-desk: var(--amp-government);
}

/* On navy the desk colours are the cube's own face tones, which is both more
   faithful to the mark and the only way they clear AA. 7.3 calls out
   Government; AI (3.52:1) and Power (3.86:1) fail there too. */
.bv-amp-masthead .is-desk-ai,
.bv-amp-masthead .is-style-amp-ai,
.bv-amp-bottomline .is-desk-ai {
	--bv-desk: var(--bv-blue-300);
}

.bv-amp-masthead .is-desk-money,
.bv-amp-masthead .is-style-amp-money,
.bv-amp-bottomline .is-desk-money {
	--bv-desk: var(--bv-green-500);
}

.bv-amp-masthead .is-desk-power,
.bv-amp-masthead .is-style-amp-power,
.bv-amp-bottomline .is-desk-power {
	--bv-desk: var(--bv-red-500);
}

.bv-amp-masthead .is-desk-government,
.bv-amp-masthead .is-style-amp-government,
.bv-amp-bottomline .is-desk-government {
	--bv-desk: var(--amp-government-on-dark);
}

/* ---- Masthead ---- */

.bv-amp-masthead {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.bv-amp-masthead__barinner,
.bv-amp-masthead__brand,
.bv-amp-masthead__filterinner {
	max-width: var(--container-editorial);
	margin-inline: auto;
	padding-inline: var(--gutter-page);
}

.bv-amp-masthead__bar {
	border-bottom: 1px solid var(--border-inverse);
}

.bv-amp-masthead__barinner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding-block: var(--space-5);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	color: var(--text-inverse-muted);
}

.bv-amp-masthead__home {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	color: var(--text-inverse-muted);
	text-decoration: none;
}

.bv-amp-masthead__home:hover {
	color: var(--text-inverse);
}

.bv-amp-masthead__mark {
	flex: none;
	height: 26px;
	aspect-ratio: 152 / 175;
	background: url("../img/logo-mark.png") no-repeat center / contain;
}

.bv-amp-masthead__date {
	margin-left: auto;
	font-family: var(--font-mono);
}

.bv-amp-masthead__subscribe {
	padding: var(--space-3) var(--space-5);
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: var(--radius-xs);
	color: var(--text-inverse);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.bv-amp-masthead__subscribe:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.72);
	color: var(--text-inverse);
	text-decoration: none;
}

.bv-amp-masthead__brand {
	padding-block: var(--space-10) var(--space-8);
	text-align: center;
}

.bv-amp-masthead__rules {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

/* The three rules run red, green, blue, left to right — spec §2. That order is
   decorative and fixed, and is deliberately NOT the desk colour order, so these
   carry their own classes and read the desk tokens directly. Reusing
   .is-desk-* here would have coupled a decorative flourish to semantic colour
   coding, and inside .bv-amp-masthead it would also have picked up the on-navy
   substitutes rather than the desk colours §2 names. They are aria-hidden and
   purely ornamental, so 1.4.11 does not apply. */
.bv-amp-masthead__rules span {
	width: 44px;
	height: 3px;
}

.bv-amp-masthead__rules .is-rule-power {
	background: var(--amp-power);
}

.bv-amp-masthead__rules .is-rule-money {
	background: var(--amp-money);
}

.bv-amp-masthead__rules .is-rule-ai {
	background: var(--amp-ai);
}

.bv-amp-masthead__wordmark {
	margin: var(--space-5) 0 0;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: 84px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--text-inverse);
}

.bv-amp-masthead__wordmark a {
	color: inherit;
	text-decoration: none;
}

.bv-amp-masthead__desks {
	margin: var(--space-5) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bv-blue-300);
}

.bv-amp-masthead__standfirst {
	margin: var(--space-6) auto 0;
	max-width: 56ch;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.55;
	color: #c6d5e6;
}

.bv-amp-masthead__filter {
	border-top: 1px solid var(--border-inverse);
}

.bv-amp-masthead__filterinner {
	display: flex;
	align-items: center;
	gap: var(--space-7);
	flex-wrap: wrap;
	padding-block: var(--space-5);
}

.bv-amp-masthead__cadence {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--text-inverse-muted);
}

/* Compact: the article and archive states. */
.bv-amp-masthead.is-compact .bv-amp-masthead__brand,
.bv-amp-masthead.is-article .bv-amp-masthead__brand {
	padding-block: var(--space-7);
}

.bv-amp-masthead.is-compact .bv-amp-masthead__wordmark,
.bv-amp-masthead.is-article .bv-amp-masthead__wordmark {
	font-size: 54px;
}

.bv-amp-masthead.is-compact .bv-amp-masthead__standfirst,
.bv-amp-masthead.is-article .bv-amp-masthead__standfirst {
	display: none;
}

.bv-amp-masthead.is-article .bv-amp-masthead__filter {
	display: none;
}

/* ---- Desk filter pills ---- */

.bv-amp-desknav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.bv-amp-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bv-desk, var(--text-inverse-muted));
	transition: var(--transition-color);
}

.bv-amp-pill:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--bv-desk, var(--text-inverse));
	text-decoration: none;
}

.bv-amp-pill.is-current {
	background: var(--bv-desk, var(--text-inverse-muted));
	border-color: var(--bv-desk, var(--text-inverse-muted));
	color: var(--bv-navy-900);
}

.bv-amp-pill.is-all.is-current {
	background: var(--text-inverse);
	border-color: var(--text-inverse);
}

/* ---- Shared editorial furniture ---- */

.bv-amp-main {
	background: var(--surface-card);
}

.bv-amp-kicker {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 3px solid var(--bv-desk, var(--rule-editorial));
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--bv-desk, var(--text-secondary));
}

.bv-amp-byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.bv-amp-byline__author {
	font-weight: var(--weight-semibold);
	color: var(--text-secondary);
}

.bv-amp-byline__sep {
	font-family: var(--font-mono);
	color: var(--text-faint);
}

.bv-amp-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.bv-amp-crumbs a {
	color: var(--text-secondary);
	text-decoration: none;
}

.bv-amp-crumbs a:hover {
	text-decoration: underline;
}

.bv-amp-crumbs span[aria-hidden] {
	color: var(--text-faint);
}

.bv-amp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-8);
}

.bv-amp-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-xs);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
}

.bv-amp-badge.is-kind {
	background: var(--status-info-soft);
	color: var(--bv-blue-700);
}

.bv-amp-badge.is-draft {
	background: var(--surface-sunken);
	color: var(--text-secondary);
	border: 1px dashed var(--border-strong);
}

.bv-amp-badge.is-published {
	background: var(--status-positive-soft);
	color: #2f6b1a;
}

.bv-amp-title {
	margin: var(--space-5) 0 0;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-display);
}

.bv-amp-title.is-brief {
	font-size: var(--wp--preset--font-size--h-1);
}

.bv-amp-standing {
	margin: var(--space-5) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

/* §4: the deck is 23px — the h-3 preset, which tops out there. */
.bv-amp-standfirst {
	margin: var(--space-4) 0 0;
	max-width: 54ch;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.55;
	color: var(--text-secondary);
}

/* The rule closes the article head, so it ends where the reading column ends.
   It used to span the full article column while the copy below it stopped at
   the measure, which put a 25px overhang on the one element in the head with a
   hard right edge.
   The reference render cannot settle this — it has no measure at all, its main
   is the 720px column and everything spans it — and neither spec says how wide
   the rule is. The measure is what the reader sees as the column, so the rule
   follows it. Capping can never widen it: where the measure exceeds the
   column, as 66ch does on the weekly, the column still wins. */
.bv-amp-rule {
	height: 0;
	max-width: var(--bv-measure);
	margin: var(--space-7) 0;
	border: 0;
	border-top: 2px solid var(--rule-editorial);
}

/* ---- Stat strip ---- */

.bv-amp-stats {
	display: flex;
	gap: var(--space-8);
	margin: var(--space-9) 0;
	padding: var(--space-7) 0;
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}

.bv-amp-stat {
	flex: 1;
	min-width: 0;
	padding-top: var(--space-4);
	border-top: 3px solid var(--bv-desk, var(--rule-editorial));
}

.bv-amp-stat__value {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 34px;
	font-weight: var(--weight-semibold);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--bv-desk, var(--text-primary));
}

.bv-amp-stat__unit {
	margin-left: 4px;
	font-size: 20px;
	font-weight: var(--weight-medium);
}

.bv-amp-stat__label {
	margin: var(--space-4) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.bv-amp-stat__note {
	margin: var(--space-2) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	line-height: 1.45;
	color: var(--text-muted);
}

/* ---- Sources ---- */

.bv-amp-sources {
	margin-top: var(--space-11);
	padding-top: var(--space-4);
	border-top: 2px solid var(--rule-editorial);
}

.bv-amp-sources__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.bv-amp-sources__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bv-amp-source {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border-hairline);
}

.bv-amp-source:last-child {
	border-bottom: 0;
}

/* SourceCite.jsx uses --text-faint, which is 2.52:1 on white. These numbers
   key the citations — 7.3 calls them numbered sources — so they are content,
   not decoration. --amp-cite-number carries that distinction. 4.89:1. */
.bv-amp-source__num {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--amp-cite-number);
}

.bv-amp-source__body {
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	line-height: 1.5;
}

.bv-amp-source__pub {
	color: var(--text-muted);
}

.bv-amp-source__date {
	font-family: var(--font-mono);
	color: var(--text-muted);
}

.bv-amp-sources__empty {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}

/* ---- What AMP is watching ---- */

.bv-amp-watching {
	margin-top: var(--space-9);
	padding-top: var(--space-5);
	border-top: 3px solid var(--amp-power);
}

.bv-amp-watching__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--amp-power);
}

/* The title is a paragraph too, so it has to be excluded rather than
   out-ranked. */
/* The watchlist is a desk-coloured tick list — one item per line, the desk
   carried by a 2px rule at the start rather than a bullet. Items with no desk
   keep the rule in the hairline colour, so an untagged item reads as
   deliberately plain rather than broken. */
.bv-amp-watchlist {
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.bv-amp-watchlist__item {
	position: relative;
	padding: 0 0 0 var(--space-6);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-body);
	color: var(--text-secondary);
}

.bv-amp-watchlist__item + .bv-amp-watchlist__item {
	margin-top: var(--space-5);
}

.bv-amp-watchlist__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 12px;
	height: 2px;
	background: var(--bv-desk, var(--border-hairline));
}

.bv-amp-watchlist.is-rail .bv-amp-watchlist__item {
	font-size: var(--wp--preset--font-size--body-sm);
}

.bv-amp-watching p:not(.bv-amp-watching__title) {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-body);
}

/* ---- Article body: the measure and the reading face ---- */

/* The grid sits on the <main> group itself. It used to be a plain <div> inside
   that group, which core/group's save() cannot reproduce — the only block in
   the theme the editor's validator rejected.
   Being a block now means core's flow-layout classes land on the grid
   container. blockGap is 0 on this group so the emitted margins resolve to
   zero, but the reset is written out rather than relied on: a layout change
   upstream should not be able to open gaps between the article and the rail. */
.bv-amp-weekly > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.bv-amp-weekly {
	display: grid;
	grid-template-columns: minmax(0, var(--container-text)) 292px;
	gap: var(--space-10);
	align-items: start;
	max-width: var(--container-editorial);
	margin-inline: auto;
	padding: var(--space-9) var(--gutter-page) 0;
}

.bv-amp-article.is-measure {
	max-width: var(--container-text);
	margin-inline: auto;
	padding: var(--space-9) var(--gutter-page) 0;
}

/* 7.3: 720px measure, body-lg Newsreader at 1.62.
 *
 * Wrapped in :where() so it carries zero specificity. It is a default for
 * running copy, and the article is full of furniture that is also made of
 * paragraphs — kickers, the byline, the standing line, section titles. Without
 * this, `.bv-amp-article p` (one class, one element) silently out-ranked every
 * single-class furniture rule and flattened all of them into body copy. */
:where(.bv-amp-article p, .bv-amp-article li) {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--leading-body);
	color: var(--text-primary);
}

/* §4 and §8 rule 5: body copy never runs wider than 66ch, and the Briefing
   variant is tighter still at 58ch. Scoped to the direct children of the body
   so pull quotes, stat strips and the numbered sources keep their own widths —
   a measure is for running text, not for every element inside the article. */
.bv-amp-article {
	--bv-measure: 66ch;
}

.bv-amp-article.is-brief {
	--bv-measure: 58ch;
}

:where(.bv-amp-article > .wp-block-post-content > p),
:where(.bv-amp-article > .wp-block-post-content > ul),
:where(.bv-amp-article > .wp-block-post-content > ol) {
	max-width: var(--bv-measure);
}

:where(.bv-amp-article > .wp-block-post-content > p) {
	margin: var(--space-6) 0 0;
}

:where(.bv-amp-article h2) {
	margin: var(--space-10) 0 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: var(--weight-semibold);
}

:where(.bv-amp-article h3) {
	margin: var(--space-5) 0 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: var(--weight-semibold);
}

/* Desk sections in the brief. */
.bv-amp-section {
	margin-top: var(--space-10);
}

.bv-amp-section > .bv-amp-kicker {
	margin-bottom: var(--space-5);
}

.bv-amp-section h2 {
	margin-top: 0;
}

.bv-amp-section p {
	margin-top: var(--space-6);
}

/* Pull quote. Core's default gives it 4px rules top and bottom; the design
   system's is a left rule in the desk colour and nothing else. */
.bv-amp-article .wp-block-pullquote,
.bv-amp-article .wp-block-pullquote[class*="is-style-amp-"] {
	margin: var(--space-9) 0;
	padding: 0 0 0 var(--space-7);
	border: 0;
	border-left: 3px solid var(--bv-desk, var(--rule-editorial));
	text-align: left;
	background: none;
	color: inherit;
}

.wp-block-pullquote.is-desk-power {
	--bv-desk: var(--amp-power);
}

/* §4: pull quotes are 30px — the h-2 preset. The maximum of two per article
   is an authoring rule; nothing here can enforce a count. */
.bv-amp-article .wp-block-pullquote blockquote,
.bv-amp-article .wp-block-pullquote p {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: var(--weight-medium);
	line-height: 1.38;
	letter-spacing: var(--tracking-heading);
	color: var(--text-primary);
}

/* The navy Bottom Line band and the equation band. Authored inline in the
   fixture content; registering them as the amp/bottom-line and amp/stat-strip
   patterns from 7.1 is the remaining piece of the editorial furniture. */
.bv-amp-bottomline,
.bv-amp-equation {
	margin: var(--space-11) 0 0;
	padding: var(--space-9);
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.bv-amp-equation {
	margin: var(--space-9) 0;
	text-align: center;
}

.bv-amp-bottomline .bv-amp-bottomline__eyebrow,
.bv-amp-equation .bv-amp-equation__eyebrow {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--bv-blue-300);
}

.bv-amp-bottomline .bv-amp-bottomline__lead {
	margin: var(--space-5) 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.45;
	color: var(--text-inverse);
}

.bv-amp-equation .bv-amp-equation__text {
	margin: var(--space-5) 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: var(--weight-semibold);
	line-height: 1.35;
	color: var(--text-inverse);
}

.bv-amp-phases {
	list-style: none;
	margin: var(--space-7) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.bv-amp-phase {
	padding-top: var(--space-4);
	border-top: 2px solid var(--border-inverse);
}

.bv-amp-phase.is-current {
	border-top-color: var(--bv-blue-300);
}

.bv-amp-phase__num {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--text-inverse-muted);
}

.bv-amp-phase.is-current .bv-amp-phase__num {
	color: var(--bv-blue-300);
}

.bv-amp-phase__text {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--text-inverse-muted);
}

.bv-amp-phase.is-current .bv-amp-phase__text {
	color: var(--text-inverse);
}

.bv-amp-bottomline .bv-amp-bottomline__close {
	margin: var(--space-7) 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: #c6d5e6;
}

/* The bands sit inside the article body, whose paragraph rule is more
   specific than a lone class. Everything in them inherits the inverse ink. */
.bv-amp-bottomline p,
.bv-amp-bottomline li,
.bv-amp-equation p {
	color: inherit;
}

/* ---- Rail ---- */

.bv-amp-rail {
	border-left: 1px solid var(--border-hairline);
	padding-left: var(--space-8);
}

.bv-amp-rail__title {
	margin: 0 0 var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--rule-editorial);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.bv-amp-rail__title.is-spaced {
	margin-top: var(--space-9);
}

.bv-amp-rail__body {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
	color: var(--text-secondary);
}

.bv-amp-contents {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bv-amp-contents__item {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0;
}

.bv-amp-contents__num {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--amp-cite-number);
}

.bv-amp-contents__item a {
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	line-height: 1.45;
	color: var(--text-secondary);
	text-decoration: none;
}

.bv-amp-contents__item a:hover {
	color: var(--text-link);
	text-decoration: underline;
}

.bv-amp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.bv-amp-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-4);
	border: 1px solid var(--bv-desk, var(--border-subtle));
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	line-height: 1.7;
	text-decoration: none;
	color: var(--bv-desk, var(--text-secondary));
}

.bv-amp-tag.is-filled {
	background: var(--bv-desk);
	border-color: var(--bv-desk);
	color: var(--neutral-000);
}

.bv-amp-tag:hover {
	text-decoration: none;
	background: var(--surface-sunken);
}

.bv-amp-tag.is-filled:hover {
	background: var(--bv-desk);
}

.bv-amp-railcard {
	margin-top: var(--space-9);
	padding: var(--space-6);
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
}

.bv-amp-railcard__title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-amp-railcard__title.is-power {
	color: var(--amp-power);
}

.bv-amp-railcard__body {
	margin: var(--space-4) 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
	color: var(--text-secondary);
}

/* ---- Index ---- */

.bv-amp-index {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 292px;
	gap: var(--space-10);
	align-items: start;
	max-width: var(--container-editorial);
	margin-inline: auto;
	padding: var(--space-10) var(--gutter-page) var(--space-12);
}

.bv-amp-lead {
	border-bottom: 2px solid var(--rule-editorial);
}

.bv-amp-card {
	display: flex;
	gap: var(--space-8);
	align-items: flex-start;
	padding: var(--space-7) 0;
	border-bottom: 1px solid var(--border-hairline);
	text-decoration: none;
	color: inherit;
}

.bv-amp-card.is-lg {
	padding-top: 0;
	border-bottom: 0;
}

.bv-amp-card__kicker {
	flex: 0 0 132px;
}

.bv-amp-card__body {
	flex: 1;
	min-width: 0;
}

.bv-amp-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-heading);
	line-height: var(--leading-heading);
	color: var(--text-primary);
}

.bv-amp-card.is-lg .bv-amp-card__title {
	font-size: var(--wp--preset--font-size--h-1);
}

.bv-amp-card:hover .bv-amp-card__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.bv-amp-card__standfirst {
	margin: var(--space-4) 0 0;
	max-width: 56ch;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--text-secondary);
}

.bv-amp-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-7);
	margin: var(--space-10) 0 var(--space-7);
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--rule-editorial);
}

.bv-amp-sectionhead__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-amp-sectionhead__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: var(--weight-semibold);
}

.bv-amp-sectionhead__count {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.bv-amp-more,
.bv-amp-empty {
	margin: var(--space-9) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
}

.bv-amp-empty {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--text-muted);
}

/* ---- Archive ---- */

.bv-amp-archive {
	max-width: var(--container-editorial);
	margin-inline: auto;
	padding: var(--space-10) var(--gutter-page) var(--space-12);
}

.bv-amp-monthrule {
	margin: var(--space-9) 0 0;
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--border-hairline);
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-amp-pager {
	margin-top: var(--space-9);
}

.bv-amp-pager .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
}

.bv-amp-pager a,
.bv-amp-pager span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--space-5);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	text-decoration: none;
	color: var(--text-secondary);
}

.bv-amp-pager .current {
	background: var(--surface-inverse);
	border-color: var(--surface-inverse);
	color: var(--text-inverse);
}

/* ---- Buttons ---- */

.bv-amp-endnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-10);
	padding-top: var(--space-7);
	border-top: 1px solid var(--border-hairline);
}

.bv-amp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 11px var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-xs);
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.bv-amp-btn.is-editorial {
	background: var(--neutral-900);
	border-color: var(--neutral-900);
	color: var(--text-inverse);
}

.bv-amp-btn.is-editorial:hover {
	background: var(--neutral-800);
	border-color: var(--neutral-800);
	color: var(--text-inverse);
	text-decoration: none;
}

.bv-amp-btn.is-secondary {
	background: var(--surface-card);
	border-color: var(--border-strong);
	color: var(--text-primary);
}

.bv-amp-btn.is-secondary:hover {
	background: var(--neutral-050);
	color: var(--text-primary);
	text-decoration: none;
}

.bv-amp-btn.is-full {
	width: 100%;
}

/* ---- Narrow ---- */

@media (max-width: 899px) {
	.bv-amp-index,
	.bv-amp-weekly {
		grid-template-columns: 1fr;
		gap: var(--space-9);
	}

	.bv-amp-rail {
		border-left: 0;
		border-top: 1px solid var(--border-hairline);
		padding-left: 0;
		padding-top: var(--space-8);
	}

	.bv-amp-masthead__wordmark {
		font-size: 54px;
	}

	.bv-amp-masthead__brand {
		padding-block: var(--space-8) var(--space-7);
	}

	.bv-amp-masthead__barinner {
		flex-wrap: wrap;
		gap: var(--space-4);
	}

	.bv-amp-masthead__date {
		margin-left: 0;
		order: 3;
		width: 100%;
	}

	.bv-amp-masthead__subscribe {
		margin-left: auto;
	}

	.bv-amp-masthead__cadence {
		margin-left: 0;
		width: 100%;
	}

	.bv-amp-stats {
		flex-direction: column;
		gap: var(--space-7);
	}

	.bv-amp-card {
		flex-direction: column;
		gap: var(--space-5);
	}

	.bv-amp-card__kicker {
		flex: none;
	}

	.bv-amp-phases {
		grid-template-columns: 1fr;
	}

	.bv-amp-bottomline,
	.bv-amp-equation {
		padding: var(--space-7);
	}
}

/* The draft notice bar — spec §7. Sits above the masthead, full bleed, and is
   meant to be impossible to miss or to mistake for decoration. Red is
   --amp-power, which is the Power desk's colour everywhere else; here it is
   the one place the palette is used as an alarm rather than as a code, and it
   only ever appears on an unapproved post. */
.bv-amp-draftbar {
	background: var(--amp-power);
	color: var(--text-inverse);
}

.bv-amp-draftbar__inner {
	display: block;
	max-width: var(--container-editorial);
	margin-inline: auto;
	padding: var(--space-5) var(--gutter-page);
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.01em;
}

/* ---- §5: the 16:9 box ----
   Structural: it never collapses and it is never filled with stock imagery.
   Either a real photograph with a caption, or a typographic plate. */
.bv-amp-figure {
	margin: var(--space-8) 0 0;
}

.bv-amp-figure__img,
.bv-amp-plate {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-xs);
}

.bv-amp-figure__img {
	height: auto;
	object-fit: cover;
}

.bv-amp-figure__caption {
	margin: var(--space-4) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	line-height: var(--leading-body);
	color: var(--text-muted);
}

/* An absent caption or a derived plate is marked, not hidden — the point is
   that an editor cannot miss it. */
.bv-amp-figure__caption.is-marker {
	color: var(--amp-power);
}

/* The plate. Flat navy, the desk name, and the figure or headline fragment.
   No image, no gradient, no icon, no texture — §5 is explicit. */
.bv-amp-plate {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-5);
	padding: var(--space-9);
	background: var(--bv-navy-800);
}

.bv-amp-plate__desk {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--bv-desk, var(--text-inverse-muted));
}

.bv-amp-plate__line {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-l);
	font-weight: var(--weight-bold);
	line-height: 1.08;
	letter-spacing: var(--tracking-display);
	color: var(--text-inverse);
	text-wrap: balance;
}

/* On navy the desk colours take the cube's face tones, exactly as the masthead
   and the bottom-line panel already do. */
.bv-amp-plate.is-desk-ai {
	--bv-desk: var(--bv-blue-300);
}

.bv-amp-plate.is-desk-money {
	--bv-desk: var(--bv-green-500);
}

.bv-amp-plate.is-desk-power {
	--bv-desk: var(--bv-red-500);
}

.bv-amp-plate.is-desk-government {
	--bv-desk: var(--amp-government-on-dark);
}

/* ---- §4 additions: takeaways, research-packet line, author, keep reading ---- */

/* The takeaways box leads a brief and sits above the first paragraph of a
   weekly. Hairline box on the sunken ground, not a card — it is part of the
   article, not an aside floating beside it. */
/* The measure is in `ch`, and `ch` is the width of a "0" in *this element's*
   font at *this element's* size. The body text resolves 58ch in Newsreader at
   body-lg; this box inherited Public Sans at body and resolved the same 58ch
   into a visibly narrower width, so its right edge stopped short of where the
   paragraphs wrapped. The font context is set to match the running text it has
   to line up with — the title and the list items set their own faces, so
   nothing about the box's appearance changes. */
.bv-amp-takeaways {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	max-width: var(--bv-measure);
	/* Space below has to be stated, not inherited from what follows. The box
	   sits before the post content, and the first heading inside that content
	   has its top margin zeroed by core's `is-layout-flow > :first-child` rule —
	   so the heading arrives flush against the box however much margin it
	   declares for itself. Matching the space above. */
	margin: var(--space-8) 0 var(--space-8);
	padding: var(--space-7);
	background: var(--surface-sunken);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
}

.bv-amp-takeaways__title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-amp-takeaways ul {
	margin: var(--space-5) 0 0;
	padding: 0 0 0 var(--space-6);
}

.bv-amp-takeaways li {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-body);
	color: var(--text-primary);
}

.bv-amp-takeaways li + li {
	margin-top: var(--space-4);
}

/* §4: replaces the whole numbered list when a post declares it does not print
   its sources. One mono line, in the register of a filing note. */
.bv-amp-sources__packet {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}

/* Same font-relative measure as the takeaways box. */
.bv-amp-author {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	max-width: var(--bv-measure);
	margin: var(--space-10) 0 0;
	padding: var(--space-7) 0 0;
	border-top: 2px solid var(--text-primary);
}

.bv-amp-author__label {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-amp-author__name {
	margin: var(--space-4) 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}

.bv-amp-author__bio {
	margin: var(--space-3) 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--leading-body);
	color: var(--text-secondary);
}

/* Two links, side by side, wrapping to one column when they cannot both fit.
   auto-fit with a min() floor so the step down needs no media query. */
.bv-amp-keepreading {
	margin: var(--space-10) 0 0;
}

.bv-amp-keepreading__title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.bv-amp-keepreading ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--space-7);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.bv-amp-keepreading__item a {
	display: block;
	padding: var(--space-6) 0 0;
	border-top: 3px solid var(--bv-desk, var(--border-hairline));
	text-decoration: none;
}

.bv-amp-keepreading__kicker {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--bv-desk, var(--text-muted));
}

.bv-amp-keepreading__headline {
	display: block;
	margin: var(--space-3) 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-heading);
	color: var(--text-primary);
}

.bv-amp-keepreading__item a:hover .bv-amp-keepreading__headline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
   7a. Legal documents — privacy policy, terms of service
   ============================================================ */

/* Long legal text set in the site's own type rather than as a pasted document.
   The page template already constrains the column to --container-text, so this
   is rhythm and hierarchy: something a person can actually find a clause in.

   Paragraphs carry their own spacing because the global default is
   `p { margin: 0 }` and a legal document without paragraph rhythm is a wall. */
.bv-legal {
	font-family: var(--font-ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-body);
	color: var(--text-primary);
}

.bv-legal p {
	margin: var(--space-6) 0 0;
}

.bv-legal h2 {
	margin: var(--space-11) 0 0;
	font-size: var(--wp--preset--font-size--h-3);
	color: var(--text-primary);
}

/* The first section heading follows the preamble, not another section. */
.bv-legal h2:first-of-type {
	margin-top: var(--space-10);
}

.bv-legal h3 {
	margin: var(--space-8) 0 0;
	font-size: var(--wp--preset--font-size--h-4);
	color: var(--text-primary);
}

.bv-legal ul {
	margin: var(--space-5) 0 0;
	padding-inline-start: var(--space-7);
}

.bv-legal li {
	margin-top: var(--space-3);
}

.bv-legal li::marker {
	color: var(--text-muted);
}

.bv-legal strong {
	font-weight: var(--weight-semibold);
}

/* The organisation line and the revision date sit above the preamble as a
   masthead, not as body copy. */
.bv-legal__org {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-semibold);
	color: var(--text-secondary);
}

.bv-legal__updated {
	margin: var(--space-3) 0 var(--space-8);
	padding-bottom: var(--space-7);
	border-bottom: 2px solid var(--rule-editorial);
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.bv-legal__contact {
	margin: var(--space-6) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-body-sm);
	line-height: 1.9;
	color: var(--text-secondary);
}

/* ============================================================
   7b. AMP² promo band on the home page
   ============================================================ */

/* The one dark band on the home page, which is what makes it read as a
   different property rather than another section of the marketing site. The
   masthead's own language: the same three rules in the same fixed decorative
   order, the same wordmark, the same standing subhead. */
.bv-amp-promo {
	background: var(--surface-inverse);
	border-top: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
}

.bv-amp-promo__inner {
	max-width: var(--container-editorial);
	margin-inline: auto;
	padding: var(--space-12) var(--gutter-page);
	text-align: center;
}

.bv-amp-promo__rules {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.bv-amp-promo__rules span {
	width: 44px;
	height: 3px;
}

/* Decorative order — power, money, ai — and not the desk order. Same reasoning
   as the masthead: these carry their own classes so a flourish is never
   coupled to semantic colour coding. */
.bv-amp-promo__rules .is-rule-power {
	background: var(--amp-power);
}

.bv-amp-promo__rules .is-rule-money {
	background: var(--amp-money);
}

.bv-amp-promo__rules .is-rule-ai {
	background: var(--bv-blue-300);
}

.bv-amp-promo__wordmark {
	margin: var(--space-6) 0 0;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--wp--preset--font-size--display-xl);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--text-inverse);
}

.bv-amp-promo__desks {
	margin: var(--space-5) 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--text-inverse-muted);
}

.bv-amp-promo__standfirst {
	max-width: 54ch;
	margin: var(--space-6) auto 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.55;
	color: var(--text-inverse-muted);
}

/* What it covers. The desk colours on navy are the cube's own face tones — the
   print desk colours fail contrast here, which the masthead established. */
.bv-amp-promo__coverage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin: var(--space-8) 0 0;
	padding: 0;
	list-style: none;
}

.bv-amp-promo__pill {
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--bv-desk, var(--text-inverse-muted));
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--bv-desk, var(--text-inverse));
}

.bv-amp-promo__pill.is-desk-ai {
	--bv-desk: var(--bv-blue-300);
}

.bv-amp-promo__pill.is-desk-money {
	--bv-desk: var(--bv-green-500);
}

.bv-amp-promo__pill.is-desk-power {
	--bv-desk: var(--bv-red-500);
}

.bv-amp-promo__pill.is-desk-government {
	--bv-desk: var(--amp-government-on-dark);
}

.bv-amp-promo__cadence {
	margin: var(--space-8) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-body-sm);
	color: var(--text-inverse-muted);
}

.bv-amp-promo__cta {
	margin: var(--space-8) 0 0;
}

/* The band's CTA takes the design system's inverse treatment.
 *
 * .is-editorial fills with --neutral-900, which is right on the light
 * editorial pages it was built for and all but invisible here: near-black on
 * navy measures 1.02:1, so the button had no visible shape at all. The label
 * was never the problem — it was 18:1 on that fill — which is why it read as
 * flat text rather than a control.
 *
 * Same values as .bv-btn.is-style-inverse on the hero, so the two on-navy
 * buttons match. Measured on --surface-inverse: label 18.45:1 against a 4.5
 * floor, border 4.07:1 against the 3.0 that 1.4.11 asks of a control's
 * boundary, and the label still clears 14:1 over the hover fill.
 *
 * Scoped to the band rather than changing the pattern's class, so the fix is
 * pure CSS and needs no page content rebuilt. */
.bv-amp-promo .bv-amp-btn.is-editorial {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.42);
	color: var(--text-inverse);
}

.bv-amp-promo .bv-amp-btn.is-editorial:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.72);
	color: var(--text-inverse);
}

@media (max-width: 899px) {
	.bv-amp-promo__inner {
		padding: var(--space-10) var(--gutter-page);
	}
}

/* ============================================================
   9. Fluent Forms — pull the plugin onto the design tokens
   ============================================================ */

/* Fluent Forms ships its own palette, radii and control sizing. These rules
 * put its fields, labels and submit button on the same tokens as .bv-form, so
 * the contact form matches the rest of the site rather than the plugin's
 * defaults — a lighter blue and a rounder button than the design system uses.
 *
 * Scoped to the plugin's own wrapper rather than to .bv-formcard, so it holds
 * wherever a form is placed rather than only inside the contact card.
 *
 * NOT VERIFIED AGAINST A RENDERED FORM. Fluent Forms is not installed on the
 * development install, so these selectors follow the plugin's documented
 * markup rather than markup that was inspected. If any of the plugin's own
 * rules still win, raise these by prefixing `.fluentform_wrapper ` rather than
 * reaching for !important — Fluent Forms also emits per-form inline CSS from
 * its style settings, and that will beat a stylesheet whatever the
 * specificity. Turn the form's own styler off rather than fight it.
 */

.fluentform .ff-el-group {
	margin-bottom: var(--space-6);
}

.fluentform .ff-el-input--label label {
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
	color: var(--text-primary);
}

/* Brand blue, not red — red is the AMP Power desk (Amendment Q). */
.fluentform .ff-el-is-required.asterisk,
.fluentform .ff-el-input--label label .ff-el-is-required {
	color: var(--accent-primary);
}

.fluentform .ff-el-form-control,
.fluentform input[type="text"].ff-el-form-control,
.fluentform input[type="email"].ff-el-form-control,
.fluentform input[type="tel"].ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control {
	width: 100%;
	min-height: 44px;
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-normal);
	color: var(--text-primary);
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-xs);
	box-shadow: none;
	transition: var(--transition-color);
}

.fluentform .ff-el-form-control:hover {
	border-color: var(--neutral-700);
}

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
	border-color: var(--accent-primary);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: none;
}

.fluentform textarea.ff-el-form-control {
	min-height: 0;
	resize: vertical;
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

/* Matches .bv-form__submit exactly. */
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform .ff-el-group.ff-text-left button.ff-btn-submit {
	width: 100%;
	min-height: 48px;
	padding: var(--space-4) var(--space-7);
	font-family: var(--font-ui);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: 0.005em;
	color: var(--text-inverse);
	background: var(--accent-primary);
	border: 1px solid var(--accent-primary);
	border-radius: var(--radius-xs);
	box-shadow: none;
	cursor: pointer;
	transition: var(--transition-color);
}

.fluentform .ff-btn-submit:hover {
	background: var(--accent-primary-hover);
	border-color: var(--accent-primary-hover);
	color: var(--text-inverse);
}

.fluentform .ff-btn-submit:active {
	background: var(--accent-primary-active);
	border-color: var(--accent-primary-active);
}

.fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.fluentform .ff-btn-submit[disabled] {
	background: var(--surface-sunken);
	color: var(--text-muted);
	border-color: var(--border-subtle);
	cursor: not-allowed;
}

/* Validation and confirmation. Red here is --status-negative, which is the
   system's error tone; Amendment Q's rule is about spending the Power desk's
   red on decoration, not about error states. */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--status-negative);
}

.fluentform .error-text,
.fluentform .text-danger {
	margin-top: var(--space-3);
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	color: var(--status-negative);
}

.fluentform .ff-message-success,
.ff-message-success {
	padding: var(--space-6);
	font-family: var(--font-ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--leading-normal);
	color: var(--text-primary);
	background: var(--status-positive-soft);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
}