body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.45;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

h1 { margin: 0 0 4px; }

/* one thing = photo floated left, text beside it */
.thing {
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid #ddd;
}
.thing img {
  float: left;
  width: 200px;
  height: auto;
  margin: 2px 14px 6px 0;
}
.thing p { margin: 0 0 4px; }
.thing small { color: #777; }

code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #f2f2f2;
  padding: 1px 5px;
}

/* shown when a photo path is broken, so typos are visible */
.missing {
  display: inline-block;
  font-size: 14px;
  color: #777;
  border: 1px dashed #bbb;
  padding: 3px 8px;
}

.footer { font-size: 14px; color: #777; }

@media (max-width: 480px) {
  .thing img { float: none; display: block; margin: 0 0 6px; }
}