:root {
	--accent: #4f46e5;
	--text: #18181b;
	--muted: #71717a;
	--faint: #a1a1aa;
}

* {
	box-sizing: border-box;
}

html {
	background: #f4f4f5;
	color: var(--text);
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	min-height: 100vh;
	line-height: 1.6;
}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	max-width: 42rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.site-header {
	padding: 1.5rem 0;
}

.nav {
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
}

.nav a {
	text-decoration: underline;
}

.main {
	padding-bottom: 4rem;
}

.page-header {
	margin-bottom: 3rem;
}

.page-header h1 {
	margin: 0.5rem 0 0;
	font-size: 1.875rem;
	font-weight: 600;
}

.intro {
	margin: 1rem 0 0;
	max-width: 32rem;
	color: var(--muted);
}

.empty {
	color: var(--faint);
}

.post-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.post-card {
	display: block;
}

.post-card time {
	font-size: 0.75rem;
	color: var(--faint);
}

.post-card h2 {
	margin: 0.25rem 0 0;
	font-size: 1rem;
	font-weight: 600;
}

.post-card p {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--muted);
}

.post-header {
	margin-bottom: 2rem;
}

.post-header time {
	font-size: 0.75rem;
	color: var(--faint);
}

.post-header h1 {
	margin: 0.5rem 0 0;
	font-size: 1.5rem;
	font-weight: 600;
}

.post-description {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--muted);
}

.post-footer {
	margin-top: 3rem;
}

.post-footer a {
	font-size: 0.875rem;
	color: var(--faint);
}

.prose {
	color: #3f3f46;
}

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose h2,
.prose h3 {
	margin: 2rem 0 0.5rem;
	font-weight: 600;
	color: var(--text);
}

.prose h2 {
	font-size: 1.25rem;
}

.prose h3 {
	font-size: 1.125rem;
}

.prose p,
.prose ul,
.prose ol {
	margin: 1rem 0 0;
}

.prose ul,
.prose ol {
	padding-left: 1.5rem;
}

.prose li {
	margin-top: 0.25rem;
}

.prose a {
	color: var(--accent);
}

.prose code {
	font-size: 0.875em;
}

.prose pre {
	margin: 1rem 0 0;
	overflow-x: auto;
}

.prose blockquote {
	margin: 1rem 0 0;
	color: var(--muted);
}

.prose img {
	max-width: 100%;
	height: auto;
}