/* nav.css — ONE nav, shared by every page.

   It lives in its own file because it shipped three different ways: the home
   page got a fresh `.chrome`, the spellbook kept the original's `.site` with
   Cormorant italic, and the tarot page had a third `.site` with different
   links and different words. Three pages, three navs, and each one looked
   deliberate on its own screen.

   A shared component cannot drift. The sub-pages carry their own inline styles
   for everything else, but the one element that has to be identical across
   rooms is now a file they all link, not a pattern they each re-implement.

   Governed by docs/BUILD-CONTRACT.md. No hex literals: every colour is a token. */

.chrome {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-5) var(--margin);
  color: var(--chalk);
  pointer-events: none;
  /* A scrim that is absent over the hero plate and arrives once the page has
     scrolled — so the atmosphere is never covered, and the nav never has to
     compete with body copy for legibility. --ground, so §1a holds. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ground) 92%, transparent),
    transparent);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

/* Lit once the hero is behind you. home.js toggles this; the sub-pages have no
   hero to wait for, so they carry `is-lit` in the markup from the start. */
.chrome.is-lit { opacity: 1; }
.chrome a { pointer-events: auto; }

.chrome__brand {
  font-family: var(--display);
  font-variation-settings: "opsz" 14, "wght" 500, "SOFT" 10, "WONK" 0;
  font-size: .875rem;
  letter-spacing: .16em;
  color: var(--chalk);
  text-decoration: none;
}

.chrome__nav {
  display: flex;
  gap: var(--s-6);
  font-family: var(--mono);
  font-size: .7875rem;
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
}
.chrome__nav a { color: var(--pewter); text-decoration: none; }
.chrome__nav a:hover { color: var(--chalk); }

@media (max-width: 899px) {
  .chrome { padding: var(--s-4) var(--margin); }
  .chrome__nav { gap: var(--s-5); font-size: .6875rem; }
}