/* =========================================================
   AISEE Blog — public pages (loaded after the site's main.css)
   1. listing hero, search, category chips   2. cards, grid, pager, sidebar
   3. article header, layout, table of contents, share, author, CTA
   4. ARTICLE BODY (.art__body) — also styles the editor in the Blog Admin, so it has no dependency on main.css
   ========================================================= */
.bi { display: inline-block; vertical-align: -0.15em; flex: none; }

/* ---------- 1. hero ---------- */
.bhero { padding: 22px 0 26px; background: linear-gradient(180deg, #f2f6ff 0%, #fff 100%); border-bottom: 1px solid var(--line); }
.bhero .crumbs { margin-bottom: 20px; }
.bhero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.bhero__copy { max-width: 720px; }
.bhero__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.bhero h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.035em; line-height: 1.12; margin: 0 0 10px; }
.bhero h1 small { font-size: .45em; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.bhero__lead { font-size: 17px; color: var(--body); margin: 0; line-height: 1.6; }
.bhero__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 12px; box-shadow: var(--shadow); }
.bsearch { position: relative; display: flex; }
.bsearch input { width: 100%; height: 48px; padding: 0 52px 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); box-shadow: var(--shadow-sm); }
.bsearch input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.bsearch button { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.bsearch button:hover { background: var(--blue-hover); }
.bsearch--hero { width: min(400px, 100%); }
.bchips { display: flex; gap: 8px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bchips::-webkit-scrollbar { display: none; }
.bchips a { flex: none; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--body); font-weight: 600; font-size: 14px; white-space: nowrap; transition: .2s var(--ease); }
.bchips a:hover { border-color: var(--blue); color: var(--blue); }
.bchips a.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- 2. listing ---------- */
.blist { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding-top: 34px; padding-bottom: 64px; align-items: start; }
.bsec-t { font-size: 22px; margin: 0 0 18px; }
.blead { margin-bottom: 38px; }
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.bgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bcard__img { display: block; aspect-ratio: 16 / 9; background: var(--blue-soft); overflow: hidden; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bcard:hover .bcard__img img { transform: scale(1.04); }
.bcard__ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 54px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #305eff, #7c5cf6); }
.bcard__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.bcard__cat { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.bcard__t { font-size: 19px; line-height: 1.35; margin: 0; letter-spacing: -.015em; }
.bcard__t a { color: var(--ink); }
.bcard__t a:hover { color: var(--blue); }
.bcard__x { margin: 0; color: var(--body); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted); }
.bcard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.bcard__meta span:first-child { color: var(--ink); font-weight: 600; }
.bcard--lg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bcard--lg .bcard__img { aspect-ratio: 4 / 3; align-self: center; }
.bcard--lg .bcard__body { padding: 30px; justify-content: center; gap: 12px; }
.bcard--lg .bcard__t { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; line-height: 1.2; }
.bcard--lg .bcard__x { -webkit-line-clamp: 4; font-size: 16px; }
.bcard--lg .bcard__meta { margin-top: 6px; }
.bcard--sm { flex-direction: row; border: 0; border-radius: 0; background: none; gap: 12px; }
.bcard--sm:hover { transform: none; box-shadow: none; }
.bcard--sm .bcard__img { width: 92px; aspect-ratio: 1; border-radius: 10px; flex: none; }
.bcard--sm .bcard__body { padding: 0; }
.bcard--sm .bcard__t { font-size: 15px; }
.bempty { text-align: center; padding: 56px 20px; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--muted); }
.bempty h2 { font-size: 22px; margin: 12px 0 6px; }
.bpager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.bpager__a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; }
.bpager__a:hover { border-color: var(--blue); color: var(--blue); }
.bpager__a.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.bpager__gap { align-self: center; color: var(--muted); padding: 0 4px; }
.bside { display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 20px); }
.bbox { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.bbox__t { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; font-weight: 700; }
.bcats { list-style: none; margin: 0; padding: 0; }
.bcats a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.bcats li:last-child a { border-bottom: 0; }
.bcats a:hover, .bcats a[aria-current] { color: var(--blue); }
.bcats em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg-soft); border-radius: 999px; padding: 2px 9px; }
.bpop { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bpop li { display: flex; gap: 12px; align-items: flex-start; }
.bpop__n { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: 13px; }
.bpop a { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.bpop a:hover { color: var(--blue); }
.bpop small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-top: 3px; }
.bcta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 24px 26px; margin: 34px 0; border-radius: var(--radius-lg); color: #fff; background: var(--grad-dark); position: relative; overflow: hidden; }
.bcta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 209, 255, .35), transparent); pointer-events: none; }
.bcta b { display: block; font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; }
.bcta p { margin: 0; color: #c8d4f2; font-size: 15px; max-width: 520px; }
.bcta .btn { position: relative; z-index: 1; }
.bcta--side { display: block; margin: 0; padding: 22px; }
.bcta--side b { font-size: 18px; }
.bcta--side p { font-size: 14px; margin: 6px 0 16px; }

/* ---------- 3. article ---------- */
.bprogress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1000; pointer-events: none; }
.bprogress span { display: block; height: 100%; width: 0; background: var(--grad-blue); transition: width .1s linear; }
.bpreview { position: sticky; top: 0; z-index: 999; background: #fff4dc; color: #8a5a00; text-align: center; font-weight: 600; font-size: 14px; padding: 9px 16px; border-bottom: 1px solid #f3dca8; }
.art__head { padding: 22px 0 28px; background: linear-gradient(180deg, #f2f6ff 0%, #fff 100%); }
.art__narrow { max-width: 900px; }
.art__head .crumbs { margin-bottom: 22px; }
.art__head .crumbs li:last-child span { display: inline-block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.art__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.art__cats a { padding: 5px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.art__title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; letter-spacing: -.04em; margin: 0 0 16px; font-weight: 700; }
.art__lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--body); margin: 0 0 22px; }
.art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 14px; color: var(--muted); }
.art__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.art__by { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.art__by img, .art__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.art__by small { display: block; font-size: 12px; color: var(--muted); line-height: 1.2; }
.art__by b { font-size: 14.5px; }
.art__av { display: grid; place-items: center; background: linear-gradient(135deg, #305eff, #7c5cf6); color: #fff; font-weight: 700; flex: none; }
.art__av--lg { width: 64px; height: 64px; font-size: 24px; }
.art__hero { margin: 4px auto 0; max-width: 1100px; }
.art__hero img { width: 100%; max-height: 560px; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-lg); display: block; }
.art__layout { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: center; gap: 56px; padding-top: 40px; padding-bottom: 50px; }
.art__layout--solo { grid-template-columns: minmax(0, 760px); }
.art__side { position: relative; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
.toc__t { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 0 0 12px; font: 700 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: default; text-align: left; }
.toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc__list a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--body); font-size: 14px; line-height: 1.45; }
.toc__list a:hover { color: var(--blue); }
.toc__list a.is-on { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }
.toc__l3 a { padding-left: 28px; font-size: 13.5px; }
.art__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 36px 0 0; color: var(--muted); }
.art__tags a { padding: 5px 12px; border-radius: 8px; background: var(--bg-soft); color: var(--body); font-size: 14px; font-weight: 500; }
.art__tags a:hover { background: var(--blue-soft); color: var(--blue); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.share__t { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); margin-right: auto; }
.share__a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: .2s var(--ease); }
.share__a:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share__a--wa:hover { background: #25d366; } .share__a--fb:hover { background: #1877f2; } .share__a--x:hover { background: #000; }
.share__a--in:hover { background: #0a66c2; } .share__a--tg:hover { background: #229ed9; } .share__a--copy:hover, .share__a--native:hover { background: var(--blue); }
.share__a.is-done { background: #12a150; color: #fff; }
.abox { display: flex; gap: 18px; align-items: flex-start; padding: 24px; margin-top: 34px; border-radius: var(--radius-lg); background: var(--bg-soft); }
.abox img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.abox small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.abox b { display: block; font-size: 18px; margin: 2px 0 6px; }
.abox b a { color: var(--ink); }
.abox p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.abox__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.pnav__a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); transition: .2s var(--ease); }
.pnav__a:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.pnav__a small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.pnav__a b { font-size: 15.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pnav__a--next { text-align: right; }
.pnav__a--next small { justify-content: flex-end; }
.brelated { padding: 54px 0 70px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.brelated__all { text-align: center; margin: 34px 0 0; }
.brelated__all .btn { display: inline-flex; align-items: center; gap: 8px; }
.btop { position: fixed; right: 20px; bottom: 24px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); }
.btop[hidden] { display: none; }

/* ---------- 4. ARTICLE BODY (public page + Blog Admin editor) ---------- */
.art__body { --ab-blue: var(--blue, #305eff); --ab-ink: var(--ink, #0f1d36); --ab-body: var(--body, #3b4a63); --ab-muted: var(--muted, #64748b); --ab-line: var(--line, #e3e8f0); --ab-soft: var(--bg-soft, #f3f6fa);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; line-height: 1.8; color: var(--ab-body); overflow-wrap: break-word; }
.art__body > :first-child { margin-top: 0; }
.art__body p { margin: 0 0 1.3em; }
.art__body h2, .art__body h3, .art__body h4, .art__body h5, .art__body h6 { color: var(--ab-ink); letter-spacing: -.025em; line-height: 1.3; font-weight: 700; scroll-margin-top: calc(var(--header-h, 92px) + 24px); }
.art__body h1 { font-size: 2em; color: var(--ab-ink); line-height: 1.2; }
.art__body h2 { font-size: 1.6em; margin: 2em 0 .7em; }
.art__body h3 { font-size: 1.3em; margin: 1.8em 0 .6em; }
.art__body h4 { font-size: 1.12em; margin: 1.6em 0 .5em; }
.art__body h5, .art__body h6 { font-size: 1em; margin: 1.4em 0 .5em; }
.art__body a { color: var(--ab-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art__body a:hover { text-decoration-thickness: 2px; }
.art__body strong, .art__body b { color: var(--ab-ink); font-weight: 650; }
.art__body ul, .art__body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.art__body li { margin: .35em 0; padding-left: .2em; }
.art__body li::marker { color: var(--ab-blue); font-weight: 600; }
.art__body blockquote { margin: 1.8em 0; padding: .4em 0 .4em 1.3em; border-left: 4px solid var(--ab-blue); font-size: 1.12em; font-style: italic; color: var(--ab-ink); }
.art__body blockquote p:last-child { margin-bottom: 0; }
.art__body img { max-width: 100%; height: auto; border-radius: 12px; }
.art__body figure { margin: 1.8em 0; }
.art__body figure.image { display: table; max-width: 100%; }
.art__body figure.image.align-center, .art__body figure[style*="margin-left: auto"] { margin-left: auto; margin-right: auto; }
.art__body figure img { display: block; margin: 0 auto; }
.art__body figcaption { display: table-caption; caption-side: bottom; text-align: center; font-size: .82em; color: var(--ab-muted); padding-top: .7em; line-height: 1.5; }
.art__body .img-wide { width: 100%; }
.art__body .img-left { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.art__body .img-right { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.art__body .img-soft { border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 29, 54, .14); }
.art__body hr { border: 0; height: 1px; background: var(--ab-line); margin: 2.4em 0; clear: both; }
.art__body mark { background: #fff1a8; color: inherit; padding: 0 .15em; border-radius: 3px; }
.art__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--ab-soft); padding: .15em .4em; border-radius: 5px; color: #b4235a; }
.art__body pre { background: #0f1d36; color: #e6edf9; padding: 18px 20px; border-radius: 12px; overflow-x: auto; font-size: .82em; line-height: 1.65; margin: 1.6em 0; }
.art__body pre code { background: none; color: inherit; padding: 0; font-size: 1em; }
.art__body table { width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.55; margin: 0; }
.art__body th, .art__body td { padding: 11px 14px; border: 1px solid var(--ab-line); text-align: left; vertical-align: top; }
.art__body th, .art__body thead td { background: #f2f6ff; color: var(--ab-ink); font-weight: 650; }
.art__body table caption { caption-side: bottom; font-size: .85em; color: var(--ab-muted); padding-top: 8px; }
.art__body .tbl-striped tbody tr:nth-child(even) td { background: #fafbfe; }
.art__table { overflow-x: auto; margin: 1.6em 0; border-radius: 12px; border: 1px solid var(--ab-line); -webkit-overflow-scrolling: touch; }
.art__table table { border: 0; }
.art__table th, .art__table td { border-width: 0 0 1px 1px; }
.art__table tr > :first-child { border-left: 0; }
.art__table tr:last-child td { border-bottom: 0; }
.art__embed, .art__body .mce-preview-object { position: relative; aspect-ratio: 16 / 9; margin: 1.8em 0; border-radius: 12px; overflow: hidden; background: #000; }
.art__embed iframe, .art__body .mce-preview-object iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.art__body video, .art__body audio { width: 100%; margin: 1.4em 0; border-radius: 12px; }
.art__body audio { border-radius: 999px; }
.art__body details { margin: 1em 0; border: 1px solid var(--ab-line); border-radius: 12px; padding: 0 18px; background: #fff; }
.art__body details > summary { cursor: pointer; padding: 14px 0; font-weight: 650; color: var(--ab-ink); list-style-position: inside; }
.art__body details[open] > summary { border-bottom: 1px solid var(--ab-line); margin-bottom: 12px; }
.art__body .lead { font-size: 1.15em; color: var(--ab-ink); }
.art__body .callout { display: block; margin: 1.6em 0; padding: 18px 20px 18px 22px; border: 0; border-left: 4px solid; border-radius: 12px; color: var(--ab-body); font-size: .95em; line-height: 1.7; } /* main.css has its own .callout */
.art__body .callout p { margin-bottom: .7em; }
.art__body .callout > :last-child { margin-bottom: 0; }
.art__body .callout--info { background: #eef3ff; border-color: #305eff; }
.art__body .callout--tip { background: #e9f8ef; border-color: #12a150; }
.art__body .callout--warn { background: #fff6e2; border-color: #e0a106; }
.art__body .callout--key { background: #f3efff; border-color: #7c5cf6; }
.art__body .art-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; background: var(--ab-blue); color: #fff; font-weight: 600; text-decoration: none; }
.art__body .art-btn:hover { background: #1f47e0; }
.art__body .art-file { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 46px; border: 1px solid var(--ab-line); border-radius: 12px; text-decoration: none; color: var(--ab-ink); font-weight: 600; font-size: .92em; position: relative; background: #fff; }
.art__body .art-file::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 24px; margin-top: -12px; border-radius: 3px; background: var(--ab-blue); clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%); }
.art__body .art-file:hover { border-color: var(--ab-blue); }
.art__body::after { content: ""; display: table; clear: both; }
/* the editor iframe */
.art-editor { background: #fff; }
.art-editor .mce-accordion summary { cursor: text; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .blist { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
  .art__layout { grid-template-columns: 210px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 960px) {
  .blist { grid-template-columns: 1fr; }
  .bside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bside .bsearch { grid-column: 1 / -1; }
  .bgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcard--lg { grid-template-columns: 1fr; }
  .bcard--lg .bcard__img { min-height: 0; aspect-ratio: 16 / 9; }
  .bcard--lg .bcard__body { padding: 22px; }
  .art__layout, .art__layout--solo { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 26px; }
  .toc { position: static; max-height: none; background: var(--bg-soft); border-radius: 14px; padding: 14px 18px; margin-bottom: 26px; }
  .toc__t { cursor: pointer; padding: 0; justify-content: flex-start; }
  .toc__t::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .toc.is-closed .toc__t::after { transform: rotate(-45deg); }
  .toc__list { margin-top: 12px; }
  .toc.is-closed .toc__list { display: none; }
}
@media (max-width: 640px) {
  .bhero { padding: 16px 0 20px; }
  .bhero__row { gap: 16px; }
  .bsearch--hero { width: 100%; }
  .bchips { margin-top: 16px; margin-right: -16px; padding-right: 16px; }
  .blist { padding-top: 24px; gap: 34px; }
  .bgrid, .bgrid--3 { grid-template-columns: 1fr; gap: 18px; }
  .bside { grid-template-columns: 1fr; }
  .bcard__t { font-size: 18px; }
  .art__head { padding: 14px 0 20px; }
  .art__head .crumbs li:last-child { display: none; }
  .art__hero { padding: 0; }
  .art__hero img { border-radius: 0; max-height: 300px; box-shadow: none; }
  .art__body { font-size: 17px; line-height: 1.75; }
  .art__body h2 { font-size: 1.42em; }
  .art__body h3 { font-size: 1.2em; }
  .art__body .img-left, .art__body .img-right { float: none; max-width: 100%; margin: 1.4em 0; }
  .share__t { width: 100%; margin-bottom: 4px; }
  .abox { flex-direction: column; padding: 20px; }
  .pnav { grid-template-columns: 1fr; }
  .pnav__a--next { text-align: left; }
  .pnav__a--next small { justify-content: flex-start; }
  .bcta { padding: 22px; }
  .bcta .btn { width: 100%; justify-content: center; }
  .btop { bottom: 96px; right: 14px; } /* above the site's floating mobile bar */
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .bcard__img img, .share__a, .bprogress span { transition: none; }
}
@media print {
  .header, .strip, .footer, .bprogress, .share, .bcta, .brelated, .pnav, .art__side, .btop, .crumbs { display: none !important; }
  .art__layout { display: block; }
}

/* =========================================================
   5. REFRESH: hero, smart search, image cards, article header
   ========================================================= */
.bhero { position: relative; overflow: hidden; padding: 24px 0 30px;
  background: radial-gradient(900px 380px at 88% -12%, rgba(48, 94, 255, .14), transparent 60%),
              radial-gradient(700px 300px at -8% 112%, rgba(124, 92, 246, .10), transparent 60%),
              linear-gradient(180deg, #f4f7ff 0%, #fff 100%); }
.bhero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(48, 94, 255, .12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.bhero .container { position: relative; }
.bhero__row { align-items: center; gap: 40px; }
.bhero__copy { flex: 1 1 460px; }
.bhero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); font-size: 12px; letter-spacing: .06em; }
.bhero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(240, 124, 27, .16); }
.bhero h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin: 14px 0 10px; }
.bhero--home h1 { background: linear-gradient(92deg, #0f1d36 0%, #305eff 62%, #7c5cf6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.bhero__lead { max-width: 560px; }
.bhero__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; margin: 20px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.bhero__stats li { padding-right: 18px; }
.bhero__stats li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.bhero__stats b { color: var(--ink); font-weight: 700; }
.bchips a em { font-style: normal; font-size: 12px; opacity: .65; margin-left: 3px; }

/* search card with live suggestions */
.bsearch--hero { position: relative; display: block; flex: 1 1 400px; max-width: 470px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px -22px rgba(15, 29, 54, .3); }
.bsearch__label { display: block; margin: 0 0 10px; font-weight: 700; font-size: 14px; color: var(--ink); }
.bsearch__box { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 14px; background: #f8faff; transition: border-color .2s, box-shadow .2s, background .2s; }
.bsearch__box:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
.bsearch__ico { display: grid; place-items: center; padding-left: 14px; color: var(--muted); }
.bsearch--hero input { flex: 1; min-width: 0; height: 50px; padding: 0 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 15px; }
.bsearch--hero input:focus { box-shadow: none; outline: none; }
.bsearch--hero input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.bsearch--hero button { position: static; }
.bsearch__clear { flex: none; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: #e8edf7 !important; color: var(--body) !important; }
.bsearch__clear:hover { background: #dbe2f0 !important; }
.bsearch__go { flex: none; width: auto !important; height: 40px !important; margin-right: 5px; padding: 0 16px; border-radius: 10px !important; font: 600 14px var(--font); }
.bsearch__hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.bsearch__hint a { display: inline-block; margin: 3px 4px 0 2px; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--body); font-weight: 500; }
.bsearch__hint a:hover { background: var(--blue-soft); color: var(--blue); }
.bsuggest { position: absolute; left: 16px; right: 16px; z-index: 40; list-style: none; margin: 6px 0 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); max-height: 430px; overflow-y: auto; }
.bsuggest a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); }
.bsuggest li.is-active a, .bsuggest a:hover { background: var(--blue-soft); }
.bsuggest__img { flex: none; width: 54px; height: 40px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #0a2463, #305eff); }
.bsuggest__img img { width: 100%; height: 100%; object-fit: cover; }
.bsuggest__txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.bsuggest__txt small { color: var(--muted); font-size: 12px; }
.bsuggest mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 3px; }
.bsuggest__topic { font-weight: 600; }
.bsuggest__tag { padding: 3px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bsuggest__all { justify-content: center; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px !important; color: var(--blue) !important; font-weight: 600; font-size: 14px; }
.bsuggest__none { padding: 12px; color: var(--muted); font-size: 14px; }

/* cards: every featured image (imported or uploaded later) gets the same look */
.bcard__img { position: relative; aspect-ratio: 16 / 10; background: #0a2463; }
.bcard__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 15, 44, .05) 35%, rgba(5, 15, 44, .6) 100%); transition: opacity .3s var(--ease); }
.bcard:hover .bcard__img::after { opacity: .75; }
.bcard__img img { filter: saturate(1.08) contrast(1.03); }
.bcard__pill { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .93); color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(5, 15, 44, .18); }
.bcard__time { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(5, 15, 44, .55); color: #fff; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bcard__ph { flex-direction: column; gap: 10px; font-size: inherit; background: radial-gradient(circle at 18% 22%, rgba(79, 209, 255, .45), transparent 45%), radial-gradient(circle at 86% 82%, rgba(124, 92, 246, .55), transparent 50%), linear-gradient(135deg, #0a2463, #305eff); }
.bcard__ph b { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.bcard__meta { align-items: center; }
.bcard__more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--blue) !important; font-weight: 600 !important; }
.bcard__more .bi { transition: transform .2s var(--ease); }
.bcard:hover .bcard__more .bi { transform: translateX(3px); }
.bcard--lg .bcard__img { aspect-ratio: 4 / 3; }
.bcard--lg .bcard__pill { left: 18px; top: 18px; }
.bcard--sm .bcard__img::after, .bcard--sm .bcard__time { display: none; }

/* article header: text + photo, same width as the article below */
.art__head { position: relative; overflow: hidden; padding: 22px 0 42px; border-bottom: 1px solid var(--line);
  background: radial-gradient(800px 360px at 92% -20%, rgba(48, 94, 255, .12), transparent 60%), linear-gradient(180deg, #f4f7ff, #fff); }
.art__wrap { max-width: 1114px; }
.art__headgrid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 46px; align-items: center; }
.art__head--noimg .art__headgrid { grid-template-columns: minmax(0, 860px); }
.art__title { font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.15; }
.art__lead { font-size: 17px; margin-bottom: 22px; }
.art__meta { gap: 14px 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.art__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.art__facts li { display: inline-flex; align-items: center; gap: 6px; }
.art__media { position: relative; margin: 0; isolation: isolate; }
.art__media::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; z-index: -1; border-radius: 24px; background: linear-gradient(135deg, rgba(48, 94, 255, .22), rgba(124, 92, 246, .22)); }
.art__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-lg); }
.art__layout { padding-top: 46px; }

@media (max-width: 960px) {
  .bhero__row { gap: 24px; }
  .bsearch--hero { max-width: none; }
  .art__headgrid { grid-template-columns: 1fr; gap: 22px; }
  .art__media { order: -1; }
  .art__media::before { display: none; }
  .art__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .bhero__stats { font-size: 13px; }
  .bhero__stats li { padding-right: 12px; }
  .bhero__stats li + li { padding-left: 12px; }
  .bsearch--hero { padding: 12px; border-radius: 16px; }
  .bsearch__go { display: none; }
  .bsuggest { left: 12px; right: 12px; }
  .art__head { padding-bottom: 26px; }
  .art__media img { border-radius: 14px; }
  .art__meta { gap: 12px; }
}
.bhero { overflow: visible; z-index: 5; } /* let the search suggestions drop over the list below */
.bchips__tag { background: rgba(255, 255, 255, .7) !important; }
@media (max-width: 640px) { .bsearch .bsearch__go { display: none; } .bsearch__box { padding-right: 6px; } }