/* ---------- Themes ----------
   Default is "navy". Readers pick another via the swatches in the header;
   the choice is stored per-browser and applied as <html data-theme="...">. */
:root{
  --bg:#0f1724;
  --bg-deep:#081022;
  --header-bg:rgba(15,23,36,0.9);
  --muted:#9aa4b2;
  --text:#e6eef6;
  --text-soft:#cbd5e1;
  --fg-rgb:255,255,255;      /* tint used for card fills and hairlines */
  --shadow-rgb:2,6,23;
  --accent:#7bd389;
  --accent-rgb:123,211,137;
  --on-accent:#022;
  --t-green:#7bd389; --t-blue:#7aa7ff; --t-gold:#f0c674; --t-purple:#c792ea; --t-teal:#64d8cb;
  --radius:12px;
  --wrap:1100px;
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family:var(--font-body);
  color-scheme:dark;
}
:root[data-theme="charcoal"]{
  --bg:#171717; --bg-deep:#0c0c0c; --header-bg:rgba(23,23,23,0.9);
  --shadow-rgb:0,0,0;
}
:root[data-theme="plum"]{
  --bg:#1c1328; --bg-deep:#100a19; --header-bg:rgba(28,19,40,0.9);
  --muted:#a99fb8; --shadow-rgb:8,3,16;
}
:root[data-theme="light"],
:root[data-theme="sand"]{
  --bg:#f7f8fa; --bg-deep:#eceff4; --header-bg:rgba(247,248,250,0.9);
  --muted:#5b6574; --text:#141a23; --text-soft:#333c49;
  --fg-rgb:15,23,36; --shadow-rgb:15,23,36;
  --accent:#23864a; --accent-rgb:35,134,74; --on-accent:#fff;
  --t-green:#23864a; --t-blue:#2f5fc4; --t-gold:#a36a00; --t-purple:#8a3fb8; --t-teal:#137a70;
  color-scheme:light;
}
:root[data-theme="sand"]{
  --bg:#f8f3e9; --bg-deep:#efe6d4; --header-bg:rgba(248,243,233,0.9);
  --muted:#6b604e; --text:#2a2318; --text-soft:#43392b;
  --fg-rgb:60,45,20; --shadow-rgb:60,45,20;
}
:root[data-theme="light"] .card,:root[data-theme="sand"] .card,
:root[data-theme="light"] .exp,:root[data-theme="sand"] .exp{background:rgba(255,255,255,0.7)}
:root[data-theme="light"] .card,:root[data-theme="sand"] .card{box-shadow:0 4px 14px rgba(var(--shadow-rgb),0.08)}

/* Theme picker */
.theme-picker{display:flex;align-items:center;gap:7px;margin-left:22px}
.theme-picker button{
  width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--swatch);border:2px solid rgba(var(--fg-rgb),0.25);
  transition:transform .15s ease, border-color .15s ease;
}
.theme-picker button:hover{transform:scale(1.15)}
.theme-picker button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.35)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

body{
  margin:0;
  transition:background-color .25s ease, color .25s ease;
  background:linear-gradient(180deg,var(--bg),var(--bg-deep));
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
}
h1,h2,h3,h4,h5,.logo,.exp-date,.news-date,.btn,nav a{font-family:var(--font-display)}
h1,h2,h3,h4{letter-spacing:-0.015em}
h3{margin-top:0}
img,video{max-width:100%;height:auto}

a,a:visited{color:var(--accent)}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:48px 20px}

/* ---------- Header ---------- */
.site-header{background:var(--header-bg);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(var(--fg-rgb),0.04)}
.site-header .wrap{display:flex;align-items:center;gap:12px;padding-top:16px;padding-bottom:16px}
.logo{margin:0 auto 0 0;font-size:1.2rem;letter-spacing:0.4px}
.logo a{color:var(--text);text-decoration:none}
nav a,nav a:visited{text-decoration:none;margin-left:18px;color:var(--muted);transition:color .15s ease}
nav a:hover,nav a:focus-visible{color:var(--accent);text-decoration:none}

/* ---------- Section headings ---------- */
main > section > h3{
  font-size:1.5rem;
  display:flex;align-items:center;gap:14px;
  margin-bottom:6px;
}
main > section > h3::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.35), rgba(var(--fg-rgb),0.02));
}
.highlight{color:var(--accent);font-weight:600;padding:0 2px}
ul{list-style-type:disc;margin-left:20px;padding-left:0}
.two-col{columns:2}
.two-col li{margin-bottom:4px}

/* ---------- Hero ---------- */
.hero{display:flex;align-items:center;gap:3em;padding:56px 20px 36px}
.hero-text{flex:1}
.hero h2{margin:0;font-size:2.1rem}
.tagline{color:var(--accent);margin:6px 0 14px;font-weight:600}
.contact-links{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:22px}
.btn,.btn:visited{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost,.btn.ghost:visited{background:transparent;border:1px solid rgba(var(--fg-rgb),0.12);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent)}
.links-label{margin:36px 0 8px;font-weight:600}
.social{display:flex;gap:20px;align-items:center}
.social svg{width:34px;height:34px;fill:var(--accent);display:block;transition:transform .15s ease}
.social a:hover svg{transform:translateY(-2px)}

/* Portrait: shows initials until media/profile.jpg exists */
.profile-pic{
  position:relative;flex-shrink:0;
  width:300px;height:300px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb),0.30), rgba(var(--accent-rgb),0.05) 70%);
  border:3px solid rgba(var(--accent-rgb),0.30);
  box-shadow:0 0 0 10px rgba(var(--accent-rgb),0.06), 0 18px 40px rgba(var(--shadow-rgb),0.55);
}
.profile-pic::before{
  content:attr(data-initials);
  font-family:var(--font-display);font-size:4.5rem;font-weight:700;
  color:var(--accent);letter-spacing:2px;
}
.profile-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

#about-detailed{padding-top:0}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:18px}
.card{
  background:linear-gradient(180deg, rgba(var(--fg-rgb),0.025), rgba(var(--fg-rgb),0.01));
  padding:20px;border-radius:var(--radius);
  border:1px solid rgba(var(--fg-rgb),0.06);
  box-shadow:0 6px 18px rgba(var(--shadow-rgb),0.6);
}
.card h4{margin:0 0 8px}
.card p{color:var(--muted);margin:0 0 12px}

/* Media placeholder used by project/mini/hw slots when a file is missing */
.empty{
  min-height:180px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.05) 0 12px, transparent 12px 24px),
    rgba(var(--fg-rgb),0.02);
  border:1px dashed rgba(var(--accent-rgb),0.30);
  color:var(--muted);font-size:.85rem;padding:12px;
}
.empty > img,.empty > video{display:none !important}
.empty::after{content:attr(data-label)}

/* ---------- News timeline ---------- */
.news{list-style:none;margin:22px 0 0;padding:0 0 0 28px;position:relative}
.news::before{
  content:"";position:absolute;left:5px;top:6px;bottom:0;width:2px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0.18));
}
.news-item{position:relative;padding:0 0 26px 0}
.news-item:last-child{padding-bottom:0}
.news-item::before{
  content:"";position:absolute;left:-27px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid rgba(var(--accent-rgb),0.55);
  transition:border-color .18s ease;
}
.news-item:first-child::before{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.14)}
.news-item:hover::before{border-color:var(--accent)}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:5px}
.news-date{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.news-tag{
  font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid currentColor;
}
.news-tag{background:color-mix(in srgb, currentColor 10%, transparent)}
.tag-role{color:var(--t-green)}
.tag-paper{color:var(--t-blue)}
.tag-award{color:var(--t-gold)}
.tag-talk{color:var(--t-purple)}
.tag-research{color:var(--t-teal)}
.news-item h4{margin:0 0 4px;font-size:1.02rem;line-height:1.35}
.news-item p{margin:0;color:var(--muted);font-size:.94rem}

.news-more > summary{
  position:relative;display:block;width:fit-content;list-style:none;cursor:pointer;
  padding:11px 0 11px 28px;color:var(--accent);
  font-family:var(--font-display);font-size:.92rem;font-weight:600;
}
.news-more > summary::-webkit-details-marker{display:none}
.news-more > summary::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:rgba(var(--accent-rgb),0.18)}
.news-more > summary::after{
  content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--bg);border:2px solid rgba(var(--accent-rgb),0.45);
}
.news-more > summary:hover{text-decoration:underline;text-underline-offset:3px}
.news-more-hide{display:none}
.news-more[open] .news-more-show{display:none}
.news-more[open] .news-more-hide{display:inline}
.news-earlier{margin-top:0}
.news-earlier::before{top:0;bottom:6px;background:linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0))}

.news-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:18px}
.news-figs figure{margin:0}
.news-figs img{width:100%;aspect-ratio:3/5;height:auto;object-fit:contain;border-radius:8px;background:rgba(var(--fg-rgb),0.05)}
.news-figs figcaption{font-size:.85em;color:var(--muted);margin-top:6px}

/* ---------- Project cards ---------- */
#projects .project-card{margin-top:22px}
.project-card{display:grid;grid-template-columns:1fr 1fr;gap:1.5em;align-items:stretch;margin-bottom:2em}
.project-media,.project-figure{display:flex;align-items:center;justify-content:center}
.project-body{grid-column:1 / 3}
.project-media video,.project-media img,.project-figure video,.project-figure img{
  width:100%;height:300px;object-fit:contain;border-radius:8px;display:block;background:#05090f;
}
.project-figure img{background:#fff;padding:6px}
/* Cards with a single wide video */
.project-card.single .project-media{grid-column:1 / -1}
.project-card.single .project-media video{height:420px}
/* Cards whose clip is a portrait phone video get extra height */
.project-card.tall .project-media video,.project-card.tall .project-media img,
.project-card.tall .project-figure img{height:440px}
.project-date{font-size:.85rem;color:var(--accent) !important;font-weight:600;margin:-2px 0 10px !important}
.project-body strong{color:var(--text)}

.tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{
  font-size:.78rem;padding:3px 10px;border-radius:999px;
  background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.22);color:var(--text);
}

.small-projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2em;margin-top:2em}
.mini-card{text-align:center;padding:1em;border-radius:10px}
.mini-media{margin-bottom:.6em}
.mini-media.empty{min-height:120px}
.mini-card img,.mini-card video{width:100%;height:150px;object-fit:cover;border-radius:6px;display:block;margin-bottom:.6em;background:#05090f}
.mini-card h5{margin:.2em 0 .45em;font-size:.98rem}
.mini-card p{font-size:.9em}

.hw-card{display:flex;flex-direction:column;gap:1em}
.hw-media.empty{min-height:150px}
.hw-card > img{width:100%;height:170px;object-fit:cover;border-radius:8px;display:block}
.hw-card strong{color:var(--text)}

/* ---------- Publications ---------- */
.pubs{margin-top:18px}
.pubs-note{color:var(--muted);margin-top:6px}
.pubs-note a{color:var(--accent)}
.pubs li{margin-bottom:14px;color:var(--muted)}
.pubs li > span:first-child{color:var(--text)}
.pubs strong{color:var(--accent)}
.pubs em{color:var(--text)}
.pub-badge{
  display:inline-block;margin-left:6px;font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:1px 8px;border-radius:999px;color:var(--t-gold);border:1px solid currentColor;background:color-mix(in srgb, currentColor 10%, transparent);
}

/* ---------- Experience & Education ---------- */
.timeline{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.exp{
  display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:start;
  background:linear-gradient(180deg, rgba(var(--fg-rgb),0.025), rgba(var(--fg-rgb),0.01));
  border:1px solid rgba(var(--fg-rgb),0.07);
  border-left:3px solid rgba(var(--accent-rgb),0.30);
  border-radius:var(--radius);padding:20px 24px;
  transition:border-left-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.exp:hover{border-left-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--shadow-rgb),0.55)}
.exp--nologo{grid-template-columns:1fr}
.exp-logo{
  position:relative;width:76px;height:76px;border-radius:10px;
  background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.exp-logo::before{content:attr(data-initials);font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--accent);letter-spacing:.5px}
.exp-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:9px}
.exp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.exp h4{margin:0;font-size:1.1rem}
.exp-date{
  color:var(--muted);font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums;
  border:1px solid rgba(var(--fg-rgb),0.09);border-radius:999px;padding:3px 11px;
}
.exp-org{color:var(--accent);font-weight:600;font-size:.95rem;margin:5px 0 10px}
.exp ul{margin:0 0 0 18px;padding:0}
.exp li{margin-bottom:6px;color:var(--text-soft)}
.exp li:last-child{margin-bottom:0}

/* ---------- Skills ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.skills-grid h4{font-size:1rem;margin-bottom:10px}

/* ---------- Awards ---------- */
.awards{margin-top:16px}
.awards li{margin-bottom:8px;color:var(--text-soft)}

/* ---------- Gallery ---------- */
.gallery-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.gallery-filters button{
  font:600 .85rem var(--font-display);color:var(--muted);cursor:pointer;
  padding:6px 14px;border-radius:999px;background:transparent;
  border:1px solid rgba(var(--fg-rgb),0.14);transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.gallery-filters button:hover{color:var(--text);border-color:rgba(var(--accent-rgb),0.5)}
.gallery-filters button[aria-pressed="true"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:12px}
.gallery-grid figure{
  position:relative;margin:0;overflow:hidden;border-radius:10px;cursor:zoom-in;
  background:rgba(var(--fg-rgb),0.05);
}
.gallery-grid figure.wide{grid-column:span 2}
.gallery-grid figure[hidden]{display:none}
.gallery-grid img,.gallery-grid video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-grid figure:hover img,.gallery-grid figure:hover video{transform:scale(1.04)}
.gallery-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  font-size:.82rem;line-height:1.35;color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,0.75));
  opacity:0;transform:translateY(6px);transition:opacity .2s ease, transform .2s ease;
}
.gallery-grid figure:hover figcaption,.gallery-grid figure:focus-visible figcaption{opacity:1;transform:none}
@media (hover:none){.gallery-grid figcaption{opacity:1;transform:none}}

.lightbox{
  border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh;overflow:visible;color:#fff;
}
.lightbox::backdrop{background:rgba(0,0,0,0.85)}
.lb-media img,.lb-media video{display:block;max-width:min(1100px,94vw);max-height:80vh;border-radius:8px;margin:0 auto}
.lb-caption{text-align:center;margin:12px 0 0;font-size:.95rem;color:#e6e6e6}
.lightbox button{
  position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,0.14);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;
}
.lightbox button:hover{background:rgba(255,255,255,0.28)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lightbox .lb-close{top:20px;right:16px;transform:none;font-size:1.6rem}

/* ---------- Alternating section tint ---------- */
.section-alt{position:relative}
.section-alt::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;background:rgba(var(--fg-rgb),0.022);
  border-top:1px solid rgba(var(--fg-rgb),0.05);border-bottom:1px solid rgba(var(--fg-rgb),0.05);
  z-index:-1;pointer-events:none;
}

.site-footer{text-align:center;padding:18px 16px;color:var(--muted);border-top:1px solid rgba(var(--fg-rgb),0.04);margin-top:36px;font-size:.9rem}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .site-header .wrap{flex-wrap:wrap;gap:8px;justify-content:center;text-align:center;padding-top:10px;padding-bottom:10px}
  nav{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px}
  nav a{margin-left:0}
  .logo{margin:0}
  .theme-picker{margin-left:0;width:100%;justify-content:center}
  .hero{flex-direction:column-reverse;align-items:flex-start;gap:1.5rem}
  .profile-pic{width:min(220px,60vw);height:min(220px,60vw);align-self:center}
  .profile-pic::before{font-size:3.2rem}
  .two-col{columns:1}
  .project-card{grid-template-columns:1fr;gap:1rem}
  .project-body{grid-column:1 / -1}
  .project-media video,.project-media img,.project-figure video,.project-figure img{height:260px}
  .project-card.tall .project-media video{height:420px}
  .project-card.single .project-media video{height:auto;aspect-ratio:16/9}
  .project-card.tall .project-figure video,.project-card.tall .project-figure img{height:260px}
  .small-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
  .exp{grid-template-columns:1fr;gap:14px;padding:18px}
  .exp-logo{width:64px;height:64px}
  .exp-date{white-space:normal}
  .gallery-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:180px}
}
@media (max-width:640px){
  .wrap{padding:28px 16px}
  .hero h2{font-size:1.6rem;line-height:1.25}
  main > section > h3{font-size:1.3rem}
  .card{padding:14px}
  .small-projects-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;gap:8px}
  p,li,a{overflow-wrap:anywhere}
}