/* Layout: one 12-column page. Every section puts its title in a fixed left column and its content
   in the right, so headings, text and figures line up on the same edges on every page.
   One typeface (EB Garamond) in five sizes; uppercase is used only for navigation and minor heads. */
:root{
  --paper:#fdfdfb;
  --mat:#ffffff;
  --ink:#1b1a17;
  --muted:#6a665e;
  --rule:#e5e2db;
  --accent:#6b1f2a;
  --face:"EB Garamond",Garamond,"Times New Roman",serif;
  --fs-1:34px;  /* page titles, hero */
  --fs-2:21px;  /* section titles */
  --fs-3:18px;  /* item titles */
  --fs-4:17.5px;/* body */
  --fs-5:15.5px;/* meta, captions */
  --fs-6:12.5px;/* uppercase nav and minor heads */
  --title-col:250px;
  --gap:56px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141312;--mat:#f4f2ee;--ink:#ebe7df;--muted:#a19b90;--rule:#2e2b27;--accent:#d2a979;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#141312;--mat:#f4f2ee;--ink:#ebe7df;--muted:#a19b90;--rule:#2e2b27;--accent:#d2a979;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-4)/1.6 var(--face);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--rule);transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}
.skip:focus{left:16px}

.wrap,.masthead-in,.foot-in,.foot-copy{width:100%;max-width:1200px;margin-inline:auto;
  padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.minor,.nav a,.brand-name,.menu,.chip{font-size:var(--fs-6);letter-spacing:.16em;text-transform:uppercase;font-weight:500}

/* masthead */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.mark{display:block;flex:none;width:26px;height:30px;background:var(--ink);
  -webkit-mask:url(logo-mark.png) center/contain no-repeat;mask:url(logo-mark.png) center/contain no-repeat}
[data-preview] .mark{-webkit-mask-image:url(assets/logo-mark.png);mask-image:url(assets/logo-mark.png)}
.nav{display:flex;gap:32px}
.nav a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.menu{display:none;background:none;border:1px solid var(--rule);color:var(--ink);font-family:var(--face);padding:8px 14px;cursor:pointer}

main{display:block;padding-bottom:24px}

/* the section grid used everywhere */
.sec.stack{row-gap:18px}
.sec.stack .sec-title{grid-column:2}
.sec.stack .sec-body{grid-column:2}
.sec{display:grid;grid-template-columns:var(--title-col) minmax(0,1fr);gap:var(--gap);padding-block:56px;border-top:1px solid var(--rule)}
.sec-title{font-size:var(--fs-2);line-height:1.2}
.sec-body{min-width:0;display:grid;gap:22px;align-content:start}
.sec-body>p{max-width:64ch}
.minor{color:var(--muted)}
.sec-more{font-size:var(--fs-5)}

/* hero and page heads share one size */
.hero,.page-head{display:grid;gap:18px;padding-block:72px 56px;padding-left:calc(var(--title-col) + var(--gap))}
.hero h1,.page-head h1{font-size:var(--fs-1);line-height:1.15;letter-spacing:-.005em}
.hero p,.page-head>p{max-width:64ch;color:var(--muted)}
.hero .join{font-size:var(--fs-5);color:var(--ink);padding-top:16px;border-top:1px solid var(--rule);max-width:64ch}
.hero .join span{font-weight:500}

/* PI */
.pi{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:48px;align-items:start}
.pi-photo{margin:0}
.pi-text{display:grid;gap:14px;max-width:64ch}
.pi-name{font-size:var(--fs-3);font-weight:500}
.pi-roles{color:var(--muted);font-size:var(--fs-5);margin-top:-8px}
.pi-links{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:var(--fs-5)}

/* service */
.svc-grid{columns:2;column-gap:56px}
.svc-grid>.svc-group{break-inside:avoid;margin-bottom:36px}
.svc-rv{display:grid;gap:14px}
.svc-group{display:grid;gap:14px;align-content:start;min-width:0}
.svc{display:grid;gap:12px}
.svc li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline}
.svc-what{display:grid}
.svc-name{line-height:1.35}
.svc-role{font-size:var(--fs-5);color:var(--muted);line-height:1.4}
.svc-year{font-size:var(--fs-5);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;font-size:var(--fs-5);line-height:1.55}
.rv span{color:var(--muted)}

/* figures */
.fig{margin:0;display:grid;gap:10px;min-width:0}
.fig-mat{position:relative;background:var(--mat);border:1px solid var(--rule);aspect-ratio:8/7;max-width:100%;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}
.fig-big .fig-mat{aspect-ratio:16/10;padding:18px}
.fig-mat img{width:100%;height:100%;object-fit:contain}
.fig-empty{display:none}
.fig.is-empty .fig-empty{display:block;width:34px;height:40px;background:var(--rule);
  -webkit-mask:url(logo-mark.png) center/contain no-repeat;mask:url(logo-mark.png) center/contain no-repeat}
[data-preview] .fig.is-empty .fig-empty{-webkit-mask-image:url(assets/logo-mark.png);mask-image:url(assets/logo-mark.png)}
figcaption{font-size:var(--fs-5);line-height:1.4;color:var(--muted)}
figcaption a{text-decoration:none}
figcaption a:hover{text-decoration:underline}
.fig-venue{display:block;font-style:italic}

/* current research */
.dirs{display:grid;gap:32px}
.dir{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:36px;row-gap:10px;align-items:start;min-width:0}
.dir .fig{grid-row:1/3}
.dir h3{font-size:var(--fs-3);font-weight:500;line-height:1.3;margin-top:4px;text-wrap:pretty}
.dir h3 a{text-decoration:none}
.dir h3 a:hover{text-decoration:underline}
.dir>p{font-size:var(--fs-4);line-height:1.55;color:var(--ink)}

/* research page */
.r-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
.r-text{display:grid;gap:18px;align-content:start;max-width:none}
.topics{display:grid;gap:6px}
.topics li{padding-left:20px;position:relative}
.topics li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--muted)}
.r-text .minor{margin-top:10px}
.r-papers{display:grid;gap:12px}
.r-papers li{display:grid;font-size:var(--fs-5);line-height:1.4}
.r-papers span{color:var(--muted);font-style:italic}

/* publications */
.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:4px 24px}
.chip{background:none;border:0;border-bottom:1px solid transparent;padding:6px 0;color:var(--muted);font-family:var(--face);cursor:pointer}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.search{flex:0 1 320px}
.search input{width:100%;font:400 var(--fs-5) var(--face);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--muted);border-radius:0;padding:6px 0}
.search input::placeholder{color:var(--muted)}
.pubs{display:grid;gap:20px}
.pub{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px}
.pub-year{font-size:var(--fs-5);color:var(--muted);line-height:1.75;font-variant-numeric:tabular-nums lining-nums}
.pub-body{display:grid;gap:2px;min-width:0}
.pub-title{font-size:var(--fs-4);font-weight:500;line-height:1.4}
.pub-title a{text-decoration-color:var(--rule)}
.pub-title a:hover{text-decoration-color:var(--ink)}
.pub-meta{font-size:var(--fs-5);color:var(--muted);line-height:1.45}
.pub-meta b{font-weight:500;color:var(--ink)}
.pub-links{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:var(--fs-5);margin-top:2px}
.empty{padding-block:40px;color:var(--muted);padding-left:calc(var(--title-col) + var(--gap))}

/* people */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px}
.person{min-width:0;display:grid;gap:2px;align-content:start}
.portrait{aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--rule);margin-bottom:12px}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .45s ease}
.portrait:hover img,.person:hover .portrait img{filter:none}
/* touch screens have no hover: site.js colors a portrait while it sits in the middle of the screen
   (or when tapped). Without JS, touch screens simply show color. */
@media (hover:none){html:not(.js) .portrait img{filter:none}}
.portrait.on img{filter:none}
.portrait.ph{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--rule);color:var(--muted);font-size:30px;font-style:italic}
.p-name{font-weight:500;line-height:1.35}
.p-dept{font-size:var(--fs-5);color:var(--muted);line-height:1.4}
.al-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.al-group{display:grid;gap:14px;align-content:start}
.alumni{display:grid;gap:14px}
.alumni li{display:grid;font-size:var(--fs-5);line-height:1.45;color:var(--muted)}
.al-name{font-size:var(--fs-4);color:var(--ink);font-weight:500}
.al-now{font-style:italic}

/* generic items (teaching, research consortia) */
.item{display:grid;gap:4px;max-width:64ch}
.item+.item{padding-top:22px;border-top:1px solid var(--rule)}
.item-code{font-size:var(--fs-5);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.item-title{font-size:var(--fs-3);font-weight:500;line-height:1.35}
.item-meta{font-size:var(--fs-5);color:var(--muted);font-style:italic}
.plain{display:grid;gap:4px}
.pub-note{font-style:italic}
.row-k{font-size:var(--fs-5);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;line-height:1.75}

/* teaching */
.rows li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:24px;align-items:baseline;padding-block:14px;border-top:1px solid var(--rule)}
.rows li:first-child{border-top:0;padding-top:0}
.rows li:has(> :nth-child(2):last-child){grid-template-columns:110px minmax(0,1fr)}
.code{font-size:var(--fs-5);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.c-title{font-size:var(--fs-3);line-height:1.3}
.c-meta{font-size:var(--fs-5);color:var(--muted);font-style:italic;text-align:right}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:32px;padding-block:44px 28px}
.foot-in{display:grid;grid-template-columns:var(--title-col) repeat(3,minmax(0,1fr));gap:var(--gap);font-size:var(--fs-5);line-height:1.6;color:var(--muted)}
.foot-lab{display:grid;gap:14px;grid-column:span 1}
.foot-in{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.foot-copy{margin-top:36px;font-size:var(--fs-6);letter-spacing:.06em;color:var(--muted)}

/* responsive */
@media (max-width:1060px){
  :root{--title-col:190px;--gap:40px}
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .r-grid{grid-template-columns:1fr}
  .svc-grid{columns:1}
  .al-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--fs-1:28px;--fs-2:20px;--fs-3:17px;--fs-4:16.5px;--fs-5:14.5px;--gap:18px}
  .wrap,.masthead-in,.foot-in,.foot-copy{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .masthead-in{flex-wrap:wrap;min-height:60px;gap:0}
  .brand-name{font-size:11px;letter-spacing:.12em}
  .menu{display:block}
  .nav{width:100%;flex-wrap:wrap;gap:2px 22px;padding:4px 0 14px}
  .js .nav:not(.open){display:none}
  .sec{grid-template-columns:1fr;padding-block:40px}
  .sec.stack .sec-title,.sec.stack .sec-body{grid-column:1}
  .hero,.page-head,.empty{padding-left:0}
  .hero,.page-head{padding-block:44px 36px}
  .pi{grid-template-columns:1fr;gap:20px}.pi-photo{width:150px;grid-row:1}
  .rv{grid-template-columns:1fr;gap:2px}
  .dir{grid-template-columns:1fr;grid-template-rows:none}
  .dir .fig{grid-row:auto}
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .pub{grid-template-columns:1fr;gap:0}
  .rows li,.rows li:has(> :nth-child(2):last-child){grid-template-columns:1fr;gap:2px}
  .c-meta{text-align:left}
  .foot-in{grid-template-columns:1fr;gap:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}a{transition:none}}
@media print{.masthead,.filters,.foot,.menu{display:none}}

/* header name: full on wide screens, short below 1100px */
.brand-name{white-space:nowrap}
.bn-short{display:none}
@media (max-width:1100px){.bn-long{display:none}.bn-short{display:inline}}

/* below 1060px every section stacks its title above the content, so text uses the full width */
@media (max-width:1060px){
  .sec{grid-template-columns:1fr;row-gap:18px}
  .sec.stack .sec-title,.sec.stack .sec-body{grid-column:1}
  .hero,.page-head,.empty{padding-left:0}
  .pi{grid-template-columns:minmax(0,1fr) 170px}
}

/* quiet sections (Teaching, Resources): no rules between rows, spacing does the work */
.sec.quiet{border-top:0;padding-block:24px}
.sec.quiet+.sec.quiet{padding-top:8px}
.page-head+.sec.quiet{border-top:1px solid var(--rule);padding-top:40px}
.sec.quiet .rows li{border-top:0;padding-block:6px}
.sec.quiet .rows li:first-child{padding-top:0}
.sec.quiet .item+.item{border-top:0;padding-top:12px}

/* page intros are one or two sentences: let them use the full width and avoid a lone last word */
.page-head>p{max-width:none;text-wrap:pretty}
.hero p{text-wrap:pretty}
.sec.quiet.ruled,.sec.quiet+.sec.quiet.ruled{border-top:1px solid var(--rule);padding-top:32px;margin-top:20px}

/* student portraits a step smaller than the PI photo */
.people{grid-template-columns:repeat(5,minmax(0,150px));gap:32px 28px}
.people .portrait{max-width:150px}
@media (max-width:1060px){.people{grid-template-columns:repeat(4,minmax(0,140px))}}
@media (max-width:760px){.people{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}}

/* phones: desktop layout above is unchanged; these rules only apply at 760px and below */
@media (max-width:760px){
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* PI: photo first, then name and bio across the full width */
  .pi{grid-template-columns:1fr;gap:22px}
  .pi-photo{grid-row:1;width:160px}
  .pi-text{max-width:none}
  .pi-text p{text-wrap:pretty}
  /* body copy: slightly larger leading for small screens */
  .sec-body p,.hero p,.r-text p{line-height:1.62}
  /* publications: one swipeable row of categories instead of four wrapped lines */
  .page-head,.page-head>*{min-width:0}
  .filters{flex-direction:column;align-items:stretch;gap:14px;min-width:0;max-width:100%}
  .chips{flex-wrap:nowrap;overflow-x:auto;min-width:0;max-width:calc(100% + 36px);gap:0 22px;margin-inline:-18px;padding-inline:18px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:18px;
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;white-space:nowrap;scroll-snap-align:start;padding-block:10px}
  .search{flex:none;width:100%}
  .search input{font-size:16px} /* 16px keeps iOS from zooming on focus */
  /* people: three portraits per row, names and departments set a step smaller */
  .people{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 14px}
  .people .portrait{max-width:none}
  .p-name{font-size:16px;line-height:1.25}
  .p-dept{font-size:13.5px;line-height:1.35}
  /* larger tap targets in the menu */
  .nav a{padding-block:10px}
  .portrait img{transition:filter .6s ease}
  .sec.quiet .sec-title{font-size:19px}
}
@media (max-width:380px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Teaching and Resources: text uses the full content width instead of a 64-character measure */
.sec.quiet .sec-body>p,.sec.quiet .item{max-width:none;text-wrap:pretty}

/* Teaching: advising rows sit a step below the courses */
.sec.quiet.ruled .rows li>span:last-child{font-size:var(--fs-5)}

/* footer: one centered block (name, affiliation, address, contact) */
.foot-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.foot-in p{margin:0;text-wrap:balance}
.foot-name{color:var(--ink);font-size:var(--fs-3);margin-bottom:6px !important}
.foot-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 28px;margin-top:8px !important}
.foot-in .foot-copy{margin-top:26px !important;padding:0}
@media (max-width:760px){.foot-in{gap:6px}}
.foot .nw{white-space:nowrap}

/* alumni: a step smaller and tighter than current members */
.al-grid{gap:28px 48px}
.al-group{gap:10px}
.alumni{gap:9px}
.alumni li{font-size:14px;line-height:1.35}
.al-name{font-size:15.5px}

/* refinements: a neutral sans for navigation and small labels only (titles and the lab name stay in EB Garamond),
   slightly tighter capitals, a darker grey for secondary text, and a clearer monogram at small sizes */
:root{--sans:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;--muted:#57534b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted:#b4aea3}}
:root[data-theme="dark"]{--muted:#b4aea3}
.brand{gap:15px}
.mark{width:31px;height:35px}
.brand-name{letter-spacing:.12em}
.nav a,.menu,.chip,.minor,.foot-copy{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;font-weight:500}
.foot-copy{text-transform:none;letter-spacing:.02em;font-weight:400}
.pi{grid-template-columns:minmax(0,1fr) 184px}
@media (max-width:1060px){.pi{grid-template-columns:minmax(0,1fr) 160px}}
@media (max-width:760px){.mark{width:27px;height:31px}.brand{gap:12px}.pi{grid-template-columns:1fr}.pi-photo{width:150px}}