/* blog.gejm.dev's design, laid over the engine's neutral base; lives as design.css in the blog's folder.
   Its values are the palette of gejm.dev (src/client/site.css in PublicWeb-Gejmng): night over a northern lake,
   green-black rather than navy, aurora greens for what the reader acts on, amber for the lantern. Magenta means
   a passed test on the site, so code does not use it. gejm.dev is dark only, so both of the engine's themes get
   the one palette and the theme toggle is hidden. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b130f;
  --panel: #131e18;
  --panel-2: #1b2822;
  --ink: #f2ede4;
  --soft: #b9b4aa;
  --faint: #a3a097;
  --line: #2a3a32;
  --line-2: #2a3a32;
  --accent: #78f0aa;
  --on-accent: #070c0a;
  --warm: #f0a640;
  --on-warm: #070c0a;
  --chip-bg: #16301f;
  --chip-line: #2f4038;
  --chip-text: #b8f5cf;
  --toggle-bg: #1b2822;
  --card-soft: #101915;
  --shadow: rgba(0, 0, 0, 0.35);
  --notice-bg: #33260f;
  --notice-text: #f0a640;
  --danger: #e07a5f;
  --code-keyword: #f0a640;
  --code-string: #78f0aa;
  --code-comment: #a3a097;
  --code-type: #b8f5cf;
  --code-number: #ffbe5c;
  --code-title: #f2ede4;
  --serif: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

theme-toggle {
  display: none;
}

body {
  font-weight: 300;
}

/* One row: Mörksuggan and the name, 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: 20px;
}

/* The name stays since she carries no wordmark. She is public/morksuggan.svg in PublicWeb-Gejmng, kept in the
   blog's folder as media/media/morksuggan.svg. */
.site-header .site-name {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  font-weight: 400;

  &::before {
    content: "";
    flex: none;
    width: 3rem;
    height: 3.55rem;
    background: url("/media/morksuggan.svg") 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;
  }
}