:root{--bg:#E9EEF2;--ink:#14213D;--soft:#4A5670;--card:#fff;--acc:#1F6F5C;--hi:#F2D44B;--line:#14213D;--r:6px}
@media(prefers-color-scheme:dark){:root{--bg:#0F1726;--ink:#E7ECF3;--soft:#9AA8BF;--card:#18233A;--acc:#6FD0B4;--hi:#F2D44B;--line:#E7ECF3}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 "Public Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo{font-family:Bitter,Georgia,serif;line-height:1.15}
h1{font-size:clamp(2.1rem,6vw,3.9rem);font-weight:800;max-width:19ch;letter-spacing:-.02em}
h2{font-size:1.5rem;font-weight:700}h3{font-size:1.2rem;font-weight:700}
a{color:var(--acc);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
.skip{position:absolute;left:-999px;background:var(--hi);color:#000;padding:.5rem 1rem;z-index:20}.skip:focus{left:1rem;top:1rem}
.wrap{width:min(100% - 2.5rem,66rem);margin-inline:auto}
.top{display:flex;justify-content:space-between;align-items:center;padding:1rem max(1.25rem,calc((100% - 66rem)/2));position:sticky;top:0;background:var(--bg);border-bottom:2px solid var(--line);z-index:10}
.logo{font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none}
nav{display:flex;gap:1.75rem}nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:.25rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--ink)}
.burger{display:none;background:none;border:2px solid var(--line);border-radius:var(--r);width:2.75rem;height:2.75rem;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:.6rem;right:.6rem;height:2px;background:var(--ink);transition:transform .2s,top .2s}
.burger span:first-child{top:.95rem}.burger span:last-child{top:1.55rem}
.burger[aria-expanded=true] span:first-child{top:1.25rem;transform:rotate(45deg)}.burger[aria-expanded=true] span:last-child{top:1.25rem;transform:rotate(-45deg)}
.hero{padding-block:clamp(3rem,10vw,7rem) 3rem}
.kicker,.crumb,.meta{color:var(--soft);font-size:.95rem;margin-bottom:1rem}.crumb a{color:var(--soft)}
.lead{font-size:1.25rem;max-width:36rem;margin-top:1.5rem;color:var(--soft)}
.mark{background:linear-gradient(var(--hi),var(--hi)) no-repeat 0 88%/0 .38em;animation:draw .9s .3s ease-out forwards;color:inherit}
@keyframes draw{to{background-size:100% .38em}}
.actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:2rem}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:.8rem 1.4rem;border:2px solid var(--ink);border-radius:var(--r);font-weight:600;text-decoration:none;box-shadow:4px 4px 0 var(--hi);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--hi)}.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--hi)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none}.btn.ghost:hover{background:var(--hi);color:#14213D;transform:none}
section{padding-block:2.5rem}
.projects{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem;margin-top:1.5rem}
.projects a{display:block;height:100%;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.4rem;color:var(--ink);text-decoration:none;transition:transform .15s}
.projects li:nth-child(odd) a{border-radius:var(--r) 18px var(--r) var(--r)}
.projects a:hover{transform:translateY(-4px)}.projects h3{margin-bottom:.5rem}.projects p{color:var(--soft);margin-bottom:1rem}
.tag{font-size:.85rem;font-weight:600;color:var(--acc)}
.split{display:grid;grid-template-columns:12rem 1fr;gap:2rem;border-top:2px solid var(--line)}
.prose{max-width:38rem}.prose p+p,.prose p+pre,.prose pre+p{margin-top:1rem}
.lessons{list-style:none;padding:0;counter-reset:l;max-width:38rem}
.lessons li{counter-increment:l;display:flex;gap:1rem;padding:.9rem 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.lessons li::before{content:counter(l);font-family:Bitter,serif;font-weight:700;color:var(--acc);min-width:1.5rem}
pre{background:var(--ink);color:var(--bg);padding:1rem 1.25rem;border-radius:var(--r);overflow-x:auto;font:.95rem/1.5 ui-monospace,Menlo,Consolas,monospace}
footer{border-top:2px solid var(--line);margin-top:3rem;padding:2rem max(1.25rem,calc((100% - 66rem)/2));display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--soft);font-size:.95rem}
@media(max-width:760px){
.burger{display:block}
nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:2px solid var(--line);display:none}
nav.open{display:flex}nav a{padding:1rem 1.25rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.split{grid-template-columns:1fr;gap:1rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mark{background-size:100% .38em}}