:root{
  --paper:#F6F4EF; --ink:#15181E; --ink-soft:#4A4F58;
  --panel:#0E1622; --panel-2:#16202F; --line:#E4E0D7; --line-dk:#243245;
  --emerald:#0E6E52; --emerald-lite:#41C396; --brass:#B6892F; --brass-lite:#D9B25A;
  --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.1; letter-spacing:-.01em; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.label{font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; color:var(--emerald); font-weight:500}
.label.on-dark{color:var(--emerald-lite)}

/* NAV */
nav{position:sticky; top:0; z-index:50; background:rgba(246,244,239,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:62px}
.brand{font-family:"Fraunces",serif; font-weight:600; font-size:18px; letter-spacing:-.01em}
.brand span{color:var(--emerald)}
.navlinks{display:flex; gap:22px; align-items:center}
.navlinks a{font-size:14px; color:var(--ink-soft); text-decoration:none; transition:color .15s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.cta{color:#fff; background:var(--emerald); padding:8px 14px; border-radius:8px; font-weight:500}
.navlinks a.cta:hover{background:#0b5a43}
.langtoggle{display:inline-flex; gap:0; font-family:"IBM Plex Mono",monospace; font-size:12px;
  border:1px solid var(--line); border-radius:7px; overflow:hidden}
.langtoggle a{padding:6px 9px; color:var(--ink-soft); text-decoration:none}
.langtoggle a.active{background:var(--ink); color:#fff}
@media(max-width:760px){ .navlinks a:not(.cta):not(.langtoggle a){display:none} .navlinks .navsec{display:none} }

/* HERO */
.hero{position:relative; color:#EFF2F0; overflow:hidden;
  background:linear-gradient(180deg, rgba(14,22,34,.93), rgba(14,22,34,.97)), #0E1622 url('/assets/banner.jpg') center/cover no-repeat;}
.hero .grid{display:grid; grid-template-columns:1.5fr .9fr; gap:48px; align-items:center; padding:78px 0 70px}
.hero h1{font-size:clamp(40px,6vw,68px); color:#fff; font-weight:600}
.hero .head{font-size:18px; color:#C5CEDA; margin:18px 0 0; max-width:40ch}
.hero .loc{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; color:#9AA8B8}
.quote{margin:26px 0 0; padding-left:18px; border-left:3px solid var(--brass-lite);
  font-family:"Fraunces",serif; font-style:italic; font-size:20px; color:#E8DEC8; max-width:32ch}
.hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:9px;
  font-size:15px; font-weight:500; text-decoration:none; transition:.15s}
.btn-em{background:var(--emerald-lite); color:#06231a}
.btn-em:hover{background:#5ad3a8}
.btn-ghost{border:1px solid var(--line-dk); color:#D6DEE8}
.btn-ghost:hover{border-color:#3c5374; background:rgba(255,255,255,.04)}
.portrait{position:relative; justify-self:center}
.portrait img{width:230px; height:230px; object-fit:cover; border-radius:20px;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 24px 60px rgba(0,0,0,.45)}
.portrait::after{content:""; position:absolute; inset:-10px; border-radius:26px;
  border:1px solid rgba(65,195,150,.35); pointer-events:none}
.facts{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line-dk)}
.facts div{font-size:13.5px; color:#AEB9C6}
.facts b{color:#fff; font-weight:600}
.node-svg{position:absolute; inset:0; width:100%; height:100%; opacity:.16; pointer-events:none}
@media(max-width:820px){
  .hero .grid{grid-template-columns:1fr; gap:30px; padding:54px 0 48px}
  .portrait{order:-1; justify-self:start}
  .portrait img{width:128px; height:128px; border-radius:16px}
}

/* SECTIONS */
section{padding:74px 0}
.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:36px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px); margin-top:10px}
.lead{font-size:19px; color:var(--ink-soft); max-width:64ch; margin-top:8px}

/* IMPACT */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tile{border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--paper);
  transition:transform .15s, box-shadow .15s}
.tile:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,24,30,.07)}
.tile .num{font-family:"Fraunces",serif; font-weight:600; font-size:46px; line-height:1; color:var(--emerald); letter-spacing:-.02em}
.tile .k{font-weight:600; margin-top:12px; font-size:16px}
.tile .c{color:var(--ink-soft); font-size:14px; margin-top:4px}
@media(max-width:820px){ .tiles{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .tiles{grid-template-columns:1fr} .tile .num{font-size:40px} }

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:48px}
.about-grid p{margin:0 0 16px}
.focus{list-style:none; margin:0; padding:0}
.focus li{padding:13px 0; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:baseline}
.focus li::before{content:"▸"; color:var(--emerald); font-size:13px}
.focus li:last-child{border-bottom:0}
.panelcard{background:var(--panel); color:#DCE3EB; border-radius:16px; padding:28px}
.panelcard .label{color:var(--emerald-lite)}
.panelcard h3{color:#fff; font-size:20px; margin:10px 0 14px}
@media(max-width:820px){ .about-grid{grid-template-columns:1fr; gap:28px} }

/* EXPERIENCE */
.timeline{margin-top:8px}
.job{position:relative; padding:0 0 36px 30px; border-left:2px solid var(--line)}
.job:last-child{border-left-color:transparent; padding-bottom:0}
.job::before{content:""; position:absolute; left:-8px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:3px solid var(--emerald)}
.job.cur::before{background:var(--emerald)}
.job .role{font-family:"Fraunces",serif; font-weight:600; font-size:22px}
.job .co{font-weight:600; color:var(--emerald)}
.job .meta{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.04em; margin:6px 0 6px}
.job .ctx{font-size:14.5px; color:var(--ink-soft); margin:0 0 12px; font-style:italic}
.job ul{margin:0; padding-left:18px}
.job li{margin:5px 0; color:#2c313a}
.badge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--brass); border:1px solid #E6D8B6; background:#FBF6E9; border-radius:999px;
  padding:3px 9px; margin-left:8px; vertical-align:middle}

/* TWO-COL */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:48px}
@media(max-width:820px){ .twocol{grid-template-columns:1fr; gap:36px} }
.item{padding:16px 0; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item h3{font-size:18px; font-family:"Fraunces",serif}
.item .sub{color:var(--emerald); font-weight:600; font-size:15px; margin-top:2px}
.item .when{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-soft); margin-top:3px}
.item .extra{color:var(--ink-soft); font-size:14.5px; margin-top:6px}

/* CHIPS */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 15px; font-size:14px}
.chip.em{border-color:#BfE3D5; background:#EEF8F3; color:#0b5a43; font-weight:500}
.lang{display:flex; gap:10px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line)}
.lang:last-child{border-bottom:0}
.lang b{font-family:"Fraunces",serif; font-size:17px; min-width:120px}
.lang span{color:var(--ink-soft); font-size:14.5px}

/* MINI CARDS */
.minis{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:620px){ .minis{grid-template-columns:1fr} }
.mini{border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff}
.mini .tag{color:var(--brass)}
.mini h3{font-size:18px; margin:8px 0 4px; font-family:"Fraunces",serif}
.mini p{margin:0; color:var(--ink-soft); font-size:14.5px}

/* FOOTER */
footer{background:var(--panel); color:#C7D0DA; padding:60px 0 50px; margin-top:10px}
footer h2{color:#fff; font-size:30px; max-width:22ch}
footer a.mail{color:var(--emerald-lite); text-decoration:none; font-weight:500}
.foot-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:26px}
.foot-row .small{font-size:13px; color:#8493A4; font-family:"IBM Plex Mono",monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}