:root{
  --bg:#f3f8f5;--text:#12322a;--muted:#4f6b61;--card:#e4f0ea;--pill:#e2eee8;--pill-on:#cfe3d9;
  --rule:#cadcd2;--link-line:#1f9d6b;--green:#17844f;--blue:#2b6cb0;--amber:#b7691a;--rose:#a63d73;
  --g1:#17844f;--g2:#0e9aa7;--shadow:0 8px 24px rgba(18,50,42,.12);
}
:root[data-theme="dark"]{
  --bg:#0c1713;--text:#e7f5ee;--muted:#9fbdb0;--card:#13251e;--pill:#16291f;--pill-on:#22402f;
  --rule:#223a2f;--link-line:#4ade9a;--green:#4cc17f;--blue:#6aa7e6;--amber:#e0a050;--rose:#e07bab;
  --g1:#4ade80;--g2:#22d3a6;--shadow:0 8px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:17px;transition:background .3s,color .3s}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
a{color:inherit}

.layout{display:grid;grid-template-columns:300px minmax(0,1fr);max-width:1100px;margin:0 auto;min-height:100vh}

/* ---------- sidebar ---------- */
.side{position:sticky;top:0;align-self:start;height:100vh;padding:56px 30px 30px;border-right:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;overflow:auto}
.who{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none}
.avatar{width:172px;height:172px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:3px solid var(--card);box-shadow:var(--shadow)}
.name{font-weight:700;font-size:1.25rem;line-height:1.25;letter-spacing:-.2px}
.tag{font-size:.9rem;color:var(--muted);line-height:1.5}
.pills{display:flex;flex-direction:column;gap:8px;width:100%}
.pills a{display:block;padding:10px 16px;border-radius:12px;background:var(--pill);text-decoration:none;font-size:.92rem;letter-spacing:.3px;text-align:left;transition:background .2s}
.pills a:hover{background:var(--pill-on)}
.pills a.on{background:var(--pill-on);font-weight:700}
.social{display:flex;gap:18px;justify-content:center;margin-top:4px}
.social a{color:var(--muted);display:inline-flex;transition:color .2s,transform .2s}
.social a:hover{color:var(--text);transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor}

.theme{position:fixed;top:16px;right:18px;z-index:60;width:46px;height:46px;display:grid;place-items:center;border:1.5px solid var(--rule);border-radius:58% 42% 52% 48% / 46% 58% 42% 54%;background:var(--bg);transition:transform .35s,border-color .2s}
.theme:hover{transform:rotate(-14deg) scale(1.06);border-color:var(--link-line)}
.theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}

/* ---------- content ---------- */
.content{padding:64px 48px 90px;min-width:0}
.content>*{animation:rise .55s both}
.content>*:nth-child(2){animation-delay:.05s}.content>*:nth-child(3){animation-delay:.1s}
.content>*:nth-child(4){animation-delay:.15s}.content>*:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
h1{font-size:2.3rem;line-height:1.2;letter-spacing:-.8px;margin-bottom:22px}
h2.kicker{font-size:.9rem;letter-spacing:2.4px;text-transform:uppercase;margin:52px 0 14px;color:var(--text)}
h3{font-size:1.15rem;line-height:1.35}
.content p{margin-bottom:16px;color:var(--text)}
.content p.muted,.muted{color:var(--muted)}
.lede{font-size:1.1rem}
.content a:not(.plain){text-decoration:none;border-bottom:1.5px solid var(--link-line);transition:background .2s}
.content a:not(.plain):hover{background:color-mix(in srgb,var(--link-line) 18%,transparent)}
hr{border:none;border-top:1px solid var(--rule);margin:48px 0 0}

/* stats (static) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 8px}
.stat{background:var(--card);border-radius:14px;padding:16px 16px 14px}
.stat b{display:block;font-size:1.35rem;color:var(--green);letter-spacing:-.5px;white-space:nowrap}
.stat span{display:block;font-size:.78rem;line-height:1.45;color:var(--muted);margin-top:4px}

/* right now */
.rn{display:grid;gap:14px;margin-top:6px}
.rn-card{background:var(--card);border-left:5px solid var(--c);border-radius:14px;padding:18px 22px}
.rn-card .lbl{font-size:.74rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c);display:flex;gap:10px;align-items:baseline}
.rn-card .lbl i{font-style:normal;opacity:.6}
.rn-card h3{margin:6px 0 8px}
.rn-card p{margin:0;font-size:.96rem;color:var(--muted)}
.rn-card.e{--c:var(--green)}.rn-card.r{--c:var(--blue)}.rn-card.b{--c:var(--amber)}.rn-card.i{--c:var(--rose)}
.closing{margin-top:22px;font-style:italic;color:var(--muted)}

/* entries */
details.entry{background:var(--card);border-radius:14px;margin-bottom:12px;padding:0}
details.entry summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
details.entry summary::-webkit-details-marker{display:none}
details.entry summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .25s;flex:none}
details.entry[open] summary::after{transform:rotate(45deg)}
.entry .t{font-weight:700}
.entry .o{font-size:.92rem;color:var(--muted)}
.entry .d{font-size:.8rem;letter-spacing:.8px;text-transform:uppercase;color:var(--link-line);font-weight:700;margin-top:2px}
.entry .body{padding:0 22px 18px}
.entry ul{margin:0 0 0 18px;color:var(--muted);font-size:.96rem}
.entry li{margin-bottom:8px}.entry li::marker{color:var(--link-line)}

/* toolbox (static) */
.tgroup{margin-bottom:20px}
.tgroup h4{font-size:.76rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 14px;border-radius:999px;background:var(--pill);font-size:.86rem;cursor:default}

/* projects */
.proj{background:var(--card);border-radius:14px;padding:22px;margin-bottom:16px;scroll-margin-top:20px}
.proj .meta{font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--link-line);font-weight:700;margin-bottom:4px}
.proj p{font-size:.97rem;color:var(--muted);margin:8px 0 0}
.proj ul{margin:10px 0 0 18px;color:var(--muted);font-size:.96rem}
.proj li{margin-bottom:6px}.proj li::marker{color:var(--link-line)}
.proj .note{font-size:.8rem;margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-size:.74rem;padding:3px 11px;border-radius:999px;border:1px solid var(--rule);color:var(--muted)}
.status{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber);margin-left:8px;vertical-align:middle}

/* facts / education */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.fact{background:var(--card);border-radius:14px;padding:14px 18px;font-weight:600;cursor:default}
.fact span{display:block;font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--link-line)}
.edu{display:grid;gap:12px}
.edu div{background:var(--card);border-radius:14px;padding:14px 18px}
.edu b{display:block}.edu span{font-size:.9rem;color:var(--muted)}

/* connect */
.rows{list-style:none;display:grid;gap:10px;margin:18px 0}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:11px 16px}
.row span{overflow-wrap:anywhere}
.copy{padding:4px 14px;border-radius:999px;border:1.5px solid var(--rule);font-size:.78rem;font-weight:700;letter-spacing:.5px;color:var(--link-line);transition:.2s}
.copy:hover{background:var(--link-line);color:var(--bg);border-color:var(--link-line)}
.copy:active{transform:scale(.95)}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;letter-spacing:.5px}
.pgp[hidden]{display:none}

footer{margin-top:64px;font-size:.85rem;color:var(--muted)}

/* floating ui */
.ask{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--rule);background:var(--bg);font-weight:700;font-size:.95rem;box-shadow:var(--shadow);transition:transform .2s}
.ask:hover{transform:translateY(-3px)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ask-panel{position:fixed;left:20px;bottom:78px;z-index:80;width:min(380px,calc(100vw - 40px));max-height:min(540px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--bg);border:1.5px solid var(--rule);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;animation:rise .25s both}
.ask-panel[hidden]{display:none}
.ask-panel header{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--rule)}
.ask-panel header button{color:var(--muted);font-size:1rem}
.ask-log{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:10px;flex:1;font-size:.92rem;line-height:1.55}
.ask-log p{margin:0;padding:9px 14px;border-radius:14px;max-width:92%;overflow-wrap:anywhere}
.ask-log .bot{background:var(--card);align-self:flex-start}
.ask-log .me{background:var(--text);color:var(--bg);align-self:flex-end}
.ask-log .bot a{border-bottom:1.5px solid var(--link-line);text-decoration:none}
.ask-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.ask-chips button{font-size:.78rem;padding:5px 12px;border-radius:999px;border:1.5px solid var(--rule);transition:.2s}
.ask-chips button:hover{border-color:var(--link-line);color:var(--link-line)}
.ask-panel form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule)}
.ask-panel input{flex:1;min-width:0;padding:9px 14px;border-radius:999px;border:1.5px solid var(--rule);background:var(--card);color:var(--text);font:inherit;font-size:.9rem}
.ask-panel input:focus{outline:none;border-color:var(--link-line)}
.ask-panel form button{padding:0 16px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:700;font-size:.85rem}

.totop{position:fixed;right:18px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:55% 45% 50% 50% / 48% 54% 46% 52%;background:var(--pill);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}


.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:9px 20px;border-radius:999px;font-weight:600;font-size:.88rem;opacity:0;pointer-events:none;transition:.3s;z-index:120}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- mobile ---------- */
@media(max-width:900px){
  body{font-size:16.5px}
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--rule);padding:24px 22px 18px;flex-direction:column;align-items:stretch;gap:14px;text-align:left;overflow:visible}
  .who{flex-direction:row;gap:14px;padding-right:62px}
  .avatar{width:54px;height:54px}
  .name{font-size:1.25rem}
  .tag,.social{display:none}
  .pills{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px}
  .pills a{flex:none;padding:9px 18px;border-radius:14px}
  .content{padding:36px 22px 120px}
  h1{font-size:2rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
  /* home: big centered avatar like the reference */
  .side{align-items:center;text-align:center}
  .who{flex-direction:column;padding-right:0;gap:12px}
  .avatar{width:176px;height:176px}
  .name{font-size:1.5rem}
  .tag{display:block}
  .pills{display:grid;grid-template-columns:1fr 1fr;width:100%;overflow:visible}
  .pills a{text-align:center;padding:16px 10px}
  .social{display:flex;margin:6px 0}
  .ask{left:14px;bottom:14px}
  .ask-panel{left:14px;bottom:70px;width:calc(100vw - 28px)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* greeting */
.grad{background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
strong{font-weight:700;color:var(--text)}

/* stories behind the numbers */
.stories{display:grid;gap:14px;margin-top:6px}
.story{background:var(--card);border-radius:14px;padding:20px 22px}
.story .n{font-size:1.25rem;font-weight:800;letter-spacing:-.3px;line-height:1.3;color:var(--green);margin:0 0 8px}
.story p{margin:0;font-size:.96rem;color:var(--muted)}

/* connect */
.getin{font-size:1.08rem;margin-top:22px}

/* typing line under the greeting */
.role{font-size:1.2rem;color:var(--muted);margin:-8px 0 22px}
#typed{color:var(--text);font-weight:700}
.caret{color:var(--link-line);margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- scroll bar: avatar + ZS. left, links centred, toggle right (phone/tablet layout) ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:none;align-items:center;gap:10px;height:56px;padding:0 58px 0 14px;background:var(--bg);border-bottom:1px solid var(--rule);transform:translateY(-110%);transition:transform .35s}
.bar-brand{flex:none;display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.bar-slot{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden}
.bar-avatar{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.bar-zs{font-weight:800;font-size:1.05rem;letter-spacing:-.4px;opacity:var(--zs,1)}
.bar-links{flex:1;min-width:0;display:flex;gap:13px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.bar-links::-webkit-scrollbar{display:none}
.bar-links a{flex:none;padding:6px 0;font-size:.8rem;text-decoration:none;color:var(--muted)}
.bar-links a:first-child{margin-left:auto}
.bar-links a:last-child{margin-right:auto}
.bar-links a.on{color:var(--text);font-weight:700}
.fly{display:none}
@media(max-width:900px){
  .bar{display:flex}
  .bar.show{transform:none}
  .theme{width:40px;height:40px;top:8px;right:10px}
  .fly{position:fixed;left:0;top:0;z-index:55;border-radius:50%;overflow:hidden;border:3px solid var(--card);box-shadow:var(--shadow);transform-origin:0 0;opacity:0;will-change:transform;background:var(--card)}
  .fly img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
  .fly{display:block}
  .side .avatar{visibility:hidden}
  .bar-avatar{opacity:0}
  .bar{transition:none}
}


/* ---------- page-to-page transition: only the content fades; the header carries across pages ---------- */
.content{transition:opacity .19s ease,transform .19s ease}
body.leaving .content{opacity:0;transform:translateY(-10px)}

/* ---------- collapsing header (phone/tablet): the bottom border rises, eating icons > buttons > tagline > name ---------- */
@media(min-width:901px){.cx,.cx-in{display:contents}}
@media(max-width:900px){
  .side{gap:0}
  .who{gap:0}
  .cx{display:grid;grid-template-rows:1fr;width:100%;opacity:1;transition:grid-template-rows .26s ease,opacity .2s ease;transition-delay:var(--in,0ms)}
  .who .cx{width:auto}
  .cx-in{min-height:0;overflow:hidden}
  .name{display:block;padding-top:12px}
  .tag{margin:0;padding-top:14px}
  .pills{padding-top:14px}
  .social{margin:0;padding-top:14px}
  .side.is-collapsed .cx{grid-template-rows:0fr;opacity:0;transition-delay:var(--out,0ms)}
  .side.no-anim .cx{transition:none!important}
}

/* the header collapses while you scroll: stop the browser from "correcting" the scroll position when it does */
html,body{overflow-anchor:none}

/* apps: 2 columns x 4 listings */
.proj ul.apps{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:22px;margin-left:0;padding-left:0}
.proj ul.apps li{display:list-item;margin-left:18px;overflow-wrap:break-word}
/* narrow screens: one column so names stay whole and the arrow stays on the same line */
@media(max-width:600px){.proj ul.apps{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}

/* my services (static cards) */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.svc{background:var(--card);border-radius:14px;padding:20px 22px;cursor:default}
.svc .num{font-size:.74rem;font-weight:800;letter-spacing:2px;color:var(--link-line);margin-bottom:6px}
.svc h3{margin-bottom:6px}
.svc p{font-size:.96rem;color:var(--muted);margin:0 0 10px}
.svc ul{margin:0 0 0 18px;font-size:.92rem;color:var(--muted)}
.svc li{margin-bottom:6px}.svc li::marker{color:var(--link-line)}
.steps{list-style:none;counter-reset:st;display:grid;gap:12px;margin:6px 0 0}
.steps li{counter-increment:st;position:relative;background:var(--card);border-radius:14px;padding:14px 18px 14px 58px;font-size:.96rem;color:var(--muted)}
.steps li::before{content:counter(st);position:absolute;left:18px;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:var(--link-line);color:var(--bg)}
.steps b{color:var(--text)}
.svc-cta{margin-top:40px;padding:22px;border-radius:14px;border:1.5px solid var(--rule)}
.svc-cta p{margin:0 0 6px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr}}

.svc .proof{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:.88rem;line-height:1.55;color:var(--muted)}
.svc .proof b{display:block;margin-bottom:3px;font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--link-line)}
.svc-grid + .kicker{margin-top:44px}

/* ---------- tight bar: when the menu would be engulfed, it sits in a 2x2 grid under LinkedIn + mail icons ---------- */
.bar-tri{display:none}
.bar.tight{height:auto;min-height:56px;flex-wrap:wrap;align-content:flex-start;padding:0 14px}
.bar.tight .bar-brand{min-height:56px}
.bar.tight .bar-tri{display:flex;gap:0;position:absolute;left:50%;top:8px;transform:translateX(-50%)}
.bar.tight .bar-tri a{display:flex;align-items:center;justify-content:center;width:38px;height:40px;border-radius:50%;color:var(--text);text-decoration:none}
.bar.tight .bar-tri a:hover{background:var(--pill)}
.bar.tight .bar-tri svg{width:20px;height:20px;fill:currentColor}
.bar.tight .bar-links{flex:0 0 100%;order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;padding:0 0 14px}
.bar.tight .bar-links a{display:flex;align-items:center;justify-content:center;font-size:.92rem;padding:12px 6px;margin:0;border-radius:14px;background:var(--card);color:var(--text)}
.bar.tight .bar-links a.on{background:var(--pill-on)}