/*!
 * Brimco news article.
 *
 * The whole article is our markup now, so this file styles it directly.
 * There is not one !important in it and there does not need to be: nothing
 * else is setting these properties. That is the difference between this and
 * article.css, which was 730 lines of arguing with Blocksy.
 *
 * Design System V0 is binding. Accent is hover and focus only. Square
 * corners, no shadows, one easing curve, and no grey borders anywhere:
 * separation comes from fills, ink rules and space.
 */

.bn {
	--paper: #ffffff;
	--ink: #231f20;
	--text: #5e5e5e;
	--accent: #c0f0fe;
	--surface: #f4f5f6;
	--link: #316a7c;
	--band: #000000;
	--up: #0f6b4f;
	--down: #a4303f;

	--serif: Lora, Georgia, "Times New Roman", serif;
	--sans: Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
	--label: Poppins, system-ui, sans-serif;
	--ease: cubic-bezier(.455, .03, .515, .955);

	--measure: 680px;
	--rail: 300px;
	--gap: 56px;
	--column: 1296px;

	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.68;
}

/* One column governs the page. Every band starts on the same line. */
.bn-wrap {
	max-width: var(--column);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* No margin reset here. An earlier version set margin:0 on this group, and
   because .bn h1 outranks .bn-headline every heading margin in this file was
   silently ignored: the standfirst sat hard against the headline and the
   whole hero read as cramped. Spacing is set per element instead. */
.bn h1,
.bn h2,
.bn h3 {
	font-family: var(--serif);
	text-wrap: balance;
}

.bn p,
.bn li {
	text-wrap: pretty;
}

.bn a {
	color: var(--link);
	text-underline-offset: 2px;
}

.bn :focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

.bn-label {
	font: 600 11px/1 var(--label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}

/* ---------- breadcrumb ---------- */

.bn-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding-top: 22px;
	font: 400 13px/1 var(--sans);
	color: var(--text);
}

.bn-crumbs a {
	color: var(--text);
	text-decoration: none;
}

.bn-crumbs a:hover {
	color: var(--ink);
}

/* ---------- hero ---------- */

.bn-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rail);
	gap: var(--gap);
	align-items: start;
	padding-top: 34px;
}

.bn-hero__lead {
	max-width: 800px;
}

.bn-kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
}

.bn-kicker__eyebrow {
	font: 600 11px/1 var(--label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text);
}

.bn-kicker a {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	font: 600 11px/1 var(--label);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 12px;
	text-decoration: none;
}

.bn-kicker a:hover {
	background: var(--link);
	color: var(--paper);
}

.bn-headline {
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -.015em;
	margin: 0 0 22px;
}

/* The dek. One step above body text, not two: at 20px it read as a second
   headline in grey. The measure is capped so it breaks into three or four
   lines rather than running the width of the column. */
.bn-standfirst {
	font-size: 18px;
	line-height: 1.6;
	color: var(--text);
	margin: 0 0 28px;
	max-width: 32em;
}

.bn-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ink);
	font-size: 14px;
	color: var(--text);
}

.bn-byline a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
}

.bn-byline a:hover {
	color: var(--link);
	text-decoration: underline;
}

.bn-byline__dot {
	color: var(--text);
	opacity: .45;
}

/* ---------- lead photograph ----------
   Sized by aspect ratio so the space is reserved before the file arrives and
   nothing shifts underneath the reader. */

.bn-media {
	margin: 40px auto 0;
}

.bn-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bn-media figcaption {
	font-size: 13px;
	color: var(--text);
	padding-top: 10px;
}

/* ---------- body and rail ---------- */

.bn-body {
	display: grid;
	grid-template-columns: minmax(0, var(--measure)) var(--rail);
	gap: var(--gap);
	/* The rail column has to be as tall as the article for the sticky block
	   inside it to have anywhere to travel. align-items:start made the column
	   the height of its own contents, so the rail scrolled away with them and
	   looked like it was not sticky at all. */
	align-items: stretch;
	justify-content: space-between;
	padding-top: 48px;
}

.bn-prose {
	min-width: 0;
	align-self: start;
}

.bn-prose > * + * {
	margin-top: 1.35em;
}

.bn-prose h2 {
	font-size: 27px;
	font-weight: 600;
	line-height: 1.25;
	margin-top: 2.2em;
}

.bn-prose h3 {
	font-size: 21px;
	font-weight: 600;
	margin-top: 1.8em;
}

.bn-prose img {
	max-width: 100%;
	height: auto;
}

.bn-prose figure {
	margin-left: 0;
	margin-right: 0;
}

.bn-prose ul,
.bn-prose ol {
	padding-left: 1.15em;
}

.bn-prose li + li {
	margin-top: .5em;
}

/* the one place the page raises its voice */
.bn-prose blockquote {
	border: 0;
	border-top: 2px solid var(--ink);
	background: transparent;
	margin: 2em 0;
	padding: 24px 0 0;
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--ink);
}

.bn-prose hr,
.bn-prose .wp-block-separator {
	border: 0;
	border-top: 2px solid var(--ink);
	margin: 2em 0;
}

/* the short version: black, and one of exactly two black fields */
.bn-prose .brimco-highlights {
	background: var(--band);
	color: var(--paper);
	border: 0;
	padding: 26px 28px;
}

.bn-prose .brimco-highlights h2,
.bn-prose .brimco-highlights h3,
.bn-prose .brimco-highlights h4 {
	font-family: var(--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0 0 16px;
}

.bn-prose .brimco-highlights p,
.bn-prose .brimco-highlights li {
	color: rgba(255, 255, 255, .82);
}

.bn-prose .brimco-highlights a {
	color: var(--paper);
}

.bn-prose .brimco-highlights li::marker {
	color: var(--paper);
}

/* ---------- rail ----------
   position:sticky resolves against the nearest ancestor whose overflow is
   not visible. Blocksy gives #main-container overflow:clip and the body
   overflow-x:hidden, and both of those made the rail stick to a container
   the height of the whole page, which looks exactly like not sticking.
   overflow-x:clip contains full-bleed rows the same way without creating a
   scrollport, so overflow-y can stay visible and sticky works. */

body.single-news {
	overflow-x: clip;
	overflow-y: visible;
}

body.single-news #main-container {
	overflow: visible;
}

.bn-rail {
	min-width: 0;
}

/* The site header is fixed and 81px tall, so a 24px offset put the top of
   the rail underneath it. The rail stops below the header, not below the
   viewport edge. */
.bn-rail__inner {
	position: sticky;
	top: calc(var(--bn-header, 81px) + 24px);
	display: grid;
	gap: 28px;
	max-height: calc(100vh - var(--bn-header, 81px) - 48px);
	overflow-y: auto;
	scrollbar-width: none;
}

.bn-rail__inner::-webkit-scrollbar {
	display: none;
}

.bn-rail .brimco-rail__block {
	border-top: 2px solid var(--ink);
	padding-top: 14px;
}

.bn-rail .brimco-rail__head {
	font: 600 11px/1 var(--label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 14px;
}

.bn-rail .brimco-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	counter-reset: bn-rail;
}

.bn-rail .brimco-rail__list li {
	counter-increment: bn-rail;
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	font-size: 15px;
	line-height: 1.35;
}

.bn-rail .brimco-rail__list li::before {
	content: counter(bn-rail);
	font: 600 12px/1.4 var(--label);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.bn-rail .brimco-rail__list a {
	font-family: var(--serif);
	color: var(--ink);
	text-decoration: none;
}

.bn-rail .brimco-rail__list a:hover {
	color: var(--link);
	text-decoration: underline;
}

.bn-rail .brimco-rail__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bn-rail .brimco-rail__topics a {
	font: 500 12.5px/1 var(--sans);
	background: var(--surface);
	padding: 8px 12px;
	color: var(--text);
	text-decoration: none;
	transition: color .16s var(--ease), background-color .16s var(--ease);
}

.bn-rail .brimco-rail__topics a:hover {
	color: var(--ink);
	background: var(--accent);
}

/* ---------- the market card ---------- */

.bn .brimco-market {
	background: var(--surface);
	padding: 24px;
}

.bn .brimco-market__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bn .brimco-market__sym {
	font: 600 13px/1 var(--label);
	letter-spacing: .1em;
	color: var(--ink);
}

.bn .brimco-market__ex {
	font: 500 11px/1 var(--label);
	letter-spacing: .08em;
	color: var(--text);
}

/* Market direction is semantic, and deliberately not the accent. */
.bn .brimco-market__move {
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--up);
	margin: 14px 0 2px;
}

.bn .brimco-market__move.is-down {
	color: var(--down);
}

.bn .brimco-market__note {
	font-size: 13px;
	line-height: 1.45;
	color: var(--text);
	margin: 0;
}

.bn .brimco-market__asat {
	font: 500 11px/1 var(--label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text);
	margin: 10px 0 0;
}

.bn .brimco-market__facts {
	margin: 26px 0 0;
	display: grid;
	gap: 12px;
}

.bn .brimco-market__facts div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
}

.bn .brimco-market__facts dt {
	color: var(--text);
}

.bn .brimco-market__facts dd {
	margin: 0;
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.bn .brimco-market__profile {
	display: inline-block;
	margin-top: 20px;
	font: 600 11px/1 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	background: var(--paper);
	padding: 12px 14px;
	transition: background-color .16s var(--ease), color .16s var(--ease);
}

/* A company with no page yet is named, not linked. */
.bn .brimco-market__company {
	margin: 20px 0 0;
	font: 600 11px/1.4 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text);
}

.bn .brimco-market__profile:hover {
	background: var(--ink);
	color: var(--paper);
}

/* ---------- advertising: declared, reserved, never overlaying ---------- */

.bn-prose .brimco-ad--in_content {
	margin: 2.6em 0;
	padding: 22px 0;
	border-top: 1px solid var(--ink);
	display: grid;
	justify-items: center;
	gap: 12px;
}

.bn-prose .brimco-ad--in_content::before {
	content: "Advertisement";
	justify-self: start;
	font: 600 10px/1 var(--label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text);
}

.bn-prose .brimco-ad--in_content img {
	display: block;
	height: auto;
	max-width: 100%;
}

.bn .brimco-ad-slot {
	background: var(--surface);
	min-height: 140px;
	display: grid;
	place-items: center;
	margin: 2.4em 0;
}

/* ---------- filed under ---------- */

.bn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding-top: 44px;
}

.bn-tags .bn-label {
	margin-right: 6px;
}

.bn-tags a {
	font: 500 12.5px/1 var(--sans);
	background: var(--surface);
	padding: 9px 13px;
	color: var(--text);
	text-decoration: none;
	transition: color .16s var(--ease), background-color .16s var(--ease);
}

.bn-tags a:hover {
	color: var(--ink);
	background: var(--accent);
}

/* ---------- the writer ---------- */

.bn-writer {
	padding-top: 52px;
}

.bn-writer__card {
	background: var(--band);
	color: var(--paper);
	padding: 34px 36px;
	max-width: calc(var(--measure) + var(--rail) + var(--gap));
	/* Flush left with Filed under, previous/next and the prose above it.
	   Centred, it was the only band on the page starting somewhere else. */
	margin-left: 0;
	margin-right: auto;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
}

.bn-writer__portrait img {
	display: block;
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: 0;
}

.bn-writer .bn-label {
	color: rgba(255, 255, 255, .55);
}

.bn-writer__name {
	font-size: 24px;
	font-weight: 600;
	margin: 8px 0;
}

.bn-writer__name a {
	color: var(--paper);
	text-decoration: none;
}

.bn-writer__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bn-writer__beat {
	font: 500 11px/1 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin: 0 0 12px;
}

.bn-writer__bio {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
	max-width: 54ch;
}

.bn-writer__more {
	justify-self: end;
	white-space: nowrap;
	font: 600 11px/1 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--band);
	background: var(--paper);
	text-decoration: none;
	padding: 13px 18px;
	transition: opacity .16s var(--ease);
}

.bn-writer__more:hover {
	opacity: .82;
}

/* ---------- previous and next ---------- */

.bn-nextprev {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-top: 40px;
}

/* The pair mirrors: the thumbnail sits on the outside edge each side, so the
   two titles face each other across the gutter. */
.bn-nextprev__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.bn-nextprev__item--next {
	grid-template-columns: minmax(0, 1fr) 72px;
	text-align: right;
}

.bn-nextprev__shot {
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--surface);
}

.bn-nextprev__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s var(--ease);
}

.bn-nextprev__item:hover .bn-nextprev__shot img {
	transform: scale(1.04);
}

.bn-nextprev .bn-label {
	color: var(--link);
	margin-bottom: 8px;
}

.bn-nextprev a {
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
}

.bn-nextprev a:hover {
	color: var(--link);
}

/* ---------- related reading ---------- */

.bn-related {
	padding-top: 56px;
	padding-bottom: 72px;
}

.bn-related__head {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 22px;
}

.bn-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
}

.bn-card {
	display: grid;
	gap: 12px;
	align-content: start;
}

.bn-card__shot {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface);
}

.bn-card__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s var(--ease);
}

.bn-card:hover .bn-card__shot img {
	transform: scale(1.03);
}

.bn-card__meta {
	font: 500 11px/1 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}

/* Qualified with the anchor because .bn a sets the link colour and outranks a
   lone class, which left every card headline reading teal instead of ink. The
   same fault bit the contents list, and it is worth suspecting whenever one
   declaration is ignored while its neighbours land. */
.bn a.bn-card__title,
.bn-card__title {
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
}

.bn-card:hover a.bn-card__title,
.bn-card:hover .bn-card__title {
	color: var(--link);
}

/* ---------- narrower screens ---------- */

@media (max-width: 1024px) {
	.bn-hero,
	.bn-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.bn-rail__inner {
		position: static;
	}

	.bn-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.bn-writer__card {
		grid-template-columns: 88px minmax(0, 1fr);
		padding: 24px;
		gap: 20px;
	}

	.bn-writer__portrait img {
		width: 88px;
		height: 88px;
	}

	.bn-writer__more {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.bn-nextprev {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bn-nextprev__item--next {
		grid-template-columns: 72px minmax(0, 1fr);
		text-align: left;
	}

	/* Stacked, both rows read the same way round. */
	.bn-nextprev__item--next .bn-nextprev__shot {
		order: -1;
	}
}

@media (max-width: 520px) {
	.bn-writer__card {
		grid-template-columns: 1fr;
	}

	.bn-related__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bn * {
		transition: none;
	}

	.bn-card:hover .bn-card__shot img,
	.bn-nextprev__item:hover .bn-nextprev__shot img {
		transform: none;
	}
}


/* ---------- the company record ----------
   The profile page reuses the article's markup contract, so most of this
   file already applies. These are the parts only a company page has: the
   record card beside the prose, and a body with no rail. */

.bn-record {
	background: var(--surface);
	padding: 24px;
}

.bn-record__ticker {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 18px;
}

.bn-record__sym {
	font: 600 22px/1 var(--label);
	letter-spacing: .08em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.bn-record__ex {
	font: 500 11px/1 var(--label);
	letter-spacing: .08em;
	color: var(--text);
}

.bn-record__facts {
	margin: 0;
	display: grid;
	gap: 14px;
}

.bn-record__facts div {
	display: grid;
	gap: 2px;
}

.bn-record__facts dt {
	font: 500 11px/1 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text);
}

.bn-record__facts dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ink);
}

.bn-record__site {
	display: inline-block;
	margin-top: 22px;
	font: 600 11px/1 var(--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	background: var(--paper);
	padding: 12px 14px;
	transition: background-color .16s var(--ease), color .16s var(--ease);
}

.bn-record__site:hover {
	background: var(--ink);
	color: var(--paper);
}

/* The age of the record, stated rather than implied. */
.bn-record__verified {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--text);
}

/* No rail on a profile, so the prose keeps its measure and stops there
   rather than stretching to the full column. */
.bn-body--company {
	display: block;
}

.bn-body--company .bn-prose {
	max-width: var(--measure);
}

.bn--company .bn-related__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}