/* ==========================================================================
   MK Portfolio — main stylesheet
   Design reference: sawad.framer.website (measured at 1440 / 1100 / 810 / 390).
   Breakpoints mirror the reference: desktop ≥1200, desktop-small 1000–1199,
   tablet 810–999, phone <810.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Fonts */
	--mk-font: "Poppins", "Poppins Placeholder", system-ui, sans-serif;
	--mk-font-ui: "Inter", "Inter Placeholder", system-ui, sans-serif;
	--mk-fw-regular: 400;
	--mk-fw-medium: 500;
	--mk-fw-semibold: 600;
	--mk-fw-bold: 700;

	/* Colours */
	--mk-bg: #151312;
	--mk-fg: #ffffff;
	--mk-muted: #998f8f;            /* body copy, labels */
	--mk-muted-strong: #6a6b6e;     /* text on the white profile card */
	--mk-ghost: rgba(182, 180, 189, 0.2); /* second heading line, form fields */
	--mk-label: #888888;
	--mk-placeholder: #999999;
	--mk-accent: #f46c38;           /* orange */
	--mk-lime: #c5ff41;
	--mk-ink: #151312;              /* dark text on light surfaces */
	--mk-card: #ffffff;
	--mk-surface: rgba(255, 255, 255, 0.03); /* nav pill, row hover */
	--mk-tooltip: rgba(255, 255, 255, 0.1);
	--mk-border: rgba(255, 255, 255, 0.06);

	/* Layout */
	--mk-container: 1140px;
	--mk-gutter: 0px;          /* side padding inside the container */
	--mk-sidebar: 344px;
	--mk-column-gap: 100px;
	--mk-sticky-top: 40px;
	--mk-main-top: 82px;       /* space between nav and content (content starts at 160px) */
	--mk-nav-top: 30px;

	/* Spacing */
	--mk-section-pad: 120px;
	--mk-section-gap: 20px;
	--mk-hero-gap: 60px;

	/* Type scale */
	--mk-h1: 110px;
	--mk-h2: 90px;
	--mk-stat: 70px;
	--mk-stat-label: 16px;
	--mk-row-title: 26px;
	--mk-tool-title: 24px;
	--mk-card-text: 24px;
	--mk-name: 36px;
	--mk-lead: 18px;
	--mk-body: 16px;
	--mk-small: 12px;

	/* Radii */
	--mk-r-xs: 6px;
	--mk-r-sm: 8px;
	--mk-r-md: 10px;
	--mk-r-lg: 16px;

	/* Motion (reference: 0.5s tween, cubic-bezier(.44,0,.56,1), 20px drop-in) */
	--mk-ease: cubic-bezier(0.44, 0, 0.56, 1);
	--mk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--mk-dur: 0.5s;
	--mk-dur-fast: 0.3s;
	--mk-enter-y: -20px;
	--mk-hero-delay: 0.2s;

	/* Component sizes */
	--mk-photo-w: 240px;
	--mk-photo-h: 284px;
	--mk-thumb-w: 130px;
	--mk-thumb-h: 135px;
	--mk-card-h: 240px;
	--mk-cards-cols: 300px 1fr;
	--mk-cards-gap: 30px;
	--mk-row-pad-x: 16px;
}

@media (max-width: 1199px) {
	:root {
		--mk-gutter: 40px;
		--mk-column-gap: 50px;
		--mk-h1: 94px;
		--mk-cards-cols: 44fr 56fr;
		--mk-cards-gap: 20px;
		--mk-card-h: 260px;
	}
}

@media (max-width: 999px) {
	:root {
		--mk-gutter: 30px;
		--mk-column-gap: 40px;
		--mk-main-top: 42px;
		--mk-section-pad: 90px;
		--mk-h1: 86px;
		--mk-h2: 74px;
		--mk-stat: 60px;
		--mk-lead: 16px;
		--mk-cards-cols: 300px 1fr;
		--mk-cards-gap: 30px;
		--mk-card-h: 240px;
	}
}

@media (max-width: 809px) {
	:root {
		--mk-gutter: 20px;
		--mk-nav-top: 20px;
		--mk-main-top: 32px;
		--mk-section-pad: 80px;
		--mk-hero-gap: 70px;
		--mk-h1: 52px;
		--mk-h2: 42px;
		--mk-stat: 50px;
		--mk-stat-label: 14px;
		--mk-row-title: 18px;
		--mk-photo-w: 260px;
		--mk-photo-h: 210px;
		--mk-thumb-w: 90px;
		--mk-thumb-h: 93px;
		--mk-cards-cols: 1fr;
		--mk-cards-gap: 20px;
		--mk-card-h: 212px;
		--mk-row-pad-x: 8px;
	}
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body.mk {
	margin: 0;
	background: var(--mk-bg);
	color: var(--mk-fg);
	font-family: var(--mk-font);
	font-size: var(--mk-body);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.mk h1,
.mk h2,
.mk h3,
.mk p,
.mk ul,
.mk dl,
.mk dd {
	margin: 0;
	padding: 0;
}

.mk ul {
	list-style: none;
}

.mk a {
	color: inherit;
	text-decoration: none;
}

.mk img {
	display: block;
	max-width: 100%;
	height: auto;
}

.mk :focus-visible {
	outline: 2px solid var(--mk-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mk-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 8px 14px;
	border-radius: var(--mk-r-sm);
	background: var(--mk-accent);
	color: #fff;
	font-size: 14px;
}

.mk-skip:focus {
	top: 16px;
}

.mk-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   3. Navigation (icon pill with hover labels)
   -------------------------------------------------------------------------- */
.mk-header {
	position: relative;
	z-index: 20;
	display: flex;
	justify-content: center;
	padding: var(--mk-nav-top) var(--mk-gutter) 0;
}

.mk-nav__list {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 48px;
	padding: 0 20px;
	border-radius: var(--mk-r-lg);
	background: var(--mk-surface);
}

.mk-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.mk-nav__icon {
	width: 28px;
	height: 28px;
	padding: 4px;
	border-radius: var(--mk-r-xs);
	color: var(--mk-fg);
	transition: background-color var(--mk-dur-fast) var(--mk-ease), transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-nav__link:hover .mk-nav__icon,
.mk-nav__link:focus-visible .mk-nav__icon {
	background: var(--mk-tooltip);
}

/* Current page: same tint as hover, kept on (the reference has no active state). */
.mk-nav__link.is-current .mk-nav__icon {
	background: var(--mk-tooltip);
}

.mk-nav__link:active .mk-nav__icon {
	transform: scale(0.92);
}

.mk-nav__tip {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	padding: 4px 10px;
	border-radius: var(--mk-r-xs);
	background: var(--mk-tooltip);
	color: var(--mk-fg);
	font-size: var(--mk-small);
	line-height: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -6px);
	transition: opacity 0.2s var(--mk-ease), transform 0.2s var(--mk-ease);
}

.mk-nav__link:hover .mk-nav__tip,
.mk-nav__link:focus-visible .mk-nav__tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   4. Layout: sticky sidebar + content column
   -------------------------------------------------------------------------- */
.mk-main {
	padding-top: var(--mk-main-top);
}

.mk-container {
	display: flex;
	align-items: flex-start;
	gap: var(--mk-column-gap);
	width: 100%;
	max-width: calc(var(--mk-container) + 2 * var(--mk-gutter));
	margin: 0 auto;
	padding: 0 var(--mk-gutter);
}

.mk-sidebar {
	position: sticky;
	top: var(--mk-sticky-top);
	flex: 0 0 var(--mk-sidebar);
	width: var(--mk-sidebar);
}

.mk-content {
	flex: 1 1 auto;
	min-width: 0;
	/* Size container for the heading fit (cqi units). Inline-size only: sticky is unaffected. */
	container-type: inline-size;
}

/* Inner pages render the sidebar after the content in the HTML (reading/focus order
   matches the stacked tablet/phone layout); on desktop it is shown on the left. */
.mk-container--content-first .mk-sidebar {
	order: -1;
}

@media (max-width: 999px) {
	.mk-container {
		flex-direction: column;
		align-items: stretch;
	}

	.mk-sidebar {
		position: static;
		flex: none;
		width: 100%;
	}

	/* Inner pages: profile card after the content (as in the reference) = DOM order. */
	.mk-container--content-first .mk-sidebar {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
   5. Profile card
   -------------------------------------------------------------------------- */
.mk-profile {
	position: relative;
	overflow: hidden;
	padding: 30px 20px;
	border-radius: var(--mk-r-lg);
	background: var(--mk-card);
	color: var(--mk-ink);
}

.mk-profile__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 304px;
	margin: 0 auto;
}

.mk-profile__arc {
	position: absolute;
	z-index: 2;
	overflow: visible;
	pointer-events: none;
}

.mk-profile__arc path {
	stroke: var(--mk-accent);
	stroke-width: 3;
	stroke-dasharray: 8 7;
	stroke-linecap: round;
}

.mk-profile__arc--top {
	left: -20px;
	top: -48px;
	width: 194px;
	height: 100px;
}

.mk-profile__arc--bottom {
	/* Starts at the flame badge (bottom-left of the photo) and runs out of the card. */
	left: calc(50% - var(--mk-photo-w) / 2 - 183px);
	top: calc(var(--mk-photo-h) - 40px);
	width: 270px;
	height: 166px;
}

.mk-profile__photo {
	position: relative;
	z-index: 1;
	width: var(--mk-photo-w);
	height: var(--mk-photo-h);
	overflow: hidden;
	border-radius: var(--mk-r-lg);
	background: #e9e6e3;
}

.mk-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.mk-profile__bio {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	text-align: center;
}

.mk-profile__name {
	font-size: var(--mk-name);
	font-weight: var(--mk-fw-bold);
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.mk-profile__badge {
	/* Inside the photo, bottom-left (above the dashed line). */
	position: absolute;
	z-index: 3;
	left: calc(50% - var(--mk-photo-w) / 2 + 10px);
	top: calc(var(--mk-photo-h) - 46px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 9px;
	border-radius: 50%;
	background: var(--mk-accent);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.mk-profile__badge .mk-icon {
	fill: currentColor;
	stroke: none;
}

.mk-profile__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.mk-profile__about {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mk-profile__title {
	color: var(--mk-ink);
	font-size: var(--mk-lead);
	font-weight: var(--mk-fw-semibold);
	line-height: 1.2;
}

.mk-profile__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mk-muted-strong);
	font-size: 14px;
	line-height: 1.2;
}

.mk-profile__location .mk-icon {
	width: 15px;
	height: 15px;
	color: var(--mk-accent);
}

.mk-profile__desc {
	max-width: 300px;
	color: var(--mk-muted-strong);
	font-size: var(--mk-body);
	font-weight: var(--mk-fw-medium);
	line-height: 1.1;
}

.mk-profile__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.mk-profile__social a {
	display: block;
	width: 36px;
	height: 36px;
	padding: 6px;
	border-radius: var(--mk-r-xs);
	color: var(--mk-accent);
	transition: background-color var(--mk-dur-fast) var(--mk-ease), transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-profile__social a:hover,
.mk-profile__social a:focus-visible {
	background: rgba(244, 108, 56, 0.1);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. Headings (two-tone, uppercase)
   -------------------------------------------------------------------------- */
.mk-heading,
.mk-hero__title,
.mk-page-title {
	font-weight: var(--mk-fw-bold);
	line-height: 1;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.mk-heading {
	--mk-fit-max: var(--mk-h2);
}

.mk-hero__title,
.mk-page-title {
	--mk-fit-max: var(--mk-h1);
}

/*
 * Heading fit: real copy can be longer than the reference ("TECHNOLOGIES",
 * "BUILDING SCALABLE"). Each heading carries its longest line and longest word
 * (in characters, set by mk_heading_html()). The size is the design size, reduced
 * so every line fits the column; it never drops below half the design size — past
 * that, lines wrap between words instead (sized so the longest word still fits).
 * Phones use a higher floor (wrap sooner) so long headings stay readable.
 * 0.66em ≈ average uppercase Poppins Bold glyph width.
 */
.mk-heading,
.mk-hero__title,
.mk-page-title {
	--mk-glyph: 0.66;
	--mk-fit-floor: 0.5;
	font-size: min(
		var(--mk-fit-max),
		max(
			calc(100cqi / (var(--mk-fit-line, 1) * var(--mk-glyph))),
			min(calc(var(--mk-fit-max) * var(--mk-fit-floor)), calc(100cqi / (var(--mk-fit-word, 1) * var(--mk-glyph))))
		)
	);
}

@media (max-width: 809px) {
	.mk-heading,
	.mk-hero__title,
	.mk-page-title {
		--mk-fit-floor: 0.72;
		/* Phones: big two-tone titles are centred (all pages). */
		text-align: center;
	}

	/* Labels that sit directly above a title follow it. */
	.mk-hero__info > .mk-eyebrow,
	.mk-contact__head > .mk-eyebrow {
		text-align: center;
	}

	/* 404: short page, fully centred on phones. */
	.mk-error {
		align-items: center;
		text-align: center;
	}

	.mk-error .mk-actions {
		justify-content: center;
	}
}

/* Inner page opening block (Projects, ...): hero-size title, list 20px below. */
.mk-page-head {
	display: flex;
	flex-direction: column;
	gap: var(--mk-section-gap);
}

.mk-empty {
	color: var(--mk-muted);
	font-size: var(--mk-lead);
}

.mk-heading__line {
	display: block;
}

.mk-heading__line--muted {
	color: var(--mk-ghost);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.mk-hero {
	display: flex;
	flex-direction: column;
	gap: var(--mk-hero-gap);
}

.mk-hero__info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mk-hero__desc {
	max-width: 520px;
	color: var(--mk-muted);
	font-size: var(--mk-lead);
	line-height: 1.4;
}

/* Statistics: value on top, label below and no wider than the value. */
.mk-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
}

/* Four statistics: one row on wide columns (slightly smaller values), 2 × 2 on phones. */
.mk-stats[style*="count: 4"] {
	--mk-stat: min(64px, 9.2cqi);
	gap: 20px 32px;
}

@media (max-width: 809px) {
	.mk-stats[style*="count: 4"] {
		--mk-stat: 44px;
		display: grid;
		grid-template-columns: repeat(2, max-content);
		gap: 24px 40px;
	}
}

.mk-stat {
	display: inline-flex;
	flex-direction: column-reverse;
	justify-content: flex-end; /* (reversed axis) values line up at the top when labels wrap differently */
}

.mk-stat__value {
	font-size: var(--mk-stat);
	font-weight: var(--mk-fw-semibold);
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.mk-stat__label {
	width: 0;
	min-width: max(100%, 7.5em);
	color: var(--mk-muted);
	font-size: var(--mk-stat-label);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* Skill cards */
.mk-cards {
	display: grid;
	grid-template-columns: var(--mk-cards-cols);
	gap: var(--mk-cards-gap);
}

.mk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: var(--mk-card-h);
	padding: 40px 20px 22px;
	overflow: hidden;
	border-radius: var(--mk-r-md);
	isolation: isolate;
}

.mk-card--orange {
	background: var(--mk-accent);
	color: #fff;
}

.mk-card--lime {
	background: var(--mk-lime);
	color: var(--mk-ink);
}

.mk-card__lines {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	fill: none;
	pointer-events: none;
}

.mk-card--orange .mk-card__lines path {
	stroke: rgba(202, 89, 46, 0.4);
	stroke-width: 5;
}

.mk-card--lime .mk-card__lines path {
	stroke: rgba(46, 196, 182, 0.35);
	stroke-width: 3;
}

.mk-card__icon {
	width: 40px;
	height: 40px;
	padding: 4px;
}

.mk-card__text {
	max-width: 330px;
	padding-right: 30px;
	font-size: var(--mk-card-text);
	font-weight: var(--mk-fw-medium);
	line-height: 1.1;
	text-transform: uppercase;
}

.mk-card__btn {
	position: absolute;
	right: 20px;
	bottom: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid currentColor;
	border-radius: var(--mk-r-xs);
	transition: background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-card__btn .mk-arrow {
	width: 20px;
	height: 20px;
	transition: transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-card__btn:hover,
.mk-card__btn:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

.mk-card--lime .mk-card__btn:hover,
.mk-card--lime .mk-card__btn:focus-visible {
	background: rgba(21, 19, 18, 0.08);
}

.mk-card__btn:hover .mk-arrow {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   8. Skills marquee
   -------------------------------------------------------------------------- */
.mk-marquee {
	--mk-marquee-gap: 40px;
	margin-top: 80px;
	padding: 22px 0;
	overflow: hidden;
	border-block: 1px solid var(--mk-border);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.mk-marquee__track {
	display: flex;
	width: max-content;
	animation: mk-marquee var(--mk-marquee-duration, 40s) linear infinite;
}

.mk-marquee:hover .mk-marquee__track {
	animation-play-state: paused;
}

.mk-marquee__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--mk-marquee-gap);
	padding-right: var(--mk-marquee-gap);
}

.mk-marquee__item {
	display: flex;
	align-items: center;
	gap: var(--mk-marquee-gap);
	color: var(--mk-ghost);
	font-size: 32px;
	font-weight: var(--mk-fw-bold);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.mk-marquee__item::after {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--mk-accent);
	transform: rotate(45deg);
}

@media (max-width: 809px) {
	.mk-marquee {
		--mk-marquee-gap: 28px;
		margin-top: 60px;
		padding: 18px 0;
	}

	.mk-marquee__item {
		font-size: 24px;
	}
}

@keyframes mk-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   9. Sections + list rows (projects, experience)
   -------------------------------------------------------------------------- */
.mk-section {
	display: flex;
	flex-direction: column;
	gap: var(--mk-section-gap);
	padding-top: var(--mk-section-pad);
}

.mk-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px var(--mk-row-pad-x);
	border-radius: var(--mk-r-lg);
	background: rgba(255, 255, 255, 0);
	transition: background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-row--static {
	cursor: default;
}

a.mk-row:hover,
a.mk-row:focus-visible {
	background: var(--mk-surface);
}

.mk-row__media {
	flex: none;
	width: var(--mk-thumb-w);
	height: var(--mk-thumb-h);
	overflow: hidden;
	border-radius: var(--mk-r-sm);
	background: rgba(255, 255, 255, 0.04);
}

.mk-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.mk-row__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 420px;
}

.mk-row__title {
	font-size: var(--mk-row-title);
	font-weight: var(--mk-fw-semibold);
	line-height: 1.2;
}

.mk-row__text {
	color: var(--mk-muted);
	font-size: var(--mk-body);
	line-height: 1.4;
}

.mk-row__role {
	display: block;
	color: var(--mk-fg);
	opacity: 0.8;
	font-size: var(--mk-body);
	line-height: 1.4;
}

.mk-row__desc {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Small category / context line under a project description. */
.mk-row__tag {
	color: var(--mk-muted);
	font-size: 13px;
	font-weight: var(--mk-fw-medium);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 0.8;
}

.mk-row__body .mk-row__tag {
	margin-top: 6px;
}

/* Project rows without a screenshot (engineering case studies). */
.mk-row--text {
	align-items: flex-start;
	padding-block: 24px;
}

.mk-row--text .mk-row__arrow {
	top: 42px;
}

.mk-row__highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.mk-row__highlights li {
	padding: 4px 10px;
	border: 1px solid var(--mk-border);
	border-radius: 999px;
	color: var(--mk-fg);
	font-size: 13px;
	line-height: 1.3;
	opacity: 0.85;
}

.mk-sep {
	opacity: 0.6;
}

.mk-row__date {
	color: var(--mk-muted);
	font-size: var(--mk-body);
	line-height: 1.1;
}

.mk-row__arrow {
	position: absolute;
	top: 32px;
	right: 12px;
	width: 28px;
	height: 28px;
	color: var(--mk-accent);
	transform: rotate(-45deg);
	transition: transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-row:hover .mk-row__arrow,
.mk-row:focus-visible .mk-row__arrow {
	transform: translate(10px, -12px) rotate(-45deg);
}

.mk-row--experience {
	align-items: flex-start;
	padding-block: 24px;
}

/* Experience and project rows use the full section width (real descriptions are longer
   than the reference's); right padding keeps text clear of the arrow. */
.mk-row--experience .mk-row__body,
.mk-row--project .mk-row__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	padding-right: 56px;
}

.mk-row--experience .mk-row__body {
	gap: 14px;
}

.mk-row--experience .mk-row__arrow {
	top: 42px;
}

@media (max-width: 809px) {
	.mk-row {
		gap: 12px;
	}

	/* The reference hides row arrows on phones; the whole row stays the link. */
	.mk-row__arrow {
		display: none;
	}

	.mk-row--experience {
		padding-block: 16px;
	}

	.mk-row--experience .mk-row__body,
	.mk-row--project .mk-row__body {
		padding-right: 0; /* no arrow on phones */
	}
}

/* --------------------------------------------------------------------------
   10. Tools
   -------------------------------------------------------------------------- */
.mk-tools__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.mk-tool {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 16px;
	border-radius: var(--mk-r-sm);
	transition: background-color var(--mk-dur-fast) var(--mk-ease);
}

a.mk-tool:hover,
a.mk-tool:focus-visible,
div.mk-tool:hover {
	background: var(--mk-surface);
}

.mk-tool__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 6px;
	overflow: hidden;
	border-radius: var(--mk-r-sm);
	background: #fff;
	transition: transform var(--mk-dur-fast) var(--mk-ease-out);
}

/* Core tools (Tools page): resting tint = the hover surface, so priority reads without new UI. */
.mk-tool--core {
	background: var(--mk-surface);
}

a.mk-tool--core:hover,
div.mk-tool--core:hover {
	background: rgba(255, 255, 255, 0.06);
}

.mk-tool:hover .mk-tool__icon {
	transform: scale(1.05);
}

.mk-tool__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mk-tool__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mk-tool__name {
	font-size: var(--mk-tool-title);
	font-weight: var(--mk-fw-semibold);
	line-height: 1.2;
}

.mk-tool__text {
	color: var(--mk-muted);
	font-size: var(--mk-body);
	line-height: 1.4;
}

@media (max-width: 809px) {
	.mk-tools__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   11. Contact form
   -------------------------------------------------------------------------- */
.mk-contact {
	gap: 50px;
	/* #contact links: land with the heading 40px from the top, not the section's top padding. */
	scroll-margin-top: calc(40px - var(--mk-section-pad));
}

.mk-contact__head {
	display: flex;
	flex-direction: column;
	gap: var(--mk-section-gap);
}

.mk-contact__intro {
	max-width: 560px;
}

.mk-contact__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.mk-contact__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mk-fg);
	font-size: var(--mk-body);
	transition: color var(--mk-dur-fast) var(--mk-ease);
}

.mk-contact__links .mk-icon {
	width: 18px;
	height: 18px;
	color: var(--mk-accent);
}

.mk-contact__links a:hover,
.mk-contact__links a:focus-visible {
	color: var(--mk-accent);
}

.mk-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mk-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.mk-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mk-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mk-field__label {
	color: var(--mk-label);
	font-size: var(--mk-small);
	font-weight: var(--mk-fw-medium);
	line-height: 1.2;
}

.mk-field__control {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--mk-r-sm);
	outline: none;
	background: var(--mk-ghost);
	color: var(--mk-fg);
	font-family: var(--mk-font);
	font-size: 14px;
	line-height: 1.2;
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow var(--mk-dur-fast) var(--mk-ease), background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-field__control::placeholder {
	color: var(--mk-placeholder);
	opacity: 1;
}

.mk-field__control:hover {
	background: rgba(182, 180, 189, 0.25);
}

.mk-field__control:focus,
.mk-field__control:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--mk-accent);
}

.mk-field__control--area {
	height: 100px;
	padding: 12px;
	resize: vertical;
}

.mk-field__select {
	position: relative;
}

.mk-field__select select {
	padding-right: 36px;
	border-radius: var(--mk-r-md);
	color: var(--mk-placeholder);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mk-field__select select.has-value {
	color: var(--mk-fg);
}

.mk-field__select option {
	background: #2b2928;
	color: var(--mk-fg);
}

.mk-field__chevron {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 16px;
	height: 16px;
	color: var(--mk-placeholder);
	pointer-events: none;
	transform: translateY(-50%);
}

.mk-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: var(--mk-r-sm);
	background: var(--mk-accent);
	color: var(--mk-ink); /* dark on orange: 6.2:1 (white would be 2.98:1, below WCAG AA) */
	font-family: var(--mk-font-ui);
	font-size: 14px;
	font-weight: var(--mk-fw-semibold);
	cursor: pointer;
	transition: background-color var(--mk-dur-fast) var(--mk-ease), transform 0.15s var(--mk-ease);
}

.mk-button:hover {
	background: #f57d4f;
}

.mk-button:active {
	transform: scale(0.99);
}

.mk-form__notice {
	padding: 12px 14px;
	border-radius: var(--mk-r-sm);
	font-size: 14px;
}

.mk-form__notice--success {
	background: rgba(197, 255, 65, 0.12);
	color: var(--mk-lime);
}

.mk-form__notice--error {
	background: rgba(244, 108, 56, 0.12);
	color: var(--mk-accent);
}

.mk-form__notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.5;
}

.mk-form__notice:focus {
	outline: none;
}

.mk-form__notice:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mk-form__notice-title {
	font-size: var(--mk-body);
	font-weight: var(--mk-fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mk-form__notice a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* reCAPTCHA: Google's floating badge is replaced by the required text notice under the button. */
.grecaptcha-badge {
	visibility: hidden;
}

.mk-form__legal {
	color: var(--mk-label);
	font-size: var(--mk-small);
	line-height: 1.5;
}

.mk-form__legal a {
	color: var(--mk-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mk-form__legal a:hover,
.mk-form__legal a:focus-visible {
	color: var(--mk-accent);
}

.mk-form__note {
	margin-top: -6px;
	color: var(--mk-label);
	font-size: var(--mk-small);
}

/* Required marker, inline errors, invalid + disabled states. */
.mk-field__req {
	color: var(--mk-accent);
}

.mk-field__error {
	color: var(--mk-accent);
	font-size: 13px;
	line-height: 1.3;
}

.mk-field.is-invalid .mk-field__control,
.mk-field__control[aria-invalid="true"] {
	box-shadow: inset 0 0 0 1px var(--mk-accent);
}

.mk-field__control:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.mk-button:disabled,
.mk-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
}

.mk-button:disabled:hover {
	background: var(--mk-accent);
}

.mk-form[aria-busy="true"] .mk-button {
	cursor: progress;
}

/* --------------------------------------------------------------------------
   11b. Content components (labels, prose, "view all" links, tool groups)
   -------------------------------------------------------------------------- */

/* Small uppercase label above a heading. */
.mk-eyebrow {
	margin: 0;
	color: var(--mk-accent);
	font-size: 14px;
	font-weight: var(--mk-fw-medium);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.mk-hero__info .mk-eyebrow {
	margin-bottom: 10px;
}

/* Multi-paragraph muted copy (hero, intro, page intros, contact). */
.mk-prose {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
	color: var(--mk-muted);
	font-size: var(--mk-lead);
	line-height: 1.5;
}

/* Hero and introduction copy use the full content width (like the rows). */
.mk-hero__desc.mk-prose,
.mk-intro__body {
	max-width: none;
}

.mk-page-intro {
	margin-bottom: 20px;
}

/* "View all …" link under Home previews. */
.mk-more {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0 var(--mk-row-pad-x);
	color: var(--mk-fg);
	font-size: 14px;
	font-weight: var(--mk-fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color var(--mk-dur-fast) var(--mk-ease);
}

.mk-more__arrow {
	width: 18px;
	height: 18px;
	color: var(--mk-accent);
	transform: rotate(-45deg);
	transition: transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-more:hover,
.mk-more:focus-visible {
	color: var(--mk-accent);
}

.mk-more:hover .mk-more__arrow,
.mk-more:focus-visible .mk-more__arrow {
	transform: translate(4px, -4px) rotate(-45deg);
}

/* Tools page: one grid per category, small label above each. */
.mk-tool-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mk-tool-group + .mk-tool-group {
	margin-top: 36px;
}

.mk-tool-group .mk-eyebrow {
	padding-left: 16px;
}

/* Inline (auto-width) primary button, e.g. "Back to home"; row of actions. */
.mk-button--inline {
	display: inline-flex;
	width: auto;
	padding: 0 24px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 10px;
}

.mk-actions .mk-more {
	align-self: center;
	margin: 0;
}

/* Small metadata line (e.g. "Last updated"). */
.mk-meta {
	color: var(--mk-muted);
	font-size: 14px;
	line-height: 1.4;
}

/* Long-form text (Privacy Policy and other editor content). */
.mk-entry {
	max-width: 680px;
	color: var(--mk-muted);
	font-size: var(--mk-body);
	line-height: 1.6;
}

/* ".mk" prefix: must outrank the base reset (.mk p { margin: 0 }). */
.mk .mk-entry > * + * {
	margin-top: 16px;
}

.mk-entry h2,
.mk-entry h3,
.mk-entry h4,
.mk-entry h5,
.mk-entry h6,
.mk-h2,
.mk-h3,
.mk-h4,
.mk-h5,
.mk-h6 {
	color: var(--mk-fg);
	font-weight: var(--mk-fw-semibold);
	line-height: 1.2;
}

.mk-entry h2,
.mk-h2 {
	font-size: var(--mk-row-title);
}

.mk-entry h3,
.mk-h3 {
	font-size: var(--mk-tool-title);
}

.mk-entry h4,
.mk-h4 {
	font-size: var(--mk-lead);
}

.mk-entry h5,
.mk-h5 {
	font-size: var(--mk-body);
}

.mk-entry h6,
.mk-h6 {
	color: var(--mk-accent);
	font-size: 14px;
	font-weight: var(--mk-fw-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mk-entry h2:not(:first-child) {
	margin-top: 44px;
}

.mk-entry h3:not(:first-child),
.mk-entry h4:not(:first-child) {
	margin-top: 28px;
}

.mk-entry ul,
.mk-entry ol {
	padding-left: 1.2em;
}

.mk-entry ul {
	list-style: disc;
}

.mk-entry ol {
	list-style: decimal;
}

.mk-entry li + li {
	margin-top: 6px;
}

.mk-entry li::marker {
	color: var(--mk-accent);
}

.mk-entry strong {
	color: var(--mk-fg);
	font-weight: var(--mk-fw-semibold);
}

.mk-entry a,
.mk-link {
	color: var(--mk-fg);
	text-decoration: underline;
	text-decoration-color: var(--mk-accent);
	text-underline-offset: 3px;
	transition: color var(--mk-dur-fast) var(--mk-ease);
}

.mk-entry a:hover,
.mk-entry a:focus-visible,
.mk-link:hover,
.mk-link:focus-visible {
	color: var(--mk-accent);
}

/* --------------------------------------------------------------------------
   11c. Thoughts (archive rows, article, long-form content)
   Reference: typography-led rows (title 26/600, excerpt 16, meta line), article
   title 50/700 sentence case, body 18px muted, H2 ~38/700.
   -------------------------------------------------------------------------- */

/* Rows: title + excerpt keep clear of the arrow; meta line underneath. */
.mk-row--thought {
	align-items: flex-start;
	padding-block: 28px;
}

.mk-row--thought .mk-row__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	gap: 12px;
}

.mk-row--thought .mk-row__title,
.mk-row--thought .mk-row__text {
	max-width: 560px;
	padding-right: 56px;
}

.mk-row--thought .mk-row__tag {
	margin-top: 6px;
}

.mk-row--thought .mk-row__arrow {
	top: 34px;
}

@media (max-width: 809px) {
	.mk-row--thought {
		padding-block: 20px;
	}

	.mk-row--thought .mk-row__title,
	.mk-row--thought .mk-row__text {
		padding-right: 0;
	}
}

/* Short supporting line under a Home section heading. */
.mk-section__intro {
	margin-bottom: 10px;
}

/* Pills: archive category filter and article tags. */
.mk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mk .mk-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 14px;
	border: 1px solid var(--mk-border);
	border-radius: 999px;
	color: var(--mk-muted);
	font-size: 13px;
	font-weight: var(--mk-fw-medium);
	line-height: 1.3;
	transition: color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease), background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-chip:hover,
.mk-chip:focus-visible {
	border-color: rgba(244, 108, 56, 0.5);
	color: var(--mk-fg);
}

.mk-chip.is-current {
	border-color: var(--mk-accent);
	background: rgba(244, 108, 56, 0.12);
	color: var(--mk-fg);
}

.mk-filter {
	margin-bottom: 10px;
}

/* "Back" variant of the more link (arrow pointing left). */
.mk-more--back .mk-more__arrow {
	transform: rotate(180deg);
}

.mk-more--back:hover .mk-more__arrow,
.mk-more--back:focus-visible .mk-more__arrow {
	transform: translateX(-4px) rotate(180deg);
}

.mk-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
}

.mk-pager .mk-more {
	margin: 10px var(--mk-row-pad-x) 0;
}

.mk-pager__next {
	margin-left: auto !important;
}

.mk-pager__next .mk-more__arrow {
	transform: none;
}

.mk-pager__next:hover .mk-more__arrow,
.mk-pager__next:focus-visible .mk-more__arrow {
	transform: translateX(4px);
}

/* Article */
.mk-article {
	--mk-read: 680px; /* reading column (~70 characters at 18px) */
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.mk-article__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: var(--mk-read);
}

.mk-article__media {
	margin: 0 0 8px;
	overflow: hidden;
	border-radius: var(--mk-r-lg);
	background: rgba(255, 255, 255, 0.04);
}

.mk-article__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.mk-article__head .mk-eyebrow a {
	transition: color var(--mk-dur-fast) var(--mk-ease);
}

.mk-article__head .mk-eyebrow a:hover,
.mk-article__head .mk-eyebrow a:focus-visible {
	color: var(--mk-fg);
}

.mk-article__title {
	font-size: clamp(32px, 7.2cqi, 50px);
	font-weight: var(--mk-fw-bold);
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.mk-article__lead {
	color: var(--mk-fg);
	font-size: 20px;
	line-height: 1.5;
	opacity: 0.85;
}

.mk-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding-top: 8px;
	color: var(--mk-muted);
	font-size: 13px;
	font-weight: var(--mk-fw-medium);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Body: the shared .mk-entry rules, sized for long reading. */
.mk-article__body {
	--mk-article-h2: 34px;
	--mk-article-h3: 24px;
	max-width: var(--mk-read);
	font-size: var(--mk-lead);
	line-height: 1.7;
}

.mk .mk-article__body > * + * {
	margin-top: 20px;
}

.mk-article__body h2 {
	font-size: var(--mk-article-h2);
	font-weight: var(--mk-fw-bold);
	letter-spacing: -0.01em;
}

.mk-article__body h3 {
	font-size: var(--mk-article-h3);
}

.mk-article__body h2:not(:first-child) {
	margin-top: 56px;
}

.mk-article__body h3:not(:first-child) {
	margin-top: 36px;
}

.mk .mk-article__body h2 + *,
.mk .mk-article__body h3 + * {
	margin-top: 16px;
}

.mk-article__body li + li {
	margin-top: 8px;
}

@media (max-width: 809px) {
	.mk-article {
		gap: 36px;
	}

	.mk-article__lead {
		font-size: var(--mk-lead);
	}

	.mk-article__body {
		--mk-article-h2: 26px;
		--mk-article-h3: 20px;
		font-size: 17px;
	}

	.mk-article__body h2:not(:first-child) {
		margin-top: 44px;
	}
}

/* Long-form elements (articles and other editor content). */
.mk-entry p,
.mk-entry ul,
.mk-entry ol,
.mk-entry figure,
.mk-entry blockquote,
.mk-entry pre {
	margin-bottom: 0;
}

.mk-entry em {
	font-style: italic;
}

.mk-entry code,
.mk-entry kbd {
	padding: 0.12em 0.4em;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--mk-fg);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.88em;
	overflow-wrap: anywhere;
}

.mk-entry pre {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 18px 20px;
	overflow-x: auto;
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-md);
	background: rgba(255, 255, 255, 0.03);
	color: #ece8e6;
	font-size: 14px;
	line-height: 1.65;
	tab-size: 4;
	-webkit-overflow-scrolling: touch;
}

.mk-entry pre code {
	display: block;
	padding: 0;
	background: none;
	font-size: inherit;
	white-space: pre; /* keep formatting; wide lines scroll instead of wrapping */
	overflow-wrap: normal;
}

.mk-entry blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mk-accent);
	color: var(--mk-fg);
	font-size: 1.12em;
	font-weight: var(--mk-fw-medium);
	line-height: 1.5;
}

.mk-entry blockquote > * + * {
	margin-top: 10px;
}

.mk-entry blockquote cite {
	display: block;
	color: var(--mk-muted);
	font-size: 14px;
	font-style: normal;
	font-weight: var(--mk-fw-regular);
}

.mk-entry figure {
	margin-left: 0;
	margin-right: 0;
}

.mk-entry figure img,
.mk-entry > img {
	border-radius: var(--mk-r-lg);
}

.mk-entry figcaption {
	margin-top: 10px;
	color: var(--mk-muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.mk-entry .wp-block-table {
	overflow-x: auto;
}

.mk-entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.mk-entry th,
.mk-entry td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mk-border);
	text-align: left;
	vertical-align: top;
}

.mk-entry th {
	color: var(--mk-fg);
	font-weight: var(--mk-fw-semibold);
}

.mk-entry hr {
	height: 0;
	margin-block: 40px;
	border: 0;
	border-top: 1px solid var(--mk-border);
}

/* External links: a small ↗ after the text (announced as "external link"). */
.mk-entry a.mk-ext::after {
	content: "\2197" / " (external link)";
	margin-left: 2px;
	color: var(--mk-accent);
	font-size: 0.85em;
}

/* Article footer: tags, all / previous / next. */
.mk-article__foot {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: var(--mk-read);
	padding-top: 32px;
	border-top: 1px solid var(--mk-border);
}

.mk-article__nav {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mk-article__nav > .mk-more {
	margin-left: 0;
}

.mk-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mk-adjacent__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-lg);
	transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-adjacent__link--next {
	grid-column: 2;
	align-items: flex-end;
	text-align: right;
}

.mk-adjacent__link:hover,
.mk-adjacent__link:focus-visible {
	border-color: rgba(255, 255, 255, 0.12);
	background: var(--mk-surface);
}

.mk-adjacent__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mk-muted);
	font-size: 13px;
	font-weight: var(--mk-fw-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mk-adjacent__arrow {
	width: 16px;
	height: 16px;
	color: var(--mk-accent);
	transition: transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-adjacent__link--prev .mk-adjacent__arrow {
	transform: rotate(180deg);
}

.mk-adjacent__link--prev:hover .mk-adjacent__arrow {
	transform: translateX(-3px) rotate(180deg);
}

.mk-adjacent__link--next:hover .mk-adjacent__arrow {
	transform: translateX(3px);
}

.mk-adjacent__title {
	color: var(--mk-fg);
	font-size: var(--mk-lead);
	font-weight: var(--mk-fw-semibold);
	line-height: 1.3;
}

@media (max-width: 809px) {
	.mk-adjacent {
		grid-template-columns: 1fr;
	}

	.mk-adjacent__link--next {
		grid-column: auto;
	}
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
/* One line, aligned with the page container: copyright + credit left, policy link right. */
.mk-footer {
	padding: 160px var(--mk-gutter) 80px;
}

.mk-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: var(--mk-container);
	margin: 0 auto;
	padding-top: 24px;
	border-top: 1px solid var(--mk-border);
	color: var(--mk-muted);
	font-size: 14px;
	line-height: 1.4;
}

.mk-footer__text {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.mk-footer__sep {
	opacity: 0.6;
}

.mk-footer__link {
	color: var(--mk-fg);
	transition: color var(--mk-dur-fast) var(--mk-ease);
}

.mk-footer__link:hover,
.mk-footer__link:focus-visible {
	color: var(--mk-accent);
}

@media (max-width: 809px) {
	.mk-footer__inner,
	.mk-footer__text {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.mk-footer__sep {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   12b. Back to top (fixed, bottom-right; revealed by main.js after scrolling)
   -------------------------------------------------------------------------- */
.mk-totop {
	position: fixed;
	right: max(24px, calc(env(safe-area-inset-right) + 16px));
	bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 0;
	border-radius: var(--mk-r-sm);
	background: var(--mk-accent);  /* same as .mk-button */
	color: var(--mk-ink);          /* dark on orange: 6.2:1 contrast */
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); /* lifts it off orange elements in the page */
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 8px, 0);
	transition: opacity var(--mk-dur-fast) var(--mk-ease), transform var(--mk-dur-fast) var(--mk-ease-out), visibility 0s linear var(--mk-dur-fast), background-color var(--mk-dur-fast) var(--mk-ease);
}

.mk-totop[hidden] {
	display: none;
}

.mk-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.mk-totop:hover,
.mk-totop:focus-visible {
	background: #f57d4f; /* .mk-button hover */
}

.mk-totop .mk-icon {
	transition: transform var(--mk-dur-fast) var(--mk-ease-out);
}

.mk-totop:hover .mk-icon {
	transform: translateY(-2px);
}

.mk-totop:active {
	transform: scale(0.94);
}

/* Small label to the left, same treatment as the navigation tooltips. */
.mk-totop__tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	padding: 4px 10px;
	border-radius: var(--mk-r-xs);
	background: var(--mk-tooltip);
	color: var(--mk-fg);
	font-family: var(--mk-font);
	font-size: var(--mk-small);
	line-height: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(6px, -50%);
	transition: opacity 0.2s var(--mk-ease), transform 0.2s var(--mk-ease);
}

.mk-totop:hover .mk-totop__tip,
.mk-totop:focus-visible .mk-totop__tip {
	opacity: 1;
	transform: translate(0, -50%);
}

/* Focus moves to <main> after "back to top"; it is a landmark, not a control. */
#content:focus {
	outline: none;
}

@media (max-width: 809px) {
	.mk-totop {
		right: max(16px, calc(env(safe-area-inset-right) + 12px));
		bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
	}

	/* Touch screens: no hover label. */
	.mk-totop__tip {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   13. Motion
   Load: sidebar then hero drop in (0.5s, hero +0.2s), like the reference.
   Scroll: each section drops in once when it enters the viewport.
   Only applied when JS is running (html.mk-js), so content is never hidden without it.
   -------------------------------------------------------------------------- */
@keyframes mk-enter {
	from {
		opacity: 0;
		transform: translate3d(0, var(--mk-enter-y), 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.mk-js [data-mk-load] {
	animation: mk-enter var(--mk-dur) var(--mk-ease) both;
}

/* Inner pages: the whole content column follows the sidebar (reference: +0.1s). */
.mk-js .mk-content[data-mk-load] {
	animation-delay: 0.1s;
}

.mk-js .mk-hero[data-mk-load] {
	animation-delay: var(--mk-hero-delay);
}

.mk-js [data-mk-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--mk-enter-y), 0);
	transition: opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease);
}

.mk-js [data-mk-reveal].is-visible {
	opacity: 1;
	transform: none;
}

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

	.mk-js [data-mk-load],
	.mk-js [data-mk-reveal] {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mk *,
	.mk *::before,
	.mk *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	/* Static, wrapping skills list instead of a moving strip. */
	.mk-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mk-marquee__track {
		width: auto;
		animation: none !important;
	}

	.mk-marquee__group {
		flex-wrap: wrap;
		row-gap: 16px;
		padding-right: 0;
	}

	.mk-marquee__group[aria-hidden="true"] {
		display: none;
	}
}