:root {
  --font-rye: "Rye", serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg-page: #fdf8f0;
  --bg-nav: #ffffff;
  --border: #e0d4bc;
  --accent: #8a6a3a;
  --meta: #a08050;
  --tag-bg: #f5ece0;
  --tag-text: #7a5830;
  --nav-dot: #d9c9a8;
  --muted: #999;
  --excerpt: #666;
  --body: #000000;
  --heading: #1a1a1a;
  --prose-size: 1.0625rem; /* 17px at 16px root — one step above 16px */
  --prose-line-height: 1.5;
  --toc-inactive: #888;
}

.writing-page,
.site-page {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--body);
  margin: 0;
}

.site-page.home {
  background: var(--bg-page);
}

/* Tight, natural word spacing like Projects page abstracts */
.writing-post-excerpt,
.article-body p,
.article-body li,
.article-body dd,
.article-body dt,
.article-body .warning,
.article-body .proof {
  font-family: var(--font-body);
  letter-spacing: -0.015em;
  word-spacing: -0.04em;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  font-feature-settings: normal;
  font-variation-settings: "wght" 400, "opsz" 18;
  line-height: var(--prose-line-height);
  text-rendering: optimizeLegibility;
}

.writing-page a:link,
.writing-page a:visited,
.site-page a:link,
.site-page a:visited {
  color: inherit;
}

.writing-page a:hover,
.site-page a:hover {
  color: inherit;
}

.writing-page .nav-links a:hover,
.writing-page .nav-brand:hover,
.writing-page .article-breadcrumb:hover,
.writing-page .meta-author:hover,
.writing-page .writing-post-title a:hover,
.site-page .nav-links a:hover,
.site-page .nav-brand:hover {
  color: var(--accent);
}

/* Floating pill nav */
.nav-shell {
  display: flex;
  justify-content: center;
  padding: 24px 24px 0;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 2.25rem;
  background: var(--bg-nav);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  max-width: calc(100vw - 48px);
}

.nav-brand {
  font-family: var(--font-rye);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--heading);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-brand:hover,
.nav-brand.active {
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
  font-weight: 600;
}

.nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nav-dot);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .site-nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
  }

  .nav-links {
    justify-content: center;
  }

  .nav-brand {
    font-size: 1.25rem;
  }

  .nav-links a {
    font-size: 1rem;
  }
}

@media (max-width: 420px) {
  .nav-shell {
    padding: 16px 12px 0;
  }

  .site-nav {
    width: 100%;
    gap: 10px;
    padding: 12px 16px;
    max-width: calc(100vw - 24px);
  }

  .nav-links {
    justify-content: center;
    gap: 8px 12px;
  }

  .nav-dot {
    display: none;
  }

  .nav-brand {
    font-size: 1.125rem;
    text-align: center;
  }

  .nav-links a {
    font-size: 0.95rem;
  }
}