/* One narrow monospace column. That's the whole design. */

:root {
  --bg:      #ffffff;
  --fg:      #1a1a1a;
  --muted:   #6a6a6a;
  --link:    #0000ee;
  --visited: #551a8b;
  --rule:    #d8d8d8;
  --pre-bg:  #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #121212;
    --fg:      #d6d6d6;
    --muted:   #8a8a8a;
    --link:    #8cb4ff;
    --visited: #c0a4e8;
    --rule:    #3a3a3a;
    --pre-bg:  #1d1d1d;
  }
}

html { background: var(--bg); }

body {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  max-width: 72ch;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

a         { color: var(--link); }
a:visited { color: var(--visited); }

h1, h2, h3, h4 { font-size: 1em; line-height: 1.4; margin: 2em 0 0.5em; }
h1 { font-size: 1.15em; }
h2 { border-bottom: 1px solid var(--rule); padding-bottom: 0.15em; }

header h1 { margin: 0; }
header .tagline { color: var(--muted); margin: 0.1rem 0 0.75rem; }
header nav a, header nav b { margin-right: 2ch; }
header { border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; }

img { max-width: 100%; height: auto; }
img.portrait { float: right; width: 150px; margin: 0 0 1rem 1.5rem; }

blockquote {
  border-left: 3px solid var(--rule);
  margin: 1em 0;
  padding: 0 0 0 1.5ch;
  color: var(--muted);
}

pre {
  background: var(--pre-bg);
  padding: 0.75em 1ch;
  overflow-x: auto;
}
code { background: var(--pre-bg); padding: 0 0.5ch; }
pre code { padding: 0; }

table { border-collapse: collapse; }
th, td { border: 1px solid var(--rule); padding: 0.2em 1ch; text-align: left; }

hr { border: 0; border-top: 1px dashed var(--rule); margin: 2em 0; }

ul, ol { padding-left: 3ch; }

.date { color: var(--muted); white-space: nowrap; }
ul.listing { list-style: none; padding-left: 0; }
ul.listing li { margin-bottom: 0.75em; }
ul.listing .desc { color: var(--muted); }

footer {
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  color: var(--muted);
  font-size: 0.93em;
}
footer a { color: var(--muted); }

/* ---- admin ---- */
.admin form.stack label { display: block; margin: 0.75em 0 0.15em; }
.admin input[type="text"], .admin input[type="email"], .admin input[type="password"],
.admin input[type="date"], .admin input[type="number"], .admin select, .admin textarea {
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 0.3em 0.75ch;
  width: 100%;
  box-sizing: border-box;
}
.admin textarea { min-height: 55vh; resize: vertical; }
.admin button {
  font: inherit;
  color: inherit;
  background: var(--pre-bg);
  border: 1px solid var(--rule);
  padding: 0.3em 1.5ch;
  cursor: pointer;
  margin-right: 1ch;
}
.admin button:hover { border-color: var(--muted); }
.admin .error { color: #b00020; }
@media (prefers-color-scheme: dark) { .admin .error { color: #ff7a7a; } }
.admin .ok { color: var(--muted); }
.admin table { width: 100%; }
.admin .row-actions { white-space: nowrap; }
.admin #preview { border: 1px dashed var(--rule); padding: 0 1.5ch; }
.admin .draft { color: var(--muted); }