body {
  --bg: #faf8f3; --ink: #1d1c1a; --soft: #55524c; --muted: #8a8476;
  --faint: #b9b2a5; --line: #d8d2c4; --hairline: #e9e3d5;
  --panel: #fffef9; --shade: #f2efe7; --alert: #8a5a3c;
  color-scheme: light;
}
body.dark {
  --bg: #191816; --ink: #e6e2d9; --soft: #b3ada0; --muted: #8f897b;
  --faint: #5a554b; --line: #46413a; --hairline: #2b2925;
  --panel: #201f1c; --shade: #242220; --alert: #c68e64;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --bg: #191816; --ink: #e6e2d9; --soft: #b3ada0; --muted: #8f897b;
    --faint: #5a554b; --line: #46413a; --hairline: #2b2925;
    --panel: #201f1c; --shade: #242220; --alert: #c68e64;
    color-scheme: dark;
  }
}

body {
  font-family: Charter, Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  max-width: 38em;
  margin: 0 auto;
  padding: 3.5em 1.25em 5em;
}
body.sans { font-family: system-ui, "Segoe UI", "Helvetica Neue", Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }
article a, a.ul { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
article a:hover { color: var(--soft); }
.meta { color: var(--muted); }
.meta a { color: inherit; }
.flash { color: var(--alert); }
code { font-size: 0.85em; overflow-wrap: anywhere; }
.copy { cursor: pointer; }
.copy.copied::after { content: " — copied"; color: var(--muted); }
form.inline { display: inline; }
form.inline button { margin: 0; padding: 0 0.4em; }
.date form.inline button { padding: 0; }

/* listings */
h1.site { font-size: 1em; font-weight: normal; margin: 0 0 2.5em; }
.pen-name-form { display: inline-flex; gap: 0.4em; align-items: baseline; }
.pen-name-input { width: auto; display: inline-block; font-size: 1em; }
.pen-name-form button { margin: 0; }
ul.pieces { list-style: none; margin: 0; padding: 0; }
ul.pieces li { display: flex; gap: 0.5em; align-items: baseline; padding: 0.55em 0; }
ul.pieces li + li { border-top: 1px solid var(--hairline); }
.date { margin-left: auto; white-space: nowrap; }
footer { margin-top: 4em; }
footer a { color: var(--muted); }

/* piece */
p.crumb { margin: 0 0 3em; }
p.crumb a { color: var(--muted); }
.right { float: right; }
article h1 { font-size: 1.5em; font-weight: normal; line-height: 1.3; margin: 0 0 0.25em; }
p.subtitle { margin: 0 0 0.25em; color: var(--soft); font-style: italic; }
p.byline { margin: 0 0 2.5em; color: var(--muted); }
article p { margin: 0 0 1em; }
article h2, article h3 { font-size: 1.15em; font-weight: bold; margin: 1.6em 0 0.6em; }
article img { max-width: 100%; }
blockquote { margin: 1em 2em; color: var(--soft); }
table { border-collapse: collapse; margin: 1em 0; }
th, td { border: 1px solid var(--line); padding: 0.3em 0.7em; text-align: left; }
pre { background: var(--shade); padding: 0.8em 1em; overflow-x: auto; }
.footnote { color: var(--soft); font-size: 0.9em; }
hr { border: none; text-align: center; margin: 1.6em 0; }
hr::after { content: "···"; color: var(--muted); letter-spacing: 0.5em; }

/* writer side */
input[type=text], input[type=password], input[type=date], textarea {
  font: inherit; color: inherit; background: var(--panel);
  border: 1px solid var(--line); border-radius: 0;
  padding: 0.5em 0.6em; width: 100%; box-sizing: border-box;
}
input#title { font-size: 1.25em; margin-bottom: 0.4em; }
input#subtitle { font-style: italic; margin-bottom: 0.8em; }
input[type=date] { width: auto; display: inline-block; padding: 0.15em 0.4em; }
textarea { min-height: 22em; line-height: 1.6; resize: vertical; }
label { display: block; margin-bottom: 0.4em; }
fieldset { border: none; margin: 1.4em 0 0; padding: 0; }
fieldset label { display: inline-block; margin-right: 1.5em; }
p.note { margin: 0.4em 0 0; }
.preview { border: 1px solid var(--line); padding: 0.6em 1.2em 1.2em; margin-top: 1.2em; }
.preview > p.meta { margin: 0 0 1em; }
p.afterword { margin-top: 3em; }
button {
  font: inherit; color: inherit; background: none; cursor: pointer;
  border: 1px solid var(--faint); border-radius: 0; padding: 0.4em 1.2em;
  margin: 1.2em 0.3em 0 0;
}
button:hover { border-color: var(--ink); }
button.quiet { border-color: transparent; color: var(--muted); }
button.quiet:hover { border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* last, so it beats every quieter link color above */
a:hover, .meta a:hover, p.crumb a:hover, footer a:hover {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--ink); text-underline-offset: 3px;
}

.actions { text-align: right; margin: 1.2em 0 0; }
.actions button { margin: 0 0 0 0.3em; }
.actions a { margin-right: 0.6em; }
.actions .danger { float: left; padding: 0.4em 0; margin: 0; }