/*
Theme Name: Mehran — Expedition Journal
Theme URI: https://mehranmarandi.ir
Author: Mehran Marandi
Author URI: https://github.com/mehran-mrn
Description: A lightweight single-page personal portfolio for Mehran Marandi.
Version: 2.1.6
Template: mrn
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mrn-child-mehran
*/

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/BarlowCondensed-Bold.woff2?v=216") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("assets/fonts/BarlowCondensed-Black.woff2?v=216") format("woff2");
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/Caveat-SemiBold.ttf?v=216") format("truetype");
}

:root {
	--mm-paper: #f3eee4;
	--mm-paper-light: #faf7f0;
	--mm-card: #eee6d7;
	--mm-ink: #0b315d;
	--mm-blue: #164c88;
	--mm-orange: #d95817;
	--mm-muted: #687789;
	--mm-line: rgb(11 49 93 / 19%);
	--mm-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--mm-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	scroll-behavior: smooth;
}

body.mehran-expedition {
	min-width: 320px;
	margin: 0;
	color: var(--mm-ink);
	background:
		linear-gradient(rgb(250 247 240 / 58%), rgb(243 238 228 / 58%)),
		/* url("assets/images/topographic-contours-transparent-v2.png?v=216"), */
		radial-gradient(circle at 28% 21%, rgb(255 255 255 / 82%), transparent 32rem),
		var(--mm-paper);
	background-position: center, center top, center, center;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat;
	background-size: auto, cover, auto, auto;
	font-family: var(--mm-mono);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.mehran-expedition::before {
	position: fixed;
	z-index: 20;
	inset: 0;
	pointer-events: none;
	content: "";
	opacity: 0.045;
	background-image:
		radial-gradient(circle at 20% 30%, #7b6f5f 0 0.45px, transparent 0.65px),
		radial-gradient(circle at 70% 65%, #fff 0 0.55px, transparent 0.8px);
	background-size: 5px 5px, 7px 7px;
	mix-blend-mode: multiply;
}

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

.mehran-expedition a:focus-visible {
	outline: 2px dashed var(--mm-orange);
	outline-offset: 5px;
}

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

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.75rem;
	left: 0.75rem;
	width: auto;
	height: auto;
	padding: 0.7rem 1rem;
	clip: auto;
	background: var(--mm-paper-light);
}

.mm-skip {
	position: fixed;
	z-index: 100000;
	top: 0.8rem;
	left: 0.8rem;
	padding: 0.7rem 1rem;
	color: var(--mm-paper-light);
	background: var(--mm-ink);
	border: 2px solid var(--mm-orange);
	font-family: var(--mm-mono);
	font-size: 0.75rem;
	font-weight: 700;
	clip-path: inset(50%);
	transform: translateY(-180%);
	transition: transform 150ms ease;
}

.mm-skip:focus {
	clip-path: none;
	transform: translateY(0);
}

.mm-page {
	position: relative;
	width: min(100%, 1600px);
	min-height: 100vh;
	margin-inline: auto;
	padding: clamp(1.4rem, 2.7vw, 3rem) clamp(1.25rem, 4.9vw, 5.25rem) 2rem;
	overflow: hidden;
}

.mm-topline {
	position: relative;
	z-index: 8;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.35rem;
	min-height: 3rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.mm-monogram {
	display: grid;
	width: 4rem;
	place-items: center;
}

.mm-monogram svg {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--mm-blue);
}

.mm-coordinate {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mm-coordinate i {
	width: 0.55rem;
	aspect-ratio: 1;
	background: var(--mm-orange);
	border-radius: 50%;
}

.mm-direct-links {
	display: flex;
	gap: clamp(1.4rem, 3vw, 3.5rem);
}

.mm-direct-links a {
	position: relative;
}

.mm-direct-links a::after,
.mm-contact-links a::after,
.mm-all-repos::after {
	position: absolute;
	right: 0;
	bottom: -0.25rem;
	left: 0;
	height: 1px;
	content: "";
	background: var(--mm-orange);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 180ms ease;
}

.mm-direct-links a:hover::after,
.mm-contact-links a:hover::after,
.mm-all-repos:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mm-hero {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(28rem, 0.83fr) minmax(34rem, 1.17fr);
	align-items: start;
	min-height: clamp(32rem, 43vw, 43rem);
	margin-top: 0.35rem;
}

.mm-hero__copy {
	position: relative;
	z-index: 4;
	padding: 0 0 0 clamp(2.4rem, 4vw, 4.5rem);
}

.mm-name {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	font-family: var(--mm-display);
	font-size: clamp(6.5rem, 9vw, 9rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 0.82;
	text-transform: uppercase;
}

.mm-name span {
	display: block;
	padding-right: 0.08em;
	background:
		radial-gradient(circle, rgb(243 238 228 / 45%) 0 0.8px, transparent 1px),
		linear-gradient(175deg, #123f70, #08294e);
	background-size: 5px 5px, auto;
	background-clip: text;
	color: transparent;
	-webkit-background-clip: text;
	filter: drop-shadow(0.03em 0.035em 0 rgb(6 37 70 / 15%));
}

.mm-role {
	margin: 1.35rem 0 0;
	font-family: var(--mm-display);
	font-size: clamp(1.25rem, 1.75vw, 1.7rem);
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1;
	text-transform: uppercase;
}

.mm-role b {
	padding-inline: 0.55rem;
	color: var(--mm-orange);
	font-weight: 900;
}

.mm-orange-rule {
	display: block;
	width: clamp(10rem, 16vw, 16rem);
	height: 3px;
	margin: 1.35rem 0 1.05rem;
	background: var(--mm-orange);
	border-radius: 50%;
	transform: rotate(-1deg);
}

.mm-statement {
	margin: 0;
	font-family: var(--mm-display);
	font-size: clamp(2.8rem, 3.8vw, 4.25rem);
	font-weight: 900;
	letter-spacing: 0.01em;
	line-height: 0.93;
	text-transform: uppercase;
}

.mm-statement em {
	color: var(--mm-orange);
	font-style: normal;
}

.mm-mantra {
	display: flex;
	align-items: flex-end;
	gap: 1.2rem;
	margin: 1.35rem 0 0 1rem;
	font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
	font-size: clamp(1.8rem, 2.75vw, 2.75rem);
	font-weight: 600;
	letter-spacing: 0.015em;
	line-height: 0.86;
	transform: rotate(-4deg);
}

.mm-mantra span {
	position: relative;
	display: block;
	width: 6.4rem;
	height: 1.25rem;
	margin-bottom: -0.05rem;
	border-bottom: 2.5px solid var(--mm-blue);
	border-radius: 40% 55% 35% 65%;
	transform: translateY(0.75rem) skewX(-18deg) rotate(2deg);
}

.mm-mantra span::before {
	position: absolute;
	right: 1.2rem;
	bottom: -0.72rem;
	left: -13.5rem;
	height: 0.7rem;
	border-top: 2px solid var(--mm-blue);
	border-radius: 50%;
	content: "";
	transform: rotate(-1.5deg);
}

.mm-mantra span::after {
	position: absolute;
	right: -0.05rem;
	bottom: -0.32rem;
	width: 0.72rem;
	height: 0.72rem;
	border-top: 2.5px solid var(--mm-blue);
	border-right: 2.5px solid var(--mm-blue);
	content: "";
	transform: rotate(45deg);
}

.mm-altimeter {
	position: absolute;
	z-index: 5;
	top: 17rem;
	left: 0;
	display: flex;
	width: 1.2rem;
	height: 15rem;
	flex-direction: column;
	justify-content: space-between;
	border-right: 1px solid var(--mm-blue);
	font-family: var(--mm-display);
	font-size: 0.62rem;
}

.mm-altimeter::after {
	position: absolute;
	top: 0;
	right: -4px;
	width: 7px;
	height: 100%;
	content: "";
	background: repeating-linear-gradient(to bottom, var(--mm-blue) 0 1px, transparent 1px 8px);
}

.mm-altimeter span {
	transform: translateX(-1.8rem);
}

.mm-altimeter b {
	position: absolute;
	right: -0.25rem;
	bottom: -1.8rem;
	font-weight: 400;
}

.mm-portrait {
	position: relative;
	z-index: 2;
	align-self: stretch;
	min-width: 0;
	margin: 0;
}

.mm-portrait::before {
	position: absolute;
	z-index: -2;
	top: 1rem;
	right: -9rem;
	width: 51rem;
	aspect-ratio: 1;
	content: "";
	opacity: 0;
	background-image: none;
	transform: rotate(12deg);
}

.mm-person {
	position: absolute;
	z-index: 2;
	top: -9.5rem;
	right: -3.5rem;
	display: block;
	width: min(66vw, 55rem);
	height: auto;
	filter: contrast(1.06);
	mix-blend-mode: multiply;
	-webkit-mask-image: linear-gradient(to bottom, #000 0 80%, rgb(0 0 0 / 92%) 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 80%, rgb(0 0 0 / 92%) 88%, transparent 100%);
}

.mm-mountains {
	position: absolute;
	z-index: 1;
	right: -6rem;
	bottom: 5rem;
	width: min(58vw, 55rem);
	height: auto;
	opacity: 0.52;
	-webkit-mask-image: linear-gradient(to right, transparent 0 42%, #000 66%);
	mask-image: linear-gradient(to right, transparent 0 42%, #000 66%);
}

.mm-expedition-board {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: 1.28fr 0.86fr 0.86fr;
	gap: clamp(2.5rem, 5vw, 6rem);
	align-items: start;
	margin: clamp(-9rem, -7vw, -6rem) -1.2rem 0;
	padding: 5.5rem 1.2rem 0;
}

.mm-route {
	position: absolute;
	z-index: 6;
	top: 0;
	left: 50%;
	width: calc(100vw + 7rem);
	max-width: 1740px;
	height: 16rem;
	overflow: visible;
	pointer-events: none;
	transform: translateX(-50%);
}

.mm-route > path {
	fill: none;
	stroke: var(--mm-blue);
	stroke-width: 4.2;
	stroke-dasharray: 7 6 16 7 5 10;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mm-waypoints circle:nth-child(-n + 3) {
	fill: var(--mm-paper-light);
	stroke: var(--mm-orange);
	stroke-width: 3;
}

.mm-waypoints circle:nth-child(n + 4) {
	fill: var(--mm-orange);
}

.mm-flags {
	fill: rgb(22 76 136 / 18%);
	stroke: var(--mm-blue);
	stroke-width: 3;
	stroke-linejoin: round;
}

.mm-paper {
	position: relative;
	z-index: 4;
	min-width: 0;
	padding: clamp(1.6rem, 2.5vw, 2.8rem);
	background:
		linear-gradient(105deg, rgb(255 255 255 / 35%), transparent 38%),
		radial-gradient(circle at 20% 30%, rgb(80 65 43 / 8%) 0 0.6px, transparent 0.8px),
		var(--mm-card);
	background-size: auto, 6px 6px, auto;
	filter: drop-shadow(0 1.2rem 0.85rem rgb(56 46 32 / 18%));
	clip-path: polygon(
		0 4.2%, 2.6% 1.4%, 5.7% 3.6%, 9.2% 0.9%, 13% 3.2%, 17.4% 1.1%,
		22.1% 3.7%, 27% 0.7%, 31.8% 3.1%, 36.6% 1%, 41.7% 3.4%, 47% 0.5%,
		52.5% 2.9%, 58.1% 0.8%, 63.2% 3.6%, 68.7% 1.1%, 73.8% 3.2%, 79.2% 0.7%,
		84.3% 3.5%, 89.2% 1%, 94% 3.3%, 97.7% 1.2%, 100% 4.5%, 98.7% 10%,
		100% 17%, 98.9% 25%, 100% 33%, 99% 42%, 100% 51%, 98.8% 60%,
		100% 69%, 98.7% 78%, 100% 87%, 98.4% 95.5%, 94.8% 98.6%, 90.9% 97%,
		86.8% 99.4%, 82.4% 97.2%, 77.7% 99.5%, 72.8% 97%, 67.7% 99.2%,
		62.4% 97.1%, 57.1% 99.5%, 51.7% 97%, 46.4% 99.2%, 41.1% 96.9%,
		35.8% 99.5%, 30.7% 97%, 25.4% 99.3%, 20.5% 96.8%, 15.5% 99.4%,
		10.7% 97%, 6.4% 99.1%, 2.4% 96.5%, 0 92%, 1.3% 83%, 0 74%,
		1.1% 65%, 0 56%, 1.2% 47%, 0 38%, 1.1% 29%, 0 20%, 1.2% 11%
	);
}

.mm-projects {
	min-height: 19rem;
	transform: rotate(-0.7deg);
}

.mm-notes {
	min-height: 20.5rem;
	margin-top: 2.2rem;
	transform: rotate(1.8deg);
}

.mm-now {
	min-height: 18.2rem;
	margin-top: 4.2rem;
	transform: rotate(-1.5deg);
}

.mm-projects::after,
.mm-notes::after,
.mm-now::after {
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0.9rem;
	content: "";
	opacity: 0.3;
	background:
		radial-gradient(ellipse at 8% 0, transparent 0 42%, rgb(89 70 46 / 30%) 46% 47%, transparent 51%) 0 0 / 3.1rem 0.85rem repeat-x;
	filter: blur(0.35px);
}

.mm-paper__heading {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.mm-paper__heading > span {
	color: var(--mm-orange);
	font-family: var(--mm-display);
	font-size: 1.05rem;
	font-weight: 900;
}

.mm-paper__heading h2 {
	margin: 0;
	padding-bottom: 0.25rem;
	border-bottom: 2px solid var(--mm-blue);
	font-family: var(--mm-display);
	font-size: clamp(1.45rem, 2vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.045em;
	line-height: 1;
	text-transform: uppercase;
}

.mm-repository-list {
	position: relative;
	z-index: 2;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mm-repository-list li + li {
	border-top: 1px solid var(--mm-line);
}

.mm-repository-list a {
	display: grid;
	grid-template-columns: 3.1rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	min-height: 4.1rem;
	padding: 0.5rem 0;
}

.mm-repo-mark {
	display: grid;
	width: 3.05rem;
	aspect-ratio: 1;
	place-items: center;
	color: #fff;
	background: var(--mm-ink);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
	font-family: var(--mm-display);
	font-size: 0.65rem;
	font-weight: 900;
}

.mm-repo-copy {
	display: grid;
	min-width: 0;
}

.mm-repo-copy strong {
	overflow: hidden;
	font-family: var(--mm-display);
	font-size: clamp(1rem, 1.35vw, 1.3rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mm-repo-copy small {
	overflow: hidden;
	color: var(--mm-muted);
	font-size: 0.57rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mm-repo-arrow {
	color: var(--mm-orange);
	font-size: 1.35rem;
	transition: transform 160ms ease;
}

.mm-repository-list a:hover .mm-repo-arrow {
	transform: translateX(0.3rem);
}

.mm-all-repos {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-top: 0.8rem;
	font-size: 0.57rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.mm-notes > p {
	position: relative;
	z-index: 2;
	margin: 1.5rem 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
}

.mm-notes ul {
	position: relative;
	z-index: 2;
	padding: 0;
	margin: 0;
	font-size: 0.68rem;
	line-height: 1.85;
	list-style: none;
}

.mm-notes mark {
	padding: 0 0.3rem;
	color: inherit;
	background: transparent;
	border: 1px solid var(--mm-blue);
	border-radius: 50%;
}

.mm-note-mountains {
	position: absolute;
	z-index: 1;
	right: -5%;
	bottom: -7%;
	width: 110%;
	height: auto;
	object-fit: contain;
	object-position: center bottom;
	opacity: 0.55;
	filter: saturate(0.7) contrast(0.95);
	mix-blend-mode: multiply;
}

.mm-location {
	position: relative;
	z-index: 2;
	margin: 2.8rem 0 2rem;
	padding-left: 3rem;
	font-family: var(--mm-display);
	font-size: clamp(1.3rem, 1.75vw, 1.65rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: uppercase;
}

.mm-location svg {
	position: absolute;
	top: 0.05rem;
	left: -0.1rem;
	width: 2.25rem;
	height: auto;
	overflow: visible;
	fill: none;
	stroke: var(--mm-orange);
	stroke-width: 3.1;
}

.mm-location svg circle {
	fill: none;
	stroke-width: 2.5;
}

.mm-contact-links {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 1.2rem;
	font-size: 0.57rem;
	font-weight: 700;
	text-transform: uppercase;
}

.mm-contact-links a {
	position: relative;
}

.mm-globe {
	position: absolute;
	z-index: 1;
	right: -2.4rem;
	bottom: -3.9rem;
	width: 12.5rem;
	height: auto;
	opacity: 0.42;
	transform: rotate(-13deg);
	mix-blend-mode: multiply;
}

.mm-bottomline {
	position: relative;
	z-index: 6;
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-top: 2.6rem;
	padding-inline: 0.5rem 5rem;
}

.mm-terminal {
	display: grid;
	width: min(32rem, 100%);
	padding-left: 0.8rem;
	border-left: 2px solid var(--mm-blue);
	font-size: 0.66rem;
	line-height: 1.65;
}

.mm-terminal code {
	min-height: 1.65em;
	white-space: nowrap;
}

.mm-terminal code > span {
	color: var(--mm-blue);
	font-weight: 800;
}

.mm-terminal__typed {
	color: inherit;
	font: inherit;
	font-weight: inherit;
}

.mm-terminal__typed.is-typing::after {
	display: inline-block;
	width: 0.12em;
	height: 1.08em;
	margin-left: 0.18em;
	background: var(--mm-orange);
	content: "";
	vertical-align: -0.14em;
	animation: mm-terminal-caret 700ms step-end infinite;
}

.mm-stack {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.45rem;
	margin-top: 0.35rem;
	color: var(--mm-muted);
	font-size: 0.52rem;
	letter-spacing: 0.04em;
	opacity: 0.72;
}

.mm-stack i {
	font-style: normal;
	opacity: 0.35;
}

.mm-stack span {
	color: var(--mm-muted);
	font-weight: 700;
	animation: mm-stack-signal 4.8s ease-in-out infinite;
}

.mm-stack span:nth-of-type(2) {
	animation-delay: 0.4s;
}

.mm-stack span:nth-of-type(3) {
	animation-delay: 0.8s;
}

.mm-stack span:nth-of-type(4) {
	animation-delay: 1.2s;
}

.mm-stack span:nth-of-type(5) {
	animation-delay: 1.6s;
}

.mm-coordinate-stamp {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.65rem 0.9rem;
	border: 1px dashed var(--mm-blue);
	background: rgb(250 247 240 / 55%);
	font-size: 0.62rem;
	line-height: 1.4;
	transform: rotate(0.7deg);
}

.mm-coordinate-stamp svg {
	width: 2.7rem;
	fill: none;
	stroke: var(--mm-orange);
	stroke-width: 1.3;
}

@media (max-width: 1180px) {
	.mm-page {
		padding-inline: 2.2rem;
	}

	.mm-hero {
		grid-template-columns: minmax(25rem, 0.9fr) minmax(27rem, 1.1fr);
		min-height: 36rem;
	}

	.mm-hero__copy {
		padding-left: 2rem;
	}

	.mm-name {
		font-size: clamp(6rem, 10.5vw, 8rem);
	}

	.mm-person {
		top: -5.5rem;
		right: -5rem;
		width: min(58vw, 45rem);
	}

	.mm-mountains {
		right: -8rem;
		bottom: 6rem;
	}

	.mm-expedition-board {
		gap: 2rem;
		margin-top: -6rem;
	}

	.mm-paper {
		padding: 1.7rem;
	}
}

@media (max-width: 860px) {
	body.mehran-expedition {
		background-size: auto, auto 100%, auto, auto;
	}

	.mm-page {
		padding: 1.25rem 1.1rem 2rem;
	}

	.mm-topline {
		grid-template-columns: auto 1fr;
	}

	.mm-coordinate {
		justify-self: end;
	}

	.mm-direct-links {
		grid-column: 1 / -1;
		justify-self: end;
		margin-top: -0.4rem;
	}

	.mm-hero {
		display: block;
		min-height: 59rem;
	}

	.mm-hero__copy {
		padding: 3.5rem 0 0 1rem;
	}

	.mm-name {
		font-size: clamp(5.9rem, 22vw, 8.8rem);
	}

	.mm-statement {
		font-size: clamp(2.8rem, 9.5vw, 4.2rem);
	}

	.mm-role {
		font-size: 1.15rem;
	}

	.mm-mantra {
		font-size: clamp(1.35rem, 5.4vw, 2rem);
	}

	.mm-altimeter {
		display: none;
	}

	.mm-portrait {
		position: absolute;
		right: -2rem;
		bottom: 0;
		left: 5%;
		height: 36rem;
	}

	.mm-person {
		top: auto;
		right: -2rem;
		bottom: -1rem;
		width: min(92vw, 43rem);
	}

	.mm-mountains {
		right: -6rem;
		bottom: 4rem;
		width: 50rem;
	}

	.mm-expedition-board {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		margin: -6rem 0 0;
		padding: 7rem 0 0 2rem;
	}

	.mm-route {
		top: 0;
		left: 0;
		width: 11rem;
		height: 100%;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: top left;
	}

	.mm-projects,
	.mm-notes,
	.mm-now {
		width: min(100%, 39rem);
		min-height: 0;
		margin: 0;
	}

	.mm-notes {
		justify-self: end;
	}

	.mm-now {
		width: min(90%, 32rem);
	}

	.mm-bottomline {
		padding-inline: 0;
	}
}

@media (max-width: 540px) {
	.mm-topline {
		gap: 0.8rem;
		font-size: 0.55rem;
	}

	.mm-monogram {
		width: 3.1rem;
	}

	.mm-coordinate {
		gap: 0.5rem;
		letter-spacing: 0.03em;
	}

	.mm-direct-links {
		gap: 1.4rem;
	}

	.mm-hero {
		min-height: 47rem;
	}

	.mm-hero__copy {
		padding-top: 2.6rem;
		padding-left: 0;
	}

	.mm-name {
		font-size: clamp(5.1rem, 24vw, 7.4rem);
	}

	.mm-role {
		font-size: 0.88rem;
		letter-spacing: 0.035em;
	}

	.mm-role b {
		padding-inline: 0.25rem;
	}

	.mm-orange-rule {
		margin-block: 1rem 0.8rem;
	}

	.mm-statement {
		font-size: clamp(2.25rem, 10.5vw, 3.2rem);
	}

	.mm-mantra {
		position: relative;
		display: inline-block;
		margin-left: -0.2rem;
		padding-bottom: 1.9rem;
	}

	.mm-mantra span {
		position: absolute;
		bottom: 0.55rem;
		left: 0.25rem;
		width: 7.05rem;
		height: 0.35rem;
		margin: 0;
		transform: rotate(-2.5deg);
	}

	.mm-mantra span::before {
		right: auto;
		bottom: -0.78rem;
		left: 0.95rem;
		width: 4.45rem;
		height: 0.2rem;
		transform: rotate(-2deg);
	}

	.mm-mantra span::after {
		right: -0.05rem;
		bottom: -0.32rem;
	}

	.mm-portrait {
		right: -4rem;
		left: -1rem;
		height: 25rem;
	}

	.mm-person {
		right: -3rem;
		width: 31rem;
	}

	.mm-mountains {
		right: -10rem;
		width: 43rem;
	}

	.mm-expedition-board {
		margin-top: -3rem;
		padding-top: 4rem;
		padding-left: 0.8rem;
	}

	.mm-route {
		display: none;
	}

	.mm-paper {
		padding: 1.35rem;
		filter: drop-shadow(0 0.75rem 0.6rem rgb(56 46 32 / 16%));
	}

	.mm-paper__heading h2 {
		font-size: 1.25rem;
	}

	.mm-note-mountains {
		right: -1%;
		bottom: -2.5rem;
		width: 86%;
	}

	.mm-repository-list a {
		grid-template-columns: 2.65rem minmax(0, 1fr) auto;
		gap: 0.7rem;
	}

	.mm-repo-mark {
		width: 2.55rem;
	}

	.mm-repo-copy strong {
		font-size: 1rem;
	}

	.mm-bottomline {
		display: grid;
		gap: 2rem;
	}

	.mm-coordinate-stamp {
		justify-self: end;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mm-hero__copy,
	.mm-portrait,
	.mm-paper {
		animation: mm-reveal 480ms both;
	}

	.mm-portrait {
		animation-delay: 70ms;
	}

	.mm-paper:nth-of-type(1) {
		animation-delay: 130ms;
	}

	.mm-paper:nth-of-type(2) {
		animation-delay: 190ms;
	}

	.mm-paper:nth-of-type(3) {
		animation-delay: 250ms;
	}

	@keyframes mm-reveal {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes mm-terminal-caret {
		50% {
			opacity: 0;
		}
	}

	@keyframes mm-stack-signal {
		0%,
		28%,
		100% {
			color: var(--mm-muted);
			text-shadow: none;
			transform: translateY(0);
		}
		7%,
		15% {
			color: var(--mm-blue);
			text-shadow: 0 0 0.55rem rgb(23 73 128 / 24%);
			transform: translateY(-0.12rem);
		}
	}
}

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

	.mm-terminal__typed::after,
	.mm-stack span {
		animation: none;
	}
}