/*
 * Post-Header — the Business family's shared layer (divb-hq#115).
 *
 * The eighteen business designs are a family, not eighteen unrelated ideas: gold rules, a navy
 * ink, cream paper, a mono-ish uppercase kicker, a serif title. That shared half lives here once
 * and is enqueued for the slugs in `Mf_Post_Header_Renderer::BUSINESS_VARIANTS`; each design's
 * own sheet holds only what makes it that design.
 *
 * A third sheet is a deliberate departure from "base + exactly one variant" (Spec §8). Eighteen
 * copies of one palette is the alternative, and that is the duplication this suite keeps out of
 * its stylesheets.
 *
 * NO WEBFONT IS FETCHED. The catalogue's HTML links Inter and Fraunces from Google; the suite
 * never carries a font URL (third catalogue running — see the card). Naming a family in a stack
 * downloads nothing: where the theme self-hosts Inter or a serif, it is used; elsewhere the
 * system stack takes over, and the design still reads as itself.
 */

.mfph-header.mfph-biz {
	--mfph-biz-navy: #0f1b2e;
	--mfph-biz-navy-2: #16263d;
	--mfph-biz-cream: #f7f3ea;
	--mfph-biz-cream-2: #efe8d8;
	--mfph-biz-gold: #a9812f;
	--mfph-biz-gold-light: #c9a35c;
	--mfph-biz-burgundy: #6b1f2a;
	--mfph-biz-forest: #1f4d3a;
	--mfph-biz-ink: #1a1a2e;
	--mfph-biz-muted: #6b6458;
	--mfph-biz-body: #3a3730;
	--mfph-biz-line: #ddd3bd;

	/* stylelint-disable-next-line max-line-length */
	--mfph-biz-sans: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif;
	--mfph-biz-serif: fraunces, cardo, georgia, "Times New Roman", serif;
}

.mfph-biz__kicker {
	margin: 0 0 16px;
	font-family: var(--mfph-biz-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--mfph-biz-gold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mfph-biz__title {
	margin: 0 0 18px;
	font-family: var(--mfph-biz-serif);
	font-weight: 600;
	line-height: 1.12;
	color: var(--mfph-biz-navy);
}

.mfph-biz__lead {
	margin: 18px 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--mfph-biz-body);
}

.mfph-biz__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	font-size: 13px;
	color: var(--mfph-biz-muted);
}

.mfph-biz__meta b {
	font-weight: 600;
	color: var(--mfph-biz-navy);
}

/*
 * The separator is an empty, aria-hidden span and the glyph lives here, because the catalogue
 * does not use one glyph: the masthead designs separate with a pipe, the report designs with a
 * middot. A design overrides `content` in one line instead of getting its own meta markup.
 */
.mfph-biz__meta .mfph-biz__sep {
	color: var(--mfph-biz-line);
}

.mfph-biz__meta .mfph-biz__sep::before {
	content: "|";
}

/*
 * The key figure and its sentence (`Mf_Post_Header_Biz::figure()`), shared by the three designs
 * that lead with a number. Structure and the serif weight only — the size and the colour are
 * what make each of the three itself.
 */
.mfph-biz__figure {
	margin: 0;
}

.mfph-biz__figure-value {
	display: block;
	font-family: var(--mfph-biz-serif);
	font-weight: 900;
}

.mfph-biz__figure-note {
	display: block;
	color: var(--mfph-biz-muted);
}

/*
 * The gold divider track, shared by the two designs that separate a fact margin from the text
 * with one: `vertical-gold-rule-divider` (with an opener) and `vertical-gold-rule-text-only`
 * (without). A grid track rather than a border, so it runs the full height of the taller column
 * — a border stops where its own element's content stops.
 */
.mfph-biz__gold-rule {
	background: var(--mfph-biz-gold);
}

/*
 * The chapter numeral (`Mf_Post_Header_Biz::numeral()`), shared by the two designs that set the
 * section number in display type. Thin and in the rule colour, so it reads as printed furniture
 * rather than as a headline competing with the title; each design sets its own size.
 */
.mfph-biz__numeral {
	flex: 0 0 auto;
	font-family: var(--mfph-biz-serif);
	font-weight: 300;
	color: var(--mfph-biz-line);
}

/*
 * The labelled fact rows (`Mf_Post_Header_Biz::facts()`), shared by the two designs that put
 * their meta in a margin. Structure only: each design brings its own sizes and its own divider.
 */
.mfph-biz__facts {
	margin: 0;
}

.mfph-biz__facts-row {
	margin: 0 0 10px;
}

.mfph-biz__facts-row dd {
	margin: 0;
}

.mfph-biz__facts-row a {
	color: inherit;
}

/* The author's role is a second line under the name, not a continuation of it. */
.mfph-biz__facts-role {
	display: block;
}

.mfph-biz__rule {
	margin: 0;
	border: none;
	border-top: 1px solid var(--mfph-biz-line);
}

.mfph-biz__rule--gold {
	margin: 0;
	border: none;
	border-top: 2px solid var(--mfph-biz-gold);
}