/* Minimal reset and box-sizing */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background: #fafafa;
}

/* Single-column container: max-width ~65ch, centered */
.container { width: 100%; max-width: 65ch; margin-inline: auto; padding-inline: 1.25rem; }

/* Header */
.site-header { background: #fafafa; color: #1a1a1a; padding-block: 0.75rem 1rem; }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.site-title { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.site-title:hover { text-decoration: underline; }

/* Nav: horizontal on desktop, toggle on mobile */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a { color: #1a5fb4; text-decoration: none; padding: 0.5rem 0; display: inline-block; min-height: 44px; line-height: 44px; margin: -0.5rem 0; }
.site-nav a:hover, .site-nav a:focus { text-decoration: underline; }

/* Mobile: hamburger toggle (button visible, nav collapsible) */
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #1a1a1a; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.nav-toggle[aria-expanded="true"] { opacity: 0.8; }
@media (max-width: 640px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-toggle[hidden] { display: none !important; }
  .site-nav ul { display: none; width: 100%; flex-direction: column; gap: 0; padding-block: 0.5rem; }
  .site-nav ul.open { display: flex; }
  .site-nav a { min-height: 44px; line-height: 44px; padding-inline: 0; }
}

/* Main content: flex-grow so footer sticks to bottom when content is short */
.main-content { flex: 1; padding-block: 1.5rem 3rem; }
.main-content article { margin: 0; }
.main-content h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-block: 0 0.75em; }
.main-content h2 { font-size: 1.2rem; margin-block: 1.5em 0.5em; }
.main-content p { margin-block: 0 0.75em; }
.main-content ul { margin: 0.5em 0 1em; padding-left: 1.5em; }
.main-content li { margin-bottom: 0.35em; }
.main-content a { color: #1a5fb4; text-decoration: none; }
.main-content a:hover { text-decoration: underline; }

/* Footer */
.site-footer { background: #fafafa; color: #1a1a1a; padding-block: 1.5rem; margin-top: 2rem; }
.site-footer .container { padding-block: 0; }
.site-footer nav ul { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.site-footer nav a { color: #1a5fb4; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .copyright { margin: 0; font-size: 0.9rem; }