:root{
  --paper:#F6F5F1;
  --paper-2:#EFEEE8;
  --ink:#1C2333;
  --slate:#5B6472;
  --line:#D7D5CC;
  --accent:#3E6259;
  --accent-soft:#E3EAE6;
  --stamp:#8A4B32;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft); color:var(--ink);}
a{color:inherit;}

.wrap{max-width:920px; margin:0 auto; padding:0 32px;}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---- Topbar ---- */
header.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(246,245,241,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:920px; margin:0 auto; padding:16px 32px;
  display:flex; justify-content:space-between; align-items:center;
}
.mark{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; letter-spacing:0.06em;
  color:var(--slate);
}
.mark b{color:var(--ink); font-weight:500;}
.langtoggle{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  display:flex; gap:2px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}
.langtoggle a{
  background:none; border:none; cursor:pointer;
  padding:6px 14px;
  font-family:inherit; font-size:inherit;
  color:var(--slate);
  text-decoration:none;
  transition:background 0.15s, color 0.15s;
}
.langtoggle a.active{background:var(--ink); color:var(--paper);}

/* ---- Hero ---- */
.hero{padding:72px 0 56px; border-bottom:1px solid var(--line);}
.hero-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(38px, 6vw, 62px);
  line-height:1.02;
  letter-spacing:-0.01em;
}
.role{
  font-family:'Space Grotesk', sans-serif;
  font-size:19px; font-weight:500;
  color:var(--accent);
  margin-top:14px;
}
.bio{
  max-width:56ch; margin-top:22px;
  font-size:16px; color:var(--slate);
}
.contact-row{
  margin-top:30px;
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
}
.contact-row a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px;}
.contact-row a:hover{border-color:var(--accent); color:var(--accent);}

/* stamps */
.stamps{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px;}
.stamp{
  border:1px solid var(--line);
  border-radius:2px;
  padding:12px 16px;
  min-width:120px;
  position:relative;
}
.stamp .num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:24px; color:var(--ink);
}
.stamp .lbl{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--slate); margin-top:2px;
}

/* ---- Section shell ---- */
section{padding:56px 0;}
section + section{border-top:1px solid var(--line);}
.section-head{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:36px;
}
.section-code{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; color:var(--accent);
}
h2{
  font-family:'Space Grotesk', sans-serif;
  font-size:26px; font-weight:600;
}

/* ---- Route timeline (signature element) ---- */
.route{position:relative; padding-left:34px;}
.route::before{
  content:"";
  position:absolute; left:5px; top:6px; bottom:6px;
  width:1px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 11px);
}
.leg{position:relative; padding-bottom:44px;}
.leg:last-child{padding-bottom:0;}
.leg::before{
  content:"";
  position:absolute; left:-34px; top:4px;
  width:11px; height:11px; border-radius:50%;
  background:var(--paper);
  border:2px solid var(--accent);
}
.leg-meta{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  color:var(--slate); margin-bottom:6px;
}
.leg-meta .dates{color:var(--accent);}
.leg h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:19px; font-weight:600;
}
.leg .org{
  font-size:14.5px; color:var(--slate); margin-top:1px; margin-bottom:12px;
}
.leg ul{list-style:none;}
.leg li{
  position:relative; padding-left:16px;
  font-size:14.5px; color:var(--ink);
  margin-bottom:7px;
}
.leg li::before{
  content:"–"; position:absolute; left:0; color:var(--slate);
}

/* ---- Skills grid ---- */
.skills-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.skill-card h3{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--accent); margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.skill-card p{font-size:14.5px; color:var(--slate); line-height:1.6;}

.systems{
  margin-top:36px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px;
}
.chip{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; color:var(--slate);
}

/* ---- Languages ---- */
.lang-list{display:flex; flex-direction:column; gap:18px; max-width:480px;}
.lang-row .top{display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:6px;}
.lang-row .top b{font-family:'Space Grotesk', sans-serif; font-weight:600;}
.lang-row .top span{font-family:'IBM Plex Mono', monospace; color:var(--accent); font-size:13px;}
.bar{height:6px; background:var(--paper-2); border-radius:3px; overflow:hidden;}
.bar > i{display:block; height:100%; background:var(--accent); border-radius:3px;}

/* ---- Education ---- */
.edu-item{padding:16px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.edu-item:last-child{border-bottom:none;}
.edu-item .deg{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15.5px;}
.edu-item .school{font-size:13.5px; color:var(--slate); margin-top:2px;}
.edu-item .yr{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--slate); white-space:nowrap;}

/* ---- Contact ---- */
.contact-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px;}
.footer-links{display:flex; flex-direction:column; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:13.5px; align-self:start;}
.footer-links a{text-decoration:none; border-bottom:1px solid var(--line); width:fit-content;}
.footer-links a:hover{border-color:var(--accent); color:var(--accent);}

.contact-form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate);}
.field input, .field textarea{
  font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  padding:10px 12px; resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); background:var(--paper);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
#cf-submit{
  align-self:flex-start;
  font-family:'IBM Plex Mono', monospace; font-size:13.5px;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:20px; padding:11px 26px;
  cursor:pointer; transition:background 0.15s;
}
#cf-submit:hover{background:var(--accent);}
#cf-submit:disabled{opacity:0.5; cursor:not-allowed;}
.cf-status{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--slate);}
.cf-status.ok{color:var(--accent);}
.cf-status.err{color:var(--stamp);}

@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---- Footer ---- */
footer{padding:32px 0 64px;}
.copyright{padding-top:20px; border-top:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--slate);}

@media (max-width:720px){
  .skills-grid{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  .topbar-inner{padding:14px 20px;}
}