/*
 * STORY — the layer the four bespoke customer stories share.
 *
 * Build-18 ships four case-study designs (MediaWorld, Freedom, The Quality Group, Psycho
 * Bunny) and they are four palettes over one page. This file is the page; the four sheets
 * beside it are the palettes.
 *
 * ── THE CONTRACT ────────────────────────────────────────────────────────────
 *
 * Nothing in here names a colour. Every one comes from a custom property that the story's
 * own sheet declares once, on its wrapper:
 *
 *   --st-accent        the one accent. Red, brown, cyan, pink.
 *   --st-ink           headline and strong text
 *   --st-copy          body copy
 *   --st-muted         notes, roles, secondary lines
 *   --st-hair          hairlines and cell borders
 *   --st-mark          the list marker, as a `content:` string: '"→"', '"—"', '"›"'
 *   --st-bar-bg        the sticky bar's ground, usually the page ground at 94%
 *   --st-band-bg       the closing quote band's ground
 *   --st-band-on       type on that band
 *   --st-band-muted    the attribution on that band
 *   --st-h2            the top of the section-heading ramp. Default 34px.
 *
 * A story sheet that sets none of them gets a page with no colour rather than a page with
 * the wrong colour, which is the failure mode worth having.
 *
 * ── WHY IT IS A SEPARATE FILE AND NOT PART OF blog.css ──────────────────────
 *
 * blog.css is on every article and every archive on the site, and none of them is a bespoke
 * customer story. This loads on five URLs. It sits ON TOP of blog.css and declares it as a
 * dependency in inc/ds.php rather than trusting source order, for the same reason event.css
 * and watch.css do.
 *
 * ── WHAT IS NOT HERE ────────────────────────────────────────────────────────
 *
 * Breitling. story-breitling.css predates this layer, carries its own copy of the bar, the
 * band and the CTA under .fc-brt-* names, and is not loaded alongside this file — its
 * registry entry says `shared => false`. Lifting it in would be a rewrite of a shipped page
 * to no visible end; the day it is redrawn it joins.
 *
 * The heroes, the stat boards, the galleries and the panels. Four designs draw four genuinely
 * different compositions there, and a shared grid with four sets of overrides on top would be
 * longer than four grids.
 *
 * Breakpoints are @container page, never @media: the queried box is .fc-shell, every other
 * responsive rule in the system is written that way, and mixing the two is how a page ends up
 * with two disagreeing ideas of "narrow".
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STICKY BACK BAR
 * In the slot the site nav would be in, and sticky for the reason .fc-navshell 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 editors.
 *
 * A GRID, NOT A FLEX ROW WITH A DECOY. The designs centre the wordmark with margin: 0 auto
 * and balance it with a hidden second copy of the back button. Three columns — 1fr auto 1fr —
 * centre the middle one with nothing shipped to hold the right-hand space.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-bar {
	position: sticky;
	top: var(--fc-admin-h);
	z-index: 60;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-32);
	height: 104px;
	padding: 0 var(--gutter-page);
	background: var(--st-bar-bg);
	border-bottom: var(--stroke-1) solid var(--st-hair);
	/* The page travels under it and should show that it has, where the browser can. */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/*
 * The back link is a real .fc-btn — the designs draw it as an outlined button, not as a text
 * link, which is the one place these stories differ from Breitling's bar. Its colours are the
 * story's, through the three --fc-btn-* properties; what is stated here is only that the
 * arrow leads the label.
 */
body.fc-ds .fc-story-back {
	justify-self: start;
}

body.fc-ds .fc-story-arrow {
	flex: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

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

body.fc-ds .fc-story-brand {
	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 60px here, but a visitor arriving from any other page would then
 * watch the wordmark change size.
 */
body.fc-ds .fc-story-logo {
	display: block;
	height: calc(var(--logo-h-nav) * 1.2);
	width: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * TYPE
 * The five roles the four designs share. Everything else is a story's own.
 * ────────────────────────────────────────────────────────────────────────── */

/* "Case study", over the headline. */
body.fc-ds .fc-story-kicker {
	font-size: 13px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--st-kicker, var(--st-accent));
}

/*
 * The section heading. clamp() and not a --type role, because none of them is this ramp; the
 * top of it is the story's, since MediaWorld draws 34px and Freedom 30.
 */
body.fc-ds .fc-story-h2 {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(24px, 2.2vw, var(--st-h2, 34px));
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--st-ink);
	text-wrap: pretty;
}

/* The opening paragraph, one step above body copy. */
body.fc-ds .fc-story-lede {
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: var(--fw-regular);
	line-height: 1.55;
	color: var(--st-ink);
	text-wrap: pretty;
}

/* A caption's label — "Peak season", "Social commerce". */
body.fc-ds .fc-story-eyebrow {
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--st-accent);
}

/* The small print under a figure or a figure caption. */
body.fc-ds .fc-story-note {
	font-size: 15px;
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--st-muted);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FACTS ROW
 * Label over fact, a hairline over each pair. Four in MediaWorld, three in Freedom, two in
 * The Quality Group — so the columns are auto rather than repeat(4, 1fr) and the count is a
 * property the story sets, or nothing at all.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-facts {
	display: grid;
	grid-template-columns: repeat(var(--st-facts, 4), minmax(0, 1fr));
	gap: var(--sp-24);
}

body.fc-ds .fc-story-fact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	padding-top: 20px;
	border-top: var(--stroke-1) solid var(--st-fact-hair, var(--st-hair));
}

body.fc-ds .fc-story-fact__label {
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--st-fact-on, var(--st-ink));
}

body.fc-ds .fc-story-fact__value {
	margin: 0;
	font-size: var(--type-body-16);
	line-height: 1.4;
	color: var(--st-fact-on, var(--st-ink));
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE VISIT BUTTON
 * .fc-btn's geometry, the story's paint, and a north-east arrow that travels the way it
 * points rather than sideways the way .fc-btn's own arrow does.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-out {
	flex: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-story-visit:hover .fc-story-out {
	transform: translate(2px, -2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE COPY STREAM
 * Paragraph, hairline list, pull quote. The body of all four stories is these three in
 * whatever order the copy runs.
 *
 * READING SIZE. The designs set var(--type-body-18), which is 18px in the export's own
 * tokens. This theme pins body copy two pixels above the export across the board, which
 * makes --type-body-16 = 18px here. So this reads --type-body-16 and renders the 18 the
 * design drew. See READING SIZE in layout.css.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-copy {
	font-size: var(--type-body-16);
	font-weight: var(--fw-regular);
	line-height: 1.75;
	color: var(--st-copy);
	text-wrap: pretty;
}

body.fc-ds .fc-story-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * grid rather than a padded li with a positioned marker: the marker column is a track, so a
 * sentence that wraps aligns under itself instead of under the glyph.
 */
body.fc-ds .fc-story-list__item {
	display: grid;
	grid-template-columns: var(--st-mark-w, 20px) 1fr;
	gap: 20px;
	padding: 18px 0;
	border-top: var(--stroke-1) solid var(--st-hair);
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--st-ink);
	text-wrap: pretty;
}

/*
 * The marker is CSS, not a character in the data. MediaWorld draws an arrow, Freedom a dash
 * and The Quality Group a chevron; passing the glyph through PHP would put four pieces of
 * punctuation in the render layer and make a marker change a code change.
 */
body.fc-ds .fc-story-list__item::before {
	content: var(--st-mark, "\2192");
	color: var(--st-accent);
}

/*
 * The pull quote. A rule down the left and the words a step above body size — the treatment
 * three of the four designs draw; The Quality Group boxes it instead and says so in its own
 * sheet.
 */
body.fc-ds .fc-story-quote {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 8px 0;
	padding: 0 0 0 32px;
	border-left: var(--st-quote-edge, 3px) solid var(--st-accent);
}

body.fc-ds .fc-story-quote__words {
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: clamp(20px, 1.7vw, 26px);
	line-height: 1.45;
	color: var(--st-ink);
	text-wrap: pretty;
}

body.fc-ds .fc-story-quote__by {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 13px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--st-muted);
}

body.fc-ds .fc-story-quote__name {
	color: var(--st-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE VALUE ROWS
 * A figure in the accent, a sentence beside it, a rule over the pair. Results, ledgers and
 * numbered lists in all four designs are this component with a different column count.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-rows {
	display: grid;
	grid-template-columns: repeat(var(--st-rows, 1), minmax(0, 1fr));
	gap: 0 72px;
}

body.fc-ds .fc-story-row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 28px;
	padding: 24px 0;
	border-top: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-story-row__value {
	min-width: var(--st-row-value, 6ch);
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--st-accent);
}

body.fc-ds .fc-story-row__label {
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--st-copy);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSING QUOTE BAND
 * Full bleed, one blockquote at display size, an attribution under it. The measure is capped
 * at 1060 plus the gutters, so on a 1920 canvas the band is full width and the words are not.
 *
 * The quote marks are in the copy, where the designs put them. Nothing here adds a `content:`
 * quote — doubling them is the failure mode of drawing them in CSS.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-band {
	background: var(--st-band-bg);
	color: var(--st-band-on);
}

body.fc-ds .fc-story-band__figure {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: calc(var(--st-band-measure, 1060px) + 2 * var(--gutter-page));
	padding: var(--sp-120) var(--gutter-page);
}

body.fc-ds .fc-story-band__words {
	font-family: var(--font-core);
	font-weight: var(--st-band-weight, var(--fw-medium));
	font-size: clamp(26px, 2.7vw, var(--st-band-size, 42px));
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--st-band-on);
	text-wrap: pretty;
}

body.fc-ds .fc-story-band__by {
	display: flex;
	align-items: center;
	gap: var(--sp-24);
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--st-band-muted, var(--st-band-on));
}

/*
 * The portrait is a real <img> in a round frame, not the design's background-image on an empty
 * span with role="img". A photograph of a person named beside it is content: it gets an
 * element that can carry alt text and that survives with images enabled and CSS off.
 */
body.fc-ds .fc-story-band__portrait {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
}

body.fc-ds .fc-story-band__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.fc-ds .fc-story-band__who {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.fc-ds .fc-story-band__name {
	color: var(--st-band-on);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * PHOTOGRAPHS
 * One rule, because every photograph on these pages is either full width in a box its parent
 * sizes, or a cell in a grid. Height and crop belong to whichever that is.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-photo {
	display: block;
	width: 100%;
	height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSING CALL TO ACTION
 * A sentence, one button, and the way out. It is a link and not the form the designs draw —
 * inc/ds-case-study.php carries that decision and what has to come back when the form does.
 *
 * .fc-cs-cta is the shared name from that file, and its docblock says it is "a name, not a
 * ruleset" until two stories want the same treatment. Four do, so this is the ruleset — and
 * still only the geometry. The button's paint is the story's.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-story-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 0 var(--gutter-page) 140px;
	text-align: center;
}

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

/* align-self, because .fc-btn sets flex-start and this stack is centred. */
body.fc-ds .fc-story-cta .fc-btn {
	align-self: center;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The closing back link is a text link, where the bar's is a button. The designs draw 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-story-back--plain {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-muted);
	transition: color var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-story-back--plain:hover {
	color: var(--st-accent);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROWER
 * What every story needs at every width, in one place. A story's own sheet handles its hero
 * and its boards.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-story-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.fc-ds .fc-story-rows {
		grid-template-columns: 1fr;
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-story-bar {
		height: 72px;
		gap: var(--sp-16);
	}

	body.fc-ds .fc-story-band__figure {
		gap: var(--sp-32);
		padding: var(--sp-72) var(--gutter-page);
	}

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

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

	/*
	 * The bar keeps both of its parts — the way back matters more here than anywhere, since
	 * there is no nav behind it — but the button and the wordmark cannot both have their
	 * natural width in a 360px row. Which of the two yields is a decision, not a breakpoint:
	 * the button stops wrapping and leaves the 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 what gets smaller is the
	 * logo — still legible at 320 — rather than the sentence, which does not read at two lines.
	 */
	body.fc-ds .fc-story-back {
		padding: 0 14px;
		font-size: 12px;
		white-space: nowrap;
	}

	body.fc-ds .fc-story-brand {
		min-width: 0;
	}

	/* max-height, because chrome.css's `* 1.2` correction is a height and would otherwise win. */
	body.fc-ds .fc-story-logo {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 30px;
	}

	body.fc-ds .fc-story-band__by {
		align-items: flex-start;
		gap: var(--sp-16);
	}
}

@container page (max-width: 520px) {
	/*
	 * The back button loses its label, not its arrow. At 360px an outlined button reading
	 * "Back to case studies" is two thirds of the row; the arrow alone is a target that still
	 * says where it goes.
	 *
	 * font-size: 0 rather than a clip rectangle or a negative indent, because the label is a
	 * bare text node inside a flex container: there is no element to clip, and text-indent
	 * does not apply to flex content. The words stay in the DOM, so they are still the link's
	 * accessible name — this hides them, it does not remove them.
	 */
	body.fc-ds .fc-story-back {
		gap: 0;
		width: 48px;
		padding: 0;
		justify-content: center;
		font-size: 0;
	}
}