/* ============================================================
   CVIG Lab — Computer Vision, Imaging & Graphics, IIT Gandhinagar
   Editorial academic theme: Newsreader / Inter / JetBrains Mono,
   canvas paper, ink type, navy accent. Shared by all pages.
   ============================================================ */

:root{
  --bg:#fafaf9;
  --surface:#ffffff;
  --surface-2:#f4f4f2;
  --ink:#111827;
  --ink-2:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-2:#d1d5db;
  --accent:#1d4ed8;
  --accent-ink:#0f2b5c;
  --accent-tint:#eef2fb;
  --award:#8a5a00;   --award-bg:#fbf3e2;
  --defense:#0f5c3a; --defense-bg:#e8f4ee;
  --paper:#1d4ed8;   --paper-bg:#eef2fb;
  --service:#5b3b8c; --service-bg:#f1edf8;

  /* one family throughout (after prajwalsingh.github.io); mono only for BibTeX */
  --f-sans:"Lato",Verdana,Helvetica,sans-serif;
  --f-serif:var(--f-sans);
  --f-mono:var(--f-sans);
  --f-code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1120px;
  --gutter:24px;
  --r:4px;
  color-scheme:light;
}
/* Theme follows the system setting; the header toggle overrides it (saved per visitor). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:#15181e; --surface:#1b1f27; --surface-2:#222731;
  --ink:#e7e9ee; --ink-2:#c3c8d2; --muted:#8b93a3;
  --line:#262b36; --line-2:#333a47;
  --accent:#8fb0ff; --accent-ink:#c9d7ff; --accent-tint:#1a2233;
  --award:#e2b866; --award-bg:#2a2416;
  --defense:#7fd1a8; --defense-bg:#16261f;
  --paper:#8fb0ff; --paper-bg:#1a2233;
  --service:#c3a8ef; --service-bg:#231d30;
  color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15181e; --surface:#1b1f27; --surface-2:#222731;
  --ink:#e7e9ee; --ink-2:#c3c8d2; --muted:#8b93a3;
  --line:#262b36; --line-2:#333a47;
  --accent:#8fb0ff; --accent-ink:#c9d7ff; --accent-tint:#1a2233;
  --award:#e2b866; --award-bg:#2a2416;
  --defense:#7fd1a8; --defense-bg:#16261f;
  --paper:#8fb0ff; --paper-bg:#1a2233;
  --service:#c3a8ef; --service-bg:#231d30;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-serif); font-weight:500; color:var(--ink); margin:0; line-height:1.15; letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.sr-only{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(--bg); padding:8px 12px; z-index:100}
.skip:focus{left:8px}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px}
.brand{display:flex; align-items:baseline; gap:10px; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand__name{font-family:var(--f-serif); font-size:1.35rem; font-weight:600; letter-spacing:-.01em}
.brand__sub{font-size:.78rem; color:var(--muted)}
.site-nav{display:flex; gap:26px; align-items:center}
.site-nav a{color:var(--ink-2); font-size:.92rem}
.site-nav a:hover{color:var(--ink); text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}
.nav-toggle{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--ink); font:500 .85rem var(--f-sans); padding:6px 10px; cursor:pointer}
@media (max-width:760px){
  .nav-toggle{display:block}
  .brand__sub{display:none}
  .site-nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:6px var(--gutter) 12px}
  .site-nav a{padding:10px 0; border-top:1px solid var(--line)}
  .site-nav a[aria-current="page"]{box-shadow:none; font-weight:600}
  .site-header.is-open .site-nav{display:flex}
}

/* ---------- masthead (home) ---------- */
.masthead{padding:64px 0 36px; border-bottom:1px solid var(--line)}
.masthead__grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:56px; align-items:end}
.kicker{font-size:.95rem; color:var(--muted); margin:0 0 18px; max-width:60ch}
.masthead h1{font-size:clamp(2.4rem,6vw,4.6rem); font-weight:400; line-height:1.02; letter-spacing:-.025em;
  font-variation-settings:"opsz" 72; text-wrap:balance; max-width:16ch}
.masthead h1 em{font-style:italic}
.masthead__lede{font-size:1.12rem; color:var(--ink-2); max-width:58ch; margin-top:18px}
.masthead__facts{margin:0; padding:0; list-style:none; border-left:1px solid var(--line); padding-left:22px; font-size:.92rem; color:var(--ink-2)}
.masthead__facts li{padding:7px 0; border-bottom:1px solid var(--line)}
.masthead__facts li:last-child{border-bottom:0}
.masthead__facts b{display:block; font-weight:500; font-size:.8rem; color:var(--muted)}

/* ---------- research highlights strip ---------- */
.highlights{padding:36px 0 56px}
.highlights__head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:18px}
.highlights__head h2{font-size:1.25rem}
.strip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px}
@media (max-width:1000px){
  .strip{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(230px,42%);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; overscroll-behavior-x:contain}
  .strip>*{scroll-snap-align:start}
}
@media (max-width:560px){.strip{grid-auto-columns:78%}}
.teaser{display:flex; flex-direction:column; min-width:0}
.teaser__title{font-family:var(--f-serif); font-size:1.02rem; line-height:1.3; margin:10px 0 6px; font-weight:500}
.teaser__title a{color:var(--ink)}
.teaser__desc{font-size:.86rem; color:var(--muted); margin:0 0 8px; line-height:1.45}
.teaser__link{font-size:.84rem; margin-top:auto}

/* media slot: holds an <img>/<video>; shows a quiet placeholder when empty */
.media{position:relative; aspect-ratio:4/3; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin:0}
.media img,.media video,.media canvas{width:100%; height:100%; object-fit:cover; display:block}
/* empty slot: a muted Macbeth ColorChecker, the imaging lab's calibration target */
.media.is-empty{background:#1f2328; border-color:#1f2328}
.checker{position:absolute; inset:9% 9% 25%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr)); gap:4px; filter:saturate(.82)}
.checker i{border-radius:2px; background:var(--c)}
.checker i:nth-child(1){--c:#735244}.checker i:nth-child(2){--c:#c29682}.checker i:nth-child(3){--c:#627a9d}
.checker i:nth-child(4){--c:#576c43}.checker i:nth-child(5){--c:#8580b1}.checker i:nth-child(6){--c:#67bdaa}
.checker i:nth-child(7){--c:#d67e2c}.checker i:nth-child(8){--c:#505ba6}.checker i:nth-child(9){--c:#c15a63}
.checker i:nth-child(10){--c:#5e3c6c}.checker i:nth-child(11){--c:#9dbc40}.checker i:nth-child(12){--c:#e0a32e}
.checker i:nth-child(13){--c:#383d96}.checker i:nth-child(14){--c:#469449}.checker i:nth-child(15){--c:#af363c}
.checker i:nth-child(16){--c:#e7c71f}.checker i:nth-child(17){--c:#bb5695}.checker i:nth-child(18){--c:#0885a1}
.checker i:nth-child(19){--c:#f3f3f2}.checker i:nth-child(20){--c:#c8c8c8}.checker i:nth-child(21){--c:#a0a0a0}
.checker i:nth-child(22){--c:#7a7a79}.checker i:nth-child(23){--c:#555555}.checker i:nth-child(24){--c:#343434}
.media.is-empty::after{content:attr(data-label); position:absolute; left:9%; right:9%; bottom:6%;
  font-family:var(--f-serif); font-style:italic; font-size:1.05rem; line-height:1.2; color:#e7e9ee;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* the one load moment: highlight charts expose patch by patch */
@media (prefers-reduced-motion:no-preference){
  .strip .checker i{animation:expose .5s ease-out both; animation-delay:calc(var(--i) * 18ms + var(--d,0ms))}
  @keyframes expose{from{opacity:0}}
}
.media--wide{aspect-ratio:16/10}

/* ---------- venue badge & tags ---------- */
.venue{display:inline-block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.02em; line-height:1;
  color:var(--accent-ink); background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  padding:4px 6px; border-radius:3px; white-space:nowrap}
.tag{display:inline-block; font-family:var(--f-mono); font-size:.68rem; line-height:1; padding:4px 6px; border-radius:3px;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); white-space:nowrap}
.tag--award{color:var(--award); background:var(--award-bg); border-color:transparent}
.tag--defense{color:var(--defense); background:var(--defense-bg); border-color:transparent}
.tag--paper{color:var(--paper); background:var(--paper-bg); border-color:transparent}
.tag--service{color:var(--service); background:var(--service-bg); border-color:transparent}
.tag--fellow{color:var(--award); background:var(--award-bg); border-color:transparent}
.tags{display:flex; flex-wrap:wrap; gap:6px}

/* ---------- sections ---------- */
.section{padding:64px 0; border-top:1px solid var(--line)}
.section--alt{background:var(--surface)}
.section-head{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; margin-bottom:28px}
.section-head h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.section-head p{grid-column:1/-1; color:var(--muted); max-width:66ch; margin:6px 0 0}
.section-head__more{font-size:.9rem; white-space:nowrap}
.page-head{padding:56px 0 32px}
.page-head h1{font-size:clamp(2rem,4.4vw,3rem); font-weight:400}
.page-head p{color:var(--ink-2); max-width:64ch; margin-top:12px; font-size:1.05rem}
.prose{max-width:68ch; color:var(--ink-2); font-size:1.04rem}
.two-col{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px}

/* research areas: numbered editorial list */
.areas{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px}
.areas li{padding:18px 0; border-top:1px solid var(--line)}
.areas h3{font-size:1.15rem; margin-bottom:4px}
.areas p{margin:0; color:var(--muted); font-size:.94rem}

/* ---------- publications ---------- */
.pubs{list-style:none; margin:0; padding:0}
.pub{display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:22px 0; border-top:1px solid var(--line)}
.pub:first-child{border-top:0}
.pub .media{aspect-ratio:16/10}
.pub .media.is-empty::after{font-size:.92rem}
.pub .checker{gap:3px}
.pub__title{font-family:var(--f-serif); font-size:1.15rem; line-height:1.3; font-weight:500; margin:0 0 4px}
.pub__title a{color:var(--ink)}
.pub__authors{font-size:.92rem; color:var(--ink-2); margin:0 0 6px}
.pub__authors b{font-weight:600; color:var(--ink)}
.pub__meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; font-size:.86rem; color:var(--muted)}
.pub__actions{display:flex; flex-wrap:wrap; gap:6px}
.act{display:inline-flex; align-items:center; gap:4px; font:500 .78rem var(--f-sans); color:var(--ink-2);
  border:1px solid var(--line-2); background:var(--surface); border-radius:3px; padding:3px 9px; cursor:pointer; text-decoration:none}
.act:hover{border-color:var(--ink-2); color:var(--ink); text-decoration:none}
.act[aria-disabled="true"]{opacity:.45; pointer-events:none}
.act[aria-expanded="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.bibtex{grid-column:1/-1; position:relative; margin-top:4px}
.bibtex[hidden]{display:none}
.bibtex pre{margin:0; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; font:.78rem/1.55 var(--f-code); color:var(--ink-2); overflow-x:auto; white-space:pre}
.bibtex .copy{position:absolute; top:8px; right:8px}
.year-group{margin-top:36px}
.year-group>h2{font-size:1.6rem; font-weight:400; font-variant-numeric:oldstyle-nums; color:var(--ink);
  padding-bottom:8px; border-bottom:1px solid var(--ink); margin-bottom:0}
.filters{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
@media (max-width:640px){
  .pub{grid-template-columns:minmax(0,1fr); gap:12px}
  .pub .media{max-width:none}
}

/* patents */
.patents{list-style:none; margin:0; padding:0}
.patents li{display:grid; grid-template-columns:170px minmax(0,1fr); gap:20px; padding:14px 0; border-top:1px solid var(--line); font-size:.94rem}
.patents .mono{font-size:.78rem; color:var(--muted)}
.patents .t{font-family:var(--f-serif); font-size:1.05rem; color:var(--ink)}
.patents .t a{color:var(--ink)}
.patents-group{margin-top:24px}
.patents-group>h3{font-size:1.15rem; margin-bottom:6px}
.h-section{font-size:clamp(1.6rem,3vw,2.1rem)}
@media (max-width:640px){.patents li{grid-template-columns:minmax(0,1fr); gap:4px}}

/* ---------- people ---------- */
.group{margin-top:48px}
.group:first-child{margin-top:0}
.group>h2{font-size:1.4rem; padding-bottom:10px; border-bottom:1px solid var(--ink); margin-bottom:22px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.group>h2 .count{font-family:var(--f-mono); font-size:.76rem; color:var(--muted); font-weight:400}
.people{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px 24px}
.people--compact{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:22px 20px}
.person{display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:start}
.photo{width:72px; aspect-ratio:4/5; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; overflow:hidden; margin:0; position:relative}
.photo img{width:100%; height:100%; object-fit:cover}
/* fallback: neutral silhouette when no photo is placed */
.photo.is-empty::after{content:""; position:absolute; inset:0; background-color:var(--line-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Ccircle cx='20' cy='19' r='8'/%3E%3Cpath d='M5 50c0-10 7-16 15-16s15 6 15 16z'/%3E%3C/svg%3E") center/62% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Ccircle cx='20' cy='19' r='8'/%3E%3Cpath d='M5 50c0-10 7-16 15-16s15 6 15 16z'/%3E%3C/svg%3E") center/62% no-repeat}
.people--compact .person{grid-template-columns:56px minmax(0,1fr)}
.people--compact .photo{width:56px}
.person__name{font-family:var(--f-serif); font-size:1.08rem; font-weight:500; margin:0; line-height:1.25}
.person__meta{font-size:.82rem; color:var(--muted); margin:2px 0 6px}
.person__topic{font-size:.86rem; color:var(--ink-2); margin:0 0 6px; line-height:1.4}
.person .tags{margin-bottom:6px}
.links{display:flex; flex-wrap:wrap; gap:10px; font-size:.8rem}
.links a{color:var(--muted)}
.links a:hover{color:var(--accent)}
.pi{display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; align-items:start}
.pi .photo{width:150px}
.pi__name{font-size:1.7rem; font-weight:500}
.pi__role{color:var(--ink-2); margin:6px 0 12px}
.pi ul{margin:0 0 14px; padding-left:18px; color:var(--ink-2); font-size:.95rem}
.pi .links{font-size:.88rem; gap:16px}
@media (max-width:560px){.pi{grid-template-columns:96px minmax(0,1fr); gap:18px}.pi .photo{width:96px}}
.alumni{width:100%; border-collapse:collapse; font-size:.92rem}
.alumni th,.alumni td{text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.alumni th{font-weight:500; font-size:.82rem; color:var(--muted)}
.alumni td:first-child{font-family:var(--f-serif); font-size:1.02rem; color:var(--ink)}
.table-scroll{overflow-x:auto}
.note{font-size:.84rem; color:var(--muted); margin-top:16px}

/* ---------- news timeline ---------- */
.news{list-style:none; margin:0; padding:0; border-left:1px solid var(--line-2); margin-left:6px}
.news li{position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; padding:12px 0 12px 22px}
.news li::before{content:""; position:absolute; left:-4px; top:20px; width:7px; height:7px; border-radius:50%;
  background:var(--bg); border:1px solid var(--muted)}
.news time{font-family:var(--f-mono); font-size:.78rem; color:var(--muted); padding-top:3px}
.news p{margin:0; color:var(--ink-2)}
.news .tag{margin-right:8px; vertical-align:1px}
.news li.is-featured::before{background:var(--accent); border-color:var(--accent); width:9px; height:9px; left:-5px}
.news li.is-featured p{color:var(--ink); font-weight:500}
@media (max-width:560px){.news li{grid-template-columns:minmax(0,1fr); gap:2px}}

/* ---------- misc blocks ---------- */
.course{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.course .mono{color:var(--muted)}
.course h3{font-size:1.2rem}
.course p{margin:4px 0 0; color:var(--muted)}
.contact{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0}
.contact dt{font-size:.85rem; font-weight:500; color:var(--muted)}
.contact dd{margin:6px 0 0; color:var(--ink-2)}
.btn{display:inline-block; font:500 .9rem var(--f-sans); padding:9px 16px; border-radius:var(--r); border:1px solid var(--ink);
  color:var(--bg); background:var(--ink); text-decoration:none}
.btn:hover{text-decoration:none; opacity:.88}
.btn--line{background:transparent; color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
@media (max-width:860px){
  .masthead__grid,.two-col{grid-template-columns:minmax(0,1fr); gap:28px}
  .masthead__facts{border-left:0; padding-left:0; border-top:1px solid var(--line)}
  .areas{grid-template-columns:minmax(0,1fr)}
  .contact{grid-template-columns:minmax(0,1fr)}
  .course{grid-template-columns:minmax(0,1fr)}
  .section{padding:48px 0}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:28px 0 40px; font-size:.86rem; color:var(--muted)}
.site-footer__inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}
.site-footer a{color:var(--muted)}
.site-footer__inner>span:last-child{display:flex; gap:18px}

.teaser .tags{margin-top:10px}
#contact .contact{margin-top:32px}
.person>div{min-width:0}
.person .tag{white-space:normal; max-width:100%; line-height:1.3}
/* paper figures sit whole on a white mat, as on the printed page */
.media:not(.is-empty){background:#fff}
.media img{object-fit:contain; padding:6px}

/* ============ v3: data-driven layout, graphics, motion ============ */
.masthead__grid{align-items:center}
.masthead__lede{max-width:46ch}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:28px 0 0; padding-top:18px; border-top:1px solid var(--line)}
.facts dt{font-size:.8rem; color:var(--muted)}
.facts dd{margin:4px 0 0; font-family:var(--f-serif); font-size:1.15rem; color:var(--ink); line-height:1.25}
.facts dd span{display:block; font-family:var(--f-sans); font-size:.8rem; color:var(--muted); margin-top:3px}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.facts>div:first-child{grid-column:1/-1}}

.teaser__fig{display:block; border-radius:var(--r)}
.teaser__fig:hover{text-decoration:none}

/* research */
.research-intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:40px; align-items:center; margin-bottom:36px}
.research-intro p{color:var(--ink-2); font-size:1.08rem; max-width:44ch}
.area-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px}
.area h3{font-size:1.12rem; margin:12px 0 4px}
.area p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.5}

/* selected publications gallery */
.pubgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 22px}
.pubgrid .venue{margin-top:10px}
.pubgrid h3{font-size:.98rem; line-height:1.3; margin-top:8px}
.pubgrid h3 a{color:var(--ink)}

/* news with figures + people peek */
.news__body{min-width:0}
.news__img{width:160px; aspect-ratio:16/10; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:3px; margin-top:10px; padding:4px}
.peek{align-self:start; position:sticky; top:84px; border:1px solid var(--line); background:var(--bg); border-radius:var(--r); padding:22px}
.peek h2{font-size:1.4rem; margin-bottom:16px}
.peek__count{color:var(--ink-2); margin:16px 0}
.peek__count b{font-family:var(--f-serif); font-size:1.4rem; font-weight:500; color:var(--ink)}
.join-text{margin-top:28px}

@media (max-width:1000px){.pubgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .research-intro{grid-template-columns:minmax(0,1fr); gap:20px}
  .area-grid,.pubgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peek{position:static}
}
@media (max-width:520px){.area-grid,.pubgrid{grid-template-columns:minmax(0,1fr)}}

/* ---- motion: one load sequence + scroll reveals + responsive figures ---- */
@media (prefers-reduced-motion:no-preference){
  .media img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  a:hover .media img,.pubgrid li:hover .media img,.area:hover .media img{transform:scale(1.04)}
  .masthead h1,.masthead__lede,.masthead .kicker,.facts{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .masthead .kicker{animation-delay:.05s}.masthead h1{animation-delay:.12s}
  .masthead__lede{animation-delay:.24s}.facts{animation-delay:.36s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)}}
  .js [data-reveal]>*{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  .js [data-reveal].is-in>*{opacity:1; transform:none}
  .js [data-reveal].is-in>*:nth-child(2){transition-delay:.06s}
  .js [data-reveal].is-in>*:nth-child(3){transition-delay:.12s}
  .js [data-reveal].is-in>*:nth-child(4){transition-delay:.18s}
  .js [data-reveal].is-in>*:nth-child(5){transition-delay:.24s}
  .js [data-reveal].is-in>*:nth-child(6){transition-delay:.3s}
  .js [data-reveal].is-in>*:nth-child(7){transition-delay:.36s}
  .js [data-reveal].is-in>*:nth-child(8){transition-delay:.42s}
}

/* ============ type system: Lato only ============ */
body{line-height:1.65}
h1,h2,h3,h4{font-weight:700; letter-spacing:0; font-variation-settings:normal}
.masthead h1,.page-head h1{font-weight:400; letter-spacing:-.02em; line-height:1.04}
.masthead h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
.section-head h2,.h-section,.group>h2{font-size:clamp(1.45rem,2.4vw,1.65rem); font-weight:700; line-height:1.2}
.highlights__head h2{font-size:1.15rem}
.year-group>h2{font-size:1.45rem; font-variant-numeric:normal}
.brand__name{font-size:1.2rem; font-weight:700; letter-spacing:0}
.site-nav a{font-size:.94rem; font-weight:700}
.pub__title,.teaser__title,.pubgrid h3,.area h3,.person__name,.pi__name,.course h3,.patents .t,.patents-group>h3{font-weight:700; letter-spacing:0}
.pub__title{font-size:1.125rem; line-height:1.35}
.teaser__title{font-size:1rem; line-height:1.35}
.pi__name{font-size:1.5rem}
.pub__authors{font-size:.94rem; line-height:1.55}
.pub__authors b,.patents b{font-weight:700}
.pub__meta>span:not(.venue){font-style:italic}
.venue{font-size:.8rem; font-weight:600; letter-spacing:0}
.tag{font-size:.78rem; font-weight:600}
.act{font-size:.84rem; font-weight:600}
.links{font-weight:600}
.facts dd{font-size:1.05rem; font-weight:700}
.peek__count b{font-weight:700; font-size:1.25rem}
.news time,.mono,.patents .mono{font-size:.88rem; font-weight:600; letter-spacing:0}
.media.is-empty::after{font-style:normal; font-weight:700; font-size:1.1rem; letter-spacing:.02em}
.alumni td:first-child{font-weight:700; font-size:.98rem}

/* dark theme: dim paper figures so white mats don't glare */
:root[data-theme="dark"] .media:not(.is-empty){background:#e6e6e2; border-color:var(--line)}
:root[data-theme="dark"] .media img,:root[data-theme="dark"] .news__img{filter:brightness(.86) contrast(1.04)}
:root[data-theme="dark"] .news__img{background:#e6e6e2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .media:not(.is-empty){background:#e6e6e2; border-color:var(--line)}
  :root:not([data-theme="light"]) .media img,:root:not([data-theme="light"]) .news__img{filter:brightness(.86) contrast(1.04)}
  :root:not([data-theme="light"]) .news__img{background:#e6e6e2}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{opacity:0; transform:rotate(60deg) scale(.6)}
  :root:not([data-theme="light"]) .theme-toggle .i-sun{opacity:1; transform:none}
}

/* header: nav + theme toggle */
.site-header__inner>.site-nav{margin-left:auto}
.header-tools{display:flex; align-items:center; gap:10px; margin-left:22px}
.theme-toggle{display:grid; place-items:center; width:36px; height:36px; padding:0; cursor:pointer;
  background:transparent; color:var(--ink-2); border:1px solid var(--line-2); border-radius:50%}
.theme-toggle:hover{color:var(--ink); border-color:var(--ink-2)}
.theme-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; grid-area:1/1}
.theme-toggle .i-moon{fill:currentColor; stroke:none}
.theme-toggle .i-sun{opacity:0; transform:rotate(-60deg) scale(.6)}
:root[data-theme="dark"] .theme-toggle .i-moon{opacity:0; transform:rotate(60deg) scale(.6)}
:root[data-theme="dark"] .theme-toggle .i-sun{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){.theme-toggle svg{transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1)}}
@media (max-width:760px){.header-tools{margin-left:auto}}