@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@100&display=swap');

*{box-sizing:border-box}

/* Body / bio text: Helvetica Neue Light (matches the live Google Site) */
body{
  background:#fff;
  margin:0;
  padding:42px 20px 80px;
  font:300 14.67px/1.34 "Helvetica Neue", Arial, sans-serif;
  color:#212121;
}
.wrapper{max-width:870px; margin:0 auto}

/* Name — Roboto Thin */
header{text-align:center; margin-bottom:34px}
header h1{
  font-family:"Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight:100;
  font-size:40px;
  letter-spacing:0.5px;
  color:#37474f;
  margin:16px 0 0;
}

/* Bio — small photo + narrow text, the pair centered; photo sits slightly lower than text top */
.bio{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:36px;
  margin-bottom:42px;
}
.bio img{
  width:155px;
  flex-shrink:0;
  margin-top:18px;
}
.bio-text{max-width:330px}
.bio-text p{margin:0 0 12px}

/* Section headers — Montserrat, uppercase */
section h3{
  font-family:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  font-size:18.7px;
  color:#000;
  text-transform:uppercase;
  margin:30px 0 15px;
}
.papers p{margin:0 0 13px}
/* Media-coverage line: pulled up close to its paper, marked with a down-right arrow */
.papers ul{margin:-7px 0 13px 8px; padding:0; list-style:none}
.papers ul li{margin:0 0 3px; padding-left:18px; position:relative}
.papers ul li::before{content:"\21B3"; position:absolute; left:0; color:#7a7a7a}
.papers .abstract{margin:4px 0 0 36px; font-size:13.3px}
/* Non-link titles (work-in-progress, teaching label) sit at regular weight vs the light body */
.papers .hd{font-weight:400}

p{margin:0 0 13px}
em{font-style:italic}

/* Links — muted blue (more restrained than the bright Hsiao azure) */
a{color:#1b6d92; text-decoration:none}
a:hover{text-decoration:underline}
a.paper-title{color:#1b6d92; font-weight:400}

img{max-width:100%}

@media screen and (max-width:720px){
  header h1{font-size:32px}
  section h3{font-size:17px}
  .bio{flex-direction:column; align-items:center}
  .bio img{margin-top:0}
  .bio-text{max-width:none}
}

@media print{
  body{padding:0.4in; color:#000}
  a{color:#000}
}