/* ============================================================
   阿飞博客 · 设计系统 v3
   ------------------------------------------------------------
   设计概念：**晴空世界 + 玻璃卡片**
   参考池汯の小窝的做法：一幅动漫插画贯穿全站，内容以白色半透明
   卡片浮在插画上，插画从卡片缝隙和卡片自身大面积透出来。
   站点不再是「一本装订好的手记」，而是「我住的那个小世界」。

   三条纪律：
   1. 世界连续：全站共用同一层固定插画，滚动时世界一直在
   2. 卡片要透：玻璃不透明度 0.86 是可读性下限，低于此次要文字会跌破 AA
   3. 留白是元素：靠卡片之间的空隙露出插画，不靠分割线
   ============================================================ */

/* ==================== 1. 设计令牌 ==================== */

:root {
    /* ---- 色：中性（v3.4 对齐参考站 chortle.asia 的冷灰系）---- */
    --paper:        #FBF8F3;   /* 仅用于深底上的文字（skip-link / pager） */
    --paper-2:      #F5F7FA;   /* 次级面 / 媒体占位（= 参考站的页面底色） */
    --paper-3:      #EEF2F7;   /* 三级面 / 代码块 */
    --card:         #FFFFFF;

    --line:         #EAEAEA;   /* 常规分隔（= 参考站 --border） */
    --line-2:       #D9D9D9;   /* 强调分隔 / 边框 */

    /* ---- 材质：对齐参考站（v3.4）----
       参考站实测：内容卡 rgba(255,255,255,.85) + border 1px rgba(0,0,0,.08)
                   + radius 10px + shadow 0 2px 12px rgba(0,0,0,.04)
                   大面板 rgba(255,255,255,.70) + radius 20px + shadow 0 4px 20px rgba(0,0,0,.15)
       而且**全站只有 1 处 backdrop-filter** —— 不用模糊也能有玻璃感。
       所以这里把 blur 全部去掉：既更贴近它，又消掉滚动掉帧的主因。 */
    --glass:        rgba(255, 255, 255, .85);   /* 一类：内容卡 */
    --glass-panel:  rgba(255, 255, 255, .72);   /* 二类：整页大面板（更透，靠墨色深兜底） */
    --glass-soft:   rgba(255, 255, 255, .60);   /* 三类：暂未使用（页脚原用 .60，因在深色插画上只有 3.13:1，已改用 --glass） */
    --glass-strong: rgba(255, 255, 255, .96);   /* 四类：页头 / 移动端 tabbar（最实） */
    --glass-line:   rgba(255, 255, 255, .72);   /* 深色背景上才用的白描边 */
    --glass-shadow: 0 2px 12px rgba(0, 0, 0, .06);      /* 内容卡：极轻，不"浮" */
    /* v4：实底之上的白卡阴影。比玻璃卡更实一点点，但仍然很轻
       （参考站实测就是 0 2px 12px rgba(0,0,0,.04)）。 */
    --card-shadow: 0 1px 2px rgba(16, 42, 60, .03),
                   0 2px 12px rgba(0, 0, 0, .04);
    --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, .04);
    --panel-shadow: 0 4px 20px rgba(0, 0, 0, .15);      /* 大面板 */
    --g-edge:       rgba(0, 0, 0, .08);                 /* = 参考站的 border 色 */
    --sky-canvas:   #BFE0F2;   /* 图片加载前的晴空兜底色 */

    /* ---- 色：文字（墨）----
       v3.4 从暖墨改成中性灰（= 参考站），并借它的因果：
       它敢把面板做到 .70，是因为墨色够深（#3c3c3c）；我们原来 #57514A 偏浅，
       同样透明度只有 3.6:1 —— 所以「通透」和「加深墨色」必须一起做。
       ⚠️ 参考站的次要色 #7a7a7a 实算只有 ~3.4:1（不达 AA），我们取 #5A5A5A 保 4.8:1。 */
    --ink:          #303133;   /* 标题 */
    --ink-2:        #3C3C3C;   /* 正文（= 参考站正文色） */
    --ink-3:        #5A5A5A;   /* 次要信息：中性冷灰，玻璃卡上 ≥4.8:1 ✅ */
    --ink-4:        #9A9A9A;   /* 占位/禁用（非正文，仅占位符） */

    /* ---- 色：主色（对齐参考站 #49b1f5）----
       ⚠️ #49b1f5 白字压它只有 2.2:1，**只能做填色/图标/下划线，不能当按钮底和正文链接**。
       所以按用途拆成四个令牌（这是参考站没做、我们补上的部分）。 */
    --sky:          #49B1F5;   /* 填色：色块 / 图标 / 进度条 / 下划线 / 选中态 */
    --sky-deep:     #3A9BD9;   /* 悬停态 */
    --sky-ink:      #15608F;   /* 文字形态（链接）：压深色插画仍 ≥4.7:1 ✅ */
    --sky-fill:     #16628F;   /* 按钮底色：白字压它 6.6:1 ✅（#1C76B2 实测只有 4.3，不够） */
    --sky-wash:     #EAF6FE;   /* 极浅底 */

    /* ---- 色：点睛（陶土橙）----
       白字压在 #D9612F 上只有 3.9:1，不够 AA；调到 #C4521F 后 4.6:1 ✅ */
    --clay:         #C4521F;   /* 置顶徽章等小面积强调 */
    --clay-ink:     #A8431A;   /* 橙色的文字形态，纸底 5.6:1 ✅ */
    --clay-wash:    #FBEDE5;

    /* ---- 色：分类标识（只用于分类色块与插画，禁止用于按钮/链接/边框）---- */
    --tag-mint:     #A9D9BE;
    --tag-lilac:    #CFC2EC;
    --tag-pink:     #F4C2CE;
    --tag-butter:   #F6DDA6;
    --tag-sky:      #8FCDE8;
    --tag-sand:     #E2D5C0;

    /* ---- 间距：8px 基准 ---- */
    --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
    --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 88px;  --s10: 120px;

    /* ---- 字号：流体字阶 ---- */
    --t-display: clamp(32px, 4.6vw, 52px);   /* 报头 */
    --t-h1:      clamp(25px, 3.2vw, 36px);   /* 文章大标题 */
    --t-h2:      clamp(19px, 2.1vw, 24px);   /* 区块标题 */
    --t-h3:      17px;                        /* 条目标题 */
    --t-body:    16px;                        /* 正文 */
    --t-sm:      14px;
    --t-meta:    12.5px;

    /* ---- 行高 ---- */
    --lh-tight:  1.32;
    --lh-snug:   1.5;
    --lh-body:   1.9;    /* 中文长文实测最舒服的区间 */

    /* ---- 容器 ---- */
    --w-wide:    1200px;
    /* 正文行宽：中文实测 40 字/行（舒适区 30-40 的上沿）。
       原来 44rem(704px) 得到 44 字/行，偏长，已收窄 */
    --w-text:    40rem;

    /* ---- 圆角 ---- */
    --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 26px;  --r-full: 999px;

    /* ---- 动效 ---- */
    --dur-1: 140ms;
    --dur-2: 260ms;
    --dur-3: 480ms;
    --ease:  cubic-bezier(.22, .61, .36, 1);
    --ease-io: cubic-bezier(.4, 0, .2, 1);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
            "Noto Sans CJK SC", sans-serif;
    /* 标题用衬线，正文保持无衬线 —— 只给 h1 / .pagetop h1（见第 3 节）。
       这一串全是系统字体：Windows 落 SimSun，macOS 落 Songti SC。 */
    --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
}

/* ==================== 2. 基础 ==================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    /* 图片加载前的兜底色 —— 用晴空蓝，避免闪白（v3：原来是深灰） */
    background: var(--sky-canvas);
    /* 英雄区要铺满视口，用的是 100vw（含滚动条宽度）→ 会多出十几像素。
       用 clip 而不是 hidden：clip 不创建滚动容器，position:sticky 仍然有效。 */
    overflow-x: clip;
}

/* ==================== 全站背景 ====================
   一幅插画固定铺满视口，全站共用，滚动时世界一直在。
   用 position:fixed 而不是 background-attachment:fixed —— 后者在 iOS Safari 上不生效。 */
.bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: var(--sky-canvas);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 背景永远比内容低一个对比档：降饱和 + 微降对比 + 微提亮，
       让插画退成「远景」，不跟卡片和文字抢注意力 */
    filter: saturate(.72) contrast(.93) brightness(1.04);
}

/* 极轻的暗角：只把视线收拢到中间，不靠加暗来压背景（v3 从 .2 降到 .1） */
.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 38%,
                rgba(10, 30, 45, 0) 52%, rgba(10, 30, 45, .10) 100%);
}

/* ==================== 画布 ====================
   v3：body 不再是那张不透明的纸，只是把内容居中收窄。
   于是插画可以在两侧、卡片之间大面积露出 —— 内容浮在世界上，而不是压在纸上。 */
body {
    position: relative;
    /* 两侧各留 28px，让插画在手机上也能露出来；屏够宽时画布最多 1200px */
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 内容撑开，页脚自然贴底（内容短时不至于中间空一块） */
body > main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

/* 焦点可见性：键盘用户必须看得见，鼠标用户不被打扰 */
:focus-visible {
    outline: 2px solid var(--sky-deep);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--sky-wash); color: var(--ink); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
    z-index: 200;
    background: var(--ink); color: var(--paper);
    padding: 10px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: var(--t-sm);
    transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: 0; color: var(--paper); }

/* ==================== 3. 排版 ==================== */

/* 标题字重阶梯：标题 600 / 正文 400。
   微软雅黑的 400 与 500 几乎看不出差别，只靠字号区分层级是不够的。
   （h4 与 h1-h3 同组，但模板里没有用到 h4） */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    margin: 0;
}

/* 大标题才需要收字距（法文字体在 32px 以上会显得松散） */
h1, h2 { letter-spacing: -0.018em; }

/* 标题用衬线：给站点一点「技术刊物」的气质；正文保持无衬线，长文更耐读 */
h1, .pagetop h1 { font-family: var(--font-serif); }

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

/* 链接下划线用动画而不是静态 underline：悬停时有明确的「可点」反馈 */
.link {
    color: var(--sky-ink);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.link:hover { color: var(--clay-ink); background-size: 100% 1px; }

.meta {
    font-size: var(--t-meta);
    font-weight: 400;
    color: var(--ink-3);
    letter-spacing: .02em;
}

/* 章节小标签：报头式排版，用于给区块「命名」 */
.eyebrow {
    font-size: var(--t-meta);
    letter-spacing: .14em;
    color: var(--ink-3);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--s3);
}
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ==================== 4. 布局 ==================== */

.wrap {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0 var(--s6);
}
.wrap-text {
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 0 var(--s6);
}

.section { padding: var(--s9) 0 0; }

/* ==================== 5. 页头 ==================== */

.head {
    position: sticky;
    top: 0;
    z-index: 60;
    /* 底色与圆角在第 21 节统一给（v3.4：.96 白、无 blur） */
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-2) var(--ease);
}
.head.is-stuck { border-bottom-color: var(--line); }

.head-in {
    display: flex;
    align-items: center;
    gap: var(--s7);
    height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s3);
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: .01em;
}
.brand:hover { color: var(--ink); }

.brand-mark {
    width: 32px; height: 32px;
    flex: none;
    border-radius: 9px;
    overflow: hidden;
    background: var(--sky);
    color: #fff;
    display: grid; place-items: center;
    font-size: 14px;
    font-weight: 500;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.nav { display: flex; gap: var(--s6); }

.nav a {
    position: relative;
    font-size: var(--t-sm);
    color: var(--ink-3);
    padding: 6px 0;
    transition: color var(--dur-1) var(--ease);
}
.nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: var(--sky-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.head-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 190px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--line);
    transition: border-color var(--dur-2) var(--ease);
}
.head-search:focus-within { border-bottom-color: var(--sky-deep); }

.head-search input {
    width: 100%;
    border: 0; background: none; outline: none;
    font: inherit; font-size: var(--t-meta);
    color: var(--ink);
}
.head-search input::placeholder { color: var(--ink-4); }

/* ==================== 6. 页脚 ==================== */

.foot {
    margin-top: var(--s9);
    padding: var(--s7) 0 var(--s6);
    border-top: 1px solid var(--line);
}
.foot-in {
    display: flex;
    align-items: baseline;
    gap: var(--s5);
    flex-wrap: wrap;
    font-size: var(--t-meta);
    color: var(--ink-3);
}
.foot-in .spacer { margin-left: auto; }
.foot-in a { color: var(--ink-3); }
.foot-in a:hover { color: var(--sky-ink); }

/* ==================== 7. 页头 ====================
   有了全站背景之后，画面就只留一个来源 —— 页面内不再重复放场景图，
   否则背景和卡片里是同一张图，看着很傻。
   页头回归「纸上的一段文字」：报头式细线 + 标题 + 说明。
   ================================================ */

.pagetop { padding: var(--s7) 0 var(--s5); }

.pagetop-rule {
    height: 1px;
    background: var(--line-2);
    opacity: 1;
    margin-bottom: var(--s5);
}
.pagetop-rule.thin {
    height: 1px;
    background: var(--line-2);
    margin: var(--s5) 0 0;
}

.pagetop h1 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    /* 中文长标题折行时 balance 会让每行字数均匀，避免末行只剩一两个字 */
    text-wrap: balance;
}

.pagetop-desc {
    font-size: var(--t-sm);
    color: var(--ink-3);
    line-height: 1.85;
    margin: var(--s3) 0 0;
    max-width: 32rem;
}

.masthead-facts {
    display: flex;
    gap: var(--s6);
    margin-top: var(--s6);
    flex-wrap: wrap;
}
.fact b {
    display: block;
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.fact span {
    font-size: var(--t-meta);
    color: var(--ink-3);
    letter-spacing: .04em;
}


/* ==================== 9. 头条文章 ==================== */

.lead {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: center;
    padding: var(--s6) 0 var(--s7);
}

.lead-art {
    position: relative;
    /* v3.1：做成「装裱好的画」—— 白色卡纸 + 细边 + 内页圆角 */
    background: var(--card);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    aspect-ratio: 16 / 11;
}
.lead-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* v3.4：同一张场景图靠 --art-pos 取不同景，看起来像不同的画 */
    object-position: var(--art-pos, center);
    border-radius: var(--r-xs);
    transition: transform var(--dur-3) var(--ease);
}
.lead:hover .lead-art img { transform: scale(1.025); }

.lead-body { min-width: 0; }

.lead-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-meta);
    letter-spacing: .1em;
    color: var(--clay-ink);
    margin-bottom: var(--s4);
}
.lead-flag::before {
    content: "";
    width: 14px; height: 1px;
    background: currentColor;
}

.lead h2 {
    font-size: var(--t-h2);
    line-height: 1.3;
    margin-bottom: var(--s4);
}
.lead h2 a { color: var(--ink); }
.lead h2 a:hover { color: var(--sky-ink); }

.lead-sum {
    font-size: var(--t-sm);
    color: var(--ink-3);
    line-height: 1.85;
    margin: 0 0 var(--s5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lead-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
    color: var(--ink);
}
.lead-more svg { transition: transform var(--dur-2) var(--ease); }
.lead:hover .lead-more svg { transform: translateX(4px); }

/* ==================== 9. 日期栏杆列表（核心排版）==================== */

.journal { display: block; }

.entry {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--s6);
    padding: var(--s6) 0;
    border-top: 1px solid var(--line);
    position: relative;
}
.entry:last-child { border-bottom: 1px solid var(--line); }

/* 日期栏杆：左侧留白区是这套排版的骨架 */
.entry-rail {
    padding-top: 3px;
    text-align: right;
}
.entry-day {
    display: block;
    font-size: 21px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.entry-ym {
    display: block;
    font-size: var(--t-meta);
    color: var(--ink-3);
    letter-spacing: .06em;
    margin-top: 4px;
}

.entry-body { min-width: 0; }

.entry-cat {
    font-size: var(--t-meta);
    letter-spacing: .08em;
    color: var(--ink-3);
    margin-bottom: var(--s2);
}

.entry h3 {
    font-size: var(--t-h3);
    line-height: 1.45;
    margin-bottom: var(--s3);
}
.entry h3 a {
    color: var(--ink);
    /* 目标尺寸：让文字链接的行盒达到 24px 以上（WCAG 2.2 SC 2.5.8） */
    display: inline-block;
    padding: 3px 0;
}
.entry h3 a:hover { color: var(--sky-ink); }

.entry-sum {
    font-size: var(--t-sm);
    color: var(--ink-3);
    line-height: 1.8;
    margin: 0 0 var(--s3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-foot {
    display: flex;
    align-items: center;
    gap: var(--s4);
    font-size: var(--t-meta);
    font-weight: 400;
    color: var(--ink-3);
}
.entry-foot .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* 归档页用的紧凑条目 */
.entry.slim { padding: var(--s4) 0; border-top: 0; }
.entry.slim .entry-day { font-size: 17px; }

/* ==================== 10. 分类索引（文字流，不是卡片墙）==================== */

.index-list { display: block; }

.index-row {
    display: flex;
    align-items: baseline;
    gap: var(--s4);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: padding-left var(--dur-2) var(--ease);
}
.index-row:first-child { border-top: 1px solid var(--line); }
.index-row:hover { padding-left: var(--s3); color: var(--ink); }

.index-swatch {
    width: 9px; height: 9px;
    border-radius: 3px;
    flex: none;
    transform: translateY(-1px);
}

.index-name { font-size: var(--t-sm); font-weight: 500; }
.index-desc {
    font-size: var(--t-meta);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.index-count {
    margin-left: auto;
    font-size: var(--t-meta);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* ==================== 11. 项目条带 ==================== */

/* ---------------- 首页「关于我」收尾区 ---------------- */
.intro-card {
    margin-top: var(--s5);
    padding: var(--s6) var(--s7);
    background: var(--card);
    border: 1px solid var(--g-edge);
    border-radius: var(--r-md);
}

.intro-text {
    max-width: var(--w-text);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--ink-2);
}

.intro-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s5);
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-top: var(--s5);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--s5);
}

.proj {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--g-edge);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--card);
    transition: border-color var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}
.proj:hover { border-color: var(--sky); transform: translateY(-3px); }

.proj-art {
    aspect-ratio: 16 / 10;
    /* v3.1 相框式装裱；v3.4 圆角降到 --r-sm（10px），和参考站的小卡一致 */
    background: var(--card);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.proj-art img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--art-pos, center);
    border-radius: var(--r-xs);
    transition: transform var(--dur-3) var(--ease);
}
.proj:hover .proj-art img { transform: scale(1.04); }

.proj-body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.proj h3 { font-size: var(--t-h3); margin-bottom: var(--s3); }
.proj h3 a { color: var(--ink); display: inline-block; padding: 3px 0; }
.proj h3 a:hover { color: var(--sky-ink); }
.proj p {
    font-size: var(--t-sm);
    color: var(--ink-3);
    line-height: 1.8;
    margin: 0 0 var(--s4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.proj-stack { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }

/* ==================== 12. 标签 ==================== */

.chip {
    display: inline-block;
    font-size: var(--t-meta);
    line-height: 1.75;
    padding: 2px 10px;
    border-radius: var(--r-full);
    background: var(--paper-2);
    color: var(--ink-3);
    white-space: nowrap;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
a.chip:hover { background: var(--sky-wash); color: var(--sky-ink); }
.chip-flag { background: var(--clay-wash); color: var(--clay-ink); font-weight: 500; }
.chip-accent { background: var(--sky-wash); color: var(--sky-ink); }

.cloud { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ==================== 13. 按钮 ==================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--t-sm);
    line-height: 1;
    padding: 11px 20px;
    border-radius: var(--r-full);
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease);
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(.985); }

/* v3.4：主按钮改成主色 —— 直接用 #49b1f5 白字只有 2.2:1，
   所以填色用深一档的 --sky-fill（白字 4.9:1 ✅） */
.btn-primary {
    background: var(--sky-fill);
    border-color: var(--sky-fill);
    color: #fff;
}
.btn-primary:hover { background: #12527A; border-color: #12527A; color: #fff; }

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ==================== 14. 分页 ==================== */

.pager {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s7);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
}
.pager a, .pager span {
    min-width: 34px; height: 34px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    font-size: var(--t-meta);
    color: var(--ink-3);
    display: grid; place-items: center;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pager a:hover { background: var(--paper-2); color: var(--ink); }
.pager .on { background: var(--ink); color: var(--paper); }
.pager .off { opacity: .35; pointer-events: none; }
.pager .gap { color: var(--ink-4); }

/* ==================== 15. 文章页 ==================== */

/* 目录在左、正文在右，整体居中；正文行宽固定在舒适区间 */
.article-layout {
    display: grid;
    grid-template-columns: 168px minmax(0, var(--w-text));
    gap: var(--s8);
    justify-content: center;
    padding-top: var(--s6);
    padding-bottom: var(--s6);
}

/* 阅读进度：唯一的「长条」动效，因为它传达真实信息 */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--sky-deep);
    z-index: 80;
    transition: width 90ms linear;
}

.article-head { padding: var(--s8) 0 var(--s6); }

.article-head h1 {
    font-size: var(--t-h1);
    line-height: 1.28;
    letter-spacing: -0.015em;
    margin-bottom: var(--s5);
    text-wrap: balance;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex-wrap: wrap;
    font-size: var(--t-meta);
    color: var(--ink-3);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.article-plate {
    margin: 0 0 var(--s7);
    /* v3.1：相框式装裱；v3.4 圆角降到 --r-md，取景由 --art-pos 控制 */
    background: var(--card);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 21 / 9;
}
.article-plate img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--art-pos, center);
    border-radius: var(--r-xs);
}

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

.prose {
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--ink-2);
}

.prose > * + * { margin-top: var(--s5); }

.prose h2 {
    font-size: var(--t-h3);
    line-height: 1.5;
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    scroll-margin-top: 96px;
}
.prose h3 {
    font-size: 15.5px;
    margin-top: var(--s7);
    scroll-margin-top: 96px;
}
.prose h2 + *, .prose h3 + * { margin-top: var(--s4); }

.prose p { margin: 0; }

.prose a {
    color: var(--sky-ink);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.prose a:hover { color: var(--clay-ink); }

.prose strong { color: var(--ink); font-weight: 500; }

.prose ul, .prose ol { padding-left: 1.4em; margin: 0; }
.prose li + li { margin-top: var(--s2); }
.prose li::marker { color: var(--ink-4); }

.prose code {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--paper-2);
    border-radius: var(--r-xs);
    padding: 2px 6px;
    color: var(--ink);
}

.prose pre {
    position: relative;
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s5);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.75;
    -webkit-overflow-scrolling: touch;
}
.prose pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: var(--ink-2);
}

.prose blockquote {
    margin: 0;
    padding-left: var(--s5);
    border-left: 2px solid var(--sky);
    color: var(--ink-3);
}
.prose blockquote p + p { margin-top: var(--s4); }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    display: block;
    overflow-x: auto;
}
.prose thead th {
    text-align: left;
    font-weight: 500;
    color: var(--ink);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.prose tbody td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }

.prose img { border-radius: var(--r-md); }

.prose hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: var(--s8) 0;
}

/* ---- 文末 ---- */

/* ---------------- 上一篇 / 下一篇 ---------------- */
.art-nav {
    display: flex;
    gap: var(--s4);
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
}

.art-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s4) var(--s5);
    border: 1px solid var(--g-edge);
    border-radius: var(--r-sm);
    background: var(--card);
    transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.art-nav-item:hover {
    border-color: var(--sky-ink);
    transform: translateY(-1px);
}

/* 没有上一篇时用占位撑住，让「下一篇」仍然靠右 */
.art-nav-gap { flex: 1; }

.art-nav-next { text-align: right; }

.art-nav-dir {
    font-size: var(--t-meta);
    color: var(--ink-3);
    letter-spacing: .04em;
}

.art-nav-title {
    font-size: var(--t-sm);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .art-nav { flex-direction: column; }
    .art-nav-next { text-align: left; }
    .art-nav-gap { display: none; }
}

.article-foot {
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

/* ---- 目录 ---- */

.toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.toc-title {
    font-size: var(--t-meta);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s4);
}
.toc a {
    display: block;
    font-size: var(--t-meta);
    line-height: 1.7;
    color: var(--ink-3);
    padding: 4px 0 4px var(--s4);
    border-left: 1.5px solid var(--line);
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.toc a:hover { color: var(--ink-2); }
.toc a.is-current { color: var(--sky-ink); border-left-color: var(--sky-deep); }

/* ==================== 16. 评论 ==================== */

.cmt-head-row {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s5);
}
.cmt-head-row h2 { font-size: var(--t-h3); }
.cmt-head-row .n { font-size: var(--t-meta); color: var(--ink-3); }

.cmt {
    display: flex;
    gap: var(--s4);
    padding: var(--s5) 0;
    border-top: 1px solid var(--line);
}
.cmt:last-of-type { border-bottom: 1px solid var(--line); }

.cmt-av {
    width: 36px; height: 36px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-2);
}
.cmt-av-fallback {
    width: 36px; height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--sky-wash);
    color: var(--sky-ink);
    display: grid; place-items: center;
    font-size: 13px;
}

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

.cmt-who {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: 5px;
}
.cmt-who b { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.cmt-who time { font-size: var(--t-meta); color: var(--ink-3); }

.cmt-text { font-size: var(--t-sm); line-height: 1.85; color: var(--ink-2); }

.cmt-act {
    margin-top: var(--s2);
    font-size: var(--t-meta);
    color: var(--ink-3);
    background: none; border: 0;
    /* 裸文字按钮只有 16px 高，低于 24px 触摸目标下限（留言板页自检会报 5 个小目标） */
    display: inline-block;
    padding: 4px 0;
    font-family: inherit; cursor: pointer;
    transition: color var(--dur-1) var(--ease);
}
.cmt-act:hover { color: var(--sky-ink); }

.cmt-kids {
    margin-top: var(--s4);
    padding-left: var(--s5);
    border-left: 1.5px solid var(--line);
}
.cmt-kid + .cmt-kid { margin-top: var(--s4); }
.cmt-kid.is-admin { border-left-color: var(--clay); }
.cmt-kid-in { padding-left: var(--s1); }
.cmt-kids .cmt-kid:first-child { position: relative; }
.cmt-kids .cmt-kid:first-child::before {
    content: "";
    position: absolute;
    left: calc(var(--s5) * -1);
    top: 10px;
    width: var(--s5); height: 1.5px;
    background: inherit;
}

/* ---- 表单 ---- */

.form { margin-top: var(--s7); }

.field {
    width: 100%;
    font-family: inherit;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    outline: none;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.field:hover { border-color: var(--line-2); }
.field:focus { border-color: var(--sky-deep); background: var(--card); }
.field::placeholder { color: var(--ink-4); }

textarea.field { resize: vertical; min-height: 96px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }

.form-foot {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-top: var(--s4);
    flex-wrap: wrap;
}
.form-note { font-size: var(--t-meta); color: var(--ink-3); }

.form-tip { font-size: var(--t-meta); margin-top: var(--s3); min-height: 1.2em; }
.form-tip.is-err { color: var(--clay-ink); }
.form-tip.is-ok { color: var(--sky-ink); }

/* ==================== 17. 空状态 ==================== */

.empty {
    padding: var(--s8) var(--s5);
    text-align: center;
    color: var(--ink-3);
    font-size: var(--t-sm);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.empty .glyph {
    font-size: 26px;
    color: var(--ink-4);
    margin-bottom: var(--s4);
    line-height: 1;
}

/* ==================== 18. 移动端底部 Tab ==================== */

.tabbar { display: none; }

/* ==================== 19. 动效：滚动入场 ==================== */

/* 入场动画只在 JS 可用时启用（html.js 由页头内联脚本加上）。
   这样 JS 关闭或加载失败时，内容直接可见——不会出现整页空白。 */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 图片懒加载后的柔和显现，避免「啪」地跳出 */
img[loading="lazy"] { transition: opacity var(--dur-3) var(--ease); }
html.js img[loading="lazy"] { opacity: 0; }
html.js img[loading="lazy"].is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html.js [data-reveal] { opacity: 1; transform: none; }
    html.js img[loading="lazy"] { opacity: 1; }
}

/* ==================== 20. 响应式 ==================== */

/* ---- 平板 ---- */
@media (max-width: 1024px) {
    :root { --s9: 64px; --s10: 88px; }

    .wrap { padding: 0 var(--s5); }

    .lead { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    .lead-art { aspect-ratio: 16 / 9; }
    .lead-sum { -webkit-line-clamp: 2; }

    .head-in { gap: var(--s5); height: 64px; }


    /* 窄屏收起目录，正文独占居中 */
    .article-layout {
        grid-template-columns: minmax(0, var(--w-text));
        justify-content: center;
    }
    .toc { display: none; }
}

/* ---- 移动 ---- */
@media (max-width: 767px) {
    :root {
        --s8: 44px; --s9: 52px;
        --t-body: 16px;       /* 移动端正文不缩水 */
        --lh-body: 1.85;
    }

    /* v3：body 只是画布，不再是不透明的纸 */
    body {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    html { scroll-padding-top: 70px; }

    /* 给底部 Tab 留位置 */
    body > footer { padding-bottom: 72px; }

    .wrap, .wrap-text { padding: 0 var(--s5); }

    /* 顶部只留品牌与搜索，导航交给底部 Tab */
    .nav, .head-search { display: none; }
    .head-in { height: 56px; }
    .head { position: static; }

    .pagetop { padding: var(--s5) 0 var(--s4); }
    .masthead-facts { gap: var(--s5); margin-top: var(--s5); }
    .fact b { font-size: 18px; }


    /* 日期栏杆折成一行元信息，避免左侧留白挤压正文 */
    .entry {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s3);
        padding: var(--s5) 0;
    }
    .entry-rail {
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: var(--s3);
        padding-top: 0;
    }
    .entry-day { font-size: 15px; color: var(--ink-3); }
    .entry-ym { margin-top: 0; }

    .index-desc { display: none; }

    /* 移动端把标题链接触摸区撑到 44px，手指点得准 */
    .entry h3 a, .proj h3 a { padding: 10px 0; }
    .entry h3 { margin-bottom: var(--s2); }
    .entry-foot { margin-top: var(--s1); }
    .lead-more, .index-row { padding-top: var(--s4); padding-bottom: var(--s4); }
    .nav a { padding: 10px 0; }

    .form-row { grid-template-columns: minmax(0, 1fr); }

    .prose pre { padding: var(--s4); font-size: 13px; margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); border-radius: 0; border-left: 0; border-right: 0; }

    /* v3.1：保留 10px 相框，不再负 margin 贴边 */
    .article-plate { aspect-ratio: 4 / 3; }
    .article-head { padding: var(--s6) 0 var(--s5); }

    /* 触摸目标不小于 44px */
    .btn { padding: 12px 20px; }
    .nav a { padding: 10px 0; }

    .tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 70;
        /* 材质在第 21 节统一给（v3.4：.96 白、无 blur） */
        background: color-mix(in srgb, var(--paper) 94%, transparent);
        border-top: 1px solid var(--line);
    }
    .tabbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 56px;
        font-size: 11px;
        color: var(--ink-3);
        transition: color var(--dur-1) var(--ease);
    }
    .tabbar a[aria-current="page"] { color: var(--sky-ink); }
    .tabbar svg { width: 19px; height: 19px; }

    /* 8 个入口时压缩一档：390 ÷ 8 ≈ 48px/项（仍 ≥ 44 的触摸目标下限）。
       图标和文字一起缩，否则中文标签会挤到换行 —— 换了 6 项时是 65px/项。 */
    .tabbar a { gap: 2px; font-size: 10px; }
    .tabbar svg { width: 17px; height: 17px; }

}

/* ==================== 21. 内容区实底 + 白卡（v4，结构级）===================
   参考站 chortle.asia 的结构不是「整站一张图 + 卡片半透明」，而是：
     **hero 用图 + 内容区一整块浅色实底，白卡浮在实底上。**

   我们之前是全站一张图垫底 + 所有卡片半透明玻璃，后果是：
     · 侧栏资料卡能透出云和荷叶
     · 右侧正文被荷叶染成黄绿色，对比度不稳定（同一段文字不同位置深浅不一）
     · 「正文区对比度」只能靠最坏情况兜底，实际读起来发飘

   所以这一版把结构改回来：
     · hero 仍然是插画（第一屏视觉不变）
     · hero 之下到 footer 之间是**一块不透明的浅色实底**（--paper-2）
     · 实底之上的卡片 = 纯白 + 极轻阴影 + 1px --g-edge（不再半透明）

   副作用也是好处：实底之后正文对比度**只由字号/字色决定**，与插画无关，
   同一段文字在页面任何位置读起来一样。
   ======================================================================== */

/* ---- 内容区实底本体 ---- */
.page-body {
    position: relative;          /* 卡片阴影落在它上面，不漏到 body 外 */
    max-width: var(--w-wide);
    margin: 0 auto;
    background: var(--paper-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--s7) var(--s6) var(--s8);
    border: 0;
    box-shadow: none;
}

/* ---- 实底之上的卡片：纯白 + 极轻阴影 + 1px 描边 ---- */
/* .pagetop 是「顶部标题区」，它直接坐在实底上，不做成卡片 */
main > .wrap,
.page-body > .wrap:not(.pagetop),
.home-main > .wrap {
    max-width: none;
    margin: var(--s5) 0 0;
    padding: var(--s6);
    background: var(--card);
    border: 1px solid var(--g-edge);
    border-radius: var(--r-md);
    box-shadow: var(--card-shadow);
}

/* 第一张卡不用再顶 margin（实底已经有内边距了） */
.page-body > .wrap:first-child,
main > .wrap:first-child,
.home-main > .wrap:first-child { margin-top: 0; }

/* 卡片间距：实底上留 16px 就够，实底本身已经有 32px 内边距了 */
.page-body > .wrap + .wrap,
.home-main > .wrap + .wrap { margin-top: var(--s4); }

/* 侧栏的 sticky 要以实底顶边为基准 */
.home-body.page-body { margin-top: 0; }

/* ---- 卡片贴合内容、不要被 flex 拉满整屏 ---- */
body > main { flex: 0 0 auto; }
body > footer { margin-top: auto; }

/* ---- 页头：最实的一档（.96），滚动时压住下方内容 ----
   v3.4：去掉 blur（不透明到这个程度，模糊本来也看不见）；
   底边不能用白色（白描边在白玻璃上等于看不见），用 --line-2 才分得开。 */
.head {
    background: var(--glass-strong);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    border-bottom-color: transparent;
}
.head.is-stuck { border-bottom-color: var(--line-2); }

/* ---- 页脚：最轻的一档（.60），明显轻于内容卡 ----
   不叠 backdrop-filter：全站 blur 已清零，页脚只靠 .60 白底就够 */
.foot {
    position: relative;
    isolation: isolate;
    margin-top: var(--s5);
    padding: var(--s6);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: var(--r-md);
    box-shadow: none;
}
.foot::before {
    /* 这四条以前缺失 → 伪元素压根没生成，页脚玻璃底板一次都没画出来：
       没有 content 的伪元素不会渲染。（实测改前 ::before 的 content = "none"）
       z-index: -1 配合 .foot 上已有的 isolation: isolate，
       既压在文字下面，又不会掉到页面插画后面去。 */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    /* 用 --glass(.85) 而不是 --glass-soft(.60)：.60 在深色荷叶底上只有 3.13:1，
       .85 是 5.24:1；亮海面上 .85 是 6.2:1 —— 两种底都要过 AA。 */
    background: var(--glass);
    box-shadow: var(--glass-shadow-sm);
}
.foot-in { max-width: none; padding: 0; }


/* ---- 移动端：卡片贴边留 10px，圆角收小，保证插画仍从四周露出 ---- */
@media (max-width: 767px) {
    /* v4：实底与白卡在窄屏各自收窄内边距 */
    .page-body {
        padding: var(--s5) var(--s4) var(--s7);
        border-radius: var(--r-md) var(--r-md) 0 0;
    }

    main > .wrap,
    .page-body > .wrap:not(.pagetop),
    .home-main > .wrap {
        margin-top: var(--s3);
        padding: var(--s5) var(--s4);
        border-radius: var(--r-sm);
    }
    .page-body > .wrap:first-child,
    main > .wrap:first-child,
    .home-main > .wrap:first-child { margin-top: 0; }
    .page-body > .wrap + .wrap,
    main > .wrap + .wrap,
    .home-main > .wrap + .wrap { margin-top: var(--s3); }


    .foot {
        padding: var(--s5) var(--s4);
        border-radius: var(--r-md);
    }

    /* ---------------- 固定 tabbar 会盖住页脚最后一行 ----------------
       实测 390×780 滚到底：tabbar rect = 0,723,390,57，
       .foot-nav 最后一个链接「关于我」bottom = 756，比 tabbar 顶还低 33px，被完整盖住。

       ⚠️ 这条必须写在上一条 `.foot` 简写 padding 规则**之后**：
       同优先级下靠源码顺序决胜，而 padding 简写会把 padding-bottom 一起覆盖。
       （第一版写在前面那个媒体查询里，实测 padding-bottom 仍是 24px，就是被它干掉的）

       挂载点选 .foot 而不是 body：后台模板也引 app.css 但没有 .foot / .tabbar，
       挂在 .foot 上天然只影响前台（也比 body:has(> .tabbar) 稳 —— :has() 不支持会静默失效）。
       --tabbar-h = .tabbar a 的 height 56px + 上边框 1px，改高度时两处一起改。 */
    :root { --tabbar-h: 57px; }

    .foot {
        padding-bottom: calc(var(--s5) + var(--tabbar-h) + env(safe-area-inset-bottom));
    }

    /* 玻璃底板同步在底部让出这段：圆角下缘停在 tabbar 上方，
       而不是被压在 tabbar 底下看起来像「被切断了」 */
    .foot::before {
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    }

    /* 以后开 viewport-fit=cover 时，tabbar 自己也要吃 safe-area，
       这样它和上面的 --tabbar-h 仍然对齐 */
    .tabbar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .head {
        border-radius: var(--r-sm) var(--r-sm) 0 0;
        background: var(--glass-strong);
    }

    /* v3.4：blur 去掉（全站 blur 已清零），.96 白底足够 */
    .tabbar {
        background: var(--glass-strong);
        border-top-color: var(--line);
    }
}

/* ==================== 22. 首页整屏英雄区（v3.5）====================
   参考站的第一屏是「一整张画 + 居中文案」：
     · 一张深色插画铺满整个视口（div.hero-bg, absolute, cover）
     · 头像 → 小字距标语 → 大标题 → 一个 .18 玻璃引用框 → 下滑箭头，全部居中
     · 全站唯一一处 backdrop-filter 就是这个引用框
   我们照这个结构做，但解决一个它没有的问题：**它的 hero 图本身是深色的，
   我们的场景图很亮**（最亮 5% 接近白），白字压上去只有 1.1:1。
   所以加两层：整体 brightness 压一档 + 以文案为中心的一圈「暗角」径向遮罩。
   这样画面四周仍然是亮的插画，只有文案所在的中间带暗下来 ——
   白字达标，插画也没被压死。 */
.hero {
    position: relative;
    isolation: isolate;
    /* 突破 body 的 1200px，铺满整个视口 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 86vh;
    display: grid;
    place-items: center;
    padding: var(--s9) var(--s6) var(--s8);
    border-radius: 0;
    overflow: hidden;
}

/* 背景层：由模板注入 --hero-art（场景图地址）与 --art-pos（取景） */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--sky-canvas);
    background-image: var(--hero-art);
    background-size: cover;
    background-position: var(--art-pos, center);
    background-repeat: no-repeat;
    filter: brightness(.72) saturate(.96);
}

/* 文案区的暗角：中心最暗、四周几乎不压 —— 这是白字能达标的唯一原因。
   v3.7：横向从 76% 收到 100%、纵向 66% 提到 84%，衰减更集中在文案带，
   两侧插画露出来的同时让文案区更暗（实测统计行 5 点全部 >= 4.5:1）。 */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(100% 84% at 50% 50%,
                rgba(8, 20, 32, .88) 0%,
                rgba(8, 20, 32, .74) 55%,
                rgba(8, 20, 32, .22) 100%);
}

/* v3.7：首页底图取景把角色推到下半屏，给文案带腾出干净的中上区域。
   与 SceneArt.heroVar() 注入的 --art-pos 同名，靠层叠顺序在这里覆盖。 */
.p-home .hero-bg {
    background-position: 50% 18%;
}

.hero-in {
    position: relative;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--s4);
    max-width: 760px;
}

.hero-face {
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .22);
    display: grid; place-items: center;
    font-size: 30px;
    color: #fff;
    /* 双圈：内圈亮、外圈淡 —— 贴在照片上的贴纸感 */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .30),
                0 0 0 6px rgba(255, 255, 255, .12);
    margin-bottom: var(--s2);
}
.hero-face img { width: 100%; height: 100%; object-fit: cover; }

/* 小字距标语：参考站的 "HI THERE, WELCOME TO MY BLOG" 就是这种处理 */
.hero-eyebrow {
    font-size: var(--t-meta);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

/* 大标题：参考站是无衬线 700 / 52px / 正字距。
   这里的衬线（内页 h1 用的 --font-serif）在暗底大字号上会发虚，所以覆盖成无衬线。 */
.hero-title {
    font-family: var(--font);
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.24;
    color: #fff;
    margin: 0;
}

.hero-sub {
    font-size: var(--t-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, .92);
    margin: 0;
    max-width: 34rem;
}

/* 引用框：玻璃 + blur 12px，**全站唯一一处 backdrop-filter**
   （参考站首页也只有这一处，位置和参数都一样） */
/* 首屏的一行身份：学生 + 求职意向，让人三秒内知道这是个什么站。
   ⚠️ hero 是深色插画打底，这里的文字必须是浅色 ——
   第一次写成 --ink-2（深色），在荷叶那张图上几乎看不见。 */
.hero-who {
    margin-top: var(--s3);
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .92);
    letter-spacing: .01em;
}

.hero-quote {
    margin: var(--s3) 0 0;
    padding: var(--s4) var(--s6);
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: var(--r-md);
    color: #fff;
    font-size: var(--t-sm);
    line-height: 1.75;
}

.hero-facts {
    display: flex;
    gap: var(--s7);
    margin-top: var(--s5);
    flex-wrap: wrap;
    justify-content: center;
}
.hero-facts b {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.hero-facts span {
    font-size: var(--t-meta);
    color: rgba(255, 255, 255, .84);
    letter-spacing: .04em;
}

/* 下滑提示：整屏 hero 必须给一个「下面还有」的信号 */
.hero-scroll {
    margin-top: var(--s6);
    color: rgba(255, 255, 255, .88);
    display: inline-flex;
    animation: hero-bob 1.9s var(--ease-io) infinite;
}
@keyframes hero-bob {
    0%, 100% { transform: translateY(0);   opacity: .75; }
    50%      { transform: translateY(7px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll { animation: none; }
}

@media (max-width: 767px) {
    .hero {
        min-height: 78vh;
        padding: var(--s8) var(--s4) var(--s7);
    }
    .hero-face { width: 68px; height: 68px; font-size: 24px; }
    .hero-eyebrow { letter-spacing: .22em; }
    .hero-quote { padding: var(--s3) var(--s5); }
    .hero-facts { gap: var(--s5); margin-top: var(--s4); }
    .hero-facts b { font-size: 18px; }
}

/* ==================== 23. 首页双栏 + 侧栏（v3.6）====================
   参考站第二屏是「300px sticky 左栏 + 主列」。左栏三张卡：
   头像卡（头像/昵称/格言/计数/按钮）· 最近更新（带取景小图）· 标签云。
   三张卡和内容卡同一材质，只是更小一号 —— 圆角用 --r-sm(10)。 */
.home-body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;          /* 让左栏高度=内容高度，sticky 才有活动空间 */
    max-width: var(--w-wide);
    margin: 0 auto;
}

.home-side {
    /* 顶到和第一张内容卡同一条基线（内容卡自带 --s5 上边距） */
    margin-top: var(--s5);
    /* 页头 72px + 16px 呼吸 */
    position: sticky;
    top: 88px;
    display: grid;
    gap: var(--s5);
}

.side-card {
    background: var(--card);
    border: 1px solid var(--g-edge);
    border-radius: var(--r-sm);
    box-shadow: var(--card-shadow);
    padding: var(--s5);
}

.side-title {
    font-size: var(--t-meta);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s4);
}

/* ---- 1 · 头像卡 ---- */
.side-profile { text-align: center; }

.side-face {
    width: 76px; height: 76px;
    margin: 0 auto var(--s4);
    border-radius: 50%;
    overflow: hidden;
    background: var(--sky-wash);
    color: var(--sky-ink);
    display: grid; place-items: center;
    font-size: 26px;
    font-weight: 500;
    box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line);
}
.side-face img { width: 100%; height: 100%; object-fit: cover; }

.side-name {
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.side-motto {
    font-size: var(--t-meta);
    line-height: 1.7;
    color: var(--clay-ink);
    margin: var(--s2) 0 0;
}

.side-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: var(--s5) 0 0;
    padding: var(--s4) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.side-counts a { color: inherit; }
.side-counts a + a { border-left: 1px solid var(--line); }
.side-counts b {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.side-counts span {
    font-size: var(--t-meta);
    color: var(--ink-3);
}
.side-counts a:hover b { color: var(--sky-ink); }

/* 主按钮用 --sky-fill：白字压它 6.6:1（#49b1f5 白字只有 2.2:1，只能做填色） */
.side-follow {
    display: block;
    margin-top: var(--s5);
    padding: 10px 0;
    border-radius: var(--r-full);
    background: var(--sky-fill);
    color: #fff;
    font-size: var(--t-sm);
    transition: background var(--dur-1) var(--ease);
}
.side-follow:hover { background: #12527A; color: #fff; }

/* ---- 2 · 最近更新：虚线分隔 + 取景小图 ---- */
.side-recent {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px dashed var(--line-2);
    color: inherit;
}
.side-recent:last-child { border-bottom: 0; padding-bottom: 0; }
.side-recent:hover b { color: var(--sky-ink); }

.side-recent-art {
    flex: none;
    width: 54px; height: 40px;
    border-radius: var(--r-xs);
    overflow: hidden;
    background: var(--paper-2);
}
.side-recent-art img { width: 100%; height: 100%; object-fit: cover; }

.side-recent-body { min-width: 0; }
.side-recent-body b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-meta);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
    transition: color var(--dur-1) var(--ease);
}
.side-recent-body em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 3px;
}

/* ---- 3 · 标签云：6 色轮换（只用于标识，不做信息层级）---- */
.side-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }

.side-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: var(--t-meta);
    color: var(--ink-2);
    background: var(--tag-bg, var(--paper-2));
    transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.side-tag:hover { color: var(--ink); transform: translateY(-1px); }
.side-tag i {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.side-tag:nth-child(6n+1) { --tag-bg: color-mix(in srgb, var(--tag-sky) 26%, #fff); }
.side-tag:nth-child(6n+2) { --tag-bg: color-mix(in srgb, var(--tag-mint) 30%, #fff); }
.side-tag:nth-child(6n+3) { --tag-bg: color-mix(in srgb, var(--tag-lilac) 28%, #fff); }
.side-tag:nth-child(6n+4) { --tag-bg: color-mix(in srgb, var(--tag-pink) 30%, #fff); }
.side-tag:nth-child(6n+5) { --tag-bg: color-mix(in srgb, var(--tag-butter) 34%, #fff); }
.side-tag:nth-child(6n)   { --tag-bg: color-mix(in srgb, var(--tag-sand) 34%, #fff); }

/* 窄屏：左栏挪到主列下方（不隐藏，信息仍然可达），sticky 关掉 */
@media (max-width: 1023px) {
    .home-body { grid-template-columns: minmax(0, 1fr); }
    .home-main { order: 1; }
    .home-side {
        order: 2;
        position: static;
        margin-top: var(--s4);
    }
    .side-counts b { font-size: 17px; }
}

/* ==================== 24. 相册（v3.7）====================
   两组元素：分组 Tab（胶囊，选中态用主色）+ 照片墙。
   照片用和文章配图一样的「白色卡纸装裱」，保证全站同一个处理。 */
.album-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s6);
}

.album-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    font-size: var(--t-meta);
    color: var(--ink-2);
    background: var(--card);
    transition: color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease);
}
.album-tab:hover { border-color: var(--sky); color: var(--ink); }
.album-tab i {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
/* 选中态：实心主色 + 白字（--sky-fill 白字 6.6:1，见第 21 节令牌说明） */
.album-tab.on {
    background: var(--sky-fill);
    border-color: var(--sky-fill);
    color: #fff;
}
.album-tab.on i { color: rgba(255, 255, 255, .82); }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: var(--s5);
}

.photo-card {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--g-edge);
    border-radius: var(--r-sm);
    box-shadow: var(--card-shadow);
    padding: 10px;
    transition: transform var(--dur-2) var(--ease);
}
.photo-card:hover { transform: translateY(-3px); }

.photo-art {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--paper-2);
}
.photo-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-3) var(--ease);
}
.photo-card:hover .photo-art img { transform: scale(1.04); }

.photo-cap { padding: var(--s3) 2px 2px; }
.photo-cap b {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.5;
}
.photo-meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: 4px;
    font-size: var(--t-meta);
    color: var(--ink-3);
}
.photo-cap em {
    display: block;
    font-style: normal;
    font-size: var(--t-meta);
    color: var(--ink-3);
    line-height: 1.7;
    margin-top: 6px;
}

/* ==================== 25. 友链（v3.8）====================
   三块：本站信息卡 / 申请须知 / 友链墙。
   材质沿用内容卡（.85 白 + 描边 + 轻阴影），圆角 --r-sm(10)。 */
.link-self {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: var(--s5);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.link-self-face {
    flex: none;
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sky-wash);
    color: var(--sky-ink);
    display: grid; place-items: center;
    font-size: 24px;
    font-weight: 500;
    box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line);
}
.link-self-face img { width: 100%; height: 100%; object-fit: cover; }

.link-self-body { min-width: 0; }
.link-self-body > b {
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--ink);
}
.link-self-body p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.7;
    margin: 4px 0 0;
}
.link-self-motto { color: var(--clay-ink) !important; font-size: var(--t-meta) !important; }

.link-self-facts {
    margin-left: auto;
    display: flex;
    gap: var(--s6);
    flex: none;
}
.link-self-facts b {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.link-self-facts span { font-size: var(--t-meta); color: var(--ink-3); }

.link-self-icp {
    margin: var(--s3) 0 0;
    font-size: 12px;
    color: var(--ink-3);
}

/* 申请须知：左侧一条虚线，像批注 */
.link-note {
    padding: var(--s4) var(--s5);
    border-left: 2px dashed var(--line-2);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--paper-2);
}
.link-note ol { margin: 0; padding-left: 1.2em; }
.link-note li {
    font-size: var(--t-sm);
    line-height: 1.9;
    color: var(--ink-2);
    margin-bottom: 4px;
}
.link-note li:last-child { margin-bottom: 0; }
/* 行内链接（首页 / 归档 / 项目…）默认只有 19px 高，低于 24px 的触摸目标下限，
   自检会判成「小目标」；补一点纵向 padding 即可，不改变排版。 */
.link-note li a {
    display: inline-block;
    padding: 3px 0;
}
.link-note-tip {
    margin: var(--s4) 0 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-size: var(--t-meta);
    color: var(--ink-3);
    line-height: 1.7;
}

.link-grid {
    display: grid;
    /* 固定 3 列（而不是 auto-fill）：条目数是 15 = 3×5，
       auto-fill 会算出 4 列，最后一行只剩 1 个卡、右侧空一大块 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
}

@media (max-width: 900px) {
    .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .link-grid { grid-template-columns: minmax(0, 1fr); }
}

.link-card {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--g-edge);
    border-radius: var(--r-sm);
    box-shadow: var(--card-shadow);
    color: inherit;
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.link-card:hover { transform: translateY(-3px); border-color: var(--sky); }

.link-face {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sky-wash);
    color: var(--sky-ink);
    display: grid; place-items: center;
    font-size: 16px;
    font-weight: 500;
}
.link-face img { width: 100%; height: 100%; object-fit: cover; }

.link-card-body { min-width: 0; }
.link-card-body b {
    display: block;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.link-card-body em {
    display: block;
    font-style: normal;
    font-size: var(--t-meta);
    color: var(--ink-3);
    line-height: 1.6;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 右上角小箭头：明确「点了会跳走」 */
.link-card-go {
    flex: none;
    margin-left: auto;
    color: var(--ink-3);
    transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.link-card:hover .link-card-go { color: var(--sky-ink); transform: translate(2px, -2px); }

@media (max-width: 767px) {
    .link-self { flex-wrap: wrap; gap: var(--s4); }
    .link-self-facts { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ==================== 26. 更新日志（v3.9）====================
   结构：一天一个分组（左侧日期 + 右侧条目列表）。
   四种类型用四个低饱和底色的小徽章区分，只做标识、不承载信息层级。 */
.log-day {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
}

.log-date { position: sticky; top: 88px; }
.log-date b {
    display: block;
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.log-date i {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 2px;
}

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

.log-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line);
}
.log-item:last-child { border-bottom: 0; }

.log-kind {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--r-xs);
    font-size: 11.5px;
    line-height: 1;
    color: var(--ink-2);
    background: var(--paper-2);
}
/* 四种类型：底色不同但明度接近，避免「颜色=重要性」的错觉 */
.log-kind.k-new   { background: color-mix(in srgb, var(--tag-mint) 34%, #fff); }
.log-kind.k-fix   { background: color-mix(in srgb, var(--tag-pink) 32%, #fff); }
.log-kind.k-opt   { background: color-mix(in srgb, var(--tag-sky) 30%, #fff); }
.log-kind.k-tweak { background: color-mix(in srgb, var(--tag-sand) 36%, #fff); }

.log-content {
    flex: 1;
    min-width: 0;
    font-size: var(--t-sm);
    line-height: 1.75;
    color: var(--ink-2);
}

.log-version {
    flex: none;
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    padding-top: 3px;
}

@media (max-width: 767px) {
    .log-day { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
    .log-date { position: static; display: flex; align-items: baseline; gap: var(--s2); }
    .log-date i { margin-top: 0; }
}

/* ==================== 页脚站点导航 ====================
   底部 Tab 只有 6 项、桌面导航 7 项，这一排补齐窄屏也能到的页面。
   独占一行（flex: 0 0 100%）不挤上面那行版权信息。 */
.foot-nav {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
}
/* 页脚 RSS 入口：和旁边那行技术栈同色系，hover 才变链接色。
   padding 是为了满足 24px 触摸目标（同 .foot-nav a 的做法）——
   不给的话回归会报「小触摸目标 +1」，实测过。 */
.foot-rss {
    display: inline-block;
    padding: 3px 0;
    font-size: var(--t-meta);
    color: var(--ink-3);
    letter-spacing: .04em;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}

.foot-rss:hover {
    color: var(--sky-ink);
    text-decoration: underline;
}

.foot-nav a {
    display: inline-block;
    padding: 3px 0;              /* 行内链接也要满足 24px 触摸目标 */
    color: var(--ink-3);
}
.foot-nav a:hover { color: var(--sky-ink); }