/* Minimal retro: a plain text file on old paper. */
:root {
  --bg: #f4f1e8; --fg: #222; --muted: #6b6558; --rule: #c9c2b0;
  --link: #1a0dab; --visited: #5b2a86; --soft: #ebe6d8;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1a17; --fg: #e8e2d0; --muted: #9a927f; --rule: #3a372f;
    --link: #8ab4f8; --visited: #c3a6f0; --soft: #24221e; }
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 15px/1.7 var(--mono); }
main { max-width: 600px; margin: 0 auto; padding: 72px 16px 40px; }

a { color: var(--link); text-underline-offset: 2px; }
a:visited { color: var(--visited); }

h1 { font-size: 20px; font-weight: 600; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 40px 0 8px; }
.sub, .muted { color: var(--muted); }
.sub { margin: 2px 0 0; }

hr { border: 0; border-top: 1px dashed var(--rule); margin: 40px 0; }
ul, ol { padding-left: 0; margin: 8px 0; }
ul { list-style: none; }
ul li { padding-left: 2ch; text-indent: -2ch; }
ul li::before { content: "- "; color: var(--muted); }
ol { padding-left: 22px; }
li { margin: 2px 0; }
p { margin: 8px 0; }

code { font: inherit; }
pre { font: 13px/1.6 var(--mono); background: var(--soft); border: 1px dashed var(--rule);
  padding: 12px 14px; margin: 12px 0; white-space: pre-wrap; overflow-x: auto; max-height: 340px; }

.btn { font: inherit; color: var(--fg); background: none; border: 1px solid var(--fg);
  padding: 2px 10px; cursor: pointer; text-decoration: none; }
.btn:visited { color: var(--fg); }
.btn:hover { background: var(--fg); color: var(--bg); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

article header { margin: 24px 0 32px; }
footer { margin-top: 56px; font-size: 13px; color: var(--muted); }
.cite { margin-top: 40px; padding-top: 16px; border-top: 1px dashed var(--rule); font-size: 13px; color: var(--muted); }

/* Reading pages (bookshelf): serif body for long text, mono stays for chrome. */
.read article > p, .read .stanza { font: 19px/1.65 var(--serif); }
.read article > p { margin: 0 0 1em; }
.read .stanza { margin: 0 0 1.4em; }
.read .l { display: block; padding-left: 1.5em; text-indent: -1.5em; }   /* wrapped lines hang under the line */
.read .l.in { padding-left: 3em; }                                        /* Kipling's indented lines */
@media (max-width: 480px) {
  .read article > p, .read .stanza { font-size: 17px; }
  .read .l.in { padding-left: 2.5em; }
}

/* Hide the page scrollbar (scrolling still works). */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }