:root{
  --bg:#fff;
  --fg:#111;
  --muted:#667085;
  --link:#0b57d0;
  --border:#e6e8eb;
  --chip:#f5f7fa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:24px 16px 64px}
.top-nav{border-bottom:1px solid var(--border);background:#fafafa}
.top-nav nav{max-width:980px;margin:0 auto;padding:10px 16px;display:flex;gap:10px;align-items:center;font-size:14px;flex-wrap:wrap}
.top-nav .sep{color:var(--muted)}
/* Intro */
.intro{display:grid;gap:20px;margin-top:16px}
.intro-left-image{grid-template-columns:0.35fr 1.65fr;align-items:start}
@media(max-width:760px){.intro-left-image{grid-template-columns:1fr}}
.headshot.small{width:100%;max-width:160px;border-radius:10px;border:1px solid var(--border)}
.name-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.name{font-size:28px;line-height:1.2;margin:0}
.space-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff!important;padding:8px 18px;border-radius:24px;font-weight:600;font-size:15px;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 2px 10px rgba(102,126,234,0.4);white-space:nowrap}
.space-btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 16px rgba(102,126,234,0.6)}
.title-role{margin:2px 0;color:var(--muted)}
.bio{margin:6px 0 2px}
.tag{background:var(--chip);border:1px solid var(--border);padding:1px 6px;border-radius:999px;font-size:12px}
/* Section */
.section{margin-top:26px}
.section h2{font-size:20px;margin:0 0 8px}
/* Publications-like project cards */
.pub{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--border)}
.pub:first-of-type{border-top:0}
.pub-thumb img{width:100%;height:auto;border:1px solid var(--border);border-radius:10px;display:block}
.pub-title{font-size:18px;margin:0 0 4px}
.pub-venue{margin:4px 0;color:var(--muted)}
.pill{display:inline-block;background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:12px;margin-right:6px}
.pill.bold{font-weight:600}
.pub-summary{margin:4px 0;color:var(--fg)}
.pub-links{margin-top:4px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:6px 0}
.footer{margin-top:36px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:14px;text-align:center}
.toggle,.bio-toggle{margin-top:10px;font:inherit;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:#fff;cursor:pointer}
.toggle:hover,.bio-toggle:hover{background:#f6f7f9}
.more-item{display:none}
/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{max-width:760px;background:#fff;border-radius:12px;border:1px solid var(--border);padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.15);position:relative}
.modal .close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:26px;cursor:pointer}
/* Carousel */
.carousel-wrap{position:relative;margin:24px 0;overflow:hidden;max-width:980px}
.carousel{overflow:hidden;width:100%}
.carousel-track{display:flex;gap:16px;transition:transform 0.4s ease;will-change:transform;padding:0 50px}
.carousel-track a{flex:0 0 220px;display:block}
.carousel-track img{width:220px;height:auto;max-height:165px;object-fit:cover;border:1px solid var(--border);border-radius:10px;display:block}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:1px solid var(--border);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;z-index:10;transition:background 0.2s}
.carousel-arrow:hover{background:#fff}
.carousel-arrow.left{left:8px}
.carousel-arrow.right{right:8px}
@media(max-width:760px){.carousel-track a{flex:0 0 200px}.carousel-track img{width:200px}}

/* Bio: first paragraph always visible, the rest behind Read more.
   The collapsed state keeps one line of the second paragraph showing, muted
   and fading out at the right, so there is something to read past. The link
   row sits outside this block and stays visible in both states. */
.subtitle{text-align:justify}
.summary{text-align:justify;margin:0 0 12px}
.summary-more{max-height:1.6em;overflow:hidden;color:var(--muted);
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 62%,transparent 100%)}
.summary-more.open{max-height:none;color:inherit;-webkit-mask-image:none;mask-image:none}
.bio-toggle{margin-top:2px;margin-bottom:8px}