@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}

/* Scale 1.25 from a 17-18px body; measure held near 66 characters. */
:root {
  --ink: #1b1b1b;
  --paper: #fbfaf6;
  --quiet: #55534d;
  --lit: #7a776e;
  --measure: 34em;
}

* { box-sizing: border-box; }

html {
  font: 106.25%/1.45 "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  hanging-punctuation: first;
}

body {
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  max-width: calc(var(--measure) + 2.5rem);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

p, ul, blockquote, figure { margin: 0 0 1em; }
p, li, blockquote { text-wrap: pretty; }

h1, h2 {
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: 1.563rem; margin: 2rem 0 .75rem; }
h2 { font-size: 1.25rem;  margin: 1.75rem 0 .5rem; }

/* Links keep the text color; a trailing ring (U+00B0, which Plex Sans
   carries) is the signifier.  Header links are a menu, so they get none. */
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover, a:focus-visible { color: var(--lit);
  color: color-mix(in srgb, currentColor 50%, var(--paper)); }
a:focus-visible { outline: .1em solid currentColor; outline-offset: .15em; }
main a::after, footer a::after { content: "\00b0"; margin-left: .1em; }

/* Letterspaced capitals: never bare caps. */
header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .25rem 1.5rem;
  margin-bottom: 2rem;
}
.mark, nav a {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.mark { font-weight: 500; color: var(--ink); }
nav { display: flex; gap: 1.5rem; }
nav a[aria-current] { font-weight: 500; }

.home { text-align: center; }
.home img {
  width: 10rem; height: auto; border-radius: .5rem; margin: 1rem auto;
}
.home h1 { margin: .5rem 0 0; font-size: 1.953rem; }
.home .title { margin: 0 0 1.5rem; color: var(--quiet); }
.home ul { list-style: none; padding: 0; display: flex;
           flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; }

.reading ul { list-style: none; padding: 0; }
.reading li { margin-bottom: .6em; padding-left: 1.5em; text-indent: -1.5em; }
.by { color: var(--quiet); }

footer { margin-top: 3rem; font-size: .889rem; color: var(--quiet); }
blockquote { margin: 0; padding: 0; text-align: center; }
blockquote footer { margin: .25em 0 0; }

@media (min-width: 40em) {
  html { font-size: 112.5%; }
}
@media print {
  html { background: none; font-size: 11pt; }
  nav { display: none; }
}

/* CV */
.cv h2 { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
         margin-top: 2rem; }
.cv h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
.entry { margin-bottom: .9em; break-inside: avoid; }
.entry p { margin: 0; }
.head { display: flex; justify-content: space-between; gap: 1rem;
        font-weight: 500; }
.when { font-weight: 400; color: var(--quiet); white-space: nowrap;
        font-variant-numeric: tabular-nums; }
.where { font-style: italic; }
.detail { color: var(--quiet); }
.entry ul { margin: .3em 0 0; padding-left: 1.25em; }
.entry li { margin-bottom: .25em; }
.pub { padding-left: 1.5em; text-indent: -1.5em; margin-bottom: .6em; }
.dl { margin-top: 2rem; }
@media (max-width: 30em) { .head { flex-direction: column; gap: 0; } }
@media print { .dl { display: none; } }

.docs { list-style: none; padding: 0; }

/* Body text is never centered, even on the centered home page. */
.blurb { text-align: left; max-width: 30em; margin: 2rem auto 0; }

strong, b { font-weight: 500; }