/* Blog, article and UI states */
.bx-blog { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-8) 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; }
.bx-blog > * { min-width: 0; }
.bx-stackc { display: grid; gap: var(--space-8); align-content: start; }
.bx-featured { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); color: var(--ink) !important; transition: box-shadow .2s ease, border-color .2s ease; }
.bx-featured:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.bx-featured .bs-cover { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-inline-end: 1px solid var(--line); }
.bx-featured .bs-cover .bs-wm { width: 80%; }
.bx-featured-body { padding: var(--space-8); display: grid; gap: var(--space-3); align-content: center; }
.bx-featured h2 { font: 700 30px/44px var(--font-display); margin: 0; }
.bx-featured p { margin: 0; color: var(--ink-muted); }
.bx-byline { display: flex; align-items: center; gap: var(--space-3); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); flex-wrap: wrap; }
.bx-byline .bx-avatar { width: 32px; height: 32px; }
.bx-byline .bx-avatar > span { font-size: 11px; }
.bx-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.bx-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bx-tags a { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font: 500 13px/20px var(--font-sans); color: var(--ink) !important; min-height: 32px; display: inline-flex; align-items: center; }
.bx-tags a:hover { background: var(--surface-raised); }
.bx-pop { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bx-pop li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.bx-pop i { font: 700 22px/28px var(--font-display); color: var(--accent-text); font-style: normal; }
.bx-pop a { color: var(--ink) !important; font: 600 14px/22px var(--font-sans); }
.bx-pop small { display: block; color: var(--ink-subtle); font: 500 12px/20px var(--font-sans); }
.bx-catlist { list-style: none; margin: 0; padding: 0; display: grid; }
.bx-catlist a { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink) !important; font: 500 14px/22px var(--font-sans); min-height: 44px; align-items: center; }
.bx-catlist li:first-child a { border-top: 0; }

/* Article */
.bx-articlehead { max-width: 900px; margin: 0 auto; padding: var(--space-12) var(--space-8) 0; display: grid; gap: var(--space-4); }
.bx-articlehead h1 { font: 700 44px/62px var(--font-display); margin: 0; }
.bx-articlecover { max-width: var(--container-max); margin: var(--space-8) auto 0; padding: 0 var(--space-8); }
.bx-articlecover .bs-cover { aspect-ratio: 21 / 8; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bx-articlecover .bs-cover .bs-cover-code { font-size: 72px; }
.bx-article { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-8) 0; display: grid; grid-template-columns: minmax(0, 740px) 300px; justify-content: space-between; gap: var(--space-12); align-items: start; }
.bx-article > * { min-width: 0; }
.bx-prose { font: 400 18px/34px var(--font-sans); color: var(--ink); }
.bx-prose h2 { font: 700 26px/38px var(--font-display); margin: var(--space-12) 0 var(--space-4); scroll-margin-top: 100px; }
.bx-prose h2:first-child { margin-top: 0; }
.bx-prose p { margin: 0 0 var(--space-5, 20px); }
.bx-prose ul { margin: 0 0 var(--space-5, 20px); padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
.bx-prose .lat { direction: ltr; unicode-bidi: isolate; font-family: var(--font-sans); }
.bx-callout { border: 1px solid var(--line-strong); background: var(--tint-lime); color: var(--on-tint-lime); border-radius: var(--radius-md); padding: var(--space-5, 20px) var(--space-6); margin: var(--space-8) 0; font: 500 16px/28px var(--font-sans); }
.bx-callout b { display: block; margin-bottom: 4px; font-family: var(--font-display); }
.bx-cycle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0 var(--space-2); }
.bx-cycle > div { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); display: grid; gap: 4px; font: 400 14px/24px var(--font-sans); color: var(--ink-muted); }
.bx-cycle i { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient); color: var(--on-brand); display: grid; place-items: center; font: 700 13px/1 var(--font-display); font-style: normal; }
.bx-cycle b { color: var(--ink); font: 600 16px/26px var(--font-display); }
.bx-cycle .t { color: var(--accent-text); font-weight: 600; direction: ltr; text-align: right; }
.bx-figcap { font: 400 13px/22px var(--font-sans); color: var(--ink-subtle); margin: 0 0 var(--space-6); }
.bx-toc { position: sticky; top: calc(var(--header-height) + 24px); display: grid; gap: var(--space-6); }
.bx-toc nav { display: grid; gap: 2px; }
.bx-toc nav a { display: block; padding: 8px var(--space-3); border-radius: var(--radius-sm); color: var(--ink-muted) !important; font: 500 14px/22px var(--font-sans); }
.bx-toc nav a[aria-current="true"] { color: var(--accent-text) !important; background: var(--tint-lime); }
.bx-toc h2 { font: 600 14px/22px var(--font-display); margin: 0 0 var(--space-2); color: var(--ink-subtle); }
.bx-authorbox { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin-top: var(--space-12); }
.bx-authorbox .bs-inst-photo { flex: none; width: 64px; height: 64px; }
.bx-authorbox b { display: block; font: 600 16px/26px var(--font-display); }
.bx-authorbox p { margin: 2px 0 0; color: var(--ink-muted); font: 400 14px/24px var(--font-sans); }
.bx-share { display: flex; gap: var(--space-2); }

/* UI states */
.bx-states { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-6); align-items: start; }
.bx-state { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; display: grid; }
.bx-state > header { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface-raised); font: 600 13px/22px var(--font-sans); color: var(--ink-muted); }
.bx-state-body { padding: var(--space-8) var(--space-6); display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.bx-state-body h3 { font: 600 20px/30px var(--font-display); margin: 0; }
.bx-state-body p { margin: 0; color: var(--ink-muted); max-width: 30em; }
.bx-state-ic { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--tint-lime); color: var(--on-tint-lime); }
.bx-state-ic.err { background: var(--surface-raised); color: var(--danger); }
.bx-state-ic.lock { background: var(--surface-raised); color: var(--warning); }
.bx-state-ic.ok { background: var(--tint-lime); color: var(--success); }
.bx-skel { display: grid; gap: var(--space-3); padding: var(--space-6); }
.bx-skel i { display: block; border-radius: var(--radius-sm); background: var(--surface-raised); height: 14px; }
.bx-skel i.cover { height: 120px; border-radius: var(--radius-md); }
.bx-skel i.w60 { width: 60%; } .bx-skel i.w80 { width: 80%; } .bx-skel i.w40 { width: 40%; }
.bx-fielderr .bx-input { border-color: var(--danger); }
.bx-err-msg { display: flex; gap: 6px; align-items: center; font: 500 13px/20px var(--font-sans); color: var(--danger); }
.bx-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--warning); background: var(--surface-raised); text-align: start; font: 400 14px/24px var(--font-sans); }
.bx-banner b { display: block; font: 600 14px/22px var(--font-sans); }

@media (max-width: 1100px) {
  .bx-blog, .bx-article { grid-template-columns: 1fr; }
  .bx-toc { position: static; }
  .bx-featured { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .bx-blog, .bx-article, .bx-articlehead, .bx-articlecover, .bx-states { padding-inline: var(--space-4); }
  .bx-articlehead h1 { font-size: 30px; line-height: 44px; }
  .bx-cycle { grid-template-columns: 1fr; }
  .bx-prose { font-size: 17px; line-height: 32px; }
}