/* The hub's tab bar on pages of their own (Light Activation, Heaven Made Manifest). See hub_bar_layer.py. */
.hub-bar { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px)); background: rgba(255, 250, 238, .86); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); border-bottom: 1px solid rgba(219, 173, 79, .5); font-family: 'Lato', 'Segoe UI', system-ui, sans-serif; line-height: 1.4; }
.hub-bar__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; color: #1b2332; text-decoration: none; font: 500 20px/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; }
.hub-bar__brand img { width: 34px; height: 34px; border-radius: 50%; }
.hub-bar__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; min-width: 0; }
.hub-bar__tabs a { display: flex; align-items: center; min-height: 40px; padding: 8px 11px; border: 1px solid transparent; border-radius: 4px; color: #4a5470; font-size: 12.5px; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; }
.hub-bar__tabs a:hover { background: #fcf1d2; }
.hub-bar__tabs a[aria-current="page"] { background: #faecc3; border-color: #dbad4f; color: #84481e; font-weight: 700; }
.hub-bar a:focus-visible { outline: 2px solid #a85f00; outline-offset: 2px; }
.hub-bar [hidden] { display: none !important; }
html[data-app-mode] .hub-bar [data-web-only] { display: none !important; }

/* The hall fills the screen on wide layouts: the bar floats over the top of the art. */
@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
  .hub-bar[data-overlay] { position: absolute; top: 0; left: 0; right: 0; background: rgba(255, 250, 238, .62); }
}

/* Phones: brand on top, the tabs in one row that scrolls sideways (like the hub). */
@media (max-width: 760px) {
  .hub-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: calc(8px + env(safe-area-inset-top, 0px)) 0 4px; }
  .hub-bar__brand { align-self: center; min-height: 40px; font-size: 19px; }
  .hub-bar__brand img { width: 30px; height: 30px; }
  .hub-bar__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0 12px 2px; scrollbar-width: none; }
  .hub-bar__tabs::-webkit-scrollbar { display: none; }
  .hub-bar__tabs a { flex: 0 0 auto; font-size: 12px; padding: 8px 10px; }
}