:root {
  /* Keep visual overrides centralized so a future theme toggle has one obvious home. */
  --site-content-max-width: 860px;
  --theme-swatch-mode: #1a170f;
  --theme-swatch-accent: #eec35e;
}

html[data-theme="dark-blue"] {
  --background: #0e1923;
  --foreground: #d6e8ee;
  --accent: #5accf0;
  --theme-swatch-mode: #0e1923;
  --theme-swatch-accent: #5accf0;
  color-scheme: dark;
}

html[data-theme="light-paper-green"] {
  --background: #fff4f2;
  --foreground: #424140;
  --accent: #008000;
  --theme-swatch-mode: #fff4f2;
  --theme-swatch-accent: #008000;
  color-scheme: light;
}

html[data-theme="light-paper-purple"] {
  --background: #fff5eb;
  --foreground: #45372b;
  --accent: #990bda;
  --theme-swatch-mode: #fff5eb;
  --theme-swatch-accent: #990bda;
  color-scheme: light;
}

.container {
  max-width: var(--site-content-max-width);
}

.post > .post-title {
  font-size: calc(var(--font-size) * 1.85);
  line-height: 1.25;
}

.post .post-content {
  --content-list-marker-align: -0.7ch;
  --content-list-marker-gap: 3ch;
  --content-list-nested-offset: 0;
}

.post .post-content ul {
  list-style: none;
  margin-left: 4ch;
  padding-left: 0;
}

.post .post-content :is(ul, ol) :is(ul, ol) {
  margin-bottom: 0.45rem;
  margin-left: var(--content-list-nested-offset);
  margin-top: 0.6rem;
  padding-left: var(--content-list-marker-gap);
}

.post .post-content ul li {
  position: relative;
}

.post .post-content li > p:first-child {
  margin-top: 0;
}

.post .post-content li > p:last-child {
  margin-bottom: 0;
}

.post .post-content li > p + p {
  margin-top: 0.75rem;
}

.post .post-content li > p:has(+ :is(ul, ol)) {
  margin-bottom: 0.15rem;
}

.post .post-content :is(ul, ol) > li:has(> p) + li:has(> p) {
  margin-top: 0.75rem;
}

.post .post-content ul li:not(:empty)::before {
  color: var(--accent);
  content: "●";
  font-size: 0.78em;
  left: calc(-1 * var(--content-list-marker-gap) + var(--content-list-marker-align));
  line-height: var(--line-height);
  position: absolute;
}

.post .post-content ul ul li:not(:empty)::before {
  content: "○";
}

.post .post-content ul ul ul li:not(:empty)::before {
  content: "◆";
  font-size: 0.72em;
}

.post .post-content ul ul ul ul li:not(:empty)::before {
  content: "○";
  font-size: 0.72em;
}

.post .post-content blockquote {
  border: 0;
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-size: 1.14em;
  font-style: normal;
  line-height: 1.2;
  margin: 1.75rem 0;
  padding: 0.35rem 0 0.35rem 1.25rem;
}

.post .post-content blockquote::before {
  content: none;
}

.post .post-content blockquote p {
  margin: 0;
}

.site-footer__copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}

.theme-picker {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.theme-picker__label {
  color: var(--accent);
}

.theme-picker__item {
  margin-left: auto;
}

.navigation-menu__inner > li:not(.theme-picker__item) > a:hover,
.menu__dropdown > li:not(.theme-picker__item) > a:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  text-decoration: none;
}

.theme-picker__button {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 20px;
}

.theme-picker__button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.theme-picker__swatch {
  background: linear-gradient(
    to right,
    var(--theme-swatch-mode) 0 50%,
    var(--theme-swatch-accent) 50% 100%
  );
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: block;
  height: 16px;
  width: 16px;
}

.menu__dropdown .theme-picker {
  gap: 8px;
  padding: 5px;
}

.menu__dropdown .theme-picker__item {
  margin-left: 0;
}

@media (max-width: 684px) {
  .menu--desktop {
    display: flex;
  }

  .menu--mobile {
    display: none;
  }

  .navigation-menu {
    margin: 20px 1px;
  }

  .navigation-menu__inner {
    align-items: center;
    flex-direction: row;
  }

  .navigation-menu__inner li {
    padding: 0;
  }

  .navigation-menu__inner > .theme-picker__item {
    margin-left: auto;
  }

  .theme-picker__label {
    display: none;
  }
}