/* Muradian Web Consulting */

@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
	--paper: #f5f3ee;
	--ink: #1c2230;
	--muted: #6a6f78;
	--line: #dcd8cf;
	--accent: #1f4e79;
	--gutter: clamp(20px, 5vw, 64px);
	--measure: 680px;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	color: var(--ink);
	font: 400 1.0625rem/1.65 "IBM Plex Sans", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 10; padding: 8px 12px; background: var(--ink); color: var(--paper); }
.skip-link:focus { left: 12px; }

.site-header,
.site-main,
.site-footer {
	width: 100%;
	max-width: calc(var(--measure) + 2 * var(--gutter));
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 32px;
	padding-bottom: 32px;
}

.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.wordmark__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: var(--ink);
	color: var(--paper);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1;
}
.wordmark__name { font-weight: 500; letter-spacing: -.005em; }

.nav { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover, .nav .current-menu-item > a, .nav a[aria-current] { text-decoration: underline; }

.site-main { flex: 1; padding-top: clamp(40px, 9vw, 112px); padding-bottom: clamp(64px, 10vw, 128px); }

.home__title,
.page-title {
	margin: 0 0 28px;
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
}

.entry > * { margin: 0 0 1em; }
.entry .lead { margin-bottom: 1.6em; font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.45; color: var(--ink); }
.entry .small { font-size: .9rem; color: var(--muted); }
.entry h2 {
	margin: 2.6em 0 .7em;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}
.entry .big-link { font-size: clamp(1.3rem, 4.6vw, 2rem); font-weight: 500; overflow-wrap: anywhere; }

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	position: relative;
	padding-top: 24px;
	padding-bottom: 40px;
	font-size: .9rem;
	color: var(--muted);
}
.site-footer::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }
.site-footer .nav a { color: var(--muted); }
.site-footer .nav a:hover { color: var(--ink); }

@media (max-width: 480px) {
	.wordmark__name { font-size: .95rem; }
}