:root{
  --bg:#0A0F1C;
  --panel:#101A2E;
  --panel-2:#0D1526;
  --line:#233252;
  --text:#E9EEF7;
  --text-dim:#8593AD;
  --text-faint:#556180;
  --cool:#43C8EA;   /* positive vorticity — CFD diverging colormap */
  --warm:#F2765C;   /* negative vorticity */
  --cool-dim: rgba(67,200,234,0.15);
  --warm-dim: rgba(242,118,92,0.15);
}

/* Light theme, content pages only. The hero re-pins these names to dark
   values in its own rule below. */
:root[data-theme="light"]{
  --bg:#F7F8FA;
  --panel:#FFFFFF;
  --panel-2:#EFF1F4;
  --line:#DDE1E7;
  --text:#14171C;
  --text-dim:#4B5563;
  --text-faint:#7A828E;
  --cool:#0E7C99;
  --warm:#C94B32;
  --cool-dim: rgba(14,124,153,0.10);
  --warm-dim: rgba(201,75,50,0.10);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:'JetBrains Mono',monospace;}

a{color:inherit;}

::selection{background:var(--cool-dim);color:var(--text);}

:focus-visible{
  outline:2px solid var(--cool);
  outline-offset:3px;
}

/* ---------- HERO ----------
   A small negative `top` lets the hero's top padding scroll away before the
   box catches; name, role, socials, and nav then stay pinned together. */
.hero{
  /* Always dark, whatever the theme toggle says. */
  --bg:#0A0F1C;
  --panel:#101A2E;
  --panel-2:#0D1526;
  --line:#233252;
  --text:#E9EEF7;
  --text-dim:#8593AD;
  --text-faint:#556180;
  --cool:#43C8EA;
  --warm:#F2765C;
  --cool-dim: rgba(67,200,234,0.15);
  --warm-dim: rgba(242,118,92,0.15);

  position:sticky;
  top:-14px;
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:2.7rem 0 1.8rem;
  background:var(--bg);
  color:var(--text);
  overflow-anchor:none;
}

#flowfield{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 45%, rgba(10,15,28,0.15) 0%, rgba(10,15,28,0.75) 65%, var(--bg) 100%);
  z-index:1;
  pointer-events:none;
}

.hero-top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:0 clamp(1.5rem, 5vw, 4rem);
}

.hero-nav{
  display:flex;
  gap:1.6rem;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.hero-nav a{
  color:var(--text-dim);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.hero-nav a:hover, .hero-nav a.active{color:var(--cool);border-bottom-color:var(--cool);}

.hero-top-right{
  display:flex;
  align-items:center;
  gap:1.4rem;
}

.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  color:var(--text-dim);
  font-size:0.95rem;
  font-family:inherit;
  cursor:pointer;
}
.theme-toggle:hover{color:var(--cool);border-color:var(--cool);}

.hero-main{
  position:relative;
  z-index:2;
  padding:0 clamp(1.5rem, 5vw, 4rem);
  max-width:1100px;
}

h1.name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2.4rem, 7vw, 4.6rem);
  line-height:0.98;
  letter-spacing:-0.02em;
}
h1.name a{color:inherit;text-decoration:none;}

.role-line{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.05rem, 2.2vw, 1.4rem);
  color:var(--text-dim);
  margin-top:0.9rem;
  font-weight:500;
}
.role-line .sep{color:var(--text-faint);margin:0 0.5em;}
.role-line .warm{color:var(--warm);}

.social-links{
  display:flex;
  gap:0.8rem;
  margin-top:1.1rem;
}
.social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 0.65rem;
  border:1px solid var(--text-dim);
  border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.02em;
  color:var(--text);
  opacity:0.85;
  text-decoration:none;
  white-space:nowrap;
}
.social-links a:hover{color:var(--cool);border-color:var(--cool);opacity:1;}

.cv-download{
  display:flex;
  justify-content:flex-end;
  padding:2rem clamp(1.5rem, 5vw, 4rem) 0;
  max-width:1200px;
  margin:0 auto;
}
.cv-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.7rem 1.3rem;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  text-decoration:none;
  color:var(--text);
  transition:color 0.2s, border-color 0.2s;
}
.cv-link:hover{color:var(--cool);border-color:var(--cool);}

.resume-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}

/* ---------- SUBPAGE BAR (resume.html) ---------- */
.subpage-bar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.1rem clamp(1.5rem, 5vw, 4rem);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.back-link{
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:var(--text-dim);
  text-decoration:none;
}
.back-link:hover{color:var(--cool);}

/* ---------- SECTIONS ---------- */
section{
  padding:5.5rem clamp(1.5rem, 5vw, 4rem);
  max-width:1200px;
  margin:0 auto;
  border-bottom:1px solid var(--line);
  scroll-margin-top:var(--stuck-height, 90px);
}
section:last-of-type{border-bottom:none;}

.section-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:2.75rem;
}
.section-head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:600;
  letter-spacing:-0.01em;
}
.section-head .rule{
  flex:1;
  height:1px;
  background:var(--line);
}

/* About */
.about-text{
  font-size:1.12rem;
  color:var(--text-dim);
  max-width:900px;
}
.about-text strong{color:var(--text);font-weight:600;}
.about-text p + p{margin-top:1.1rem;}

/* Profile (resume page) */
.profile-grid{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:3.5rem;
}
.profile-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--text-faint);
  line-height:1.9;
}
.profile-label div{margin-bottom:0.3rem;}
.profile-label span{color:var(--text-dim);}
.profile-text{
  font-size:1.12rem;
  color:var(--text-dim);
  max-width:640px;
}
.profile-text strong{color:var(--text);font-weight:600;}

/* Skills */
.skill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.skill-card{
  background:var(--panel-2);
  padding:1.6rem 1.5rem;
  transition:background 0.25s;
}
.skill-card:hover{background:var(--panel);}
.skill-card .tag{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  color:var(--cool);
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:block;
  margin-bottom:0.8rem;
}
.skill-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:0.7rem;
}
.skill-card p{
  font-size:0.9rem;
  color:var(--text-dim);
}

/* Experience timeline */
.timeline{
  position:relative;
  padding-left:2.4rem;
}
.timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  bottom:6px;
  width:1px;
  background:linear-gradient(to bottom, var(--cool), var(--line) 85%);
}
.tl-item{
  position:relative;
  margin-bottom:3rem;
}
.tl-item:last-child{margin-bottom:0;}
.tl-item::before{
  content:"";
  position:absolute;
  left:-2.4rem;
  top:0.4rem;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--cool);
}
.tl-date{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--warm);
  margin-bottom:0.35rem;
}
.tl-item h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.25rem;
  font-weight:600;
}
.tl-item .org{
  color:var(--text-dim);
  font-size:0.95rem;
  margin-bottom:1rem;
}
.tl-item ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}
.tl-item li{
  color:var(--text-dim);
  font-size:0.96rem;
  padding-left:1.1rem;
  position:relative;
}
.tl-item li::before{
  content:"→";
  position:absolute;
  left:0;
  color:var(--text-faint);
}
.tl-item .subdomain{
  margin-top:1.2rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.tl-item .subdomain h4{
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem;
  color:var(--cool);
  margin-bottom:0.5rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.tl-item .subdomain p{
  color:var(--text-dim);
  font-size:0.96rem;
}

/* Projects */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.project-card{
  background:var(--panel-2);
  padding:1.8rem 1.7rem;
  transition:background 0.25s;
}
.project-card:hover{background:var(--panel);}
.project-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:0.6rem;
}
.project-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--text-faint);
  margin-bottom:1rem;
}
.project-meta a{
  color:var(--cool);
  text-decoration:none;
}
.project-meta a:hover{text-decoration:underline;}
.project-card p{
  font-size:0.95rem;
  color:var(--text-dim);
}
.project-result{
  margin-top:0.9rem;
  padding-top:0.9rem;
  border-top:1px solid var(--line);
  font-size:0.9rem;
  color:var(--text);
}
.project-result strong{color:var(--cool);font-weight:600;}

/* Writing */
.writing-list{list-style:none;}
.writing-item{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--line);
}
.writing-item:last-child{border-bottom:none;}
.writing-item a{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  text-decoration:none;
  color:var(--text);
}
.writing-item a:hover{color:var(--cool);}
.writing-item p{
  color:var(--text-dim);
  font-size:0.92rem;
}

.pub-note{
  margin-top:1.2rem;
  color:var(--text-dim);
  font-size:0.9rem;
}
.pub-note a{color:var(--cool);text-decoration:none;}
.pub-note a:hover{text-decoration:underline;}

/* Education / Languages */
.split-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:3.5rem;
}
.edu-item{
  display:flex;
  justify-content:space-between;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
  gap:1rem;
}
.edu-item:last-child{border-bottom:none;}
.edu-item .deg{font-weight:500;}
.edu-org{
  color:var(--text-dim);
  font-size:0.92rem;
  margin-top:0.25rem;
}
.edu-note{
  color:var(--text-faint);
  font-size:0.85rem;
  margin-top:0.2rem;
}
.edu-item .date{
  font-family:'JetBrains Mono',monospace;
  color:var(--text-faint);
  font-size:0.85rem;
  white-space:nowrap;
}
.lang-item{
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.lang-item:last-child{border-bottom:none;}
.lang-item .lname{
  display:flex;
  justify-content:space-between;
  margin-bottom:0.55rem;
  font-size:0.95rem;
}
.lang-item .lname .lvl{color:var(--text-faint);font-family:'JetBrains Mono',monospace;font-size:0.8rem;}
.bar-track{height:4px;background:var(--line);border-radius:2px;overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(to right, var(--cool), var(--warm));border-radius:2px;}

/* Writing post */
.post{
  padding:4rem clamp(1.5rem, 5vw, 4rem) 2rem;
  max-width:760px;
  margin:0 auto;
}
.post h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  line-height:1.2;
  margin-bottom:2rem;
}
.post h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.35rem;
  margin:3rem 0 1rem;
}
.post p{
  color:var(--text-dim);
  line-height:1.75;
  margin-bottom:1.3rem;
}
.post strong{color:var(--text);}
.post ul{margin:0 0 1.3rem 1.2rem;}
.post li{
  color:var(--text-dim);
  line-height:1.75;
  margin-bottom:0.6rem;
}
.post a{color:var(--cool);text-decoration:none;}
.post a:hover{text-decoration:underline;}
.table-wrap{overflow-x:auto;margin:2rem 0;}
.post table{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.post th,
.post td{
  padding:0.65rem 0.9rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  color:var(--text-dim);
  vertical-align:top;
}
.post th{
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  white-space:nowrap;
}
.post td strong{color:var(--text);}

.post figure{margin:2.5rem 0;}
.post img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:6px;
  /* Figures are saved with transparent backgrounds, so they need a light
     ground of their own to stay readable under the dark theme. */
  background:#fff;
}
.post figcaption{
  color:var(--text-faint);
  font-size:0.85rem;
  font-family:'JetBrains Mono',monospace;
  margin-top:0.7rem;
  line-height:1.5;
}

/* Footer */
footer{
  padding:4rem clamp(1.5rem, 5vw, 4rem) 8rem;
  max-width:1200px;
  margin:0 auto;
  scroll-margin-top:var(--stuck-height, 90px);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
}
footer .ftitle{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem;
  font-weight:600;
}
footer .flinks{
  display:flex;
  gap:1.8rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:var(--text-dim);
}
footer .flinks a{text-decoration:none;}
footer .flinks a:hover{color:var(--cool);}
footer .fnote{
  width:100%;
  color:var(--text-faint);
  font-size:0.78rem;
  margin-top:1.5rem;
  font-family:'JetBrains Mono',monospace;
}

@media (max-width: 780px){
  .profile-grid, .split-grid{grid-template-columns:1fr;gap:2rem;}
  .tl-item::before{left:-2rem;}
  .timeline{padding-left:2rem;}

  .hero{padding:1rem 0 1.25rem;gap:1rem;}
  .hero-top{flex-direction:column;align-items:flex-start;gap:0.7rem;}
  .hero-nav{flex-wrap:wrap;gap:0.6rem 1rem;font-size:0.7rem;}
  .social-links a{height:32px;font-size:0.68rem;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}