/* Shared site header and breadcrumbs for the static pages (blog, study kit).
   Used by every page, including home and About: a dark strip with the
   logo centered, a green rule underneath, pinned to the top while scrolling. */
:root {
  --site-header-h: 79px; /* 12px + 52px logo + 12px + 3px rule */
  /* Page width shared with the home page: full width up to 1440px, gutters grow with the screen. */
  --page-max: 1440px;
  --gutter: clamp(16px, 4vw, 56px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  background-color: #101010;
  border-bottom: 3px solid #60d937;
}

.site-header a { display: block; line-height: 0; }
.site-header img { height: 52px; display: block; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font: 500 14px/1.4 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #555555;
}
.crumbs a { color: #0f6b00; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { color: #9a9a9a; }
.crumbs [aria-current] { color: #555555; }