/* konklab.css: styles for konklab.fas.harvard.edu
   Same look as the original site (Open Sans, gray nav bar, letter-spaced headings).
   bootstrap-3.3.5-dist (already in the bucket) is used only for .container and .pull-right. */

/* blue #337ab7 */
/* harvard red rgb(183,19,19) */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  margin-bottom: 70px; /* footer height */
}

a:link, a:visited, a:hover { text-decoration: none; }
a:active { text-decoration: underline; }

/*  --------------- nav bar --------------- */

.tknav {
  width: 100%;
  background-color: rgb(235, 235, 235);
  padding-top: 35px;
  padding-bottom: 15px;
}
.tknav a { color: rgb(0, 0, 0); }
.tknav a:hover { color: #337ab7; }

#konkLabDiv, #navLinksDiv { display: inline-block; }
#navLinksDiv { line-height: 28px; }

.labname {
  text-transform: uppercase;
  letter-spacing: 10px;
  font-weight: bold;
  font-size: 24px;
  padding-right: 24px;
}
.tknavlink {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 16px;
  padding-right: 24px;
}
.tknavlink .ext { font-size: 12px; letter-spacing: 0; } /* the ↗ on links that leave the site */

/*  --------------- footer --------------- */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  padding: 10px 50px 0 50px;
  background-color: rgb(235, 235, 235);
}
.footerText {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: right;
  padding-right: 20px;
}
.harvardLogo { height: 45px; }

/*  --------------- page and headings --------------- */

.tksidePadding { padding-right: 50px; padding-left: 50px; }

/* one centered reading column */
.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 16px 60px 16px;
}

.tkheading {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding-top: 50px;
}
.line {
  border-top: 1px solid rgb(200, 200, 200);
  margin-top: 10px;
  margin-bottom: 10px;
}
.moreLink {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding-top: 30px;
}
.lightItalic {
  color: rgb(125, 125, 125);
  font-size: 13px;
  font-style: italic;
}

/*  --------------- two-column rows: image on the left, text on the right --------------- */

.row2 {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
}
.row2Text { flex: 1; }

/* the boxed "konklab + alvarez lab = vision lab" note */
.labBox {
  align-items: center;
  background-color: rgb(245, 245, 245);
  border: 1px solid rgb(225, 225, 225);
  padding: 22px 26px;
}
.labBox img { width: 250px; flex-shrink: 0; }
.bigLink {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
}

/* about me: photo with contact details underneath, text beside it */
.aboutRow { margin-top: 25px; }
.aboutSide { width: 190px; flex-shrink: 0; }
.aboutSide .photo { width: 100%; border: 1px solid black; }
.contact { font-size: 13px; line-height: 1.6; margin-top: 14px; }
.contact .links { margin: 12px 0 20px 0; } /* blank line before the address */
.contact .links a { display: block; margin-top: 2px; }

/*  --------------- selected publications: one paper per row --------------- */

.pubList { max-width: 820px; margin: 0 auto; padding-top: 10px; }
.pub {
  display: grid;
  grid-template-columns: 190px 1fr; /* same width as the photo column above */
  column-gap: 32px;
  align-items: center;
  padding: 8px 0;
}
.pub > a:first-child { grid-row: 1 / span 2; }
.pub img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: contain;
  padding: 5px;
  border: 1px solid rgb(225, 225, 225);
  background: white;
}
.pubTitle { font-weight: 600; font-size: 15px; align-self: end; }
.pubMeta { color: rgb(125, 125, 125); font-size: 13px; font-style: italic; margin-top: 3px; align-self: start; }

/*  --------------- card grid: talks and earlier research --------------- */

.cardGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 36px;
  padding-top: 25px;
}
.card .cardImg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: white;
  border: 1px solid rgb(225, 225, 225);
  padding: 8px;
  margin-bottom: 12px;
}
.card .cardImg.still { object-fit: cover; padding: 0; } /* video stills fill the frame */
.cardTitle { font-weight: 600; font-size: 15px; }
.cardMeta { color: rgb(125, 125, 125); font-size: 13px; font-style: italic; margin-top: 3px; }
.cardBlurb { font-size: 14px; margin-top: 6px; }
.card ul { padding-left: 18px; margin-top: 8px; font-size: 14px; }
.card li { margin-bottom: 5px; }

/*  --------------- phones --------------- */

@media (max-width: 767px) {
  .tksidePadding { padding-right: 16px; padding-left: 16px; }
  .footer { padding-left: 16px; padding-right: 16px; }
  .labname { letter-spacing: 6px; }
  .tknavlink { letter-spacing: 2px; font-size: 14px; padding-right: 14px; white-space: nowrap; }
}

@media (max-width: 640px) {
  .row2 { flex-direction: column; align-items: center; gap: 20px; }
  .aboutSide { text-align: center; }
  .pub { grid-template-columns: 110px 1fr; column-gap: 16px; }
  .cardGrid { grid-template-columns: 1fr; }
}

/*  --------------- the original konklab image at the bottom --------------- */
.memento { margin-top: 60px; }
.mementoImg { display: block; width: 480px; max-width: 90%; margin: 30px auto 0 auto; }
.mementoCaption { text-align: center; margin-top: 10px; }
.mementoImg.wide { margin-top: 40px; }