/* BASILEUS · unified system bar
   One fixed top nav shared across every surface (site + app). Self-contained:
   its own citadel-palette values + Space Grotesk, so it looks identical no
   matter which page's base CSS hosts it. Height: var(--sysnav-h). */

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/space-grotesk.woff2') format('woff2');
  font-display: swap; font-weight: 300 700;
}

:root { --sysnav-h: 46px; }

.sysnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  box-sizing: border-box;
  height: var(--sysnav-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 0 clamp(12px, 3vw, 24px);
  background: #141414;               /* --slate */
  border-bottom: 1px solid #3a3a3a;  /* --line */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);  /* metal edge */
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sysnav * { box-sizing: border-box; }

.sysnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #f1e7d6; flex: 0 0 auto; }
/* Chrome / metallic B — the sanctioned sheen treatment (spec 027). */
.sysnav-mark {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(168deg, #e2e5e7 0%, #a6abae 38%, #d2d6d8 54%, #82878b 78%, #bcc1c4 100%);
  color: #0a0a0a; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.sysnav-word { display: flex; flex-direction: column; line-height: 1; }
.sysnav-word b { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.sysnav-word small { margin-top: 4px; color: #8a8a8a; font-size: 8px; letter-spacing: 0.18em; }

.sysnav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sysnav-links::-webkit-scrollbar { display: none; }
.sysnav-link {
  position: relative;
  color: #8a8a8a; text-decoration: none; text-transform: uppercase;
  font-size: 9px; font-weight: 700; letter-spacing: 0.15em; white-space: nowrap;
  padding: 4px 0; transition: color 0.2s cubic-bezier(.22, .8, .22, 1);
}
/* hover-flood underline — grows from the left, the one motion voice */
.sysnav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.24s cubic-bezier(.22, .8, .22, 1);
}
.sysnav-link:hover, .sysnav-link:focus-visible { color: #ffffff; outline: 0; }
.sysnav-link:hover::after, .sysnav-link:focus-visible::after { transform: scaleX(1); }
.sysnav-link.is-active { color: #f1e7d6; }
.sysnav-link.is-active::after { transform: scaleX(1); background: #d9c7aa; }
@media (prefers-reduced-motion: reduce) { .sysnav-link::after { transition: none; } }

@media (max-width: 600px) {
  .sysnav { gap: 14px; }
  .sysnav-word { display: none; } /* just the B mark as home on small screens */
  .sysnav-links { gap: 16px; }
}