/*
 * Shared styles for the Left subdomain pages. These are static files in public/,
 * outside the Astro + Tailwind build, so plain CSS is the only option here.
 * Values mirror the portfolio: Instrument Sans, #2c2b31 headings, #656565 body.
 */

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/instrument-sans.ttf") format("truetype");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

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

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

body {
	margin: 0;
	background: #fff;
	color: #656565;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
}

main {
	width: min(640px, calc(100% - 40px));
	margin: 0 auto;
	padding: 64px 0 48px;
}

@media (min-width: 761px) {
	main {
		padding-top: 128px;
	}
}

nav {
	display: flex;
	gap: 20px;
	margin-bottom: 48px;
	font-size: 16px;
}

h1,
h2 {
	color: #2c2b31;
	font-weight: 500;
	line-height: 1.2;
	text-wrap: balance;
}

h1 {
	margin: 0 0 12px;
	font-size: 36px;
}

h2 {
	margin: 40px 0 8px;
	font-size: 20px;
}

p,
ul {
	margin: 0 0 16px;
}

ul {
	padding-left: 1.2em;
}

li + li {
	margin-top: 6px;
}

strong {
	color: #2c2b31;
	font-weight: 500;
}

.lede {
	color: #2c2b31;
	font-size: 20px;
}

.meta {
	font-size: 15px;
}

a {
	color: #2c2b31;
	font-weight: 500;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
	transition: text-decoration-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

a:is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

a[aria-current="page"] {
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid #2c2b31;
	outline-offset: 3px;
	border-radius: 2px;
}

footer {
	margin-top: 64px;
	font-size: 15px;
}