/* ==========================================================================
   William J. Berger — site stylesheet
   Layout follows the EverWeb 4.5 design (1000px canvas).
   Link behaviour follows the original iWeb site (grey, underlined,
   greying out once visited).
   ========================================================================== */

/* --- Serif fallback -------------------------------------------------------
   Baskerville ships with macOS. Windows/Linux visitors do not have it, so
   Libre Baskerville (SIL OFL, see fonts/LICENSE-LibreBaskerville.txt) is
   self-hosted as a fallback. Browsers only download it when nothing earlier
   in the stack resolves, so Mac visitors never fetch it.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'LibreBaskervilleFallback';
  src: url('fonts/libre-baskerville-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --serif: Baskerville, 'Baskerville Old Face', 'Libre Baskerville',
           LibreBaskervilleFallback, 'Times New Roman', Times, serif;
  --sans: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue',
          Helvetica, Arial, sans-serif;
  --sans-bold: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ink: #373737;         /* body text */
  --ink-strong: #000000;  /* name, headings */
  --rule: #a9a9a9;        /* horizontal rules */

  --link: #584d4d;        /* rgb(88, 77, 77) — original iWeb link colour */
  --link-visited: #797979;
  --link-hover: #000000;

  --nav: #666666;
  --nav-active: #463c3c;

  --canvas: 1000px;
}

/* --- Reset / page shell --------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
}

img { border: 0; }

.page {
  width: var(--canvas);
  margin: 0 auto;
  padding: 0 0 80px;
  text-align: left;
}

hr.rule {
  border: 0;
  border-top: 2px solid var(--rule);
  margin: 0;
  height: 0;
}

/* --- Masthead: UB lockup left, page links right --------------------------- */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 60px 0 13px;
}

.masthead .logo img {
  display: block;
  width: 266px;
  height: 38px;
}

/* Site navigation. Deliberately kept in the original iWeb navbar idiom:
   plain grey words, no underline, current page bold and darker. These are
   internal links, so they open in the same tab and do not grey out once
   visited. */
.sitenav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 4px;
  margin-right: 100px;
}

.sitenav a,
.sitenav a:visited {
  color: var(--nav);
  text-decoration: none;
  padding: 0 10px;
}

.sitenav a:last-child { padding-right: 0; }

.sitenav a:hover,
.sitenav a:focus { color: var(--nav-active); text-decoration: none; }

.sitenav a[aria-current='page'] {
  color: var(--nav-active);
  font-weight: bold;
}

/* --- Nameplate ------------------------------------------------------------ */

.nameplate { padding: 12px 0 10px; }

.nameplate h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 57px;
  letter-spacing: 0.01em;
  color: var(--ink-strong);
}

.nameplate p {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 25px;
  color: var(--ink-strong);
}

/* --- Content links -------------------------------------------------------- */

.content a {
  color: var(--link);
  text-decoration: underline;
}

.content a:visited { color: var(--link-visited); }

.content a:hover,
.content a:focus { color: var(--link-hover); }

/* --- About Me: photo column + prose column -------------------------------- */

.about {
  display: flex;
  padding: 23px 0 0 94px;
  gap: 52px;
}

.about .portrait { width: 319px; flex: 0 0 319px; }

.about .portrait img.headshot {
  display: block;
  width: 319px;
  height: 400px;
}

.about .contact {
  margin: 9px auto 0;
  width: 193px;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink);
}

.about .contact p { margin: 0 0 6px; }

.about .contact .email {
  font-family: var(--sans-bold);
  font-weight: 700;
}

.about .contact .cv {
  margin-top: 6px;
  font-family: var(--sans-bold);
  font-weight: 700;
}

.about .bio { width: 416px; flex: 0 0 416px; }

.about .bio p {
  margin: 0 0 11px;
  font-size: 16px;
  line-height: 18.24px;
  color: var(--ink);
}

/* --- Long-form pages (Teaching, Papers +) --------------------------------- */

.prose {
  padding: 23px 0 0 104px;
  width: 778px;
}

.prose h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 32px;
  color: var(--ink-strong);
}

.prose h2.subhead {
  margin-top: 28px;
  font-size: 24px;
  line-height: 28px;
}

.prose h2.plus {
  margin-top: 36px;
  font-size: 34px;
  line-height: 36px;
}

.prose p {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 24px;
  color: #505050;
}

/* --- Publication list ----------------------------------------------------- */

.pubs { margin: 0 0 8px; padding: 0; list-style: none; }

.pubs li {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 24px;
  color: #505050;
}

.pubs .cite {
  display: block;
  font-size: 17px;
  line-height: 21px;
}

.pubs .cite em { font-style: italic; }

/* --- Miscellany ("+") ----------------------------------------------------- */

.prose .misc p { font-size: 17px; line-height: 22px; }

.prose .vitae {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 28px;
}

.finis {
  margin: 48px 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 24px;
}

.finis img { display: block; margin: 12px auto 0; width: 300px; height: 169px; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { padding: 60px 0 0; text-align: center; }

.site-footer img { opacity: 0.35; width: 139px; height: 50px; }