:root{--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
--fs-xs:.8125rem;--fs-sm:.9375rem;--fs-md:1.125rem;--fs-lg:1.5rem;--fs-xl:2.5rem;--fs-2xl:clamp(2.75rem,6vw,4.75rem);
--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:7rem;--r-sm:8px;--r-md:18px;--r-lg:28px;
--ink:#1d1d1f;--ink2:#6e6e73;--line:#d2d2d7;--bg:#fff;--bg2:#f5f5f7;--accent:#0071e3;--max:980px}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
nav{position:sticky;top:0;z-index:9;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
nav .in{max-width:var(--max);margin:auto;display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 var(--s3);font-size:var(--fs-xs)}
nav a{color:var(--ink);margin-left:var(--s3)}nav b{font-weight:600}
section{padding:var(--s6) var(--s3)}.wrap{max-width:var(--max);margin:auto}.alt{background:var(--bg2)}
h1{font-size:var(--fs-2xl);line-height:1.05;letter-spacing:-.025em;font-weight:700}
h2{font-size:var(--fs-xl);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin-bottom:var(--s4)}
h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s1)}
.eyebrow{font-size:var(--fs-sm);color:var(--ink2);font-weight:600;margin-bottom:var(--s2)}
.lead{font-size:var(--fs-lg);color:var(--ink2);max-width:720px;margin-top:var(--s3);line-height:1.4}
.hero{text-align:center;padding-top:calc(var(--s6)*1.3)}.hero .lead{margin-left:auto;margin-right:auto}
.btns{margin-top:var(--s4);display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1.4rem;border-radius:980px;background:var(--ink);color:#fff;font-size:var(--fs-sm)}.btn.ghost{background:none;color:var(--accent);border:1px solid var(--accent)}.btn:hover{text-decoration:none;opacity:.85}
.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--bg);border-radius:var(--r-lg);padding:var(--s4)}.alt .card{background:#fff}section:not(.alt) .card{background:var(--bg2)}
.card p,.muted{color:var(--ink2);font-size:var(--fs-sm)}
.stat{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em}
.job{display:grid;grid-template-columns:200px 1fr;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line)}
.job .when{color:var(--ink2);font-size:var(--fs-sm)}.job ul{padding-left:1.1rem;color:var(--ink2);font-size:var(--fs-sm)}.job li{margin-top:.4rem}
.tags{display:flex;flex-wrap:wrap;gap:var(--s1)}.tags span{background:#fff;border-radius:var(--r-sm);padding:.35rem .75rem;font-size:var(--fs-xs)}
details{border-top:1px solid var(--line);padding:var(--s3) 0}details summary{font-weight:600;cursor:pointer;list-style:none;font-size:var(--fs-md)}details p{color:var(--ink2);margin-top:var(--s1);font-size:var(--fs-sm)}
figure{margin:var(--s4) 0}figure img{width:100%;border-radius:var(--r-md);background:#fff}figcaption{font-size:var(--fs-xs);color:var(--ink2);margin-top:var(--s1)}
article p,article li{max-width:720px}article p+p{margin-top:var(--s2)}article h2{margin-top:var(--s5);margin-bottom:var(--s2)}article ul,article ol{color:var(--ink);padding-left:1.2rem}article li{margin-top:.35rem}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);margin:var(--s3) 0}td,th{text-align:left;padding:.6rem .4rem;border-bottom:1px solid var(--line)}th{color:var(--ink2);font-weight:600}
.verdict{border-left:3px solid var(--accent);padding:var(--s2) var(--s3);background:var(--bg2);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:var(--s3) 0}
footer{padding:var(--s4) var(--s3);text-align:center;color:var(--ink2);font-size:var(--fs-xs);border-top:1px solid var(--line)}
/* hidden-until-revealed only when JS runs (html.js), so the page reads fine without JS */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}.js .reveal.in{opacity:1;transform:none}
@media(max-width:700px){.job{grid-template-columns:1fr}nav .links a:not(:last-child){display:none}}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
/* mobile */
img,svg,canvas,video{max-width:100%;height:auto}
html,body{overflow-x:hidden}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
@media(max-width:700px){
:root{--fs-md:1.0625rem;--fs-sm:1rem;--fs-xs:.875rem;--fs-xl:2rem;--fs-lg:1.3rem;--s6:4rem}
nav .in{padding:0 max(var(--s2),env(safe-area-inset-left))}
nav .links{display:flex;overflow-x:auto;scrollbar-width:none}nav .links::-webkit-scrollbar{display:none}
nav .links a:not(:last-child){display:inline}nav a{margin-left:var(--s2)}
section{padding:var(--s5) max(var(--s2),env(safe-area-inset-left))}
.card{padding:var(--s3)}.hero{padding-top:var(--s5)}
.grid{grid-template-columns:1fr}
td,th{padding:.55rem .6rem}
}
@media(max-width:700px){nav b{white-space:nowrap;flex-shrink:0}nav .links{min-width:0}}

.status{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:999px;border:1px solid #2a9d8f55;background:#2a9d8f14;font-size:14px;font-weight:600;color:inherit}
.status span{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e33;animation:stpulse 2s infinite}@keyframes stpulse{50%{opacity:.4}}
.qa{display:grid;gap:8px;margin:12px 0}.qa p{margin:0;line-height:1.55}.qa b{display:inline-block;min-width:78px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-right:6px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px}.proj h3{margin-top:0}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:10px}.nums div{border-top:2px solid currentColor;padding-top:6px}.nums strong{display:block;font-size:18px}.nums span{display:block;font-size:12px;opacity:.7;line-height:1.35}
.proj .qa b{display:block;margin:0 0 2px}.proj .nums{grid-template-columns:repeat(3,1fr)}

/* keyboard focus */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}