/* ─────────────────────────────────────────────────────────────
   Logo lockup for the top bar. Source artwork:
   ~/BerrymanDataSystems/brand/ (ebbf770). The mark is inline SVG so it
   takes the theme's colors; the wordmark is live text in Archivo
   (the brand calls for Montserrat "or similar").
   ───────────────────────────────────────────────────────────── */

:root {
  --brand-navy:  #0B2D4B;
  --brand-steel: #6B7C8A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-navy:  #FFFFFF;
    --brand-steel: #7F90A0;   /* the block must stay distinct from the white B */
  }
}

.topbar { align-items: center; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  margin-right: 1.5rem;
  color: var(--brand-navy);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}
.brand__mark { width: auto; height: 2.5rem; flex: none; }
.brand__mark .n { fill: var(--brand-navy); }
.brand__mark .g { fill: var(--brand-steel); }

.brand__word {
  display: flex;
  flex-direction: column;
  padding-left: .875rem;
  border-left: 1px solid var(--brand-steel);
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
}
.brand__name {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .14em;
}
.brand__sub {
  margin-top: .3rem;
  font-weight: 500;
  font-size: .6rem;
  letter-spacing: .32em;
  color: var(--brand-steel);
}
.brand:hover .brand__name { color: var(--reagent); }