/* crippen-site-base: fonts and design tokens shared by the front page, /cv/ and Work pages (ticket 09).
   Newsreader + IBM Plex Sans, self-hosted, latin subset, three WOFF2 files (about 106 KB). */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/newsreader-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/newsreader-latin-italic-400.woff2") format("woff2");
}

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

:root {
	--crippen-ink: #1b1f1d;
	--crippen-muted: #5d655f;
	--crippen-line: #e2e4df;
	--crippen-accent: #2f5d50;
	--crippen-paper: #fbfaf7;
	--crippen-wash: #f1f0ea;
	--crippen-abstract: #2e3431;
	--crippen-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--crippen-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--crippen-wide: 1240px;
	--crippen-gutter: 32px;
}

@media (max-width: 640px) {
	:root {
		--crippen-gutter: 20px;
	}
}

/* Header and page background, shared by the front page (body.crippen-front)
   and /cv/ and the Work pages (body.crippen-page), so all three match. */
body.crippen-page,
body.crippen-page #page,
body.crippen-page #content {
	background: var(--crippen-paper);
}

body.crippen-page.ast-separate-container .ast-article-single,
body.crippen-page.ast-separate-container .ast-article-post {
	background: transparent;
	box-shadow: none;
}

body.crippen-front .main-header-bar,
body.crippen-front .ast-primary-header-bar,
body.crippen-front .ast-mobile-header-wrap .ast-primary-header-bar,
body.crippen-page .main-header-bar,
body.crippen-page .ast-primary-header-bar,
body.crippen-page .ast-mobile-header-wrap .ast-primary-header-bar {
	background: var(--crippen-paper);
	border-bottom: 0;
}

body.crippen-front .site-title,
body.crippen-front .site-title a,
body.crippen-page .site-title,
body.crippen-page .site-title a {
	font: 500 14px/1.2 var(--crippen-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--crippen-ink);
}

body.crippen-front .main-header-menu a,
body.crippen-front .ast-builder-menu .menu-item > .menu-link,
body.crippen-page .main-header-menu a,
body.crippen-page .ast-builder-menu .menu-item > .menu-link {
	font: 400 14px/1.4 var(--crippen-sans);
	color: var(--crippen-muted);
}

body.crippen-front .main-header-menu a:hover,
body.crippen-front .ast-builder-menu .menu-item > .menu-link:hover,
body.crippen-front .main-header-menu .current-menu-item > a,
body.crippen-page .main-header-menu a:hover,
body.crippen-page .ast-builder-menu .menu-item > .menu-link:hover,
body.crippen-page .main-header-menu .current-menu-item > a {
	color: var(--crippen-accent);
}