/* ═══ THE BUILDING — the slim site bar ══════════════════════════════════════
   Added 2026-08-11. Every page under /the-building/ carries this, including the
   33 room pages, which previously had ZERO links out — you could click into a
   room and have no way back to anything. Nate hit that dead end two clicks in.

   Deliberately a SLIM bar, not the full green site header. The homage's ruling
   principle is authenticity over polish (memory: the-building-homage-spirit) and
   a full corporate nav band would fight the piece. This is the same idiom the
   example board uses on my-forge/ — one green strip, the mark, a way home.

   Paths are ROOT-ABSOLUTE (/the-building/…) so the same markup works at every
   depth without per-file rewriting. That means these pages need serving from the
   site root — which is how they're browsed and how Pages will publish them.
   ══════════════════════════════════════════════════════════════════════════ */

.shopbar{
  position:sticky;top:0;z-index:80;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;
  background:#00310F;color:#CFE0D0;
  font-family:"Barlow","Segoe UI",system-ui,sans-serif;
  font-size:13px;line-height:1.3;
  padding:7px 18px;min-height:34px;box-sizing:border-box;
  max-width:none;width:auto;margin:0;
  border-bottom:1px solid rgba(238,225,198,.18);
}
.shopbar a{color:#F4EAD0;text-decoration:none;font-weight:600}
.shopbar a:hover{text-decoration:underline}
.shopbar__mark{display:inline-flex;align-items:center;gap:.45em;color:#9CC6A4}
.shopbar__mark b{color:#fff;font-weight:600}
.shopbar__mark svg{width:15px;height:15px;flex:none;display:inline-block}
.shopbar__where{color:#9CC6A4;font-weight:400}
.shopbar__links{display:flex;gap:16px;white-space:nowrap;flex-wrap:wrap}

@media (max-width:560px){
  .shopbar{font-size:12px;padding:6px 12px}
  .shopbar__links{gap:12px}
  .shopbar__where{display:none}
}