.article-body img{display:block;max-width:100%;height:auto;margin:30px auto 12px}
.article-body h3{color:var(--text);font-size:28px;margin-top:30px}
.article-body ul,.article-body ol{padding-left:1.5em;margin-bottom:24px}
.article-body li{margin-block:8px}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body pre{padding:22px;background:#172221;border:1px solid var(--line);overflow:auto;font-size:14px;line-height:1.7;tab-size:2}
.article-body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e0bd82}
.article-body :not(pre)>code{padding:2px 5px;background:#172221}
.article-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin-block:30px}
.article-body th,.article-body td{text-align:left;padding:12px 16px;border:1px solid var(--line)}
.article-body th{color:var(--text);background:#172221}
.article-hero{height:auto}
.diagram-block{margin:32px 0;padding:24px;border:1px solid var(--line);background:#172221;overflow:auto}
.diagram-block:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.article-body pre.mermaid{margin:0;padding:0;border:0;overflow:visible}
.mermaid svg{display:block;height:auto;margin-inline:auto}
.diagram-message{font-size:14px;color:var(--muted)}
@media(max-width:600px){.diagram-block{padding:18px}.article-body pre{padding:16px}}

.diagram-block::-webkit-scrollbar{height:8px}.diagram-block::-webkit-scrollbar-track{background:#101919}.diagram-block::-webkit-scrollbar-thumb{background:#8b7858;border-radius:4px}

.blog-shell{display:grid;grid-template-columns:112px minmax(0,1fr);gap:48px;align-items:start}
.blog-shell:has(.article-index[open]){grid-template-columns:248px minmax(0,1fr)}
.blog-sidebar{position:sticky;top:28px;margin-top:60px;min-width:0}
.article-index{border:1px solid var(--line);background:#14201f}
.article-index summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 16px;list-style:none;cursor:pointer;color:var(--gold);font-size:14px}
.article-index summary::-webkit-details-marker{display:none}
.article-index summary:hover{background:#d8b77b0a}
.article-index summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.index-toggle::before{content:'+';font-size:22px;line-height:1}
.article-index[open] .index-toggle::before{content:'−'}
.article-index[open] summary{border-bottom:1px solid var(--line)}
.article-index nav{max-height:calc(100svh - 150px);overflow-y:auto}
.article-index ol{list-style:none;padding:10px;margin:0}
.article-index li+li{margin-top:4px}
.article-index a{display:block;padding:14px 12px;border-left:2px solid transparent;line-height:1.4}
.article-index a:hover{background:#d8b77b0a}
.article-index time{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}
.article-index a>span{display:block;font-size:15px;color:var(--text)}
.article-index a[aria-current=page]{border-left-color:var(--gold);background:#d8b77b10}
.article-index a[aria-current=page]>span{color:var(--gold)}
.blog-content{min-width:0}
.blog-content .article-main{width:100%;max-width:760px;padding:60px 0 90px}
.blog-main>.page-width{width:100%;max-width:none}
.blog-main .guide-intro{padding-block:60px 42px}
.blog-main .guide-lead{max-width:620px}
.blog-main .journal-entry{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px}
.blog-main .journal-entry h2{font-size:34px}
.blog-main .onward{gap:24px;flex-wrap:wrap}
@media(max-width:1100px) and (min-width:901px){.blog-shell{gap:30px}.blog-shell:has(.article-index[open]){grid-template-columns:220px minmax(0,1fr)}.blog-main .journal-entry{grid-template-columns:1fr}.blog-main .story-image{min-height:260px}}
@media(max-width:900px){.blog-shell,.blog-shell:has(.article-index[open]){grid-template-columns:minmax(0,1fr);gap:0}.blog-sidebar{position:static;margin-top:28px}.article-index nav{max-height:360px}.blog-content .article-main{padding:35px 0 60px}.blog-main .guide-intro{padding-block:35px 30px}.blog-main .journal-entry{grid-template-columns:minmax(0,1fr)}.article-index summary{min-height:50px}}

.blog-page .article-header h1{text-wrap:balance}