/* Overrides on top of the academicpages theme: white, plain, open — closer to a
   Google Sites academic page than to the theme's default grey chrome.
   Self-contained: delete this file and its <link> in _includes/head/custom.html
   to restore the stock look. */

/* --- white everywhere; the theme's grey is what made it look dirty --- */
html, body, .masthead, .greedy-nav, .page__footer, .initial-content {
  background-color: #fff;
}
body {
  color: #202124;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- masthead: name left, links right, hairline rule --- */
/* The site name is pulled out of the greedy nav (see _includes/masthead.html);
   leaving it inside made the nav measure itself as overflowing. */
.masthead { border-bottom: 1px solid #ededed; }
.masthead__inner-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: .9em 1.5em;
}
.masthead__inner-wrap .site-name {
  font-size: .95em;
  color: #202124;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__inner-wrap .site-name:hover { color: #1a73e8; }
/* the nav must stay wide, or greedy-nav measures a narrow bar and hides links */
.masthead__menu { flex: 1; padding: 0; }
.greedy-nav { display: flex; align-items: center; justify-content: flex-end;
              background: transparent; min-height: 0; }
.greedy-nav .visible-links { flex: 0 0 auto; }
.greedy-nav a { color: #202124; font-size: .82em; letter-spacing: .01em; }
.greedy-nav .visible-links a:before { display: none; }
.greedy-nav a:hover { color: #1a73e8; }
.greedy-nav button { background: transparent; }

/* --- one centred column, no sidebar --- */
#main { max-width: 780px; margin: 0 auto; padding: 0 1.6em; }
.page { width: 100%; float: none; padding-right: 0; }
.page__inner-wrap { margin-top: 0; }

/* --- centred page title, like the reference --- */
.page__title {
  text-align: center;
  font-size: 1.5em;
  font-weight: 500;
  color: #202124;
  line-height: 1.35;
  margin: 2.2em 0 1.9em;
  border: 0;
}

/* --- body copy: open, black-on-white --- */
.page__content { font-size: 1em; }
.page__content p,
.page__content li { line-height: 1.8; color: #202124; }
.page__content p { margin: 0 0 1.5em; }
.page__content a { color: #1a73e8; text-decoration: none; }
.page__content a:hover { text-decoration: underline; }
.page__content strong { color: #202124; font-weight: 500; }
.page__content p.lede { font-size: 1.05em; color: #202124; margin-bottom: 1.8em; }
.page__content h2 {
  font-size: 1.1em;
  font-weight: 500;
  color: #202124;
  border: 0;
  padding: 0;
  margin: 3em 0 1.1em;
}
.page__content h3 { font-size: 1em; font-weight: 500; color: #202124; margin: 2em 0 .8em; }
.page__content ul { margin-bottom: 1.5em; }

/* --- headshot beside the opening text --- */
.intro { display: flex; align-items: flex-start; gap: 2.4em; margin-bottom: 2.4em; }
.intro-text { flex: 1; }
.intro-text p:last-child { margin-bottom: 0; }
.headshot { flex: 0 0 210px; width: 210px; border-radius: 2px; margin: .35em 0 0; }

/* --- call to action --- */
.page__content .btn {
  margin: .2em 0 2em;
  border-radius: 4px;
  font-size: .78em;
  letter-spacing: .02em;
  padding: .8em 1.5em;
}
.page__content .btn--primary { background-color: #1a73e8; border: 0; }
.page__content .btn--primary:hover { background-color: #1765cc; }

/* --- quiet footer --- */
.page__footer { border-top: 1px solid #ededed; color: #80868b; margin-top: 4em; }
.page__footer footer { max-width: 780px; margin: 0 auto; padding: 1.6em 1.6em 2.4em; }
.page__footer a { color: #80868b; }

@media (max-width: 37.5em) {
  .page__title { margin: 1.8em 0 1.6em; }
  .intro { flex-direction: column; align-items: center; gap: 1.6em; text-align: left; }
  .headshot { flex: none; width: 170px; margin: 0; }
  #main { padding: 0 1.2em; }
}