@charset "UTF-8";
/* ==========================================================================
   /news & /news/<slug>-n-<id>  —  Editorial index skin
   --------------------------------------------------------------------------
   生效页面：body#allarticlesBody（News Box Manager 的 all_articles 列表页）
             body#articleBody   （article 详情页）
   模板文件在 template_default/templates/ 下，ts_modern 未覆盖；这里只用 CSS
   重排，不动任何 PHP / 数据库，删除本文件即可完整回退。

   设计取向：珠宝画册的「编辑目录」，不是博客卡片墙。当前每篇文章只有
   「日期 + 全大写长标题」两条信息，卡片会放大空白，因此采用窄日期栏 +
   发丝分隔线的横向目录行。全部颜色走站点已有的 --lx-* / --theme-* 变量，
   浅色 / 深色两套主题自动适配。

   加载方式：html_header_css_loader.php 自动扫描 /^style/ 的 .css。
   注意 site_specific_styles.php（含 /news 搜索框 40px 规则）与内联的
   luxe_base.css 在其后加载，故所有选择器均以 body#… 提升特异性。

   2026-11-10
   ========================================================================== */

/* ==========================================================================
   1. 版面：收掉两条空侧栏，让内容列与站点其它内容页一样全宽
   --------------------------------------------------------------------------
   当前 /news 左右各有 col-sm-3 侧栏且 wrapper 为空，中心列被压成 col-lg-6。
   只在这两个页面隐藏；将来若侧栏要放内容，改由 tpl_main_page.php 判断。
   ========================================================================== */
body#allarticlesBody #mainWrapper > .row > #navColumnOne,
body#allarticlesBody #mainWrapper > .row > #navColumnTwo,
body#articleBody #mainWrapper > .row > #navColumnOne,
body#articleBody #mainWrapper > .row > #navColumnTwo {
    display: none !important;
}

body#allarticlesBody #mainWrapper > .row > .col-12.col-lg-6,
body#articleBody #mainWrapper > .row > .col-12.col-lg-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body#allarticlesBody #allArticlesDefault,
body#articleBody #articleDefault {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 20px 44px;
}

/* 中心列拉全宽后，面包屑仍贴左边、正文却居中，左边缘对不上。
   给面包屑套用与各自内容容器相同的宽度与内边距，两页都对齐。 */
body#allarticlesBody #navBreadCrumb,
body#articleBody #navBreadCrumb {
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

body#allarticlesBody #navBreadCrumb { max-width: 920px; }
body#articleBody #navBreadCrumb { max-width: 760px; }

/* ==========================================================================
   2. 页首：Playfair 大标题 + 一条金色短线
   ========================================================================== */
body#allarticlesBody #allArticlesDefault > h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--lx-text, #17161A);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

/* 详情页标题是全大写长产品名，3rem 会像横幅一样压住正文；
   收到 2.15rem 以内，字距略开，与下面 1rem 正文形成舒服的落差。 */
body#articleBody #articleDefault > h1#articleHeading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.15rem);
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: .025em;
    color: var(--lx-text, #17161A);
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}

body#allarticlesBody #allArticlesDefault > h1::after,
body#articleBody #articleDefault > h1#articleHeading::after {
    content: '';
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 20px;
    background: var(--theme-accent-gold, #D4AF37);
}

body#allarticlesBody #allArticlesDefault > br {
    display: none;
}

/* 说明文字：窄行宽、弱一档，不跟标题抢 */
body#allarticlesBody #news-info {
    max-width: 62ch;
    margin: 0 0 8px;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--lx-text-2, #4E4A45);
}

body#allarticlesBody #no-news {
    padding: 40px 0;
    color: var(--lx-text-2, #4E4A45);
    font-size: .95rem;
}

/* ==========================================================================
   3. 工具条：排序在左、搜索在右，窄屏自然堆叠
   ========================================================================== */
body#allarticlesBody #filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 0 0 30px;
}

body#allarticlesBody #filter-wrapper > .col {
    -ms-flex-preferred-size: auto;
    flex: 0 1 auto;
    -ms-flex-positive: 0;
    flex-grow: 0;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
}

body#allarticlesBody #filter-wrapper form.form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

body#allarticlesBody #filter-wrapper label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lx-muted, #8A8479);
    margin: 0;
    white-space: nowrap;
}

body#allarticlesBody #filter-wrapper #disp-sort-order {
    margin: 0 !important;
    min-height: 42px;
    max-width: 100%;
    padding: 0 34px 0 12px;
    font-size: .84rem;
    color: var(--lx-text, #17161A);
}

body#allarticlesBody #all-articles-search #nb-keyword {
    width: min(260px, 58vw);
    height: 42px;
    line-height: 1.4;
    margin: 0 !important;
    padding: 0 14px;
    font-size: .84rem;
}

body#allarticlesBody #all-articles-search #nb-keyword::placeholder {
    color: var(--lx-muted, #8A8479);
    opacity: 1;
}

body#allarticlesBody #all-articles-search input[type="submit"],
body#allarticlesBody #all-articles-search button,
body#allarticlesBody #all-articles-search input[type="image"] {
    height: 42px;
    min-width: 92px;
    line-height: 1.2;
    margin: 0;
    padding: 0 16px;
    border-radius: 9px !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ==========================================================================
   4. 文章列表 — Table 模式（当前站点配置）
   --------------------------------------------------------------------------
   把插件的 display:table / table-row / table-cell 重排成两列目录行。
   ========================================================================== */
body#allarticlesBody #news-table {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--lx-line, #E7E1D7);
    border-collapse: separate;
}

/* 视觉表头（两个 .news-cell 里是 "Article Date(s)" / "Article Title"），
   重排后无意义且并非真实 <th>，隐藏之。
   它同时带 .news-row，必须用 .news-row.news-heading 提高特异性，否则会被
   后面同特异性的 .news-row { display: grid } 覆盖而重新出现。 */
body#allarticlesBody #news-table .news-row.news-heading {
    display: none;
}

body#allarticlesBody #news-table .news-row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 28px;
    position: relative;
    padding: 21px 8px 21px 16px;
    border: 0;
    border-bottom: 1px solid var(--lx-line, #E7E1D7);
    background: transparent;
}

/* 唯一的动效：左侧金线由中点展开。不加入场动画，不打扰阅读。 */
body#allarticlesBody #news-table .news-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: var(--theme-accent-gold, #D4AF37);
    transition: height .24s ease;
}

body#allarticlesBody #news-table .news-row:hover::before,
body#allarticlesBody #news-table .news-row:focus-within::before {
    height: calc(100% - 20px);
}

body#allarticlesBody #news-table .news-cell {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 日期窄栏：小字、宽字距，与标题形成明确的层级差 */
body#allarticlesBody #news-table .news-cell.news-dates {
    position: relative;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lx-muted, #8A8479);
}

body#allarticlesBody #news-table .news-cell.news-dates::after {
    content: '';
    position: absolute;
    right: -14px;
    top: .1em;
    bottom: .1em;
    width: 1px;
    background: var(--lx-line, #E7E1D7);
}

/* 标题栏：整行可点，箭头在最右 */
body#allarticlesBody #news-table .news-row > .news-cell:last-child {
    position: relative;
    padding-right: 34px;
}

body#allarticlesBody #news-table .news-row > .news-cell:last-child::after {
    content: '\2192';
    position: absolute;
    right: 0;
    top: .1em;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--lx-disabled, #B9B2A6);
    transition: transform .24s ease, color .24s ease;
}

body#allarticlesBody #news-table .news-row:hover > .news-cell:last-child::after,
body#allarticlesBody #news-table .news-row:focus-within > .news-cell:last-child::after {
    color: var(--theme-accent-gold, #D4AF37);
    transform: translateX(4px);
}

body#allarticlesBody #news-table .news-row > .news-cell > a {
    display: inline;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.02rem, .95rem + .42vw, 1.24rem);
    font-weight: 400;
    line-height: 1.46;
    letter-spacing: .02em;
    color: var(--lx-text, #17161A);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

body#allarticlesBody #news-table .news-row:hover > .news-cell > a,
body#allarticlesBody #news-table .news-row > .news-cell > a:hover,
body#allarticlesBody #news-table .news-row > .news-cell > a:focus-visible {
    color: var(--theme-accent-gold, #D4AF37);
}

/* 摘要（当前数据为空；后台开启后会自然出现） */
body#allarticlesBody #news-table .news-content,
body#allarticlesBody .news-article .news-content {
    margin-top: 8px;
    font-size: .88rem;
    line-height: 1.72;
    color: var(--lx-text-2, #4E4A45);
    overflow-wrap: anywhere;
}

body#allarticlesBody .news-content:empty {
    display: none;
}

/* ==========================================================================
   5. 文章列表 — Listing 模式（配置切到 Listing 时同样保持这套语言）
   ========================================================================== */
body#allarticlesBody .news-article {
    clear: none;
    padding: 22px 0 22px 16px;
    border: 0;
    border-bottom: 1px solid var(--lx-line, #E7E1D7);
    position: relative;
}

body#allarticlesBody .news-article h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: .02em;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}

body#allarticlesBody .news-article h2 a {
    color: var(--lx-text, #17161A);
    text-decoration: none;
    transition: color .2s ease;
}

body#allarticlesBody .news-article h2 a:hover,
body#allarticlesBody .news-article h2 a:focus-visible {
    color: var(--theme-accent-gold, #D4AF37);
}

body#allarticlesBody .news-article > .news-dates {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lx-muted, #8A8479);
}

/* 插件自带的 3em 渐变日历方块：深色模式下是刺眼白块，重排成行内日期 */
body#allarticlesBody div.news-mdy > div.news-dates {
    float: none;
    display: flex;
    align-items: baseline;
    gap: .35em;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin: 0 0 6px;
    background: transparent;
    text-align: left;
}

body#allarticlesBody div.news-mdy > div.news-dates span {
    display: inline;
    float: none;
    clear: none;
    font-size: .7rem;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lx-muted, #8A8479);
}

body#allarticlesBody div.news-mdy > div.news-dates span.nb-day {
    font-size: .82rem;
    color: var(--lx-text-2, #4E4A45);
}

body#allarticlesBody div.news-mdy > h2,
body#allarticlesBody div.news-mdy > h1 {
    display: block;
    width: auto;
}

/* ==========================================================================
   6. 分页 / 结果计数：改掉浮动，形成一条安静的页脚
   --------------------------------------------------------------------------
   Back 按钮按需求移除（顶部面包屑已承担返回）。只在 CSS 层隐藏，不动插件
   模板；列表页与详情页一致，避免详情页留一个孤零零的按钮。
   注意：站点有全局统一按钮规范（site_specific_styles.php v2.1，黑底金字/
   金边 + !important），此前为 Back 单独写的描边样式会与之冲突，故一并删除。
   ========================================================================== */
body#allarticlesBody .navSplitPagesLinks.forward {
    float: none;
    margin: 26px 0 0;
    text-align: right;
    font-size: .84rem;
    color: var(--lx-text-2, #4E4A45);
}

body#allarticlesBody .navSplitPagesLinks.forward a {
    color: var(--lx-text-2, #4E4A45);
    text-decoration: none;
}

body#allarticlesBody .navSplitPagesLinks.forward a:hover {
    color: var(--theme-accent-gold, #D4AF37);
}

body#allarticlesBody .navSplitPagesResult {
    float: none;
    margin: 4px 0 0;
    text-align: right;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lx-muted, #8A8479);
}

body#allarticlesBody .navSplitPagesResult strong {
    color: var(--lx-text, #17161A);
    font-weight: 600;
}

body#allarticlesBody .buttonRow.back,
body#articleBody .buttonRow.back {
    display: none !important;
}

/* ==========================================================================
   7. 详情页正文 —— 长文阅读节奏
   --------------------------------------------------------------------------
   文章是纯文字长文（导语 + 若干 h2 章节 + 列表），没有配图。因此按
   「杂志内页」处理：导语单独一档、章节用发丝线分节、行宽收到 ~80 字符，
   金色只留给 h1 短线、列表 marker 和链接，不重复用力。
   ========================================================================== */
body#articleBody #articleDefault {
    max-width: 760px;
}

/* 元数据：安静的 eyebrow —— 标签弱一档、日期稍亮 */
body#articleBody #articleDefault .news-dates {
    margin: 20px 0 0;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lx-muted, #8A8479);
}

body#articleBody #articleDefault .news-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55em;
    margin: 0;
}

body#articleBody #articleDefault .news-header strong {
    font-weight: 500;
    color: var(--lx-muted, #8A8479);
}

body#articleBody #articleDefault .news-header span {
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--lx-text-2, #4E4A45);
}

/* 正文：680px ≈ 80 字符，英文长文比较舒适 */
body#articleBody #articleDefault > .news-content {
    max-width: 680px;
    margin-top: 36px;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--lx-text-2, #4E4A45);
    overflow-wrap: anywhere;
}

/* 导语段单独一档，与后续段落分层 */
body#articleBody #articleDefault > .news-content > p:first-child {
    font-size: 1.08rem;
    line-height: 1.72;
    color: var(--lx-text, #17161A);
}

body#articleBody #articleDefault > .news-content > p {
    margin: 0 0 1.15em;
}

/* 章节：发丝线 + 充足上留白 */
body#articleBody #articleDefault > .news-content h2,
body#articleBody #articleDefault > .news-content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    line-height: 1.35;
    color: var(--lx-text, #17161A);
}

body#articleBody #articleDefault > .news-content h2 {
    font-size: 1.38rem;
    margin: 2.4em 0 .85em;
    padding-top: 1.5em;
    border-top: 1px solid var(--lx-line, #E7E1D7);
}

body#articleBody #articleDefault > .news-content h3 {
    font-size: 1.16rem;
    margin: 1.9em 0 .7em;
}

body#articleBody #articleDefault > .news-content ul,
body#articleBody #articleDefault > .news-content ol {
    margin: 0 0 1.3em;
    padding-left: 1.4em;
}

body#articleBody #articleDefault > .news-content li {
    margin-bottom: .55em;
    line-height: 1.75;
}

body#articleBody #articleDefault > .news-content li::marker {
    color: var(--theme-accent-gold, #D4AF37);
}

body#articleBody #articleDefault > .news-content a {
    color: var(--theme-accent-gold, #D4AF37);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body#articleBody #articleDefault > .news-content a:hover {
    color: var(--lx-text, #17161A);
}

body#articleBody #articleDefault > .news-content strong {
    color: var(--lx-text, #17161A);
    font-weight: 600;
}

/* 后台编辑器将来可能插入的富文本，统一到这套语言 */
body#articleBody #articleDefault > .news-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

body#articleBody #articleDefault > .news-content blockquote {
    margin: 1.6em 0;
    padding: .2em 0 .2em 1.2em;
    border-left: 2px solid var(--theme-accent-gold, #D4AF37);
    color: var(--lx-text, #17161A);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
}

body#articleBody #articleDefault > .news-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: .9rem;
}

body#articleBody #articleDefault > .news-content th,
body#articleBody #articleDefault > .news-content td {
    padding: .7em .8em;
    border-bottom: 1px solid var(--lx-line, #E7E1D7);
    text-align: left;
}

body#articleBody #articleDefault > .news-content hr {
    border: 0;
    border-top: 1px solid var(--lx-line, #E7E1D7);
    margin: 2em 0;
}

/* ==========================================================================
   8. 无障碍：键盘焦点清晰可见，尊重 reduced-motion
   ========================================================================== */
body#allarticlesBody a:focus-visible,
body#allarticlesBody input:focus-visible,
body#allarticlesBody select:focus-visible,
body#articleBody a:focus-visible {
    outline: 2px solid var(--theme-accent-gold, #D4AF37);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body#allarticlesBody *,
    body#articleBody * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   9. 窄屏：工具条堆叠，日期移到标题上方，去掉竖向金线
   ========================================================================== */
@media (max-width: 767.98px) {
    body#allarticlesBody #allArticlesDefault,
    body#articleBody #articleDefault {
        padding: 8px 4px 32px;
    }

    body#allarticlesBody #filter-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 26px;
    }

    body#allarticlesBody #filter-wrapper > .col {
        width: 100%;
    }

    body#allarticlesBody #filter-wrapper form.form-inline {
        align-items: stretch;
    }

    body#allarticlesBody #filter-wrapper label {
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }

    body#allarticlesBody #filter-wrapper #disp-sort-order {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    body#allarticlesBody #all-articles-search #nb-keyword {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    body#allarticlesBody #all-articles-search input[type="submit"],
    body#allarticlesBody #all-articles-search button {
        flex: 0 0 auto;
        min-width: 84px;
    }

    body#allarticlesBody #news-table .news-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 9px;
        padding: 18px 26px 18px 0;
    }

    body#allarticlesBody #news-table .news-row::before {
        display: none;
    }

    body#allarticlesBody #news-table .news-cell.news-dates::after {
        display: none;
    }

    body#allarticlesBody #news-table .news-row > .news-cell:last-child {
        padding-right: 26px;
    }

    body#allarticlesBody .navSplitPagesLinks.forward,
    body#allarticlesBody .navSplitPagesResult {
        text-align: left;
    }


    body#allarticlesBody #navBreadCrumb,
    body#articleBody #navBreadCrumb {
        padding: 0 4px;
        margin-top: 16px;
        margin-bottom: 20px;
    }

    body#articleBody #articleDefault > h1#articleHeading {
        font-size: 1.55rem;
        line-height: 1.34;
    }

    body#articleBody #articleDefault > .news-content {
        margin-top: 28px;
        font-size: .95rem;
        line-height: 1.78;
    }

    body#articleBody #articleDefault > .news-content > p:first-child {
        font-size: 1.02rem;
    }

    body#articleBody #articleDefault > .news-content h2 {
        font-size: 1.2rem;
        margin-top: 2em;
        padding-top: 1.2em;
    }
}