/* --- 基础重置 & 变量定义 --- */
/* 设计手记：
   整体配色参考了宋画风格。
   不想用纯黑，太死板，选了深灰（浓墨）代替。
   点缀色用了胭脂红，就像画卷上盖的印章。
*/
:root {
    /* 配色方案 - 水墨风 */
    --ink-black: #1a1a1a;       /* 浓墨 */
    --ink-gray: #555555;        /* 次墨 */
    --ink-light: #888888;       /* 淡墨 */
    --ink-faint: #dcdcdc;       /* 极淡墨 */
    --ink-border: #e0e0e0;      /* 边框灰 */
    --paper-bg: #fcfcf7;        /* 宣纸白 */
    --rouge: #d48a8a;           /* 胭脂红/梅花色 */
    --rouge-hover: #c47676;     /* 深胭脂 */
    --seal-red: #b22222;        /* 印章红 */


    /* 布局尺寸 - 调整为更窄，增加留白感 */
    /* 之前试过 1200px，感觉太散了，1080px 更有阅读聚焦感 */
    --max-width: 1080px;
    --header-height: 70px;
    --border-radius: 4px;
}




/* --- 字体本地化 --- */
/* ma-shan-zheng-regular - chinese-simplified_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ma Shan Zheng';
    font-style: normal;
    font-weight: 400;
    src: url('./../Fonts/ma-shan-zheng-v14-chinese-simplified_latin/ma-shan-zheng-v14-chinese-simplified_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./../Fonts/ma-shan-zheng-v14-chinese-simplified_latin/ma-shan-zheng-v14-chinese-simplified_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* noto-sans-sc-regular - chinese-simplified_latin*/
@font-face {
    font-display: swap;
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    src: url('./../Fonts/noto-sans-sc-v39-chinese-simplified_latin/noto-sans-sc-v39-chinese-simplified_latin-regular.woff2') format('woff2'),
    url('./../Fonts/noto-sans-sc-v39-chinese-simplified_latin/noto-sans-sc-v39-chinese-simplified_latin-regular.ttf') format('truetype');
}


/* Myna - 符号字体*/
@font-face {
    font-display: swap;
    font-family: 'Myna';
    font-style: normal;
    src: url('./../Fonts/Myna/Myna.woff2') format('woff2'),
    url('./../Fonts/Myna/Myna.ttf') format('truetype');
}



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* 移除移动端点击的高亮背景，原生那个灰色块太丑了 */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 80px; /* 调整此值以适应导航栏高度 */
}


/* 修改 body 部分 */
body {
    /* 字体优先级：苹果系统圆体 -> Google圆体 -> Google黑体 -> 微软圆体 -> 系统默认无衬线 */
    /* 这里的字体栈折腾了很久，最后觉得圆体（Rounded）最能体现水墨的润泽感 , 后面发现霞鹜文楷也很好啊！*/
    font-family:  "LXGW WenKai Screen", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "YouYuan", sans-serif;

    background-color: #f9f9f5;
    color: var(--ink-black);
    line-height: 1.8;

    /* 换成圆润字体后，17px 会显得比较大且饱满 */
    /* 现在的屏幕分辨率都高，字体大点看着不累 */
    font-size: 17px;
    overflow-x: hidden;

    /* --- 字体渲染优化 --- */
    /* 必须加这个，不然在 Mac 上字体会显粗，不够清秀 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* iOS系统 禁止页面缩放
    touch-action: pan-x pan-y;
    user-scalable: no;*/
}

/* iOS系统 禁止页面缩放 */
html, body {
   touch-action: manipulation;
   -ms-touch-action: manipulation; /* 兼容 IE */
}


a {
    text-decoration: none;
    color: inherit;
    /* 原：transition: all 0.3s ease; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

a:hover {
    color: var(--rouge);
}

ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* --- 工具类 --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    /* 增加左右内边距，解决“距离两边边距太小”的问题 */
    /* 给内容留口气，别贴着浏览器边缘 */
    padding: 0 40px;
}

.flex { display: flex; }
.flex-between { justify-content: space-between; }
/* 书法字体专用类，只要用这个类名，字就飘逸起来了 */
.font-calligraphy { font-family: "Ma Shan Zheng", "KaiTi", cursive; }

/* 竖排文字工具类 */
/* 古风必备：竖排排版，浏览器兼容性现在基本没问题了 */
.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 4px;
}



/* =========================================
   Header 容器与基础布局
   ========================================= */
header {
    background-color: rgba(252, 252, 247, 0.9);
    /* 毛玻璃效果 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);

    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    /* 原：transition: all 0.3s; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

header .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 限制最大宽度，保持居中 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   3. Logo 样式
   ========================================= */
.logo {
    font-size: 32px;
    color: var(--rouge);
    text-shadow: 1px 1px 2px rgba(203, 133, 133, 0.71);
    text-decoration: none;
    font-weight: bold;
}

.logo span {
    font-size: 12px;
    color: var(--ink-light);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin-left: 10px;
    font-family: serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================
   4. 桌面端导航菜单 (默认)
   ========================================= */
.nav-menu {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-menu a {
    font-size: 16px;
    color: var(--ink-gray);
    position: relative;
    padding: 5px 0;
    text-decoration: none;
    /* 原：transition: color 0.3s; */
    transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 悬停时的水墨红线动画 */
.nav-menu a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 20px; /* 红线长度 */
    height: 2px;
    background-color: var(--rouge);
    transform: translateX(-50%) scaleX(0); /* 默认缩放为0 */
    opacity: 0;
    /* 原：transition: all 0.3s ease; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.nav-menu a:hover {
    color: var(--ink-black);
}

.nav-menu a:hover::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* 当前选中页面的高亮样式 (可选) */
.nav-menu a.current {
    color: var(--ink-black);
}
.nav-menu a.current::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* =========================================
   5. 搜索框组件
   ========================================= */
.search-widget {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10px;
}

.search-widget form {
    display: flex;
    align-items: center;
}

.search-input {
    width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--ink-black);
    padding: 4px 0;
    outline: none;
    opacity: 0;
    font-size: 14px;
    cursor: pointer;
    /* 原：transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--ink-gray);
    display: flex;
    align-items: center;
    /* 原：transition: color 0.3s; */
    transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.search-btn svg {
    width: 18px;
    height: 18px;
}

/* 交互：悬停或聚焦时展开 */
.search-widget:hover .search-input,
.search-input:focus {
    width: 140px;
    opacity: 1;
    border-bottom-color: var(--rouge);
    margin-right: 5px;
    cursor: text;
}
.search-widget:hover .search-btn {
    color: var(--rouge);
}

/* =========================================
   6. 移动端菜单按钮 (默认隐藏)
   ========================================= */
.mobile-menu-btn {
    display: none; /* 桌面端隐藏 */
}


/* =========================================
   7. 移动端响应式布局 (核心动画区域)
   ========================================= */
@media (max-width: 768px) {

    /* 汉堡按钮显示 */
    .mobile-menu-btn {
        display: block;
        background: transparent;
        border: none;
        padding: 10px;
        z-index: 1002;
        cursor: pointer;
    }

    .mobile-menu-btn span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--ink-black);
        margin: 5px 0;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    /* 汉堡按钮 -> X 变换动画 */
    .mobile-menu-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
        background-color: var(--rouge);
    }
    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }
    .mobile-menu-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
        background-color: var(--rouge);
    }

    /* --- 移动端下拉面板 --- */
    .nav-menu {
        /* 强制覆盖 display:none，使用 flex 布局 */
        display: flex !important;
        flex-direction: column;
        gap: 0;

        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        /* 面板样式 */
        background-color: rgba(252, 252, 247, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        padding: 10px 0 30px 0;

        /* 初始状态：隐藏 */
        opacity: 0;
        visibility: hidden; /* 关键：隐藏时不可见也不可点 */
        transform: translateY(-20px) scaleY(0.96); /* 向上收起 */
        transform-origin: top center;

        /* 贝塞尔曲线过渡 */
        transition:
                opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                visibility 0.4s;
    }

    /* 激活状态：展开 */
    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scaleY(1);
    }

    /* 链接项样式重置 */
    .nav-menu a {
        width: 100%;
        text-align: center;
        padding: 16px 0;
        font-size: 17px;
        border-bottom: 1px dashed rgba(0,0,0,0.03);

        /* 初始文字稍微上移，为了进场动画 */
        opacity: 0;
        transform: translateY(-10px);
        /* 原：transition: all 0.3s ease-out; */
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    /* 移除移动端 Hover 下划线，太乱 */
    .nav-menu a::before {
        display: none;
    }

    /* 文字错峰进场动画 */
    .nav-menu.active a {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
    }

    /* 搜索框适配 */
    .search-widget {
        width: 80%;
        margin: 20px auto 10px;
        justify-content: center;

        opacity: 0;
        transform: translateY(-10px);
        /* 原：transition: all 0.3s ease-out; */
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .nav-menu.active .search-widget {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    /* 移动端搜索框默认显示一点轮廓 */
    .search-input {
        width: 100%;
        opacity: 0.7;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        text-align: center;
    }
}



/* =========================================
   Hero 区域 - 完美无缝叠化版 (修复割裂感)
   ========================================= */

/* --- 容器设置 --- */
.hero {
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: var(--paper-bg);
    margin-bottom: 60px;
    border-bottom: 1px dashed var(--ink-border);
}

/* --- 静态背景层 (控制图片消失节奏) --- */
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url('../../images/hero/static-bg.png');
    background-size: cover;
    background-position: center;

    z-index: 1;
    opacity: 0.8;

    /* 底部遮罩 */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);

    /* --- 【核心修改 A】 --- */
    /* 1. opacity 2.4s: 让消失过程极其缓慢，像墨水慢慢干透。
       2. delay 0.6s: 视频开始播放后的 0.6秒内，图片完全保持不动！
          这是为了等视频彻底浮现出来，防止出现“真空期”。
    */
    transition:
            filter 2.0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s,
            opacity 2.4s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;

    transform: translateZ(0);
}

/* 状态：JS 触发视频播放后 */
.hero.video-playing::before {
    /* 最终状态：模糊且消失 */
    filter: blur(25px);
    opacity: 0 !important;

    /* 注意：z-index 延迟切换，防止图片还没消失就突然跑到视频下面去了 */
    transition-property: filter, opacity, z-index;
    transition-duration: 2.0s, 2.4s, 0s;
    transition-delay: 0.6s, 0.6s, 2.4s; /* z-index 最后才变 */

    z-index: -1;
    pointer-events: none;
}

/* --- 视频层 (控制视频出现节奏) --- */
.hero-bg-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;

    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    pointer-events: none;

    opacity: 0;

    /* --- 【核心修改 B】 --- */
    /* 视频不需要延迟，立刻开始浮现，去填补图片的下方 */
    /* 时间设定为 2.0s，让它慢慢地从底部浮上来 */
    transition: opacity 2.0s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 状态：视频开始播放 */
.hero-bg-video.is-playing {
    /* 目标透明度 */
    opacity: 0.45;
}

/* --- 装饰层 (保持不变) --- */
.hero-decor-left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    height: 160px;
    color: rgba(0,0,0,0.1);
    font-size: 24px;
    font-family: "Ma Shan Zheng", cursive;
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-title {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--ink-black);
    letter-spacing: 4px;
    text-shadow: 0 0 20px var(--paper-bg);
}

.hero-subtitle {
    font-size: 16px;
    color: var(--ink-gray);
    font-style: italic;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 10px var(--paper-bg);
}

.hero-subtitle::before, .hero-subtitle::after {
    content: '—';
    color: var(--rouge);
    opacity: 0.9;
    margin: 0 10px;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .hero { height: 200px; }
    .hero-bg-video { display: none; }
}

@media (min-width: 768px) {
    .hero-bg-video { display: block; }
}

/* ================  End Hero 区域  ================ */


/* --- 主体布局 --- */
.main-layout {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
    /* 增加列间距，解决拥挤感 */
    gap: 60px;
    position: relative;
}

/* 为了让左右边距视觉上更大，我们利用容器留白。
   左侧 60% -> 实际宽度占比
   右侧 30% -> 实际宽度占比
   剩余 10% 转化为 gap
*/
/* 黄金比例布局，左边内容，右边侧栏 */
.content-left {
    flex: 6.5; /* 约 65% */
    min-width: 0; /* 防止Flex子项溢出 */
}

.sidebar-right {
    flex: 3.5; /* 约 35% */
}

/* --- 文章卡片样式 (增强细节) --- */
.post-card {
    background: #fff;

    padding: 35px 30px;
    margin-bottom: 50px;
    position: relative;
    border: 1px solid rgba(0,0,0,0.02);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    /* 原：transition: all 0.4s ease; */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px -10px rgba(0,0,0,0.1);
}

/* 四角装饰 - 增加中式细节 */
/* 这个是点睛之笔，模仿线装书的边角 */
.corner-decor {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--ink-gray);
    /* 原：transition: all 0.3s; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0.3;
}
.c-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.c-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.c-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.c-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.post-card:hover .corner-decor {
    opacity: 1;
    border-color: var(--rouge);
    width: 15px;
    height: 15px;
}

/* 顶部装饰条改为左侧竖线 - 更符合书卷气 */
.post-card::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 4px;
    height: 60px;
    background-color: var(--ink-black);
    opacity: 0.8;
}

.post-card:hover::before {
    background-color: var(--rouge);
}

.seal {
    background-color: transparent;
    color: var(--seal-red);
    border: 1px solid var(--seal-red);
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 8px;
    font-family: "Ma Shan Zheng", cursive;
    vertical-align: middle;
    display: inline-block;
    transform: rotate(-2deg); /* 微微倾斜，像盖章 */
}

.post-meta {
    font-size: 13px;
    color: var(--ink-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.post-meta span { margin-right: 12px; }

.post-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 16px;
    line-height: 1.4;
}

.post-title a {
    background: linear-gradient(to right, var(--rouge), var(--rouge)) 0 100% no-repeat;
    background-size: 0 1px;
    /* 原：transition: background-size 0.4s ease; */
    transition: background-size 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.post-title a:hover {
    background-size: 100% 1px;
    color: var(--ink-black);
}

.post-excerpt {
    color: var(--ink-black);
    margin-bottom: 15px;
    text-align: justify;
    font-size: 15px;
}

.post-footer {
    border-top: 1px dashed var(--ink-border);
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* 按钮改为印章/实心风格 */
.read-more-btn {
    background-color: var(--ink-black);
    color: #fff;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 1px;
    /* 原：transition: all 0.3s; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: "Ma Shan Zheng";
}

.read-more-btn:hover {
    background-color: var(--rouge);
    color: #fff;
}

/* 背景编号装饰 */
/* 这里的数字用毛笔字体淡淡的显示在背景里，增加层次感 */
.bg-number {
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 80px;
    color: rgba(0,0,0,0.02);
    font-family: "Ma Shan Zheng", cursive;
    pointer-events: none;
    z-index: 0;
}

/* 缩略图布局 */
.post-grid {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}
.post-thumb {
    width: 200px; /* 加宽图片 */
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1); /* 图片阴影 */
}
.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 原：transition: filter 0.5s, transform 0.5s; */
    transition: filter 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.post-card:hover .post-thumb img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* --- 分页 (适配 Typecho 动态输出) --- */
/* Typecho 默认输出的 HTML 结构比较死板，只能通过 CSS 强行美化 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 40px; /* 增加底部间距，防止贴底 */
}

/* 将原来的 .page-link 改为下面的选择器 */
.pagination a,
.pagination span {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--ink-border);
    background: transparent;
    color: var(--ink-gray);
    font-size: 14px;
    border-radius: 50%; /* 圆形 */
    /* 原：transition: all 0.3s; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer;
}

/* 当前页 (Typecho 输出的是 <span class="active">) */
.pagination .active {
    background: var(--ink-black);
    color: #fff;
    border-color: var(--ink-black);
    cursor: default; /* 当前页不可点击 */
}

/* 悬停效果 (排除当前页) */
.pagination a:hover {
    border-color: var(--rouge);
    color: var(--rouge);
}

/* 针对省略号的微调 (可选) */
.pagination span:not(.active) {
    border: none; /* 省略号不需要边框 */
    cursor: default;
}

/* --- 侧边栏样式 --- */
/* 增加粘性定位 */
/* 侧边栏跟着滚，方便用户看目录或者个人信息 */
.sticky-sidebar {
    position: sticky;
    top: 90px;
}

.widget {
    margin-bottom: 50px;
    position: relative;
}

.widget-title {
    font-size: 18px;
    color: var(--ink-black);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink-black);
    font-weight: bold;
    display: inline-block;
    font-family: "Noto Serif SC";
}

.widget-title.pink-border { border-color: var(--rouge); }
.widget-title.gray-border { border-color: var(--ink-light); }


/* 旋转的文字环（装饰） */
.avatar-decoration {
    position: absolute;
    top: -25px; right: -12px;
    font-size: 28px;
    color: var(--seal-red);
    opacity: 0.8;
    font-family: "Ma Shan Zheng";
}

/* 个人简介增强 */
.profile-card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    /* 水墨晕染背景图（CSS模拟）
       background-image: radial-gradient(circle at top right, rgba(212, 138, 138, 0.1) 0%, transparent 40%);*/
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 15px;
    padding: 4px;
    border: 1px solid var(--ink-border);
    background: #fff;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* 原：transition: 0.5s; */
    transition: 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.profile-card:hover .avatar img { filter: grayscale(0); }

.author-name {
    font-size: 24px;
    margin-bottom: 8px;
}

.author-desc{
    color: var(--ink-gray);
}

.author-desc-second{
    font-size:14px;
    margin-bottom:15px;
    margin-top:10px;
    color: var(--ink-light);
}


.blessing-card {
    background:#fff;
    padding:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:180px;
    border:1px solid rgba(0,0,0,0.03);
}

.blessing-card-text{
    font-size:24px;
    color:var(--ink-black);
    line-height:2;
}

.social-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-links a {
    width: 30px;
    height: 30px;
    border: 1px solid var(--ink-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ink-gray);
}
.social-links a:hover {
    background: var(--ink-black);
    color: #fff;
    border-color: var(--ink-black);
}

/* 列表样式优化 */
.list-unstyled li {
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--ink-faint);
    padding-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.list-unstyled li:last-child { border-bottom: none; }

/* 用伪元素做列表点，更精致 */
.list-unstyled li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background: var(--ink-light);
    transform: rotate(45deg); /* 菱形点 */
    /* 原：transition: background 0.3s; */
    transition: background 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.list-unstyled li:hover::before { background: var(--rouge); }

.list-unstyled a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--ink-gray);
    /* 原：transition: transform 0.2s; */
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.list-unstyled li:hover a {
    transform: translateX(5px);
    color: var(--ink-black);
}

/* 标签云优化 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    font-size: 12px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--ink-border);
    color: var(--ink-gray);
    border-radius: 20px 0 20px 0; /* 异形圆角 */
    /* 原：transition: all 0.3s; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.tag-item:hover {
    background: var(--ink-black);
    color: #fff;
    border-color: var(--ink-black);
    border-radius: 0 20px 0 20px; /* 形状变化 */
}

/* 评论头像优化 */
.sidebar-comment-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background: rgba(255,255,255);
    padding: 10px;
    border-radius: 4px;
}
.sidebar-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-family: serif;
    font-weight: bold;
    flex-shrink: 0;
}

.sidebar-comment-item .sidebar-comment-user {
    font-size:12px;
    color:var(--ink-light);
}

.sidebar-comment-item .sidebar-comment-content {
    font-size:13px;
    color:var(--ink-gray);
    margin-top:4px;
}


.bg-pink { background-color: var(--rouge); }

/* --- 页脚 --- */
footer {
    background-color: var(--ink-black);
    color: #bbb;
    padding-top: 80px; /* 给山水图留位置 */
    padding-bottom: 40px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

/* 底部山水装饰SVG */
/* 这个 SVG 最好找个简单的山峦线条，翻转一下正好接在页脚顶部 */
.footer-decor {
    position: absolute;
    top: -1px; /* 稍微向上覆盖 */
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
    fill: var(--paper-bg); /* 与页面背景色一致 */
    transform: scaleY(-1); /* 翻转，让山峰向下指或者作为分割线 */
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

.footer-title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: normal;
    border-left: 3px solid var(--rouge);
    padding-left: 12px;
}

.footer-links li { margin-bottom: 12px; padding: 0; border: none; }
.footer-links li::before { display: none; } /* 移除底部的小点 */
.footer-links a:hover{
    color: var(--rouge)!important;
}

.newsletter-form {
    display: flex;
    border-bottom: 1px solid #444;
}

.newsletter-input {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    color: #fff;
    outline: none;
}

.newsletter-btn {
    padding: 10px 20px;
    background: transparent;
    color: var(--rouge);
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.newsletter-btn:hover { color: #fff; }

.copyright {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    position: relative;
    z-index: 2;
}

/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: var(--seal-red);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    /* 原：transition: all 0.4s; */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: "Ma Shan Zheng";
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 999;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    transform: translateY(-5px);
    background-color: var(--rouge-hover);
}

/* --- 响应式设计 --- */
/* 移动端适配，主要策略是堆叠布局和隐藏非核心元素 */
@media screen and (max-width: 900px) {
    .container { padding: 0 20px; } /* 移动端减小边距 */

    .main-layout {
        flex-direction: column;
        gap: 40px;
    }
    .content-left::after { display: none; } /* 移除竖线 */

    .content-left, .sidebar-right {
        flex: auto;
        width: 100%;
    }

    .hero-decor-left { display: none; } /* 移动端隐藏竖排装饰 */
}

@media screen and (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 20px 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        gap: 0;
        text-align: center;
    }

    .nav-menu.active { display: flex; }

    .nav-menu a {
        padding: 15px 20px;
        border-bottom: 1px dashed var(--ink-light);
        width: 100%;
    }
    .nav-menu a::before { display: none; }

    /* 移动端搜索框样式调整 */
    .search-widget {
        width: 80%;
        margin: 20px auto;
        justify-content: center;
    }
    .search-input {
        width: 100%;
        opacity: 1;
        border-bottom: 1px solid var(--ink-light);
        text-align: center;
    }

    .mobile-menu-btn { display: block; }
    .logo span { display: none; }
    .hero-title { font-size: 32px; }

    .post-grid { flex-direction: column; }
    .post-thumb { width: 100%; height: 180px; }

    .footer-grid { flex-direction: column; gap: 40px; }
    .copyright { flex-direction: column; gap: 15px; text-align: center; }

    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
    }
}



/* ==========================================================================
        新增文章详情页专用样式
        ========================================================================== */

/* 文章容器 */
/* 这里的样式是专门给 page.php 和 post.php 用的 */
.article-detail-card {
    background: #fff;
    padding: 50px 40px;
    margin-bottom: 50px;
    position: relative;
    border: 1px solid rgba(0,0,0,0.02);
    box-shadow: 0 5px 20px -10px rgba(0,0,0,0.05);
}

/* 顶部元信息区域 */
.article-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ink-faint);
}

.article-title {
    font-size: 32px;
    font-weight: bold;
    color: var(--ink-black);
    margin-bottom: 20px;
    line-height: 1.4;
}

.article-meta-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
    color: var(--ink-light);
    align-items: center;
}

.meta-item { display: flex; align-items: center; }
.meta-item svg { width: 14px; height: 14px; margin-right: 5px; fill: currentColor; }

/* =========================================
   文章正文样式
   ========================================= */
.article-body {
    font-family: "Noto Sans SC", sans-serif;
    font-size: 18px;
    line-height: 2;
    color: var(--ink-black);
    font-weight: normal;
    /* 两端对齐 + 任意截断*/
    /* 中文排版必须两端对齐才好看，不然右边参差不齐的 */
    text-align: justify;
    word-break: break-all;
}

.article-body p {
    margin-bottom: 10px;
    text-indent: 2em; /* 首行缩进 */

}

.article-body a {
    background: linear-gradient(to right, var(--rouge-hover), var(--rouge-hover)) 0 100% no-repeat;
    background-size: 0 1px;
    /* 原：transition: background-size 0.4s ease; */
    transition: background-size 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    color: var(--rouge);
}
.article-body a:hover {
    background-size: 100% 1px;

}

/* --- 列表容器通用重置 --- */
.article-body ol,
.article-body ul {
    margin: 20px 0;        /* 上下保持适度间距 */
    padding-left: 0;       /* 清除默认缩进，完全由 li 控制 */
    list-style: none;      /* 移除原生丑陋的黑点/数字 */
    counter-reset: li-counter; /* 开启计数器 */
}

/* --- 列表项通用布局 --- */
.article-body li {
    position: relative;
    padding-left: 32px;    /* 左侧留白，给序号腾位置 */
    margin-bottom: 10px;   /* 条目间距，呼吸感 */
    line-height: 1.8;      /* 继承正文行高 */

    /* 核心：文字颜色不设置，自动继承父级颜色 */
}

/* 修复 Typecho 编辑器可能产生的内部 p 标签间距问题 */
.article-body li p {
    margin: 0;
    text-indent: 0;
}

/* --- 有序列表 (OL) - 01. 风格 --- */
/* 设计思路：使用斜体衬线数字，小巧精致，像批注 */
.article-body ol li::before {
    counter-increment: li-counter;
    /* 使用 01. 02. 格式，比单纯的 1. 更显精致整齐 */
    content: counter(li-counter, decimal-leading-zero) ".";

    position: absolute;
    left: 0;
    top: 0px;  /* 顶部对齐 */

    /* 字体设计 */
    font-family: Georgia, "Times New Roman", serif; /* 英文衬线体，数字最漂亮 */
    font-style: italic;    /* 斜体，增加灵动感 */
    font-size: 14px;       /* 字号比正文(17px)小，精致不突兀 */
    font-weight: bold;

    color: var(--rouge);   /* 仅序号使用胭脂红 */
    opacity: 0.8;          /* 稍微降低一点饱和度，更耐看 */

    transition: all 0.3s ease;
}

/* 悬停微效：序号变实 */
.article-body ol li:hover::before {
    opacity: 1;
    transform: translateX(2px); /* 微微向右动一下，表明选中 */
}

/* --- 无序列表 (UL) - 极简短线 --- */
/* 设计思路：舍弃圆点，使用一条精致的短横线，极简 */
.article-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;             /* 垂直居中 (根据行高1.8微调) */

    width: 10px;           /* 符号很小，不抢眼 */
    height: 1px;           /* 极细 */

    background-color: var(--rouge);
    opacity: 0.6;          /* 淡淡的一笔 */

    transition: all 0.3s ease;
}

/* 悬停微效：短线变长 */
.article-body ul li:hover::before {
    width: 15px;           /* 伸长一点点 */
    opacity: 1;
}


/* 列表、引用块、代码块不需要缩进 */
/* 避免这些元素继承了段落的缩进，导致排版错位 */
.article-body ul,
.article-body ol,
.article-body li,
.article-body blockquote,
.article-body pre,
.article-body code,
.article-body .btn,
.article-body .inlineBlock{
    text-indent: 0;
}

/* 图片容器通常也不需要缩进，否则会歪 */
.article-body figure,
.article-body div.img-container {
    text-indent: 0;
}



/* 3. 再次确保图片本身不偏移 */
.article-body img {
    /* 即使父级有缩进，强制图片块级显示通常能避免继承问题 */
    display: block;
    margin: 0 auto;
    max-width: 100%;
}


/* 地址引用样式 */
.location-quote {
    background-color: var(--ink-border);
    padding: 0 20px 0 16px;
    margin: 30px 0;
    border-radius: 3px;
    font-style: italic;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: fit-content;
    /* max-width 这里限制了父容器的最大宽度，子元素超出后就会触发省略 */
    max-width: 100%;
}

.location-text {
    flex-grow: 1;
    min-width: 0; /* 关键：在 flex 布局中防止内容撑开容器 */

    /* --- 核心三件套 --- */
    white-space: nowrap;      /* 1. 强制不换行 */
    overflow: hidden;         /* 2. 隐藏超出部分 (你漏了这个) */
    text-overflow: ellipsis;  /* 3. 超出部分用省略号显示 */
    /* ----------------- */

    font-weight: bold;
    color: var(--ink-black);
}

.location-icon { margin-right: 2px; font-style: normal; }

/* 文章标签样式 */
.article-tags {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--ink-faint);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tags-label {
    font-size: 14px;
    color: var(--ink-black);
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-right: 5px;
}


.tags-label svg { width: 16px; height: 16px; margin-right: 4px; fill: currentColor; }

.tag-pill {
    display: inline-block;
    font-size: 13px;
    padding: 6px 16px;
    color: var(--ink-black);
    background: var(--paper-bg) !important;
    border: 1px solid var(--ink-border);
    border-radius: 50px; /* 胶囊圆角 */
    /* 原：transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    line-height: 1;
    background-size: unset!important;
}

.tag-pill:hover {
    background: var(--rouge)!important;
    color: #fff;
}



/* 上下篇导航 */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px dashed var(--ink-border);
    border-bottom: 1px dashed var(--ink-border);
}

.nav-link {
    flex: 1;
    font-size: 14px;
    color: var(--ink-gray);
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 48%; /* 保持桌面端左右对齐 */
}

.nav-link.next { text-align: right; }
.nav-link:hover { color: var(--rouge); }
.nav-label { font-size: 12px; color: var(--ink-light); }
.nav-title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   评论区样式 (Modified for Threaded Comments & Reply Button)
   ========================================================================== */
.comments-section {
    margin-top: 60px;
    font-family: "Noto Sans SC", sans-serif;
}
.section-header {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.section-header::before {
    content: ''; display: inline-block; width: 6px; height: 20px;
    background-color: var(--ink-black); margin-right: 12px;
}

/* =========================================
   评论列表容器
   ========================================= */
.comment-list {
    margin-bottom: 40px;
}

/* =========================================
   单条评论项 (逻辑核心修改)
   ========================================= */

/* 1. 【母-母 间距】顶层评论 (第一级)
   使用直接子元素选择器 > 确保只影响最外层 */
/* 这里处理的是“楼层”之间的间距 */
.comment-list > .comment-post-item {
    margin-bottom: 40px;        /* 话题与话题之间离得远一点 */
    padding-bottom: 40px;       /* 增加内部留白 */
    border-bottom: 1px dashed var(--ink-faint); /* (可选) 加个虚线分割，更清晰 */
}

/* 去掉最后一个顶层评论的下边距和分割线 */
.comment-list > .comment-post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 2. 【子-子 间距】嵌套内的评论 (第二级及以上)
   只要是在 .comment-children 里的评论，都属于子评论 */
.comment-children .comment-post-item {
    margin-bottom: 12px; /* 子评论之间离得很近，保持对话紧凑感 */
    padding-bottom: 0;   /* 子评论不需要底部分割线 */
    border-bottom: none;
}

/* 防止嵌套层级过深时底部留白叠加 */
.comment-children > .comment-post-item:last-child {
    margin-bottom: 0;
}

/* =========================================
   评论主体内容
   ========================================= */
.comment-main {
    display: flex;
    gap: 16px;
}

.comment-avatar-large {
    width: 50px; height: 50px;
    background: var(--ink-faint);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--ink-gray);
    margin-top: 8px;
}

.comment-content-box {
    flex: 1;
    min-width: 0;
}

.comment-user {
    font-weight: 600;
    font-size: 18px;
    color: var(--ink-black);
    margin-bottom: 4px; /* 名字和内容的间距再小一点 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-time {
    font-size: 12px;
    color: var(--ink-light);
    font-weight: normal;
    opacity: 0.8;
}

.comment-text {
    margin-top: 10px;
    font-size: 16px;
    color: var(--ink-black);
    line-height: 1.6; /* 行高稍微收一点点，更紧凑 */

}

/* --- 评论区代码块样式定制 --- */

/* 行内代码 (Inline Code) - 朱批风格 */
/* 就像古人在书信中用红笔圈出来的重点 */
.comment-text code {
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    color: var(--rouge);             /* 字体用胭脂红 */
    background-color: rgba(0,0,0,0.03); /* 极淡的墨色底，比正文稍微深一点点 */
    padding: 2px 5px;
    margin: 0 3px;
    border-radius: 3px;
    font-size: 0.9em;                /* 稍微小一点，显得精致 */
    border: 1px solid rgba(212, 138, 138, 0.15); /* 极淡的红边框 */
    vertical-align: middle;
}

/* 代码块容器 (Pre Block) - 附笺风格 */
.comment-text pre {
    display: block;
    background-color: #f6f6f6;       /* 接近纸张的灰白色 */
    color: var(--ink-black);
    padding: 12px 15px;              /* 评论区空间宝贵，内边距收紧 */
    margin: 10px 0;                  /* 上下间距适中 */
    border-radius: 4px;

    /* 关键：使用虚线边框，比实线更灵动，符合评论区的“随手感” */
    border: 1px dashed var(--ink-border);

    overflow-x: auto;                /* 超出宽度显示滚动条 */
    line-height: 1.5;
    font-size: 13px;                 /* 字号比正文小，方便阅读代码 */
    font-family: Consolas, Monaco, monospace;
    position: relative;
}

/* 重置代码块内的 code 样式 */
/* 防止 pre 里面的代码继承上面的红色朱批样式，恢复为黑字 */
.comment-text pre code {
    background-color: transparent;
    color: inherit;                  /* 跟随 pre 的深灰色 */
    padding: 0;
    margin: 0;
    border: none;
    font-size: inherit;
}

/* 滚动条美化 (Webkit) */
/* 让滚动条也变得细长、雅致 */
.comment-text pre::-webkit-scrollbar {
    height: 4px;                     /* 评论区滚动条更细 */
}
.comment-text pre::-webkit-scrollbar-thumb {
    background-color: var(--ink-light);
    border-radius: 2px;
}
.comment-text pre::-webkit-scrollbar-track {
    background-color: transparent;
}

/* =========================================
   【关键】嵌套/盖楼 容器控制
   ========================================= */
.comment-children {
    /* 3. 【母-子 间距】让子评论区紧贴着母评论内容 */
    margin-top: 8px; /* 之前是 16px/20px，现在改为 8px，非常紧凑 */

    /* 缩进和连线 */
    padding-left: 15px; /* 缩进稍微减小，为了视觉更聚合 */
    margin-left: 5px;

    /* 弱化左侧线条，避免视觉割裂太强 */
    border-left: 2px solid rgba(0,0,0,0.05);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .comment-children {
        padding-left: 10px;
        margin-left: 2px;
    }
}

/* =========================================
   操作区
   ========================================= */
.comment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 如果觉得回复按钮离文字太远，可以用负 margin 往上提，
       或者保持现状 */
    margin-top: 0;
}

.comment-actions a{
    font-size: 14px;
}


label { display: block; font-size: 13px; color: var(--ink-gray); margin-bottom: 8px; }

/* 水墨风输入框：只有底部边框 */
.ink-input {
    width: 100%;
    padding: 10px 5px;
    border: none;
    border-bottom: 1px solid var(--ink-border);
    background: rgba(0,0,0,0.01);
    font-family: inherit;
    color: var(--ink-black);
    /* 原：transition: all 0.3s; */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 2px 2px 0 0;
}

.ink-input:focus {
    background: rgba(0,0,0,0.03);
    border-bottom-color: var(--rouge);
    outline: none;
}

textarea.ink-input { resize: vertical; min-height: 120px; border: 1px solid var(--ink-border); /* 文本域给全边框看起来规整些 */ }
textarea.ink-input:focus { border-color: var(--rouge); }

.submit-btn {
    background-color: var(--ink-black);
    color: #fff;
    border: none;
    padding: 10px 30px;
    font-size: 14px;
    cursor: pointer;
    /* 原：transition: 0.3s; */
    transition: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.submit-btn:hover { background-color: var(--rouge); }

/* 响应式调整 */
@media screen and (max-width: 900px) {
    .container { padding: 0 20px; }
    .main-layout { flex-direction: column; gap: 40px; }
    .content-left::after { display: none; }
    .content-left, .sidebar-right { flex: auto; width: 100%; }
    .hero-decor-left { display: none; }
}
@media screen and (max-width: 768px) {

    /* 文章页特定响应式 */
    .article-detail-card { padding: 30px 20px; }
    .article-title { font-size: 24px; }
    .comment-form-grid { grid-template-columns: 1fr; }

    /* 手机端元信息排版优化 */
    .article-meta-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .article-meta-row .meta-item {
        background: #f5f5f5;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
    }
    .article-meta-row .meta-item:nth-child(even) { display: none; }

    /* 手机端标签优化 */
    .article-tags { gap: 8px; margin-top: 15px; }
    .tag-pill { padding: 5px 12px; font-size: 12px; }

    /* 手机端上一篇下一篇导航优化 */
    .post-navigation {
        flex-direction: column;
        gap: 15px;
    }
    .nav-link {
        max-width: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.02);
        padding: 15px;
        border-radius: 6px;
        text-align: left;
    }
    .nav-link.next { text-align: left; }
    .nav-title {
        white-space: normal;
        line-height: 1.5;
        height: auto;
    }
    .nav-link.next .nav-label { align-self: flex-start; }

    /* 手机端评论嵌套优化，减小缩进防止过窄 */
    .comment-children { margin-left: 10px; padding-left: 10px; }
}


/* ==========================================================================
   评论表单布局补丁 (右上角取消 / 右下角提交)
   ========================================================================== */

/* 1. 确保父容器是定位基准 (有此属性，这里是保险起见) */
.comment-form-card {
    position: relative;
    background: #fff;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* 2. 取消回复按钮 - 绝对定位到右上角 */
/* 为了防止误触，把它放到角落里去 */
.comment-form-card .cancel-comment-reply {
    position: absolute;
    top: 7px;           /* 距离顶部 */
    right: 28px;        /* 距离右侧 */
    z-index: 10;        /* 确保在上层 */

}


/* 3. 取消回复的文字样式 - 纯文字风格 */
.comment-form-card .cancel-comment-reply a {
    font-size: 14px;
    color: var(--ink-black); /* 淡墨色 */
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    /* 原：transition: color 0.3s; */
    transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 鼠标悬停变红 */
.comment-form-card .cancel-comment-reply a:hover {
    color: var(--rouge);     /* 胭脂红 */
}

/* 4. 底部提交按钮栏 - 右下角对齐 */
.comment-form-card .form-bottom-bar {
    display: flex;
    justify-content: flex-end; /* 关键：内容靠右对齐 */
    margin-top: 10px;          /* 与输入框的间距 */
    margin-bottom: 0;
}

.comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 2px;
    margin-top: 5px;
}
.form-group { margin-bottom: 0; }
.form-group label {
    color: var(--ink-black);
}
.form-group.full-width { grid-column: 1 / -1; margin-bottom: 0; }

/* ==========================================================================
            Category Archive: 水墨流年 (Ink Flow Timeline) - 最终优化版
            ========================================================================== */

/* --- 头部样式 --- */
.category-header-box {
    margin-bottom: 60px;
    position: relative;
    padding-left: 20px;
}
.category-header-title {
    font-size: 32px;
    color: var(--ink-black);
    margin-bottom: 15px;
    margin-top: 20px;
}
.category-header-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: var(--ink-light);
}
.category-header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--ink-black) 0%, transparent 100%);
    opacity: 0.2;
}

/* --- 时间轴容器 --- */
.category-timeline-wrapper {
    position: relative;
    padding-bottom: 20px;
}

/* --- 单篇文章条目 --- */
.category-post-item {
    display: flex;
    position: relative;
    margin-bottom: 0;
}

/* 1. 左侧：时间列 */
.category-time-column {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 20px;
    position: relative;
}
.category-date-group {
    text-align: right;
    line-height: 1;
    /* 原：transition: transform 0.3s; */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.category-post-item:hover .category-date-group {
    transform: scale(1.05);
}
.category-day {
    display: block;
    font-size: 28px;
    font-family: "Noto Serif SC", serif;
    font-weight: bold;
    color: var(--ink-black);
}
.category-month {
    display: block;
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 竖线 */
.category-v-line {
    position: absolute;
    top: 15px;
    bottom: -2px;
    right: -1px;
    width: 1px;
    background-color: var(--ink-border);
    z-index: 0;
}
.category-post-item:last-of-type .category-v-line {
    background: linear-gradient(to bottom, var(--ink-border), transparent);
    bottom: 0;
}

/* 2. 中间：水墨节点 */
.category-ink-dot-wrapper {
    position: relative;
    width: 0;
    display: flex;
    justify-content: center;
}
.category-ink-dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid var(--ink-gray);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: -5px;
    z-index: 2;
    /* 原：transition: all 0.4s; */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.category-post-item:hover .category-ink-dot {
    background-color: var(--rouge);
    border-color: var(--rouge);
    transform: scale(1.4);
    box-shadow: 0 0 0 4px rgba(212, 138, 138, 0.2);
}

/* 3. 右侧：内容卡片 (PC端默认) */
.category-card-content {
    flex: 1;
    background: #fff;
    padding: 25px 30px;
    margin-left: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 4px;
    position: relative;
    /* 原：transition: all 0.4s ease; */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.category-card-content::before { /* PC端连接线 */
    content: '';
    position: absolute;
    left: -6px;
    top: 14px;
    width: 10px;
    height: 1px;
    background-color: var(--ink-border);
    /* 原：transition: width 0.3s; */
    transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 悬停效果 */
.category-post-item:hover .category-card-content {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
}
.category-post-item:hover .category-card-content::before {
    background-color: var(--rouge);
    width: 15px;
    left: -15px;
}

.category-post-title {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: bold;
}
.category-post-title a {
    color: var(--ink-black);
    background-image: linear-gradient(to right, var(--rouge) 0%, var(--rouge) 100%);
    background-size: 0px 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    /* 原：transition: background-size 0.4s; */
    transition: background-size 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    padding-bottom: 2px;
}
.category-post-item:hover .category-post-title a {
    background-size: 100% 1px;
    color: var(--rouge);
}

/* 摘要：PC端样式 */
.category-post-excerpt {
    font-size: 14px;
    color: var(--ink-black);
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.category-post-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: var(--ink-light);
    border-top: 1px dashed rgba(0,0,0,0.05);
    padding-top: 12px;
}
.category-post-meta svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}
.meta-icon { display: flex; align-items: center; }

.category-end-dot {
    width: 6px;
    height: 6px;
    background: var(--ink-border);
    border-radius: 50%;
    margin-left: 77px;
    margin-top: -20px;
}

/* ==========================================================================
   响应式设计 (手机端优化：扁长矩形卡片)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 头部调整 */
    .category-header-box {
        padding-left: 0;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px dashed var(--ink-border);
    }
    .category-header-title { font-size: 24px; margin-bottom: 5px; }
    .category-header-line { display: none; }

    /* 时间轴布局调整 */
    .category-timeline-wrapper { padding-left: 0; }

    /* 时间列：压扁 */
    .category-time-column {
        width: 42px; /* 进一步收窄 */
        padding-right: 8px;
        align-items: center;
    }
    .category-day { font-size: 16px; line-height: 1.2; }
    .category-month { font-size: 10px; margin-top: 0; transform: scale(0.9); }
    .category-v-line { right: 0px; top: 18px; bottom: -20px; }

    /* 节点调整 */
    .category-ink-dot-wrapper { left: -1px; }
    .category-ink-dot {
        width: 8px; height: 8px;
        top: 14px; /* 对齐标题中心 */
        left: -4px;
        border-width: 2px;
    }

    /* 卡片主体：扁平化核心 */
    .category-card-content {
        margin-left: 12px; /* 紧贴时间轴 */
        margin-bottom: 15px; /* 上下间距减小 */
        padding: 12px 15px; /* 内边距减小，让卡片更扁 */
        border-radius: 3px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* 微微的浮起感 */
        transform: none !important;
    }
    .category-card-content::before { display: none; } /* 隐藏装饰线 */

    /* 标题：限制行数 */
    .category-post-title {
        font-size: 16px;
        margin-bottom: 6px;
        /* 限制标题最多显示1行，若想显示2行改为 line-clamp: 2 */
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal; /* 允许换行但被clamp截断 */
    }

    /* 摘要：核心优化 - 极简模式 */
    .category-post-excerpt {
        font-size: 13px; /* 字体更小 */
        line-height: 1.5; /* 行高更紧凑 */
        margin-bottom: 8px; /* 底部留白极小 */
        color: #777;

        /* 强制只显示 2 行 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: auto;
    }

    /* Meta信息：极致压缩 */
    .category-post-meta {
        padding-top: 0;
        border-top: none;
        font-size: 12px;
        gap: 12px;
    }
    .category-post-meta svg { width: 12px; height: 12px; margin-right: 3px; }

    /* 底部结束点 */
    .category-end-dot { margin-left: 40px; }
}

/* ==========================================================================
   年份分割线 (Year Break) - 解决跨年问题
   ========================================================================== */

.category-year-break {
    position: relative;
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 30px;    /* 与上一年拉开距离 */
    margin-bottom: 10px; /* 与下文拉开距离 */
    z-index: 1;
}

/* 1. 左侧年份文字 */
.category-year-break .year-text {
    width: 80px; /* 与时间列宽度一致，保持对齐 */
    text-align: right;
    padding-right: 20px;
    font-size: 36px; /* 大号字体 */
    color: var(--rouge);
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; /* 描边效果防止被线遮挡 */
    /* 原：transition: color 0.3s; */
    transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}


/* 2. 右侧装饰线 */
.category-year-break .year-line-decoration {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--ink-border) 0%, transparent 100%);
    margin-left: 25px; /* 避开中间的节点区域 */
    position: relative;
}

/* 装饰线开头的小圆点，增加仪式感 */
.category-year-break .year-line-decoration::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-border);
}


/* --- 响应式适配 (手机端) --- */
@media screen and (max-width: 768px) {
    .category-year-break {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* 手机端年份文字调整 */
    .category-year-break .year-text {
        width: 45px; /* 与手机端时间列宽度一致 */
        padding-right: 10px;
        font-size: 24px; /* 稍微调小 */
    }

    /* 装饰线位置微调 */
    .category-year-break .year-line-decoration {
        margin-left: 15px;
    }
}



/* 文章界面的 Tips */
/* 这里参考了 Material Design 的 Alert 组件，但是颜色调淡了，符合整体风格 */
.tip {
    background: #eef6fd;
    padding: 8px 20px;
    border-left: 3px solid #38a3fd;
    border-radius: 0 5px 5px 0;
    margin-bottom: 10px;
    color: #777;
    position: relative;
}

.tip:before {
    background: #38a3fd;
    border-radius: 50%;
    color: #fff;
    content: "i";
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    height: 21px;
    line-height: 21px;
    margin-left: -32px;
    margin-top: 5px;
    position: absolute;
    text-align: center;
    width: 21px
}

.tip ol {
    margin: 0
}

.tip.share {
    border-left-color: #ddd;
    background: #efefef
}

.tip.share:before {
    background: #ddd;
    content: "\0040"
}

.tip.green {
    border-left-color: #86cc00;
    background: #f0f8e5
}

.tip.green:before {
    background: #86cc00;
    content: "\221a"
}

.tip.yellow {
    border-left-color: #ff7800;
    background: #fcf2e9
}

.tip.yellow:before {
    background: #ff7800;
    content: "\0021"
}

.tip.red {
    border-left-color: #ed0000;
    background: #fcf1f1
}

.tip.red:before {
    background: #ed0000;
    content: "\00D7"
}

.tip.inlineBlock {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.tip.simple {
    border: none;
    border-radius: 5px !important;
    background: none
}

.tip.small {
    padding: 0 10px
}

.tip.small p {
    margin-bottom: 0 !important
}

.tip.simple:before {
    display: none
}

/* 文章界面的按钮 */
/* Bootstrap 风格的按钮，但是去掉了阴影，更扁平 */
.article-body .btn {
    display: inline-block;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    /* 原 transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;*/
    transition: color .15s cubic-bezier(0.4, 0.0, 0.2, 1), background-color .15s cubic-bezier(0.4, 0.0, 0.2, 1), border-color .15s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow .15s cubic-bezier(0.4, 0.0, 0.2, 1);
    margin-top: 10px;
    margin-bottom: 10px;
}
.article-body .btn.info {
    background-color: #448AFF!important;
}

.article-body .btn.success {
    background-color: #4CAF50!important;
}


/* --- 引用块样式：水墨晕染 --- */
/* 这里的背景色是极淡的红色，就像胭脂水滴在纸上晕开的感觉 */
.article-body blockquote {
    position: relative;
    margin: 25px 0;
    padding: 20px 25px;
    /* 左侧边框：默认使用淡墨色 */
    border-left: 5px solid var(--rouge);
    color: var(--ink-gray);
    border-radius: 0 4px 4px 0; /* 右侧圆角 */
    /* 原：transition: all 0.4s ease; */
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* 背景稍微带一点点暖色 */
    background-color: rgba(212, 138, 138, 0.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);

}

/* 引用块内的段落处理，去除首行缩进（因为在外面全局设置了缩进） */
.article-body blockquote p {
    text-indent: 0;
    margin-bottom: 10px;
    font-size: 16px; /* 字体可以稍微小一点点，或者保持一致 */
    line-height: 1.8;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

/* 装饰：右上角的大引号背景（可选，增加设计感） */
.article-body blockquote::after {
    content: '”';
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 60px;
    font-family: "Ma Shan Zheng", serif; /* 使用毛笔字体 */
    color: rgba(0,0,0,0.03); /* 极淡，若隐若现 */
    pointer-events: none;
}

/* --- 新增：代码块外部容器 --- */
/* 作用：作为定位基准，确保按钮固定，同时让内部的 pre 负责滚动 */
.code-wrapper {
    position: relative;
    margin: 25px 0; /* 将原本 pre 的外边距移到这里 */
    border-radius: 4px;
    /* 可选：给容器也加个阴影，更有层次感 */
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.05); */
}

/* --- 修改：代码块本体 --- */
.article-body pre {
    display: block;
    /* margin: 25px 0;  <-- 删掉或设为0，由 wrapper 控制外边距 */
    margin: 0;
    padding: 20px;
    overflow: auto;
    line-height: 1.6;
    font-size: 14px;
    color: #333;
    background-color: #f0f0f0;
    border-radius: 4px; /* 保持圆角 */
    border: 1px solid rgba(0,0,0,0.05);
    font-family: "Myna", Consolas, Monaco, monospace;
}


/* --- 复制按钮 - 黑色半透明 & 动画进阶版 --- */
.code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;

    /* 1. 基础外观：黑色半透明毛玻璃 */
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;

    /* 2. 关键优化：防止文字长度变化(复制vs已复制)导致按钮宽度跳动 */
    min-width: 65px;     /* 给一个最小宽度 */
    text-align: center;  /* 文字居中 */

    /* 3. 核心动画：这是“恢复”时的动画逻辑 (从 .copied 变回原样) */
    /* transform 负责缩放回原大小，background-color 负责颜色慢慢褪去 */
    transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            background-color 0.6s ease, /* 颜色恢复慢一点，显得丝滑 */
            color 0.6s ease;
}


/* --- 交互逻辑修改 --- */
/* 现在鼠标悬停在 wrapper 上时显示按钮 */
.code-wrapper:hover .code-copy-btn {
    opacity: 1;
}

/* 按钮悬停状态：加深背景，文字变亮 */
.code-copy-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* 更黑 */
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* --- 状态：复制成功 (激活状态) --- */
.code-copy-btn.copied {
    /* 绿色半透明背景 */
    background-color: rgba(34, 139, 34, 0.9);
    color: #fff;
    border-color: transparent;

    /* 4. 激活时的动画：这是“变成已复制”时的逻辑 */
    /* 使用贝塞尔曲线 (cubic-bezier) 模拟弹跳效果，速度较快 (0.2s) */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* 稍微放大一点，产生“按压反馈” */
    transform: scale(1.05);
}

/* 滚动条美化（Webkit） */
.article-body pre::-webkit-scrollbar {
    height: 6px;
}
.article-body pre::-webkit-scrollbar-thumb {
    background-color: var(--ink-light);
    border-radius: 3px;
}

/* --- 行内代码样式：朱批感 --- */
/* 行内代码用红色点缀，就像古人读书时的朱批 */
.article-body code {
    font-family: "Myna", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* 等宽字体 */
    background-color: rgba(255, 255, 255, 0.6); /* 半透明白底，增加层次 */
    color: var(--rouge); /* 使用胭脂红，像批注 */
    padding: 2px 6px;
    margin: 0 3px;
    border-radius: 3px;
    border: 1px solid rgba(212, 138, 138, 0.2); /* 极淡的红边框 */
    font-size: 0.9em; /* 稍微缩小一点，更精致 */
    vertical-align: middle;
}

/* 兼容性处理：如果是 pre 包裹的 code (代码块)，则复位这些样式 */
.article-body pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    border: none;
    font-size: inherit;
}


/* 正文和评论视频样式 */
.article-body video, .comments-section video {
    max-width: 100%;
    font-size: 0;
    display: grid;
    border-radius: 5px;
}



.article-body video, .comments-section video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    background-color: rgba(0, 0, 0, 0.61);
}



/* =========================================
   滚动显现动画 (循环触发版 CSS)
   适用于站点带有卡片样式的组件弹出
   ========================================= */

/* 1. 基础状态 (也是复位后的状态) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px); /* 默认位置在下方 */

    /* 关键动画设置 */
    /* 关键：transition 写在这里，保证 出现 和 消失 都有动画 */
    /* opacity: 控制淡入时间 */
    /* transform: 控制上浮时间，贝塞尔曲线模拟“浮起”的物理感 */
    transition:
            opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1),
            transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

    will-change: opacity, transform;
}

/* 2. 可见状态 */
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0); /* 浮动归位 */
}

/* 兼容性处理：
   为了防止动画和 .post-card 原有的 hover 效果（上浮-5px）冲突，
   我们需要确保 visible 之后，transform 还能响应 hover。

   (由于上面的 transition 包含了 transform，它可能会覆盖 hover 的速度，
    但因为你的 post-card hover 也是 transform，效果会叠加，这里不需要额外 hack，
    只要动画结束，hover 就会正常生效)
*/