/* THEME TOKENS */
:root{
  --header-h: 64px;
  --pill-h: 36px;

  --bg:#0b0b0b; --fg:#f2f2f2; --muted:#a1a1a1; --card:#121212; --accent:#4da3ff; --border:#222;
  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,0.35);
}
:root[data-theme="light"]{
  --bg:#ffffff; --fg:#111111; --muted:#5b5b5b; --card:#f6f6f6; --accent:#0b84fe; --border:#e6e6e6;
  --shadow:0 4px 16px rgba(0,0,0,0.06);
}
:root[data-theme="dark"]{
  --bg:#0b0b0b; --fg:#f2f2f2; --muted:#a1a1a1; --card:#121212; --accent:#4da3ff; --border:#222;
  --shadow:0 8px 24px rgba(0,0,0,0.35);
}

/* BASE */
html, body { height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color: var(--accent); text-decoration: none; }
.container{ max-width:960px; margin:0 auto; padding:24px; }

/* HEADER + NAV (sticky with fixed height) */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(8px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.topbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between; position:relative;
  min-height: var(--header-h);
}
.brand-name{
  font-size:clamp(18px,1.2vw,18px); margin:0; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Desktop nav — one row, horizontally scrollable if needed */
nav.nav-links{
  display:flex; gap:12px; align-items:center;
  max-width:100%;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-block:4px;
}
nav.nav-links::-webkit-scrollbar{ display:none; }

nav.nav-links a,
nav.nav-links .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--pill-h);
  padding:0 12px; white-space:nowrap;
  color:var(--fg); background:var(--card);
  border:1px solid var(--border);
  border-radius:999px; font-size:14px;
}
nav.nav-links a[aria-selected="true"]{ border-color:var(--accent); }
nav.nav-links a:hover, nav.nav-links a:focus{ outline:none; border-color:var(--accent); }

/* General buttons */
.btn{
  appearance:none; border:1px solid var(--border); background:var(--fg); color:var(--bg);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px; box-shadow:var(--shadow);
}
.btn.ghost{ background:var(--card); color:var(--fg); }

/* Mobile dropdown (≤ 760px) */
.nav-toggle{ display:none; }
@media (max-width:925px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:38px; border-radius:10px;
  }
  nav.nav-links{
    position:absolute; top:100%; right:16px; left:auto;
    width:min(420px, 50vw);
    background:var(--bg); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow); padding:12px; display:none; flex-direction:column; gap:10px;
    max-height:70vh; overflow:auto; white-space:normal;
  }
  nav.nav-links.open{ display:flex; }
  nav.nav-links a, nav.nav-links .btn{
    height:auto; line-height:1.2; padding:10px 12px;
  }
}

/* CARD LAYOUT */
.card{
  display:none; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.card.active{ display:block; animation: cardIn 200ms ease-out; }
@keyframes cardIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: translateY(0);} }

section.card h2{ margin:0 0 8px; font-size:20px; letter-spacing:0.2px; }
.meta{ color:var(--muted); font-size:13px; }

/* ABOUT */
.profile{ display:grid; gap:18px; grid-template-columns: 1fr; }
.profile-media{
  margin:0; align-self:start;
  border-radius:12px; overflow:hidden; background:var(--bg);
  border:1px solid var(--border); box-shadow:var(--shadow);
  max-width:520px;
}
.profile-media img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.profile-body{ display:grid; gap:14px; }
.lead{ font-size:1.05rem; margin-top:4px; text-align: justify; }
.profile-sections{ display:grid; gap:16px; }
.profile-block{ display:grid; gap:8px; }
.subtle{ margin:0; font-size:0.95rem; color:var(--muted); letter-spacing:0.2px; text-transform:uppercase; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:999px; padding:6px 10px; font-size:12px; }
.status{ margin:0; }
@media (min-width:860px){
  .profile{ grid-template-columns:280px 1fr; align-items:start; }
  .profile-media{ max-width:280px; }
}

/* EXPERIENCE */
.experience-group{ display:grid; gap:12px; margin-top:8px; }
.group-title{ margin: 8px 0 4px; font-size: 16px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted); }
.divider{ height:1px; border:0; background: var(--border); margin: 12px 0; }
.list{ display:grid; gap:14px; }
.item .role{ margin:0; font-size:16px; }
.item .meta{ margin-top:2px; color: var(--muted); }
.bullets{ margin: 6px 0 0 0; padding-left: 18px; display:grid; gap:6px; }

/* PUBLICATIONS (title on own line + expandable) */
.pub{
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  margin:12px 0;
  overflow:hidden;
}
.pub-toggle{
  appearance:none; width:100%; text-align:left;
  background:transparent; border:0; color:var(--fg); cursor:pointer;
  display:grid; grid-template-columns: 24px 1fr; align-items:flex-start; gap:8px;
  padding:14px 14px;
}
.pub-toggle:focus{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.chev{ transition: transform 160ms ease; margin-top: 4px; }
.pub[open] .chev{ transform: rotate(90deg); }

.pub-lines{ display:grid; gap:6px; min-width:0; }
.pub-head{ margin:0; font-size:16px; font-weight:600; line-height:1.35; word-break:break-word; }
.pub-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  border:1px solid var(--border); background:var(--card); color:var(--fg);
  border-radius:999px; padding:6px 10px; font-size:12px; white-space:nowrap;
}
.pill.link{ text-decoration:none; }

.pub-details{
  display:none; padding:0 14px 14px 38px; color:var(--fg);
}
.pub[open] .pub-details{ display:block; }
.authors, .abstract{ margin-top:8px; }
.authors strong, .abstract strong{ color:var(--fg); }

/* PHOTOGRAPHY */
.photo-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.photo-grid img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--border); object-fit:cover; display:block; cursor:zoom-in; }
@media (min-width:900px){ .photo-grid{ grid-template-columns: repeat(3, 1fr); } }

/* LIGHTBOX */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  display:none; align-items:center; justify-content:center; z-index:9999;
  padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:90vw; max-height:90vh; width:auto; height:auto; object-fit:contain; border-radius:12px; border:1px solid var(--border);
}
.lightbox-close{
  position:absolute; top:12px; right:12px;
  appearance:none; border:1px solid var(--border);
  background:var(--card); color:var(--fg);
  border-radius:999px; padding:8px 12px; font-size:16px; cursor:pointer;
}

/* FOOTER */
footer{ color:var(--muted); font-size:13px; padding:24px; text-align:center; }

/* ACCESSIBILITY */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; padding:8px 12px; background:var(--fg); color:var(--bg); border-radius:999px; }

/* PRINT */
@media print{
  header, nav, .skip-link{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ break-inside:avoid; box-shadow:none; border-color:#ddd; }
  .container{ max-width:100%; padding:0; }
}