/* CSS Reset: http://meyerweb.com/eric/tools/css/reset */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}

/**************************************************/

#body {
  font-family: 'Asap', roboto, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  color: #150c21;
  /* Light paper texture: warm off-white base with subtle SVG grain. */
  background-color: #faf8f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

#main {
  max-width: 44em;
  margin: 0px auto;
  position: relative;
  min-height: 100vh;
  padding: 0 1.25em 6em;
  box-sizing: content-box;
}

a {
  text-decoration: none;
  color: rgb(20, 110, 190);
}

a:hover {
  text-decoration: underline;
}

i {
  font-style: italic;
}

b {
  font-weight: 600;
}

h1 {
  font-size: 2.4em;
  line-height: 2.4em;
  font-weight: 500;
}

p {
  margin-bottom: 1em;
}

/**************************************************/
/* Profile image and description. */

#intro {
  padding-top: 3em;
  display: flex;
}

#intro-text {
  width: 30em;
  float: left;
  /* Lets .mission scale its font to the width of this column. */
  container-type: inline-size;
}

/* The mission statement must always render as exactly 3 lines, one per
   span. The widest line is ~26.5em, so when the text column is narrower
   than that, scale the font down instead of letting lines rewrap
   (100cqw / 26.5em-per-em ~= 3.7cqw). */
.mission span {
  display: block;
  white-space: nowrap;
}

.mission {
  font-size: min(1em, 3.7cqw);
  line-height: 1.5;
}

#intro-image {
  /* Top margin clears the h1 (2.4em font x 2.4 line-height) so the
     photo aligns with the first paragraph. */
  margin: 5.95em 0 0 2em;
  width: 12em;
  height: 12em;
  float: left;
  overflow: hidden;
  border-radius: 0.3em;
  flex-shrink: 0;
}

#intro-image img {
  width: 12em;
}

/**************************************************/
/* Content sections. */

.section {
  margin-top: 2em;
}

h2 {
  font-size: 1.15em;
  line-height: 1.75em;
  margin-bottom: 0.5em;
  color: #150c21;
}

/* Recent work list. */

.list-item {
  width: 100%;
  margin-top: 0.25em;
  display: flex;
}

.list-item p.date {
  order: 2;
  margin-left: auto;
  padding-left: 1em;
  margin-bottom: 0;
  text-align: right;
  white-space: nowrap;
  color: #a0a8b0;
}

/* Publications. */

.note {
  color: #a0a8b0;
}

h3 {
  font-size: 1em;
  margin-bottom: 0.5em;
  line-height: 1.5em;
  font-weight: 400;
  display: flex;
}

.pub-meta {
  margin-left: auto;
  padding-left: 1em;
  text-align: right;
  white-space: nowrap;
  color: #a0a8b0;
}

.publication {
  margin-bottom: 1em;
}

.publication p {
  margin-bottom: 0;
  color: #a0a8b0;
}

/**************************************************/
/* Mobile layout. The breakpoint is where the side-by-side intro would
   squeeze the text column below the 30em it needs to keep the mission
   statement's 3 lines intact: 30em text + 2em gap + 12em image + 2.5em
   page padding = 46.5em ~= 745px. */

@media (max-width: 760px) {
  #intro {
    padding-top: 3em;
    flex-direction: column-reverse;
  }

  #intro-text {
    width: auto;
  }

  #intro-image {
    margin: 0 0 1.5em 0;
  }

  /* Stack dates and citations below their titles. */
  h3 {
    display: block;
  }

  .pub-meta {
    display: block;
    padding-left: 0;
    text-align: left;
    white-space: normal;
  }

  .list-item {
    display: block;
  }

  .list-item p.date {
    display: block;
    padding-left: 0;
    text-align: left;
  }
}