/* Blog index only. Shared card styling lives in article-card.css. */
.blog-main {
  /* Horizontal padding and max-width come from the landing's .section. */
  padding-top: calc(var(--header-band-height) + 42px);
  padding-bottom: 100px;
}
.breadcrumbs { display:flex; align-items:center; gap:12px; margin-bottom:33px; font-size:12px; color:#969ca7; }
.breadcrumbs a { color:#777d89; text-underline-offset:4px; }
.breadcrumbs a:hover { text-decoration:underline; }
.blog-intro h1 { font-size:60px; letter-spacing:-2.7px; line-height:1.12; margin-bottom:22px; }
.blog-intro h1 span { color:#905bff; }
.blog-lead { color:#777d89; font-size:16px; line-height:1.75; max-width:740px; }
.blog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:35px 0 32px; padding-bottom:22px; border-bottom:1px solid #dce3eb; }
.blog-modes { display:flex; align-items:center; gap:9px; }
.blog-mode { display:inline-flex; justify-content:center; align-items:center; gap:9px; padding:11px 19px; border-radius:13px; border:1px solid transparent; background:transparent; color:#777d89; font-size:14px; line-height:22px; white-space:nowrap; }
.blog-mode svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.blog-mode.is-current { background:#191c26; color:#fff; }
.blog-mode.is-current svg { color:#b99bff; }
.blog-mode:not(.is-current) { border-color:#dfe5ec; }
.blog-mode[aria-disabled="true"] { cursor:default; }
.blog-mode.is-current:hover { border-color:#905bff; }
.blog-mode:not(.is-current):hover { border-color:#bba2ec; color:#7143cb; background:#ffffff80; }
.blog-search { display:flex; align-items:center; flex:none; width:285px; height:44px; border:1px solid #d7dee8; border-radius:13px; background:#ffffff99; overflow:hidden; }
.blog-search:focus-within { border-color:#905bff; box-shadow:0 0 0 3px #905bff12; }
.blog-search input { width:100%; min-width:0; padding:0 0 0 15px; border:0; background:transparent; color:#191c26; font-size:13px; outline:none; }
.blog-search input::placeholder { color:#8e93a0; }
.blog-search button { display:grid; place-items:center; padding:0; width:42px; height:42px; flex:none; background:transparent; color:#8051d8; }
.blog-search button:hover { color:#191c26; }
.blog-search svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.search-status { color:#777d89; font-size:14px; margin-bottom:24px; }
.breadcrumbs { flex-wrap:wrap; }
.publication-list { padding:0; }
@media(max-width:1100px) {
  .blog-intro h1 { font-size:52px; }
  .blog-toolbar { flex-wrap:wrap; gap:16px; }
  .blog-search { width:100%; max-width:440px; }
}
@media(max-width:600px) {
  .blog-main { padding-top:calc(var(--header-band-height) + 25px); padding-bottom:65px; }
  .breadcrumbs { margin-bottom:26px; font-size:11px; }
  .blog-intro h1 { font-size:38px; letter-spacing:-1.7px; line-height:1.16; max-width:360px; margin-bottom:18px; }
  .blog-lead { font-size:14px; line-height:1.8; }
  .blog-toolbar { display:block; margin:26px 0 24px; padding-bottom:22px; }
  .blog-modes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .blog-mode { padding:10px 9px; font-size:12px; gap:7px; border-radius:12px; }
  .blog-mode svg { width:16px; height:16px; }
}
@media(max-width:350px) {
  .blog-intro h1 { font-size:34px; }
  .blog-mode { font-size:11px; gap:5px; }
}