/* ==========================================================================
   common.css —— 蔚蓝档案 · 杏山和纱（Kyoyama Kazusa）主题站  全局基础样式
   --------------------------------------------------------------------------
   本文件是全站公共样式，每个页面都用 <link rel="stylesheet" href="common.css"> 引入。

   文件目录（按顺序阅读）：
     01. 主题变量            —— 换肤开关：颜色 / 圆角 / 阴影 / 动画时长
     02. 全局重置            —— 清除浏览器默认样式，统一盒模型与字体
     03. 页面基础与通用工具类 —— body 背景、内容容器 .container、卡片 .card
     04. 顶部导航栏          —— 固定定位 + 毛玻璃 + 滚动加深 + 当前页高亮
     05. 移动端汉堡菜单      —— 小屏幕折叠导航，点击展开
     06. 返回顶部按钮        —— 右下角圆形箭头按钮
     07. 页脚                —— 版权说明文字
     08. 响应式适配          —— 手机/平板断点调整
   ========================================================================== */


/* ==========================================================================
   01. 主题变量
   --------------------------------------------------------------------------
   :root 选中 <html> 根元素。变量定义在这里，全站任何选择器都能用 var() 取到。
   好处：以后想换角色配色，只改这一处，全站自动生效，不用满文件搜索替换。
   ========================================================================== */
:root {
    /* ---------- 颜色（都取自角色本身，改这里就能整体换肤） ---------- */
    --primary-color: #45619E;                          /* 主色：她头发与制服的海军蓝（比原来的亮蓝更沉、更贴角色） */
    --primary-rgb: 69, 97, 158;                        /* 主色的 RGB 分量，用来拼半透明色：rgba(var(--primary-rgb), 0.12) */
    --primary-light: #6A83BC;                          /* 主色的浅版，用于渐变、悬停的第二个色停 */
    --secondary-color: #F292AE;                        /* 辅助色：她发梢挑染的那抹粉 */
    --secondary-rgb: 242, 146, 174;                    /* 辅助色的 RGB 分量，同上 */
    --accent-color: #D0465F;                           /* 强调色：她眼睛与武器上的绯红，用于标签、重点文字 */
    --bg-color: #F3F1F9;                               /* 页面底色（纯色兜底：极少数旧浏览器不支持渐变时用它） */
    /* 页面背景图：三层叠加，全部由主色/辅助色的 RGB 分量拼出来，换主色时背景跟着变
         第 1 层 左上角蓝雾   ← 她制服的海军蓝
         第 2 层 右下角粉雾   ← 她发梢的粉
         第 3 层 从上到下的大渐变（冷蓝白 → 浅紫白 → 暖粉白）
       想换风格只改这一个变量即可，最后一行的三个色值就是整体色调 */
    --bg-image:
        radial-gradient(900px 620px at 8% -4%, rgba(var(--primary-rgb), 0.20), transparent 66%),
        radial-gradient(820px 640px at 94% 102%, rgba(var(--secondary-rgb), 0.30), transparent 68%),
        linear-gradient(180deg, #E9EFFA 0%, #F6F2FA 52%, #FBEFF4 100%);
    --card-bg: rgba(255, 255, 255, 0.9);               /* 卡片背景：带 10% 透明，能隐约透出页面底色 */
    --text-main: #2A2F45;                              /* 主要文字：偏蓝黑的深色（呼应她的发色），比纯黑柔和 */
    --text-light: #666C80;                             /* 次要文字：偏紫灰，用于说明文字、页脚、未选中菜单 */

    /* ---------- 形状与阴影 ---------- */
    --radius: 12px;                                    /* 全局统一圆角，让卡片/按钮/输入框风格一致 */
    /* 阴影用"带主色的冷调深色"而不是纯黑：纯黑阴影压在偏紫的底色上会发灰发脏 */
    --shadow: 0 2px 12px rgba(38, 47, 74, 0.08);       /* 默认阴影：轻微浮起感，表示"这是一个块" */
    --shadow-hover: 0 4px 20px rgba(38, 47, 74, 0.14); /* 悬停阴影：范围更大更明显，暗示"可以交互" */

    /* ---------- 动画 ---------- */
    --transition: all 0.3s ease;                       /* 全站统一过渡：0.3 秒 + 先快后慢，动作不突兀 */

    /* ---------- 派生尺寸（为了改一处全局生效，这里也抽成变量） ---------- */
    --nav-height: 64px;                                /* 导航栏高度：body 顶部留白、锚点定位偏移都引用它 */
    --content-width: 1200px;                           /* 内容区最大宽度，屏幕再宽也不会拉伸变形 */
}


/* ==========================================================================
   02. 全局重置
   --------------------------------------------------------------------------
   不同浏览器对标签有各自的默认样式（比如 body 有外边距、h1 有大字号加粗）。
   这里统一"清零"，保证所见即所得、多浏览器表现一致。
   ========================================================================== */

/* 通配符选中所有元素；::before / ::after 是伪元素，也要一起重置，
   否则给某元素加了伪元素后会因为它没算进 border-box 而撑破布局 */
*,
*::before,
*::after {
    margin: 0;                  /* 清除默认外边距（标签之间的空隙） */
    padding: 0;                 /* 清除默认内边距（内容与边框之间的距离） */
    box-sizing: border-box;     /* 关键：width 包含 padding 和 border，布局计算更直观 */
}

/* html 是整棵文档树的根，字体设在这里，子元素默认继承 */
html {
    scroll-behavior: smooth;                                  /* 点击锚点链接时平滑滚动，而不是瞬间跳过去 */
    scroll-padding-top: calc(var(--nav-height) + 16px);       /* 锚点跳转时预留导航栏高度，避免标题被固定导航挡住 */
}

body {
    /* 字体按优先级回退：先英文圆体，再微软雅黑，最后任意无衬线字体 */
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 16px;                          /* 基准字号，其他文字用 rem 相对它计算 */
    line-height: 1.7;                         /* 行高约为字号的 1.7 倍，中文段落更好读 */
    color: var(--text-main);                  /* 正文颜色统一取变量 */
    background-color: var(--bg-color);        /* 页面底色（兜底） */
    padding-top: var(--nav-height);           /* 导航栏是固定定位、脱离了文档流，这里补上等高的内边距，内容才不会被压住 */
    -webkit-font-smoothing: antialiased;      /* 让字体在 Mac/高分屏上更细腻（可有可无的美化项） */
}

/* 背景层：用 body 的伪元素做一块"铺满视口、固定不动"的画布
   --------------------------------------------------------------------------
   为什么不直接写在 body 上？
     · 直接写 background-image 时，渐变是按"整篇文档高度"铺的，
       页面一长，颜色就被拉散、粉色跑到页面最底部，首屏基本看不出来；
     · 用 background-attachment: fixed 可以解决，但 iOS Safari 对它的支持一直有坑。
   所以这里改成 position: fixed 的独立图层：它永远和视口一样大、滚动时不动，
   视觉上就是"整站背后有一层固定的蓝粉渐变"。
   z-index:-2 让它排在所有内容（以及 z-index:-1 的右侧背景立绘）后面 */
body::before {
    content: "";
    position: fixed;
    inset: 0;                                 /* 上下左右全部贴边 */
    z-index: -2;
    background-image: var(--bg-image);
    pointer-events: none;                     /* 不拦鼠标事件 */
}

/* 链接默认带下划线和蓝色，站点里统一去掉下划线并继承父级颜色 */
a {
    color: inherit;
    text-decoration: none;
}

/* 列表默认有小圆点/数字，导航和卡片里不需要，统一去掉 */
ul,
ol {
    list-style: none;
}

/* 图片默认是行内元素，底部会出现几像素的缝隙；改成块级并限制最大宽度 */
img {
    display: block;
    max-width: 100%;
}

/* 表单控件默认字体和页面不一致（会变成宋体/13px），需要继承 */
button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* 按钮去掉浏览器默认的立体边框和灰底，方便自己定义主题样式 */
button {
    border: none;
    background: none;
    cursor: pointer;             /* 鼠标移上去变成小手，提示可点击 */
}

/* 尊重系统"减少动态效果"设置：这类用户对动画敏感，直接关掉过渡 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   03. 页面基础与通用工具类
   ========================================================================== */

/* .container：内容容器。水平居中 + 两侧留白，是所有页面内容的统一宽度基准 */
.container {
    width: 100%;
    max-width: var(--content-width);     /* 超过 1200px 就不再变宽 */
    margin: 0 auto;                      /* 左右 auto 实现水平居中 */
    padding: 0 24px;                     /* 两侧内边距：小屏时内容不贴边 */
}

/* .card：通用卡片。配合 --card-bg / --radius / --shadow 三个变量，
   以后换肤时卡片会自动跟着变 */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    transition: var(--transition);       /* 悬停时的变化也用统一的 0.3s ease */
}

/* 卡片悬停：阴影加深 + 轻微上移，产生"被拿起来"的反馈 */
.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);         /* Y 轴负值是向上移动 4px */
}

/* 通用区块标题：左侧一条主色竖线做装饰，呼应游戏内的卡片排版 */
.section-title {
    position: relative;                  /* 给 ::before 伪元素当定位参照物 */
    margin-bottom: 18px;
    padding-left: 14px;
    font-size: 1.5rem;
    color: var(--text-main);
}

.section-title::before {
    content: "";                         /* 伪元素必须写 content 才会显示，空字符串表示只画图形 */
    position: absolute;                  /* 相对 .section-title 定位，吸附在左边 */
    top: 50%;
    left: 0;
    width: 4px;
    height: 1.1em;                       /* 高度跟着字号走，标题字号变了竖线也协调 */
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
    transform: translateY(-50%);         /* 上移自身高度的一半，实现垂直居中 */
}


/* ==========================================================================
   04. 顶部导航栏
   --------------------------------------------------------------------------
   结构：<nav class="site-nav"> → <div class="nav-inner"> → 左侧 Logo + 右侧菜单
   .site-nav 负责"固定在顶部 + 背景毛玻璃"，.nav-inner 负责"内容居中对齐"。
   两层分开写的好处：背景可以铺满整行，而内容依然保持 1200px 居中。
   ========================================================================== */

.site-nav {
    position: fixed;                     /* 固定定位：脱离文档流，滚动时始终贴在窗口顶部 */
    top: 0;
    left: 0;
    width: 100%;                         /* 横向铺满 */
    height: var(--nav-height);
    z-index: 1000;                       /* 层级要高，保证盖在页面内容之上（数字越大越靠前） */

    /* 初始状态：半透明白 + 毛玻璃。backdrop-filter 会把导航栏背后的内容做模糊处理 */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(160%);   /* Safari 需要 -webkit- 前缀 */
    backdrop-filter: blur(12px) saturate(160%);           /* 12px 模糊 + 提高饱和度，画面更清透 */
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);   /* 主色的淡描边，分隔导航和内容 */
    opacity: 0.9;                                         /* 未滚动时整体 90% 不透明 */

    transition: var(--transition);       /* 背景、阴影、不透明度的变化都平滑过渡 0.3s */
}

/* 由 common.js 在页面滚动后给导航栏加上这个类，进入"已滚动"状态 */
.site-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.98);                /* 背景加深到接近纯白，文字更清晰 */
    opacity: 1;                                           /* 不透明度 100% */
    box-shadow: var(--shadow);                            /* 加阴影，和内容拉开层次 */
}

/* 移动端菜单展开时也恢复 100% 不透明
   原因：父元素 opacity 小于 1 时，子元素会连带变淡（opacity 是"整块一起透明"），
        手机菜单面板也是导航栏的子元素，所以展开时要让父级完全不透明 */
.site-nav.is-open {
    opacity: 1;
}

/* 内层容器：让 Logo 与菜单在导航栏内左右两端对齐，并垂直居中 */
.nav-inner {
    display: flex;                       /* 弹性布局：子元素默认横向排列 */
    align-items: center;                 /* 交叉轴（竖直方向）居中 */
    justify-content: space-between;      /* 主轴两端对齐：Logo 靠左，菜单靠右 */
    height: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- 左侧：角色名 Logo ---------- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;                            /* Logo 文字与左侧小圆点之间的间距 */
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;                 /* 字距稍微拉开，标题感更强 */
    color: var(--primary-color);
    transition: var(--transition);
}

/* Logo 左边的小圆点：用伪元素画，不用额外的 HTML 标签 */
.nav-logo::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;                                        /* 50% 圆角 = 正圆 */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* 悬停 Logo：颜色转向辅助色 + 轻微放大，提示"点我回首页" */
.nav-logo:hover {
    color: var(--secondary-color);
    transform: scale(1.03);
}

/* ---------- 右侧：导航菜单 ---------- */
.nav-links {
    display: flex;                       /* 四个菜单项横向排开 */
    align-items: center;
    gap: 6px;
}

.nav-link {
    position: relative;                  /* 作为下方高亮小横条的定位参照 */
    padding: 8px 14px;
    border-radius: 999px;                /* 足够大的圆角 = 胶囊形 */
    font-size: 0.95rem;
    color: var(--text-light);            /* 默认用次要文字色，弱化处理 */
    transition: var(--transition);
}

/* 悬停：文字变主色，并铺一层很淡的主色背景 */
.nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
}

/* 当前页面对应的菜单：JS 会自动加 .active，也可以在每个页面手写 class="nav-link active" */
.nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
    background-color: rgba(var(--primary-rgb), 0.12);
}

/* 当前项下方的短横条指示器 */
.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;                           /* 先移动到父元素水平中点 */
    transform: translateX(-50%);         /* 再左移自身宽度的一半 → 真正居中 */
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
}

/* ---------- 汉堡按钮 ---------- */
/* 三根横线用一个 span + 两个伪元素拼出来，默认在桌面端隐藏（手机端才显示） */
.nav-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    transition: var(--transition);
}

.nav-toggle:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
}

/* 中间的横线 */
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--text-main);
    transform: translateX(-50%);         /* 三根线都以按钮水平中线为基准居中 */
    transition: var(--transition);
}

.nav-toggle-bar {
    top: 50%;                            /* 中线位置，再配合下面的 margin 微调 */
    margin-top: -1px;                    /* 减掉自身高度的一半，做到精确垂直居中 */
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
    content: "";
}

/* 上方那根线：往上挪 6px */
.nav-toggle-bar::before {
    top: -6px;
}

/* 下方那根线：往下挪 6px */
.nav-toggle-bar::after {
    top: 6px;
}

/* 展开状态：上下两根线旋转成 X，中间那根通过透明隐藏（视觉上变成"关闭"叉号） */
.site-nav.is-open .nav-toggle-bar {
    background-color: transparent;
}

.site-nav.is-open .nav-toggle-bar::before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);      /* 注意先居中再旋转，顺序不能反 */
}

.site-nav.is-open .nav-toggle-bar::after {
    top: 0;
    transform: translateX(-50%) rotate(-45deg);
}


/* ==========================================================================
   05. 移动端汉堡菜单
   --------------------------------------------------------------------------
   窄屏时导航菜单不再是横向一排在导航栏里，而是变成从导航栏下方展开的竖排面板，
   由 common.js 给 .site-nav 加上 .is-open 控制显示。
   ========================================================================== */
@media (max-width: 768px) {

    /* 窄屏才需要汉堡按钮 */
    .nav-toggle {
        display: block;
    }

    .nav-links {
        position: fixed;                     /* 相对窗口定位，脱离导航栏原本的横向排布 */
        top: var(--nav-height);              /* 紧贴在导航栏下沿 */
        left: 0;
        width: 100%;
        flex-direction: column;              /* 由横向改为纵向排列 */
        align-items: stretch;                /* 子项拉满整行宽度，点击区域更大 */
        gap: 4px;
        padding: 12px 16px 18px;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
        box-shadow: var(--shadow);

        /* 收起状态：透明 + 上移一点 + 不可见。用 visibility/pointer-events 一起控制，
           这样既看不见也点不到，同时还能保留过渡动画（display:none 是无法过渡的） */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px);
        transition: var(--transition);
    }

    /* 展开状态：恢复到原位、完全可见 */
    .site-nav.is-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-link {
        padding: 12px 14px;                  /* 手机上加大点击热区，方便手指点 */
        border-radius: var(--radius);
    }

    /* 竖排时不需要底部小横条，改用左侧色块表示选中 */
    .nav-link.active::after {
        top: 50%;
        bottom: auto;
        left: 0;
        width: 3px;
        height: 18px;
        transform: translateY(-50%);
    }
}


/* ==========================================================================
   06. 返回顶部按钮
   --------------------------------------------------------------------------
   固定在右下角，默认隐藏；滚动超过一屏时由 common.js 添加 .is-visible 显示。
   ========================================================================== */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;                        /* 低于导航栏（1000），高于普通内容 */

    width: 46px;
    height: 46px;
    border-radius: 50%;
    /* 主色→辅助色的渐变背景，贴合角色配色 */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: var(--shadow);

    /* 隐藏态：透明 + 不可见 + 下沉一点；用 transition 让"出现"这个动作有动画 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
    transition: var(--transition);
}

/* 箭头图标：用两条边框旋转 45° 拼成一个"↑"，不用引入任何图标库 */
.back-to-top::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-radius: 1px;
    /* 先居中：向左上各移一半；再顺时针旋转 45°，让尖角朝正上方 */
    transform: translate(-50%, -35%) rotate(45deg);
}

/* 显示态（由 JS 添加） */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* 悬停：阴影加强并再上浮一点，强化可点击的感觉 */
.back-to-top:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}


/* ==========================================================================
   07. 页脚
   ========================================================================== */
.site-footer {
    margin-top: 64px;                        /* 与上方内容拉开距离 */
    padding: 28px 20px;                      /* 上下 28px、左右 20px，文字四周有呼吸感 */
    text-align: center;                      /* 文字水平居中 */
    /* 和导航栏用同一套"毛玻璃"语言，但白度必须给足：
       页脚是半透明的，而右侧 live2d 是固定背景、一直铺到页面底部，
       视频的深蓝色比页面背景暗得多，白度不够就会"左亮右花"（一条页脚两种颜色）。
       实测 rgba(255,255,255,0.82)+模糊 时左右亮度差仍有 45.9，
       提到 0.97 并给背景加 brightness 补偿后降到个位数，肉眼看不出接缝。
       （这个问题以前没暴露过 —— 页脚一直在首屏之外，没人看到过） */
    background: rgba(253, 252, 255, 0.97);
    -webkit-backdrop-filter: blur(14px) brightness(1.08);   /* Safari 需要 -webkit- 前缀 */
    backdrop-filter: blur(14px) brightness(1.08);
    border-top: 1px solid rgba(var(--primary-rgb), 0.15);
    color: var(--text-light);                /* 次要文字色，不抢主体内容的注意力 */
    font-size: 0.875rem;                     /* 14px 左右，页脚信息层级最低 */
    line-height: 1.9;
}

/* 页脚里的"|"分隔符：单独用 span 包起来，方便调整间距或在小屏隐藏 */
.site-footer .footer-divider {
    margin: 0 8px;
    color: rgba(var(--primary-rgb), 0.5);
}

/* 页脚里的次要入口（「关于本站」这类介绍性页面放在这里，不占导航栏位置） */
.site-footer .footer-links {
    margin-top: 10px;
}

/* 署名那一行（站主 + 代码署名）：权限声明之后单独一行，和「关于本站」分开 */
.site-footer .footer-credit {
    margin-top: 8px;
}

.site-footer .footer-link {
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.35);   /* 用下划线代替按钮，保持页脚的轻量感 */
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer .footer-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}


/* ==========================================================================
   08. 响应式适配
   --------------------------------------------------------------------------
   移动优先不是必须的，但至少要为小屏做两件事：缩小间距、避免文字/按钮挤在一起。
   ========================================================================== */
@media (max-width: 768px) {

    .nav-inner {
        padding: 0 16px;                     /* 小屏两侧留白收窄，把宽度让给内容 */
    }

    .nav-logo {
        font-size: 1.1rem;                   /* Logo 略小，防止和汉堡按钮抢位置 */
    }

    .container {
        padding: 0 16px;
    }

    .card {
        padding: 18px;
    }

    .section-title {
        font-size: 1.25rem;
    }

    /* 返回顶部按钮靠近屏幕边缘，减少遮挡 */
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

    /* 小屏上让页脚三句话各占一行，比挤在一行更好读 */
    .site-footer {
        font-size: 0.8125rem;
    }

    .site-footer .footer-divider {
        display: none;                        /* 隐藏分隔符 */
    }

    .site-footer .footer-item {
        display: block;                       /* 每段文字独占一行 */
    }
}


/* ==========================================================================
   页面头部（标题 + 可选的一行说明）
   --------------------------------------------------------------------------
   这段原先写在 gallery.css 里，但它是**页面级公共结构**：
   二创图鉴、肥猫美图、关于本站三个页面都在用。

   问题就出在这儿：关于本站只引用了 common.css，没引用 gallery.css，
   于是它的 class 一直是空转的 —— 标题没有左边那根色条、字号也偏小，
   跟其他页面明显不一致。挪到 common.css 后三个页面才真正统一。
   ========================================================================== */
.page-head {
    padding: 40px 0 28px;
}

.page-head h1 {
    font-size: clamp(26px, 3.2vw, 36px);
    color: var(--text-main);
    letter-spacing: 1px;
}

/* 标题左边的小色条：和首页「表情差分」那些小标题保持同一套视觉语言 */
.page-head h1::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 0.82em;
    margin-right: 12px;
    vertical-align: -0.06em;
    border-radius: 3px;
    background: var(--primary-color);
}

/* 副标题（现在只有关于本站还在用）。
   padding-left 17px 是为了让文字和标题文字左对齐 —— 让开那根 5px 色条加 12px 间距。 */
.page-head p {
    margin-top: 10px;
    padding-left: 17px;
    color: var(--text-light);
    font-size: 0.9375rem;
}

@media (max-width: 600px) {
    .page-head {
        padding: 28px 0 20px;
    }
}