/*
Theme Name:   ModelDebt
Theme URI:    https://modeldebt.ai
Author:       Ali Jaun
Author URI:   https://nakisa.com
Description:  Editorial classic theme for ModelDebt.ai, built from the "Model Debt" Figma handoff (Home, About, Research, Articles, Article). Pages are composed from Gutenberg core blocks + theme classes; ready-made page layouts ship as block patterns (Patterns → ModelDebt).
Version:      2.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  modeldebt
Tags:         blog, editorial, one-column, custom-menu, custom-logo, featured-images, block-patterns, editor-style, rtl-language-support, translation-ready

ModelDebt is based on Underscores https://underscores.me/, (C) 2012-2026 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Tokens (Figma variables)
# Base / reset
# Layout
# Header + navigation
# Footer
# Shared blocks
# Home page.md-prose
# About page
# Research page + apply form
# Articles list (index.php / archive.php / search.php)
# Single article (single.php)
# Generic content (pages, 404, search, comments, widgets)
# Mobile (<= 860px)
--------------------------------------------------------------*/

/*
 * ModelDebt theme — main stylesheet
 * Source: Figma "Model Debt" handoff
 *   01 Home (7:3) · 02 About (10:33) · 03 Research (11:50)
 *   04 Articles (13:66 → index.php) · 05 Article (16:74 → single.php)
 *
 *  1. Tokens            8. About page
 *  2. Base / reset      9. Research page + apply form
 *  3. Layout           10. Articles list (index.php)
 *  4. Header + nav     11. Single article (single.php)
 *  5. Footer           12. Generic content (plain pages, 404, search)
 *  6. Shared blocks    13. Mobile (≤ 860px, per handoff)
 *  7. Home page
 */

/* ==========================================================================
   1. Tokens (Figma variables)
   ========================================================================== */
:root {
	/* colour */
	--md-bg-page: #faf9f6;
	--md-surface: #ffffff;
	--md-text-ink: #332929;
	--md-text-body: #585146;
	--md-text-muted: #6b665f;
	--md-text-subtle: #958e85;
	--md-text-on-accent: #ffffff;
	--md-border-rule: #e4e1da;
	--md-border-card: #e1dbd8;
	--md-accent: #fc5402;
	--md-accent-hover: #d24304;
	--md-lavender: #9cafed;

	/* families */
	--md-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--md-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--md-font-ui: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* type scale — desktop (size / line-height) */
	--md-t-headline: 72px;     --md-lh-headline: 74px;   /* Display/Headline */
	--md-t-page-title: 56px;   --md-lh-page-title: 60px; /* Display/Page title */
	--md-t-thesis: 40px;       --md-lh-thesis: 48px;     /* Display/Thesis (+ h2) */
	--md-t-section: 32px;      --md-lh-section: 48px;    /* Display/Section title */
	--md-t-stat: 80px;         --md-lh-stat: 80px;       /* Display/Stat figure */
	--md-t-stat-body: 20px;    --md-lh-stat-body: 29.5px;
	--md-t-lede: 22px;         --md-lh-lede: 34px;       /* Body/Lede */
	--md-t-para: 22px;         --md-lh-para: 35px;       /* Body/Paragraph */
	--md-t-small: 20px;        --md-lh-small: 30px;      /* Body/Small */

	/* layout */
	--md-container: 1440px;
	--md-gutter: 72px;
	--md-measure: 843px;        /* body text max */
	--md-col-gap: 44px;
	--md-header-h: 73px;

	/* gradients (orange → lavender) */
	--md-grad-line: linear-gradient(90deg, #fc5402 0%, #9cafed 100%);
	--md-grad-chip: linear-gradient(133.16deg, #fc5402 2%, #99aae2 81%);
	--md-grad-card: linear-gradient(141.57deg, #fc5402 0.64%, #99aae2 67.93%);
	--md-grad-button: radial-gradient(130% 120% at 30% 66%, #f38b58 0%, #dc927a 25%, #c69a9d 50%, #99aae2 100%);
	--md-grad-stat: conic-gradient(from 222deg at 81px 21px,
		#9cafed 0%, #b498b3 0.2%, #cc8278 0.4%, #e46b3d 0.6%, #fc5402 0.8%,
		#f65a11 7%, #f05f1f 13.2%, #e46b3d 25.6%, #d8765a 38%, #cc8278 50.4%,
		#b498b3 75.2%, #9cafed 100%);
	--md-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   2. Base / reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--md-bg-page);
	color: var(--md-text-body);
	font-family: var(--md-font-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--md-accent); }
a:hover { color: var(--md-accent-hover); }
:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--md-font-serif);
	font-weight: 500;
	color: var(--md-text-ink);
}
p { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	z-index: 1000;
	width: auto; height: auto;
	padding: 12px 18px;
	margin: 0;
	clip: auto;
	clip-path: none;
	background: var(--md-surface);
	color: var(--md-text-ink);
	font: 600 15px/1 var(--md-font-ui);
	box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.md-container,
.md-page {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: var(--md-gutter);
}
/* a .md-page inside a container must not double-pad */
.md-container .md-page { padding-inline: 0; }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* Group blocks on classic themes: keep children in the parent's flex flow
   (inner-container is also disabled in functions.php) */
.md-page .wp-block-group__inner-container { display: contents; }

/* neutralise default block spacing inside designed pages */
.md-page p,
.md-page h1,
.md-page h2,
.md-page h3 { margin: 0; }
.md-page > *,
.md-page .wp-block-group > * { margin-block: 0; }

/* rules */
.md-rule,
.md-page .wp-block-separator.md-rule {
	display: block;
	width: 100%;
	max-width: none;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--md-border-rule);
	opacity: 1;
}

.md-rule--full { width: 100%; }

/* ==========================================================================
   4. Header + navigation
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--md-bg-page);
	border-bottom: 1px solid var(--md-border-rule);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: calc(var(--md-header-h) - 1px);
}

.site-branding { margin: 0; line-height: 0; flex-shrink: 0; }
.site-branding a { display: inline-block; }
.site-branding img,
.site-branding .custom-logo,
.site-branding .md-logo {
	display: block;
	width: auto;
	height: 22px;
	color: var(--md-text-ink);
}
.site-title {
	font: 400 22px/1 var(--md-font-sans);
	letter-spacing: -0.02em;
	color: var(--md-text-ink);
	text-decoration: none;
}

.main-navigation { align-self: stretch; display: flex; }
.main-navigation ul {
	display: flex;
	gap: var(--md-col-gap);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-navigation li { position: relative; height: 100%; }
.main-navigation ul ul { display: none; } /* single-level nav by design */

.main-navigation a {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 133px;
	height: 100%;
	padding: 0 4px 12px;
	font: 600 16.5px/25.5px var(--md-font-ui);
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--md-text-ink);
	transition: color .15s ease;
}
.main-navigation a:hover,
.main-navigation a:focus-visible { color: var(--md-accent); }

/* active page: 3px gradient underline sitting on the header rule */
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
.main-navigation .current-menu-parent > a::after,
.main-navigation .current_page_parent > a::after,
.main-navigation .current-menu-ancestor > a::after,
.main-navigation .current-page-ancestor > a::after,
.main-navigation a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--md-grad-line);
}

/* menu toggle (mobile only) */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--md-text-ink);
	cursor: pointer;
}
.menu-toggle__icon { position: relative; display: block; width: 22px; height: 14px; }
.menu-toggle__icon::before,
.menu-toggle__icon::after,
.menu-toggle__icon span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon span { top: 6.25px; }
.menu-toggle__icon::after { top: 12.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 6.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 6.25px; transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span { opacity: 0; }

/* ==========================================================================
   5. Footer
   ========================================================================== */
.site-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--md-border-rule);
}
.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding-block: 44px;
}
.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 30px; }
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img,
.site-footer__logo .md-logo { display: block; width: auto; height: 18px; color: var(--md-text-ink); }
.site-footer__tagline {
	max-width: 553px;
	font: 300 14px/21px var(--md-font-sans);
	color: var(--md-text-body);
}
.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-navigation a {
	font: 500 15px/23px var(--md-font-ui);
	color: var(--md-text-body);
	text-decoration: none;
	white-space: nowrap;
}
.footer-navigation a:hover,
.footer-navigation a:focus-visible { color: var(--md-accent); }

.site-info {
	padding-top: 22px;
	border-top: 1px solid var(--md-border-rule);
	font: 400 13px/19px var(--md-font-sans);
	color: var(--md-text-muted);
}
.site-info a { color: inherit; }

/* ==========================================================================
   6. Shared blocks / type classes
   ========================================================================== */
.md-eyebrow {
	font: 600 13.5px/20.5px var(--md-font-ui);
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--md-text-subtle);
}
.md-eyebrow a { color: inherit; text-decoration: none; }

.md-page-title {
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-page-title);
	line-height: var(--md-lh-page-title);
	letter-spacing: -0.012em;
	color: var(--md-text-ink);
}
.md-section-title {
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-thesis);
	line-height: var(--md-lh-thesis);
	letter-spacing: -0.006em;
	color: var(--md-text-ink);
}
.md-lede {
	max-width: 826px;
	font-family: var(--md-font-sans);
	font-weight: 300;
	font-size: var(--md-t-lede);
	line-height: var(--md-lh-lede);
	color: var(--md-text-body);
}
.md-body-lg,
.md-body-copy p {
	max-width: var(--md-measure);
	font-family: var(--md-font-sans);
	font-weight: 400;
	font-size: var(--md-t-para);
	line-height: var(--md-lh-para);
	color: var(--md-text-body);
}
.md-body-copy { display: flex; flex-direction: column; gap: 10px; }

/* text button with arrow */
.md-link a,
a.md-link {
	font: 600 17px/27px var(--md-font-ui);
	color: var(--md-accent);
	text-decoration: none;
	transition: color .15s ease;
}
.md-link a:hover,
a.md-link:hover,
.md-link a:focus-visible { color: var(--md-accent-hover); }

/* filled gradient button */
.md-button,
.wp-block-button.md-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border: 1px solid rgba(241, 237, 235, .4);
	border-radius: 4px;
	background: var(--md-accent) var(--md-grad-button);
	color: var(--md-text-on-accent);
	font: 600 17px/27px var(--md-font-ui);
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.md-button:hover,
.md-button:focus-visible { color: var(--md-text-on-accent); filter: saturate(1.15) brightness(.95); }
.md-button:active { transform: translateY(1px); }

/* page intro (About / Research / Articles) */
.md-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding: 60px 0 51px;
}

/* generic content section: title + copy (+ link) */
.md-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 27px;
	padding: 50px 0 51px;
}
.md-section--tight { padding-bottom: 36px; }

/* two-up / three-up columns shared base */
.md-page .wp-block-columns.md-stats,
.md-page .wp-block-columns.md-cards,
.md-page .wp-block-columns.md-bio {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	margin: 0;
}
.md-page .md-stats > .wp-block-column,
.md-page .md-cards > .wp-block-column,
.md-page .md-bio > .wp-block-column { flex: 1 1 0; min-width: 0; margin: 0; }

/* ==========================================================================
   7. Home page
   ========================================================================== */
.md-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding: 60px 0 51px;
}
.md-hero__title {
	max-width: 979px;
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-headline);
	line-height: var(--md-lh-headline);
	letter-spacing: -0.012em;
	color: var(--md-text-ink);
}
.md-hero .md-lede { max-width: 593px; }

.md-thesis-section {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 50px 0 1px;
}
.md-thesis {
	max-width: 827px;
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-thesis);
	line-height: var(--md-lh-thesis);
	letter-spacing: -0.006em;
	color: var(--md-text-ink);
}

.md-stats > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 var(--md-col-gap) 17px;
	border-left: 1px solid var(--md-border-rule);
}
.md-stats > .wp-block-column:first-child { padding-left: 0; border-left: 0; }
.md-stats > .wp-block-column:last-child { padding-right: 0; }

.md-stat__figure {
	display: block;
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-stat);
	line-height: var(--md-lh-stat);
	letter-spacing: -0.012em;
	color: var(--md-accent);
	background-image: var(--md-grad-stat);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.md-stat__text {
	font-family: var(--md-font-ui);
	font-weight: 500;
	font-size: var(--md-t-stat-body);
	line-height: var(--md-lh-stat-body);
	color: var(--md-text-body);
}
.md-stat__source { font: 500 16px/24px var(--md-font-ui); color: var(--md-text-muted); }

.md-page .wp-block-columns.md-cards { padding: 57px 0 58px; }
.md-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 0 49px 0 50px;
	border-left: 1px solid var(--md-border-rule);
}
.md-cards > .wp-block-column:first-child { padding-left: 0; border-left: 0; }
.md-cards > .wp-block-column:last-child { padding-right: 0; }

.md-card__title {
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-section);
	line-height: var(--md-lh-section);
	letter-spacing: -0.006em;
	color: var(--md-text-ink);
}
.md-card__title a { color: inherit; text-decoration: none; }
.md-card__title a:hover { color: var(--md-accent); }
.md-card__text {
	max-width: 577px;
	font-family: var(--md-font-sans);
	font-weight: 300;
	font-size: var(--md-t-small);
	line-height: var(--md-lh-small);
	color: var(--md-text-body);
}

/* ==========================================================================
   8. About page
   ========================================================================== */
.md-authors {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 27px;
	padding: 50px 0 72px;
}
.md-bios {
	display: flex;
	flex-direction: column;
	gap: 88px;
	width: 100%;
	padding-top: 45px;
}
.md-page .wp-block-columns.md-bio { align-items: flex-start; }
.md-page .md-bio > .wp-block-column:first-child {
	flex: 0 0 440px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.md-page .md-bio > .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.md-bio__name {
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-section);
	line-height: var(--md-lh-section);
	letter-spacing: -0.006em;
	color: var(--md-text-ink);
}
.md-bio__text p {
	max-width: var(--md-measure);
	font-family: var(--md-font-sans);
	font-size: var(--md-t-para);
	line-height: var(--md-lh-para);
	color: var(--md-text-body);
}

/* ==========================================================================
   9. Research page + apply form
   ========================================================================== */
.md-research { padding-bottom: 50px; }

.md-apply {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding: 50px 50px 72px;
	background: var(--md-surface);
	border: 1px solid var(--md-border-card);
	border-radius: 17px;
	scroll-margin-top: 24px;
}
.md-apply > .wp-block-shortcode,
.md-apply > .md-form-wrap { width: 100%; }

.md-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 520px));
	gap: 36px;
	width: 100%;
	margin: 0;
}
.md-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.md-field--full { grid-column: 1 / -1; max-width: 1076px; }
.md-field label {
	font: 500 16px/24px var(--md-font-ui);
	color: var(--md-text-muted);
}
.md-field label .md-req { color: var(--md-accent); margin-left: 2px; }
.md-field input,
.md-field textarea {
	width: 100%;
	margin: 0;
	padding: 0 22px;
	background: var(--md-surface);
	border: 1px solid var(--md-border-rule);
	border-radius: 35px;
	color: var(--md-text-ink);
	font: 400 17px/1.5 var(--md-font-sans);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.md-field input { height: 48px; }
.md-field textarea {
	height: 169px;
	min-height: 120px;
	padding: 14px 16px;
	border-radius: 5px;
	resize: vertical;
}
.md-field input:focus,
.md-field textarea:focus {
	outline: none;
	border-color: var(--md-accent);
	box-shadow: 0 0 0 3px rgba(252, 84, 2, .14);
}
.md-field input[aria-invalid="true"],
.md-field textarea[aria-invalid="true"] { border-color: #c62828; }
.md-form__actions { grid-column: 1 / -1; }
.md-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.md-notice {
	width: 100%;
	max-width: 1076px;
	padding: 16px 20px;
	border-radius: 6px;
	font: 400 17px/1.5 var(--md-font-sans);
}
.md-notice--success { background: #f1f7ef; border: 1px solid #cfe3c8; color: #2f5b24; }
.md-notice--error { background: #fdf1ee; border: 1px solid #f3c9bd; color: #8a2d12; }

/* ==========================================================================
   10. Articles list (index.php / archives / search)
   ========================================================================== */
.md-archive-intro { padding: 60px 0 36px; }
.md-archive-intro .md-lede p { margin: 0; }

.md-article-list { padding-block: 44px; }

.md-card {
	display: flex;
	align-items: flex-start;
}
.md-card + .md-card {
	margin-top: 44px;
	padding-top: 44px;
	border-top: 1px solid var(--md-border-rule);
}
.md-card__meta {
	flex: 0 0 440px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-right: 32px;
}
.md-card__thumb {
	display: block;
	width: 327px;
	max-width: 100%;
	aspect-ratio: 327 / 145;
	overflow: hidden;
	border-radius: 6px;
	background: var(--md-grain), var(--md-grad-card);
	background-size: 200px 200px, cover;
	background-blend-mode: soft-light, normal;
}
.md-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.md-card__byline { font: 500 16px/24px var(--md-font-ui); color: var(--md-text-muted); }
.md-card__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.md-card__excerpt {
	max-width: 743px;
	font: 300 var(--md-t-small)/var(--md-lh-small) var(--md-font-sans);
	color: var(--md-text-body);
}
.md-card__excerpt p { margin: 0; }

/* pagination */
.navigation.pagination { margin-top: 56px; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--md-border-rule);
	border-radius: 20px;
	font: 600 15px/1 var(--md-font-ui);
	color: var(--md-text-ink);
	text-decoration: none;
}
.page-numbers.current { border-color: var(--md-accent); color: var(--md-accent); }
a.page-numbers:hover { border-color: var(--md-accent); color: var(--md-accent); }
.page-numbers.dots { border: 0; }

/* ==========================================================================
   11. Single article (single.php)
   ========================================================================== */
.md-article { padding-block: 56px 80px; }

.md-article__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding-bottom: 48px;
}
.md-article__back {
	font: 600 13.5px/20.5px var(--md-font-ui);
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--md-accent);
	text-decoration: none;
}
.md-article__back:hover { color: var(--md-accent-hover); }
.md-article__title {
	max-width: 979px;
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-headline);
	line-height: var(--md-lh-headline);
	letter-spacing: -0.012em;
	color: var(--md-text-ink);
}
.md-article__byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	font: 500 16px/24px var(--md-font-ui);
	color: var(--md-text-muted);
}
.md-article__byline span + span::before { content: "·"; margin-right: 12px; }

.md-article__thumb { margin: 0 auto 56px; max-width: var(--md-measure); }
.md-article__thumb img { display: block; width: 100%; border-radius: 6px; }

/* body: 843px centred column */
.md-article__body {
	counter-reset: md-section;
	max-width: var(--md-measure);
	margin: 0 auto;
	padding-top: 0px;
	font-family: var(--md-font-sans);
	font-size: var(--md-t-para);
	line-height: var(--md-lh-para);
	color: var(--md-text-body);
}
.md-article__body > * { margin-block: 0; }
.md-article__body > * + * { margin-top: 18px; }

/* numbered section heading: gradient chip → "01" → title */
.md-article__body > h2 {
	counter-increment: md-section;
	margin-top: 64px;
	font-family: var(--md-font-serif);
	font-weight: 500;
	font-size: var(--md-t-thesis);
	line-height: var(--md-lh-thesis);
	letter-spacing: -0.006em;
	color: var(--md-text-ink);
}
.md-article__body > h2:first-child { margin-top: 0; }
.md-article__body > h2::before {
	content: counter(md-section, decimal-leading-zero);
	display: block;
	margin-bottom: 10px;
	padding-top: 29px;                      /* 19px chip + 10px gap */
	background: var(--md-grad-chip) no-repeat 0 0 / 41px 19px;
	font: 600 13.5px/20.5px var(--md-font-ui);
	letter-spacing: 2.4px;
	color: var(--md-accent);
}
.md-article__body > h2 + * { margin-top: 44px; }

.md-article__body h3 {
	margin-top: 44px;
	font-size: var(--md-t-section);
	line-height: var(--md-lh-section);
	letter-spacing: -0.006em;
}
.md-article__body h4 { margin-top: 36px; font-size: 24px; line-height: 32px; }
.md-article__body h3 + *,
.md-article__body h4 + * { margin-top: 14px; }

.md-article__body .md-article-lede,
.md-article__body .is-style-lede {
	font-weight: 300;
	font-size: var(--md-t-lede);
	line-height: var(--md-lh-lede);
}
.md-article__body a { color: var(--md-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.md-article__body strong { font-weight: 600; color: var(--md-text-ink); }
.md-article__body ul,
.md-article__body ol { padding-left: 1.3em; }
.md-article__body li + li { margin-top: 8px; }
.md-article__body li::marker { color: var(--md-accent); }
.md-article__body blockquote,
.md-article__body .wp-block-quote {
	margin-inline: 0;
	padding: 4px 0 4px 28px;
	border-left: 3px solid;
	border-image: linear-gradient(180deg, #fc5402, #9cafed) 1;
	font-family: var(--md-font-serif);
	font-size: 28px;
	line-height: 38px;
	color: var(--md-text-ink);
}
.md-article__body blockquote cite { display: block; margin-top: 12px; font: 500 16px/24px var(--md-font-ui); font-style: normal; color: var(--md-text-muted); }
.md-article__body figure { margin-inline: 0; }
.md-article__body figcaption { margin-top: 10px; font: 400 15px/1.5 var(--md-font-sans); color: var(--md-text-muted); }
.md-article__body img { border-radius: 6px; }
.md-article__body hr,
.md-article__body .wp-block-separator { height: 1px; border: 0; background: var(--md-border-rule); opacity: 1; margin-block: 56px; }

/* end notes: full-width rule, unnumbered heading, small copy */
.md-article__body > .md-article-notes {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 72px;
}
.md-article-notes > * { margin: 0 !important; }
.md-article-notes .wp-block-separator,
.md-article-notes .md-rule {
	position: relative;
	left: 50%;
	width: min(1296px, 100vw - 2 * var(--md-gutter));
	max-width: none;
	transform: translateX(-50%);
}
.md-article-notes h2,
.md-article-notes h3 {
	font-size: var(--md-t-section);
	line-height: var(--md-lh-section);
	letter-spacing: -0.006em;
}
.md-article-notes p {
	font-weight: 300;
	font-size: var(--md-t-small);
	line-height: var(--md-lh-small);
}
.md-article-notes strong { font-weight: 500; color: var(--md-text-ink); }

/* post navigation */
.md-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: var(--md-measure);
	margin: 72px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--md-border-rule);
}
.md-post-nav a { text-decoration: none; }
.md-post-nav__label { display: block; margin-bottom: 6px; }
.md-post-nav__title { font: 500 22px/30px var(--md-font-serif); color: var(--md-text-ink); }
.md-post-nav a:hover .md-post-nav__title { color: var(--md-accent); }
.md-post-nav__next { text-align: right; }

/* ==========================================================================
   12. Generic content (plain pages, 404, search, block defaults)
   ========================================================================== */
.md-prose {
	/*max-width: var(--md-measure);*/
	padding-bottom: 20px;
	font-size: var(--md-t-para);
	line-height: var(--md-lh-para);
	color: var(--md-text-body);
}
.md-prose > * { margin-block: 0; }
.md-prose > * + * { margin-top: 18px; }
.md-prose h2 { margin-top: 48px; font-size: var(--md-t-thesis); line-height: var(--md-lh-thesis); }
.md-prose h3 { margin-top: 36px; font-size: var(--md-t-section); line-height: var(--md-lh-section); }
.md-prose a { text-decoration: underline; text-underline-offset: 3px; }

.md-empty { padding: 0 0 80px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

.search-form { display: flex; gap: 12px; width: 100%; max-width: 560px; }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	height: 48px;
	padding: 0 22px;
	border: 1px solid var(--md-border-rule);
	border-radius: 35px;
	background: var(--md-surface);
	font: 400 17px/1 var(--md-font-sans);
	color: var(--md-text-ink);
}
.search-field:focus { outline: none; border-color: var(--md-accent); }
.search-form .md-button { padding-block: 10px; }

/* WordPress core alignment helpers */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { font-size: 15px; color: var(--md-text-muted); }

/* search form submit (core html5 markup) */
.search-form .search-submit {
	height: 48px;
	padding: 0 24px;
	border: 1px solid rgba(241, 237, 235, .4);
	border-radius: 4px;
	background: var(--md-accent) var(--md-grad-button);
	color: var(--md-text-on-accent);
	font: 600 16px/1 var(--md-font-ui);
	cursor: pointer;
}

/* edit link, page links */
.entry-footer { padding-bottom: 24px; }
.edit-link a { font: 500 14px/1 var(--md-font-ui); color: var(--md-text-muted); }
.page-links { margin-top: 32px; font: 600 15px/1.5 var(--md-font-ui); }

/* comments */
.comments-area {
	max-width: var(--md-measure);
	margin: 0 auto 80px;
	padding-top: 48px;
	border-top: 1px solid var(--md-border-rule);
}
.comment-list { margin: 32px 0; padding: 0; list-style: none; }
.comment-list .children { margin: 0; padding-left: 32px; list-style: none; }
.comment-body { padding: 24px 0; border-bottom: 1px solid var(--md-border-rule); }
.comment-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font: 500 15px/1.4 var(--md-font-ui); color: var(--md-text-muted); }
.comment-author .avatar { float: left; margin-right: 12px; border-radius: 50%; }
.comment-author .fn { color: var(--md-text-ink); font-style: normal; }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content { margin-top: 12px; font-size: 17px; line-height: 28px; }
.reply a { font: 600 14px/1 var(--md-font-ui); color: var(--md-accent); text-decoration: none; }
.comment-respond { margin-top: 40px; }
.comment-form { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.comment-form label { display: block; margin-bottom: 4px; font: 500 16px/24px var(--md-font-ui); color: var(--md-text-muted); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--md-border-rule);
	border-radius: 5px;
	background: var(--md-surface);
	font: 400 17px/1.5 var(--md-font-sans);
	color: var(--md-text-ink);
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--md-accent); }
.comment-form .md-button { align-self: flex-start; }

/* widgets (sidebar-1 is not used by the design) */
.widget { margin: 0 0 40px; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li + li { margin-top: 8px; }

/* ==========================================================================
   13. Mobile (≤ 860px) — values from the 390px handoff
   ========================================================================== */
@media (max-width: 1100px) {
	:root { --md-gutter: 48px; }
	.main-navigation ul { gap: 20px; }
	.main-navigation a { min-width: 0; padding-inline: 8px; }
	.md-card__meta { flex-basis: 360px; }
}

@media (max-width: 860px) {
	:root {
		--md-gutter: 24px;
		--md-header-h: 64px;
		--md-t-headline: 40px;    --md-lh-headline: 44px;
		--md-t-page-title: 36px;  --md-lh-page-title: 40px;
		--md-t-thesis: 28px;      --md-lh-thesis: 34px;
		--md-t-section: 24px;     --md-lh-section: 30px;
		--md-t-stat: 60px;        --md-lh-stat: 60px;
		--md-t-stat-body: 17px;   --md-lh-stat-body: 26px;
		--md-t-lede: 18px;        --md-lh-lede: 28px;
		--md-t-para: 17px;        --md-lh-para: 28px;
		--md-t-small: 16px;       --md-lh-small: 25px;
	}

	/* header: 64px, 18px logo, menu icon */
	.site-branding img,
	.site-branding .custom-logo,
	.site-branding .md-logo { height: 18px; }
	.menu-toggle { display: inline-flex; }
	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--md-bg-page);
		border-bottom: 1px solid var(--md-border-rule);
		box-shadow: 0 16px 24px -16px rgba(51, 41, 41, .18);
	}
	.main-navigation.toggled { display: block; }
	.main-navigation ul {
		flex-direction: column;
		gap: 0;
		height: auto;
		padding: 8px var(--md-gutter) 16px;
	}
	.main-navigation li { height: auto; }
	.main-navigation li + li { border-top: 1px solid var(--md-border-rule); }
	.main-navigation a {
		justify-content: flex-start;
		min-width: 0;
		height: auto;
		padding: 16px 0;
		font-size: 15px;
		line-height: 22px;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_parent > a,
	.main-navigation a[aria-current="page"] { color: var(--md-accent); }
	.main-navigation .current-menu-item > a::after,
	.main-navigation .current_page_item > a::after,
	.main-navigation .current-menu-parent > a::after,
	.main-navigation .current_page_parent > a::after,
	.main-navigation .current-menu-ancestor > a::after,
	.main-navigation .current-page-ancestor > a::after,
	.main-navigation a[aria-current="page"]::after {
		right: auto;
		bottom: 10px;
		width: 32px;
		height: 2px;
	}

	/* sections */
	.md-hero,
	.md-intro { padding: 40px 0 36px; gap: 16px; }
	.md-thesis-section { gap: 36px; padding: 36px 0; }
	.md-section { gap: 18px; padding: 36px 0; }
	.md-section--tight { padding-bottom: 32px; }
	.md-body-copy { gap: 12px; }
	.md-link a, a.md-link { font-size: 16px; line-height: 24px; }

	/* columns stack */
	.md-page .wp-block-columns.md-stats,
	.md-page .wp-block-columns.md-cards,
	.md-page .wp-block-columns.md-bio { flex-direction: column; }
	.md-page .md-stats > .wp-block-column,
	.md-page .md-cards > .wp-block-column {
		flex: none;
		padding: 28px 0;
		border-left: 0;
		border-top: 1px solid var(--md-border-rule);
	}
	.md-page .md-stats > .wp-block-column:first-child,
	.md-page .md-cards > .wp-block-column:first-child { padding-top: 0; border-top: 0; }
	.md-page .md-stats > .wp-block-column:last-child,
	.md-page .md-cards > .wp-block-column:last-child { padding-bottom: 0; }
	.md-stats > .wp-block-column { gap: 14px; }
	.md-page .wp-block-columns.md-cards { padding: 36px 0; }

	/* about */
	.md-authors { gap: 18px; padding: 36px 0 56px; }
	.md-bios { gap: 48px; padding-top: 20px; }
	.md-page .wp-block-columns.md-bio { gap: 16px; }
	.md-page .md-bio > .wp-block-column:first-child { flex: none; gap: 4px; }
	.md-page .md-bio > .wp-block-column:last-child { flex: none; }

	/* research */
	.md-apply { gap: 28px; padding: 28px 20px 36px; border-radius: 12px; }
	.md-form { grid-template-columns: 1fr; gap: 20px; }
	.md-field label { font-size: 15px; line-height: 22px; }
	.md-form__actions .md-button { width: 100%; }

	/* articles list */
	.md-archive-intro { padding: 40px 0 28px; }
	.md-article-list { padding-block: 32px; }
	.md-card { flex-direction: column; gap: 20px; }
	.md-card + .md-card { margin-top: 32px; padding-top: 32px; }
	.md-card__meta { flex: none; width: 100%; padding-right: 0; gap: 10px; }
	.md-card__thumb { width: 100%; }
	.md-card__body { gap: 14px; }
	.md-card__byline { font-size: 15px; }

	/* article */
	.md-article { padding-block: 32px 56px; }
	.md-article__header { gap: 16px; padding-bottom: 32px; }
	.md-article__byline { font-size: 14px; line-height: 22px; gap: 0 8px; }
	.md-article__byline span + span::before { margin-right: 8px; }
	.md-article__byline span:first-child { flex-basis: 100%; }
	.md-article__byline span:nth-child(2)::before { content: none; }
	.md-article__body { padding-top: 36px; }
	.md-article__body > * + * { margin-top: 14px; }
	.md-article__body > h2 { margin-top: 48px; }
	.md-article__body > h2::before { padding-top: 24px; background-size: 34px 16px; margin-bottom: 8px; }
	.md-article__body > h2 + * { margin-top: 24px; }
	.md-article__body blockquote { font-size: 22px; line-height: 30px; padding-left: 18px; }
	.md-article__body > .md-article-notes { margin-top: 48px; gap: 16px; }
	.md-post-nav { grid-template-columns: 1fr; gap: 20px; }
	.md-post-nav__next { text-align: left; }

	/* footer */
	.site-footer__inner { gap: 32px; padding-block: 36px; }
	.site-footer__top { flex-direction: column; gap: 28px; }
	.site-footer__brand { gap: 18px; }
}


/* ==========================================================================
   Mobile Home update — Figma "01 Home — Mobile" (node 21:2, 390px)
   Paste at the END of style.css. Overrides the earlier ≤860px rules.
   ========================================================================== */

/* footer menu items inherited body line-height (27px) — design is 23px */
.footer-navigation li { line-height: 23px; }

@media (max-width: 860px) {

	.md-stats > .wp-block-column {
        padding: 31px var(--md-col-gap) 17px 0;
        border-left: 0px solid var(--md-border-rule);
        border-top: 1px solid var(--md-border-rule);
    }
    
    .md-cards > .wp-block-column {
        padding: 0 49px 0 0px;
        border-left: 0px solid var(--md-border-rule);
        border-top: 1px solid var(--md-border-rule);
    }
}
