/* ===========================================================
   THE MEASURED RECORD
   Rail / Text / Outer · Paper / Ink · restrained bronze.
   Logical properties throughout so RTL mirrors by construction.
   =========================================================== */

:root {
  --mr-rail: 4.5rem;
  --mr-gutter: 2.5rem;
  --mr-margin: 4.5rem;
  --mr-measure: 40rem;
  --mr-frame: 78rem;
  --mr-dur-state: 120ms;
  --mr-dur-element: 200ms;
  --mr-ease-state: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1023px) { :root { --mr-rail: 2.5rem; --mr-margin: 2.5rem; --mr-gutter: 2rem; } }
@media (max-width: 767px)  { :root { --mr-rail: 0rem;   --mr-margin: 1.25rem; --mr-gutter: 1.5rem; } }

/* --- base ------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--on-paper);
       font-synthesis-weight: none; font-synthesis-style: none; text-rendering: optimizeLegibility; }
::selection { background: #E3DCCB; color: #14171A; }
img, svg, video { max-inline-size: 100%; block-size: auto; }

/* Focus: maximum-contrast neutral, never bronze. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--on-paper);
  outline-offset: 2px;
}
.mr-footer :where(a, button):focus-visible { outline-color: var(--wp--preset--color--on-ink); }

/* --- frame + three zones ---------------------------------- */
.mr-main {
  max-inline-size: var(--mr-frame);
  margin-inline: auto;
  padding-inline: var(--mr-margin);
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) 6rem;
}
.mr-main > * { max-inline-size: var(--mr-measure); }
.mr-main > .alignwide { max-inline-size: 72rem; }
.mr-main > .alignfull { max-inline-size: none; }

/* The rail is a leading-edge offset, not a column of boxes. */
@media (min-width: 1024px) {
  .mr-main { padding-inline-start: calc(var(--mr-margin) + var(--mr-rail) + var(--mr-gutter)); }
}

/* --- header ----------------------------------------------- */
.mr-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--wp--preset--color--paper);
  border-block-end: 1px solid transparent;
  transition: border-color var(--mr-dur-state) var(--mr-ease-state);
}
.mr-header.is-scrolled { border-block-end-color: var(--wp--preset--color--rule-paper); }
.mr-header__inner {
  max-inline-size: var(--mr-frame); margin-inline: auto;
  padding: 1.25rem var(--mr-margin);
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
}
.mr-nameplate a, .mr-nameplate {
  font-family: var(--wp--preset--font-family--editorial);
  font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--wp--preset--color--on-paper); text-decoration: none;
}
.mr-nav a {
  font-family: var(--wp--preset--font-family--system);
  font-size: 0.9375rem; text-decoration: none;
  color: var(--wp--preset--color--on-paper-secondary);
  padding-block: 0.25rem;
  border-block-end: 1px solid transparent;
  transition: color var(--mr-dur-state) var(--mr-ease-state), border-color var(--mr-dur-state) var(--mr-ease-state);
}
.mr-nav a:hover { color: var(--wp--preset--color--on-paper); border-block-end-color: var(--wp--preset--color--bronze-paper); }
.mr-nav .current-menu-item > a { color: var(--wp--preset--color--on-paper); border-block-end-color: var(--wp--preset--color--bronze-paper); }

/* --- editorial rhythm ------------------------------------- */
.mr-pagetitle { margin-block-end: 2rem; }
.mr-main :is(h2, h3) { margin-block-start: 3rem; }
.mr-main :is(h2, h3) + p { margin-block-start: 0.75rem; }
.mr-main p { margin-block: 0 1.25rem; }
.mr-main p:last-child { margin-block-end: 0; }

/* Section label with the bronze leading rule — 2px × 12px. */
.mr-label {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--on-paper-muted);
  display: flex; align-items: center; gap: 0.75rem;
}
.mr-label::before {
  content: ""; inline-size: 0.75rem; block-size: 2px;
  background: var(--wp--preset--color--bronze-paper); flex: none;
}

/* Indexed list — the record, not a card grid. */
.mr-indexed { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--rule-paper); }
.mr-indexed > li { border-block-end: 1px solid var(--wp--preset--color--rule-paper); }
.mr-indexed > li > a {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem;
  padding-block: 1.5rem; text-decoration: none; color: inherit;
  border-inline-start: 2px solid transparent; padding-inline-start: 0;
  transition: border-color var(--mr-dur-state) var(--mr-ease-state), padding-inline-start var(--mr-dur-element) var(--mr-ease-state);
}
.mr-indexed > li > a:hover { border-inline-start-color: var(--wp--preset--color--bronze-paper); padding-inline-start: 1rem; }
.mr-indexed__num {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--on-paper-muted);
}
.mr-indexed__title { font-family: var(--wp--preset--font-family--editorial); font-size: var(--wp--preset--font-size--heading-3); }
.mr-indexed__meta  { font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--metadata); color: var(--wp--preset--color--on-paper-muted); margin-block-start: 0.375rem; }

/* Evidence line — quiet, factual. */
.mr-evidence {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  color: var(--wp--preset--color--on-paper-muted);
}

/* --- ink surface ------------------------------------------ */
.mr-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); }
.mr-ink a { color: var(--wp--preset--color--bronze-link); }
.mr-ink .mr-label { color: var(--wp--preset--color--on-ink-muted); }
.mr-ink .mr-label::before { background: var(--wp--preset--color--bronze-ink); }

/* --- footer ----------------------------------------------- */
.mr-footer { padding-block: 4rem; }
.mr-footer__inner { max-inline-size: var(--mr-frame); margin-inline: auto; padding-inline: var(--mr-margin); }
.mr-footer__name { font-family: var(--wp--preset--font-family--editorial); font-size: var(--wp--preset--font-size--heading-3); margin: 0; }
.mr-footer__role { font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--body-small); color: var(--wp--preset--color--on-ink-secondary); margin: 0.25rem 0 0; }
.mr-footer__meta { font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--metadata); color: var(--wp--preset--color--on-ink-muted); margin: 1.5rem 0 0; }

/* --- Arabic ----------------------------------------------- */
.mr-ar body, body.mr-ar { font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; }
body.mr-ar { line-height: 1.85; }
body.mr-ar :is(h1,h2,h3) { font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; letter-spacing: 0; line-height: 1.4; }
body.mr-ar :is(.mr-nameplate, .mr-nameplate a, .mr-indexed__title, .mr-footer__name) {
  font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; letter-spacing: 0;
}
body.mr-ar :is(.mr-label, .mr-nav a, .mr-crumbs, .mr-crumbs a, .mr-lang, .mr-indexed__num, .mr-indexed__meta, .mr-evidence, .mr-footer__role, .mr-footer__meta) {
  font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', sans-serif;
}
/* The Arabic label carries its hierarchy through family, size, colour
 * and the bronze rule. Weight is the weakest of the four in naskh at
 * 12px, and IBM Plex Sans Arabic has no variable build, so a second
 * weight is a whole extra file. It sits at 400. */
body.mr-ar .mr-label { letter-spacing: 0; text-transform: none; font-weight: 400; }
/* Latin runs inside Arabic prose stay in the Arabic family's own
 * harmonised Latin — the reason Arabic pages need no Latin family
 * at all. Only an LTR page routes an explicit Latin run to the
 * Latin system face. */
body:not(.mr-ar) :is(bdi, .mr-latin) { font-family: var(--wp--preset--font-family--system); }
body.mr-ar :is(bdi, .mr-latin) { font-family: inherit; }

/* --- motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- print ------------------------------------------------ */
@media print { .mr-header, .mr-footer { display: none; } .mr-main { padding: 0; max-inline-size: none; } }

/* --- header chrome, switcher, breadcrumbs ------------------ */
.mr-header__inner { display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  max-inline-size:var(--mr-frame); margin-inline:auto; padding:1.25rem var(--mr-margin); }
.mr-header__right { display:flex; align-items:baseline; gap:1.75rem; }
.mr-nav ul { display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.mr-nav a { font-family:var(--wp--preset--font-family--system); font-size:0.9375rem; text-decoration:none;
  color:var(--wp--preset--color--on-paper-secondary); padding-block:0.25rem;
  border-block-end:1px solid transparent; transition:color var(--mr-dur-state) var(--mr-ease-state), border-color var(--mr-dur-state) var(--mr-ease-state); }
.mr-nav a:hover, .mr-nav a[aria-current="page"] { color:var(--wp--preset--color--on-paper);
  border-block-end-color:var(--wp--preset--color--bronze-paper); }
.mr-lang { font-family:var(--wp--preset--font-family--system); font-size:0.875rem; text-decoration:none;
  color:var(--wp--preset--color--on-paper-muted); padding-inline-start:1.75rem; position:relative; white-space:nowrap; }
.mr-lang::before { content:""; position:absolute; inset-inline-start:0.75rem; inset-block-start:0.15em;
  inline-size:1px; block-size:1em; background:var(--wp--preset--color--rule-paper-structural); }
.mr-lang:hover { color:var(--wp--preset--color--bronze-paper); }
.mr-crumbs ol { display:flex; flex-wrap:wrap; gap:0.5rem; list-style:none; margin:0 0 2.5rem; padding:0;
  font-family:var(--wp--preset--font-family--system); font-size:var(--wp--preset--font-size--metadata);
  color:var(--wp--preset--color--on-paper-muted); }
.mr-crumbs li + li::before { content:"/"; margin-inline-end:0.5rem; color:var(--wp--preset--color--rule-paper-structural); }
.mr-crumbs a { color:inherit; text-decoration:none; border-block-end:1px solid var(--wp--preset--color--rule-paper); }
.mr-crumbs a:hover { color:var(--wp--preset--color--on-paper); border-block-end-color:var(--wp--preset--color--bronze-paper); }
body.mr-ar :is(.mr-crumbs, .mr-crumbs ol, .mr-lang) { font-family:'IBM Plex Sans Arabic','Geeza Pro',sans-serif; }
.mr-footer { background:var(--wp--preset--color--ink); color:var(--wp--preset--color--on-ink); padding-block:4rem; }
.mr-footer__name span { font-family:'Noto Naskh Arabic',serif; margin-inline-start:0.75rem;
  color:var(--wp--preset--color--on-ink-secondary); }
@media (max-width:767px){
  .mr-header__inner { flex-wrap:wrap; gap:0.75rem; }
  .mr-header__right { inline-size:100%; justify-content:space-between; }
  .mr-nav ul { gap:1rem; }
  .mr-nav a { font-size:0.875rem; }
}
/* ---------------------------------------------------------------
 * Arabic in the chrome of an English page
 *
 * The footer signature and the language switcher carry Arabic on
 * every English page. Loading the full Noto Naskh Arabic face for
 * two words costs 94 KB — 44% of the English budget for 0.1% of
 * the words. This is a letters-only cut of the same face: every
 * Arabic letter and its contextual forms, no diacritics, no
 * punctuation, no digits. 15.7 KB, and it survives a change of
 * wording. Arabic pages load the full face and never see this one.
 *
 * Noto Naskh Arabic declares no Reserved Font Name, so a subset
 * may be redistributed. Licence: assets/fonts/OFL-Noto-Naskh-Arabic.txt
 * ------------------------------------------------------------- */
@font-face {
	font-family: 'MA Chrome Arabic';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/ma-chrome-arabic.woff2') format('woff2');
	/*
	 * The declared range is narrower than the file. Google's cut also carries
	 * Latin punctuation and digits, because the request contained them — but
	 * declaring those here would hand English full stops and brackets to an
	 * Arabic face. Only the Arabic block, Arabic punctuation, Arabic-Indic
	 * digits and the ellipsis are claimed.
	 */
	unicode-range: U+60C, U+61B, U+61F, U+621-63A, U+640-655, U+660-669, U+670, U+2026;
}

/* Any Arabic run inside an English page: the switcher, the footer
   signature, and a quotation from a manuscript. */
[dir="ltr"] [lang="ar"],
[dir="ltr"] .mr-lang {
	font-family: 'MA Chrome Arabic', 'Geeza Pro', 'Al Bayan', serif;
}
[dir="ltr"] blockquote [lang="ar"] {
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.85;
}
/* ---------------------------------------------------------------
 * Contact form
 *
 * Five fields, one fieldset, no card. The form is set in the record's
 * own material: rules rather than boxes, the bronze reserved for the
 * focus ring and the submit underline. Everything is sized in rem so
 * it holds at 200% zoom, and every rule is logical so RTL needs no
 * second stylesheet.
 * ------------------------------------------------------------- */
.mr-form { max-inline-size: 36rem; margin-block-start: 3rem; }

.mr-form__form { display: grid; gap: 2rem; }

.mr-form__intents { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.mr-form__intents > .mr-label { padding: 0; margin-block-end: 0.5rem; }
.mr-form__hint {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  color: var(--wp--preset--color--on-paper-muted);
  margin: 0 0 0.75rem;
}
.mr-form__hint:empty { display: none; }

.mr-form__intent {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding-block: 0.625rem;
  border-block-end: 1px solid var(--wp--preset--color--rule-paper);
  cursor: pointer;
}
.mr-form__intent:first-of-type { border-block-start: 1px solid var(--wp--preset--color--rule-paper); }
.mr-form__intent input { flex: none; accent-color: var(--wp--preset--color--bronze-paper); margin: 0; }
.mr-form__intent span {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--body-small);
  color: var(--wp--preset--color--on-paper-secondary);
}
.mr-form__intent:hover span { color: var(--wp--preset--color--on-paper); }
.mr-form__intent:has(input:checked) span { color: var(--wp--preset--color--on-paper); }

.mr-form__field { display: grid; gap: 0.375rem; }
.mr-form__field[hidden] { display: none; }
.mr-form__field label {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--wp--preset--color--on-paper-muted);
}
.mr-form__opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.mr-form input[type="text"],
.mr-form input[type="email"],
.mr-form textarea {
  font: inherit; inline-size: 100%; padding: 0.625rem 0;
  color: var(--wp--preset--color--on-paper);
  background: transparent; border: 0;
  border-block-end: 1px solid var(--wp--preset--color--rule-paper-structural);
  border-radius: 0;
  transition: border-color var(--mr-dur-state) var(--mr-ease-state);
}
.mr-form textarea { resize: vertical; min-block-size: 8rem; line-height: inherit; }
.mr-form input:hover, .mr-form textarea:hover { border-block-end-color: var(--wp--preset--color--on-paper-muted); }
.mr-form input:focus-visible, .mr-form textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--bronze-paper); outline-offset: 3px;
  border-block-end-color: var(--wp--preset--color--bronze-paper);
}
.mr-form [aria-invalid="true"] { border-block-end-color: var(--wp--preset--color--bronze-paper); border-block-end-width: 2px; }

.mr-form__error, .mr-form__errors {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  color: var(--wp--preset--color--on-paper);
}
.mr-form__error { margin: 0; }
.mr-form__errors {
  border-inline-start: 2px solid var(--wp--preset--color--bronze-paper);
  padding-inline-start: 1rem; margin-block-end: 2rem;
}
.mr-form__errors ul { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; }
.mr-form__errors a { color: inherit; }

/* The honeypot. Clipped rather than display:none  a bot that reads
   computed styles skips a hidden field, and a screen reader skips this
   one because the wrapper is aria-hidden and the input is untabbable. */
.mr-form__trap {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.mr-form__foot { display: grid; gap: 0.75rem; justify-items: start; }
.mr-btn {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 500; letter-spacing: 0.02em;
  color: var(--wp--preset--color--on-paper);
  background: transparent; border: 0;
  border-block-end: 2px solid var(--wp--preset--color--bronze-paper);
  border-radius: 0; padding: 0.5rem 0.125rem; cursor: pointer;
  transition: color var(--mr-dur-state) var(--mr-ease-state), padding-inline var(--mr-dur-element) var(--mr-ease-state);
}
.mr-btn:hover { padding-inline: 0.75rem; }
.mr-btn:focus-visible { outline: 2px solid var(--wp--preset--color--bronze-paper); outline-offset: 4px; }

.mr-form__privacy, .mr-form__alt {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  color: var(--wp--preset--color--on-paper-muted);
  margin: 0;
}
.mr-form__alt { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--wp--preset--color--rule-paper); }
.mr-form__alt a { color: var(--wp--preset--color--on-paper); }

.mr-form__done { border-inline-start: 2px solid var(--wp--preset--color--bronze-paper); padding-inline-start: 1.5rem; }
.mr-form__done:focus { outline: none; }
.mr-form__done:focus-visible { outline: 2px solid var(--wp--preset--color--bronze-paper); outline-offset: 6px; }
.mr-form__done-title {
  font-family: var(--wp--preset--font-family--editorial);
  font-size: var(--wp--preset--font-size--heading-3);
  margin: 0 0 0.5rem;
}
.mr-form__done-body { margin: 0; color: var(--wp--preset--color--on-paper-secondary); }

body.mr-ar .mr-form__field label { letter-spacing: 0; text-transform: none; }
body.mr-ar :is(.mr-form__field label, .mr-form__hint, .mr-form__intent span, .mr-btn,
               .mr-form__privacy, .mr-form__alt, .mr-form__error, .mr-form__errors) {
  font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', sans-serif;
}
body.mr-ar .mr-form__done-title { font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; }

@media (max-width: 767px) {
  .mr-form { margin-block-start: 2rem; }
  .mr-form__form { gap: 1.5rem; }
  .mr-form input[type="text"], .mr-form input[type="email"], .mr-form textarea { font-size: 1rem; }
  .mr-form__intent { padding-block: 0.75rem; }
}
/* The record line — the classification a case study opens with. */
.mr-record {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--metadata);
  color: var(--wp--preset--color--on-paper-muted);
  margin: 0 0 2.5rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--wp--preset--color--rule-paper);
}
.mr-record__outcome {
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--body-small);
  border-inline-start: 2px solid var(--wp--preset--color--bronze-paper);
  padding-inline-start: 1rem;
  margin-block: 0 2rem;
}
body.mr-ar :is(.mr-record, .mr-record__outcome) { font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', sans-serif; }
/* ---------------------------------------------------------------
 * Keyboard and pointer targets — WCAG 2.2 AA
 *
 * The skip link was clipped to 1×1 and stayed clipped when focused,
 * so a keyboard user could tab to a control they could not see. It
 * is the first control on every page, which makes it the worst one
 * to get wrong.
 *
 * 2.5.8 asks for 24×24 CSS pixels. The nav already clears it; the
 * language switcher was 23px and the breadcrumb links 20px — both
 * short by a hair, and both standalone controls rather than links
 * inside a sentence, so neither takes the inline exception.
 * ------------------------------------------------------------- */
/* WordPress ships .skip-link.screen-reader-text at two class points of
   specificity and its own focus rule, so the theme has to match it rather
   than out-order it. */
.skip-link.skip-link {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	z-index: 100;
}
.skip-link.skip-link:focus,
.skip-link.skip-link:focus-visible {
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	clip-path: none;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-ink);
	text-decoration: none;
	outline: 2px solid var(--wp--preset--color--bronze-ink);
	outline-offset: 2px;
	clip: auto;
	white-space: normal;
}

.mr-lang { padding-block: 0.3125rem; }
.mr-crumbs a { display: inline-block; padding-block: 0.25rem; }
/* Short Arabic nav words — نبذة is 22px wide as set, which is under the
   24px target minimum. Inline padding on every nav link fixes it without
   changing the English row, where the shortest word already measures 35px. */
.mr-nav a { padding-inline: 0.25rem; }
/* ---------------------------------------------------------------
 * The capability map — ventures
 *
 * A record, not a card grid. Four movements; each venture is a row that
 * opens. The disclosure is a native <details>, so it works without
 * JavaScript, takes the keyboard for free, and does not need a framework
 * to animate an org chart nobody asked for.
 *
 * The marker is a bronze rule that turns vertical when open — the same
 * 2px bronze mark the section labels use, doing a second job.
 * ------------------------------------------------------------- */
.mr-map { margin-block-start: 3rem; }
.mr-map__area + .mr-map__area { margin-block-start: 4rem; }
.mr-map__lead {
	max-inline-size: var(--wp--custom--measure, 34rem);
	color: var(--wp--preset--color--on-paper-secondary);
	margin: 0.75rem 0 1.5rem;
}
.mr-map__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--rule-paper); }
.mr-map__item { border-block-end: 1px solid var(--wp--preset--color--rule-paper); }

.mr-map summary {
	display: grid;
	grid-template-columns: 0.75rem 1fr;
	column-gap: 1.5rem;
	align-items: baseline;
	padding-block: 1.25rem;
	cursor: pointer;
	list-style: none;
	transition: padding-inline-start var(--mr-dur-element) var(--mr-ease-state);
}
.mr-map summary::-webkit-details-marker { display: none; }
.mr-map summary::before {
	content: "";
	inline-size: 0.75rem;
	block-size: 2px;
	background: var(--wp--preset--color--bronze-paper);
	translate: 0 -0.35em;
	transition: rotate var(--mr-dur-element) var(--mr-ease-state);
}
.mr-map details[open] summary::before { rotate: 90deg; }
.mr-map summary:hover { padding-inline-start: 0.5rem; }
.mr-map summary:focus-visible { outline: 2px solid var(--wp--preset--color--bronze-paper); outline-offset: 3px; }

/* Name and state share one baseline; the state is a note beside the name,
   not a second row fighting the description for the same grid cell. */
.mr-map__head {
	grid-column: 2;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.75rem;
}
.mr-map__name {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--on-paper);
}
.mr-map__state {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--metadata);
	color: var(--wp--preset--color--bronze-paper);
	letter-spacing: 0.04em;
}
.mr-map__what {
	grid-column: 2;
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--body-small);
	color: var(--wp--preset--color--on-paper-muted);
	margin-block-start: 0.25rem;
}

.mr-map__body {
	grid-column: 2;
	margin-inline-start: 2.25rem;
	padding-block: 0 1.75rem;
	max-inline-size: var(--wp--custom--measure, 34rem);
}
.mr-map__body p { margin: 0 0 0.75rem; }
.mr-map__body p:last-child { margin-block-end: 0; }
.mr-map__whylabel {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--metadata);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-paper-muted);
}
.mr-map__related {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--metadata);
	color: var(--wp--preset--color--on-paper-muted);
}

body.mr-ar :is(.mr-map__what, .mr-map__whylabel, .mr-map__related, .mr-map__state) {
	font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', sans-serif;
}
body.mr-ar .mr-map__whylabel { text-transform: none; letter-spacing: 0; }
body.mr-ar .mr-map__name { font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; }

@media (max-width: 767px) {
	.mr-map summary { grid-template-columns: 0.75rem 1fr; column-gap: 1rem; }
	.mr-map__body { margin-inline-start: 1.75rem; }
	.mr-map__area + .mr-map__area { margin-block-start: 3rem; }
}
/* ---------------------------------------------------------------
 * Field references and works in progress
 *
 * A different layer from the personal works, and it has to look like one.
 * The books above are set in the editorial face on a rule; these are set
 * in the system face with a bronze margin rule — closer to a technical
 * index than to a shelf, which is what they are.
 * ------------------------------------------------------------- */
.mr-refs { display: grid; gap: 2.5rem; margin-block-start: 2rem; }
.mr-refs__item {
	border-inline-start: 2px solid var(--wp--preset--color--rule-paper-structural);
	padding-inline-start: 1.5rem;
}
.mr-refs__title {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
}
.mr-refs__what { margin: 0 0 0.75rem; max-inline-size: var(--wp--custom--measure, 34rem); }
.mr-refs__for, .mr-refs__related {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--metadata);
	color: var(--wp--preset--color--on-paper-muted);
	margin: 0;
}
.mr-refs__for span { letter-spacing: 0.06em; text-transform: uppercase; }
/* Standalone controls, so they take the 24px minimum like the rest. */
.mr-refs__related { margin-block-start: 0.375rem; }
.mr-refs__related a { display: inline-block; padding-block: 0.25rem; }

.mr-progress { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.75rem; }
.mr-progress__item { max-inline-size: var(--wp--custom--measure, 34rem); }
.mr-progress__title {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--body);
	margin: 0 0 0.25rem;
}
.mr-progress__what { margin: 0 0 0.375rem; color: var(--wp--preset--color--on-paper-secondary); }
.mr-progress__state {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--metadata);
	color: var(--wp--preset--color--on-paper-muted);
	margin: 0;
}

body.mr-ar :is(.mr-refs__title, .mr-refs__for, .mr-refs__related, .mr-progress__state) {
	font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', sans-serif;
}
body.mr-ar .mr-refs__for span { text-transform: none; letter-spacing: 0; }
body.mr-ar .mr-progress__title { font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; }

/* The shelf of personal works on the hub — an index, not a product grid. */
.mr-shelf { list-style: none; margin: 1.5rem 0 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--rule-paper); }
.mr-shelf li { border-block-end: 1px solid var(--wp--preset--color--rule-paper); }
.mr-shelf a {
	display: block;
	padding-block: 1.25rem;
	text-decoration: none;
	color: inherit;
	border-inline-start: 2px solid transparent;
	padding-inline-start: 0;
	transition: border-color var(--mr-dur-state) var(--mr-ease-state), padding-inline-start var(--mr-dur-element) var(--mr-ease-state);
}
.mr-shelf a:hover { border-inline-start-color: var(--wp--preset--color--bronze-paper); padding-inline-start: 1rem; }
.mr-shelf__title { font-family: var(--wp--preset--font-family--editorial); font-size: var(--wp--preset--font-size--heading-3); }
.mr-shelf__gloss { display: block; font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--body-small); color: var(--wp--preset--color--on-paper-muted); margin-block-start: 0.25rem; }
body.mr-ar .mr-shelf__title { font-family: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', 'Geeza Pro', serif; }
body.mr-ar .mr-shelf__gloss { font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', sans-serif; }

/* ---------------------------------------------------------------
 * The map, read wide.
 *
 * Benchmark 2, recommendation 4: four movements and ten rows have
 * to be graspable in one pass before anything is disclosed. Stacked
 * in a 34rem measure they are a filing cabinet 1,900px tall. Given
 * the wide frame, the rationale sits beside its rows instead of
 * above them and each row states its name and its subject on one
 * line, which is what makes the thing a map rather than a list.
 *
 * Below 62rem nothing changes. The stacked reading is the mobile
 * reading, and it was already right.
 * ------------------------------------------------------------- */
/* The map is the one element allowed out of the text measure. It is
   held to the wide frame and never wider than the viewport can carry,
   so nothing scrolls sideways at any width. */
@media (min-width: 75rem) {
  /* The map leans out of the text column towards the outer margin.
     The pull is whatever slack the frame has, capped at 22rem and
     always leaving a 3rem gutter, so nothing scrolls sideways at any
     width and the same rule mirrors correctly in Arabic. */
  .mr-map.alignwide {
    max-inline-size: none;
    inline-size: clamp(40rem, calc(50vw + 13.5rem), 62rem);
  }
  .mr-map__area {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }
  .mr-map__area > .mr-label { grid-column: 1; grid-row: 1; }
  .mr-map__lead { grid-column: 1; grid-row: 2; margin-block: 0.75rem 0; }
  .mr-map__list { grid-column: 2; grid-row: 1 / span 2; }
  .mr-map__area + .mr-map__area { margin-block-start: 3.5rem; }

  .mr-map summary { grid-template-columns: 0.75rem minmax(9rem, 14rem) minmax(0, 1fr); }
  .mr-map__what { grid-column: 3; margin-block-start: 0; }
}

/* ---------------------------------------------------------------
 * Footer index.
 *
 * The header carries the spine. Everything else — the ventures, the
 * written work, the industries, the speaking — is reachable from the
 * bottom of every page, because an index nobody can navigate to is
 * not an index.
 * ------------------------------------------------------------- */
.mr-footer__index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2.5rem 3rem;
  padding-block-end: 3rem;
  margin-block-end: 3rem;
  border-block-end: 1px solid var(--wp--preset--color--rule-ink);
}
.mr-footer__group ul { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.mr-footer__group a {
  display: inline-block;
  padding-block: 0.35rem;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--body-small);
  color: var(--wp--preset--color--on-ink);
  text-decoration: none;
}
.mr-footer__group a:hover,
.mr-footer__group a:focus-visible { color: var(--wp--preset--color--bronze-link); text-decoration: underline; text-underline-offset: 0.25em; }
.mr-footer .mr-label { color: var(--wp--preset--color--on-ink-muted); }
.mr-footer .mr-label::before { background: var(--wp--preset--color--bronze-ink); }
body.mr-ar .mr-footer__group a { font-family: "IBM Plex Sans Arabic", "Geeza Pro", sans-serif; }
/* --- photography ------------------------------------------ */
.mr-figure { margin-block: 0 var(--mr-gutter); }
.mr-figure img { display: block; inline-size: 100%; block-size: auto; }
.mr-figure__cap { margin-block-start: 0.75rem; max-inline-size: var(--mr-measure);
  font-size: var(--wp--preset--font-size--metadata); line-height: 1.55;
  color: var(--wp--preset--color--on-paper-muted); }
.mr-figure--lead { margin-block-end: calc(var(--mr-gutter) * 1.4); max-inline-size: 46rem; }
.mr-figure--portrait { max-inline-size: 18rem; }
@media (min-width: 62rem) {
  .mr-figure--portrait { inline-size: 16rem; max-inline-size: 16rem; float: right; float: inline-end;
    margin-inline-start: var(--mr-gutter); margin-block-start: 0.4rem; }
  body.mr-ar .mr-figure--portrait { float: left; float: inline-end; }
}
.mr-figure--portrait + * { clear: none; }

/* ===========================================================
   M13 — ELEVATION
   Additive. Uses existing tokens only. No new font files, no JS.
   Frame-width tonal bands (never viewport units) so the verified
   "no horizontal overflow" result cannot regress.
   =========================================================== */

:root {
  /* The metadata voice. System monospace: a data register with zero
     download cost, chosen over shipping IBM Plex Mono to hold the
     font budget. Role assignment is what carries the effect. */
  --mr-font-meta: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mr-marker: 4.5rem;
}

/* --- 1 · metadata is data, not a small heading ------------- */
.mr-label,
.mr-indexed__num,
.mr-map__state,
.mr-meta,
.mr-thread__rel,
.mr-strip__label,
.mr-shelf__state,
.mr-stage__name {
  font-family: var(--mr-font-meta);
  font-variant-numeric: tabular-nums;
}
.mr-label { letter-spacing: 0.1em; }
body.mr-ar :is(.mr-label, .mr-meta, .mr-thread__rel, .mr-strip__label,
               .mr-shelf__state, .mr-stage__name) {
  font-family: var(--wp--preset--font-family--ar-system);
  letter-spacing: 0;
}

/* --- 2 · the tonal band ----------------------------------- */
.mr-band {
  max-inline-size: none !important;
  margin-inline: calc(-1 * var(--mr-margin));
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--mr-margin);
  margin-block: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (min-width: 1024px) {
  .mr-band { margin-inline-start: calc(-1 * (var(--mr-margin) + var(--mr-rail) + var(--mr-gutter))); }
}
.mr-band > * { max-inline-size: var(--mr-measure); }
.mr-band--ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); }
.mr-band--ink :is(h1, h2, h3, p, li) { color: var(--wp--preset--color--on-ink); }
.mr-band--ink .mr-label { color: var(--wp--preset--color--on-ink-muted); }
.mr-band--ink .mr-label::before { background: var(--wp--preset--color--bronze-ink); }
.mr-band--ink a { color: var(--wp--preset--color--bronze-ink); }
.mr-band--ink :where(a):focus-visible { outline-color: var(--wp--preset--color--on-ink); }
.mr-band--sunk { background: var(--wp--preset--color--paper-sunk); }

/* Two columns inside a band, on one shared rhythm. */
.mr-band__pair { display: grid; gap: 2.5rem; max-inline-size: 62rem; }
@media (min-width: 48rem) { .mr-band__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; } }
.mr-band__pair > * > :first-child { margin-block-start: 0; }

/* --- 3 · the standing strip ------------------------------- */
/* Evidence-backed signals only. No metrics, no counters, no numerals
   that are not independently verified. */
.mr-strip { margin-block-start: 2.5rem; border-block-start: 1px solid var(--wp--preset--color--rule-paper-structural); max-inline-size: 62rem !important; }
.mr-strip__list { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 48rem) { .mr-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
@media (min-width: 72rem) { .mr-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mr-strip__item { border-block-end: 1px solid var(--wp--preset--color--rule-paper); padding-block: 1rem; }
.mr-strip__label {
  display: block; font-size: var(--wp--preset--font-size--label);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--wp--preset--color--on-paper-muted); margin-block-end: 0.35rem;
}
.mr-strip__fact { display: block; font-family: var(--wp--preset--font-family--editorial); font-size: var(--wp--preset--font-size--body-small); }
body.mr-ar .mr-strip__fact { font-family: var(--wp--preset--font-family--ar-editorial); }

/* --- 4 · the thread --------------------------------------- */
.mr-thread { margin-block-start: clamp(3rem, 2rem + 3vw, 4.5rem); }
.mr-thread__list { list-style: none; margin: 1.25rem 0 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--rule-paper-structural); }
.mr-thread__item { border-block-end: 1px solid var(--wp--preset--color--rule-paper); }
.mr-thread__link {
  display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 0.25rem 1.5rem;
  align-items: baseline; padding-block: 1.25rem; text-decoration: none; color: inherit;
  border-inline-start: 2px solid transparent; padding-inline-start: 0;
  transition: border-color var(--mr-dur-state) var(--mr-ease-state),
              padding-inline-start var(--mr-dur-element) var(--mr-ease-state);
}
.mr-thread__link:hover { border-inline-start-color: var(--wp--preset--color--bronze-paper); padding-inline-start: 1rem; }
.mr-thread__rel { font-size: var(--wp--preset--font-size--label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--on-paper-muted); }
.mr-thread__title { font-family: var(--wp--preset--font-family--editorial); font-size: var(--wp--preset--font-size--heading-3); }
body.mr-ar .mr-thread__title { font-family: var(--wp--preset--font-family--ar-editorial); }
@media (max-width: 47.99rem) { .mr-thread__link { grid-template-columns: 1fr; } }

/* --- 5 · the shelf: a stage spine and a visible state ------ */
.mr-stage { margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.mr-stage__name {
  font-size: var(--wp--preset--font-size--label); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--wp--preset--color--on-paper-muted);
  display: flex; align-items: center; gap: 0.75rem; margin-block-end: 0.5rem;
}
.mr-stage__name::before { content: ""; inline-size: 0.75rem; block-size: 2px; background: var(--wp--preset--color--bronze-paper); flex: none; }
.mr-stage__gloss { max-inline-size: var(--mr-measure); color: var(--wp--preset--color--on-paper-secondary); margin: 0 0 1rem; }
.mr-shelf__state {
  font-size: var(--wp--preset--font-size--label); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wp--preset--color--on-paper-muted); margin-inline-start: 0.75rem; white-space: nowrap;
}

/* --- 6 · Arabic display sets tighter than Latin ------------ */
/* Naskh display at a Latin display ratio opens far too much. */
body.mr-ar :is(h1, .mr-pagetitle,
               .has-display-1-font-size, .has-display-2-font-size,
               .has-heading-1-font-size) { line-height: 1.25; }
body.mr-ar .has-display-1-font-size { line-height: 1.15; }

/* --- 7 · reduced motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mr-thread__link, .mr-shelf a, .mr-indexed > li > a, .mr-map summary { transition: none; }
}

/* --- 8 - the opening statement carries the full display range ---
/* Both homepages only. Everything else keeps its scale. */
body.home .entry-content > h1:first-of-type,
body.page-id-64 .entry-content > h1:first-of-type {
  font-size: var(--wp--preset--font-size--display-1) !important; /* WP marks preset size classes !important */
  line-height: 1.03;
  text-wrap: balance;
}
body.mr-ar.page-id-64 .entry-content > h1:first-of-type { line-height: 1.15; }


/* ---------------------------------------------------------------
 * 9. THE DECISION RECORD
 *
 * The case studies already carry the grammar - Situation, Complexity,
 * Decision, Transformation, Technology, Outcome, Lessons - as .mr-label
 * paragraphs. Nothing here adds a stage, a metric or a claim. It stops the
 * stages reading as subheadings in a brochure and starts them reading as the
 * margin of a record: the label steps out into the rail against a hairline,
 * a bronze marker sits on the spine, and the argument runs uninterrupted
 * down the measure.
 *
 * The measure itself does not move. Below 78rem there is no rail to step
 * into, so the labels stay exactly where they are today. Logical properties
 * throughout, so Arabic mirrors without a second rule.
 * ------------------------------------------------------------- */

body.single-case_study .entry-content > p.mr-label { position: relative; }

@media (min-width: 78rem) {

  body.single-case_study .entry-content { --mr-record-rail: 8.5rem; }

  body.single-case_study .entry-content > p.mr-label {
    float: inline-start;
    clear: inline-start;
    inline-size: var(--mr-record-rail);
    margin-inline-start: calc(-1 * (var(--mr-record-rail) + var(--mr-gutter))) !important;
    margin-block: 0.2em 0;
    text-align: end;
    padding-inline-end: 0.9rem;
    border-inline-end: 1px solid var(--wp--preset--color--rule-paper);
  }

  body.single-case_study .entry-content > p.mr-label::after {
    content: "";
    position: absolute;
    inset-inline-end: -1px;
    inset-block-start: 0.5em;
    inline-size: 1px;
    block-size: 1em;
    background: var(--wp--preset--color--bronze-paper);
  }
}

/* A figure withheld for want of evidence is discipline, not apology. */
.mr-withheld {
  font-family: var(--mr-font-meta);
  font-size: 0.8125rem;
  line-height: 1.55;
  border-inline-start: 2px solid var(--wp--preset--color--bronze-paper);
  padding-inline-start: 0.9rem;
  margin-block: 1.75rem;
  opacity: 0.82;
}