/* Layout: an architect's drawing sheet. Title block on top, then one spine that splits every view
   into the business side (teal) and the technical side (indigo); amber marks courses and highlights. */
:root{
  --paper:#EEF1F4; --sheet:#FFFFFF; --ink:#15202E; --muted:#5A6576; --line:#D3DAE2; --grid:rgba(61,79,196,.06);
  --business:#0D8574; --technical:#3B4BC0; --edu:#8A94A6; --accent:#C9741E; --good:#2F7D4F;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#0E131A; --sheet:#151C26; --ink:#E5EAF0; --muted:#94A1B2; --line:#283343; --grid:rgba(140,155,255,.05);
  --business:#3CC0AB; --technical:#8E9CFF; --edu:#6E7A8C; --accent:#EFA457; --good:#5CC48A; color-scheme:dark } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:28px 64px;display:grid;gap:24px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h2{font-size:1.35rem;font-stretch:118%;font-weight:700}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lede{color:var(--muted);max-width:65ch;margin:.35rem 0 0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--technical)}
code{font-family:var(--mono);font-size:.88em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sheet{background:var(--sheet);border:1px solid var(--line);padding:24px;display:grid;gap:20px;min-width:0}
.sheet > header{display:grid;gap:2px}
.stack{display:grid;gap:14px;align-content:start;min-width:0}

/* Title block */
.titleblock{display:grid;grid-template-columns:auto 1fr;background:var(--sheet);border:2px solid var(--ink)}
.photo{width:180px;min-height:180px;border-right:2px solid var(--ink);position:relative;display:grid;place-items:center;background:var(--paper);overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.photo .initials{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:3rem;color:var(--technical)}
.tb-main{display:grid;min-width:0}
.tb-name{padding:20px 24px;border-bottom:2px solid var(--ink);display:grid;gap:6px}
.tb-name h1{font-size:clamp(2rem,5vw,3.2rem);font-stretch:125%;font-weight:800;line-height:1}
.roles{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--display);font-stretch:110%;font-weight:600;font-size:1.15rem}
.roles span:nth-child(odd){color:var(--technical)} .roles span:nth-child(even){color:var(--business)}
.roles span + span::before{content:"/";color:var(--muted);margin-right:14px;font-weight:400}
.summary{margin:2px 0 0;max-width:70ch;color:var(--muted)}
.tagline{margin:6px 0 0;padding-left:14px;border-left:3px solid var(--accent);font-family:var(--display);font-stretch:105%;font-style:italic;font-size:1.1rem;max-width:60ch}

/* Capability wheel */
.wheelwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px) minmax(0,1fr);grid-template-areas:"c0 w c1" "c3 w c2";gap:16px 24px;align-items:center}
#cap0{grid-area:c0} #cap1{grid-area:c1} #cap2{grid-area:c2} #cap3{grid-area:c3} .wheel{grid-area:w}
.wheel svg{width:100%;height:auto;display:block}
.cap{border:1px solid var(--line);padding:12px 16px;display:grid;gap:6px;min-width:0;border-top:4px solid var(--q)}
.cap h3{font-size:1rem;font-stretch:112%;color:var(--q);display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.cap h3 small{font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--muted);white-space:nowrap}
.cap ul{margin:0;padding-left:1.1rem;display:grid;gap:2px;font-size:.95rem}
.approach{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.approach li{display:grid;gap:6px;align-content:start}
.approach .step{background:var(--ink);color:var(--sheet);padding:9px 22px 9px 14px;font-family:var(--display);font-stretch:112%;font-weight:700;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.approach li:first-child .step{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.approach li:nth-child(even) .step{background:color-mix(in srgb,var(--technical) 70%,var(--ink))}
.approach .step span{font-family:var(--mono);font-weight:400;font-size:.75rem;opacity:.75;margin-right:6px}
.approach ul{margin:0;padding:0 8px 0 1.4rem;font-size:.9rem;color:var(--muted);display:grid;gap:2px}

/* Industries */
.industries{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.indcol{display:grid;gap:0;align-content:start;min-width:0}
.indhead{font-size:.95rem;font-stretch:112%;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.ind{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.ind-ico{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid currentColor;border-radius:50%;color:var(--technical);
  background:color-mix(in srgb,currentColor 8%,var(--sheet))}
.indcol:first-child .ind-ico{color:var(--business)}
.ind-ico svg{width:24px;height:24px}
.ind-name{font-weight:600}
.ind-n{color:var(--technical);letter-spacing:2px;font-size:.8rem}
.indcol:first-child .ind-n{color:var(--business)}
.ind-orgs{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px}
.org{font-size:.78rem;padding:1px 7px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.xlist .cl{font-size:.82rem;color:var(--ink);margin-top:2px}
.xlist .hl{font-size:.82rem;color:var(--muted);padding-left:10px;position:relative}
.xlist .hl::before{content:"–";position:absolute;left:0}

/* Sectors and platforms */
.sectors{display:grid;gap:8px}
.sec{display:grid;grid-template-columns:minmax(0,14rem) 1fr 3.6rem;gap:10px;align-items:center}
.sec .bar{height:14px;background:var(--line);position:relative}
.sec .bar i{position:absolute;inset:0 auto 0 0;background:var(--technical)}
.platforms{display:grid;gap:10px}
.plat{display:grid;grid-template-columns:minmax(0,9rem) 1fr;gap:4px 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.plat b{font-family:var(--display);font-stretch:110%}
.plat span{color:var(--muted);font-size:.92rem}
.tb-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tb-cells > div{padding:10px 16px;border-right:1px solid var(--line);display:grid;gap:2px;min-width:0}
.tb-cells > div:last-child{border-right:0}
.tb-cells .v{font-weight:600;overflow-wrap:anywhere}

/* Contact actions */
.actions{display:flex;flex-wrap:wrap;border-top:2px solid var(--ink)}
.act{flex:1 1 180px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:0;border-right:1px solid var(--line);background:var(--sheet);
  color:var(--ink);text-decoration:none;font-weight:600;text-align:left;min-width:0}
.act:last-child{border-right:0}
.act svg{width:22px;height:22px;flex:none;color:var(--technical)}
.act span{display:grid;min-width:0;line-height:1.2}
.act small{font-family:var(--mono);font-weight:400;font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.act:hover{background:color-mix(in srgb,var(--technical) 8%,var(--sheet))}
.act.primary{background:var(--ink);color:var(--sheet)}
.act.primary svg,.act.primary small{color:var(--sheet)}
.act.primary:hover{background:color-mix(in srgb,var(--ink) 85%,var(--technical))}

/* QR dialog */
.qrdlg{border:2px solid var(--ink);padding:0;background:var(--sheet);color:var(--ink);width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.qrdlg::backdrop{background:rgba(10,14,20,.6)}
.qrdlg > *{margin-inline:20px}
.qr-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-top:18px}
.qr-head h2{font-size:1.3rem}
.x{border:1px solid var(--line);background:transparent;width:36px;height:36px;font-size:1rem;flex:none}
.qrbox{margin-top:14px;background:#ffffff;border:1px solid var(--line);padding:6px}
.qrbox svg{display:block;width:100%;height:auto}
.qr-cap{font-size:.92rem;color:var(--muted)}
.qrdlg .btns{margin-bottom:20px}

.banner{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 16px;border:1px dashed var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--sheet));font-size:.95rem}
.banner b{color:var(--accent)}
.linkbtn{background:none;border:0;padding:0;color:var(--technical);text-decoration:underline;font-weight:600}

/* Key facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--sheet)}
.fact{padding:14px 18px;border-right:1px solid var(--line);display:grid;gap:2px}
.fact:last-child{border-right:0}
.fact .n{font-family:var(--display);font-stretch:120%;font-weight:800;font-size:2.2rem;line-height:1}
.fact .l{font-size:.9rem;color:var(--muted)}

/* Two sides */
.sides{display:grid;grid-template-columns:1fr 1fr}
.side{display:grid;gap:12px;padding:4px 20px;min-width:0;align-content:start}
.side.business{border-right:2px solid var(--ink)}
.side h3{font-size:1rem;font-stretch:115%;display:flex}
.side.business h3{color:var(--business);justify-content:flex-end} .side.technical h3{color:var(--technical)}
.rows{display:grid;gap:8px}
.srow{display:grid;grid-template-columns:minmax(0,14rem) 1fr 5.6rem;gap:10px;align-items:center}
.side.business .srow{grid-template-columns:5.6rem 1fr minmax(0,14rem)}
.side.business .nm{order:3;text-align:right} .side.business .track{order:2} .side.business .val{order:1;text-align:left}
.nm{font-size:.95rem;line-height:1.2}
.val{font-family:var(--mono);font-size:.74rem;color:var(--muted);text-align:right;white-space:nowrap}
.track{height:14px;position:relative;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--line) calc(20% - 1px) 20%);
  border-block:1px solid var(--line)}
.fill{position:absolute;top:2px;bottom:2px}
.side.business .fill{right:0;background:var(--business)} .side.technical .fill{left:0;background:var(--technical)}
.note-learn{margin:0;font-style:italic}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.74rem;color:var(--muted)}

/* Charts */
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}
.chartbox{position:relative;width:100%;min-width:0}
.chartbox.radar{height:430px} .chartbox.trend{height:300px} .chartbox.sources{height:520px}
.note{border:1px solid var(--line);padding:12px 16px;display:grid;gap:6px}
.note h3{font-size:.95rem;font-stretch:112%}
.note ol,.note ul{margin:0;padding-left:1.2rem;display:grid;gap:3px}
.note.good h3{color:var(--good)} .note.grow h3{color:var(--accent)}
.note small{display:block;color:var(--muted)}

/* Heatmap */
.scroll{overflow-x:auto;min-width:0}
.heat{display:grid;gap:3px;min-width:680px;font-size:.82rem}
.heat .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px;align-self:center}
.heat .yr{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-align:center}
.heat .c{height:22px;border-radius:2px}
.heat .grp{grid-column:1/-1;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding-top:6px}
.heat .ev{height:22px;display:grid;place-items:center;font-size:.7rem;color:var(--accent)}

/* Timeline */
.tl{min-width:780px;display:grid;gap:10px}
.tl-axis{position:relative;height:20px;margin-left:130px;border-bottom:1px solid var(--line)}
.tl-axis span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.lane{display:grid;grid-template-columns:130px 1fr;align-items:start}
.lane-name{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.lane-track{position:relative}
.tbar{position:absolute;height:34px;padding:3px 8px;font-size:.78rem;line-height:1.15;overflow:hidden;color:var(--sheet);border-radius:2px}
.tbar b,.tbar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar span{opacity:.85}
.tdot{position:absolute;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:var(--accent);border:2px solid var(--sheet)}
.tdot.open{background:var(--sheet);border-color:var(--accent)}
.pubs{list-style:none;margin:0;padding:0;display:grid}
.pubs li{display:grid;grid-template-columns:4rem minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.pubs .abs{margin:6px 0 0;color:var(--ink);font-size:.93rem;max-width:80ch}
.pkind{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pkind.thesis{color:var(--sheet);background:var(--ink);border-color:var(--ink)}
.pubs .py{font-size:.85rem;color:var(--muted);padding-top:2px}
.pubs .pw{display:grid;gap:2px;min-width:0}
.pubs .pw b{font-family:var(--display);font-stretch:105%;font-size:1.05rem;line-height:1.3}
.pubs .pw span{color:var(--muted);font-size:.9rem}
.pubs .venue{color:var(--technical);font-weight:600}
.pubs .place{font-size:.82rem}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{border:1px solid var(--line);background:var(--sheet);padding:4px 10px;font-size:.82rem;border-radius:2px;color:var(--muted)}
.fchip span{font-size:.72rem;margin-left:4px}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.xlist li.publication .kind{color:var(--business);border-color:currentColor}
.xlist{list-style:none;margin:0;padding:0;display:grid}
.xlist li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.xlist .when{font-size:.74rem;color:var(--muted)}
.xlist .what{display:grid;min-width:0}
.xlist .what span{color:var(--muted);font-size:.9rem}
.xlist .kind{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--line);color:var(--muted)}
.xlist li.job .kind{color:var(--technical);border-color:currentColor} .xlist li.project .kind{color:var(--business);border-color:currentColor}
.xlist li.cert .kind,.xlist li.course .kind{color:var(--accent);border-color:currentColor}
.tdot-label{position:absolute;font-size:.72rem;white-space:nowrap;transform:translateX(-50%)}

/* Achievements */
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.acard{border:1px solid var(--line);border-top:4px solid var(--ink);padding:14px;display:grid;gap:6px;align-content:start}
.acard .m{font-family:var(--display);font-stretch:120%;font-weight:800;font-size:2rem;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-family:var(--mono);font-size:.68rem;padding:2px 6px;border:1px solid currentColor;border-radius:2px}
.chip.business{color:var(--business)} .chip.technical{color:var(--technical)}

/* Languages + hobbies */
.cefr{display:grid;gap:8px}
.lrow{display:grid;grid-template-columns:minmax(0,8rem) 1fr;gap:12px;align-items:center}
.ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ladder i{height:22px;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:.68rem;border:1px solid var(--line);color:var(--muted)}
.ladder i.on{background:var(--business);border-color:var(--business);color:var(--sheet);font-weight:600}
.hob{display:grid;gap:12px}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
.hb{grid-column:1/-1;height:6px;background:var(--line);position:relative}
.hb i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.hrow small{color:var(--muted);grid-column:1/-1}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.75rem;color:var(--muted)}

/* Editor */
.editor{background:var(--sheet);border:2px solid var(--accent);padding:24px;display:grid;gap:20px}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:20px}
fieldset{border:1px solid var(--line);padding:14px;display:grid;gap:10px;margin:0;min-width:0}
legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:0 6px}
.f{display:grid;gap:4px;font-size:.88rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gainrow{display:grid;grid-template-columns:1fr 5rem;gap:8px}
input,select,textarea{background:var(--paper);border:1px solid var(--line);padding:7px 9px;border-radius:2px;width:100%;min-width:0}
textarea{font-family:var(--mono);font-size:.78rem;min-height:340px;resize:vertical}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{padding:8px 14px;border:2px solid var(--ink);background:var(--ink);color:var(--sheet);font-weight:600}
.btn.ghost{background:transparent;color:var(--ink)}
.msg{font-size:.88rem;color:var(--muted)}
.msg.err{color:#B8442C} .msg.ok{color:var(--good)}

@media (max-width:980px){
  .wheelwrap{grid-template-columns:1fr 1fr;grid-template-areas:"w w" "c0 c1" "c3 c2"}
  .wheel{max-width:340px;justify-self:center;width:100%}
  .approach{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:860px){
  .two,.forms,.industries{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sides{grid-template-columns:1fr;gap:20px}
  .side.business{border-right:0;border-bottom:2px solid var(--ink);padding-bottom:20px}
  .side.business .srow{grid-template-columns:minmax(0,14rem) 1fr 5.6rem}
  .side.business .nm{order:1;text-align:left} .side.business .val{order:3;text-align:right}
  .side.business .fill{right:auto;left:0} .side.business h3{justify-content:flex-start}
}
@media (max-width:540px){
  .titleblock{grid-template-columns:1fr}
  .act{flex-basis:50%;border-bottom:1px solid var(--line)}
  .act:nth-child(2n){border-right:0}
  .photo{width:100%;height:280px;border-right:0;border-bottom:2px solid var(--ink)}
  .sheet,.editor{padding:16px} .side{padding:4px 0}
  .srow,.side.business .srow{grid-template-columns:minmax(0,7.5rem) 1fr;}
  .srow .val{display:none}
  .frow{grid-template-columns:1fr}
  .wheelwrap{grid-template-columns:1fr;grid-template-areas:"w" "c0" "c1" "c2" "c3"}
  .approach{grid-template-columns:1fr}
  .approach li .step,.approach li:first-child .step{clip-path:none}
  .plat,.sec{grid-template-columns:minmax(0,7rem) 1fr}
  .xlist li{grid-template-columns:1fr auto} .xlist .what{grid-column:1/-1;grid-row:2}
  .pubs li{grid-template-columns:1fr auto} .pubs .pw{grid-column:1/-1;grid-row:2}
  .sec .mono{grid-column:2}
  .chartbox.radar{height:340px} .chartbox.sources{height:600px}
}
@media (prefers-reduced-motion:no-preference){ .fill{transition:width .5s ease} }