/* Site styles. Content lives in the content/ folder; this file only controls appearance. */
:root{
  --paper:#F6F8FA;
  --surface:#FFFFFF;
  --ink:#1A2330;
  --muted:#586474;
  --rule:#D9DFE6;
  --accent:#2E4F8F;
  --grid:#7F97B8;
  --serif:"Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:"Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --measure:68ch;
}
:root[data-theme="dark"]{
  --paper:#131A23; --surface:#1A2330; --ink:#E6EAF0; --muted:#A3AEBD;
  --rule:#2C3746; --accent:#9DB6E6; --grid:#5E7699;
}
.theme-toggle{
  font:inherit; font-family:var(--sans); font-size:.85rem; color:var(--muted);
  background:none; border:1px solid var(--rule); border-radius:6px;
  padding:.3rem .55rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:15px; height:15px}
.head-right{display:flex; align-items:center; gap:.75rem}
*{box-sizing:border-box}
:root{box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* Header */
.site-head{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:10;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
}
.head-inner{
  max-width:1160px; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.brand{font-family:var(--sans); font-weight:600; font-size:.98rem; color:var(--ink); text-decoration:none; letter-spacing:-.005em}
.nav{display:flex; gap:.25rem; flex-wrap:wrap; font-family:var(--sans); font-size:.93rem}
.nav a{color:var(--muted); text-decoration:none; padding:.35rem .7rem; border-radius:6px}
.nav a:hover{color:var(--ink); background:var(--rule)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); border-radius:0}

.wrap{max-width:1160px; margin:0 auto; padding:0 1.5rem}
.page{display:none}
.page.active{display:block}

h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.2; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem, 4.6vw, 3.4rem); margin:0 0 1rem}
h2{font-size:1.6rem; margin:0 0 .9rem}
h3{font-size:1.15rem; margin:0 0 .4rem}
.page-title{font-size:clamp(1.9rem,3.6vw,2.6rem); margin:3rem 0 2rem}
.small{font-family:var(--sans); font-size:.88rem; color:var(--muted)}

/* Hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule); min-height:380px}
.hero svg{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(to right, transparent 8%, #000 55%);
          mask-image:linear-gradient(to right, transparent 8%, #000 55%);
}
.hero .wrap{position:relative; padding-top:4.5rem; padding-bottom:5rem}
.hero-text{max-width:34rem}
.hero-meta{font-family:var(--sans); color:var(--muted); font-size:.98rem; line-height:1.55; margin:0}
.hero-meta strong{color:var(--ink); font-weight:600}
.hero figcaption{
  position:absolute; right:1.5rem; bottom:.8rem; margin:0; max-width:46rem; text-align:right;
  font-family:var(--sans); font-size:.74rem; line-height:1.4; color:var(--muted);
}
.hero svg{cursor:crosshair}
.hero-controls{
  position:absolute; right:1.5rem; top:1rem; display:flex; align-items:center; gap:.75rem;
  font-family:var(--sans); font-size:.82rem; color:var(--muted);
}
.hero-controls button{
  font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--rule);
  border-radius:6px; padding:.25rem .65rem; cursor:pointer;
}
.hero .wrap, .hero-controls, .hero figcaption{pointer-events:none}
.hero-text a, .hero-controls button{pointer-events:auto}
@media (max-width:720px){
  .hero svg{opacity:.45; -webkit-mask-image:none; mask-image:none}
  .hero figcaption{display:none}
  .hero-controls{top:auto; bottom:.8rem; right:1rem}
  .hero-controls span{display:none}
  .hero{min-height:0}
  .hero .wrap{padding-top:3rem; padding-bottom:2.5rem}
  .nav{flex-wrap:nowrap; overflow-x:auto; width:100%; margin:0 -.7rem}
}

/* Home layout */
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:4rem; padding:3.5rem 0 1rem}
.intro p{max-width:var(--measure); margin:0 0 1.15rem}
.aside{font-family:var(--sans); font-size:.95rem; line-height:1.55}
.aside img{width:180px; border-radius:6px; margin-bottom:1.5rem}
.aside h3{font-family:var(--sans); font-size:.95rem; font-weight:600; margin:1.6rem 0 .5rem; color:var(--ink)}
.aside p{margin:0 0 .75rem; color:var(--muted)}
.aside p b{color:var(--ink); font-weight:500}
@media (max-width:860px){.home-grid{grid-template-columns:1fr; gap:2rem}}

/* Funding */
.funding{padding:2.5rem 0 0}
.funding h2{border-top:1px solid var(--rule); padding-top:2.5rem}
.fund-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:1.25rem; max-width:64rem}
.fund{padding:1.1rem 1.25rem; border:1px solid var(--rule); border-radius:6px; background:var(--surface)}
.fund h3{margin:0 0 .4rem; font-size:1.1rem}
.fund p{margin:0; font-family:var(--sans); font-size:.92rem; color:var(--muted); line-height:1.5}
.fund .fund-sponsor{font-size:.82rem; margin-bottom:.35rem}
.fund-feature{border-left:4px solid var(--accent)}
.fund-feature h3{font-size:1.45rem}
.fund-feature p{color:var(--ink)}
.fund-feature .fund-sponsor{color:var(--muted)}
.fund-link{margin-top:.6rem !important}
@media (max-width:860px){.fund-grid{grid-template-columns:1fr 1fr}.fund-feature{grid-column:1 / -1}}
@media (max-width:520px){.fund-grid{grid-template-columns:1fr}}

/* Updates */
.updates{padding:2.5rem 0 4rem}
.updates h2{border-top:1px solid var(--rule); padding-top:2.5rem}
.timeline{list-style:none; margin:0; padding:0; max-width:52rem}
.timeline li{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1.5rem; padding:1.1rem 0; border-bottom:1px solid var(--rule)}
.timeline .when{font-family:var(--sans); font-size:.85rem; color:var(--muted); padding-top:.2rem}
.timeline .what p{margin:0 0 .3rem}
.timeline img{margin-top:.8rem; max-height:260px; width:auto; border-radius:4px}
@media (max-width:600px){.timeline li{grid-template-columns:1fr; gap:.2rem}}

/* Research */
.research{display:grid; grid-template-columns:240px minmax(0,1fr); gap:3.5rem; padding-bottom:4rem}
.toc{position:sticky; top:5.2rem; align-self:start; font-family:var(--sans); font-size:.88rem; line-height:1.4}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--rule)}
.toc a{display:block; padding:.4rem 0 .4rem .9rem; color:var(--muted); text-decoration:none; margin-left:-1px; border-left:2px solid transparent}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink); border-left-color:var(--accent)}
.project{
  padding:2rem 2.25rem 1.75rem; margin-bottom:1.75rem; border-radius:10px; scroll-margin-top:5.5rem;
  background:color-mix(in srgb, var(--pc, var(--accent)) 10%, var(--paper));
}
:root[data-theme="dark"] .project{background:color-mix(in srgb, var(--pc-dark, var(--accent)) 11%, var(--paper))}
@media (max-width:600px){.project{padding:1.4rem 1.1rem 1.2rem; border-radius:8px}}
.project p{max-width:var(--measure); margin:0 0 1.1rem}
.cite{font-family:var(--sans); font-size:.92rem; color:var(--muted); max-width:var(--measure)}
.files{display:flex; flex-wrap:wrap; gap:.5rem; font-family:var(--sans); font-size:.85rem; margin:0 0 1.3rem}
.project p.files{max-width:none}
.files a{display:inline-block; padding:.3rem .7rem; border:1px solid color-mix(in srgb, var(--pc, var(--accent)) 45%, transparent); border-radius:999px; background:var(--paper); text-decoration:none; line-height:1.3}
.files a:hover{background:color-mix(in srgb, var(--pc, var(--accent)) 10%, var(--paper))}
.figs{display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.25rem; margin:1.5rem 0 .5rem}
.figs > figure{flex:var(--ar,1.5) 1 0; min-width:min(100%, calc(var(--ar,1.5) * 170px)); max-width:calc(var(--ar,1.5) * 400px)}
.figs > figure img, .figs > figure video{width:100%; height:auto; aspect-ratio:var(--ar)}
figure{margin:0}
figure img, figure video{
  border-radius:4px; background:#fff; padding:6px; object-fit:contain;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent);
}
.timeline img{box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent)}
figure video{width:100%; height:auto; display:block}
figcaption{font-family:var(--sans); font-size:.85rem; color:var(--muted); margin-top:.5rem; line-height:1.45}
.placeholder{border:1px dashed var(--rule); border-radius:4px; padding:1.1rem; font-family:var(--sans); font-size:.88rem; color:var(--muted); max-width:640px; margin:1rem 0}
@media (max-width:860px){.research{grid-template-columns:1fr; gap:1rem}.toc{position:static}}

/* People */
.people{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:2.5rem; padding-bottom:5rem}
.person img{width:100%; aspect-ratio:269/323; object-fit:cover; border-radius:6px; margin-bottom:.9rem}
.person h3{margin:0 0 .2rem}
.person p{margin:0; font-family:var(--sans); font-size:.92rem; color:var(--muted); line-height:1.45}

/* Publications */
.pubs{max-width:54rem; padding-bottom:5rem}
.pubs h2{font-size:1.25rem; margin:2.5rem 0 1rem; font-family:var(--sans); font-weight:600}
.pubs h2:first-child{margin-top:0}
.publist{margin:0; padding-left:2.2rem}
.publist li{padding:.55rem 0 .55rem .3rem; border-bottom:1px solid var(--rule)}
.publist li::marker{font-family:var(--sans); font-size:.85rem; color:var(--muted)}
.pdf{font-family:var(--sans); font-size:.82rem; margin-left:.35rem; white-space:nowrap}

/* Teaching */
.courses{max-width:46rem; padding-bottom:5rem}
.course{padding:1.3rem 0; border-bottom:1px solid var(--rule)}
.course h2{font-size:1.3rem; margin:0 0 .3rem}
.course p{margin:0; font-family:var(--sans); font-size:.95rem; color:var(--muted)}
.course a{font-family:var(--sans); font-size:.95rem}

.img-missing{
  display:flex; align-items:center; justify-content:center; min-height:140px; padding:1rem;
  border:1px dashed var(--rule); border-radius:4px; background:var(--surface);
  font-family:var(--sans); font-size:.8rem; color:var(--muted); text-align:center;
}
.aside .img-missing{width:180px; height:216px; margin-bottom:1.5rem}
.timeline .img-missing{max-width:320px; margin-top:.8rem}

.load-error{font-family:var(--sans); font-size:.9rem; color:#9B1C1C; background:#FDECEC; border-radius:6px; padding:.75rem 1rem}
.timeline img{max-width:min(100%, 640px)}

footer{border-top:1px solid var(--rule); padding:1.5rem 0 2rem; font-family:var(--sans); font-size:.85rem; color:var(--muted)}