/* Everything here either sets the black/white/gray palette or fixes a browser
   default that is unusable on a phone. Nothing else. No colours. */

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

/* Mobile needs exactly three things: a column that is never wider than the
   screen (max-width in rem, not px), long words that break instead of pushing
   the page sideways, and pictures that scale down. The only width media query
   on the page is the one that shrinks the portrait. */
body {
  background: #000;
  color: #dcdcdc;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

nav,
small,
time,
dt,
th,
figcaption,
footer {
  color: #8f8f8f;
}

h1, h2, h3 {
  line-height: 1.25;
}

hr {
  border: 0;
  border-top: 1px solid #242424;
  margin: 2rem 0;
  clear: both;            /* never let a rule ride up beside the portrait */
}

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

/* The portrait is the only figure that opens a page, so it is the only one
   that floats: the name and the text run beside it, caption underneath. */
main > figure:first-child {
  width: 12rem;
  float: right;
  margin: 0 0 1rem 1.5rem;
}

/* On a phone the same float would leave a column too narrow to read. */
@media (max-width: 28rem) {
  main > figure:first-child {
    width: 8rem;
    margin-left: 1rem;
  }
}

figure {
  margin: 1rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-bottom: 1px solid #1e1e1e;
}

dd {
  margin: 0 0 1rem 0;
}

address {
  font-style: normal;
}

input, button {
  background: #000;
  color: #dcdcdc;
  border: 1px solid #3a3a3a;
  padding: 0.25rem 0.5rem;
  font: inherit;
}

output {
  color: #8f8f8f;
}

/* Printing the vitae page should produce a usable PDF: ink on paper, no
   navigation furniture, links spelled out so they survive on paper. */
@media print {
  html,
  body {
    background: #fff;
    color: #000;
    max-width: none;
    padding: 0;
  }

  header,
  footer,
  form {
    display: none;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  h2 {
    break-after: avoid;
  }

  article, dd, tr {
    break-inside: avoid;
  }
}

/* Light mode follows the reader's system setting. A manual switch would need
   JavaScript or a cookie, and this site needs neither. */
@media (prefers-color-scheme: light) {
  html,
  body {
    background: #fff;
    color: #1a1a1a;
  }

  nav,
  small,
  time,
  dt,
  th,
  figcaption,
  footer,
  output {
    color: #6b6b6b;
  }

  hr {
    border-top-color: #e3e3e3;
  }

  th, td {
    border-bottom-color: #ededed;
  }

  input, button {
    background: #fff;
    color: #1a1a1a;
    border-color: #c9c9c9;
  }
}