/* Shared site header, used by index.html and all example pages.
   Single source of truth: edit here + header.js, every page updates. */
site-header { display: block; }
/* No bar chrome (no background fill, no border). The header sits on the page
   background and aligns to the same .wrap container as the hero, so it reads as
   the top of the page rather than a separate navbar. */
.site-header { background: transparent; }
.site-header .nav { display: flex; align-items: center; gap: 22px; height: 64px; }
.site-header .brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 500; letter-spacing: -0.02em; font-family: var(--mono);
  color: var(--ink);
}
/* Animated loop mark: two curved strokes that draw in, hold, then fade,
   offset by half a cycle so one is always emerging as the other clears. */
.site-header .brand .loop { width: 18px; height: 18px; display: block; overflow: visible; }
.site-header .brand .loop .arc {
  fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  animation: loopArc 2.6s ease-in-out infinite;
}
.site-header .brand .loop .loop-b { animation-delay: -1.3s; }
@keyframes loopArc {
  0%      { stroke-dashoffset: 1; opacity: 0; }
  22%     { stroke-dashoffset: 0; opacity: 1; }   /* draw in + reach full */
  55%     { stroke-dashoffset: 0; opacity: 1; }   /* hold */
  80%     { stroke-dashoffset: 0; opacity: 0; }   /* fade out (still drawn) */
  80.01%  { stroke-dashoffset: 1; }               /* reset dash while hidden */
  100%    { stroke-dashoffset: 1; opacity: 0; }
}
.site-header .spacer { flex: 1; }
.site-header .nav-links { display: flex; align-items: center; gap: 26px; }
.site-header .nav-link {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  text-decoration: none; transition: color .15s;
}
.site-header .nav-link:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .site-header .brand .loop .arc { animation: none; opacity: 1; stroke-dashoffset: 0; }
}