/* ============================================================
   NiKAL STUDiO — shared toolbar
   Loaded as-is by BOTH the studio landing (../index.html) and every
   digito subpage (../digito/*.html), so the top bar is genuinely the
   same CSS in both places — not two hand-matched copies. Edit here
   once; both sites pick it up.

   Self-contained on purpose: colors are hardcoded, not referenced
   from either page's own token system (--bg-void on the landing,
   --ink/--bg on digito), since this file has no idea which one is
   loaded alongside it. `nk-`-prefixed classes so nothing here can
   collide with digito's own .brand/.wordmark/.dot (its "digito."
   identity, used in its hero/footer too — those stay digito's own).

   Needs on the page: 'Josefin Sans' 600, 'Jost' 400, 'Space Mono' 400
   loaded via the page's own Google Fonts <link>.
   ============================================================ */

.nk-toolbar {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(14px);
  /* Near-opaque rather than the landing's original .74: this bar sits over
     an always-dark page on the landing, but over digito's own page, which
     can be its *light* Notebook theme — at .74 that bled through and washed
     the bar out. This value reads as the same dark bar in both places. */
  background: rgba(5, 7, 15, .94);
  border-bottom: 1px solid rgba(200, 228, 255, .08);
}
/* Scoped to .wrap *inside* .nk-toolbar, so this doesn't touch the
   generic .wrap utility either page may use elsewhere on the same page. */
.nk-toolbar .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nk-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.nk-brand svg { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 0 5px rgba(150, 200, 255, .6)); }
.nk-wordmark {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .15em;
  color: #EAF3FF;
  white-space: nowrap;
}
.nk-wordmark i { font-style: normal; color: #8FC4FF; }

.nk-crumb { color: rgba(200, 228, 255, .3); font-size: 15px; flex: none; }

.nk-links { display: flex; align-items: center; gap: 26px; }
.nk-link {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  color: #a9bad6;
  text-decoration: none;
  white-space: nowrap;
}
.nk-link:hover { color: #EAF3FF; }

/* Any pill-shaped toggle in the bar — the landing's EN/FR switch, and
   digito's EN/FR + light/dark switches. Same look, same class. */
.nk-pill {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  color: #8FC4FF;
  background: transparent;
  border: 1px solid rgba(200, 228, 255, .2);
  border-radius: 20px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nk-pill:hover { border-color: rgba(200, 228, 255, .55); color: #EAF3FF; }

@media (max-width: 640px) {
  .nk-wordmark { display: none; }
}
@media (max-width: 720px) {
  .nk-link { display: none; }
}