/* ==========================================================================
   Enhancements: one column, a warmer paper look, small cards with logos and
   book covers, Carolina blue accents, type polish and small effects.

   Loaded after the original styles. Delete the <link> to this file in
   index.html and the page falls back to the original look (the logos and
   covers then appear as small inline pictures). Every block stands on its own,
   and the one-column layout is switched on by class="one-col" on <body>
   (remove that class to put the section titles back on the left).
   ========================================================================== */

:root {
  --paper: #faf9f5; /* warm off-white page */
  --card: #ffffff;
  --ink: #1d1c1a; /* warm near-black, 15:1 on the paper */
  --muted: #6b6a63;
  --hairline: rgb(29 28 26 / 0.09);
  --accent: #1f6aa0; /* Carolina blue as text, 5.5:1 on the paper */
  --carolina: #4b9cd3; /* Carolina blue as a fill */
  --carolina-tint: rgb(75 156 211 / 0.13);
  --nyu: #57068c;
  --sep: #bdbab0;
}

/* ---- Paper ---------------------------------------------------------------- */

html,
body {
  background: var(--paper);
}

/* The original's white spacer cells would show as bands on the warmer page. */
td[bgcolor] {
  background: transparent;
}

/* ---- One column: each section title sits above its content ---------------- */

/* The original already does this on phones (up to 820px wide). Here it is the
   layout at every width. */
body.one-col > table {
  margin-top: 20px; /* room between the name and the first section */
}

body.one-col > table > tbody > tr:not([valign]) {
  display: none; /* the old spacer rows; margins below do their job */
}

body.one-col > table > tbody > tr[valign="top"] {
  display: block;
  margin-bottom: 30px;
}

body.one-col > table > tbody > tr[valign="top"] > td {
  display: block;
  width: 100% !important;
  padding: 0;
}

body.one-col td.section-title {
  width: auto;
  padding: 0 3px 8px;
  white-space: nowrap;
}

/* Wider than the old content column was, so keep paragraphs to a readable
   line length. */
.prose {
  display: block;
  max-width: 36em;
}

/* Beside a 210px label the page needed 750px; stacked, it reads better narrow. */
@media (min-width: 821px) {
  body.one-col {
    width: min(680px, calc(100% - 48px));
  }
}

/* ---- Section titles: a small Carolina blue mark --------------------------- */

td.section-title::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--carolina);
}

/* ---- Small cards around experience, teaching and degrees ------------------ */

/* Full width, so every card is the same width, and inset by the 5px the text
   around them already has (2px table spacing + 3px padding) so the card edges
   line up with it. */
.cards {
  width: calc(100% - 10px);
  border-spacing: 0 8px;
  margin: -8px 5px; /* cancel the spacing above the first and below the last card */
}

td.entry,
td.edu {
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), 0 1px 2px rgb(29 28 26 / 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

td.entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgb(75 156 211 / 0.45), 0 8px 18px -10px rgb(31 106 160 / 0.4);
}

/* Degrees carry their school's colour down the left edge. */
td.edu {
  --school: var(--carolina);
  --school-rgb: 75 156 211;
  padding-left: 19px;
  box-shadow: inset 3px 0 0 var(--school), 0 0 0 1px var(--hairline), 0 1px 2px rgb(29 28 26 / 0.04);
}

td.edu-nyu {
  --school: var(--nyu);
  --school-rgb: 87 6 140;
}

td.edu:hover {
  transform: translateY(-1px);
  box-shadow: inset 4px 0 0 var(--school), 0 0 0 1px rgb(var(--school-rgb) / 0.4), 0 8px 18px -10px rgb(var(--school-rgb) / 0.4);
}

/* ---- Carolina blue accents ------------------------------------------------ */

/* "Present" on the current role. Horizontal padding only, so line height holds. */
.now {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--carolina-tint);
  color: var(--accent);
  font-size: 0.92em;
}

.award {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px 3px 10px;
  border-radius: 12px;
  background: var(--carolina-tint);
  color: var(--accent);
  font-size: 0.88em;
  line-height: 1.4;
  text-wrap: balance; /* if it must wrap, no stranded last word */
}

.award::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.45em;
  vertical-align: -0.04em;
  background: var(--carolina);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Type ----------------------------------------------------------------- */

body {
  color: var(--ink);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

/* Avoid stranded last words in the About paragraphs. Not on the cards: there
   Chrome turns the <br> after a wrapped title into a blank line. */
.prose {
  text-wrap: pretty;
}

.nowrap {
  white-space: nowrap;
}

/* A little air between small capitals reads as more refined. */
.name-title {
  letter-spacing: 0.012em;
}

/* The "|" between employer and place, quieter than the text around it. */
.sep {
  padding: 0 0.1em;
  color: var(--sep);
}

.site-copyright {
  color: var(--muted);
}

/* ---- Selection and keyboard focus ----------------------------------------- */

::selection {
  background: rgb(75 156 211 / 0.28);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Links: visible, and smooth on hover ---------------------------------- */

td a:not(.linkedin-link) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgb(29 28 26 / 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

td a:not(.linkedin-link):hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.linkedin-link {
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease;
}

.linkedin-link:hover,
.linkedin-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -5px rgb(0 119 181 / 0.6);
}

.linkedin-link:active {
  transform: none;
  box-shadow: none;
}

/* ---- Linked cards: patents, publications and books ------------------------ */

/* The same cards, with one difference: the whole card is the link, and an arrow
   in the corner nudges on hover. The venue or journal sits on a quieter second
   line. The one patent without a link stays a plain card. */
.venue {
  color: var(--muted);
  font-size: 0.96em;
}

td.link {
  position: relative;
  padding-right: 46px; /* room for the arrow */
  cursor: pointer;
}

td.link a {
  color: var(--ink);
  text-decoration: none;
}

/* Stretch the link over the whole card; its accessible name stays the title. */
td.link a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

td.link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 15px;
  height: 15px;
  background: var(--muted);
  opacity: 0.55;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

td.link:hover::before,
td.link:focus-within::before {
  background: var(--accent);
  opacity: 1;
  transform: translate(2px, calc(-50% - 2px));
}

td.link:hover a,
td.link a:focus-visible {
  color: var(--accent);
}

/* Keyboard focus rings the whole card, since the whole card is the link. */
td.link a:focus-visible {
  outline: none;
}

td.link a:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Logos and covers ----------------------------------------------------- */

/* A small picture at the left of a card: the company or school logo, or the book
   cover. All are 48px tall (logos are square, covers 32px wide) with softly
   rounded corners. The picture sits in the card's left padding and out of the
   flow, so it can't add height; the text gets matching padding. */
td.with-logo,
td.with-cover {
  --thumb-left: 9px;
  --thumb-gap: 12px;
  position: relative;
  padding-left: calc(var(--thumb-left) + var(--thumb-w) + var(--thumb-gap));
}

td.with-logo {
  --thumb-w: 48px;
}

/* On the book cards the text keeps exactly the width it always had: 51px of
   padding at the left plus 11px at the right is the same 62px as the 16px and
   46px (the arrow's room) before. Titles wrap as they did and the card doesn't
   grow. The cover stands in for the arrow. */
td.with-cover {
  --thumb-w: 32px;
  --thumb-gap: 10px;
  padding-right: 11px;
}

td.with-cover::before {
  content: none;
}

td.edu.with-logo {
  --thumb-left: 12px; /* clear of the 3px school-colour edge */
}

/* Level with the first two lines, so the picture stays beside the name when a
   card grows taller (an award badge, or text wrapping on a narrow screen). */
td.with-logo > img,
td.with-cover > img {
  position: absolute;
  top: 9px;
  left: var(--thumb-left);
  width: var(--thumb-w);
  height: 48px;
  border: 0; /* the original stylesheet gives every img a grey border */
  border-radius: 8px;
  object-fit: cover;
  background: var(--paper); /* shows while the image loads */
  box-shadow: 0 0 0 1px rgb(29 28 26 / 0.12), 0 1px 3px rgb(29 28 26 / 0.14);
  pointer-events: none; /* clicks go through to the card's link */
  transition: box-shadow 0.2s ease;
}

td.with-cover > img {
  border-radius: 6px;
}

td.with-cover:hover > img,
td.with-cover:focus-within > img {
  box-shadow: 0 0 0 1px rgb(75 156 211 / 0.55), 0 4px 10px -3px rgb(31 106 160 / 0.4);
}

/* ---- Entrance: sections fade up, one after another ------------------------ */

@keyframes enhance-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-row,
  body > table > tbody > tr[valign="top"] > td > table,
  .site-copyright {
    animation: enhance-rise 0.45s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  }

  body > table > tbody > tr:nth-child(2) > td > table {
    animation-delay: 0.04s;
  }

  body > table > tbody > tr:nth-child(4) > td > table {
    animation-delay: 0.08s;
  }

  body > table > tbody > tr:nth-child(6) > td > table {
    animation-delay: 0.12s;
  }

  body > table > tbody > tr:nth-child(8) > td > table {
    animation-delay: 0.16s;
  }

  body > table > tbody > tr:nth-child(10) > td > table {
    animation-delay: 0.2s;
  }

  body > table > tbody > tr:nth-child(12) > td > table {
    animation-delay: 0.24s;
  }

  body > table > tbody > tr:nth-child(14) > td > table {
    animation-delay: 0.28s;
  }

  .site-copyright {
    animation-delay: 0.32s;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  td.entry,
  td.edu,
  .linkedin-link {
    transform: none;
    box-shadow: none;
  }
}