/*!
 * BrandCustodian — built stylesheet. DO NOT EDIT.
 * Authored in assets/css/src/. Rebuild with: npm run build:css
 */

/*!
 * BrandCustodian — Fonts, design tokens, reset, and utility classes.
 */

/* ---------- Fonts (self-hosted; no third-party requests) ---------------- */

@font-face {
	font-family: "Gambarino";
	src: url("../fonts/gambarino.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-var.woff2") format("woff2-variations");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-italic-var.woff2") format("woff2-variations");
	font-weight: 400 500;
	font-style: italic;
	font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------ */

:root {
	color-scheme: dark;

	--bg-0: #090b0f;
	--bg-1: #12151b;
	--bg-2: #1a1e26;
	--line: #262b34;

	--ink: #eae6db;
	--ink-body: #c9c6bd;
	--ink-dim: #9a9fa8;
	--ink-faint: #5e636d;
	--ink-bright: #fbf8f2;
	--ink-strong: #f2ede1;
	--ink-soft: #d7d2c4;

	--gold: #d9a544;
	--gold-bright: #f0c363;
	--teal: #4a7c8c;
	--coral: #dd7a52;

	/* Overridden per section by a .bc-t--* class. */
	--accent: var(--gold);
	--accent-bright: var(--gold-bright);

	/* The accent as a foreground mark — section glyphs, list markers, the
	   clock, the showcase watermark. A weight below --accent-bright, which is
	   the accent as type. On paper both have to travel downward in value, so
	   they are tokens rather than direct uses of --accent. */
	--accent-ink: var(--accent);

	/* Type that sits on an accent fill rather than beside one. */
	--on-accent: #14100a;
	--on-accent-bright: #14100a;

	/* Fixed in both modes: these darken photographs, not the page. */
	--scrim: #090b0f;
	--media-bg: #0e2233;
	--media-tint: #16303c;
	--media-shade: #101922;

	--shadow: rgba(0, 0, 0, 0.45);
	--grain-opacity: 0.05;
	--grain-blend: overlay;

	--font-display: "Gambarino", "Iowan Old Style", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--measure: 680px;
	--container: 1180px;
	--rail: 44px;
	--sidebar: 320px;
	--gutter: 24px;

	--radius: 0;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Section identity. Deliberately close in value — these tint the page, they
   do not repaint it. */
.bc-t--9-30-brief {
	--accent: #3fb8c9;
	--accent-bright: #74dced;
}
.bc-t--brand-thinking {
	--accent: #d9a544;
	--accent-bright: #f0c363;
}
.bc-t--campaign-thinking {
	--accent: #dd7a52;
	--accent-bright: #f0996f;
}
.bc-t--career-thinking {
	--accent: #4a7c8c;
	--accent-bright: #6fa5b6;
}
.bc-t--cmo-playbook {
	--accent: #c78f5a;
	--accent-bright: #e0ac79;
}
.bc-t--marketing-fundamentals {
	--accent: #8a9a6b;
	--accent-bright: #adbd8c;
}
.bc-t--consumer-thinking {
	--accent: #9b7aa6;
	--accent-bright: #bb9bc6;
}
.bc-t--industry-insights {
	--accent: #6f8fa6;
	--accent-bright: #93b3c9;
}
/* The one achromatic section — see the note in bc_topics(). */
.bc-t--contributors {
	--accent: #8b93a1;
	--accent-bright: #b6bcc7;
}

/* --accent-ink follows --accent, and has to be resolved on the element that
   carries the section class for the same substitution reason. */
[class*="bc-t--"] {
	--accent-ink: var(--accent);
}

/* ---------- Light mode --------------------------------------------------
   Dark is the base palette; light is a single override block, and there is
   deliberately no `prefers-color-scheme` copy of it.

   The reason is the section accents. `.bc-t--*` sets --accent at (0,1,0), so
   any :root-level override of the accent tokens outranks it and would flatten
   all nine sections to one hue. Getting that right needs the extra
   `[class*="bc-t--"]` rule below — and maintaining two copies of the whole
   block, one media-gated and one attribute-gated, is exactly the kind of
   drift this stylesheet is built in parts to avoid.

   So the system preference is resolved in JS instead: the inline script in
   bc_theme_boot() reads prefers-color-scheme, writes an explicit
   data-theme="light|dark" on <html> before first paint, and keeps it in step
   with the OS while the page is open. One switch, one block. With JS off the
   site stays dark, which is its designed default rather than a fallback.
   ------------------------------------------------------------------------- */

:root[data-theme="light"] {
	color-scheme: light;

	/* Warm paper, not white — the dark palette's ink is warm and a cold grey
	   ground makes the same golds look muddy. */
	--bg-0: #fbfaf6;
	--bg-1: #f2efe6;
	--bg-2: #e8e4d8;
	--line: #ddd8c9;

	--ink: #191b20;
	--ink-body: #383c44;
	--ink-dim: #63686f;
	--ink-faint: #9a9ea6;
	--ink-bright: #0b0d11;
	--ink-strong: #14161a;
	--ink-soft: #3a3f47;

	/* The brand hues carry to paper by darkening, not by desaturating. */
	--gold: #b4801f;
	--gold-bright: #7d5610;
	--teal: #35606e;
	--coral: #b4512c;

	/* --accent stays the section's own hue: it is a fill and a tint here, and
	   both read correctly on paper. --accent-bright is the text weight, so it
	   has to invert its direction — deeper than --accent, not lighter. */
	--accent-bright: color-mix(in srgb, var(--accent) 62%, #14100a);
	--accent-ink: color-mix(in srgb, var(--accent) 52%, #14100a);
	--on-accent-bright: #fbf8f2;

	--shadow: rgba(24, 26, 32, 0.16);
	/* Overlay noise on a light ground brightens it; multiply keeps the tooth. */
	--grain-opacity: 0.035;
	--grain-blend: multiply;
}

/* Re-derived on the element that carries the section class, so --accent is
   that section's hue rather than the root default. Outranks the .bc-t--*
   declaration of --accent-bright above. */
:root[data-theme="light"] [class*="bc-t--"] {
	--accent-bright: color-mix(in srgb, var(--accent) 62%, #14100a);
	--accent-ink: color-mix(in srgb, var(--accent) 52%, #14100a);
}

/* Surfaces that stay dark on paper.

   A hero scrim, a card thumbnail and an avatar tile all sit on a photograph
   or a dark fill, so they keep their own ground in light mode — and the type
   over them has to keep the dark palette's ink with it. Flipping these to
   paper instead would mean either light type on a light scrim, or a
   photograph married to a white page by a white gradient, which reads as a
   printing fault.

   --accent-bright is re-derived upward here, the mirror of the rule above:
   over a dark ground the accent's text weight is lighter than the fill, not
   deeper. */
:root[data-theme="light"] .bc-hero,
:root[data-theme="light"] .bc-lead,
:root[data-theme="light"] .bc-card-post__thumb,
:root[data-theme="light"] .bc-top-item__thumb,
:root[data-theme="light"] .bc-avatar {
	--ink: #eae6db;
	--ink-body: #c9c6bd;
	--ink-dim: #9a9fa8;
	--ink-faint: #5e636d;
	--ink-bright: #fbf8f2;
	--ink-strong: #f2ede1;
	--ink-soft: #d7d2c4;
	--gold-bright: #f0c363;
	--accent-bright: color-mix(in srgb, var(--accent) 70%, #fbf8f2);
	--accent-ink: var(--accent);
}

/* ---------- Reset ------------------------------------------------------- */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg-0);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	position: relative;
}

/* Film grain. Large flat dark surfaces read as cheap plastic on a good screen;
   a little noise gives them the tooth of printed stock. Inline SVG turbulence,
   so no image request. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--grain-opacity);
	mix-blend-mode: var(--grain-blend);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Keep real content above the grain. */
.bc-nav,
main,
.bc-footer,
.bc-progress {
	position: relative;
	z-index: 2;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

button,
input {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 3px;
}

::selection {
	background: var(--gold);
	color: var(--on-accent);
}

ul,
ol {
	list-style: none;
}

/* ---------- Utilities --------------------------------------------------- */

.bc-shell {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--gold);
	color: var(--on-accent);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
}

.bc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-bright);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
	padding: 5px 12px;
	transition: background 0.2s var(--ease);
}

a.bc-kicker:hover {
	background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The kicker dot borrows the beacon's rhythm — a slow blink, not a throb. */
.bc-kicker .dot {
	width: 5px;
	height: 5px;
	background: var(--accent-bright);
	flex: none;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 70%, transparent);
	animation: bc-blink 4s ease-in-out infinite;
}

@keyframes bc-blink {
	0%,
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 60%, transparent);
	}
	50% {
		box-shadow: 0 0 0 5px transparent;
	}
}

.bc-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-bright);
	display: flex;
	align-items: center;
	gap: 8px;
}

.bc-eyebrow::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--accent);
}


/* ---------- Monogram draw-on ----------------------------------------------
   One system for every mark on the site. The path carries both a fill and a
   stroke; the stroke is dashed to its own length and unrolled, then the fill
   arrives behind it — so the monogram draws itself rather than fading in.

   --bc-len is written per path by JS from getTotalLength(), so this works for
   any glyph added later without a hardcoded number. Marks stay in their final
   state until JS marks them ready, which means no-JS renders the finished
   monogram rather than an empty box.
   -------------------------------------------------------------------------- */

.bc-glyph--draw.is-ready .bc-glyph__path {
	stroke-dasharray: var(--bc-len);
	stroke-dashoffset: var(--bc-len);
	fill-opacity: 0;
}

.bc-glyph--draw.is-drawn .bc-glyph__path {
	stroke-dashoffset: 0;
	fill-opacity: 1;
	transition:
		stroke-dashoffset var(--bc-draw-ms, 700ms) var(--ease),
		fill-opacity 260ms var(--ease) calc(var(--bc-draw-ms, 700ms) * 0.55);
}

/* Hover / focus: anything interactive that contains a mark redraws it. */
a:hover > .bc-glyph--draw.is-ready .bc-glyph__path,
a:focus-visible > .bc-glyph--draw.is-ready .bc-glyph__path,
button:hover > .bc-glyph--draw.is-ready .bc-glyph__path,
.bc-glyph--draw.is-ready:hover .bc-glyph__path {
	stroke-dashoffset: 0;
	fill-opacity: 1;
	transition:
		stroke-dashoffset 400ms var(--ease),
		fill-opacity 200ms var(--ease) 180ms;
}

/* A logo supplied as assets/img/logo.svg, inlined. Height is set on the tag;
   width follows from the viewBox. */
.bc-mark--file {
	display: block;
	width: auto;
	flex: none;
}

/*!
 * BrandCustodian — Masthead: dateline, identity row, section rail, subscribe panel, reading progress.
 */

/* ---------- Reading progress -------------------------------------------- */

/* Only shown where the beacon rail isn't. Two indicators measuring the same
   scroll on the same screen is one too many — the rail is the branded one, so
   the bar is reserved for viewports too narrow to show it. */
.bc-progress {
	position: fixed;
	inset: 0 auto auto 0;
	height: 2px;
	width: 100%;
	transform: scaleX(var(--bc-progress, 0));
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--accent), var(--accent-bright));
	z-index: 60;
	pointer-events: none;
	display: none;
}

@media (max-width: 980px) {
	.bc-progress {
		display: block;
	}
}

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

.bc-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg-0) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

/* Dateline strip. Small, quiet, and the single thing that most makes a page
   read as a publication rather than a blog.

   Outside the sticky masthead: it scrolls away like ordinary content, so the
   sticky part never changes height and never jolts the page. */
.bc-dateline {
	border-bottom: 1px solid var(--line);
	background: var(--bg-0);
}

.bc-dateline__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 7px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

@media (max-width: 700px) {
	.bc-dateline__positioning {
		display: none;
	}
}

.bc-nav__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 16px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Section rail — its own full-width row, because seven two-word names cannot
   share a line with the wordmark without wrapping. */
.bc-sections {
	border-top: 1px solid var(--line);
	/* `overflow-x: auto` alone forces `overflow-y` to compute to `auto` as well,
	   which quietly turned the rail into a vertical scroll container — a couple
	   of stray pixels of content was enough that a wheel over the masthead
	   scrolled the nav instead of the page. Pinning the y axis to `hidden`
	   keeps the horizontal safety net without the trap. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.bc-sections::-webkit-scrollbar {
	display: none;
}

.bc-sections__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bc-sections ul {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-width: max-content;
}

.bc-sections a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	/* --- see the media query below for the narrow-desktop tightening --- */
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--ink-dim);
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.bc-sections li:first-child a {
	padding-left: 0;
}

.bc-sections .bc-glyph {
	color: var(--accent-ink);
	opacity: 0.5;
	transition: opacity 0.2s var(--ease);
}

.bc-sections a:hover {
	color: var(--ink-bright);
	background: color-mix(in srgb, var(--accent) 7%, transparent);
	border-bottom-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.bc-sections a:hover .bc-glyph {
	opacity: 1;
}

.bc-sections .is-current a {
	color: var(--ink-bright);
	border-bottom-color: var(--accent-bright);
}

.bc-sections .is-current .bc-glyph {
	opacity: 1;
}

/* Scrolled state. Deliberately changes nothing about the masthead's size — a
   sticky element occupies its space in normal flow, so shrinking it mid-scroll
   shortens the document and drags the page up under the reader. It earns a
   shadow instead, which says "floating above" without moving anything. */
.bc-nav.is-stuck {
	box-shadow: 0 10px 30px var(--shadow);
	border-bottom-color: color-mix(in srgb, var(--gold) 22%, var(--line));
}

@media (max-width: 900px) {
	.bc-sections {
		display: none;
	}
}

.bc-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 0.2px;
	color: var(--ink);
	flex: none;
}

.bc-brand .bc-mark {
	color: var(--gold);
	flex: none;
}

.bc-brand__custom img {
	max-height: 34px;
	width: auto;
}

/* The nav element wraps a <ul>, so the flex context has to live on the list —
   putting it on the wrapper leaves the items stacked. */
.bc-nav__links ul {
	display: flex;
	align-items: center;
	gap: 28px;
}

.bc-nav__links {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2px;
	color: var(--ink-dim);
	min-width: 0;
}

.bc-nav__links a {
	transition: color 0.2s var(--ease);
}

.bc-nav__links a:hover,
.bc-nav__links .current-menu-item > a {
	color: var(--gold-bright);
}

.bc-nav__cta {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bc-btn {
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	font-size: 13px;
	padding: 9px 18px;
	border: 0;
	cursor: pointer;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.bc-btn:hover {
	background: var(--accent-bright);
	color: var(--on-accent-bright);
	transform: translateY(-1px);
}

.bc-icon-btn {
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	background: none;
	display: grid;
	place-items: center;
	color: var(--ink-dim);
	cursor: pointer;
	flex: none;
	transition: 0.2s var(--ease);
}

.bc-icon-btn:hover {
	border-color: var(--accent);
	color: var(--accent-bright);
}

/* Hamburger */

.bc-burger {
	display: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	background: none;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: none;
}

.bc-burger span {
	width: 16px;
	height: 1.5px;
	background: var(--ink);
	transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.bc-burger.is-open span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.bc-burger.is-open span:nth-child(2) {
	opacity: 0;
}
.bc-burger.is-open span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.bc-mobile-nav {
	max-height: 0;
	overflow: hidden;
	background: var(--bg-0);
	border-bottom: 1px solid transparent;
	transition: max-height 0.3s var(--ease), border-color 0.3s var(--ease);
}

.bc-mobile-nav.is-open {
	/* Eight rows carrying a monogram each, plus the appearance row. Generous on
	   purpose — a max-height that just fits clips the last section the moment a
	   name wraps. */
	max-height: 720px;
	border-color: var(--line);
}

.bc-mobile-nav ul {
	padding: 6px var(--gutter) 20px;
	display: flex;
	flex-direction: column;
}

.bc-mobile-nav a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-dim);
	border-bottom: 1px solid var(--line);
	transition: color 0.2s var(--ease);
}

/* On a phone this is the only navigation there is, so the section marks matter
   more here than anywhere: eight rows of grey text is exactly the anonymity
   they exist to prevent. Each sits in its own ink, in a plate that squares off
   the list. */
.bc-mobile-nav .bc-glyph {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 8px;
	color: var(--accent-ink);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.bc-mobile-nav li:last-child a {
	border-bottom: 0;
}

.bc-mobile-nav a:hover,
.bc-mobile-nav a:active {
	color: var(--ink-bright);
}

.bc-mobile-nav a:hover .bc-glyph,
.bc-mobile-nav a:active .bc-glyph {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	border-color: var(--accent);
}

@media (max-width: 900px) {
	.bc-nav__links {
		display: none;
	}
	.bc-burger {
		display: flex;
	}
}

@media (min-width: 901px) {
	.bc-mobile-nav {
		display: none;
	}
}

/* ---------- Appearance ----------------------------------------------------
   A segmented switch, not three buttons: the thumb is the only thing that
   moves, so the control reads as one object with a position rather than a row
   of controls that happen to be adjacent. Square, like everything else here —
   a pill would be the one rounded corner on the site.

   Rendered twice and shown once. Above 900px it sits in the masthead; below,
   where the burger takes over the navigation, it moves into the menu with the
   rest of it. Sharing one breakpoint with the burger is what keeps the
   masthead from carrying three controls beside the wordmark at 375px.
   -------------------------------------------------------------------------- */

.bc-theme {
	--bc-seg: 26px;

	/* Inert without JS, so it is not shown without JS. bc-js is set by the
	   inline boot script before first paint — the control never appears and
	   then vanishes. */
	display: none;
	position: relative;
	align-items: center;
	padding: 2px;
	border: 1px solid var(--line);
	background: var(--bg-1);
	flex: none;
}

.bc-js .bc-theme {
	display: inline-flex;
}

/* The moving part. Lit rather than filled: gold is rationed on this site, and
   a solid gold block here would be the brightest surface on the page. */
.bc-theme__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: var(--bc-seg);
	height: var(--bc-seg);
	background: var(--bg-0);
	border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
	transition: translate 0.3s var(--ease);
}

/* Driven by the attribute the boot script writes, so the thumb is already in
   position on the first frame — there is no settle after load. */
[data-theme-choice="light"] .bc-theme__thumb {
	translate: 100% 0;
}

[data-theme-choice="dark"] .bc-theme__thumb {
	translate: 200% 0;
}

.bc-theme__opt {
	position: relative;
	z-index: 1;
	width: var(--bc-seg);
	height: var(--bc-seg);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-faint);
	cursor: pointer;
	transition: color 0.2s var(--ease);
}

.bc-theme__opt:hover {
	color: var(--ink-dim);
}

.bc-theme__opt[aria-pressed="true"] {
	color: var(--gold-bright);
}

/* ---- Placement ---- */

@media (max-width: 900px) {
	.bc-js .bc-theme--bar {
		display: none;
	}
}

@media (min-width: 901px) {
	.bc-js .bc-theme--menu {
		display: none;
	}
}

/* The menu instance is a labelled row rather than a lone icon cluster: there
   is room for the label here, and the reader is already in a list of named
   things. */
.bc-mobile-nav__appearance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px var(--gutter) 20px;
	border-top: 1px solid var(--line);
}

.bc-mobile-nav__appearance-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.bc-theme--menu {
	--bc-seg: 30px;
}

/* One frame while the palette is swapped — see the note in main.js. */
.bc-repaint *,
.bc-repaint *::before,
.bc-repaint *::after {
	transition: none !important;
}

/* Exempt: the thumb's slide is the feedback for the click that caused the
   repaint, and it moves in the same frame the suppression is applied. Without
   this it would jump to the new position instead of travelling there. */
.bc-repaint .bc-theme__thumb {
	transition: translate 0.3s var(--ease) !important;
}

/* ---------- Subscribe (masthead) ------------------------------------------
   The control and its panel. Both were plain before: a filled gold pill and a
   panel that snapped open because `hidden` cannot be transitioned.
   -------------------------------------------------------------------------- */

.bc-subscribe__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
	color: var(--gold-bright);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* A gold wipe crossing the control, rather than a colour swap. */
.bc-subscribe__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gold);
	translate: -101% 0;
	transition: translate 0.36s var(--ease);
}

.bc-subscribe__toggle:hover,
.bc-subscribe__toggle[aria-expanded="true"] {
	border-color: var(--gold);
	color: var(--on-accent);
}

.bc-subscribe__toggle:hover::before,
.bc-subscribe__toggle[aria-expanded="true"]::before {
	translate: 0 0;
}

.bc-subscribe__toggle-mark,
.bc-subscribe__toggle-label {
	position: relative;
	z-index: 1;
}

.bc-subscribe__toggle-mark {
	display: grid;
	place-items: center;
	transition: translate 0.36s var(--ease);
}

/* The envelope lifts as the wipe passes under it. */
.bc-subscribe__toggle:hover .bc-subscribe__toggle-mark {
	translate: 0 -1px;
}

/* Lit in the 24 hours before an edition goes out. */
.bc-subscribe__live {
	position: relative;
	z-index: 1;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3fb8c9;
	box-shadow: 0 0 0 0 rgba(63, 184, 201, 0.7);
	animation: bc-subscribe-live 2.4s ease-out infinite;
}

@keyframes bc-subscribe-live {
	0%   { box-shadow: 0 0 0 0 rgba(63, 184, 201, 0.7); }
	70%  { box-shadow: 0 0 0 7px rgba(63, 184, 201, 0); }
	100% { box-shadow: 0 0 0 0 rgba(63, 184, 201, 0); }
}

@media (max-width: 520px) {
	.bc-subscribe__toggle-label {
		display: none;
	}
	.bc-subscribe__toggle {
		padding-inline: 12px;
	}
}

/* ---- The panel ---- */

.bc-subscribe {
	position: relative;
	display: grid;
	/* 0fr -> 1fr is the honest way to transition to auto height. */
	grid-template-rows: 0fr;
	border-top: 1px solid transparent;
	background:
		radial-gradient(50% 140% at 20% 0%, rgba(217, 165, 68, 0.12), transparent 65%),
		var(--bg-1);
	transition:
		grid-template-rows 0.38s var(--ease),
		border-color 0.38s var(--ease);
}

.bc-subscribe__reveal {
	overflow: hidden;
	min-height: 0;
	/* Keeps the collapsed form out of the tab order without `hidden`, which
	   would defeat the transition. */
	visibility: hidden;
	transition: visibility 0s linear 0.38s;
}

.bc-subscribe.is-open {
	grid-template-rows: 1fr;
	border-top-color: var(--line);
}

.bc-subscribe.is-open .bc-subscribe__reveal {
	visibility: visible;
	transition-delay: 0s;
}

/* A hairline sweeping the full width as it opens: a broadcast lower-third
   resolving, not a drawer sliding.

   Absolutely positioned on purpose. As a normal pseudo-element it becomes a
   grid item, and because it was explicitly placed in row 1, auto-placement
   pushed the actual panel into row 2 — which sits outside `grid-template-rows:
   0fr` and so never collapsed. The closed panel held 124px of dead space
   between the nav and the hero. */
.bc-subscribe::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
	scale: 0 1;
	transform-origin: left;
	transition: scale 0.5s var(--ease);
}

.bc-subscribe.is-open::after {
	scale: 1 1;
}

.bc-subscribe__inner {
	position: relative;
	display: grid;
	gap: 16px 40px;
	align-items: center;
	padding-block: 22px;
}

@media (min-width: 760px) {
	/* An `auto` track shrank to the button's width and left the email field a
	   few pixels wide. Give the form a real column to fill. */
	.bc-subscribe__inner {
		grid-template-columns: 1fr minmax(340px, 440px);
	}
}

/* Contents arrive just behind the panel, staggered, so the reveal has a
   direction instead of everything appearing at once. */
.bc-subscribe__copy,
.bc-subscribe .bc-newsletter {
	opacity: 0;
	translate: 0 8px;
	transition: opacity 0.3s var(--ease), translate 0.3s var(--ease);
}

.bc-subscribe.is-open .bc-subscribe__copy {
	opacity: 1;
	translate: 0 0;
	transition-delay: 0.12s;
}

.bc-subscribe.is-open .bc-newsletter {
	opacity: 1;
	translate: 0 0;
	transition-delay: 0.2s;
}

.bc-subscribe__copy {
	min-width: 0;
}

.bc-subscribe__pitch {
	font-family: var(--font-display);
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1.25;
	color: var(--ink-bright);
	margin-top: 8px;
	max-width: 40ch;
}

.bc-subscribe .bc-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	padding-right: 40px;
}

.bc-subscribe .bc-newsletter input {
	flex: 1;
	min-width: 0;
	background: var(--bg-0);
	border: 1px solid var(--line);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--ink);
	transition: border-color 0.2s var(--ease);
}

.bc-subscribe .bc-newsletter input:focus {
	outline: none;
	border-color: var(--gold);
}

.bc-subscribe .bc-newsletter button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding-inline: 18px;
}

/* ---- The form itself ----
   Shared by the masthead panel and the sidebar card; each lays it out. */

.bc-newsletter {
	position: relative;
}

.bc-newsletter button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* The honeypot. Off-screen rather than display:none — some bots skip anything
   hidden, and a real reader can neither see it nor tab to it. */
.bc-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* One region for both paths: the script writes into it, and the no-JS redirect
   arrives with it already filled. Takes a whole row of the masthead's flex
   layout rather than squeezing in beside the field. */
.bc-newsletter__status {
	flex: 0 0 100%;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--accent-bright);
	transition: max-height 0.3s var(--ease), margin 0.3s var(--ease);
}

.bc-newsletter__status.is-shown {
	max-height: 5em;
	margin-top: 4px;
}

.bc-newsletter__status.is-error {
	color: var(--coral);
}

/* A submission in flight. The control stays put and stops responding rather
   than disappearing, so the panel does not resize under the reader's cursor. */
.bc-newsletter.is-busy input,
.bc-newsletter.is-busy button {
	opacity: 0.55;
	pointer-events: none;
}

.bc-subscribe__close {
	position: absolute;
	top: 10px;
	right: 0;
	width: 30px;
	height: 30px;
	border: 1px solid var(--line);
	background: none;
	color: var(--ink-dim);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.bc-subscribe__close:hover {
	color: var(--gold-bright);
	border-color: var(--gold);
}


/* Between the mobile breakpoint and a comfortable desktop, eight sections and
   their monograms are close to the container width. Tightening the gutters
   here is cheaper than hiding sections behind a control. */
@media (min-width: 900px) and (max-width: 1120px) {
	.bc-sections a {
		padding-inline: 11px;
		gap: 6px;
		font-size: 12px;
	}
}

/*!
 * BrandCustodian — Single article: hero, meta bar, layout, body typography, plugin blocks, sources, TOC, share.
 */

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

.bc-hero {
	position: relative;
	overflow: hidden;
	height: min(72vh, 620px);
	min-height: 400px;
	background: var(--media-bg);
}

.bc-hero__media,
.bc-hero__media img,
.bc-beacon-art {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim plus a corner vignette — the flat linear fade alone leaves the top
   corners washed out and the headline floating. */
.bc-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 0%, transparent 40%, color-mix(in srgb, var(--scrim) 50%, transparent) 100%),
		linear-gradient(
			0deg,
			var(--scrim) 2%,
			color-mix(in srgb, var(--scrim) 45%, transparent) 42%,
			color-mix(in srgb, var(--scrim) 5%, transparent) 70%
		);
}

/* The sweeping beam. Two opposed cones rotating about the lamp. */
.bc-beacon-art__beams {
	transform-origin: 189px 368px;
	animation: bc-sweep 14s linear infinite;
	mix-blend-mode: screen;
}

.bc-beacon-art__beam {
	filter: blur(6px);
}

/* The trailing cone. Softer and dimmer than the leading one, so the pair reads
   as one lamp throwing light both ways rather than two equal beams. */
.bc-beacon-art__beam--b {
	filter: blur(10px);
	opacity: 0.55;
}

.bc-beacon-art__lamp {
	transform-origin: 189px 368px;
	animation: bc-pulse 14s ease-in-out infinite;
}

@keyframes bc-sweep {
	to {
		transform: rotate(360deg);
	}
}

@keyframes bc-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.55;
	}
}

.bc-hero__content {
	position: absolute;
	inset: auto 0 0 0;
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 var(--gutter) 44px;
}

.bc-hero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 5.2vw, 58px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	max-width: 820px;
	color: var(--ink-bright);
	margin-top: 18px;
}

/* The wordmark drops italic letters into roman words; headlines inherit that
   trick through <em>. */
/* Gambarino has no italic, so the wordmark's "one word set apart" trick is
   carried by the accent ink instead of a slant. */
.bc-hero__title em,
.bc-display em,
.bc-lead__title em,
.bc-showcase__title em {
	font-style: normal;
	color: var(--accent-bright);
}

.bc-hero__title a:hover {
	color: var(--gold-bright);
}

@media (max-width: 600px) {
	.bc-hero {
		height: min(56vh, 420px);
		min-height: 300px;
	}
	.bc-hero__content {
		padding: 0 16px 26px;
	}
	.bc-kicker {
		font-size: 10.5px;
		padding: 4px 10px;
	}
}

/* ---------- Meta bar ---------------------------------------------------- */

.bc-meta-bar {
	max-width: var(--container);
	margin-inline: auto;
	padding: 22px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid var(--line);
}

.bc-author-line {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13.5px;
	color: var(--ink-dim);
	flex-wrap: wrap;
	row-gap: 6px;
}

.bc-author-line strong {
	color: var(--ink);
	font-weight: 600;
}

.bc-author-line a:hover {
	color: var(--gold-bright);
}

.bc-avatar {
	width: 36px;
	height: 36px;
	object-fit: cover;
	background: linear-gradient(150deg, var(--teal), #2b4750);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--gold-bright);
	font-size: 14px;
	flex: none;
}

.bc-sep {
	color: var(--ink-faint);
}

.bc-share {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* Sticky rail beside the article — sharing has to still be reachable at the
   point a reader decides to share, which is never the top of the page. */
.bc-share--rail {
	flex-direction: column;
	gap: 8px;
}

.bc-share--rail .bc-icon-btn {
	width: 36px;
	height: 36px;
}

@media (max-width: 980px) {
	.bc-share--rail {
		display: none;
	}
}

/* And again at the foot, where the decision actually gets made. */
.bc-share--foot {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	flex-wrap: wrap;
	gap: 12px;
}

.bc-share__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-right: 6px;
}

@media (max-width: 600px) {
	.bc-meta-bar {
		padding: 16px;
		gap: 12px;
	}
	.bc-author-line {
		font-size: 12.5px;
	}
	.bc-share .bc-icon-btn {
		width: 30px;
		height: 30px;
	}
}

/* ---------- Article layout ---------------------------------------------- */

.bc-layout {
	max-width: var(--container);
	margin-inline: auto;
	padding: 56px var(--gutter) 40px;
	display: grid;
	grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--sidebar);
	gap: 40px;
	align-items: start;
}

@media (max-width: 1100px) {
	.bc-layout {
		grid-template-columns: var(--rail) minmax(0, 1fr);
	}
	.bc-sidebar {
		grid-column: 1 / -1;
	}
}

@media (max-width: 980px) {
	.bc-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.bc-sidebar {
		order: 3;
		position: static;
	}
}

@media (max-width: 600px) {
	.bc-layout {
		padding: 32px 16px 24px;
		gap: 32px;
	}
}

/* The beacon rail — the lighthouse, turned into a reading indicator. This is
   the signature device; it is why the metaphor is worth keeping. */
/* The column stretches with the article; the contents stick. Making the column
   itself a fixed viewport height would force the whole grid row to that height
   and leave a short article floating in dead space. */
.bc-rail {
	align-self: stretch;
	display: flex;
	justify-content: center;
}

.bc-rail__sticky {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	height: min(calc(100vh - 180px), 100%);
}

.bc-rail__track {
	position: relative;
	width: 2px;
	flex: 1;
	min-height: 80px;
	background: var(--line);
	overflow: hidden;
}

.bc-rail__fill {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: calc(var(--bc-read, 0) * 100%);
	background: linear-gradient(180deg, var(--accent-bright), var(--accent));
	transition: height 0.12s linear;
}

.bc-rail__fill::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 9px;
	height: 9px;
	background: var(--gold-bright);
	box-shadow: 0 0 12px 3px color-mix(in srgb, var(--accent-bright) 65%, transparent);
}

@media (max-width: 980px) {
	.bc-rail {
		display: none;
	}
}

.bc-article {
	min-width: 0;
}

/* ---------- Article body ------------------------------------------------ */

.bc-lede {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin-bottom: 34px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--line);
}

.bc-content {
	font-size: 16.5px;
	color: var(--ink-body);
}

.bc-content > * + * {
	margin-top: 22px;
}

.bc-content p {
	margin-bottom: 22px;
}

/* Drop cap on the opening paragraph only — and only on editorial writing. A
   privacy policy opening "Effective date: 16/07/2026" gets a display-size "E"
   hanging off a line of administrative text, which reads as a mistake. */
.bc-page .bc-content > p:first-of-type::first-letter {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	float: none;
	line-height: inherit;
	padding: 0;
}

.bc-content > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 64px;
	font-weight: 400;
	color: var(--accent-bright);
	float: left;
	line-height: 0.8;
	padding: 8px 8px 0 0;
}

.bc-content h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 29px;
	color: var(--ink-bright);
	margin: 46px 0 18px;
	letter-spacing: -0.005em;
}

.bc-content h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	color: var(--ink-bright);
	margin: 34px 0 14px;
}

.bc-content a:not(.bc-kicker) {
	color: var(--accent-bright);
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
	transition: border-color 0.2s var(--ease);
}

.bc-content a:not(.bc-kicker):hover {
	border-bottom-color: var(--accent-bright);
}

.bc-content ul,
.bc-content ol {
	padding-left: 22px;
	margin-bottom: 22px;
}

.bc-content ul li {
	list-style: disc;
}

.bc-content ol li {
	list-style: decimal;
}

.bc-content li + li {
	margin-top: 8px;
}

.bc-content li::marker {
	color: var(--accent-ink);
}

.bc-content img,
.bc-content figure {
	margin-block: 28px;
}

.bc-content figcaption {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--ink-faint);
	margin-top: 10px;
}

.bc-content hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin-block: 38px;
}

.bc-content blockquote,
.bc-pull-quote {
	margin-block: 38px;
	padding: 28px 32px;
	background: var(--bg-1);
	border-left: 2px solid var(--accent);
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.45;
	color: var(--ink-strong);
}

/* Tables — real headers, ruled like a ledger. */
.bc-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	font-family: var(--font-body);
}

/* Core's table block ships 1px borders on every cell, which turns an editorial
   table into a spreadsheet. Only horizontal rules survive. */
.bc-content th,
.bc-content td,
.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--line);
}

.bc-content th,
.wp-block-table th {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--accent-bright);
	padding: 12px 18px 12px 0;
	border-bottom: 1px solid var(--accent);
}

.bc-content td,
.wp-block-table td {
	padding: 12px 18px 12px 0;
	vertical-align: top;
	color: var(--ink-body);
}

.bc-content tr:last-child td,
.wp-block-table tr:last-child td {
	border-bottom: 0;
}

.wp-block-table {
	overflow-x: auto;
}

@media (max-width: 600px) {
	.bc-lede {
		font-size: 18px;
		margin-bottom: 24px;
		padding-bottom: 22px;
	}
	.bc-content {
		font-size: 15.5px;
	}
	.bc-content p {
		margin-bottom: 18px;
	}
	.bc-content > p:first-of-type::first-letter {
		font-size: 48px;
		padding: 4px 6px 0 0;
	}
	.bc-content h2 {
		font-size: 23px;
		margin: 34px 0 14px;
	}
	.bc-content blockquote,
	.bc-pull-quote {
		padding: 20px;
		font-size: 19px;
		margin-block: 28px;
	}
}

/* ---------- Plugin blocks ----------------------------------------------- */

/* The Answer block is the passage an answer engine lifts. It should be the
   most quotable object on the page and look like it was built to be quoted. */
.wp-block-yourplugin-answer,
.yp-answer {
	position: relative;
	margin-block: 34px;
	padding: 26px 30px;
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.5;
	color: var(--ink-strong);
}

.wp-block-yourplugin-answer::before,
.yp-answer::before {
	content: "Answer";
	position: absolute;
	top: -9px;
	left: 26px;
	padding: 0 8px;
	background: var(--bg-0);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-bright);
}

.wp-block-yourplugin-expert-quote,
.yp-expert-quote {
	margin-block: 38px;
	padding: 28px 32px;
	background: var(--bg-1);
	border-left: 2px solid var(--accent);
}

.yp-expert-quote__text {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.45;
	color: var(--ink-strong);
	margin: 0;
}

.yp-expert-quote__author,
.yp-expert-quote__source {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-style: normal;
	color: var(--ink-faint);
	margin-top: 12px;
}

.yp-expert-quote__source a:hover {
	color: var(--gold-bright);
}

.yp-statistic {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 18px;
	margin-block: 34px;
	padding: 24px 0;
	border-top: 1px solid var(--accent);
	border-bottom: 1px solid var(--line);
}

.yp-statistic__value {
	font-family: var(--font-display);
	font-size: clamp(40px, 8vw, 58px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--accent-bright);
}

.yp-statistic__unit {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--ink-dim);
}

.yp-statistic__label {
	flex: 1 1 220px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ink-body);
}

.yp-statistic__source {
	flex-basis: 100%;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.yp-statistic__source:hover {
	color: var(--gold-bright);
}

.yp-citation-marker {
	font-family: var(--font-mono);
	font-size: 0.7em;
	vertical-align: super;
	font-weight: 500;
	color: var(--accent-bright);
	padding-inline: 0.15em;
}

/* ---------- Also-read inline card --------------------------------------- */

.bc-also-read {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-block: 34px;
	padding: 16px 20px;
	background: var(--bg-1);
	border: 1px solid var(--line);
}

.bc-also-read__tag {
	font-family: var(--font-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--teal);
	background: rgba(74, 124, 140, 0.15);
	padding: 4px 9px;
	flex: none;
}

.bc-also-read a {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	border-bottom: 1px solid transparent;
	transition: 0.2s var(--ease);
}

.bc-also-read a:hover {
	color: var(--gold-bright);
	border-color: var(--gold-bright);
}

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

.bc-sources {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.bc-sources__title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-bright);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.bc-sources__title::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--accent);
}

.bc-sources__list {
	counter-reset: bc-source;
}

.bc-sources__list li {
	counter-increment: bc-source;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 12px;
	padding-block: 14px;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}

.bc-sources__list li::before {
	content: counter(bc-source, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--ink-faint);
}

.bc-sources__list a:hover {
	color: var(--gold-bright);
}

.bc-sources__publisher {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 4px;
}

/* ---------- Tags + foot actions ----------------------------------------- */

.bc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 44px 0 30px;
}

.bc-tags a,
.bc-tags span {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--ink-dim);
	border: 1px solid var(--line);
	padding: 6px 13px;
	transition: 0.2s var(--ease);
}

.bc-tags--tight {
	margin: 0;
	gap: 6px;
}

.bc-tags--tight a {
	font-size: 10.5px;
	padding: 4px 9px;
}

.bc-tags a:hover {
	border-color: var(--gold);
	color: var(--gold-bright);
}

.bc-foot-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}

/* Breadcrumbs — a trail, not a row of chips. */
.bc-breadcrumbs {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
	margin-bottom: 22px;
}

.bc-breadcrumbs a {
	color: var(--ink-dim);
	transition: color 0.2s var(--ease);
}

.bc-breadcrumbs a:hover {
	color: var(--gold-bright);
}

.bc-breadcrumbs .separator {
	padding-inline: 6px;
	color: var(--line);
}

/* Editor-only score badge */
.bc-score {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border: 1px dashed var(--line);
	color: var(--ink-faint);
	margin-bottom: 18px;
}

.bc-score a:hover {
	color: var(--gold-bright);
}

/* ---------- Author box ---------------------------------------------------- */

.bc-author-box {
	display: grid;
	gap: 20px;
	margin-top: 40px;
	padding: 26px 28px;
	background:
		radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
		var(--bg-1);
	border: 1px solid var(--line);
}

@media (min-width: 640px) {
	.bc-author-box {
		grid-template-columns: 72px 1fr;
		gap: 24px;
		align-items: start;
	}
}

.bc-author-box__avatar {
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.bc-author-box__name {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--ink-bright);
	margin: 8px 0 6px;
}

.bc-author-box__name a:hover {
	color: var(--gold-bright);
}

.bc-author-box__creds {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--accent-bright);
	margin-bottom: 10px;
}

.bc-author-box__bio {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-body);
}

.bc-author-box__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 16px;
}

/* ---------- Adjacent post navigation -------------------------------------- */

.bc-adjacent {
	display: grid;
	gap: 12px;
	margin-top: 40px;
}

@media (min-width: 640px) {
	.bc-adjacent {
		grid-template-columns: 1fr 1fr;
	}
}

.bc-adjacent__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	background: var(--bg-1);
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.bc-adjacent__link:hover {
	border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
	background: var(--bg-2);
}

.bc-adjacent__link--next {
	text-align: right;
}

.bc-adjacent__dir {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.bc-adjacent__link--next .bc-adjacent__dir {
	justify-content: flex-end;
}

.bc-adjacent__link--prev .bc-icon {
	transform: rotate(180deg);
}

.bc-adjacent__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
}

.bc-adjacent__link:hover .bc-adjacent__title {
	color: var(--gold-bright);
}

/* ---------- Table of contents --------------------------------------------- */

.bc-toc__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	counter-reset: bc-toc;
}

.bc-toc__list a {
	counter-increment: bc-toc;
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 9px 10px 9px 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-dim);
	border-left: 2px solid var(--line);
	padding-left: 12px;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.bc-toc__list a::before {
	content: counter(bc-toc, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--ink-faint);
}

.bc-toc__list a:hover {
	color: var(--ink);
	border-left-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

/* Scrollspy state, driven from main.js. Deliberately the same gold as the
   beacon rail so the two read as one indicator. */
.bc-toc__list a.is-active {
	color: var(--ink-bright);
	border-left-color: var(--accent-bright);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.bc-toc__list a.is-active::before {
	color: var(--accent-bright);
}

/* Provenance facts */

.bc-facts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bc-facts li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 10px;
	align-items: start;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-dim);
}

.bc-facts .bc-icon {
	color: var(--accent-ink);
	margin-top: 2px;
}

.bc-facts a {
	color: var(--ink);
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.bc-facts a:hover {
	color: var(--gold-bright);
}

/* ---------- Share / copy -------------------------------------------------- */

.bc-copy {
	position: relative;
}

.bc-copy__done {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	translate: -50% 0;
	background: var(--gold);
	color: var(--on-accent);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 8px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--ease), translate 0.2s var(--ease);
}

.bc-copy.is-copied .bc-copy__done {
	opacity: 1;
	translate: -50% -2px;
}

/* ---------- Key takeaways -------------------------------------------------- */

/* An at-a-glance summary is the single most liftable object on an article page
   after the Answer block, and it earns its keep for readers too. */
.bc-takeaways {
	margin-block: 34px;
	padding: 26px 30px;
	background:
		radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
		var(--bg-1);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
}

.bc-takeaways__title {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-bright);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.bc-takeaways ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bc-takeaways li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-body);
}

.bc-takeaways li .bc-icon {
	color: var(--accent-ink);
	margin-top: 3px;
}


/* ---------- Single article shell ------------------------------------------ */

.bc-single {
	display: block;
	position: relative;
	z-index: 2;
}

.bc-author-box__body {
	min-width: 0;
}

/* Editor-only readiness badge. */
.bc-score .bc-dot {
	width: 6px;
	height: 6px;
	flex: none;
	background: var(--accent);
	border-radius: 50%;
}

/* ---------- Page ----------------------------------------------------------
   Pages are not articles: no hero, no kicker, no byline, no reading rail. A
   quiet header on the page's own ground, then body copy at the article measure
   so a long privacy policy reads as comfortably as a feature.
   -------------------------------------------------------------------------- */

.bc-page {
	display: block;
	position: relative;
	z-index: 2;
}

.bc-page__head {
	border-bottom: 1px solid var(--line);
	padding-block: clamp(34px, 5vw, 68px);
	background:
		radial-gradient(80% 130% at 12% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 62%),
		var(--bg-1);
}

.bc-page__title {
	font-family: var(--font-display);
	font-size: clamp(32px, 5.2vw, 58px);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--ink-bright);
	max-width: 20ch;
	text-wrap: balance;
}

.bc-page__dek {
	font-family: var(--font-display);
	font-size: clamp(16px, 1.8vw, 20px);
	line-height: 1.5;
	color: var(--ink-body);
	max-width: 62ch;
	margin-top: 14px;
}

.bc-page__updated {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 18px;
}

.bc-page__media {
	padding-top: clamp(24px, 4vw, 44px);
}

.bc-page__media img {
	width: 100%;
	height: auto;
	display: block;
}

.bc-page__body {
	/* The article measure, centred. Legal text set the full width of a 1180px
	   container is unreadable. */
	max-width: var(--measure);
	margin-inline: auto;
	padding-block: clamp(30px, 5vw, 58px);
}

.bc-page__comments {
	max-width: var(--measure);
	margin-inline: auto;
	padding-bottom: clamp(30px, 5vw, 58px);
}

/*!
 * BrandCustodian — Article sidebar.
 */

/* ---------- Sidebar ----------------------------------------------------- */

.bc-sidebar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.bc-card {
	background: var(--bg-1);
	border: 1px solid var(--line);
	padding: 22px;
}

.bc-card__title {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent-bright);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.bc-card__title::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--accent);
}

.bc-top-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.bc-top-item:first-child {
	padding-top: 0;
}

.bc-top-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bc-top-item__thumb {
	width: 58px;
	height: 58px;
	flex: none;
	object-fit: cover;
	background: linear-gradient(150deg, var(--accent), #20323a);
}

.bc-top-item__cat {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bc-top-item h4 {
	font-size: 13.5px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--ink);
	margin-top: 5px;
}

.bc-top-item h4 a:hover {
	color: var(--gold-bright);
}

.bc-promo {
	background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent) 18%, var(--bg-1)) 0%, var(--bg-1) 60%);
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.bc-promo h3 {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 400;
	color: var(--ink-bright);
	margin-bottom: 6px;
	line-height: 1.2;
}

.bc-promo h3 em {
	color: var(--accent-bright);
	font-style: normal;
}

.bc-promo p {
	font-size: 13px;
	color: var(--ink-dim);
	margin-bottom: 16px;
}

.bc-btn-outline {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--accent-bright);
	border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
	padding: 8px 16px;
	transition: background 0.2s var(--ease);
}

.bc-btn-outline:hover {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* The sidebar's stacked variant. Scoped to the card so it cannot reach the
   masthead's row layout — the two used to share a class name and fight. */
.bc-newsletter-card .bc-newsletter input[type="email"] {
	width: 100%;
	background: var(--bg-2);
	border: 1px solid var(--line);
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 10px;
}

.bc-newsletter-card .bc-newsletter input::placeholder {
	color: var(--ink-faint);
}

.bc-newsletter-card .bc-newsletter button {
	width: 100%;
	padding: 10px;
	justify-content: center;
}

.bc-newsletter-card small {
	display: block;
	margin-top: 10px;
	color: var(--ink-faint);
	font-size: 11px;
	line-height: 1.5;
}


/* The table of contents starts hidden and is revealed by JS once it has found
   enough headings to be worth showing. */
.bc-toc[hidden] {
	display: none;
}

.bc-toc {
	position: relative;
}

/*!
 * BrandCustodian — Post cards, grids, archive headers, pagination, author cards, icons, back-to-top.
 */

/* ---------- Card grids -------------------------------------------------- */

.bc-section {
	max-width: var(--container);
	margin: 20px auto 90px;
	padding-inline: var(--gutter);
}

.bc-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.bc-section__head h2 {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	color: var(--ink-bright);
}

.bc-section__more {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	white-space: nowrap;
	transition: color 0.2s var(--ease);
}

.bc-section__more:hover {
	color: var(--gold-bright);
}

.bc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.bc-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.bc-grid,
	.bc-grid--3 {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 560px) {
	.bc-grid,
	.bc-grid--3 {
		grid-template-columns: 1fr;
	}
	.bc-section {
		padding-inline: 16px;
		margin: 12px auto 56px;
	}
	.bc-section__head h2 {
		font-size: 21px;
	}
}

.bc-card-post {
	border: 1px solid var(--line);
	background: var(--bg-1);
	overflow: hidden;
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
	display: flex;
	flex-direction: column;
}

/* A gold hairline draws across the top edge on hover — cheaper than a shadow
   and it reads as the beacon catching the card. */
.bc-card-post::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, var(--accent-bright), transparent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.4s var(--ease);
	z-index: 2;
}

.bc-card-post {
	position: relative;
}

.bc-card-post:hover::after,
.bc-card-post:focus-within::after {
	transform: scaleX(1);
}

.bc-card-post:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.bc-card-post:hover .bc-card-post__thumb .bc-glyph {
	transform: translate(-6%, 0) rotate(-8deg);
	opacity: 0.32;
}

.bc-card-post__thumb .bc-glyph {
	transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}

/* First card in a section runs double width — an editorial page needs a lead,
   not twelve identical tiles. */
@media (min-width: 900px) {
	.bc-grid--lead > .bc-card-post:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	.bc-grid--lead > .bc-card-post:first-child .bc-card-post__thumb {
		height: 100%;
		min-height: 260px;
	}

	.bc-grid--lead > .bc-card-post:first-child .bc-card-post__body h4 {
		font-family: var(--font-display);
		font-size: 24px;
		font-weight: 400;
		line-height: 1.18;
	}
}

/* No featured image is the common case for an editorial archive, so the
   fallback has to look chosen: the section glyph, cropped large and low
   contrast, rather than a flat gradient block. */
.bc-card-post__thumb {
	height: 140px;
	position: relative;
	background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, var(--media-tint)), var(--media-shade));
	overflow: hidden;
	display: block;
}

/* Cropped hard enough that only curvature reads — a glyph sitting fully inside
   the card just looks like a stray rectangle. */
.bc-card-post__thumb .bc-glyph {
	position: absolute;
	right: -22%;
	top: 50%;
	translate: 0 -50%;
	width: 74%;
	height: auto;
	color: var(--accent-bright);
	opacity: 0.2;
	pointer-events: none;
}

.bc-card-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bc-card-post__pill {
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: color-mix(in srgb, var(--scrim) 75%, transparent);
	color: var(--accent-bright);
	padding: 4px 9px;
}

.bc-card-post__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.bc-card-post__body h4 {
	font-size: 14.5px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--ink);
}

.bc-card-post:hover .bc-card-post__body h4 {
	color: var(--gold-bright);
}

.bc-card-post__dek {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-dim);
}

.bc-card-post__byline {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--ink-faint);
	margin-top: auto;
	padding-top: 4px;
}

/* Rotate and rescale the fallback glyph per card so a row of same-section posts
   doesn't show the identical mark three times at the identical crop. */
.bc-card-post--v2 .bc-card-post__thumb .bc-glyph {
	rotate: 24deg;
	width: 88%;
	right: -30%;
}

.bc-card-post--v3 .bc-card-post__thumb .bc-glyph {
	rotate: -14deg;
	width: 66%;
	right: -12%;
	opacity: 0.16;
}

/* ---------- Feature row (front page lead) -------------------------------- */

.bc-feature {
	display: grid;
	gap: 28px;
	padding-block: 44px;
	border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
	.bc-feature {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		gap: 44px;
	}
}

.bc-feature__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-2);
}

.bc-feature__media img,
.bc-feature__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bc-feature__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 3.6vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink-bright);
	margin: 16px 0 14px;
}

.bc-feature__title a:hover {
	color: var(--gold-bright);
}

.bc-feature__dek {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin-bottom: 18px;
}

/* ---------- Section header (archives) ------------------------------------ */

/* A section with 62 articles is a front door. Colour field, glyph at scale, and
   enough height to mean it. */
.bc-page-head {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 5vw, 56px);
	background:
		radial-gradient(90% 130% at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
		linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

/* Masked, not clipped. A hard overflow edge against the glyph's stroke drew a
   1px seam down the page that read as a rendering fault. */
.bc-page-head__glyph {
	position: absolute;
	top: 50%;
	right: -3%;
	translate: 0 -50%;
	width: min(42vw, 420px);
	color: var(--accent-ink);
	opacity: 0.3;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
}

@media (max-width: 780px) {
	.bc-page-head__glyph {
		display: none;
	}
}

.bc-page-head__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.bc-page-head__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink-bright);
	margin: 16px 0 12px;
}

.bc-page-head__dek {
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 560px;
}

.bc-page-head__count {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--ink-faint);
	margin-top: 18px;
}

/* ---------- Pagination --------------------------------------------------- */

.bc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 12px;
}

.bc-pagination__scale {
	color: var(--ink-faint);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 11px;
}

.bc-pagination__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* 42px clears the 44px touch-target minimum once the borders and the 6px
	   row gap are counted. The old 36px squares were fiddly on a phone. */
	min-width: 42px;
	min-height: 42px;
	padding: 8px 13px;
	text-align: center;
	border: 1px solid var(--line);
	color: var(--ink-dim);
	transition: 0.2s var(--ease);
}

/* Prev/Next say what they do; the bare arrows were guesswork. */
.bc-pagination__word {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 620px) {
	/* On a phone the words cost a row of numbers. The arrows stay. */
	.bc-pagination__word {
		display: none;
	}
	.bc-pagination {
		justify-content: center;
	}
	.bc-pagination__scale {
		width: 100%;
		text-align: center;
	}
	.bc-pagination__links {
		justify-content: center;
	}
}

.bc-pagination .page-numbers:hover,
.bc-pagination .page-numbers.current {
	border-color: var(--accent);
	color: var(--accent-bright);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.bc-pagination .dots {
	border-color: transparent;
}

/* ---------- Author card -------------------------------------------------- */

.bc-author-card {
	display: grid;
	gap: 20px;
	padding: 28px;
	background: var(--bg-1);
	border: 1px solid var(--line);
}

@media (min-width: 700px) {
	.bc-author-card {
		grid-template-columns: 96px 1fr;
		gap: 28px;
		align-items: start;
	}
}

.bc-author-card__avatar {
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.bc-author-card__name {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	color: var(--ink-bright);
	margin-bottom: 8px;
}

.bc-author-card__creds {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gold-bright);
	margin-bottom: 12px;
}

.bc-author-card__bio {
	font-size: 14.5px;
	color: var(--ink-body);
	line-height: 1.6;
}

.bc-author-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-faint);
}

.bc-author-links a:hover {
	color: var(--gold-bright);
}

/* ---------- Icons --------------------------------------------------------- */

.bc-icon {
	flex: none;
	display: block;
}

.bc-inline-icon {
	display: inline-block;
	vertical-align: -0.18em;
	margin-right: 6px;
	opacity: 0.8;
}

/* Arrow slides on hover — the one place motion signals "this goes somewhere". */
.bc-section__more,
.bc-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bc-section__more .bc-icon,
.bc-btn-outline .bc-icon {
	transition: transform 0.3s var(--ease);
}

.bc-section__more:hover .bc-icon,
.bc-btn-outline:hover .bc-icon {
	transform: translateX(4px);
}

/* ---------- Back to top --------------------------------------------------- */

.bc-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--bg-1);
	border: 1px solid var(--line);
	color: var(--ink-dim);
	cursor: pointer;
	opacity: 0;
	translate: 0 12px;
	pointer-events: none;
	transition: opacity 0.3s var(--ease), translate 0.3s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.bc-top.is-visible {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
}

.bc-top:hover {
	border-color: var(--accent);
	color: var(--accent-bright);
}

@media (max-width: 600px) {
	.bc-top {
		right: 14px;
		bottom: 14px;
	}
}

/*!
 * BrandCustodian — Front page: lead, top stories, latest mosaic, section showcases.
 */

/* ---------- Page rhythm --------------------------------------------------
   A homepage where every band is separated by the same 72px reads as a list.
   The gap tightens right after the lead — the top stories should feel attached
   to it — then opens up for the section showcases.
   -------------------------------------------------------------------------- */

.bc-front {
	display: block;
	position: relative;
	z-index: 2;
}

/* The page used to end on a closing statement. Without it the last showcase
   would run straight into the footer, so it closes itself. */
.bc-front > .bc-showcase:last-child {
	border-bottom: 1px solid var(--line);
}

/* ---------- Lead --------------------------------------------------------- */

.bc-lead {
	position: relative;
	overflow: hidden;
	/* 86vh over-cropped wide editorial illustrations to a narrow band. This
	   keeps more of the artwork and stops the headline fighting it. */
	min-height: min(72vh, 640px);
	display: flex;
	align-items: flex-end;
	background: var(--media-bg);
}

.bc-lead__media,
.bc-lead__media img,
.bc-lead__media .bc-beacon-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bc-lead__scrim {
	position: absolute;
	inset: 0;
	/* A firm base the type actually sits on, a soft top vignette, and a gentle
	   left weight so the headline never lands on busy artwork. */
	background:
		linear-gradient(0deg, var(--scrim) 0%, color-mix(in srgb, var(--scrim) 94%, transparent) 22%, color-mix(in srgb, var(--scrim) 55%, transparent) 52%, color-mix(in srgb, var(--scrim) 12%, transparent) 82%),
		linear-gradient(90deg, color-mix(in srgb, var(--scrim) 60%, transparent) 0%, transparent 55%),
		radial-gradient(110% 80% at 50% 0%, transparent 45%, color-mix(in srgb, var(--scrim) 50%, transparent) 100%);
}

.bc-lead__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(40px, 7vw, 84px);
}

.bc-lead__body {
	max-width: 760px;
}

/* Flags. Two pills of equal weight read as tags; this is a masthead flag with
   a hard notched corner, and the category beside it in outline — a hierarchy,
   not a pair. */
.bc-lead__flags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.bc-lead__flag {
	display: inline-flex;
	align-items: center;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 16px 6px 11px;
	/* Notched right edge: a printer's flag, not a rounded chip. */
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}

.bc-lead__flags .bc-kicker {
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	padding: 5px 11px;
	color: var(--accent-bright);
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.bc-lead__flags .bc-kicker:hover {
	border-color: var(--accent-bright);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.bc-lead__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 5.6vw, 66px);
	line-height: 1.0;
	letter-spacing: -0.022em;
	max-width: 15ch;
	color: var(--ink-bright);
	margin: 20px 0 18px;
	text-wrap: balance;
}

.bc-lead__title a:hover {
	color: var(--accent-bright);
}

.bc-lead__dek {
	font-family: var(--font-display);
	font-size: clamp(17px, 1.9vw, 22px);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 640px;
}

.bc-lead__meta {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--ink-dim);
	margin-top: 22px;
}

/* ---------- The brief ---------------------------------------------------- */

.bc-brief {
	border-bottom: 1px solid var(--line);
	background: var(--bg-1);
}

.bc-brief__inner {
	display: grid;
	gap: 20px 40px;
	padding-block: 28px;
}

@media (min-width: 900px) {
	.bc-brief__inner {
		grid-template-columns: 150px 1fr;
		align-items: start;
	}
}

.bc-brief__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-bright);
	padding-top: 4px;
}

.bc-brief__list {
	display: grid;
	gap: 0;
	counter-reset: bc-brief;
}

@media (min-width: 700px) {
	.bc-brief__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 32px;
	}
}

@media (min-width: 1100px) {
	.bc-brief__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.bc-brief__list li {
	counter-increment: bc-brief;
	border-top: 1px solid var(--line);
}

@media (min-width: 1100px) {
	.bc-brief__list li {
		border-top: 0;
		border-left: 1px solid var(--line);
		padding-left: 18px;
	}
	.bc-brief__list li:first-child {
		border-left: 0;
		padding-left: 0;
	}
}

.bc-brief__list a {
	display: block;
	padding: 12px 0;
}

.bc-brief__list a::before {
	content: counter(bc-brief, decimal-leading-zero);
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--accent-ink);
	margin-bottom: 6px;
}

.bc-brief__cat {
	display: block;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 5px;
}

.bc-brief__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	transition: color 0.2s var(--ease);
}

.bc-brief__list a:hover .bc-brief__title {
	color: var(--accent-bright);
}

/* ---------- Latest: mosaic ------------------------------------------------
   Deliberately not the four-across row used by every section below. The lead
   tile runs 2×2 with a standfirst; four satellites orbit it. Same components,
   different rhythm, so "Latest" reads as an edit rather than a query.
   -------------------------------------------------------------------------- */

.bc-mosaic {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.bc-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.bc-mosaic {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 1fr;
	}

	.bc-mosaic > .bc-card-post--feature {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* The lead tile gets room, so the image leads and the type steps up. */
.bc-card-post--feature .bc-card-post__thumb {
	height: auto;
	aspect-ratio: 16 / 10;
}

@media (min-width: 1000px) {
	.bc-card-post--feature .bc-card-post__thumb {
		flex: 1;
		aspect-ratio: auto;
		min-height: 240px;
	}
}

.bc-card-post--feature .bc-card-post__body {
	padding: 20px;
	gap: 10px;
}

.bc-card-post--feature .bc-card-post__body h4 {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.012em;
}

.bc-card-post--feature .bc-card-post__dek {
	font-size: 14px;
	-webkit-line-clamp: 3;
}

/* ---------- Section showcases ---------------------------------------------
   Eight of these run in sequence, so the job is to make them feel like shelves
   in one publication rather than eight repetitions of a card row. Each takes
   its section's ink, and each carries its own monogram as a watermark bled off
   the page edge — alternating side, so the eye zig-zags down instead of
   tracking a single straight column.
   -------------------------------------------------------------------------- */

.bc-showcase {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--line);
	padding-block: clamp(40px, 5.5vw, 76px);
	/* A wash in the section's own ink, anchored behind the watermark, plus a
	   faint tint off the top edge so each band separates from the page rather
	   than being eight identical dark rectangles. */
	background:
		radial-gradient(
			62% 125% at 88% 50%,
			color-mix(in srgb, var(--accent) 20%, transparent),
			transparent 68%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--accent) 5%, transparent),
			transparent 45%
		);
}

/* The wash follows the watermark to the other side. */
.bc-showcase--flip {
	background:
		radial-gradient(
			62% 125% at 12% 50%,
			color-mix(in srgb, var(--accent) 20%, transparent),
			transparent 68%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--accent) 5%, transparent),
			transparent 45%
		);
}

/* A short accent rule sitting on the top border, aligned to the content
   column: the section's colour signature before any of its type is read. */
.bc-showcase::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: clamp(120px, 20vw, 280px);
	height: 3px;
	background: var(--accent);
}

.bc-showcase__watermark {
	position: absolute;
	top: 50%;
	right: -150px;
	translate: 0 -50%;
	z-index: 0;
	color: var(--accent-ink);
	/* Reads as a watermark rather than a smudge. It can sit this low only
	   because the glyph is filled — the outlined version was a 1.5px hairline
	   stretched across 460px and vanished entirely. */
	opacity: 0.09;
	pointer-events: none;
	line-height: 0;
}

/* Alternate the side so a run of sections doesn't march. */
.bc-showcase--flip .bc-showcase__watermark {
	right: auto;
	left: -150px;
}

.bc-showcase > .bc-shell {
	position: relative;
	z-index: 1;
}

@media (max-width: 860px) {
	/* At phone width the watermark sits under the cards and muddies the text
	   rather than backing it. */
	.bc-showcase__watermark {
		display: none;
	}
}

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

.bc-showcase__bar {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px 18px;
	padding-bottom: 18px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
	.bc-showcase__bar {
		grid-template-columns: auto 1fr auto;
	}
}

.bc-showcase__mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: none;
	color: var(--accent-ink);
	border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
	background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* The clock is drawn to its own optical size and shouldn't be boxed like a
   monogram — the plate would fight the dial. */
.bc-showcase__mark--clock {
	border-color: transparent;
	background: none;
	width: 56px;
	height: 56px;
}

.bc-showcase__heading {
	min-width: 0;
}

.bc-showcase__title {
	font-family: var(--font-display);
	font-size: clamp(23px, 2.9vw, 34px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--ink-bright);
}

.bc-showcase__title a:hover {
	color: var(--accent-bright);
}

.bc-showcase__dek {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-dim);
	max-width: 62ch;
	margin-top: 5px;
}

@media (max-width: 759px) {
	/* The "All 62 →" link drops under the heading and spans both columns
	   rather than squeezing a third column onto a phone. */
	.bc-showcase__bar .bc-section__more {
		grid-column: 1 / -1;
	}
}

/*!
 * BrandCustodian — The 9:30 Brief: clock, edition plates, schedule rail, countdown.
 */

/* ---------- The clock -----------------------------------------------------
   The dial had no CSS at all, which is why the Brief read as sad: an unstyled
   SVG skeleton with hands stuck at twelve. Hands are two rects pointing up at
   rest, so 9:30 is hour 285deg (nine and a half hours) and minute 180deg.
   -------------------------------------------------------------------------- */

.bc-clock {
	display: block;
	color: var(--accent-ink);
	overflow: visible;
}

.bc-clock__face {
	fill: color-mix(in srgb, var(--accent) 9%, var(--bg-0));
}

.bc-clock__ring {
	fill: none;
	stroke: color-mix(in srgb, var(--accent) 55%, transparent);
	stroke-width: 1.5;
	transform-box: view-box;
	transform-origin: 50px 50px;
	animation: bc-clock-ring 3.4s var(--ease) infinite;
}

/* One slow breath on the rim, at roughly the pace of a second hand sweep —
   enough to say "this is live" without becoming a blinking light. */
@keyframes bc-clock-ring {
	0%, 100% { stroke-opacity: 0.55; }
	50%      { stroke-opacity: 1; }
}

.bc-clock__ticks {
	opacity: 0.4;
}

.bc-clock__tick--major {
	opacity: 1;
}

.bc-clock__hands {
	/* Grouping element: the rotation lives on the individual hands. */
	transform-box: view-box;
}

.bc-clock__hand {
	fill: currentColor;
	transform-box: view-box;
	transform-origin: 50px 50px;
}

/* The hands travel to 9:30 on load rather than starting there: the reveal is
   the whole point of putting a clock on a page about a fixed weekly moment. */
.bc-clock__hand--hour {
	animation: bc-hand-hour 1.5s var(--ease) 0.15s both;
}

.bc-clock__hand--minute {
	fill: var(--accent-bright);
	animation: bc-hand-minute 1.5s var(--ease) both;
}

@keyframes bc-hand-hour {
	from { transform: rotate(-75deg); }
	to   { transform: rotate(285deg); }
}

@keyframes bc-hand-minute {
	from { transform: rotate(-180deg); }
	to   { transform: rotate(180deg); }
}

.bc-clock__pin {
	fill: var(--accent-bright);
}

/* ---------- 9:30 Brief: the schedule rail --------------------------------- */

.bc-schedule {
	position: relative;
	overflow-x: auto;
	scrollbar-width: none;
	padding-top: 26px;
}

.bc-schedule::-webkit-scrollbar {
	display: none;
}

/* Scrolls on narrow screens; on desktop the five slots divide the measure
   exactly, so it reads as a schedule rather than a clipped carousel. */
.bc-schedule__rail {
	display: flex;
	gap: 18px;
	min-width: max-content;
	position: relative;
}

@media (min-width: 1000px) {
	.bc-schedule__rail {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		min-width: 0;
	}

	.bc-schedule__slot {
		flex: none;
	}
}

/* The timeline itself, running behind the slots. */
.bc-schedule__rail::before {
	content: "";
	position: absolute;
	inset: -14px 0 auto 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--accent) 70%, transparent),
		color-mix(in srgb, var(--accent) 12%, transparent)
	);
}

.bc-schedule__slot {
	position: relative;
	flex: 0 0 clamp(210px, 21vw, 250px);
}

.bc-schedule__tick {
	position: absolute;
	top: -18px;
	left: 22px;
	width: 9px;
	height: 9px;
	background: var(--bg-0);
	border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
	rotate: 45deg;
}

/* The upcoming slot's marker is lit. */
.bc-schedule__tick--live {
	background: var(--accent-bright);
	border-color: var(--accent-bright);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 60%, transparent);
	animation: bc-tick-pulse 2.6s ease-out infinite;
}

@keyframes bc-tick-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 55%, transparent); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.bc-schedule__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 18px;
	border: 1px solid var(--line);
	background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.bc-schedule__card:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	transform: translateY(-3px);
}

/* Edition stamp */
.bc-schedule__no {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--font-mono);
	color: var(--accent-bright);
}

.bc-schedule__no i {
	font-style: normal;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.7;
}

.bc-schedule__no b {
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---- The cover plate ----
   Replaces the thumbnail. The edition number is the artwork; the engraved rule
   texture behind it takes its angle from --bc-rule-angle, set per edition in
   the template, so no two adjacent plates share a grain. */
.bc-schedule__plate {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	height: 108px;
	padding: 12px;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			var(--bc-rule-angle, 45deg),
			transparent 0 4px,
			color-mix(in srgb, var(--accent) 20%, transparent) 4px 5px
		),
		linear-gradient(155deg, color-mix(in srgb, var(--accent) 18%, var(--bg-1)), var(--bg-0));
	transition: background-position 0.5s var(--ease);
}

/* A hairline across the top edge picks up the timeline above it. */
.bc-schedule__plate::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: color-mix(in srgb, var(--accent) 60%, transparent);
}

.bc-schedule__figure {
	font-family: var(--font-display);
	font-size: 58px;
	font-weight: 400;
	line-height: 0.78;
	letter-spacing: -0.04em;
	color: var(--ink-bright);
	font-variant-numeric: tabular-nums;
	/* Sits over its own texture — a soft plate behind the numerals keeps them
	   legible without boxing them. */
	/* The ground, not the scrim: this plate follows the page in both modes. */
	text-shadow: 0 2px 18px color-mix(in srgb, var(--bg-0) 85%, transparent);
}

.bc-schedule__stamp {
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 9px;
	letter-spacing: 0.16em;
	color: var(--accent-bright);
	padding-bottom: 6px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.bc-schedule__card:hover .bc-schedule__plate {
	background-position: 6px 0, 0 0;
}

.bc-schedule__title {
	font-family: var(--font-display);
	font-size: 16.5px;
	line-height: 1.22;
	color: var(--ink);
	transition: color 0.2s var(--ease);
}

.bc-schedule__card:hover .bc-schedule__title {
	color: var(--accent-bright);
}

.bc-schedule__date {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-faint);
	margin-top: auto;
}

/* The slot that hasn't aired: dashed, lit, and counting. */
.bc-schedule__card--next {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
	background:
		radial-gradient(80% 90% at 50% 15%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
		var(--bg-0);
	align-items: flex-start;
}

.bc-schedule__clock {
	display: block;
	margin: 2px 0 2px;
}

.bc-schedule__card--next .bc-schedule__title {
	color: var(--accent-bright);
}

/* ---- Countdown ---- */

.bc-countdown {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: auto;
}

.bc-countdown__value {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-mono);
	color: var(--accent-bright);
	font-variant-numeric: tabular-nums;
}

.bc-countdown__unit {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
}

.bc-countdown__unit b {
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
}

.bc-countdown__unit i {
	font-style: normal;
	font-size: 9.5px;
	opacity: 0.6;
}

.bc-countdown__when {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* The edition has landed and the timer has stopped counting. */
.bc-countdown.is-live .bc-countdown__value::after {
	content: "LIVE";
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--on-accent-bright);
	background: var(--accent-bright);
	padding: 2px 6px;
}

.bc-schedule__slot--next {
	/* Guarantees the upcoming slot leads the rail even if a flex order is ever
	   applied to the run. */
	order: -1;
}

/*!
 * BrandCustodian — Empty states, search form, and the 404 page.
 */

/* ---------- Blank states ------------------------------------------------- */

.bc-hero--short {
	height: min(42vh, 340px);
	min-height: 240px;
}

.bc-blank {
	max-width: 640px;
	margin: 0 auto;
	padding: 56px var(--gutter) 96px;
	text-align: center;
}

.bc-blank .bc-search-form {
	margin-inline: auto;
	max-width: 460px;
}

.bc-blank__sections {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 36px;
}

.bc-blank__section {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border: 1px solid var(--line);
	background: var(--bg-1);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-dim);
	transition: 0.2s var(--ease);
}

.bc-blank__section .bc-glyph {
	color: var(--accent-ink);
	opacity: 0.7;
}

.bc-blank__section:hover {
	border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
	color: var(--ink-bright);
	background: var(--bg-2);
}

.bc-blank__section:hover .bc-glyph {
	opacity: 1;
}

.bc-blank__code {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-bright);
}

.bc-blank__title {
	font-family: var(--font-display);
	font-size: clamp(30px, 6vw, 46px);
	font-weight: 400;
	color: var(--ink-bright);
	margin: 14px 0 12px;
}

.bc-blank p {
	color: var(--ink-dim);
	font-size: 15.5px;
}

.bc-search-form {
	display: flex;
	margin-top: 26px;
	border: 1px solid var(--line);
	background: var(--bg-1);
}

.bc-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	padding: 12px 14px;
	font-size: 14.5px;
}

.bc-search-form input[type="search"]:focus {
	outline: none;
}

.bc-search-form button {
	border: 0;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-inline: 16px;
	cursor: pointer;
}

.bc-search-form button:hover {
	background: var(--accent-bright);
	color: var(--on-accent-bright);
}


/* ---------- 404 -----------------------------------------------------------
   The one page allowed to be playful. The numerals run at display scale with
   the monogram standing in for the zero, so the mark is a character rather
   than an ornament beside one.
   -------------------------------------------------------------------------- */

.bc-404 {
	position: relative;
	z-index: 2;
}

.bc-404__plate {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	padding-block: clamp(48px, 8vw, 104px);
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(217, 165, 68, 0.1), transparent 62%),
		var(--bg-0);
}

/* The same engraved stock as the footer and the Brief plates, drifting slowly
   so the page has a pulse while you decide where to go. */
.bc-404__grain {
	position: absolute;
	inset: -50%;
	pointer-events: none;
	opacity: 0.6;
	background: repeating-linear-gradient(
		58deg,
		transparent 0 7px,
		rgba(217, 165, 68, 0.05) 7px 8px
	);
	animation: bc-404-drift 44s linear infinite;
}

@keyframes bc-404-drift {
	to {
		transform: translate3d(8%, 5%, 0);
	}
}

.bc-404__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.bc-404__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(4px, 1vw, 14px);
	font-family: var(--font-display);
	font-size: clamp(96px, 21vw, 240px);
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: var(--ink-bright);
}

.bc-404__mark {
	display: block;
	color: var(--gold);
}

/* Optically matched to the cap height of the numerals beside it, which is
   smaller than their em box. */
.bc-404__mark .bc-mark,
.bc-mark--zero {
	width: clamp(62px, 14vw, 158px);
	height: clamp(62px, 14vw, 158px);
}

.bc-404__title {
	font-family: var(--font-display);
	font-size: clamp(26px, 4vw, 44px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--ink-bright);
	margin-top: clamp(22px, 4vw, 40px);
}

.bc-404__text {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-dim);
	max-width: 46ch;
	margin: 12px auto 0;
}

.bc-404__search {
	max-width: 520px;
	margin: 26px auto 0;
}

.bc-404__search .bc-search-form {
	margin-top: 0;
	background: var(--bg-1);
	border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}

.bc-404__recent {
	padding-block: clamp(36px, 5vw, 60px);
}

/* ---- Section row ---- */

.bc-404__sections {
	border-top: 1px solid var(--line);
	padding-block: clamp(28px, 4vw, 46px);
	background: var(--bg-1);
}

.bc-404__sections .bc-eyebrow {
	display: block;
	margin-bottom: 18px;
}

.bc-404__sections-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.bc-404__section {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--bg-0);
	color: var(--ink-dim);
	font-size: 13.5px;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.bc-404__section .bc-glyph {
	flex: none;
	color: var(--accent-ink);
}

.bc-404__section:hover {
	color: var(--ink-bright);
	background: color-mix(in srgb, var(--accent) 10%, var(--bg-0));
}

/*!
 * BrandCustodian — Footer: corporate index.
 */

/* ---------- Footer: corporate index --------------------------------------- */

.bc-footer {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--line);
	background: var(--bg-1);
	padding-block: clamp(44px, 5.5vw, 72px) 0;
}

.bc-footer__grid {
	display: grid;
	gap: 36px 40px;
	grid-template-columns: 1fr;
	padding-bottom: 40px;
}

@media (min-width: 620px) {
	.bc-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.bc-footer__grid {
		/* Identity gets a wider column; the four link lists divide the rest. */
		grid-template-columns: 1.6fr repeat(4, 1fr);
		gap: 48px;
	}
}

.bc-footer__identity .bc-brand {
	margin-bottom: 14px;
}

.bc-footer__desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-dim);
	max-width: 34ch;
}

.bc-footer__contact {
	display: grid;
	gap: 6px;
	margin-top: 18px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ink-faint);
}

.bc-footer__contact a:hover {
	color: var(--gold-bright);
}

.bc-footer__col h5 {
	position: relative;
	padding-top: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.bc-footer__col ul {
	display: grid;
	gap: 1px;
}

.bc-footer__col a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font-size: 13.5px;
	color: var(--ink-dim);
	transition: color 0.18s var(--ease);
}

.bc-footer__col a:hover {
	color: var(--ink-bright);
}

/* Section links carry their real monogram in their own ink. */
.bc-footer__col--sections .bc-glyph {
	flex: none;
	color: var(--accent-ink);
	opacity: 0.8;
	transition: opacity 0.18s var(--ease);
}

.bc-footer__col--sections a:hover .bc-glyph {
	opacity: 1;
}

/* Legal bar */
.bc-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
	padding-block: 20px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--ink-faint);
}

.bc-footer__copy {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
}

.bc-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.bc-footer__legal a {
	font-size: 12px;
	color: var(--ink-dim);
	transition: color 0.18s var(--ease);
}

.bc-footer__legal a:hover {
	color: var(--gold-bright);
}

@media (max-width: 620px) {
	.bc-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ---------- Footer: personality -------------------------------------------
   The grid was correct and characterless. What follows gives it a different
   paper stock from the body, a mark with room to breathe, and a rule above
   each column head so the whole thing reads as printed matter.
   -------------------------------------------------------------------------- */

/* Engraved texture across the band, matching the Brief's cover plates. Very
   low contrast on purpose: it should be felt rather than seen. */
.bc-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background: repeating-linear-gradient(
		62deg,
		transparent 0 6px,
		rgba(217, 165, 68, 0.035) 6px 7px
	);
}

.bc-footer > .bc-shell {
	position: relative;
	z-index: 1;
}

/* The mark at footer scale, with the wordmark stepped up to match. */
.bc-brand--footer {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bc-brand--footer .bc-mark {
	color: var(--gold);
}

.bc-brand--footer span {
	font-family: var(--font-display);
	font-size: 25px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink-bright);
}

/* A short accent rule above each column head. */
.bc-footer__col h5::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--gold);
	opacity: 0.75;
}

.bc-footer__col--sections h5::before {
	/* Its own list is multicoloured, so its rule stays neutral. */
	background: var(--ink-faint);
}

/*!
 * BrandCustodian — Reduced-motion and print overrides. Must load last.
 */

/* ---------- Motion / print ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}

	/* The sweep and the blink are decorative; stop them outright rather than
	   running them impossibly fast. */
	.bc-beacon-art__beams,
	.bc-beacon-art__lamp,
	.bc-kicker .dot {
		animation: none !important;
	}
}

@media print {
	.bc-nav,
	.bc-footer,
	.bc-progress,
	.bc-rail,
	.bc-sidebar,
	.bc-score,
	.bc-share {
		display: none !important;
	}
	body {
		background: #fff;
		color: #000;
	}
	.bc-layout {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Front page
   -------------------------------------------------------------------------
   The rhythm changes deliberately down the page: a commanding lead, a
   scannable brief, an asymmetric grid, then alternating section showcases.
   Identical card rows read as a database query; this should read as an edit.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	/* The switch still moves between positions, it just stops sliding there.
	   Important because the repaint exemption in _masthead.css is too. */
	.bc-theme__thumb,
	.bc-repaint .bc-theme__thumb {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bc-clock__hand--hour,
	.bc-clock__hand--minute,
	.bc-clock__ring,
	.bc-countdown__live {
		animation: none !important;
	}
	.bc-clock__hand--hour  { transform: rotate(285deg); }
	.bc-clock__hand--minute { transform: rotate(180deg); }
	.bc-rail-scroll__track { scroll-behavior: auto; }
}


@media (prefers-reduced-motion: reduce) {
	/* Marks render finished. The draw-on is decoration, and decoration is
	   exactly what this query exists to switch off. */
	.bc-glyph--draw .bc-glyph__path {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		fill-opacity: 1 !important;
		transition: none !important;
	}

	.bc-subscribe,
	.bc-subscribe__reveal,
	.bc-subscribe::after,
	.bc-subscribe__copy,
	.bc-subscribe .bc-newsletter,
	.bc-subscribe__toggle::before {
		transition: none !important;
	}

	.bc-subscribe__live {
		animation: none !important;
	}
}