/* Talk — the pill, and the full-screen panel it opens.
 *
 * Built to the Fund Managers slide: black ground, a DM Mono eyebrow in gold, a
 * tight-tracked headline, then a two-up grid of cards, each a tall photograph
 * beside a role, a name, a line of biography and a gold "Book with" link.
 *
 * Everything is scoped under .fdm-talk and every property the theme could
 * reach is restated, because this markup lands in the footer of whatever
 * template the site runs. Divi styles headings, buttons, lists and links
 * globally.
 */

.fdm-talk {
	/* Straight from the design. */
	--tk-ground: #000000;
	--tk-card: #121110;
	--tk-card-line: rgba(228, 175, 84, 0.20);
	--tk-gold: #e4af54;
	--tk-gold-lit: #e5cf8f;
	--tk-ink: #ffffff;
	--tk-muted: #9e9e9e;

	/* Above the mega menu, which is --fdm-mega-z (99999) with its panel at
	 * +1, and above the admin bar at 100001. This is why the panel appeared
	 * UNDER the menu: it was at 99992. Left as a variable so a cookie banner
	 * or anything else that genuinely must outrank a modal still can, without
	 * needing to beat the 32-bit ceiling. */
	--tk-z: 100050;

	--tk-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--tk-sans: "Raleway", "Inter", system-ui, -apple-system, sans-serif;

	font-family: var(--tk-sans);
}

/* Stated, not assumed. A theme may or may not set this globally, and without
   it every padded box here is its padding wider than it says: `width: 50vw`
   on the panel plus 48px of side padding rendered at 55% of the window. */
.fdm-talk,
.fdm-talk *,
.fdm-talk *::before,
.fdm-talk *::after {
	box-sizing: border-box;
}

/* ── The pill ─────────────────────────────────────────── */

.fdm-talk__pill {
	position: fixed;
	right: clamp(14px, 2.5vw, 28px);
	bottom: clamp(14px, 2.5vw, 28px);
	z-index: var(--tk-z);

	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 10px 30px 10px 12px;
	max-width: min(92vw, 460px);

	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
	color: var(--tk-ink);
	cursor: pointer;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.fdm-talk__pill:hover,
.fdm-talk__pill:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.46);
}
.fdm-talk__pill:focus-visible {
	outline: 2px solid var(--tk-gold);
	outline-offset: 3px;
}

/* The two faces overlap, so the second is pulled back over the first. */
.fdm-talk__faces {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.fdm-talk__face {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #2a2a2a;
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.fdm-talk__face + .fdm-talk__face { margin-left: -12px; }

.fdm-talk__pill-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--tk-ink);
}

/* ── The panel ────────────────────────────────────────────
 *
 * Full screen, not a drawer. The design is a wide two-up grid of cards with a
 * 92px headline over it; squeezed into a 460px rail it became three cramped
 * rows in a column and stopped being the design at all. It is also why the
 * thing looked small: it was.
 * ─────────────────────────────────────────────────────── */

.fdm-talk__scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--tk-z) + 1);
	background: rgba(0, 0, 0, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: fdmTalkFade 200ms ease both;
}

.fdm-talk__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: calc(var(--tk-z) + 2);

	/* The right half. min-width keeps it from becoming a ribbon on a small
	   laptop; below 1024 it takes the whole width instead (further down). */
	width: 50vw;
	min-width: 420px;

	/* A column: the bar holding the close button does not move, and the body
	   under it scrolls. Scrolling the whole panel took the only way out with
	   it. */
	display: flex;
	flex-direction: column;
	overflow: hidden;

	padding: clamp(18px, 2.2vw, 32px) clamp(20px, 2.8vw, 48px) 0;

	background: var(--tk-ground);
	border-left: 1px solid rgba(228, 175, 84, 0.22);
	box-shadow: -30px 0 60px rgba(0, 0, 0, 0.5);
	color: var(--tk-ink);
	animation: fdmTalkSlide 280ms cubic-bezier(0.22, 0.8, 0.28, 1) both;

	/* Every size below is a share of the PANEL, not of the window.
	 * This is the whole trick to a half-width panel not looking like the
	 * 460px rail: a 4.8vw headline is 69px at a 1440 window, which inside a
	 * 720px panel is a headline three words wide. Sized against the panel it
	 * lands at about 40px, and the card grid can also decide its own column
	 * count from the room it actually has rather than from the window.
	 *
	 * Each rule states a px value first and the container-relative one
	 * second, so a browser without container queries keeps a sensible fixed
	 * size instead of dropping an invalid declaration and inheriting. */
	container-type: inline-size;
	container-name: fdmtalk;
}

/* The slide carries a large piece of gold artwork off the top right corner.
   That asset is not in the plugin, so the corner is warmed with a wash in the
   same colour rather than left flat or filled with a stand-in. */
.fdm-talk__panel::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: min(420px, 70%);
	aspect-ratio: 1;
	background: radial-gradient(circle at 72% 22%, rgba(228, 175, 84, 0.16), rgba(228, 175, 84, 0) 66%);
	pointer-events: none;
	z-index: 0;
}

.fdm-talk__bar {
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	margin-bottom: clamp(6px, 1.4cqw, 14px);
}

.fdm-talk__body {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	z-index: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* The panel's own bottom padding would sit outside the scroller, so the
	   last card would end flush against the edge. */
	padding-bottom: clamp(24px, 3.4vw, 48px);
}

.fdm-talk__inner {
	position: relative;
	max-width: 1700px;
	margin: 0 auto;
	/* A column of a definite height, so the list of people can be handed the
	   room left under the heading rather than being as tall as its contents
	   want. It has to be `height`, not `min-height`: a grid row of `1fr`
	   resolves against a definite height and silently falls back to
	   max-content without one, which looks exactly like the rule not applying.
	   The body still scrolls, so content that genuinely does not fit (a short
	   screen, see the media query further down) overflows rather than being
	   crushed. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fdm-talk__head {
	margin-bottom: 26px;
	margin-block-end: clamp(22px, 4cqw, 40px);
}

.fdm-talk__eyebrow {
	display: block;
	margin: 0 0 14px;
	margin-block-end: clamp(10px, 2.2cqw, 22px);
	font-family: var(--tk-mono);
	font-size: 13px;
	font-size: clamp(11px, 2cqw, 18px);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--tk-gold);
}

.fdm-talk .fdm-talk__heading {
	margin: 0;
	padding: 0;
	font-family: var(--tk-sans);
	font-size: 40px;
	font-size: clamp(26px, 6.2cqw, 64px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.98;
	color: var(--tk-ink);
	text-transform: none;
}
.fdm-talk__intro {
	margin: 14px 0 0;
	padding: 0;
	max-width: 60ch;
	font-size: 15px;
	font-size: clamp(13px, 2.3cqw, 19px);
	font-weight: 300;
	line-height: 1.4;
	color: var(--tk-muted);
}

.fdm-talk__close {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(228, 175, 84, 0.45);
	border-radius: 50%;
	color: var(--tk-gold);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.18s ease, border-color 0.18s ease;
}
.fdm-talk__close:hover,
.fdm-talk__close:focus-visible {
	background: rgba(228, 175, 84, 0.12);
	border-color: var(--tk-gold);
}
/* Focus lands here when the panel opens, so the ring is seen every single
   time. The browser default is a blue that belongs to no part of this. */
.fdm-talk__close:focus-visible {
	outline: 2px solid var(--tk-gold);
	outline-offset: 3px;
}
.fdm-talk .fdm-talk__cta:focus-visible {
	outline: 2px solid var(--tk-gold);
	outline-offset: 3px;
	border-radius: 2px;
}
.fdm-talk__close svg {
	width: 44%;
	height: 44%;
	display: block;
}

/* ── The cards ───────────────────────────────────────── */

.fdm-talk__people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* One column until the panel has room for two. Keyed off the container, so
	   it never depends on the window: the same panel is half a 2560 monitor and
	   the whole of a phone.
	   The card no longer cares how many columns there are, because it is its
	   own container now and picks its own shape from the room it is given, so
	   this threshold is about the list and nothing else. */
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	gap: clamp(12px, 2.4cqw, 22px);
}
/* The cell exists to be the card's container.
 *
 * Everything inside the card used to be a share of the PANEL's width, which is
 * right while there is one column and wrong the moment there are two: the
 * column halves and the type does not, so a 16px role label lands in a 190px
 * column and reads as three lines of shouting. Sized against the cell instead,
 * the card works at any column count.
 *
 * It is a separate element because a container query styles the container's
 * DESCENDANTS and never the container itself, so the card cannot both declare
 * the containment and answer to it. */
.fdm-talk__cell {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	min-width: 0;
	container-type: inline-size;
	container-name: fdmcard;
}
.fdm-talk__person {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
	/* The photograph is height:100% of the card, so with a one-line biography
	   the card would collapse to the height of its own text and the portrait
	   would be cropped to a letterbox. */
	min-height: 170px;

	background: var(--tk-card);
	border: 1px solid var(--tk-card-line);
	border-radius: 14px;
	overflow: hidden;
}
.fdm-talk__photo {
	flex: none;
	/* The design's 250-in-837, held as a share of the card so it stays right
	   at any panel width. */
	width: 30%;
	min-width: 92px;
	max-width: 250px;
	height: auto;
	align-self: stretch;
	object-fit: cover;
	object-position: center 22%;
	display: block;
	background: #181818;
}
.fdm-talk__who {
	display: flex;
	flex-direction: column;
	gap: 8px;
	gap: clamp(6px, 2.7cqw, 12px);
	min-width: 0;
	padding: 18px 20px;
	padding: clamp(14px, 5.7cqw, 28px) clamp(16px, 6.5cqw, 32px);
}

/* The job title, under the name, in the quiet treatment.
 *
 * It used to be the eyebrow. The fund has that now: a visitor choosing
 * between six faces is choosing a fund rather than an org chart, so the
 * loudest line on the card should answer the question they arrived with. What
 * swapped is the treatment; the class names still mean what they say. */
.fdm-talk__role {
	font-family: var(--tk-sans);
	font-size: 13.5px;
	font-size: clamp(12px, 3.9cqw, 16px);
	font-weight: 400;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.72);
	text-transform: none;
	letter-spacing: 0;
}
.fdm-talk .fdm-talk__name {
	font-family: var(--tk-sans);
	font-size: 24px;
	font-size: clamp(19px, 7.2cqw, 34px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--tk-ink);
}
/* The fund, on top, in gold small caps: the line that answers what somebody
   came to this panel with. Two fund names fit on two lines; a third would be a
   fund list rather than a card, and gets clamped. */
.fdm-talk__funds,
.fdm-talk__booking-funds {
	font-family: var(--tk-mono);
	font-size: 12px;
	font-size: clamp(10px, 3.6cqw, 16px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--tk-gold);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.fdm-talk__booking-funds[hidden] { display: none !important; }

.fdm-talk__bio {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-size: clamp(13px, 4.4cqw, 19px);
	font-weight: 300;
	line-height: 1.4;
	color: var(--tk-muted);
}

/* Pushed to the bottom of the card so the links line up across a row whatever
   the biographies do. */
.fdm-talk .fdm-talk__cta {
	margin-top: auto;
	padding: 0;
	align-self: flex-start;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	font-size: clamp(13px, 4.4cqw, 19px);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--tk-gold);
	text-decoration: none;
	transition: color 0.18s ease;
}
/* "Coming soon", where the booking link goes.
 *
 * The same place and the same weight as the link it stands in for, so a row of
 * cards does not go ragged, and deliberately not gold: gold is what can be
 * pressed on this panel, and this cannot. No hover, no cursor, no arrow. */
.fdm-talk__soon {
	margin-top: auto;
	align-self: flex-start;
	font-size: 15px;
	font-size: clamp(13px, 4.4cqw, 19px);
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.45);
}

/* The arrow is drawn, not typed, so it cannot be edited away or doubled up in
   the admin field, and it nudges on hover. */
.fdm-talk .fdm-talk__cta::after {
	content: "\00a0\2192";
	display: inline-block;
	transition: transform 0.18s ease;
}
.fdm-talk .fdm-talk__cta:hover,
.fdm-talk .fdm-talk__cta:focus-visible {
	color: var(--tk-gold-lit);
	text-decoration: none;
}
.fdm-talk .fdm-talk__cta:hover::after,
.fdm-talk .fdm-talk__cta:focus-visible::after {
	transform: translateX(4px);
}

/* ── Booking, in place ───────────────────────────────────
 *
 * The panel does NOT change width for this, and used to.
 *
 * The widening was for the iframe: a third-party scheduler given half a window
 * renders a column of times with no month beside it. The picker is ours now and
 * lays itself out to whatever room it has, so the extra width bought nothing
 * except a panel that jumped a foot wider and then sat with an empty right
 * half. One width for both screens, and the person and the calendar stack or
 * sit side by side according to the room, which the container query below
 * decides.
 * ─────────────────────────────────────────────────────── */

.fdm-talk__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 clamp(16px, 3cqw, 26px);
	padding: 8px 16px 8px 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(228, 175, 84, 0.28);
	border-radius: 999px;
	color: var(--tk-gold);
	font-family: var(--tk-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.18s ease, border-color 0.18s ease;
}
.fdm-talk__back:hover,
.fdm-talk__back:focus-visible {
	background: rgba(228, 175, 84, 0.14);
	border-color: var(--tk-gold);
}
.fdm-talk__back:focus-visible {
	outline: 2px solid var(--tk-gold);
	outline-offset: 3px;
}
.fdm-talk__back svg { width: 15px; height: 15px; display: block; }

.fdm-talk__booking-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(16px, 3cqw, 30px);
	align-items: start;
}

.fdm-talk__booking-person {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.fdm-talk__booking-photo {
	width: 92px;
	height: 92px;
	margin-bottom: 6px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
	background: #181818;
	border: 2px solid rgba(228, 175, 84, 0.45);
}
.fdm-talk .fdm-talk__booking-name {
	font-family: var(--tk-sans);
	font-size: 24px;
	font-size: clamp(20px, 3cqw, 30px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--tk-ink);
}
/* The person's own eyebrow and role reuse the card's classes, so the type
   matches without a second set of rules; only the spacing differs here.
   The role's SIZE does differ, because a card's type is a share of its cell
   and this column is a share of the panel: 1.9cqw here is the same physical
   size as the card's 3.9cqw. It belongs in this block rather than beside the
   card's rules, where tests/talk-card-container.test.js reads every cqw value
   as a card figure and fails on one this small. */
.fdm-talk__booking-person .fdm-talk__eyebrow { margin: 0; }
.fdm-talk__booking-person .fdm-talk__role {
	font-size: 14.5px;
	font-size: clamp(13px, 1.9cqw, 15.5px);
}
/* The fund, above the name, exactly as on the card. */
.fdm-talk__booking-person .fdm-talk__booking-funds { margin: 8px 0 2px; }

/* The biography, in full, on the one screen with room for it.
 *
 * Held to a measure rather than the column: this sits in a 260px rail on a
 * wide panel and takes the whole width on a phone, where a full-width
 * paragraph over a booking form is a wall. */
.fdm-talk__booking-bio {
	margin: 6px 0 0;
	padding: 0;
	max-width: 46ch;
	font-size: 14px;
	font-size: clamp(13px, 1.9cqw, 15.5px);
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

.fdm-talk__booking-cal {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.fdm-talk .fdm-talk__booking-heading {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--tk-sans);
	font-size: 22px;
	font-size: clamp(18px, 3.2cqw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--tk-ink);
	text-transform: none;
}
/* What kind of call this is. Above the times, in the muted colour the
   biography uses, because it is the same register: a fact about the thing
   being chosen rather than a heading or an instruction. */
/* Two paragraphs now, so they need space between them rather than only under
   the pair. The negative top margin stays on the first one alone, where it is
   closing the gap under the heading. */
.fdm-talk__booking-note + .fdm-talk__booking-note { margin-top: -6px; }
.fdm-talk__booking-note {
	margin: -4px 0 14px;
	padding: 0;
	max-width: 52ch;
	font-size: 14px;
	font-size: clamp(13px, 1.9cqw, 15px);
	font-weight: 300;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

/* The frame and its stand-in share a stacking context, so the skeleton sits
   under the calendar rather than pushing it down the page. */
.fdm-talk__frame-wrap {
	position: relative;
	width: 100%;
}
.fdm-talk__skeleton {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 26px;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
}
.fdm-talk__skeleton-bar,
.fdm-talk__skeleton-grid span {
	display: block;
	background: #ecedf1;
	animation: fdmTalkPulse 1.4s ease-in-out infinite;
}
.fdm-talk__skeleton-bar {
	height: 16px;
	margin-bottom: 12px;
	border-radius: 6px;
}
.fdm-talk__skeleton-bar + .fdm-talk__skeleton-bar { height: 12px; margin-bottom: 26px; }
.fdm-talk__skeleton-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	max-width: 420px;
}
.fdm-talk__skeleton-grid span {
	aspect-ratio: 1;
	border-radius: 50%;
}
@keyframes fdmTalkPulse {
	0%, 100% { opacity: 1 }
	50%      { opacity: 0.45 }
}

.fdm-talk__frame {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Calendly needs real height or it renders its own internal scrollbar. The
	   panel is full-height and fixed, so this is what is left after the back
	   button and the heading. */
	height: clamp(560px, calc(100vh - 260px), 900px);
	display: block;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
}

/* Side by side once there is room, stacked when there is not. At the panel's
   own 50vw that means one column on a laptop and two on a large monitor, which
   is the same rule the list of people follows. */
@container fdmtalk (min-width: 780px) {
	.fdm-talk__booking-grid {
		grid-template-columns: 260px minmax(0, 1fr);
	}
	.fdm-talk__booking-person {
		position: sticky;
		top: 0;
	}
}

/* ── The panel decides for itself ──────────────────────
 * Both of these are about the room inside the panel, which is why they are
 * container queries and not media queries: the same panel is half a 2560
 * monitor and the whole of a phone, and the window cannot tell them apart.
 */
@container fdmtalk (min-width: 560px) {
	/* Two-up as soon as the panel can hold two cards, which is a long way
	   before it is a "wide monitor": this lands at about a 1220px window, where
	   the panel's 50vw leaves 560px of content. It waited for 900px of content
	   (a 1900px window) because a narrow column used to squeeze a row card, and
	   the card takes care of that itself now. Six people in one column is a
	   scroll nobody finishes.
	   Note the number is the panel's CONTENT box, which is its 50vw less about
	   96px of padding, so it is reached later than the panel's own width. */
	.fdm-talk__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container fdmcard (max-width: 430px) {
	/* A portrait beside a role, a name and a biography leaves the type in a
	   column two words wide, so the card stops being a row and becomes a
	   poster: photograph on top, everything else under it.
	   Asked of the CARD, not the panel, so it is true whether the card is
	   narrow because the phone is narrow or because it is one of two columns. */
	.fdm-talk__person {
		flex-direction: column;
		min-height: 0;
	}
	.fdm-talk__photo {
		width: 100%;
		min-width: 0;
		max-width: none;
		aspect-ratio: 16 / 10;
		align-self: auto;
		object-position: center 20%;
	}
	/* Takes the rest of the card, so the CTA's margin-top:auto still reaches
	   the bottom and the links line up across a row of poster cards the way
	   they do across a row of wide ones. Without this the text block is only
	   as tall as its own copy and the links land wherever the biographies end. */
	.fdm-talk__who { flex: 1 1 auto; }
}
@container fdmtalk (max-width: 430px) {
	.fdm-talk__eyebrow { letter-spacing: 0.22em; }
}

/* ── all of them, at once ──────────────────────────────
 *
 * Six people were three screens of scrolling, and a list you have to scroll to
 * see the fourth face is a list where the fourth face does not exist. So past
 * four people the grid stops sizing itself to its contents and sizes itself to
 * the room: two columns, and rows that share the height left under the
 * heading. The photograph is what absorbs the difference, because it is the
 * only part of a card that can lose half its height and still do its job.
 *
 * Two up on a phone as well. A single column of six is the same problem in a
 * narrower shape.
 * ─────────────────────────────────────────────────────── */
.fdm-talk__people.is-fit {
	flex: 1 1 auto;
	min-height: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
}
/* Three across once the panel is genuinely wide, and only in fit mode. Six
   people are then two rows rather than three, and a taller card is what buys
   back the biography. Outside fit mode two across stays right: four people in
   threes leaves one on its own.
   It has to sit after the two-column rule above, not with the other container
   queries further up: both selectors carry the same weight, so the later one
   wins, and up there the later one was the two. */
@container fdmtalk (min-width: 900px) {
	.fdm-talk__people.is-fit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fdm-talk__people.is-fit .fdm-talk__person {
	/* The 170px floor is for a card sized by its contents. Here the row has a
	   definite height and the floor would push past it, which is the scroll
	   this is removing. */
	min-height: 0;
}
.fdm-talk__people.is-fit .fdm-talk__photo {
	/* Shrinkable, and no fixed ratio: the crop gives up height first.
	   flex-basis 42% is a starting share rather than a size, so a tall panel
	   spends the extra on the portrait and a short one on the words.
	   The floor is where a portrait stops being one: below about 64px a
	   headshot cropped to the width of a phone column is a strip of forehead.
	   Something else gives way instead, further down. */
	flex: 1 1 52%;
	/* Two floors, and the percentage is the one that matters: 64px stops a
	   portrait becoming a strip of forehead, and 44% of the card stops the
	   words from taking a card that is meant to be about a face. The poster is
	   a phone shape now, where the cell is nearly square, so the face can have
	   more of it than it could when this had to cover wide cards too. */
	min-height: max(64px, 44%);
	height: auto;
	aspect-ratio: auto;
	align-self: auto;
}
.fdm-talk__people.is-fit .fdm-talk__who {
	/* Shrinkable, and that is not a detail. `flex: 0 0 auto` in the poster
	   direction reads as "as tall as its words", which is what is wanted; in
	   the row direction the same declaration means "as WIDE as its words", and
	   the role ran straight out of the side of the card. */
	flex: 0 1 auto;
	min-width: 0;
	min-height: 0;
	padding: clamp(10px, 4.5cqw, 22px) clamp(12px, 5cqw, 26px);
	gap: clamp(4px, 2cqw, 10px);
}
/* Two lines of role and then an ellipsis. A card in a grid that fits cannot
   also be as tall as its longest job title. */
/* The role is clamped; the biography is not.
 *
 * A biography cut off mid-sentence reads as a fault, and its ellipsis
 * promises somewhere to press for the rest that does not exist, so it is set
 * small enough to fit whole and hidden where it will not.
 *
 * A job title is different in kind: it can be abbreviated and still do its
 * job. But two lines was too mean for the titles this panel actually holds.
 * 'Solving Hunger & Joblessness Fund Manager' and 'Solving the Evangelism Gap
 * Fund Manager' were both cut mid-word, and the role is the one line a
 * visitor reads to decide whether this is the right person to talk to.
 *
 * So: two lines on a card with no room, three on a card with some. Keyed on
 * the card's own height, like the biography below it. */
.fdm-talk__people.is-fit .fdm-talk__funds {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Three, not two, and it is the treatment that decided that. The same
	   words in gold mono caps at 0.16em are half again as wide as they were in
	   the sans: 'Solving Bible Translation & Bible Access Funds' fitted two
	   lines as a quiet line under the name and needs three as the eyebrow.
	   There is room for the third, because the job title that used to sit here
	   is now the line that gives way. */
	-webkit-line-clamp: 3;
	/* And a little tighter than the wide-card tracking. 0.16em is a display
	   value; on a 331px card it is what pushes a fund name onto a fourth
	   line. */
	letter-spacing: 0.1em;
	/* Not shrinkable. The clamp says how many lines this line may have; the
	   flex column was then squeezing the box below that, so a fund name inside
	   its budget still lost its last line, and which card it happened to
	   depended on how the rest of that card's content rounded. The clamp is
	   the only thing allowed to decide. */
	flex: 0 0 auto;
}

/* The type stops growing with the card.
 *
 * Every size in a card is a share of the card's width, which is right when a
 * card is as tall as it needs to be and wrong for a fitted one: a 592 by 164
 * cell got a 34px name, which is both shouty and the reason there was no room
 * left for a biography. Capped, the same card fits a face, a role, a name, two
 * lines and a link. */
.fdm-talk__people.is-fit .fdm-talk__funds { font-size: clamp(10px, 3.6cqw, 13px); }

/* Where caps are unaffordable, the fund line drops the treatment and keeps
 * the colour.
 *
 * Gold mono caps at 0.16em costs about 40% more width than the sans for the
 * same words. On a card with a real column that buys emphasis; on a 169px
 * phone card, or a short card whose text sits in a 180px strip beside the
 * portrait, it buys a fourth line and an ellipsis in the middle of a fund's
 * name. The name matters more than the styling of it, so below those sizes it
 * is set in the sans and stays gold, which is still plainly the top line.
 *
 * Two blocks rather than one: @container takes no comma list. */
@container fdmcard (max-width: 299px) {
	.fdm-talk__people.is-fit .fdm-talk__funds {
		font-family: var(--tk-sans);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		line-height: 1.28;
	}
}
@container fdmcard (max-height: 164px) {
	.fdm-talk__people.is-fit .fdm-talk__funds {
		font-family: var(--tk-sans);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		line-height: 1.28;
	}
}
.fdm-talk__people.is-fit .fdm-talk__name { font-size: clamp(17px, 7.2cqw, 25px); }
.fdm-talk__people.is-fit .fdm-talk__soon,
.fdm-talk__people.is-fit .fdm-talk__cta { font-size: clamp(12px, 4.4cqw, 15px); }
/* Smaller than the rest of the card and white rather than grey: it is the only
   full sentence on a fitted card, so it needs the size to fit and the contrast
   to be worth reading at that size. */
.fdm-talk__people.is-fit .fdm-talk__bio {
	font-size: 12.5px;
	line-height: 1.42;
	color: #fff;
	/* A backstop, not the plan. These biographies run to about 140 characters,
	   which is four or five lines in the column a card wide enough to show one
	   leaves, and the height threshold below is set so that fits whole. Five
	   lines is where a much longer one gets stopped, because the alternative is
	   pushing the booking link out of the bottom of the card. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

/* In fit mode the cell's height comes from the grid rather than from what is
   in it, so it can be asked about: `container-type: size` is safe here and
   nowhere else. Outside fit mode the same declaration would make the cell
   ignore its own contents and collapse.
   That is what lets the biography be a matter of whether there is room. */
.fdm-talk__people.is-fit .fdm-talk__cell { container-type: size; }

/* The job title in a fitted card, and it is the line that gives way now.
 *
 * The order of precedence changed with the treatments. Which fund somebody
 * runs is the question a visitor is choosing between six faces to answer, so
 * that line is always drawn; the job title is the one that earns its place,
 * along with the biography below it.
 *
 * It has to earn it, because the column is a flex column and two extra lines
 * in a 128px card do not make the card taller, they squeeze what is above
 * them. Drawing this unconditionally cut the FUND on four of six cards at
 * 720px, which is the line the card exists to carry. */
.fdm-talk__people.is-fit .fdm-talk__role {
	display: none;
	font-size: 12.5px;
	line-height: 1.32;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Height AND width. A 169px card has the height for two more lines and not
   the column. */
@container fdmcard (min-height: 165px) and (min-width: 300px) {
	.fdm-talk__people.is-fit .fdm-talk__role { display: -webkit-box; }
}

/* The biography is off, and earns its place back on a card tall enough to
   carry it. On a phone two up there is room for a face, a role and a way in,
   and that is the whole job; a third of a sentence is worse than none.
   Photograph first, always: a card whose portrait has been squeezed to nothing
   to make room for prose is not a card about a person. */
.fdm-talk__people.is-fit .fdm-talk__bio { display: none; }
/* Where a whole one fits.
 *
 * Beside the photograph the words have the card's full height, and these
 * biographies run to about 140 characters, which is four lines in the column a
 * card of this width leaves. 215px is the height that holds a two-line role, a
 * name, four lines and the link with nothing clipped. Below that the card
 * carries the face, the role, the name and the way in, and no sentence.
 */
@container fdmcard (min-width: 340px) and (min-height: 230px) {
	.fdm-talk__people.is-fit .fdm-talk__bio { display: -webkit-box; }
}
/* Under the photograph they compete with it for the same height and the
   portrait has first claim, so it takes a much taller card. */
@container fdmcard (min-height: 320px) and (min-width: 300px) {
	.fdm-talk__people.is-fit .fdm-talk__bio { display: -webkit-box; }
}

/* The last thing to give way on a small phone.
 *
 * Two up on a 667px screen leaves a card about 130px tall, and a face with a
 * floor, a name and a way in already fill it. The fund line is what goes at
 * that size, which is the same decision as before under a different name: it
 * is the longest line on the card, it is two lines at that width, and the
 * panel's own heading has already said these are the people to talk to. The
 * job title is gone by then anyway, hidden by its own threshold well above
 * this one.
 * Only in the tall shape. A wide short card has the room beside its portrait
 * and keeps everything. */
@container fdmcard (max-height: 150px) and (max-width: 259px) {
	.fdm-talk__people.is-fit .fdm-talk__funds,
	.fdm-talk__people.is-fit .fdm-talk__role { display: none; }
}

/* Sideways on anything but a phone column.
 *
 * A poster puts the photograph across the full width and gives it a share of
 * the height, so the wider the card the flatter the crop: a 372 by 235 cell
 * produced a 372 by 110 letterbox, which cuts a headshot off above the
 * forehead and below the chin. Beside the words instead, the portrait takes
 * the card's whole height at a third of its width, which is a portrait shape
 * at every card size.
 *
 * So the threshold is width, and it is low: 260px. Everything above it has
 * room for a column of type beside a face. Below it a row would leave the
 * photograph 90px wide and the words in a gutter, so the poster is right,
 * and there the card is nearly square, which is the one proportion a poster
 * crops well.
 *
 * This was briefly keyed on the card's aspect ratio instead, to catch a wide
 * short card. It caught that and missed this: 372 by 235 is 1.58, just inside
 * "taller than 8:5", and still far too wide to put a face across. */
@container fdmcard (min-width: 260px) {
	.fdm-talk__people.is-fit .fdm-talk__person { flex-direction: row; }
	.fdm-talk__people.is-fit .fdm-talk__photo {
		flex: none;
		/* A shade wider than the design's 30%, because a fitted card is shorter
		   than the design's was and 30% of it is a narrow vertical slice. */
		width: 34%;
		min-width: 92px;
		max-width: 240px;
		height: auto;
		min-height: 0;
		align-self: stretch;
		aspect-ratio: auto;
	}
}
/* Below this a fitted grid would be a row of thumbnails with three words each,
   so it goes back to being a list and the body scrolls again. Legible and
   scrolled beats complete and unreadable. */
@media (max-height: 560px) {
	.fdm-talk__people.is-fit {
		flex: none;
		grid-auto-rows: auto;
	}
	/* Back to a cell sized by its contents, so the containment above has to go
	   with it: a cell that ignores its contents and has no row height to fall
	   back on collapses to nothing. */
	.fdm-talk__people.is-fit .fdm-talk__cell { container-type: inline-size; }
	.fdm-talk__people.is-fit .fdm-talk__photo {
		flex: none;
		aspect-ratio: 16 / 10;
	}
	.fdm-talk__people.is-fit .fdm-talk__bio { display: none; }
}

/* The one thing that IS about the window: below this there is no room to show
   half a page beside the panel worth showing, and half of it would be a
   420px rail, so the panel takes the lot. */
@media (max-width: 1024px) {
	.fdm-talk__panel {
		width: 100vw;
		min-width: 0;
		border-left: 0;
	}
}
@media (max-width: 560px) {
	.fdm-talk__pill { gap: 12px; padding: 9px 20px 9px 10px; }
	.fdm-talk__pill-text { font-size: 15px; }
}

/* ── the picker ────────────────────────────────────────
 *
 * Calendly's availability, drawn in the panel's own type instead of framed.
 * Everything here sits on the dark card rather than on the white sheet the
 * iframe needs, which is most of the point: the visitor never crosses a seam.
 *
 * Sized in cqw against the panel, like the rest of the booking view, so the
 * same markup works at half a laptop window and at a phone's full width.
 * ─────────────────────────────────────────────────────── */

.fdm-talk__pick {
	display: block;
	width: 100%;
}

.fdm-talk__pick-load {
	display: block;
	padding: 4px 0 0;
}
.fdm-talk__pick-load .fdm-talk__skeleton-bar {
	background: rgba(255, 255, 255, 0.08);
}

.fdm-talk__pick-body { display: block; }

/* The days. A row that scrolls sideways rather than a month grid: three weeks
   of open days is the useful set, and a calendar month is mostly greyed out
   squares. */
.fdm-talk__days {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin-bottom: clamp(14px, 2.4cqw, 22px);
	/* Capped, so this reads as a column of times beside the person rather than
	   sprawling the full width of an opened panel. */
	max-width: 660px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.fdm-talk__day {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 74px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
	color: var(--tk-ink);
	font-family: var(--tk-sans);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.16s ease, border-color 0.16s ease;
}
.fdm-talk__day:hover { background: rgba(255, 255, 255, 0.08); }
.fdm-talk__day.is-on {
	background: rgba(228, 175, 84, 0.16);
	border-color: var(--tk-gold);
}
.fdm-talk__day-wd {
	font-family: var(--tk-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tk-muted);
}
.fdm-talk__day.is-on .fdm-talk__day-wd { color: var(--tk-gold); }
.fdm-talk__day-n {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

/* The times. Auto-fill rather than a fixed column count: a day with three
   slots should not leave four empty cells, and a day with twenty should not
   become one long column. */
.fdm-talk__times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	max-width: 660px;
}
.fdm-talk__time {
	padding: 12px 10px;
	background: transparent;
	border: 1px solid rgba(228, 175, 84, 0.34);
	border-radius: 10px;
	color: var(--tk-ink);
	font-family: var(--tk-sans);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.fdm-talk__time:hover {
	background: rgba(228, 175, 84, 0.14);
	border-color: var(--tk-gold);
}
.fdm-talk__time.is-on {
	background: var(--tk-gold);
	border-color: var(--tk-gold);
	color: #1a1206;
}
.fdm-talk__day:focus-visible,
.fdm-talk__time:focus-visible,
.fdm-talk__confirm:focus-visible,
.fdm-talk__form-back:focus-visible {
	outline: 2px solid var(--tk-gold);
	outline-offset: 3px;
}

.fdm-talk__pick-error {
	display: block;
	margin: 4px 0 0;
	font-family: var(--tk-sans);
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}
.fdm-talk__retry {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	color: var(--tk-gold);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.fdm-talk__retry:hover { color: var(--tk-gold-lit); }
.fdm-talk__retry:focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 3px; }

.fdm-talk__pick-zone {
	margin: 14px 0 0;
	font-family: var(--tk-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--tk-muted);
}

/* The form. Two fields and whatever the host asks for, under the time they
   chose, so the thing they picked stays on screen while they type. */
.fdm-talk__form {
	display: block;
	margin-top: clamp(16px, 2.6cqw, 24px);
	padding-top: clamp(16px, 2.6cqw, 24px);
	border-top: 1px solid var(--tk-card-line);
}
.fdm-talk__form-when {
	margin: 0 0 16px;
	font-family: var(--tk-sans);
	font-size: clamp(15px, 2.1cqw, 18px);
	font-weight: 700;
	color: var(--tk-gold);
}
.fdm-talk__field {
	display: block;
	margin-bottom: 14px;
}
.fdm-talk__field > span {
	display: block;
	margin-bottom: 6px;
	font-family: var(--tk-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tk-muted);
}
.fdm-talk__field input,
.fdm-talk__field textarea,
.fdm-talk__field select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	/* A name field the width of an opened panel looks like a mistake. box-sizing
	   is stated above for the same reason it is stated everywhere in this repo:
	   14px of padding on a 100% width is 100% plus 28px. */
	max-width: 460px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: var(--tk-ink);
	font-family: var(--tk-sans);
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.fdm-talk__field select {
	/* A native select on a dark ground draws its own list in the platform's
	   colours, which is correct: the list is the browser's, not ours. */
	background-image: none;
}

/* ── Who the call is for ────────────────────────────────────────────────
   The screening question, first in the form and marked as the one that is
   not admin: gold on the label and a hairline above it, so it reads as a
   question being asked rather than a field being collected. */
.fdm-talk__screen {
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fdm-talk__screen > span { color: var(--tk-gold); }
/* The sentence that appears when somebody picks an answer these calls are not
   for. Said quietly: it is a redirection, not a rejection, and the booking
   still goes through underneath it. */
.fdm-talk__screen-note {
	margin: -6px 0 14px;
	padding: 10px 12px;
	max-width: 460px;
	background: rgba(228, 175, 84, 0.08);
	border: 1px solid rgba(228, 175, 84, 0.28);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
	text-wrap: pretty;
}
.fdm-talk__screen-note[hidden] { display: none; }

/* The form when the answer has stopped the booking. It still asks for a name
   and an email, so it has to stay legible as a form; what changes is the
   button, which stops looking like the one that takes a time. Outlined rather
   than solid gold: sending your details to somebody is a smaller act than
   putting a meeting in their diary, and the button should not overclaim. */
/* The optional box, only ever seen by somebody who has just been turned away.
   Directly under the sentence rather than at the end of the form, because the
   sentence is what asks for it: "tell us who you have in mind below" has to
   point at something. */
.fdm-talk__screen-more[hidden] { display: none; }

.fdm-talk__form.is-blocked .fdm-talk__confirm {
	background: transparent;
	color: var(--tk-gold);
}
.fdm-talk__field input:focus,
.fdm-talk__field textarea:focus,
.fdm-talk__field select:focus {
	outline: 2px solid var(--tk-gold);
	outline-offset: 1px;
	border-color: var(--tk-gold);
}
.fdm-talk__field input::placeholder,
.fdm-talk__field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }

.fdm-talk__form-error {
	margin: 0 0 14px;
	font-family: var(--tk-sans);
	font-size: 13.5px;
	line-height: 1.45;
	color: #f0a8a0;
}

.fdm-talk__form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}
.fdm-talk__confirm {
	padding: 14px 30px;
	background: var(--tk-gold);
	border: 1px solid var(--tk-gold);
	border-radius: 999px;
	color: #1a1206;
	font-family: var(--tk-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: filter 0.18s ease;
}
.fdm-talk__confirm:hover { filter: brightness(1.06); }
.fdm-talk__confirm:disabled,
.fdm-talk__confirm.is-busy {
	opacity: 0.6;
	cursor: progress;
}
.fdm-talk__form-back {
	padding: 12px 4px;
	background: none;
	border: 0;
	color: var(--tk-muted);
	font-family: var(--tk-sans);
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.fdm-talk__form-back:hover { color: var(--tk-ink); }

/* Booked. The only screen in the panel that is an ending, so it gets room. */
.fdm-talk__done {
	display: block;
	padding: clamp(18px, 3cqw, 34px) 0 clamp(8px, 2cqw, 18px);
}
.fdm-talk__done-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(228, 175, 84, 0.16);
	color: var(--tk-gold);
}
.fdm-talk__done-tick svg { width: 22px; height: 22px; display: block; }
.fdm-talk__done-head {
	margin: 0 0 10px;
	font-family: var(--tk-sans);
	font-size: clamp(20px, 3.4cqw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--tk-ink);
}
.fdm-talk__done-when {
	margin: 0 0 12px;
	font-family: var(--tk-sans);
	font-size: clamp(15px, 2.2cqw, 19px);
	font-weight: 600;
	color: var(--tk-gold);
}
/* What they told the host, read back on the confirmation. A definition list,
   because that is what a label and a value are, laid out as rows. */
.fdm-talk__done-answers {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	margin: 0 0 18px;
	max-width: 44ch;
}
.fdm-talk__done-answers dt {
	margin: 0;
	font-family: var(--tk-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tk-muted);
	align-self: baseline;
}
.fdm-talk__done-answers dd {
	margin: 0;
	font-family: var(--tk-sans);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--tk-ink);
}
.fdm-talk__done .fdm-talk__eyebrow { display: block; margin-bottom: 10px; }

.fdm-talk__done-note {
	margin: 0;
	max-width: 46ch;
	font-family: var(--tk-sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--tk-muted);
}
.fdm-talk__done-link {
	display: inline-block;
	margin-top: 18px;
	color: var(--tk-gold);
	font-family: var(--tk-sans);
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Both the panel and the scrim are toggled with the `hidden` attribute, and
 * the panel sets a `display` value, which outranks the browser's own
 * [hidden] { display: none }. Without these the panel renders open on every
 * page load. The scrim happens not to set `display` and so would hide on its
 * own, but it is stated anyway: the next edit to add `display: block` there
 * should not be able to reintroduce this.
 *
 * Guarded by tests/talk-drawer-hidden.test.js. */
.fdm-talk__panel[hidden],
.fdm-talk__scrim[hidden],
.fdm-talk__booking[hidden],
.fdm-talk__inner[hidden],
.fdm-talk__skeleton[hidden],
.fdm-talk__pick[hidden],
.fdm-talk__pick-load[hidden],
.fdm-talk__pick-body[hidden],
.fdm-talk__pick-error[hidden],
.fdm-talk__retry[hidden],
.fdm-talk__frame-wrap[hidden],
.fdm-talk__form[hidden],
.fdm-talk__form-error[hidden],
.fdm-talk__done[hidden],
.fdm-talk__done-answers[hidden],
.fdm-talk__done-link[hidden],
.fdm-talk__booking-bio[hidden] {
	display: none !important;
}

/* Body scroll lock while the panel is up. Set on <html> by the script. */
.fdm-talk-locked,
.fdm-talk-locked body {
	overflow: hidden !important;
}

@keyframes fdmTalkFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes fdmTalkSlide {
	from { transform: translateX(100%); opacity: 0.5 }
	to   { transform: translateX(0);    opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
	.fdm-talk__pill,
	.fdm-talk .fdm-talk__cta,
	.fdm-talk .fdm-talk__cta::after,
	.fdm-talk__close { transition: none !important; }
	.fdm-talk__panel,
	.fdm-talk__scrim { animation: none !important; }
	.fdm-talk__skeleton-bar,
	.fdm-talk__skeleton-grid span { animation: none !important; }
	.fdm-talk__day,
	.fdm-talk__time,
	.fdm-talk__confirm { transition: none !important; }
	.fdm-talk__pill:hover { transform: none !important; }
	.fdm-talk .fdm-talk__cta:hover::after { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   The drawer as three lists
   ══════════════════════════════════════════════════════════════

   What was one grid of six cards is three headed lists, because a grid asks a
   visitor to work out which face answers the question they came with and a
   list can just tell them. One row per person: the portrait as a round avatar
   on the left at a size you can recognise a face at, the fund, the name, the
   job title and the line about them in a column, and the way in at the end.

   The is-fit grid rules above are left in place and are inert: nothing emits
   that class now. They are the way back if the lists turn out worse, and they
   carry the measurements behind six-on-one-screen, which took a while to get
   right and would be expensive to rediscover.
   ────────────────────────────────────────────────────────────── */

.fdm-talk__section {
	margin: 24px 0 10px;
	padding: 0;
	font-family: var(--tk-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
/* The first heading sits directly under the panel's own, which already has
   space below it. */
.fdm-talk__section:first-of-type { margin-top: 6px; }

.fdm-talk__people--list {
	/* A grid of rows, not a column of them.
	 *
	 * One row per line looked right in a 880px panel and wrong in the real
	 * one, which is far wider: a row stretched across it puts the name at the
	 * left edge and the way in at the right with a yard of nothing between,
	 * and six of those is a lot of scrolling to read six names. Two or three
	 * to a line closes the gap and puts the whole list on one screen again.
	 *
	 * auto-fill rather than a column count, so the number of columns follows
	 * the panel.
	 *
	 * 520px, and the number is measured. A row is three things across: an
	 * 84px portrait, the words, and the way in. At 360 the words got about
	 * 150px of it, so a two-word name wrapped, a job title took three lines
	 * and every row was 180px tall, which is the spread-out look this layout
	 * was meant to fix. At 520 the words get around 300px, the name and the
	 * title each fit a line, and a row is about 105px. A wide panel still gets
	 * two columns; a laptop-width one gets a single column of compact rows,
	 * which is better than two columns of tall ones. */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
	/* Column gap only. A vertical gap between hairline rows would leave the
	   rules floating with a gap under each; the rule is the separator. */
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* The grid version made every cell a query container. A row is as tall as
	   its own contents here, so there is nothing to ask and nothing to size
	   against: the type below is fixed rather than a share of a cell. */
}
.fdm-talk__people--list .fdm-talk__cell {
	container-type: normal;
	display: block;
	width: 100%;
}
/* One line, three things: the face, the words, the way in.
   A hairline under each row rather than a box around it, which is what makes
   six of these a list rather than six cards. */
.fdm-talk__people--list .fdm-talk__person {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas: "face who cta";
	align-items: center;
	gap: 0 18px;
	width: 100%;
	/* A floor rather than a height. Rows are as tall as their content and
	   their content varies by a line; without this a person whose fund name
	   fits one line sits noticeably shallower than the rest of the list.
	   88, down from 104, because the job title has gone and the tallest thing
	   in a row is now the avatar. */
	min-height: 88px;
	padding: 10px 4px 12px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 0;
	background: none;
	overflow: visible;
	transition: none;
}

/* The avatar. Round, and big enough to recognise somebody by: 84px is the
   size at which a headshot reads as a person rather than a thumbnail, and
   these crops are all framed on the face.
   
   min-width and max-width have to be reset, not just width. The card's own
   rule sizes the photograph as a share of the card and floors it with
   min-width: 92px, which beats any width set here: that is why the avatars
   rendered as 92 by 84 ovals rather than circles. A width alone is not an
   override when a minimum is in play. */
.fdm-talk__people--list .fdm-talk__photo {
	grid-area: face;
	flex: 0 0 auto;
	width: 72px;
	min-width: 0;
	max-width: none;
	height: 72px;
	min-height: 0;
	align-self: center;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	aspect-ratio: auto;
	border: 1px solid rgba(228, 175, 84, 0.35);
}

/* The words, and the line about them, in the SAME grid area.
 *
 * At rest a row is the fund, the name and the job title. Hovering it swaps
 * those for the line about the person: same row, same height, different
 * content, which is the point. Stacking them in one area rather than showing
 * and hiding is what keeps the height still: the area is as tall as the
 * taller of the two whichever is visible, so a cursor moving down the list
 * cannot make the list move under it.
 *
 * visibility rather than display, for the same reason. */
.fdm-talk__people--list .fdm-talk__who,
.fdm-talk__people--list .fdm-talk__bio {
	grid-area: who;
	min-width: 0;
	transition: opacity 140ms ease;
}
.fdm-talk__people--list .fdm-talk__who {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: auto;
	/* The card's own padding, cleared. It carried the card's inner spacing,
	   which in a row is 56px of nothing: rows measured 149px tall with 62px of
	   type in them until this was reset. The padding belongs to the row now,
	   not to the words inside it.
	   Its gap resets too, for the same reason the type sizes are fixed here:
	   both were shares of the cell, and a row is not a container, so a cqw
	   value resolves against the whole panel and comes out three times too
	   big. */
	padding: 0;
}

/* Fixed sizes, not shares of a container: the row is not a card and has no
   width worth sizing against. The order is the card's, and for its reason:
   the fund answers what somebody arrived with, the name is who they are, the
   title is what they do. */
.fdm-talk__people--list .fdm-talk__funds {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	-webkit-line-clamp: 2;
	line-height: 1.3;
}
.fdm-talk .fdm-talk__people--list .fdm-talk__name {
	font-size: 20px;
	line-height: 1.15;
}
/* No job title in a row.
 *
 * The fund line above the name already answers which fund, so 'Hunger &
 * Joblessness Fund Manager' under 'Zac Sicher' was the same fact in other
 * words, and it was the line holding the two remaining ones apart. Out, and
 * the row closes up.
 *
 * It is still on the person, still pushed to the giving page, and still on the
 * booking screen, which has a column to itself and a reason to name somebody's
 * job. This is about the row. */
.fdm-talk__people--list .fdm-talk__role { display: none; }
.fdm-talk__people--list .fdm-talk__bio {
	display: block;
	margin: 0;
	/* Two lines of this is the tallest a row gets, so it is what the floor is
	   set against. */
	/* Bigger than the job title it replaces, because it is a sentence being
	   read rather than a label being scanned, and it only appears when
	   somebody has asked for it by pointing at the row. */
	font-size: 16px;
	line-height: 1.45;
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.88);
	visibility: hidden;
	opacity: 0;
}

/* The swap. Keyed on the row, and on focus as well as hover, because the way
   in is the only focusable thing in a row and somebody arriving there by
   keyboard should see what they are about to book. */
@media (hover: hover) {
	.fdm-talk__people--list .fdm-talk__cell:hover .fdm-talk__who,
	.fdm-talk__people--list .fdm-talk__cell:focus-within .fdm-talk__who {
		visibility: hidden;
		opacity: 0;
	}
	.fdm-talk__people--list .fdm-talk__cell:hover .fdm-talk__bio,
	.fdm-talk__people--list .fdm-talk__cell:focus-within .fdm-talk__bio {
		visibility: visible;
		opacity: 1;
	}
}
/* No pointer, no swap, and no height reserved for a line nobody can ask for.
   The row is the fund, the name and the way in, which is the whole job on a
   touch screen. */
@media (hover: none) {
	.fdm-talk__people--list .fdm-talk__bio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fdm-talk__people--list .fdm-talk__who,
	.fdm-talk__people--list .fdm-talk__bio { transition: none; }
}

/* The way in, at the end of the row and level with the face, so it is in the
   same place in every row whatever the words in between are doing. */
.fdm-talk__people--list .fdm-talk__cta,
.fdm-talk__people--list .fdm-talk__soon {
	grid-area: cta;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	align-self: center;
	justify-self: end;
	font-size: 16px;
	white-space: nowrap;
}

/* ── one column ──
   Below 620 the row folds: an 84px avatar, a column of type and a link on the
   right do not fit a phone's width, and the first thing to give is the
   side-by-side. The avatar stays the same size, because shrinking the face is
   the one thing that makes the list worse. */
/* ── one column ──
   Below 620 the grid is one column anyway, since 420 plus the panel's padding
   no longer fits twice. What changes is the type and the line about somebody:
   the fund, the name and the way in are the row's whole job on a phone. */
@media (max-width: 620px) {
	.fdm-talk__people--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fdm-talk__people--list .fdm-talk__person {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"face who"
			"face cta";
		align-items: center;
		gap: 6px 16px;
		padding: 14px 2px 16px;
	}
	.fdm-talk__people--list .fdm-talk__photo { width: 64px; height: 64px; }
	.fdm-talk__people--list .fdm-talk__cta,
	.fdm-talk__people--list .fdm-talk__soon { justify-self: start; align-self: start; }
	.fdm-talk .fdm-talk__people--list .fdm-talk__name { font-size: 20px; }
	.fdm-talk__people--list .fdm-talk__bio { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Offstage
   People who are bookable but have no card here. The markup exists
   so fdmTalkOpen() can find their link and open the picker on them;
   it is never seen. `hidden` alone would be enough, but a stylesheet
   somewhere setting display on [hidden] is exactly the kind of thing
   that would put a stray card at the bottom of the drawer.
   ══════════════════════════════════════════════════════════════ */
.fdm-talk__offstage { display: none !important; }