@font-face {
	font-family: "CascadiaCode";
	src:
		url("/fonts/CascadiaCode.woff2") format("woff2"),
		url("/fonts/CascadiaCode.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "MonaspaceArgonVar";
	src: url("/fonts/MonaspaceArgonVarVF.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

:root {
	--font-monospace:
		"MonaspaceArgonVar", CascadiaCode, "Fira Code", Menlo, Monaco, "Courier New", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1rem;
	margin: 1.5rem 0 1.5rem 0;
	font-weight: 600;
}

/* === Personal customizations on top of risotto + gruvbox-dark === */

/* Higher-contrast text and links.
 *   --fg     base05 -> base06   (#d5c4a1 -> #ebdbb2)
 *   --off-fg base04 -> base05   (#bdae93 -> #d5c4a1; lifts code/footer text)
 *   --link   base0D -> base0C   (muted blue -> aqua; brighter on dark bg)
 *   --hover  base0C -> base0A   (aqua -> yellow; clear hover affordance)
 */
:root {
	--fg: var(--base06);
	--off-fg: var(--base05);
	--link: var(--base0C);
	--hover: var(--base0A);
}

/* Bigger portrait, flush against the body's hard edge on desktop.
 * .page__body has `box-shadow: 0 0 0 1rem var(--off-bg)` extending it 1rem
 * past its grid column. The grid column-gap is 2rem, so the visual gap
 * between the body's shadow edge and the aside content is 1rem. Pulling
 * the portrait left by 1rem aligns it with that hard edge.
 */
.about__logo {
	display: block;
	width: 8rem;
	height: auto;
	margin: 0 0 1rem 0;
}

@media (min-width: 45rem) {
	.about__logo {
		width: 10rem;
		margin-left: -1rem;
	}
}

/* Article summary, rendered under the portrait by partials/about.html
 * when a single page is being viewed.
 */
.about__page-summary {
	margin: 0 0 1rem 0;
	font-style: italic;
	color: var(--off-fg);
}