*{box-sizing:border-box;margin:0;padding:0}
:root{--a:#0a84ff;--ink:#15181d;--mut:#5b6470;--line:#e6e9ee;--bg:#fff;--soft:#f7f8fa}
html{-webkit-text-size-adjust:100%}
body{font:17px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--a);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
header.site{border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);position:sticky;top:0;z-index:50}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.brand{font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.brand span{color:var(--a)}
nav.main{display:flex;gap:22px;flex-wrap:wrap}
nav.main a{color:var(--mut);font-size:14.5px;font-weight:500}
nav.main a:hover{color:var(--a);text-decoration:none}
.hero{padding:54px 0 30px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;letter-spacing:-.03em;margin-bottom:12px}
.hero p{color:var(--mut);font-size:18px;max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;padding:38px 0}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 14px 38px rgba(15,20,30,.09);transform:translateY(-2px)}
.card .ph{aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h2{font-size:18px;line-height:1.35;letter-spacing:-.01em}
.card h2 a{color:var(--ink)}
.card p{color:var(--mut);font-size:14.5px;line-height:1.6}
.meta{font-size:12.5px;color:#8b95a3;display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tag{display:inline-block;font-size:12px;padding:3px 11px;border:1px solid var(--line);border-radius:999px;color:var(--mut);background:#fff}
.tag:hover{border-color:var(--a);color:var(--a);text-decoration:none}
article.post{max-width:760px;margin:0 auto;padding:44px 0 70px}
article.post h1{font-size:clamp(27px,3.7vw,40px);line-height:1.2;letter-spacing:-.03em;margin-bottom:16px}
.pmeta{color:var(--mut);font-size:14.5px;margin-bottom:26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.content{font-size:17.5px}
.content p{margin:0 0 1.25em}
.content h2{font-size:26px;margin:2em 0 .6em;letter-spacing:-.02em;line-height:1.3}
.content h3{font-size:20.5px;margin:1.7em 0 .5em;line-height:1.35}
.content ul,.content ol{margin:0 0 1.3em 1.35em}
.content li{margin-bottom:.5em}
.content figure{margin:1.9em 0}
.content img{border-radius:12px}
.content blockquote{border-left:3px solid var(--a);padding:.3em 0 .3em 1.2em;margin:1.6em 0;color:var(--mut);font-style:italic}
.content a{border-bottom:1px solid transparent}
.content a:hover{border-bottom-color:var(--a);text-decoration:none}
.crumb{font-size:13.5px;color:var(--mut);padding:20px 0 0}
.crumb a{color:var(--mut)}
.related{border-top:1px solid var(--line);padding:40px 0 10px}
.related h2{font-size:21px;margin-bottom:20px;letter-spacing:-.02em}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.rel a{color:var(--ink);font-size:15.5px;line-height:1.45;display:block;border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.rel a:hover{border-color:var(--a);text-decoration:none}
.pager{display:flex;gap:10px;justify-content:center;padding:22px 0 60px;flex-wrap:wrap}
.pager a,.pager span{border:1px solid var(--line);border-radius:9px;padding:8px 15px;font-size:14.5px;color:var(--mut)}
.pager .cur{background:var(--a);color:#fff;border-color:var(--a)}
.pager a:hover{border-color:var(--a);color:var(--a);text-decoration:none}
footer.site{border-top:1px solid var(--line);background:var(--soft);padding:46px 0;margin-top:40px;color:var(--mut);font-size:14.5px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;margin-bottom:26px}
.fcols h3{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink);margin-bottom:12px}
.fcols a{color:var(--mut);display:block;padding:3px 0;font-size:14px}
.tags-all{display:flex;flex-wrap:wrap;gap:9px;padding:8px 0 40px}
@media(max-width:640px){.hbar{height:auto;padding:14px 0;flex-direction:column;align-items:flex-start;gap:11px}nav.main{gap:15px}.hero{padding:34px 0 22px}}