:root {
  --ink: #14150F;
  --muted: #6E6A60;
  --faint: #9C9686;
  --rule: #E4E0D7;
  --panel: #ECECEC;
  --paper: #FFFFFF;
  --fa: "Vazirmatn", Tahoma, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --lat: "Jost", sans-serif;
}

/* Dark applies when the OS asks for it and the reader has not overridden,
   or when the reader picked it explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8E6E0;
    --muted: #9A968C;
    --faint: #6E6A60;
    --rule: #2A2A28;
    --panel: #1A1A18;
    --paper: #111110;
  }
}

:root[data-theme="dark"] {
  --ink: #E8E6E0;
  --muted: #9A968C;
  --faint: #6E6A60;
  --rule: #2A2A28;
  --panel: #1A1A18;
  --paper: #111110;
}

* { box-sizing: border-box; }

body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fa);
  font-size: 17px;
  line-height: 2;
  text-align: right;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: currentColor; }

/* Latin chrome. Persian never gets letter-spacing, it breaks the joins. */
.wordmark {
  font-family: var(--lat);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.22em;
  direction: ltr;
  text-decoration: none;
}

.stamp {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  direction: ltr;
  text-align: left;
}

header {
  margin-bottom: 2.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.brand { display: flex; align-items: baseline; gap: 1rem; }

.books-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.books-link:hover { color: var(--ink); }

/* Both options stay on the page; the active one is the darker of the two.
   Decided in CSS, so it is correct on the first frame and never flashes. */
.theme {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  direction: ltr;
  color: var(--rule);
}

.theme button {
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0 5px;
  cursor: pointer;
  color: var(--faint);
}

/* Light is the default state */
.theme button[data-set="light"] { color: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme button[data-set="light"] { color: var(--faint); }
  :root:not([data-theme="light"]) .theme button[data-set="dark"] { color: var(--ink); }
}

:root[data-theme="dark"] .theme button[data-set="light"] { color: var(--faint); }
:root[data-theme="dark"] .theme button[data-set="dark"] { color: var(--ink); }
:root[data-theme="light"] .theme button[data-set="light"] { color: var(--ink); }
:root[data-theme="light"] .theme button[data-set="dark"] { color: var(--faint); }

.intro { margin-bottom: 2.5rem; }
.intro p { margin: 0 0 1rem; }
.intro .channel { margin-top: 1.5rem; font-size: 14px; color: var(--muted); }

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-bottom: 1.75rem;
  font-size: 14px;
}

.cats a { color: var(--muted); text-decoration: none; }
.cats a:hover { color: var(--ink); }
.cats a.on { color: var(--ink); }

/* The list. One row per post, date on the left, title on the right. */
.feed { list-style: none; margin: 0; padding: 0; }

.feed li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.35rem 0;
}

.feed li .stamp { grid-column: 2; align-self: baseline; }

.entry {
  grid-column: 1;
  text-decoration: none;
  text-decoration-color: var(--rule);
}
.entry:hover { text-decoration: underline; text-underline-offset: 5px; }

.note {
  grid-column: 1;
  background: var(--panel);
  border-right: 2px solid var(--ink);
  padding: 10px 14px;
  margin: 0.5rem 0;
  font-size: 16px;
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note .permalink { font-size: 12px; color: var(--muted); }

.page-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 2rem; }

/* Books list: title + one sentence, no dates, no categories */
.books { list-style: none; margin: 0; padding: 0; }
.books li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.books li:last-child { border-bottom: 0; }
.book-title {
  font-weight: 700;
  text-decoration: none;
  text-decoration-color: var(--rule);
}
.book-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.book-sentence { margin: 0.35rem 0 0; color: var(--muted); font-size: 15px; }

/* Post page */
article { margin-bottom: 3rem; }

article h1 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0.5rem 0 2rem;
}

.prose > * { margin: 0 0 1.5rem; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.1875rem; margin-top: 2.5rem; line-height: 1.8; }
.prose h3 { font-size: 1.0625rem; margin-top: 2rem; line-height: 1.8; }
.prose ul, .prose ol { padding-right: 1.25rem; padding-left: 0; }
.prose li { margin-bottom: 0.5rem; }
.prose img { max-width: 100%; height: auto; }
.prose video { max-width: 100%; display: block; margin: 0 0 1.5rem; border-radius: 2px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.prose blockquote {
  margin: 0;
  background: var(--panel);
  border-right: 2px solid var(--ink);
  padding: 10px 14px;
  color: var(--muted);
}

.prose code, .prose pre {
  font-family: var(--mono);
  direction: ltr;
  text-align: left;
  font-size: 13px;
}
.prose code { background: var(--panel); padding: 0.1em 0.35em; }
.prose pre { background: var(--panel); padding: 1rem; overflow-x: auto; line-height: 1.7; }
.prose pre code { background: none; padding: 0; }

.posted { margin-top: 2rem; }

.back { font-size: 14px; }

footer {
  margin-top: 4rem;
  display: flex;
  gap: 1.25rem;
  font-size: 13px;
  color: var(--muted);
  direction: ltr;
}