html, body {
  overflow-x: hidden;
}

:root{
      --bg:#0f1724;           /* dark bg fallback */
      --card:#0b1220;
      --muted:#9aa7b2;
      --accent-1:#7c3aed;     /* purple */
      --accent-2:#06b6d4;     /* cyan */
      --glass: rgba(255,255,255,0.04);
      --glass-2: rgba(255,255,255,0.02);
      --radius: 12px;
      color-scheme: dark;
      --max-w: 1100px;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

*{box-sizing:border-box}
body{
    margin:0;
    background: radial-gradient(1200px 500px at 10% 10%, rgba(124,58,237,0.08), transparent 8%),
                radial-gradient(900px 400px at 90% 90%, rgba(6,182,212,0.06), transparent 6%),
                var(--bg);
    color: white;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    padding:40px 20px;
    display:flex;
    justify-content:center;
    min-height:100vh;
}

.wrap{
    width:100%;
    max-width:var(--max-w);
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:28px;
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
}
.avatar{
    width:56px;height:56px;border-radius:12px;
    background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    display:inline-grid;place-items:center;
    font-weight:800;color:white;font-size:18px;
    box-shadow:0 6px 18px rgba(2,6,23,.6);
}
.brand h1{margin:0;font-size:18px}
.brand p{margin:0;font-size:12px;color:var(--muted)}

nav{display:flex;gap:12px;align-items:center}
nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:8px;border-radius:8px}
nav a:hover{color:inherit;background:var(--glass)}

.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    color:inherit;font-weight:600;text-decoration:none;
    cursor:pointer;
}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06)}

/* main {display:grid;grid-template-columns: 1fr 360px; gap:28px; align-items:start} */
main {display:grid;grid-template-columns: 1fr; gap:28px; align-items:start; padding-bottom:20px} 
/* Title */
.title{
    padding:28px;border-radius:var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    position:relative;
    overflow:hidden;
}
.title::after{
    content:"";position:absolute;right:-120px;top:-60px;width:360px;height:360px;border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.18), transparent 20%);
    filter: blur(40px);opacity:.9;pointer-events:none;
}

.eyebrow{font-size:13px;color:var(--muted);margin-bottom:10px}
h2{margin:0;font-size:34px;line-height:1.05}
.lead{margin-top:12px;color:var(--muted);font-size:15px;max-width:56ch}

.links{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* right column */
aside.card{
    padding:18px;border-radius:var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
    border:1px solid var(--glass-2);
    min-height:220px;
}
.stat-grid{display:flex;gap:10px;justify-content:space-between;margin-top:12px}
.stat{flex:1;text-align:center;padding:10px;border-radius:10px;background:var(--glass)}
.stat h3{margin:0;font-size:20px}
.stat p{margin:6px 0 0;color:var(--muted);font-size:13px}

/* sections */
section.block{margin-top:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:12px}

.research{
    padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
    border:1px solid var(--glass-2);transition:transform .22s ease, box-shadow .22s ease;
}
.research:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}

.research h4{margin:0 0 6px 0}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;padding:6px 8px;border-radius:999px;background:var(--glass);color:var(--muted)}

/* publications */
.pub{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:var(--glass);align-items:center}
.pub small{color:var(--muted)}

/* members */
.members{
    padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
    border:1px solid var(--glass-2);transition:transform .22s ease, box-shadow .22s ease;
}
.members:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}
.members h4{margin:0 0 3px 0}
.members p{margin:6px 0 0;color:var(--muted);font-size:13px}


/* contact */
.contact-form input,.contact-form textarea{
    width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);
    background:transparent;color:inherit;font-size:14px;margin-top:8px;
    outline:none;
}
.contact-form textarea{min-height:120px;resize:vertical}
.row{display:flex;gap:10px}
@media (max-width:980px){
    main{grid-template-columns:1fr; padding-bottom:40px}
    aside.card{order:2}
    .title::after{display:none}
}

/* subtle entrance animation */
.fade-up { transform: translateY(8px); opacity: 0; animation:fadeUp .6s ease forwards; }
.delay-1{animation-delay:.05s}
.delay-2{animation-delay:.12s}
.delay-3{animation-delay:.18s}
@keyframes fadeUp { to { transform:none; opacity:1 } }

/* small utilities */
footer{margin-top:28px;color:var(--muted);font-size:13px;text-align:center;padding-top:20px;border-top:1px solid var(--glass-2)}
a.inline-link{color:inherit;text-decoration:underline}
.theme-toggle{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:8px;border-radius:8px}

/* Dropdown menu styled to match original nav */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  margin-right: 0rem;
  background: none;
  border: none;
  font-size: 14px;
  text-decoration: none;
  color: var(--muted);
  cursor: pointer
}

/* .dropbtn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
} */

.dropbtn:focus {
  outline: 1px solid var(--accent-1);
}

.dropbtn:hover {
  color: var(--accent);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg);
  border: 0px solid #eee;
  border-radius: 6px;
  min-width: 180px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 1000; /* forces dropdown above everything */
}

.dropdown-content a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
  z-index: 1000; /* forces dropdown above everything */
}

.dropdown-content a:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.dropdown:hover .dropdown-content {
  display: block;
}

nav {
  position: relative; /* ensures z-index works */
  z-index: 10;        /* keep nav above main */
}

/* Reverse numbered list for publications */

.reverse-boxed-list {
  list-style: none;
  padding-left: 0;
  counter-reset: pub-counter var(--total-pubs); /* starting number = total count */
}

.reverse-boxed-list li {
  counter-increment: pub-counter -1; /* decrement on each item */
  margin: 0.8em 0;
  padding-left: 3em;
  position: relative;
}

.reverse-boxed-list li::before {
  content: counter(pub-counter);
  position: absolute;
  left: -0.6em;
  top: 0;
  width: 2em;
  height: 2em;
  border-radius: 6px;              /* square with rounded corners */
  background: var(--accent-light);
  color: var(--accent);
  font-weight: bold;
  text-align: center;
  line-height: 1.2em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  content: "[J" counter(pub-counter)"]";
  display: inline-block;
  font-size: 1em;
  font-family: "Courier New", Courier, monospace;
  padding-top: 2px;                 /* adjust vertical alignment */
  box-sizing: border-box;
  border: 1px solid var(--accent);
}

.reverse-boxed-conf-list {
  list-style: none;
  padding-left: 0;
  counter-reset: pub-counter var(--total-pubs); /* starting number = total count */
}

.reverse-boxed-conf-list li {
  counter-increment: pub-counter -1; /* decrement on each item */
  margin: 0.8em 0;
  padding-left: 3em;
  position: relative;
}

.reverse-boxed-conf-list li::before {
  position: absolute;
  left: -0.6em;
  top: 0;
  width: 2em;
  height: 2em;
  border-radius: 6px;              /* square with rounded corners */
  background: var(--accent-light);
  color: var(--accent);
  font-weight: bold;
  text-align: center;
  line-height: 1.2em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  content: "[C" counter(pub-counter)"]";
  display: inline-block;
  font-size: 1em;
  font-family: "Courier New", Courier, monospace;
  padding-top: 2px;                 /* adjust vertical alignment */
  box-sizing: border-box;
  border: 1px solid var(--accent);
}

.reverse-boxed-book-list {
  list-style: none;
  padding-left: 0;
  counter-reset: pub-counter var(--total-pubs); /* starting number = total count */
}

.reverse-boxed-book-list li {
  counter-increment: pub-counter -1; /* decrement on each item */
  margin: 0.8em 0;
  padding-left: 3em;
  position: relative;
}

.reverse-boxed-book-list li::before {
  position: absolute;
  left: -0.6em;
  top: 0;
  width: 2em;
  height: 2em;
  border-radius: 6px;              /* square with rounded corners */
  background: var(--accent-light);
  color: var(--accent);
  font-weight: bold;
  text-align: center;
  line-height: 1.2em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  content: "[B" counter(pub-counter)"]";
  display: inline-block;
  font-size: 1em;
  font-family: "Courier New", Courier, monospace;
  padding-top: 2px;                 /* adjust vertical alignment */
  box-sizing: border-box;
  border: 1px solid var(--accent);
}

.reverse-boxed-doc-list {
  list-style: none;
  padding-left: 0;
  counter-reset: pub-counter var(--total-pubs); /* starting number = total count */
}

.reverse-boxed-doc-list li {
  counter-increment: pub-counter -1; /* decrement on each item */
  margin: 0.8em 0;
  padding-left: 3em;
  position: relative;
}

.reverse-boxed-doc-list li::before {
  position: absolute;
  left: -0.6em;
  top: 0;
  width: 2em;
  height: 2em;
  border-radius: 6px;              /* square with rounded corners */
  background: var(--accent-light);
  color: var(--accent);
  font-weight: bold;
  text-align: center;
  line-height: 1.2em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  content: "[D" counter(pub-counter)"]";
  display: inline-block;
  font-size: 1em;
  font-family: "Courier New", Courier, monospace;
  padding-top: 2px;                 /* adjust vertical alignment */
  box-sizing: border-box;
  border: 1px solid var(--accent);
}

/* ============================= */
/*  MOBILE-FRIENDLY FIXES        */
/* ============================= */

/* Tablet and smaller screens */
@media (max-width: 900px) {
  body {
    padding: 20px 12px;
    flex-direction: column;
    align-items: center;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .brand {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .brand h1 {
    font-size: 16px;
  }

  .brand p {
    font-size: 11px;
    line-height: 1.3;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
  }

  nav a,
  .dropbtn {
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 6px;
  }

  .title {
    padding: 18px;
  }

  .title h2 {
    font-size: 26px;
  }

  .lead {
    font-size: 14px;
    max-width: 100%;
  }

  .research p,
  .members p {
    font-size: 14px;
  }

  .cards {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }

  .pub {
    flex-direction: column;
    align-items: flex-start;
  }

  footer {
    font-size: 12px;
  }
}

/* Phones (small screens) */
@media (max-width: 480px) {
  header {
    align-items: center;
    text-align: center;
  }

  .brand {
    justify-content: center;
    text-align: center;
  }

  nav {
    justify-content: center;
  }

  .avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  h2 {
    font-size: 22px;
  }

  .lead {
    font-size: 13px;
  }

  .research h4 {
    font-size: 16px;
  }

  .tag {
    font-size: 11px;
    padding: 4px 6px;
  }

  .btn {
    font-size: 13px;
    padding: 8px 12px;
  }

  footer {
    text-align: center;
  }
}

/* Dropdown touch support (for mobile) */
@media (hover: none) and (pointer: coarse) {
  .dropdown:hover .dropdown-content {
    display: none;
  }

  .dropdown:focus-within .dropdown-content {
    display: block;
  }
}