* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.7;
  color: #1a1a1a;
  background: #fafaf8;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
h1 { font-size: 1.8em; margin: 1.5em 0 0.5em; line-height: 1.3; }
h2 { font-size: 1.3em; margin: 2em 0 0.5em; font-style: italic; font-weight: normal; }
h3 { font-size: 1.1em; margin: 1.5em 0 0.3em; }
p { margin: 0.8em 0; }
li { margin: 0.4em 0 0.4em 1.5em; }
ul { margin: 0.8em 0; }
a { color: #333; }
a:hover { color: #000; }
code { font-family: 'Courier New', monospace; font-size: 0.85em; background: #f0f0ee; padding: 1px 4px; border-radius: 2px; }
pre { background: #f0f0ee; padding: 16px; border-radius: 4px; overflow-x: auto; margin: 1.2em 0; }
pre code { background: none; padding: 0; }
blockquote { border-left: 3px solid #ccc; padding-left: 1em; color: #555; margin: 1em 0; }
hr { border: none; border-top: 1px solid #e8e8e5; margin: 2em 0; }

/* Tables — GFM-style; horizontal scroll on narrow screens. */
table { border-collapse: collapse; margin: 1.4em 0; font-size: 0.92em; display: block; overflow-x: auto; max-width: 100%; }
thead th { border-bottom: 2px solid #1a1a1a; text-align: left; padding: 0.5em 0.9em 0.5em 0; font-weight: bold; vertical-align: bottom; }
tbody td { border-bottom: 1px solid #e8e8e5; padding: 0.5em 0.9em 0.5em 0; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
th:not(:last-child), td:not(:last-child) { padding-right: 1.4em; }

strong { font-weight: bold; }
em { font-style: italic; }

/* Sub/sup — math notation; tight so they don't disturb line height. */
sub, sup { font-size: 0.72em; line-height: 0; vertical-align: baseline; position: relative; }
sup { top: -0.55em; }
sub { bottom: -0.2em; }

/* Images — responsive by default; fill the reading column on mobile,
   center within it on desktop. loading="lazy" is set at render time. */
img { max-width: 100%; height: auto; display: block; margin: 1.6em auto; border-radius: 3px; background: #f0f0ee; }
figure { margin: 1.6em 0; }
figcaption { font-size: 0.82em; color: #888; text-align: center; margin-top: 0.5em; line-height: 1.5; }

/* Nav */
nav { margin-bottom: 2.5em; font-size: 0.85em; display: flex; align-items: center; gap: 1.5em; }
nav a { color: #888; text-decoration: none; }
nav a:hover { color: #333; }
.site-name { color: #888; font-size: 1em; }

/* Footer */
.meta { font-size: 0.8em; color: #999; margin-top: 3em; padding-top: 1em; border-top: 1px solid #e8e8e5; }
footer { margin-top: 4em; font-size: 0.8em; color: #bbb; }
footer .meta { display: flex; justify-content: space-between; align-items: center; }
.meta a { color: #ccc; text-decoration: none; }
.meta a:hover { color: #999; }
.machines { margin-top: 0.6em; font-size: 0.72em; color: #d4d4d0; letter-spacing: 0.02em; }
.machines a { color: #c8c8c4; text-decoration: none; }
.machines a:hover { color: #888; }
.random-link { opacity: 0.35; transition: opacity 0.2s; }
.random-link:hover { opacity: 0.7; }
.random-link svg { width: 14px; height: 14px; vertical-align: middle; }
.nav-random { margin-left: auto; }
.footer-invitation { margin-top: 0.6em; font-size: 0.75em; color: #bbb; font-style: italic; }
.footer-invitation a { color: #bbb; text-decoration: none; }
.footer-invitation a:hover { color: #888; }

/* Publication dateline */
.dateline { font-size: 0.78em; color: #bbb; margin-top: -0.6em; margin-bottom: 2em; letter-spacing: 0.01em; }

/* Reply */
.reply-link { margin-top: 2.5em; font-size: 0.85em; }
.reply-link a { color: #aaa; text-decoration: none; }
.reply-link a:hover { color: #555; }

/* ── Index UI ─────────────────────────────────────────── */

.index-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.2em; }
.note-count { font-size: 0.85em; color: #999; }
.view-toggle { font-family: inherit; font-size: 0.8em; color: #bbb; background: none; border: none; cursor: pointer; padding: 0; }
.view-toggle:hover { color: #666; }

/* Search */
.search-wrap { position: relative; margin-bottom: 1em; }
.search-box {
  font-family: Georgia, serif;
  font-size: 0.9em;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #ddd;
  background: #fff;
  color: #1a1a1a;
  border-radius: 2px;
  -webkit-appearance: none;
}
.search-box:focus { outline: none; border-color: #999; }
.search-box::placeholder { color: #bbb; }
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #bbb; cursor: pointer; font-size: 1em; padding: 0;
  display: none;
}
.search-clear:hover { color: #666; }

/* Filter pills */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1.8em; }
.cat-pill {
  font-family: inherit;
  font-size: 0.78em;
  padding: 3px 11px;
  border: 1px solid #ddd;
  background: none;
  cursor: pointer;
  color: #888;
  border-radius: 2px;
  white-space: nowrap;
  transition: all 0.1s;
}
.cat-pill:hover { border-color: #aaa; color: #444; }
.cat-pill.active { border-color: #1a1a1a; color: #1a1a1a; background: #f5f5f3; }
.pill-count { opacity: 0.6; font-size: 0.95em; margin-left: 3px; }

/* Article list */
.article-list { list-style: none; padding: 0; }
.article-item {
  border-bottom: 1px solid #f0f0ee;
  padding: 1.1em 0;
  display: flex;
  gap: 1em;
  align-items: baseline;
}
.article-item-body { flex: 1; min-width: 0; }
.article-item a {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 1.0em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-item a:hover { text-decoration: underline; }
.item-desc { font-size: 0.83em; color: #666; margin-top: 0.2em; line-height: 1.5; }
.item-meta { font-size: 0.75em; color: #bbb; margin-top: 0.1em; }

/* Category badge — right side */
.item-cat {
  font-size: 0.7em;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.2em;
  cursor: pointer;
}
.item-cat:hover { color: #888; }

/* Dense mode */
body.dense .article-item { padding: 0.55em 0; }
body.dense .item-desc { display: none; }
body.dense .item-meta { display: none; }
body.dense .article-item a { font-size: 0.95em; }

/* Empty state */
.empty-state { color: #aaa; font-size: 0.9em; padding: 2em 0; text-align: center; display: none; }

/* Related articles */
.related { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid #e8e8e5; }
.related h3 { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; font-weight: normal; color: #aaa; margin-bottom: 0.8em; }
.related ul { list-style: none; padding: 0; }
.related li { margin: 0.5em 0; font-size: 0.9em; }

/* Machine-block — Conduit frame, top of every page */
.machine-block {
  font-size: 0.88em;
  color: #555;
  border-bottom: 1px solid #e8e8e5;
  padding-bottom: 1.4em;
  margin-bottom: 2em;
}
.machine-block p { margin: 0.5em 0; }
.machine-block .endpoints {
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
  margin: 0.5em 0 0.8em 0;
}
.machine-block .endpoints div { white-space: pre; overflow-x: auto; }
.machine-block a { color: #555; }
.machine-block a:hover { color: #000; }
.machine-block strong { color: #1a1a1a; }
.machine-block .humans-line {
  margin-top: 1em;
  color: #888;
  font-style: italic;
}