/* =========================================================
   Single Asset (homegrown) — layout for the vertical slice.
   Built entirely on the existing design tokens from style.css.
   ========================================================= */

.bv-slice {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.bv-slice__inner {
	width: min(1600px, 100vw);
	margin-inline: auto;
}

.bv-slice--read .bv-meta-row {
}
.bv-breadcrumbs {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
}

/* Breadcrumbs */
.bv-slice .bv-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	margin-bottom: clamp(1rem, 3vw, 2rem);
}
.bv-slice .bv-breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.bv-slice .bv-breadcrumbs a:hover {
	color: var(--color-accent);
}
.bv-slice .bv-breadcrumbs__sep {
	color: var(--color-border-strong);
}

/* Header */
.bv-slice__head {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.bv-slice__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--color-accent-strong);
}
.bv-slice__kicker-sep {
	color: var(--color-border-strong);
}
.bv-slice__title {
	font-family: var(--font-serif);
	/* 400, not 300: Lora's variable range starts at 400, so 300 asked the
	   browser to synthesise a weight the family does not contain. Harmless
	   while Lora was never downloaded; visible now that it is. */
	font-weight: 400;
	line-height: 1.1;
	font-size: var(--font-size-3xl);
	margin: 0;
	color: var(--color-text);
}

/* Two-column layout */
.bv-slice__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}
@media (max-width: 900px) {
	.bv-slice__layout {
		grid-template-columns: 1fr;
	}
	.bv-slice__side {
		order: -1;
	}
}

/* Video / poster */
.bv-slice__video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-shell-bg, #09090b);
	box-shadow:
		0 1px 3px rgba(9, 9, 11, 0.08),
		0 8px 24px rgba(9, 9, 11, 0.06);
}
.bv-slice__video :is(iframe, video, embed, object) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.bv-slice__poster img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
	box-shadow:
		0 1px 3px rgba(9, 9, 11, 0.08),
		0 8px 24px rgba(9, 9, 11, 0.06);
}

/* Description */
.bv-slice__desc {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 60ch;
}
.bv-slice__desc p {
	margin: 0;
}

/* Actions */
.bv-slice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.bv-slice__actions .bv-btn {
	display: inline-flex;
}
.bv-slice__actions .bv-copy-status {
	font-size: 0.75em;
	opacity: 0.85;
}

/* Keyword pills */
.bv-slice-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: var(--border-subtle);
}
.bv-slice-keywords .bv-badge {
	align-self: auto !important;
}

/* Related */
.bv-slice-related {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}
.bv-slice-section-title,
.bv-slice-related h2 {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.bv-slice-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 720px) {
	.bv-slice-related__grid {
		grid-template-columns: 1fr;
	}
}

.bv-slice-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--transition-fast),
		box-shadow var(--transition-fast);
}
.bv-slice-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(9, 9, 11, 0.08);
}
.bv-slice-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--color-bg-alt);
}
.bv-slice-card__body {
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem) var(--space-4, 1rem);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.bv-slice-card__kicker {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent-strong);
	font-weight: 600;
}
.bv-slice-card__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-md);
	line-height: 1.25;
	color: var(--color-text);
}

/* =========================================================
   Hub hero (single Brand / single Campaign)
   ========================================================= */
.bv-slice--hub {
	padding-top: 0;
}

.bv-hub-hero {
	position: relative;
	min-height: clamp(280px, 42vw, 460px);
	display: flex;
	align-items: flex-end;
	background-image: var(--bv-hero, none);
	background-size: cover;
	background-position: center;
	background-color: var(--color-shell-bg, #09090b);
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.bv-hub-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(9, 9, 11, 0.15) 0%,
		rgba(9, 9, 11, 0.35) 45%,
		rgba(9, 9, 11, 0.82) 100%
	);
}
.bv-hub-hero__inner {
	position: relative;
	z-index: 1;
	width: min(1200px, 92vw);
	padding-block: clamp(1.5rem, 4vw, 3rem);
	color: var(--color-text-inverse);
}
.bv-breadcrumbs--onhero {
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 1rem;
}
.bv-breadcrumbs--onhero a {
	color: rgba(255, 255, 255, 0.82);
}
.bv-breadcrumbs--onhero a:hover {
	color: var(--color-text-inverse);
}
.bv-breadcrumbs--onhero .bv-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.4);
}

.bv-hub-hero__kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--wp--preset--color--accent-on-dark);
}
.bv-hub-hero__title {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.05;
	font-size: var(--font-size-3xl);
	margin: 0;
	color: var(--color-text-inverse);
	max-width: 20ch;
}
.bv-hub-hero__tagline {
	margin: 0.75rem 0 0;
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.9);
	max-width: 46ch;
}
.bv-hub-status {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-text-inverse);
	text-transform: uppercase;
}
.bv-hub-status--active {
	background: var(--color-success, #16a34a);
}

.bv-hub-lede {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	line-height: 1.4;
	color: var(--color-text);
	max-width: 46ch;
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.bv-hub-layout {
	margin-top: 0;
}
.bv-slice--hub .bv-slice-related:first-of-type {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* =========================================================
   HUB REDESIGN (single Brand / single Campaign)
   Faithful to the Elementor layout, tightened.
   ========================================================= */
.bv-hub {
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
}
/* The distance from the content column's left edge to the viewport, named so a
   bleeding section can escape by exactly that much. .bv-hub__inner is
   min(1900px, 90vw) centred, so it is half of whatever is left over.

   overflow-x: clip, NOT hidden: hidden creates a scroll container and would
   break position: sticky on the rail. clip does not. It is here to absorb the
   scrollbar-width overshoot in 100vw, which is otherwise a horizontal
   scrollbar on every page carrying a bleeding section. */
.bv-hub {
	--bv-frame-pad: calc((100vw - min(1900px, 90vw)) / 2);
	overflow-x: clip;
}

.bv-hub__inner {
	width: min(1900px, 90vw);
	margin-inline: auto;
}

/* Full-bleed bands */
.bv-updatedbar,
.bv-hero,
.bv-taglineband {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Last-updated bar */
.bv-updatedbar {
	background: var(--color-surface);
	border-bottom: var(--border-subtle);
}
.bv-updatedbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 0.6rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.bv-updatedbar__name {
	font-weight: 700;
	color: var(--color-text);
}
.bv-updatedbar__date {
	color: var(--color-text-soft);
}

/* Hero */
.bv-hero {
	min-height: clamp(340px, 52vh, 560px);
	display: flex;
	/* stretch, not flex-end: the inner has to fill the hero's height for its
	   two groups to be pushed apart. Everything used to sit in one stack at
	   the bottom, so breadcrumbs and the logo were crowded against the title
	   rather than anchored to the top of the image. */
	align-items: stretch;
	background-image: var(--bv-hero, none);
	background-size: cover;
	background-position: center;
	background-color: var(--color-shell-bg, #09090b);
}
.bv-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(9, 9, 11, 0.05) 0%,
		rgba(9, 9, 11, 0.25) 40%,
		rgba(9, 9, 11, 0.86) 100%
	);
}
.bv-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(2rem, 5vw, 4rem);
	color: var(--color-text-inverse);

	/* Two groups, pushed to opposite ends of the image: breadcrumbs and logo
	   at the top, the eyebrow/title/buttons block at the bottom. The gap is a
	   floor for short heroes, where space-between has nothing to distribute. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(1.5rem, 5vh, 3.5rem);
}

.bv-hero__group {
	display: flex;
	flex-direction: column;
	/* The group is a column of block children; without this it would stretch
	   the logo to the full frame width. */
	align-items: flex-start;
	min-width: 0;
}

/* The last child of a group carries no trailing margin — the gap above owns
   the space between the two groups, so a stray margin-bottom would add to it
   unpredictably. */
.bv-hero__group > :last-child {
	margin-bottom: 0;
}
.bv-hero .bv-breadcrumbs {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1.25rem;
}
.bv-hero .bv-breadcrumbs a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}
.bv-hero .bv-breadcrumbs a:hover {
	color: var(--color-text-inverse);
}
.bv-hero .bv-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.38);
}
.bv-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--wp--preset--color--accent-on-dark);
}
.bv-hero__title {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.03;
	font-size: clamp(2.4rem, 5.5vw, 4rem);
	margin: 0;
	color: var(--color-text-inverse);
	max-width: 16ch;
	letter-spacing: -0.01em;
}
.bv-hero__tagline {
	margin: 1rem 0 0;
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.9);
	max-width: 42ch;
}
.bv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* Ghost button on hero */
.bv-btn.is-ghost .bv-btn__link {
	background: transparent;
	color: var(--color-text-inverse);
	border: 1px solid rgba(255, 255, 255, 0.45);
}
.bv-btn.is-ghost .bv-btn__link:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Centered tagline band */
.bv-taglineband {
	background: var(--color-surface);
	border-bottom: var(--border-subtle);
}
.bv-taglineband .bv-hub__inner {
	text-align: center;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.bv-taglineband__eyebrow {
	margin: 0 0 1rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: var(--color-accent-strong);
}
.bv-taglineband__text {
	margin: 0 auto;
	font-family: var(--font-serif);
	/* 400, not 300: Lora's variable range starts at 400, so 300 asked the
	   browser to synthesise a weight the family does not contain. Harmless
	   while Lora was never downloaded; visible now that it is. */
	font-weight: 400;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.2;
	color: var(--color-text);
	max-width: 960px;
}

/* Body + section rhythm */
.bv-hub__body {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.bv-block-section + .bv-block-section {
	margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.bv-hub__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 900px) {
	.bv-hub__cols {
		grid-template-columns: 1fr;
	}
}

/* Signature: section header with copper rule */
.bv-sec-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.bv-sec-title {
	position: relative;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 200;
	font-size: clamp(2.25rem, 2.4vw, 1.75rem);
	color: var(--color-text-muted);
	padding-bottom: 0.7rem;
}
.bv-sec-rule {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: var(--color-accent);
	border-radius: 2px;
}

/* Prose */
.bv-prose {
	font-family: var(--font-serif);
	font-size: var(--font-size-md);
	line-height: 1.7;
	color: var(--color-text-muted);
}
.bv-prose--lead {
	font-size: var(--font-size-md);
}
.bv-prose p {
	margin: 0 0 1em;
}
.bv-prose p:last-child {
	margin-bottom: 0;
}
.bv-prose :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.2em;
}
.bv-prose li {
	margin-bottom: 0.35em;
}

/* Detail panel */
.bv-detailpanel {
	background: var(--color-surface);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 2vw, 1.6rem);
	position: sticky;
	top: 1.5rem;
}
.bv-detailpanel .bv-sec-head {
	margin-bottom: 1rem;
}
.bv-detailpanel .bv-sec-title {
	font-size: var(--font-size-lg);
	padding-bottom: 0.55rem;
}
.bv-statusdot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--color-text-soft);
	margin-right: 0.45rem;
	vertical-align: middle;
}
.bv-statusdot--active {
	background: var(--color-success, #16a34a);
}

/* All-assets grid + card */

/* Featured callout */
.bv-featured {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	background: var(--color-surface);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 2rem;
	text-decoration: none;
	color: inherit;
	transition:
		box-shadow var(--transition-fast),
		border-color var(--transition-fast);
}
.bv-featured:hover {
	box-shadow: 0 10px 30px rgba(9, 9, 11, 0.1);
	border-color: var(--color-border-strong);
}
.bv-featured__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	background-size: cover;
	background-position: center;
	background-color: var(--color-bg-alt);
}
.bv-featured__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}
.bv-featured__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.bv-featured__pills .bv-badge {
	align-self: auto !important;
}
.bv-featured__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	line-height: 1.2;
	color: var(--color-text);
}
.bv-featured__cta {
	white-space: nowrap;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--color-accent);
}
@media (max-width: 560px) {
	.bv-featured {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.bv-featured__cta {
		justify-self: start;
	}
}

/* Campaigns & programs grid + card */
.bv-campaign-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 680px) {
	.bv-campaign-grid {
		grid-template-columns: 1fr;
	}
}
.bv-campaign-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--transition-fast),
		box-shadow var(--transition-fast),
		border-color var(--transition-fast);
}
.bv-campaign-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(9, 9, 11, 0.1);
	border-color: var(--color-border-strong);
}
.bv-campaign-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--color-bg-alt);
}
.bv-campaign-card__count {
	position: absolute;
	bottom: 0.6rem;
	left: 0.6rem;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(9, 9, 11, 0.72);
	color: var(--color-text-inverse);
}
.bv-campaign-card__body {
	padding: 1.1rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.bv-campaign-card__eyebrow {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--color-accent-strong);
}
.bv-campaign-card__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	line-height: 1.2;
	color: var(--color-text);
}
.bv-campaign-card__tagline {
	font-family: var(--font-serif);
	font-size: var(--font-size-sm);
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* =========================================================
   DASHBOARD HUB v2 — big hero + sticky rail + right content
   ========================================================= */
.bv-hero--tall {
	min-height: clamp(460px, 78vh, 760px);
}
.bv-hero--tall .bv-hero__title {
	font-size: clamp(2.8rem, 6.5vw, 4.8rem);
	letter-spacing: var(--track-display);
}

/* Dashboard grid */
.bv-dash {
	/* Named so .bv-blocks' alignfull can escape by exactly the rail plus the
	   gutter. The gap is fluid, so hardcoding the 274px it happens to be at
	   1280 would be right at one viewport and wrong at every other.
	   THE sidebar-width knob: change it here and the grid track, the
	   alignfull-escape math, and the mobile collapse all follow. */
	--bv-rail-w: 15vw;
	--bv-dash-gap: clamp(2rem, 5vw, 4.5rem);
	display: grid;
	grid-template-columns: var(--bv-rail-w) minmax(0, 1fr);
	gap: var(--bv-dash-gap);
	align-items: center;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.bv-dash__main {
	min-width: 0;
}
.bv-block-section {
	scroll-margin-top: 96px;
}
/* The slight side margin every section gets — EXCEPT full-width (bleed)
   sections, which are meant to run edge to edge. Bleed sections are excluded by
   :not(), so their frame-escape (assets/css/sections.css) is untouched. Tune
   the inset here; it's a margin, so a toned section's background insets with it
   — switch to padding-inline if you'd rather the background reach the column
   edge. */
.bv-block-section:not(.bv-sec--bleed) {
	margin-inline: var(--bv-section-inset, clamp(0.75rem, 2vw, 1.5rem));
}

/* The sidebar column. align-self: stretch makes it FULL HEIGHT on desktop, so
   the border/background below fills the whole column rather than just hugging
   the nav. The nav itself stays sticky inside it. This is the box to style —
   padding, background, border, radius all live here. */
.bv-dash__side {
	align-self: stretch;
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: var(--border-subtle);
}

/* Sticky nav, riding inside the full-height column. */
.bv-rail {
	position: sticky;
	top: 88px;
}
.bv-rail__updated {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: var(--border-subtle);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.bv-rail__updated-label {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-soft);
}
.bv-rail__updated-date {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	font-weight: 600;
}
.bv-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.bv-rail__link {
	position: relative;
	display: flex;
	align-items: center;
	/* Left padding is the marker gutter: the active dot sits in here, to the
	   left of the label. Widen it to push the dot further out. */
	padding: 0.5rem 0.1rem 0.5rem 1.15rem;
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-soft);
	transition: color var(--transition-fast);
}
.bv-rail__marker {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--transition-fast);
}
.bv-rail__link:hover {
	color: var(--color-text);
}
.bv-rail__link.is-active {
	color: var(--color-accent-strong);
}
.bv-rail__link.is-active .bv-rail__marker {
	opacity: 1;
}

/* The rail stops being a rail and becomes a horizontal chip bar.
   1000px, matching where the grid stacks — this block said 900px while the
   stacking rule below said 1000px, which left a 100px band where the rail was
   stacked above the content but still styled as a sticky vertical list.

   .bv-dash's own grid-template-columns is NOT here: an unconditional .bv-dash
   rule further down the file has the same specificity and wins on source
   order, so the collapse has to live after it. See the note there. */
@media (max-width: 1000px) {
	.bv-rail {
		position: static;
	}
	/* Stacked: the sidebar is a full-width chip bar, so its full-height column
	   border and gutter make no sense here. */
	.bv-dash__side {
		border-left: 0;
		padding-left: 0;
	}
	.bv-rail__updated {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
	.bv-rail__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.25rem;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
	}
	.bv-rail__link {
		border-left: 0;
		border-bottom: 2px solid transparent;
		padding: 0.4rem 0.2rem;
		margin: 0;
		white-space: nowrap;
	}
	.bv-rail__link.is-active {
		border-left: 0;
		border-bottom-color: var(--color-accent);
	}
	.bv-rail__marker {
		display: none;
	}
}

/* Sub-labels inside sections (BRAND DESCRIPTION / BRAND STORY) */
.bv-sublabel {
	margin: 0 0 0.6rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--color-text-soft);
}
.bv-sublabel--spaced {
	margin-top: 2rem;
}

/* Details as a two-column definition panel */
.bv-detailgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.bv-detailgrid .bv-meta-row {
	padding-block: 0.85rem;
}
@media (max-width: 560px) {
	.bv-detailgrid {
		grid-template-columns: 1fr;
	}
}

/* Brand colors palette */
.bv-palette-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.bv-swatch {
	background: var(--color-surface);
	border: var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.bv-swatch__chip {
	aspect-ratio: 5 / 2;
}
.bv-swatch__meta {
	padding: 1rem 1.1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.bv-swatch__name {
	font-family: var(--font-serif);
	font-size: var(--font-size-md);
	color: var(--color-text);
}
.bv-swatch__hex {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: var(--font-size-xs);
	letter-spacing: 0.04em;
	color: var(--color-text-soft);
	text-transform: uppercase;
}
.bv-swatch__actions {
	gap: 8px;
	align-items: flex-start;
	flex-direction: row;
	display: flex; /* Optional: add spacing between buttons */
}
.bv-copy-status:empty {
	display: none;
}
.bv-swatch__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	border: 1px solid var(--color-accent-border-soft);
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}
.bv-swatch__copy:hover {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	border-color: var(--color-accent);
}
.bv-swatch__copy .bv-copy-status {
	font-size: 0.9em;
}

/* Imagery gallery */
.bv-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
.bv-gallery__item {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}
.bv-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-med);
}
.bv-gallery__item:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.bv-gallery__item img,
	.bv-campaign-card {
		transition: none;
	}
}

/* =========================================================
   ASSET BROWSER (Assets browse page)
   ========================================================= */
.bv-browser__head {
background: linear-gradient(180deg,  #DFEDF1 0%, #EEF4F3 40%, var(--color-bg) 100%);
padding-block: clamp(1.75rem, 4vw, 3rem);
}
.bv-browser__head .bv-breadcrumbs {
	display: flex;
	gap: 0.4rem;
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	margin-bottom: 1rem;
}
.bv-browser__head .bv-breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.bv-browser__head .bv-breadcrumbs a:hover {
	color: var(--color-accent);
}
.bv-browser__head .bv-breadcrumbs__sep {
	color: var(--color-border-strong);
}
.bv-browser__title {
	font-family: var(--font-serif);
	/* 400, not 300: Lora's variable range starts at 400, so 300 asked the
	   browser to synthesise a weight the family does not contain. Harmless
	   while Lora was never downloaded; visible now that it is. */
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: var(--track-display);
	margin: 0;
	color: var(--color-text);
}
.bv-browser__lede {
	margin: 0.6rem 0 0;
	font-size: var(--font-size-md);
	color: var(--color-text-muted);
	max-width: 52ch;
}

.bv-browser__body {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.bv-browser__filters {
	position: sticky;
	top: 88px;
	align-self: start;
}
@media (max-width: 900px) {
	.bv-browser__body {
		grid-template-columns: 1fr;
	}
	.bv-browser__filters {
		position: static;
	}
}

.bv-browser__resultbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	padding-bottom: 0.85rem;
	border-bottom: var(--border-subtle);
}
.bv-browser__count {
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.bv-browser__empty {
	text-align: center;
	padding: clamp(2.5rem, 6vw, 5rem) 1rem;
	color: var(--color-text-muted);
}
.bv-browser__empty p {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	margin: 0 0 1rem;
}
.bv-browser__reset {
	display: inline-block;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}
.bv-browser__reset:hover {
	color: var(--color-accent-strong);
}

.bv-browser__pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}
.bv-browser__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.bv-browser__pagination a,
.bv-browser__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text-muted);
	background: var(--color-surface);
	transition:
		border-color var(--transition-fast),
		color var(--transition-fast);
}
.bv-browser__pagination a:hover {
	border-color: var(--color-accent-border);
	color: var(--color-accent-strong);
}
.bv-browser__pagination .current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-inverse);
}

/* Listing variants (brands/campaigns full-width, search) */
.bv-browser__body--full {
	grid-template-columns: 1fr;
}
.bv-browser__eyebrow {
	margin: 0 0 0.5rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--color-accent-strong);
}
.bv-brand-card__count {
	margin-top: 0.15rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	font-weight: 600;
}

/* =========================================================
   OVERLAY TILES (campaign / brand listings + Faces)
   ========================================================= */
.bv-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text-inverse);
	background: var(--color-shell-bg, #09090b);
	isolation: isolate;
}
.bv-tile__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* A neutral mid-dark ground under the lazy-loaded image. Without it the
	   media is transparent and the near-black .bv-tile shows through, so a tile
	   scrolled into view flashes solid black until its image decodes. A mid grey
	   reads as an intentional loading tile and softens the pop for images of any
	   tone. */
	background-color: var(--bv-slate-700);
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
	z-index: 0;
}
.bv-tile:hover .bv-tile__media {
	transform: scale(1.05);
}
.bv-tile__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(9, 9, 11, 0) 30%,
		rgba(9, 9, 11, 0.35) 62%,
		rgba(9, 9, 11, 0.86) 100%
	);
}
.bv-tile__badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 3;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
}
.bv-tile__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.1rem, 2vw, 1.6rem);
}
.bv-tile__eyebrow {
	order: -1;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
}
.bv-tile__eyebrow--sub {
	order: 1;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-family: var(--font-serif);
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.85);
}
.bv-tile__title {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.12;
	font-size: clamp(1.3rem, 2vw, 1.9rem);
	color: var(--color-text-inverse);
}
.bv-tile__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.15rem;
}
.bv-tile__pill {
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: rgba(9, 9, 11, 0.6);
	color: var(--color-text-inverse);
	backdrop-filter: blur(2px);
}
.bv-tile__pill--active {
	background: var(--color-success, #16a34a);
}

/* The contact sheet — a collection tile shows its members, not one of them.
   Cells are seamed panels of a single object: the gap is the tile's own
   ground showing through, so a cell with no image reads as a dark panel
   rather than a broken thumbnail. Layout is named per count because each
   places its cells explicitly; "2 or 3" as one rule leaves a pair with an
   empty quarter. .bv-tile__cell needs position:relative because
   .bv-tile__img is absolutely positioned (see the note in plate.css). */
.bv-tile__sheet {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	gap: 2px;
	background: var(--color-shell-bg, #09090b);
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bv-tile__cell {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-alt, #17171a);
	padding: var(--space-3;);
}
.bv-tile:hover .bv-tile__sheet {
	transform: scale(1.03);
}
.bv-tile__sheet--solo {
	grid-template-columns: 1fr;
}
.bv-tile__sheet--pair {
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr;
}
.bv-tile__sheet--lead {
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr 1fr;
}
.bv-tile__sheet--lead .bv-tile__cell:first-child {
	grid-row: span 2;
}
.bv-tile__sheet--quad {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
@media (prefers-reduced-motion: reduce) {
	.bv-tile__sheet {
		transition: none;
	}
	.bv-tile:hover .bv-tile__sheet {
		transform: none;
	}
}

/* Campaign / brand / collection tile grid (with gaps, portrait) */
.bv-tile--campaign,
.bv-tile--brand,
.bv-tile--collection {
	aspect-ratio: 1 / 1.25;
}
.bv-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

#collections-page .bv-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 1000px) {
	.bv-tile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.bv-tile-grid {
		grid-template-columns: 1fr;
	}
}

/* Faces mosaic — edge-to-edge, dark, square-ish, minimal gaps */
.bv-faces {
	background: var(--color-shell-bg, #09090b);
	color: var(--color-text-inverse);
}
.bv-faces__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0px;
}
.bv-tile--asset {
	aspect-ratio: 1 / 1;
	border-radius: 0;
}
.bv-tile--asset .bv-tile__badge {
	background: rgba(9, 9, 11, 0.66);
	color: var(--color-text-inverse);
}
@media (max-width: 1000px) {
	.bv-faces__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.bv-faces__grid {
		grid-template-columns: 1fr;
	}
}

/* Campaigns listing intro + filter/sort bar */
.bv-campintro {
	text-align: center;
	padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.75rem, 4vw, 2.75rem);
}
.bv-campintro__inner {
	max-width: 960px;
	margin-inline: auto;
}
.bv-campintro__eyebrow {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-soft);
	margin: 0 0 1rem;
}
.bv-campintro__eyebrow strong {
	color: var(--color-text);
}
.bv-campintro__text {
	font-family: var(--font-serif);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.32;
	color: var(--color-text);
	margin: 0;
	/* 400, not 300: Lora's variable range starts at 400, so 300 asked the
	   browser to synthesise a weight the family does not contain. Harmless
	   while Lora was never downloaded; visible now that it is. */
	font-weight: 400;
}
.bv-campintro__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}
.bv-campintro__cta:hover {
	color: var(--color-accent-strong);
}

.bv-sortbar {
	background: var(--color-surface);
	border-block: var(--border-subtle);
}
.bv-sortbar__inner {
	display: grid;
	grid-template-columns: auto repeat(4, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	align-items: end;
	padding-block: clamp(1rem, 2vw, 1.5rem);
}
.bv-sortbar__label {
	align-self: center;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--color-text-soft);
}
.bv-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.bv-field__label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--color-text-soft);
}
.bv-field select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.6rem 2rem 0.6rem 0.85rem;
	border: var(--border-subtle);
	border-radius: var(--radius-pill);
	background: var(--color-surface)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5'/></svg>")
		no-repeat right 0.9rem center;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	cursor: pointer;
}
.bv-field select:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 1px;
}
@media (max-width: 800px) {
	.bv-sortbar__inner {
		grid-template-columns: 1fr 1fr;
	}
	.bv-sortbar__label {
		grid-column: 1 / -1;
	}
}

/* =========================================================
   HOMEGROWN SITE CHROME — header nav + footer
   ========================================================= */
.bv-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
}
.bv-nav__inner {
	width: min(1900px, 94vw);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: 66px;
}
.bv-nav__logo {
	font-family: var(--font-sans);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}
.bv-nav__logo strong {
	font-weight: 800;
}
/* The <ul> is wp_nav_menu()'s, so the flex row lives on it rather than on
   the <nav>. list-style/padding are set here and not in reset.css, which
   zeroes list margins only — without them the nav arrives with bullets. */
.bv-nav__links {
	display: flex;
	flex: 1;
}
.bv-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bv-nav__link {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--color-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition-fast);
}
.bv-nav__link:hover {
	color: var(--color-text);
}
.bv-nav__link.is-active {
	color: var(--color-accent);
}
.bv-nav__search {
	position: relative;
	flex-shrink: 0;
}
.bv-nav__search summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	color: var(--color-text-muted);
	background: var(--color-bg-alt);
	border: var(--border-subtle);
}
.bv-nav__search summary::-webkit-details-marker {
	display: none;
}
.bv-nav__search summary:hover {
	color: var(--color-accent-strong);
}
.bv-nav__search[open] summary {
	color: var(--color-accent);
}
.bv-nav__searchform {
	position: absolute;
	right: 0;
	top: calc(100% + 0.6rem);
	width: min(320px, 78vw);
	background: var(--color-surface);
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 0.5rem;
	box-shadow: 0 12px 30px rgba(9, 9, 11, 0.12);
}
.bv-nav__searchform input {
	width: 90%;
	padding: 0.6rem 0.8rem;
	border: var(--border-subtle);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}
/* ----- Mobile menu -----
   The header had no mobile treatment at all. The 720px rule below used to try
   overflow-x: auto on the list, but a flex item defaults to min-width: auto,
   so the <ul> could never shrink below its content and the whole header ran
   229px past a 390px viewport — every page scrolled sideways on a phone. The
   min-width: 0 here is what makes any of it able to shrink.

   Hidden entirely above 800px: below that the logo, five links and the search
   no longer fit on one 66px row. */
.bv-nav__toggle {
	display: none;
	flex: none;
	/* 44px, not the 38px the search button beside it uses: this control only
	   ever appears on touch, where 44 is the floor. */
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: var(--border-subtle);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	cursor: pointer;
	margin-left: auto;
}
.bv-nav__toggle:hover {
	color: var(--color-accent-strong);
}
.bv-nav__toggle-bars,
.bv-nav__toggle-bars::before,
.bv-nav__toggle-bars::after {
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.bv-nav__toggle-bars {
	position: relative;
}
.bv-nav__toggle-bars::before,
.bv-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.bv-nav__toggle-bars::before {
	top: -5px;
}
.bv-nav__toggle-bars::after {
	top: 5px;
}

.bv-nav__links {
	min-width: 0;
}

@media (max-width: 800px) {
	.bv-nav__inner {
		gap: 0.75rem;
	}
	.bv-nav__toggle {
		display: inline-flex;
	}
	/* The panel drops out of the flex row and hangs below the bar. Closed is
	   display: none rather than a height animation, so its links are not
	   reachable by Tab while invisible. */
	.bv-nav__links {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--color-surface);
		border-bottom: var(--border-subtle);
		box-shadow: 0 12px 30px rgba(9, 9, 11, 0.12);
		padding: 0.5rem 0 1rem;
		max-height: calc(100vh - 66px);
		overflow-y: auto;
	}
	.bv-nav.is-menu-open .bv-nav__links {
		display: block;
	}
	.bv-nav__list {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		width: min(1900px, 94vw);
		margin-inline: auto;
	}
	.bv-nav__list li {
		width: 100%;
	}
	.bv-nav__link {
		display: block;
		/* Clears the 44px minimum touch target at this font size — 0.85rem
		   measured 43px, which is the kind of miss that only shows up when
		   something actually measures it. */
		padding: 0.9rem 0.25rem;
		border-bottom: var(--border-subtle);
	}
	.bv-nav__list li:last-child .bv-nav__link {
		border-bottom: 0;
	}
}

/* The panel positions against .bv-nav, which is already a containing block by
   virtue of position: sticky — so it spans the full header width and its
   border and shadow reach the screen edges, rather than stopping at the 94vw
   inner. The list inside is what stays on the 94vw grid. */

/* Sticky footer. html's backdrop is navy (--color-backdrop), so on a
   content-light page the body stopped short and that navy showed as a band
   below the near-black footer. Make the front-end body a min-height column and
   let the footer settle at the bottom, so short pages still fill the viewport.
   Scoped to .bv-preview-body (every front-end page, never wp-admin). Flex
   children stack and stretch exactly as block flow did, so nothing else moves. */
body.bv-preview-body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body.bv-preview-body > .bv-foot {
	margin-top: auto;
}

.bv-foot {
	background: var(--color-shell-bg, #09090b);
	color: rgba(255, 255, 255, 0.7);
}
.bv-foot__inner {
	width: min(1900px, 94vw);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: clamp(1.75rem, 4vw, 2.5rem);
}
.bv-foot__copy {
	font-size: var(--font-size-sm);
}
.bv-foot__links {
	display: flex;
}
.bv-foot__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.bv-foot__links a {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.bv-foot__links a:hover {
	color: var(--color-text-inverse);
}

/* =========================================================
   HOMEPAGE (cinematic — big imagery, open, SaaS feel)
   ========================================================= */
.bv-home {
	background: var(--color-bg);
}
.bv-home-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--color-text-inverse);
	background-image: var(--bv-hero, none);
	background-size: cover;
	background-position: center;
	background-color: var(--color-shell-bg, #09090b);
}
.bv-home-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(9, 9, 11, 0.5) 0%,
		rgba(9, 9, 11, 0.3) 42%,
		rgba(9, 9, 11, 0.72) 100%
	);
}
.bv-home-hero__inner {
	position: relative;
	z-index: 1;
	width: min(920px, 90vw);
	padding: 3rem 0;
}
.bv-home-hero__title {
	font-family: var(--font-serif);
	/* 400, not 300: Lora's variable range starts at 400, so 300 asked the
	   browser to synthesise a weight the family does not contain. Harmless
	   while Lora was never downloaded; visible now that it is. */
	font-weight: 400;
	line-height: 1.04;
	font-size: clamp(2.8rem, 7vw, 6rem);
	margin: 0;
	letter-spacing: var(--track-display);
}
.bv-home-hero__sub {
	margin: 1.75rem auto 0;
	max-width: 48ch;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}
.bv-home-hero__scroll {
	display: inline-flex;
	margin-top: 2.75rem;
	color: rgba(255, 255, 255, 0.85);
	animation: bv-bob 2.4s ease-in-out infinite;
}
.bv-home-hero__scroll:hover {
	color: var(--color-text-inverse);
}
@keyframes bv-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.bv-home-hero__scroll {
		animation: none;
	}
}

.bv-home-intro {
	background: var(--color-surface);
	text-align: center;
	padding-block: clamp(3.5rem, 9vw, 7rem);
}
.bv-home-intro__inner {
	width: min(840px, 90vw);
	margin-inline: auto;
}
.bv-home-intro__text {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.38;
	color: var(--color-text);
	margin: 0;
}
.bv-home-intro__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 2rem;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
}
.bv-home-intro__cta:hover {
	color: var(--color-accent-strong);
}

.bv-home-dark {
	background: var(--color-shell-bg, #09090b);
	padding-block: clamp(3rem, 7vw, 6rem);
}
.bv-home-light {
	background: var(--color-bg);
	padding-block: clamp(3rem, 7vw, 6rem);
}

.bv-home-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.bv-home-sec__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2.3rem);
	margin: 0;
	color: var(--color-text);
}
.bv-home-sec__title--light {
	color: var(--color-text-inverse);
}

.bv-asset-grid--home {
	grid-template-columns: repeat(4, 1fr);
}

.bv-tile-grid--home .bv-tile--campaign {
	aspect-ratio: 4 / 3;
}
@media (max-width: 1100px) {
	.bv-asset-grid--home {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.bv-asset-grid--home {
		grid-template-columns: 1fr;
	}
}

.bv-seelink {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
	white-space: nowrap;
}
.bv-seelink:hover {
	color: var(--color-accent-strong);
}

/* =========================================================
   BRAND / CAMPAIGN HUB — additions
   ========================================================= */

/* ----- Hero logo lockup -----
   The mark sits on a white plate for the same reason every artifact in the
   vault does: a brand library holds logos drawn for light backgrounds far
   more often than for dark ones, and over the hero scrim an unplated dark
   mark simply disappears. Contained, never cropped, so a wide horizontal
   lockup and a square mark both sit correctly in the same slot. */

.bv-hub__inner.bv-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Ensure the container has enough height to show the separation */
	min-height: 100%;
}

.bv-hero__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	/* filter: saturate(0) brightness(100); */
}

.bv-hero__logo-img {
	display: block;
	width: auto;
	max-width: min(260px, 60vw);
	height: auto;
	max-height: 56px;
	object-fit: contain;
}
@media (max-width: 640px) {
	.bv-hero__logo-img {
		max-height: 40px;
	}
}

/* ----- Brand values -----
   A brand's values are section-level content, not incidental tags, so they get
   their own treatment rather than borrowing the micro-badge: a generous
   outlined marker, sized to read as a considered statement under the heading,
   with a small copper dot tying it to the brand accent without shouting. */
.bv-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.bv-value {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.2rem;
	font-family: var(--font-sans);
	font-size: var(--font-size-md);
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
}
.bv-value::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
}

/* Curated picks beyond the lead one, under the featured callout. */
.bv-asset-grid--featured {
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* ----- Records with nothing published yet -----
   .bv-dash is a fixed two-column grid; with no rail the content would be
   squeezed into the 210px track. Same dashed treatment as the asset page's
   'No file is attached' panel, so 'nothing here yet' reads one way sitewide. */
.bv-dash--norail {
	grid-template-columns: minmax(0, 1fr);
}
.bv-emptystate {
	margin: 0;
	padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	color: var(--color-text-soft);
	font-size: var(--font-size-sm);
}

/* ----- Browse tools -----
   Sort sits with the ground swatches, opposite the count: the row answers
   "how many, in what order, against what background" in one line. Sort is a
   plain GET form so the ordering lives in the URL and a filtered, sorted
   view can be pasted to a colleague. */
.bv-browser__tools {
	display: flex;
	align-items: end;
	gap: clamp(1rem, 2.5vw, 2rem);
	flex-wrap: wrap;
}
.bv-browser__sort {
	display: flex;
	align-items: end;
	gap: 0.5rem;
}
.bv-field--inline {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}
.bv-field--inline .bv-field__label {
	white-space: nowrap;
}
.bv-field--inline select {
	width: auto;
	min-width: 11rem;
}
@media (max-width: 640px) {
	.bv-browser__tools {
		width: 100%;
		justify-content: space-between;
	}
	.bv-field--inline select {
		min-width: 0;
	}
}

/* ----- One hub header, two grounds -----
   Faces sits on the dark shell; everything else on the light field. The
   modifier changes colour only — the structure (breadcrumbs, title, lede)
   is identical on all four hubs, which is the entire point of sharing it. */
.bv-browser__head--dark {
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, 0.14);
}
.bv-browser__head--dark .bv-browser__title {
	color: var(--color-text-inverse);
}
.bv-browser__head--dark .bv-browser__lede {
	color: rgba(255, 255, 255, 0.7);
}
.bv-browser__head--dark .bv-breadcrumbs {
	color: rgba(255, 255, 255, 0.55);
}
.bv-browser__head--dark .bv-breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
}
.bv-browser__head--dark .bv-breadcrumbs a:hover {
	color: var(--color-text-inverse);
}
.bv-browser__head--dark .bv-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.3);
}

/* =========================================================
   LIST VIEW — the "hunt" mode
   =========================================================
   Browsing wants the specimen big and the metadata quiet; that is the plate.
   Hunting wants many records comparable at a glance on the fields you are
   actually deciding on. Same query, same pagination — only the row differs. */

.bv-rowlist {
	display: flex;
	flex-direction: column;
}
.bv-rowlist__head,
.bv-row {
	display: grid;
	grid-template-columns: 44px 5.5rem minmax(0, 1fr) 8rem 4.5rem 7rem 4.5rem;
	align-items: center;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.bv-rowlist__head {
	padding: 0 0.75rem 0.6rem;
	border-bottom: 1px solid var(--color-border-strong);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-text-soft);
}
.bv-row {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--color-rule);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--transition-fast);
}
.bv-row:hover {
	background: var(--color-bg-alt);
}
.bv-row:focus-visible {
	outline: 2px solid var(--color-brass);
	outline-offset: -2px;
}

.bv-row__thumb {
	display: grid;
	place-items: center;
	width: 44px;
	height: 34px;
	overflow: hidden;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}
.bv-row__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bv-row__accession,
.bv-row__format,
.bv-row__dims,
.bv-row__files {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--track-label);
	color: var(--color-text-soft);
}
.bv-row__accession {
	color: var(--color-brass);
	font-weight: 600;
}
.bv-row__title {
	font-size: var(--font-size-sm);
	color: var(--color-text);
}
.bv-row__type {
	font-size: 0.6875rem;
	color: var(--color-text-soft);
}
/* Dashed left edge repeats the plate's is-empty signal, so "nothing to
   download" reads the same in both views. */
.bv-row.is-empty {
	border-left: 2px dashed var(--color-border-strong);
}
.bv-row__files.is-none {
	color: var(--color-border-strong);
}

@media (max-width: 900px) {
	.bv-rowlist__head {
		display: none;
	}
	.bv-row {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-areas: "thumb title files" "thumb meta meta";
		row-gap: 0.2rem;
	}
	.bv-row__thumb {
		grid-area: thumb;
	}
	.bv-row__title {
		grid-area: title;
	}
	.bv-row__files {
		grid-area: files;
	}
	.bv-row__accession {
		grid-area: meta;
	}
	.bv-row__type,
	.bv-row__format,
	.bv-row__dims {
		display: none;
	}
}

/* ----- Grid / list toggle ----- */
.bv-viewtoggle {
	display: inline-flex;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.bv-viewtoggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 34px;
	padding: 0 0.85rem;
	font-size: var(--font-size-xs);
	text-decoration: none;
	color: var(--color-text-muted);
	background: var(--color-surface);
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}
.bv-viewtoggle__btn + .bv-viewtoggle__btn {
	border-left: 1px solid var(--color-border-strong);
}
.bv-viewtoggle__btn:hover {
	background: var(--color-bg-alt);
}
.bv-viewtoggle__btn.is-current {
	background: var(--color-ink);
	color: var(--color-surface);
}

/* ----- The section rail moves right -----
   Two left rails meant two different promises in the same position: on the
   browser the left rail NARROWS THE SET, on a brand page it JUMPS WITHIN ONE
   PAGE. A right-hand "on this page" rail is the documentation convention and
   removes the collision. DOM order is unchanged, so the jump-nav still comes
   before the content for keyboard and screen-reader users. */
.bv-dash {
	grid-template-columns: minmax(0, 1fr) var(--bv-rail-w);
}
.bv-dash > .bv-dash__side {
	grid-column: 2;
	grid-row: 1;
}
.bv-dash > .bv-dash__main {
	grid-column: 1;
	grid-row: 1;
}
@media (max-width: 1000px) {
	/* Must follow the unconditional .bv-dash rule above — same specificity, so
	   source order decides and a media query adds none. This collapse used to
	   live up beside the rail's own narrow styling, where it lost that race at
	   every viewport width: the grid stayed two-track, both children were
	   stacked into track 1, and a 210px strip of nothing sat to the right of
	   the content on every narrow screen. Measured at 880px before the fix:
	   grid-template-columns resolved to "558px 210px". */
	.bv-dash {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.bv-dash > .bv-dash__side,
	.bv-dash > .bv-dash__main {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Must follow the .bv-dash rule above: same specificity, so source order is
   what decides. A record with no rail keeps its single full-width column. */
.bv-dash--norail {
	grid-template-columns: minmax(0, 1fr);
}
.bv-dash--norail > .bv-dash__main {
	grid-column: 1;
}

/* ----- Breadcrumb links need to look like links -----
   All four breadcrumb contexts set `text-decoration: none` and leaned on
   colour alone — #222 links inside a #6b6b70 nav at 11px. That is a faint
   weight difference, not an affordance, so the trail read as one slightly
   darker string and was reported as "it shows up as a URL but it doesn't
   have a link". The hover colour was the only cue, which is no use to
   anyone deciding whether to hover in the first place.

   A quiet underline at rest names them as links; the existing hover colour
   still confirms it. The current page is a <span aria-current>, not a link,
   so it stays undecorated and the trail's end reads correctly. */
.bv-breadcrumbs a,
.bv-slice .bv-breadcrumbs a,
.bv-browser__head .bv-breadcrumbs a,
.bv-hero .bv-breadcrumbs a,
.bv-browser__head--dark .bv-breadcrumbs a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	/* Invalid in older engines, which then fall back to a full-strength
	   underline — louder than intended, never absent. */
	text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

.bv-breadcrumbs a:hover,
.bv-breadcrumbs a:focus-visible,
.bv-slice .bv-breadcrumbs a:hover,
.bv-browser__head .bv-breadcrumbs a:hover,
.bv-hero .bv-breadcrumbs a:hover,
.bv-browser__head--dark .bv-breadcrumbs a:hover {
	text-decoration-color: currentColor;
}

/* =========================================================
   READING LAYOUT — .bv-slice--read
   Worn by the Video and Story singles alongside their own
   modifier. Three nested bands replace the 1fr/320px grid:

     frame    min(1200px, 92vw)   breadcrumbs, Related  (unchanged)
     media    880px               embed, hero
     measure  54rem               title, byline, prose, actions

   Narrow text with wider media is what makes these pages read
   as something you sit with. It is also why the video does not
   shrink: at the measure a 16:9 embed would be smaller than it is now.

   Everything below is scoped to .bv-slice--read. The artifact
   single (.bv-slice--default) must not move.
   ========================================================= */

.bv-slice--read {
	/* NOT ch. The ch unit resolves against each element's OWN font-size, so
	   a single shared value yields a different width per element: 68ch is
	   857px on the 19px actions row and 1267px on the 30px standfirst,
	   which min() then clamps to the full 1200px frame. The band has to be
	   font-size independent or it is not a band. 54rem == 864px at the
	   16px root, which is the measure the body text was already landing on. */
	--bv-read-measure: 54rem;
	--bv-read-media: 100%;
}

/* The two-column grid stops applying; the bands do the work. */
.bv-slice--read .bv-slice__layout {
	display: block;
}

.bv-slice--read .bv-slice__head,
.bv-slice--read .bv-slice__desc,
.bv-slice--read .bv-slice__body,
.bv-slice--read .bv-slice__actions,
.bv-slice--read .bv-downloads,
.bv-slice--read .bv-slice-keywords {
	width: min(var(--bv-read-measure), 100%);
	/* margin-inline: auto; */
}

.bv-slice--read .bv-slice__video,
.bv-slice--read .bv-slice__poster,
.bv-slice--read .bv-slice__hero {
	width: min(var(--bv-read-media), 100%);
	margin-inline: auto;
}

/* .bv-slice__desc carries max-width: 60ch for the two-column
   layout, which would win over the band and hold the standfirst
   narrower than the body it introduces. */
.bv-slice--read .bv-slice__desc {
	max-width: none;
}

/* Reading sizes. .bv-prose defaults to --font-size-md/1.7, which
   is a caption, not something you read 400 words of. The lead
   must resolve ABOVE the body or the standfirst and the first
   paragraph are indistinguishable. */
.bv-slice--read .bv-prose {
	font-size: var(--font-size-lg);
	line-height: 1.65;
}

.bv-slice--read .bv-prose--lead {
	font-size: var(--font-size-xl);
	line-height: 1.45;
	color: var(--color-text);
}

/* Vertical rhythm. Both use clamp() rather than a fixed margin so
   a one-paragraph story compacts instead of leaving a hole. */
.bv-slice--read .bv-slice__video,
.bv-slice--read .bv-slice__poster,
.bv-slice--read .bv-slice__hero {
	margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

.bv-slice--read .bv-slice__body {
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* The byline strip — brand, and one thing more. The rule under it is
   the article tell; it is the only new element in this layout. */
.bv-slice--read .bv-slice__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	width: min(var(--bv-read-measure), 100%);
	/* margin: 0.85rem auto 0; */
	padding-bottom: 0.85rem;
	border-bottom: var(--border-subtle);
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
}

.bv-slice--read .bv-slice__byline-brand {
	color: var(--color-text-muted);
	text-decoration: none;
}

.bv-slice--read .bv-slice__byline-brand:hover {
	color: var(--color-accent);
}

.bv-slice--read .bv-slice__byline-sep {
	color: var(--color-border-strong);
}

/* Details, rotated. In the rail these are stacked label-left rows in
   320px; at media width that shape wastes half of every column, so
   the label goes above the value and the rows become a field grid.
   auto-fit lands on three columns at 880 and reflows to two and one
   without a breakpoint.

   The 240px floor is load-bearing, not a round number: with the 1.5rem
   gap, 200px would fit FOUR tracks at 880 (800 + 72 = 872), and four
   ~214px cells is too tight for a free-text value like Usage rights.
   240 gives 3*240 + 2*24 = 768, which fits, while four (1032) does not. */
.bv-slice--read .bv-meta-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 23fr));
	gap: 1.25rem 5.5rem;
	width: min(var(--bv-read-media), 100%);
	margin: clamp(2rem, 5vw, 3.5rem) auto 0;
	padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
	background: none;
	border: 0;
	border-top: var(--border-subtle);
	border-radius: 0;
}

.bv-slice--read .bv-meta-panel__title {
	grid-column: 1 / -1;
	margin-bottom: 0;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-soft);
}

.code-box {
	background-color: #282c34;
	color: #abb2bf;
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 1.5;
	/* padding: 15px; */
	border-radius: 6px;
	border: 1px solid #181a1f;
	overflow-x: auto;
	/* margin: 20px 0; */
	display: block;
}
/* Inline formatting rule */
.code-box code {
	color: #ef596f; /* Highlight color for the main code text */
	/* white-space: pre; Ensures exact formatting is preserved */
}

/* Label above value, left aligned — the rail's space-between with a
   right-aligned value reads as a form field at this width.
   justify-content must be reset too: the base rule sets space-between
   for the horizontal rail, and once the direction is column, a cell
   stretched by a taller neighbour in its grid row would push the label
   to the top and the value to the bottom instead of keeping them the
   gap apart. */
.bv-slice--read .bv-meta-row {
	display: flex;
	flex-direction: row;
	/* justify-content: flex-start; */
	align-items: flex-start;
	gap: 0.3rem;
	padding-block: 0;
	border-bottom: 0;
}

.bv-slice--read .bv-meta-row__label {
	margin-right: 0;
}

.bv-slice--read .bv-meta-row__value {
	max-width: 100%;
	text-align: left;
}

/* Prose internals. .bv-prose shipped with paragraph and list rules only,
   which was fine for the short brand-story blurb it was built for and is
   not fine for a 400-word story that uses headings. */
.bv-slice--read .bv-prose :is(h2, h3, h4, h5, h6) {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-text);
	margin: 1.6em 0 0.5em;
}

.bv-slice--read .bv-prose :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* The ladder has to step ABOVE the body, and the body is --font-size-lg
   here (Task 1 raised it). Using lg for h3-h6 would make a subheading
   exactly the size of the paragraph under it — 24px both, at 1440 — so
   the sizes go one rung up each: body lg 24, h3-h6 xl 30, h2 2xl 38,
   with the page title above all of it at 3xl 48. */
/* h2 carries its rank by weight and space, not size alone. The 2xl floor
   was lowered to 28px to stop hero headings overflowing on mobile, which
   leaves it 1.4px above xl at 375 — invisible as a level change. Weight
   and the larger space above it survive the floor; the size gap only does
   real work on wide screens. */
.bv-slice--read .bv-prose h2 {
	font-size: var(--font-size-2xl);
	font-weight: 500;
	margin-top: 2.2em;
}

.bv-slice--read .bv-prose :is(h3, h4, h5, h6) {
	font-size: var(--font-size-xl);
}

.bv-slice--read .bv-prose blockquote {
	margin: 1.5em 0;
	padding-left: 1.25em;
	border-left: 2px solid var(--color-border-strong);
	color: var(--color-text-soft);
}

.bv-slice--read .bv-prose a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bv-slice--read .bv-prose a:hover {
	color: var(--color-accent);
}

/* An inline image in a story is a break-out, same as the hero. */
.bv-slice--read .bv-prose :is(img, figure) {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.75em 0;
	border-radius: var(--radius-lg);
}

.bv-slice--read .bv-prose figcaption {
	margin-top: 0.6em;
	font-family: var(--font-sans);
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	text-align: center;
}

/* The story hero gets the poster's treatment — same radius, same two-layer
   shadow. Without this it renders flat and square-cornered directly beside
   a video sibling that does not, and a thumbnail narrower than the band
   under-fills it. */
.bv-slice--read .bv-slice__hero img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
	box-shadow:
		0 1px 3px rgba(9, 9, 11, 0.08),
		0 8px 24px rgba(9, 9, 11, 0.06);
	object-fit: cover;
	max-height: 700px;
}

/* =========================================================
   BLOCK RUNS — .bv-blocks
   Core block output inside a brand or campaign dashboard
   column. Two widths:

     text            the reading measure (--width-narrow)
     wide / full     the content column

   The column is flush with the frame's LEFT edge and the
   rail takes the only space to its right, so there is
   nowhere for alignfull to escape to — a block wider than
   the column can only reach into the rail and overlap it.
   alignfull therefore fills the column, the same width as
   alignwide: the honest maximum beside a persistent rail.
   (An earlier version escaped alignfull by the rail plus
   the gutter to reach the full frame. That overlapped the
   rail on any page carrying both a rail and a full-width
   block — a case the overflow-only check never caught.)
   ========================================================= */

/* content.css caps .bv-blocks itself at --width-narrow (760px) via
   :is(.bv-doc, .bv-blocks), shared with the .bv-doc path. That cap has to
   come off here: the alignwide/alignfull rules below are percentages of
   .bv-blocks' own box, so left at 760 they resolve against 760, not the
   878px column — measured and confirmed against the rendered dashboard,
   not assumed. content.css loads AFTER this file, so a same-specificity
   override here would lose the cascade on source order; ".bv-dash__main
   .bv-blocks" (two classes) outranks ":is(.bv-doc, .bv-blocks)" (one
   class) instead of relying on load order. */
.bv-dash__main .bv-blocks {
	max-width: none;
}

.bv-blocks > * {
	max-width: var(--width-narrow);
	/* margin-inline: auto; */
}

.bv-blocks > .alignwide {
	max-width: none;
	width: 100%;
}

.bv-blocks > .alignfull {
	/* Fills the content column, same as alignwide. It cannot be any wider:
	   the column is flush with the frame's LEFT edge and the rail occupies the
	   only space to the right, so a wider block escapes rightward straight into
	   the rail and overlaps it. */
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* Nested alignwide/alignfull — a Group or Columns block (newly insertable
   now that the palette opened) wrapping an aligned child — are not matched
   by the ">" ladder above, so they fall through to core's
   ".is-layout-constrained > .alignwide" (theme.json's 1200px wideSize) or to
   content.css's plain ".alignwide"/".alignfull". Both exceed the 878px
   column, and .bv-dash__main has min-width: 0, so the page overflows
   rightward under the sticky rail.

   "* .alignwide" (a descendant combinator with an element in between)
   matches only when something sits between .bv-blocks and the aligned
   element — i.e. only nested cases — so it can never match the same
   element as ".bv-blocks > .alignwide" above; the top-level ladder keeps
   winning for top-level blocks untouched. The ".bv-dash__main" qualifier
   gives this (0,3,0) specificity, ahead of both core's (0,2,0) and
   content.css's (0,1,0) regardless of stylesheet order.

   max-width: 100% (rather than a hardcoded px figure) bounds a nested
   alignment to whatever its own immediate container already resolved to —
   which, inside .bv-blocks, is never wider than the 878px column unless a
   block is deliberately re-escaped by an ancestor that is itself a
   top-level .alignfull. width: auto and margin-inline: auto neutralise
   alignfull's viewport-bleed trick (calc(50% - 50vw) in content.css). */
.bv-dash__main .bv-blocks * .alignwide,
.bv-dash__main .bv-blocks * .alignfull {
	max-width: 100%;
	width: auto;
	margin-inline: auto;
}