/* The root pages (index.html, 404.html). Colors and the footer match
   charles-river/styles.css. */

:root {
  --bg: #fafaf7;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 640px; margin: 0 auto; padding: 56px 24px 64px; }
h1 { margin: 0 0 32px; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.02em; }
a { color: var(--fg); }

/* Project list */
ul { list-style: none; margin: 0; padding: 0; }
li { margin: 0 0 20px; }
li a { text-decoration: none; font-size: 1.1rem; }
li a:hover { text-decoration: underline; }
li p, .note { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* Footer: same as charles-river/styles.css. This page has no border-box
   sizing, so the width is the text column's 640px, less its padding. */
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  width: min(640px, 100% - 48px); margin: 0 auto; padding: 0 0 40px;
  color: var(--muted); font-size: 0.8rem; letter-spacing: 0.02em;
}
.site-footer .links { display: flex; gap: 20px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--fg); }

/* 404 */
.not-found h1 { margin-bottom: 16px; }
.not-found .note { margin: 0; }