:root{
  --bg:#f6f6f7; --text:#111111; --muted:#666666;
  --elev1:#ffffff; --elev2:#e6e6e6; --header:#0f0f0f;
  --accent:#FFD700; --accent-ink:#111; --chip-bg:rgba(255,217,0,0.14);
  --shadow:0 10px 30px rgba(0,0,0,.18); --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#121212; --text:#f0f0f0; --muted:#b3b3b3; --elev1:#1a1a1a; --elev2:#2a2a2a; --header:#0b0b0b; --chip-bg:rgba(255,217,0,.12); --shadow:0 15px 40px rgba(0,0,0,.45); }
}
body.dark-theme{ --bg:#121212; --text:#f0f0f0; --muted:#b3b3b3; --elev1:#1a1a1a; --elev2:#2a2a2a; --header:#0b0b0b; }
body.light-theme{ --bg:#f6f6f7; --text:#111111; --muted:#666666; --elev1:#ffffff; --elev2:#e6e6e6; --header:#0f0f0f; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Fira Code', monospace; background:var(--bg); color:var(--text); overflow-x:hidden; }
h1,h2,h3{ line-height:1.15; }
h1{ font-size: clamp(2rem, 1.4rem + 2.5vw, 3.4rem); }
h2{ font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem); }
h3{ font-size: 1.15rem; }
.section-sub{ color: var(--muted); margin-top: 6px; }
a{ color:inherit; text-decoration:none; transition:color .2s ease; } a:hover{ color:var(--accent); }
img{ max-width:100%; display:block; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:10px; top:10px; width:auto; height:auto; padding:8px 10px; background:var(--accent); color:var(--accent-ink); border-radius:6px; }

/* Loader */
html:not(.js) #page-loader{ display:none!important; }
#page-loader{ position:fixed; inset:0; z-index:9999; background:var(--header); display:flex; align-items:center; justify-content:center; transition:opacity .5s ease; }
#page-loader{ animation: loaderFailSafe 0s 5s forwards; }
@keyframes loaderFailSafe { to { opacity:0; pointer-events:none; visibility:hidden; } }
body[data-loader="hidden"] #page-loader{ display:none!important; }
.loader{ border:14px solid var(--elev1); border-top:14px solid var(--accent); border-radius:50%; width:78px; height:78px; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Header (3-column grid: logo | nav | tools) */
header { position:sticky; top:0; z-index:1000; background:var(--header); }
.nav-container{
  max-width:1280px; margin:0 auto; padding:0 16px; height:72px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
}
.logo{ font-size:1.1rem; font-weight:700; color:#fff; white-space:nowrap; }
.main-nav{ min-width:0; }
.nav-list{
  display:flex; align-items:center; justify-content:center;
  gap:10px; list-style:none; margin:0; padding:0 6px; overflow:visible;
}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border:1.6px solid var(--elev2); border-radius:999px; line-height:1;
  background:transparent; color:#fff; transition:background .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.pill:hover{ background:var(--chip-bg); border-color:var(--accent); color:#fff; }
.pill.active-nav{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.icon{ width:1.15em; text-align:center; }

/* Compact (icon-only) before mobile */
@media (max-width:1200px){
  .nav-list .pill span{ display:none; }
  .nav-list .pill{ padding:10px; }
}

/* Tools (right column) */
.nav-tools{ display:flex; align-items:center; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1.6px solid var(--elev2); border-radius:999px;
  background:transparent; color:#fff; line-height:1; white-space:nowrap; transition:background .2s, border-color .2s;
}
.chip:hover{ background:var(--chip-bg); border-color:var(--accent); }

/* “More” dropdown */
.more{ position:relative; }
.more .dropdown{
  position:absolute; top:115%; right:0;
  background:var(--header); border:1px solid var(--elev2); border-radius:12px;
  padding:8px; min-width:220px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform: translateY(-6px); transition: .15s ease; z-index:1001;
}
.more[data-open="true"] .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown li{ list-style:none; }
.dropdown a{
  display:flex; gap:10px; align-items:center; padding:10px 10px; border-radius:10px; border:1px solid transparent; color:#fff;
}
.dropdown a:hover{ background:var(--chip-bg); border-color:var(--accent); }

/* Hamburger + mobile drawer */
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span{ width:24px; height:3px; background:#fff; border-radius:3px; }

@media (max-width: 860px){
  #navLinks{
    position:fixed; top:72px; left:0; right:0; z-index:1500;
    background:var(--header); border-bottom:1px solid var(--elev2);
    transform: translateY(-120%); transition: transform .25s ease;
    padding:12px; display:flex; flex-direction:column; align-items:stretch; gap:8px;
    max-height: calc(100vh - 72px); overflow:auto;
  }
  #navLinks.open{ transform: translateY(0); }
  #navLinks .pill span{ display:inline; } /* show text again */
  .pill, .chip{ width:100%; justify-content:flex-start; }
  .more .dropdown{ position:static; opacity:1; visibility:visible; transform:none; padding:0; border:none; box-shadow:none; }
  .dropdown a{ padding:10px 14px; border:1px solid var(--elev2); margin-top:6px; border-radius:10px; }
  .hamburger{ display:flex; }
}

/* Progress bar */
#scroll-progress{ position:fixed; top:0; left:0; width:0%; height:4px; background:var(--accent); z-index:1100; }

/* Hero — iOS stacking & motion-safe */
.hero{
  position:relative; min-height:100vh; display:grid; place-items:center; text-align:center; color:#fff; overflow:hidden;
  isolation:isolate; /* ensure positive/negative z-index behave consistently on iOS */
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(255,215,0,0.15), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%),
    url('parallax.jpg') center/cover no-repeat; /* removed 'fixed' for iOS stability */
  filter:brightness(.78); z-index:-1;
}
#particles-js{ position:absolute; inset:0; z-index:0; pointer-events:none; }
#three-hero{ position:absolute; inset:0; z-index:0; display:none; }
.hero-content{ position:relative; z-index:1; max-width:900px; padding:0 18px; }
.subhead{ opacity:.95; font-size:1.1rem; }
.hero-ctas{ margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.call-to-action{ background:var(--accent); color:var(--accent-ink); padding:12px 22px; border-radius:10px; font-weight:700; box-shadow: 0 10px 25px rgba(255,215,0,.25); }
.ghost-btn{ border:1.6px solid var(--accent); color:#fff; padding:10px 20px; border-radius:10px; }

/* Main */
main{ position:relative; z-index:1; background:var(--bg); padding:64px 16px; max-width:1280px; margin:auto; }
.section-title{ font-weight:700; letter-spacing:.2px; }

/* Projects */
.projects-section{ margin-top:50px; text-align:center; }
.projects-toolbar{ margin:16px auto 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.filter-controls{ display:flex; gap:8px; }
.filter-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 14px; border-radius: 999px; border: 1.6px solid var(--elev2);
  background: var(--elev1); color: var(--text); font-weight: 600;
  transition: background .2s, border-color .2s, transform .06s ease-in;
}
.filter-btn:hover { background: var(--chip-bg); border-color: var(--accent); }
.filter-btn:active { transform: translateY(1px); }

.search-wrap{ position:relative; min-width:260px; }
.search-wrap input{ width:100%; padding:11px 36px 11px 12px; border-radius:10px; border:1.6px solid var(--elev2); background:var(--elev1); color:var(--text); }
.search-wrap i{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted); }

.grid{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; }
.project-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
  border:1px solid var(--elev2);
  border-radius:14px; box-shadow:var(--shadow);
  transition: transform .25s, box-shadow .25s;
  overflow:hidden; width:310px; display:flex; flex-direction:column;
  transform-style:preserve-3d; perspective:1000px;
}
.project-card:hover{ transform: rotateX(6deg) rotateY(-6deg) translateY(-4px); box-shadow:0 25px 50px rgba(0,0,0,.25); }
.project-card img{ width:100%; height:188px; object-fit:cover; background:linear-gradient(180deg, #f0f0f0, #ddd); }
.project-content{ padding:18px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.project-content h3{ margin:0 0 2px; }
.project-content p{ color:var(--muted); font-size:.95rem; }
.project-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.project-link{ background:var(--accent); color:var(--accent-ink); padding:9px 14px; border-radius:9px; font-weight:700; }
.btn-outline{ border: 1.6px solid var(--accent); color: var(--text); background: transparent; padding: 8px 12px; border-radius: 9px; }
.btn-outline:hover{ background: var(--chip-bg); }

/* Activity */
.activity-section{ margin-top:80px; text-align:center; }
.activity-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin-top:18px; }
.activity-card{ background: var(--elev1); border-radius:12px; box-shadow:var(--shadow); padding:14px 16px; text-align:left; border:1px solid var(--elev2); }
.activity-card h3{ margin: 0 0 6px; font-size: 1.02rem; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background: var(--accent); color: var(--accent-ink); font-size:.78rem; font-weight:700; }
.badge.muted{ background: var(--elev2); color: var(--text); }
.activity-card .pub-meta{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 6px; }
.activity-card .btn-outline{ display:inline-block; margin-top:8px; }

/* Timeline */
.timeline-section{ margin-top:84px; text-align:center; }
.timeline-container{ margin-top:30px; position:relative; }
.timeline-entry{ margin:20px 0; width:100%; }
.timeline-date{ font-weight:700; margin-bottom:10px; }
.timeline-card{ background:var(--elev1); margin:0 auto; max-width:720px; padding:22px; border-radius:12px; text-align:left; box-shadow:var(--shadow); border:1.6px solid var(--elev2); }
.timeline-card p{ color:var(--muted); margin:0 0 8px; }
.download-cv-container{ margin:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.download-cv-btn{ display:inline-block; background:var(--accent); color:var(--accent-ink); padding:12px 22px; border-radius:10px; font-weight:700; }

/* Skills */
.skills-section{ margin-top:84px; text-align:center; }
.skills-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:30px; max-width:980px; margin-inline:auto; }
.skill-bar{ width:280px; text-align:left; }
.skill-title{ margin-bottom:6px; font-weight:700; }
.progress-bar{ background:var(--elev2); border-radius:20px; height:20px; overflow:hidden; position:relative; }
.progress-fill{ background:var(--accent); width:0%; height:100%; border-radius:20px; transition: width 1s ease; }

/* Publications & Grants */
.pubs-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin: 10px 0 14px; }
.pubs-toolbar input, .pubs-toolbar select{
  padding:10px; border:1.6px solid var(--elev2); border-radius:10px; background:var(--elev1); color:var(--text); min-width: 180px;
}
.pubs-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; margin-top: 10px; }
.pub-card, .grant-card{ background: var(--elev1); border-radius:12px; box-shadow:var(--shadow); padding:16px; border:1.6px solid var(--elev2); }
.pub-card .pub-meta, .grant-card .pub-meta{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.pub-title{ margin:6px 0; }
.pub-authors, .pub-venue{ color: var(--muted); margin: 4px 0; }
.pub-venue{ margin-bottom:10px; } /* extra breathing room */
.pub-card .btn-outline, .grant-card .btn-outline, .lab-card .btn-outline{ margin-top:10px; } /* FIX: spacing under text */

/* Labs (optional card grid if present) */
.labs-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:10px; }
.lab-card{ background:var(--elev1); border:1.6px solid var(--elev2); border-radius:12px; padding:16px; box-shadow:var(--shadow); }

/* Contact + Toast */
.contact-section{ margin-top:84px; text-align:center; }
.contact-section form{ max-width:640px; margin:0 auto; text-align:left; }
.contact-section label{ display:block; margin-bottom:6px; color:var(--text); font-weight:700; }
.contact-section input, .contact-section textarea{
  width:100%; padding:12px; margin-bottom:16px; border:1.6px solid var(--elev2); border-radius:10px; background:var(--elev1); color:var(--text);
}
.contact-section input:focus, .contact-section textarea:focus{ outline:none; border-color:var(--accent); }
.contact-section form button{ background:var(--accent); color:var(--accent-ink); padding:12px 20px; border-radius:10px; font-weight:700; }
.social-links{ display:flex; justify-content:center; gap:28px; margin-top:18px; }
.social-links a{ font-size:2rem; color: var(--text); }
.social-links a:hover{ color:var(--accent); }
.notification{ position:fixed; bottom:30px; right:30px; background:#333; color:#fff; padding:14px 18px; border-radius:10px; box-shadow:var(--shadow); display:none; opacity:0; transition:opacity .35s; z-index:9999; }
.notification.show{ display:block; opacity:1; }
.notification.success{ background:#2e7d32; }
.notification.error{ background:#c62828; }

/* Footer */
footer{ padding:20px; background:var(--header); color:#fff; text-align:center; }

/* Back to top */
#backToTop{ position:fixed; bottom:30px; right:30px; background:var(--accent); color:var(--accent-ink);
  padding:12px 15px; border-radius:50%; box-shadow:var(--shadow); display:none; cursor:pointer; transition:background .2s; z-index:999; }
#backToTop:hover{ filter:brightness(.9); }

/* Fade-in */
.fade-in-on-scroll{ opacity:1; transform:none; }
.js .fade-in-on-scroll{ opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.js .fade-in-on-scroll.visible{ opacity:1; transform:translateY(0); }

/* Modal + Site Search */
.modal[aria-hidden="true"]{ display:none; }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:20px; z-index:1900; }
.modal-content{ width:min(820px, 95vw); background:var(--elev1); border-radius:12px; box-shadow:var(--shadow); padding:20px; position:relative; border:1.6px solid var(--elev2); }
.modal-close{ position:absolute; right:28px; top:18px; font-size:2rem; background:transparent; border:none; color:var(--text); cursor:pointer; }

.site-search[aria-hidden="true"]{ display:none; }
.site-search{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:start; padding:40px 20px; z-index:2200; }
.site-search-inner{ width:min(880px, 94vw); margin:auto; }
.site-search-bar{ display:flex; gap:10px; align-items:center; background:var(--elev1); padding:8px 10px; border-radius:10px; box-shadow:var(--shadow); border:1.6px solid var(--elev2); }
.site-search-bar input{ flex:1; border:none; outline:none; background:transparent; color:var(--text); padding:10px; }
.site-search-results{ margin-top:10px; background:var(--elev1); border-radius:10px; box-shadow:var(--shadow); max-height:60vh; overflow:auto; border:1.6px solid var(--elev2); }
.site-search-item{ padding:12px 14px; border-bottom:1.6px solid var(--elev2); }
.site-search-item:hover{ background:var(--chip-bg); }

/* Perf panel */
#perfPanel{ position:fixed; left:18px; bottom:18px; background:var(--elev1); border:1.6px solid var(--elev2); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow); z-index:2100; display:none; min-width:220px; }
#perfPanel.show{ display:block; }
.perf-row{ font-size:.92rem; padding:3px 0; }

/* Matrix */
#matrixCanvas{ position:fixed; inset:0; display:none; z-index:1200; pointer-events:none; opacity:.6; }

/* Lightbox */
#imageModal{ position:fixed; inset:0; background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center; z-index: 9999; }
#imageModal img{ max-width:90%; max-height:90%; border:2px solid var(--accent); border-radius:10px; }
#imageModal .close-btn{ position:absolute; top:20px; right:20px; font-size:2rem; color:#fff; cursor:pointer; }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .js .fade-in-on-scroll{ transition:none; }
  .project-card:hover{ transform:none; }
  .loader{ animation:none; }
}