:root{--ink:#31394c;--text:#262b38;--mute:#6b7280;--line:#dfe2e8;--wash:#f5f6f8;--bg:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:17px/1.65 Georgia,"Times New Roman",serif}
a{color:var(--ink);text-decoration-color:#9aa3b5;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
.wrap{max-width:860px;margin:0 auto;padding:0 24px}
.top{display:grid;grid-template-columns:1fr 270px;gap:40px;padding:48px 0 24px;align-items:start}
h1{font-size:38px;line-height:1.15;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.role{color:var(--mute);margin:6px 0 18px;font-size:18px}
.top p+p{margin-top:12px}
.side{font:14px/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;border-left:2px solid var(--ink);padding-left:16px}
.side dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.side dt:first-child{margin-top:0}
.side dd{word-break:break-word}
h2{font-variant:small-caps;letter-spacing:.05em;font-size:23px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px;margin:44px 0 18px;font-weight:700}
.news{list-style:none;font-size:16px}
.news li{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:3px 0}
.news time{font:14px/1.9 ui-sans-serif,system-ui,sans-serif;color:var(--mute)}
.proj{padding:0 0 22px}
.proj h3{font-size:18px;color:var(--ink);font-weight:700}
.proj .tags{font:12px ui-sans-serif,system-ui,sans-serif;color:var(--mute);margin:1px 0 4px;letter-spacing:.02em}
.proj p{font-size:16px}
.proj .links{font:14px ui-sans-serif,system-ui,sans-serif;margin-top:4px}
.proj .links a{margin-right:14px}
.cols{display:grid;grid-template-columns:150px 1fr;gap:6px 20px;font-size:16px}
.cols dt{font:600 13px/2 ui-sans-serif,system-ui,sans-serif;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
footer{margin:56px 0 40px;padding-top:16px;border-top:1px solid var(--line);font:13px ui-sans-serif,system-ui,sans-serif;color:var(--mute)}
@media(max-width:720px){
 .top{grid-template-columns:1fr;gap:24px;padding-top:32px}
 h1{font-size:32px}
 .news li,.cols{grid-template-columns:1fr;gap:0}
 .news time{line-height:1.4}
}
.side small{display:block;color:var(--mute);font-size:12.5px;line-height:1.5;margin-top:2px}
.job{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:0 0 14px;font-size:16px}
.job time{font:14px/1.9 ui-sans-serif,system-ui,sans-serif;color:var(--mute)}
.job span{color:var(--mute)}
article{padding:40px 0 0}
article h1{font-size:34px}
article .sub{color:var(--mute);margin:4px 0 24px;font-size:18px}
article p{margin-top:14px}
article h2{margin-top:40px}
video{display:block;width:100%;height:auto;background:#000;border:1px solid var(--line)}
figcaption{font:13px ui-sans-serif,system-ui,sans-serif;color:var(--mute);margin-top:6px}
.spec{display:grid;grid-template-columns:110px 1fr;gap:6px 20px;font-size:16px}
.spec dt{font:600 13px/2 ui-sans-serif,system-ui,sans-serif;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
pre{background:var(--wash);border:1px solid var(--line);padding:12px 14px;font:13px/1.6 ui-monospace,Menlo,monospace;overflow-x:auto}
.back{font:14px ui-sans-serif,system-ui,sans-serif;display:inline-block;margin-bottom:16px}
@media(max-width:720px){.job,.spec{grid-template-columns:1fr;gap:0}.side{border-left:0;padding-left:0}}
html{scroll-behavior:smooth;scroll-padding-top:24px}
.int i{color:var(--ink);font-style:italic}.int span{display:block;margin-top:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
body{padding-left:64px}
nav{position:fixed;left:0;top:0;bottom:0;width:64px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-right:1px solid var(--line);background:rgba(255,255,255,.94);z-index:5}
nav a{position:relative;display:flex;align-items:center;justify-content:center;height:48px;color:var(--mute);border:0}
nav a svg{width:22px;height:22px}
nav a:hover{color:var(--ink)}
nav a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--ink);transform:scaleY(0);transition:transform .2s}
nav a.on{color:var(--ink)}
nav a.on::before{transform:scaleY(1)}
@media(max-width:720px){body{padding-left:48px}nav{width:48px}}
article figure+figure{margin-top:20px}article figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}