/* ---------- base resets kept from the single-file build ---------- */
img{max-width:100%}
[hidden]{display:none!important}


:root{
  color-scheme:light;
  --paper:#eef1f3; --card:#ffffff; --sunk:#f5f7f8;
  --ink:#0f1417; --ink-2:#39454b; --muted:#69777e;
  --rule:#d7dee2; --rule-soft:#e6ebee;
  --p1:#0a8f80; --p2:#9c4a18; --p3:#5a3f99;
  --accent:#0a8f80;
  --todo-bg:#fdf1d8; --todo-ink:#8a5a12; --todo-rule:#e8d3ac;
  --shadow:0 1px 2px rgba(15,20,23,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0e1113; --card:#171b1e; --sunk:#12171a;
    --ink:#eaeff1; --ink-2:#b3bfc4; --muted:#849299;
    --rule:#283034; --rule-soft:#1e2529;
    --p1:#1fa08f; --p2:#cf7233; --p3:#8b76dd;
    --accent:#1fa08f;
    --todo-bg:#312512; --todo-ink:#e3b45f; --todo-rule:#4a3a1c;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0e1113; --card:#171b1e; --sunk:#12171a;
  --ink:#eaeff1; --ink-2:#b3bfc4; --muted:#849299;
  --rule:#283034; --rule-soft:#1e2529;
  --p1:#1fa08f; --p2:#cf7233; --p3:#8b76dd;
  --accent:#1fa08f;
  --todo-bg:#312512; --todo-ink:#e3b45f; --todo-rule:#4a3a1c;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding-inline:22px}
a{color:var(--accent)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.lab{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* ---------- draft banner ---------- */
.draft{background:var(--todo-bg); border-bottom:1px solid var(--todo-rule); color:var(--todo-ink);
  font-size:13px; padding-block:9px}
.draft .wrap{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.draft b{font-weight:600}
.draft code{font-family:"JetBrains Mono",monospace; font-size:12px;
  background:rgba(138,90,18,.12); padding:1px 5px; border-radius:2px}

/* ---------- nav ---------- */
nav.top{position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--rule)}
nav.top .wrap{display:flex; align-items:center; gap:18px; padding-block:13px; flex-wrap:wrap}
nav.top .me{font-family:"Newsreader",Georgia,serif; font-size:17px; font-weight:600;
  letter-spacing:-.01em; margin-right:auto; white-space:nowrap}
nav.top a{font-size:13.5px; color:var(--ink-2); text-decoration:none; white-space:nowrap}
nav.top a:hover{color:var(--accent)}
nav.top a:focus-visible,#theme:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
#theme{font:inherit; font-size:13px; background:none; border:1px solid var(--rule);
  border-radius:3px; color:var(--ink-2); padding:4px 10px; cursor:pointer; white-space:nowrap}
#theme:hover{border-color:var(--muted)}

/* ---------- hero ---------- */
header.hero{padding-block:56px 44px; border-bottom:1px solid var(--rule)}
header.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) 176px; gap:44px; align-items:start}
h1{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:clamp(38px,6vw,62px);
  line-height:1.02; letter-spacing:-.025em; margin:0 0 16px; text-wrap:balance}
.role{font-size:18px; line-height:1.5; color:var(--ink-2); max-width:46ch; margin:0 0 20px}
.role b{color:var(--ink); font-weight:600}
.status{display:inline-flex; align-items:center; gap:9px; background:var(--card);
  border:1px solid var(--rule); border-radius:100px; padding:6px 14px 6px 11px;
  font-size:13px; color:var(--ink-2); margin-bottom:24px; box-shadow:var(--shadow)}
.status i{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.acts{display:flex; flex-wrap:wrap; gap:9px}
.btn{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500;
  text-decoration:none; padding:9px 15px; border-radius:3px; border:1px solid var(--rule);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn.pri:hover{opacity:.88}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.portrait{width:176px; height:176px; border-radius:3px; background:var(--sunk);
  border:1px solid var(--rule); display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative}
.portrait img{width:100%; height:100%; object-fit:cover; display:block}
.portrait .ini{font-family:"Newsreader",Georgia,serif; font-size:46px; color:var(--muted); font-weight:400}
.portrait .cap{position:absolute; bottom:0; left:0; right:0; background:var(--todo-bg);
  color:var(--todo-ink); font-size:10px; text-align:center; padding:4px 2px; line-height:1.3;
  font-family:"JetBrains Mono",monospace; letter-spacing:.04em}

/* ---------- sections ---------- */
section{padding-block:52px; border-bottom:1px solid var(--rule)}
.shead{display:flex; align-items:baseline; gap:14px; margin-bottom:8px}
h2{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:27px;
  letter-spacing:-.015em; margin:0; line-height:1.2}
.shead .lab{margin-left:auto}
.intro{font-size:15px; line-height:1.7; color:var(--ink-2); max-width:68ch; margin:0 0 30px}
.prose{font-family:"Newsreader",Georgia,serif; font-size:18px; line-height:1.65;
  color:var(--ink-2); max-width:64ch; margin:0 0 18px}
.prose b{color:var(--ink); font-weight:500}
.prose:last-child{margin-bottom:0}

/* ---------- research cards ---------- */
.works{display:flex; flex-direction:column; gap:16px}
.work{background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--wc);
  border-radius:0 4px 4px 0; padding:22px 24px 24px; box-shadow:var(--shadow)}
.work .wtop{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:9px}
.work .wnum{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  letter-spacing:.12em; color:var(--wc)}
.work .wdom{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em;
  color:var(--muted); margin-left:auto}
h3{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:22px; letter-spacing:-.012em;
  margin:0 0 10px; line-height:1.25; text-wrap:balance}
.work .wsum{font-size:14.5px; line-height:1.65; color:var(--ink-2); max-width:70ch; margin:0 0 18px}
.wgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:22px;
  border-top:1px solid var(--rule-soft); padding-top:17px}
.wgrid h4{font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 9px}
.wgrid ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.wgrid li{font-size:13.5px; line-height:1.5; color:var(--ink-2); padding-left:14px; position:relative}
.wgrid li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px;
  border-radius:1px; background:var(--wc); opacity:.55}
.wgrid p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0}
.wlinks{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
  border-top:1px solid var(--rule-soft); padding-top:16px}
.wlinks a{font-family:"JetBrains Mono",monospace; font-size:12px; text-decoration:none;
  border:1px solid var(--rule); border-radius:3px; padding:6px 11px; color:var(--ink-2)}
.wlinks a:hover{border-color:var(--wc); color:var(--wc)}

/* bench conditions strip */
.bench{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule-soft);
  border-radius:3px; overflow:hidden; margin-top:16px}
.bench div{flex:1 1 132px; padding:10px 13px; border-right:1px solid var(--rule-soft); background:var(--sunk)}
.bench div:last-child{border-right:none}
.bench b{display:block; font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:500;
  color:var(--ink); line-height:1.3}
.bench span{display:block; font-size:11px; color:var(--muted); margin-top:3px; line-height:1.35}

/* ---------- skills ---------- */
.skills{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px}
.skill h4{font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 11px; padding-bottom:9px;
  border-bottom:1px solid var(--rule)}
.skill ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.skill li{font-size:14px; line-height:1.5; color:var(--ink-2)}
.skill li b{display:block; color:var(--ink); font-weight:600; font-size:14px}
.skill li span{font-size:12.5px; color:var(--muted); line-height:1.45}

/* ---------- education ---------- */
.edu{display:flex; flex-direction:column; gap:0}
.ed{display:grid; grid-template-columns:132px minmax(0,1fr); gap:24px; padding-block:20px;
  border-top:1px solid var(--rule-soft)}
.ed:first-child{border-top:none; padding-top:0}
.ed .yr{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; padding-top:3px}
.ed .deg{font-size:16px; font-weight:600; letter-spacing:-.005em; margin:0 0 3px}
.ed .inst{font-size:14px; color:var(--ink-2); margin:0 0 8px}
.ed .det{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0; max-width:64ch}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:22px; margin-top:6px}
.contact a,.contact span.cv{display:flex; flex-direction:column; gap:4px; text-decoration:none;
  color:var(--ink); padding:15px 16px; background:var(--card); border:1px solid var(--rule);
  border-radius:3px; box-shadow:var(--shadow)}
.contact a:hover{border-color:var(--accent)}
.contact .k{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.contact .v{font-size:14px; overflow-wrap:anywhere; line-height:1.4}
footer{padding-block:30px 54px}
footer p{font-size:12.5px; color:var(--muted); margin:0; line-height:1.6}

/* ---------- to-fill marker ---------- */
.tofill{display:inline-block; background:var(--todo-bg); color:var(--todo-ink);
  border:1px dashed var(--todo-rule); border-radius:2px; padding:0 6px;
  font-family:"JetBrains Mono",monospace; font-size:.82em; font-weight:400;
  letter-spacing:.02em; line-height:1.5; font-style:normal; text-transform:none}


/* ---------- sub-sections added from the CV ---------- */
.subhead{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:19px;
  letter-spacing:-.01em; margin:38px 0 16px; padding-top:26px;
  border-top:1px solid var(--rule); color:var(--ink)}
.minis{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:20px}
.mini b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  line-height:1.35; margin-bottom:6px}
.mini p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0}
.training{display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.tr{background:var(--card); padding:14px 15px 15px; display:flex; flex-direction:column; gap:4px}
.tr b{font-size:14px; font-weight:600; line-height:1.35; letter-spacing:-.005em}
.tr span{font-size:12.5px; color:var(--muted); line-height:1.45}
.tr .dur{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted);
  letter-spacing:.04em; margin-top:2px}

/* ---------- contact me: the call to action ---------- */
.cta{margin:0 0 34px}
.cta-card{position:relative; overflow:hidden; background:var(--card);
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 4px 4px 0; padding:26px 28px 24px; box-shadow:var(--shadow)}
.cta-card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 200px at 100% 0%,
    color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%)}
.cta-card > *{position:relative; z-index:1}
.cta-k{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px}
.cta-card h3{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:21px;
  line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0 0 16px; max-width:34ch}
.cta-mail{display:inline-block; font-family:"JetBrains Mono",monospace;
  font-size:clamp(16px,3.6vw,23px); letter-spacing:-.01em; color:var(--ink);
  text-decoration:none; overflow-wrap:anywhere; margin:0 0 20px;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom:3px; transition:color .15s ease, border-color .15s ease}
.cta-mail:hover{color:var(--accent); border-bottom-color:var(--accent)}
.cta-mail:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.cta-mail.is-blank{border-bottom:0; padding-bottom:0}
.cta-acts{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.cta-acts .btn{cursor:pointer; font-family:inherit}
.cta-copy{transition:border-color .15s ease, color .15s ease}
.cta-copy.is-done{border-color:var(--accent); color:var(--accent)}
.cta-note{font-size:12.5px; line-height:1.6; color:var(--muted); margin:0;
  border-top:1px solid var(--rule-soft); padding-top:14px}

/* ---------- contact me: profile links ---------- */
.cta-social{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px; margin:0 0 20px}
.soc{--soc:var(--accent); position:relative; display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink); background:var(--sunk);
  border:1px solid var(--rule); border-radius:3px; padding:12px 13px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease}
.soc[data-net="github"]{--soc:#1f2328}
.soc[data-net="linkedin"]{--soc:#0a66c2}
.soc[data-net="orcid"]{--soc:#a6ce39}
:root:not([data-theme="light"]) .soc[data-net="github"]{--soc:#e6edf3}
:root[data-theme="dark"] .soc[data-net="github"]{--soc:#e6edf3}
.soc:hover{border-color:var(--soc); background:var(--card); transform:translateY(-1px)}
.soc:focus-visible{outline:2px solid var(--soc); outline-offset:2px}
.soc-i{flex:none; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; color:var(--soc)}
.soc-i svg{width:100%; height:100%; display:block}
.soc-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.soc-t b{font-size:13.5px; font-weight:600; letter-spacing:-.005em; line-height:1.3}
.soc-t span{font-size:11.5px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere}
.soc-go{margin-left:auto; flex:none; font-size:12px; color:var(--muted);
  opacity:0; transform:translate(-3px,3px); transition:opacity .15s ease, transform .15s ease}
.soc:hover .soc-go,.soc:focus-visible .soc-go{opacity:1; transform:none; color:var(--soc)}

@media (max-width:560px){
  .cta-card{padding:22px 18px 20px}
  .cta-acts .btn{flex:1 1 auto; justify-content:center}
  .cta-social{grid-template-columns:1fr}
  .soc-go{opacity:1; transform:none}
}

@media (max-width:820px){
  header.hero .wrap{grid-template-columns:1fr; gap:30px}
  .portrait{width:132px; height:132px}
  .ed{grid-template-columns:1fr; gap:6px}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  body{font-size:15px}
  nav.top .me{margin-right:0; width:100%}
  section{padding-block:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}