/*!
Theme Name: Medical Mirror
Theme URI: https://medicalmirror.org/
Author: Adedayo Moshood
Author URI: https://moshood.dev
Description: A server-rendered WordPress theme for Medical Mirror — the medical journalism and health communication platform. Recreates the Medical Mirror visual design (deep-navy and cyan palette, DM Sans + Source Serif 4 typography, magazine-style homepage, post, category and about layouts) as classic PHP templates. Design system authored as plain CSS with custom properties.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: medical-mirror
Tags: blog, news, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar

Medical Mirror was scaffolded from Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later. The design system below is
original to this theme.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens (custom properties)
# Reset & base elements
# Typography helpers
# Accessibility (skip link / screen-reader-text)
# Layout primitives (container, section bands, eyebrow, section heading)
# Buttons & pills
# Site header
# Mobile nav drawer
# Progress bars (reading + navigation)
# Post cards (default / compact) & category badge & avatar
# Homepage: hero, latest stories, residency series band
# Single post: header, hero image, prose body, tags, author card, related
# Category / archive: header, lead card, sidebar, pagination, post grid
# Search
# About page
# 404 / no-results
# Site footer (links grid, about band, trust row, copyright)
# Comments (minimal, brand-aligned)
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Brand palette — the literal hex values used throughout the design. */
	--mm-bg: #f5f8fc;          /* page background / off-white on dark */
	--mm-fg: #14233a;          /* body text */
	--mm-navy: #0a3d6e;        /* deep navy: headings, dark bands, borders */
	--mm-navy-dark: #08294a;   /* darkest navy: footer background */
	--mm-blue: #0070c0;        /* primary blue: links, eyebrows, buttons */
	--mm-blue-hover: #005a9c;
	--mm-cyan: #2eafe0;        /* cyan accent: badges, underlines, progress */
	--mm-cyan-hover: #4dbde8;
	--mm-cyan-alt: #1391c4;
	--mm-prose: #27374f;       /* long-form body prose */

	/* Derived tints (kept as rgba to match the /opacity utilities). */
	--mm-navy-07: rgba(10, 61, 110, 0.07);
	--mm-navy-10: rgba(10, 61, 110, 0.10);
	--mm-navy-12: rgba(10, 61, 110, 0.12);
	--mm-navy-14: rgba(10, 61, 110, 0.14);
	--mm-card-shadow: 0 1px 2px rgba(10, 61, 110, 0.05);
	--mm-card-shadow-hover: 0 22px 44px -20px rgba(10, 61, 110, 0.32);

	/* Fonts. */
	--mm-font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mm-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Layout widths. */
	--mm-w-wide: 1240px;   /* main container */
	--mm-w-1080: 1080px;   /* about guides / ceo */
	--mm-w-980: 980px;     /* post hero image */
	--mm-w-920: 920px;     /* about intro */
	--mm-w-800: 800px;     /* post body */
	--mm-w-760: 760px;     /* post header column */

	--mm-header-h: 74px;
	--mm-radius: 10px;
	--mm-radius-lg: 14px;
	--mm-radius-xl: 18px;
}

/*--------------------------------------------------------------
# Reset & base elements
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	height: 100%;
}

body {
	margin: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	font-family: var(--mm-font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--mm-fg);
	background-color: var(--mm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*
	 * Never let the browser fake a bold weight. Both families are loaded as full
	 * variable fonts (DM Sans 100–1000, Source Serif 4 200–900), so every weight
	 * the design uses — 500, 600, 700 and true 800/extrabold — is a real
	 * instance. Disabling weight synthesis guarantees titles render at the true
	 * weight (matching the Next.js app) instead of a faux-bold approximation,
	 * and surfaces any genuinely missing weight as lighter rather than smeared.
	 * (Style synthesis is left on so the italic caption text can still slant.)
	 */
	font-synthesis-weight: none;
}

.site {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.site-main {
	flex: 1 0 auto;
}

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

a {
	color: var(--mm-blue);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: var(--mm-blue-hover);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--mm-cyan);
	outline-offset: 2px;
}

/*--------------------------------------------------------------
# Typography helpers
--------------------------------------------------------------*/
.mm-serif { font-family: var(--mm-font-serif); }
.mm-sans { font-family: var(--mm-font-sans); }

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #fff;
	color: var(--mm-navy);
	font-weight: 600;
	border-radius: 0 0 var(--mm-radius) 0;
}

.skip-link:focus {
	left: 0;
}

/*--------------------------------------------------------------
# Layout primitives
--------------------------------------------------------------*/
.mm-container {
	width: 100%;
	max-width: var(--mm-w-wide);
	margin-inline: auto;
	padding-inline: 16px;
}

.mm-container--1080 { max-width: var(--mm-w-1080); }
.mm-container--980 { max-width: var(--mm-w-980); }
.mm-container--920 { max-width: var(--mm-w-920); }
.mm-container--800 { max-width: var(--mm-w-800); }
.mm-container--760 { max-width: var(--mm-w-760); }

/* Dark navy section band (hero-less banners, residency, category/search hero). */
.mm-band--navy {
	background: var(--mm-navy);
	color: var(--mm-bg);
}

/* Small uppercase eyebrow label. */
.mm-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--mm-blue);
}

.mm-eyebrow--cyan { color: var(--mm-cyan); }

/* Serif section heading with a heavy navy underline. */
.mm-section-heading {
	font-family: var(--mm-font-serif);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mm-navy);
	font-size: 24px;
	padding-bottom: 14px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--mm-navy);
}

/* Breadcrumb row. */
.mm-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 20px;
}

.mm-breadcrumb a { color: inherit; opacity: 0.8; }
.mm-breadcrumb a:hover { color: var(--mm-blue); opacity: 1; }
.mm-band--navy .mm-breadcrumb { color: rgba(245, 248, 252, 0.6); }
.mm-band--navy .mm-breadcrumb a:hover { color: var(--mm-cyan); }
.mm-breadcrumb__current { color: var(--mm-cyan); }

/*--------------------------------------------------------------
# Buttons & pills
--------------------------------------------------------------*/
.mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 11px 22px;
	border: 1px solid transparent;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.mm-btn--primary {
	background: var(--mm-blue);
	color: #fff;
}
.mm-btn--primary:hover { background: var(--mm-blue-hover); color: #fff; }

.mm-btn--outline {
	background: #fff;
	border-color: rgba(10, 61, 110, 0.15);
	color: var(--mm-blue);
}
.mm-btn--outline:hover { border-color: var(--mm-cyan); }

.mm-btn--cyan {
	background: var(--mm-cyan);
	color: var(--mm-navy-dark);
}
.mm-btn--cyan:hover { background: var(--mm-cyan-hover); color: var(--mm-navy-dark); }

/* Round icon button (search, share, socials). */
.mm-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 999px;
	border: 1px solid var(--mm-navy-12);
	background: #fff;
	color: var(--mm-blue);
	font-weight: 700;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.mm-iconbtn:hover { border-color: var(--mm-cyan); }

/* Cyan "View all →" style link. */
.mm-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mm-cyan);
	transition: gap 0.2s;
}
.mm-arrow-link:hover { gap: 10px; color: var(--mm-cyan); }
.mm-arrow-link svg { width: 16px; height: 16px; }

/*--------------------------------------------------------------
# Site header
--------------------------------------------------------------*/
.mm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--mm-navy-10);
	background: #fff;
}

.mm-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--mm-header-h);
}

.mm-header__logo {
	display: flex;
	align-items: center;
	flex: none;
}
.mm-header__logo img {
	height: 36px;
	width: auto;
}
.mm-header__logo-text {
	font-family: var(--mm-font-sans);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mm-navy);
}
.mm-header__logo-text .mm-word-navy { color: var(--mm-navy); }
.mm-header__logo-text .mm-word-cyan { color: var(--mm-cyan); }

.mm-nav {
	display: none;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.mm-nav a {
	font-size: 15px;
	font-weight: 500;
	color: var(--mm-fg);
	border-bottom: 2px solid transparent;
	padding: 4px 0;
	transition: color 0.2s, border-color 0.2s;
}
.mm-nav a:hover { color: var(--mm-blue); }
.mm-nav .current-menu-item > a,
.mm-nav .current_page_item > a,
.mm-nav a[aria-current="page"],
.mm-nav a.is-active {
	color: var(--mm-blue);
	font-weight: 600;
	border-bottom-color: var(--mm-cyan);
}

.mm-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.mm-search-form {
	display: none;
}
.mm-search-form.is-open {
	display: block;
}
.mm-search-form input {
	height: 38px;
	width: 190px;
	border-radius: 999px;
	border: 1px solid rgba(10, 61, 110, 0.18);
	background: #fff;
	padding: 0 16px;
	font-family: var(--mm-font-sans);
	font-size: 14px;
	color: var(--mm-fg);
	outline: none;
}
.mm-search-form input::placeholder { color: rgba(20, 35, 58, 0.45); }

/* Contribute ("Write for us") dropdown. */
.mm-contribute {
	position: relative;
	display: none;
}
.mm-contribute__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	background: var(--mm-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border: 0;
	transition: background-color 0.2s;
}
.mm-contribute__toggle:hover { background: var(--mm-blue-hover); }
.mm-contribute__toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.mm-contribute__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-contribute__menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	width: 256px;
	background: #fff;
	border: 1px solid var(--mm-navy-10);
	border-radius: var(--mm-radius-lg);
	padding: 6px 0;
	box-shadow: 0 16px 40px -12px rgba(10, 61, 110, 0.35);
	z-index: 10;
}
.mm-contribute[hidden] .mm-contribute__menu,
.mm-contribute__menu[hidden] { display: none; }
.mm-contribute__menu a {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mm-fg);
	transition: background-color 0.2s, color 0.2s;
}
.mm-contribute__menu a:hover {
	background: rgba(0, 112, 192, 0.08);
	color: var(--mm-blue);
}

/* Mobile hamburger button. */
.mm-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 999px;
	border: 1px solid var(--mm-navy-12);
	background: #fff;
	color: var(--mm-navy);
	transition: border-color 0.2s;
}
.mm-menu-toggle:hover { border-color: var(--mm-cyan); }

/*--------------------------------------------------------------
# Mobile nav drawer
--------------------------------------------------------------*/
.mm-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(8, 41, 74, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}
.mm-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.mm-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 61;
	height: 100%;
	width: 100%;
	max-width: 320px;
	background: var(--mm-bg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}
.mm-drawer.is-open { transform: translateX(0); }
.mm-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--mm-navy-10);
}
.mm-drawer__title {
	font-family: var(--mm-font-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--mm-navy);
}
.mm-drawer__close {
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--mm-navy);
}
.mm-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
}
.mm-drawer__nav a {
	border-radius: 6px;
	padding: 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--mm-fg);
	transition: background-color 0.2s, color 0.2s;
}
.mm-drawer__nav a:hover { background: rgba(10, 61, 110, 0.05); }
.mm-drawer__nav .current-menu-item > a,
.mm-drawer__nav a.is-active {
	background: rgba(0, 112, 192, 0.1);
	color: var(--mm-blue);
	font-weight: 600;
}
.mm-drawer__cta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 24px;
	border-top: 1px solid var(--mm-navy-10);
}
.mm-drawer__cta a { text-align: center; }

/*--------------------------------------------------------------
# Progress bars
--------------------------------------------------------------*/
.mm-nav-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	height: 3px;
	background: var(--mm-cyan);
	width: 0;
	opacity: 0;
	pointer-events: none;
	transition: width 4s ease-out, opacity 0.3s;
}
.mm-nav-progress.is-loading {
	width: 80%;
	opacity: 1;
}
.mm-nav-progress.is-done {
	width: 100%;
	opacity: 0;
	transition: width 0.2s ease-out, opacity 0.3s;
}

.mm-reading-progress {
	position: fixed;
	inset-inline: 0;
	top: var(--mm-header-h);
	z-index: 40;
	height: 3px;
	pointer-events: none;
}
.mm-reading-progress__fill {
	height: 100%;
	width: 0;
	background: var(--mm-cyan);
	transition: width 75ms linear;
}

/*--------------------------------------------------------------
# Post cards, category badge, avatar
--------------------------------------------------------------*/
.mm-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--mm-radius);
	border: 1px solid var(--mm-navy-07);
	background: #fff;
	box-shadow: var(--mm-card-shadow);
	transition: transform 0.3s, box-shadow 0.3s;
	color: inherit;
}
.mm-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--mm-card-shadow-hover);
	color: inherit;
}
.mm-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mm-bg);
}
.mm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}
.mm-card--compact .mm-card__body { padding: 20px; }
.mm-card__title {
	font-family: var(--mm-font-serif);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mm-navy);
	font-size: 20px;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-card--compact .mm-card__title {
	font-size: 18px;
}
.mm-card__excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(20, 35, 58, 0.62);
	margin-bottom: 18px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-card__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: rgba(20, 35, 58, 0.6);
}
.mm-card__meta--compact {
	font-size: 12.5px;
	color: rgba(20, 35, 58, 0.55);
}

/* Brand placeholder image fallback (fills its media container). */
.mm-media-fallback-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* CSS-only fallback surface (used only if the placeholder asset is missing). */
.mm-media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	background: linear-gradient(135deg, var(--mm-navy) 0%, var(--mm-navy-dark) 100%);
	font-family: var(--mm-font-sans);
	font-size: clamp(15px, 2.6vw, 22px);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.mm-media-fallback .mm-word-navy { color: #fff; }
.mm-media-fallback .mm-word-cyan { color: var(--mm-cyan); }

/* Category badge (tinted pill; colour set inline per slug). */
.mm-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 6px 12px;
	font-size: 11px;
	margin-bottom: 14px;
	transition: opacity 0.2s;
}
a.mm-badge:hover { opacity: 0.8; }
.mm-badge--sm { padding: 4px 10px; font-size: 10.5px; }

/* Solid cyan pill used on dark imagery / bands. */
.mm-pill-cyan {
	display: inline-flex;
	align-self: flex-start;
	border-radius: 999px;
	background: var(--mm-cyan);
	color: var(--mm-navy);
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Author avatar. */
.mm-avatar__img {
	flex: none;
	border-radius: 999px;
	object-fit: cover;
}
.mm-avatar__chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(0, 112, 192, 0.12);
	font-family: var(--mm-font-serif);
	font-weight: 700;
	color: var(--mm-blue);
}

/*--------------------------------------------------------------
# Homepage: hero
--------------------------------------------------------------*/
.mm-hero {
	padding-block: 36px 40px;
}
.mm-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}
.mm-hero__media {
	height: 100%;
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--mm-radius);
	box-shadow: 0 24px 60px -28px rgba(10, 61, 110, 0.4);
}
.mm-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-hero__media .mm-pill-cyan {
	position: absolute;
	top: 18px;
	left: 18px;
	color: #fff;
	letter-spacing: 0.1em;
}
.mm-hero__eyebrow-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.mm-hero__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mm-blue);
}
.mm-hero__dot {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: rgba(10, 61, 110, 0.3);
}
.mm-hero__date { font-size: 13px; color: rgba(20, 35, 58, 0.55); }
.mm-hero__title {
	font-family: var(--mm-font-serif);
	font-size: 28px;
	line-height: 1.16;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--mm-navy);
	margin-bottom: 14px;
}
.mm-hero__title a { color: inherit; }
.mm-hero__excerpt {
	max-width: 48ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(20, 35, 58, 0.72);
	margin-bottom: 20px;
}
.mm-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	border-top: 1px solid var(--mm-navy-12);
	padding-top: 20px;
}
.mm-byline__name { font-size: 15px; font-weight: 600; color: var(--mm-navy); }
.mm-byline__sub { font-size: 13px; color: rgba(20, 35, 58, 0.55); }

/*--------------------------------------------------------------
# Homepage: latest stories
--------------------------------------------------------------*/
.mm-latest { padding-block: 8px 48px; }
.mm-latest__head {
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--mm-navy);
}
.mm-latest__head h2 {
	font-family: var(--mm-font-serif);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mm-navy);
}
.mm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.mm-grid--2 { grid-template-columns: 1fr; }
.mm-grid--3 { grid-template-columns: 1fr; }

/*--------------------------------------------------------------
# Homepage: residency series band
--------------------------------------------------------------*/
.mm-residency { background: var(--mm-navy); color: var(--mm-bg); }
.mm-residency__inner { padding-block: 48px; }
.mm-residency__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}
.mm-residency__title {
	font-family: var(--mm-font-serif);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}
.mm-residency__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.mm-residency__card {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--mm-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: inherit;
	transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.mm-residency__card:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.5);
	color: inherit;
}
.mm-residency__media {
	position: relative;
	min-height: 180px;
	overflow: hidden;
}
.mm-residency__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mm-residency__body {
	display: flex;
	flex-direction: column;
	padding: 24px;
}
.mm-residency__card-title {
	font-family: var(--mm-font-serif);
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-residency__excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(245, 248, 252, 0.68);
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-residency__meta { margin-top: auto; font-size: 13px; color: rgba(245, 248, 252, 0.55); }

/*--------------------------------------------------------------
# Single post
--------------------------------------------------------------*/
.mm-post-header { padding-block: 36px 24px; }
.mm-post-header__title {
	font-family: var(--mm-font-serif);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--mm-navy);
	margin-bottom: 16px;
}
.mm-post-header__excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(20, 35, 58, 0.65);
	margin-bottom: 24px;
}
.mm-post-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--mm-navy-12);
	padding-bottom: 26px;
}
.mm-post-header__author {
	display: flex;
	align-items: center;
	gap: 13px;
}
.mm-post-header__author-name { font-size: 14.5px; font-weight: 600; color: var(--mm-navy); }
.mm-post-header__author-sub { font-size: 13px; color: rgba(20, 35, 58, 0.55); }

/* Share buttons. */
.mm-share {
	display: flex;
	align-items: center;
	gap: 9px;
}
.mm-share__label { font-size: 13px; color: rgba(20, 35, 58, 0.5); margin-right: 2px; }
.mm-share a,
.mm-share button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--mm-navy-14);
	background: transparent;
	color: var(--mm-navy);
	font-size: 14px;
	font-weight: 700;
	transition: border-color 0.2s, color 0.2s;
}
.mm-share a:hover,
.mm-share button:hover { border-color: var(--mm-cyan); color: var(--mm-blue); }
.mm-share svg { width: 16px; height: 16px; }

.mm-post-hero {
	padding-top: 24px;
}
.mm-post-hero__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--mm-radius);
	box-shadow: 0 20px 50px -26px rgba(10, 61, 110, 0.4);
	background: var(--mm-bg);
}
.mm-post-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.mm-post-hero__caption {
	margin-top: 12px;
	padding-inline: 2px;
	font-size: 13px;
	font-style: italic;
	color: rgba(20, 35, 58, 0.5);
}

/* Prose body — ports the drop cap, cyan blockquote, blue links etc. */
.mm-prose {
	padding-top: 32px;
	font-size: 16px;
}
.mm-prose > p {
	margin-bottom: 20px;
	line-height: 1.75;
	color: var(--mm-prose);
}
.mm-prose a {
	color: var(--mm-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mm-prose strong { font-weight: 600; color: var(--mm-navy); }
.mm-prose h2, .mm-prose h3, .mm-prose h4 {
	font-family: var(--mm-font-serif);
	color: var(--mm-navy);
	line-height: 1.25;
	margin: 1.6em 0 0.6em;
}
.mm-prose h2 { font-size: 26px; }
.mm-prose h3 { font-size: 22px; }
.mm-prose h4 { font-size: 19px; }
.mm-prose ul, .mm-prose ol {
	margin: 0 0 20px;
	padding-left: 1.4em;
	color: var(--mm-prose);
	line-height: 1.75;
}
.mm-prose li { margin-bottom: 8px; }
.mm-prose img {
	width: 100%;
	height: auto;
	margin: 24px 0;
	max-width: 100%;
	border-radius: var(--mm-radius);
}

/*
 * Orientation-based sizing for inline post-body images. The the_content filter
 * (medical_mirror_enhance_content) tags a HOLDER element — the image's existing
 * <figure>/.wp-caption/sole-image <paragraph> wrapper, or a <span> it adds — so
 * the holder defines the occupied space and the image fills it at 100% (no
 * leftover blank area around a shrunk image). Width is set on the holder here.
 */
.mm-prose .mm-inline-holder { display: block; }
.mm-prose .mm-inline-landscape,
.mm-prose .mm-inline-unknown,
.mm-prose .mm-inline-portrait {
	margin-top: 24px;
	margin-bottom: 24px;
	margin-left: auto;
	margin-right: auto;
}
.mm-prose .mm-inline-landscape,
.mm-prose .mm-inline-unknown { width: 100%; }
.mm-prose .mm-inline-portrait { width: 45%; }
.mm-prose .mm-inline-landscape img,
.mm-prose .mm-inline-unknown img,
.mm-prose .mm-inline-portrait img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
}
.mm-prose .mm-inline-landscape a,
.mm-prose .mm-inline-unknown a,
.mm-prose .mm-inline-portrait a { display: block; }
@media (max-width: 640px) {
	/* 45% is too small to read on phones — give portraits more room. */
	.mm-prose .mm-inline-portrait { width: 75%; }
}
.mm-prose figure { margin: 24px 0; }
.mm-prose figcaption {
	margin-top: 8px;
	font-family: var(--mm-font-sans);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	color: rgba(20, 35, 58, 0.55);
}
.mm-prose blockquote {
	margin: 24px 0;
	border-left: 4px solid var(--mm-cyan);
	padding: 6px 0 6px 20px;
}
.mm-prose blockquote > p {
	font-family: var(--mm-font-serif);
	font-size: 20px;
	line-height: 1.35;
	font-weight: 600;
	font-style: italic;
	color: var(--mm-navy);
}
.mm-prose > p:first-of-type::first-letter {
	float: left;
	margin: 4px 10px 0 0;
	font-family: var(--mm-font-serif);
	font-size: 3rem;
	font-weight: 800;
	line-height: 0.82;
	color: var(--mm-blue);
}

/* WordPress-authored alignment / caption classes inside prose. */
.mm-prose .alignleft {
	float: left;
	margin: 0.35em 1.75em 1em 0;
	max-width: 45%;
}
.mm-prose .alignright {
	float: right;
	margin: 0.35em 0 1em 1.75em;
	max-width: 45%;
}
.mm-prose .aligncenter {
	display: block;
	margin: 1.5em auto;
}
.mm-prose .alignnone { margin: 1.5em 0; }
.mm-prose .wp-caption { max-width: 100%; }
.mm-prose .wp-caption-text {
	margin-top: 0.5em;
	font-family: var(--mm-font-sans);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.5;
	color: rgba(20, 35, 58, 0.55);
}

/* Tag list. */
.mm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding-top: 28px;
}
.mm-tags a {
	border-radius: 999px;
	background: rgba(0, 112, 192, 0.1);
	color: var(--mm-blue);
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s;
}
.mm-tags a:hover { background: var(--mm-blue); color: #fff; }

/* Author card. */
.mm-author-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 28px;
	border-radius: var(--mm-radius-lg);
	border: 1px solid var(--mm-navy-07);
	background: #fff;
	padding: 20px;
	box-shadow: var(--mm-card-shadow);
}
.mm-author-card__name { font-size: 15px; font-weight: 600; color: var(--mm-navy); margin-bottom: 4px; }
.mm-author-card__bio { font-size: 14px; line-height: 1.6; color: rgba(20, 35, 58, 0.62); }

/* Related stories. */
.mm-related { padding-block: 44px 56px; }

/*--------------------------------------------------------------
# Category / archive
--------------------------------------------------------------*/
.mm-cat-header { padding-block: 36px 40px; }
.mm-cat-header__title {
	font-family: var(--mm-font-serif);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.015em;
	margin-bottom: 12px;
}
.mm-cat-header__desc {
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(245, 248, 252, 0.72);
}
.mm-cat-header__count {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	font-size: 13.5px;
	color: rgba(245, 248, 252, 0.6);
}
.mm-cat-header__count-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mm-cyan); }

.mm-cat-layout {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 40px;
	padding-block: 36px 56px;
}
.mm-cat-layout__more-heading {
	font-family: var(--mm-font-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--mm-navy);
	margin-bottom: 20px;
}

/* Lead / spotlight card. */
.mm-lead {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--mm-radius-lg);
	border: 1px solid var(--mm-navy-07);
	background: #fff;
	box-shadow: var(--mm-card-shadow);
	margin-bottom: 32px;
	color: inherit;
	transition: transform 0.3s, box-shadow 0.3s;
}
.mm-lead:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 46px -22px rgba(10, 61, 110, 0.3);
	color: inherit;
}
.mm-lead__media { position: relative; min-height: 220px; }
.mm-lead__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-lead__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
}
.mm-lead__spotlight {
	align-self: flex-start;
	border-radius: 999px;
	background: rgba(46, 175, 224, 0.16);
	color: var(--mm-cyan-alt);
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.mm-lead__title {
	font-family: var(--mm-font-serif);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--mm-navy);
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-lead__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(20, 35, 58, 0.64);
	margin-bottom: 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-lead__meta { font-size: 13px; color: rgba(20, 35, 58, 0.55); }

/* Sidebar. */
.mm-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.mm-widget {
	border-radius: var(--mm-radius-lg);
	border: 1px solid var(--mm-navy-07);
	background: #fff;
	padding: 24px;
	box-shadow: var(--mm-card-shadow);
}
.mm-widget__title {
	font-family: var(--mm-font-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--mm-navy);
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--mm-cyan);
}
.mm-mostread { display: flex; flex-direction: column; gap: 18px; }
.mm-mostread__item { display: flex; align-items: flex-start; gap: 14px; color: inherit; }
.mm-mostread__rank {
	flex: none;
	font-family: var(--mm-font-serif);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: var(--mm-cyan);
}
.mm-mostread__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--mm-fg);
	transition: color 0.2s;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-mostread__item:hover .mm-mostread__title { color: var(--mm-blue); }
.mm-topics { display: flex; flex-wrap: wrap; gap: 9px; }
.mm-topics a {
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 14px;
	font-weight: 500;
	transition: opacity 0.2s;
}
.mm-topics a:hover { opacity: 0.8; }

/* Numbered pagination (WordPress paginate_links output). */
.mm-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}
.mm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	min-width: 44px;
	padding: 0 14px;
	border-radius: var(--mm-radius);
	border: 1px solid var(--mm-navy-12);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--mm-fg);
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.mm-pagination a.page-numbers:hover { border-color: var(--mm-cyan); color: var(--mm-blue); }
.mm-pagination .page-numbers.current {
	background: var(--mm-navy);
	border-color: var(--mm-navy);
	color: #fff;
}
.mm-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
	padding: 0 4px;
	font-weight: 700;
	color: rgba(20, 35, 58, 0.5);
}
.mm-pagination .page-numbers.prev,
.mm-pagination .page-numbers.next { font-weight: 500; }
.mm-pagination svg { width: 16px; height: 16px; }

/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/
.mm-search-hero { padding-block: 44px 48px; }
.mm-search-hero__title {
	font-family: var(--mm-font-serif);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.015em;
	margin-bottom: 14px;
}
.mm-search-hero__count { font-size: 15px; color: rgba(245, 248, 252, 0.7); }
.mm-search-results { padding-block: 56px 72px; }
.mm-empty { color: rgba(20, 35, 58, 0.6); font-size: 16px; }

/*--------------------------------------------------------------
# About page
--------------------------------------------------------------*/
.mm-about-hero { padding-block: 44px 48px; }
.mm-about-hero__title {
	font-family: var(--mm-font-serif);
	font-size: 32px;
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
	max-width: 18ch;
	margin-bottom: 16px;
}
.mm-about-hero__lead {
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(245, 248, 252, 0.74);
}
.mm-about-intro { padding-block: 48px 8px; }
.mm-about-intro h2 {
	font-family: var(--mm-font-serif);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--mm-navy);
	margin-bottom: 16px;
}
.mm-about-intro p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--mm-prose);
	margin-bottom: 16px;
}
.mm-about-callout {
	border-radius: var(--mm-radius-lg);
	border: 1px solid var(--mm-navy-07);
	border-left: 4px solid var(--mm-cyan);
	background: #fff;
	padding: 24px;
	box-shadow: var(--mm-card-shadow);
	margin-top: 36px;
}
.mm-about-callout h3 {
	font-family: var(--mm-font-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--mm-navy);
	margin-bottom: 14px;
}
.mm-about-callout p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--mm-prose);
	margin-bottom: 16px;
}
.mm-about-callout p:last-child { margin-bottom: 0; }

.mm-guides { padding-block: 48px 16px; }
.mm-guides__head { text-align: center; margin-bottom: 28px; }
.mm-guides__head h2 {
	font-family: var(--mm-font-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--mm-navy);
	margin-top: 12px;
}
.mm-guides__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.mm-guide {
	border-radius: var(--mm-radius-lg);
	border: 1px solid var(--mm-navy-07);
	background: #fff;
	padding: 24px;
	box-shadow: var(--mm-card-shadow);
}
.mm-guide__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mm-cyan-alt);
	margin-bottom: 12px;
}
.mm-guide__body { font-size: 17px; line-height: 1.6; color: var(--mm-prose); }
.mm-guide__body--serif {
	font-family: var(--mm-font-serif);
	font-size: 22px;
	line-height: 1.35;
	font-style: italic;
	color: var(--mm-navy);
}

.mm-ceo { padding-block: 48px 8px; }
.mm-ceo__card {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--mm-radius-xl);
	border: 1px solid var(--mm-navy-07);
	background: #fff;
	box-shadow: 0 18px 50px -28px rgba(10, 61, 110, 0.32);
}
.mm-ceo__media { position: relative; min-height: 280px; overflow: hidden; }
.mm-ceo__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-ceo__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 999px;
	background: var(--mm-blue);
	color: #fff;
	padding: 6px 13px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.mm-ceo__body { display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.mm-ceo__name {
	font-family: var(--mm-font-serif);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--mm-navy);
	margin-bottom: 6px;
}
.mm-ceo__sub { font-size: 15px; color: rgba(20, 35, 58, 0.55); margin-bottom: 22px; }
.mm-ceo__body p { font-size: 16.5px; line-height: 1.65; color: var(--mm-prose); margin-bottom: 16px; }
.mm-ceo__socials { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mm-ceo__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	min-width: 38px;
	padding: 0 4px;
	border-radius: 999px;
	border: 1px solid var(--mm-navy-14);
	color: var(--mm-navy);
	font-size: 14px;
	font-weight: 700;
	transition: border-color 0.2s, color 0.2s;
}
.mm-ceo__socials a.mm-ceo__email { padding: 0 16px; font-size: 13.5px; font-weight: 500; }
.mm-ceo__socials a:hover { border-color: var(--mm-cyan); color: var(--mm-blue); }

/* Image placeholder (striped) used for the CEO portrait fallback. */
.mm-img-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #dbe6f2, #dbe6f2 9px, #e7eff7 9px, #e7eff7 18px);
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 12px;
	color: rgba(10, 61, 110, 0.34);
}

.mm-contact { padding-block: 48px 52px; }
.mm-contact__card {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 32px;
	border-radius: var(--mm-radius-xl);
	background: var(--mm-navy);
	color: #fff;
	padding: 24px;
}
.mm-contact__title {
	font-family: var(--mm-font-serif);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	max-width: 20ch;
	margin-bottom: 14px;
}
.mm-contact__lead {
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(245, 248, 252, 0.7);
	margin-bottom: 22px;
}
.mm-contact__socials { display: flex; flex-direction: column; gap: 12px; }
.mm-contact__social {
	display: flex;
	align-items: center;
	gap: 14px;
	border-radius: var(--mm-radius);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	padding: 16px 20px;
	color: #fff;
	transition: border-color 0.2s, background-color 0.2s;
}
.mm-contact__social:hover { border-color: var(--mm-cyan); background: rgba(255, 255, 255, 0.1); color: #fff; }
.mm-contact__glyph {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: rgba(46, 175, 224, 0.18);
	color: var(--mm-cyan);
	font-weight: 700;
}
.mm-contact__label { font-size: 14.5px; font-weight: 600; display: block; }
.mm-contact__handle { font-size: 13px; color: rgba(245, 248, 252, 0.6); display: block; }

/*--------------------------------------------------------------
# 404 / no-results
--------------------------------------------------------------*/
.mm-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: 96px 112px;
}
.mm-error__title {
	font-family: var(--mm-font-serif);
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--mm-navy);
	margin: 12px 0 14px;
}
.mm-error__text {
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(20, 35, 58, 0.65);
	margin-bottom: 28px;
}
.mm-error__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/*--------------------------------------------------------------
# Site footer
--------------------------------------------------------------*/
.mm-footer {
	background: var(--mm-navy-dark);
	color: var(--mm-bg);
	margin-top: auto;
}

/* About band (homepage only, top of footer). */
.mm-footer__aboutband { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mm-aboutband {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 32px;
	padding-block: 40px;
}
.mm-aboutband__title {
	font-family: var(--mm-font-serif);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	max-width: 22ch;
	margin-bottom: 12px;
}
.mm-aboutband__text {
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(245, 248, 252, 0.62);
	margin-bottom: 20px;
}

/* Footer links grid. */
.mm-footgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-block: 40px;
}
.mm-footgrid__brand-word {
	font-family: var(--mm-font-sans);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
}
.mm-footgrid__brand-word .mm-word-navy { color: #fff; }
.mm-footgrid__brand-word .mm-word-cyan { color: var(--mm-cyan); }
.mm-footgrid__desc {
	max-width: 36ch;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(245, 248, 252, 0.58);
	margin-bottom: 18px;
}
.mm-socials { display: flex; gap: 10px; }
.mm-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: border-color 0.2s, color 0.2s;
}
.mm-socials a:hover { border-color: var(--mm-cyan); color: var(--mm-cyan); }
.mm-footcol { display: flex; flex-direction: column; gap: 12px; }
.mm-footcol__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 4px;
}
.mm-footcol a { font-size: 14px; color: rgba(245, 248, 252, 0.78); }
.mm-footcol a:hover { color: var(--mm-cyan); }
.mm-footcol__note { font-size: 13.5px; line-height: 1.6; color: rgba(245, 248, 252, 0.7); }
.mm-footcol__note strong { font-weight: 600; color: #fff; }

/* Trust row (homepage only). */
.mm-footer__trustrow { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mm-trustrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding-block: 20px;
}
.mm-trustrow__item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: rgba(245, 248, 252, 0.7);
}
.mm-trustrow__item svg { width: 16px; height: 16px; color: var(--mm-cyan); }

/* Copyright strip. */
.mm-footer__copyright { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mm-copyright {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 20px;
}
.mm-copyright span { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }

/*--------------------------------------------------------------
# Comments (minimal, brand-aligned)
--------------------------------------------------------------*/
.comments-area {
	max-width: var(--mm-w-800);
	margin: 40px auto 0;
	padding-inline: 16px;
}
.comments-title,
.comment-reply-title {
	font-family: var(--mm-font-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--mm-navy);
	margin-bottom: 20px;
}
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--mm-navy-10);
}
.comment-author .fn { font-weight: 600; color: var(--mm-navy); }
.comment-metadata a { font-size: 13px; color: rgba(20, 35, 58, 0.55); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--mm-navy-12);
	border-radius: var(--mm-radius);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--mm-fg);
}
.comment-form p { margin-bottom: 16px; }
.comment-form .submit,
.comments-area .form-submit input {
	display: inline-flex;
	border-radius: 999px;
	background: var(--mm-blue);
	color: #fff;
	border: 0;
	font-weight: 600;
	padding: 11px 24px;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (min-width: 640px) {
	.mm-container { padding-inline: 24px; }
	.mm-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.mm-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.mm-residency__card { grid-template-columns: 1fr 1fr; }
	.mm-residency__media { min-height: 220px; }
	.mm-lead { grid-template-columns: 1.05fr 1fr; }
	.mm-lead__media { min-height: 280px; }
	.mm-guides__grid { grid-template-columns: repeat(2, 1fr); }
	.mm-search-hero__title { font-size: 48px; }
}

@media (min-width: 1024px) {
	.mm-container { padding-inline: 32px; }

	.mm-nav { display: flex; }
	.mm-contribute { display: block; }
	.mm-menu-toggle { display: none; }
	.mm-header__actions { gap: 14px; }

	.mm-hero { padding-block: 56px 60px; }
	.mm-hero__grid { grid-template-columns: 1.18fr 1fr; gap: 56px; }
	.mm-hero__title { font-size: 44px; line-height: 1.1; margin-bottom: 20px; }
	.mm-hero__excerpt { font-size: 18px; }

	.mm-latest { padding-block: 8px 72px; }
	.mm-latest__head h2 { font-size: 32px; }
	.mm-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 30px; }

	.mm-residency__inner { padding-block: 64px 70px; }
	.mm-residency__title { font-size: 34px; }
	.mm-residency__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.mm-residency__card-title { font-size: 23px; }

	.mm-post-header { padding-block: 48px 24px; }
	.mm-post-header__title { font-size: 40px; line-height: 1.14; }
	.mm-post-header__excerpt { font-size: 19px; }
	.mm-prose { font-size: 18px; }
	.mm-prose > p { font-size: 18px; line-height: 1.78; margin-bottom: 26px; }
	.mm-prose blockquote > p { font-size: 24px; }
	.mm-prose > p:first-of-type::first-letter { font-size: 3.75rem; margin: 6px 12px 0 0; }

	.mm-cat-header { padding-block: 44px 48px; }
	.mm-cat-header__title { font-size: 48px; }
	.mm-cat-layout {
		grid-template-columns: 1fr 320px;
		gap: 48px;
		padding-block: 48px 72px;
	}
	.mm-cat-layout__grid.mm-grid--2 { gap: 26px; }
	.mm-sidebar { position: sticky; top: 98px; }
	.mm-lead__media { min-height: 320px; }

	.mm-guides { padding-block: 60px 16px; }
	.mm-guides__head h2 { font-size: 32px; }
	.mm-guides__grid { gap: 24px; }

	.mm-ceo { padding-block: 64px 8px; }
	.mm-ceo__card { grid-template-columns: 420px 1fr; }
	.mm-ceo__media { min-height: 480px; }
	.mm-ceo__body { padding: 46px 48px; }
	.mm-ceo__name { font-size: 38px; }

	.mm-contact { padding-block: 64px 76px; }
	.mm-contact__card { grid-template-columns: 1.1fr 1fr; gap: 44px; padding: 54px 48px; }
	.mm-contact__title { font-size: 30px; }

	.mm-about-hero { padding-block: 70px 76px; }
	.mm-about-hero__title { font-size: 54px; line-height: 1.06; }
	.mm-about-hero__lead { font-size: 19px; }
	.mm-about-intro { padding-block: 64px 8px; }
	.mm-about-intro h2 { font-size: 32px; }
	.mm-about-intro p { font-size: 18px; }

	.mm-aboutband { grid-template-columns: 1.1fr 1fr; gap: 48px; padding-block: 58px; }
	.mm-footgrid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-block: 52px; }
	.mm-related { padding-block: 56px 72px; }
}