/* jiurui 样式：单栏、留白、无装饰。
   配色走九瑞绛红旧金体系（与 PPT 手册同一套色值），
   字体优先系统字体栈，中文回落到 PingFang / 微软雅黑，不引入任何外部字体。 */

:root {
    --text: #333333;
    --text-strong: var(--g1);
    --muted: #666666;
    --accent: var(--c-primary);
    --border: var(--g7);
    --bg-soft: var(--g8);
    --content-width: 720px;
    /* 主栏 720 + 侧栏 260 + 间距 48：页头、正文、页脚共用同一容器，
       站名才会和文章标题左对齐 */
    --layout-width: 1028px;
    --footer-bg: var(--deep);
    --footer-border: var(--c-accent);
    --footer-text: var(--deep-text);

    /* ---------- 九瑞绛红旧金：全站配色唯一来源 ----------
       色值权威来源：D:\Resources\Templates\PPT\九瑞-ppt-color-scheme.html
       分层：核心四色 → 色阶 → 语义色 → 界面槽位。
       上面的旧变量（--accent / --border / --footer-* 等）已改为引用这一层，
       不要再在具体选择器里写死色值。 */

    /* 核心四色 60 / 25 / 10 / 5 */
    --c-bg: #F5F0EB;          /* 60% 页面底色 */
    --c-secondary: #8D6E63;   /* 25% 辅色：图标、图表次要系列（不可承载文字）*/
    --c-primary: #640000;     /* 10% 主色：标题、重点、按钮、反白块 */
    --c-accent: #C9A227;      /*  5% 强调：装饰线、序号、焦点环（上限，再多就廉价）*/
    --c-text: #333333;
    --c-text-sub: #666666;
    --c-text-fix: #6B5148;    /* 辅色要承载文字时的修正值
                                 （#8D6E63 在米白底只有 4.08:1 不达标，此值 6.40:1）*/

    /* 主色阶 */
    --p900:#370000; --p800:#460000; --p700:#640000; --p600:#741A1A;
    --p500:#833333; --p400:#934C4C; --p300:#A26666; --p200:#C19999;
    --p100:#E0CCCC; --p50:#F0E6E6;

    /* 暖灰阶（统一偏暖，禁止冷灰 #808080）*/
    --g1:#2E2A28; --g2:#4A4340; --g3:#6B625D; --g4:#8A8079; --g5:#A79C94;
    --g6:#C4B9B0; --g7:#DED5CD; --g8:#EDE7E0; --g9:#F5F0EB;

    /* 语义色 */
    --c-up:#640000; --c-down:#4F6743; --c-warn:#C9A227; --c-neutral:#8A8079;

    /* 界面槽位（PPT 没有、网站必须有）*/
    --surface:#FFFFFF; --surface-soft:#EDE7E0; --surface-sink:#FDFBF9;
    --accent-tint:#FDF8EA; --border-strong:#C4B9B0;
    --link:#8A1A12; --link-visited:#6B5148; --link-hover:#640000;
    --btn-hover:#741A1A;      /* 色阶 p600，PPT 标注为 Hover 态 */
    --focus:#C9A227;
    --deep:#370000; --deep-text:#DED5CD; --deep-sub:#A79C94;
    --shadow: 0 1px 3px rgba(46, 42, 40, .09);   /* PPT 卡片阴影原值，暖调不脏 */

    /* 字体：标题宋体与绛红米白是绝配 */
    --serif: "Source Han Serif SC","Noto Serif SC","Songti SC",STSong,SimSun,serif;

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    font-size: 17px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

::selection {
    background: var(--p50);
}

/* ---------- 页头 ---------- */

.site-header {
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
}

.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* 站点名后面紧跟导航（与旧站一致），不要把导航推到右侧 */
    justify-content: flex-start;
    gap: 8px 24px;
}

.site-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-strong);
}

.site-branding {
    display: flex;
    flex-direction: column;
}

.site-description {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.site-header nav a {
    font-size: 15px;
    color: var(--muted);
}

.site-header nav a:hover {
    color: var(--accent);
}

/* ---------- 正文区 ---------- */

.content {
    padding: 32px 0 48px;
}

/* ---------- 主栏 + 侧栏 ---------- */

.layout {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.layout-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar {
    flex: 0 0 260px;
    font-size: 15px;
}

.widget {
    margin: 0 0 28px;
}

.widget-title {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
}

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

.widget-list > li {
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

.widget-list > li:last-child {
    border-bottom: 0;
}

.widget-list a {
    color: var(--text);
}

.widget-list a:hover {
    color: var(--accent);
    text-decoration: none;
}

.widget-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.widget-tags > li {
    padding: 0;
    border-bottom: 0;
}

.widget-tags a {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-soft);
    border-radius: 3px;
    font-size: 14px;
    color: var(--c-text-sub);
}

.widget-search {
    display: flex;
    gap: 8px;
}

.widget-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}

.widget-search button {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 0;
    border-radius: 3px;
    background: var(--accent);
    font-size: 14px;
    font-family: inherit;
    color: #ffffff;
    cursor: pointer;
}

.widget-search button:hover {
    background: var(--btn-hover);
}

h1 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--text-strong);
}

h2 {
    font-size: 21px;
    line-height: 1.5;
    margin: 32px 0 12px;
    color: var(--text-strong);
}

h3 {
    font-size: 18px;
    margin: 24px 0 8px;
    color: var(--text-strong);
}

p {
    margin: 0 0 18px;
}

.meta {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--muted);
}

.intro {
    margin: 0 0 24px;
    font-size: 17px;
    color: var(--c-text-sub);
}

.body p {
    margin: 0 0 18px;
}

.body ul,
.body ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.body blockquote {
    margin: 0 0 18px;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--border);
    color: var(--c-text-sub);
}

.body img,
.featured {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.featured {
    margin: 0 0 24px;
}

pre,
.block-code {
    margin: 0 0 20px;
    padding: 14px 16px;
    overflow-x: auto;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.92em;
}

p code {
    padding: 2px 5px;
    background: var(--bg-soft);
    border-radius: 3px;
}

table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 15px;
}

th,
td {
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

thead th {
    background: var(--c-primary);
    color: #FFFFFF;
    font-weight: 600;
}

tbody tr:nth-child(even) {
    background: var(--p50);
}

tfoot tr,
tr.total {
    background: var(--accent-tint);
    border-top: 2px solid var(--c-accent);
    color: var(--c-primary);
}

/* ---------- 文章列表 ---------- */

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

/* 每篇一行：类别 → 标题 → 作者 · 日期 → 摘要（照原站 content-loop 的顺序与间距） */
.post-list > li {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border);
}

.post-list > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* 类别：小方块（13px 粗体、28px 高）；原站是 #e9e9e9 冷灰底，现改 g8 暖灰，hover 翻绛红反白 */
.post-list .entry-category {
    margin: 0 0 5px;
}

.post-list .entry-category a {
    display: inline-block;
    height: 28px;
    padding: 0 8px;
    margin: 0 2px 5px 0;
    background-color: var(--g8);
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    color: #333333;
}

.post-list .entry-category a:hover {
    background-color: var(--accent);
    color: #ffffff;
    text-decoration: none;
}

/* 标题：原站 1.6em（17px 基准 ≈ 27px），行高 1.25 */
.post-list .entry-title {
    margin: 0 0 5px;
    font-size: 27px;
    line-height: 1.25;
}

.post-list .entry-title a {
    color: var(--g1);
}

.post-list .entry-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* 作者 · 日期：13px 灰、分隔符 #ccc（原站这里还有评论数，本站不做评论） */
.post-list .entry-meta {
    margin: 0 0 5px;
    font-size: 13px;
    color: var(--g3);
}

.post-list .entry-meta .sep {
    margin: 0 5px;
    color: var(--g6);
}

/* 摘要：原站是三行截断 */
.post-list .entry-summary {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 0;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.post-list .entry-summary p {
    margin: 0;
}

.filters {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--muted);
}

.categories {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.terms {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.terms a {
    margin-right: 14px;
    color: var(--muted);
}

.terms a:hover {
    color: var(--accent);
}

.pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    font-size: 14px;
    color: var(--muted);
}

/* ---------- 页脚：p900 压场 + 上沿金线（PPT 正文页的页眉金线下移）---------- */

.site-footer {
    /* 深红底 + 暖调正文色 13px，上下 20px */
    background: var(--footer-bg);
    border-top: 2px solid var(--footer-border);
    padding: 20px 0;
    font-size: 13px;
    color: var(--footer-text);
    text-align: center;
}

.site-footer p {
    margin: 4px 0;
}

.site-footer a {
    color: var(--footer-text);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--c-accent);
}

/* ---------- 回到顶部 ---------- */

.back-to-top {
    /* 与原站 #back-top 一致：右下角 15px、30×30 方块、主题蓝，hover 转橙 */
    position: fixed;
    right: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.back-to-top:hover {
    background: var(--btn-hover);
}

.back-to-top[hidden] {
    display: none;
}

/* ---------- 小屏 ---------- */

/* 侧栏挤不下就堆到正文下面 */
@media (max-width: 900px) {
    .layout {
        flex-direction: column;
        gap: 32px;
    }

    .sidebar {
        flex: 1 1 auto;
        width: 100%;
        padding-top: 24px;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 24px;
    }

    /* 小屏照原站：标题降到 18px，类别方块收窄 */
    .post-list .entry-title {
        font-size: 18px;
    }

    .post-list .entry-category a {
        height: 24px;
        padding: 0 6px;
        line-height: 24px;
    }

    .site-header .wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-header nav {
        gap: 0 14px;
    }
}


/* ---------- 正文配色：九瑞绛红旧金（唯一来源）----------
   两个站共用这一份。色值权威来源见 md2jiurui/references/color-scheme.md。
   挂在两站共用的 .body 容器上（blog_page / about_page / studio 各模板都有）。
   studio.css 里另有一块「官网正文排版」，只管字号行高间距，不含颜色——
   排版各站自己管，颜色只改这里。
   只动颜色与字体族，字号行高沿用各站自己的。 */

.body h1 {
    font-family: var(--serif);
    color: var(--c-primary);
}

.body h2 {
    font-family: var(--serif);
    color: var(--c-primary);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--c-accent);
}

.body h3 {
    color: var(--p500);
}

.body h4,
.body h5,
.body h6 {
    color: var(--c-text-fix);
}

.body p {
    color: var(--c-text);
}

.body ul,
.body ol {
    color: var(--c-text);
}

.body strong {
    color: var(--c-primary);
    font-weight: 600;
}

.body em {
    color: var(--c-text-fix);
    font-style: italic;
}

.body a {
    color: var(--c-primary);
    text-decoration: underline;
    text-decoration-color: var(--p200);
}

.body code {
    background: var(--g8);
    color: var(--p900);
    padding: 2px 6px;
    border-radius: 2px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.body mark {
    background: var(--accent-tint);
    color: var(--c-primary);
}

.body blockquote {
    background: var(--surface);
    border-left: 4px solid var(--c-accent);
    color: var(--g2);
}

.body hr {
    border: 0;
    border-top: 1px solid var(--border);
}