/* Site header, shared by every page: build.py inlines it into index.html; the field-note pages link /header.css.
     The header markup lives once, between the shared-header markers in index.src.html. */
  header.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); }
  header.nav::after { content: ""; display: block; height: 4px; background: var(--brand); }
  .hdr-pulse { position: absolute; left: 0; right: 0; bottom: -7px; height: 18px; overflow: hidden; pointer-events: none; z-index: 2; }
  /* a live monitor trace: a bright pen draws the beat as it travels, with a fading trail behind it */
  .hdr-pulse svg { position: absolute; left: 0; top: 0; height: 18px; overflow: visible; }
  .hdr-pulse path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
  /* the dash pattern and its movement are set by the script in the shared header, from the real path length */
  .hdr-pulse .pen { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 0 99999; filter: drop-shadow(0 0 4px #fff); }
  .hdr-pulse .trail { stroke: rgba(255,255,255,.55); stroke-width: 1.6; stroke-dasharray: 0 99999; }
  @media (prefers-reduced-motion: reduce) { .hdr-pulse { display: none; } }
  header.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
  .brand img { display: block; height: 58px; width: auto; }
  /* own font size and no wrapping, so the header measures the same whatever the page's body text size */
  nav { font-size: 15px; line-height: 1.6; white-space: nowrap; }
  nav a { color: var(--ink-2); text-decoration: none; margin-left: 26px; font-size: 15px; font-weight: 500; }
  nav a:hover { color: var(--passion); }
  .nav-pulse svg { width: 20px; height: 10px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: var(--passion); stroke-width: 2; stroke-linejoin: round;
    stroke-dasharray: 40; animation: navbeat 2.4s ease-in-out infinite; }
  @keyframes navbeat { 0% { stroke-dashoffset: 40; } 50%, 100% { stroke-dashoffset: 0; } }
  nav a.btn-sm { background: var(--passion); color: #fff; padding: 9px 18px; border-radius: 999px; }
  nav a.btn-sm:hover { background: #a01a26; color: #fff; }
  /* narrower screens drop links rather than wrap: Field notes first, then What's breaking? */
  @media (max-width: 1300px) { nav a.nav-notes { display: none; } }
  @media (max-width: 1180px) { nav a[data-from="nav"] { display: none; } }
  @media (max-width: 1000px) and (min-width: 761px) { nav a { margin-left: 16px; font-size: 14px; } }
  @media (max-width: 760px) {
    header.nav .wrap { height: 68px; }
    .brand img { height: 38px; }
    nav a:not(.btn-sm) { display: none; }
    nav a.btn-sm { white-space: nowrap; padding: 10px 14px; font-size: 14px; margin-left: 12px; }
    nav .jump { display: inline-block; vertical-align: middle; }
    nav .jump .jump-list a { display: block; margin: 0; padding: 12px 14px; font-size: 16px; color: var(--ink, #14152b); border-radius: 10px; }
  }

  /* phones: a sections menu, because the header links drop away there */
  .jump { display: none; position: relative; margin-left: 10px; }
  .jump summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--line, #e4e5f0); background: #fff; color: var(--ink, #14152b); }
  .jump summary::-webkit-details-marker { display: none; }
  .jump summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .jump[open] summary { background: var(--night, #10123a); color: #fff; border-color: var(--night, #10123a); }
  .jump-list { position: absolute; right: -4px; top: 50px; min-width: 220px; display: flex; flex-direction: column; padding: 8px;
    background: #fff; border: 1px solid var(--line, #e4e5f0); border-radius: 16px; box-shadow: 0 18px 40px rgba(16,18,58,.18); white-space: normal; }
  nav .jump .jump-list a:active, nav .jump .jump-list a:hover { background: #f3f4fb; color: var(--passion, #bc1f2d); }