:root{
  --bg:#0b0f14;
  --panel:#111826;
  --text:#e6edf3;
  --muted:#9fb0c0;
  --line:#223044;
  --accent:#5eead4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:17px;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1058px;margin:0 auto;padding:20px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{font-weight:700;letter-spacing:.3px}
.links{display:flex;flex-wrap:wrap;gap:13px;color:var(--muted);font-size:15px}
.links a:hover{color:var(--text)}

.hero{display:grid;grid-template-columns:1.4fr .9fr;gap:20px;align-items:start;padding:28px 0}
h1{font-size:48px;line-height:1.05;margin:0 0 11px}
.subtitle{color:var(--muted);margin:0 0 17px;max-width:62ch}

.cta{display:flex;gap:11px;flex-wrap:wrap;margin:11px 0 15px}
.button{background:var(--accent);color:#03201c;padding:11px 15px;border-radius:12px;font-weight:650}
.button.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}

.badges{display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.badges a{border:1px solid var(--line);padding:8px 11px;border-radius:999px}
.badges a:hover{border-color:var(--accent);color:var(--text)}

.section{padding:20px 0;border-top:1px solid var(--line)}
.section h2{margin:0 0 11px;font-size:23px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:15px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.card h3{margin:0 0 9px}
.card p{margin:0 0 9px;color:var(--muted)}
.meta{font-size:14px;color:var(--muted)}

.pubs{margin:0;padding-left:20px;color:var(--muted)}
.pubs li{margin:11px 0}
.pub-title{display:block;color:var(--text);font-weight:650}
.pub-meta{display:block;font-size:15px}
.pub-links a{font-size:15px;color:var(--accent);margin-right:11px}
.project-links a{display:block;color:var(--accent);font-size:15px;margin-top:7px}
.hint{color:var(--muted);font-size:15px;margin-top:11px}

.footer{padding:26px 0;color:var(--muted);border-top:1px solid var(--line);text-align:center;margin-top:20px}

/* Keep embedded project videos visually consistent across cards. */
video.research-video{
  width: 100%;
  height: 194px;
  object-fit: contain;
  display: block;
  margin: 13px auto 0;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}

.video-modal{
  width: min(92vw, 1100px);
  padding: 42px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.video-modal::backdrop{
  background: rgba(0, 0, 0, .78);
}

.video-modal video{
  width: 100%;
  max-height: 78vh;
  display: block;
  background: #000;
  border-radius: 8px;
}

.video-modal-close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.video-modal-close:hover{
  border-color: var(--accent);
}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  h1{font-size:39px}
}