/*
 * The site's design kit: the tokens, type, spacing, motion and components
 * of the locked members' homepage, header and footer, lifted as they are
 * so every other page looks built at the same time. Extracted, not
 * designed: each rule names where it comes from (mh = the homepage's
 * members-home.css, hd = header.css, ft = footer.css, ff = the form
 * pages' forms.css, itself taken from mh). Rules: ccos/design-identity-ruleset.md.
 *
 * Scope: everything is under .mfk (a kit page's <main>), so nothing else
 * on the site changes. The form pages share the tokens and the fonts
 * (.mff, and BID Forms' own form and popup wherever they are shown).
 *
 * The Mansfield NOW accent (visitor pages): data-accent="now" on .mfk.
 * NOW yellow becomes the accent beside cyan; see "Mansfield NOW" below.
 */

/* ── Fonts (mh: self-hosted, OFL; the same files, fetched once) ─────── */

@font-face {
	font-family: "MFH Display";
	src: url("../../plugins/mansfield-members-home/assets/fonts/archivo-wdth.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "MFH Serif";
	src: url("../../plugins/mansfield-members-home/assets/fonts/instrument-serif-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "MFH Mono";
	src: url("../../plugins/mansfield-members-home/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "MFH Mono";
	src: url("../../plugins/mansfield-members-home/assets/fonts/jetbrains-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

/* ── Tokens (mh .mfh; ff adds the paper field and error tokens) ──────── */

.mfk,
.mff,
.bid-form-wrap[data-form-id],
.bid-modal {
	--ink: #0b0c0e;
	--ink-2: #141619;
	--paper: #ebe9e3;
	--paper-2: #f6f5f1;
	--cyan: #39e6fc;
	--cyan-ink: #0a6f7d; /* cyan as text on paper: 4.8:1 */
	--cyan-deep: #0f8aa0; /* mh: accent words on paper, large text only (3.3:1) */
	--now: #fed500; /* Mansfield NOW yellow (its logo) */
	--white: #fff;
	--mute-dark: #9ba1a8;
	--mute-paper: #55595f;
	--line-dark: rgba(255, 255, 255, 0.14);
	--line-dark-2: rgba(255, 255, 255, 0.08);
	--line-paper: rgba(11, 12, 14, 0.16);
	--field-line: rgba(11, 12, 14, 0.58);
	--choice-line: rgba(11, 12, 14, 0.3);
	--tint: rgba(57, 230, 252, 0.16);
	--amber: #c58a00;
	--error: #a3261b;
	--error-ink: #8a1212;
	--error-bg: #f6e3e1;
	--gutter: clamp(16px, 3.4vw, 48px);
	--wrap: 1440px;
	--section: clamp(88px, 12vw, 180px);
	--radius: 4px;
	--radius-pop: 6px;
	--display: "MFH Display", "Archivo Narrow", "Arial Narrow", sans-serif;
	--serif: "MFH Serif", "Instrument Serif", Georgia, serif;
	--mono: "MFH Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--out: cubic-bezier(0.19, 1, 0.22, 1);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230b0c0e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	--calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230b0c0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");

	/* The accent: cyan (the BID). Every component uses these, never a
	   colour by name, so the NOW variant changes them in one place. */
	--accent: var(--cyan);
	--accent-on: var(--ink); /* text on an accent fill */
	--accent-paper: var(--cyan-deep); /* accent words on paper (large) */
	--accent-paper-bg: transparent; /* NOW marks paper accents with a fill instead */
	--accent-text-paper: var(--cyan-ink); /* small accent text on paper */
}

/* ── Mansfield NOW (visitor pages) ───────────────────────────────────── */
/* NOW yellow on ink is 13.7:1; ink on NOW yellow is 13.7:1. Yellow on
   paper is 1.2:1, so on paper a NOW accent word is ink on a yellow bar,
   as in the NOW logo (black on a yellow block), never yellow text. Cyan
   stays for focus rings and links. */
.mfk[data-accent="now"] {
	--accent: var(--now);
	--accent-on: var(--ink);
	--accent-paper: var(--ink);
	--accent-paper-bg: var(--now);
	--accent-text-paper: var(--ink);
}

/* ── The page (ff) ───────────────────────────────────────────────────── */

body.mfk-page {
	margin: 0;
	padding: 0;
	background: #0b0c0e;
	overflow-x: clip;
}
/* The header's own spacer stays (hd): the theme's "transparent header"
   class would hide it, and a kit page leaves no room under the header. */
body.mfk-page .mfhd-spacer {
	display: block !important;
}
.mfk {
	display: block;
	margin: 0;
	padding: 0;
	outline: none;
	background: var(--ink);
	color: var(--white);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.mfk-page #pxl-main.mfk {
	padding: 0 !important;
}
.mfk *,
.mfk *::before,
.mfk *::after {
	box-sizing: border-box;
}
.mfk :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}
.mfk :is(h1, h2, h3, h4) {
	font-family: var(--display);
	line-height: 1;
}
.mfk :is(ul, ol):not(.mfk-prose *) {
	list-style: none;
}
.mfk a {
	color: inherit;
	text-decoration: none;
}
.mfk a:hover,
.mfk a:not(.mfk-btn):focus,
.mfk a:not(.mfk-btn):active {
	color: inherit;
}
.mfk em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: -0.01em;
}
.mfk img {
	display: block;
	max-width: 100%;
	height: auto;
}
.mfk :focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
}
.mfk-section--paper :focus-visible,
.mfk-section--accent :focus-visible {
	outline-color: var(--ink);
}
.mfk-wrap,
.mff-wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.mfk-wrap--narrow {
	max-width: calc(760px + 2 * var(--gutter));
}
.mfk-sr,
.mff-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.mfk-i {
	flex: none;
	width: 1.1em;
	height: 1.1em;
}

/* ── Type ────────────────────────────────────────────────────────────── */

/* Mono label: the eyebrow, readouts, meta (mh .mfh-mono, .mfh-index). */
.mfk .mfk-mono,
.mfk .mfk-index,
.mff .mff-index {
	margin: 0;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mute-dark);
}
.mfk-section--paper .mfk-index,
.mfk-section--accent .mfk-index {
	color: var(--mute-paper);
}
/* Display capitals with one serif italic accent word (mh .mfh-h2, ff .mff-h1). */
.mfk .mfk-h1,
.mff .mff-h1,
.mfk .mfk-h2 {
	max-width: 18ch;
	margin: 0;
	padding: 0;
	font-family: var(--display);
	font-size: clamp(44px, 6.6vw, 112px);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	color: inherit;
}
.mfk .mfk-h1,
.mff .mff-h1 {
	color: var(--white);
}
.mfk .mfk-h2 {
	max-width: none;
}
.mfk .mfk-h1 em,
.mff .mff-h1 em,
.mfk .mfk-h2 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-stretch: normal;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--accent);
}
.mff .mff-h1 em {
	color: var(--cyan);
}
.mfk-section--paper .mfk-h2 em {
	background: var(--accent-paper-bg);
	color: var(--accent-paper);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.mfk[data-accent="now"] .mfk-section--paper .mfk-h2 em {
	padding: 0 0.08em;
}
.mfk-section--accent .mfk-h2 em {
	color: var(--ink);
}
/* Card and list titles (mh .mfh-person__name, .mfh-feed__title). */
.mfk .mfk-h3 {
	font-family: var(--display);
	font-size: clamp(28px, 2.6vw, 40px);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
}
/* The lede (mh .mfh-head__lede, ff .mff-lede). */
.mfk .mfk-lede,
.mff .mff-lede {
	max-width: 40em;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--mute-dark);
}
.mfk-section--paper .mfk-lede {
	color: var(--mute-paper);
}
/* On the accent fill the lede is ink (muted grey on yellow or cyan is
   too faint). */
.mfk-section--accent .mfk-lede {
	color: var(--accent-on);
}
.mfk .mfk-lede a,
.mff .mff-lede a {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mfk-section--paper .mfk-lede a {
	color: var(--ink);
}

/* ── Page hero (ff .mff-hero: ink, film grain, a photo far back) ─────── */

.mfk-hero,
.mff-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(48px, 9vw, 132px) 0 clamp(56px, 8vw, 120px);
	background: var(--ink);
}
/* A card rises over the bottom of the hero (the form pages). */
.mfk-hero--overlap,
.mff-hero {
	padding-bottom: clamp(120px, 14vw, 200px);
}
.mfk-hero::after,
.mff-hero::after,
.mfk-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--grain);
	opacity: 0.08;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.mfk-section::after {
	z-index: 0;
}
.mfk-hero__media,
.mff-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.mfk-hero__media img,
.mff-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0.32;
	filter: saturate(0.7);
}
.mfk-hero__media::after,
.mff-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 12, 14, 0.92) 0%, rgba(11, 12, 14, 0.55) 55%, rgba(11, 12, 14, 0.35) 100%),
		linear-gradient(180deg, rgba(11, 12, 14, 0) 45%, var(--ink) 100%);
}
.mfk-hero__inner,
.mff-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 22px;
	justify-items: start;
}
/* The NOW logo above a visitor page's heading. */
.mfk .mfk-hero__logo {
	width: auto;
	max-width: none;
	height: 26px;
}
.mfk-hero .mfk-actions {
	margin-top: 6px;
}

/* ── Sections: ink and paper alternate (mh .mfh-section) ─────────────── */

.mfk-section {
	position: relative;
	isolation: isolate;
	padding: var(--section) 0;
	overflow: hidden;
}
.mfk-section--tight {
	padding: clamp(56px, 7vw, 104px) 0;
}
.mfk-section > .mfk-wrap {
	position: relative;
	z-index: 1;
}
.mfk-section--ink {
	background: var(--ink);
	color: var(--white);
}
.mfk-section--paper {
	background: var(--paper);
	color: var(--ink);
}
.mfk-section--accent {
	background: var(--accent);
	color: var(--accent-on);
}
/* Section head: label, title, lede (mh .mfh-head). */
.mfk-head {
	display: grid;
	gap: 22px;
	margin-bottom: clamp(48px, 6vw, 96px);
}
@media (min-width: 1000px) {
	.mfk-head {
		grid-template-columns: 1fr 1.6fr 1fr;
		align-items: end;
	}
	.mfk-head--stack {
		grid-template-columns: none;
		align-items: start;
	}
}

/* ── Buttons: pill, the label rolls on hover (mh .mfh-btn) ───────────── */

.mfk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mfk-grid + .mfk-actions {
	margin-top: clamp(32px, 4vw, 56px);
}
.mfk .mfk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 52px;
	padding: 0 26px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.4s var(--out), color 0.4s var(--out), border-color 0.4s var(--out);
}
.mfk-btn > span {
	position: relative;
	display: inline-block;
	text-shadow: 0 2.4em 0 currentColor;
	transition: transform 0.6s var(--out);
}
.mfk-btn:hover > span {
	transform: translateY(-2.4em);
}
.mfk-btn .mfk-i {
	transition: transform 0.6s var(--out);
}
.mfk-btn:hover .mfk-i {
	transform: translateY(2px);
}
.mfk .mfk-btn--primary {
	background: var(--accent);
	color: var(--accent-on);
}
.mfk .mfk-btn--primary:hover {
	background: var(--white);
	color: var(--ink);
}
.mfk .mfk-btn--line {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--white);
}
.mfk .mfk-btn--line:hover {
	border-color: var(--white);
	color: var(--white);
}
.mfk .mfk-btn--ink {
	background: var(--ink);
	color: var(--white);
}
.mfk .mfk-btn--ink:hover {
	background: var(--ink-2);
	color: var(--white);
}
/* On paper and on the accent: an ink outline (mh .mfh-btn--outline-ink). */
.mfk .mfk-btn--outline-ink,
.mfk-section--paper .mfk-btn--line,
.mfk-section--accent .mfk-btn--line {
	border-color: var(--ink);
	color: var(--ink);
}
.mfk .mfk-btn--outline-ink:hover,
.mfk-section--paper .mfk-btn--line:hover,
.mfk-section--accent .mfk-btn--line:hover {
	background: var(--ink);
	color: var(--paper);
}
.mfk .mfk-btn--block {
	width: 100%;
}
/* Small outlined link (mh .mfh-chip). */
.mfk .mfk-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--white);
	cursor: pointer;
	transition: border-color 0.4s var(--out), background-color 0.4s var(--out), color 0.4s var(--out);
}
.mfk .mfk-chip:hover {
	border-color: var(--white);
	color: var(--white);
}
.mfk-section--paper .mfk-chip {
	border-color: var(--line-paper);
	color: var(--ink);
}
.mfk-section--paper .mfk-chip:hover {
	border-color: var(--ink);
	color: var(--ink);
}
/* A tag on a card or row (mh .mfh-places, .mfh-person__tag). */
.mfk-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	justify-self: start;
	padding: 3px 9px;
	border: 1px solid var(--accent);
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
}
.mfk-tag--fill {
	background: var(--accent);
	color: var(--accent-on);
}
.mfk-tag--quiet {
	border-color: var(--line-dark);
	color: var(--mute-dark);
}
.mfk-section--paper .mfk-tag {
	border-color: var(--ink);
	color: var(--ink);
}
.mfk-section--paper .mfk-tag--fill {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-on);
}

/* ── Cards (mh .mfh-person: 4px corners, a hairline, ink-2) ──────────── */

.mfk-grid {
	display: grid;
	gap: 14px;
}
@media (min-width: 700px) {
	.mfk-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1000px) {
	.mfk-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1200px) {
	.mfk-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}
.mfk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	background: var(--ink-2);
	color: var(--white);
	overflow: hidden;
}
.mfk-section--paper .mfk-card {
	border-color: var(--line-paper);
	background: var(--paper-2);
	color: var(--ink);
}
.mfk-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #1c1f23;
}
.mfk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.2s var(--out);
}
.mfk-card:hover .mfk-card__media img,
.mfk-card:focus-within .mfk-card__media img {
	transform: scale(1.06);
}
.mfk-card__media .mfk-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	border-color: var(--ink);
	background: var(--ink);
}
.mfk-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 22px 20px 20px;
}
.mfk .mfk-card__title {
	font-family: var(--display);
	font-size: clamp(26px, 2.2vw, 34px);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
}
/* The whole card is the link: the title's link covers it. */
.mfk-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.mfk-card__title a:focus-visible {
	outline: none;
}
.mfk-card:has(.mfk-card__title a:focus-visible) {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
}
.mfk-card__meta {
	color: var(--accent);
}
.mfk-section--paper .mfk-card__meta {
	color: var(--accent-text-paper);
}
.mfk-card__text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mute-dark);
}
.mfk-section--paper .mfk-card__text {
	color: var(--mute-paper);
}
.mfk-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line-dark);
}
.mfk-section--paper .mfk-card__foot {
	border-top-color: var(--line-paper);
}
.mfk-card__foot > * {
	position: relative;
	z-index: 2; /* above the card's covering link */
}
.mfk-card__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	font-weight: 600;
	color: var(--accent);
}
.mfk-section--paper .mfk-card__go {
	color: var(--ink);
}
.mfk-card__go .mfk-i {
	transition: transform 0.5s var(--out);
}
.mfk-card:hover .mfk-card__go .mfk-i {
	transform: translateX(4px);
}
/* No person card: the team's cards are the members' homepage's own
   (mf_kit_members_home_open(), or a link to /#mfh-team). */
/* Place: a square-ish photo and an "open now" line. */
.mfk-card--place .mfk-card__media {
	aspect-ratio: 4 / 3;
}
/* Offer: the offer itself in the accent, large (mh .mfh-pass). */
.mfk-card--offer .mfk-card__deal {
	font-family: var(--display);
	font-size: clamp(30px, 2.8vw, 44px);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--accent);
}
.mfk-section--paper .mfk-card--offer .mfk-card__deal {
	color: var(--ink);
}
/* Event: the date block beside the title (mh .mfh-when). */
.mfk-card--event .mfk-card__body {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 8px 18px;
	align-content: start;
}
.mfk-card--event .mfk-card__body > :not(.mfk-when) {
	grid-column: 2;
}
.mfk-card--event .mfk-when {
	grid-row: 1 / span 3;
}
/* Job and post: text first; no photo needed. */
.mfk-card--job .mfk-card__title,
.mfk-card--post .mfk-card__title {
	font-size: clamp(24px, 2vw, 30px);
}

/* The date block (mh .mfh-when). */
.mfk-when {
	display: grid;
	place-items: center;
	align-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mute-dark);
}
.mfk-when b {
	font-family: var(--display);
	font-size: 1.875rem;
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--white);
}
.mfk-section--paper .mfk-when {
	border-color: var(--line-paper);
	color: var(--mute-paper);
}
.mfk-section--paper .mfk-when b {
	color: var(--ink);
}

/* ── Lists ───────────────────────────────────────────────────────────── */

/* Dated list, ink (mh .mfh-feed__item): date, name and meta, arrow. */
.mfk-feed__title {
	padding-bottom: 16px;
	border-bottom: 1px solid currentColor;
}
.mfk .mfk-feed__item {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr 28px;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--line-dark);
	isolation: isolate;
}
.mfk-feed__item::before {
	content: "";
	position: absolute;
	inset: 0 -14px;
	z-index: -1;
	border-radius: var(--radius);
	background: var(--ink-2);
	opacity: 0;
	transition: opacity 0.4s var(--out);
}
.mfk-feed__item:hover::before {
	opacity: 1;
}
.mfk-feed__item > .mfk-i {
	color: var(--accent);
	transition: transform 0.5s var(--out);
}
.mfk-feed__item:hover > .mfk-i {
	transform: translateX(4px);
}
.mfk-feed__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}
.mfk-feed__name {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}
.mfk-feed__meta {
	font-size: 0.6875rem;
	color: var(--mute-dark);
}
/* Numbered rows that fill on hover, paper (mh .mfh-row). */
.mfk-rows {
	border-top: 1px solid var(--ink);
	counter-reset: mfk-row;
}
.mfk .mfk-row {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 6px 20px;
	align-items: baseline;
	padding: clamp(22px, 2.6vw, 36px) 0;
	border-bottom: 1px solid var(--line-paper);
	color: var(--ink);
	isolation: isolate;
}
.mfk .mfk-row:hover {
	color: var(--ink);
}
.mfk-row::before {
	content: "";
	position: absolute;
	inset: 0 calc(-1 * var(--gutter));
	z-index: -1;
	background: var(--accent);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.6s var(--out);
}
.mfk-row:hover::before,
.mfk-row:focus-visible::before {
	transform: scaleY(1);
}
.mfk-row__n {
	color: var(--mute-paper);
}
.mfk-row__name {
	font-family: var(--display);
	font-size: clamp(30px, 3.6vw, 60px);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	transition: transform 0.6s var(--out);
}
.mfk-row:hover .mfk-row__name {
	transform: translateX(10px);
}
.mfk-row__what {
	grid-column: 2;
	max-width: 36em;
	font-size: 0.9375rem;
	color: var(--mute-paper);
}
.mfk-row > .mfk-i {
	position: absolute;
	right: 0;
	top: 50%;
	width: 28px;
	height: 28px;
	transform: translateY(-50%);
	transition: transform 0.6s var(--out);
}
.mfk-row:hover > .mfk-i {
	transform: translate(-6px, -50%);
}
@media (min-width: 900px) {
	.mfk .mfk-row {
		grid-template-columns: 64px 1.2fr 1fr 140px;
		align-items: center;
	}
	.mfk-row__what {
		grid-column: auto;
	}
}
/* Facts: label and value pairs (mh .mfh-facts). */
.mfk-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 32px;
	color: var(--mute-dark);
}
.mfk-facts dt {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mfk-facts dd {
	margin-top: 6px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--white);
}
.mfk-facts a {
	border-bottom: 1px solid var(--line-dark);
	transition: border-color 0.4s var(--out);
}
.mfk-facts a:hover {
	border-color: var(--accent);
}
.mfk-section--paper .mfk-facts {
	color: var(--mute-paper);
}
.mfk-section--paper .mfk-facts dd {
	color: var(--ink);
}
.mfk-section--paper .mfk-facts a {
	border-bottom-color: rgba(11, 12, 14, 0.35);
}

/* ── Tabs: chips that choose a panel (mh .mfh-chip) ──────────────────── */

.mfk-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(28px, 3vw, 44px);
}
.mfk .mfk-tabs__list [role="tab"][aria-selected="true"] {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-on);
}
.mfk-section--paper .mfk-tabs__list [role="tab"][aria-selected="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}
.mfk-tabs__panel[hidden] {
	display: none;
}

/* ── View chips: links that choose a view (?when=today), the one in view
   filled like a chosen tab. mf_kit_chips(). ─────────────────────────── */

.mfk-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(36px, 4vw, 60px);
	padding: 0;
	list-style: none;
}
.mfk .mfk-chip[aria-current="true"] {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-on);
}
.mfk-section--paper .mfk-chip[aria-current="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}
.mfk-chip__n {
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	opacity: 0.7;
}

/* ── A day in a what's-on list: its date as a dated-list title, then its
   events as photo cards. ─────────────────────────────────────────────── */

.mfk-day + .mfk-day {
	margin-top: clamp(44px, 5vw, 80px);
}
.mfk .mfk-day > .mfk-feed__title {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.mfk-day__n {
	color: var(--mute-paper);
}
.mfk-section--ink .mfk-day__n {
	color: var(--mute-dark);
}
/* An event card with its photo (mf_kit_card( photo: true )): the photo
   above, the date block and words below, as the other cards. */
.mfk-card--photo .mfk-card__media {
	aspect-ratio: 16 / 9;
}
.mfk-card--photo .mfk-card__body {
	padding-top: 18px;
}
.mfk-card--photo .mfk-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
/* A tag on a photo keeps the accent on ink, on paper as on ink. */
.mfk .mfk-card__media .mfk-tag {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--accent);
}
/* No photo: the same space, ink with the Mansfield NOW mark, so a row of
   cards stays even. */
.mfk-card__media--blank {
	background: var(--ink) url("logo-now.svg") center / 34% auto no-repeat;
}

/* ── The members' homepage's own pieces on a kit page (rule 0) ────────
   Its script needs its hero to exist; the stand-in stays out of sight
   (the homepage's styles would give it a screen's height). Its follow
   tiles and total: in the page's accent, side by side on wide screens,
   each network in its own colour. */

.mfk-reuse > .mfh-hero[hidden] {
	display: none !important;
}

.mfk[data-accent="now"] .mfk-reuse .mfh-total__n {
	color: var(--now);
}
.mfk-reuse .mfh-brand[style*="#000000"] {
	color: var(--white);
}
.mfk-follow .mfh-talk {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.mfk-reuse .mfh-talk__what b {
	font-weight: 600;
	color: var(--white);
}
.mfk-reuse .mfh-talk__item--instagram {
	--brand-bg: #d6005c;
}
.mfk-reuse .mfh-talk__item--tiktok {
	--brand-bg: #e3173f;
}
.mfk-reuse .mfh-talk__item--youtube {
	--brand-bg: #d40000;
}

/* ── Form fields (mh .mfh-field; BID Forms' own fields: mansfield-forms) */

.mfk-field {
	display: grid;
	gap: 4px;
	margin-bottom: 18px;
}
.mfk-field label,
.mfk-field legend {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mfk-field__opt {
	color: var(--mute-paper);
}
.mfk .mfk-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid var(--field-line);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 1.0625rem;
	color: inherit;
	box-shadow: none;
	transition: border-color 0.3s;
}
.mfk .mfk-field textarea {
	min-height: 120px;
	resize: vertical;
}
.mfk .mfk-field select {
	appearance: none;
	padding-right: 28px;
	background: var(--chevron) right 4px center / 12px 8px no-repeat;
}
.mfk-section--ink .mfk-field :is(input, textarea, select) {
	border-bottom-color: rgba(255, 255, 255, 0.5);
}
.mfk .mfk-field :is(input, textarea, select):focus {
	border-bottom-color: currentColor;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.mfk-field__help {
	font-size: 0.8125rem;
	color: var(--mute-paper);
}
.mfk-field__error {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--error-ink);
}
.mfk-field--error :is(input, textarea, select) {
	border-bottom-color: var(--error) !important;
}
/* A paper card that holds a form on an ink page (mh .mfh-dialog, ff card). */
.mfk-panel {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(24px, 4.2vw, 48px) clamp(18px, 4.2vw, 48px) clamp(22px, 3.6vw, 40px);
	border-radius: var(--radius-pop);
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7);
}

/* ── Notice and empty state ──────────────────────────────────────────── */

/* Notice (mh .mfh-note, .mfh-banner): calm, a bar on the left. */
.mfk-notice {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-left: 3px solid var(--cyan-deep);
	border-radius: var(--radius);
	background: rgba(15, 138, 160, 0.08);
	color: inherit;
}
.mfk-section--ink .mfk-notice,
.mfk-hero .mfk-notice {
	border-left-color: var(--accent);
	background: rgba(255, 255, 255, 0.05);
}
.mfk-notice--warn {
	border-left-color: var(--amber);
	background: rgba(197, 138, 0, 0.1);
}
.mfk-notice--error {
	border-left-color: var(--error);
	background: var(--error-bg);
	color: var(--error-ink);
}
.mfk-notice--done {
	border-left-color: var(--ink);
	background: var(--accent);
	color: var(--accent-on);
}
.mfk-notice__title {
	font-weight: 700;
}
.mfk-notice__text {
	font-size: 0.9375rem;
	line-height: 1.5;
}
/* Empty state: nothing to show, and what to do about it. */
.mfk-empty {
	display: grid;
	gap: 14px;
	justify-items: start;
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
}
.mfk-section--paper .mfk-empty {
	border-color: var(--line-paper);
}
.mfk .mfk-empty__title {
	font-family: var(--display);
	font-size: clamp(28px, 2.6vw, 40px);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
}
.mfk-empty__text {
	max-width: 36em;
	color: var(--mute-dark);
}
.mfk-section--paper .mfk-empty__text {
	color: var(--mute-paper);
}

/* ── Prose: a page's own words (headings, lists, links, tables) ──────── */

.mfk-prose {
	max-width: 44em;
	font-size: 1.0625rem;
	line-height: 1.65;
}
.mfk .mfk-prose > * + * {
	margin-top: 1em;
}
.mfk .mfk-prose :is(h2, h3, h4) {
	margin-top: 1.8em;
	font-family: var(--display);
	font-stretch: 62%;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	scroll-margin-top: 140px;
}
.mfk-prose h2 {
	font-size: clamp(30px, 3vw, 44px);
}
.mfk-prose h3 {
	font-size: clamp(24px, 2.2vw, 32px);
}
.mfk-prose h4 {
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-stretch: normal;
	font-weight: 500;
	letter-spacing: 0.06em;
}
.mfk .mfk-prose :is(h2, h3, h4) + * {
	margin-top: 0.6em;
}
.mfk-prose p,
.mfk-prose li {
	margin: 0;
}
.mfk-prose :is(ul, ol) {
	margin-left: 0;
	padding-left: 1.3em;
}
.mfk-prose li + li {
	margin-top: 0.4em;
}
.mfk-prose li::marker {
	color: var(--mute-paper);
}
.mfk-prose a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.mfk-prose a:hover {
	color: var(--accent-text-paper);
}
.mfk-section--ink .mfk-prose a:hover {
	color: var(--accent);
}
.mfk-prose strong {
	font-weight: 700;
}
.mfk-prose section {
	margin-top: 0;
}
.mfk-prose section + section,
.mfk-prose nav + section {
	margin-top: 1.8em;
}
.mfk-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.mfk-prose :is(th, td) {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--line-paper);
	text-align: left;
	vertical-align: top;
}
.mfk-prose th {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mfk-prose blockquote {
	margin: 1.4em 0;
	padding-left: 18px;
	border-left: 3px solid var(--accent-paper);
}
.mfk-prose img,
.mfk-prose figure {
	border-radius: var(--radius);
}
/* A contents list (nav) at the top of a long page: mono, numbered. */
.mfk-prose nav {
	padding: 20px 22px;
	border: 1px solid var(--line-paper);
	border-radius: var(--radius);
}
.mfk-prose nav h2 {
	margin: 0 0 10px;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-stretch: normal;
	font-weight: 500;
	letter-spacing: 0.06em;
}
.mfk-prose nav ol {
	columns: 2 220px;
	column-gap: 28px;
	font-size: 0.9375rem;
}
.mfk-prose nav li {
	break-inside: avoid;
}
.mfk-section--ink .mfk-prose :is(th, td) {
	border-bottom-color: var(--line-dark);
}
.mfk-section--ink .mfk-prose li::marker {
	color: var(--mute-dark);
}

/* ── Motion: long ease-out; everything stops for reduced motion (mh) ─── */

.mfk-js [data-mfk-reveal] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1.2s var(--out), transform 1.2s var(--out);
}
.mfk-js [data-mfk-reveal].is-in {
	opacity: 1;
	transform: none;
}
@keyframes mfk-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}
.mfk-hero__inner > * {
	animation: mfk-rise 0.9s var(--out) both;
}
.mfk-hero__inner > :nth-child(2) {
	animation-delay: 0.06s;
}
.mfk-hero__inner > :nth-child(n + 3) {
	animation-delay: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
	.mfk *,
	.mfk *::before,
	.mfk *::after {
		animation: none !important;
		transition: none !important;
	}
	.mfk-js [data-mfk-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* Tabs without script show each panel under its own heading; with the
   script that heading is the tab itself. */
.mfk-js .mfk-tabs__fallback {
	display: none;
}
.mfk-tabs__fallback {
	margin: 28px 0 12px;
}