:root {
    --bg: #fafaf8;
    --bg-alt: #f2f1ed;
    --text: #1a1a1a;
    --text-secondary: #555;
    --text-tertiary: #888;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-subtle: #dbeafe;
    --border: #e5e5e0;
    --sans: 'DM Sans', sans-serif;
    --serif: 'Source Serif 4', Georgia, serif;
    --max-width: 820px;
    --news-accent: #f59e0b;
  }
  
  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  html {
    scroll-behavior: smooth;
    font-size: 16px;
  }
  
  body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  ::selection {
    background: var(--accent-subtle);
    color: var(--accent);
  }
  
  a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
  }
  a:hover { color: var(--accent-hover); }
  
  /* ---- NAV ---- */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 250, 248, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  nav .nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav .name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  nav .links {
    display: flex;
    gap: 1.6rem;
  }
  nav .links a {
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }
  nav .links a:hover { color: var(--text); }
  
  /* ---- MAIN CONTAINER ---- */
  main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  
  /* ---- HERO / BIO ---- */
  .hero {
    padding: 2.5rem 0 1.8rem;
    animation: fadeUp 0.6s ease both;
  }
  .hero-top {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .hero-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--border);
    background: var(--bg-alt);
  }
  .hero-intro h1 {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.4rem;
  }
  .hero-intro .tagline {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
  }
  .hero-intro .affiliation {
    font-size: 0.9rem;
    color: var(--text-tertiary);
  }
  .hero-intro .affiliation a {
    color: var(--text-secondary);
  }
  .hero-bio {
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
  }
  .hero-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .hero-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    transition: all 0.2s;
  }
  .hero-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
  }
  .hero-links a i {
    font-size: 0.9rem;
  }
  
  /* ---- SECTIONS ---- */
  section {
    padding: 1.5rem 0 1.2rem;
    border-top: 1px solid var(--border);
    animation: fadeUp 0.6s ease both;
  }
  section h2 {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
  }
  
  /* ---- NEWS ---- */
  .news-list {
    list-style: none;
  }
  .news-item {
    display: flex;
    gap: 1rem;
    padding: 0.7rem 0;
    align-items: baseline;
  }
  .news-item + .news-item {
    border-top: 1px solid var(--border);
  }
  .news-date {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
    width: 90px;
    font-variant-numeric: tabular-nums;
  }
  .news-content {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  .news-content strong {
    color: var(--text);
    font-weight: 500;
  }
  
  /* ---- PUBLICATIONS ---- */
  .pub-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pub-item {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
  }
  .pub-item:hover {
    border-color: #ccc;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }
  .pub-teaser {
    width: 200px;
    min-width: 200px;
    height: 90px;
    border-radius: 5px;
    object-fit: cover;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    flex-shrink: 0;
  }
  .pub-body {
    flex: 1;
    min-width: 0;
  }
  .pub-title {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.25rem;
    line-height: 1.5;
  }
  .pub-title a {
    color: var(--text);
    text-decoration: none;
  }
  .pub-title a:hover {
    color: var(--accent);
  }
  .pub-authors {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    line-height: 1.5;
  }
  .pub-authors .me {
    font-weight: 600;
    color: var(--text);
  }
  .pub-venue {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
  }
  .pub-venue .award {
    color: var(--news-accent);
    font-weight: 500;
    font-style: normal;
  }
  .pub-links {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .pub-links a {
    font-size: 0.8rem;
    color: var(--accent);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: var(--accent-subtle);
    transition: all 0.15s;
    font-weight: 500;
  }
  .pub-links a:hover {
    background: var(--accent);
    color: #fff;
  }
  
  /* ---- FOOTER ---- */
  footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-tertiary);
    text-align: center;
  }
  
  /* ---- ANIMATIONS ---- */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero       { animation-delay: 0s; }
  #news       { animation-delay: 0.08s; }
  #publications { animation-delay: 0.16s; }
  
  /* ---- RESPONSIVE ---- */
  @media (max-width: 600px) {
    .hero-top {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .hero-photo { width: 110px; height: 110px; }
    .hero-intro h1 { font-size: 1.6rem; }
    .hero-links { justify-content: center; }
    .news-item { flex-direction: column; gap: 0.15rem; }
    .news-date { width: auto; }
    nav .nav-inner { padding: 0.75rem 1rem; }
    nav .links { gap: 1rem; }
    .pub-item { flex-direction: column; }
    .pub-teaser { width: 100%; min-width: 0; height: 120px; }
  }