* { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  color: #222222;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
  color: #8f1d1b;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
a:hover { color: #5e100f; }

.page { padding: 0 16px 80px; }

.wrap {
  max-width: 1230px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 355px minmax(0, 1fr);
}

.figure-col { padding-top: 60px; }
.figure {
  display: block;
  width: 340px;
  height: 460px;
  margin-left: 10px;
}
.figure.small { width: 260px; height: 352px; }

.right { padding-top: 186px; min-width: 0; }

.cols {
  display: grid;
  grid-template-columns: minmax(0, 540px) 302px;
  column-gap: 33px;
}

/* Header */
.masthead {
  align-items: end;
  border-bottom: 2px solid #8f1d1b;
  padding-bottom: 2px;
}
.name {
  margin: 0;
  font-family: 'Trebuchet MS', 'Lucida Grande', sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #858585;
}
.name a { color: inherit; text-decoration: none; }
.mail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 6px 17px;
  font-size: 13px;
}
.mail svg { display: block; flex: none; }

.body { padding-top: 26px; }
main { min-width: 0; }

.back { margin: 0 0 14px; font-size: 14px; }

/* Sections */
h2 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: #111111;
}
section { margin: 0 0 40px; }
p { margin: 0 0 16px; font-size: 16px; line-height: 27px; }

.link-section { margin: 0 0 22px; }
.link-section h2 { margin-bottom: 6px; }
.link-section p { margin: 0; }

/* Sidebar */
aside {
  min-width: 0;
  color: #767676;
  font-size: 15.5px;
  line-height: 21.5px;
  padding-top: 4px;
}
aside section { margin: 0 0 24px; }
aside h3 {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: #6b6b6b;
}
aside p { margin: 0; font-size: inherit; line-height: inherit; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.timeline .when {
  margin: 0;
  padding: 2px 16px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: #6e6e6e;
}
.timeline .entry {
  position: relative;
  border-left: 1px solid #cccccc;
  padding: 0 0 24px 20px;
}
.timeline li:last-child .entry { padding-bottom: 4px; }
.timeline .entry::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8f1d1b;
}
.timeline h3 { margin: 0; font-size: 16px; line-height: 24px; color: #111111; }
.timeline .org { margin: 0; font-size: 15px; line-height: 23px; color: #444444; }
.timeline .note { margin: 2px 0 0; font-size: 14px; line-height: 21px; color: #6e6e6e; }

/* Projects table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
th {
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid #bdbdbd;
  font-weight: 700;
  color: #555555;
}
th:first-child { width: 32%; }
td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px dotted #cccccc;
  vertical-align: top;
}
th + th, td + td { padding-left: 10px; padding-right: 0; }
.event { font-size: 13px; color: #6e6e6e; }

/* Questions */
.qa { margin: 0 0 24px; }
.qa h3 { margin: 0 0 4px; font-size: 16px; line-height: 24px; color: #111111; }
.qa p { margin: 0; }
.qa .label { color: #555555; }

@media (max-width: 900px) {
  .wrap { grid-template-columns: 1fr; }
  .figure-col { padding-top: 32px; }
  .figure, .figure.small { width: 200px; height: 271px; margin: 0 0 8px 0; }
  .right { padding-top: 0; }
  .cols { grid-template-columns: 1fr; }
  .mail { display: none; }
  aside { border-top: 1px solid #dddddd; padding-top: 20px; }
}