/* Blog look (2026-11): quick answer, related posts, topic filters. Brand: lime #d6fd70, ink #131313. */
.hvo-quick-answer{margin:0 0 2rem;padding:1.25rem 1.5rem;border-left:4px solid #131313;background:#f4f4f0;border-radius:0 12px 12px 0}
.hvo-quick-answer p{margin:0;color:#151515;font-size:1.05rem;line-height:1.6}
.hvo-quick-answer .hvo-quick-answer-label{margin:0 0 .4rem;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#556c00}
.hvo-related{margin:3.5rem 0 1rem;padding-top:2rem;border-top:1px solid #dfdfda}
.hvo-related h2{margin:0 0 1.25rem;font-size:1.75rem;font-weight:500;letter-spacing:-.04em;color:#151515}
.hvo-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.hvo-related-card{display:flex;flex-direction:column;gap:.5rem;color:#151515;text-decoration:none}
.hvo-related-media{display:block;aspect-ratio:1200/630;overflow:hidden;border-radius:12px;background:#f4f4f0}
.hvo-related-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.hvo-related-card:hover .hvo-related-media img{transform:scale(1.03)}
.hvo-related-topic{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#686864}
.hvo-related-title{font-size:1.05rem;font-weight:500;line-height:1.35;letter-spacing:-.02em}
.hvo-related-card:hover .hvo-related-title{text-decoration:underline}
@media (max-width:767px){.hvo-related-grid{grid-template-columns:1fr}}
.hvo-blog-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem}
/* Cards match the 1200x630 cover so there are no empty bands above/below (Mena, 5 Nov). */
.hvo-blog-card .hvo-blog-card-media,.hvo-blog-grid .hvo-blog-card[class] .hvo-blog-card-media{aspect-ratio:1200/630!important;height:auto!important}
.hvo-blog-card-media img.hvo-cover-img{object-fit:cover!important;object-position:center!important}
.hvo-blog-feature-grid[hidden]{display:none!important}
.hvo-blog-filters button{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:.6rem 1rem;border-radius:999px;border:1px solid #13131324;background:#fff;color:#131313;cursor:pointer}
.hvo-blog-filters button:hover{border-color:#131313}
.hvo-blog-filters button[aria-pressed="true"]{background:#d6fd70;border-color:#d6fd70}
.hvo-blog-filters button:focus-visible{outline:2px solid #131313;outline-offset:2px}
.hvo-blog-card[hidden]{display:none!important}
/* Post meta line: wrap instead of overflowing on phones (seen cut at 390px). */
.hvo-article-meta{flex-wrap:wrap;justify-content:center;row-gap:.35rem;max-width:100%}
.hvo-article-meta>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:767px){.hvo-article-meta{gap:.35rem 1rem;font-size:11px;letter-spacing:.06em;padding:0 .25rem}.hvo-article-meta>span{flex:0 1 auto}}
/* Dark mode (html[data-theme=dark] is set by dark-mode/dark.js from the toggle or the device setting).
   Surfaces follow dark.css: page #131313, section #1a1a1a, card #232323. */
html[data-theme="dark"] .hvo-quick-answer{background:var(--bg-color--bg-white,#232323);border-left-color:#d6fd70;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html[data-theme="dark"] .hvo-quick-answer p{color:var(--text-color--text-primary,#fff)}
html[data-theme="dark"] .hvo-quick-answer .hvo-quick-answer-label,html[data-theme="dark"] .hvo-note .hvo-note-label{color:#d6fd70}
html[data-theme="dark"] .hvo-related{border-top-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hvo-related h2,html[data-theme="dark"] .hvo-related-card{color:var(--text-color--text-primary,#fff)}
html[data-theme="dark"] .hvo-related-media{background:#232323}
html[data-theme="dark"] .hvo-related-topic{color:var(--text-color--text-secondary,#b5b5b5)}
html[data-theme="dark"] .hvo-blog-filters button{background:#232323;color:#fff;border-color:rgba(255,255,255,.18)}
html[data-theme="dark"] .hvo-blog-filters button:hover{border-color:#fff}
html[data-theme="dark"] .hvo-blog-filters button[aria-pressed="true"]{background:#d6fd70;border-color:#d6fd70;color:#131313}
html[data-theme="dark"] .hvo-blog-filters button:focus-visible{outline-color:#d6fd70}
/* Covers: light-frame covers (Strategy, Creator story) swap to a dark-frame twin; lime and black covers show as made, no dimming. */
img.hvo-cover-dark{display:none!important}
html[data-theme="dark"] img.hvo-cover-light{display:none!important}
html[data-theme="dark"] img.hvo-cover-dark{display:block!important}
html[data-theme="dark"] .hvo-blog-card-media img.hvo-cover-dark{background:#232323}
html[data-theme="dark"] img.hvo-cover-img,html[data-theme="dark"] .hvo-related-media img{filter:none!important}
html[data-theme="dark"] .hvo-blog-card-media,html[data-theme="dark"] .hvo-related-media{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
/* Editorial bits (TOC bar, links, comparison table, figures, notes, FAQ, author box). */
html[data-theme="dark"] .hvo-article-toc .hvo-toc-bar{background:#d6fd70}
html[data-theme="dark"] .hvo-article-toc a.is-active{color:#fff}
html[data-theme="dark"] .hvo-compare-table{color:var(--text-color--text-primary,#fff)}
html[data-theme="dark"] .hvo-compare-table th,html[data-theme="dark"] .hvo-compare-table td{color:var(--text-color--text-primary,#fff);border-bottom-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hvo-compare-table thead th{color:var(--text-color--text-secondary,#b5b5b5);border-bottom-color:rgba(255,255,255,.5)}
html[data-theme="dark"] .hvo-compare-table td:last-child{background:#232323}
html[data-theme="dark"] .hvo-compare-table tr{border-bottom-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hvo-compare-table td::before,html[data-theme="dark"] .hvo-compare-source,html[data-theme="dark"] .hvo-article-figure figcaption{color:var(--text-color--text-secondary,#b5b5b5)}
html[data-theme="dark"] .hvo-note{border-color:rgba(255,255,255,.25)}
html[data-theme="dark"] .hvo-article-body blockquote{border-left-color:#d6fd70;color:var(--text-color--text-primary,#fff)}
html[data-theme="dark"] .hvo-article-body code{background:#232323;color:#fff}
html[data-theme="dark"] .hvo-article-body a{color:#fff}
/* Post header: normal gap between the byline and the quick answer (the post hero picture is no longer shown). */
.hvo-article-layout{margin-top:0!important;padding-top:3rem!important}
@media (max-width:767px){.hvo-article-layout{padding-top:2rem!important}}
/* Topic label above the title: readable in light mode (AA). */
html:not([data-theme="dark"]) .hvo-article-hero .hvo-kicker{color:#555!important}
/* Dark mode: every list/related card gets a visible edge (black covers otherwise melt into the page). */
html[data-theme="dark"] .hvo-blog-card-media,html[data-theme="dark"] .hvo-related-media{box-shadow:none;border:1px solid rgba(255,255,255,.12)}
/* Phones: smaller theme button tucked in the corner, and room under the last line so it never covers text. */
@media (max-width:599px){.theme-toggle{width:40px!important;height:40px!important;right:12px!important;bottom:12px!important}.theme-toggle svg{width:18px;height:18px}footer.footer{padding-bottom:64px}}
/* Sticky header: mostly solid so lime covers scrolling underneath don't tint the glass. */
html[data-theme="dark"] .navbar::before{background:rgba(17,17,17,.97)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not([data-theme="dark"]) .navbar::before{background:rgba(255,255,255,.94)!important}
/* Sticky header on blog pages: one solid strip in both themes, nothing shows through. */
.navbar,.navbar::before{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-theme="dark"] .navbar,html[data-theme="dark"] .navbar::before{background:#131313!important}