/* ------------------------------------------------------------------
   Speaker blog and comment moderation.
   Every value resolves from a --mmp-* token; nothing is restated here.
   Where the design system names a value the token layer does not carry
   yet, the token is defined once at the top rather than inlined at the
   point of use.
   ------------------------------------------------------------------ */



/* Moderation UI (tabs, cards, actions, reply, undo, empty) lives in queue.css. */

/* ── Public thread (1c/1e) ───────────────────────────────────── */

/* ONE card holds the header, the thread and the form. Only two classes in
   here were ever styled -- the speaker reply and the customer controls -- so the
   thread itself inherited nothing: no surface, no hairlines, and an author
   name that ran into the date at body weight. */
.speaker-comments {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-block-start: 40px;
  padding: 32px 36px;
  border: 1px solid var(--spk-border);
  border-radius: var(--sb-radius-card);
  background: var(--spk-glass-card);
  backdrop-filter: var(--spk-blur-glass);
  -webkit-backdrop-filter: var(--spk-blur-glass);
  box-shadow: var(--spk-shadow-card);
}

@media (width <= 700px) {
  .speaker-comments { padding: 24px 20px; }
}

.speaker-comments__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.speaker-comments__count {
  margin: 0;
  color: var(--spk-ink);
  font-family: var(--heading-font-family);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.speaker-comments__policy {
  margin: 0;
  color: var(--spk-ink-soft);
  font-family: var(--text-font-family);
  font-size: 0.88rem;
}

.speaker-comments__list {
  display: flex;
  flex-direction: column;
  max-inline-size: 70ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rule goes on the TOP of every row rather than the bottom of all but the
   last, so the first comment is separated from the header the same way the
   rest are separated from each other. */
.speaker-comments__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 18px;
  border-block-start: 1px solid var(--spk-border-hairline);
}

.speaker-comments__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  color: var(--spk-ink-soft);
  font-family: var(--text-font-family);
  font-size: 0.88rem;
}

.speaker-comments__author {
  color: var(--spk-ice);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.speaker-comments__body {
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.95rem;
  line-height: 1.72;
  text-wrap: pretty;
}

.speaker-comments__body p { margin: 0 0 0.75rem; }
.speaker-comments__body p:last-child { margin-block-end: 0; }

.speaker-comments__item--speaker {
  margin-inline-start: var(--sb-reply-indent);
  /* The only left rule in the system. A reply is genuinely subordinate to
     its parent; do not generalise this to other nested content. The comp
     indents without the rule -- the rule is kept because it says "reply" at a
     glance where indentation alone reads as a layout accident. */
  border-inline-start: 2px solid var(--sb-primary);
  padding-inline-start: 1rem;
}

.speaker-comments__owner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.75rem;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--glass-hairline);
  font-family: var(--text-font-family);
  font-size: 0.78rem;
}

.speaker-comments__owner-label { color: var(--spk-ink-muted); letter-spacing: 0.12em;
  text-transform: uppercase; }

/* Text links, not buttons — buttons here would compete with the post. */
.speaker-comments__owner button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--spk-ink-soft, var(--spk-ink-muted));
  font: inherit;
  cursor: pointer;
}

.speaker-comments__owner button[data-mmp-act="reply"] { color: var(--spk-ice); }
.speaker-comments__owner button:hover { color: var(--spk-ink); text-decoration: underline; }

/* ── Turnstile ───────────────────────────────────────────────── */

/* Not in the design -- the design predates it. Given the control surface so
   it reads as part of the form rather than a third-party box dropped in. */
.mmp-turnstile {
  margin-block: 0.75rem;
  padding: 10px;
  inline-size: fit-content;
  border: 1px solid var(--spk-border);
  border-radius: var(--sb-radius-card);
  background: var(--spk-glass-control);
  backdrop-filter: var(--spk-blur-glass);
  -webkit-backdrop-filter: var(--spk-blur-glass);
}

@media (prefers-reduced-motion: reduce) {
  .mmp-pill, .mmp-tab, .mmp-act, .mmp-cta { transition-duration: 0.01ms; }
  .mmp-pill:hover, .mmp-cta:hover { transform: none; }
}

/* ==================================================================
   Blog designs 1d / 1e / 1f — built to Speaker Blog.dc.html.

   Everything here reads the design-system token layer
   (assets/css/mmp-tokens.css). Values are not restated: where the
   design says var(--spk-glass-card), so does this.
   ================================================================== */

/*
 * The hero band sits over the lightest part of the stage photograph, where the
 * lettering inside the picture competes with the headline. This darkens the
 * top 320px of the blog templates only -- the profile starts lower down and is
 * correct as it is, so the page overlay itself is untouched.
 */
.mmp-blog .speaker-main::before { content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 320px;
	background: linear-gradient(180deg,
		color-mix(in oklab, var(--spk-base) 82%, transparent) 0%,
		color-mix(in oklab, var(--spk-base) 55%, transparent) 55%,
		transparent 100%);
	pointer-events: none;
	z-index: 0; }

/* Clear the fixed 58px header. The blog heroes started at the top of the
   viewport and slid underneath it. */
.mmp-blog .speaker-main { position: relative;
	padding-block-start: calc(var(--sb-header-height) + 2rem); }

@media (width <= 700px) {
	.mmp-blog .speaker-main { padding-block-start: calc(var(--sb-header-height) + 1.25rem); }
}
.mmp-blog__wrap { position: relative; z-index: 1; }

.mmp-blog__wrap { max-inline-size: var(--sb-page-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 34px; }

.mmp-blog__head { display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;

	@media (width <= 700px) {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	} }

.mmp-blog__headtext { display: flex; flex-direction: column; gap: 10px; }

.mmp-blog__crumbs { display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--spk-ink-ice);
	font-family: var(--text-font-family);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase; }

.mmp-blog__crumbs a { color: inherit; text-decoration: none; }
.mmp-blog__crumbs span[aria-hidden] { color: var(--spk-ink-footer); }

.mmp-blog__title { margin: 0;
	font-family: var(--text-font-family);
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;

	@media (width <= 700px) { font-size: 1.9rem; } }

.mmp-blog__intro { margin: 0;
	max-inline-size: 60ch;
	color: var(--spk-ink-muted);
	font-size: 1.05rem;
	line-height: 1.72;
	text-wrap: pretty; }

.mmp-blog__headaside { display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0; }

/* The headshot's gradient frame, at 64px. */
.mmp-blog__frame { display: block;
	inline-size: 64px;
	block-size: 64px;
	padding: 2px;
	border-radius: var(--sb-radius-frame);
	background: var(--sb-gradient-frame); }

.mmp-blog__frame img { display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: calc(var(--sb-radius-frame) - 3px);
	object-fit: cover; }

.mmp-blog__profile,
.mmp-chip { display: inline-flex;
	align-items: center;
	gap: 7px;
	block-size: 38px;
	padding-inline: 16px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-pill);
	background: var(--spk-glass-control);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);
	box-shadow: var(--spk-shadow-control);
	color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--sb-transition); }

.mmp-blog__profile:hover,
.mmp-chip:hover { background: var(--spk-glass-hover);
	border-color: var(--spk-border-strong);
	transform: var(--sb-lift-sm); }

.mmp-blog__topics { display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block-end: 30px;
	border-block-end: 1px solid var(--spk-border-hairline); }

.mmp-chip { block-size: 32px;
	padding-inline: 15px;
	font-size: 0.78rem;
	box-shadow: none; }

/* The active filter takes the accent tint, which follows --mmp-primary. */
.mmp-chip--on { background: var(--spk-accent-soft);
	border-color: var(--spk-accent-border);
	color: var(--spk-ice); }

.mmp-blog__list { display: flex; flex-direction: column; gap: 16px; }

.mmp-post { display: grid;
	background: var(--spk-glass-card);
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-card);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);
	box-shadow: var(--spk-shadow-card);
	overflow: hidden;
	text-decoration: none;
	transition: var(--sb-transition); }

.mmp-post:hover { background: var(--spk-glass-control);
	border-color: var(--spk-border-strong);
	transform: var(--sb-lift-sm); }

.mmp-post--hero { grid-template-columns: 1.05fr 1fr;
	margin-block-end: 18px;

	@media (width <= 700px) { grid-template-columns: 1fr; } }

.mmp-post--row { grid-template-columns: 220px 1fr;

	@media (width <= 700px) { grid-template-columns: 1fr; } }

.mmp-post__media { position: relative; display: block; }

.mmp-post__image { display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover; }

.mmp-post--hero .mmp-post__image { min-block-size: 290px;

	@media (width <= 700px) { min-block-size: 200px; } }

.mmp-post--row .mmp-post__image { min-block-size: 170px; }

/* The typographic stand-in, same recipe as the profile grid's band.
   border-box because it carries a ratio and padding together. */
.mmp-post__band { box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 170px;
	padding: 24px 20px;
	background: var(--spk-accent-wash);
	border-inline-end: 1px solid var(--spk-accent-wash-border);
	color: var(--spk-ice);
	font-family: var(--heading-font-family);
	font-size: 1.5rem;
	letter-spacing: 0.045em;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;

	@media (width <= 700px) {
		border-inline-end: 0;
		border-block-end: 1px solid var(--spk-accent-wash-border);
	} }

.mmp-post--hero .mmp-post__band { min-block-size: 290px; }

/* Inset inside the media box, not straddling its corner: the card clips its
   overflow, so a badge on the edge lost its last character -- "LATES". */
.mmp-post__flag { position: absolute;
	inset-inline-start: 14px;
	inset-block-start: 14px;
	display: inline-flex;
	align-items: center;
	block-size: 26px;
	padding-inline: 12px;
	border: 1px solid var(--spk-accent-border);
	border-radius: var(--sb-radius-pill);
	/* The design's accent tint sits over a dark photo. Real featured images
	   are often light, and an 18% tint over near-white left "Latest"
	   unreadable -- so it takes the same near-opaque backing as the VIDEO
	   badge beside it, which is legible over anything. */
	background: var(--glass-bubble);
	color: var(--spk-ice);
	font-family: var(--text-font-family);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase; }

.mmp-post__badge { position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-pill);
	background: var(--glass-bubble);
	color: var(--spk-ice);
	font-family: var(--text-font-family);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase; }

.mmp-post__body { display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	padding: 22px 26px; }

.mmp-post--hero .mmp-post__body { gap: 14px; padding: 34px 38px;

	@media (width <= 700px) { padding: 24px 22px; } }

.mmp-post__meta { display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--spk-ink-soft);
	font-family: var(--text-font-family);
	font-size: 0.88rem; }

.mmp-post__topic { color: var(--spk-ice);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase; }

.mmp-post__title { color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: pretty; }

.mmp-post--hero .mmp-post__title { font-size: 1.85rem;
	letter-spacing: -0.01em;
	line-height: 1.22;

	@media (width <= 700px) { font-size: 1.45rem; } }

.mmp-post__excerpt { max-inline-size: 70ch;
	color: var(--spk-ink-body);
	font-size: 0.95rem;
	line-height: 1.72;
	text-wrap: pretty; }

.mmp-post__more { align-self: start;
	margin-block-start: 6px;
	color: var(--spk-ice);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	font-weight: 600; }

.mmp-blog__pager { display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	padding-block-start: 10px; }

.mmp-blog__pager .page-numbers { display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 38px;
	block-size: 38px;
	padding-inline: 12px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-pill);
	background: var(--spk-glass-control);
	color: var(--spk-ink);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none; }

.mmp-blog__pager .page-numbers.current { background: var(--spk-accent-soft);
	border-color: var(--spk-accent-border);
	color: var(--spk-ice); }

.mmp-blog__empty { color: var(--spk-ink-soft); font-size: 0.95rem; }

/* --- 1e single post --------------------------------------------- */

.mmp-single { gap: 40px; }

.mmp-single__head { display: flex; flex-direction: column; gap: 16px; max-inline-size: 78ch; }

.mmp-single__title { margin: 0;
	font-family: var(--text-font-family);
	font-size: 2.9rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: pretty;

	@media (width <= 700px) { font-size: 1.95rem; } }

.mmp-single__meta { display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap; }

.mmp-single__facts { display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--spk-ink-soft);
	font-family: var(--text-font-family);
	font-size: 0.88rem; }

.mmp-post__flag--static { position: static; }

.mmp-single__share { display: flex; align-items: center; gap: 8px; }

.mmp-single__sharelabel { margin-inline-end: 2px;
	color: var(--spk-ink-ice);
	font-family: var(--text-font-family);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase; }

.mmp-single__sharelink { display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-pill);
	background: var(--spk-glass-control);
	color: var(--spk-ink);
	transition: var(--sb-transition); }

.mmp-single__sharelink svg { inline-size: 15px; block-size: 15px; display: block; }

.mmp-single__sharelink:hover { background: var(--spk-glass-hover);
	border-color: var(--spk-border-strong);
	transform: var(--sb-lift-sm); }

.mmp-single__grid { display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;

	@media (width <= 1024px) { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.mmp-single__article { padding: 40px 44px 44px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-card);
	background: var(--glass-modal);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);
	box-shadow: var(--spk-shadow-card);

	@media (width <= 700px) { padding: 24px 20px 28px; } }

.mmp-single__figure { margin: 0 0 30px; }

.mmp-single__figure img { inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--spk-border-media);
	border-radius: var(--sb-radius-embed);
	box-shadow: var(--spk-shadow-media); }

.mmp-single__video { margin: 0 0 30px;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--spk-border-media);
	border-radius: var(--sb-radius-embed);
	box-shadow: var(--spk-shadow-media);
	overflow: hidden; }

.mmp-single__video iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

.mmp-single__body { max-inline-size: 70ch;
	color: var(--spk-ink-body);
	font-family: var(--text-font-family);
	font-size: 1.0625rem;
	line-height: 1.8;
	text-wrap: pretty; }

/* The opening paragraph carries the lede treatment from the design. */
.mmp-single__body > p:first-of-type { margin: 0 0 26px;
	color: var(--spk-ink);
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.85; }

.mmp-single__body > p { margin: 0 0 22px; }

.mmp-single__body h2 { margin: 34px 0 14px;
	color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25; }

.mmp-single__aside { position: sticky;
	inset-block-start: var(--sb-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 26px;

	@media (width <= 1024px) { position: static; } }

/* One card, centred. The second card this used to share the rule with is
   gone -- the book button belongs beside the face, not a card away from it. */
.mmp-single__author { display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 24px 22px;
	text-align: center;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-card);
	background: var(--spk-glass-card);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);
	box-shadow: var(--spk-shadow-card); }

.mmp-blog__frame--lg { inline-size: 96px; block-size: 96px; }

.mmp-single__authorname { color: var(--spk-ink);
	font-family: var(--heading-font-family);
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	line-height: 1.1; }

.mmp-single__authorbio { color: var(--spk-ink-soft);
	font-size: 0.88rem;
	line-height: 1.6; }

.mmp-single__author .sb-cta { inline-size: 100%;
	padding: 0.75rem 1.25rem;
	font-family: var(--text-font-family);
	font-size: 0.92rem;
	cursor: pointer; }

/* The two tail lines under the CTA. A button and an anchor sit side by side
   here -- one opens the conversation sheet, one is a real link -- so the button
   is stripped back to look like the anchor rather than the anchor dressed up. */
.mmp-single__authorlink { display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--spk-ice);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: var(--sb-transition); }

.mmp-single__authorlink:hover,
.mmp-single__authorlink:focus-visible { color: var(--spk-ink); }

/* --- 1e figure caption ------------------------------------------ */

.mmp-single__caption { margin-block-start: 10px;
	color: var(--spk-ink-soft);
	font-family: var(--text-font-family);
	font-size: 0.82rem;
	line-height: 1.6; }

/* --- 1e attached resources -------------------------------------- */

.mmp-single__resource { display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-block-start: 30px;
	padding: 18px 22px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-card);
	background: var(--spk-glass-card);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);

	@media (width <= 700px) { flex-direction: column; align-items: flex-start; gap: 12px; } }

.mmp-single__resourcetext { display: flex; flex-direction: column; gap: 3px; }

.mmp-single__resourcelabel { color: var(--spk-ink-ice);
	font-family: var(--text-font-family);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase; }

.mmp-single__resourcename { color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 0.98rem;
	font-weight: 600; }

.mmp-single__resourcefacts { color: var(--spk-ink-soft); font-weight: 400; }

.mmp-single__download { display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-pill);
	background: var(--spk-glass-control);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);
	box-shadow: var(--spk-shadow-control);
	color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--sb-transition); }

.mmp-single__download:hover,
.mmp-single__download:focus-visible { background: var(--spk-glass-hover);
	border-color: var(--spk-border-strong);
	transform: var(--sb-lift); }

/* --- 1e "More from {speaker}" ----------------------------------- */

.mmp-single__more { display: flex; flex-direction: column; gap: 2px; }

.mmp-single__morelabel { margin: 0 0 8px;
	color: var(--spk-ink-ice);
	font-family: var(--text-font-family);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase; }

.mmp-single__morerow { display: block;
	padding-block: 12px;
	border-block-end: 1px solid var(--spk-border-hairline);
	color: inherit;
	text-decoration: none;
	transition: var(--sb-transition-menu); }

.mmp-single__morerow:hover,
.mmp-single__morerow:focus-visible { transform: translateX(10px);
	border-block-end-color: var(--spk-accent-border-hover); }

.mmp-single__moretitle { display: block;
	color: var(--spk-ink-menu);
	font-family: var(--text-font-family);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	text-wrap: pretty; }

.mmp-single__moredate { display: block;
	margin-block-start: 5px;
	color: var(--spk-ink-soft);
	font-family: var(--text-font-family);
	font-size: 0.78rem; }

.mmp-single__morelink { align-self: start;
	margin-block-start: 14px;
	color: var(--spk-ice);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none; }

.mmp-single__morelink:hover,
.mmp-single__morelink:focus-visible { color: var(--spk-ink); }

/* --- 1e "Related across the bureau" ----------------------------- */

.mmp-single__related { display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block-start: 14px; }

/* The archive draws two of these per row; the band draws three. */
.mmp-blog__grid--tri { grid-template-columns: repeat(3, minmax(0, 1fr));

	@media (width <= 900px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	@media (width <= 700px) { grid-template-columns: minmax(0, 1fr); } }

/* The band's cards carry a byline and no excerpt, so the avatar comes down to
   the design's 26px and the rule sits tight under the title. */
.mmp-post__by--sm { padding-block-start: 12px; font-size: 0.8rem; }

.mmp-post__by--sm img { inline-size: 26px; block-size: 26px; }

/* --- 1f bureau archive ------------------------------------------ */

.mmp-blog__eyebrow { margin: 0;
	color: var(--spk-ink-ice);
	font-family: var(--text-font-family);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase; }

.mmp-blog__grid { display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;

	@media (width <= 700px) { grid-template-columns: minmax(0, 1fr); } }

.mmp-card { display: flex;
	flex-direction: column;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-card);
	background: var(--spk-glass-card);
	backdrop-filter: var(--spk-blur-glass);
	-webkit-backdrop-filter: var(--spk-blur-glass);
	box-shadow: var(--spk-shadow-card);
	overflow: hidden;
	text-decoration: none;
	transition: var(--sb-transition); }

.mmp-card:hover { background: var(--spk-glass-hover);
	border-color: var(--spk-border-strong);
	transform: var(--sb-lift-sm); }

.mmp-card__media { position: relative; display: block; }

.mmp-card__image { display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover; }

/* Same trap as everywhere else: ratio plus inline padding needs border-box. */
.mmp-card__band { box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	padding-inline: 24px;
	background: var(--spk-accent-wash);
	border-block-end: 1px solid var(--spk-accent-wash-border);
	color: var(--spk-ice);
	font-family: var(--heading-font-family);
	font-size: 1.5rem;
	letter-spacing: 0.045em;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance; }

.mmp-card__body { display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 20px 22px 22px; }

.mmp-card__title { color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: pretty; }

/* The byline sits below a hairline, pushed to the bottom of the card so a
   short excerpt does not leave it floating mid-card. */
.mmp-post__by { display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--spk-border-hairline);
	color: var(--spk-ice);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	font-weight: 600; }

.mmp-post__by img { inline-size: 32px;
	block-size: 32px;
	border: 1px solid var(--spk-border);
	border-radius: var(--sb-radius-pill);
	object-fit: cover;
	object-position: center top;
	display: block; }

.mmp-post--hero .mmp-post__by { margin-block-start: 6px; }

/* --- 1c public comment form -------------------------------------
   The only part of a post that still rendered as raw WordPress. Fields
   carry their labels in the placeholder, per the design; the labels
   themselves are visually hidden, not removed. */

/* Flat, not a card. It sits INSIDE the comments card above a hairline rule;
   the nested-card version read as two unrelated panels stacked. */
.mmp-cform { display: flex;
	flex-direction: column;
	gap: 12px;
	max-inline-size: 70ch;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--spk-border-hairline); }

.mmp-cform__form { display: flex; flex-direction: column; gap: 12px; }

.mmp-cform__eyebrow { margin: 0;
	color: color-mix(in oklab, var(--spk-ice) 75%, transparent);
	font-family: var(--text-font-family);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase; }

.mmp-cform__eyebrow small { display: none; }   /* core's "Cancel reply" nest */

.mmp-cform__field { margin: 0; }

/* Name and email share a row above 700 and stack below it. */
.mmp-cform__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mmp-cform__form > .mmp-cform__eyebrow,
.mmp-cform__form > .mmp-cform__field:not(.mmp-cform__field--author):not(.mmp-cform__field--email),
.mmp-cform__form > .mmp-cform__actions { grid-column: 1 / -1; }

@media (width <= 700px) {
	.mmp-cform__form { grid-template-columns: 1fr; }
}

.mmp-cform__input { inline-size: 100%;
	padding: 11px 14px;
	border: 1px solid var(--spk-border);
	border-radius: 12px;
	background: var(--spk-field-bg);
	color: var(--spk-ink);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	line-height: 1.5;
	transition: var(--sb-transition); }

.mmp-cform__input::placeholder { color: var(--spk-ink-footer); }

.mmp-cform__input:focus-visible { outline: none;
	border-color: var(--spk-accent-border-hover);
	box-shadow: 0 0 0 3px var(--spk-accent-soft); }

.mmp-cform__textarea { min-block-size: 76px;
	padding: 12px 14px;
	resize: vertical; }

.mmp-cform__actions { display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0; }

.mmp-cform__submit { padding: 9px 20px;
	border: 0;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-gradient-cta);
	box-shadow: var(--spk-shadow-cta);
	color: var(--spk-cta-ink);
	font-family: var(--text-font-family);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: var(--sb-transition); }

.mmp-cform__submit:hover,
.mmp-cform__submit:focus-visible { transform: var(--sb-lift); }

.mmp-cform__note { color: var(--spk-ink-footer);
	font-family: var(--text-font-family);
	font-size: 0.8rem; }