/* Portfolio styles. Colours are CSS variables so light/dark themes are easy to change. */
:root{--bg:#f6f7fb;--surface:#ffffff;--text:#1b2033;--muted:#5a6279;--accent:#3b5bdb;--accent-ink:#ffffff;--line:#e2e5f0;--chip:#eaeefc;}
@media (prefers-color-scheme: dark){:root{--bg:#0b1020;--surface:#131a30;--text:#e6e9f2;--muted:#9aa3bf;--accent:#7b93ff;--accent-ink:#0b1020;--line:#26304f;--chip:#1c2646;}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.wrap{max-inline-size:1000px;margin-inline:auto;padding-inline:20px}
header.nav{position:sticky;inset-block-start:0;background:var(--surface);border-block-end:1px solid var(--line);z-index:5}
header.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:12px;flex-wrap:wrap;gap:8px}
.brand{font-weight:700}
nav a{margin-inline-start:16px;text-decoration:none;color:var(--muted);font-size:14px}
nav a:hover{color:var(--accent)}
.hero{padding-block:72px 48px}
.hero h1{font-size:clamp(32px,6vw,54px);line-height:1.1;margin:0 0 12px}
.hero .role{color:var(--accent);font-weight:600;font-size:18px;margin:0 0 16px}
.hero p.lead{max-inline-size:680px;color:var(--muted);font-size:18px}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;margin-inline-end:10px;margin-block-start:8px}
.btn.alt{background:transparent;color:var(--accent);border:1px solid var(--accent)}
section{padding-block:40px}
h2{font-size:26px;margin:0 0 20px}
h2::after{content:"";display:block;inline-size:48px;block-size:3px;background:var(--accent);margin-block-start:6px;border-radius:2px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-block-start:28px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat b{display:block;font-size:28px;color:var(--accent)}
.stat span{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0 0 10px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{background:var(--chip);border-radius:999px;padding:3px 10px;font-size:13px}
.featured{border-color:var(--accent);grid-column:1/-1}
.featured ul{margin:8px 0 14px;padding-inline-start:20px;color:var(--muted)}
.todo{border-style:dashed}
.timeline{border-inline-start:2px solid var(--line);margin:0;padding:0 0 0 20px;list-style:none}
.timeline li{position:relative;margin-block-end:22px}
.timeline li::before{content:"";position:absolute;inset-inline-start:-27px;inset-block-start:7px;inline-size:12px;block-size:12px;border-radius:50%;background:var(--accent)}
.timeline .when{color:var(--muted);font-size:13px}
.timeline h3{margin:0;font-size:17px}
.timeline p{margin:4px 0 0;color:var(--muted)}
footer{border-block-start:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:14px;text-align:center}

/* Theme override set by js/main.js (toggle button) */
:root[data-theme="light"]{--bg:#f6f7fb;--surface:#ffffff;--text:#1b2033;--muted:#5a6279;--accent:#3b5bdb;--accent-ink:#ffffff;--line:#e2e5f0;--chip:#eaeefc;}
:root[data-theme="dark"]{--bg:#0b1020;--surface:#131a30;--text:#e6e9f2;--muted:#9aa3bf;--accent:#7b93ff;--accent-ink:#0b1020;--line:#26304f;--chip:#1c2646;}
.theme-btn{margin-inline-start:16px;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:13px}
nav a.active{color:var(--accent);font-weight:600}
.card{transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.card{transition:none}.card:hover{transform:none}}

.ico{inline-size:1.05em;block-size:1.05em;vertical-align:-.15em;margin-inline-end:.4em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.stat .ico{inline-size:.8em;block-size:.8em;margin-inline-end:.25em}