/*
 * The Breitling customer story — one page's skin.
 *
 * Build-17's `Site - Customer Story Breitling`: near-black, gold, no chrome, one column of
 * prose down the middle. The other fifteen case studies are untouched by this file — it is
 * enqueued for one post, from the one branch in fluent_commerce_ds_enqueue() that names it.
 *
 * ── WHY IT DEPENDS ON blog.css ──────────────────────────────────────────────
 *
 * Because the story's body is .fc-prose AND .fc-brt-prose, and both are wanted. .fc-prose is
 * the theme's answer for everything the block editor can emit — images, tables, embeds,
 * captions — so a block added to this post next month is styled rather than falling out
 * bare. This file then re-skins the five things the design draws differently: the section
 * headings, the lists, the paragraph colour, the links and the quote.
 *
 * Those overrides are all written `.fc-prose.fc-brt-prose`, both classes, and that is
 * load-bearing rather than tidy. `body.fc-ds .fc-prose h3` and `body.fc-ds .fc-brt-prose h3`
 * have IDENTICAL specificity, so with one class the winner would be decided by which
 * stylesheet the browser happened to parse second. Two classes settles it outright, whatever
 * the load order turns out to be. Same problem event.css solves the same way — see the note
 * on .fc-event__ticks.
 *
 * ── THE GOLD IS THIS PAGE'S AND NOTHING ELSE'S ──────────────────────────────
 *
 * #F5C518 is not in tokens.css and is not going in. The system's pop colour is violet, and
 * this gold is the CUSTOMER's — it belongs to a page about Breitling in the way a logo does.
 * It is declared once as --brt-gold on .fc-brt and read everywhere else, so the day a second
 * story wants its own accent, the property moves to the wrapper and the rules do not change.
 *
 * The near-black is #0E0E0E, the design's, which is neither --fc-ink-12 (#121212) nor
 * --fc-ink-10 (#0a0a0a). Four units off a token would normally be a rounding error worth
 * absorbing; here it is the page's whole surface and it sits under a gold that was chosen
 * against it, so the design's number stands. Same for the three bone tints — 0.88 / 0.7 /
 * 0.16, where the system's ramp offers 0.8 / 0.6 / 0.2.
 *
 * 40px, 64px, 96px and 420px are literals for the reason the lockup's 17 and 12 are: they
 * are not steps on the 8/16/24/32/54/72/120 scale, and writing them as tokens would invite
 * something else to reuse a number that means nothing outside this page. Where the design's
 * measurement IS a step — 54, 72, 120 — the token is used.
 *
 * ── THE READING SIZE IS THE SITE'S, NOT THE EXPORT'S ────────────────────────
 *
 * The design sets the story's paragraphs at var(--type-body-18), and in the export's own
 * token file that is 18px. In ours it is 20px: layout.css pins body copy two pixels above
 * the export across the board, which makes the site's paragraph size --type-body-16 = 18px.
 * See READING SIZE in layout.css. So the prose here reads --type-body-16 and renders the
 * 18px the design drew — following the design's INTENT rather than its variable name, and
 * matching every other page's body copy while doing it.
 *
 * ── THE BACKGROUND IS ON THE BODY ───────────────────────────────────────────
 *
 * One rule reaches outside .fc-brt, and it has to. .fc-shell is capped at --canvas (1920px)
 * and centred, so a background painted inside it leaves bone down both sides of a wider
 * monitor and bone under the fold of a short window. The body is the only element that
 * covers the viewport. It is gated on .fc-story-brt, which
 * fluent_commerce_story_breitling_body_class() adds to this post and to nothing else.
 *
 * ── WHAT IS NOT IN HERE ─────────────────────────────────────────────────────
 *
 * The closing button. It is .fc-btn out of layout.css — one geometry, one arrow, one
 * transition, shared with every other CTA on the site. All this file does to it is set the
 * three custom properties it reads its colour from, and own the hover that follows from
 * choosing a resting colour. See THE CLOSING DEMO REQUEST.
 *
 * The lockup and the email CTA block, which used to be most of this section. The close was a
 * form until 2026-08-26 and is a link now; inc/ds-case-study.php holds the decision, and
 * .fc-lockup[data-tone="dark"] in layout.css goes back to shipping unused with the Breitling
 * story still named in its docblock as a caller. Whoever brings the form back will want both
 * notes.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SURFACE
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds.fc-story-brt {
	background: #0e0e0e;
}

body.fc-ds .fc-brt {
	--brt-gold: #f5c518;
	--brt-ink: #0e0e0e;
	/* The design's own tints of bone. Local, because they are one page's ramp. */
	--brt-on: #f2f1ed;
	--brt-on-strong: #ffffff;
	--brt-copy: rgba(242, 241, 237, 0.88);
	--brt-muted: rgba(242, 241, 237, 0.7);
	--brt-hair: rgba(242, 241, 237, 0.16);

	/*
	 * The design's rhythm, as two numbers rather than thirty: 120px between bands and 96px
	 * between the story's sections. Hoisted so the narrow steps at the foot of this file can
	 * retune the whole page's vertical scale in two declarations.
	 */
	--brt-band: var(--sp-120);
	--brt-step: 96px;

	background: var(--brt-ink);
	color: var(--brt-on);
	font-family: var(--font-core);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BACK BAR
 * Sticky, in the slot the site nav would have been in, and sticky for the same reason it
 * is: .fc-page uses overflow-x: clip rather than hidden, so it is not a scrollport and a
 * sticky child of it sticks to the viewport. --fc-admin-h keeps it clear of the admin bar
 * for logged-in editors. See NAV SHELL in chrome.css.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-bar {
	position: sticky;
	top: var(--fc-admin-h);
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-32);
	height: 96px;
	padding: 0 var(--gutter-page);
	/* 92% rather than solid: the photograph travels under it and should show that it has. */
	background: rgba(14, 14, 14, 0.92);
	border-bottom: var(--stroke-1) solid var(--brt-hair);
	/*
	 * The bar is the only thing between the page and the viewport edge, so it blurs what
	 * passes under it where the browser can. Cheap, and skipped silently where it cannot.
	 */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body.fc-ds .fc-brt-back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Muted bone, not gold: it is a way out, not the thing being offered. */
	color: var(--brt-muted);
	transition: color var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-brt-back:hover {
	color: var(--brt-on-strong);
}

/* The arrow leads the label, so it travels the way it points. */
body.fc-ds .fc-brt-arrow {
	flex: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-brt-back:hover .fc-brt-arrow {
	transform: translateX(-3px);
}

body.fc-ds .fc-brt-brand {
	flex: none;
	display: flex;
	align-items: center;
}

/*
 * 1.2 × --logo-h-nav, which is chrome.css's correction for the whitespace baked into the
 * SVG. The design writes a flat --logo-h-nav here, but a visitor arriving from any other
 * page would then watch the wordmark shrink by a fifth.
 */
body.fc-ds .fc-brt-logo {
	display: block;
	height: calc(var(--logo-h-nav) * 1.2);
	width: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE HEAD
 * Wordmark, eyebrow, headline. Centred, and the only centred type on the page.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-54);
	padding: var(--brt-band) var(--gutter-page) var(--sp-72);
	text-align: center;
}

body.fc-ds .fc-brt-logo-customer {
	display: block;
	width: min(340px, 70%);
	height: auto;
}

body.fc-ds .fc-brt-head__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-32);
	max-width: 900px;
}

body.fc-ds .fc-brt-eyebrow {
	font-size: 13px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--brt-gold);
}

/*
 * Instrument Sans at 500, NOT the display serif tokens.css gives every h1. Same call
 * blog.css makes for in-article subheads and for the same reason: the serif is the site's
 * voice, and this page is wearing the customer's.
 *
 * clamp() and not a --type role, because none of them is this: 30→46px is a narrower ramp
 * than --type-display-48 and it is pinned to the design's own numbers.
 */
body.fc-ds .fc-brt-title {
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1.22;
	letter-spacing: 0.01em;
	max-width: 38ch;
	color: var(--brt-on-strong);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE HERO PHOTOGRAPH
 * A band rather than a whole picture: 58vh capped at 560, cropped from the middle.
 *
 * The file is 1200px wide, which is what the design supplied, and between the 1920 canvas'
 * gutters the box is about 1500 — so on the widest screens it is scaled up by a quarter.
 * Nothing here can fix that and nothing should try: there is no larger original.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-shot {
	padding: 0 var(--gutter-page);
}

body.fc-ds .fc-brt-shot__box {
	height: min(58vh, 560px);
	overflow: hidden;
}

body.fc-ds .fc-brt-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STAT BAND
 * Between two hairlines, one rule down the left of each column but the first.
 *
 * grid-auto-flow: column rather than repeat(4, 1fr), and that is the one deliberate
 * departure from the export. The design draws four figures; the post holds three. Auto
 * columns render whichever they are given, so adding the design's fourth figure is a paste
 * in Gutenberg and neither this file nor the template has to be told.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-band {
	margin-top: var(--brt-band);
	padding: 0 var(--gutter-page);
}

body.fc-ds .fc-brt-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border-top: var(--stroke-1) solid var(--brt-hair);
	border-bottom: var(--stroke-1) solid var(--brt-hair);
}

body.fc-ds .fc-brt-stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	padding: var(--sp-54) 40px;
	border-left: var(--stroke-1) solid var(--brt-hair);
}

/* The band's own left edge is the gutter, not a rule. */
body.fc-ds .fc-brt-stat:first-child {
	border-left: 0;
}

body.fc-ds .fc-brt-stat__value {
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: clamp(34px, 3vw, 44px);
	line-height: var(--lh-flush);
	letter-spacing: -0.01em;
	/* Tabular, so "4 months" and "200+" sit on the same rhythm as "20%". */
	font-variant-numeric: tabular-nums;
	color: var(--brt-gold);
}

body.fc-ds .fc-brt-stat__label {
	font-size: 15px;
	font-weight: var(--fw-medium);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--brt-muted);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BODY
 * One 880px column, centred, holding the story and the closing quote.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-body {
	display: flex;
	flex-direction: column;
	gap: var(--brt-step);
	max-width: calc(880px + 2 * var(--gutter-page));
	margin: 0 auto;
	padding: var(--brt-band) var(--gutter-page);
}

/*
 * The prose. Everything below is an override of blog.css, so every selector carries both
 * classes — see WHY IT DEPENDS ON blog.css at the top of this file.
 */
body.fc-ds .fc-prose.fc-brt-prose {
	font-size: var(--type-body-16);
	line-height: 1.75;
	letter-spacing: 0.01em;
	color: var(--brt-copy);
	/* The gap between a heading and its first paragraph, and between paragraphs. */
	--sp-flow: var(--sp-32);
}

/*
 * The section headings. h3 in the database — the import wrote them at that level, and the
 * design's own h2 would mean rewriting the post to change a typeface — reskinned here into
 * the design's gold rule plus a 15px uppercase label. h2 takes the same treatment so an
 * editor who types the next section at the other level still gets the same page.
 *
 * The 40px rule is a ::before rather than a span, because the heading is a Gutenberg block
 * and an editor working in it should not be able to delete the graphic half of it.
 */
body.fc-ds .fc-prose.fc-brt-prose h2,
body.fc-ds .fc-prose.fc-brt-prose h3 {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: 15px;
	line-height: var(--lh-snug);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brt-gold);
}

body.fc-ds .fc-prose.fc-brt-prose h2::before,
body.fc-ds .fc-prose.fc-brt-prose h3::before {
	content: "";
	flex: none;
	width: 40px;
	height: 1px;
	background: var(--brt-gold);
}

/*
 * The 96px between sections. It is the HEADING that carries it, so the gap belongs to
 * whatever the section contains rather than to a fixed count of paragraphs — and the first
 * heading has none, because the body's own padding is already above it.
 */
body.fc-ds .fc-prose.fc-brt-prose > h2 + *,
body.fc-ds .fc-prose.fc-brt-prose > h3 + * {
	margin-top: var(--sp-32);
}

body.fc-ds .fc-prose.fc-brt-prose > * + h2,
body.fc-ds .fc-prose.fc-brt-prose > * + h3 {
	margin-top: var(--brt-step);
}

body.fc-ds .fc-prose.fc-brt-prose p {
	text-wrap: pretty;
}

body.fc-ds .fc-prose.fc-brt-prose strong,
body.fc-ds .fc-prose.fc-brt-prose b {
	font-weight: var(--fw-semibold);
	color: var(--brt-on-strong);
}

/*
 * Prose links keep the underline blog.css gives them and change colour: inside a paragraph
 * the underline is what makes a link findable, and it is the one thing on this page that
 * must not be quietly turned off. Everything else that is a link here — the two back links,
 * the wordmark, the mailto — is furniture and is styled by name.
 */
body.fc-ds .fc-prose.fc-brt-prose a {
	color: var(--brt-gold);
	border-bottom-color: rgba(245, 197, 24, 0.4);
}

body.fc-ds .fc-prose.fc-brt-prose a:hover {
	color: var(--brt-on-strong);
	border-bottom-color: var(--brt-on-strong);
}

/*
 * THE NUMBERED ROWS.
 *
 * The design draws every list item as a ruled row with a gold zero-padded numeral beside
 * it, and it numbers them in JavaScript. Here it is a CSS counter, which means the numerals
 * are the browser's: an item added, removed or dragged in Gutenberg renumbers the list
 * without anybody touching this file, and the numbers cannot go stale because they were
 * never written down.
 *
 * decimal-leading-zero is what gives 01..09 — the export's String(i + 1).padStart(2, '0'),
 * for free and in every language the page might be read in.
 *
 * It applies to <ol> as well as <ul> even though the design only draws bullets: a numbered
 * list styled as bullets and an unnumbered one styled as digits would be the same markup
 * looking like two different components.
 *
 * NOT A GRID, and that is the second departure from the export. The export's row is
 * grid-template-columns: 28px 1fr because every item it draws is one bare text run beside the
 * numeral span — two children, two cells, done. Real post content is not that tidy: the
 * Results list leads each item with <strong>Phase 1 delivered in 4 months:</strong> and then
 * runs on, which is a second child, and grid auto-placement drops it into the NEXT row's
 * first cell — the 28px numeral column. The item renders as a 28px-wide ribbon of text a
 * thousand pixels tall. Any <strong>, <em>, <a> or <br> an editor types would do the same.
 *
 * So the row stays in normal flow with a 44px text indent (the export's 28px column plus its
 * 16px gap) and the numeral is taken out of flow into that indent. Identical geometry, and it
 * cannot be broken by inline markup, because there are no cells left to mis-place anything
 * into.
 */
body.fc-ds .fc-prose.fc-brt-prose ul,
body.fc-ds .fc-prose.fc-brt-prose ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: brt-row;
}

body.fc-ds .fc-prose.fc-brt-prose li {
	position: relative;
	padding: 20px 0 20px 44px;
	border-top: var(--stroke-1) solid var(--brt-hair);
	line-height: 1.6;
	color: var(--brt-copy);
	text-wrap: pretty;
	counter-increment: brt-row;
}

/* The lead-in the copy sets in bold. It is a run of the same sentence, so it takes the row's
 * colour rather than blog.css's heading tone. */
body.fc-ds .fc-prose.fc-brt-prose li strong,
body.fc-ds .fc-prose.fc-brt-prose li b {
	font-weight: var(--fw-semibold);
	color: var(--brt-on-strong);
}

body.fc-ds .fc-prose.fc-brt-prose li::before {
	content: counter(brt-row, decimal-leading-zero);
	position: absolute;
	/* The row's own padding-top, so the numeral starts on the first line rather than beside
	 * the rule, plus 0.45em to sit it optically on the cap line of 18px text at 1.6. */
	top: calc(20px + 0.45em);
	left: 0;
	width: 28px;
	font-size: 13px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--brt-gold);
}

/* blog.css's 12px between items would double the row's own 20px of padding. */
body.fc-ds .fc-prose.fc-brt-prose li + li {
	margin-top: 0;
}

/*
 * And the list gets the flow gap back. layout.css hands every prose sibling --sp-flow, but
 * blog.css's `.fc-prose ul { margin: 0 }` is a class more specific and takes it away again —
 * on the blog that is right, because a bulleted list there belongs to the sentence above it.
 * Here a list is a section block like any other and the export puts 32px above it, so a
 * Results list stops hugging its heading and the Solution list stops hugging its lead-in.
 *
 * It has to sit BELOW the ul/ol rule above: same specificity, so source order decides.
 */
body.fc-ds .fc-prose.fc-brt-prose > * + ul,
body.fc-ds .fc-prose.fc-brt-prose > * + ol {
	margin-top: var(--sp-flow);
}

/*
 * The FIRST quote — Ayata Commerce, inside "The rollout". It stays in the prose where it was
 * written and keeps the two-hairline treatment blog.css already gives it, rather than the
 * closing figure's gold rule: there is one pull quote on this page and it is the named one
 * at the end. Instrument Sans rather than blog.css's Fraunces, for the same reason the
 * headline is.
 */
body.fc-ds .fc-prose.fc-brt-prose blockquote {
	border-top-color: var(--brt-hair);
	border-bottom-color: var(--brt-hair);
}

body.fc-ds .fc-prose.fc-brt-prose blockquote p {
	font-family: var(--font-core);
	font-size: clamp(20px, 1.5vw, 24px);
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--brt-on-strong);
}

body.fc-ds .fc-prose.fc-brt-prose blockquote cite {
	font-family: var(--font-core);
	color: var(--brt-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSING QUOTE
 * Gold above, hairline below, and the attribution on two lines.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-quote {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 64px 0;
	border-top: var(--stroke-1) solid var(--brt-gold);
	border-bottom: var(--stroke-1) solid var(--brt-hair);
}

body.fc-ds .fc-brt-quote__words {
	font-family: var(--font-core);
	font-weight: var(--fw-regular);
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--brt-on-strong);
	text-wrap: pretty;
}

body.fc-ds .fc-brt-quote__words p + p {
	margin-top: var(--sp-24);
}

/*
 * The quote marks. In CSS and not in the post, because they are punctuation this one layout
 * adds — the same words appear in the archive card and in the PDF without them. Hung on the
 * first and last paragraph so they sit in the text flow rather than on a line of their own.
 */
body.fc-ds .fc-brt-quote__words p:first-child::before {
	content: "\201C";
}

body.fc-ds .fc-brt-quote__words p:last-child::after {
	content: "\201D";
}

body.fc-ds .fc-brt-quote__by {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fc-bone-a60);
}

body.fc-ds .fc-brt-quote__name {
	color: var(--brt-gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE TWO PLATES
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-brt-plate-band {
	padding: 0 var(--gutter-page) var(--brt-band);
}

body.fc-ds .fc-brt-plates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

body.fc-ds .fc-brt-plate {
	height: 420px;
	overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE CLOSING DEMO REQUEST
 *
 * A sentence, one button, and the way out. It was a form until 2026-08-26 — the email CTA
 * block's markup re-skinned through its seven --fc-cta-* tone properties, a dark .fc-lockup
 * row, a gold submit and two outcome panels — and inc/ds-case-study.php records why it is a
 * link now and what has to come back when the form does. Everything that block brought with it
 * went out of this file with it: there is no white surface left to override and no panel left
 * to recolour.
 *
 * The section's geometry is still Breitling's, so it is still stated here. What is shared is
 * .fc-cs-cta, which this file styles through the page scope rather than on its own — a second
 * story will have its own palette and should not inherit ink and gold by accident.
 * ══════════════════════════════════════════════════════════════════════════ */
body.fc-ds .fc-brt-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 0 var(--gutter-page) 140px;
	text-align: center;
}

body.fc-ds .fc-brt-cta .fc-cs-cta__lead {
	max-width: 24em;
	font-size: var(--type-body-16);
	line-height: 1.7;
	letter-spacing: 0.01em;
	color: var(--brt-muted);
}

/*
 * THE GOLD BUTTON IS A COLOURWAY, NOT A NEW BUTTON.
 *
 * .fc-btn out of layout.css carries the geometry, the arrow and the transition, and reads its
 * colour from three custom properties — so this is the same object as every other CTA on the
 * site wearing this page's paint, rather than a fourth button. layout.css's own note asks
 * whether a fifth VARIANT is really needed before adding one; this is not one. It is not
 * .fc-btn--gold and it is not in layout.css, because gold is this page's and nothing else's,
 * exactly as --brt-gold is.
 *
 * Owning the resting colour means owning the hover, which is why it is stated below rather
 * than left to whichever variant looked closest.
 *
 * align-self, because .fc-btn sets flex-start and this stack is centred.
 */
body.fc-ds .fc-brt-cta .fc-btn {
	--fc-btn-bg: var(--brt-gold);
	--fc-btn-on: var(--brt-ink);
	--fc-btn-edge: var(--brt-gold);
	align-self: center;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * Hover to white, not to bone. Bone lands near white anyway; what it does not know is that the
 * button underneath is gold, so it would read as the colour draining out.
 */
body.fc-ds .fc-brt-cta .fc-btn:hover {
	border-color: var(--brt-on-strong);
	background: var(--brt-on-strong);
	color: var(--brt-ink);
}

body.fc-ds .fc-brt-cta .fc-btn:focus-visible {
	outline-color: var(--brt-gold);
}

/*
 * The second back link, under the button. Smaller and tracked wider than the one in the bar:
 * the design draws them as two different things, and they are — the bar's is a way out held
 * open the whole way down the page, this one is the end of it.
 */
body.fc-ds .fc-brt-back--small {
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--fc-bone-a60);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROWER
 * The export's own two steps, at its own two widths — 1100 and 700 — plus what it does not
 * say and the page needs: the vertical scale, the bar's height and the plates' fixed 420px,
 * none of which survive a phone.
 *
 * @container page, not @media: the queried box is .fc-shell. Every other responsive rule in
 * the system is written this way, and mixing the two is how a page ends up with two
 * disagreeing ideas of "narrow".
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-brt-stats {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Two columns means the third figure starts a second row, and its left rule is now the
	 * band's left edge. Every ODD child loses it instead of only the first.
	 */
	body.fc-ds .fc-brt-stat:nth-child(odd) {
		border-left: 0;
	}

	body.fc-ds .fc-brt-plates {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-brt-plate {
		height: 320px;
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-brt {
		--brt-band: var(--sp-72);
		--brt-step: var(--sp-54);
	}

	body.fc-ds .fc-brt-bar {
		height: 72px;
	}

	body.fc-ds .fc-brt-head {
		gap: var(--sp-32);
		padding-bottom: 48px;
	}

	body.fc-ds .fc-brt-shot__box {
		height: min(42vh, 360px);
	}

	body.fc-ds .fc-brt-quote {
		gap: var(--sp-24);
		padding: 40px 0;
	}

	body.fc-ds .fc-brt-cta {
		padding-bottom: var(--sp-72);
	}
}

@container page (max-width: 700px) {
	body.fc-ds .fc-brt-stats {
		grid-template-columns: 1fr;
	}

	/*
	 * One column: the rule between figures is horizontal, and the band's own top border is
	 * already above the first one.
	 */
	body.fc-ds .fc-brt-stat {
		padding: var(--sp-32) 0;
		border-left: 0;
		border-top: var(--stroke-1) solid var(--brt-hair);
	}

	body.fc-ds .fc-brt-stat:first-child {
		border-top: 0;
	}

	/*
	 * The bar keeps both of its parts — the way back matters more here than anywhere, since
	 * there is no nav behind it — but 32px between them at 360px wide pushes the link into
	 * the wordmark. 16 still reads as a gap.
	 */
	body.fc-ds .fc-brt-bar {
		gap: var(--sp-16);
	}

	/*
	 * Scoped to the bar, not to every .fc-brt-back: this is a fix for two things crowding
	 * each other in one 360px row, and the closing link at the foot of the page has the
	 * whole width to itself and keeps the tracking the design gives it.
	 */
	body.fc-ds .fc-brt-bar .fc-brt-back {
		font-size: 13px;
		letter-spacing: 0.02em;
		/* And it stops wrapping — see the note on the wordmark below. */
		flex: none;
		white-space: nowrap;
	}

	/*
	 * And the wordmark gives way, because at 390px it was taking 232 of the row and leaving the
	 * back link 102 — three lines of it.
	 *
	 * Which of the two yields is a decision, not a breakpoint: the link above is nowrap and out
	 * of the flex negotiation, the brand is allowed to shrink below its content size, and the
	 * wordmark scales into whatever is left. So the row is one line at every width without this
	 * file knowing any of them, and the thing that gets smaller is the logo — still legible at
	 * 320px — rather than the sentence, which does not read at three lines.
	 *
	 * The brand's own `flex: none` has to be undone as well as its min-width: on its own,
	 * min-width: 0 gives a flex item that was already refusing to shrink nothing to shrink by.
	 *
	 * max-height rather than height, because chrome.css's `* 1.2` correction for the SVG's
	 * whitespace is a height and would otherwise win.
	 */
	body.fc-ds .fc-brt-bar .fc-brt-brand {
		flex: 0 1 auto;
		min-width: 0;
	}

	body.fc-ds .fc-brt-bar .fc-brt-logo {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 32px;
	}

	body.fc-ds .fc-brt-plate {
		height: 240px;
	}
}

/*
 * The numbered rows, on a phone. 28px of numeral column plus 16 of gap is a fifth of a
 * 360px screen given to two digits, so the numeral goes above its row instead of beside
 * it — which keeps the count and gives the sentence the full width.
 */
@container page (max-width: 520px) {
	body.fc-ds .fc-prose.fc-brt-prose li {
		padding-left: 0;
		/* Room above the sentence for the numeral, which is what the indent used to hold. */
		padding-top: 34px;
	}

	body.fc-ds .fc-prose.fc-brt-prose li::before {
		top: 20px;
	}
}