/* Minimal mode: a plainer, text-forward register of the same lab site.
   Built in the spirit of academic lab pages like pac.cs.cornell.edu, kept
   in the lab's own type (EB Garamond / Inter) and oxblood accent. No JS. */
:root{
  --bg:#FBFAF8; --ink:#241A1C; --muted:#5B4A4D; --accent:#6E1F2C; --rule:#DFD9D5; --panel:#F1E4E1;
  --serif:'EB Garamond',Garamond,Georgia,serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1040px; --gutter:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:3px;z-index:100}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0}
h1{font-size:clamp(28px,4.4vw,42px);letter-spacing:-.01em}
h2{font-size:clamp(21px,2.6vw,28px)}
h3{font-size:clamp(17px,1.9vw,20px)}
p{margin:0 0 1em}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 10px}
.lede{font-size:16px;line-height:1.6;color:var(--muted);margin-top:12px}
section{padding-block:clamp(32px,5vw,56px);scroll-margin-top:16px}
section + section{border-top:1px solid var(--rule)}
h2 + .box-grid{margin-top:20px}

/* header */
.m-header{border-bottom:1px solid var(--rule);padding-block:20px}
.m-bar{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.m-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:16px;color:var(--ink)}
.m-brand img{width:26px;height:auto}
.m-brand:hover{text-decoration:none}
.m-nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.m-nav a{color:var(--muted)}
.m-nav a:hover,.m-nav a[aria-current="page"]{color:var(--accent);text-decoration:none}

/* page head */
.m-head{padding-block:clamp(32px,5vw,56px) 0}
.m-head h1{max-width:720px}
.m-head .lede{max-width:640px}

/* box grid: findings, research areas, collaborators, how-to-join — every box shows
   everything it has permanently, no hover/JS needed (this is the chosen minimal
   register: plain, dense, always-readable, in the spirit of academic lab pages). */
.box-grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.box-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.box-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.box-grid.cols-4,.box-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.box-grid.cols-4,.box-grid.cols-3{grid-template-columns:1fr}}
.box{background:var(--bg);padding:18px;transition:background .15s}
a.box{display:block;color:inherit}
a.box:hover{text-decoration:none}
.box:hover{background:var(--panel)}
.box .n{display:block;font-size:11px;font-weight:700;color:var(--accent);margin-bottom:7px}
.box h3{font-size:clamp(16px,1.7vw,18px);line-height:1.2}
.box .role{font-size:11px;font-weight:600;color:var(--accent);margin:4px 0 0}
.box .meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.box p{margin:9px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6}
.box img{width:52px;height:52px;object-fit:cover;border-radius:3px;margin-bottom:11px}

/* PI card: pulled out of the grid entirely — its own full-width, shaded, top-bordered
   block, always fully expanded. Signals seniority by being a different kind of object,
   not just a bigger/darker version of the same box. */
.pi-card{margin-top:1px;background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--accent);display:grid;grid-template-columns:120px 1fr;gap:22px;padding:clamp(18px,3vw,28px)}
.pi-card img{width:120px;height:150px;object-fit:cover;border-radius:3px}
.pi-card h3{font-size:21px}
.pi-card .role{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:6px 0 11px}
.pi-card p{color:var(--muted);font-size:14px;line-height:1.7;max-width:620px;margin:0 0 .8em}
.pi-card .cv{font-size:12px;font-weight:600}
.pi-card .cv a{color:var(--accent)}
@media (max-width:560px){.pi-card{grid-template-columns:1fr}.pi-card img{width:90px;height:112px}}

/* citations */
.m-cites{list-style:none;margin:0;padding:0}
.m-cites li{border-top:1px solid var(--rule);padding:15px 0;color:var(--muted);font-size:14.5px;line-height:1.7}
.m-cites li:last-child{border-bottom:1px solid var(--rule)}
.m-cites em{font-style:italic}

/* contact / join */
.m-cj-line{font-size:14px;margin:0 0 .4em;color:var(--muted)}
.m-cj-line strong{color:var(--ink)}

/* links / buttons */
.m-btn{display:inline-block;color:var(--accent);font-weight:600;font-size:14px}
.m-btn:hover{text-decoration:underline}
.m-back{display:inline-block;margin-bottom:24px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--rule)}
.m-back:hover{color:var(--accent);text-decoration:none;border-color:var(--accent)}

/* footer */
.m-footer{border-top:1px solid var(--rule);padding-block:18px;flex-shrink:0}
.m-foot{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:12.5px;color:var(--muted)}
.m-foot a{color:var(--muted);font-weight:600}
.m-foot a:hover{color:var(--accent)}