@font-face {
  font-family: "KN Archivo";
  src: url("/brand/fonts/archivo-100-900-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KN Newsreader";
  src: url("/brand/fonts/newsreader-roman-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KN Newsreader";
  src: url("/brand/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "KN Plex Mono";
  src: url("/brand/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --kn-ink: #171615;
  --kn-ink-soft: #292723;
  --kn-paper: #f7f3ea;
  --kn-canvas: #e5ded3;
  --kn-white: #fffdf8;
  --kn-muted: #706a61;
  --kn-line: #c9c0b3;
  --kn-foil: #987546;
  --kn-foil-soft: #d9c7a5;
  --kn-bottle: #26382d;
  --kn-error: #9f332a;
  --kn-focus-light: #2f5b49;
  --kn-focus-dark: #e1c58e;
  --kn-radius: 2px;
}

.brand-logo {
  display: inline-flex;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo--light img {
  filter: invert(1);
}

.brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("../brand/karel-novotny-mark.svg") center / contain no-repeat;
  mask: url("../brand/karel-novotny-mark.svg") center / contain no-repeat;
}

@media (max-width: 700px) {
  .brand-logo {
    width: 48px;
    height: 48px;
  }
}