/* ============================================================
 * 文章详情与阅读（前段）
 * article.css
 * ============================================================ */

.section-page h1{
    margin: .55rem 0 .3rem;
    font: 600 clamp(2.4rem, 5vw, 4.6rem)/1.08 var(--serif)
}

.meta-summary{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.8rem;
    margin-top: 1.15rem;
    padding: .85rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.article-body h2{
    /* 顶栏 + 阅读工具条高度，避免目录定位后标题被吸顶栏挡住 */
    scroll-margin-top: calc(var(--reader-header-height) + 56px);
    margin: 2.55rem 0 .72rem;
    padding-top: .4rem;
    border-top: 1px solid var(--line);
    /* em：跟随 .article-body 的阅读字号（rem 相对根节点，A+/A− 无效） */
    font: 600 1.5em/1.3 var(--serif)
}

.article-body blockquote{
    margin: 0.8rem 0;
    padding: 1rem 1.25rem;
    background: #eef2f3;
    font: 0.92rem/1.7 var(--serif);
    border-radius: 8px;
}

.quote-inline-actions{
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .7rem;
}

.quote-inline-actions a{
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .34rem .65rem;
    border: 1px solid var(--line-strong);
    color: var(--navy);
    font: 800 .82rem/1.2 var(--sans);
    text-decoration: none;
    background: rgba(255, 255, 255, .8);
    border-radius: 0.3rem;
}

.quote-inline-actions a:hover,
.quote-inline-actions a:focus-visible{
    border-color: var(--red);
    color: var(--red)
}

.article-body ul{
    margin: .2rem 0 1.3rem;
    padding-left: 1.35rem
}

.article-body li{
    padding: .17rem 0
}

.article-aside{
    /* 固定在顶栏与底部写留言条之间的可视区（红线区域） */
    --article-aside-top: calc(var(--reader-header-height) + 12px);
    --article-aside-bottom-gap: 96px;
    position: sticky;
    top: var(--article-aside-top);
    display: grid;
    gap: 0;
    align-content: start;
    align-self: start;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--article-aside-top) - var(--article-aside-bottom-gap));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: .5rem;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.aside-panel{
    margin: 0 0 0.5rem;
}

.aside-panel:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0
}

.aside-panel-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .8rem;
    padding-left: 0.8rem;
}

.aside-panel-head h3{
    margin: 0;
    font: 800 .82rem/1.3 var(--serif);
    color: var(--ink)
}

.aside-panel-head span{
    color: var(--muted);
    font: 500 .82rem/1 var(--sans);
    letter-spacing: .04em
}

.toc{
    padding-top: 0;
    border-top: 0
}

.toc ol{
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    border-left: 1px solid transparent;
}

.toc li{
    margin: 0.4rem 0;
    min-width: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.4
}

.toc a{
    display: block;
    max-width: 100%;
    padding: .3rem 0 .3rem .75rem;
    color: var(--muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color .15s ease, border-color .15s ease
}

.toc a:hover{
    color: var(--red)
}

.toc a.is-active{
    color: var(--ink);
    font-weight: 750;
    border-left-color: var(--red)
}

.aside-actions .tool-btn,
.aside-actions a.tool-btn,
.aside-actions button.tool-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 36px;
    padding: .35rem .5rem;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: #fff;
    color: var(--navy);
    font: 750 .82rem/1 var(--sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.aside-actions .tool-btn:hover,
.aside-actions button.tool-btn:hover{
    border-color: var(--red);
    color: var(--red)
}

.aside-tools-inline{
    display: grid;
    gap: .65rem;
    margin-top: 0
}

.aside-panel[data-aside-actions] .aside-tools-inline{
    margin-top: .75rem
}

.site-footer{
    margin-top: 1.5rem;
    padding: 1.2rem 1.25rem 1rem;;
    background: #0a1120;
    color: rgba(255, 255, 255, .88);
    text-align: left
}

.footer-inner{
    max-width: 1240px;
    margin: 0 auto
}

.footer-top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.75rem 2.5rem
}

.footer-brand{
    display: grid;
    gap: .4rem;
    max-width: 40rem
}

.footer-brand-name{
    margin: 0;
    color: #fff;
    font: 600 1.4rem/1.2 var(--serif);
    letter-spacing: .02em
}

.footer-copy{
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font: .8rem/1.7 var(--serif)
}

.v6-language-bar{
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0;
    padding: .7rem 0;
}

.v6-language-bar button{
    min-height: 42px;
    padding: .45rem .68rem;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--navy);
    font-size: .82rem;
    font-weight: 800
}

.v6-language-bar button[aria-pressed="true"]{
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.v6-reading-state{
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
    padding: .8rem 0;
}

.v6-reading-actions > button,
.v6-reading-actions > a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .65rem;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--navy);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none
}

.v6-reading-actions > button:hover,
.v6-reading-actions > a:hover,
.v6-reading-actions > button:focus-visible,
.v6-reading-actions > a:focus-visible{
    border-color: var(--red);
    color: var(--red)
}

.v6-reading-actions .is-active{
    border-color: var(--red);
    background: #fff8f7;
    color: var(--red-dark)
}

/* —— 文章阅读壳 / 列表（原 05-about） —— */
.article-reading-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    width: 100%;
    padding-bottom: 3rem;
}

.article-main{
    min-width: 0;
    width: 100%;
    max-width: none;
    position: relative
}

.article-header{
    max-width: none;
    width: 100%;
}

.article-header h1{
    max-width: none;
    margin: .35rem 0 .72rem;
    font: 600 clamp(3.15rem, 4.2vw, 3.9rem)/1.12 var(--serif);
    letter-spacing: 0
}

.meta-summary{
    gap: .45rem 1rem;
    margin-top: .82rem;
    padding: .62rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 0
}

.article-body{
    max-width: none;
    width: 100%;
    font: var(--article-font-size, 18px)/2 var(--serif)
}

.article-body p{
    margin: 0 0 0.8em
}

.article-body h2{
    margin: 1.6rem 0 .85rem;
    padding-top: 1rem;
    /* em：跟随阅读字号，与 A+/A− 同步 */
    font: 600 1.5em/1.32 var(--serif)
}

.article-body h3{
    margin: 2rem 0 .65rem;
    font: 600 1.28em/1.36 var(--serif)
}

.article-body blockquote{
    margin: 0.8rem 0;
    padding: 1rem 1.25rem;
    background: #eef2f3;
    font: 0.92em/1.7 var(--serif);
    border-radius: 8px;
}

.article-aside{
    position: sticky;
    top: var(--article-aside-top, calc(var(--reader-header-height) + 12px))
}

.toc li{
    font-size: .88rem;
}

@media (min-width: 1100px){.article-header h1{
        font-size: clamp(3.5rem, 4.2vw, 3.9rem);
        line-height: 1.12
    }

    .article-body{
        max-width: none;
        font: var(--article-font-size, 18px)/2.0 var(--serif)
    }
}

@media (min-width: 781px) and (max-width: 1099px){.article-reading-layout{
        display: block;
    }

    .article-aside{
        position: static;
        display: none
    }
}

.article-editor-note > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 0 .8rem;
    color: var(--red);
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none
}

.article-editor-note > summary::-webkit-details-marker{
    display: none
}

.article-editor-note > summary::after{
    content: "查看";
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600
}

.article-editor-note[open] > summary::after{
    content: "收起"
}

.article-editor-note > p{
    margin: .15rem .8rem .4rem
}

.article-participation-header .kicker{
    display: none
}

.article-header .kicker{
    max-width: 680px
}

.article-header h1{
    max-width: 780px;
    font-size: clamp(2.9rem, 4.8vw, 4.55rem);
    line-height: 1.08
}

.article-editor-note{
    max-width: none;
    width: 100%;
    margin: 1.35rem 0 1.45rem
}

.article-body{
    max-width: none;
    width: 100%
}

.article-body > p:first-child{
    line-height: 1.9;
    color: #27343d
}

.article-body h2{
    position: relative
}

.article-body h2::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 2.2rem;
    height: 3px;
    margin-bottom: 1rem;
    background: var(--red)
}

@media (min-width: 1100px){.article-reading-layout{
        grid-template-columns: minmax(0, 1fr) 230px;
    }

    .article-main > .article-header,
.article-main > .article-body,
.article-main > .article-secondary,
.article-main > .article-participation{
        max-width: none;
        width: 100%
    }

    .article-header h1{
        font-size: clamp(3.3rem, 4.2vw, 4.35rem);
        max-width: none
    }

    .article-aside{
        padding-top: 1rem
    }
}

@media (min-width: 781px) and (max-width: 1099px){.article-participation{
        margin-top: 3.2rem
    }
}

@media (min-width: 781px) and (max-width: 1099px){.article-reading-layout{
        margin-inline: auto
    }

    .article-header h1{
        font-size: clamp(2.7rem, 5vw, 3.5rem);
        line-height: 1.1
    }
}

@media (prefers-reduced-motion: reduce){.article-body h2{
        scroll-behavior: auto
    }
}

.article-aside{
    --article-aside-top: calc(var(--reader-header-height) + 12px);
    --article-aside-bottom-gap: 96px;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--article-aside-top) - var(--article-aside-bottom-gap));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.article-aside::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none
}

.article-aside .aside-panel,
.article-aside .toc,
.article-aside .aside-tools-inline{
    min-width: 0;
    max-width: 100%
}

.article-page .article-reading-layout{
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    width: 100%
}

.article-page .article-main{
    min-width: 0;
    width: 100%;
    max-width: none;
    padding-top: 0.4rem;
    border-right: 1px solid var(--line);
    padding-right: 2rem;
}

.article-page .article-main > *{
    max-width: none;
}

@media (min-width: 781px) and (max-width: 1099px){.article-page .article-reading-layout{
        display: block;
        grid-template-columns: none
    }
}

.home-latest{
    margin-top: 1rem;
}

.home-latest-head{
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.home-latest-head h2{
    margin: 0;
    font: 600 1.55rem var(--serif)
}

.home-latest-list{
    list-style: none;
    margin: 0;
    padding: 0
}

.home-latest-list li + li{
    border-top: 1px solid var(--line);
}

.home-latest-item{
    display: block;
    padding: 0.8rem 0;
    border-radius: 6px;
    transition: background-color .2s ease, box-shadow .2s ease, margin .2s ease, padding .2s ease
}

.home-latest-item .home-latest-head,
.topic-track-item .home-latest-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .28rem .5rem;
    min-width: 0
}

.home-latest-kicker{
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    min-width: max-content
}

.home-latest-head > h3{
    margin: 0;
    flex: 1 1 10rem;
    min-width: 0;
    font: 650 1.22rem var(--serif)
}

.home-latest-head > .home-latest-response{
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 52%;
    padding: 0
}

.home-latest-head h3{
    margin: 0;
    min-width: 0;
    font: 650 1.22rem var(--serif)
}

.home-latest-head h3 a{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none
}

.home-latest-head h3 a:hover,
.home-latest-head h3 a:focus-visible{
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px
}

.home-latest-column-tag{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 1.35rem;
    margin: 0;
    padding: 0 .4rem;
    border: 1px solid rgba(17, 50, 74, .18);
    border-radius: 3px;
    background: linear-gradient(180deg, #f7fafc 0%, #eef3f6 100%);
    color: var(--navy);
    font: 500 .78rem/1.4 var(--sans) !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease
}

.home-latest-column-tag:hover,
.home-latest-column-tag:focus-visible{
    border-color: var(--navy);
    background: #e8eef3;
    color: var(--navy)
}

.home-latest-column-tag.is-static{
    pointer-events: none;
    background: #f5f5f3;
    border-color: rgba(17, 50, 74, .12);
    color: #5a6770
}

.home-latest-response{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: .2rem 0 .05rem;
    color: var(--muted);
    font: .82rem/1.4 var(--sans)
}

.home-latest-response-mark{
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--red)
}

.home-latest-response-mark svg{
    width: .78rem;
    height: .78rem
}

.home-latest-response-label{
    flex: 0 0 auto;
    color: var(--red);
    font: 600 .86rem var(--sans);
    letter-spacing: .04em
}

.home-latest-response-link,
.home-latest-response .home-latest-response-link,
.home-latest-response a.home-latest-response-link{
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid rgba(180, 56, 47, .18);
    font: 600 0.9rem var(--sans) !important;
    box-sizing: border-box
}

.home-latest-response-link:hover,
.home-latest-response-link:focus-visible{
    color: var(--red);
    border-bottom-color: var(--red)
}

.home-latest-stats{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem 1.05rem;
    margin: 0;
    color: var(--muted);
    font: .86rem/1.4 var(--sans)
}

.home-latest-foot{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1.1rem;
    min-width: 0
}

.home-latest-foot .home-latest-stats{
    flex: 0 0 auto;
    margin-left: 0
}

.home-latest-foot .home-latest-meta{
    margin-top: 0;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-end
}

.home-latest-stat{
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    color: var(--muted);
}

.home-latest-stat-icon{
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
}

.home-latest-stat-icon svg{
    display: block;
    width: .95rem;
    height: .95rem
}

.home-latest-stat strong{
    font-variant-numeric: tabular-nums
}

.home-latest-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .72rem 1.15rem;
    align-items: start;
    min-width: 0
}

.home-latest-item.has-thumb .home-latest-body,
.home-latest-item:has(.home-latest-thumb) .home-latest-body{
    grid-template-columns: 196px minmax(0, 1fr);
    gap: .72rem 1.15rem
}

.home-latest-copy{
    display: flex;
    flex-direction: column;
    gap: .38rem;
    min-width: 0
}

.home-latest-copy > .home-latest-head{
    margin: 0
}

.home-latest-index{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 1.7rem;
    height: 1.35rem;
    padding: 0 .28rem;
    border: 1px solid rgba(180, 56, 47, .28);
    border-radius: 3px;
    background: #fbf6f5;
    color: var(--red);
    font: 800 .68rem/1 var(--sans);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease
}

/* 列表序号不跟随 item hover 变色 */

.home-latest-item h3,
.home-latest-head h3{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font: 650 1.12rem/1.5 var(--serif);
    transition: color .18s ease
}

.home-latest-item h3 a,
.home-latest-head h3 a{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
}

.home-latest-item h3 a:hover,
.home-latest-head h3 a:hover{
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px
}

.home-latest-item .home-latest-summary{
    margin: 0;
    color: var(--muted);
    font: .98rem/1.62 var(--serif);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.home-latest-copy .home-latest-summary{
    margin: 0
}

.home-latest-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.16rem .75rem;
    margin-top: 0;
    color: var(--muted);
    font-size: .78rem
}

.home-latest-meta .home-latest-published time,
.home-latest-meta .home-latest-author,
.home-latest-meta .home-latest-source{
    color: var(--muted)
}

.home-latest-meta .home-latest-author{
    order: 1
}

.home-latest-meta .home-latest-source{
    order: 2
}

.home-latest-meta .home-latest-published{
    order: 3
}

.home-latest-title-row .home-latest-index,
.home-latest-kicker .home-latest-index{
    align-self: center;
    margin: 0
}

.home-latest-thumb{
    position: relative;
    display: grid;
    place-items: center;
    align-self: start;
    width: 196px;
    aspect-ratio: 16 / 10;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(17, 50, 74, .04) 0%, transparent 42%),
    #f3f1eb;
    color: var(--muted);
    font: 650 .62rem/1.4 var(--sans);
    letter-spacing: .04em;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    transition: border-color .2s ease, box-shadow .2s ease
}

.home-latest-thumb[data-thumb-state="pending"]{
    border-style: dashed;
    border-color: var(--line-strong);
    box-shadow: none
}

.home-latest-thumb[data-thumb-state="pending"] span{
    padding: 0 .35rem;
    color: #7a858d
}

.home-latest-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease
}

/* 众声列表卡：桌面指上 — 浅红→海军浅洗 + 标题转红 + 封面微推 */
@media (hover: hover) and (pointer: fine){.home-latest-item.is-clickable{
        margin-inline: -0.55rem;
        padding-inline: 0.55rem
    }

    .home-latest-item.is-clickable:hover,
.home-latest-item.is-clickable:focus-visible{
        outline: none;
        cursor: pointer;
    }

    .home-latest-item.is-clickable:hover h3,
.home-latest-item.is-clickable:focus-visible h3,
.home-latest-item.is-clickable:hover h3 a,
.home-latest-item.is-clickable:focus-visible h3 a{
        color: var(--red);
        text-decoration: none
    }

    .home-latest-item.is-clickable:hover .home-latest-thumb,
.home-latest-item.is-clickable:focus-visible .home-latest-thumb{
        border-color: rgba(180, 56, 47, .32);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35),
        0 4px 14px rgba(17, 50, 74, .08)
    }

    .home-latest-item.is-clickable:hover .home-latest-thumb img,
.home-latest-item.is-clickable:focus-visible .home-latest-thumb img{
        transform: scale(1.045)
    }
}

@media (prefers-reduced-motion: reduce){.home-latest-item,
.home-latest-item h3,
.home-latest-thumb,
.home-latest-thumb img{
        transition: none
    }

    .home-latest-item.is-clickable:hover .home-latest-thumb img,
.home-latest-item.is-clickable:focus-visible .home-latest-thumb img{
        transform: none
    }
}

@media (max-width: 900px){.home-latest-item.has-thumb .home-latest-body,
.home-latest-item:has(.home-latest-thumb) .home-latest-body{
        grid-template-columns: 132px minmax(0, 1fr);
        gap: .55rem .9rem
    }

    .home-latest-thumb{
        width: 132px
    }

    .home-latest-foot{
        gap: .28rem .75rem
    }

    .home-latest-foot .home-latest-stats{
        gap: .35rem .75rem
    }
}

@media (max-width: 640px){.home-latest-item.has-thumb .home-latest-body,
.home-latest-item:has(.home-latest-thumb) .home-latest-body{
        grid-template-columns: 104px minmax(0, 1fr);
        gap: .45rem .7rem
    }

    .home-latest-thumb{
        width: 104px;
        border-radius: 4px
    }

    .home-latest-item .home-latest-summary{
        display: none
    }

    .home-latest-foot{
        flex-direction: column;
        align-items: flex-start;
        gap: .28rem
    }

    .home-latest-foot .home-latest-meta{
        margin-left: 0;
        justify-content: flex-start
    }

    .home-latest-item h3,
.home-latest-head h3{
        -webkit-line-clamp: 2;
        font-size: 1rem;
        line-height: 1.4
    }
}

.section-latest{
    margin-top: .2rem
}

.section-page[data-voices-page] .section-latest{
    margin-top: 0
}

.home-feed-more{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: .15rem 0 0;
    padding: 1.15rem 0 .35rem
}

.home-feed-more::before,
.home-feed-more::after{
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--line)
}

.home-feed-more button{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .28rem;
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: .2rem .85rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--navy);
    font: 800 .92rem/1.15 var(--serif);
    letter-spacing: .08em;
    white-space: nowrap
}

.home-feed-more button span{
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.home-feed-more button span::after{
    content: '↓';
    font: 700 .82rem/1 var(--sans);
    letter-spacing: 0;
    transition: transform .18s ease
}

.home-feed-more button small{
    color: var(--muted);
    font: 500 .82rem/1 var(--sans);
    letter-spacing: .02em
}

.home-feed-more button:hover,
.home-feed-more button:focus-visible{
    color: var(--red)
}

.home-feed-more button:hover small,
.home-feed-more button:focus-visible small{
    color: var(--red)
}

.home-feed-more button:hover span::after,
.home-feed-more button:focus-visible span::after{
    transform: translateY(2px)
}

@media (prefers-reduced-motion: reduce){.home-feed-more button span::after{
        transition: none
    }
}

/* —— 阅读壳 / masthead / 工具条（原 07-selection-comments） —— */
/* —— font/meta/chrome/v6-reading/continue（自 07-selection-comments） —— */
.font-tools{
    display: inline-flex;
    align-items: center;
    gap: .3rem
}

.font-tools button{
    min-height: 38px;
    min-width: 38px;
    padding: .4rem .55rem;
    border: 1px solid var(--line-strong);
    background: var(--paper-strong);
    color: var(--navy);
    font-weight: 800
}

.font-tools button:hover{
    border-color: var(--red);
    color: var(--red)
}

.v6-language-bar{
    display: inline-flex;
    margin: .55rem 0 0;
    padding: .22rem;
    background: #fff;
    gap: .15rem
}

.v6-language-bar button{
    min-height: 36px;
    padding: .35rem .6rem;
    border: 0;
    border-radius: 999px;
    background: transparent
}

.v6-language-bar button[aria-pressed="true"]{
    background: var(--navy);
    color: #fff
}

.v6-language-bar button{
    min-height: 36px;
    padding: .35rem .55rem;
    font-size: .82rem
}

.v6-language-bar{
    margin: .42rem 0 0;
    padding: .3rem 0
}

.article-header h1{
    margin: 0.2rem 0;
}

.article-header{
    max-width: none;
    padding-top: 0;
}

.article-header h1{
    max-width: none;
    overflow-wrap: normal;
    word-break: normal
}

.meta-summary{
    margin-top: 0;
    border: 0;
    padding-bottom: 0.5rem;
    display: block;
    border-bottom: 1px solid var(--line);
}

.meta-byline{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem 1rem;
    color: var(--muted);
    font-size: .82rem
}

.meta-byline > span,
.meta-byline > a{
    white-space: nowrap
}

.meta-stat{
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    color: #66747d;
    line-height: 1
}

.meta-stat strong{
    color: var(--ink);
    font-weight: 700;
    font-size: inherit;
    line-height: 1;
    font-family: inherit;
    font-variant-numeric: tabular-nums
}

.meta-stat-label{
    color: var(--muted);
    line-height: 1
}

.meta-byline > .meta-stat{
    gap: .22rem;
    color: var(--muted)
}

.meta-source{
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    color: var(--muted)
}

.meta-source .meta-label{
    flex: 0 0 auto;
    color: var(--muted)
}

.article-header-kicker{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .65rem;
    margin: 0
}

.article-header-kicker .home-latest-column-tag{
    align-self: center
}

/* 栏目标签（左）+ 阅读工具条（右）同行 */
.article-chrome-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: .3rem 0 0;
    min-height: 2.5rem;
    box-sizing: border-box
}

.article-chrome-bar .article-header-kicker{
    flex: 0 1 auto;
    min-width: 0;
    margin: 0
}

.article-chrome-bar .article-chrome-sticky,
.article-chrome-bar [data-component="ReaderToolbar"]{
    flex: 0 0 auto;
    margin-left: auto
}

.article-chrome-bar.is-masthead-active{
    min-height: 0;
    margin-bottom: .35rem
}

.article-chrome-bar.is-masthead-active:empty{
    display: none
}

.v6-reading-state{
    margin: .75rem 0 0;
    padding: .55rem 0;
    border-top: 0;
}

.tool-btn{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .72rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: 600 .74rem var(--sans);
    text-decoration: none;
    cursor: pointer;
    min-height: 30px
}

.tool-btn:hover{
    border-color: var(--red);
    color: var(--red);
    background: #fff
}

.v6-reading-actions .aside-tools-inline .v6-language-bar{
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .1rem;
    margin: 0;
    padding: .18rem;
    max-width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #e2e6ea;
    border-radius: 999px;
    background: #fff
}

.v6-reading-actions .aside-tools-inline .font-tools{
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    max-width: 100%;
    background: transparent
}

.v6-reading-actions .aside-tools-inline .v6-language-bar button,
.v6-reading-actions .aside-tools-inline .v6-language-bar a.reader-tool-btn,
.v6-reading-actions .aside-tools-inline .v6-language-bar .reader-tool-btn{
    box-sizing: border-box;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 500 .82rem/1 var(--sans);
    letter-spacing: 0;
    background: transparent;
    color: #4a5560;
    text-decoration: none
}

.v6-reading-actions .aside-tools-inline .font-tools button,
.v6-reading-actions .aside-tools-inline .font-tools .reader-tool-btn{
    box-sizing: border-box;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    border: 1px solid #e2e6ea;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 .82rem/1 var(--sans);
    letter-spacing: 0;
    background: #fff;
    color: #4a5560
}

.v6-reading-actions .aside-tools-inline{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    margin-right: .15rem
}

.v6-reading-actions .aside-tools-inline .v6-language-bar button[aria-pressed="true"],
.v6-reading-actions .aside-tools-inline .v6-language-bar a.reader-tool-btn[aria-pressed="true"],
.v6-reading-actions .aside-tools-inline .v6-language-bar .reader-tool-btn[aria-pressed="true"]{
    border: 0;
    color: var(--red);
    background: #f8e6e4
}

.v6-reading-actions .aside-tools-inline .font-tools button:hover{
    border-color: var(--red);
    color: var(--red);
    background: #fff8f7
}

.v6-reading-state{
    margin: .8rem 0 0;
    padding: .7rem 0 .5rem;
}

.v6-reading-actions > button,
.v6-reading-actions > a{
    display: inline-flex;
    align-items: center;
    padding: .32rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: 600 .74rem var(--sans);
    text-decoration: none;
    cursor: pointer;
    min-height: 30px
}

.v6-reading-actions > button:hover,
.v6-reading-actions > a:hover{
    border-color: var(--red);
    color: var(--red)
}

.v6-reading-actions > button:disabled{
    opacity: .45;
    cursor: not-allowed
}

.masthead{
    position: sticky;
    overflow: visible
}

.article-read-progress{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 2px;
    background: #f0f2f4;
    pointer-events: none
}

.masthead .article-read-progress,
.article-chrome-sticky .article-read-progress{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
}

.article-read-progress span{
    display: block;
    height: 100%;
    width: 0;
    background: var(--red);
    transition: width .12s linear
}

.article-editor-note{
    margin: 0.6rem 0 1.05rem;
    padding: .8rem 1rem;
    border-left: 3px solid var(--red);
    background-color: rgba(214, 221, 225, .3);
    border-radius: 4px;
    font-size: calc(var(--article-font-size, 18px) * 0.96);
}

.article-editor-note .editor-note-label,
.article-editor-note > strong{
    display: block;
    margin: 0 0 .35rem;
    color: var(--red);
    font: 600 1em/1.3 var(--sans)
}

.article-editor-note .editor-note-full,
.article-editor-note > p{
    color: var(--ink);
    font: 1em/2 var(--serif)
}

.article-editor-note .editor-note-full > p,
.article-editor-note > p{
    overflow-wrap: anywhere
}

.article-editor-note .editor-note-full > p:last-child,
.article-editor-note > p:last-child{
    margin-bottom: 0
}

.v6-reading-state{
    position: sticky;
    top: var(--reader-header-height);
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    width: auto;
    margin: 0 calc(var(--page-gutter) * -1);
    padding: .5rem var(--page-gutter);
    background: #fff;
    box-sizing: border-box;
    border-bottom: 1px solid var(--line-strong)
}

.v6-reading-lead{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    flex: 1 1 220px;
    min-width: 0
}

.v6-reading-copy{
    margin: 0;
    flex: none;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5
}

.v6-reading-resume{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .5rem .72rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--red);
    font: 500 .82rem/1 var(--sans);
    cursor: pointer
}

.v6-reading-resume:disabled{
    opacity: .45;
    cursor: not-allowed
}

.v6-reading-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.v6-reading-actions > button,
.v6-reading-actions > a{
    min-height: 36px;
    padding: .35rem .72rem;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--paper-strong);
    color: var(--navy);
    font: 600 .82rem/1 var(--sans);
    text-decoration: none
}

.v6-reading-actions > button.is-active,
.v6-reading-actions > button:hover,
.v6-reading-actions > a:hover{
    border-color: var(--red);
    color: var(--red)
}

.article-secondary{
    max-width: none;
    width: 100%;
    margin: 1.1rem 0 0;
    padding: .7rem 0 0;
    border-top: 1px solid var(--line)
}

.article-secondary-note{
    margin: 0;
    color: var(--muted);
    font: 400 .82rem/1.55 var(--sans)
}

/* —— chrome-sticky/masthead/toolbar/type-scale（自 07-selection-comments） —— */
/* 详情页工具条：默认随文档流（与栏目标签同行）；仅旧版 is-page-header 吸顶 */
.article-chrome-sticky{
    position: relative;
    top: auto;
    z-index: 9;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    box-sizing: border-box
}

.article-chrome-sticky.is-page-header.is-stuck .article-toolbar{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto
}

.article-chrome-sticky.is-embedded{
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none
}

.article-chrome-sticky.is-embedded .article-toolbar{
    padding: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible
}

/*
 * 众声详情顶栏：
 * brand | 标题（上行）     | 语言/字号
 *       | 进度文案（下行） |
 */
.masthead.is-article-reading .masthead-inner{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .85rem;
    row-gap: 0
}

.masthead.is-article-reading .brand-lockup{
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center
}

.masthead.is-article-reading .primary-nav,
.masthead.is-article-reading .header-actions,
.masthead.is-article-reading .primary-nav[hidden],
.masthead.is-article-reading .header-actions[hidden]{
    display: none !important
}

.masthead-article-title{
    display: none;
    margin: 0;
    min-width: 0;
    font: 650 1.02rem/1.3 var(--serif);
    color: var(--ink, #171b1f);
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.masthead.is-article-reading .masthead-article-title{
    display: block;
    grid-column: 2;
    grid-row: 1;
    animation: topic-masthead-in .3s ease both;
    padding-top: 0.7rem;
}

.masthead-article-tools{
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0
}

.masthead.is-article-reading .masthead-article-tools{
    display: contents !important;
    animation: none
}

.masthead-article-tools[hidden]{
    display: none !important
}

.masthead.is-article-reading .masthead-article-tools .article-chrome-sticky,
.masthead.is-article-reading .masthead-article-tools .article-toolbar,
.masthead.is-article-reading .masthead-article-tools .article-toolbar.has-reading-lead,
.masthead.is-article-reading .masthead-article-tools .v6-reading-state{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important
}

.masthead-article-tools .article-chrome-sticky,
.masthead-article-tools .article-toolbar{
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    height: auto;
    min-height: 0;
    max-height: none
}

.masthead.is-article-reading .masthead-article-tools .v6-reading-lead{
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .45rem !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 0 0.2rem 0 !important;
    animation: topic-masthead-in .3s ease .04s both
}

.masthead.is-article-reading .masthead-article-tools .v6-reading-resume{
    padding: .2rem .7rem;
    font-size: .78rem;
}

.masthead.is-article-reading .masthead-article-tools .v6-reading-copy{
    margin: 0;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--muted, #5d6870);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.masthead.is-article-reading .masthead-article-tools .v6-reading-actions{
    grid-column: 3 !important;
    grid-row: 1 / -1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 !important;
    animation: topic-masthead-in .32s ease .04s both
}

.masthead-article-tools .aside-tools-inline{
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

@media (prefers-reduced-motion: reduce){.masthead.is-article-reading .masthead-article-title,
.masthead.is-article-reading .masthead-article-tools{
        animation: none
    }
}

.article-toolbar{
    position: relative;
    top: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: .65rem 1rem;
    width: 100%;
    margin: 0 auto;
    padding: 0.8rem var(--page-gutter);
    background: #fff;
    box-sizing: border-box;
    border-bottom: 0
}

.article-chrome-sticky .article-read-progress{
    border-bottom: 0
}

body.has-article-toolbar .page{
    margin-top: 0;
}

.article-toolbar{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem
}

.article-toolbar .v6-reading-state{
    position: static;
    top: auto;
    max-width: 1200px;
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border: 0;
    order: 2
}

.article-toolbar .v6-reading-lead{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
    gap: .5rem;
    order: 1
}

.article-toolbar:not(.has-reading-lead) .v6-reading-state{
    flex: 1 1 auto;
    width: 100%;
    justify-content: flex-end
}

.article-toolbar .v6-reading-actions{
    flex: 0 0 auto;
    margin-left: auto
}

@media (min-width: 781px){[data-article-read-progress-inline]{
        display: none !important
    }
}

@media (max-width: 780px){body.has-article-toolbar .masthead > .article-read-progress{
        display: none
    }

    .article-chrome-bar .article-chrome-sticky{
        position: sticky;
        top: calc(var(--reader-header-height, 56px) + 45px);
        z-index: 20;
        background: #fff
    }

    .article-toolbar{
        flex-direction: column;
        align-items: stretch;
        gap: .35rem
    }

    .article-toolbar .v6-reading-state{
        order: 1;
        width: 100%
    }

    .article-toolbar .v6-reading-lead{
        order: 2;
        width: 100%;
        flex: 0 0 auto;
        margin: 0
    }

    .article-chrome-sticky .article-read-progress,
.article-chrome-sticky [data-article-read-progress-inline]{
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        display: block;
        width: 100%;
        height: 2px;
        background: #f0f2f4
    }
}

.article-toolbar .v6-reading-copy{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.article-toolbar .v6-reading-resume{
    flex: 0 0 auto
}

.article-toolbar .v6-reading-actions{
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    min-width: 0
}

.article-page{
    --article-font-size: 18px;
    --article-title-size: calc(var(--article-font-size) * 1.35);
    --article-meta-size: calc(var(--article-font-size) * 0.82);
}

.article-page .article-header h1{
    font-size: var(--article-title-size, 1.6rem);
}

.article-page .meta-summary,
.article-page .meta-byline{
    font-size: var(--article-meta-size, .92rem);
}

/* 正文与编者按跟随阅读字号；留言区保持原 rem 样式，不随 A+/A− 改变 */
.article-page .article-body{
    font-size: var(--article-font-size, 18px);
}

.article-page .article-editor-note{
    font-size: calc(var(--article-font-size, 18px) * 0.96);
}

.article-page .v6-comment-section,
.article-page .discussion-feed,
.article-page .comment-sticky-discuss-body,
.article-page .article-participation{
    font-size: 1rem;
}

.article-page .v6-reading-actions > button,
.article-page .v6-reading-actions > a,
.article-toolbar .v6-reading-actions > button,
.article-toolbar .v6-reading-actions > a{
    font: 600 .88rem/1 var(--sans)
}

.article-page .v6-reading-actions .aside-tools-inline .v6-language-bar button,
.article-page .v6-reading-actions .aside-tools-inline .font-tools button,
.article-toolbar .v6-reading-actions .aside-tools-inline .v6-language-bar button,
.article-toolbar .v6-reading-actions .aside-tools-inline .font-tools button{
    font: 600 .8rem/1 var(--sans)
}

.article-page .tool-btn{
    font: 600 .85rem var(--sans)
}

.article-page .v6-language-bar button{
    font-size: .83rem
}

.article-page .article-secondary-note{
    font: 400 .82rem/1.55 var(--sans)
}

.article-page .v6-comment-section > h2{
    font-size: 1.5rem
}

.article-page .v6-comment-section > p{
    font: .97rem/1.55 var(--serif)
}

.article-page .aside-panel-head h3{
    font: 600 1rem/1.3 var(--serif)
}

.article-page .aside-panel-head span{
    font: 600 .9rem/1 var(--sans)
}

.article-page .discussion-module-head h2{
    font: 600 1.08rem/1.2 var(--serif)
}

.article-page .discussion-module-meta{
    font: 650 .88rem/1.4 var(--sans)
}