/*
 * STORY — FREEDOM. Brown on white, over a warm sand band.
 *
 * Loads on one URL, on top of blog.css and story.css. story.css carries the bar, the facts, the
 * copy stream, the ledger rows, the closing band and the CTA; this file is the paint, the two
 * compositions only this page draws (the split fold, the ledger) and the handful of places the
 * design tunes a shared component.
 *
 * ── THE TUNING BLOCK IS DELIBERATE ──────────────────────────────────────────
 *
 * Freedom's pull quote is a 2px rule and 400 weight where MediaWorld's is 3px and 500; its list
 * marker is a dash in a 12px column where MediaWorld's is an arrow in a 20px one; its ledger rows
 * are looser and its figures larger than the shared row. Those are five small overrides in one
 * commented block, which is the deal the shared layer makes: it owns the shape, and a story pays
 * for its own deviations in its own file. The alternative — a property for every number in
 * story.css — is a shared layer that is only shared in name.
 *
 * Breakpoints are @container page, never @media. See the head of story.css.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SURFACE
 * White, on the BODY. It cannot go on .fc-page: .fc-shell is capped at --canvas (1920), so a
 * ground painted inside it leaves the theme's bone showing down both sides of a wider monitor.
 * fc-story-fdm is added by fluent_commerce_story_body_class() to this post and nothing else.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds.fc-story-fdm {
	background: #ffffff;
}

body.fc-ds .fc-fdm {
	--st-accent: #8c5a3c;
	--st-ink: #121212;
	--st-copy: rgba(18, 18, 18, 0.88);
	--st-muted: rgba(18, 18, 18, 0.72);
	--st-hair: rgba(18, 18, 18, 0.16);
	--st-bar-bg: rgba(255, 255, 255, 0.94);
	--st-band-bg: #121212;
	--st-band-on: #ffffff;
	--st-band-muted: rgba(255, 255, 255, 0.6);
	/* The heading ramp tops out at 30px here, against MediaWorld's 34. */
	--st-h2: 30px;
	/* A dash, in a narrow column. See THE COPY STREAM, TUNED. */
	--st-mark: "\2013";
	--st-mark-w: 12px;
	--st-quote-edge: 2px;
	--st-band-measure: 1000px;
	--st-band-size: 40px;
	--st-band-weight: var(--fw-regular);
	--fdm-sand: #f1ece6;
	/* The reading measure. Prose, not boards, so it is narrower than MediaWorld's. */
	--fdm-measure: calc(760px + 2 * var(--gutter-page));
	background: #ffffff;
	color: var(--st-ink);
	font-family: var(--font-core);
}

/* The bar's back button: outlined in ink, filling ink on hover. */
body.fc-ds .fc-fdm .fc-story-back {
	--fc-btn-bg: transparent;
	--fc-btn-on: var(--st-ink);
	--fc-btn-edge: var(--st-ink);
}

body.fc-ds .fc-fdm .fc-story-back:hover {
	background: var(--st-ink);
	color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FOLD
 * Two halves with a hairline between them: what the page has to say on the left, one portrait
 * room set on the right. 1.05fr against 1fr, so the type column is a hair wider than the
 * photograph and the headline gets its line breaks.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fdm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: stretch;
	border-bottom: var(--stroke-1) solid var(--st-hair);
}

/*
 * space-between and not a gap: the three parts are pushed apart to the height of the
 * photograph beside them, so the facts land on its optical centre and the button on its foot at
 * any window height. The 96px gap is the floor, for a window short enough that they meet.
 */
body.fc-ds .fc-fdm-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 96px;
	padding: var(--sp-120) var(--sp-72) var(--sp-72) var(--gutter-page);
}

body.fc-ds .fc-fdm-hero__lockup {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

body.fc-ds .fc-fdm-logo {
	width: min(240px, 58%);
	height: auto;
}

/*
 * Instrument Sans at 500, not the display serif tokens.css gives every h1 — the 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.
 *
 * A gentler ramp and a looser line than MediaWorld's, because this headline is a sentence and
 * that one is three words. Both are the design's own numbers.
 */
body.fc-ds .fc-fdm-title {
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: clamp(32px, 3.4vw, 52px);
	line-height: 1.14;
	color: var(--st-ink);
	text-wrap: pretty;
}

/* Three facts, and a label a step quieter than the fact under it. */
body.fc-ds .fc-fdm-facts {
	--st-facts: 3;
}

body.fc-ds .fc-fdm-facts .fc-story-fact__label {
	color: rgba(18, 18, 18, 0.55);
}

body.fc-ds .fc-fdm-facts .fc-story-fact__value {
	font-weight: var(--fw-medium);
}

/* Ink button on white, inverting on hover. */
body.fc-ds .fc-fdm .fc-story-visit {
	--fc-btn-bg: var(--st-ink);
	--fc-btn-on: #ffffff;
	--fc-btn-edge: var(--st-ink);
}

body.fc-ds .fc-fdm .fc-story-visit:hover {
	background: #ffffff;
	color: var(--st-ink);
}

/*
 * display: grid on the frame, so the <img> is a stretched grid item and its height: 100%
 * resolves against a definite box. A plain block child with a percentage height inside a parent
 * whose height comes from its sibling is the version of this that quietly collapses.
 *
 * The min-height is on the image and not on the frame, because it has to be the thing that
 * grows the row when the type column is shorter than 82vh.
 */
body.fc-ds .fc-fdm-hero__shot {
	display: grid;
	overflow: hidden;
	border-left: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-fdm-hero__shot .fc-story-photo {
	height: 100%;
	min-height: min(82vh, 760px);
	object-fit: cover;
	object-position: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE LEDGER
 * A claim on sand, four figures beside it. The one warm band on the page, which is what stops
 * the numbers reading as the results section arriving early.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fdm-ledger-band {
	background: var(--fdm-sand);
}

body.fc-ds .fc-fdm-ledger {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--sp-72);
	padding: 96px var(--gutter-page);
}

body.fc-ds .fc-fdm-ledger__claim {
	font-family: var(--font-core);
	font-weight: var(--fw-medium);
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.2;
	color: var(--st-ink);
	text-wrap: pretty;
}

/*
 * The shared rows, one column, looser and larger: this band is the page's headline evidence,
 * where MediaWorld's results are a list. The hairline goes up from 0.16 to 0.2 because it is
 * drawn on sand rather than on white and 0.16 disappears into it.
 */
body.fc-ds .fc-fdm-ledger__rows {
	--st-row-value: 5.5ch;
}

body.fc-ds .fc-fdm-ledger__rows .fc-story-row {
	gap: var(--sp-32);
	padding: 20px 0;
	border-top-color: rgba(18, 18, 18, 0.2);
}

body.fc-ds .fc-fdm-ledger__rows .fc-story-row__value {
	font-size: clamp(28px, 2.4vw, 36px);
}

body.fc-ds .fc-fdm-ledger__rows .fc-story-row__label {
	font-size: 15px;
	color: rgba(18, 18, 18, 0.72);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STORY
 * One column at the reading measure, which is the whole middle of the page. No side rail, no
 * board: the design lets the prose run and this is the only story of the four that does.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fdm-open {
	max-width: var(--fdm-measure);
	padding: var(--sp-120) var(--gutter-page) 0;
}

body.fc-ds .fc-fdm-open .fc-story-lede {
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.6;
}

body.fc-ds .fc-fdm-body {
	display: flex;
	flex-direction: column;
	gap: 96px;
	max-width: var(--fdm-measure);
	padding: 96px var(--gutter-page) var(--sp-120);
}

body.fc-ds .fc-fdm-part {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
}

/* A looser line than the shared heading, because these two run to two lines at every width. */
body.fc-ds .fc-fdm .fc-story-h2 {
	font-weight: var(--fw-medium);
	font-size: clamp(24px, 2vw, var(--st-h2));
	line-height: 1.25;
	letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE COPY STREAM, TUNED
 * Four numbers where this design and MediaWorld's disagree. The shared component owns the
 * shape — a marker column, a rule over each item, a rule down the side of a quote — and this is
 * what the design draws inside it.
 *
 * THE MARKER IS AN EN DASH. The export draws an em dash. No em dashes anywhere on the site is a
 * standing rule for this build; at 12px in an accent colour the two are all but the same mark,
 * and this one is a bullet rather than punctuation, so the rule is kept rather than argued with.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fdm .fc-story-list__item {
	padding: var(--sp-16) 0;
	font-weight: var(--fw-regular);
	line-height: 1.6;
	color: var(--st-copy);
}

body.fc-ds .fc-fdm .fc-story-quote__words {
	font-weight: var(--fw-regular);
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.5;
}

/* The closing band's words are lighter and looser here than the shared default. */
body.fc-ds .fc-fdm-band .fc-story-band__words {
	line-height: 1.35;
	letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSING COLUMNS
 * What changed, and what is next. Two equal columns of prose with no rule between them, because
 * they are two halves of one answer rather than a comparison.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fdm-results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 96px;
	padding: var(--sp-120) var(--gutter-page);
}

body.fc-ds .fc-fdm-col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
}

/* The partner credit: a rule over it, and quieter than the paragraphs above. */
body.fc-ds .fc-fdm-credit {
	padding-top: var(--sp-24);
	border-top: var(--stroke-1) solid var(--st-hair);
	font-size: 15px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	color: rgba(18, 18, 18, 0.6);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSE
 * Ink button on white, going brown on hover. story.css owns the geometry; owning the resting
 * colour means owning the hover, or whichever .fc-btn variant looked closest decides it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-fdm-cta .fc-btn {
	--fc-btn-bg: var(--st-ink);
	--fc-btn-on: #ffffff;
	--fc-btn-edge: var(--st-ink);
}

body.fc-ds .fc-fdm-cta .fc-btn:hover {
	border-color: var(--st-accent);
	background: var(--st-accent);
	color: #ffffff;
}

body.fc-ds .fc-fdm-cta .fc-btn:focus-visible {
	outline-color: var(--st-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROWER
 * The export's own step is 1100. Below it the fold stops being two halves: the photograph goes
 * under the type rather than beside it, and its hairline moves from the left edge to the top,
 * because a vertical rule between two stacked blocks is a rule between nothing.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-fdm-hero,
	body.fc-ds .fc-fdm-ledger,
	body.fc-ds .fc-fdm-results {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-fdm-hero__text {
		gap: var(--sp-54);
		padding: var(--sp-72) var(--gutter-page);
	}

	body.fc-ds .fc-fdm-hero__shot {
		border-top: var(--stroke-1) solid var(--st-hair);
		border-left: 0;
	}

	body.fc-ds .fc-fdm-hero__shot .fc-story-photo {
		min-height: min(60vh, 520px);
	}

	body.fc-ds .fc-fdm-ledger {
		gap: 40px;
		padding: var(--sp-72) var(--gutter-page);
	}

	body.fc-ds .fc-fdm-results {
		gap: var(--sp-54);
		padding: var(--sp-72) var(--gutter-page);
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-fdm-open {
		padding-top: var(--sp-72);
	}

	body.fc-ds .fc-fdm-body {
		gap: var(--sp-72);
		padding: var(--sp-54) var(--gutter-page) var(--sp-72);
	}

	body.fc-ds .fc-fdm-hero__lockup {
		gap: var(--sp-24);
	}
}

@container page (max-width: 700px) {
	body.fc-ds .fc-fdm-hero__shot .fc-story-photo {
		min-height: min(52vh, 420px);
	}
}