/* Shared across every page. This is the single source of truth for the
   topbar, its brand mark, and the nav links — edit here, not per-page,
   so the header can never drift out of sync between pages again. */
:root{
  --paper:#FBFAF6;
  --panel:#F2F0E8;
  --ink:#20241F;
  --ink-soft:#5B6058;
  --line:#D9D4C6;
  --accent:#2F5D50;
  --accent-soft:#DCE8E2;
  --radius:2px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 20px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-brand{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}
.topbar-nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.topbar-nav a{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .15s ease;
}
.topbar-nav a:hover{color:var(--accent);}
.topbar-nav a.current{color:var(--accent);}
@media (max-width:560px){
  .topbar{padding:10px 14px;}
  .topbar-brand{font-size:17px;}
  .topbar-nav{gap:10px;}
  .topbar-nav a{font-size:12px;}
}