/* Plain single-column layout in the spirit of pandoc's default HTML (yummers.dev). */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1d1f21;
  --muted: #8e908c;
  --rule: #e0e0e0;
  --hover: #3e999f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1f21;
    --fg: #c5c8c6;
    --muted: #969896;
    --rule: #373b41;
    --hover: #8abeb7;
  }
}
html { background: var(--bg); color: var(--fg); }
body {
  margin: 0 auto;
  max-width: 36em;
  padding: 50px;
  font-family: sans-serif;
  line-height: 1.5;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}
@media (max-width: 600px) {
  body { font-size: 0.95em; padding: 24px 16px; }
}
a, a:visited { color: var(--fg); }
a:hover { color: var(--hover); }
h1 { font-size: 1.6em; margin: 1.4em 0 0.6em; }
h1:first-child { margin-top: 0; }
img { max-width: 100%; height: auto; display: block; margin: 1.5em 0; }
p { margin: 1em 0; }

.links { color: var(--muted); }
.links a { color: var(--muted); }
.links a:hover { color: var(--hover); }

/* index: title on the left, date on the right */
.toc { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0.35em 0; }
.toc a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1em;
  text-decoration: none;
}
.toc a:hover .title { text-decoration: underline; }
.toc .date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* project pages */
.back { margin: 0 0 2em; }
.meta { color: var(--muted); margin: -0.4em 0 1.5em; }
.lead { font-style: italic; }