:root{
  --bg:#f6fbff;
  --bg2:#eef6fb;
  --card:#ffffffcc;
  --line:#d7e5ef;
  --text:#1f3b53;
  --muted:#4b6578;
  --heading:#7f1d1d;
  --accent:#0f5f82;
  --accent2:#cc0000;
  --shadow:0 10px 30px rgba(31,59,83,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:"Century Gothic", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(15,95,130,.10), transparent 25%),
    radial-gradient(circle at top right, rgba(127,29,29,.08), transparent 22%),
    linear-gradient(rgba(15,95,130,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,95,130,.05) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-size:auto,auto,34px 34px,34px 34px,auto;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(8px);
  background:rgba(246,251,255,.86);
  border-bottom:1px solid var(--line);
}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:64px; height:auto}
.brand .title{font-size:13px; color:var(--heading); line-height:1.45}
.brand .title strong{display:block; font-size:17px; color:var(--text)}
nav{display:flex; flex-wrap:wrap; gap:8px}
nav a{
  padding:8px 12px; border-radius:999px; border:1px solid transparent;
  color:var(--text); font-size:14px;
}
nav a.active, nav a:hover{background:#fff; border-color:var(--line); box-shadow:var(--shadow); text-decoration:none}
.lang{white-space:nowrap; font-size:14px}
main{padding:36px 0 70px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px;
}
.hero{
  display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start;
}
.profile{
  text-align:center;
}
.profile img{
  width:170px; height:205px; object-fit:cover; border-radius:20px;
  border:1px solid var(--line); box-shadow:var(--shadow); background:white;
}
.profile .contact{margin-top:16px; color:var(--muted); font-size:14px; line-height:1.8}
.hero h1{margin:0; font-size:42px; color:var(--heading)}
.hero .role{font-size:22px; color:var(--accent); margin:8px 0 18px}
.hero .lead, .hero li{line-height:1.9; color:var(--text)}
.section-title{
  margin:0 0 18px;
  font-size:28px; color:var(--heading);
}
.subtle{color:var(--muted)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.info-block h2,.timeline h2,.pub-year h2,.meta-card h2{
  color:#ff6600; margin:0 0 14px; font-size:23px
}
.info-block ul{margin:0; padding-left:20px}
.info-block li{margin:0 0 8px; line-height:1.8}
.timeline-item{
  display:grid; grid-template-columns:160px 1fr; gap:18px;
  padding:14px 0; border-top:1px solid var(--line)
}
.timeline-item:first-child{border-top:none; padding-top:0}
.timeline-item .period{font-weight:700; color:var(--accent)}
.timeline-item .desc{line-height:1.8}
.pub-year{
  margin-bottom:24px; padding:22px;
  border:1px solid var(--line); border-radius:20px; background:white;
}
.pub-year > h2{font-size:22px; margin-bottom:12px}
.publist{margin:0; padding-left:22px}
.publist li{margin:0 0 12px; line-height:1.9; color:var(--text)}
.publist .authors{font-weight:700; color:var(--text)}
.publist .title{color:var(--accent2); font-weight:700}
.publist .venue{font-style:italic; color:var(--muted)}
.meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.meta-card{padding:22px; border:1px solid var(--line); border-radius:20px; background:white}
.meta-card ul{margin:0; padding-left:20px}
.meta-card li{margin-bottom:8px; line-height:1.8}
.reviewer-columns{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.abs-card{
  margin-bottom:24px; padding:22px; border:1px solid var(--line); border-radius:20px; background:white;
}
.abs-card h2{margin:0 0 8px; font-size:22px; color:var(--accent2)}
.abs-card .authors{font-weight:700}
.abs-card .venue{font-style:italic; color:var(--muted)}
.abs-card p{line-height:1.9; color:var(--text)}
.footer-note{margin-top:14px; color:var(--muted); font-size:13px}
@media (max-width: 900px){
  .hero,.grid-2,.meta-grid,.reviewer-columns{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .brand .title{font-size:12px}
  .hero h1{font-size:34px}
}