/* topbar.css — THE header. One component, one definition, every page.

   WHY THIS FILE EXISTS. Until 2026-08-21 habitat had two headers: the door and the
   reader used `.top` from system.css; the other nineteen pages used `.topbar` from
   site.css. Measured at vw=1660 the two differed on eight properties at once —
   height 67.4 vs 71.4, padding 0 vs 17.6/32, inner max-width 864 centred vs full
   bleed, wordmark x 415 vs 423, mark as <img> vs inline <svg>, nav weight 400 vs
   500, five flat items vs four plus a submenu, and the first item labelled
   "Corpora" on one and "Cases" on the other. Crossing a single link changed all
   eight, and the item you had just clicked did not exist on the page you landed on.

   RULED: every page maps to the door, cream throughout.

   It is a SEPARATE FILE rather than system.css because the nineteen legacy pages
   are styled by palette.css + site.css, and system.css also sets `*`, `body`,
   `h1,h2,h3` and `b,strong`. Loading all of it to get nine header rules would
   restyle every heading on the site. This carries the nine rules and only the
   tokens they need, so it composes with either stylesheet layer.

   Tokens are declared with fallbacks: on the door and the reader system.css has
   already defined them and these are inert; on the legacy pages, where palette.css
   defines NONE of them, the fallbacks are what render. Same values either way.

   Anything that is not the header does not belong in here. */

.top{
  /* the header's own token layer — inert where system.css already set them */
  --tb-cream:  var(--g-2,   #f3ead6);
  --tb-terra:  var(--g-5,   #803c18);
  --tb-ink:    var(--ink,   #2a2118);
  --tb-ink-2:  var(--ink-2, rgba(42,33,24,.78));
  --tb-accent: var(--a-2,   #8f4319);
  --tb-line:   var(--line,  rgba(42,33,24,.16));
  --tb-gap:    var(--s-5,   1.5rem);
  --tb-rowgap: var(--s-2,   .5rem);
  --tb-sheet:  var(--sheet, 864px);
  --tb-sans:   var(--sans,  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  background: var(--tb-terra);
}
.top--light{background:var(--tb-cream);border-bottom:1px solid var(--tb-line)}

/* .top.top--light is (0,3,1) so it beats the base .top nav a (0,2,1) declared
   later. Same-specificity source order was making the links cream on cream. */
.top.top--light .wordmark{color:var(--tb-ink)}
.top.top--light nav a{color:var(--tb-ink-2)}
.top.top--light nav a:hover,
.top.top--light nav a[aria-current]{color:var(--tb-accent)}

.top-in{max-width:var(--tb-sheet);margin:0 auto;padding:1.1rem var(--tb-gap);
  display:flex;align-items:center;gap:var(--tb-gap)}

.wordmark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--tb-sans);
  font-size:1.22rem;font-weight:600;letter-spacing:-.01em;color:var(--tb-cream);
  text-decoration:none}
.wordmark img,.wordmark svg{width:1.6rem;height:1.6rem;display:block;flex:0 0 auto}

.top nav{margin-left:auto;display:flex;gap:1.5rem;flex-wrap:wrap;row-gap:var(--tb-rowgap)}
.top nav a{font-size:.875rem;color:rgba(243,234,214,.80);text-decoration:none;
  padding:.5rem .3rem;margin:-.5rem -.3rem}
.top nav a:hover,.top nav a[aria-current]{color:var(--tb-cream)}

/* Narrow viewports (2026-08-26): the flex-wrap fallback collided the
   wordmark with the wrapping nav on phones. Below 560px the header stacks —
   wordmark row, then the nav full-width beneath it, tidy gaps. One header,
   both origins; keep the two copies identical. */
@media (max-width: 560px){
  .top-in{flex-wrap:wrap;row-gap:.55rem;padding:.9rem var(--tb-gap)}
  .wordmark{flex:1 1 auto}
  .top nav{margin-left:0;flex-basis:100%;gap:1.1rem;row-gap:.45rem}
}