/* NARVALIO — persistent site header, shared by every public page.
 *
 * Self-contained on purpose: it relies only on the palette tokens (defined by
 * both app.css and home.css) and never on their layout helpers, so it drops into
 * any page. Every selector is scoped under .site-head because app.css already
 * uses a bare .brand for page <h1> titles — without the scope, the header would
 * inherit a 1.4rem font size and a bottom margin. */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(7,23,38,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head a{color:inherit;text-decoration:none}
.site-head .head-in{
  max-width:1080px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:72px;
}

/* The mark carries the brand, so it is sized here — one place to tune it. */
.site-head .brand{
  display:flex;align-items:center;gap:14px;flex:0 0 auto;
  margin:0;font-size:inherit;font-weight:400;letter-spacing:normal;
}
.site-head .brand svg{width:34px;height:34px;flex:none;color:var(--tusk)}
.site-head .brand .txt{
  font-family:var(--mono);font-size:17px;letter-spacing:.3em;text-indent:.3em;
  color:var(--tusk);white-space:nowrap;
}

.site-head .nav{
  display:flex;align-items:center;gap:26px;
  font-size:13.5px;color:var(--tusk-dim);
}
.site-head .nav-links{display:flex;align-items:center;gap:22px}
.site-head .nav-links a:hover{color:var(--tusk)}
.site-head .nav-links a[aria-current]{color:var(--tusk)}
.site-head .cta{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  border:1px solid var(--glacier);color:var(--glacier);
  padding:9px 16px;border-radius:2px;transition:.2s;white-space:nowrap;
}
.site-head .cta:hover{background:var(--glacier);color:var(--abyss)}

@media(max-width:940px){
  .site-head .nav{gap:18px}
  .site-head .nav-links{gap:16px;font-size:12.5px}
}
/* Narrow screens: the menu stays reachable instead of disappearing. Exactly two
   rows — brand + call to action, then the section links on one scrollable line —
   because a sticky bar that grows to three rows eats a fifth of a phone screen. */
@media(max-width:820px){
  .site-head .head-in{
    flex-wrap:wrap;gap:8px 12px;min-height:0;
    padding:10px 16px 8px;
  }
  /* basis 0 + min-width 0: the nav must not claim the width of its longest row,
     otherwise it is pushed under the brand and the bar grows to three rows. */
  .site-head .nav{flex-wrap:wrap;gap:8px 12px;flex:1 1 0;min-width:0;justify-content:flex-end}
  .site-head .nav-links{
    order:2;flex-basis:100%;justify-content:flex-start;
    gap:16px;font-size:12.5px;
    overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;
    scrollbar-width:none;
  }
  .site-head .nav-links::-webkit-scrollbar{display:none}
  .site-head .cta{order:1;font-size:11px;padding:7px 12px}
}
/* Phones: the mark alone carries the brand, which frees the row for the button. */
@media(max-width:480px){
  .site-head .brand svg{width:30px;height:30px}
  .site-head .brand .txt{display:none}
}