:root {
  /*--color-bg-page: #171113;*/
  --color-bg-page: #0d0407;
  --color-link-primary: #ffc8f3;
  --color-text-primary: #e8f0f7;
  --color-text-muted: #cbd9e5;
  --color-border-table: #9fb3c8;
  --color-surface-code: #27282290;
  --color-shadow-soft: #1f2a3555;
}

/* Page shell */
html {
  min-height: 100%;
  isolation: isolate;
  background: linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-page) 100%);
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("/images/noise.webp");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.01;
  mix-blend-mode: soft-light;
  z-index: 0;
}

body {
  position: relative;
  z-index: 1;
  background: #00000006;
  color: #fceff4;
  max-width: 800px;
  margin: auto;
  padding: 1em;
  line-height: 1.35em;
  font-family: Optima, Candara, Calibri, Arial, sans-serif;
}

main {
  hyphens: auto;
}

/* Global links */
a {
  color: var(--color-link-primary);
}

a:hover,
a:focus {
  color: var(--color-link-primary);
}

/* Header, menu, and article metadata */
.menu,
.article-meta,
footer {
  text-align: center;
}

.menu {
  padding: 0;
}

.menu li {
  display: inline-block;
}

.menu li + li {
  margin-left: 0.7rem;
}

.menu a {
  text-decoration: none;
  color: var(--color-link-primary);
  background: none;
  padding: 2px 8px;
  border-radius: 1px;
}

.title {
  font-size: 0.9em;
}

.article-meta {
  background: none;
  padding: 0;
}

.article-meta h2 {
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
  line-height: 1.25;
}

.article-meta h3 {
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 400;
}

/* Post index */
.post-list {
  margin-top: 1em;
  line-height: 0em;
  font-family: "Anonymous Pro", "Courier New", Courier, monospace;
}

.post-list-item {
  margin: 0;
  padding: 0.25rem 0;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.index-title {
  margin: 0;
  font-size: 1rem;
  line-height: inherit;
  text-decoration: none;
  color: var(--color-text-primary);
}

.index-title:hover,
.index-title:focus {
  text-decoration: underline;
}

.index-date {
  margin: 0;
  color: var(--color-text-muted);
  opacity: 0.65;
  font-size: 0.92rem;
  line-height: inherit;
  font-weight: 400;
  white-space: nowrap;
}

/* Footer */
footer {
  color: var(--color-text-muted);
  font-family: "Anonymous Pro", "Courier New", Courier, monospace;
}

footer a {
  text-decoration: none;
  color: var(--color-text-muted);
}

/* Content elements */
hr {
  color: #351D30;
  border-style: solid;
}

blockquote {
  background: #3b4f63;
  border-left: 5px solid #9cb9d3;
  padding: 3px 1em;
}

img,
iframe,
video {
  max-width: 100%;
}

/* Code and math */
pre {
  background: var(--color-surface-code);
  border: 1px solid #2e3943;
  padding: 1em;
  overflow-x: auto;
}

code {
  background: var(--color-surface-code);
  color: var(--color-text-primary);
}

pre code {
  background: none;
}

.katex {
  color: var(--color-text-primary);
}

/* Mermaid diagrams */
.mermaid {
  background: #ffffff09;
  border: 1px solid #272822;
  padding: 0.8em;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Tables */
table {
  margin: auto;
  border-top: 1px solid var(--color-border-table);
  border-bottom: 1px solid var(--color-border-table);
}

table thead th {
  border-bottom: 1px solid #7f94a8;
}

th,
td {
  padding: 5px;
}

thead,
tfoot,
tr:nth-child(even) {
  background: #3d5166;
}

/* Fonts */

body {
  /*font-family: "Writer", "Courier New", Courier, monospace;*/
  font-family: "Sans";
  font-size: 0.95em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  font-weight: 300;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  /*color: inherit;*/
  text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
  /*color: inherit;*/
  text-decoration: underline;
}

code, pre, kbd, samp {
  font-family: "Anonymous Pro", "Courier New", "Monospace";
  font-size: 0.98em;
}

.menu a {
    font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    font-weight: 300;
}