/* ===================================================================
 *  February Archive · 全站皮肤
 *  风格：暖纸底 + 墨色正文 + 单一朱砂强调色 + 发丝边框
 *  （无渐变文字、无霓虹光晕、无彩虹描边）
 * =================================================================== */

:root {
    --paper: #faf9f5;
    --paper-2: #f3f1ea;
    --paper-3: #eae7dd;
    --surface: #ffffff;
    --ink: #1f1e1d;
    --ink-2: #5c5a52;
    --ink-3: #8c877b;
    --line: #e4e1d7;
    --line-2: #edeae2;
    --line-strong: #d4d0c2;
    --accent: #c96442;
    --accent-2: #b4543a;
    --accent-soft: #f6e9e2;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow-1: 0 1px 2px rgba(31, 30, 29, .05);
    --shadow-2: 0 10px 30px -18px rgba(31, 30, 29, .35);
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
    --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Songti SC", "Noto Serif SC", serif;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --dock-h: 58px;
}

html[data-theme="dark"] {
    --paper: #262624;
    --paper-2: #201f1e;
    --paper-3: #2f2e2b;
    --surface: #2b2a28;
    --ink: #f2f0e9;
    --ink-2: #b6b2a6;
    --ink-3: #86827a;
    --line: #3a3835;
    --line-2: #333230;
    --line-strong: #4a4844;
    --accent: #e08a6d;
    --accent-2: #f0a184;
    --accent-soft: rgba(224, 138, 109, .14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 12px 32px -20px rgba(0, 0, 0, .8);
}

/* ------------------------------ 基础 ------------------------------ */
html { background: var(--paper); }

body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    transition: background .3s ease, color .3s ease;
}

::selection { background: var(--accent-soft); color: var(--ink); }

a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

#loader {
    height: 2px;
    background: var(--accent);
}

.f-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--accent);
    z-index: 120;
    pointer-events: none;
    transition: transform .1s linear;
}

#single,
#container { background: transparent; }

#mark { background: var(--paper-2); }

#container:before { display: none; }

#top { display: none !important; }

/* ------------------------------ 顶栏 ------------------------------ */
.f-dock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 66px;
    padding: 0 28px;
    color: #f6f4ee;
    border-bottom: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, height .25s ease;
}

.f-dock.is-solid {
    height: var(--dock-h);
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .f-dock.is-solid { background: var(--paper); }
}

.f-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: inherit;
}

.f-brand-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
    transition: box-shadow .25s, transform .25s var(--ease);
}

.f-dock.is-solid .f-brand-avatar { box-shadow: 0 0 0 1px var(--line-strong); }
.f-brand:hover .f-brand-avatar { transform: translateY(-1px); }

.f-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
}

.f-brand-text em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .3em;
    opacity: .55;
    margin-top: 3px;
}

.f-dock-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
}

.f-dock-links a {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 13.5px;
    color: inherit;
    opacity: .72;
    transition: opacity .2s, background .2s, color .2s;
}

.f-dock-links a:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.f-dock.is-solid .f-dock-links a:hover { background: var(--paper-2); opacity: 1; }

.f-dock-links a.is-active {
    opacity: 1;
    font-weight: 600;
}

.f-dock.is-solid .f-dock-links a.is-active { color: var(--accent); }

.f-dock-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.f-dock-btn {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    opacity: .85;
    transition: background .2s, opacity .2s, color .2s;
}

.f-dock-btn:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.f-dock.is-solid .f-dock-btn:hover { background: var(--paper-2); }

.f-dock-btn svg { width: 17px; height: 17px; pointer-events: none; }

.f-theme-btn .f-ico-sun { display: none; }
html[data-theme="dark"] .f-theme-btn .f-ico-sun { display: block; }
html[data-theme="dark"] .f-theme-btn .f-ico-moon { display: none; }

.f-play-btn::before,
.f-play-btn::after { content: none !important; }
.f-play-btn .f-play-ico--pause { display: none; }
.f-play-btn.icon-pause .f-play-ico--play { display: none; }
.f-play-btn.icon-pause .f-play-ico--pause { display: block; }

.f-dock-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.f-dock-menu span {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--ease), opacity .2s;
    pointer-events: none;
}

body.mu .f-dock-menu span:first-child { transform: translateY(3.2px) rotate(45deg); }
body.mu .f-dock-menu span:last-child { transform: translateY(-3.2px) rotate(-45deg); }

body.mu .f-dock,
body.mu .f-dock.is-solid {
    color: var(--ink);
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.mu .f-dock .f-brand-avatar { box-shadow: 0 0 0 1px var(--line-strong); }

/* ------------------------------ 全屏菜单 ------------------------------ */
.nav {
    background: var(--paper);
    z-index: 90;
}

.f-menu-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    min-height: 100%;
    margin: 0 auto;
    padding: 108px 32px 56px;
    text-align: left;
    color: var(--ink);
    overflow-y: auto;
}

.f-menu-inner p,
.nav .footerlinks,
.nav #copyright {
    position: static;
    width: auto;
}

.f-menu-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .34em;
    color: var(--ink-3);
    text-transform: uppercase;
}

.f-pulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.menu {
    display: block;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
    border-top: 1px solid var(--line);
}

.menu li {
    display: block;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: f-menu-in .5s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}

body:not(.mu) .menu li { animation: none; opacity: 0; }
body.mu .menu li { opacity: 1; }

.menu a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 16px 4px;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink);
    transition: color .2s, padding .25s var(--ease);
}

.menu a:hover {
    color: var(--accent);
    padding-left: 12px;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.f-menu-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--ink-3);
    min-width: 22px;
}

.f-menu-text { display: inline-block; }

.nav .hitokoto {
    margin: 26px 0 0;
    max-width: 560px;
    font-family: var(--serif);
    font-size: 15px;
    font-style: italic;
    line-height: 1.85;
    color: var(--ink-2);
    min-height: 28px;
    text-align: left;
}

.nav .footerlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
    padding: 0;
    justify-content: flex-start;
}

.nav .footerlinks a {
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--ink-2);
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: transparent;
    transition: all .2s;
}

.nav .footerlinks a:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

.nav #copyright {
    margin-top: 30px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--ink-3);
    text-align: left;
}

/* ------------------------------ 首页头图 ------------------------------ */
#screen.f-hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f7f5ef;
    background: #201f1e;
    isolation: isolate;
}

#mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.layer { position: relative; }

#cover {
    position: absolute;
    max-width: none;
    opacity: 0;
    filter: saturate(.9) contrast(1.02);
    transition: opacity .9s ease;
}

#cover.f-loaded { opacity: 1; }

#vibrant {
    position: absolute;
    inset: 0;
    opacity: .18;
    mix-blend-mode: multiply;
    pointer-events: none;
}

#vibrant div { position: absolute; inset: 0; width: 100%; height: 100%; }

.f-hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(64% 56% at 50% 42%, rgba(28, 27, 26, .54), transparent 74%),
        linear-gradient(180deg, rgba(28, 27, 26, .62) 0%, rgba(28, 27, 26, .34) 40%, rgba(28, 27, 26, .5) 76%, var(--paper) 100%);
    pointer-events: none;
}

.f-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 860px;
    padding: 96px 26px 56px;
}

.f-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .3em;
    color: rgba(247, 245, 239, .68);
    text-transform: uppercase;
}

.f-hero-kicker .f-pulse { background: rgba(247, 245, 239, .8); }

.f-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
}

.f-hero-cn {
    font-size: clamp(2.7rem, 7vw, 4.7rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: .04em;
    color: #faf8f3;
}

.f-hero-en {
    font-family: var(--mono);
    font-size: clamp(.7rem, 1.3vw, .85rem);
    letter-spacing: .46em;
    color: rgba(247, 245, 239, .52);
    text-transform: uppercase;
}

.f-hero-sub {
    font-size: 14px;
    letter-spacing: .12em;
    color: rgba(247, 245, 239, .7);
    margin-top: 4px;
}

.f-typing {
    min-height: 28px;
    margin-top: 20px;
    font-size: 15px;
    color: rgba(250, 248, 243, .92);
    letter-spacing: .01em;
}

.f-caret {
    display: inline-block;
    width: 1.5px;
    height: 15px;
    margin-left: 4px;
    vertical-align: -2px;
    background: #f7f5ef;
    animation: f-blink 1.1s steps(1) infinite;
}

.f-hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 32px auto 0;
    max-width: 620px;
    border: 1px solid rgba(247, 245, 239, .22);
    border-radius: 10px;
    background: rgba(28, 27, 26, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.f-hero-stats li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 13px 8px 11px;
    border-left: 1px solid rgba(247, 245, 239, .14);
}

.f-hero-stats li:first-child { border-left: 0; }

.f-hero-stats b {
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 500;
    color: #faf8f3;
    font-variant-numeric: tabular-nums;
}

.f-hero-stats span {
    font-size: 10.5px;
    letter-spacing: .14em;
    color: rgba(247, 245, 239, .62);
}

.f-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.f-btn-primary,
.f-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    letter-spacing: .01em;
    transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}

.f-btn-primary {
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
}

.f-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }

.f-btn-ghost {
    color: #f7f5ef;
    background: transparent;
    border: 1px solid rgba(247, 245, 239, .34);
}

.f-btn-ghost:hover { background: rgba(247, 245, 239, .12); border-color: rgba(247, 245, 239, .6); color: #fff; }

.f-hero-latest {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(560px, 92%);
    margin-top: 32px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(247, 245, 239, .22);
    background: rgba(28, 27, 26, .32);
    color: rgba(250, 248, 243, .9);
    font-size: 13px;
    transition: border-color .2s, background .2s;
}

.f-hero-latest:hover { border-color: rgba(247, 245, 239, .5); background: rgba(28, 27, 26, .45); }

.f-hero-latest-label {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    color: rgba(247, 245, 239, .55);
}

.f-hero-latest-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-hero-latest-date {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(247, 245, 239, .45);
}

.f-scroll-cue {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    margin: 30px auto 0;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .34em;
    color: rgba(247, 245, 239, .5);
    transition: color .2s;
}

.f-scroll-cue:hover { color: rgba(247, 245, 239, .85); }
.f-scroll-text { line-height: 1; }

.f-mouse {
    display: block;
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, rgba(247, 245, 239, .6), transparent);
}

/* ------------------------------ 区块 ------------------------------ */
.f-sec {
    position: relative;
    padding: 76px 0 16px;
}

.f-sec-head {
    max-width: 1120px;
    margin: 0 auto 26px;
    padding: 0 26px 18px;
    border-bottom: 1px solid var(--line);
}

.f-sec-index {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.f-sec-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: clamp(1.4rem, 2.8vw, 1.72rem);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ink);
}

.f-sec-title em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .26em;
    color: var(--ink-3);
    text-transform: uppercase;
}

.f-sec-desc {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-2);
    max-width: 620px;
}

/* ------------------------------ 文章卡片 ------------------------------ */
#primary.f-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 26px;
}

.f-grid .post {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: border-color .22s, box-shadow .22s, transform .22s var(--ease);
    animation: f-card-in .55s var(--ease) both;
}

.f-grid .post:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.f-card-cover,
.f-grid .post > a.f-card-cover {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line-2);
}

.f-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.f-grid .post:hover .f-card-cover img { transform: scale(1.02); }

.f-card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 27, 26, 0) 55%, rgba(28, 27, 26, .45) 100%);
    pointer-events: none;
}

.f-card-cat {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: .02em;
    color: #f7f5ef;
    background: rgba(28, 27, 26, .5);
    border: 1px solid rgba(247, 245, 239, .22);
    backdrop-filter: blur(4px);
}

.f-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

.f-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
}

.f-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

.f-card-tag { color: var(--ink-3); }

.f-card-title {
    margin: 8px 0 6px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -.004em;
    color: var(--ink);
}

.f-card-title a { color: inherit; transition: color .2s; }
.f-grid .post:hover .f-card-title a { color: var(--accent); }

.f-card-desc {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.f-card-more {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--ink-3);
    transition: color .2s, gap .2s;
}

.f-card-more i { font-style: normal; }

.f-grid .post:hover .f-card-more { color: var(--accent); gap: 8px; }

/* 加载更多 */
#pager {
    margin: 40px auto 0;
    text-align: center;
}

#pager .more,
.f-pager-end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 10px 26px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    transition: border-color .2s, color .2s;
}

#pager .more:hover { border-color: var(--accent); color: var(--accent); }

.f-pager-end { color: var(--ink-3); border-color: var(--line); background: transparent; }

/* 标签 / 分类探索区 */
.f-explore {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1120px;
    margin: 52px auto 0;
    padding: 28px 26px 0;
    border-top: 1px solid var(--line);
}

.f-explore-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
}

.f-explore-title em { display: none; }

.f-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.f-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--line);
    transition: border-color .2s, color .2s, background .2s;
}

.f-chip em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    padding: 0;
    background: none;
}

.f-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.f-chip:hover em { color: var(--accent); }

.f-chip--ghost { border-style: dashed; color: var(--ink-3); }

/* ------------------------------ 文章页 ------------------------------ */
.f-post { background: transparent; }

.f-post-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    padding: 148px 26px 104px;
    overflow: hidden;
    color: #f7f5ef;
    background: #201f1e;
    isolation: isolate;
}

.f-post-hero-bg {
    position: absolute;
    inset: -2%;
    background-image: var(--f-cover);
    background-size: cover;
    background-position: center 32%;
    filter: saturate(.9) contrast(1.02);
    z-index: 0;
}

.f-post-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(0deg, rgba(24, 23, 22, .78) 0%, rgba(24, 23, 22, .46) 26%, rgba(24, 23, 22, 0) 52%),
        linear-gradient(180deg, rgba(28, 27, 26, .58) 0%, rgba(28, 27, 26, .38) 38%, rgba(28, 27, 26, .5) 72%, var(--paper) 100%);
}

.f-post-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.f-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(247, 245, 239, .55);
}

.f-crumbs a { color: rgba(247, 245, 239, .78); transition: color .2s; }
.f-crumbs a:hover { color: #fff; }
.f-crumb-cur { color: rgba(247, 245, 239, .45); }

.f-post-title {
    max-width: 880px;
    margin: 14px 0 16px;
    font-size: clamp(1.75rem, 4.2vw, 2.75rem);
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #faf8f3;
}

.f-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: rgba(247, 245, 239, .78);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.f-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.f-meta-item svg { width: 13px; height: 13px; opacity: .7; }

.f-meta-cat { color: rgba(247, 245, 239, .9); text-decoration: underline; text-underline-offset: 3px; }

.f-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 11.5px;
}

.f-tag { color: rgba(247, 245, 239, .72); transition: color .2s; }
.f-tag:hover { color: #fff; }

.f-post-wrap {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 34px;
    max-width: 1120px;
    margin: -64px auto 0;
    padding: 0 26px 20px;
    align-items: start;
}

.f-post-main {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 44px 48px 40px;
    box-shadow: var(--shadow-1);
}

/* 正文排版 */
.f-content.content {
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink);
    margin-top: 0;
    letter-spacing: .002em;
}

.f-content.content > *:first-child { margin-top: 0; }

.f-content.content h1,
.f-content.content h2,
.f-content.content h3,
.f-content.content h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.006em;
    scroll-margin-top: 92px;
}

.f-content.content h2 {
    margin: 2.2em 0 .8em;
    padding-bottom: .4em;
    border-bottom: 1px solid var(--line);
    font-size: 1.42rem;
}

.f-content.content h3 {
    margin: 1.9em 0 .6em;
    font-size: 1.16rem;
}

.f-content.content h4 { margin: 1.5em 0 .5em; font-size: 1.02rem; }

.f-content.content p { margin: 0 0 1.05em; }

.f-content.content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    word-break: break-word;
    transition: color .2s, text-decoration-color .2s;
}

.f-content.content a:hover { color: var(--accent-2); text-decoration-color: currentColor; }

.f-content.content strong { font-weight: 600; color: var(--ink); }

.f-content.content ul,
.f-content.content ol { margin: .9em 0 1.1em; padding-left: 1.35em; }

.f-content.content ul li { list-style: none; position: relative; margin: .35em 0; }
.f-content.content ul li::before {
    content: "";
    position: absolute;
    left: -.95em;
    top: .75em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-3);
}

.f-content.content ol li { margin: .35em 0; }
.f-content.content ol li::marker { color: var(--ink-3); font-family: var(--mono); font-size: .85em; }

.f-content.content blockquote {
    margin: 1.5em 0;
    padding: 2px 0 2px 18px;
    border: 0;
    border-left: 2px solid var(--accent);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--serif);
    font-size: 1.02em;
    font-style: italic;
}

.f-content.content blockquote p:last-child { margin-bottom: 0; }

.f-content.content img {
    border-radius: 10px;
    border: 1px solid var(--line);
    margin: 1.3em auto;
    transition: border-color .2s;
}

.f-content.content img:hover { border-color: var(--line-strong); }

.f-content.content hr {
    margin: 2.2em 0;
    border: 0;
    height: 1px;
    background: var(--line);
}

.f-content.content table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
    border: 1px solid var(--line);
    font-size: 14px;
}

.f-content.content table th {
    background: var(--paper-2);
    font-weight: 600;
    color: var(--ink);
    text-align: left;
}

.f-content.content table th,
.f-content.content table td { padding: 9px 13px; border-bottom: 1px solid var(--line-2); }

.f-content.content table tr:last-child td { border-bottom: 0; }
.f-content.content table tr { background: transparent; }

.f-content.content code {
    font-family: var(--mono);
    font-size: .87em;
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--accent-2);
    background: var(--accent-soft);
}

.f-content.content pre {
    position: relative;
    margin: 1.5em 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: #232220;
    border: 1px solid #34322f;
    line-height: 1.7;
    overflow: auto;
}

html[data-theme="dark"] .f-content.content pre { background: #1c1b19; border-color: #34322f; }

.f-content.content pre code {
    background: none;
    padding: 0;
    color: #e8e5dc;
    font-size: 13px;
    border-radius: 0;
}

.f-content.content .highlight {
    margin: 1.5em 0;
    border-radius: 10px;
    overflow: hidden;
    background: #232220;
    border: 1px solid #34322f;
}

.f-content.content .highlight pre { margin: 0; border: 0; border-radius: 0; }

.f-pre-wrap { position: relative; }

.f-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 4px 9px;
    border: 1px solid rgba(240, 236, 226, .2);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: rgba(240, 236, 226, .65);
    background: rgba(240, 236, 226, .06);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s, color .2s;
}

.f-pre-wrap:hover .f-copy-btn { opacity: 1; }
.f-copy-btn:hover { background: rgba(240, 236, 226, .14); color: #f2f0e9; }
.f-copy-btn.is-done { color: #a8d5a2; border-color: rgba(168, 213, 162, .4); }

/* 目录 */
.f-post-aside { position: sticky; top: calc(var(--dock-h) + 20px); }

.f-toc-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-1);
    max-height: calc(100vh - 130px);
    overflow: auto;
}

.f-toc-title {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}

.f-toc-title em { display: none; }

.f-toc-body .toc { list-style: none; margin: 0; padding: 0; }
.f-toc-body .toc-item { margin: 1px 0; }
.f-toc-body .toc-child { list-style: none; padding-left: 10px; margin: 0; }

.f-toc-body .toc-link {
    display: block;
    padding: 3px 0 3px 10px;
    margin-left: -11px;
    border-left: 2px solid transparent;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2);
    transition: color .18s, border-color .18s;
}

.f-toc-body .toc-link:hover { color: var(--ink); }

.f-toc-body .toc-item.is-active > .toc-link {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 500;
}

/* 版权卡 */
.f-copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 40px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.f-copy-title { font-size: 13px; color: var(--ink); }
.f-copy-title b { font-weight: 600; }
.f-copy-text { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }

.f-copy-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
}

.f-copy-side a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.f-copy-side a:hover { color: var(--accent); }

/* 上 / 下一篇 */
.f-pn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.f-pn-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: transparent;
    transition: border-color .2s, background .2s;
}

.f-pn-card:hover { border-color: var(--line-strong); background: var(--paper-2); }

.f-pn-next { text-align: right; align-items: flex-end; }

.f-pn-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--ink-3);
}

.f-pn-title {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.f-pn-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* 评论 */
.f-comments { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }

.f-comments-title {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--ink);
}

.f-comments-title em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    color: var(--ink-3);
}

.comment.link {
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: 13px;
    text-align: center;
    transition: border-color .2s, color .2s;
}

.comment.link:hover { border-color: var(--accent); color: var(--accent); }

.comment .gt-header-textarea { border-radius: 8px !important; }
.comment .gt-btn-public,
.comment .gt-btn-preview,
.comment .gt-btn-login { border-radius: 6px !important; }

html[data-theme="dark"] .comment .gt-container .gt-header-textarea { background: var(--paper-2); color: var(--ink); }
html[data-theme="dark"] .comment .gt-container .gt-comment-content { background: var(--paper-2); }
html[data-theme="dark"] .comment .gt-container .gt-comment-body { color: var(--ink-2); }
html[data-theme="dark"] .comment .gt-container .gt-header-textarea,
html[data-theme="dark"] .comment .gt-container .gt-comment-content { border: 1px solid var(--line); }

/* ------------------------------ 归档 ------------------------------ */
.f-archive .f-page-body { max-width: 940px; margin-top: 10px; }

.f-arc-years {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.f-arc-years a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 7px;
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(247, 245, 239, .82);
    border: 1px solid rgba(247, 245, 239, .24);
    transition: all .2s;
}

.f-arc-years a:hover { background: rgba(247, 245, 239, .12); color: #fff; border-color: rgba(247, 245, 239, .5); }

.f-arc-years em { font-style: normal; font-size: 10px; opacity: .6; }

.f-arc-block {
    margin-bottom: 10px;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 86px;
}

.f-arc-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 2px 10px;
}

.f-arc-year {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: .02em;
}

.f-arc-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: .08em;
}

.f-arc-list { padding: 0; }

.f-arc-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 16px;
    align-items: baseline;
    gap: 14px;
    padding: 8px 8px;
    border-radius: 7px;
    color: var(--ink);
    transition: background .18s, color .18s, padding .18s var(--ease);
}

.f-arc-item time {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
}

.f-arc-title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f-arc-arrow {
    font-size: 11px;
    color: var(--ink-3);
    opacity: 0;
    transition: opacity .18s;
}

.f-arc-item:hover { background: var(--paper-2); }
.f-arc-item:hover .f-arc-title { color: var(--accent); }
.f-arc-item:hover .f-arc-arrow { opacity: 1; }

/* ------------------------------ 通用页面 ------------------------------ */
.f-page-hero {
    position: relative;
    padding: 148px 26px 104px;
    color: #f7f5ef;
    background:
        radial-gradient(120% 90% at 15% -10%, rgba(201, 100, 66, .22), transparent 60%),
        linear-gradient(160deg, #221f1c 0%, #262320 55%, #1e1c1a 100%);
    overflow: hidden;
    isolation: isolate;
}

.f-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 88%, var(--paper) 100%);
    z-index: -1;
}

.f-page-title {
    margin: 12px 0 10px;
    font-size: clamp(1.8rem, 4.4vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -.008em;
    color: #faf8f3;
}

.f-page-sub {
    font-size: 13.5px;
    color: rgba(247, 245, 239, .62);
}

.f-page-sub b { color: rgba(247, 245, 239, .92); font-weight: 500; }

.f-page-body {
    position: relative;
    z-index: 2;
    max-width: 940px;
    margin: -52px auto 0;
    padding: 0 26px 40px;
}

.f-page-body > .f-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 36px 40px;
    box-shadow: var(--shadow-1);
}

/* 空页面占位 */
.f-empty {
    padding: 48px 30px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
}

.f-empty-title { font-size: 16px; font-weight: 600; color: var(--ink); }

.f-empty-text { margin: 8px 0 18px; font-size: 13px; color: var(--ink-2); }

.f-empty-text code {
    font-family: var(--mono);
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--accent-2);
    background: var(--accent-soft);
}

.f-btn-ghost--dark {
    color: var(--ink);
    border: 1px solid var(--line-strong);
    background: transparent;
}

.f-btn-ghost--dark:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* 标签墙 */
.f-chips--wall {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    gap: 9px;
}

.f-chip--tag {
    font-size: calc(12.5px * var(--s, 1));
    padding: 6px calc(11px * var(--s, 1));
}

.f-chip-hash { color: var(--ink-3); font-family: var(--mono); }

/* 分类卡片 */
.f-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
}

.f-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid var(--line);
    transition: border-color .2s, background .2s;
}

.f-cat-card:hover { border-color: var(--line-strong); background: var(--paper-2); }

.f-cat-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.f-cat-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.f-cat-arrow {
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 12px;
    color: var(--ink-3);
    opacity: 0;
    transition: opacity .2s, color .2s;
}

.f-cat-card:hover .f-cat-arrow { opacity: 1; color: var(--accent); }

/* ------------------------------ 页脚 ------------------------------ */
.f-footer {
    margin-top: 64px;
    padding: 56px 26px 44px;
    border-top: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-2);
}

.f-footer-inner {
    max-width: 940px;
    margin: 0 auto;
    text-align: left;
}

.f-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.f-footer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px var(--line-strong);
}

.f-footer-brand em {
    display: block;
    font-style: normal;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: .26em;
    color: var(--ink-3);
    margin-top: 3px;
}

.f-footer-quote {
    margin-top: 18px;
    font-family: var(--serif);
    font-size: 14px;
    font-style: italic;
    line-height: 1.9;
    color: var(--ink-2);
}

.f-footer-quote-zh { display: block; }

.f-footer-quote-en {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-3);
}

.f-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 20px;
}

.f-footer-links a {
    font-size: 12.5px;
    color: var(--ink-2);
    transition: color .2s;
}

.f-footer-links a:hover { color: var(--accent); }

.f-footer-meta,
.f-footer-beian {
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--ink-3);
}

.f-footer-beian a { color: var(--ink-3); }

/* ------------------------------ 回到顶部 ------------------------------ */
.f-totop {
    position: fixed;
    right: 24px;
    bottom: 26px;
    z-index: 80;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s, transform .25s var(--ease), color .2s, border-color .2s;
}

.f-totop svg { width: 16px; height: 16px; }

.f-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }

.f-totop:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------ 动画 ------------------------------ */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s var(--ease);
}

[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes f-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes f-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes f-menu-in { to { opacity: 1; transform: none; } }

/* ------------------------------ 关于页微调 ------------------------------ */
.about-page .ab-nav { top: calc(var(--dock-h) + 14px); }

/* ------------------------------ 响应式 ------------------------------ */
@media screen and (max-width: 1080px) {
    .f-post-wrap { grid-template-columns: minmax(0, 1fr); }
    .f-post-aside { display: none; }
}

@media screen and (max-width: 900px) {
    .f-dock { padding: 0 18px; gap: 12px; }
    .f-dock-links { display: none; }
    .f-explore { grid-template-columns: 1fr; gap: 20px; }
    .f-hero-inner { padding: 88px 20px 44px; }
    #screen.f-hero { min-height: 580px; }
    .f-post-main { padding: 32px 24px 28px; }
    .f-post-hero { padding: 128px 20px 92px; min-height: 54vh; }
    .f-page-hero { padding: 128px 20px 92px; }
    .f-page-body > .f-content { padding: 26px 22px; }
    .f-pn { grid-template-columns: 1fr; }
    .f-copyright { flex-direction: column; align-items: flex-start; }
    .f-copy-side { align-items: flex-start; }
}

@media screen and (max-width: 620px) {
    .f-hero-cn { font-size: clamp(2.2rem, 11vw, 3rem); }
    .f-hero-stats li { padding: 12px 4px; }
    .f-hero-stats b { font-size: 17px; }
    .f-hero-stats span { font-size: 10px; letter-spacing: .1em; }
    .f-btn-primary, .f-btn-ghost { padding: 9px 16px; font-size: 12.5px; }
    .f-hero-latest { max-width: 100%; }
    .f-hero-latest-title { max-width: 46vw; }
    #primary.f-grid { grid-template-columns: 1fr; padding: 0 16px; gap: 14px; }
    .f-sec-head, .f-explore { padding-left: 16px; padding-right: 16px; }
    .f-page-body { padding: 0 16px 30px; }
    .f-post-wrap { padding: 0 16px 16px; margin-top: -44px; }
    .f-post-title { font-size: 1.6rem; }
    .f-arc-item { grid-template-columns: 48px minmax(0, 1fr) 12px; gap: 10px; }
    .f-totop { right: 14px; bottom: 16px; width: 36px; height: 36px; }
    .f-footer { padding: 44px 18px 36px; }
    .f-chips--wall, .f-cat-grid { padding: 16px; }
    .menu a { font-size: clamp(20px, 7vw, 26px); padding: 14px 2px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .f-grid .post { animation: none; opacity: 1; }
}