/* Styles for Tal Gross's personal site. Mimics the look of the old BU WordPress theme. */

:root {
  --text: #333;
  --heading: #000;
  --link: #0f69d7;
  --link-visited: #7337af;
  --rule: #ddd;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { text-decoration: none; }

main {
  max-width: 740px;
  margin: 0 auto;
  padding: 50px 20px 60px;
}

h1, h2 { color: var(--heading); line-height: 1.3; }
h1 { font-size: 30px; }
h2 { font-size: 24px; margin-top: 40px; }
.section-heading { font-size: 23px; margin: 40px 0 25px; } /* homepage sections; overrides the h2 size above */

/* Contact lines on the left, photo beside them. The text column stretches to the photo's
   height, with the name pinned to the top edge and the contact lines to the bottom edge. */
.contact {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 40px; /* breathing room before the bio paragraph */
}
.contact-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px; /* minimum spacing between the three groups when the text is taller than the photo */
}
/* Tight line-height and a small negative margin pull the top of the letters up to the photo edge */
.contact h1 { line-height: 1; margin: -3px 0 4px; }
.title { margin: 0; }
.affiliation { margin: 0; }
.contact-links { margin: 0 0 -4px; font-size: 16px; } /* negative margin drops the last line onto the photo's bottom edge */
.headshot {
  width: 220px;
  margin-right: 50px;
  align-self: flex-start; /* keep the photo at its natural height; never stretch it */
}

/* Each publication: main citation, then indented notes (NBER version, media, awards) */
.paper { margin-bottom: 25px; }
.paper p { margin: 0; }
.paper .note { padding-left: 2em; }

code { font-size: 16px; }

.home-link { font-size: 16px; margin-top: 0; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  main { padding: 20px 16px 40px; }
  .headshot { width: 130px; margin-right: 0; }
}