/* Paper-like style. System fonts only: nothing is downloaded. */

:root {
  --text: #1b1b1b;
  --muted: #6b6b6b;
  --rule: #c9c9c9;
  --link: #1f4e8c;
  --bg: #fdfdfb;
  --code-bg: #f3f2ee;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --text: #dcdcd6; --muted: #9a9a94; --rule: #4a4a46; --link: #8fb4e8; --bg: #1c1c1a; --code-bg: #262624; }
  img { opacity: .92; }
}

html { background: var(--bg); }
body {
  max-width: 42rem; margin: 0 auto; padding: 0 1.25rem;
  font: 1.125rem/1.6 var(--serif); color: var(--text);
  text-rendering: optimizeLegibility; font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}

/* ---- site header and footer */

header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.5rem;
  padding: 1.4rem 0 .5rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--text);
  box-shadow: 0 2px 0 var(--bg), 0 3px 0 var(--text);   /* thin double rule */
}
header.site a { color: var(--text); text-decoration: none; }
.brand { font-variant: small-caps; letter-spacing: .06em; font-size: 1.15rem; font-weight: 600; }
header.site nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .95rem; }
header.site nav a { color: var(--muted); }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--text); }
header.site nav a[aria-current] { border-bottom: 1px solid currentColor; }

footer.site {
  margin: 4rem 0 2rem; padding-top: .6rem; border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--muted); text-align: center;
}
footer.site a { color: inherit; }

/* ---- title block, like a paper */

header.title { text-align: center; margin-bottom: 2rem; }
h1 { font-size: 1.9rem; line-height: 1.25; font-weight: 600; margin: 0 0 .4rem; }
.date { color: var(--muted); font-size: .92rem; font-style: italic; margin: 0; }
.keywords { font-size: .92rem; margin: -1rem 0 2rem; text-align: center; color: var(--muted); }
.keywords span { font-weight: 600; font-variant: small-caps; letter-spacing: .04em; }
.keywords a { color: var(--muted); }

/* ---- text */

article p, article li { hyphens: auto; }
article > p { text-align: justify; }
h2, h3, h4 { line-height: 1.3; font-weight: 600; margin: 2.2rem 0 .6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; font-style: italic; font-weight: normal; }
h2 a, h3 a { color: inherit; text-decoration: none; }
h2 a:hover, h3 a:hover { color: var(--link); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }

ul, ol { padding-left: 1.4rem; }
li { margin: .2rem 0; }
li::marker { color: var(--muted); }
blockquote { margin: 1.2rem 0; padding: 0 1.5rem; color: var(--muted); font-style: italic; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem auto; width: 30%; }
small, .footnote { font-size: .85rem; }
.footnote { margin-top: 3rem; border-top: 1px solid var(--rule); color: var(--muted); }
.footnote hr { display: none; }
sup, sub { line-height: 0; }

/* ---- figures: centered, optional caption from the image title */

img { max-width: 100%; height: auto; }
figure { margin: 1.8rem 0; text-align: center; }
figure img { vertical-align: middle; }
figure a { text-decoration: none; }
figure img + img, figure a + a { margin-left: .25rem; }
figcaption { margin-top: .5rem; font-size: .9rem; color: var(--muted); font-style: italic; }
article { counter-reset: figure; }
figcaption { counter-increment: figure; }
figcaption::before { content: "Fig. " counter(figure) ". "; font-style: normal; font-weight: 600; font-variant: small-caps; }

/* ---- tables: booktabs style */

table { border-collapse: collapse; margin: 1.5rem auto; font-size: .95rem; border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
thead th { border-bottom: 1px solid var(--text); }
th, td { padding: .3rem .8rem; text-align: left; vertical-align: top; }
th { font-weight: 600; }

/* ---- code */

code, pre { font-family: var(--mono); font-size: .85em; }
code { background: var(--code-bg); padding: .05em .3em; border-radius: 3px; }
pre { background: var(--code-bg); padding: .8rem 1rem; overflow-x: auto; line-height: 1.45; border-left: 2px solid var(--rule); }
pre code { background: none; padding: 0; font-size: 1em; }

/* ---- math and chemistry */

.arithmatex { overflow-x: auto; overflow-y: hidden; }
.chem { white-space: nowrap; }
.chem-arrow { margin: 0 .2em; }

/* ---- table of contents ([TOC]) */

.toc { margin: 1.5rem 0 2rem; padding: .6rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: .95rem; }
.toc::before { content: "Contents"; display: block; font-variant: small-caps; letter-spacing: .05em; font-weight: 600; margin-bottom: .3rem; }
.toc ul { list-style: none; padding-left: 0; margin: 0; counter-reset: toc; }
.toc > ul { columns: 2 14rem; column-gap: 2rem; }
.toc li { margin: .1rem 0; break-inside: avoid; }
.toc li::before { counter-increment: toc; content: counters(toc, ".") "\2003"; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc ul ul { padding-left: 1.2rem; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--link); }

/* ---- lists of pages, tags */

ol.entries { list-style: none; padding: 0; margin-top: 2rem; }
ol.entries li { margin: 0 0 1.2rem; }
.entry-title { font-weight: 600; }
.entries .date { margin-left: .4rem; }
.summary { margin-top: .2rem; }
.summary p { margin: .3rem 0; }
.summary figure { margin: .6rem 0; }
.more { font-size: .92rem; white-space: nowrap; }
.back { margin-top: 2rem; font-size: .95rem; }

.tag-index { list-style: none; padding: 0; columns: 3 10rem; column-gap: 2rem; }
.tag-index li { break-inside: avoid; }
.tag-index .count { color: var(--muted); font-size: .85rem; }
.tag-index .count::before { content: "("; } .tag-index .count::after { content: ")"; }

/* ---- small screens */

@media (max-width: 34rem) {
  body { font-size: 1.05rem; }
  h1 { font-size: 1.55rem; }
  article > p { text-align: left; }
  header.site { justify-content: center; text-align: center; }
}

@media print {
  header.site nav, footer.site { display: none; }
  html, body { background: #fff; color: #000; }
  a { color: inherit; text-decoration: none; }
}