/* Blog brand row, shared by the blog home and every post (2026-10-19).
   Consumes site-tokens.css. The landing page's nav in miniature: logo and
   wordmark home, Blog and Pricing, one Get Started Free. Self-contained, so it
   draws the same under blog-index.css and under blog.css. */

.lib-bar {
  box-sizing: border-box;
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-text);
  line-height: 1.4;
}
.lib-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-size: var(--fs-heading); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.lib-brand img { width: 36px; height: 36px; border-radius: var(--r-tile); }
.lib-bar-links { display: flex; gap: 24px; margin-left: auto; }
.lib-bar-links a { color: var(--muted); font-size: var(--fs-secondary); font-weight: 500; text-decoration: none; }
.lib-bar-links a:hover, .lib-bar-links a[aria-current="page"] { color: var(--strong); }
.lib-bar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--cta-blue);
  color: #fff;
  font-size: var(--fs-secondary);
  font-weight: 600;
  text-decoration: none;
}
.lib-bar-cta:hover { background: var(--cta-blue-hover); }
.lib-bar a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-tile); }

@media (max-width: 700px) {
  .lib-bar { padding-top: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 560px) {
  .lib-bar-links { display: none; }
  .lib-bar-cta { margin-left: auto; }
}