/* blog.kiwipow.com's design, laid over the engine's neutral base; lives as design.css in the blog's folder.
   Its values are the tokens of kiwipow.com (site/styles/theme.css in KiwiPow-PublicWeb), so the blog and the
   product read as one brand: linen surfaces, bark ink for accents, fjord for everything the reader acts on.
   Inter is named but not loaded, as on the site, so readers without it get their system font. */
:root {
  --bg: #f5f0e8;
  --panel: #fffdf9;
  --panel-2: #eee5d9;
  --ink: #2a2522;
  --soft: #544c46;
  --faint: #665d55;
  --line: #e4dbce;
  --line-2: #eee5d9;
  --accent: #2d5d7b;
  --on-accent: #fff;
  --warm: #6b4a35;
  --on-warm: #fff;
  --chip-bg: #f0e4d8;
  --chip-line: #e4d3c3;
  --chip-text: #6b4a35;
  --toggle-bg: #f1eae0;
  --card-soft: #fbf8f3;
  --shadow: rgba(60, 40, 20, 0.08);
  --notice-bg: #f7eecb;
  --notice-text: #7a5c00;
  --danger: #a3302b;
  --code-keyword: #a3302b;
  --code-string: #4a6a28;
  --code-comment: #665d55;
  --code-type: #2d5d7b;
  --code-number: #7a5c00;
  --code-title: #2a2522;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}

:root[data-theme="dark"] {
  --bg: #1b1917;
  --panel: #242120;
  --panel-2: #2e2a27;
  --ink: #ede6dd;
  --soft: #c9bfb4;
  --faint: #a0968b;
  --line: #38332f;
  --line-2: #38332f;
  --accent: #82b8e0;
  --on-accent: #14232e;
  --warm: #dba57c;
  --on-warm: #2a1a0f;
  --chip-bg: #3a2b21;
  --chip-line: #564e47;
  --chip-text: #dba57c;
  --toggle-bg: #2e2a27;
  --card-soft: #201d1b;
  --shadow: rgba(0, 0, 0, 0.35);
  --notice-bg: #372e17;
  --notice-text: #e6bf55;
  --danger: #f1907f;
  --code-keyword: #f1907f;
  --code-string: #a2c872;
  --code-comment: #a0968b;
  --code-type: #82b8e0;
  --code-number: #e6bf55;
  --code-title: #ede6dd;
}

/* One row: the logo, then a quiet tagline. The footer already links to the site, so the home icon goes. */
.site-header {
  padding: 10px 40px;
}

.site-header .site-brand {
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 16px;
}

/* The logo stands in for the blog's name; the name stays in the markup for screen readers and search engines.
   It is media/media/logo.png in the blog's folder: site/images/logo.svg from KiwiPow-PublicWeb rendered at
   256 pixels, since the SVG weighs 466 KB and this size shows no difference. */
.site-header .site-name {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  background: url("/media/logo.png") center / contain no-repeat;
}

.site-header .tagline {
  max-width: 46ch;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soft);

  &::before {
    content: none;
  }
}

.site-header .author-profiles {
  display: none;
}

@media (max-width: 680px) {
  .site-header {
    padding: 8px 16px;
  }

  .site-header .tagline {
    display: none;
  }
}