/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
html { font-family: var(--font-body); font-size: 16px; line-height: 1.6; scroll-behavior: smooth; }
body { background-color: var(--color-paper); color: var(--color-ink); min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-4); color: var(--color-ink); }
h1 { font-size: var(--text-5xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-4xl); letter-spacing: -0.01em; border-bottom: var(--border-thick); padding-bottom: var(--space-2); margin-top: var(--space-12);}
h3 { font-size: var(--text-2xl); margin-top: var(--space-8);}
p { margin-bottom: var(--space-4); }
strong, b { font-weight: 600; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
pre { background: var(--color-canvas); border: var(--border-thin); padding: var(--space-4); overflow-x: auto; margin-bottom: var(--space-4); }

/* Navigation */
.site-nav { background: var(--color-canvas); border-bottom: var(--border-thin); position: sticky; top: 0; z-index: 100; }
.nav-container { max-width: var(--max-width); margin: 0 auto; padding: var(--space-4); display: flex; justify-content: space-between; align-items: center; }
.brand-logo { display: flex; align-items: baseline; gap: var(--space-2); text-decoration: none !important; }
.logo-mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--color-canvas); background: var(--color-cobalt); padding: 0 var(--space-2); }
.logo-text { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); letter-spacing: -0.01em; }
.nav-links { display: flex; gap: var(--space-6); }
.nav-link { color: var(--color-slate); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.nav-link:hover, .nav-link.active { color: var(--color-ink); text-decoration: none; border-bottom: 2px solid var(--color-cobalt); padding-bottom: var(--space-1); }

/* Layouts */
#main-content { flex: 1; }
.container { max-width: var(--max-width); margin: 0 auto; padding: var(--space-8) var(--space-4); }
.content-wrapper { max-width: var(--content-width); margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-6); }
.sidebar-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-12); align-items: start; }

/* Components */
.card { background: var(--color-canvas); border: var(--border-thin); padding: var(--space-6); }
.card-title { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-2); }
.callout { background: var(--color-cobalt-light); border-left: 4px solid var(--color-cobalt); padding: var(--space-6); margin-bottom: var(--space-6); }
.callout p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-8); font-size: var(--text-sm); }
th, td { padding: var(--space-3); text-align: left; border-bottom: var(--border-thin); }
th { font-weight: 600; font-family: var(--font-mono); background: var(--color-canvas); }

/* Footer */
.site-footer { background: var(--color-canvas); border-top: var(--border-thick); padding: var(--space-12) 0 var(--space-6); margin-top: var(--space-16); }
.footer-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-12); }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); display: block; margin-bottom: var(--space-4); }
.site-footer h4 { font-family: var(--font-body); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-slate); margin-bottom: var(--space-4); border-bottom: none; padding-bottom: 0; margin-top: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--color-ink); }
.footer-bottom { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--color-slate); border-top: var(--border-thin); padding-top: var(--space-6); }

/* Homepage specific */
.hero { padding: var(--space-16) 0; border-bottom: var(--border-thin); }
.hero h1 { font-size: var(--text-6xl); max-width: 20ch; }
.hero-lead { font-size: var(--text-2xl); color: var(--color-slate); max-width: 30ch; margin-bottom: var(--space-8); }
.section-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--border-thick); padding-bottom: var(--space-2); margin-bottom: var(--space-8); }
.section-header h2 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; margin-top: 0; }