/* Reading metrics from the original ArticleDetail.vue; isolated from listing/card UI. */
body.single-post { background:#fafafa; }
.bs-article-editorial { background:#fafafa; padding-bottom:64px; }
.bs-article-editorial .bs-reading { width:min(720px,calc(100% - 40px)); }
.bs-article-editorial .bs-article-crumb { display:flex; gap:9px; padding-top:18px; font-size:12.5px; line-height:1.5; color:#6b6b67; }
.bs-article-crumb a:hover { color:#141414; text-decoration:underline; text-underline-offset:3px; }
.bs-article-editorial .bs-article-head { padding:clamp(30px,5vw,64px) 0 4px; text-align:center; }
.bs-article-editorial .bs-article-head h1 { color:#141414; font-size:clamp(28px,4vw,46px); line-height:1.22; font-weight:900; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance; }
.bs-article-editorial .bs-deck { max-width:620px; margin:0 auto 18px; font-size:17px; line-height:1.65; color:#5f5f5b; }
.bs-article-tags { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:0 0 16px; }
.bs-article-tags>span { font-size:12px; color:#585858; margin-right:4px; }
.bs-article-tags a { font-size:12px; color:#585858; border:1px solid #e4e4e4; padding:4px 12px; transition:color .15s,border-color .15s; }
.bs-article-tags a:hover { color:#141414; border-color:#141414; }
.bs-article-editorial .bs-byline { flex-wrap:wrap; justify-content:center; gap:16px; font:11.5px/1.65 "Helvetica Neue",Arial,sans-serif; color:#6b6b67; letter-spacing:.06em; text-transform:uppercase; margin:0; }
.bs-article-editorial .bs-byline>* { position:relative; }
.bs-article-editorial .bs-byline>*+*::before { content:"·"; position:absolute; left:-10px; }
.bs-article-editorial .bs-article-cover { margin:24px auto 4px; }
.bs-article-editorial .bs-article-cover img { width:100%; max-height:none; border-radius:0; }
.bs-article-toc { width:min(680px,calc(100% - 40px)); margin:28px auto 0; padding:20px 22px; background:#f2f2f2; border-top:2px solid #141414; }
.bs-article-toc>p { font-size:10px; font-weight:700; letter-spacing:.16em; color:#5d5d59; margin:0 0 11px; }
/* Headings may already carry editorial numbering (01., 一、, etc.). */
.bs-article-toc ol { list-style:none; margin:0; padding:0; }
.bs-article-toc li { font-size:12px; line-height:1.45; color:#8a8a85; padding:4px 0; }
.bs-article-toc li.bs-toc-sub { margin-left:14px; }
.bs-article-toc a { font-size:13.5px; color:#333330; }
.bs-article-toc a:hover { text-decoration:underline; text-underline-offset:3px; }
.bs-article-editorial .bs-article-body { margin-top:28px; color:#26241e; font-size:17px; line-height:1.78; letter-spacing:.008em; }
.bs-article-editorial .bs-article-body>:is(p,h2,h3,h4,blockquote,ul,ol,table,figure) { max-width:680px; margin-left:auto; margin-right:auto; }
.bs-article-editorial .bs-article-body p { font-size:17px; line-height:1.78; margin-top:0; margin-bottom:15px; padding:15px 0; text-wrap:pretty; }
.bs-article-editorial .bs-article-body>p:first-child:not([style*="center"]) { font-size:18px; line-height:1.74; color:#141414; }
.bs-article-editorial .bs-article-body p[style*="center"] { max-width:680px!important; margin-left:auto; margin-right:auto; margin-bottom:0; }
.bs-article-editorial .bs-article-body img { max-height:none; max-width:100%; height:auto; display:block; margin:8px auto 0; border-radius:0; }
.bs-article-editorial .bs-article-body p:empty { display:none; }
.bs-article-editorial .bs-article-body h2 { font-size:23px; line-height:1.4; font-weight:850; margin-top:46px; margin-bottom:20px; padding:20px 0 13px; border-bottom:1px solid #dcdcd8; letter-spacing:-.015em; text-wrap:balance; }
.bs-article-editorial .bs-article-body h3 { font-size:19px; line-height:1.48; font-weight:750; margin-top:34px; margin-bottom:13px; padding:15px 0; letter-spacing:-.01em; }
.bs-article-editorial .bs-article-body :is(h2,h3) { scroll-margin-top:100px; }
.bs-article-editorial .bs-article-body a { color:#141414; text-decoration:underline; text-underline-offset:3px; }
.bs-article-editorial .bs-article-body :is(strong,b) { color:#141414; font-weight:700; }
.bs-article-editorial .bs-article-body blockquote { border-left:2px solid #141414; padding:5px 0 5px 20px; margin-top:30px; margin-bottom:30px; color:#4b4b48; font-size:19px; line-height:1.68; }
.bs-article-editorial .bs-article-body blockquote p { font-size:inherit; line-height:inherit; margin-bottom:10px; padding:0; }
.bs-article-editorial .bs-article-body blockquote p:last-child { margin-bottom:0; }
.bs-article-editorial .bs-article-body :is(ul,ol) { margin-top:4px; margin-bottom:22px; padding-left:1.45em; }
.bs-article-editorial .bs-article-body li { margin-bottom:7px; line-height:1.72; }
.bs-article-editorial .bs-article-body li::marker { color:#979797; }
.bs-article-editorial .bs-article-body table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; margin-top:28px; margin-bottom:30px; font-size:14.5px; line-height:1.62; }
.bs-article-editorial .bs-article-body :is(th,td) { border:1px solid #e4e4e4; padding:9px 12px; text-align:left; vertical-align:top; }
.bs-article-editorial .bs-article-body thead th { background:#fafafa; font-weight:700; }
.bs-article-editorial .bs-article-body :is(figcaption,.image-caption,section[data-role="image-caption-wrap"]) { max-width:680px; margin:6px auto 28px!important; padding-top:0!important; font-size:12.5px; line-height:1.55; color:#6f6f6b; text-align:left; letter-spacing:.025em; }
.bs-article-editorial .bs-article-body section[data-role="image-caption-wrap"]>p { color:#6f6f6b!important; font-size:12.5px!important; line-height:1.55!important; letter-spacing:.025em!important; padding:0!important; }
.bs-article-editorial .bs-article-body p[data-image-caption-attached] { padding-bottom:0!important; margin-bottom:0!important; }
.bs-article-editorial .bs-article-body iframe { width:100%; max-width:100%; }
.bs-article-editorial .bs-article-body video { display:block; width:auto; max-width:100%; height:auto; max-height:min(82svh,900px); margin-left:auto; margin-right:auto; object-fit:contain; }
/* Preserve imported, labelled image slides inside their own scroll region. */
/* Empty legacy WeChat rails have no content but can extend beyond the viewport. */
.bs-article-editorial .bs-article-body section[style*="max-width: 800%"]:has(> section:only-child:empty) {
    display:none;
}
.bs-article-editorial .bs-article-body [data-role="image-scroll"] {
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
}
.bs-article-editorial .bs-article-body [data-role="image-slide"] { scroll-snap-align:start; }
.bs-article-editorial .bs-article-actions { margin-top:40px; border-block:1px solid #e4e4e4; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.bs-article-actions .bs-reader-controls,.bs-article-actions .bs-share-controls { margin:0; }
.bs-article-actions .bs-share-controls { width:auto; }
.bs-article-related { border-top:1px solid #e4e4e4; margin-top:40px; padding:40px 0 10px; }
.bs-article-related>h2 { font:700 11px/1.65 var(--bs-sans); letter-spacing:.16em; color:#6b6b67; margin:0 0 18px; }
.bs-related-brand { display:flex; gap:24px; align-items:flex-start; margin:30px 20px; }
.bs-related-brand>a { flex:0 0 80px; }
.bs-related-brand img { width:80px; height:80px; object-fit:contain; }
.bs-related-brand h3 { font-size:18px; margin:0; }
.bs-related-brand p { font-size:14px; line-height:1.65; color:#5e5e5a; margin:10px 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bs-related-brands { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; margin:28px 20px; }
.bs-related-brands .bs-related-brand { min-width:0; margin:0; padding-top:20px; border-top:1px solid #e4e4e4; gap:16px; }
.bs-related-brands .bs-related-brand>a { flex-basis:56px; }
.bs-related-brands .bs-related-brand img { width:56px; height:56px; }
.bs-related-brands .bs-related-brand>div { min-width:0; }
.bs-related-brands .bs-related-brand h3 { font:400 18px/1.5 var(--bs-sans); overflow-wrap:anywhere; }
.bs-related-brands .bs-related-brand h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
.bs-related-brands a:focus-visible { outline:2px solid #111; outline-offset:4px; }
.bs-related-heading { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e4e4e4; padding-top:20px; margin:20px; }
.bs-related-heading h3 { font-size:16px; font-weight:500; margin:0; }
.bs-related-heading a { font-size:12px; color:#585858; }
.bs-related-list { list-style:none; padding:0; margin:0 20px 20px; }
.bs-related-list li { margin-top:20px; }
.bs-related-list a { display:flex; align-items:flex-start; gap:20px; }
.bs-related-list img { width:120px; height:80px; object-fit:cover; flex:0 0 120px; }
.bs-related-list span { font-size:14px; font-weight:500; line-height:1.65; }
.bs-related-list a:hover span { text-decoration:underline; text-underline-offset:3px; }
.bs-related-empty { font-size:14px; color:#6b6b67; margin-inline:20px; }
.bs-article-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:100; pointer-events:none; }
.bs-article-progress i { display:block; height:100%; background:#141414; transform:scaleX(0); transform-origin:left center; }
@media(max-width:640px) {
    .bs-article-editorial { padding-bottom:40px; }
    .bs-article-toc { padding:17px 18px; }
    .bs-article-toc li { padding:0; }
    .bs-article-toc a { display:flex; align-items:center; min-height:44px; }
    .bs-article-editorial .bs-article-body { margin-top:22px; font-size:16px; line-height:1.76; letter-spacing:0; }
    .bs-article-editorial .bs-article-body p { font-size:16px; line-height:1.76; margin-bottom:14px; }
    .bs-article-editorial .bs-article-body h2 { font-size:21px; line-height:1.42; margin-top:40px; margin-bottom:17px; padding-bottom:11px; }
    .bs-article-editorial .bs-article-body h3 { font-size:18px; line-height:1.46; margin-top:30px; margin-bottom:12px; }
    .bs-article-editorial .bs-article-body blockquote { font-size:17.5px; line-height:1.66; padding-left:16px; margin-top:26px; margin-bottom:26px; }
    .bs-article-editorial .bs-article-body img { margin-top:6px; }
    .bs-related-list { margin-inline:0; }
    .bs-related-brand,.bs-related-heading { margin-inline:0; }
    .bs-related-brands { grid-template-columns:1fr; gap:20px; margin-inline:0; }
    .bs-related-list a { gap:16px; }
    .bs-related-list img { width:100px; height:67px; flex-basis:100px; }
}
