:root {
    --blue: #2563eb;
    --blue-light: #3b82f6;
}

body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .display { font-family: 'Bricolage Grotesque', sans-serif; }

/* Smooth page transitions */
main { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Prose styling for page content */
.prose h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; }
.prose h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.75rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p  { line-height: 1.8; margin-bottom: 1rem; color: #374151; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; line-height: 1.7; }
.prose a  { color: var(--blue); text-decoration: underline; }
.prose a:hover { color: var(--blue-light); }
.prose blockquote { border-left: 4px solid var(--blue); padding-left: 1rem; margin: 1.5rem 0; color: #6b7280; font-style: italic; }
.prose code { background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.875em; }
.prose pre { background: #111827; color: #f9fafb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }

/* Nav active state */
.nav-active { color: var(--blue); font-weight: 500; }