header.html

<div id=site-header class="border-b border-zinc-800/60 bg-zinc-950 sticky top-0  flex flex-col items-center justify-center">

  <nav id="nav-header" class="w-full max-w-5xl mx-auto overflow-x-auto px-4 md:px-6 py-4 flex items-center justify-center mt-1">
    <a href="/" class="flex items-center mr-6 no-underline">
    <span class="site-title font-bold tracking-wide text-zinc-100">NODE_ZERO</span>
    </a>
      <span>&nbsp; &spadesuit; &nbsp;</span>
      <ul class="nav-links flex gap-4 text-sm text-zinc-100 items-center" style="list-style:none; margin:0; padding:0;">
      <li><a href="/primer/index.html">Portal</a></li>
      <li><a href="/artefacts/index.html">Artefacts</a></li>
      <li><a href="/stories/index.html">Stories</a></li>
      <li><a href="/the-blue/index.html">The Blue</a></li>
      <li><a href="/signals/index.html">Signals</a></li>
      <li><a href="/dev/index.html">dev</a></li>
      <li>
        <div id="carrier_detection"
          class="flex flex-row items-center gap-2 rounded-full border border-zinc-700/60 bg-zinc-900/40 px-3 py-1 text-xs uppercase tracking-wider text-zinc-300 relative group">
          <span id="carrier_status_light" class="h-4 w-4 rounded-full animate-pulse bg-red-500" aria-label="Carrier status light">&#8226;</span>
          <button id="carrier_connect_btn"
            class="px-2 py-1 rounded bg-emerald-600 text-white text-xs font-semibold hover:bg-emerald-700 transition"
            style="margin-left:0.5em;">Connect Wallet</button>
          <span id="carrier_poh_badge" class="hidden" title=""><svg width="18" height="18" viewBox="0 0 20 20" fill="none" class="inline align-middle"><circle cx="10" cy="10" r="9" stroke="#34d399" stroke-width="2" fill="none"/><path d="M10 6.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5c2.21 0 4 1.12 4 2.5V16H6v-2c0-1.38 1.79-2.5 4-2.5z" fill="#34d399"/></svg></span>
          <span id="carrier_nft_badge" class="hidden" title=""><svg width="18" height="18" viewBox="0 0 20 20" fill="none" class="inline align-middle"><rect x="3" y="7" width="14" height="8" rx="2" stroke="#fbbf24" stroke-width="2" fill="none"/><path d="M7 11l2 2 4-4" stroke="#fbbf24" stroke-width="2" fill="none"/></svg></span>
          <span id="carrier_status_message" class="ml-2 text-xs text-red-400" aria-live="polite" aria-atomic="true"></span>
        </div>
        
      </li>

    </ul>
    <!-- carrier_status_message now inside carrier_detection for proper horizontal layout -->
  </nav>