:root{
  --bg:#0b1220;
  --panel:#0e1626;
  --accent:#6ee7b7;
  --muted:#94a3b8;
  --content:#ffffff;
  --border:#e5edf5;

  --radius:12px;
  --gap:24px;
  --max-width:1200px;

  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset */
*{ box-sizing:border-box; }
html, body{ margin:0; height:100%; }

body{
  background:linear-gradient(180deg,#071021,#081427);
  color:#e5e7eb;
}

/* Layout */
.site{
  max-width:var(--max-width);
  margin:24px auto;
  padding:16px;
  display:flex;
  gap:var(--gap);
}

/* Sidebar */
.sidebar{
  width:280px;
  background:rgba(255,255,255,0.03);
  border-radius:var(--radius);
  padding:28px;
  border:1px solid rgba(255,255,255,0.05);
}

.avatar{
  width:120px;
  height:120px;
  border-radius:14px;
  object-fit:cover;
  margin-bottom:16px;
}

.sidebar h1{
  margin:0;
  font-size:1.25rem;
  color:#fff;
}

.meta{
  margin:8px 0 18px;
  color:var(--muted);
  font-size:0.9rem;
}

/* Nav */
.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav a{
  color:var(--accent);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
}

.nav a:hover,
.nav a.active{
  background:rgba(110,231,183,0.12);
  color:#eafff6;
}

/* Contact */
.contact{
  margin-top:20px;
  font-size:0.9rem;
}

.social a{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.social svg{
  width: 16px;
  height: 16px;
  fill:currentColor;
}

/* Main */
.content{
  flex:1;
  background:var(--content);
  color:#0f172a;
  border-radius:var(--radius);
  padding:40px;
  box-shadow:0 30px 60px rgba(2,6,23,0.45);
}

/* Hero */
.hero h2{
  font-size:1.9rem;
  margin-bottom:6px;
}

.hero-tag{
  color:#64748b;
  margin-bottom:18px;
}

/* Sections */
.section{
  margin-top:42px;
}

.section-title{
  font-size:1.5rem;
  margin-bottom:18px;
}

/* Cards */
.columns{
  display:flex;
  gap:18px;
}

.card{
  flex:1;
  background:#f8fafc;
  border-radius:10px;
  padding:18px;
  border:1px solid var(--border);
}

/* Publications */
.pub-list li{
  margin-bottom:20px;
}

/* Timeline */
.timeline li{
  margin-bottom:14px;
}


.toggle-link{
  margin-left:6px;
  font-size:0.8rem;
  color:#2563eb;
  cursor:pointer;
}

.toggle-link:hover{
  text-decoration:underline;
}

.details{
  margin-top:6px;
  padding-left:12px;
  color:#374151;
  font-size:0.95rem;
  line-height:1.5;
  max-width:760px;
}


/* Responsive */
@media(max-width:900px){
  .site{ flex-direction:column; }
  .sidebar{ width:100%; }
}

/* make sidebar contact/social/resume links high-contrast and accessible */
.social a,
.contact > a,
.resume a {
  color: var(--content); /* white on dark background */
  text-decoration: none;
  font-weight: 600;
}

.social a:hover,
.contact > a:hover,
.resume a:hover {
  color: var(--accent);   /* subtle accent on hover */
  text-decoration: underline;
}

/* ensure SVG icons follow the link color */
.social svg { fill: currentColor; }