:root {
  --text: #333;
  --muted: #777;
  --link: #1772d0;
  --accent: #b03434;
  --rule: #e8e8e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 840px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

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

a:hover { text-decoration: underline; }

h1 {
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 400;
}

h2 {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
}

section { margin-bottom: 44px; }

/* Intro */
.intro {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.intro-text { flex: 1; }
.intro-text p { margin: 0 0 14px; }

.links { font-weight: 700; }

.intro-photo {
  flex-shrink: 0;
  width: 185px;
  /* Align the photo with the bio text, not the name heading:
     h1 line (34px × 1.55) + its 18px bottom margin ≈ 70px. */
  margin-top: 70px;
}

.intro-photo img {
  width: 100%;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Publications */
.section-note {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}

.pub {
  display: flex;
  gap: 26px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.pub-img {
  flex-shrink: 0;
  width: 235px;
  cursor: zoom-in;
}

.pub-img img {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.pub-text { min-width: 0; }

.pub-title {
  font-size: 17px;
  font-weight: 700;
}

.pub-text p { margin: 4px 0 0; }

.pub-authors { font-size: 14px; }
.pub-authors strong { font-weight: 700; }

.pub-venue {
  font-size: 14px;
  font-style: italic;
}

.distinction {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 9px;
  background: #fdeeee;
  border: 1px solid #efc7c7;
  border-radius: 999px;
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  vertical-align: 1px;
}

.pub-desc {
  font-size: 14px;
  color: #555;
}

.pub-links {
  font-size: 14px;
  font-weight: 700;
}

/* Generic date/body rows (experience, teaching, awards, education) */
.row {
  display: flex;
  gap: 22px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

section > .row:first-of-type { margin-top: 14px; }

.row-date {
  flex-shrink: 0;
  width: 140px;
  color: var(--muted);
  font-size: 14px;
  padding-top: 2px;
}

.row-body { min-width: 0; }

footer {
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
}

/* Publication teasers grow on hover (pointer devices only). Teasers rest at
   235px wide but differ in height, so the zoom is capped by height (--target)
   as well as width (--zoom-max): each figure grows until it is --target tall
   or as wide as the window allows. Each .pub row carries --fig-h, the height
   of its teaser at the resting 235px width.

   The figure grows leftwards into the page margin. Once that margin is used
   up, the figure and the text both move right by the same amount, so the gap
   between them stays put and nothing reflows. */
@media (hover: hover) {
  .pub {
    --target: 460;
    --zoom-max: 1.6;
    --zoom: min(var(--zoom-max), calc(var(--target) / var(--fig-h, 100)));
    /* Free space next to the 888px page column, keeping a 20px window gap. */
    --room: max(0px, (100vw - 928px) / 2);
    /* How far the figure reaches past the left edge of the page. */
    --reach: max(0px, 235px * var(--zoom) - 255px);
    /* Growth the left margin cannot absorb: the figure moves right by this. */
    --spill: max(0px, var(--reach) - var(--room));
    /* The text follows, but never far enough to overflow the window. */
    --slide: min(var(--spill), var(--room));
  }

  .pub-img img {
    transform-origin: right center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }

  .pub-img:hover img {
    position: relative;
    z-index: 10;
    transform: translateX(var(--spill)) scale(var(--zoom));
    background: #fff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
  }

  .pub-text {
    transition: transform 0.2s ease-in-out;
  }

  .pub-img:hover + .pub-text {
    transform: translateX(var(--slide));
  }
}

/* Wider windows have more room on both sides, so zoom further. */
@media (hover: hover) and (min-width: 1200px) {
  .pub { --zoom-max: 2.0; }
}

@media (hover: hover) and (min-width: 1400px) {
  .pub { --zoom-max: 2.7; }
}

@media (hover: hover) and (min-width: 1600px) {
  .pub { --zoom-max: 3.4; }
}

@media (hover: hover) and (min-width: 1800px) {
  .pub { --zoom-max: 4.0; }
}

/* Taller windows can fit a taller figure. */
@media (hover: hover) and (min-height: 900px) {
  .pub { --target: 560; }
}

@media (hover: hover) and (min-height: 1200px) {
  .pub { --target: 680; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 15, 15, 0.85);
  cursor: zoom-out;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: min(1500px, 95vw);
  max-height: 92vh;
  width: auto;
  height: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

/* Mobile */
@media (max-width: 640px) {
  main { padding: 36px 18px; }

  .intro {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .intro-photo { width: 150px; margin-top: 0; }

  .pub {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .pub-img { width: 100%; }

  .row {
    flex-direction: column;
    gap: 2px;
  }

  .row-date { width: auto; }
}