/* AvertGate brand mark — one logo rule for every page.
   The SVGs are painted through a CSS mask, so the logo takes `color` from its
   context: black on light surfaces, white on dark ones (currentColor).
   Usage: <a class="brand brand--md" href="/" aria-label="AvertGate"></a>
          <span class="brand brand--mark brand--sm" role="img" aria-label="AvertGate"></span>
   Clear space: keep at least half the mark height free on every side
   (.brand--clear adds it as padding). */
.brand {
  --brand-h: 1.75rem;
  display: inline-block;
  flex-shrink: 0;
  height: var(--brand-h);
  aspect-ratio: 1516 / 383;
  background-color: currentColor;
  -webkit-mask: url(/static/assets/logo.svg) center / contain no-repeat;
          mask: url(/static/assets/logo.svg) center / contain no-repeat;
  box-sizing: content-box;
  text-decoration: none;
  font-size: 0;
}
.brand--mark {
  aspect-ratio: 1223 / 1404;
  -webkit-mask-image: url(/static/assets/mark.svg);
          mask-image: url(/static/assets/mark.svg);
}
.brand--sm { --brand-h: 1.25rem; }
.brand--md { --brand-h: 1.75rem; }
.brand--lg { --brand-h: 2.5rem; }
.brand--clear { margin: calc(var(--brand-h) / 2); }
.brand--light { color: #fff; }