/* msalmi.com — 7-color mirrored palette
	paper #F5F4F0 · sand #DCD7CE · stone #9A948A · slate #5C5752 · dusk #34302B · ink #1E1C1A · accent #C2410C */
/* Self-hosted variable fonts, Latin subset (from Google Fonts, SIL Open Font License) */
/* optional + preload: no font swap after first paint, so no layout shift */
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: optional;
	src: url(/assets/fonts/instrument-sans-latin.woff2) format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: optional;
	src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
}

:root {
	--paper: #f5f4f0;
	--sand: #dcd7ce;
	--stone: #9a948a;
	--slate: #5c5752;
	--dusk: #34302b;
	--ink: #1e1c1a;
	--acc: #c2410c;
	--bg: var(--paper);
	--fg: var(--ink);
	--mut: var(--slate);
	--line: var(--sand);
	--focus: var(--slate);
	--btn-bg: var(--sand);
	--btn-fg: var(--ink);
	--photo: var(--sand);
	--sel-bg: var(--acc);
	--sel-fg: var(--paper);
	color-scheme: light;
}

/* Dark: explicit choice, or the OS preference when no choice was saved */
[data-theme='dark'] {
	--bg: var(--ink);
	--fg: var(--sand);
	--mut: var(--stone);
	--line: var(--dusk);
	--focus: var(--stone);
	--btn-bg: var(--dusk);
	--btn-fg: var(--sand);
	--photo: var(--dusk);
	--sel-bg: var(--sand);
	--sel-fg: var(--ink);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg: var(--ink);
		--fg: var(--sand);
		--mut: var(--stone);
		--line: var(--dusk);
		--focus: var(--stone);
		--btn-bg: var(--dusk);
		--btn-fg: var(--sand);
		--photo: var(--dusk);
		--sel-bg: var(--sand);
		--sel-fg: var(--ink);
		color-scheme: dark;
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
}

body {
	font-family: 'Instrument Sans', system-ui, sans-serif;
	transition:
		background 0.35s ease,
		color 0.35s ease;
}

::selection {
	background: var(--sel-bg);
	color: var(--sel-fg);
}

a {
	color: var(--fg);
}

a:hover {
	color: var(--acc);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.page {
	min-height: 100vh;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px);
	display: flex;
	flex-direction: column;
}

.top {
	padding: 28px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 36px;
	padding: 40px 0;
}

.photo {
	display: block;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--photo);
}

.name {
	margin: 0;
	font-size: clamp(56px, 11vw, 160px);
	line-height: 0.92;
	letter-spacing: -0.045em;
	font-weight: 600;
}

.role {
	margin: -20px 0 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	color: var(--mut);
}

.tagline {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.3;
	max-width: 820px;
}

/* Links: growing underline */
address {
	font-style: normal;
}

/* role="list" in the HTML keeps list semantics in Safari despite list-style: none */
.links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 26px;
	font-size: 20px;
}

.lk {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	text-decoration: none;
	font-weight: 600;
	color: var(--fg);
}

.lk:hover,
.lk:focus-visible {
	color: var(--fg);
}

.lk .tx {
	position: relative;
	display: inline-block;
}

.lk .tx::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	height: 2px;
	width: var(--uw, max(55%, 1.4em));
	background: var(--acc);
	transition: width 0.25s ease;
}

.lk:hover .tx::after,
.lk:focus-visible .tx::after {
	width: 100%;
}

.lk .ic {
	color: var(--acc);
	display: inline-flex;
	vertical-align: -0.08em;
}

/* a little air between "Email" and the paper plane */
.lk[href^='mailto:'] .ic {
	margin-left: 4px;
}

.print-only {
	display: none;
}

/* Blocks */
/* Each block has a top and bottom line. Stacked (mobile), neighbors share one line. */
.own-grid {
	display: grid;
	gap: 0;
	max-width: 1040px;
	grid-template-columns: 1fr;
}

.own {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 0 16px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.own + .own {
	border-top: 0;
}

@media (min-width: 600px) {
	.own-grid {
		gap: 24px 32px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.own + .own {
		border-top: 1px solid var(--line);
	}
}

.own .lb {
	margin: 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--acc);
}

.own p {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	opacity: 0.82;
}

/* Links from the home blocks to /work */
.own-lk {
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 0 4px;
	font-size: 16px;
}

.more {
	margin: 18px 0 0;
	font-size: 18px;
}

/* Hidden on screen, still read by screen readers and text browsers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Theme toggle */
/* Toggle needs JS: keep its space reserved, show once site.js adds .js */
.tbtn {
	display: inline-flex;
	visibility: hidden;
	width: 2.363em; /* matches the collapsed "ms." tile */
	height: 1.7em;
	font-size: 22px;
	padding: 0;
	border: 0;
	border-radius: 0.42em;
	background: var(--btn-bg);
	color: var(--btn-fg);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.js .tbtn {
	visibility: visible;
}

.tbtn .i-moon {
	display: none;
}

[data-theme='dark'] .tbtn .i-sun {
	display: none;
}

[data-theme='dark'] .tbtn .i-moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .tbtn .i-sun {
		display: none;
	}
	:root:not([data-theme='light']) .tbtn .i-moon {
		display: block;
	}
}

/* Logo: /assets/logo.svg (decorative; hidden from AT and tab order).
	site.js inlines it so it can replay on hover/click and follow the theme colors. */
.tile {
	display: inline-flex;
	align-items: center;
	height: 1.7em;
	padding: 0 0.7em 0 0; /* no left padding: "ms." lines up with the text below */
	margin-left: -0.09em; /* the glyphs start 64 units into the SVG; pull them onto the text edge */
	font-size: 22px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* 1em = 1000 font units in the SVG, drawn 1.4× (40% bigger) inside the same 1.7em tile; the shift keeps the baseline */
.tile img,
.tile svg {
	display: block;
	width: 4.347em;
	height: 1.372em;
	margin-top: -0.28em;
}

/* Reduced motion: the SVG shows a static "ms." on its own */
@media (prefers-reduced-motion: reduce) {
	body {
		transition: none;
	}
}

@media print {
	@page {
		size: A4;
		margin: 16mm;
	}
	:root,
	:root[data-theme],
	:root:not([data-theme='light']) {
		--bg: #ffffff;
		--fg: var(--ink);
		--mut: var(--slate);
		--line: var(--sand);
	}
	* {
		box-shadow: none !important;
		transition: none !important;
		animation: none !important;
	}
	html,
	body {
		background: #ffffff !important;
		color: var(--ink) !important;
	}
	.page {
		min-height: 0;
	}
	.tbtn,
	.js .tbtn {
		display: none !important;
	}
	.links,
	.own-lk,
	.more {
		display: none !important;
	}
	.print-only {
		display: block;
		font-family: 'JetBrains Mono', monospace;
		font-size: 10pt;
		color: var(--slate);
	}
	.photo,
	.own .lb,
	.tile svg {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.main {
		padding: 24px 0;
		gap: 20px;
	}
	.name {
		font-size: 52pt;
		white-space: nowrap;
	}
	.tagline {
		font-size: 13pt;
		line-height: 1.4;
		max-width: none;
	}
	.main,
	.own {
		break-inside: avoid;
	}
	.role {
		margin-top: 0;
	}
}