/* Shared site chrome — loaded by every page (base.html). Page-specific styles live in each
   template's {% block styles %}; the article/prose chrome for content pages is in content.css. */
:root {
  color-scheme: light;
  --bg: #fbfaf7; --paper: #ffffff; --ink: #172018; --muted: #5f6b61;
  --soft: #eef2ed; --line: #dfe6de; --green: #17683d; --green-soft: #e9f5ee;
  --code-bg: #f4f7f4; --code: #145d39; --amber: #9a6a12; --amber-soft: #f7efdc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--green); text-underline-offset: 3px; }
/* ONE frame width for the header, footer, and homepage sections on every page - so the nav and
   footer never shift horizontally between pages. Long-form article pages narrow only their reading
   column (content.css `article`), not this frame. */
.wrap { width: min(900px, calc(100vw - 36px)); margin: 0 auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* header / nav */
.site-header {
  border-bottom: 1px solid var(--line); background: rgba(251,250,247,.92);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10;
}
.site-header nav { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 20px; }
.wordmark { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 17px; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.wordmark .dot { color: var(--green); }
.navlinks { display: flex; align-items: center; gap: 22px; font-size: 14px; flex-wrap: wrap; justify-content: flex-end; }
.navlinks a { color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 500; }
.navlinks a:hover { color: var(--green); }

/* code */
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--code); background: var(--code-bg); border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px; }
code { padding: 2px 5px; }
pre { padding: 16px; overflow-x: auto; line-height: 1.5; }
pre code { border: 0; padding: 0; background: transparent; }

/* button */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 11px 20px; border: 1px solid var(--green); border-radius: 10px; color: #fff;
  background: var(--green); text-decoration: none; font-weight: 650; font-size: 15px; cursor: pointer;
}
.button.secondary { color: var(--green); background: var(--paper); }

/* footer */
.site-footer { padding: 40px 0 54px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; margin-top: 30px; }
.site-footer .footrow { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 820px) {
  .navlinks { gap: 13px; }
  .site-header nav { min-height: 56px; }
}