/* REI Balance — shared brand mark (site, admin panel, printed documents). Needs tokens.css. */
.logo { display: inline-flex; align-items: center; gap: .7em; color: inherit; line-height: 1; }
.logo-mark { width: 3.3em; height: auto; flex: none; }
.logo-r { fill: currentColor; }
.logo-e { fill: var(--color-blue-2); }
.logo-i { fill: var(--color-green); }
.logo-rule { width: 1px; align-self: stretch; background: currentColor; opacity: .35; }
.logo-text { display: grid; gap: .45em; }
.logo-name { font-family: var(--font-display); font-weight: 600; font-size: 1.32em; letter-spacing: .28em; line-height: .8; }
.logo-tag { font-family: var(--font-data); font-size: .5em; letter-spacing: .06em; opacity: .7; white-space: nowrap; }
.logo-light { color: var(--color-on-night); }
.logo-light .logo-e { fill: var(--color-blue-glow); }
.logo-light .logo-i { fill: var(--color-green-glow); }