/* The blog (/blog/ and /blog/<slug>/), on top of grayscale.css. Built by
   scripts/build-blog.py; running text is left-aligned in one column. */
.blog main{padding-bottom:60px;}
.blog .meta,.blog .kind,.blog .source,.blog .count{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#a9b1ad;}
.filters .btn{margin:0 4px 8px 0;font-size:11px;letter-spacing:.5px;padding:4px 9px;}
/* The pressed state alone decides the colour: the theme's green :focus and
   :hover would otherwise keep a released button looking pressed on a phone. */
.filters .btn,.filters .btn:hover,.filters .btn:focus,.filters .btn:active{color:#42dca3;background-color:transparent;border-color:#42dca3;}
.filters .btn[aria-pressed="true"],.filters .btn[aria-pressed="true"]:hover,.filters .btn[aria-pressed="true"]:focus,.filters .btn[aria-pressed="true"]:active{color:#000;background-color:#42dca3;}
.filters .btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(hover:hover){.filters .btn[aria-pressed="false"]:hover{background-color:rgba(66,220,163,.15);}}
.filters .count{min-height:1.5em;margin-top:4px;}
.topics{list-style:none;margin:8px 0 0;padding:0;}
.topics li{display:inline-block;border:1px solid rgba(255,255,255,.3);font-size:12px;padding:2px 8px;margin:0 6px 6px 0;color:#a9b1ad;}
.article-head{padding-top:140px;text-align:left;}
.article-head h1{font-size:34px;text-transform:none;letter-spacing:0;line-height:1.25;margin:8px 0 16px;}
@media(min-width:768px){.article-head h1{font-size:44px;}}
.article-body{margin-top:30px;text-align:left;}
.article-body p,.article-body li{font-size:18px;line-height:1.65;}
.article-body p{margin:0 0 22px;}
.article-body h2{font-size:24px;text-transform:none;letter-spacing:0;margin:36px 0 14px;text-align:left;}
.article-body h3,.article-body h4{font-size:19px;text-transform:none;letter-spacing:0;margin:28px 0 12px;}
.article-body img{max-width:100%;height:auto;display:block;margin:10px auto;}
.article-body figcaption{font-size:14px;color:#a9b1ad;text-align:center;margin-bottom:22px;}
.article-body blockquote{border-left:3px solid #42dca3;padding-left:18px;margin:0 0 22px;color:#d6dbd8;}
.article-body pre{white-space:pre-wrap;background:#111611;padding:14px;font-size:15px;}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px;}
.article-body th,.article-body td{border-bottom:1px solid rgba(255,255,255,.3);padding:8px 10px;text-align:left;}
.blog .back{margin-top:40px;}
footer .views{font-size:13px;color:#a9b1ad;}
.blog .sign-off{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.3);font-size:16px;color:#a9b1ad;text-align:left;}
.post-list{font-size:15px;}
.post-list ol{list-style:none;margin:0;padding:0;}
.post-list li{border-top:1px solid rgba(255,255,255,.2);padding:9px 0;line-height:1.35;text-align:left;}
.post-list .meta{display:block;font-size:11px;margin-bottom:2px;}
.post-list a[aria-current="page"]{color:#fff;font-weight:700;}
.post-list a[aria-current="page"]::before{content:"\25B8\00A0";color:#42dca3;}
.post-list-inner{margin-top:100px;text-align:left;}
/* On a narrow screen the list is a concertina above the article, folded. */
.post-list-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;color:#42dca3;border:1px solid rgba(255,255,255,.3);padding:10px 14px;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;}
.post-list-toggle i{transition:transform .2s;}
.post-list-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.post-list-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:991.98px){.post-list ol{margin-top:6px;}.blog-article .article-head{padding-top:30px;}}
@media(min-width:992px){.post-list-inner{position:sticky;top:90px;margin-top:140px;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:14px;}}
.filters{margin:6px 0 4px;text-align:left;}
.filters .count{margin:0;}
.post-list li[hidden]{display:none;}
.post-list li{position:relative;padding-right:28px;}
.post-list .info{position:absolute;top:8px;right:0;background:transparent;border:0;padding:4px;color:#a9b1ad;font-size:14px;line-height:1;cursor:pointer;}
.post-list .info:hover,.post-list .info:focus{color:#42dca3;}
.post-list .info:focus-visible{outline:2px solid #fff;outline-offset:1px;}
/* A post's summary, opened below its title by the info button. */
.post-list .summary{margin:8px 0 2px;padding:8px 10px;background:#1c2420;border-left:2px solid #42dca3;color:#d6dbd8;font-size:14px;line-height:1.45;}
.post-list .summary[hidden]{display:none;}
.post-list .summary .where{display:block;margin-top:4px;color:#a9b1ad;}
.post-list .info[aria-expanded="true"]{color:#42dca3;}
@media(max-width:991.98px){.blog-index .post-list-inner{margin-top:10px;}.blog-index .article-head{padding-top:100px;}}
/* Blog pages don't run the home page's scroll script, so the bar is solid from
   the start: otherwise the post list and article scroll visibly beneath it. */
@media(min-width:768px){.blog .navbar-custom{background:#000;border-bottom:1px solid rgba(255,255,255,.3);}}
.cite{margin:14px 0 4px;border:1px solid rgba(255,255,255,.3);}
.cite summary{cursor:pointer;padding:8px 12px;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#42dca3;}
.cite summary:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.cite[open] summary{border-bottom:1px solid rgba(255,255,255,.3);}
.cite .citation{padding:12px;border-bottom:1px solid rgba(255,255,255,.15);}
.cite .citation .meta{margin:0 0 4px;}
.cite .citation-text{font-size:15px;line-height:1.5;overflow-wrap:anywhere;user-select:all;}
.cite .citation-text pre{margin:0;font-size:13px;white-space:pre-wrap;background:transparent;color:#fff;}
.cite .copy{margin-top:8px;font-size:11px;padding:3px 10px;}
.cite > .meta{padding:10px 12px;margin:0;}
.blog-index .article-body h2{margin-top:40px;}
.article-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:14px 0 4px;}
.article-tools .cite{margin:0;flex:1 1 280px;}
.share-toggle{background:transparent;border:1px solid rgba(255,255,255,.3);color:#42dca3;padding:8px 12px;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;}
.share-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.share .dropdown-menu{text-transform:none;letter-spacing:0;}
.share .dropdown-menu .dropdown-item{color:#fff;}
/* An editor's note (CLAUDE.md rule 13): a shaded box, set apart from the
   article as first written. */
.article-body .editors-note{margin:0 0 22px;padding:14px 18px;background:#1c2420;border-left:3px solid #42dca3;}
.article-body .editors-note p{margin:0;font-size:16px;line-height:1.6;color:#d6dbd8;font-style:italic;}
/* The author bio on /blog/: the photo on one side, the text on the other;
   stacked on a narrow screen. */
.bio-panel{display:flex;gap:24px;align-items:flex-start;margin:40px 0 22px;padding:20px;background:#1c2420;border:1px solid rgba(255,255,255,.15);}
.bio-panel img{flex:0 0 160px;width:160px;height:160px;border-radius:50%;object-fit:cover;}
.bio-panel h2{margin-top:0 !important;}
.bio-panel p{margin-bottom:0;}
@media(max-width:575.98px){.bio-panel{flex-direction:column;align-items:center;}.bio-panel img{flex-basis:auto;width:140px;height:140px;}}