/* =========================================================
   Brand and campaign pages (hero, section nav, sections).

   Split out of single-asset.css (2026-10). Every rule here only
   ever matches markup on these pages, so it loads only there —
   see bv_style_bundles() in functions.php. Loads straight after
   single-asset.css (handle bv-pages), the position these rules
   held inside it, so the cascade is unchanged.
   ========================================================= */

.bv-taglineband .bv-hub__inner {
	text-align: center;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.bv-block-section + .bv-block-section {
	margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
/* =========================================================
   HUB — big hero + section body
   ========================================================= */
.bv-hero--tall {
	min-height: clamp(460px, 78vh, 760px);
}
.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));
}
.bv-sublabel--spaced {
	margin-top: 2rem;
}
.bv-swatch__chip {
	aspect-ratio: 5 / 2;
}
.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 {
		transition: none;
	}
}

/* =========================================================
   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:100px;
	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);
}

/* ----- Records with nothing published yet -----
   Same dashed treatment as the asset page's 'No file is attached' panel, so
   'nothing here yet' reads one way sitewide. */
.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);
}

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

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

   alignfull fills the body column, the same as alignwide.
   Sections can be toned or padded, so a block escaping to
   the viewport from inside one would land off by that
   padding; a full-bleed picture is what the section's own
   Bleed width (.bv-sec--bleed) is for.
   ========================================================= */

/* 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
   body column. content.css loads AFTER this file, so a same-specificity
   override here would lose the cascade on source order; ".bv-tk__body
   .bv-blocks" (two classes) outranks ":is(.bv-doc, .bv-blocks)" (one
   class) instead of relying on load order. */
.bv-tk__body .bv-blocks {
	max-width: none;
}

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

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

/* 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". Either can exceed a
   narrow body column, and alignfull's viewport escape always does, so the
   page overflows rightward.

   "* .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-tk__body" 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 body 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-tk__body .bv-blocks * .alignwide,
.bv-tk__body .bv-blocks * .alignfull {
	max-width: 100%;
	width: auto;
	margin-inline: auto;
}

/* =========================================================
   TOOLKIT FRAME — section nav and body (template-parts/toolkit/)

   The right-hand rail is gone: a sticky bar under the site header
   costs one line of height instead of a column of width, so the
   sections get the whole page. Hero copy, band, bar and sections
   all sit on --width-max, so their left edges line up.
   ========================================================= */

.bv-tk {
	/* <main> is a flex item of body.bv-preview-body, and a flex item's
	   min-width defaults to its min-content width: the nav's unwrapped links.
	   Without this the page grows past a phone screen and .bv-hub's
	   overflow-x: clip cuts the right edge off every line. */
	min-width: 0;
	/* Site header (.bv-nav__inner, 66px) plus the admin bar when present.
	   Core sets --wp-admin--admin-bar--height only while the bar shows. */
	--bv-tknav-top: calc(66px + var(--wp-admin--admin-bar--height, 0px));
	--bv-tknav-h: 56px;
	/* Where section text starts inside the body: the section's side margin
	   (above) plus its 2rem padding (.bv-block-section in single-asset.css).
	   Hero copy and the nav are inset by the same amount, so every left edge
	   on the page — title, nav, headings, paragraphs — is one line. */
	--bv-tk-inset: calc(var(--bv-section-inset, clamp(0.75rem, 2vw, 1.5rem)) + var(--space-8));
}

/* Hero and band on the same width as everything under them. */
.bv-tk .bv-hub__inner {
	width: min(var(--width-max), 100% - var(--gutter) * 2);
	padding-inline: var(--bv-tk-inset);
}

/* Full width is for pictures and grids; a paragraph across 1600px is a line
   the eye loses on the way back. */
.bv-tk__body .bv-prose {
	max-width: var(--width-narrow);
}

.bv-tknav {
	position: sticky;
	top: var(--bv-tknav-top);
	z-index: 90;
	background: color-mix(in srgb, var(--color-surface) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-block-end: var(--border-subtle);
}
.bv-tknav__inner {
	padding-inline: var(--bv-tk-inset);
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--bv-tknav-h);
}
.bv-tknav__logo {
	flex: none;
	display: flex;
	align-items: center;
	padding-inline-end: var(--space-6);
	border-inline-end: var(--border-subtle);
}
.bv-tknav__logo-img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

/* Scrolls sideways when the sections outrun the width; edge fades say there
   is more, and scroll-snap keeps a swipe from stopping mid-label. */
.bv-tknav__list {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--space-3), #000 calc(100% - var(--space-8)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--space-3), #000 calc(100% - var(--space-8)), transparent 100%);
}
.bv-tknav__list::-webkit-scrollbar {
	display: none;
}
.bv-tknav__list li {
	flex: none;
	scroll-snap-align: start;
}
.bv-tknav__link {
	display: block;
	padding: var(--space-4) var(--space-3);
	border-block-end: 2px solid transparent;
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-text-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.bv-tknav__link:hover {
	color: var(--color-text);
}
.bv-tknav__link:focus-visible {
	outline: 2px solid var(--bv-brand-accent, var(--color-accent));
	outline-offset: -4px;
	border-radius: var(--radius-sm);
}
.bv-tknav__link.is-active,
.bv-tknav__link[aria-current] {
	color: var(--color-text);
	border-block-end-color: var(--bv-brand-accent, var(--color-accent));
}

.bv-tknav__updated {
	flex: none;
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	white-space: nowrap;
}
.bv-tknav__updated-label {
	margin-inline-end: var(--space-1);
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

@media (max-width: 760px) {
	.bv-tknav__inner {
		gap: var(--space-3);
	}
	.bv-tknav__logo {
		padding-inline-end: var(--space-3);
	}
	.bv-tknav__updated {
		display: none;
	}
}

/* An anchor jump lands the section's heading below both sticky bars. */
.bv-tk .bv-block-section {
	scroll-margin-top: calc(var(--bv-tknav-top) + var(--bv-tknav-h) + var(--space-4));
}

/* The body. --bv-frame-pad is the distance from its edge to the viewport's,
   from the same formula as its width, so a bleeding section cancels exactly. */
.bv-tk__body {
	--bv-frame-pad: calc((100vw - min(var(--width-max), 100vw - var(--gutter) * 2)) / 2);
	padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}

/* With no rail to stop at, Bleed means both edges at every width. sections.css
   only bleeds left above 1000px because the rail used to sit on the right. */
.bv-tk__body .bv-sec--bleed {
	margin-right: calc(-1 * var(--bv-frame-pad, 0px));
	padding-right: var(--bv-frame-pad, 0px);
}
.bv-tk__body .bv-sec--bleed > .bv-band,
.bv-tk__body .bv-sec--bleed > .bv-gallery {
	margin-right: calc(-1 * var(--bv-frame-pad, 0px));
}


/* =========================================================
   TOOLKIT SUB-PAGES — hub cards, sub-page hero, pager
   (template-parts/toolkit/helpers.php; on only while the
   bv_toolkit_subpages option is set)
   ========================================================= */

/* A sub-page leads with its topic, not a 78vh photograph: the reader came
   for the palette, and the brand is already its eyebrow. */
.bv-hero--sub {
	min-height: clamp(240px, 34vh, 360px);
}
.bv-hero--sub .bv-hero__title {
	font-size: var(--font-size-3xl);
}

/* ----- "In this toolkit" grid -----
   Editorial tiles: the preview IS the card. No surface, border or arrow;
   the whole tile is the link. --tk-cols is set inline from
   bv_tkgrid_cols() so the last row is never one lone tile. The !important
   overrides are the only way a stylesheet can beat an inline custom
   property. */
.bv-tkgrid {
	--tk-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--tk-cols), minmax(0, 1fr));
	gap: var(--space-8) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* One or two tiles stay tile-sized instead of stretching across the page. */
.bv-tkgrid--n1,
.bv-tkgrid--n2 {
	grid-template-columns: repeat(var(--tk-cols), minmax(0, 24rem));
}
@media (min-width: 1200px) {
	.bv-tkgrid--n4 {
		--tk-cols: 4 !important;
	}
}
@media (max-width: 640px) {
	.bv-tkgrid:not(.bv-tkgrid--n1) {
		--tk-cols: 2 !important;
		gap: var(--space-6) var(--space-4);
	}
}
.bv-tkcard {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: var(--color-text);
	text-decoration: none;
}
.bv-tkcard:focus-visible {
	outline: 2px solid var(--bv-brand-accent, var(--color-accent));
	outline-offset: var(--space-1);
	border-radius: var(--radius-md);
}
.bv-tkcard__preview {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}
.bv-tkcard__preview::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-ink);
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}
.bv-tkcard:hover .bv-tkcard__preview::after {
	opacity: 0.06;
}
.bv-tkcard__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
}
.bv-tkcard__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	line-height: 1.15;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--transition-fast);
}
.bv-tkcard:hover .bv-tkcard__title {
	text-decoration-color: currentColor;
}
.bv-tkcard__meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-soft);
	font-variant-numeric: tabular-nums;
}

/* Previews: a glance at what is behind each tile, edge to edge. */
.bv-tkcard__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: var(--space-6);
}
.bv-tkcard__logo img {
	max-width: 70%;
	max-height: 70%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.bv-tkcard__wordmark {
	padding-inline: var(--space-6);
	font-family: var(--font-serif);
	font-size: var(--font-size-2xl);
	line-height: 1.15;
	text-align: center;
	color: var(--color-text);
}
.bv-tkcard__swatches {
	position: absolute;
	inset: 0;
	display: flex;
}
.bv-tkcard__swatches > span {
	flex: 1;
}
.bv-tkcard__specimen {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--color-ink);
	color: var(--color-surface);
	font-family: var(--font-serif);
	font-size: clamp(3.5rem, 7vw, 5rem);
	line-height: 1;
}
.bv-tkcard__mosaic {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: calc(var(--space-1) / 2); /* a hairline between photos */
}
.bv-tkcard__mosaic-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bv-tkcard__docs {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: 66%;
}
.bv-tkcard__doc {
	height: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow-subtle);
}
.bv-tkcard__doc:nth-child(2) {
	transform: translateY(calc(-1 * var(--space-2)));
}
.bv-tkcard__doc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bv-tkcard__count {
	font-family: var(--font-serif);
	font-size: clamp(3rem, 6vw, 4.5rem);
	line-height: 1;
	color: var(--bv-brand-accent, var(--color-accent));
}
.bv-tkcard__people {
	display: flex;
	align-items: center;
}
.bv-tkcard__person {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 3px solid var(--color-bg-alt);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
}
.bv-tkcard__person + .bv-tkcard__person {
	margin-inline-start: calc(-1 * var(--space-3));
}
.bv-tkcard__person img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bv-tkcard__person-name {
	margin-inline-start: var(--space-3);
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
}

/* ----- Inherited guidance ----- */
.bv-tknote {
	max-width: var(--width-narrow);
	margin: 0 var(--bv-tk-inset) var(--space-6);
	padding: var(--space-3) var(--space-4);
	border-inline-start: 3px solid var(--bv-brand-accent, var(--color-accent));
	background: var(--color-bg-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-soft);
}

/* ----- Previous / next ----- */
.bv-tkpager {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin: var(--space-12) var(--bv-tk-inset) 0;
	padding-top: var(--space-6);
	border-top: var(--border-subtle);
}
.bv-tkpager__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	color: var(--color-text);
	text-decoration: none;
}
.bv-tkpager__link.is-next {
	margin-inline-start: auto;
	text-align: end;
}
.bv-tkpager__dir {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	color: var(--color-text-soft);
}
.bv-tkpager__link.is-prev .bv-tkpager__dir::before {
	content: "← ";
}
.bv-tkpager__link.is-next .bv-tkpager__dir::after {
	content: " →";
}
.bv-tkpager__label {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
}
.bv-tkpager__link:hover .bv-tkpager__label {
	color: var(--bv-brand-accent, var(--color-accent));
}

/* ----- Featured assets: equal editorial tiles ----- */
.bv-etile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8) var(--space-6);
}
@media (max-width: 1024px) {
	.bv-etile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.bv-etile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6) var(--space-4);
	}
}
.bv-etile {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	color: var(--color-text);
	text-decoration: none;
}
.bv-etile:focus-visible {
	outline: 2px solid var(--bv-brand-accent, var(--color-accent));
	outline-offset: var(--space-1);
	border-radius: var(--radius-md);
}
.bv-etile__preview {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-2);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}
.bv-etile__glyph {
	display: none;
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	letter-spacing: var(--track-label);
	color: var(--color-text-soft);
}
.bv-etile__preview.is-broken .bv-etile__glyph {
	display: block;
}
.bv-etile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-med);
}
.bv-etile__preview.has-alpha .bv-etile__img {
	object-fit: contain;
	padding: var(--space-6);
}
.bv-etile:hover .bv-etile__img {
	transform: scale(1.03);
}
.bv-etile__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	line-height: 1.2;
}
.bv-etile:hover .bv-etile__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.bv-etile__meta {
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
}
.bv-etile__fmt {
	font-family: var(--font-mono);
}
@media (prefers-reduced-motion: reduce) {
	.bv-etile__img {
		transition: none;
	}
}

/* ----- About: body + details sidebar -----
   Body uses the same reading measure as every other .bv-prose block
   (--width-narrow), so the brand description and the story under it share
   one right edge; the sidebar stacks under it below 960px. */
.bv-about__body {
	max-width: var(--width-narrow);
}
.bv-about.has-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
	gap: var(--space-16);
	align-items: start;
}
.bv-about__lead {
	margin: 0 0 var(--space-5);
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	line-height: 1.4;
	color: var(--color-text);
	text-wrap: pretty;
}
/* Brand "At a glance": values stack one per line, right-aligned like
   every other value in the sidebar. */
.bv-glance-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-1);
}
@media (max-width: 959.98px) {
	.bv-about.has-side {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}
}