/*
 * MF Article Cards — the fourteen article-card patterns.
 *
 * Design source: docs/article-cards-preview.html, the specimen sheet the patterns
 * were chosen from. Spec: docs/SPEC-mf-article-cards.md.
 *
 * Four rules this file must keep:
 *
 * 1. No webfont is referenced. The live series pages fetch Space Grotesk,
 *    JetBrains Mono and Newsreader from fonts.googleapis.com; the Suite ships zero
 *    external requests, so the sans face is inherited from the theme (its
 *    self-hosted Inter) and the mono and serif faces are system stacks. Nothing
 *    here loads.
 * 2. Every graphic is drawn in CSS — the rail, the outlined numeral, the gauge
 *    arc, the stacked layers, the image placeholders. No sprite, no data URI, no
 *    request.
 * 3. Class names are frozen. They are written into post_content on every page an
 *    author builds, so a `.mfac-` class may be added but never renamed.
 * 4. Core's flow layout is neutralised inside every card (`> * { margin: 0 }`) and
 *    spacing comes from flex/grid `gap`. Otherwise the theme's block-gap decides
 *    the internal rhythm and the designs drift apart per site. Core writes its own
 *    rules through `:where()`, which has zero specificity, so a plain class
 *    selector wins without `!important`.
 */

/* ---------------------------------------------------------------------------
 * Shared tokens.
 *
 * Listed per root rather than on :root: a stylesheet that only loads where a card
 * exists should not leak custom properties onto the whole document.
 * ------------------------------------------------------------------------- */

.mfac-ledger,
.mfac-rail,
.mfac-auf,
.mfac-split,
.mfac-scrim,
.mfac-grid,
.mfac-term,
.mfac-marg,
.mfac-stack,
.mfac-gauge,
.mfac-symtile,
.mfac-pq,
.mfac-plain,
.mfac-filecard,
.mfac-tile,
.mfac-thumbrow,
.mfac-qframe,
.mfac-ticket,
.mfac-shell,
.mfac-stamp,
.mfac-status,
.mfac-spine,
.mfac-neon,
.mfac-libcard,
.mfac-toggle,
.mfac-wordmark,
.mfac-browser,
.mfac-note,
.mfac-pulse,
.mfac-receipt {
	--mfac-ink: #131e2b;
	--mfac-body: #3c4855;

	/*
	 * Darkened from #8b98a9 (2.93:1) after measuring every pair in this file: this
	 * token carries the small meta line on twenty rules, so it was a single AA
	 * failure repeated twenty times. 5.29:1 on white and 4.67:1 on the palest
	 * ground any card uses. Sonar's css:S7924 reported none of them — it cannot
	 * resolve a custom property.
	 */
	--mfac-muted: #5f6d7d;
	--mfac-rule: #dbe2ea;
	--mfac-surface: #fff;
	--mfac-accent: #e15205;

	/* The same orange, darkened for text: the brand value is 3.88:1 on white, which
	 * is fine for a rule or an underline and not for a 0.7rem kicker. */
	--mfac-accent-ink: #c94806;
	--mfac-cool: #1d4f99;
	--mfac-warm: #b02a20;

	/* The second batch of designs adds a darker blue for small text on light
	 * grounds, a teal for the dashboard-flavoured cards, and a softer rule. */
	--mfac-cool-ink: #163d78;
	--mfac-teal: #0f8b8d;
	--mfac-teal-ink: #0b6668;
	--mfac-rule-soft: #e6e9f0;

	/*
	 * No sans token, and no `font-family` on a card root: the body face is whatever
	 * the theme already serves (its self-hosted Inter here), inherited for free — see
	 * rule 1 in the file header. Mono and serif are only ever ADDED to specific
	 * children, never to a root. Setting a root's family and giving children
	 * `font-family: inherit` looks equivalent and is not: `inherit` resolves against
	 * the parent, so on the mono Terminal card the title inherited mono too.
	 */
	--mfac-mono: ui-monospace, sfmono-regular, menlo, "Cascadia Mono", consolas, monospace;
	--mfac-serif: georgia, "Iowan Old Style", "Times New Roman", serif;

	--mfac-gap: 22px;
	--mfac-radius: 10px;

	box-sizing: border-box;
}

/* The CSS-drawn stand-in for an image the author has not picked yet. Also the
 * permanent background behind a real image, so a transparent PNG has a ground. */
.mfac-auf__viz,
.mfac-split__viz {
	background-color: #0f2447;
	background-image:
		radial-gradient(120% 90% at 12% 108%, rgba(225, 82, 5, 0.62), transparent 62%),
		radial-gradient(90% 80% at 88% -12%, rgba(64, 132, 224, 0.6), transparent 60%);
}

/* An image block with no source would otherwise render a broken-image glyph. */
.mfac-auf__viz img:not([src]),
.mfac-split__viz img:not([src]) {
	display: none;
}

/* ---------------------------------------------------------------------------
 * The shared responsive grid, used by Plate, Numeral and Chip-first.
 *
 * `auto-fit` rather than core's grid layout on purpose: core stores a fixed
 * column count in the block, which would defeat duplicating the card to whatever
 * number the page needs. One, two, seven or eight all lay out here.
 * ------------------------------------------------------------------------- */

.mfac-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--mfac-gap);
	align-items: stretch;
}

.mfac-grid > * {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 01 · Ledger — a ruled register.
 * ------------------------------------------------------------------------- */

.mfac-ledger {
	display: grid;
	gap: 0;
}

.mfac-ledger > * {
	margin: 0;
}

.mfac-ledger__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	padding-block-end: 10px;
	border-block-end: 2px solid var(--mfac-ink);
}

.mfac-ledger__head > * {
	margin: 0;
}

.mfac-ledger__series,
.mfac-ledger__count {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mfac-cool);
}

.mfac-ledger__row {
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr) auto;
	align-items: start;
	gap: 6px 20px;
	padding: 18px 4px;
	border-block-end: 1px solid var(--mfac-rule);
	transition: background-color 0.18s ease, padding-inline-start 0.18s ease;
}

.mfac-ledger__row > * {
	margin: 0;
}

.mfac-ledger__row:hover,
.mfac-ledger__row:focus-within {
	background-color: #eef1f5;
	padding-inline-start: 12px;
}

.mfac-ledger__index {
	font-family: var(--mfac-mono);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--mfac-muted);
	padding-block-start: 3px;
}

.mfac-ledger__main {
	display: grid;
	gap: 3px;
}

.mfac-ledger__main > * {
	margin: 0;
}

.mfac-ledger__title {
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.2;
	color: var(--mfac-ink);
}

.mfac-ledger__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-ledger__row:hover .mfac-ledger__title a {
	color: var(--mfac-cool);
}

.mfac-ledger__sub {
	font-family: var(--mfac-mono);
	font-size: 0.74rem;
	color: #647385;
}

.mfac-ledger__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
	white-space: nowrap;
	padding-block-start: 4px;
}

@media (max-width: 40rem) {

	.mfac-ledger__row {
		grid-template-columns: 2.4rem minmax(0, 1fr);
	}

	.mfac-ledger__meta {
		grid-column: 2;
	}
}

/* ---------------------------------------------------------------------------
 * 02 · Rail — the accent rail carries the part identity.
 * ------------------------------------------------------------------------- */

.mfac-rail {
	position: relative;
	display: grid;
	grid-template-columns: 4.4rem minmax(0, 1fr) 11rem;
	align-items: center;
	gap: 28px;
	padding: 32px 32px 32px 38px;
	background: var(--mfac-surface);
	border: 1px solid #c2cedd;
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(20, 40, 75, 0.06);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mfac-rail > * {
	margin: 0;
}

.mfac-rail::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--mfac-cool);
}

.mfac-rail:hover,
.mfac-rail:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 12px 34px rgba(22, 50, 100, 0.13);
}

.mfac-rail__index {
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #8090a6;
	font-variant-numeric: tabular-nums;
}

.mfac-rail__body {
	display: grid;
	gap: 10px;
}

.mfac-rail__body > * {
	margin: 0;
}

.mfac-rail__title {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.14;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-rail__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-rail:hover .mfac-rail__title a {
	color: var(--mfac-cool);
}

.mfac-rail__sub {
	font-family: var(--mfac-mono);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--mfac-cool);
	margin-block-start: -6px;
}

.mfac-rail__teaser {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--mfac-body);
	max-width: 58ch;
}

.mfac-rail__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0;
}

.mfac-rail__chips li {
	font-family: var(--mfac-mono);
	font-size: 0.76rem;
	color: #516072;
	border: 1px solid #c2cedd;
	border-radius: 999px;
	padding: 3px 11px;
	margin: 0;
}

.mfac-rail__byline {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	color: var(--mfac-muted);
}

/* The glyph is a pseudo-element: a decorative mark needs no markup. */
.mfac-rail__aside {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 16px;
}

.mfac-rail__aside > * {
	margin: 0;
}

.mfac-rail__aside::before {
	content: "";
	width: 42px;
	height: 42px;
	border: 1.5px solid #c2cedd;
	border-radius: 50%;
	box-shadow: inset 0 0 0 12px var(--mfac-surface), inset 0 0 0 26px var(--mfac-cool);
}

.mfac-rail__cta {
	font-family: var(--mfac-mono);
	font-size: 0.8rem;
	white-space: nowrap;
}

.mfac-rail__cta a {
	color: #516072;
	text-decoration: none;
}

.mfac-rail:hover .mfac-rail__cta a {
	color: var(--mfac-cool);
}

@media (max-width: 54rem) {

	.mfac-rail {
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: 16px;
		padding: 24px 22px;
	}

	.mfac-rail__aside {
		grid-column: 2;
		grid-auto-flow: column;
		justify-items: start;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------------------
 * 03 · Aufmacher — a 24:7 image band, the ratio the blog's images are made at.
 * ------------------------------------------------------------------------- */

.mfac-auf {
	display: grid;
	gap: 0;
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	border-radius: 3px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.mfac-auf > * {
	margin: 0;
}

.mfac-auf:hover,
.mfac-auf:focus-within {
	box-shadow: 0 14px 36px rgba(18, 32, 52, 0.14);
}

.mfac-auf__viz {
	aspect-ratio: 24 / 7;
	overflow: hidden;
}

.mfac-auf__viz img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mfac-auf__body {
	display: grid;
	gap: 11px;
	padding: 24px 26px 26px;
}

.mfac-auf__body > * {
	margin: 0;
}

.mfac-auf__kicker {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--mfac-accent-ink);
}

.mfac-auf__title {
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-auf__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-auf__teaser {
	font-size: 1rem;
	line-height: 1.58;
	color: var(--mfac-body);
	max-width: 58ch;
}

.mfac-auf__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
	padding-block-start: 14px;
	border-block-start: 1px solid #e6ecf2;
}

/* ---------------------------------------------------------------------------
 * 04 · Split — image beside text; the author swaps the columns.
 * ------------------------------------------------------------------------- */

.mfac-split {
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	align-items: stretch;
	transition: border-color 0.2s ease;
}

.mfac-split:hover,
.mfac-split:focus-within {
	border-color: #b9c5d5;
}

.mfac-split__media {
	padding: 0;
}

.mfac-split__viz {
	min-height: 190px;
	height: 100%;
	overflow: hidden;
}

.mfac-split__viz img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mfac-split__body {
	display: grid;
	align-content: center;
	gap: 10px;
	padding: 26px 28px;
}

.mfac-split__body > * {
	margin: 0;
}

.mfac-split__level {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mfac-accent-ink);
}

.mfac-split__title {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.18;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-split__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-split__teaser {
	font-family: var(--mfac-serif);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--mfac-body);
}

.mfac-split__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 05 · Scrim — text over a full-bleed image, on core Cover.
 * ------------------------------------------------------------------------- */

.mfac-scrim {

	/* Split out so the gradient below fits on one line, which stylelint requires. */
	--mfac-s1: rgba(8, 12, 20, 0.88);
	--mfac-s2: rgba(8, 12, 20, 0.45);

	border-radius: 8px;
	overflow: hidden;

	/*
	 * Core centres the inner container as a flex item. Bottom-aligning has to happen
	 * here on the flex parent — `align-content` on the container itself does nothing,
	 * because the container is only as tall as its own content.
	 */
	align-items: end;
}

.mfac-scrim .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 9px;
	justify-items: start;
}

.mfac-scrim .wp-block-cover__inner-container > * {
	margin: 0;
}

/*
 * Core's own dim is a flat wash. This second, bottom-weighted scrim is what holds
 * the type at WCAG AA over a light photograph — which is also why it is a hard
 * gradient stop rather than a soft fade.
 */
.mfac-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, var(--mfac-s1) 4%, var(--mfac-s2) 44%, transparent 82%);
}

.mfac-scrim__level {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;

	/*
	 * A solid dark ground, not the glassier 16%-white wash this started as: white on
	 * that wash is 1.2:1 by the numbers, and its real contrast depended on whatever
	 * photograph happened to be behind it. Opaque is less airy and always legible,
	 * which is the right trade for the one label a reader has to be able to read.
	 */
	background: #10151d;
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
}

.mfac-scrim__title {
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: #fff;
	text-wrap: balance;
}

.mfac-scrim__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-scrim__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.74);
}

.mfac-scrim__cta {
	font-family: var(--mfac-mono);
	font-size: 0.8rem;
}

.mfac-scrim__cta a {
	color: #ffb27a;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 06 · Plate — the ground colour is the level.
 * ------------------------------------------------------------------------- */

.mfac-plate {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 28px 26px 26px;
	transition: filter 0.18s ease;
}

.mfac-plate > * {
	margin: 0;
}

.mfac-plate:hover,
.mfac-plate:focus-within {
	filter: brightness(0.97);
}

.mfac-plate--cool {
	background: #e8eef7;
	color: #16304f;
}

.mfac-plate--warm {
	background: #f3e7dd;
	color: #4a2d16;
}

.mfac-plate--dark {
	background: #21262e;
	color: #f0f2f5;
}

.mfac-plate__level {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	opacity: 0.66;
}

.mfac-plate__title {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.18;
	color: inherit;
	text-wrap: balance;
}

.mfac-plate__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-plate__teaser {
	font-size: 0.97rem;
	line-height: 1.56;
	opacity: 0.82;
	flex: 1 1 auto;
}

.mfac-plate__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	padding-block-start: 13px;
	border-block-start: 1px solid color-mix(in srgb, currentcolor 22%, transparent);
	opacity: 0.66;
}

/* ---------------------------------------------------------------------------
 * 07 · Terminal — key/value, dark. Field labels come from data-key.
 * ------------------------------------------------------------------------- */

.mfac-term {
	display: grid;
	gap: 0;
	background: #11161e;
	border: 1px solid #26303d;
	border-radius: 6px;
	overflow: hidden;
	color: #c7d2df;

	/*
	 * The muted colour every quiet member of this card uses — the bar, the field
	 * labels and the prompt sigil. One token because all three sat below 4.5:1
	 * against their own grounds (4.0, 2.7 and 2.3); this clears it on both the card
	 * (#11161e, 5.9:1) and the slightly lighter bar (#182029, 5.3:1).
	 */
	--mfac-term-dim: #8494a7;
	transition: border-color 0.18s ease;
}

.mfac-term > * {
	margin: 0;
}

.mfac-term:hover,
.mfac-term:focus-within {
	border-color: #3d7fd1;
}

.mfac-term__bar {
	font-family: var(--mfac-mono);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 9px 14px;
	background: #182029;
	border-block-end: 1px solid #26303d;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mfac-term-dim);
}

.mfac-term__bar > * {
	margin: 0;
}

.mfac-term__part {
	color: #4f9bea;
	font-variant-numeric: tabular-nums;
}

.mfac-term__body {
	display: grid;
	gap: 10px;
	padding: 20px 18px 18px;
}

.mfac-term__body > * {
	margin: 0;
}

.mfac-term__title {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #edf2f8;
	text-wrap: balance;
}

.mfac-term__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-term:hover .mfac-term__title a {
	color: #7cb6f5;
}

.mfac-term__sub {
	font-family: var(--mfac-mono);
	font-size: 0.76rem;
	color: #4f9bea;
	margin-block-start: -6px;
}

.mfac-term__teaser {
	font-size: 0.95rem;
	line-height: 1.58;
	color: #93a3b6;
}

.mfac-term__kv {
	font-family: var(--mfac-mono);
	display: flex;
	gap: 10px;
	font-size: 0.76rem;
	color: #a9b8c9;
}

.mfac-term__kv + .mfac-term__kv {
	margin-block-start: -7px;
}

.mfac-term__kv strong {
	flex: 0 0 5.4rem;
	font-weight: 400;
	color: var(--mfac-term-dim);
}

.mfac-term__prompt {
	font-family: var(--mfac-mono);
	padding: 12px 18px 14px;
	border-block-start: 1px solid #26303d;
	font-size: 0.8rem;
}

.mfac-term__prompt::before {
	content: "$ ";
	color: var(--mfac-term-dim);
}

.mfac-term__prompt a {
	color: #6cc08a;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 08 · Marginalia — metadata in a margin column, teaser as prose.
 * ------------------------------------------------------------------------- */

.mfac-marg {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 28px;
	padding-block: 28px;
	border-block-start: 1px solid #d7d0c2;
}

.mfac-marg > * {
	margin: 0;
}

.mfac-marg__margin {
	display: grid;
	gap: 5px;
	align-content: start;
	text-align: end;
	padding-inline-end: 22px;
	border-inline-end: 1px solid #d7d0c2;
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	line-height: 1.5;
	color: #79705e;
}

.mfac-marg__margin > * {
	margin: 0;
}

.mfac-marg__index {
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	color: #2c2820;
	font-variant-numeric: tabular-nums;
}

.mfac-marg__main {
	display: grid;
	gap: 10px;
}

.mfac-marg__main > * {
	margin: 0;
}

.mfac-marg__title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.16;
	color: #221e17;
	max-width: 30ch;
	text-wrap: balance;
}

.mfac-marg__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-marg:hover .mfac-marg__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: #a0522d;
}

.mfac-marg__teaser {
	font-family: var(--mfac-serif);
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.52;
	color: #4c463b;
	max-width: 60ch;
}

.mfac-marg__cta {
	font-family: var(--mfac-mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mfac-marg__cta a {
	color: #a0522d;
	text-decoration: none;
}

@media (max-width: 44rem) {

	.mfac-marg {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.mfac-marg__margin {
		text-align: start;
		padding-inline-end: 0;
		border-inline-end: 0;
		grid-auto-flow: column;
		justify-content: start;
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * 09 · Numeral — the index is the only graphic, set as a real paragraph.
 * ------------------------------------------------------------------------- */

.mfac-numeral {
	position: relative;
	display: grid;
	gap: 11px;
	align-content: start;
	padding: 30px 28px 26px 30px;
	background: var(--mfac-surface);
	border-radius: 2px;
	overflow: hidden;
	isolation: isolate;
}

.mfac-numeral > * {
	margin: 0;
}

.mfac-numeral__figure {
	position: absolute;
	inset-block-end: -62px;
	inset-inline-end: -22px;
	z-index: -1;
	font-size: 190px;
	font-weight: 700;
	letter-spacing: -0.07em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--mfac-rule);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	user-select: none;
	transition: transform 0.3s ease;
}

.mfac-numeral:hover .mfac-numeral__figure,
.mfac-numeral:focus-within .mfac-numeral__figure {
	transform: translateY(-8px);
}

.mfac-numeral__kicker {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mfac-accent-ink);
}

.mfac-numeral__title {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.14;
	color: var(--mfac-ink);
	max-width: 22ch;
	text-wrap: balance;
}

.mfac-numeral__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-numeral__teaser {
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--mfac-body);
	max-width: 34ch;
}

.mfac-numeral__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 10 · Chip-first — topics lead, title follows.
 * ------------------------------------------------------------------------- */

.mfac-chipcard {
	display: grid;

	/* The title row absorbs the slack, so every footer shares a baseline. */
	grid-template-rows: auto 1fr auto;
	gap: 12px;
	padding: 20px 22px;
	background: var(--mfac-surface);
	border: 1px solid #e6e0d8;
	border-radius: 8px;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.mfac-chipcard > * {
	margin: 0;
}

.mfac-chipcard:hover,
.mfac-chipcard:focus-within {
	border-color: var(--mfac-accent);
	transform: translateY(-2px);
}

.mfac-chipcard__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
}

.mfac-chipcard__tags li {
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #a34309;
	background: #fbeee5;
	border-radius: 3px;
	padding: 3px 8px;
	margin: 0;
}

.mfac-chipcard__title {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.25;
	color: #241d17;
	text-wrap: balance;
}

.mfac-chipcard__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-chipcard__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: #7c7266;
}

/* ---------------------------------------------------------------------------
 * 11 · Stack — one card for a whole series. The layers are pseudo-elements.
 * ------------------------------------------------------------------------- */

.mfac-stack {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 26px 26px 24px;
	background: var(--mfac-surface);
	border: 1px solid #b9c5d5;
	border-radius: 12px;
	margin-block-end: 26px;

	/*
	 * The two receding layers are box-shadows, not pseudo-elements. A pseudo-element
	 * at `z-index: -1` paints behind the nearest ancestor stacking context — which is
	 * the page, not this card — so on any coloured section it disappeared behind the
	 * section's own background. A shadow always paints behind the element's own
	 * background, which is exactly the layering this needs. Each layer is a pair: a
	 * fill, and a 1px-larger spread behind it standing in for the border.
	 */
	box-shadow:
		0 4px 14px rgba(20, 40, 75, 0.08),
		0 10px 0 -5px #f4f7fa,
		0 10px 0 -4px #c6d0dd,
		0 21px 0 -10px #eaeff5,
		0 21px 0 -9px #c6d0dd;
	transition: box-shadow 0.25s ease;
}

.mfac-stack:hover,
.mfac-stack:focus-within {
	box-shadow:
		0 4px 14px rgba(20, 40, 75, 0.08),
		0 14px 0 -5px #f4f7fa,
		0 14px 0 -4px #c6d0dd,
		0 29px 0 -10px #eaeff5,
		0 29px 0 -9px #c6d0dd;
}

.mfac-stack > * {
	margin: 0;
}

.mfac-stack__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.mfac-stack__top > * {
	margin: 0;
}

.mfac-stack__badge {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--mfac-cool);
	border-radius: 999px;
	padding: 4px 11px;
}

.mfac-stack__count {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
}

.mfac-stack__title {
	font-size: 1.55rem;
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.12;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-stack__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-stack__teaser {
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--mfac-body);
}

.mfac-stack__parts {
	list-style: none;
	display: grid;
	gap: 5px;
	padding: 12px 0 0;
	border-block-start: 1px solid #e2e8f1;
	font-family: var(--mfac-mono);
	font-size: 0.76rem;
	counter-reset: mfac-part;
}

.mfac-stack__parts li {
	display: flex;
	gap: 11px;
	margin: 0;
	counter-increment: mfac-part;
}

.mfac-stack__parts li::before {
	content: counter(mfac-part, decimal-leading-zero);
	color: var(--mfac-muted);
	font-variant-numeric: tabular-nums;
}

.mfac-stack__parts a {
	color: #516072;
	text-decoration: none;
}

.mfac-stack__parts a:hover {
	color: var(--mfac-cool);
}

/* ---------------------------------------------------------------------------
 * 12 · Gauge — a depth dial. A --0…--10 modifier drives a conic-gradient arc.
 * ------------------------------------------------------------------------- */

.mfac-gauge {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 26px;
	padding: 24px 26px;
	background: var(--mfac-surface);
	border: 1px solid #dce3eb;
	border-radius: var(--mfac-radius);
	transition: box-shadow 0.18s ease;
}

.mfac-gauge > * {
	margin: 0;
}

.mfac-gauge:hover,
.mfac-gauge:focus-within {
	box-shadow: 0 8px 22px rgba(18, 32, 52, 0.1);
}

.mfac-gauge__main {
	display: grid;
	gap: 9px;
}

.mfac-gauge__main > * {
	margin: 0;
}

.mfac-gauge__kicker {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--mfac-muted);
}

.mfac-gauge__title {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-gauge__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-gauge__teaser {
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--mfac-body);
	max-width: 52ch;
}

.mfac-gauge__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
}

/*
 * The dial: an arc (::before) with a surface-coloured cap (::after) punched out of
 * it, so the "track" is the card's own background rather than a second ring.
 */
.mfac-gauge__dial {

	/* The swept angle, derived from the modifier below. Split out so the arc's
	 * conic-gradient fits on one line, which stylelint requires. */
	--mfac-ga: calc(var(--mfac-val, 0) * 0.5turn);

	position: relative;
	display: grid;
	justify-items: center;
	gap: 8px;

	/* Wide enough that "Depth 6 / 10" does not break across three lines. */
	width: 106px;
	padding-block-start: 50px;
	text-align: center;
}

.mfac-gauge__dial > * {
	margin: 0;
}

/* Centred on the dial rather than offset by a fixed inset, so the arc stays put
 * if the label ever needs a wider box. */
.mfac-gauge__dial::before,
.mfac-gauge__dial::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

.mfac-gauge__dial::before {
	width: 76px;
	height: 44px;
	border-radius: 76px 76px 0 0;

	/* Only the top half of the sweep is visible, so the track stop needs no end. */
	background: conic-gradient(from -90deg at 50% 100%, var(--mfac-accent) var(--mfac-ga), #e2e8f1 0);
}

.mfac-gauge__dial::after {
	inset-block-start: 11px;
	width: 54px;
	height: 33px;
	border-radius: 54px 54px 0 0;
	background: var(--mfac-surface);
}

.mfac-gauge__label {
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--mfac-muted);
	line-height: 1.4;
}

.mfac-gauge__dial--0 {
	--mfac-val: 0;
}

.mfac-gauge__dial--1 {
	--mfac-val: 0.1;
}

.mfac-gauge__dial--2 {
	--mfac-val: 0.2;
}

.mfac-gauge__dial--3 {
	--mfac-val: 0.3;
}

.mfac-gauge__dial--4 {
	--mfac-val: 0.4;
}

.mfac-gauge__dial--5 {
	--mfac-val: 0.5;
}

.mfac-gauge__dial--6 {
	--mfac-val: 0.6;
}

.mfac-gauge__dial--7 {
	--mfac-val: 0.7;
}

.mfac-gauge__dial--8 {
	--mfac-val: 0.8;
}

.mfac-gauge__dial--9 {
	--mfac-val: 0.9;
}

.mfac-gauge__dial--10 {
	--mfac-val: 1;
}

@media (max-width: 38rem) {

	.mfac-gauge {
		grid-template-columns: minmax(0, 1fr);
	}

	.mfac-gauge__dial {
		justify-items: start;
	}
}

/* ---------------------------------------------------------------------------
 * 13 · Symbol tile — the Suite's own Material Symbol element as the anchor.
 * ------------------------------------------------------------------------- */

.mfac-symtile {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	background: var(--mfac-surface);
	border: 1px solid #dcdfe5;
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.18s ease;
}

.mfac-symtile > * {
	margin: 0;
}

.mfac-symtile:hover,
.mfac-symtile:focus-within {
	transform: translateX(3px);
}

.mfac-symtile__tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: var(--mfac-cool);
	color: #fff;
}

.mfac-symtile__tile > * {
	margin: 0;
}

.mfac-symtile__body {
	display: grid;
	align-content: center;
	gap: 7px;
	padding: 18px 22px;
}

.mfac-symtile__body > * {
	margin: 0;
}

.mfac-symtile__kicker {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mfac-muted);
}

.mfac-symtile__title {
	font-size: 1.13rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.22;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-symtile__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-symtile__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 14 · Pull quote — a sentence from the article instead of a summary.
 * ------------------------------------------------------------------------- */

.mfac-pq {
	display: grid;
	gap: 16px;
	padding: 34px 36px 30px;
	background: #fbfaf7;
	border: 1px solid #ddd6c8;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.mfac-pq > * {
	margin: 0;
}

.mfac-pq:hover,
.mfac-pq:focus-within {
	background-color: #fffdf9;
}

.mfac-pq__src {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #a0522d;
}

.mfac-pq__quote {
	font-family: var(--mfac-serif);
	font-size: 1.55rem;
	line-height: 1.34;
	letter-spacing: -0.012em;
	color: #221e17;
	text-wrap: balance;
}

.mfac-pq__attrib {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	padding-block-start: 15px;
	border-block-start: 1px solid #e0d9cb;
}

.mfac-pq__attrib > * {
	margin: 0;
}

.mfac-pq__title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: #221e17;
}

.mfac-pq__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-pq:hover .mfac-pq__title a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: #a0522d;
}

.mfac-pq__byline {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: #7a725f;
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------------------
 * 15 · Plain text — a rule and the type, no card.
 * ------------------------------------------------------------------------- */

.mfac-plain {
	display: grid;
	gap: 8px;
	padding-block-end: 22px;
	border-block-end: 1px solid var(--mfac-rule);
}

.mfac-plain > * {
	margin: 0;
}

.mfac-plain__eyebrow {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mfac-cool-ink);
}

.mfac-plain__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1.18;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-plain__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-plain:hover .mfac-plain__title a {
	color: var(--mfac-cool);
}

.mfac-plain__excerpt {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--mfac-body);
	max-width: 52ch;
}

.mfac-plain__meta {
	font-size: 0.8rem;
	color: var(--mfac-muted);
}

.mfac-plain__cta {
	font-size: 0.85rem;
	font-weight: 600;
	margin-block-start: 6px;
}

.mfac-plain__cta a {
	color: var(--mfac-cool-ink);
	text-decoration: none;
}

.mfac-plain__cta a::after {
	content: " →";
	display: inline-block;
	transition: transform 0.15s ease;
}

.mfac-plain:hover .mfac-plain__cta a::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
 * 16 · File card — the workhorse: category rail, initials disc.
 * ------------------------------------------------------------------------- */

.mfac-filecard {
	position: relative;
	display: grid;
	gap: 10px;
	padding: 24px 26px;
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.mfac-filecard > * {
	margin: 0;
}

.mfac-filecard::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--mfac-cool);
	transition: width 0.18s ease;
}

.mfac-filecard:hover,
.mfac-filecard:focus-within {
	box-shadow: 0 8px 22px rgba(20, 40, 80, 0.1);
	transform: translateY(-2px);
}

.mfac-filecard:hover::before {
	width: 6px;
}

.mfac-filecard__tag {
	justify-self: start;
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mfac-cool-ink);
	background: #eaf0fb;
	padding: 2px 8px;
	border-radius: 4px;
}

.mfac-filecard__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-filecard__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-filecard__excerpt {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--mfac-body);
}

.mfac-filecard__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding-block-start: 14px;
	border-block-start: 1px dashed var(--mfac-rule);
}

.mfac-filecard__foot > * {
	margin: 0;
}

.mfac-filecard__author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	color: var(--mfac-body);
}

/* The initials disc. A <strong> rather than a span, so it survives an edit. */
.mfac-filecard__author strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mfac-cool);
	color: #fff;
	font-family: var(--mfac-mono);
	font-size: 0.62rem;
	font-weight: 700;
}

.mfac-filecard__time {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 17 · Image tile — a portrait cover, text in the bottom third.
 * ------------------------------------------------------------------------- */

.mfac-tile {
	--mfac-s1: rgba(6, 12, 26, 0.92);
	--mfac-s2: rgba(6, 12, 26, 0.55);

	aspect-ratio: 4 / 5;
	border-radius: 12px;
	overflow: hidden;
	align-items: end;
}

.mfac-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, var(--mfac-s1) 0%, var(--mfac-s2) 38%, transparent 68%);
}

.mfac-tile .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	justify-items: start;
}

.mfac-tile .wp-block-cover__inner-container > * {
	margin: 0;
}

.mfac-tile__tag {
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #cfe0fa;
}

.mfac-tile__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.55rem;
	line-height: 1.16;
	color: #fff;
	text-wrap: balance;
	transition: transform 0.2s ease;
}

.mfac-tile__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-tile:hover .mfac-tile__title {
	transform: translateY(-2px);
}

.mfac-tile__meta {
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------------------
 * 18 · Thumbnail row — a small square picture beside the text.
 * ------------------------------------------------------------------------- */

.mfac-thumbrow {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	padding: 8px;
	border-radius: 10px;
	transition: background-color 0.15s ease;
}

.mfac-thumbrow > * {
	margin: 0;
}

.mfac-thumbrow:hover,
.mfac-thumbrow:focus-within {
	background-color: #f2f5fb;
}

.mfac-thumbrow__thumb {
	width: 112px;
	height: 112px;
	border-radius: 8px;
	overflow: hidden;
	--mfac-str: rgba(255, 255, 255, 0.14);

	background-color: #e15205;
	background-image: repeating-linear-gradient(45deg, var(--mfac-str) 0 8px, transparent 8px 16px);
}

.mfac-thumbrow__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mfac-thumbrow__thumb img:not([src]) {
	display: none;
}

.mfac-thumbrow__body {
	display: grid;
	gap: 5px;
}

.mfac-thumbrow__body > * {
	margin: 0;
}

.mfac-thumbrow__tag {
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #b8420a;
}

.mfac-thumbrow__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.18rem;
	line-height: 1.28;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-thumbrow__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-thumbrow__excerpt {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--mfac-body);
}

.mfac-thumbrow__meta {
	font-family: var(--mfac-mono);
	font-size: 0.75rem;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 19 · Quote frame — a quotation behind an oversized mark.
 * ------------------------------------------------------------------------- */

.mfac-qframe {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 32px 36px;
	background: #f8f9fc;
	border-inline-start: 3px solid var(--mfac-cool);
	border-radius: 0 8px 8px 0;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.mfac-qframe > * {
	margin: 0;
}

.mfac-qframe:hover,
.mfac-qframe:focus-within {
	border-color: var(--mfac-accent);
	background-color: #fbf7f4;
}

/* The mark is decoration, so it is a pseudo-element rather than a character an
 * author has to keep in the right place. */
.mfac-qframe::before {
	content: "“";
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 12px;
	font-family: var(--mfac-serif);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--mfac-rule);
	user-select: none;
	pointer-events: none;
}

.mfac-qframe__quote {
	position: relative;
	z-index: 1;
	font-family: var(--mfac-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.28rem;
	line-height: 1.42;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-qframe__cite {
	font-size: 0.82rem;
	color: var(--mfac-body);
}

.mfac-qframe__cite strong {
	color: var(--mfac-ink);
	font-weight: 600;
}

.mfac-qframe__cite strong a {
	color: inherit;
	text-decoration: none;
}

.mfac-qframe__cite strong::after {
	content: " — ";
	font-weight: 400;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 20 · Reading ticket — a boarding pass with a tear-off stub.
 * ------------------------------------------------------------------------- */

.mfac-ticket {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	background: var(--mfac-surface);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(20, 30, 50, 0.08);
	overflow: hidden;
}

.mfac-ticket > * {
	margin: 0;
}

.mfac-ticket__main {
	position: relative;
	display: grid;
	gap: 8px;
	padding: 22px 24px;
}

.mfac-ticket__main > * {
	margin: 0;
}

/*
 * The perforation is a dashed rule rather than the prototype's round notches: a
 * notch has to be painted in the colour of whatever sits behind the card, and a
 * pattern cannot know that.
 */
.mfac-ticket__main::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	border-inline-end: 2px dashed var(--mfac-rule);
}

.mfac-ticket__tag {
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mfac-cool-ink);
}

.mfac-ticket__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.28;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-ticket__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-ticket__meta {
	font-size: 0.76rem;
	color: var(--mfac-muted);
}

.mfac-ticket__stub {
	display: grid;
	place-items: center;
	gap: 10px;
	background: var(--mfac-cool);
	padding: 16px 0;
}

.mfac-ticket__stub > * {
	margin: 0;
}

.mfac-ticket__stublabel {
	font-family: var(--mfac-mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.mfac-ticket__stublabel a {
	color: #fff;
	text-decoration: none;
}

.mfac-ticket__stublabel a::after {
	content: "→";
	display: block;
	margin-block-start: 10px;
	transform: rotate(90deg);
	transition: transform 0.18s ease;
}

.mfac-ticket:hover .mfac-ticket__stublabel a::after {
	transform: rotate(90deg) translateX(3px);
}

/* ---------------------------------------------------------------------------
 * 21 · Shell log — a session transcript.
 * ------------------------------------------------------------------------- */

.mfac-shell {
	display: grid;
	background: #0e1420;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(10, 15, 30, 0.35);
	color: #d7e1f0;
	transition: box-shadow 0.18s ease;
}

.mfac-shell > * {
	margin: 0;
}

.mfac-shell__bar {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: #161d2c;
}

.mfac-shell__bar > * {
	margin: 0;
}

/* Three window dots from one pseudo-element: the disc plus two box-shadows. */
.mfac-shell__bar::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-inline-end: 22px;
	background: #ff5f57;
	box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840;
}

.mfac-shell__path {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: #97a3ba;
}

.mfac-shell__body {
	display: grid;
	gap: 2px;
	padding: 18px 20px 20px;
	font-family: var(--mfac-mono);
	font-size: 0.83rem;
	line-height: 1.65;
}

.mfac-shell__body > * {
	margin: 0;
}

.mfac-shell__cmd::before {
	content: "$ ";
	color: #6cc08a;
}

.mfac-shell__comment {
	color: #97a3ba;
}

.mfac-shell__title {
	font-family: var(--mfac-mono);
	font-size: 0.83rem;
	font-weight: 600;
	line-height: 1.5;
	color: #9cc4ff;
	transition: color 0.15s ease;
}

.mfac-shell__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-shell:hover .mfac-shell__title a {
	color: #c7dcff;
	text-decoration: underline;
}

.mfac-shell__meta {
	color: #7fc99a;
}

.mfac-shell__meta::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 1.05em;
	margin-inline-start: 4px;
	vertical-align: text-bottom;
	background: #9cc4ff;
	animation: mfac-shell-blink 1s steps(1) infinite;
}

@keyframes mfac-shell-blink {

	50% {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 22 · Postage stamp — perforated, postmarked, deliberately small.
 * ------------------------------------------------------------------------- */

.mfac-stamp {
	display: grid;
	gap: 10px;
	max-width: 300px;
	transform: rotate(-2deg);
	transition: transform 0.2s ease;
}

.mfac-stamp > * {
	margin: 0;
}

.mfac-stamp:hover,
.mfac-stamp:focus-within {
	transform: rotate(0deg) scale(1.02);
}

.mfac-stamp__frame {
	position: relative;
	padding: 10px;
	background: #fdfaf3;
	box-shadow: 0 3px 10px rgba(30, 20, 10, 0.12);
}

.mfac-stamp__frame > * {
	margin: 0;
}

.mfac-stamp__frame::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1.5px dashed #b8a878;
	pointer-events: none;
	z-index: 1;
}

.mfac-stamp__img {
	aspect-ratio: 1;
	border-radius: 2px;
	overflow: hidden;
	--mfac-hues: #1d4f99, #e15205 40%, #0f8b8d 75%, #1d4f99;

	background-color: #1d4f99;
	background-image: conic-gradient(from 220deg at 30% 30%, var(--mfac-hues));
}

.mfac-stamp__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mfac-stamp__img img:not([src]) {
	display: none;
}

.mfac-stamp__postmark {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 18px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	transform: rotate(12deg);
	font-family: var(--mfac-mono);
	font-size: 0.5rem;
	line-height: 1.15;
	letter-spacing: 0.05em;
	text-align: center;
	color: #fff;
}

.mfac-stamp__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.25;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-stamp__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-stamp__meta {
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	text-transform: uppercase;
	color: var(--mfac-muted);
}

/* ---------------------------------------------------------------------------
 * 23 · Status card — metadata as three readings.
 * ------------------------------------------------------------------------- */

.mfac-status {
	display: grid;
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.18s ease;
}

.mfac-status > * {
	margin: 0;
}

.mfac-status:hover,
.mfac-status:focus-within {
	border-color: var(--mfac-teal);
}

.mfac-status__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.25;
	padding: 20px 22px 14px;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-status__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-status__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-block-start: 1px solid var(--mfac-rule-soft);
}

.mfac-status__stat {
	display: grid;
	gap: 2px;
	padding: 14px 12px;
	text-align: center;
	border-inline-end: 1px solid var(--mfac-rule-soft);
	font-size: 0.66rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mfac-muted);
	margin: 0;
}

.mfac-status__stat:last-child {
	border-inline-end: 0;
}

.mfac-status__stat strong {
	font-family: var(--mfac-mono);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mfac-teal-ink);
}

.mfac-status__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 12px 22px;
	background: #f8fafc;
}

.mfac-status__foot > * {
	margin: 0;
}

.mfac-status__author {
	font-size: 0.78rem;
	color: var(--mfac-body);
}

.mfac-status__cta {
	font-size: 0.78rem;
	font-weight: 600;
}

.mfac-status__cta a {
	color: var(--mfac-teal-ink);
	text-decoration: none;
}

.mfac-status__cta a::after {
	content: " →";
	display: inline-block;
	transition: transform 0.15s ease;
}

.mfac-status:hover .mfac-status__cta a::after {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * 24 · Spine note — a bound edge with the label along it.
 * ------------------------------------------------------------------------- */

.mfac-spine {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	border-radius: 8px;
	overflow: hidden;
}

.mfac-spine > * {
	margin: 0;
}

.mfac-spine__label {
	display: grid;
	place-items: center;
	background: var(--mfac-cool);
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.mfac-spine__body {
	display: grid;
	gap: 6px;
	padding: 18px 20px;
}

.mfac-spine__body > * {
	margin: 0;
}

.mfac-spine__tag {
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mfac-muted);
}

.mfac-spine__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-spine__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-spine:hover .mfac-spine__title a {
	color: var(--mfac-cool);
}

.mfac-spine__meta {
	font-size: 0.75rem;
	color: var(--mfac-body);
}

/* ---------------------------------------------------------------------------
 * 25 · Neon sign — loud on purpose.
 * ------------------------------------------------------------------------- */

.mfac-neon {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 30px 28px;
	background: #0b0e16;
	border: 1px solid #1c2333;
	border-radius: 14px;
	overflow: hidden;
}

.mfac-neon > * {
	margin: 0;
}

.mfac-neon::before {
	content: "";
	position: absolute;
	inset-block-start: -90px;
	inset-inline-end: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 95, 174, 0.18), transparent 65%);
	pointer-events: none;
}

.mfac-neon__tag {
	position: relative;
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ff8ec6;
	text-shadow: 0 0 8px rgba(255, 95, 174, 0.6);
}

.mfac-neon__title {
	position: relative;
	font-family: var(--mfac-serif);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.24;
	color: #f2f6ff;
	text-wrap: balance;
}

.mfac-neon__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-neon__meta {
	position: relative;
	font-size: 0.78rem;
	color: #9aa6c0;
}

.mfac-neon__btn {
	position: relative;
	justify-self: start;
	margin-block-start: 6px;
}

.mfac-neon__btn a {
	display: inline-block;
	padding: 9px 18px;
	border: 1.4px solid #00e5ff;
	border-radius: 999px;
	font-family: var(--mfac-mono);
	font-size: 0.78rem;
	font-weight: 600;
	color: #00e5ff;
	text-decoration: none;
	transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.mfac-neon:hover .mfac-neon__btn a {
	background-color: #00e5ff;
	color: #0b0e16;
	box-shadow: 0 0 22px rgba(0, 229, 255, 0.55);
}

/* ---------------------------------------------------------------------------
 * 26 · Library card — a catalogue entry on ruled stock.
 * ------------------------------------------------------------------------- */

.mfac-libcard {
	position: relative;
	display: grid;
	gap: 4px;
	padding: 22px 24px 30px;
	background: #fdfcf8;
	border: 1px solid #ddd6c4;
	border-radius: 2px;
	box-shadow: 0 1px 0 #ddd6c4, 0 2px 4px rgba(60, 50, 20, 0.06);
}

.mfac-libcard > * {
	margin: 0;
}

.mfac-libcard::before {
	content: "";
	position: absolute;
	inset: 44px 24px 42px;
	background-image: repeating-linear-gradient(to bottom, transparent 0 22px, #e3ddc9 22px 23px);
	opacity: 0.7;
	pointer-events: none;
}

.mfac-libcard__no,
.mfac-libcard__field {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.78rem;
	color: #5f5740;
}

.mfac-libcard__no {
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	color: #7d7150;
}

.mfac-libcard__no strong {
	font-weight: 400;
}

.mfac-libcard__title {
	position: relative;
	z-index: 1;
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.3;
	margin-block: 8px 10px;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-libcard__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-libcard__field strong {
	font-family: var(--mfac-mono);
	font-weight: 600;
	color: #43402e;
}

.mfac-libcard__stamp {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 16px;
	z-index: 1;
	transform: rotate(-6deg);
	font-family: var(--mfac-mono);
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mfac-libcard__stamp a {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid #a1461f;
	border-radius: 3px;
	color: #a1461f;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 27 · Toggle reveal — core/details, so no script and real keyboard support.
 * ------------------------------------------------------------------------- */

.mfac-toggle {
	background: #1b1f27;
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px rgba(10, 14, 22, 0.3);
}

.mfac-toggle > * {
	margin: 0;
}

.mfac-toggle > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a7b0c4;
}

.mfac-toggle > summary::-webkit-details-marker {
	display: none;
}

/*
 * The switch: one pseudo-element. The track is the background colour and the knob
 * a radial-gradient inside it, so the whole control is a single box that slides its
 * own knob when the disclosure opens.
 */
.mfac-toggle > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 52px;
	height: 28px;
	border: 1px solid #3a4256;
	border-radius: 999px;
	background-color: #2a3040;
	background-image: radial-gradient(circle 11px at 13px 50%, #e9edf5 98%, transparent 100%);
	transition: background-color 0.22s ease, background-position 0.22s ease;
}

.mfac-toggle[open] > summary::after {
	border-color: var(--mfac-teal);
	background-color: var(--mfac-teal);
	background-image: radial-gradient(circle 11px at 37px 50%, #fff 98%, transparent 100%);
}

.mfac-toggle__tag {
	margin-block-start: 18px;
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7fd894;
}

.mfac-toggle__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.28;
	margin-block: 8px;
	color: #eef2fa;
	text-wrap: balance;
}

.mfac-toggle__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-toggle__meta {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	color: #98a3bd;
}

/* ---------------------------------------------------------------------------
 * 28 · Wordmark — the headline at poster size.
 * ------------------------------------------------------------------------- */

.mfac-wordmark {
	display: grid;
	gap: 10px;
	padding-block: 8px;
}

.mfac-wordmark > * {
	margin: 0;
}

.mfac-wordmark__eyebrow {
	font-family: var(--mfac-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mfac-muted);
}

.mfac-wordmark__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: var(--mfac-ink);
	text-wrap: balance;
}

/* The underline grows across the words rather than appearing all at once. */
.mfac-wordmark__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--mfac-accent), var(--mfac-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 3px;
	transition: background-size 0.28s ease;
}

.mfac-wordmark:hover .mfac-wordmark__title a {
	background-size: 100% 3px;
}

.mfac-wordmark__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 6px;
	font-size: 0.86rem;
	color: var(--mfac-body);
}

.mfac-wordmark__meta::before {
	content: "→";
	font-weight: 700;
	color: var(--mfac-accent-ink);
}

/* ---------------------------------------------------------------------------
 * 29 · Browser tab — the card as a browser window.
 * ------------------------------------------------------------------------- */

.mfac-browser {
	display: grid;
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(20, 30, 50, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mfac-browser > * {
	margin: 0;
}

.mfac-browser:hover,
.mfac-browser:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 30, 50, 0.14);
}

.mfac-browser__chrome {
	display: grid;
	gap: 6px;
	padding: 9px 11px 8px;
	background: #e9ecf2;
}

.mfac-browser__chrome > * {
	margin: 0;
}

.mfac-browser__tab {
	display: flex;
	align-items: center;
	gap: 7px;
	justify-self: start;
	max-width: 190px;
	padding: 6px 10px;
	background: var(--mfac-surface);
	border-radius: 6px 6px 0 0;
	font-size: 0.7rem;
	color: var(--mfac-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mfac-browser__tab::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--mfac-cool);
}

.mfac-browser__url {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	background: var(--mfac-surface);
	border-radius: 999px;
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	color: var(--mfac-body);
}

.mfac-browser__url::before {
	content: "🔒";
	font-size: 0.62rem;
}

.mfac-browser__shot {
	display: grid;
	gap: 7px;
	padding: 22px 24px 26px;

	/*
	 * A soft diagonal wash standing in for the page behind the window.
	 *
	 * The prototype declared a second, striped layer under this one — and because
	 * this gradient is opaque, that layer never rendered. Shortening the declaration
	 * for stylelint is what dropped the opaque layer and left the stripes on their
	 * own, which read as hard alternating bands. Measured against the prototype:
	 * a smooth gradient is what it actually shows, so the dead stripe layer is gone
	 * rather than carried forward.
	 */
	background-image: linear-gradient(160deg, #eef1f6, #dfe6f0 60%);
}

.mfac-browser__shot > * {
	margin: 0;
}

.mfac-browser__tag {
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mfac-cool-ink);
}

.mfac-browser__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.28;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-browser__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-browser__meta {
	font-size: 0.74rem;
	color: var(--mfac-body);
}

/* ---------------------------------------------------------------------------
 * 30 · Sticky note — an informal recommendation.
 * ------------------------------------------------------------------------- */

.mfac-note {
	position: relative;
	display: grid;
	gap: 8px;
	max-width: 300px;
	padding: 26px 24px 30px;
	background: #fff6a8;
	box-shadow: 2px 4px 10px rgba(60, 50, 10, 0.18);
	transform: rotate(-3deg);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mfac-note > * {
	margin: 0;
}

.mfac-note:hover,
.mfac-note:focus-within {
	transform: rotate(0deg) translateY(-3px);
	box-shadow: 3px 8px 18px rgba(60, 50, 10, 0.24);
}

/* The strip of tape. */
.mfac-note::before {
	content: "";
	position: absolute;
	inset-block-start: -12px;
	inset-inline-start: 50%;
	width: 64px;
	height: 26px;
	transform: translateX(-50%) rotate(-2deg);
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.mfac-note::after {
	content: "📌";
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: 12px;
	font-size: 1.1rem;
}

.mfac-note__tag {
	font-family: var(--mfac-mono);
	font-size: 0.66rem;
	text-transform: uppercase;
	color: #6f6115;
}

.mfac-note__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.28;
	color: #3a3620;
	text-wrap: balance;
}

.mfac-note__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-note__meta {
	font-family: var(--mfac-mono);
	font-size: 0.68rem;
	color: #5c5216;
}

/* ---------------------------------------------------------------------------
 * 31 · Pulse line — a pinging dot and an ECG trace.
 * ------------------------------------------------------------------------- */

.mfac-pulse {
	display: grid;
	gap: 8px;
	padding: 20px 22px;
	background: var(--mfac-surface);
	border: 1px solid var(--mfac-rule);
	border-radius: 10px;
	overflow: hidden;
}

.mfac-pulse > * {
	margin: 0;
}

.mfac-pulse__tag {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--mfac-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mfac-body);
}

.mfac-pulse__tag::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #c62b42;
	box-shadow: 0 0 0 0 rgba(198, 43, 66, 0.9);
	animation: mfac-pulse-ping 1.8s ease-out infinite;
}

@keyframes mfac-pulse-ping {

	100% {
		box-shadow: 0 0 0 12px rgba(198, 43, 66, 0);
	}
}

/*
 * The trace is a drawn background, not an inline <svg>: raw SVG in a pattern would
 * need a core/html block, whose contents KSES strips for any role without
 * unfiltered_html. A data URI is drawn by the browser, never fetched.
 */
.mfac-pulse__line {
	height: 34px;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	/* stylelint-disable-next-line max-line-length, function-url-quotes -- one data URI:
	 * splitting the value would break it, and the quotes are required because it
	 * contains its own. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpolyline points='0,20 60,20 75,6 90,34 105,20 160,20 175,10 190,30 205,20 400,20' fill='none' stroke='%23c62b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mfac-pulse__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.28;
	color: var(--mfac-ink);
	text-wrap: balance;
}

.mfac-pulse__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-pulse__meta {
	font-size: 0.78rem;
	color: var(--mfac-body);
}

/* ---------------------------------------------------------------------------
 * 32 · Receipt — a till roll with a torn edge.
 * ------------------------------------------------------------------------- */

.mfac-receipt {
	display: grid;
	gap: 3px;
	max-width: 300px;
	padding: 22px 20px 30px;
	background: #fdfdf8;
	box-shadow: 0 6px 18px rgba(20, 20, 10, 0.12);
	font-family: var(--mfac-mono);
	color: #2b2b26;

	/* The torn bottom edge. */
	/* stylelint-disable-next-line max-line-length -- fifteen coordinate pairs; a
	 * polygon() value cannot be split across lines. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 96%, 84% 100%, 76% 96%, 68% 100%, 60% 96%, 52% 100%, 44% 96%, 36% 100%, 28% 96%, 20% 100%, 12% 96%, 4% 100%, 0 96%);
}

.mfac-receipt > * {
	margin: 0;
}

.mfac-receipt__head {
	padding-block-end: 10px;
	margin-block-end: 6px;
	border-block-end: 1px dashed #a39d8b;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-align: center;
}

.mfac-receipt__head strong {
	display: block;
	font-size: 0.9rem;
}

.mfac-receipt__row,
.mfac-receipt__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.72rem;
}

.mfac-receipt__total {
	margin-block-start: 8px;
	padding-block-start: 8px;
	border-block-start: 1px dashed #a39d8b;
	font-size: 0.82rem;
	font-weight: 700;
}

.mfac-receipt__title {
	font-family: var(--mfac-serif);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
	margin-block: 10px 8px;
	text-align: center;
	color: #2b2b26;
	text-wrap: balance;
}

.mfac-receipt__title a {
	color: inherit;
	text-decoration: none;
}

.mfac-receipt__btn {
	margin-block-start: 12px;
}

.mfac-receipt__btn a {
	display: block;
	padding: 9px;
	border-radius: 4px;
	background: #1b1f27;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-align: center;
	color: #fff;
	text-decoration: none;
}

.mfac-receipt__barcode {
	--mfac-bar: #2b2b26;

	height: 26px;
	margin-block-start: 12px;
	background-image:
		repeating-linear-gradient(90deg, var(--mfac-bar) 0 2px, transparent 2px 5px),
		repeating-linear-gradient(90deg, transparent 0 7px, var(--mfac-bar) 7px 8px);
}

/* ---------------------------------------------------------------------------
 * Motion and focus.
 * ------------------------------------------------------------------------- */

.mfac-ledger a:focus-visible,
.mfac-rail a:focus-visible,
.mfac-auf a:focus-visible,
.mfac-split a:focus-visible,
.mfac-scrim a:focus-visible,
.mfac-grid a:focus-visible,
.mfac-term a:focus-visible,
.mfac-marg a:focus-visible,
.mfac-stack a:focus-visible,
.mfac-gauge a:focus-visible,
.mfac-symtile a:focus-visible,
.mfac-pq a:focus-visible,
.mfac-plain a:focus-visible,
.mfac-filecard a:focus-visible,
.mfac-tile a:focus-visible,
.mfac-thumbrow a:focus-visible,
.mfac-qframe a:focus-visible,
.mfac-ticket a:focus-visible,
.mfac-shell a:focus-visible,
.mfac-stamp a:focus-visible,
.mfac-status a:focus-visible,
.mfac-spine a:focus-visible,
.mfac-neon a:focus-visible,
.mfac-libcard a:focus-visible,
.mfac-toggle a:focus-visible,
.mfac-toggle > summary:focus-visible,
.mfac-wordmark a:focus-visible,
.mfac-browser a:focus-visible,
.mfac-note a:focus-visible,
.mfac-pulse a:focus-visible,
.mfac-receipt a:focus-visible {
	outline: 2px solid var(--mfac-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.mfac-ledger__row,
	.mfac-rail,
	.mfac-auf,
	.mfac-split,
	.mfac-plate,
	.mfac-term,
	.mfac-numeral__figure,
	.mfac-chipcard,
	.mfac-stack,
	.mfac-gauge,
	.mfac-symtile,
	.mfac-pq,
	.mfac-plain__cta a::after,
	.mfac-filecard,
	.mfac-filecard::before,
	.mfac-tile__title,
	.mfac-thumbrow,
	.mfac-qframe,
	.mfac-ticket__stublabel a::after,
	.mfac-shell,
	.mfac-stamp,
	.mfac-status,
	.mfac-status__cta a::after,
	.mfac-neon__btn a,
	.mfac-toggle > summary::after,
	.mfac-wordmark__title a,
	.mfac-browser,
	.mfac-note {
		transition-duration: 0.01ms;
	}

	/* The blinking cursor and the pinging dot are the two looping animations. */
	.mfac-shell__meta::after,
	.mfac-pulse__tag::before {
		animation: none;
	}
}