:root{--bg:#f7f8f5;--surface:#fff;--soft:#eff2ec;--green:#1b3828;--green-light:#31583d;--muted:#78917b;--text:#202820;--text-soft:#687168;--faint:#92998f;--border:#e5e9e2;--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:15px/1.7 "DM Sans",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}ul{list-style:none}
:focus-visible{outline:2px solid var(--green-light);outline-offset:3px;border-radius:6px}
.container{width:min(860px,100% - 40px);margin-inline:auto}
h1,h2,h3,strong,.logo{font-family:"Manrope",sans-serif;color:var(--green);letter-spacing:-.02em}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--green-light);transform:scaleX(0);transform-origin:left;z-index:9}
.top{display:flex;justify-content:space-between;align-items:center;height:70px}
.logo{font-weight:800;font-size:22px;text-decoration:none}.logo span{color:var(--green-light)}
.back{font-size:12px;color:var(--text-soft);text-decoration:none;border-bottom:1px solid var(--border)}
.intro{padding:70px 0 40px}
.chip{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--border);border-radius:99px;background:var(--surface);margin-bottom:22px}
h1{font-size:clamp(44px,8vw,76px);line-height:1;font-weight:600}
.term{margin-top:22px;font:13px ui-monospace,Menlo,monospace;color:var(--green-light);min-height:22px}
.term::before{content:"$ ";color:var(--muted)}
.term u{display:inline-block;width:7px;height:14px;background:var(--green-light);vertical-align:middle;margin-left:3px;animation:blink 1s steps(1) infinite}
.meta{margin-top:10px;font-size:13px;color:var(--text-soft)}
.block{padding:56px 0 10px}
h2{font-size:26px;font-weight:600;margin-bottom:6px}
.hint{font-size:12px;color:var(--faint);margin:6px 0 22px}

/* Reveal: one consistent entrance */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Timeline */
.tl{position:relative;padding-left:30px;--p:0}
.tl::before,.tl::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1.5px;background:var(--border)}
.tl::after{background:var(--green-light);transform:scaleY(var(--p));transform-origin:top}
.entry{position:relative;margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:border-color .25s,opacity .6s var(--ease),transform .6s var(--ease)}
.entry::before{content:"";position:absolute;left:-30px;top:26px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:1.5px solid var(--green-light);transition:background .4s var(--ease)}
.entry.in::before{background:var(--green-light)}
.entry.future::before{border-style:dashed}
.entry button{all:unset;box-sizing:border-box;display:grid;gap:2px;width:100%;padding:20px 52px 20px 22px;cursor:pointer;position:relative}
.entry button:focus-visible{outline:2px solid var(--green-light);border-radius:14px}
.entry button::after{content:"+";position:absolute;right:22px;top:20px;font-size:20px;color:var(--green-light);transition:transform .35s var(--ease)}
.entry button[aria-expanded="true"]::after{transform:rotate(45deg)}
.when{font-size:12px;color:var(--faint)}
.kind{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--green-light);background:var(--soft);padding:2px 10px;border-radius:99px;justify-self:start;margin:4px 0}
.entry strong{font-size:16px;line-height:1.35}.org{font-size:13px;color:var(--text-soft)}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.more>div{overflow:hidden}
button[aria-expanded="true"]+.more{grid-template-rows:1fr}
.more ul,.proj ul{padding:0 22px 20px;display:grid;gap:8px;font-size:14px;color:var(--text-soft)}
.more li,.proj li{padding-left:16px;position:relative}
.more li::before,.proj li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:1.5px;background:var(--muted)}

/* Skills */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.filters button{font:500 12px "DM Sans",sans-serif;padding:7px 16px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text-soft);cursor:pointer;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.filters button:active{transform:scale(.97)}
.filters button.on{background:var(--green);color:#fff;border-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip2{font-size:13px;padding:7px 16px;border-radius:99px;background:var(--soft);color:var(--green);transition:opacity .3s var(--ease),transform .3s var(--ease);animation:pop .45s var(--ease) both;animation-delay:calc(var(--i) * 25ms)}
.chip2.off{display:none}

/* Languages */
.langs{display:grid;gap:22px;margin-top:20px}
.lang h3{font-size:15px;margin-bottom:8px}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bar small{display:flex;justify-content:space-between;font-size:11px;color:var(--text-soft);margin-bottom:5px}
.bar small b{color:var(--green)}
.bar i{display:block;height:5px;border-radius:9px;background:var(--soft);overflow:hidden}
.bar i::after{content:"";display:block;height:100%;width:var(--w);background:var(--green-light);border-radius:9px;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .2s}
.in .bar i::after{transform:scaleX(1)}

/* Project */
.proj{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 0 26px}
.proj .when,.proj h3{display:block;padding:0 22px}.proj h3{font-size:19px;margin:4px 0 14px}
.btn{display:inline-block;margin:6px 22px 0;font-size:13px;background:var(--green);color:#fff;text-decoration:none;padding:11px 22px;border-radius:99px;transition:transform .16s var(--ease),background-color .2s}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{background:var(--green-light)}.entry:hover{border-color:var(--muted)}.filters button:hover:not(.on){background:var(--soft)}.back:hover{border-color:var(--green)}}
.footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:70px;padding:22px 0 34px;border-top:1px solid var(--border);font-size:12px;color:var(--faint)}

@keyframes blink{50%{opacity:.2}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
@media (max-width:640px){.bars{grid-template-columns:1fr 1fr}.tl{padding-left:24px}.entry::before{left:-24px}}

/* Email dialog */
.dlg{margin:auto;width:min(400px,calc(100% - 40px));padding:30px 30px 18px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);text-align:center;box-shadow:0 30px 80px -30px rgb(27 56 40/.45)}
.dlg[open]{animation:dlgin .28s var(--ease)}
.dlg::backdrop{background:rgb(27 56 40/.3);backdrop-filter:blur(4px)}
.dlg[open]::backdrop{animation:dlgfade .28s var(--ease)}
.dlg h3{font-size:21px;font-weight:600;margin-bottom:8px}
.dlg p{font-size:14px;color:var(--text-soft);line-height:1.6}.dlg p b{color:var(--green);font-weight:600;word-break:break-all}
.dlg-actions{display:grid;gap:10px;margin:22px 0 6px}
.dlg .btn{margin:0;justify-content:center;text-align:center;font-family:inherit;cursor:pointer}
.dlg .btn.ghost{background:transparent;color:var(--green);border-color:var(--green-light)}
.dlg-x{all:unset;cursor:pointer;font-size:12px;color:var(--faint);padding:8px 14px;border-radius:8px}
.dlg-x:focus-visible{outline:2px solid var(--green-light)}
@media (hover:hover){.dlg-x:hover{color:var(--green)}.dlg .btn.ghost:hover{background:var(--soft)}}
@keyframes dlgin{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes dlgfade{from{opacity:0}}
.mail{display:inline-block;margin-top:8px;font-size:13px;color:var(--green);border-bottom:1px solid var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}.bar i::after{transform:none}}
.ic{width:11px;height:11px;vertical-align:-1px;margin-left:4px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.ic.l{margin:0 6px 0 0}