/* Shared by reader and editor: one stylesheet, one article markup. Extracted verbatim from index.html. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: #fff; color: #111; }
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
main {
  width: 100%;
  max-width: 500px;
  padding: 64px 24px 96px 24px;
}
@media (min-width: 640px) {
  main { padding-left: 72px; padding-top: 80px; }
}
.doodle {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 40px 0;
}
p { margin: 0 0 1.1em 0; }
nav { margin-top: 2.2em; }
nav a {
  display: block;
  width: max-content;
  margin: 0 0 .5em 0;
}
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: #999;
}
a:hover { text-decoration-color: #111; }
nav a::after {
  content: "\203A";              /* › chevron */
  display: inline-block;         /* breaks underline inheritance */
  margin-left: .35em;
  color: #777;
}
section { margin-top: 4em; }
h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0 0 .8em 0; }
ul { list-style: none; margin: 0; padding: 0; }
li { margin: 0 0 .5em 0; }
footer {
  margin-top: auto;
  padding: 0 24px 28px 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #777;
}
@media (min-width: 640px) { footer { padding-left: 72px; } }
footer a { margin-left: 1em; text-decoration-color: #ccc; }
footer a:hover { color: #111; }

/* --- essays: one <article class="essay"> markup, shared by reader and editor --- */
.meta, .toolbar, .state {
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px; line-height: 1.6; color: #777;
}
.meta { margin: 0 0 2.5em 0; }
.meta a { text-decoration-color: #ccc; }
.state { margin-left: .5em; }
.empty { color: #777; font-style: italic; }
article.essay h1 { font-size: 1em; font-weight: 600; margin: 0 0 1.4em 0; }
article.essay h2 { margin: 1.6em 0 .8em 0; }
article.essay h3 { font-size: 1em; font-weight: 600; margin: 1.6em 0 .8em 0; }
article.essay ul, article.essay ol { margin: 0 0 1.1em 0; padding-left: 1.2em; }
article.essay ul { list-style: disc; }
article.essay ol { list-style: decimal; }
article.essay blockquote { margin: 0 0 1.1em 1em; font-style: italic; }

/* --- editor / owner chrome (small system font, like the footer) --- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .8em; margin: 0 0 2em 0; position: sticky; top: 0; background: #fff; padding: 10px 0; }
.toolbar.actions { position: static; margin: 3em 0 0 0; }
.toolbar button { font: inherit; color: inherit; background: none; border: 1px solid #ddd; border-radius: 3px; padding: 1px 8px; cursor: pointer; }
.toolbar button:hover, .toolbar button:focus-visible { color: #111; border-color: #999; }
.toolbar button:disabled { opacity: .4; cursor: default; }
.toolbar .status { margin-left: auto; }
.linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: #999; }
.linkish:hover { text-decoration-color: #111; }
footer .linkish { margin-left: 1em; text-decoration-color: #ccc; }
footer .linkish:hover { color: #111; }
form.inline { display: inline; }
[contenteditable]:focus { outline: none; }
[contenteditable][data-placeholder]:empty::before { content: attr(data-placeholder); color: #aaa; }
input[type=text], input[type=url], input[type=email] { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid #ccc; padding: 2px 0; width: 100%; }
input:focus { outline: none; border-bottom-color: #111; }
form p { margin: 0 0 .8em 0; }