/* =======================================================
   GLOBAL TOKENS
   ----------------------------------------------------- */
   :root{
    /* colour system (unchanged) */
    --primary-color:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary-color:#f8fafc;
    --accent-color:#8b5cf6;
    --text-primary:#0f172a;
    --text-secondary:#64748b;
    --text-muted:#94a3b8;
    --border-color:#e2e8f0;
  
    /* elevation */
    --shadow-sm:0 1px 2px rgb(0 0 0/.05);
    --shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
    --shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
  
    /* layout rhythm */
    --gap-s:.5rem;
    --gap-m:1rem;
    --gap-l:1.5rem;
    --radius:8px;
    --content-width:1000px;
  }
  
  /* =======================================================
     BASE ELEMENTS
     ----------------------------------------------------- */
  *,*::before,*::after{box-sizing:border-box}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-weight:400;
    line-height:1.5;
    color:#222;
    margin:0;
    display:flex;flex-direction:column;align-items:center;
    min-height:100vh;
    background:radial-gradient(circle,#121212,#000) fixed;
  }
  body::before{
    content:"";
    position:fixed;inset:0;z-index:-1;
    background-image:
      linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#fff 100%,#2a2a2a 100%),
      linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#fff 100%,#2a2a2a 100%);
    background-size:1px 1px;
    opacity:.15;transform:scale(1.1);
  }
  
  /* links ---------------------------------------------------------------- */
  a{color:var(--primary-color);text-decoration:none;transition:.2s color}
  a:hover{color:var(--primary-dark)}
  
  /* containers ----------------------------------------------------------- */
  .container{
    width:100%;
    max-width:var(--content-width);
    margin-inline:auto;
    padding-inline:var(--gap-m);
  }
  
  /* =======================================================
     HEADER
     ----------------------------------------------------- */
  .header-content{
    display:flex;align-items:center;gap:var(--gap-l);
    padding:var(--gap-l) var(--gap-m);
  }
  .header-image{flex:0 0 260px}
  .header-image img{
    width:240px;height:auto;border:2px solid #000;
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
  }
  .header-text{flex:1;color:#4a4a4a}
  .header-text h1{margin:0 0 .25rem;font-size:1.45rem}
  
  nav {
    background-color: #1a73e8;
    max-width: 1000px;
    width: 100%;
    /* margin: 0 auto 20px auto; */
    /* border-radius: 8px; */
    text-align: center;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    /* padding: 10px 0; */
    position: fixed; /* Stick the nav bar when scrolling */
    top: 0px;
    z-index: 1000;
    transition: top 0.3s ease; /* Smooth transition */
    overflow-x: auto; /* Allow horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of the items */
}

nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 3px 50px;
    font-size: 1em;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: inline-block;
}

nav a:hover {
    color: #ffffff;
    background-color: #003d8e;
    border-radius: 0px;
}
  /* =======================================================
     MAIN & SECTIONS
     ----------------------------------------------------- */
  main,footer{
    width:100%;max-width:var(--content-width);
    background:#fff;
    box-shadow:var(--shadow-sm);
  }
  main{padding:var(--gap-l) var(--gap-m)}
  footer{text-align:center;padding:var(--gap-m) 0;font-size:.85rem}
  
  /* “grey card” sections */
  .section{
    background:#f7f7f7;
    padding:var(--gap-m);
    border-radius:var(--radius);
  }
  
  /* headings with rule line */
  h2{
    display:flex;align-items:center;gap:.75rem;
    font-size:1.25rem;margin:var(--gap-l) 0 var(--gap-m);
  }
  h2::after{content:"";flex:1;height:4px;background:var(--border-color)}
  
  /* =======================================================
     PUBLICATIONS
     ----------------------------------------------------- */
  #publications{ /* single column by default */ }
  @media (min-width:1200px){
    #publications{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(520px,1fr));
      gap:var(--gap-m);
    }
  }
  .publication-year{
    margin:var(--gap-l) 0 var(--gap-s);
    padding-bottom:.5rem;border-bottom:2px solid var(--border-color);
    font-size:1rem;font-weight:600;color:var(--text-primary);
  }
  
  /* card */
  .publication-item{
    display:flex;gap:var(--gap-m);
    padding:var(--gap-m);margin-bottom:var(--gap-m);
    background:#fff;border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:.3s background,.3s box-shadow;
  }
  .publication-item:hover{
    background:#edf6ff;box-shadow:var(--shadow-lg);
  }
  
  /* thumbnail */
  .pub-image{flex:0 0 170px}
  .pub-image img,.pub-image video{
    width:170px;height:auto;border-radius:calc(var(--radius)*.8);
    transition:transform .3s ease;
  }
  .publication-item:hover .pub-image img,
  .publication-item:hover .pub-image video{transform:scale(1.03)}
  
  /* meta */
  .pub-details{flex:1;display:flex;flex-direction:column}
  .pub-title{font-size:1.05rem;font-weight:600;margin:0 0 .3rem}
  .pub-authors,.pub-venue{font-size:.85rem;margin:0 0 .25rem;color:var(--text-secondary)}
  .pub-venue{color:var(--primary-color);font-weight:600}
  
  /* links */
  .pub-links{display:flex;flex-wrap:wrap;gap:var(--gap-s);margin-bottom:.4rem}
  .pub-links a{
    padding:.3rem .7rem;font-size:.78rem;font-weight:500;
    background:var(--secondary-color);color:var(--text-primary);
    border:1px solid var(--border-color);border-radius:.5rem;
    transition:.25s background,.25s color,.2s transform;
  }
  .pub-links a:hover{background:var(--primary-color);color:#fff;transform:translateY(-1px)}
  
  /* TLDR collapsible on hover (optional) */
  .pub-tldr{
    position:relative;
    max-height:6.5rem;overflow:hidden;
    color:var(--text-secondary);font-size:.9rem;line-height:1.45;
    padding:.75rem;background:var(--secondary-color);
    border-left:2px solid var(--primary-color);
  }
  .pub-tldr::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,transparent 60%,var(--secondary-color) 95%);
    pointer-events:none;
  }
  .publication-item:hover .pub-tldr{max-height:100rem}
  
  .pub-stars{display:flex;align-items:center;gap:.65rem;font-size:.78rem;color:var(--text-muted)}
  .star-count{display:flex;align-items:center;gap:.25rem;color:var(--text-muted)}
  .cite-link {
    display: inline-flex;
    align-items: center;
    /* font-size: 0.95em; */
    gap: 0.25em;
    color:var(--text-muted);
    text-decoration: none;
  }
  
  /* .cite-link:hover {
    text-decoration: underline;
  }
   */
  .citation-icon {
    width: 0.9em;
    height: 0.9em;
    opacity: 0.9;
    font-size: 1.5em;
  }
  
  /* .cite-number {
    font-weight: 700;
  } */
  #bibtex-modal{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.4);z-index:2000;
  }
  #bibtex-modal[hidden]{display:none}
  .bibtex-box{
    background:#fff;padding:1rem 1.25rem;border-radius:6px;
    max-width:90vw;max-height:80vh;overflow:auto;font-size:.8rem;
    box-shadow:0 6px 20px rgba(0,0,0,.2);position:relative;
  }
  #bibtex-text{white-space:pre-wrap;margin:0}
  #bibtex-close{
    position:absolute;top:.4rem;right:.4rem;border:none;background:none;
    font-size:1.2rem;cursor:pointer;
  }
  #bibtex-copy{margin-top:.6rem;padding:.3rem .7rem;cursor:pointer}
  
  .bibtex-inline{
    background:var(--secondary-color,#f8fafc);
    padding:.65rem .9rem;
    margin-top:.7rem;
    white-space:pre-wrap;
    border-left:3px solid var(--primary-color);
    font-family:monospace;
    font-size:.85em;
    border-radius:4px;
  }
  .bibtex-copy{
    margin:0.4rem 0 0;
    padding:0.25rem 0.65rem;
    font-size:0.8em;
    cursor:pointer;
  }
  
  
  /* =======================================================
     NEWS & AWARDS LISTS
     ----------------------------------------------------- */
  .news-container,.awards-container{display:flex;flex-direction:column}
  .news-item,.awards-item{
    display:flex;gap:var(--gap-s);margin-bottom:var(--gap-s);
  }
  .news-item .date,.awards-item .date{
    flex:0 0 5rem;font-weight:600;font-size:.85rem;color:#666;white-space:nowrap;
  }
  .news-item .content,.awards-item .content{flex:1;word-wrap:break-word}
  
  /* “Show more” button */
  #show-more{
    display:block;margin-top:var(--gap-m);
    padding:.5rem 1rem;
    background:var(--primary-color);color:#fff;border:none;cursor:pointer;
  }
  
  /* =======================================================
     RESPONSIVE (≤ 768 px)
     ----------------------------------------------------- */
  @media (max-width:768px){
    body::before{display:none}            /* remove grid for perf */
    .header-content{flex-direction:column;text-align:center}
    .header-image img{width:160px;margin-bottom:var(--gap-m)}
    nav a{padding:var(--gap-s) var(--gap-m)}
    #publications{display:block}          /* always single column */
    .publication-item{flex-direction:column}
    .pub-image{width:100%;margin-bottom:var(--gap-m)}
    .pub-image img,.pub-image video{width:100%;max-width:320px;margin-inline:auto}
  }