/* ------------------------------------------------------------------
   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.
   ------------------------------------------------------------------ */

:root {
  /* Named by the design system, not yet in the shared token layer. */
  --mmp-radius-pill: 980px;
  --mmp-radius-card: 20px;
  --mmp-radius-reply: 18px;
  --mmp-queue-card-pad: 22px 26px;
  --mmp-queue-card-gap: 16px;
  --mmp-reply-indent: 34px;
  --mmp-t-pill: 0.22s;
}

/* ── Queue shell ─────────────────────────────────────────────── */

.mmp-queue {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  inline-size: min(100%, var(--mmp-page-max, 68.75rem));
  margin-inline: auto;
}

.mmp-queue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.mmp-queue__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--mmp-text-ice);
  font-family: var(--text-font-family);
  font-size: var(--mmp-eyebrow-size, 0.72rem);
  font-weight: 700;
  letter-spacing: var(--mmp-eyebrow-tracking, 0.22em);
  text-transform: uppercase;
}

.mmp-queue__title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--mmp-text);
}

.mmp-queue__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Depth 1 control glass. */
.mmp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--mmp-glass-border);
  border-radius: var(--mmp-radius-pill);
  background: var(--mmp-glass-bg);
  box-shadow: var(--mmp-shadow-btn);
  color: var(--mmp-body);
  font-family: var(--text-font-family);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--mmp-t-pill) var(--mmp-ease),
              border-color var(--mmp-t-pill) var(--mmp-ease),
              transform var(--mmp-t-pill) var(--mmp-ease);
}

.mmp-pill:hover,
.mmp-pill:focus-visible {
  background: var(--mmp-glass-bg-hover);
  border-color: var(--mmp-glass-border-hi);
  transform: translateY(-1px);
}

.mmp-queue__frozen {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--mmp-glass-border);
  border-radius: var(--mmp-radius-reply);
  background: var(--mmp-glass-bg-soft);
  color: var(--mmp-body);
  font-family: var(--text-font-family);
  font-size: 0.88rem;
}

/* ── Filter tabs ─────────────────────────────────────────────── */

.mmp-queue__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mmp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.mmp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--mmp-glass-border);
  border-radius: var(--mmp-radius-pill);
  background: var(--mmp-glass-bg);
  color: var(--mmp-body);
  font-family: var(--text-font-family);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--mmp-t-pill) var(--mmp-ease),
              border-color var(--mmp-t-pill) var(--mmp-ease);
}

.mmp-tab:hover,
.mmp-tab:focus-visible { background: var(--mmp-glass-bg-hover); }

/* One accent at a time: the active tab is the only accent-tinted thing in
   this row, which is how the system marks "you are here". */
.mmp-tab.is-active {
  background: var(--mmp-accent-tint);
  border-color: var(--mmp-accent-edge);
  box-shadow: var(--mmp-accent-glow);
  color: var(--mmp-ice-solid);
}

.mmp-tab__count { opacity: 0.7; font-variant-numeric: tabular-nums; }

.mmp-queue__sort {
  margin: 0;
  color: var(--mmp-muted);
  font-family: var(--text-font-family);
  font-size: 0.78rem;
}

/* ── Comment card — depth 3 ──────────────────────────────────── */

.mmp-queue__list { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1rem; }

.mmp-card {
  display: flex;
  flex-direction: column;
  gap: var(--mmp-queue-card-gap);
  padding: var(--mmp-queue-card-pad);
  border: 1px solid var(--mmp-glass-border);
  border-radius: var(--mmp-radius-card);
  /* Depth 3, not depth 1: comment text sits over the page's own text. */
  background: var(--mmp-bubble-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--mmp-shadow-card);
}

.mmp-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  font-family: var(--text-font-family);
}

.mmp-card__author { color: var(--mmp-text); font-size: 1rem; font-weight: 700; }
.mmp-card__email,
.mmp-card__date  { color: var(--mmp-muted); font-size: 0.8rem; }

.mmp-card__replypill {
  padding: 2px 9px;
  border: 1px solid var(--mmp-glass-hairline);
  border-radius: var(--mmp-radius-pill);
  color: var(--mmp-muted);
  font-size: 0.72rem;
}

.mmp-card__post {
  margin-inline-start: auto;
  color: var(--mmp-ice-solid);
  font-size: 0.82rem;
  text-decoration: none;
}

.mmp-card__post:hover { text-decoration: underline; }

.mmp-card__body {
  margin: 0;
  max-inline-size: 70ch;
  color: var(--mmp-text-body);
  font-family: var(--text-font-family);
  font-size: 0.95rem;
  line-height: 1.72;
}

.mmp-card__body p { margin: 0 0 0.75rem; }
.mmp-card__body p:last-child { margin-block-end: 0; }

.mmp-card__trail {
  margin: 0;
  color: var(--mmp-muted);
  font-family: var(--text-font-family);
  font-size: 0.76rem;
}

/* ── Actions ───────────────────────────────────────────────────
   Named .mmp-act, not .mmp-btn. ACSS claims [class*="btn--"] with an
   attribute substring selector, which swallows any BEM modifier containing
   "btn--" -- so .mmp-btn--accent lost its background to --btn-background at
   equal specificity, purely because automatic.css loads later. That
   namespace is ACSS's; this one is ours. */

.mmp-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mmp-card__spacer  { flex: 1 1 auto; }

.mmp-act {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--mmp-glass-border);
  border-radius: var(--mmp-radius-pill);
  background: var(--mmp-glass-bg);
  color: var(--mmp-body);
  font-family: var(--text-font-family);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mmp-t-pill) var(--mmp-ease),
              border-color var(--mmp-t-pill) var(--mmp-ease);
}

.mmp-act:hover,
.mmp-act:focus-visible {
  background: var(--mmp-glass-bg-hover);
  border-color: var(--mmp-glass-border-hi);
}

/* Approve is the only accent pill in a row. */
.mmp-act--accent {
  background: var(--mmp-accent-tint);
  border-color: var(--mmp-accent-edge);
  color: var(--mmp-ice-solid);
}

.mmp-act--accent:hover,
.mmp-act--accent:focus-visible {
  background: var(--mmp-accent-tint-hover);
  border-color: var(--mmp-accent-edge-hover);
  box-shadow: var(--mmp-accent-glow);
}

/* Spam and Trash recede. There is no red in this palette and none is
   being introduced — weight carries the warning, not hue. */
.mmp-act--quiet {
  background: none;
  border-color: var(--mmp-glass-hairline);
  color: var(--mmp-muted);
}

.mmp-act--quiet:hover,
.mmp-act--quiet:focus-visible {
  background: var(--mmp-glass-bg);
  border-color: var(--mmp-glass-border);
  color: var(--mmp-body);
}

.mmp-act--strong { border-color: var(--mmp-glass-border-hi); color: var(--mmp-text); }

.mmp-cta {
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--mmp-radius-pill);
  background: var(--mmp-grad-cta);
  box-shadow: var(--mmp-shadow-cta);
  color: var(--mmp-cta-ink);
  font-family: var(--text-font-family);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow var(--mmp-t-pill) var(--mmp-ease),
              transform var(--mmp-t-pill) var(--mmp-ease);
}

.mmp-cta:hover,
.mmp-cta:focus-visible { box-shadow: var(--mmp-shadow-cta-hi); transform: translateY(-2px); }

/* ── Confirm and reply ───────────────────────────────────────── */

/* An explicit display beats the hidden attribute's UA rule, so every panel
   that starts hidden has to say so itself. Without this each card renders
   with its trash confirmation and reply composer already open. */
.mmp-confirm[hidden],
.mmp-reply[hidden] { display: none; }

.mmp-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--mmp-glass-hairline);
}

.mmp-confirm__q { margin: 0; color: var(--mmp-text); font-family: var(--text-font-family);
  font-size: 0.9rem; font-weight: 700; }
.mmp-confirm__note,
.mmp-reply__note { flex-basis: 100%; margin: 0; color: var(--mmp-muted);
  font-family: var(--text-font-family); font-size: 0.76rem; }

.mmp-reply {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--mmp-accent-edge);
  border-radius: var(--mmp-radius-reply);
  background: var(--mmp-accent-wash, color-mix(in oklab, var(--mmp-primary) 8%, transparent));
}

.mmp-reply__as { margin: 0; display: flex; align-items: center; gap: 0.5rem;
  color: var(--mmp-body); font-family: var(--text-font-family); font-size: 0.82rem; }

.mmp-speakerpill {
  padding: 2px 10px;
  border: 1px solid var(--mmp-accent-edge);
  border-radius: var(--mmp-radius-pill);
  background: var(--mmp-accent-tint);
  color: var(--mmp-ice-solid);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mmp-reply__text {
  inline-size: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--mmp-glass-border);
  border-radius: 12px;
  background: var(--mmp-well-bg);
  color: var(--mmp-text-body);
  font-family: var(--text-font-family);
  font-size: 0.92rem;
  line-height: 1.6;
  resize: vertical;
}

.mmp-reply__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* ── Undo strip ──────────────────────────────────────────────── */

.mmp-queue__undo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--mmp-accent-edge);
  border-radius: var(--mmp-radius-reply);
  background: var(--mmp-accent-tint);
  color: var(--mmp-body);
  font-family: var(--text-font-family);
  font-size: 0.85rem;
}

.mmp-queue__undo[hidden] { display: none; }

.mmp-queue__undo-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mmp-ice-solid);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.mmp-queue__undo-count { margin-inline-start: auto; color: var(--mmp-muted);
  font-variant-numeric: tabular-nums; }

/* ── Empty state (1b) ────────────────────────────────────────── */

.mmp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.75rem;
  border: 1px solid var(--mmp-glass-border);
  border-radius: var(--mmp-radius-card);
  background: var(--mmp-glass-bg-soft);
  box-shadow: var(--mmp-shadow-card);
}

.mmp-empty__title { margin: 0; color: var(--mmp-text); font-family: var(--text-font-family);
  font-size: 1.05rem; font-weight: 700; }
.mmp-empty__body { margin: 0; color: var(--mmp-body); font-family: var(--text-font-family);
  font-size: 0.9rem; }

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

.speaker-comments__item--speaker {
  margin-inline-start: var(--mmp-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. */
  border-inline-start: 2px solid var(--mmp-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(--mmp-glass-hairline);
  font-family: var(--text-font-family);
  font-size: 0.78rem;
}

.speaker-comments__owner-label { color: var(--mmp-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(--mmp-text-soft, var(--mmp-muted));
  font: inherit;
  cursor: pointer;
}

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

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

.mmp-turnstile { margin-block: 0.75rem; }

@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(--mmp-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(--mmp-base) 82%, transparent) 0%,
		color-mix(in oklab, var(--mmp-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(--mmp-header-height) + 2rem); }

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

.mmp-blog__wrap { max-inline-size: var(--mmp-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(--mmp-text-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(--mmp-text-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(--mmp-text-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(--mmp-radius-frame);
	background: var(--mmp-gradient-frame); }

.mmp-blog__frame img { display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: calc(var(--mmp-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(--mmp-border);
	border-radius: var(--mmp-radius-pill);
	background: var(--mmp-glass-control);
	backdrop-filter: var(--mmp-blur-glass);
	-webkit-backdrop-filter: var(--mmp-blur-glass);
	box-shadow: var(--mmp-shadow-control);
	color: var(--mmp-text);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--mmp-transition); }

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

.mmp-blog__topics { display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block-end: 30px;
	border-block-end: 1px solid var(--mmp-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(--mmp-accent-soft);
	border-color: var(--mmp-accent-border);
	color: var(--mmp-text-ice-solid); }

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

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

.mmp-post:hover { background: var(--mmp-glass-control);
	border-color: var(--mmp-border-strong);
	transform: var(--mmp-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(--mmp-accent-wash);
	border-inline-end: 1px solid var(--mmp-accent-wash-border);
	color: var(--mmp-text-ice-solid);
	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(--mmp-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(--mmp-accent-border);
	border-radius: var(--mmp-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(--mmp-glass-bubble);
	color: var(--mmp-text-ice-solid);
	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(--mmp-border);
	border-radius: var(--mmp-radius-pill);
	background: var(--mmp-glass-bubble);
	color: var(--mmp-text-ice-solid);
	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(--mmp-text-soft);
	font-family: var(--text-font-family);
	font-size: 0.88rem; }

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

.mmp-post__title { color: var(--mmp-text);
	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(--mmp-text-body);
	font-size: 0.95rem;
	line-height: 1.72;
	text-wrap: pretty; }

.mmp-post__more { align-self: start;
	margin-block-start: 6px;
	color: var(--mmp-text-ice-solid);
	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(--mmp-border);
	border-radius: var(--mmp-radius-pill);
	background: var(--mmp-glass-control);
	color: var(--mmp-text);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none; }

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

.mmp-blog__empty { color: var(--mmp-text-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(--mmp-text-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(--mmp-text-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(--mmp-border);
	border-radius: var(--mmp-radius-pill);
	background: var(--mmp-glass-control);
	color: var(--mmp-text);
	transition: var(--mmp-transition); }

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

.mmp-single__sharelink:hover { background: var(--mmp-glass-hover);
	border-color: var(--mmp-border-strong);
	transform: var(--mmp-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(--mmp-border);
	border-radius: var(--mmp-radius-card);
	background: var(--mmp-glass-modal);
	backdrop-filter: var(--mmp-blur-glass);
	-webkit-backdrop-filter: var(--mmp-blur-glass);
	box-shadow: var(--mmp-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(--mmp-border-media);
	border-radius: var(--mmp-radius-media);
	box-shadow: var(--mmp-shadow-media); }

.mmp-single__video { margin: 0 0 30px;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--mmp-border-media);
	border-radius: var(--mmp-radius-media);
	box-shadow: var(--mmp-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(--mmp-text-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(--mmp-text);
	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(--mmp-text);
	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(--mmp-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 26px;

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

.mmp-single__author,
.mmp-single__book { display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px 22px;
	border: 1px solid var(--mmp-border);
	border-radius: var(--mmp-radius-card);
	background: var(--mmp-glass-card);
	backdrop-filter: var(--mmp-blur-glass);
	-webkit-backdrop-filter: var(--mmp-blur-glass);
	box-shadow: var(--mmp-shadow-card); }

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

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

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

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

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

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

.mmp-blog__eyebrow { margin: 0;
	color: var(--mmp-text-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(--mmp-border);
	border-radius: var(--mmp-radius-card);
	background: var(--mmp-glass-card);
	backdrop-filter: var(--mmp-blur-glass);
	-webkit-backdrop-filter: var(--mmp-blur-glass);
	box-shadow: var(--mmp-shadow-card);
	overflow: hidden;
	text-decoration: none;
	transition: var(--mmp-transition); }

.mmp-card:hover { background: var(--mmp-glass-hover);
	border-color: var(--mmp-border-strong);
	transform: var(--mmp-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(--mmp-accent-wash);
	border-block-end: 1px solid var(--mmp-accent-wash-border);
	color: var(--mmp-text-ice-solid);
	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(--mmp-text);
	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(--mmp-border-hairline);
	color: var(--mmp-text-ice-solid);
	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(--mmp-border);
	border-radius: var(--mmp-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. */

.mmp-cform { display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 24px;
	padding: 22px 24px;
	border: 1px solid var(--mmp-border);
	border-radius: var(--mmp-radius-card);
	background: var(--mmp-glass-card);
	backdrop-filter: var(--mmp-blur-glass);
	-webkit-backdrop-filter: var(--mmp-blur-glass); }

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

.mmp-cform__eyebrow { margin: 0;
	color: color-mix(in oklab, var(--mmp-text-ice-solid) 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(--mmp-border);
	border-radius: 12px;
	background: var(--mmp-field-bg);
	color: var(--mmp-text);
	font-family: var(--text-font-family);
	font-size: 0.88rem;
	line-height: 1.5;
	transition: var(--mmp-transition); }

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

.mmp-cform__input:focus-visible { outline: none;
	border-color: var(--mmp-accent-border-hover);
	box-shadow: 0 0 0 3px var(--mmp-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(--mmp-radius-pill);
	background: var(--mmp-gradient-cta);
	box-shadow: var(--mmp-shadow-cta);
	color: var(--mmp-cta-ink);
	font-family: var(--text-font-family);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: var(--mmp-transition); }

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

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