/*
 * Mixmedia Developer Journal — global shell.
 *
 * Design tokens come from `theme.json` (`settings.custom`) so the editor, the
 * front end and every block stylesheet share one scale. Fallbacks keep the file
 * usable if it is ever loaded outside WordPress.
 */

@property --mmb-sheen {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

:root {
	--mmb-header-height: var(--wp--custom--layout--header-height, 3.5rem);
	--mmb-prose-width: var(--wp--custom--layout--prose-width, 68ch);

	--mmb-radius: var(--wp--custom--radius--lg, 0.9rem);
	--mmb-radius-md: var(--wp--custom--radius--md, 0.65rem);
	--mmb-radius-sm: var(--wp--custom--radius--sm, 0.375rem);
	--mmb-radius-pill: var(--wp--custom--radius--pill, 999px);

	--mmb-control-height: var(--wp--custom--control--height, 2.125rem);
	--mmb-control-height-sm: var(--wp--custom--control--height-small, 1.75rem);
	--mmb-control-padding: var(--wp--custom--control--padding-inline, 0.75rem);
	--mmb-control-radius: var(--wp--custom--control--radius, 0.5rem);
	--mmb-control-font: var(--wp--custom--control--font-size, 0.8125rem);
	--mmb-control-gap: var(--wp--custom--control--gap, 0.375rem);

	--mmb-duration-fast: var(--wp--custom--motion--duration-fast, 120ms);
	--mmb-duration: var(--wp--custom--motion--duration-base, 200ms);
	--mmb-duration-slow: var(--wp--custom--motion--duration-slow, 420ms);
	--mmb-ease: var(--wp--custom--motion--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1));
	--mmb-ease-emphasis: var(--wp--custom--motion--ease-emphasis, cubic-bezier(0.34, 1.4, 0.64, 1));
	--mmb-transition: var(--mmb-duration) var(--mmb-ease);

	--mmb-surface-blur: var(--wp--custom--surface--blur, 16px);
	--mmb-reader-scale: 1;
}

@view-transition {
	navigation: auto;
}

html {
	accent-color: var(--wp--preset--color--accent);
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mmb-header-height) + 1.25rem);
	scrollbar-color: color-mix(in srgb, var(--wp--preset--color--muted) 45%, transparent) transparent;
	scrollbar-gutter: stable;
}

html[data-mmb-site-theme="light"] {
	color-scheme: light;
	--wp--preset--color--base: #f8f9fd;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--contrast: #101828;
	--wp--preset--color--muted: #5f6b7a;
	--wp--preset--color--accent: #4665e5;
	--wp--preset--color--accent-soft: #dce3ff;
	--wp--preset--color--border: #d9deea;
	--wp--preset--color--success: #0f766e;
	--wp--preset--color--warning: #a15c00;
	--wp--preset--color--critical: #b42318;
}

html[data-mmb-site-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #0b1020;
	--wp--preset--color--surface: #121a2b;
	--wp--preset--color--contrast: #edf2ff;
	--wp--preset--color--muted: #aeb9cd;
	--wp--preset--color--accent: #8ea4ff;
	--wp--preset--color--accent-soft: #26345e;
	--wp--preset--color--border: #2c3750;
	--wp--preset--color--success: #5eead4;
	--wp--preset--color--warning: #fbbf24;
	--wp--preset--color--critical: #ff9b8f;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Component rules such as `.mmb-reader-actions button` set `display` with a
 * higher specificity than the user-agent `[hidden]` rule, which would leave
 * scripted controls (narration stop, back to top, search reset) permanently
 * visible. `until-found` stays excluded so find-in-page can still reveal
 * collapsed content.
 */
[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

body {
	min-height: 100svh;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	transition:
		background-color var(--mmb-transition),
		color var(--mmb-transition);
	-webkit-font-smoothing: antialiased;
}

body::before,
body::after {
	position: fixed;
	z-index: -1;
	width: clamp(16rem, 30vw, 34rem);
	height: clamp(16rem, 30vw, 34rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

body::before {
	top: -16rem;
	right: -11rem;
	box-shadow:
		0 0 0 42px color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent),
		0 0 0 84px color-mix(in srgb, var(--wp--preset--color--accent) 2%, transparent);
}

body::after {
	bottom: -22rem;
	left: -16rem;
	box-shadow: 0 0 0 56px color-mix(in srgb, var(--wp--preset--color--accent) 2%, transparent);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

:where(h1, h2, h3) {
	text-wrap: balance;
}

:where(p, li, dd, figcaption) {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: var(--mmb-radius-sm);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.75rem;
	left: 0.75rem;
	width: auto;
	height: auto;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-control-radius);
	background: var(--wp--preset--color--surface);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--lifted);
	font-size: var(--mmb-control-font);
	font-weight: 650;
}

/* ---------------------------------------------------------------- Header */

.mmb-site-header {
	position: sticky;
	z-index: 100;
	top: var(--wp-admin--admin-bar--height, 0);
	min-height: var(--mmb-header-height);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	backdrop-filter: blur(var(--mmb-surface-blur)) saturate(150%);
	transition:
		box-shadow var(--mmb-transition),
		border-color var(--mmb-transition);
	view-transition-name: mmb-site-header;
}

.mmb-site-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
}

.mmb-site-header__inner {
	min-height: var(--mmb-header-height);
	padding-block: 0.4rem;
}

.mmb-site-brand {
	min-width: 0;
}

.mmb-site-brand .wp-block-site-logo {
	flex: 0 0 auto;
}

.mmb-site-brand .wp-block-site-logo img {
	max-height: 2rem;
	width: auto;
}

.mmb-site-brand .wp-block-site-title,
.mmb-site-brand .wp-block-site-tagline {
	margin: 0;
}

.mmb-site-brand .wp-block-site-title {
	white-space: nowrap;
}

/*
 * The wordmark is the one link on the page that never needs to announce
 * itself as one — its position already does that. Underlining it made the
 * masthead read like an unstyled document.
 */
.mmb-site-brand .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--mmb-transition);
}

.mmb-site-brand .wp-block-site-title a:hover,
.mmb-site-brand .wp-block-site-title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.mmb-site-brand .wp-block-site-tagline {
	overflow: hidden;
	color: var(--wp--preset--color--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------ Navigation */

.mmb-primary-navigation {
	font-size: var(--mmb-control-font);
}

.mmb-primary-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--mmb-duration-fast) var(--mmb-ease);
}

/*
 * The rule sits under the label rather than replacing the text colour, so the
 * pointer gets a target that grows from the centre and the label never shifts.
 */
.mmb-primary-navigation .wp-block-navigation-item__content::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	content: "";
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--mmb-duration-fast) var(--mmb-ease-emphasis);
}

.mmb-primary-navigation .wp-block-navigation-item__content:hover,
.mmb-primary-navigation .wp-block-navigation-item__content:focus-visible,
.mmb-primary-navigation .current-menu-item > .wp-block-navigation-item__content,
.mmb-primary-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.mmb-primary-navigation .wp-block-navigation-item__content:hover::after,
.mmb-primary-navigation .wp-block-navigation-item__content:focus-visible::after,
.mmb-primary-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.mmb-primary-navigation .current_page_item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.mmb-primary-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.mmb-primary-navigation .current_page_item > .wp-block-navigation-item__content::after {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

.mmb-primary-navigation :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	padding: 0.35rem;
	border-radius: var(--mmb-control-radius);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-primary-navigation .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--accent-soft);
}

.mmb-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

.mmb-primary-navigation .is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.mmb-header-search {
	width: clamp(9rem, 15vw, 14rem);
	margin: 0;
}

.mmb-header-search .wp-block-search__input {
	min-height: var(--mmb-control-height);
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-control-radius);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--mmb-control-font);
	transition:
		border-color var(--mmb-duration-fast) var(--mmb-ease),
		box-shadow var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-header-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft);
	outline: none;
}

.mmb-header-search .wp-block-search__button {
	min-height: var(--mmb-control-height);
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-control-radius);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition:
		color var(--mmb-duration-fast) var(--mmb-ease),
		border-color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-header-search .wp-block-search__button:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.mmb-site-tools {
	position: relative;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------- Controls */

.mmb-theme-toggle,
.mmb-theme-choices button,
.mmb-reader-actions button,
.mmb-code-copy,
.mmb-topic-filters :is(a, button),
.mmb-live-search__clear {
	display: inline-flex;
	gap: var(--mmb-control-gap);
	align-items: center;
	justify-content: center;
	min-height: var(--mmb-control-height);
	padding: 0 var(--mmb-control-padding);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-control-radius);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font: inherit;
	font-size: var(--mmb-control-font);
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--mmb-duration-fast) var(--mmb-ease),
		border-color var(--mmb-duration-fast) var(--mmb-ease),
		color var(--mmb-duration-fast) var(--mmb-ease),
		transform var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-theme-toggle:hover,
.mmb-reader-actions button:hover,
.mmb-live-search__clear:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--border));
	color: var(--wp--preset--color--accent);
}

.mmb-theme-toggle:active,
.mmb-reader-actions button:active,
.mmb-topic-filters :is(a, button):active {
	transform: translateY(1px);
}

/*
 * Icon system.
 *
 * Icons are optical companions to text, never the message itself, so they sit
 * slightly lighter than their label and never dictate line height.
 */
.mmb-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: -0.18em;
	color: currentcolor;
	opacity: 0.75;
}

:is(button, a):hover > .mmb-icon,
:is(button, a):focus-visible > .mmb-icon,
:is(button, a)[aria-pressed='true'] > .mmb-icon,
:is(button, a).is-active > .mmb-icon {
	opacity: 1;
}

/*
 * The colour-theme control shows the mode that is actually in force, so the
 * three glyphs are stacked and the active one is selected from the document
 * state the head script already writes.
 */
.mmb-theme-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mmb-theme-toggle__glyph {
	display: none;
}

:root:not([data-mmb-theme-choice]) .mmb-theme-toggle__glyph.is-system,
[data-mmb-theme-choice='system'] .mmb-theme-toggle__glyph.is-system,
[data-mmb-theme-choice='light'] .mmb-theme-toggle__glyph.is-light,
[data-mmb-theme-choice='dark'] .mmb-theme-toggle__glyph.is-dark {
	display: block;
}

.mmb-theme-toggle__caret {
	opacity: 0.5;
}

.mmb-theme-choices button {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	text-align: start;
}

.mmb-reader-actions button {
	gap: 0.35rem;
}

/* Icon-only controls stay square so the row keeps an even rhythm. */
.mmb-reader-actions__icon {
	padding-inline: 0;
	min-width: var(--mmb-control-height);
	justify-content: center;
}

.mmb-topic-filters__label {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--muted);
	padding-inline-end: 0.1rem;
}

.mmb-article-meta__item {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
}

.mmb-contents-panel__title {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}

.mmb-theme-choices {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.4rem);
	right: 0;
	display: grid;
	width: max-content;
	min-width: 8.5rem;
	gap: 0.15rem;
	padding: 0.3rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius-md);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Native popover presentation with a discrete-transition entrance. */
.mmb-theme-choices[popover] {
	position: fixed;
	margin: 0;
	max-inline-size: calc(100vw - 1rem);
	overflow: visible;
	opacity: 0;
	inset: auto;
	transition:
		opacity var(--mmb-duration-fast) var(--mmb-ease),
		transform var(--mmb-duration-fast) var(--mmb-ease-emphasis),
		overlay var(--mmb-duration-fast) allow-discrete,
		display var(--mmb-duration-fast) allow-discrete;
	transform: translateY(-0.35rem) scale(0.98);
}

/*
 * Browsers with anchor positioning place and reflow the panel themselves,
 * including the flip fallbacks, so the script leaves the insets alone.
 */
@supports (anchor-name: --mmb-anchor) and (position-area: block-end) {
	.mmb-theme-toggle {
		anchor-name: --mmb-theme-toggle;
	}

	.mmb-theme-choices[popover] {
		position-anchor: --mmb-theme-toggle;
		position-area: block-end span-inline-start;
		position-try-fallbacks: flip-block, flip-inline, block-end span-inline-end;
		margin-block-start: 0.375rem;
	}
}

.mmb-theme-choices[popover]:popover-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@starting-style {
	.mmb-theme-choices[popover]:popover-open {
		opacity: 0;
		transform: translateY(-0.35rem) scale(0.98);
	}
}

.mmb-theme-choices button {
	width: 100%;
	justify-content: flex-start;
	border-color: transparent;
	background: transparent;
	font-weight: 600;
	text-align: left;
}

.mmb-theme-choices button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

.mmb-theme-choices button[aria-pressed="true"] {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}

/* ----------------------------------------------------------------- Main */

.mmb-main {
	min-height: 60vh;
	padding-block: var(--wp--preset--spacing--50);
}

.mmb-main:has(.mmb-journal-hero) {
	padding-top: 0;
}

.mmb-journal-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60);
	background:
		radial-gradient(circle at 84% 24%, rgba(142, 164, 255, 0.26), transparent 30%),
		linear-gradient(135deg, #0b1020 0%, #141b31 55%, #0d2829 100%) !important;
}

.mmb-journal-hero::after {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -8rem;
	width: 32rem;
	height: 32rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	content: "";
	box-shadow:
		0 0 0 48px rgba(255, 255, 255, 0.03),
		0 0 0 96px rgba(255, 255, 255, 0.02);
	transform: translateY(-50%);
}

.mmb-journal-hero .has-muted-color {
	color: #b7c2d8 !important;
}

.mmb-kicker {
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mmb-latest-articles,
.mmb-archive-header,
.mmb-author-header,
.mmb-not-found,
.mmb-article,
.mmb-page,
.mmb-attachment,
.mmb-discussion-shell {
	padding-block: var(--wp--preset--spacing--50);
}

.mmb-archive-header,
.mmb-author-header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.mmb-query-controls {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
}

.mmb-topic-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.mmb-topic-filters :is(a, button) {
	min-height: var(--mmb-control-height-sm);
	padding-inline: 0.6rem;
	border-radius: var(--mmb-radius-pill);
	color: var(--wp--preset--color--muted);
}

.mmb-topic-filters :is(a, button):hover,
.mmb-topic-filters :is(a, button).is-active {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.mmb-topic-filters__empty {
	flex: 1 0 100%;
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------- Live search */

.mmb-live-search {
	position: relative;
	max-width: 38rem;
}

.mmb-live-search__form {
	display: flex;
	gap: 0.35rem;
}

.mmb-live-search__input {
	width: 100%;
	min-height: calc(var(--mmb-control-height) + 0.35rem);
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-control-radius);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition:
		border-color var(--mmb-duration-fast) var(--mmb-ease),
		box-shadow var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-live-search__input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

.mmb-live-search__clear {
	flex: 0 0 auto;
	min-height: calc(var(--mmb-control-height) + 0.35rem);
}

.mmb-live-search__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 0.35rem);
	left: 0;
	width: min(38rem, calc(100vw - 2rem));
	max-height: min(28rem, 64vh);
	overflow: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius-md);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--lifted);
	animation: mmb-pop var(--mmb-duration-fast) var(--mmb-ease-emphasis) both;
}

@keyframes mmb-pop {
	from {
		opacity: 0;
		transform: translateY(-0.3rem);
	}
}

.mmb-live-search__status {
	padding: 0.6rem 0.75rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mmb-live-search__results {
	display: grid;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
}

.mmb-live-search__result {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0.6rem;
	align-items: center;
	padding: 0.4rem;
	border-radius: var(--mmb-radius-sm);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-live-search__result:hover,
.mmb-live-search__result:focus-visible,
.mmb-live-search__results [aria-selected="true"] .mmb-live-search__result {
	background: var(--wp--preset--color--accent-soft);
}

.mmb-live-search__result img {
	width: 3.5rem;
	height: 2.4rem;
	border-radius: var(--mmb-radius-sm);
	object-fit: cover;
}

.mmb-live-search__result strong,
.mmb-live-search__result small {
	display: block;
}

.mmb-live-search__result small {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ------------------------------------------------------------ Post grid */

.mmb-post-grid {
	gap: var(--wp--preset--spacing--30);
	/* Core supplies the grid layout; neutralize markers in case wp-block-library is dequeued. */
	padding-inline-start: 0;
	list-style: none;
}

.mmb-post-card {
	position: relative;
	container: mmb-card / inline-size;
	height: 100%;
	padding: 1rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius);
	box-shadow: var(--wp--preset--shadow--hairline);
	transition:
		border-color var(--mmb-transition),
		box-shadow var(--mmb-transition),
		transform var(--mmb-transition),
		--mmb-sheen var(--mmb-duration-slow) var(--mmb-ease);
}

.mmb-post-card::after {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		18rem 12rem at 50% 0%,
		color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent),
		transparent var(--mmb-sheen)
	);
	content: "";
	pointer-events: none;
}

.mmb-post-card:hover,
.mmb-post-card:focus-within {
	--mmb-sheen: 100%;

	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, var(--wp--preset--color--border));
	box-shadow: var(--wp--preset--shadow--soft);
	transform: translateY(-3px);
}

.mmb-post-card .wp-block-post-featured-image {
	margin: -1rem -1rem 0.85rem;
	overflow: hidden;
}

.mmb-post-card .wp-block-post-featured-image img {
	border-radius: 0;
	transition: transform var(--mmb-duration-slow) var(--mmb-ease);
}

.mmb-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.mmb-post-card__terms a {
	text-decoration: none;
}

.mmb-post-card .wp-block-post-title {
	margin-top: 0.4rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

/*
 * theme.json gives every link the accent colour and a permanent underline,
 * which is right inside prose and wrong for a card whose whole surface is the
 * link target. Titles read as headings until the reader aims at them, then the
 * underline arrives to confirm the target.
 */
.mmb-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	transition: color var(--mmb-transition), text-decoration-color var(--mmb-transition);
}

.mmb-post-card:hover .wp-block-post-title a,
.mmb-post-card .wp-block-post-title a:hover,
.mmb-post-card .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.mmb-post-card__meta a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--mmb-transition);
}

.mmb-post-card__meta a:hover,
.mmb-post-card__meta a:focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.mmb-post-card .wp-block-post-excerpt__more-link {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.mmb-post-card .wp-block-post-excerpt__more-link::after {
	content: "\2192";
	transition: transform var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-post-card:hover .wp-block-post-excerpt__more-link::after {
	transform: translateX(0.2rem);
}

.mmb-post-card__meta {
	margin-top: auto;
	padding-top: 0.55rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
}

@container mmb-card (min-width: 30rem) {
	.mmb-post-card .wp-block-post-title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.mmb-post-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}
}

.mmb-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
}

.mmb-empty-state,
.mmb-not-found {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius);
	background: var(--wp--preset--color--surface);
}

/* -------------------------------------------------------------- Article */

.mmb-article {
	position: relative;
}

/*
 * Prose links keep their underline — it is the accessible signal — but a
 * hairline rule set below the baseline reads as typography rather than as a
 * browser default. The underline fills in to full contrast on hover so the
 * feedback is felt without anything moving.
 */
.mmb-article :where(p, li, dd, figcaption, blockquote) a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	text-underline-offset: 0.16em;
	transition: color var(--mmb-transition), text-decoration-color var(--mmb-transition);
}

.mmb-article :where(p, li, dd, figcaption, blockquote) a:not(.wp-element-button):hover,
.mmb-article :where(p, li, dd, figcaption, blockquote) a:not(.wp-element-button):focus-visible {
	text-decoration-color: currentcolor;
}

.mmb-article > .wp-block-post-title,
.mmb-article > .mmb-article-meta,
.mmb-article > .mmb-kicker {
	width: min(100%, 54rem);
}

.mmb-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: center;
	margin-block: 0.75rem 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.mmb-article-meta__item {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
}

.mmb-article-content {
	font-size: calc(var(--wp--preset--font-size--large) * var(--mmb-reader-scale));
	line-height: 1.72;
}

.mmb-article-content > p:first-of-type {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 86%, var(--wp--preset--color--muted));
	font-size: 1.1em;
}

.mmb-article-content :is(h2, h3, h4) {
	position: relative;
	margin-top: 1.9em;
	scroll-margin-top: calc(var(--mmb-header-height) + 1.25rem);
}

.mmb-heading-anchor {
	position: absolute;
	top: 50%;
	right: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0;
	text-decoration: none;
	transition: opacity var(--mmb-duration-fast) var(--mmb-ease);
	transform: translateY(-50%);
}

.mmb-article-content :is(h2, h3, h4):hover .mmb-heading-anchor,
.mmb-heading-anchor:focus-visible {
	opacity: 1;
}

.mmb-article-content :where(pre, table, figure, .wp-block-group) {
	max-width: 100%;
}

.mmb-article-content :not(pre) > code {
	padding: 0.12em 0.34em;
	border-radius: var(--mmb-radius-sm);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.87em;
}

.mmb-article-content :target {
	animation: mmb-target-flash 1.6s var(--mmb-ease) 1;
}

@keyframes mmb-target-flash {
	from {
		background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	}
}

.mmb-article-tags {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.mmb-post-navigation {
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

.mmb-breadcrumbs {
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.mmb-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.mmb-breadcrumbs a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.mmb-query-total {
	margin-bottom: var(--wp--preset--spacing--20);
	font-variant-numeric: tabular-nums;
}

.mmb-legal-updated {
	margin-bottom: var(--wp--preset--spacing--30);
}

.mmb-article-footer {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.mmb-article-footer .mmb-article-tags {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mmb-article-footer .mmb-post-navigation {
	gap: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------------ Topic index */

.mmb-topic-index {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.mmb-topic-index__item {
	gap: 0.35rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius-pill);
	background: var(--wp--preset--color--surface);
	transition:
		border-color var(--mmb-duration-fast) var(--mmb-ease),
		transform var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-topic-index__item:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--border));
	transform: translateY(-1px);
}

.mmb-topic-index__item a {
	text-decoration: none;
}

.mmb-topic-index__item .wp-block-term-count {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/* ---------------------------------------------------- Documentation pages */

.mmb-docs-header {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mmb-docs-layout {
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}

.mmb-docs-aside__inner {
	position: sticky;
	top: calc(var(--mmb-header-height, 3.5rem) + 1rem);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	max-height: calc(100vh - var(--mmb-header-height, 3.5rem) - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.mmb-docs-nav {
	font-size: var(--wp--preset--font-size--small);
}

.mmb-docs-nav ul {
	margin: 0;
	padding-left: 0.85rem;
	list-style: none;
}

.mmb-docs-nav li {
	margin-block: 0.15rem;
}

.mmb-docs-nav a {
	display: block;
	padding: 0.15rem 0.35rem;
	border-left: 2px solid transparent;
	border-radius: 0 var(--mmb-radius-sm) var(--mmb-radius-sm) 0;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition:
		border-color var(--mmb-duration-fast) var(--mmb-ease),
		color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-docs-nav a:hover,
.mmb-docs-nav .current-menu-item > a {
	border-left-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 899px) {
	.mmb-docs-layout {
		gap: var(--wp--preset--spacing--30);
	}

	.mmb-docs-aside__inner {
		position: static;
		max-height: none;
	}
}

.mmb-discussion-shell {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

.mmb-comments {
	padding: clamp(0.85rem, 2.5vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius);
	background: var(--wp--preset--color--surface);
}

.mmb-comment {
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mmb-attachment-media {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius);
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.mmb-protected-media {
	padding: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--warning);
	border-radius: 0 var(--mmb-radius-sm) var(--mmb-radius-sm) 0;
	background: color-mix(in srgb, var(--wp--preset--color--warning) 10%, var(--wp--preset--color--surface));
}

/* --------------------------------------------------------------- Footer */

.mmb-site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.mmb-site-footer__grid {
	display: grid;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
	font-size: var(--wp--preset--font-size--small);
}

.mmb-site-footer .mmb-site-footer__grid > * {
	margin-block: 0;
}

.mmb-site-footer__brand {
	max-width: 30rem;
}

.mmb-site-footer .mmb-site-footer__column > * {
	margin-block: 0 0.6rem;
}

.mmb-site-footer .mmb-site-footer__column > :last-child {
	margin-block-end: 0;
}

.mmb-site-footer__title {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mmb-site-footer__links {
	padding: 0;
	margin: 0;
	list-style: none;
}

.mmb-site-footer__links li {
	margin-block: 0.32rem 0;
}

.mmb-site-footer__links :is(a, .wp-block-categories a) {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-site-footer__links a:hover,
.mmb-site-footer__links a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.mmb-site-footer__links .wp-block-page-list ul,
.mmb-site-footer__links ul {
	padding-inline-start: 0.9rem;
	margin: 0.32rem 0 0;
	list-style: none;
}

.mmb-site-footer__social.wp-block-social-links {
	margin-block-start: 1rem;
}

.mmb-site-footer__social .wp-social-link {
	transition:
		transform var(--mmb-duration-fast) var(--mmb-ease),
		color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-site-footer__social .wp-social-link:hover {
	color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

.mmb-site-footer__feed {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mmb-site-footer__feed:hover,
.mmb-site-footer__feed:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mmb-site-footer__legal {
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.mmb-site-footer .mmb-site-footer__legal p {
	margin: 0;
}

@media (max-width: 900px) {
	.mmb-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mmb-site-footer__brand {
		grid-column: 1 / -1;
		max-width: 34rem;
	}
}

@media (max-width: 540px) {
	.mmb-site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mmb-editor-pattern {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mmb-radius);
	background: var(--wp--preset--color--surface);
}

/* ------------------------------------------------------ Code decoration */

.mmb-code-shell {
	position: relative;
}

.mmb-code-copy {
	position: absolute;
	z-index: 2;
	top: 0.45rem;
	right: 0.45rem;
	min-height: var(--mmb-control-height-sm);
	padding-inline: 0.55rem;
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(17, 24, 39, 0.8);
	color: #f8fafc;
	backdrop-filter: blur(8px);
	opacity: 0;
	transition:
		opacity var(--mmb-duration-fast) var(--mmb-ease),
		background-color var(--mmb-duration-fast) var(--mmb-ease);
}

.mmb-code-shell:hover .mmb-code-copy,
.mmb-code-copy:focus-visible,
.mmb-code-copy.is-copied {
	opacity: 1;
}

.mmb-code-copy:hover {
	background: rgba(17, 24, 39, 0.95);
}

.mmb-code-copy.is-copied {
	border-color: color-mix(in srgb, var(--wp--preset--color--success) 60%, transparent);
	color: #a7f3d0;
}

.mmb-token--comment {
	color: #8190aa;
	font-style: italic;
}

.mmb-token--keyword {
	color: #c4a7ff;
}

.mmb-token--string {
	color: #93e5a4;
}

.mmb-token--number {
	color: #f7be7b;
}

.mmb-token--function {
	color: #8dc7ff;
}

/* --------------------------------------------------- Entrance animation */

@keyframes mmb-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mmb-post-card,
		.mmb-article-content > :is(h2, figure, pre, table, .wp-block-group) {
			animation: mmb-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}

/* ---------------------------------------------------------- Adaptations */

@media (max-width: 1080px) {
	.mmb-header-search {
		display: none;
	}
}

@media (max-width: 782px) {
	:root {
		--mmb-header-height: 3.25rem;
	}

	.admin-bar .mmb-site-header {
		top: 46px;
	}

	.mmb-site-header__inner {
		gap: 0.5rem;
	}

	.mmb-site-brand .wp-block-site-tagline,
	.mmb-theme-toggle [data-theme-label] {
		display: none;
	}

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

	.mmb-post-navigation {
		align-items: flex-start;
		flex-direction: column;
	}

	.mmb-journal-hero::after {
		opacity: 0.5;
	}

	.mmb-code-copy {
		opacity: 1;
	}
}

@media (max-width: 600px) {
	.mmb-site-brand .wp-block-site-title {
		max-width: 11rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mmb-live-search__result {
		grid-template-columns: 1fr;
	}

	.mmb-live-search__result img {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.mmb-post-card:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.mmb-post-card,
	.mmb-comments,
	.mmb-editor-pattern,
	.mmb-empty-state,
	.mmb-theme-choices,
	.mmb-live-search__panel,
	.mmb-attachment-media {
		border: 1px solid CanvasText;
	}

	.mmb-post-card::after,
	body::before,
	body::after {
		display: none;
	}

	.mmb-code-copy,
	.mmb-topic-filters :is(a, button) {
		border: 1px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
		forced-color-adjust: none;
		opacity: 1;
	}
}

/* ---------------------------------------------------------------- Print */

@media print {
	@page {
		margin: 18mm 16mm;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
		font: 11pt/1.55 Georgia, "Times New Roman", serif;
	}

	html {
		color-scheme: light !important;
	}

	/*
	 * Printing is synchronous, so an in-flight color or motion transition
	 * would otherwise be captured mid-way on the printed page.
	 */
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	body::before,
	body::after,
	.mmb-site-header,
	.mmb-site-footer,
	.mmb-reader-tools,
	.mmb-reading-progress,
	.mmb-contents-panel,
	.mmb-topic-filters,
	.mmb-query-controls,
	.mmb-post-navigation,
	.mmb-discussion-shell,
	.mmb-code-copy,
	.mmb-heading-anchor,
	.wp-block-post-comments-form {
		display: none !important;
	}

	.mmb-main,
	.mmb-article,
	.mmb-page {
		padding: 0 !important;
		margin: 0 !important;
	}

	.mmb-article-content {
		color: #000 !important;
		font-size: 11pt;
	}

	.mmb-article-content > p:first-of-type,
	.mmb-article-content :not(pre) > code {
		color: #000 !important;
	}

	.mmb-article-content :not(pre) > code {
		background: #eee !important;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
		color: #000 !important;
	}

	p,
	li {
		orphans: 3;
		widows: 3;
	}

	pre,
	blockquote,
	figure,
	table {
		break-inside: avoid;
	}

	pre {
		overflow: visible;
		border: 1px solid #999;
		background: #f5f5f5 !important;
		color: #000 !important;
		white-space: pre-wrap;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	.mmb-article-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		overflow-wrap: anywhere;
	}
}