@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --paper:     #FFFFFF;
  --paper-alt: #F5F6F7;
  --ink:       #4A5560;
  --ink-strong:#1E2A35;
  --ink-faint: #8A939C;
  --navy:      #23405E;
  --navy-deep: #17283C;
  --teal:      #2F5D50;
  --rule:      #E2E6EA;

  --wrap: 980px;

  --s1: 6px;  --s2: 12px; --s3: 20px;
  --s4: 32px; --s5: 48px; --s6: 72px; --s7: 104px;

  --display: 'Poppins', system-ui, -apple-system, sans-serif;
  --body:    'Lato', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink-strong);
  margin:0;
  font-weight:500;
  text-wrap:balance;
}
p{ margin:0 0 var(--s3); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

a{ color:var(--navy); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--teal); }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:90;
  background:var(--navy-deep); color:#fff;
  font-family:var(--display); font-size:13px; padding:10px 16px;
  text-decoration:none;
}
.skip-link:focus{ left:0; color:#fff; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ============================================================
   Masthead: centered wordmark over a centered nav
   ============================================================ */
.masthead{
  padding:var(--s4) 28px var(--s2);
  text-align:center;
}
.wordmark{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  padding-bottom:var(--s2);
}
.wordmark-inst{
  display:block;
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--navy-deep);
  line-height:1.25;
}
.wordmark-dept{
  display:block;
  font-family:var(--display);
  font-size:11px;
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:5px;
}

.mainnav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 var(--s5);
  padding-top:var(--s3);
}
.mainnav a{
  position:relative;
  font-family:var(--display);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:8px 0;
  transition:color .15s ease;
}
.mainnav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:transparent;
  transition:background .15s ease;
}
.mainnav a:hover{ color:var(--navy); }
.mainnav a:hover::after{ background:var(--rule); }
.mainnav a[aria-current="page"]{ color:var(--navy-deep); font-weight:500; }
.mainnav a[aria-current="page"]::after{ background:var(--navy); }
.mainnav a .ext{ margin-left:4px; font-size:9.5px; vertical-align:1px; opacity:.55; }

/* ============================================================
   Hero band
   To use a photo instead of the gradient, drop the file at
   assets/banner.jpg and replace the background below with:
     linear-gradient(rgba(23,40,60,.55), rgba(23,40,60,.55)),
     url('banner.jpg') center/cover;
   ============================================================ */
.hero{
  margin-top:var(--s3);
  padding:var(--s7) 28px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 45%, var(--teal) 100%);
}
.hero-inner{ max-width:var(--wrap); margin:0 auto; }
.hero-name{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(34px, 5.2vw, 52px);
  letter-spacing:0.03em;
  line-height:1.1;
  margin:0;
  color:#fff;
}
.hero-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(19px, 2.5vw, 27px);
  line-height:1.35;
  letter-spacing:0.01em;
  margin:var(--s3) auto 0;
  max-width:34ch;
  color:#fff;
}
.btn{
  display:inline-block;
  margin-top:var(--s4);
  font-family:var(--display);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  background:rgba(9,18,28,.72);
  border:1px solid rgba(255,255,255,.35);
  padding:13px 30px;
  transition:background .18s ease, border-color .18s ease;
}
.btn:hover{ background:#091420; border-color:#fff; color:#fff; }

/* slim variant for interior pages */
.hero--slim{ padding:var(--s6) 28px; }
.hero--slim .hero-name{
  font-size:clamp(28px, 4vw, 40px);
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.hero--slim .hero-sub{
  font-family:var(--body);
  font-style:italic;
  font-size:17px;
  line-height:1.5;
  margin:var(--s2) auto 0;
  max-width:56ch;
  color:rgba(255,255,255,.86);
}

/* ============================================================
   Blocks
   ============================================================ */
main{ padding-bottom:var(--s6); }

.block{
  padding-top:var(--s6);
  margin-top:var(--s6);
  border-top:1px solid var(--rule);
  scroll-margin-top:var(--s3);
}
.block:first-child{ border-top:none; margin-top:0; }

.block-title{
  font-family:var(--display);
  font-size:25px;
  font-weight:600;
  text-align:center;
  letter-spacing:0.01em;
  margin-bottom:var(--s5);
}
.block-title .sub{
  display:block;
  font-family:var(--body);
  font-style:italic;
  font-weight:400;
  font-size:16px;
  color:var(--ink-faint);
  margin-top:var(--s1);
  letter-spacing:0;
}

/* ---- intro: portrait beside bio ---- */
.intro{
  padding-top:var(--s6);
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:var(--s5);
  align-items:start;
}
.portrait{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 18%;
  background:var(--paper-alt);
}
.intro-text p{ font-size:16.5px; }
.intro-text strong{ color:var(--ink-strong); font-weight:700; }

/* ---- stat row ---- */
.stats{
  list-style:none;
  margin:0 auto var(--s5);
  padding:0;
  max-width:56ch;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--s3);
}
.stats li{
  text-align:center;
  padding:var(--s3) var(--s2);
  background:var(--paper-alt);
  border:1px solid var(--rule);
}
.stats .n{
  display:block;
  font-family:var(--display);
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  color:var(--navy-deep);
  font-variant-numeric:tabular-nums;
}
.stats .k{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.4;
  color:var(--ink-faint);
}

/* ---- interests ---- */
.interests{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.interests li{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:0.02em;
  color:var(--navy);
  border:1px solid var(--rule);
  background:var(--paper-alt);
  padding:8px 16px;
}

/* ============================================================
   Papers
   ============================================================ */
.paper{ max-width:76ch; margin-inline:auto; }
.paper + .paper{ margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--rule); }
.paper h3{
  font-family:var(--display);
  font-size:17.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink-strong);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.paper .coauthors{
  font-style:italic;
  font-weight:400;
  color:var(--ink);
}
.paper .meta{
  font-family:var(--display);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--navy);
  margin:var(--s2) 0 0;
}
.paper .abstract{
  margin:var(--s2) 0 0;
  text-align:justify;
  hyphens:auto;
  font-size:15.5px;
  line-height:1.72;
}
.paper .abstract .lab{ font-weight:700; color:var(--ink-strong); }

/* ============================================================
   Courses and talks
   ============================================================ */
.course-group{ max-width:76ch; margin-inline:auto; }
.course-group + .course-group{ margin-top:var(--s5); }
.course-group h4{
  font-family:var(--display);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:var(--s2);
  text-align:center;
}
.course-sub{
  font-style:italic;
  font-size:15px;
  color:var(--ink-faint);
  margin:var(--s4) 0 2px;
}
.cons-desc{ margin:var(--s3) 0; }

ul.courses{ list-style:none; margin:0; padding:0; }
ul.courses li{
  display:flex;
  align-items:baseline;
  gap:var(--s3);
  padding:11px 0;
  border-bottom:1px solid var(--rule);
  font-size:15.5px;
}
ul.courses li:last-child{ border-bottom:none; }
ul.courses .code{
  flex:none;
  width:88px;
  font-family:var(--display);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--navy);
}
ul.courses .title{ flex:1 1 auto; min-width:0; color:var(--ink-strong); }
ul.courses .term{
  flex:none;
  font-family:var(--display);
  font-size:12px;
  color:var(--ink-faint);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.award{
  display:block;
  width:fit-content;
  margin:calc(-1 * var(--s4)) auto var(--s5);
  font-family:var(--display);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ink-strong);
  padding:7px 15px;
}

.talks{ max-width:76ch; margin-inline:auto; }
.talks .row{ display:flex; gap:var(--s4); padding:13px 0; border-bottom:1px solid var(--rule); }
.talks .row:last-child{ border-bottom:none; }
.talks .yr{
  flex:none; width:56px;
  font-family:var(--display);
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.talks .venues{ flex:1 1 auto; min-width:0; }
.talks .venues div + div{ margin-top:7px; }
.talks .note{ font-style:italic; color:var(--ink-faint); font-size:14px; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot{
  border-top:1px solid var(--rule);
  padding:var(--s4) 28px var(--s5);
  text-align:center;
  font-family:var(--display);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--ink-faint);
}
.site-foot a{ color:var(--ink-faint); text-decoration:none; margin:0 10px; }
.site-foot a:hover{ color:var(--navy); }
.site-foot .line2{ display:block; margin-top:var(--s2); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:820px){
  .hero{ padding:var(--s6) 24px; }
  .intro{ grid-template-columns:1fr; gap:var(--s4); justify-items:center; }
  .portrait{ width:min(260px, 62vw); }
  .mainnav{ gap:0 var(--s4); }
}

@media (max-width:560px){
  :root{ --s6:52px; --s7:64px; }
  .mainnav{ gap:0 var(--s3); }
  .mainnav a{ font-size:11.5px; letter-spacing:0.12em; }
  .paper .abstract{ text-align:left; }
  ul.courses li{ flex-wrap:wrap; gap:2px var(--s2); }
  ul.courses .code{ width:auto; }
  ul.courses .term{ width:100%; text-align:left; }
  .talks .row{ flex-direction:column; gap:4px; }
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  body{ background:#fff; font-size:11pt; color:#000; }
  .mainnav, .btn, .skip-link, .portrait{ display:none; }
  .hero{ background:none; color:#000; padding:0 0 12pt; }
  .hero-name, .hero-title{ color:#000; }
  .block{ break-inside:avoid; padding-top:14pt; margin-top:14pt; }
  .paper, ul.courses li{ break-inside:avoid; }
  a{ color:#000; text-decoration:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .mainnav a, .btn{ transition:none; }
}