@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/raleway-v37-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/raleway-v37-latin-700.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("fonts/raleway-v37-latin-800.woff2") format("woff2");
}

:root {
	--font-sans: Raleway, sans-serif;

	--text-base: 1.25rem; /* 20px */
	--text-lg: 1.5rem; /* 24px */
	--text-xl: 1.875rem; /* 30px */
	--text-2xl: 2.25rem; /* 36px */
	--text-3xl: 4rem; /* 64px */

	--line-height-tight: 1.2;
	--line-height-loose: 1.5;

	--color-stone-100: oklch(97% 0.001 106.424);
	--color-stone-300: oklch(86.9% 0.005 56.366);
	--color-stone-600: oklch(44.4% 0.011 73.639);
	--color-stone-900: oklch(21.6% 0.006 56.043);

	--color-neutral-weak: var(--color-stone-100);
	--color-neutral-medium: var(--color-stone-600);
	--color-neutral-strong: var(--color-stone-900);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-neutral-weak: var(--color-stone-900);
		--color-neutral-medium: var(--color-stone-300);
		--color-neutral-strong: var(--color-stone-100);
	}
}

body {
	background-color: var(--color-neutral-weak);
	color: var(--color-neutral-strong);
	line-height: var(--line-height-loose);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;

	max-width: 60ch;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	font-size: var(--text-3xl);
	font-weight: 800;
	line-height: var(--line-height-tight);
	margin-bottom: 0.75rem;
}

h2 {
	font-size: var(--text-2xl);
	line-height: var(--line-height-tight);
	margin-top: 2.5rem;
	margin-bottom: 0;
}

h3 {
	font-size: var(--text-base);
	line-height: var(--line-height-tight);
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
	color: var(--color-neutral-medium);
}

.job-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	vertical-align: -0.125em;
}

li {
	margin-bottom: 0.5rem;
}

ul {
	margin-top: 0.75rem;
}

h1,
h2,
h3 {
	overflow-wrap: break-word;
}

footer {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
}

footer p {
	margin-bottom: 0.5rem;
}

footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.5rem;
}

a {
	text-underline-offset: 4px;
	color: inherit;
}

h2 a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

*:focus-visible {
	outline: 3px solid var(--color-neutral-strong);
	outline-offset: 4px;
	transition: all 0.15s ease-in-out;
}

@media print {
	:root {
		--color-neutral-weak: white;
		--color-neutral-medium: var(--color-stone-900);
		--color-neutral-strong: var(--color-stone-900);
	}
	body {
		max-width: none !important;
		width: 100% !important;
		margin: 0;
		font-size: 10pt !important;
		line-height: 1.4;
	}
	header {
		break-inside: avoid;
		break-after: avoid;
		margin-bottom: 1rem;
	}
	h1 {
		font-size: 20pt !important;
		margin: 0 !important;
		break-after: avoid;
	}

	h2 {
		font-size: 14pt !important;
		margin: 0 !important;
		break-after: avoid;
	}

	h3 {
		font-size: 11pt !important;
		margin: 0 !important;
		break-after: avoid;
	}

	article,
	.job-meta,
	li {
		break-inside: avoid;
	}

	ul {
		margin-top: 0 !important;
	}

	p,
	li {
		margin: 0 !important;
		padding: 0 !important;
		orphans: 3;
		widows: 3;
	}

	footer p {
		display: none;
	}

	footer a::after {
		content: none !important;
	}

	footer a span {
		display: none;
	}

	footer a[data-url]::before {
		content: attr(data-url);
		font-size: 1em;
	}
}