:root{
--bg:#fff; --text:#111; --muted:#616161; --accent:#2b6cb0; --surface:#f6f7fb; --border:#e8e8ef;
--shadow:0 10px 30px rgba(0,0,0,.06); --radius:16px; --maxw:1140px;
}
@media(prefers-color-scheme:dark){
:root{--bg:#0b0c0f; --text:#f2f3f5; --muted:#b6b8bd; --accent:#7aa5ff; --surface:#131620; --border:#262a36; --shadow:0 10px 30px rgba(0,0,0,.3)}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:#1a73e8;text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 1rem}


/* Header */
header{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--bg) 85%,transparent);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
nav ul{display:flex;gap:.8rem;list-style:none;margin:0;padding:0}
nav a{padding:.35rem .6rem;border-radius:10px}
nav a:hover,nav a:focus-visible{background:var(--surface);outline:none}
#theme-toggle{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .6rem}


/* Layout: homepage two columns (news sidebar + main) */
.main-grid{display:grid;grid-template-columns:320px 1fr;gap:1rem}
@media(max-width:1024px){.main-grid{grid-template-columns:1fr}}


aside.news{position:sticky;top:76px;align-self:start}
.news .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.news h2{margin:.2rem 0 .6rem;font-size:1.1rem}
.news-list{list-style:none;margin:0;padding:0}
.news-list li{padding:.5rem 0;border-bottom:1px dashed var(--border)}
.news-list li:last-child{border-bottom:none}
.news-date{color:var(--muted);font-size:.9rem;margin-right:.35rem;white-space:nowrap}


/* Hero */
.hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.hero-media{position:relative;aspect-ratio:16/9;background:#000}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-controls{position:absolute;inset:auto 0 0 0;display:flex;gap:.5rem;justify-content:center;padding:.5rem}
.hero-controls button{border:1px solid var(--border);background:rgba(0,0,0,.4);color:#fff;border-radius:999px;padding:.3rem .6rem}
.hero-caption{padding:1rem}


/* Cards / sections */
section{padding:1.2rem 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.grid{display:grid;gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}


/* Publications page */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem}
.toolbar input,.toolbar select{padding:.5rem .6rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
.pub{padding:.75rem;border:1px solid var(--border);border-radius:12px;margin-bottom:.6rem;background:var(--bg)}
.pub .meta{color:var(--muted)}


footer{border-top:1px solid var(--border);padding:1.2rem 0 2rem;color:var(--muted);margin-top:1rem}


/* Print */
@media print{header,.hero-controls,.toolbar{display:none !important} body{background:#fff;color:#000} .card,.pub{border:none;box-shadow:none}}

/* Masthead (title + affiliation above hero) */
.masthead { padding: .5rem 0 1rem; text-align: center; }
.masthead h1 {
  margin: .4rem 0 0;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  font-weight: 800;
}
.masthead .at   { color: var(--muted);  font-weight: 600; }
.masthead .inst { color: var(--accent); font-weight: 900; }

/* Sidebar profile card */
.profile { display: flex; align-items: center; gap: .8rem; }
.profile img {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--border);
}
.profile .profile-text { font-size: .95rem; }
.profile .profile-text strong { display: block; font-weight: 800; }
.profile .profile-text div { color: var(--muted); }