/* Portfolio static rebuild — theme (b): match the homepage (index-r/index.html).
   Tokens copied from the live homepage <style>:root block, 2026-10-10.
   One stylesheet for the whole /portfolio/ section. No framework. */
:root{
  --maxw:1040px;
  --bg:#ffffff;--card:#f6f8fa;--ink:#1f2328;--muted:#59636e;--faint:#8c959f;--line:#d1d9e0;
  --accent:#1f883d;--on-accent:#fff;--font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--fhead:'JetBrains Mono',ui-monospace,monospace;
  --hweight:700;--hls:-.01em;
  --nav-bg:rgba(255,255,255,.92);--nav-bd:1px solid var(--line);--radius:8px;--bd:1px solid var(--line);--btn-radius:8px;
  --pill-bg:#dafbe1;--pill-ink:#116329;--pill-bd:1px solid #a6e6b6;--pill-radius:999px;
  --tag-bg:#ddf4ff;--tag-ink:#0969da;--tag-bd:1px solid #b6e3ff;--tag-radius:999px;
  --section-pad:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-family:var(--fhead);font-weight:var(--hweight);line-height:1.2;letter-spacing:var(--hls)}
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:var(--nav-bd)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--fhead);font-weight:800;font-size:1.2rem;color:var(--ink)}
.brand::before{content:"# ";color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--muted);font-size:.9rem;font-weight:600}
.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:var(--on-accent)!important;padding:9px 18px;border-radius:var(--btn-radius);font-weight:700;font-size:.86rem}
@media(max-width:720px){.nav-links a.hide-sm{display:none}}
.hero{padding:56px 0 20px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:10px}
.hero h1 .hl{color:var(--accent)}
.lede{color:var(--muted);max-width:62ch;margin:0}
.section-head h2::before{content:"## ";color:var(--faint);font-family:var(--fhead)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
/* post list cards (replaces BlogHash horizontal cards) */
.posts{display:grid;gap:18px;margin:32px 0 56px}
.post-card{background:var(--card);border:var(--bd);border-radius:12px;padding:26px}
.post-card h2{font-size:1.35rem;line-height:1.3;margin:8px 0}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--accent)}
.post-card p{color:var(--muted);margin:0 0 14px}
.meta{color:var(--faint);font-size:.85rem;font-weight:600}
.tag{display:inline-flex;align-items:center;background:var(--tag-bg);color:var(--tag-ink);border:var(--tag-bd);font-size:.77rem;font-weight:700;padding:4px 12px;border-radius:var(--tag-radius);margin-bottom:10px}
/* article */
.article{background:var(--card);border:var(--bd);border-radius:12px;padding:clamp(20px,4vw,40px);margin:32px 0}
.article h1{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15;margin:10px 0 8px}
.article h2{font-size:1.5rem;margin:1.8em 0 .5em}
.article h3{font-size:1.2rem;margin:1.5em 0 .4em}
.article p,.article li{color:var(--ink)}
.article p{margin:0 0 1em}
.article ul,.article ol{padding-left:1.4em;margin:0 0 1.2em}
.article li{margin-bottom:.4em}
.article pre{background:#0d1117;color:#e6edf3;border-radius:8px;padding:18px;overflow:auto;font-size:.85rem;line-height:1.5}
.article code{font-family:var(--fhead);font-size:.86em}
.article p code,.article li code{background:#eaeef2;border-radius:4px;padding:1px 5px}
.article table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:.9rem;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.article figure{margin:1.6em 0;background:#fff;border:var(--bd);border-radius:8px;padding:14px}
.article figcaption{color:var(--muted);font-size:.85rem;text-align:center;margin-top:10px}
.article blockquote{border-left:4px solid var(--accent);margin:1.4em 0;padding:.6em 1.2em;background:#fff;border-radius:0 8px 8px 0;color:var(--muted)}
.crumbs{color:var(--faint);font-size:.85rem;margin:24px 0 0}
.crumbs a{color:var(--muted)}
.post-nav{display:flex;justify-content:space-between;gap:14px;margin:0 0 56px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:var(--btn-radius);font-weight:700;font-size:.93rem;background:var(--card);color:var(--ink)!important;border:1px solid var(--line)}
.btn-primary{background:var(--accent);color:var(--on-accent)!important;border:none}
.contact{padding:60px 0 30px;text-align:center}
.socials{display:flex;justify-content:center;gap:14px;margin:20px 0}
.socials a{width:52px;height:52px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.socials a:hover{color:var(--accent);transform:translateY(-3px)}
.socials svg{width:22px;height:22px}
.foot{text-align:center;color:var(--faint);font-size:.85rem;padding:24px 0 40px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}