/*!
 * Shawgi Mustafa — main stylesheet
 * Logical properties only. BEM-ish naming (sm-block__element--modifier).
 *
 * §1  Tokens — color
 * §2  Tokens — typography
 * §3  Tokens — space, radii, shadow, motion, z-index
 * §4  Reset + base
 * §5  Layout primitives
 * §6  Arabic overrides
 * §7  Components 1–9  (header, hero, section header, card, filter/chip, podcast, credentials, testimonial)
 * §8  Components 10–18 (prose, button, chip variant, pagination, search, 404, form, footer, WP core/a11y)
 * §9  Utilities + print
 */

/* ==========================================================================
   §1. TOKENS — COLOR
   ========================================================================== */
:root {
	--sm-color-ink: #16140F;
	--sm-color-paper: #FAF8F4;
	--sm-color-accent: #A3201C;
	--sm-color-accent-strong: #7F1915;
	--sm-color-accent-soft: #F4E4E0;
	--sm-color-on-accent: #FFFFFF;

	--sm-gray-50: #F3F0EA;
	--sm-gray-100: #EBE7DF;
	--sm-gray-200: #DDD8CE;
	--sm-gray-300: #C4BDB0;
	--sm-gray-500: #6A645A;
	--sm-gray-700: #4A463F;
	--sm-gray-900: #2A2722;

	--sm-color-success: #1F6B3A;
	--sm-color-success-soft: #E4F1E8;
	--sm-color-warning: #8A5A00;
	--sm-color-warning-soft: #F7ECD6;
	--sm-color-danger: #B3261E;
	--sm-color-danger-soft: #F8E4E2;
	--sm-color-info: #1F4E79;
	--sm-color-info-soft: #E3ECF4;

	--sm-surface-1: var(--sm-color-paper);
	--sm-surface-2: var(--sm-gray-50);
	--sm-surface-inverse: #1B1813;

	--sm-text: var(--sm-color-ink);
	--sm-text-muted: var(--sm-gray-700);
	--sm-text-subtle: var(--sm-gray-500);
	--sm-text-inverse: #FAF8F4;
	--sm-text-inverse-muted: #C4BDB0;

	--sm-border-subtle: var(--sm-gray-200);
	--sm-border-strong: var(--sm-gray-300);

	--sm-link: var(--sm-color-accent);
	--sm-link-hover: var(--sm-color-accent-strong);
	--sm-accent-on-inverse: #E8A5A1;

	--sm-focus: #1F4E79;
	--sm-focus-on-inverse: #8AB6E0;

	--sm-overlay: rgba(22, 20, 15, 0.55);

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-scheme="light"]) {
		--sm-color-ink: #F5F1E8;
		--sm-color-paper: #14120E;
		--sm-color-accent: #E16B62;
		--sm-color-accent-strong: #F08A82;
		--sm-color-accent-soft: #3A1E1B;
		--sm-color-on-accent: #14120E;

		--sm-gray-50: #1D1A15;
		--sm-gray-100: #26221C;
		--sm-gray-200: #332E27;
		--sm-gray-300: #4A443A;
		--sm-gray-500: #A39C8E;
		--sm-gray-700: #C4BDB0;
		--sm-gray-900: #E6E1D6;

		--sm-color-success: #6FCB90;
		--sm-color-success-soft: #14261B;
		--sm-color-warning: #E5B65A;
		--sm-color-warning-soft: #2B2111;
		--sm-color-danger: #F08A82;
		--sm-color-danger-soft: #331816;
		--sm-color-info: #8AB6E0;
		--sm-color-info-soft: #13222F;

		--sm-surface-1: var(--sm-color-paper);
		--sm-surface-2: #1D1A15;
		--sm-surface-inverse: #0D0B08;

		--sm-text: var(--sm-color-ink);
		--sm-text-muted: #C4BDB0;
		--sm-text-subtle: #A39C8E;

		--sm-border-subtle: #332E27;
		--sm-border-strong: #4A443A;

		--sm-focus: #8AB6E0;
		--sm-overlay: rgba(0, 0, 0, 0.65);
	}
}

[data-scheme="light"] { color-scheme: light; }
[data-scheme="dark"] { color-scheme: dark; }

/* ==========================================================================
   §2. TOKENS — TYPOGRAPHY
   ========================================================================== */
:root {
	--sm-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sm-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--sm-font-arabic: "Tajawal", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
	--sm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--sm-fw-regular: 400;
	--sm-fw-medium: 500;
	--sm-fw-semibold: 600;
	--sm-fw-bold: 700;

	/* 1.200 minor third on 16px */
	--sm-fs-100: 0.8333rem;
	--sm-fs-200: 1rem;
	--sm-fs-300: 1.2rem;
	--sm-fs-400: 1.44rem;
	--sm-fs-500: 1.728rem;
	--sm-fs-600: 2.0736rem;
	--sm-fs-700: 2.4883rem;
	--sm-fs-800: 2.986rem;
	--sm-fs-900: 3.5832rem;

	--sm-lh-tight: 1.1;
	--sm-lh-snug: 1.35;
	--sm-lh-body: 1.6;
	--sm-lh-loose: 1.75;

	--sm-tracking-tight: -0.015em;
	--sm-tracking-normal: 0;
	--sm-tracking-wide: 0.08em;

	/* Role tokens */
	--sm-fs-hero: clamp(2.4883rem, 1.6rem + 3.2vw, 3.5832rem);
	--sm-fs-h1: clamp(2.0736rem, 1.5rem + 2.2vw, 2.986rem);
	--sm-fs-h2: clamp(1.728rem, 1.3rem + 1.6vw, 2.4883rem);
	--sm-fs-h3: clamp(1.44rem, 1.2rem + 0.9vw, 1.728rem);
	--sm-fs-h4: 1.2rem;
}

/* ==========================================================================
   §3. TOKENS — SPACE, RADII, SHADOW, MOTION, Z-INDEX
   ========================================================================== */
:root {
	--sm-space-0: 0;
	--sm-space-1: 4px;
	--sm-space-2: 8px;
	--sm-space-3: 12px;
	--sm-space-4: 16px;
	--sm-space-5: 24px;
	--sm-space-6: 32px;
	--sm-space-7: 48px;
	--sm-space-8: 64px;
	--sm-space-9: 96px;
	--sm-space-10: 128px;

	--sm-section-y: 64px;
	--sm-section-y-lg: 96px;

	--sm-radius-xs: 2px;
	--sm-radius-sm: 4px;
	--sm-radius-md: 6px;
	--sm-radius-lg: 8px;
	--sm-radius-pill: 999px;
	--sm-radius-circle: 50%;

	--sm-shadow-xs: 0 1px 2px rgb(42 30 18 / 0.06);
	--sm-shadow-sm: 0 1px 3px rgb(42 30 18 / 0.08), 0 1px 2px rgb(42 30 18 / 0.05);
	--sm-shadow-md: 0 4px 12px rgb(42 30 18 / 0.08), 0 2px 4px rgb(42 30 18 / 0.05);
	--sm-shadow-lg: 0 12px 28px rgb(42 30 18 / 0.10), 0 4px 8px rgb(42 30 18 / 0.05);
	--sm-shadow-xl: 0 24px 56px rgb(42 30 18 / 0.14), 0 8px 16px rgb(42 30 18 / 0.06);
	--sm-shadow-inset-focus: inset 0 0 0 2px var(--sm-focus);

	--sm-duration-fast: 150ms;
	--sm-duration-base: 250ms;
	--sm-duration-slow: 400ms;
	--sm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--sm-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
	--sm-ease-exit: cubic-bezier(0.3, 0, 1, 1);

	/* Breakpoints — reference only; media queries use literals */
	--sm-bp-sm: 480;
	--sm-bp-md: 768;
	--sm-bp-lg: 1024;
	--sm-bp-xl: 1280;
	--sm-bp-2xl: 1440;

	--sm-container: 1200px;
	--sm-container-narrow: 720px;
	--sm-gutter: 16px;
	--sm-header-h: 72px;

	--sm-z-base: 0;
	--sm-z-dropdown: 100;
	--sm-z-sticky: 200;
	--sm-z-overlay: 300;
	--sm-z-modal: 400;
	--sm-z-toast: 500;
	--sm-z-skip-link: 600;

	/* Drawer slides in from inline-end; flipped for RTL */
	--sm-drawer-from: 100%;
}

:root:dir(rtl),
[dir="rtl"] {
	--sm-drawer-from: -100%;
}

/* ==========================================================================
   §4. RESET + BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-200);
	line-height: var(--sm-lh-body);
	color: var(--sm-text);
	background: var(--sm-surface-1);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--sm-font-serif);
	font-weight: var(--sm-fw-semibold);
	line-height: var(--sm-lh-tight);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-text);
	text-wrap: balance;
}

h1 { font-size: var(--sm-fs-h1); }
h2 { font-size: var(--sm-fs-h2); }
h3 { font-size: var(--sm-fs-h3); }
h4 { font-size: var(--sm-fs-h4); }

p { max-width: 68ch; }

a {
	color: var(--sm-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--sm-duration-fast) var(--sm-ease-standard);
}

a:hover {
	color: var(--sm-link-hover);
	text-decoration-thickness: 2px;
}

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

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--sm-focus);
	outline-offset: 2px;
	border-radius: var(--sm-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

::selection {
	background: var(--sm-color-accent-soft);
	color: var(--sm-color-ink);
}

/* ==========================================================================
   §5. LAYOUT PRIMITIVES
   ========================================================================== */
.sm-container {
	max-width: var(--sm-container);
	margin-inline: auto;
	padding-inline: var(--sm-gutter);
}

@media (min-width: 768px) { :root { --sm-gutter: 24px; } }
@media (min-width: 1024px) { :root { --sm-gutter: 32px; } }

.sm-container--narrow { max-width: var(--sm-container-narrow); }

.sm-section { padding-block: var(--sm-section-y); }

@media (min-width: 1024px) {
	.sm-section { padding-block: var(--sm-section-y-lg); }
}

.sm-section--alt { background: var(--sm-surface-2); }

.sm-section--inverse {
	background: var(--sm-surface-inverse);
	color: var(--sm-text-inverse);
}

.sm-section--inverse a { color: var(--sm-accent-on-inverse); }
.sm-section--inverse :focus-visible { outline-color: var(--sm-focus-on-inverse); }

.sm-section-header {
	border-block-start: 2px solid currentColor;
	padding-block-start: var(--sm-space-4);
	margin-block-end: var(--sm-space-7);
	max-width: 720px;
}

.sm-section-header__title { margin-block-start: var(--sm-space-3); }

.sm-section-header__lede {
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-400);
	color: var(--sm-text-muted);
	margin-block-start: var(--sm-space-3);
}

.sm-eyebrow {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-100);
	font-weight: var(--sm-fw-semibold);
	letter-spacing: var(--sm-tracking-wide);
	text-transform: uppercase;
	color: var(--sm-color-accent);
}

.sm-grid {
	display: grid;
	gap: var(--sm-space-6);
}

.sm-grid--2,
.sm-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.sm-grid--2,
	.sm-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.sm-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.sm-split {
	display: grid;
	gap: var(--sm-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.sm-split { grid-template-columns: 7fr 5fr; }
	.sm-split--8-4 { grid-template-columns: 8fr 4fr; }
}

/* ==========================================================================
   §6. ARABIC OVERRIDES
   :where() keeps specificity at zero so component rules still win.
   ========================================================================== */
:where(:lang(ar)) {
	font-family: var(--sm-font-arabic);
	--sm-fw-semibold: 700; /* Tajawal ships 400/500/700 only */
	line-height: calc(var(--sm-lh-body) + 0.15);
	letter-spacing: 0;
	text-transform: none;
}

:where(:lang(ar)) h1,
:where(:lang(ar)) h2,
:where(:lang(ar)) h3,
:where(:lang(ar)) h4 {
	font-family: var(--sm-font-arabic);
	letter-spacing: 0;
}

:where(:lang(ar)) .sm-eyebrow {
	text-transform: none;
	letter-spacing: 0;
}

:where(:lang(ar)) .sm-prose--dropcap > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

:where(:lang(ar)) em,
:where(:lang(ar)) i { font-style: normal; }

:where(:lang(ar)) blockquote { font-style: normal; }

bdi,
.sm-bidi { unicode-bidi: isolate; }

/* ==========================================================================
   §7. COMPONENTS 1–9
   ========================================================================== */

/* --- 1. HEADER / NAV ------------------------------------------------------
   Purpose: sticky site header; below 1024px nav becomes an inline-end drawer.
   State lives on .sm-header[data-open="true"]; body[data-nav-open] locks scroll. */
.sm-header {
	position: sticky;
	inset-block-start: 0;
	height: var(--sm-header-h);
	background: var(--sm-surface-1);
	border-block-end: 1px solid var(--sm-border-subtle);
	z-index: var(--sm-z-sticky);
}

.sm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sm-space-5);
	height: 100%;
}

.sm-header__brand {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
	text-decoration: none;
	color: var(--sm-text);
	margin-inline-end: auto;
}

.sm-header__brand img { max-height: 48px; width: auto; }

.sm-header__title {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
}

.sm-nav__list {
	display: flex;
	gap: var(--sm-space-5);
	list-style: none;
}

.sm-nav__link {
	display: inline-block;
	padding-block: var(--sm-space-2);
	border-block-end: 2px solid transparent;
	color: var(--sm-text);
	text-decoration: none;
	font-size: var(--sm-fs-100);
	font-weight: var(--sm-fw-medium);
	transition: border-color var(--sm-duration-fast) var(--sm-ease-standard),
		color var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-nav__link:hover { border-color: var(--sm-border-strong); color: var(--sm-text); }

.sm-nav__link[aria-current="page"],
.sm-nav__list .current-menu-item > .sm-nav__link {
	color: var(--sm-color-accent);
	border-color: var(--sm-color-accent);
}

.sm-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	background: none;
	border: 0;
	border-radius: var(--sm-radius-sm);
	cursor: pointer;
	position: relative;
}

/* Three-line icon: middle bar + ::before / ::after */
.sm-nav__toggle-icon,
.sm-nav__toggle-icon::before,
.sm-nav__toggle-icon::after {
	display: block;
	inline-size: 22px;
	block-size: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--sm-duration-base) var(--sm-ease-standard),
		background-color var(--sm-duration-fast);
}

.sm-nav__toggle-icon { position: relative; }

.sm-nav__toggle-icon::before,
.sm-nav__toggle-icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.sm-nav__toggle-icon::before { inset-block-start: -7px; }
.sm-nav__toggle-icon::after { inset-block-start: 7px; }

.sm-nav__toggle[aria-expanded="true"] .sm-nav__toggle-icon { background: transparent; }
.sm-nav__toggle[aria-expanded="true"] .sm-nav__toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.sm-nav__toggle[aria-expanded="true"] .sm-nav__toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

.sm-lang-switch {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid var(--sm-border-strong);
	border-radius: var(--sm-radius-sm);
	font-size: var(--sm-fs-100);
	font-weight: var(--sm-fw-semibold);
	letter-spacing: var(--sm-tracking-wide);
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	color: var(--sm-text);
	text-decoration: none;
	transition: background-color var(--sm-duration-fast) var(--sm-ease-standard),
		color var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-lang-switch:hover {
	background: var(--sm-color-ink);
	color: var(--sm-color-paper);
}

.sm-scrim {
	position: fixed;
	inset: 0;
	background: var(--sm-overlay);
	z-index: var(--sm-z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sm-duration-base) var(--sm-ease-standard);
}

[data-open="true"] .sm-scrim {
	opacity: 1;
	pointer-events: auto;
}

@media (min-width: 1024px) {
	.sm-nav__toggle,
	.sm-scrim { display: none; }
}

@media (max-width: 1023.98px) {
	.sm-nav {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: min(22rem, 86vw);
		padding: var(--sm-space-8) var(--sm-space-5) var(--sm-space-5);
		background: var(--sm-surface-1);
		border-inline-start: 1px solid var(--sm-border-subtle);
		box-shadow: var(--sm-shadow-xl);
		overflow-y: auto;
		transform: translateX(var(--sm-drawer-from));
		visibility: hidden;
		transition: transform var(--sm-duration-base) var(--sm-ease-emphasized),
			visibility 0s linear var(--sm-duration-base);
		z-index: var(--sm-z-modal);
	}

	[data-open="true"] .sm-nav {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--sm-duration-base) var(--sm-ease-emphasized),
			visibility 0s;
	}

	.sm-nav__list {
		flex-direction: column;
		gap: var(--sm-space-2);
	}

	.sm-nav__link {
		display: block;
		padding-block: var(--sm-space-3);
		font-size: var(--sm-fs-300);
		border-block-end: 1px solid var(--sm-border-subtle);
	}

	.sm-nav__toggle { position: relative; z-index: calc(var(--sm-z-modal) + 1); }
}

body[data-nav-open] { overflow: hidden; }

/* --- 2. HERO ---------------------------------------------------------------
   Purpose: opening statement; --portrait adds a 7fr/5fr split at ≥1024px. */
.sm-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sm-space-7);
	align-items: center;
}

@media (min-width: 1024px) {
	.sm-hero--portrait { grid-template-columns: 7fr 5fr; }
}

.sm-hero__body {
	display: grid;
	gap: var(--sm-space-5);
	align-content: start;
}

.sm-hero__title {
	font-size: var(--sm-fs-hero);
	max-width: 20ch;
}

.sm-hero__lead {
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-400);
	color: var(--sm-text-muted);
	max-width: 60ch;
}

.sm-facts {
	display: grid;
	gap: var(--sm-space-4);
	padding-block-start: var(--sm-space-4);
	border-block-start: 1px solid var(--sm-border-subtle);
}

.sm-facts__row {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--sm-space-3);
	font-size: var(--sm-fs-100);
}

.sm-facts__label {
	font-weight: var(--sm-fw-semibold);
	letter-spacing: var(--sm-tracking-wide);
	text-transform: uppercase;
	color: var(--sm-text-subtle);
}

.sm-hero__actions {
	display: flex;
	gap: var(--sm-space-3);
	flex-wrap: wrap;
}

.sm-hero__portrait {
	aspect-ratio: 4 / 5;
	border-radius: var(--sm-radius-md);
	overflow: hidden;
	background: var(--sm-surface-2);
}

.sm-hero__portrait img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* --- 3. SECTION HEADER — variants -----------------------------------------
   The rule uses currentColor, so it follows .sm-section--alt / --inverse text. */
.sm-section--alt .sm-section-header { border-block-start-color: var(--sm-text); }
.sm-section--inverse .sm-section-header { border-block-start-color: currentColor; }
.sm-section--inverse .sm-section-header__lede { color: var(--sm-text-inverse-muted); }
.sm-section--inverse .sm-eyebrow { color: var(--sm-accent-on-inverse); }

/* --- 4/5. CARD -------------------------------------------------------------
   Purpose: project/article teaser. Stretched link via ::after. */
.sm-card {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

.sm-card--plain {
	border: 0;
	box-shadow: none;
	border-block-start: 2px solid var(--sm-border-subtle);
	padding-block-start: var(--sm-space-4);
}

.sm-card--boxed {
	background: var(--sm-surface-1);
	border: 1px solid var(--sm-border-subtle);
	border-radius: var(--sm-radius-md);
	padding: var(--sm-space-5);
	transition: border-color var(--sm-duration-base) var(--sm-ease-standard),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-card--boxed:hover {
	border-color: var(--sm-border-strong);
	box-shadow: var(--sm-shadow-md);
}

.sm-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sm-surface-2);
	margin-block-end: var(--sm-space-4);
}

.sm-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sm-card--boxed .sm-card__media {
	margin-inline: calc(var(--sm-space-5) * -1);
	margin-block-start: calc(var(--sm-space-5) * -1);
	border-start-start-radius: var(--sm-radius-md);
	border-start-end-radius: var(--sm-radius-md);
}

.sm-card__chips {
	display: flex;
	gap: var(--sm-space-2);
	flex-wrap: wrap;
	margin-block-end: var(--sm-space-3);
}

.sm-card__title {
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-400);
}

.sm-card__link {
	color: inherit;
	text-decoration: none;
}

.sm-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sm-card__link:hover { color: var(--sm-link-hover); text-decoration: underline; }
.sm-card__link:focus-visible { outline: none; }

.sm-card:has(.sm-card__link:focus-visible) {
	outline: 2px solid var(--sm-focus);
	outline-offset: 2px;
}

.sm-card__meta {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
}

.sm-card__excerpt {
	color: var(--sm-text-muted);
	font-size: var(--sm-fs-200);
	margin-block-start: var(--sm-space-2);
}

.sm-card__role {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
}

/* --- 6. FILTER BAR + CHIP --------------------------------------------------
   Purpose: project filtering; chips act as toggle buttons ([aria-pressed]). */
.sm-filter { margin-block-end: var(--sm-space-6); }

.sm-filter__list {
	display: flex;
	gap: var(--sm-space-2);
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.sm-filter__status {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
	margin-block-start: var(--sm-space-3);
}

.sm-chip {
	display: inline-flex;
	align-items: center;
	block-size: 28px;
	padding-inline: var(--sm-space-3);
	background: transparent;
	border: 1px solid var(--sm-border-strong);
	border-radius: var(--sm-radius-sm);
	font-size: var(--sm-fs-100);
	text-decoration: none;
	color: var(--sm-text-muted);
	cursor: pointer;
	transition: background-color var(--sm-duration-fast) var(--sm-ease-standard),
		color var(--sm-duration-fast) var(--sm-ease-standard),
		border-color var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-chip:hover {
	background: var(--sm-surface-2);
	color: var(--sm-text);
}

.sm-chip[aria-pressed="true"],
.sm-chip.is-current {
	background: var(--sm-color-ink);
	color: var(--sm-color-paper);
	border-color: var(--sm-color-ink);
}

.sm-filter .sm-chip { min-block-size: 44px; }

/* --- 7. PODCAST CARD -------------------------------------------------------
   Purpose: audio episode teaser with duration badge and play button. */
.sm-card--podcast {
	background: var(--sm-surface-1);
	border: 1px solid var(--sm-border-subtle);
	border-radius: var(--sm-radius-md);
	padding: var(--sm-space-5);
	transition: border-color var(--sm-duration-base) var(--sm-ease-standard),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-card--podcast:hover {
	border-color: var(--sm-border-strong);
	box-shadow: var(--sm-shadow-md);
}

.sm-card--podcast .sm-card__media {
	position: relative;
	margin-inline: calc(var(--sm-space-5) * -1);
	margin-block-start: calc(var(--sm-space-5) * -1);
	border-start-start-radius: var(--sm-radius-md);
	border-start-end-radius: var(--sm-radius-md);
}

.sm-badge--duration {
	position: absolute;
	inset-block-start: var(--sm-space-3);
	inset-inline-end: var(--sm-space-3);
	background: var(--sm-color-ink);
	color: var(--sm-color-paper);
	padding: 2px 8px;
	font-size: var(--sm-fs-100);
	border-radius: var(--sm-radius-sm);
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}

.sm-play {
	position: absolute;
	inset-block-end: var(--sm-space-3);
	inset-inline-start: var(--sm-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--sm-radius-circle);
	background: var(--sm-color-accent);
	border: 0;
	cursor: pointer;
	transition: background-color var(--sm-duration-fast) var(--sm-ease-standard),
		transform var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-play::before {
	content: "";
	inline-size: 0;
	block-size: 0;
	border-block: 10px solid transparent;
	border-inline-start: 16px solid #fff;
	margin-inline-start: 4px;
}

.sm-play:hover { background: var(--sm-color-accent-strong); }
.sm-play:active { transform: scale(0.96); }

:root:dir(rtl) .sm-play::before,
[dir="rtl"] .sm-play::before { margin-inline-start: 4px; }

/* --- 8. CREDENTIAL LIST ----------------------------------------------------
   Purpose: CV-style rows (date / title + org / aside). */
.sm-cred-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sm-cred {
	display: grid;
	gap: var(--sm-space-3);
	padding-block: var(--sm-space-4);
	border-block-end: 1px solid var(--sm-border-subtle);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sm-cred {
		grid-template-columns: 7rem 1fr auto;
		align-items: baseline;
	}
}

.sm-cred__date {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
	font-variant-numeric: tabular-nums;
}

.sm-cred__title {
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-300);
}

.sm-cred__org {
	font-size: var(--sm-fs-200);
	color: var(--sm-text-muted);
}

.sm-cred__aside {
	display: flex;
	align-items: center;
	gap: var(--sm-space-2);
}

/* --- 9. TESTIMONIAL --------------------------------------------------------- */
.sm-testimonial {
	border-block-start: 2px solid currentColor;
	padding-block-start: var(--sm-space-5);
}

.sm-testimonial__quote {
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-500);
	line-height: var(--sm-lh-snug);
	quotes: "\201C" "\201D" "\2018" "\2019";
}

:where(:lang(ar)) .sm-testimonial__quote {
	quotes: "\00AB" "\00BB" "\2039" "\203A";
}

.sm-testimonial__quote::before { content: open-quote; }
.sm-testimonial__quote::after { content: close-quote; }

.sm-testimonial__author {
	font-family: var(--sm-font-sans);
	font-weight: var(--sm-fw-semibold);
	margin-block-start: var(--sm-space-4);
}

.sm-testimonial__role {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
}

/* ==========================================================================
   §8. COMPONENTS 10–18
   ========================================================================== */

/* --- 10. PROSE -------------------------------------------------------------
   Purpose: long-form editorial content (posts, pages, Gutenberg output). */
.sm-prose {
	max-width: 68ch;
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-300);
	line-height: var(--sm-lh-body);
}

:where(:lang(ar)) .sm-prose { font-family: var(--sm-font-arabic); }

.sm-prose > * + * { margin-block-start: 1em; }
.sm-prose h2 { margin-block-start: 2em; }
.sm-prose h3 { margin-block-start: 1.6em; }

.sm-prose p { max-width: none; }

.sm-prose ul,
.sm-prose ol { padding-inline-start: var(--sm-space-5); }

.sm-prose li + li { margin-block-start: 0.4em; }
.sm-prose ul li::marker { color: var(--sm-color-accent); }

.sm-prose blockquote {
	border-inline-start: 3px solid var(--sm-color-accent);
	padding-inline-start: var(--sm-space-4);
	font-style: italic;
	color: var(--sm-text-muted);
}

.sm-prose code,
.sm-prose pre {
	font-family: var(--sm-font-mono);
	font-size: var(--sm-fs-100);
	direction: ltr;
	unicode-bidi: isolate;
	background: var(--sm-surface-2);
	padding: 0.15em 0.4em;
	border-radius: var(--sm-radius-xs);
}

.sm-prose pre {
	padding: var(--sm-space-4);
	overflow-x: auto;
}

.sm-prose pre code { padding: 0; background: none; }

.sm-prose figure { margin-block: var(--sm-space-5); }

.sm-prose figcaption {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
	margin-block-start: var(--sm-space-2);
}

.sm-prose--dropcap > p:first-of-type::first-letter {
	float: inline-start;
	font-family: var(--sm-font-serif);
	font-size: 3.5em;
	line-height: 0.9;
	padding-inline-end: var(--sm-space-2);
	color: var(--sm-color-accent);
}

.wp-block-pullquote {
	border-block: 2px solid var(--sm-color-ink);
	padding-block: var(--sm-space-5);
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-500);
	text-align: center;
}

/* --- 11. BUTTON ------------------------------------------------------------ */
.sm-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sm-space-2);
	block-size: 44px;
	padding-inline: var(--sm-space-5);
	border-radius: var(--sm-radius-sm);
	border: 1px solid transparent;
	font-family: var(--sm-font-sans);
	font-weight: var(--sm-fw-semibold);
	font-size: var(--sm-fs-100);
	letter-spacing: var(--sm-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sm-duration-fast) var(--sm-ease-standard),
		color var(--sm-duration-fast) var(--sm-ease-standard),
		border-color var(--sm-duration-fast) var(--sm-ease-standard),
		transform var(--sm-duration-fast) var(--sm-ease-standard);
}

:where(:lang(ar)) .sm-btn,
:where(:lang(ar)) .wp-block-button__link { text-transform: none; letter-spacing: 0; }

.sm-btn--primary,
.wp-block-button__link {
	background: var(--sm-color-accent);
	color: var(--sm-color-on-accent);
	border-color: var(--sm-color-accent);
}

.sm-btn--primary:hover,
.wp-block-button__link:hover {
	background: var(--sm-color-accent-strong);
	border-color: var(--sm-color-accent-strong);
	color: var(--sm-color-on-accent);
}

.sm-btn--secondary,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sm-color-ink);
	border: 1px solid var(--sm-color-ink);
}

.sm-btn--secondary:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--sm-color-ink);
	color: var(--sm-color-paper);
	border-color: var(--sm-color-ink);
}

.sm-btn--ghost {
	background: transparent;
	color: var(--sm-text-muted);
	border-color: transparent;
}

.sm-btn--ghost:hover {
	background: var(--sm-surface-2);
	color: var(--sm-text);
}

.sm-btn--link {
	background: none;
	border: none;
	color: var(--sm-link);
	text-decoration: underline;
	padding-inline: 0;
	text-transform: none;
	letter-spacing: 0;
}

.sm-btn--link:hover { color: var(--sm-link-hover); background: none; }

.sm-btn--sm { block-size: 36px; font-size: 12px; }
.sm-btn--lg { block-size: 52px; padding-inline: var(--sm-space-6); }

@media (pointer: coarse) {
	.sm-btn--sm { min-block-size: 44px; }
}

.sm-btn[disabled],
.sm-btn[aria-disabled="true"] {
	background: var(--sm-gray-100);
	color: var(--sm-gray-500);
	border-color: var(--sm-gray-200);
	cursor: not-allowed;
	pointer-events: none;
}

.sm-btn[aria-busy="true"] {
	cursor: wait;
	opacity: 0.85;
}

.sm-btn:active,
.wp-block-button__link:active { transform: translateY(1px); }

/* --- 12. CHIP — static variant --------------------------------------------- */
.sm-chip--accent {
	background: var(--sm-color-accent-soft);
	color: var(--sm-color-accent-strong);
	border-color: transparent;
}

:root:not([data-scheme="light"]) .sm-chip--accent { color: var(--sm-color-accent-strong); }

/* --- 13. PAGINATION --------------------------------------------------------
   .sm-icon--directional is mirrored in rtl.css, not here. */
.sm-pagination { margin-block-start: var(--sm-space-7); }

.sm-pagination .nav-links {
	display: flex;
	gap: var(--sm-space-2);
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.sm-pagination .page-numbers {
	min-inline-size: 44px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--sm-space-3);
	border: 1px solid var(--sm-border-subtle);
	border-radius: var(--sm-radius-sm);
	color: var(--sm-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--sm-duration-fast) var(--sm-ease-standard),
		background-color var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-pagination .page-numbers:hover { border-color: var(--sm-border-strong); }

.sm-pagination .page-numbers.current {
	background: var(--sm-color-ink);
	color: var(--sm-color-paper);
	border-color: var(--sm-color-ink);
}

.sm-pagination .page-numbers.dots {
	border: none;
	background: none;
}

.sm-icon--directional { /* no transform here; mirrored in rtl.css */ }

/* --- 14. SEARCH ------------------------------------------------------------ */
.sm-search {
	display: flex;
	gap: var(--sm-space-2);
	max-width: 480px;
}

.sm-search .sm-field__input { flex: 1; }
.sm-search button { /* uses .sm-btn--secondary */ }

/* --- 15. 404 --------------------------------------------------------------- */
.sm-404 {
	text-align: start;
	padding-block: var(--sm-section-y-lg);
}

.sm-404__code {
	font-family: var(--sm-font-serif);
	font-size: var(--sm-fs-900);
	color: var(--sm-color-accent);
	line-height: 1;
	letter-spacing: var(--sm-tracking-tight);
}

.sm-404 h1 { margin-block-start: var(--sm-space-3); }

.sm-404 p {
	color: var(--sm-text-muted);
	margin-block-start: var(--sm-space-3);
}

.sm-404 .sm-search { margin-block-start: var(--sm-space-5); }
.sm-404 .sm-btn { margin-block-start: var(--sm-space-5); }

/* --- 16. FORM / FIELD ------------------------------------------------------
   Purpose: contact form. Honeypot (.sm-hp) is off-screen, not display:none. */
.sm-field {
	display: grid;
	gap: var(--sm-space-2);
	margin-block-end: var(--sm-space-5);
}

.sm-field__label {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-100);
	font-weight: var(--sm-fw-semibold);
	color: var(--sm-text);
}

.sm-field__required {
	color: var(--sm-color-danger);
	margin-inline-start: var(--sm-space-1);
}

.sm-field__input,
.sm-field__textarea {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-200);
	color: var(--sm-text);
	background: var(--sm-surface-1);
	border: 1px solid var(--sm-border-strong);
	border-radius: var(--sm-radius-sm);
	padding: var(--sm-space-3) var(--sm-space-4);
	min-block-size: 44px;
	inline-size: 100%;
	transition: border-color var(--sm-duration-fast) var(--sm-ease-standard),
		box-shadow var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-field__textarea { resize: vertical; min-block-size: 140px; }

.sm-field__input:hover,
.sm-field__textarea:hover { border-color: var(--sm-color-ink); }

.sm-field__input:focus,
.sm-field__textarea:focus {
	border-color: var(--sm-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-focus) 25%, transparent);
	outline: none;
}

.sm-field__input[aria-invalid="true"],
.sm-field__textarea[aria-invalid="true"] {
	border-color: var(--sm-color-danger);
	border-width: 2px;
}

.sm-field__error {
	font-size: var(--sm-fs-100);
	color: var(--sm-color-danger);
	display: flex;
	gap: var(--sm-space-2);
	align-items: center;
}

.sm-field__error::before { content: "\26A0"; }

.sm-field__hint {
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
}

.sm-form__row--2 {
	display: grid;
	gap: var(--sm-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sm-form__row--2 { grid-template-columns: 1fr 1fr; }
}

.sm-hp {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.sm-alert {
	padding: var(--sm-space-4) var(--sm-space-5);
	border-radius: var(--sm-radius-sm);
	border: 1px solid;
	margin-block-end: var(--sm-space-5);
}

.sm-alert--success {
	background: var(--sm-color-success-soft);
	border-color: var(--sm-color-success);
	color: var(--sm-color-success);
}

.sm-alert--danger {
	background: var(--sm-color-danger-soft);
	border-color: var(--sm-color-danger);
	color: var(--sm-color-danger);
}

/* --- 17. FOOTER ------------------------------------------------------------
   Spec was cut off after .sm-footer__grid; the rest follows the same patterns. */
.sm-footer {
	background: var(--sm-surface-inverse);
	color: var(--sm-text-inverse);
	padding-block: var(--sm-section-y-lg);
}

.sm-footer a { color: var(--sm-accent-on-inverse); }

.sm-footer a:hover {
	color: var(--sm-color-paper);
	text-decoration: underline;
}

.sm-footer :focus-visible { outline-color: var(--sm-focus-on-inverse); }

.sm-footer__grid {
	display: grid;
	gap: var(--sm-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sm-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.sm-footer__grid { grid-template-columns: 5fr 3fr 4fr; }
}

.sm-footer__title {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-100);
	font-weight: var(--sm-fw-semibold);
	letter-spacing: var(--sm-tracking-wide);
	text-transform: uppercase;
	color: var(--sm-text-inverse-muted);
	margin-block-end: var(--sm-space-4);
}

:where(:lang(ar)) .sm-footer__title { text-transform: none; letter-spacing: 0; }

.sm-footer__text {
	color: var(--sm-text-inverse-muted);
	max-width: 44ch;
}

.sm-footer__list {
	list-style: none;
	display: grid;
	gap: var(--sm-space-2);
}

.sm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sm-space-3);
	margin-block-start: var(--sm-space-8);
	padding-block-start: var(--sm-space-5);
	border-block-start: 1px solid var(--sm-gray-900);
	font-size: var(--sm-fs-100);
	color: var(--sm-text-inverse-muted);
}

/* --- 18. WORDPRESS CORE + ACCESSIBILITY -----------------------------------
   Skip link, screen-reader text, alignments, captions. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.screen-reader-text:focus,
.sm-skip-link:focus {
	clip-path: none;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
}

.sm-skip-link {
	position: absolute;
	inset-block-start: var(--sm-space-2);
	inset-inline-start: var(--sm-space-2);
	z-index: var(--sm-z-skip-link);
	padding: var(--sm-space-3) var(--sm-space-5);
	background: var(--sm-color-ink);
	color: var(--sm-color-paper);
	border-radius: var(--sm-radius-sm);
	transform: translateY(-200%);
}

.sm-skip-link:focus {
	transform: none;
	color: var(--sm-color-paper);
}

.alignleft { float: inline-start; margin-inline-end: var(--sm-space-5); margin-block-end: var(--sm-space-3); }
.alignright { float: inline-end; margin-inline-start: var(--sm-space-5); margin-block-end: var(--sm-space-3); }
.aligncenter { margin-inline: auto; }
.alignwide { max-inline-size: min(100%, var(--sm-container)); margin-inline: auto; }
.alignfull { inline-size: 100%; max-inline-size: none; }

.wp-caption,
.wp-block-image figure { max-inline-size: 100%; }

.wp-caption-text,
.wp-element-caption {
	font-family: var(--sm-font-sans);
	font-size: var(--sm-fs-100);
	color: var(--sm-text-subtle);
	margin-block-start: var(--sm-space-2);
}

/* ==========================================================================
   §9. UTILITIES + PRINT
   ========================================================================== */
.sm-stack > * + * { margin-block-start: var(--sm-space-4); }
.sm-stack--lg > * + * { margin-block-start: var(--sm-space-6); }
.sm-cluster { display: flex; flex-wrap: wrap; gap: var(--sm-space-3); align-items: center; }
.sm-text-muted { color: var(--sm-text-muted); }
.sm-text-subtle { color: var(--sm-text-subtle); }
.sm-text-center { text-align: center; }
.sm-mt-0 { margin-block-start: 0; }
.sm-mb-0 { margin-block-end: 0; }
.sm-hidden,
[hidden] { display: none !important; }
.sm-nowrap { white-space: nowrap; }

@media print {
	.sm-header,
	.sm-footer,
	.sm-scrim,
	.sm-nav,
	.sm-filter,
	.sm-pagination,
	.sm-hero__actions { display: none !important; }

	html { scroll-behavior: auto; }

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	a { color: inherit; text-decoration: underline; }

	.sm-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	.sm-section { padding-block: var(--sm-space-5); }
	.sm-card,
	.sm-cred { break-inside: avoid; }
}

/* ==========================================================================
   §10. REFERENCE SKIN — navy + blue palette and home-page components
   Loaded last on purpose: re-maps the §1 tokens to the approved reference
   site (dark navy header/hero, blue accent, pale-blue alt sections).
   ========================================================================== */
:root {
	--sm-color-ink: #0B1B33;
	--sm-color-paper: #FFFFFF;
	--sm-color-accent: #1D4ED8;
	--sm-color-accent-strong: #1E40AF;
	--sm-color-accent-soft: #DBE7FB;
	--sm-color-on-accent: #FFFFFF;

	--sm-gray-50: #EEF4FC;
	--sm-gray-100: #E3EBF6;
	--sm-gray-200: #D3DDEB;
	--sm-gray-300: #B6C4D8;
	--sm-gray-500: #5B6B82;
	--sm-gray-700: #3B4A61;
	--sm-gray-900: #16253D;

	--sm-surface-inverse: #0B1B33;
	--sm-surface-hero: #0F2747;
	--sm-text-inverse: #F4F7FC;
	--sm-text-inverse-muted: #B4C2D8;
	--sm-accent-on-inverse: #8FB4F5;
	--sm-focus: #1D4ED8;
	--sm-focus-on-inverse: #8FB4F5;
	--sm-overlay: rgba(6, 14, 28, 0.6);
	--sm-header-h: 64px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-scheme="light"]) {
		--sm-color-ink: #EAF0FA;
		--sm-color-paper: #0A1526;
		--sm-color-accent: #6C9BF2;
		--sm-color-accent-strong: #9BBBF7;
		--sm-color-accent-soft: #14284A;
		--sm-color-on-accent: #0A1526;
		--sm-gray-50: #0F1D33;
		--sm-gray-100: #14243D;
		--sm-gray-200: #1F3150;
		--sm-gray-300: #2C4268;
		--sm-gray-500: #8FA2BF;
		--sm-gray-700: #B4C2D8;
		--sm-surface-2: #0F1D33;
		--sm-surface-inverse: #050C18;
		--sm-surface-hero: #0B1B33;
		--sm-border-subtle: #1F3150;
		--sm-border-strong: #2C4268;
		--sm-text-muted: #B4C2D8;
		--sm-text-subtle: #8FA2BF;
		--sm-focus: #8FB4F5;
	}
}

/* Dark header (always navy, like the reference) */
.sm-header {
	background: var(--sm-surface-inverse);
	border-block-end-color: rgb(255 255 255 / 0.08);
	color: var(--sm-text-inverse);
}
.sm-header__brand { color: var(--sm-text-inverse); flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
.sm-header__name { font-family: var(--sm-font-serif); font-weight: var(--sm-fw-bold); font-size: var(--sm-fs-300); }
.sm-header__title { color: var(--sm-accent-on-inverse); font-size: 0.7rem; letter-spacing: 0.04em; white-space: nowrap; }
.sm-header__brand { flex-direction: row; align-items: center; gap: var(--sm-space-3); }
.sm-header__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; }
.sm-header__logo { display: flex; align-items: center; flex: none; }
.sm-header__logo a { display: flex; }
.sm-header__logo img { max-height: 44px; width: auto; }
[dir="rtl"] .sm-header__text { align-items: flex-start; }
.sm-nav__link { color: var(--sm-text-inverse-muted); }
.sm-nav__link:hover { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.sm-nav__link[aria-current="page"],
.sm-nav__list .current-menu-item > .sm-nav__link,
.sm-nav__list .current_page_item > .sm-nav__link { color: #fff; border-color: var(--sm-accent-on-inverse); }
.sm-nav__toggle { color: #fff; }
.sm-lang-switch { color: #fff; border-color: rgb(255 255 255 / 0.35); font-variant-caps: normal; text-transform: none; letter-spacing: 0; }
.sm-lang-switch:hover { background: #fff; color: var(--sm-surface-inverse); }
.sm-header :focus-visible { outline-color: var(--sm-focus-on-inverse); }
@media (max-width: 1023.98px) {
	.sm-nav { background: var(--sm-surface-inverse); border-inline-start-color: rgb(255 255 255 / 0.1); }
	.sm-nav__link { border-block-end-color: rgb(255 255 255 / 0.1); }
}

/* Dark hero */
.sm-hero-wrap {
	background: linear-gradient(135deg, var(--sm-surface-hero), var(--sm-surface-inverse));
	color: var(--sm-text-inverse);
	padding-block: var(--sm-space-8);
}
.sm-hero-wrap h1, .sm-hero-wrap .sm-hero__title { color: #fff; }
.sm-hero-wrap .sm-eyebrow { color: var(--sm-accent-on-inverse); }
.sm-hero-wrap .sm-hero__lead { font-family: var(--sm-font-sans); font-size: var(--sm-fs-300); color: var(--sm-text-inverse-muted); }
.sm-hero-wrap .sm-btn--primary { background: #2563EB; border-color: #2563EB; color: #fff; }
.sm-hero-wrap .sm-btn--primary:hover { background: #1D4ED8; border-color: #1D4ED8; }
.sm-hero-wrap .sm-btn--secondary { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.sm-hero-wrap .sm-btn--secondary:hover { background: #fff; color: var(--sm-surface-inverse); }
.sm-hero-wrap :focus-visible { outline-color: var(--sm-focus-on-inverse); }
.sm-hero__portrait { position: relative; border-radius: var(--sm-radius-sm); background: rgb(255 255 255 / 0.06); }
.sm-hero__portrait::after { content: ""; position: absolute; inset: var(--sm-space-4); border: 1px solid rgb(255 255 255 / 0.35); pointer-events: none; }
.sm-hero__portrait-caption { position: absolute; inset-block-end: var(--sm-space-3); inset-inline-start: var(--sm-space-4); font-size: 0.65rem; letter-spacing: var(--sm-tracking-wide); text-transform: uppercase; color: #fff; z-index: 1; }
.sm-social { display: flex; gap: var(--sm-space-2); list-style: none; }
.sm-social a { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--sm-radius-sm); color: #fff; font-size: var(--sm-fs-100); font-weight: var(--sm-fw-semibold); text-decoration: none; }
.sm-social a:hover { background: #fff; color: var(--sm-surface-inverse); }

/* Newsrooms / affiliations logo cards */
.sm-logos { display: grid; gap: var(--sm-space-4); grid-template-columns: repeat(2, 1fr); list-style: none; }
@media (min-width: 1024px) { .sm-logos { grid-template-columns: repeat(4, 1fr); } }
.sm-logo-card { display: grid; grid-template-rows: 88px auto; background: var(--sm-surface-1); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-sm); overflow: hidden; text-decoration: none; color: var(--sm-link); font-size: var(--sm-fs-100); transition: border-color var(--sm-duration-fast), box-shadow var(--sm-duration-fast); }
.sm-logo-card:hover { border-color: var(--sm-border-strong); box-shadow: var(--sm-shadow-md); }
.sm-logo-card__mark { display: flex; align-items: center; justify-content: center; padding: var(--sm-space-3); background: #fff; color: #0B1B33; font-family: var(--sm-font-serif); font-weight: var(--sm-fw-bold); font-size: var(--sm-fs-300); text-align: center; }
.sm-logo-card__mark img { max-block-size: 56px; inline-size: auto; object-fit: contain; }
.sm-logo-card__label { padding: var(--sm-space-3); text-decoration: underline; }
.sm-section--inverse .sm-logo-card { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.12); }
.sm-section--inverse .sm-logo-card__label { color: var(--sm-accent-on-inverse); }
.sm-section--inverse .sm-section-header__title { color: #fff; }
.sm-section--inverse .sm-btn--secondary { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.sm-section--inverse .sm-btn--secondary:hover { background: #fff; color: var(--sm-surface-inverse); }

/* Practice */
.sm-pullnote { border-inline-start: 3px solid var(--sm-color-accent); padding-inline-start: var(--sm-space-4); font-family: var(--sm-font-serif); font-weight: var(--sm-fw-semibold); color: var(--sm-color-ink); margin-block-start: var(--sm-space-5); }
.sm-meta-list { display: grid; gap: var(--sm-space-4); }
.sm-meta-list > div { border-block-start: 1px solid var(--sm-border-subtle); padding-block-start: var(--sm-space-3); }
.sm-meta-list dt { font-size: 0.65rem; letter-spacing: var(--sm-tracking-wide); text-transform: uppercase; font-weight: var(--sm-fw-semibold); color: var(--sm-color-accent); }

/* Latest work grid: one large + stacked side cards */
.sm-work { display: grid; gap: var(--sm-space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .sm-work { grid-template-columns: 7fr 5fr; } .sm-work__side { display: grid; gap: var(--sm-space-5); align-content: start; } }
.sm-work__side { display: grid; gap: var(--sm-space-5); }
.sm-work-card { position: relative; display: flex; flex-direction: column; background: var(--sm-surface-1); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-sm); overflow: hidden; transition: box-shadow var(--sm-duration-base), border-color var(--sm-duration-base); }
.sm-work-card:hover { box-shadow: var(--sm-shadow-md); border-color: var(--sm-border-strong); }
.sm-work-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--sm-gray-200), var(--sm-gray-100)); }
.sm-work-card--lead .sm-work-card__media { aspect-ratio: 4 / 3; }
.sm-work-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sm-work-card__tag { position: absolute; inset-block-start: var(--sm-space-3); inset-inline-start: var(--sm-space-3); background: rgb(11 27 51 / 0.85); color: #fff; font-size: 0.65rem; letter-spacing: var(--sm-tracking-wide); text-transform: uppercase; padding: 3px 8px; border-radius: var(--sm-radius-xs); }
.sm-work-card__num { position: absolute; inset-block-end: var(--sm-space-3); inset-inline-end: var(--sm-space-3); background: rgb(11 27 51 / 0.85); color: #fff; font-size: var(--sm-fs-100); padding: 2px 8px; border-radius: var(--sm-radius-xs); font-variant-numeric: tabular-nums; }
.sm-work-card__body { padding: var(--sm-space-4) var(--sm-space-5) var(--sm-space-5); display: grid; gap: var(--sm-space-2); align-content: start; flex: 1; }
.sm-work-card__title { font-size: var(--sm-fs-300); }
.sm-work-card--lead .sm-work-card__title { font-size: var(--sm-fs-500); }
.sm-work-card__cta { font-size: var(--sm-fs-100); font-weight: var(--sm-fw-semibold); }
.sm-work-card__cta a { text-decoration: none; }
.sm-work-card__cta a::after { content: ""; position: absolute; inset: 0; }
.sm-work-card--lead .sm-work-card__cta { margin-block-start: auto; }
.sm-work__footer { margin-block-start: var(--sm-space-6); }

/* Footer (navy, reference layout) */
.sm-footer__row { display: grid; gap: var(--sm-space-6); }
@media (min-width: 768px) { .sm-footer__row { grid-template-columns: 1fr auto; align-items: start; } }
.sm-footer__brand { font-family: var(--sm-font-serif); font-weight: var(--sm-fw-bold); font-size: var(--sm-fs-300); color: #fff; }
.sm-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sm-space-4); list-style: none; font-size: var(--sm-fs-100); }
.sm-footer { padding-block: var(--sm-space-8) var(--sm-space-5); }
.sm-footer .sm-social { margin-block-start: var(--sm-space-4); }

/* ==========================================================================
   11. INNER PAGES
   Page head, milestones, media list, skill columns, forms, comments, misc.
   ========================================================================== */
.sm-page-head { padding-block: var(--sm-space-8) var(--sm-space-7); }
.sm-page-head__title {
	max-inline-size: 22ch;
	margin-block: var(--sm-space-3) var(--sm-space-4);
	text-wrap: balance;
}
.sm-page-head .sm-hero__lead { max-inline-size: 60ch; }

.sm-milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sm-space-5); }
.sm-milestone {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sm-space-5);
	padding-block-start: var(--sm-space-4);
	border-block-start: 1px solid var(--sm-border-strong);
}
.sm-milestone__num {
	font-family: var(--sm-font-sans);
	font-weight: var(--sm-fw-bold);
	color: var(--sm-color-accent);
	font-variant-numeric: tabular-nums;
}

.sm-media-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sm-space-6); }
.sm-media-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sm-space-4);
	padding-block-end: var(--sm-space-6);
	border-block-end: 1px solid var(--sm-border-strong);
}
.sm-media-item:has(.sm-media-item__logo img) { grid-template-columns: 96px 1fr; }
.sm-media-item__logo img { max-inline-size: 96px; block-size: auto; }
.sm-media-item__title { font-size: var(--sm-fs-400); }
.sm-media-item__title a { color: inherit; }
.sm-media-item__body { display: grid; gap: var(--sm-space-2); min-inline-size: 0; }

.sm-skill-col { border-block-start: 2px solid var(--sm-text); padding-block-start: var(--sm-space-4); }
.sm-skill-col__title { font-size: var(--sm-fs-400); margin-block-end: var(--sm-space-4); }
.sm-skill-col__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sm-space-2); color: var(--sm-text-muted); }
.sm-skill-col__list li { padding-block-end: var(--sm-space-2); border-block-end: 1px solid var(--sm-border-strong); }

.sm-form { display: grid; gap: var(--sm-space-5); }
.sm-form__status { padding: var(--sm-space-3) var(--sm-space-4); border-inline-start: 3px solid var(--sm-color-accent); background: var(--sm-surface, #eef4fc); }
.sm-form__status[data-state="error"] { border-color: var(--sm-color-danger); }
.sm-hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.sm-search { display: flex; gap: var(--sm-space-3); flex-wrap: wrap; }
.sm-search .sm-field__input { flex: 1 1 14rem; min-inline-size: 0; }

.sm-single__image { inline-size: 100%; block-size: auto; margin-block-end: var(--sm-space-5); }
.sm-post-meta { color: var(--sm-text-subtle); font-size: var(--sm-fs-100); }
.sm-post-nav { display: flex; justify-content: space-between; gap: var(--sm-space-4); flex-wrap: wrap; margin-block: var(--sm-space-7); }

.sm-comments { margin-block-start: var(--sm-space-8); }
.sm-comments__list { list-style: none; padding: 0; display: grid; gap: var(--sm-space-5); }
.sm-comments__list .children { list-style: none; padding-inline-start: var(--sm-space-5); margin-block-start: var(--sm-space-4); }
.sm-comments__title { margin-block-end: var(--sm-space-5); }

[data-sm-filter-grid] [hidden] { display: none !important; }

/* --- 12. CREDENTIAL CARDS (Skills & Credentials page) ------------------- */
.sm-skill-col__title { font-family: var(--sm-font-serif); }
.sm-cred-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sm-space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .sm-cred-grid { grid-template-columns: repeat(2, 1fr); } }
.sm-cred-card {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: var(--sm-space-4);
	align-items: center;
	padding: var(--sm-space-4);
	border: 1px solid var(--sm-border-strong);
	min-inline-size: 0;
}
.sm-cred__logo { display: grid; place-items: center; inline-size: 112px; block-size: 64px; overflow: hidden; }
.sm-cred__logo img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.sm-cred__mark {
	display: grid; place-items: center; inline-size: 64px; block-size: 56px;
	background: var(--sm-color-ink, #0B1B33); color: #fff;
	font: var(--sm-fw-bold, 700) 11px/1.1 var(--sm-font-sans); text-align: center; padding: 4px; letter-spacing: .04em;
}
.sm-cred__body { display: grid; gap: var(--sm-space-1, 4px); min-inline-size: 0; }
.sm-cred__title { font-family: var(--sm-font-serif); font-size: var(--sm-fs-300, 1.125rem); }
.sm-cred__org { color: var(--sm-text); }
.sm-cred__meta { color: var(--sm-text-muted); font-size: var(--sm-fs-100); }
.sm-cred__link { color: var(--sm-link, var(--sm-color-accent)); font-weight: var(--sm-fw-semibold, 600); font-size: var(--sm-fs-100); overflow-wrap: anywhere; }
.sm-cred__visit { color: var(--sm-text); font-size: var(--sm-fs-100); font-weight: var(--sm-fw-semibold, 600); }

/* Plain section header (no top rule, sans lede) — Skills & Credentials */
.sm-section-header--plain { border-block-start: 0; padding-block-start: 0; max-width: none; margin-block-end: var(--sm-space-6); }
.sm-section-header--plain .sm-section-header__lede { font-family: var(--sm-font-sans); font-size: var(--sm-fs-200); max-width: 70ch; }
.sm-cred-card { background: var(--sm-color-paper); }
.sm-section:not(.sm-section--alt) .sm-cred-card { align-items: start; }

.sm-logo-card__sub{display:block;margin-block-start:var(--sm-space-1,4px);color:var(--sm-text-muted,#51607a);font-size:.8125rem;text-decoration:none}

/* Back to top */
.sm-totop {
	position: fixed;
	inset-block-end: var(--sm-space-5, 24px);
	inset-inline-end: var(--sm-space-5, 24px);
	z-index: 90;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: 1px solid var(--sm-border-strong);
	border-radius: 50%;
	background: var(--sm-color-ink, #0B1B33);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(11, 27, 51, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sm-totop[data-visible] { opacity: 1; visibility: visible; transform: none; }
.sm-totop:hover { background: var(--sm-color-accent, #1D4ED8); }
.sm-totop:focus-visible { outline: 3px solid var(--sm-color-accent, #1D4ED8); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sm-totop { transition: none; } }
@media print { .sm-totop { display: none; } }
div.sm-logo-card .sm-logo-card__label { text-decoration: none; color: var(--sm-color-ink, #0B1B33); }
aside .sm-social a { color: var(--sm-color-ink, #0B1B33); border-color: var(--sm-border-strong); }
aside .sm-social a:hover { background: var(--sm-color-ink, #0B1B33); color: #fff; }
.sm-social a svg { display: block; }

/* v1.1.2: YouTube thumbnails carry letterbox bars; crop them */
.sm-work-card__media img[src*="ytimg.com"] { transform: scale(1.34); }
.sm-work-card__media { overflow: hidden; }

/* v1.1.10: home selected work = even 3x2 grid (6 equal cards) */
.sm-work-grid { display: grid; gap: var(--sm-space-5); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px) { .sm-work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sm-work-grid { grid-template-columns: repeat(3, 1fr); } }
.sm-work-grid .sm-work-card { block-size: 100%; }
.sm-work-grid .sm-work-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.sm-work-grid .sm-work-card__title { font-size: var(--sm-fs-300); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm-work-grid .sm-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm-work-grid .sm-work-card__cta { margin-block-start: auto; }

/* Header logo: small round badge beside the name (left in EN, right in AR). */
.sm-header__brand { flex-direction: row !important; align-items: center !important; gap: 10px; }
.sm-header__logo { flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgb(255 255 255 / 0.35); background: #fff; }
.sm-header__logo a, .sm-header__logo .custom-logo-link { display: block; inline-size: 100%; block-size: 100%; }
.sm-header__logo img, .sm-header__brand .custom-logo { inline-size: 40px !important; block-size: 40px !important; max-inline-size: none !important; max-block-size: none !important; max-height: none !important; object-fit: cover; object-position: center 20%; border-radius: 50%; display: block; }

/* v1.1.18: show the whole logo inside the circle (no cropping). */
.sm-header__logo { inline-size: 44px; block-size: 44px; background: #fff; padding: 3px; box-sizing: border-box; }
.sm-header__logo img, .sm-header__brand .custom-logo { inline-size: 100% !important; block-size: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 50%; }
[dir="rtl"] .sm-header__brand { flex-direction: row !important; }

/* v1.1.19: logo is a plain <img> inside the circle. */
.sm-header__logo { display: block; inline-size: 44px; block-size: 44px; border-radius: 50%; overflow: hidden; background: #fff; padding: 0; border: 2px solid rgb(255 255 255 / 0.35); box-sizing: border-box; }
.sm-header__logo img, img.sm-header__logo-img { display: block; inline-size: 100% !important; block-size: 100% !important; max-inline-size: none !important; max-block-size: none !important; max-height: none !important; object-fit: cover !important; object-position: center 25% !important; border-radius: 50%; }