:root {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --brand: #1657d8;
  --brand-2: #7c3aed;
  --card: #f3f4f6;
  --border: #e5e7eb;
  --shadow: 0 10px 20px rgba(0,0,0,.08);
}
:root[data-theme="dark"] {
  --bg: #0b1020;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #7aa7ff;
  --brand-2: #b38cff;
  --card: #141a2f;
  --border: #1f2937;
  --shadow: 0 10px 20px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.nowrap { white-space: nowrap; }

.container { width:min(1100px, 92%); margin-inline:auto; }
.section { padding: 4rem 0; }
.section.alt { background: var(--card); }
.muted { color: var(--muted); }
.small { font-size: .95rem; }
.badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 1rem; }
.badge { border:1px solid var(--border); padding:.35rem .6rem; border-radius:.6rem; }
pre { background: var(--card); border:1px solid var(--border); padding:.75rem; border-radius:.6rem; overflow:auto; }

/* Header & nav */
.site-header {
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] .site-header { background: rgba(11,16,32,.8); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.brand { display:flex; gap:.6rem; align-items:center; font-weight:700; color: var(--text); }
.brand .accent { color: var(--brand-2); }
.logo { width:0px; height:0px; }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; }
.nav .menu { list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
.menu-item a, .dropdown-toggle, .theme-toggle {
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-radius:.4rem; border:1px solid transparent;
}
.menu-item a:focus, .dropdown-toggle:focus, .theme-toggle:focus { outline: none; border-color: var(--brand); }
.has-dropdown { position: relative; }
.dropdown-toggle { background: none; border: none; cursor:pointer; color: var(--text); }
.dropdown {
  position:absolute; top: 110%; left: 0; min-width: 200px;
  background: var(--bg); border:1px solid var(--border); border-radius:.5rem;
  box-shadow: var(--shadow); padding:.4rem; display:none;
}
.has-dropdown:focus-within .dropdown,
.has-dropdown:hover .dropdown { display:block; }
.dropdown a { display:block; padding:.45rem .6rem; border-radius:.35rem; }
.dropdown a:hover { background: var(--card); text-decoration:none; }
.theme-toggle { background:none; border:1px solid var(--border); padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; }

/* Mobile nav */
@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .nav { position: absolute; inset-inline:0; top:64px; display:none; background: var(--bg); border-bottom:1px solid var(--border); }
  .nav.open { display:block; }
  .nav .menu { flex-direction: column; align-items: stretch; padding: .8rem; }
  .has-dropdown .dropdown { position: static; display:none; border:none; box-shadow:none; padding:0; }
  .has-dropdown.open .dropdown { display:block; }
}

/* Skip link */
.skip-link {
  position:absolute; left: -10000px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; background: var(--bg); border:1px solid var(--border); padding:.5rem .7rem; z-index: 2000; }

/* Hero + carousel */
.hero { padding: 0; border-bottom: 1px solid var(--border); }
.carousel { position: relative; overflow:hidden; }
.carousel-viewport { position: relative; }
.slide { position: relative; display:none; }
.slide.is-active { display:block; }
.slide-caption {
  position:absolute; left: 5%; bottom: 5%;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  padding: .8rem 1rem; border-radius:.6rem; border:1px solid var(--border); max-width:min(720px, 92%);
}
.carousel-controls { position:absolute; inset-block:0; inset-inline:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.carousel-controls button { pointer-events:auto; font-size:2rem; background: color-mix(in oklab, var(--bg) 80%, transparent); border:1px solid var(--border); border-radius:.6rem; padding:.1rem .5rem; margin:.5rem; }
.carousel-dots { position:absolute; left:50%; transform: translateX(-50%); bottom:.75rem; display:flex; gap:.4rem; }
.carousel-dots button {
  width:.6rem; height:.6rem; border-radius:50%; border:1px solid var(--border); background: var(--card);
}
.carousel-dots button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); }

/* Grids & cards */
.grid-2 { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:start; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; }
.card { background: var(--bg); border:1px solid var(--border); border-radius:.8rem; padding:1rem; box-shadow: var(--shadow); }
.portrait img { border-radius:.8rem; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .cards { grid-template-columns: 1fr; }
}

/* Publications */
.pub-controls { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.pub-controls input { padding:.5rem .6rem; border:1px solid var(--border); border-radius:.5rem; width: min(420px, 100%); }
.pub-controls .secondary { border:1px solid var(--border); background: none; padding:.45rem .6rem; border-radius:.5rem; }
.pub-list { padding-left: 1.2rem; display: grid; gap: .6rem; }
.pub-list li { background: var(--bg); border:1px solid var(--border); border-radius:.6rem; padding:.6rem .7rem; }
.pub-list .venue { font-style: italic; }
.pub-list .links { display:flex; gap:.6rem; flex-wrap:wrap; }

/* Project list */
.project-list { list-style: none; padding:0; display:grid; gap:.6rem; }
.project-list li { background: var(--bg); border:1px solid var(--border); border-radius:.6rem; padding:.6rem .7rem; }

/* Forms */
.contact-form input, .contact-form textarea {
  width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:.5rem; background: var(--bg); color: var(--text);
}
.contact-form button {
  margin-top:.6rem; padding:.55rem .9rem; border-radius:.5rem; background: var(--brand); color:white; border:none; cursor:pointer;
}
.contact-form .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
@media (max-width: 700px) { .contact-form .grid-2 { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { border-top:1px solid var(--border); padding: 1.4rem 0; }
.visually-hidden { position:absolute; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; overflow:hidden; }