/* site-header.css — one header for every page.
 *
 * Before this file there were four of them. index.html had .site with the
 * logo mark; app, os, economy, webpi, papers and legal had .masthead with a
 * text wordmark, defined separately in five different stylesheets; docs.html
 * and join.html had .bar with an <img src="/logo.svg"> -- the March logo, a
 * different drawing from the one the homepage uses; and the blog had a fourth
 * shape whose brand pointed at /blog/ rather than /. The nav link sets did not
 * match either: seven links on the homepage, six on the masthead pages with no
 * Blog and no Home, five on docs and join with no App and no OS, and the blog
 * spelling Webπ as "Webpi".
 *
 * WHY A FILE OF ITS OWN, rather than folding this into design.css. docs.html
 * and join.html do not load design.css -- that is the actual reason they grew
 * a third header in the first place. Adding design.css to them now would pull
 * in body type, link colour and every component class at once, on two pages
 * whose layout is entirely their own. A file scoped to the header is the only
 * change that reaches all thirteen pages without touching anything else.
 *
 * It is deliberately written against design.css's tokens with fallbacks, so
 * the two pages that do not load design.css still get the right colours.
 */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  padding: 16px var(--pad-x, clamp(20px, 6vw, 88px));
  border-bottom: 1px solid var(--rule, #C7D1CF);
  background: var(--st-0, #EEF1F0);
}

.site-head__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--code, "SF Mono", Menlo, Consolas, monospace);
  font-size: 15px;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--bone, #101A1C);
  text-decoration: none;
  border-bottom: 0;
}
.site-head__brand:hover { color: var(--flux, #14606C); }

/* Width and height are also set as attributes on the <img> so the row does not
   reflow while the SVG loads. */
.site-head__mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
}

/* The section name after the wordmark: "centram / app". Quieter than the mark
   itself -- it says where you are, it is not a second brand. */
.site-head__where {
  font-style: normal;
  font-weight: 400;
  color: var(--bone-3, #54605F);
}

.site-head__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

/* Navigation is not a state, so it does not get the accent (design.css's rule,
   kept). Colour here is spent on where you are, and on hover. */
.site-head__nav a {
  font-family: var(--code, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--bone-2, #3D4A49);
  text-decoration: none;
  border-bottom: 0;
}
.site-head__nav a:hover { color: var(--flux, #14606C); }

/* The page you are on. aria-current is the markup that already says so, so it
   is what the style hangs off -- no second class to keep in sync with it. */
.site-head__nav a[aria-current="page"] {
  color: var(--bone, #101A1C);
  font-weight: 600;
}

/* "Webπ" is a mark, not a word. Wherever a nav uppercases its links, the pi
   becomes Π and reads as an N at this size; this keeps it lowercase. */
.site-head__nav i { font-style: normal; text-transform: none; }

@media (max-width: 640px) {
  .site-head { gap: 12px 18px; }
  .site-head__nav { gap: 6px 14px; }
  .site-head__nav a { font-size: 11.5px; }
}