/*
Theme Name: Mark Norman
Theme URI: https://marknorman.co.za
Author: Mark Norman
Author URI: https://marknorman.co.za
Description: One-page block theme for marknorman.co.za. Hand-written, self-hosted fonts, no page builder, no form plugin, no SEO plugin; the theme carries its own enquiry form, structured data, meta tags and hardening.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marknorman
Tags: block-theme, one-column, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing
*/

/* -------------------------------------------------------------------------
   Dark theme: the same palette slugs, redefined. Everything downstream uses
   the preset variables, so sections that set a background colour flip too.
   ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--wp--preset--color--paper: #15120f;
		--wp--preset--color--surface: #1e1a16;
		--wp--preset--color--surface-2: #282219;
		--wp--preset--color--rule: #2e2823;
		--wp--preset--color--ink: #f2ede6;
		--wp--preset--color--muted: #a39b92;
		--wp--preset--color--accent: #f47b57;
		--wp--preset--color--accent-2: #f5a55c;
		--wp--preset--color--accent-ink: #f79271;
		--wp--preset--color--accent-soft: #3a2419;
	}
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
	-webkit-font-smoothing: antialiased;
}

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

body {
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

:where(h1, h2, h3, h4) em {
	font-style: normal;
	color: var(--wp--preset--color--accent-ink);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.mn-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
}

.mn-eyebrow + h1,
.mn-eyebrow + h2 {
	margin-top: 0.6rem;
}

.mn-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
}

.mn-lede {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
	color: var(--wp--preset--color--muted);
	max-width: 34em;
}

.mn-lede strong {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.mn-lede-sm {
	color: var(--wp--preset--color--muted);
	max-width: 36em;
}

.mn-muted {
	color: var(--wp--preset--color--muted);
}

/* Buttons */

.wp-block-button__link {
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

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

.mn-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would turn it into the containing block for the navigation's fixed-position
   overlay, trapping the mobile menu inside a 65px bar. */
.mn-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.mn-header__bar {
	min-height: 64px;
}

.wp-block-group.mn-brand {
	gap: 0.7rem;
}

.mn-brand__mark {
	margin: 0;
}

.mn-brand__mark img {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: block;
}

.wp-block-navigation.mn-nav {
	gap: 1.6rem;
}

.mn-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
}

.mn-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}

.mn-header__cta .wp-block-button__link {
	padding: 0.65rem 1.05rem;
	font-size: 0.9rem;
}

/* Collapse the menu to the overlay button below 1000px, not the block's
   default 600px: five links plus a button do not fit in between. */
@media (max-width: 1000px) {
	.mn-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.mn-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

.mn-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: 2rem clamp(1rem, 4vw, 2.5rem);
}

/* Overlay links read left-aligned even though the bar is right-justified. */
.mn-nav.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.mn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.mn-nav .wp-block-navigation__responsive-container-open,
.mn-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* Doubled class beats core's .is-layout-flex { display: flex } on a tie. */
@media (max-width: 480px) {
	.wp-block-buttons.mn-header__cta {
		display: none;
	}
}

.mn-header .wp-block-site-title {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.mn-hero {
	padding-top: clamp(3rem, 8vw, 6.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.mn-hero h1 {
	font-variation-settings: "opsz" 96;
}

.mn-hero .wp-block-buttons {
	margin-top: 2rem;
}

.mn-portrait {
	position: relative;
	aspect-ratio: 1;
	max-width: 520px;
	margin-inline: auto;
	border-radius: 22%;
	background: linear-gradient(160deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent));
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(238, 107, 69, 0.55);
}

.mn-portrait__img {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
}

.mn-portrait__img img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	display: block;
	transform: scale(1.08) translateY(3%);
	transform-origin: bottom center;
}

/* -------------------------------------------------------------------------
   Grids built from Group blocks. Core's flow layout gives every child after
   the first a block-gap top margin, which pushes cells 2+ of a grid down;
   the doubled class outranks core's :where() rule.
   ---------------------------------------------------------------------- */

.mn-strip__grid.mn-strip__grid > *,
.mn-ai-grid.mn-ai-grid > *,
.mn-metrics.mn-metrics > *,
.mn-ba.mn-ba > *,
.mn-work-grid.mn-work-grid > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   Receipts strip
   ---------------------------------------------------------------------- */

.mn-strip {
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mn-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mn-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	padding: 1.25rem 1rem;
	text-align: center;
	border-right: 1px solid var(--wp--preset--color--rule);
}

.mn-strip__item:last-child {
	border-right: 0;
}

.mn-strip__item > * {
	margin: 0;
}

.mn-k {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.mn-v {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.mn-v small {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
	margin-left: 0.4em;
}

@media (max-width: 860px) {
	.mn-strip__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mn-strip__item:nth-child(2) {
		border-right: 0;
	}

	.mn-strip__item:nth-child(-n + 2) {
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
}

@media (max-width: 460px) {
	.mn-strip__grid {
		grid-template-columns: 1fr;
	}

	.mn-strip__item {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.mn-strip__item:last-child {
		border-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   Section heads
   ---------------------------------------------------------------------- */

.mn-sec-head {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.mn-sec-head .mn-lede-sm {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   48-hour timeline
   ---------------------------------------------------------------------- */

.mn-tl {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	padding: clamp(18px, 3vw, 32px);
	overflow: hidden;
}

.mn-tl__days {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.mn-tl__days span {
	border-left: 2px solid var(--wp--preset--color--ink);
	padding-left: 0.6em;
}

.mn-tl__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	height: 72px;
	margin-bottom: 10px;
}

.mn-tl__row::before {
	content: "";
	position: absolute;
	inset: -4px 0;
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--rule) 0 1px, transparent 1px calc(100% / 16));
}

.mn-tl__blk {
	grid-row: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25em;
	margin-right: 4px;
	padding: 0.6em 0.75em;
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.2;
	overflow: hidden;
	transform-origin: left;
}

.mn-tl__blk small {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	font-weight: 400;
	opacity: 0.75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mn-tl__blk.is-narrow small {
	display: none;
}

.mn-tl__blk.is-accent {
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
	color: #fff;
}

.mn-tl__blk.is-accent small {
	opacity: 0.9;
}

.mn-tl__legend {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 1.4rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

.mn-tl__legend b {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
	.mn-tl__blk {
		animation: mn-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.mn-tl__row + .mn-tl__row .mn-tl__blk {
		animation-delay: 0.15s;
	}

	@keyframes mn-grow {
		from {
			transform: scaleX(0.2);
			opacity: 0.4;
		}

		to {
			transform: none;
			opacity: 1;
		}
	}
}

@media (max-width: 760px) {
	.mn-tl__row {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.mn-tl__row::before {
		display: none;
	}

	.mn-tl__blk {
		margin-right: 0;
	}

	.mn-tl__blk.is-narrow small {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   Case study (ink section)
   ---------------------------------------------------------------------- */

.mn-case .mn-eyebrow {
	color: var(--wp--preset--color--accent-2);
}

.mn-case .mn-lede-sm,
.mn-case .mn-muted {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 72%, transparent);
}

.mn-shot {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* Theme images are not attachments, so core adds no width/height; the
   aspect ratios here reserve the space instead. */
.mn-shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 900;
	display: block;
}

.mn-ba {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 1.4rem;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
	border-radius: 8px;
	overflow: hidden;
}

.mn-ba > .wp-block-group {
	background: var(--wp--preset--color--ink);
	padding: 1rem 1.1rem;
	font-size: 0.9rem;
}

.mn-ba .mn-k {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent);
	margin-bottom: 0.5rem;
}

.mn-ba .is-after .mn-k {
	color: var(--wp--preset--color--accent-2);
}

.mn-ba ul {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 85%, transparent);
}

.mn-ba li {
	margin: 0.25em 0;
}

.mn-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
	border-radius: 8px;
	overflow: hidden;
}

.mn-metrics > .wp-block-group {
	background: var(--wp--preset--color--ink);
	padding: 1.1rem 1.2rem;
}

.mn-metrics .mn-v {
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.mn-metrics .mn-v em {
	color: var(--wp--preset--color--accent-2);
	font-style: normal;
}

.mn-metrics .mn-k {
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	margin-top: 0.5rem;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
}

.mn-case__copy {
	margin-top: 1.6rem;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 80%, transparent);
	max-width: 36em;
}

.mn-quote.mn-quote {
	margin: 1.6rem 0 0;
	padding: 1.1rem 0 0 1.2rem;
	border-left: 3px solid var(--wp--preset--color--accent-2);
	border-top: 0;
	max-width: 36em;
}

.mn-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--paper);
}

.mn-quote cite {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-style: normal;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
}

/* -------------------------------------------------------------------------
   How I use AI
   ---------------------------------------------------------------------- */

.mn-ai-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	overflow: hidden;
}

.mn-ai-grid > .wp-block-group {
	background: var(--wp--preset--color--paper);
	padding: clamp(20px, 2.6vw, 32px);
}

.mn-ai-grid .mn-eyebrow {
	margin-bottom: 1.6rem;
}

.mn-ai-grid h3 {
	font-size: 1.35rem;
	margin-bottom: 0.6rem;
}

.mn-ai-grid p:not(.mn-eyebrow) {
	color: var(--wp--preset--color--muted);
	font-size: 0.97rem;
}

.mn-cred {
	margin-top: 2rem;
	padding: 1.2rem 1.4rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: 0 8px 8px 0;
	max-width: 46em;
	font-size: 0.97rem;
}

/* -------------------------------------------------------------------------
   Other builds
   ---------------------------------------------------------------------- */

.mn-work {
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mn-work-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
}

.mn-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.mn-card:hover {
	transform: translateY(-3px);
}

.mn-card__img {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mn-card__img img {
	aspect-ratio: 640 / 420;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top;
	display: block;
}

.mn-card__img.mn-card__img {
	flex: none;
}

.mn-card__body.mn-card__body {
	flex: 1;
	margin: 0;
	padding: 0.9rem 1rem 1rem;
}

.mn-card__body > * + * {
	margin-top: 0.35rem;
}

.mn-card h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0;
}

.mn-card h3 a {
	text-decoration: none;
}

.mn-card__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Tools built with AI
   ---------------------------------------------------------------------- */

.mn-tools {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.mn-tools-list {
	display: grid;
	gap: clamp(14px, 2vw, 24px);
}

.mn-tool {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(20px, 3vw, 36px);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
}

.mn-tool__main > * {
	margin: 0;
}

.mn-tool__main > * + * {
	margin-top: 0.8rem;
}

.mn-tool h3 {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
}

.mn-tool__summary {
	color: var(--wp--preset--color--muted);
	max-width: 36em;
}

.mn-tool__features {
	padding-left: 1.1em;
	font-size: 0.95rem;
}

.mn-tool__features li + li {
	margin-top: 0.3em;
}

.mn-tool__features li::marker {
	color: var(--wp--preset--color--accent);
}

.mn-tool__link a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent);
}

.mn-tool__stack {
	align-self: stretch;
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
	border-left: 1px solid var(--wp--preset--color--rule);
}

.mn-tool__stack .mn-k {
	margin: 0 0 1rem;
}

.mn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mn-tags li {
	padding: 0.45em 0.75em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
}

.mn-tags li:last-child {
	color: var(--wp--preset--color--accent-ink);
	background: var(--wp--preset--color--accent-soft);
	border-color: transparent;
}

@media (max-width: 760px) {
	.mn-tool {
		grid-template-columns: 1fr;
	}

	.mn-tool__stack {
		padding: 1.25rem 0 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--rule);
	}
}

/* -------------------------------------------------------------------------
   Testimonials
   ---------------------------------------------------------------------- */

.mn-testimonials {
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mn-quotes {
	display: grid;
	gap: clamp(14px, 2vw, 24px);
}

.mn-quotes.is-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The first recommendation leads across the full width; the rest pair up. */
.mn-quotes.is-grid .mn-testimonial:first-child {
	grid-column: 1 / -1;
}

@media (max-width: 760px) {
	.mn-quotes.is-grid {
		grid-template-columns: 1fr;
	}
}

.mn-testimonial {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1.6rem;
	margin: 0;
	padding: clamp(22px, 3.2vw, 40px);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
}

.mn-testimonial__quote {
	position: relative;
	margin: 0;
	padding: 0;
}

.mn-testimonial__quote::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.mn-testimonial__quote p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.mn-testimonial__quote p + p {
	margin-top: 0.8em;
}

.mn-testimonial:first-child .mn-testimonial__quote p:first-child {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.mn-testimonial:first-child .mn-testimonial__quote {
	max-width: 46em;
}

.mn-testimonial:not(:first-child) .mn-testimonial__quote p {
	font-size: 1.02rem;
	color: var(--wp--preset--color--ink);
}

.mn-testimonial__by {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.mn-testimonial__photo {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(160deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent));
}

.mn-testimonial__photo.is-initials {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: #fff;
}

.mn-testimonial__who {
	display: grid;
	gap: 0.1rem;
	font-size: 0.9rem;
	line-height: 1.35;
}

.mn-testimonial__who b {
	font-weight: 600;
}

.mn-testimonial__who span {
	color: var(--wp--preset--color--muted);
}

.mn-testimonial__who small {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	color: var(--wp--preset--color--accent-ink);
}

/* -------------------------------------------------------------------------
   Background
   ---------------------------------------------------------------------- */

.mn-bg .mn-lede-sm {
	max-width: none;
}

.mn-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.4rem;
	margin: 1.6rem 0 0;
	font-size: 0.95rem;
}

.mn-facts dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	padding-top: 0.35em;
}

.mn-facts dd {
	margin: 0;
}

.mn-links {
	display: flex;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	font-size: 0.9rem;
}

.mn-links a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 0.1em;
}

.mn-links a:hover {
	border-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.mn-contact__email {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95rem;
	margin-top: 1.6rem;
}

.mn-contact__email a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mn-form {
	display: grid;
	gap: 0.9rem;
}

.mn-form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 500;
}

.mn-form input,
.mn-form select,
.mn-form textarea {
	box-sizing: border-box;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.7em 0.8em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	width: 100%;
	min-width: 0;
}

.mn-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.2em;
}

.mn-form input:focus,
.mn-form select:focus,
.mn-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.mn-form textarea {
	min-height: 130px;
	resize: vertical;
}

.mn-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}

.mn-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mn-form__submit {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.mn-form__submit button {
	cursor: pointer;
}

.mn-form__submit button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mn-form__aside {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.mn-form__privacy {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.mn-form__status {
	padding: 0.9rem 1.1rem;
	border-radius: 6px;
	font-size: 0.95rem;
	margin-bottom: 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.mn-form__status.is-sent {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
}

.mn-form__status.is-error {
	border-color: var(--wp--preset--color--accent-ink);
}

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

.mn-footer {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.wp-block-group.mn-footer__brand {
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.mn-footer__brand img {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	display: block;
}

.mn-footer__brand figure {
	margin: 0;
}

.mn-footer__links {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}

.mn-footer__links a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.mn-footer__links a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 960px) {
	.mn-work-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.mn-ai-grid {
		grid-template-columns: 1fr;
	}

	.mn-portrait {
		max-width: 420px;
		margin-inline: 0;
	}
}

@media (max-width: 781px) {
	/* Core stacks columns here; keep the stacked gaps sane. */
	.mn-sec-head.wp-block-columns {
		gap: 0.75rem;
	}
}

@media (max-width: 760px) {
	.mn-form__row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.mn-work-grid {
		grid-template-columns: 1fr;
	}

	.mn-ba {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Editor
   ---------------------------------------------------------------------- */

.editor-styles-wrapper .mn-form__trap {
	display: none;
}