@import url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.3/cmu-serif.css");
@import url("https://cdn.jsdelivr.net/npm/computer-modern@0.1.3/cmu-typewriter-text.css");

:root {
  color-scheme: light dark;                                  /* follow the OS */
  --rule: color-mix(in srgb, currentColor 30%, transparent);  /* faint borders */
}

body {
  font-family: "CMU Serif", "Latin Modern Roman", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 45em;
  margin: auto;
  padding: 1em;
  counter-reset: figure;
}

/* blog posts get a shorter measure */
.post { max-width: 34em; margin: 0 auto; hyphens: auto; }

h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; margin-top: 2em; }
h3 { font-size: 1.1em; }

h2, h3 { border-bottom: 1px solid var(--rule); padding-bottom: 0.15em; }

h1, h2, h3 { text-wrap: balance; } /* no lone word on a heading's last line */
p, li { text-wrap: pretty; } /* and none at the end of a paragraph */

sup { line-height: 0; } /* keep markers from stretching the line */

hr { border: none; border-top: 1px solid var(--rule); }

code, pre { font-family: "CMU Typewriter Text", monospace; }

pre {
  border: 1px solid var(--rule);
  padding: 1em;
  overflow-x: auto;
}

img { max-width: 100%; }

/* figures number themselves — the caption prefix comes from a CSS counter */
figure { margin: 2em 0; text-align: center; counter-increment: figure; }
figcaption { margin-top: 0.5em; text-align: left; font-size: 0.9em; }
figcaption::before { content: "Figure " counter(figure) ": "; font-weight: bold; }

/* footnote block kramdown appends at the end of a page */
.footnotes { margin-top: 2em; border-top: 1px solid var(--rule); font-size: 0.9em; }

/* Footnotes move into the right margin when the window is wide enough to hold
   them. The copies are made by the script in _layouts/post.html.
   With no javascript, .sidenotes is never set */
.sidenote { display: none; }

@media screen and (min-width: 1080px) {
  .sidenote {
    display: block; float: right; clear: right;   /* clear: right stacks them */
    width: 11rem; margin-right: -12.5rem;         /* = width + 1.5rem gutter */
    margin-bottom: 1em; font-size: 0.8em; line-height: 1.4;
  }

  /* Hidden from the eye but kept in the accessibility tree: the margin copies
     are aria-hidden, so this stays the one version a screen reader reads, in
     document order, still reachable from the footnote marker link. */
  .sidenotes .footnotes {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
}

@media print {
  body { max-width: none; font-size: 11pt; }
  .post { max-width: none; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .sidenote, .noprint { display: none; }
}