/*
 * STORY — PSYCHO BUNNY. Navy, pink, blue and amber on white.
 *
 * Loads on one URL, on top of blog.css and story.css. story.css carries the bar, the facts, the
 * copy stream, the closing band and the CTA; this file is the paint, the four compositions only
 * this page draws (the navy fold, the three slabs, the reasons panel, the numbered results) and
 * the places the design tunes a shared component.
 *
 * ── FOUR COLOURS, AND WHERE EACH ONE IS DECIDED ─────────────────────────────
 *
 * This is the only one of the four stories with more than one accent, so it is the only one where
 * --st-accent changes inside the page: each narrative section sets it on its own subtree, and the
 * square in front of the heading and the rule down the side of the shared pull quote both follow
 * from that one property. The ticks and the result numbers cycle through all four with nth-child,
 * so nothing in inc/ds-story-psycho-bunny.php names a colour — it names 'pink', 'blue', 'amber',
 * and this file says what those are.
 *
 * ── TWO DARK BANDS ON A WHITE PAGE ──────────────────────────────────────────
 *
 * The fold and the close are navy; everything between them is white. The shared components inside
 * those two bands therefore need their greys inverted, and both do it the same way: the band sets
 * the --st-* properties story.css already reads rather than restating its selectors. See THE FOLD
 * and THE CLOSE.
 *
 * ── WHY THE LITERALS ARE LITERALS ───────────────────────────────────────────
 *
 * 340px slabs, the 24px tick column, 60ch and 26ch measures, 2px rules and the clamp() ramps are
 * the design's own numbers and no token means any of them. Where a token does mean the thing — the
 * gutters, the 120/96/72/54/32 rhythm, the weights, the stroke — the token is used.
 *
 * 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-pby is added by fluent_commerce_story_body_class() to this post and nothing else.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds.fc-story-pby {
	background: #ffffff;
}

body.fc-ds .fc-pby {
	/* The four. Named once, used by name everywhere below. */
	--pby-navy: #0b2a4a;
	--pby-pink: #e5487f;
	--pby-blue: #2c5fe8;
	--pby-amber: #f2a93b;
	--pby-green: #3fa96a;
	/* The kicker's pale pink, which is legible on navy where the full pink is not. */
	--pby-kicker: #f2a0c6;
	--pby-panel: #f4f6f9;
	/* The page-level accent. Each narrative section replaces it on its own subtree. */
	--st-accent: var(--pby-pink);
	--st-ink: var(--pby-navy);
	--st-copy: rgba(11, 42, 74, 0.9);
	--st-muted: rgba(11, 42, 74, 0.7);
	--st-hair: rgba(11, 42, 74, 0.18);
	/* The bar is navy, so it is the one dark thing above a white page. */
	--st-bar-bg: rgba(11, 42, 74, 0.95);
	--st-band-bg: var(--pby-pink);
	--st-band-on: #ffffff;
	--st-band-muted: rgba(255, 255, 255, 0.85);
	--st-band-measure: 1040px;
	--st-band-size: 48px;
	--st-band-weight: var(--fw-medium);
	background: #ffffff;
	color: var(--st-ink);
	font-family: var(--font-core);
}

/*
 * THE BAR IS NAVY AND EVERYTHING IN IT IS WHITE. Its hairline cannot come from --st-hair, which on
 * this page is navy at 18% for the rules drawn on white; on navy that is invisible.
 */
body.fc-ds .fc-pby .fc-story-bar {
	border-bottom-color: rgba(255, 255, 255, 0.24);
	color: #ffffff;
}

body.fc-ds .fc-pby .fc-story-back {
	--fc-btn-bg: transparent;
	--fc-btn-on: #ffffff;
	--fc-btn-edge: rgba(255, 255, 255, 0.6);
}

body.fc-ds .fc-pby .fc-story-back:hover {
	border-color: var(--pby-pink);
	background: var(--pby-pink);
	color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FOLD
 * A navy band with everything in it: the wordmark, the headline, the photograph, the facts and the
 * button. The band is the wrapper and not a background on the split, because the facts and the
 * button sit under both columns rather than inside either one.
 *
 * The four inverted properties are set here, once, so story.css's facts and the design's kicker
 * read on navy without a single one of their selectors being restated.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-top {
	--st-kicker: var(--pby-kicker);
	--st-fact-on: #ffffff;
	--st-fact-hair: rgba(255, 255, 255, 0.24);
	display: flex;
	flex-direction: column;
	gap: var(--sp-72);
	padding: var(--sp-120) var(--gutter-page) 96px;
	background: var(--pby-navy);
	color: #ffffff;
}

body.fc-ds .fc-pby-top .fc-story-fact__label {
	color: rgba(255, 255, 255, 0.6);
}

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

body.fc-ds .fc-pby-facts {
	--st-facts: 4;
}

/*
 * align-items: center, not stretch: the photograph is square and the type column is shorter than
 * it, so centring is what puts the headline on the picture's optical middle.
 */
body.fc-ds .fc-pby-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
	gap: var(--sp-72);
	align-items: center;
}

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

/*
 * No filter. story-psycho-bunny-logo.svg is already recoloured to white in the file, and the
 * design's invert(1) brightness(2) on top of that would be a correction for a problem the asset
 * does not have.
 */
body.fc-ds .fc-pby-logo {
	display: block;
	width: min(300px, 60%);
	height: auto;
}

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

/*
 * Instrument Sans at 600, not the display serif tokens.css gives every h1 — the same call
 * blog.css makes for in-article subheads: the serif is the site's voice and this page is wearing
 * the customer's.
 */
body.fc-ds .fc-pby-title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(38px, 4.6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 22ch;
	color: #ffffff;
	text-wrap: pretty;
}

/* Pink button on navy, inverting on hover. */
body.fc-ds .fc-pby .fc-story-visit {
	--fc-btn-bg: var(--pby-pink);
	--fc-btn-on: #ffffff;
	--fc-btn-edge: var(--pby-pink);
}

body.fc-ds .fc-pby .fc-story-visit:hover {
	background: #ffffff;
	color: var(--pby-pink);
}

/*
 * display: grid on the frame, so the <img> is a stretched grid item. The square crop is on the
 * image because the source is 1000x1002 and the design draws it 1:1 — near enough that the crop
 * takes a pixel, but declaring it means the row height never depends on the file.
 */
body.fc-ds .fc-pby-hero__shot {
	display: grid;
	overflow: hidden;
}

body.fc-ds .fc-pby-hero__shot .fc-story-photo {
	aspect-ratio: 1 / 1;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE THREE SLABS
 * The one place this design shouts: three figures at up to 104px, each on its own colour, butted
 * together with no gap and no gutter. Full width deliberately — the band is the statistic.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-slabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.fc-ds .fc-pby-slab {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-54);
	min-height: 340px;
	padding: var(--sp-54) 40px;
}

body.fc-ds .fc-pby-slab--pink {
	background: var(--pby-pink);
	color: #ffffff;
}

body.fc-ds .fc-pby-slab--blue {
	background: var(--pby-blue);
	color: #ffffff;
}

/* Navy on amber, not white: white on #f2a93b is the one pairing in the palette that fails. */
body.fc-ds .fc-pby-slab--amber {
	background: var(--pby-amber);
	color: var(--pby-navy);
}

body.fc-ds .fc-pby-slab__value {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(56px, 6vw, 104px);
	line-height: 0.9;
	letter-spacing: -0.03em;
}

body.fc-ds .fc-pby-slab__label {
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STORY
 * One column at the reading measure. No side rail and no board: after the slabs the design lets
 * the prose run, and the only thing marking a section is a coloured square.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-open {
	max-width: calc(780px + 2 * var(--gutter-page));
	padding: var(--sp-120) var(--gutter-page) 0;
}

body.fc-ds .fc-pby-story {
	display: flex;
	flex-direction: column;
	gap: 96px;
	max-width: calc(780px + 2 * var(--gutter-page));
	padding: 96px var(--gutter-page) var(--sp-120);
}

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

/*
 * ONE PROPERTY PER SECTION. The tone modifier sets --st-accent, and from it follow the square
 * below and the rule down the side of story.css's pull quote — which is why the quote needs no
 * rule of its own in this file.
 */
body.fc-ds .fc-pby-part--pink {
	--st-accent: var(--pby-pink);
}

body.fc-ds .fc-pby-part--blue {
	--st-accent: var(--pby-blue);
}

body.fc-ds .fc-pby-part--amber {
	--st-accent: var(--pby-amber);
}

/*
 * The square is a ::before and not an element: it is punctuation drawn by the design, the same
 * call story.css makes for the list marker. flex-start rather than centre on the cross axis, so a
 * heading that wraps keeps the square on its first line.
 */
body.fc-ds .fc-pby-part__title {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-16);
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--st-ink);
}

body.fc-ds .fc-pby-part__title::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	background: var(--st-accent);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
 * THE REASONS
 * Six ticks in two columns on a pale ground, and the ground is what makes the panel an aside
 * rather than another section of the argument.
 *
 * The cells are white and the grid is the hairline, so the rules between them are the 1px gaps
 * showing through and no cell owns a border — which keeps them single when the grid drops to one
 * column and when the count is odd.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-why {
	padding: 0 var(--gutter-page) var(--sp-120);
}

body.fc-ds .fc-pby-why__box {
	display: flex;
	flex-direction: column;
	gap: var(--sp-54);
	padding: 96px var(--sp-72);
	background: var(--pby-panel);
}

body.fc-ds .fc-pby-why__title {
	max-width: 26ch;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--st-ink);
	text-wrap: pretty;
}

body.fc-ds .fc-pby-ticks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--stroke-1);
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--st-hair);
}

body.fc-ds .fc-pby-tick {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--sp-16);
	padding: 28px var(--sp-32);
	background: #ffffff;
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--st-ink);
	text-wrap: pretty;
}

body.fc-ds .fc-pby-tick::before {
	content: "\2713";
	font-weight: var(--fw-bold);
	color: var(--st-accent);
}

/*
 * The four-colour cycle, in nth-child rather than as four values in the data. Six reasons today,
 * so pink, blue, amber, green, pink, blue — and a seventh keeps going without an edit.
 */
body.fc-ds .fc-pby-tick:nth-child(4n + 1)::before {
	--st-accent: var(--pby-pink);
}

body.fc-ds .fc-pby-tick:nth-child(4n + 2)::before {
	--st-accent: var(--pby-blue);
}

body.fc-ds .fc-pby-tick:nth-child(4n + 3)::before {
	--st-accent: var(--pby-amber);
}

body.fc-ds .fc-pby-tick:nth-child(4n)::before {
	--st-accent: var(--pby-green);
}

/* The band's words are tighter than the shared default, and it is the pink one. */
body.fc-ds .fc-pby-band .fc-story-band__words {
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE RESULTS
 * A heading, a sentence and a photograph on the left; seven numbered outcomes on the right. The
 * right column is the wider of the two, because seven sentences of prose need the measure and the
 * left column is a caption with a picture under it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-results {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 96px;
	align-items: start;
	padding: 0 var(--gutter-page) var(--sp-120);
}

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

body.fc-ds .fc-pby-h2 {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--st-ink);
	text-wrap: pretty;
}

body.fc-ds .fc-pby-results__shot {
	display: grid;
	overflow: hidden;
}

body.fc-ds .fc-pby-results__shot .fc-story-photo {
	height: min(52vh, 480px);
	object-fit: cover;
	object-position: center;
}

/*
 * An <ol>, so the numbers are the list's own. counter(step, decimal-leading-zero) is what draws
 * "01" — the alternative is seven strings in the data that have to be renumbered when an eighth
 * outcome arrives, and that disagree with the markup the moment nobody does.
 */
body.fc-ds .fc-pby-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

body.fc-ds .fc-pby-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: baseline;
	padding: var(--sp-24) 0;
	border-top: var(--stroke-1) solid var(--st-hair);
	font-size: var(--type-body-16);
	line-height: 1.6;
	color: var(--st-copy);
	text-wrap: pretty;
}

body.fc-ds .fc-pby-step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	font-family: var(--font-core);
	font-size: 12px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	color: var(--st-accent);
}

/* The same four-colour cycle as the ticks, for the same reason. */
body.fc-ds .fc-pby-step:nth-child(4n + 1)::before {
	--st-accent: var(--pby-pink);
}

body.fc-ds .fc-pby-step:nth-child(4n + 2)::before {
	--st-accent: var(--pby-blue);
}

body.fc-ds .fc-pby-step:nth-child(4n + 3)::before {
	--st-accent: var(--pby-amber);
}

body.fc-ds .fc-pby-step:nth-child(4n)::before {
	--st-accent: var(--pby-green);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * WHAT IS NEXT
 * A narrow column under a 2px blue rule. The rule is the only 2px line on the page, which is what
 * makes this read as a postscript to the results rather than an eighth one.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-next {
	padding: 0 var(--gutter-page) var(--sp-120);
}

body.fc-ds .fc-pby-next__box {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	max-width: 60ch;
	padding-top: var(--sp-54);
	border-top: 2px solid var(--pby-blue);
}

body.fc-ds .fc-pby-next__title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pby-blue);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSE
 * The second navy band, and the only one of the four stories whose close is dark. Which is why
 * --st-muted is reset here: the shared lead paragraph and the shared back link both read it, and
 * navy at 70% on navy is nothing.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pby-cta {
	--st-muted: rgba(255, 255, 255, 0.75);
	padding-top: var(--sp-120);
	background: var(--pby-navy);
	color: #ffffff;
}

body.fc-ds .fc-pby-cta .fc-btn {
	--fc-btn-bg: var(--pby-pink);
	--fc-btn-on: #ffffff;
	--fc-btn-edge: var(--pby-pink);
}

body.fc-ds .fc-pby-cta .fc-btn:hover {
	background: #ffffff;
	color: var(--pby-pink);
}

body.fc-ds .fc-pby-cta .fc-btn:focus-visible {
	outline-color: #ffffff;
}

body.fc-ds .fc-pby-cta .fc-story-back--plain {
	color: rgba(255, 255, 255, 0.6);
}

body.fc-ds .fc-pby-cta .fc-story-back--plain:hover {
	color: var(--pby-kicker);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROWER
 * The export's own step is 1100. Below it the fold stops being two halves and the results stop
 * being two columns; the slabs hold three across until 700, because their figures shrink with the
 * viewport and three short numbers still fit where three paragraphs would not.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-pby-hero,
	body.fc-ds .fc-pby-results,
	body.fc-ds .fc-pby-ticks {
		grid-template-columns: 1fr;
	}

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

	body.fc-ds .fc-pby-hero {
		gap: 40px;
	}

	body.fc-ds .fc-pby-results {
		gap: 40px;
	}

	body.fc-ds .fc-pby-results__shot .fc-story-photo {
		height: min(48vh, 400px);
	}

	body.fc-ds .fc-pby-why__box {
		padding: var(--sp-72) 40px;
	}
}

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

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

	body.fc-ds .fc-pby-why,
	body.fc-ds .fc-pby-results,
	body.fc-ds .fc-pby-next {
		padding-bottom: var(--sp-72);
	}

	body.fc-ds .fc-pby-slab {
		gap: var(--sp-32);
		min-height: 0;
		padding: 40px var(--sp-24);
	}

	body.fc-ds .fc-pby-why__box {
		gap: 40px;
		padding: 40px var(--sp-24);
	}

	body.fc-ds .fc-pby-tick {
		padding: var(--sp-24);
	}

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

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

	body.fc-ds .fc-pby-step {
		gap: var(--sp-16);
	}
}