/*
  Mostly browser defaults, on purpose.
  Black on white, swapped to white on black in dark mode. Link colors come from the browser.
*/

/* Linux Biolinum 5.3.0, GPL with font exception or SIL OFL: see fonts/LICENCE.txt */

@font-face {
  font-family: "Linux Biolinum";
  src: url("/fonts/LinBiolinum-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Linux Biolinum";
  src: url("/fonts/LinBiolinum-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Linux Biolinum";
  src: url("/fonts/LinBiolinum-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  background: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #000;
    color: #fff;
  }
}

body {
  max-width: 36em;
  margin: 4rem auto 6rem;
  padding: 0 1.25rem;
  font: 1.125rem/1.45 "Linux Biolinum", sans-serif;
  text-wrap: pretty;
}

h1 {
  margin: 0 0 0.75em;
  font-size: 1.75em;
  line-height: 1.2;
}

h2 {
  margin: 2.25em 0 0.5em;
  font-size: 1.1em;
  line-height: 1.2;
}

/* The first section may sit beside the portrait; later ones start below it */

h2 ~ h2 {
  clear: both;
}

/* Link back home, on every page but the first */

nav {
  margin-bottom: 3em;
}

p {
  margin: 0.75em 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Portrait, floated like <img align="right"> */

.portrait {
  float: right;
  width: 9em;
  height: auto;
  margin: 0.3em 0 1em 1.5em;
}

@media (max-width: 30em) {
  .portrait {
    float: none;
    margin: 0 0 1.25em;
  }
}

/* Date-and-item list */

dl {
  display: grid;
  grid-template-columns: 3em 1fr;
  gap: 0.5em 0.75em;
  margin: 0;
}

dt {
  font-variant-numeric: tabular-nums;
}

dd {
  margin: 0;
}