/*
Theme Name: Mohamed Ali Ahmed
Theme URI: https://mohamedaliahmed.com
Author: mohamedaliahmed.com
Description: Personal site and blog theme for Mohamed Ali Ahmed. Palette taken from the portrait: suit ink, tie wine, lapel-pin gold, shirt mist.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: maa
*/

/* ---------- Tokens ---------- */
:root {
	--ink: #15212C;
	--ink-2: #2B3A48;
	--slate: #56626F;
	--line: #D9E0E7;
	--mist: #EEF2F6;
	--white: #FFFFFF;
	--wine: #8A1C2E;
	--wine-deep: #6D1523;
	--gold: #B8903C;
	--gold-soft: #E9DDBF;

	/* One family everywhere: --serif is kept as the name of the display role. */
	--serif: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1160px;
	--text: 700px;
	--gutter: clamp(22px, 6vw, 72px);
	--radius: 6px;
	--section: clamp(64px, 9vw, 120px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: .2em; }
a:hover { color: var(--wine); }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-text { max-width: calc(var(--text) + var(--gutter) * 2); }

/* ---------- Buttons & links ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font: 600 15px/1 var(--sans);
	padding: 15px 24px;
	border-radius: 999px;
	background: var(--ink); color: var(--white);
	border: 1.5px solid var(--ink);
	text-decoration: none; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--wine); border-color: var(--wine); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-small { padding: 11px 18px; font-size: 14px; }

.text-link {
	font-weight: 600; font-size: 15px; text-decoration: none;
	border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.text-link:hover { border-color: var(--wine); }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 32px; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
	display: grid; place-items: center;
	width: 38px; height: 44px;
	border-radius: 19px 19px 3px 3px;
	background: var(--wine); color: var(--white);
	font: 600 15px/1 var(--serif); letter-spacing: .02em;
	padding-top: 4px;
}
.brand-name { font: 600 19px/1 var(--serif); letter-spacing: -0.015em; white-space: nowrap; }

.primary-nav { margin-left: auto; }
.primary-nav .menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.primary-nav a {
	display: block; padding: 10px 14px; border-radius: 999px;
	font-weight: 500; font-size: 15.5px; text-decoration: none; color: var(--ink-2);
}
.primary-nav a:hover { color: var(--ink); background: var(--mist); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current_page_parent > a,
.primary-nav .current-menu-ancestor > a { color: var(--wine); }
.primary-nav .sub-menu { display: none; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--mist); }
.nav-toggle { display: none; }
.nav-toggle .shut { display: none; }

.site-search { border-top: 1px solid var(--line); background: var(--white); padding: 20px 0; }
.search-form { display: flex; gap: 10px; max-width: 640px; }
.search-form label { flex: 1; }
.search-field {
	width: 100%; font: 400 17px/1.3 var(--sans); color: var(--ink);
	padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white);
}
.search-field:focus { outline: none; border-color: var(--ink); }

@media (max-width: 960px) {
	.header-cta { display: none; }
	.nav-toggle { display: grid; }
	.primary-nav {
		position: fixed; inset: 76px 0 auto 0; margin: 0;
		background: var(--white); border-bottom: 1px solid var(--line);
		padding: 8px var(--gutter) 24px;
		display: none;
	}
	.admin-bar .primary-nav { top: 108px; }
	.nav-open .primary-nav { display: block; }
	.nav-open .nav-toggle .open { display: none; }
	.nav-open .nav-toggle .shut { display: block; }
	.primary-nav .menu { flex-direction: column; }
	.primary-nav a { font: 600 24px/1.2 var(--serif); padding: 12px 0; border-radius: 0; color: var(--ink); }
	.primary-nav a:hover { background: none; color: var(--wine); }
}
@media (max-width: 420px) {
	.brand-name { font-size: 18px; }
	.header-inner { gap: 12px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--mist); overflow: hidden; }
.hero-grid {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: end; gap: clamp(24px, 4vw, 64px);
	min-height: min(720px, calc(100vh - 76px));
}
.hero-copy { padding: clamp(56px, 8vw, 110px) 0; align-self: center; }
.hero-title {
	font-size: clamp(3.1rem, 7.4vw, 6.6rem);
	line-height: .98; letter-spacing: -0.045em; font-weight: 700;
	margin-bottom: .35em;
}
.hero-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 34em; margin-bottom: 36px; }

.credentials { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 40px; padding: 0; }
.credentials > div { padding: 2px 24px 2px 0; margin-right: 24px; border-right: 1px solid var(--line); }
.credentials > div:last-child { border-right: 0; margin-right: 0; }
.credentials dt { font: 700 26px/1 var(--serif); color: var(--wine); margin-bottom: 6px; }
.credentials dd { margin: 0; font-size: 14px; color: var(--slate); max-width: 11em; line-height: 1.35; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-portrait { position: relative; margin: 0; align-self: end; display: flex; justify-content: center; padding-top: 48px; }
.hero-portrait img { position: relative; z-index: 2; width: min(100%, 470px); height: auto; }
.arch { position: absolute; left: 50%; bottom: 0; width: min(88%, 420px); height: 82%; transform: translateX(-50%); border-radius: 999px 999px 0 0; }
.arch-fill { background: var(--wine); z-index: 1; }
.arch-line { border: 1.5px solid var(--gold); border-bottom: 0; z-index: 0; transform: translate(calc(-50% + 22px), -22px); }

@media (max-width: 860px) {
	.hero-grid { grid-template-columns: 1fr; min-height: 0; }
	.hero-copy { padding: 48px 0 8px; }
	.hero-portrait { max-width: 400px; width: 100%; margin: 0 auto; }
	.credentials > div { padding-right: 16px; margin-right: 16px; }
	.credentials dt { font-size: 24px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section-tight { padding-top: clamp(40px, 5vw, 64px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0; }

/* ---------- Cards ---------- */
.card { position: relative; }
.card-media { display: block; text-decoration: none; overflow: hidden; border-radius: var(--radius); background: var(--mist); aspect-ratio: 16 / 10; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-fallback {
	display: grid; place-items: end start; width: 100%; height: 100%; padding: 24px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(184, 144, 60, .25), transparent 60%),
		var(--ink);
	color: var(--gold-soft);
}
.card-fallback span { font: 600 clamp(1.3rem, 2.3vw, 1.8rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.card-cat {
	display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--wine);
	text-decoration: none; margin-bottom: 10px;
}
.card-cat:hover { text-decoration: underline; }
.card-title { font-size: 1.45rem; line-height: 1.2; margin: 0 0 10px; }
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--wine); }
.card-excerpt { color: var(--slate); margin-bottom: 14px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--slate); margin: 0; }
.card-body { padding-top: 20px; }

.card-feature .card-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.08; }
.card-feature .card-excerpt { font-size: 1.08rem; max-width: 38em; }
.card-feature .card-media { aspect-ratio: 16 / 9; }

.card-compact { padding: 22px 0; border-top: 1px solid var(--line); }
.card-compact:first-child { border-top: 0; padding-top: 0; }
.card-compact .card-body { padding: 0; }
.card-compact .card-title { font-size: 1.3rem; }

/* Home latest */
.latest-grid.is-single { grid-template-columns: 1fr; }
.latest-grid.is-single .card-feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.latest-grid.is-single .card-feature .card-body { padding: 0; }
@media (max-width: 860px) { .latest-grid.is-single .card-feature { grid-template-columns: 1fr; gap: 20px; } }
.latest-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) { .latest-grid { grid-template-columns: 1fr; } }

/* Post grid (blog, archives) */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 36px; }
.post-grid .card-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.post-grid .card-feature .card-body { padding: 0; }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.post-grid { grid-template-columns: 1fr; gap: 44px; }
	.post-grid .card-feature { grid-template-columns: 1fr; gap: 0; padding-bottom: 44px; }
	.post-grid .card-feature .card-body { padding-top: 20px; }
}

.related { background: var(--mist); }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 860px) { .related-grid { grid-template-columns: 1fr; } }

.empty-note { padding: 40px; border: 1.5px dashed var(--line); border-radius: var(--radius); max-width: 640px; }
.empty-note p { font: 400 1.15rem/1.6 var(--serif); color: var(--ink-2); }

/* Topics */
.topics { background: var(--white); border-top: 1px solid var(--line); }
.topics-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.topics-intro h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.topics-intro p { color: var(--slate); font-size: 1.1rem; }
.topic-index { list-style: none; margin: 0; padding: 0; }
.topic-index li { border-top: 1px solid var(--line); }
.topic-index li:last-child { border-bottom: 1px solid var(--line); }
.topic-index a {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline;
	padding: 26px 0; text-decoration: none;
}
.topic-name { font: 600 clamp(1.5rem, 2.8vw, 2.1rem)/1.1 var(--serif); letter-spacing: -0.03em; transition: color .2s, transform .2s; }
.topic-desc { grid-column: 1; grid-row: 2; color: var(--slate); max-width: 36em; }
.topic-count { grid-column: 2; grid-row: 1; font-size: 14px; color: var(--slate); white-space: nowrap; }
.topic-index a:hover .topic-name { color: var(--wine); transform: translateX(6px); }
@media (max-width: 860px) { .topics-grid { grid-template-columns: 1fr; } }

/* About teaser */
.about-teaser { background: var(--mist); padding-bottom: 0; }
.about-teaser-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
.about-teaser-photo { position: relative; align-self: end; }
.about-teaser-photo::before {
	content: ""; position: absolute; inset: 14% 8% 0 8%;
	background: var(--ink); border-radius: 999px 999px 0 0;
}
.about-teaser-photo img { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
.about-teaser-copy { padding-bottom: var(--section); align-self: center; }
.about-teaser-copy h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.about-teaser-copy p { font: 400 clamp(1.1rem, 1.6vw, 1.3rem)/1.6 var(--serif); color: var(--ink-2); max-width: 30em; margin-bottom: 28px; }
@media (max-width: 860px) {
	.about-teaser-grid { grid-template-columns: 1fr; }
	.about-teaser-copy { order: -1; padding-bottom: 0; }
	.about-teaser-photo { max-width: 380px; margin: 0 auto; width: 100%; }
}

/* CTA band */
.cta-band { background: var(--wine); color: var(--white); padding: clamp(56px, 7vw, 88px) 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; }
.cta-inner h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: .3em; max-width: 18em; }
.cta-inner p { color: rgba(255, 255, 255, .82); max-width: 36em; margin: 0; font-size: 1.08rem; }

/* ---------- Page heads ---------- */
.page-head { background: var(--mist); padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: .3em; }
.page-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 38em; margin: 0; }
.page-search { margin-top: 28px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.filter a {
	padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
	font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink-2);
}
.filter a:hover { border-color: var(--ink); color: var(--ink); }
.filter a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Pagination ---------- */
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 64px 0 0; padding: 0; }
.pagination a, .pagination span {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
	border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 500;
}
.pagination .current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pagination a:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Article ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.admin-bar .read-progress { top: 32px; }
.read-progress span { display: block; height: 100%; background: var(--wine); transform-origin: 0 50%; transform: scaleX(0); }

.article-head { padding: clamp(48px, 7vw, 96px) 0 40px; }
.article-title { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: .4em; }
.article-dek { font: 400 clamp(1.1rem, 1.8vw, 1.3rem)/1.55 var(--serif); color: var(--slate); margin-bottom: 28px; }
.byline { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--wine); object-fit: cover; object-position: 50% 6%; }
.byline-name { display: block; font-weight: 600; }
.byline-meta { display: flex; gap: 14px; font-size: 14px; color: var(--slate); }

.article-hero { margin: 0 auto 56px; }
.article-hero img { width: 100%; border-radius: var(--radius); }
.article-hero figcaption { font-size: 14px; color: var(--slate); margin-top: 10px; }

.article-layout { display: grid; grid-template-columns: 1fr minmax(0, var(--text)) 1fr; gap: 0 40px; }
.article-layout .prose { grid-column: 2; }
.share { grid-column: 1; justify-self: end; position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.share-label { font-size: 12.5px; color: var(--slate); margin-bottom: 4px; }
.share a, .share button {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	border: 1.5px solid var(--line); background: var(--white); color: var(--ink-2); cursor: pointer; padding: 0;
}
.share a:hover, .share button:hover { border-color: var(--wine); color: var(--wine); }
.share .icon { width: 17px; height: 17px; }
.copy-status { font-size: 12px; color: var(--wine); min-height: 1em; text-align: center; }
@media (max-width: 1080px) {
	.article-layout { grid-template-columns: minmax(0, var(--text)); justify-content: center; }
	.article-layout .prose { grid-column: 1; }
	.share { grid-column: 1; grid-row: 2; position: static; flex-direction: row; justify-self: start; margin-top: 40px; }
	.share-label { margin: 0 6px 0 0; }
}

/* Prose (posts and block pages) */
.prose, .entry { font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.prose > * + *, .entry > * + * { margin-top: 1.1em; }
.prose p, .entry p { margin-bottom: 0; }
.prose > *:first-child, .entry > *:first-child { margin-top: 0; }
.prose h2, .entry h2 { font-size: 1.9rem; margin-top: 1.8em; margin-bottom: 0; }
.prose h3, .entry h3 { font-size: 1.45rem; margin-top: 1.6em; margin-bottom: 0; }
.prose a, .entry a { color: var(--wine); text-decoration-thickness: 1px; }
.prose ul, .prose ol, .entry ul, .entry ol { padding-left: 1.3em; }
.prose li + li, .entry li + li { margin-top: .4em; }
.prose blockquote, .entry blockquote:not(.wp-block-pullquote blockquote) {
	margin: 1.8em 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--gold);
	font-size: 1.3rem; line-height: 1.5; font-weight: 500; color: var(--ink-2);
}
.prose blockquote cite, .entry blockquote cite { display: block; margin-top: .6em; font: normal 600 14px/1.4 var(--sans); color: var(--slate); }
.prose img, .entry img { border-radius: var(--radius); }
.prose figcaption, .entry figcaption { font: 14px/1.5 var(--sans); color: var(--slate); margin-top: 10px; }
.prose hr, .entry hr { border: 0; height: 1px; background: var(--line); margin: 2.5em 0; }
.prose code { font-size: .85em; background: var(--mist); padding: 2px 6px; border-radius: 4px; }
.prose pre { background: var(--ink); color: #E8EDF2; padding: 20px; border-radius: var(--radius); overflow-x: auto; font-size: .9rem; }
.prose table, .entry table { width: 100%; border-collapse: collapse; font: 15.5px/1.5 var(--sans); }
.prose th, .prose td, .entry th, .entry td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.prose .alignwide { margin-left: -80px; margin-right: -80px; }
@media (max-width: 900px) { .prose .alignwide { margin-left: 0; margin-right: 0; } }
.prose > p:first-child::first-letter {
	float: left; font-size: 4.4em; line-height: .82; padding: .04em .1em 0 0; color: var(--wine); font-weight: 700;
}

.article-foot { padding-top: 56px; padding-bottom: 72px; }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; padding: 0; }
.tag-list a { display: block; padding: 7px 14px; border-radius: 999px; background: var(--mist); font-size: 14px; text-decoration: none; }
.tag-list a:hover { background: var(--ink); color: var(--white); }

.author-box { display: grid; grid-template-columns: 112px 1fr; gap: 28px; align-items: center; padding: 32px; background: var(--mist); border-radius: var(--radius); }
.author-photo { display: block; width: 112px; height: 132px; border-radius: 56px 56px 4px 4px; background: var(--wine); overflow: hidden; }
.author-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.author-box h2 { font-size: 1.45rem; margin-bottom: .3em; }
.author-box p { color: var(--ink-2); margin-bottom: 12px; }
@media (max-width: 560px) { .author-box { grid-template-columns: 1fr; padding: 24px; } }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.post-nav a { display: block; padding: 22px 0; border-top: 2px solid var(--ink); text-decoration: none; font: 600 1.1rem/1.35 var(--serif); }
.post-nav a span { display: block; font: 600 13px/1 var(--sans); color: var(--slate); margin-bottom: 10px; }
.post-nav-next { grid-column: 2; text-align: right; }
@media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { grid-column: 1; text-align: left; } }

/* Comments */
.comments-wrap { padding-bottom: 88px; }
.comments { border-top: 1px solid var(--line); padding-top: 48px; }
.comments-title, .comment-reply-title { font-size: 1.8rem; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 28px; border-left: 2px solid var(--line); margin-left: 20px; }
.comment-body { padding: 22px 0; border-bottom: 1px solid var(--line); }
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-meta img { border-radius: 50%; }
.comment-author { display: block; font-weight: 600; }
.comment-meta time { font-size: 13.5px; color: var(--slate); }
.comment-reply a { font-size: 14px; font-weight: 600; color: var(--wine); }
.comment-form { display: grid; gap: 16px; }
.comment-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea {
	width: 100%; font: 400 16px/1.5 var(--sans); color: var(--ink);
	padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.comment-form input:focus, .comment-form textarea:focus, .wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: none; border-color: var(--ink); }
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: start; font-size: 14px; }
.comment-form-cookies-consent label { font-weight: 400; }

/* ---------- Block page components (About, Research, Contact, legal) ---------- */
.page-body { padding: clamp(48px, 7vw, 96px) 0; }
.entry { max-width: calc(var(--text) + var(--gutter) * 2); }
.entry.wrap { font-size: 1.1rem; }
.entry .is-style-lede, .entry .maa-lede { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.5; color: var(--ink-2); }

/* Wide break-outs inside page content */
.entry .maa-wide, .entry .maa-intro {
	width: min(var(--wrap), calc(100vw - var(--gutter) * 2));
	margin-left: 50%; transform: translateX(-50%);
	font-family: var(--sans); font-size: 17px; line-height: 1.6;
}

/* Credential ledger */
.maa-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); margin-top: 2.2em !important; margin-bottom: 1em; }
.maa-ledger > * { padding: 26px 28px 8px 0; margin: 0 !important; }
.maa-ledger > * + * { padding-left: 28px; border-left: 1px solid var(--line); }
.maa-ledger h3 { font: 700 2.2rem/1 var(--serif) !important; letter-spacing: -0.03em; color: var(--wine); margin: 0 0 .35em !important; }
.maa-ledger p { font-size: 15.5px; color: var(--slate); margin: 0; }
@media (max-width: 720px) {
	.maa-ledger { grid-template-columns: 1fr; }
	.maa-ledger > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Focus rows: alternating tints, not identical cards */
.maa-focus { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-top: 2em !important; }
.maa-focus > * { padding: 32px 28px; border-radius: var(--radius); margin: 0 !important; }
.maa-focus > *:nth-child(1) { background: var(--ink); color: var(--white); grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
.maa-focus > *:nth-child(1) h3 { font-size: 2.2rem !important; color: var(--gold-soft); }
.maa-focus > *:nth-child(1) p { color: rgba(255, 255, 255, .8); }
.maa-focus > *:nth-child(2) { background: var(--mist); }
.maa-focus > *:nth-child(3) { background: var(--gold-soft); }
.maa-focus > *:nth-child(4) { background: var(--white); border: 1.5px solid var(--line); grid-column: span 2; }
.maa-focus h3 { font: 600 1.4rem/1.15 var(--serif) !important; margin: 0 0 .5em !important; }
.maa-focus p { margin: 0; font-size: 16px; }
@media (max-width: 860px) {
	.maa-focus { grid-template-columns: 1fr; }
	.maa-focus > *:nth-child(1) { grid-row: auto; min-height: 0; }
	.maa-focus > *:nth-child(4) { grid-column: auto; }
}

/* About intro with portrait */
.maa-intro { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.maa-intro > * { margin: 0 !important; }
.maa-intro .wp-block-image { position: relative; }
.maa-intro .wp-block-image::before { content: ""; position: absolute; inset: 12% 6% 0 6%; background: var(--wine); border-radius: 999px 999px 0 0; }
.maa-intro .wp-block-image img { position: relative; border-radius: 0; width: 100%; }
.maa-intro p { font: 400 clamp(1.1rem, 1.7vw, 1.3rem)/1.65 var(--serif); color: var(--ink-2); }
.maa-intro p + p { margin-top: 1em; }
@media (max-width: 860px) { .maa-intro { grid-template-columns: 1fr; } .maa-intro .wp-block-image { max-width: 360px; } }

.maa-note { background: var(--mist); border-left: 3px solid var(--gold); padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; font: 16px/1.6 var(--sans) !important; color: var(--ink-2); }

/* Contact page */
.maa-contact { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.maa-contact > * { margin: 0 !important; }
.maa-contact h2 { margin-top: 0 !important; }
.maa-contact-aside p { font-size: 17px; font-family: var(--sans); color: var(--ink-2); }
.maa-contact-aside ul { list-style: none; padding: 0 !important; font: 16px/1.5 var(--sans); }
.maa-contact-aside li { padding: 14px 0; border-top: 1px solid var(--line); }
.maa-contact-aside li strong { display: block; font-size: 13.5px; color: var(--slate); font-weight: 600; }
@media (max-width: 860px) { .maa-contact { grid-template-columns: 1fr; } }

.wpcf7 form { display: grid; gap: 18px; font-family: var(--sans); font-size: 16px; }
.wpcf7 form p { margin: 0 !important; }
.wpcf7 label { display: block; font-weight: 600; font-size: 14.5px; }
.wpcf7 label .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7 .maa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .wpcf7 .maa-row { grid-template-columns: 1fr; } }
.wpcf7 input[type="submit"] {
	font: 600 15px/1 var(--sans); padding: 16px 28px; border-radius: 999px; border: 0;
	background: var(--ink); color: var(--white); cursor: pointer; justify-self: start;
}
.wpcf7 input[type="submit"]:hover { background: var(--wine); }
.wpcf7-not-valid-tip { font-size: 13.5px; color: var(--wine); margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 14px 18px; border-radius: var(--radius); font-size: 15px; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }

/* Legal pages */
.entry h2 + p { margin-top: .5em; }

/* ---------- 404 ---------- */
.not-found { background: var(--mist); padding: clamp(64px, 9vw, 128px) 0; }
.not-found-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.not-found-arch {
	aspect-ratio: 4 / 5; max-width: 360px; width: 100%;
	background: var(--wine); border-radius: 999px 999px 0 0;
	display: grid; place-items: center; position: relative;
}
.not-found-arch::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--gold); border-bottom: 0; border-radius: inherit; transform: translate(20px, -20px); }
.not-found-arch span { font: 700 clamp(4rem, 10vw, 7rem)/1 var(--serif); color: var(--gold-soft); letter-spacing: -0.04em; }
.not-found-copy h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -0.025em; }
.not-found-copy > p { font-size: 1.15rem; color: var(--ink-2); max-width: 32em; }
.not-found-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 32px 0 0; }
.not-found-links a { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
@media (max-width: 760px) { .not-found-grid { grid-template-columns: 1fr; } .not-found-arch { max-width: 220px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .78); padding-top: clamp(64px, 8vw, 96px); font-size: 15.5px; }
.site-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 64px; }
.brand-light, .brand-light:hover { color: var(--white); }
.footer-about p { margin: 20px 0 24px; max-width: 30em; }
.footer-col h2 { font: 600 14px/1.2 var(--sans); color: var(--gold); margin-bottom: 18px; letter-spacing: 0; }
.footer-menu, .legal-menu, .social-links { list-style: none; margin: 0; padding: 0; }
.footer-menu li + li { margin-top: 10px; }
.footer-menu .children { display: none; }
.social-links { display: flex; gap: 8px; }
.social-links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); }
.social-links a:hover { border-color: var(--gold); }
.social-links .icon { width: 17px; height: 17px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }
.footer-bottom p { margin: 0; }
.legal-menu { display: flex; flex-wrap: wrap; gap: 20px; }
.to-top { margin-left: auto; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .to-top { margin-left: 0; } }

/* ---------- WordPress core ---------- */
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .gallery-caption { font-size: 14px; color: var(--slate); }
.sticky { position: relative; }
.bypostauthor > .comment-body .comment-author::after { content: " (author)"; font-weight: 400; color: var(--slate); }
.page-links { font: 15px var(--sans); margin-top: 2em; }

/* About and Leadership use the full width so the intro, ledger and focus grid share one left edge. */
.page-wide .entry { max-width: calc(var(--wrap) + var(--gutter) * 2); }
.page-wide .entry .maa-intro, .page-wide .entry .maa-wide { width: auto; margin-left: 0; transform: none; }

@media (max-width: 560px) {
	.credentials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.credentials > div { padding: 0 10px 0 0; margin: 0 10px 0 0; }
	.credentials > div:last-child { margin: 0; padding: 0; }
	.credentials dt { font-size: 22px; }
	.credentials dd { font-size: 12.5px; }
}

/* Writing page: a lone card on the last row (feature + 3n + 1) becomes a wide horizontal card instead of an orphan. */
@media (min-width: 961px) {
	.post-grid > .card-feature ~ .card-row:last-child:nth-child(3n+2) {
		grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 36px; align-items: center;
	}
	.post-grid > .card-feature ~ .card-row:last-child:nth-child(3n+2) .card-body { padding-top: 0; max-width: 36em; }
	.post-grid > .card-feature ~ .card-row:last-child:nth-child(3n+2) .card-title { font-size: 1.9rem; }
}

/* ---------- Leadership page ---------- */

/* Current role: brand panel beside the role copy. */
.maa-role { display: grid !important; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.maa-role > * { margin: 0 !important; }
.maa-role-brand {
	position: relative; min-height: 440px; overflow: hidden;
	background: var(--ink); border-radius: var(--radius);
	padding: 32px !important;
}
.maa-role-brand::before {
	content: ""; position: absolute; right: -12%; bottom: -30%; width: 78%; aspect-ratio: 1;
	border: 1.5px solid rgba(184, 144, 60, .55); border-radius: 50%;
}
.maa-role-brand .maa-role-logo { position: relative; z-index: 2; width: 132px; margin: 0 !important; }
.maa-role-brand .maa-role-logo img { width: 132px; height: 132px; object-fit: cover; border-radius: 14px; background: #fff; }
.maa-role-brand .maa-role-tyre { position: absolute; right: -6%; bottom: -14%; width: 72%; margin: 0 !important; z-index: 1; }
.maa-role-brand .maa-role-tyre img { width: 100%; border-radius: 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.maa-role-copy h2 { font-size: clamp(2rem, 3.6vw, 2.9rem) !important; margin: 0 0 .35em !important; line-height: 1.05; letter-spacing: -0.03em; }
.maa-role-copy .maa-role-org { font-weight: 600; color: var(--wine); font-size: 1.05rem; margin: 0 0 1.2em !important; }
.maa-role-copy p { color: var(--ink-2); }
.maa-role-copy p + p { margin-top: 1em; }
.maa-role-copy .wp-block-buttons { margin-top: 28px !important; }
@media (max-width: 860px) {
	.maa-role { grid-template-columns: 1fr; }
	.maa-role-brand { min-height: 320px; }
}

/* Buttons from the block editor use the theme button. */
.entry .wp-block-button__link {
	display: inline-flex; font: 600 15px/1 var(--sans); padding: 15px 24px; border-radius: 999px;
	background: var(--ink); color: var(--white); text-decoration: none;
}
.entry .wp-block-button__link:hover { background: var(--wine); color: var(--white); }
.entry .is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.entry .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Business facts: tile sizes follow how much each fact matters. */
.maa-facts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 14px; margin-top: 1.6em !important; }
.maa-facts > * { margin: 0 !important; padding: 26px !important; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: flex-end; }
.maa-facts h3 { font: 700 clamp(2rem, 3.4vw, 2.9rem)/1 var(--serif) !important; letter-spacing: -0.04em; margin: 0 0 .3em !important; }
.maa-facts p { margin: 0 !important; font-size: 15.5px; line-height: 1.5; }
.maa-facts > *:nth-child(1) { grid-column: span 2; grid-row: span 2; background: var(--ink); color: var(--white); }
.maa-facts > *:nth-child(1) h3 { font-size: clamp(3.4rem, 7vw, 5.6rem) !important; color: var(--gold-soft); }
.maa-facts > *:nth-child(1) p { color: rgba(255, 255, 255, .8); font-size: 17px; max-width: 26em; }
.maa-facts > *:nth-child(2) { grid-column: span 2; background: var(--wine); color: var(--white); }
.maa-facts > *:nth-child(2) p { color: rgba(255, 255, 255, .85); }
.maa-facts > *:nth-child(3) { background: var(--gold-soft); }
.maa-facts > *:nth-child(4) { background: var(--mist); }
.maa-facts > *:nth-child(3) h3, .maa-facts > *:nth-child(4) h3 { font-size: clamp(1.6rem, 2.4vw, 2rem) !important; }
@media (max-width: 860px) {
	.maa-facts { grid-template-columns: 1fr 1fr; }
	.maa-facts > *:nth-child(1) { grid-row: auto; }
}
@media (max-width: 520px) {
	.maa-facts { grid-template-columns: 1fr; }
	.maa-facts > * { grid-column: auto !important; }
}

/* Partner brand logos. */
.maa-logos { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 1.4em !important; }
.maa-logos > * { margin: 0 !important; }
.maa-logos .wp-block-image { display: grid; place-items: center; height: 110px; padding: 18px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.maa-logos .wp-block-image img { max-height: 70px; width: auto; max-width: 100%; object-fit: contain; border-radius: 0; }
@media (max-width: 860px) { .maa-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .maa-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.maa-posts { margin-top: 1.6em !important; font-family: var(--sans); font-size: 17px; line-height: 1.6; }
.maa-posts .card-title { font-size: 1.3rem; }
.entry .maa-posts a { color: inherit; }
.entry h2.maa-section { margin-top: 2.4em; }
.entry .maa-posts .card-cat { color: var(--wine); margin-bottom: 10px; }
.entry .maa-posts .card-title { margin: 0 0 10px; line-height: 1.2; }
.entry .maa-posts .card-title a { color: var(--ink); text-decoration: none; }
.entry .maa-posts .card-title a:hover { color: var(--wine); }
.entry .maa-posts .card-excerpt { margin: 0 0 14px; }
.entry .maa-posts .card-meta { margin: 0; }
.entry .maa-posts > * + * { margin-top: 0; }
