/* The Atlas's top bar, the same on every page. Built like the world switch at the foot (which the user likes): the views
   are words in DM Sans 600, upper case, spaced, gold with a fading underline when chosen; the title is the one serif
   word, STIX Two Text, as the studio's site names things. Needs atlas-fonts.css.

   <header class="atlas-bar">
     <a class="atlas-brand" href="index.html"><span class="atlas-title">The Atlas</span><span class="atlas-sub">a universe of quests</span></a>
     <nav class="atlas-nav" aria-label="Views">
       <a href="compass/index.html" aria-current="page">Compass</a>
       <a href="journey/index.html">Journey</a>
       <a href="data/index.html">Data</a>
     </nav>
     <div class="atlas-tools"><!-- mountInfo({ parent: this }), and on phones the page's "Controls" --></div>
   </header>

   Position is the page's: add .is-fixed for a bar fixed over a full-screen drawing. Measure its height into --atlas-bar
   as before. Below 720px the nav moves to a second row. */

.atlas-bar { --lb-ground: #08080b; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px clamp(12px, 2.4vw, 36px);
  min-height: 64px; padding: 14px 24px 12px; background: var(--lb-ground); color: #fafafa; z-index: 30;
  font: 400 14px/1.2 var(--atlas-sans, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); -webkit-font-smoothing: antialiased; }
.atlas-bar.is-fixed { position: fixed; top: 0; left: 0; right: 0; }
.atlas-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none;
  background: linear-gradient(var(--lb-ground), rgba(8, 8, 11, 0)); }
.atlas-bar:not(.is-fixed) { position: relative; }

.atlas-brand { display: inline-flex; align-items: baseline; gap: 12px; color: inherit; text-decoration: none; white-space: nowrap; }
.atlas-title { font: 400 21px/1 var(--atlas-display, "STIX Two Text", Georgia, serif); letter-spacing: 0.01em; color: #fafafa; }
.atlas-sub { font: 400 12.5px/1 var(--atlas-sans, "DM Sans", sans-serif); color: rgba(250, 250, 250, 0.42); padding-left: 12px;
  border-left: 1px solid rgba(250, 250, 250, 0.16); }
.atlas-brand:hover .atlas-title { color: var(--atlas-accent, #FFD100); }

.atlas-nav { display: flex; align-items: center; justify-self: start; gap: 6px; }
.atlas-nav a { position: relative; padding: 6px 10px 8px; text-decoration: none; white-space: nowrap;
  font: 600 12px/1 var(--atlas-sans, "DM Sans", sans-serif); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 250, 250, 0.5); transition: color 0.2s; }
.atlas-nav a:hover { color: #fafafa; }
.atlas-nav a[aria-current="page"] { color: var(--atlas-accent, #FFD100); }
.atlas-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--atlas-accent, #FFD100), transparent); }
.atlas-nav a:focus-visible, .atlas-brand:focus-visible { outline: 1px dotted rgba(var(--atlas-accent-rgb, 255, 209, 0), 0.6); outline-offset: 3px; }

.atlas-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.atlas-skip { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; border-radius: 4px;
  background: #05070c; color: #FFD100; font: 600 14px/1.4 var(--atlas-sans); transform: translateY(calc(-100% - 16px)); }
.atlas-skip:focus { transform: none; outline: 2px solid currentColor; outline-offset: 2px; }
.embed .atlas-skip { display: none; }
@media (max-width: 1200px) { .atlas-sub { display: none; } }
@media (max-width: 720px) {
  .atlas-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px 10px; min-height: 0; }
  .atlas-title { font-size: 19px; }
  .atlas-nav { grid-column: 1 / -1; grid-row: 2; margin-left: -10px; }
  .atlas-nav a { font-size: 11px; letter-spacing: 0.12em; padding: 6px 10px 7px; }
}
@media (prefers-reduced-motion: reduce) { .atlas-nav a { transition: none; } }