:root{
  --bg:#0b0d10; --panel:#14181d; --panel2:#1b2026; --line:#2a313a;
  --text:#e8edf2; --muted:#9aa6b2; --accent:#3b82f6; --accent2:#60a5fa;
  --maxw:1080px; --prose:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:20px; padding-right:20px}
header.site{position:sticky; top:0; z-index:10; background:rgba(11,13,16,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; color:var(--text)}
.brand img{height:22px; width:auto; display:block}
.nav nav a{color:var(--muted); margin-left:22px; font-size:14px}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--text); text-decoration:none}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:11px 18px; border-radius:10px; font-weight:600; font-size:15px; border:1px solid transparent}
.btn:hover{background:var(--accent2); text-decoration:none}
footer.site{border-top:1px solid var(--line); padding:38px 0; color:var(--muted); font-size:14px; margin-top:72px}
footer .disc{max-width:720px; margin:0 0 16px; font-size:13px; color:#78828d}
footer a{color:var(--muted)}

/* breadcrumbs */
.crumbs,.article .crumbs{font-size:14px; color:var(--muted); margin:28px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li+li::before{content:"/"; margin-right:6px; color:var(--line)}
.crumbs a{color:var(--muted)}

/* blog index */
.blog-head{padding:40px 0 8px}
.blog-head h1{font-size:clamp(32px,5vw,46px); line-height:1.1; margin:0 0 12px; letter-spacing:-.4px}
.blog-head p{color:var(--muted); max-width:640px; margin:0}
.posts{display:grid; gap:18px; grid-template-columns:repeat(2,1fr); align-items:start; margin-top:36px}
.post-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column}
.post-card:hover{border-color:#3a4552}
.post-card .meta{font-size:13px; color:var(--muted); margin:0 0 10px}
.post-card h2{font-size:20px; line-height:1.3; margin:0 0 10px}
.post-card h2 a{color:var(--text)}
.post-card p{color:var(--muted); font-size:15px; margin:0 0 16px; flex:1}
.post-card .cover{display:block; line-height:0; margin:-8px -8px 18px}
.post-card .cover img{display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line)}
.post-card.featured{grid-column:1/-1; flex-direction:row; gap:28px; align-items:center; padding:20px}
.post-card.featured .cover{flex:0 0 58%; margin:0}
.post-card.featured .cover img{display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line)}
.post-card.featured .body{display:flex; flex-direction:column}
.post-card.featured h2{font-size:24px}
@media(max-width:760px){ .post-card.featured{flex-direction:column; align-items:stretch} .post-card.featured .cover{flex:none} }
.post-card .more{font-size:15px; font-weight:600}

/* article */
.article{max-width:var(--prose); margin:0 auto}
.article header h1{font-size:clamp(30px,5vw,44px); line-height:1.12; margin:18px 0 14px; letter-spacing:-.4px}
.article .standfirst{font-size:19px; color:var(--muted); margin:0 0 14px}
.article .meta{font-size:14px; color:var(--muted); margin:0 0 30px}
.article h2{font-size:clamp(23px,3vw,28px); line-height:1.25; margin:44px 0 12px; letter-spacing:-.2px; scroll-margin-top:80px}
.article h3{font-size:19px; margin:30px 0 8px; scroll-margin-top:80px}
.article p,.article li{color:#d5dce3}
.article ul,.article ol{padding-left:22px}
.article li{margin:6px 0}
.article strong{color:var(--text)}
.article code{font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--text)}
.hero-fig{margin:0 0 30px}
.hero-fig img{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line)}
.hero-fig figcaption{font-size:14px; color:var(--muted); margin-top:10px; text-align:center}
.toc{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 22px; margin:0 0 10px}
.toc strong{display:block; font-size:14px; color:var(--muted); font-weight:600; margin-bottom:4px}
.toc ol{margin:0; padding-left:20px}
.toc li{margin:3px 0; font-size:15px}
.table-wrap{overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--panel); color:var(--text); font-weight:600}
tr:last-child td{border-bottom:0}
td{color:#d5dce3}
.note{background:var(--panel); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:14px 18px; margin:24px 0; font-size:16px}
.note p{margin:0}
.faq details{border:1px solid var(--line); border-radius:12px; padding:0 18px; margin-bottom:12px; background:var(--panel)}
.faq summary{cursor:pointer; padding:14px 0; font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px; color:var(--muted)}
.cta-box{text-align:center; background:linear-gradient(135deg,#14181d,#1b2733); border:1px solid var(--line); border-radius:16px; padding:34px 24px; margin:48px 0 0}
.cta-box h2{margin:0 0 8px}
.cta-box p{color:var(--muted); margin:0 auto 20px; max-width:480px}
.related{margin-top:56px}
.related h2{font-size:22px; margin:0 0 4px}

@media(max-width:760px){ .nav nav{display:none} body{font-size:16px} .posts{grid-template-columns:1fr} }