/* ======================================================================
   NAV TRIAL — Space Mono uppercase nav links.
   Shared by /preview/ (home) and /preview/knowledge/, and by
   /preview/about/ once it migrates.

   Loaded AFTER preview-system.css. Deliberately NOT part of
   preview-system.css: this is still a trial. /preview/buzz-voice/ and
   /preview/buzz-brain/ use the plain system nav with .nav-cta instead,
   so there is no agreement yet to lock it.

   If the trial is adopted, fold this into preview-system.css and delete
   the file. If it is dropped, delete the file and its <link> tags.

   Requires the Space Mono webfont in the page's font <link>.

   SCOPE: THE MONO IS FOR NAVIGATION LINKS ONLY (2026-10-14, Sandeep).
   "Log in" is a bordered chip sitting beside a Nunito button, and mono
   bold uppercase inside a chip read as a different system from the
   button next to it. It takes the body font instead. Do not put the
   mono back on .login.

   CASE: the chip is uppercased in CSS, not in the markup — the markup
   stays "Log in" so the accessible name and the page source read
   normally. Nunito caps need tracking that lowercase does not, hence
   the .06em; without it the letters crowd at this size.

   SPECIFICITY NOTE: the logo rule is .nav .logo img, not .logo img.
   preview-system.css sets .nav .brand img{height:26px}, and the pages
   carry class="logo brand" on the same anchor, so an unscoped .logo img
   loses and the override silently does nothing. Same reason .login
   needs the .navr prefix — the system sets .navr .login{font-size}.
   Keep both prefixes.
   ====================================================================== */

.nav .logo img{height:32px;width:auto;display:block}
.logo-fb{font-family:var(--display);font-size:25px;color:var(--action);letter-spacing:-.5px}

/* The trial: nav links only. */
.navmid a{font-family:'Space Mono',ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.1em;font-weight:400;font-size:12px;
  color:var(--muted)}
.navmid a:hover,.navmid a.on{color:var(--sky);text-decoration:none}

/* Body font, matching the button it sits beside. Uppercased here, not in
   the markup. */
.navr .login{font-family:var(--body);font-size:.8rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
  border:1.5px solid var(--line);border-radius:var(--r-chip);
  padding:.6em 1.15em;background:rgba(255,255,255,.88);color:var(--ink)}
.navr .login:hover{border-color:var(--sky);color:var(--sky);text-decoration:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .navr .login{
  background:rgba(24,40,54,.88)}}
:root[data-theme="dark"] .navr .login{background:rgba(24,40,54,.88)}