styles.css

/* Institutional, accessible stylesheet */
:root{
  --navy:#0b3d91;
  --muted:#6b7280;
  --card-border:#e6eef8;
  --max-width:1100px;
}
html,body{height:100%;}
body{font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;line-height:1.5;color:#0b2236;background:#fff;margin:0}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{border-bottom:1px solid var(--card-border);background:#fff}
.brand{font-family:Georgia, 'Times New Roman', serif;color:var(--navy);margin:0;padding:0.5rem 0}
.main-nav ul{list-style:none;padding:0;margin:0;display:flex;gap:1rem}
.main-nav a{color:var(--navy);text-decoration:none;font-weight:600}
.hero{padding:2rem 0;border-bottom:1px solid var(--card-border)}
.hero h2{font-family:Georgia, serif;font-size:1.75rem;margin:0;color:var(--navy)}
.subtitle{color:var(--muted);margin-top:0.25rem}
.card-section{padding:1rem 0;border-bottom:1px solid var(--card-border)}
.cards .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.data-card{border:1px solid var(--card-border);padding:1rem;border-radius:4px;background:#fff}
.data-card h4{margin:0 0 0.25rem 0;color:var(--navy);font-family:Georgia,serif}
.stat{font-size:1.5rem;font-weight:700;margin:0.25rem 0;color:#102a43}
.muted{color:var(--muted);font-size:0.9rem}
.chart-section{padding:1rem 0}
canvas{max-width:100%;height:300px}
.site-footer{border-top:1px solid var(--card-border);padding:1rem 0;margin-top:2rem;color:var(--muted)}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{border:1px solid var(--card-border);padding:0.5rem;text-align:left}
.regions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.mini-chart{height:120px}
@media (max-width:600px){.main-nav ul{flex-wrap:wrap}}