/* ===========================================================
   邱懿武 · 个人主页 · v2
   现代克制 · 人文科技
   =========================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
*::selection { background: var(--ink); color: var(--bg); }

:root {
    /* 色板 · 暖白底 + 真墨 + 极少朱砂 */
    --bg:        #FAF8F4;
    --bg-2:      #F2EEE5;
    --bg-3:      #ECE7DA;
    --surface:   #FFFFFF;
    --ink:       #3A3936;
    --ink-2:     #55514C;
    --ink-3:     #77716A;
    --ink-4:     #B1AAA2;
    --line:      rgba(207, 201, 190, 0.76);
    --line-2:    #C9C2B4;
    --accent:    #A65D4E;
    --accent-soft: rgba(166,93,78,0.10);
    --accent-2:  #8F6A5F;
    --radius-xs: 10px;
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-pill: 999px;
    --glass-line: rgba(255,255,255,0.68);
    --wash-peach: rgba(244, 190, 150, 0.36);
    --wash-rose: rgba(235, 190, 204, 0.26);
    --wash-violet: rgba(188, 181, 214, 0.24);
    --wash-smoke: rgba(222, 224, 220, 0.46);
    --glass: rgba(255, 255, 255, 0.52);
    --glass-strong: rgba(255, 255, 255, 0.76);
    --white-chip: rgba(255, 255, 255, 0.72);
    --shadow-soft: 0 24px 72px rgba(68, 61, 54, 0.08);

    /* 字体 */
    --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
    --font-cn:      'Noto Sans SC', 'PingFang SC', sans-serif;
    --font-cn-serif:'Noto Serif SC', 'Songti SC', serif;

    /* 尺度 */
    --max:    1280px;
    --gutter: 40px;

    /* tweakable */
    --grain: 0.4;
    --accent-hue: #A65D4E;
    --base-size: 16px;
}

[data-theme="dark"] {
    --bg:      #2B2A28;
    --bg-2:    #34322F;
    --bg-3:    #3C3935;
    --surface: #403D39;
    --ink:     #F1EDE4;
    --ink-2:   #D8D1C6;
    --ink-3:   #ADA69B;
    --ink-4:   #777067;
    --line:    rgba(242,237,224,0.16);
    --line-2:  rgba(242,237,224,0.22);
    --accent:  #D28A7E;
    --accent-soft: rgba(210,138,126,0.14);
    --accent-2: #B9978E;
    --glass-line: rgba(242,237,224,0.16);
    --wash-peach: rgba(130, 76, 48, 0.18);
    --wash-rose: rgba(126, 72, 96, 0.16);
    --wash-violet: rgba(75, 71, 118, 0.20);
    --wash-smoke: rgba(58, 60, 58, 0.26);
    --glass: rgba(26, 24, 20, 0.56);
    --glass-strong: rgba(26, 24, 20, 0.74);
    --white-chip: rgba(250, 248, 244, 0.16);
    --shadow-soft: 0 26px 76px rgba(0, 0, 0, 0.28);
}

html { font-size: var(--base-size); scroll-behavior: smooth; }

body {
    font-family: var(--font-cn), var(--font-sans);
    font-weight: 400;
    background:
        linear-gradient(118deg, var(--wash-violet) 0%, transparent 34%),
        linear-gradient(238deg, var(--wash-peach) 8%, transparent 42%),
        linear-gradient(180deg, var(--wash-rose) 0%, transparent 32%, var(--wash-smoke) 72%, transparent 100%),
        var(--bg);
    background-attachment: fixed;
    background-size: 160% 160%, 150% 150%, 100% 220%, auto;
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .4s, color .4s;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
    font-feature-settings: "ss01", "cv11";
    animation: ambientWash 26s ease-in-out infinite alternate;
}

/* Subtle grain — modern not vintage */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: calc(var(--grain) * 0.72);
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: soft-light;
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: calc(var(--grain) * 0.6); }

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(15,14,12,0.025) 0 1px, transparent 1px 42px),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 46%, transparent 72%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0.08) 78%, transparent);
    opacity: 0.62;
}
[data-theme="dark"] body::after {
    background:
        repeating-linear-gradient(0deg, rgba(242,237,224,0.035) 0 1px, transparent 1px 42px),
        linear-gradient(90deg, transparent 0%, rgba(242,237,224,0.04) 46%, transparent 72%);
    opacity: 0.46;
}

@keyframes ambientWash {
    0% { background-position: 0% 12%, 100% 0%, 50% 0%, 0 0; }
    100% { background-position: 58% 36%, 42% 18%, 50% 44%, 0 0; }
}
@keyframes microFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}
@keyframes quietSheen {
    0%, 100% { opacity: 0.18; transform: translateX(-8%); }
    50% { opacity: 0.42; transform: translateX(8%); }
}
@keyframes softArrive {
    0% { opacity: 0; filter: blur(16px); transform: translateY(16px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes photoArrive {
    0% { opacity: 0; filter: saturate(0.92) brightness(1.04); transform: translateY(10px) scale(0.992); }
    100% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}
@keyframes cloudDrift {
    0% { transform: translate3d(-18px, 6px, 0) scale(0.98); opacity: 0.28; }
    50% { transform: translate3d(18px, -10px, 0) scale(1.04); opacity: 0.46; }
    100% { transform: translate3d(42px, 4px, 0) scale(1); opacity: 0.30; }
}
@keyframes tagGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0), inset 0 1px 0 rgba(255,255,255,0.46); }
    50% { box-shadow: 0 10px 30px rgba(244,190,150,0.14), inset 0 1px 0 rgba(255,255,255,0.8); }
}
@keyframes portraitLight {
    0% { opacity: 0.18; transform: translateX(-24%) skewX(-8deg); }
    50% { opacity: 0.34; transform: translateX(12%) skewX(-8deg); }
    100% { opacity: 0.22; transform: translateX(34%) skewX(-8deg); }
}
@keyframes portraitBreath {
    0%, 100% { filter: contrast(1.02) saturate(0.96) brightness(1); transform: scale(1); }
    50% { filter: contrast(1.03) saturate(0.98) brightness(1.018); transform: scale(1.012); }
}
@keyframes engineSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes engineReverse {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes flowBreath {
    0%, 100% { opacity: 0.18; filter: blur(0); }
    50% { opacity: 0.48; filter: blur(0.4px); }
}
@keyframes flowTravel {
    0% { transform: translateX(-18px); opacity: 0; }
    18% { opacity: 0.85; }
    82% { opacity: 0.85; }
    100% { transform: translateX(210px); opacity: 0; }
}
@keyframes glossSweep {
    0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
    24% { opacity: 0.34; }
    56% { opacity: 0.10; }
    100% { transform: translateX(170%) skewX(-18deg); opacity: 0; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   TYPOGRAPHY · base helpers
   ============================================================ */
.font-sans   { font-family: var(--font-sans); }
.font-serif  { font-family: var(--font-serif); }
.font-mono   { font-family: var(--font-mono); }
.font-cn-serif { font-family: var(--font-cn-serif); }
.italic { font-style: italic; }
.tabular { font-variant-numeric: tabular-nums; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 400;
}
.eyebrow .dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================================
   LAYOUT WRAPPERS
   ============================================================ */
.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 2;
}

section { position: relative; z-index: 2; }

#now,
#books,
.notes,
#projects,
#articles,
#newsletter,
footer {
    content-visibility: auto;
}
#now { contain-intrinsic-size: 940px; }
#books { contain-intrinsic-size: 1040px; }
.notes { contain-intrinsic-size: 520px; }
#projects { contain-intrinsic-size: 1180px; }
#articles { contain-intrinsic-size: 780px; }
#newsletter { contain-intrinsic-size: 360px; }
footer { contain-intrinsic-size: 520px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(250,248,244,0.045)),
        rgba(250, 248, 244, 0.14);
    -webkit-backdrop-filter: blur(30px) saturate(1.48) brightness(1.035);
    backdrop-filter: blur(30px) saturate(1.48) brightness(1.035);
    transition: background-color .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s, border-color .3s, box-shadow .3s;
    border-bottom: 1px solid rgba(255,255,255,0.26);
    box-shadow: 0 8px 28px rgba(68,61,54,0.014);
    isolation: isolate;
}
.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18), rgba(250,248,244,0.01) 44%, rgba(255,255,255,0.14)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 34px);
    opacity: 0.62;
    pointer-events: none;
}
.nav.scrolled {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.30), rgba(250,248,244,0.12)),
        rgba(250, 248, 244, 0.24);
    -webkit-backdrop-filter: saturate(1.9) blur(56px) brightness(1.06);
    backdrop-filter: saturate(1.9) blur(56px) brightness(1.06);
    border-bottom-color: rgba(15, 14, 12, 0.045);
    box-shadow: 0 10px 34px rgba(15, 14, 12, 0.032);
}
[data-theme="dark"] .nav.scrolled {
    background:
        linear-gradient(180deg, rgba(32,30,26,0.54), rgba(13,12,10,0.42)),
        rgba(13, 12, 10, 0.58);
    border-bottom-color: rgba(250, 248, 244, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 20px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.nav-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-cn-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ink);
}
.nav-brand .en {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 400;
}
.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    font-family: var(--font-cn);
    font-size: 14px;
    color: var(--ink-2);
}
.nav-links a {
    position: relative;
    padding: 7px 10px;
    transition: color .2s;
    border-radius: var(--radius-pill);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px; bottom: 2px;
    height: 10px;
    border-radius: var(--radius-pill);
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,0.9), rgba(255,255,255,0.1) 62%, transparent 72%),
        linear-gradient(90deg, transparent, rgba(166,93,78,0.18), transparent);
    filter: blur(3px);
    opacity: 0;
    transform: translateY(3px) scaleX(0.62);
    transition: opacity .25s ease, transform .25s ease;
}
.nav-links a:hover::after { opacity: 1; transform: translateY(0) scaleX(1); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { opacity: 1; transform: translateY(0) scaleX(1); }

.nav-end { display: flex; gap: 4px; align-items: center; }
.nav-btn {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)),
        rgba(255,255,255,0.30);
    border: 1px solid rgba(255,255,255,0.54);
    color: var(--ink-2);
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: all .18s;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(68,61,54,0.035), inset 0 1px 0 rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.22);
    backdrop-filter: blur(16px) saturate(1.22);
}
.nav-btn:hover { border-color: rgba(58,57,54,0.20); color: var(--ink); background: rgba(255,255,255,0.48); }
.nav-btn::before,
.btn::before,
.icon-btn::before,
.news-btn::before,
.manifesto-shuffle::before,
.agent-links a::before {
    content: '';
    position: absolute;
    inset: -40% auto -40% -70%;
    width: 62%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.54), transparent);
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
}
.nav-btn:hover::before,
.btn:hover::before,
.icon-btn:hover::before,
.news-btn:hover::before,
.manifesto-shuffle:hover::before,
.agent-links a:hover::before {
    animation: glossSweep 1.15s cubic-bezier(.22,.7,.2,1);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    padding: 56px 0 120px;
    position: relative;
    overflow: hidden;
}
.hero-portrait-wrap,
.hero-id .row-top,
.hero-name,
.hero-sub,
.hero-creds,
.hero-cta {
    opacity: 0;
    animation: softArrive .9s cubic-bezier(.2,.72,.18,1) forwards;
}
.hero-portrait-wrap {
    animation-name: photoArrive;
    animation-delay: .08s;
}
.hero-id .row-top { animation-delay: .16s; }
.hero-name { animation-delay: .28s; }
.hero-sub { animation-delay: .42s; }
.hero-creds { animation-delay: .54s; }
.hero-cta { animation-delay: .66s; }
.hero::before {
    content: '';
    position: absolute;
    inset: -18% -8% 6%;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(125deg, rgba(242, 224, 245, 0.62) 0%, transparent 36%),
        linear-gradient(235deg, rgba(255, 216, 176, 0.58) 4%, transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.38), transparent 72%);
    filter: blur(2px);
    opacity: 0.94;
    animation: quietSheen 18s ease-in-out infinite;
}
.hero::after {
    content: '';
    position: absolute;
    right: 6%;
    top: 18%;
    width: 220px;
    height: 88px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.32;
    filter: blur(10px);
    background:
        radial-gradient(ellipse at 28% 58%, rgba(255,255,255,0.62) 0 28%, transparent 48%),
        radial-gradient(ellipse at 55% 42%, rgba(255,255,255,0.52) 0 26%, transparent 50%),
        radial-gradient(ellipse at 74% 62%, rgba(255,255,255,0.44) 0 24%, transparent 50%);
    animation: cloudDrift 24s ease-in-out infinite alternate;
}
[data-theme="dark"] .hero::before {
    background:
        linear-gradient(125deg, rgba(71, 55, 89, 0.38) 0%, transparent 38%),
        linear-gradient(235deg, rgba(120, 62, 36, 0.26) 4%, transparent 45%);
    opacity: 0.58;
}
.hero-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
}

/* Portrait */
.hero-portrait-wrap {
    position: sticky;
    top: 100px;
}
.hero-portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.64);
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
    animation: none;
}
.hero-portrait::after {
    content: '';
    position: absolute;
    inset: -18% -42%;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 0 40%, rgba(255,255,255,0.26) 48%, rgba(255,255,255,0.08) 56%, transparent 68%),
        linear-gradient(180deg, transparent 55%, rgba(250,248,244,0.14));
    mix-blend-mode: screen;
    animation: portraitLight 12s ease-in-out infinite alternate;
}
.hero-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    filter: contrast(1.02) saturate(0.96);
    transform-origin: center;
    animation: portraitBreath 12s ease-in-out infinite alternate;
}
/* Identity */
.hero-id {
    padding-top: 8px;
}
.hero-id .row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.hero-id .row-top .right {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.15em;
}

.hero-name {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--ink);
    margin-bottom: 24px;
    text-wrap: balance;
}
.hero-name .it {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.94em;
    color: var(--ink);
    margin: 0 0.06em;
}
.hero-name .small {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.22em;
    color: var(--ink-3);
    letter-spacing: 0.36em;
    font-weight: 400;
    margin-bottom: 0.4em;
    text-transform: uppercase;
}

.hero-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: 36px;
    max-width: 30em;
    text-wrap: pretty;
}
.hero-sub .stop { color: var(--ink-4); margin: 0 0.4em; }

/* hero credentials · 4 列设计感网格 */
.hero-creds {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 36px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
}
.hero-cred {
    padding: 24px 22px 26px;
    border-right: 1px solid var(--line);
    position: relative;
    transition: padding .25s, background .25s, transform .25s;
    display: grid;
    grid-template-rows: 24px 38px minmax(34px, auto) minmax(58px, auto);
    row-gap: 8px;
    align-content: start;
    justify-items: center;
    text-align: center;
    min-height: 214px;
}
.hero-cred:last-child { border-right: none; }
.hero-cred:not(:first-child) { padding-left: 22px; }
.hero-cred::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .35s ease;
}
.hero-cred:hover::before { width: 36px; }
.hero-cred:hover {
    background: rgba(255,255,255,0.36);
    transform: translateY(-2px);
}
.hero-cred .cred-num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 0;
    height: 24px;
    width: 100%;
}
.hero-cred .cred-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0;
    min-height: 38px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
    width: 100%;
}
.hero-cred .cred-unit-long {
    font-size: 9.5px;
    letter-spacing: 0.02em;
}
.hero-cred .cred-role {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: 0.06em;
    margin-bottom: 0;
    line-height: 1.35;
    text-wrap: balance;
    width: 100%;
}
.hero-cred .cred-org {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 0.01em;
    line-height: 1.45;
    max-width: 11.5em;
    margin: 0 auto;
    text-wrap: balance;
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    font-family: var(--font-cn);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s, box-shadow .3s;
    border-radius: var(--radius-pill);
    border: 1px solid;
    line-height: 1;
    position: relative;
    overflow: hidden;
}
.btn.primary {
    background: #3E3D3A;
    color: var(--bg);
    border-color: #3E3D3A;
    box-shadow: 0 12px 30px rgba(58,57,54,0.14);
}
.btn.primary:hover { background: #2F2E2C; border-color: #2F2E2C; box-shadow: 0 16px 40px rgba(58,57,54,0.18); }
.btn.ghost {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.36)),
        rgba(255,255,255,0.34);
    color: var(--ink);
    border-color: rgba(255,255,255,0.58);
    box-shadow: 0 10px 30px rgba(68,61,54,0.045), inset 0 1px 0 rgba(255,255,255,0.68);
    -webkit-backdrop-filter: blur(18px) saturate(1.22);
    backdrop-filter: blur(18px) saturate(1.22);
}
.btn.ghost:hover { border-color: rgba(58,57,54,0.18); background: rgba(255,255,255,0.52); }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(3px); }

.hero-meta {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.hero-meta .cell .k {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.hero-meta .cell .v {
    font-family: var(--font-cn);
    font-size: 14px;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.hero-meta .cell .v.accent { color: var(--accent); }

/* ============================================================
   MANIFESTO — large statement
   ============================================================ */
.manifesto {
    padding: 96px 0 120px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(112deg, rgba(255,255,255,0.52), transparent 32%),
        linear-gradient(246deg, rgba(231,179,198,0.18), rgba(244,191,150,0.16) 52%, transparent),
        rgba(242,238,229,0.72);
    margin-bottom: 120px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
}
.manifesto::before,
.notes::after,
.now-grid::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 250px;
    height: 98px;
    filter: blur(12px);
    background:
        radial-gradient(ellipse at 28% 58%, rgba(255,255,255,0.62) 0 28%, transparent 50%),
        radial-gradient(ellipse at 55% 38%, rgba(255,255,255,0.48) 0 25%, transparent 52%),
        radial-gradient(ellipse at 76% 64%, rgba(255,255,255,0.38) 0 24%, transparent 52%);
    opacity: 0.36;
    animation: cloudDrift 28s ease-in-out infinite alternate;
}
.manifesto::before {
    left: 3%;
    right: auto;
    top: 36%;
    opacity: 0.28;
    animation-duration: 34s;
}
.manifesto::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, transparent 0 118px, rgba(15,14,12,0.035) 118px 119px),
        repeating-linear-gradient(0deg, transparent 0 54px, rgba(15,14,12,0.025) 54px 55px);
    opacity: 0.56;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.manifesto-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 64px;
    align-items: start;
}
.manifesto-inner > * { position: relative; z-index: 1; }
.manifesto-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-top: 18px;
    line-height: 2;
}
.manifesto-label .ch {
    display: block;
    font-family: var(--font-cn-serif);
    font-size: 15px;
    color: var(--ink);
    letter-spacing: 0.4em;
    margin-top: 10px;
    text-transform: none;
}
.manifesto-text {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 4rem);
    line-height: 1.24;
    color: var(--ink);
    letter-spacing: 0.005em;
    text-wrap: balance;
}
.manifesto-text em {
    font-style: normal;
    color: var(--accent);
    position: relative;
}
.manifesto-text .it {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}
.manifesto-text .quote-mark {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.2em;
    margin-right: 0.05em;
}
.manifesto-sub {
    max-width: 680px;
    margin: 28px 0 0;
    padding-left: 24px;
    border-left: 2px solid var(--accent);
    font-size: 17px;
    line-height: 1.85;
    color: var(--ink-2);
    text-wrap: balance;
}
.manifesto-attr {
    margin-top: 36px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 16px;
    align-items: center;
    max-width: 680px;
}
.manifesto-source-wrap {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.manifesto-attr .line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--ink-3);
    vertical-align: middle;
    margin-right: 14px;
}
.manifesto-shuffle {
    margin-left: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,0.54);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)),
        rgba(255,255,255,0.30);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
    box-shadow: 0 8px 24px rgba(68,61,54,0.035), inset 0 1px 0 rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.22);
    backdrop-filter: blur(16px) saturate(1.22);
    animation: tagGlow 5s ease-in-out infinite;
    width: 92px;
    text-align: center;
    justify-self: end;
    position: relative;
    overflow: hidden;
}
.manifesto-shuffle:hover {
    border-color: rgba(58,57,54,0.18);
    color: var(--ink);
    background: rgba(255,255,255,0.52);
    box-shadow: 0 12px 30px rgba(68,61,54,0.07), inset 0 1px 0 rgba(255,255,255,0.72);
}

/* ============================================================
   SECTION HEAD — universal
   ============================================================ */
.sec {
    padding: 0 0 144px;
    scroll-margin-top: 80px;
}
.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 16px 40px;
    align-items: center;
    margin-bottom: 48px;
    padding: 30px 0 32px;
    border-top: 1px solid rgba(207,201,190,0.58);
    border-bottom: 1px solid rgba(207,201,190,0.58);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sec-head .num {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-mono);
    color: var(--ink-3);
    text-transform: uppercase;
    white-space: nowrap;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 18px;
}
.sec-head .num::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 2px;
    background: var(--accent);
}
.sec-head .num .idx {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.sec-head .num .slash {
    font-size: 14px;
    color: var(--ink-4);
    letter-spacing: 0;
}
.sec-head .num .kind {
    max-width: none;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    white-space: normal;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.52);
    border: 1px solid rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: tagGlow 6s ease-in-out infinite;
}
.sec-head .title {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    justify-self: start;
    max-width: 760px;
}
.sec-head .title .ch {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: clamp(2.3rem, 3.5vw, 3.4rem);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    display: block;
}
.sec-head .title .en {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.45;
    color: var(--ink-3);
    font-weight: 400;
    text-wrap: balance;
}
.sec-head .meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.18em;
    padding: 0 0 0 24px;
    border-left: 1px solid var(--line);
    line-height: 1.8;
    text-transform: uppercase;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec-head .meta strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   CURRENTLY · 在造 · 三张卡
   ============================================================ */
.now-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    perspective: 1400px;
    position: relative;
    align-items: stretch;
}
.now-grid::before {
    left: -74px;
    top: -34px;
    z-index: -1;
    animation-duration: 24s;
}
.now-card {
    display: block;
    height: 100%;
    min-height: 504px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
.now-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 504px;
    transition: transform .72s cubic-bezier(.2,.72,.18,1);
    transform-style: preserve-3d;
}
.now-card:hover .now-card-inner,
.now-card:focus-visible .now-card-inner {
    transform: rotateY(180deg);
}
.now-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--glass-strong);
    border: 1px solid rgba(255,255,255,0.66);
    border-radius: var(--radius-sm);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(18px) saturate(1.14);
    backdrop-filter: blur(18px) saturate(1.14);
}
.now-card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(115deg, transparent 0 52%, rgba(255,255,255,0.18) 58%, transparent 70%);
    opacity: 0;
    transition: opacity .3s;
}
.now-card:hover .now-card-face::after { opacity: 1; animation: quietSheen 1.6s ease-in-out; }
.now-card-front {
    transform: rotateY(0deg);
}
.now-card-back {
    transform: rotateY(180deg);
    padding: 28px;
    justify-content: space-between;
    background:
        linear-gradient(135deg, rgba(194,57,42,0.08), transparent 42%),
        linear-gradient(225deg, rgba(178,168,213,0.16), transparent 58%),
        var(--glass-strong);
}
.now-card:hover .now-card-face {
    border-color: rgba(58,57,54,0.26);
}
.now-card-visual {
    aspect-ratio: auto;
    height: 216px;
    flex: 0 0 216px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    transition: filter .3s;
    background: var(--bg-2);
}
.now-card-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,0.20) 54%, transparent 68%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 42%);
    opacity: 0;
    transition: opacity .35s;
}
.now-card:hover .now-card-visual::before { opacity: 1; }
.now-card-visual .now-art {
    width: 100%; height: 100%;
    display: none;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.now-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.96) contrast(1.01) brightness(1.01);
    transform: scale(1.01);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
.now-photo-zaowu { object-position: 50% 50%; }
.now-photo-luedong { object-position: 50% 50%; }
.now-photo-yongle { object-position: 50% 52%; }
.now-card:hover .now-photo {
    transform: scale(1.055);
    filter: saturate(1.02) contrast(1.02) brightness(1.02);
}

/* Visual A: Zaowu — neural mesh */
.now-card-visual.viz-zaowu {
    background: linear-gradient(135deg, #1A2236 0%, #2C3A5C 50%, #4A5A7C 100%);
}
.now-card-visual.viz-zaowu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 22% 30%, rgba(255,236,180,0.9) 0, transparent 1.2%),
        radial-gradient(circle at 38% 56%, rgba(255,236,180,0.7) 0, transparent 1.4%),
        radial-gradient(circle at 64% 38%, rgba(255,236,180,0.85) 0, transparent 1.3%),
        radial-gradient(circle at 78% 64%, rgba(255,236,180,0.7) 0, transparent 1.2%),
        radial-gradient(circle at 50% 78%, rgba(255,236,180,0.6) 0, transparent 1.1%),
        radial-gradient(circle at 15% 72%, rgba(255,236,180,0.55) 0, transparent 1%);
}
.now-card-visual.viz-zaowu::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg, transparent 49%, rgba(255,236,180,0.18) 49.5%, rgba(255,236,180,0.18) 50.5%, transparent 51%),
                     linear-gradient(-30deg, transparent 49%, rgba(255,236,180,0.12) 49.5%, rgba(255,236,180,0.12) 50.5%, transparent 51%);
    background-size: 60px 60px, 80px 80px;
}

/* Visual B: Luedong — paper layers */
.now-card-visual.viz-luedong {
    background: #ECE4D2;
    background-image:
        linear-gradient(180deg, transparent 0%, transparent 12%, rgba(15,14,12,0.04) 12%, rgba(15,14,12,0.04) 13%, transparent 13%),
        linear-gradient(180deg, transparent 0%, transparent 25%, rgba(15,14,12,0.06) 25%, rgba(15,14,12,0.06) 26%, transparent 26%),
        linear-gradient(180deg, transparent 0%, transparent 42%, rgba(15,14,12,0.08) 42%, rgba(15,14,12,0.08) 43%, transparent 43%),
        linear-gradient(180deg, transparent 0%, transparent 58%, rgba(15,14,12,0.06) 58%, rgba(15,14,12,0.06) 59%, transparent 59%),
        linear-gradient(180deg, transparent 0%, transparent 72%, rgba(15,14,12,0.04) 72%, rgba(15,14,12,0.04) 73%, transparent 73%);
}
.now-card-visual.viz-luedong::after {
    content: '略';
    position: absolute;
    right: 22px; bottom: 14px;
    font-family: var(--font-cn-serif);
    font-size: 88px;
    color: rgba(15,14,12,0.1);
    line-height: 1;
    font-weight: 700;
}

/* Visual C: Yongle — seed/growth */
.now-card-visual.viz-yongle {
    background: #C9622E;
    overflow: hidden;
}
.now-card-visual.viz-yongle::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(250,248,244,0.95) 0%, rgba(250,248,244,0.4) 38%, transparent 60%);
}
.now-card-visual.viz-yongle::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(15,14,12,0.6) 0 1px, transparent 1.5px),
        radial-gradient(circle at 25% 32%, rgba(15,14,12,0.45) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 35%, rgba(15,14,12,0.45) 0 1px, transparent 1.5px),
        radial-gradient(circle at 32% 68%, rgba(15,14,12,0.45) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 68%, rgba(15,14,12,0.45) 0 1px, transparent 1.5px);
}

.now-card-body {
    padding: 22px 24px 30px;
    flex: 1;
    display: grid;
    grid-template-rows: 22px 38px 24px 1fr;
    align-content: start;
}
.now-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.now-card-eyebrow .yr { color: var(--ink-4); }
.now-card-name {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: 26px;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-bottom: 0;
    line-height: 1.2;
    align-self: end;
}
.now-card-name-en {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-3);
    margin-bottom: 0;
    align-self: start;
}
.now-card-desc {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.65;
    margin: 14px 0 0;
    flex: 1;
}
.now-card-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.now-card-points span {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    min-height: 24px;
}
.now-card-points span:last-child {
    min-height: 48px;
}
.now-card-points b {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
}
.now-card-points em {
    font-style: normal;
    color: var(--ink-2);
    line-height: 1.65;
    min-width: 0;
}
.now-card-foot {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.now-card-foot .arrow { transition: transform .25s; color: var(--ink-2); font-size: 14px; }
.now-card:hover .now-card-foot .arrow { transform: translateX(4px); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    body,
    .hero::before,
    .hero::after,
    .hero-portrait,
    .hero-portrait-wrap,
    .hero-id .row-top,
    .hero-name,
    .hero-sub,
    .hero-creds,
    .hero-cta,
    .manifesto::before,
    .notes::after,
    .now-grid::before,
    .now-card,
    .note,
    .sec-head .num .kind,
    .proj-card-cat,
    .proj-engine,
    .proj-track,
    .proj-flow,
    .proj-flow::after,
    .proj-panel,
    .manifesto-shuffle {
        animation: none !important;
    }
    .hero-portrait-wrap,
    .hero-id .row-top,
    .hero-name,
    .hero-sub,
    .hero-creds,
    .hero-cta {
        opacity: 1;
        filter: none;
        transform: none;
    }
    .now-card-inner { transition: none; }
    .now-card:hover .now-card-inner,
    .now-card:focus-visible .now-card-inner { transform: none; }
    .now-card-back { display: none; }
    .book-flip .book-cover,
    .book-flap,
    .book-flip::before {
        transition: none !important;
    }
    .book:hover .book-flip .book-cover,
    .book:hover .book-flap,
    .book:hover .book-flip::before {
        transform: none !important;
    }
}

/* ============================================================
   BOOKS GRID
   ============================================================ */
.books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
}
.book {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .45s cubic-bezier(.2,.72,.18,1);
}
.book:hover { transform: translateY(-2px); }
.book-disabled {
    cursor: default;
}

/* book-flip · perspective wrapper holding cover + flap */
.book-flip {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 2200px;
    perspective-origin: 8% 50%;
    transform-style: preserve-3d;
    isolation: isolate;
}
.book-flip::before {
    content: '';
    position: absolute;
    inset: 3% -3% 3% 5%;
    z-index: 0;
    border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-xs);
    background:
        repeating-linear-gradient(90deg, rgba(58,57,54,0.08) 0 1px, rgba(255,255,255,0.62) 1px 4px),
        linear-gradient(90deg, rgba(244,241,233,0.98), rgba(255,255,255,0.94));
    box-shadow: 7px 0 18px rgba(68,61,54,0.08);
    opacity: 0;
    transform: translateX(0);
    transition: opacity .38s ease, transform .65s cubic-bezier(.18,.72,.16,1);
}
.book:hover .book-flip::before {
    opacity: 1;
    transform: translateX(4px);
}
.book-flip::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -1px;
    width: 28%;
    aspect-ratio: 1 / 1;
    z-index: 4;
    pointer-events: none;
    border-radius: 0 var(--radius-xs) 0 34px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92) 0 22%, rgba(246,241,232,0.72) 42%, rgba(68,61,54,0.11) 43%, transparent 60%),
        radial-gradient(ellipse at 70% 28%, rgba(68,61,54,0.12), transparent 60%);
    filter: blur(0.05px);
    opacity: 0;
    transform-origin: 100% 0%;
    transform: rotate(-4deg) scale(0.22) translate(18px, -18px);
    transition: opacity .26s ease, transform .72s cubic-bezier(.16,.68,.14,1);
}
.book:hover .book-flip::after {
    opacity: 0.62;
    transform: rotate(-2deg) scale(0.56) translate(4px, -4px);
}
.book-flip .book-cover {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .96s cubic-bezier(.18,.72,.16,1), border-radius .55s ease, box-shadow .45s, filter .45s;
    z-index: 2;
    will-change: transform;
    overflow: visible;
}
.book:hover .book-flip .book-cover {
    transform: translateX(-4px) rotateY(-112deg) rotateZ(-0.36deg);
    border-radius: var(--radius-xs) 26px 26px var(--radius-xs);
    box-shadow:
        2px 0 0 rgba(255,255,255,0.38),
        10px 8px 22px rgba(68,61,54,0.10),
        28px 22px 56px rgba(68,61,54,0.12);
    filter: saturate(0.97) brightness(0.99);
}
.book-flap {
    position: absolute;
    inset: 3% 0 3% 5%;
    background:
        linear-gradient(90deg, rgba(58,57,54,0.08), transparent 9%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,247,239,0.78));
    border: 1px solid rgba(255,255,255,0.82);
    border-left: 1px solid rgba(58,57,54,0.14);
    border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-xs);
    padding: 22px 22px 22px 26px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    opacity: 0;
    transform: translateX(-2px) scale(0.992);
    transform-origin: 0% 50%;
    transition: opacity .42s ease, transform .72s cubic-bezier(.2,.72,.18,1);
    box-shadow:
        inset 10px 0 18px rgba(58,57,54,0.06),
        inset -10px 0 22px rgba(255,255,255,0.58),
        var(--shadow-soft);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    backdrop-filter: blur(16px) saturate(1.12);
}
.book-flap::before { content: none; }
.book-flap::after { content: none; }
.book:hover .book-flap {
    opacity: 1;
    transform: translateX(4px) scale(1);
    transition-delay: .10s;
}
.book-flap-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.book-flap-num { color: var(--ink-4); }
.book-flap-text {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.6;
    letter-spacing: 0.02em;
    flex: 1;
    text-wrap: pretty;
    margin: 4px 0;
}
.book-flap-cta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
}
[data-theme="dark"] .book-flap { box-shadow: inset 8px 0 18px rgba(0,0,0,0.3); }

.book-cover {
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xs);
    box-shadow:
        0 1px 0 rgba(0,0,0,0.04),
        0 1px 2px rgba(0,0,0,0.08),
        0 18px 36px rgba(63,52,42,0.08);
    transition: box-shadow .35s;
    isolation: isolate;
    transform-style: preserve-3d;
}
.book:hover .book-cover {
    box-shadow:
        0 2px 0 rgba(0,0,0,0.06),
        0 4px 6px rgba(0,0,0,0.1),
        0 24px 40px rgba(0,0,0,0.14);
}
/* spine effect */
.book-cover::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 8px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.12) 38%, rgba(255,255,255,0.12) 68%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}
/* texture overlay */
.book-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}
.book-flip .book-cover > * {
    transform: translateZ(1px);
}
.book-flip .book-cover::after {
    background-image:
        linear-gradient(90deg, transparent 0 78%, rgba(255,255,255,0.14) 88%, transparent 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
}

.book-info {
    padding: 18px 4px 0;
}
.book-info .yr {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.book-info .yr .tag {
    font-size: 9px;
    min-width: 40px;
    padding: 2px 8px;
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: var(--radius-pill);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.22);
    text-align: center;
    box-shadow:
        0 3px 10px rgba(68,61,54,0.018),
        inset 0 1px 0 rgba(255,255,255,0.38);
    -webkit-backdrop-filter: blur(8px) saturate(1.02);
    backdrop-filter: blur(8px) saturate(1.02);
}
.book-info .yr .tag.published { color: var(--ink-3); background: rgba(255,255,255,0.22); }
.book-info .yr .tag.upcoming { color: var(--accent); background: rgba(255,255,255,0.26); border-color: rgba(166,93,78,0.10); }
.book-info .yr .tag.opensource { color: var(--ink-2); background: rgba(255,255,255,0.24); }
.book-info .yr .tag.wip { color: var(--ink-3); border-style: dashed; background: rgba(255,255,255,0.20); }
.book-info .nm {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-bottom: 4px;
    transition: color .2s;
}
.book:hover .book-info .nm { color: var(--accent); }
.book-info .nm-en {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.4;
}
.book-core {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-cn);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-2);
}
.book-core span {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.book-core em {
    font-style: normal;
    color: var(--accent);
    letter-spacing: 0.04em;
}

/* ============================================================
   COVERS — 8 个独立封面，移到 covers.css
   ============================================================ */

/* ============================================================
   FIELD NOTES · 摩录
   ============================================================ */
.notes {
    padding: 72px 0 84px;
    background:
        linear-gradient(112deg, rgba(242,224,245,0.36), transparent 42%),
        linear-gradient(244deg, rgba(244,191,150,0.28), transparent 48%),
        rgba(242,238,229,0.66);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0 0 112px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px) saturate(1.04);
    backdrop-filter: blur(18px) saturate(1.04);
}
.notes::after {
    left: 8%;
    bottom: 18%;
    z-index: 0;
    width: 210px;
    opacity: 0.28;
    animation-delay: -8s;
}
.notes::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(15,14,12,0.028) 0 1px, transparent 1px 38px);
    opacity: 0.6;
}
.notes-inner { position: relative; z-index: 1; }
.notes-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.notes-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}
.notes-head .l {
    font-family: var(--font-cn-serif);
    font-size: 26px;
    color: var(--ink);
    letter-spacing: 0.08em;
    font-weight: 500;
}
.notes-head .l .en {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-3);
    margin-left: 16px;
    font-weight: 400;
}
.notes-head .r {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}
.note {
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    background: var(--glass-strong);
    border: 1px solid rgba(255,255,255,0.64);
    border-radius: var(--radius-sm);
    transition: transform .3s, border-color .25s, box-shadow .3s, background .3s;
    cursor: pointer;
    box-shadow: 0 18px 46px rgba(63,52,42,0.055);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    backdrop-filter: blur(16px) saturate(1.12);
    animation: microFloat 11s ease-in-out infinite;
}
.note:nth-child(2) { animation-delay: -3s; }
.note:nth-child(3) { animation-delay: -6s; }
.note:nth-child(4) { animation-delay: -1.5s; }
.note:nth-child(5) { animation-delay: -4.5s; }
.note:nth-child(6) { animation-delay: -7.5s; }
.note:hover {
    transform: translateY(-6px);
    border-color: rgba(15,14,12,0.28);
    box-shadow: 0 28px 72px rgba(63,52,42,0.10);
    background: rgba(255,255,255,0.76);
}
.note .num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 8px;
}
.note .quote {
    font-family: var(--font-cn-serif);
    font-size: 17px;
    line-height: 1.38;
    color: var(--ink);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    flex: 1;
    text-wrap: balance;
}
.note .quote em {
    font-style: normal;
    color: var(--accent);
}
.note .meta {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.note .meta .arrow { transition: transform .25s; }
.note:hover .meta .arrow { transform: translateX(4px); color: var(--accent); }

/* ============================================================
   PROJECTS · 4 列卡片网格 · 编辑式 · 无 emoji
   ============================================================ */
.proj-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 38px;
}
.proj-lead,
.proj-visual,
.proj-list {
    min-height: 282px;
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-md);
    background: var(--glass);
    box-shadow: 0 18px 50px rgba(68,61,54,0.055);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
}
.proj-lead {
    position: relative;
    padding: 34px 38px 32px;
    display: grid;
    grid-template-columns: minmax(430px, 1.02fr) minmax(320px, 0.98fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
    grid-column: 1 / -1;
    min-height: 248px;
    overflow: hidden;
    background:
        linear-gradient(112deg, rgba(255,255,255,0.74), rgba(255,255,255,0.28) 46%, transparent 76%),
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.72), transparent 32%),
        radial-gradient(circle at 82% 74%, rgba(244,190,150,0.16), transparent 38%),
        var(--glass);
}
.proj-lead::before {
    content: '';
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 30px;
    height: 1px;
    background: linear-gradient(90deg, rgba(166,93,78,0.12), rgba(62,61,58,0.08), transparent);
    opacity: 0.42;
}
.proj-lead-main,
.proj-lead-detail {
    position: relative;
    z-index: 1;
}
.proj-kicker {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--white-chip);
    border: 1px solid var(--glass-line);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.18em;
}
.proj-lead h3 {
    margin: 22px 0 0;
    font-family: var(--font-cn-serif);
    font-size: clamp(1.86rem, 2.55vw, 2.72rem);
    font-weight: 500;
    line-height: 1.23;
    color: var(--ink);
    text-wrap: balance;
    max-width: 15.4em;
    letter-spacing: 0.015em;
}
.proj-lead h3 span {
    display: block;
}
.proj-lead p {
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.8;
    max-width: 46em;
    margin: 0;
}
.proj-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
}
.proj-stack button {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.58);
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 5px;
    min-height: 68px;
    padding: 12px 12px 11px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
.proj-stack button:hover,
.proj-stack button.active {
    transform: translateY(-2px);
    border-color: rgba(166,93,78,0.28);
    background: rgba(255,255,255,0.60);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.76),
        0 14px 34px rgba(68,61,54,0.08);
}
.proj-stack b {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1;
    font-style: italic;
    font-weight: 500;
    color: var(--accent-2);
}
.proj-stack strong {
    font-family: var(--font-cn-serif);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: 0.04em;
}
.proj-stack em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.proj-explain {
    margin-top: 14px;
    padding: 16px 18px 17px;
    border: 1px solid rgba(255,255,255,0.54);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
.proj-explain span {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--accent-2);
    text-transform: uppercase;
}
.proj-explain strong {
    display: block;
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.48;
    color: var(--ink);
    letter-spacing: 0.03em;
}
.proj-explain em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-3);
}
.proj-visual {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20) 44%, transparent 70%),
        radial-gradient(circle at 78% 24%, rgba(244,190,150,0.26), transparent 34%),
        radial-gradient(circle at 22% 76%, rgba(188,181,214,0.18), transparent 36%),
        var(--glass);
}
.proj-list {
    min-height: 282px;
}
.proj-visual::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.82), rgba(255,255,255,0.22) 42%, transparent 68%);
    filter: blur(12px);
    animation: quietSheen 8s ease-in-out infinite;
}
.proj-engine {
    position: relative;
    width: min(92%, 382px);
    height: 286px;
    z-index: 1;
    animation: microFloat 9s ease-in-out infinite;
}
.proj-engine::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(62,61,58,0.18), transparent);
}
.proj-engine::after {
    content: '';
    position: absolute;
    inset: 18px 6px;
    border-radius: var(--radius-md);
    background:
        repeating-linear-gradient(0deg, rgba(62,61,58,0.035) 0 1px, transparent 1px 28px),
        linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
    opacity: 0.72;
}
.proj-track {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.proj-track-outer {
    width: 210px;
    height: 210px;
    border: 1px solid rgba(62,61,58,0.18);
    background:
        conic-gradient(from 18deg, transparent 0 13deg, rgba(62,61,58,0.22) 14deg 15deg, transparent 16deg 48deg, rgba(166,93,78,0.24) 49deg 51deg, transparent 52deg 360deg);
    mask-image: radial-gradient(circle, transparent 68%, #000 69% 71%, transparent 72%);
    animation: engineSpin 24s linear infinite;
}
.proj-track-outer::before {
    content: '';
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    border: 1px solid rgba(62,61,58,0.08);
}
.proj-track-inner {
    width: 136px;
    height: 136px;
    border: 1px solid rgba(62,61,58,0.12);
    background: conic-gradient(from 240deg, transparent, rgba(188,181,214,0.16), transparent 48%);
    mask-image: radial-gradient(circle, transparent 64%, #000 65% 68%, transparent 69%);
    animation: engineReverse 32s linear infinite;
}
.proj-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 0 9px rgba(166,93,78,0.10), 0 8px 20px rgba(166,93,78,0.18);
}
.proj-track-inner .proj-node {
    width: 7px;
    height: 7px;
    background: rgba(62,61,58,0.72);
    box-shadow: 0 0 0 7px rgba(62,61,58,0.08);
}
.proj-node.n1 { left: 50%; top: -5px; }
.proj-node.n2 { right: -5px; top: 50%; }
.proj-node.n3 { left: 50%; bottom: -5px; }
.proj-node.n4 { left: -5px; top: 50%; }
.proj-node.n5 { left: 14px; top: 18px; }
.proj-node.n6 { right: 16px; bottom: 12px; }
.proj-flow {
    position: absolute;
    left: 56px;
    right: 56px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(166,93,78,0.36), rgba(62,61,58,0.22), transparent);
    z-index: 3;
    animation: flowBreath 4.8s ease-in-out infinite;
}
.proj-flow::after {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: 28px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
    animation: flowTravel 5.6s cubic-bezier(.42,0,.25,1) infinite;
}
.proj-flow.f1 { transform: rotate(-18deg); }
.proj-flow.f2 { transform: rotate(0deg); animation-delay: -1.2s; }
.proj-flow.f2::after { animation-delay: -1.2s; }
.proj-flow.f3 { transform: rotate(18deg); animation-delay: -2.4s; }
.proj-flow.f3::after { animation-delay: -2.4s; }
.proj-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86px;
    height: 86px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    z-index: 5;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.22), transparent 36%),
        #3E3D3A;
    color: var(--bg);
    box-shadow:
        0 0 0 18px rgba(62,61,58,0.035),
        0 18px 46px rgba(62,61,58,0.20);
}
.proj-core strong {
    font-family: var(--font-cn-serif);
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.10em;
}
.proj-core em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 7px;
    letter-spacing: 0.08em;
    color: rgba(250,248,244,0.72);
    white-space: nowrap;
}
.proj-panel {
    position: absolute;
    z-index: 6;
    min-width: 88px;
    text-align: center;
    padding: 8px 14px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.86);
    background: rgba(255,255,255,0.82);
    color: var(--ink);
    box-shadow: 0 14px 36px rgba(68,61,54,0.12), inset 0 1px 0 rgba(255,255,255,0.72);
    animation: tagGlow 5.2s ease-in-out infinite;
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.proj-panel span {
    display: block;
    font-family: var(--font-cn);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0.08em;
}
.proj-panel em {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 7.5px;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.proj-panel.active {
    border-color: rgba(166,93,78,0.34);
    background: rgba(255,255,255,0.94);
    box-shadow:
        0 0 0 8px rgba(166,93,78,0.06),
        0 18px 42px rgba(68,61,54,0.16),
        inset 0 1px 0 rgba(255,255,255,0.82);
    transform: translateY(-2px);
}
.proj-panel.active span { color: var(--accent-2); }
.proj-engine[data-active="scene"] .proj-node.n1,
.proj-engine[data-active="insight"] .proj-node.n2,
.proj-engine[data-active="model"] .proj-node.n3,
.proj-engine[data-active="skill"] .proj-node.n4,
.proj-engine[data-active="agent"] .proj-node.n5,
.proj-engine[data-active="workflow"] .proj-node.n6 {
    background: var(--accent);
    box-shadow: 0 0 0 12px rgba(194,57,42,0.10), 0 12px 26px rgba(166,93,78,0.24);
}
.proj-panel.p1 { left: 50%; top: 22px; transform: translateX(-50%); }
.proj-panel.p1.active { transform: translateX(-50%) translateY(-2px); }
.proj-panel.p2 { left: 22px; top: 72px; animation-delay: -1.1s; }
.proj-panel.p3 { right: 22px; top: 72px; animation-delay: -1.8s; }
.proj-panel.p4 { right: 28px; bottom: 70px; animation-delay: -2.5s; }
.proj-panel.p5 { left: 24px; bottom: 70px; animation-delay: -3.2s; }
.proj-panel.p6 { left: 50%; bottom: 24px; transform: translateX(-50%); animation-delay: -3.9s; }
.proj-panel.p6.active { transform: translateX(-50%) translateY(-2px); }
.proj-list {
    display: flex;
    flex-direction: column;
    padding: 14px;
}
.proj-row {
    display: grid;
    grid-template-columns: 86px minmax(70px, 0.72fr) minmax(0, 1fr) 18px;
    gap: 14px;
    align-items: center;
    min-height: 64px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    transition: background .25s, color .25s, transform .25s;
}
.proj-row:last-child { border-bottom: none; }
.proj-row span {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--accent-2);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(166,93,78,0.22);
    background: rgba(255,255,255,0.48);
    text-align: center;
}
.proj-row strong {
    font-family: var(--font-cn-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
}
.proj-row em {
    font-style: normal;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.45;
}
.proj-row b {
    font-weight: 400;
    color: var(--ink-3);
}
.proj-row:hover {
    background: rgba(255,255,255,0.48);
    color: var(--ink);
    transform: translateX(3px);
}
.proj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.proj-card {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 20px;
    border: 1px solid rgba(255,255,255,0.62);
    border-radius: var(--radius-sm);
    background: var(--glass);
    transition: transform .35s ease, border-color .25s, box-shadow .35s;
    cursor: pointer;
    position: relative;
    min-height: 224px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(63,52,42,0.045);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
}
.proj-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .35s ease;
}
.proj-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15,14,12,0.28);
    box-shadow: 0 24px 62px rgba(63,52,42,0.095);
    background: var(--glass-strong);
}
.proj-card:hover::before { width: 48px; }
.proj-card:hover .proj-card-name { color: var(--accent); }
.proj-card:hover .proj-card-arrow { color: var(--accent); transform: translate(3px,-3px); }

.proj-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 28px;
}
.proj-card-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    color: var(--ink-2);
    letter-spacing: -0.01em;
    transition: color .25s;
}
.proj-card:hover .proj-card-num { color: var(--accent); }
.proj-card-cat {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,0.68);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.54);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: tagGlow 6.5s ease-in-out infinite;
}
/* category color variants */
.proj-card-cat.cat-research {
    color: #2D4A7C;
    border-color: rgba(45,74,124,0.32);
    background: rgba(45,74,124,0.07);
}
.proj-card-cat.cat-platform {
    color: #3F5F3A;
    border-color: rgba(63,95,58,0.32);
    background: rgba(63,95,58,0.07);
}
.proj-card-cat.cat-agent {
    color: #B5731A;
    border-color: rgba(181,115,26,0.34);
    background: rgba(181,115,26,0.08);
}
.proj-card-cat.cat-all {
    color: var(--ink-3);
    border-style: dashed;
}
[data-theme="dark"] .proj-card-cat.cat-research { color: #8AA9D8; border-color: rgba(138,169,216,0.34); background: rgba(138,169,216,0.10); }
[data-theme="dark"] .proj-card-cat.cat-platform { color: #9CB89A; border-color: rgba(156,184,154,0.34); background: rgba(156,184,154,0.10); }
[data-theme="dark"] .proj-card-cat.cat-agent    { color: #E2B070; border-color: rgba(226,176,112,0.36); background: rgba(226,176,112,0.10); }
.proj-card-name {
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: 19px;
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1.3;
    transition: color .2s;
}
.proj-card-alt {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 0.01em;
    margin-bottom: 12px;
}
.proj-card-desc {
    font-family: var(--font-cn);
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 18px;
    flex: 1;
}
.proj-card-brief {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 18px;
    flex: 1;
}
.proj-card-brief span {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: start;
}
.proj-card-brief b {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.proj-card-brief em {
    font-family: var(--font-cn);
    font-style: normal;
    font-size: 12.8px;
    color: var(--ink-2);
    line-height: 1.55;
}
.proj-card-foot {
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: lowercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.proj-card-arrow {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-3);
    transition: all .25s;
}

/* 第 8 张 · 全部仓库 */
.proj-card.all {
    background: rgba(242,238,229,0.52);
    border-style: dashed;
}
.proj-card.all:hover { background: var(--glass-strong); border-style: solid; }
.proj-card.all .proj-card-num { font-family: var(--font-serif); font-style: italic; }

/* ============================================================
   ARTICLES · 文章 · 杂志感
   ============================================================ */
.art-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}
.art-head .l {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.art-head .l .accent { color: var(--accent); }
.art-head .r { display: flex; gap: 8px; align-items: center; }

.art-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    border-top: 0;
}
.art-card {
    display: grid;
    grid-template-columns: 48px minmax(132px, 0.42fr) minmax(0, 1fr);
    gap: 18px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.58);
    background: rgba(255,255,255,0.34);
    transition: background .25s, transform .25s, border-color .25s, box-shadow .25s;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
    box-shadow: 0 12px 32px rgba(63,52,42,0.04);
}
.art-card:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.58); padding-right: 28px; padding-left: 28px; }
.art-card:hover {
    background: rgba(255,255,255,0.7);
    transform: translateY(-3px);
    border-color: rgba(15,14,12,0.18);
    box-shadow: 0 22px 58px rgba(63,52,42,0.08);
}
.art-card:hover .art-title { color: var(--accent); }
.art-card:hover .art-go { color: var(--accent); transform: translateX(4px); }

.art-card-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 28px;
    color: var(--ink-3);
    line-height: 1;
}
.art-card:hover .art-card-num { color: var(--accent); }
.art-visual {
    --art-a: rgba(72, 114, 184, 0.76);
    --art-b: rgba(238, 149, 140, 0.58);
    --art-c: rgba(250, 218, 181, 0.64);
    --art-ink: rgba(53, 49, 45, 0.78);
    position: relative;
    min-height: 156px;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.72);
    background:
        radial-gradient(circle at 72% 18%, rgba(255,255,255,0.74), transparent 25%),
        radial-gradient(circle at 16% 82%, rgba(188,181,214,0.28), transparent 30%),
        linear-gradient(145deg, var(--art-a), var(--art-b) 58%, var(--art-c));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.74),
        inset 0 -28px 46px rgba(255,255,255,0.13),
        0 12px 32px rgba(63,52,42,0.05);
    transform: translateZ(0);
}
.art-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.20), transparent 34%, rgba(255,255,255,0.16) 64%, transparent 82%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .052 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: auto, 160px 160px;
    mix-blend-mode: soft-light;
    opacity: 0.9;
}
.art-visual::after {
    content: '';
    position: absolute;
    right: -12%;
    top: -18%;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,0.36);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(255,255,255,0.04),
        0 0 0 58px rgba(255,255,255,0.025);
    opacity: 0.84;
}
.art-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.art-visual span,
.art-visual i,
.art-visual b,
.art-visual em,
.art-visual strong {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}
.art-visual em {
    left: 16px;
    top: 14px;
    max-width: calc(100% - 32px);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-style: normal;
    color: rgba(255,255,255,0.76);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.art-visual strong {
    left: 16px;
    bottom: 14px;
    font-family: var(--font-cn-serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 16px rgba(42,36,32,0.13);
}
.art-visual span {
    left: 61%;
    top: 52%;
    width: 54%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.72), rgba(255,255,255,0.18) 42%, transparent 68%);
    filter: blur(0.2px);
}
.art-visual i {
    left: 16px;
    right: 18px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.74), transparent);
    transform: rotate(-14deg);
    transform-origin: 0 50%;
}
.art-visual b {
    right: 18%;
    top: 30%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.72);
    box-shadow:
        -40px 48px 0 rgba(255,255,255,0.34),
        -78px 16px 0 rgba(255,255,255,0.26);
}
.art-visual-judgment i,
.art-visual-standard i {
    top: 56%;
    box-shadow: 0 -22px 0 rgba(255,255,255,0.16), 0 22px 0 rgba(255,255,255,0.12);
}
.art-visual-algorithm {
    --art-a: rgba(58, 76, 107, 0.80);
    --art-b: rgba(173, 168, 191, 0.48);
    --art-c: rgba(237, 159, 145, 0.62);
    background:
        radial-gradient(circle at 70% 24%, rgba(255,255,255,0.52), transparent 30%),
        conic-gradient(from 220deg at 50% 52%, rgba(83,123,190,0.72), rgba(188,181,214,0.42), rgba(244,153,139,0.58), rgba(83,123,190,0.72));
}
.art-visual-algorithm span {
    left: 62%;
    width: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: 0 0 0 18px rgba(255,255,255,0.06), 0 0 0 38px rgba(255,255,255,0.035);
}
.art-visual-education {
    --art-a: rgba(76, 128, 203, 0.80);
    --art-b: rgba(244, 153, 139, 0.54);
    --art-c: rgba(255, 215, 177, 0.72);
    background:
        radial-gradient(circle at 58% 26%, rgba(255,236,182,0.72), transparent 28%),
        linear-gradient(150deg, rgba(76,128,203,0.80), rgba(244,153,139,0.54) 58%, rgba(255,215,177,0.72));
}
.art-visual-education span {
    width: 48%;
    border-radius: 42% 58% 45% 55%;
}
.art-visual-skill {
    --art-a: rgba(96, 127, 169, 0.72);
    --art-b: rgba(196, 181, 147, 0.42);
    --art-c: rgba(246, 180, 150, 0.62);
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,0.48), transparent 28%),
        linear-gradient(145deg, rgba(116,148,190,0.72), rgba(196,181,147,0.42), rgba(246,180,150,0.62));
}
.art-visual-skill i {
    transform: rotate(0deg);
    box-shadow: 0 -28px 0 rgba(255,255,255,0.14), 0 28px 0 rgba(255,255,255,0.12);
}
.art-visual-organization span {
    left: 62%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow:
        0 0 0 16px rgba(255,255,255,0.045),
        0 0 0 34px rgba(255,255,255,0.026);
}
.art-visual-standard {
    --art-a: rgba(87, 84, 83, 0.76);
    --art-b: rgba(191, 141, 132, 0.50);
    --art-c: rgba(246, 215, 178, 0.68);
}
.art-card-body { display: flex; flex-direction: column; }
.art-date {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    text-transform: uppercase;
    display: flex;
    gap: 12px;
}
.art-date .cat { color: var(--accent); }
.art-title {
    font-family: var(--font-cn-serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    line-height: 1.4;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    transition: color .2s;
    text-wrap: balance;
}
.art-summary {
    font-family: var(--font-cn);
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 18px;
    text-wrap: pretty;
    flex: 1;
}
.art-go {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.art-foot {
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.art-pager { display: flex; gap: 4px; }
.art-pager button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-2);
    width: 38px; height: 38px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
    border-radius: var(--radius-pill);
}
.art-pager button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.art-pager button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.art-pager button:disabled { opacity: 0.3; cursor: not-allowed; }

.icon-btn {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)),
        rgba(255,255,255,0.30);
    border: 1px solid rgba(255,255,255,0.54);
    color: var(--ink-2);
    padding: 10px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 24px rgba(68,61,54,0.035), inset 0 1px 0 rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.22);
    backdrop-filter: blur(16px) saturate(1.22);
}
.icon-btn:hover { border-color: rgba(58,57,54,0.18); color: var(--ink); background: rgba(255,255,255,0.52); }
.icon-btn.accent {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 48%),
        #3E3D3A;
    color: var(--bg);
    border-color: rgba(62,61,58,0.92);
    box-shadow: 0 10px 28px rgba(58,57,54,0.12), inset 0 1px 0 rgba(255,255,255,0.12);
}
.icon-btn.accent:hover { background: #2F2E2C; border-color: rgba(47,46,44,0.92); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news {
    padding: 80px 0 88px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(108deg, rgba(255,255,255,0.48), transparent 28%),
        linear-gradient(244deg, rgba(244,191,150,0.36), rgba(231,179,198,0.22) 54%, transparent),
        rgba(242,238,229,0.70);
    margin-bottom: 0;
    overflow: hidden;
}
.news-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: end;
}
.news-l .eyebrow { margin-bottom: 22px; }
.news-l h3 {
    margin-bottom: 20px;
    text-wrap: balance;
    letter-spacing: 0.04em;
}
.news-l h3 .h-cn {
    display: block;
    font-family: var(--font-cn-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 14px;
}
.news-l h3 .h-cn em { font-style: normal; color: var(--accent); }
.news-l h3 .h-en {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.4;
    color: var(--ink-3);
    letter-spacing: 0.01em;
}
.news-l h3 .h-en em { font-style: italic; color: var(--accent); }
.news-l p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.7;
    max-width: 32em;
}
.news-r { padding-bottom: 6px; }
.news-form {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(15,14,12,0.24);
    border-radius: var(--radius-pill);
    overflow: hidden;
    padding: 4px;
    box-shadow: 0 14px 38px rgba(63,52,42,0.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    backdrop-filter: blur(16px) saturate(1.12);
}
.news-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    letter-spacing: 0.04em;
    outline: none;
}
.news-input::placeholder { color: var(--ink-3); letter-spacing: 0.12em; font-size: 12px; }
.news-btn {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 48%),
        var(--ink);
    border: 1px solid rgba(58,57,54,0.88);
    color: var(--bg);
    padding: 12px 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}
.news-btn:hover { background: var(--accent); }
.news-tags {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-left: 18px;
}
.news-tags .dot { color: var(--ink-4); margin: 0 10px; }

/* ============================================================
   FOOTER · COLOPHON
   ============================================================ */
footer {
    padding: 56px 0 58px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, transparent, rgba(244,191,150,0.22) 88%),
        linear-gradient(110deg, rgba(242,224,245,0.28), transparent 44%);
}
footer::before {
    content: 'QIU YIWU';
    position: absolute;
    left: 50%;
    bottom: -0.36em;
    transform: translateX(-50%);
    z-index: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(5rem, 16vw, 15rem);
    line-height: 1;
    color: rgba(255,255,255,0.24);
    letter-spacing: 0.08em;
    white-space: nowrap;
    pointer-events: none;
}
.foot-inner { position: relative; z-index: 1; }
.foot-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 56px;
    margin-bottom: 34px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--line);
}
.foot-brand .name {
    font-family: var(--font-cn-serif);
    color: var(--ink);
    margin-bottom: 18px;
    font-weight: 500;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.foot-brand .name .name-cn {
    font-size: 28px;
    letter-spacing: 0.12em;
}
.foot-brand .name .name-en {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--ink-3);
    text-transform: uppercase;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    align-self: center;
    line-height: 1;
}
.foot-brand p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 36em;
    margin-bottom: 18px;
}
.foot-focus {
    list-style: none;
    max-width: 38em;
    margin: 0 0 22px;
    padding: 0;
}
.foot-focus li {
    position: relative;
    padding: 10px 0 10px 22px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
}
.foot-focus li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.25em;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}
.foot-brand .sig {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-3);
}
.foot-col h6 {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 400;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 12px; font-size: 14px; }
.foot-col a {
    color: var(--ink-2);
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.foot-col a:hover { color: var(--accent); }
.foot-col a .ext { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

.foot-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 36px;
    padding-top: 14px;
}
.style-spec {
    margin-top: 22px;
    padding: 16px 0 2px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}
.style-spec span {
    margin-right: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.style-spec em {
    font-style: normal;
    padding: 6px 10px;
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.46);
    font-size: 12px;
    line-height: 1;
    color: var(--ink-2);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
}
.agent-links {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}
.agent-links a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.48);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(68,61,54,0.04);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
    transition: color .2s, border-color .2s, background .2s, transform .2s;
    position: relative;
    overflow: hidden;
}
.agent-links a:hover {
    color: var(--ink);
    border-color: rgba(166,93,78,0.22);
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,0.88), rgba(255,255,255,0.50)),
        rgba(255,255,255,0.62);
    transform: translateY(-1px);
}
.agent-readable {
    margin-top: 28px;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    max-width: 920px;
}
.agent-readable h6 {
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: var(--ink-3);
}
.agent-readable p {
    font-size: 12px;
    line-height: 1.75;
    color: var(--ink-3);
}
.foot-copy .dot {
    display: inline-block;
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
    margin: 0 12px;
    vertical-align: middle;
}

/* ============================================================
   QR MODAL
   ============================================================ */
.qr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,14,12,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(8px);
}
.qr-modal-overlay.active { display: flex; }
.qr-modal {
    background: var(--surface);
    padding: 40px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--ink);
    border-radius: var(--radius-md);
    position: relative;
}
.qr-modal h3 {
    font-family: var(--font-cn-serif);
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: 0.12em;
    font-weight: 500;
}
.qr-modal p {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 24px;
}
.qr-placeholder,
.qr-image {
    width: 180px; height: 180px;
    background: var(--bg-2);
    margin: 0 auto 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
}
.qr-placeholder {
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-3);
    letter-spacing: 0.2em;
}
.qr-image {
    display: block;
    object-fit: cover;
}
.qr-modal-close {
    background: var(--ink);
    color: var(--bg);
    border: none;
    padding: 10px 26px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}
.qr-modal-close:hover { background: var(--accent); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease, transform .9s ease;
}
.reveal.pre-in {
    opacity: 0;
    transform: translateY(20px);
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-fab {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 59;
    width: 44px; height: 44px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(15,14,12,0.18);
    transition: background .2s, transform .25s;
    display: grid;
    place-items: center;
}
.tweaks-fab:hover { background: var(--accent); transform: rotate(45deg); }
.tweaks-fab.hidden { display: none; }

.tweaks {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px 24px 18px;
    width: 300px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
    box-shadow: 0 16px 48px rgba(15,14,12,0.16);
    display: none;
}
.tweaks.open { display: block; }
.tweaks h6 {
    font-family: var(--font-cn-serif);
    font-size: 15px;
    color: var(--ink);
    letter-spacing: 0.2em;
    margin-bottom: 18px;
    font-weight: 500;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.tweaks h6 .en {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tweaks .row {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.tweaks .row:last-child { border-bottom: none; }
.tweaks .row label {
    font-family: var(--font-cn);
    font-size: 12.5px;
    color: var(--ink-2);
    letter-spacing: 0.15em;
}
.tweaks .swatches { display: flex; gap: 8px; }
.tweaks .swatch {
    width: 22px; height: 22px;
    border: 1px solid var(--line);
    cursor: pointer;
    border-radius: 50%;
    transition: transform .2s;
    position: relative;
}
.tweaks .swatch.active { transform: scale(1.12); border-color: var(--ink); }
.tweaks .swatch.active::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid var(--ink);
    border-radius: 50%;
}
.tweaks .toggle {
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
    padding: 2px;
}
.tweaks .toggle button {
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    cursor: pointer;
    letter-spacing: 0.15em;
    border-radius: var(--radius-pill);
}
.tweaks .toggle button.active {
    background: var(--ink);
    color: var(--bg);
}
.tweaks .range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: var(--line);
    outline: none;
}
.tweaks .range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}
.tweaks .close {
    position: absolute;
    top: 14px; right: 16px;
    background: transparent;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 16px;
}
.tweaks .close:hover { color: var(--accent); }

/* ============================================================
   RESPONSIVE · 多断点
   ============================================================ */
@media (max-width: 1200px) {
    :root { --gutter: 32px; }
    .hero-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
    .books-grid { grid-template-columns: repeat(3, 1fr); }
    .now-grid { grid-template-columns: 1fr 1fr; }
    .now-grid > :last-child { grid-column: span 2; }
    .notes-grid { grid-template-columns: repeat(3, 1fr); }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .proj-showcase { grid-template-columns: 1fr 1fr; }
    .proj-list { grid-column: 1 / -1; min-height: auto; }
    .proj-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
    :root { --gutter: 28px; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-portrait-wrap { position: static; max-width: 340px; }
    .hero-creds { grid-template-columns: 1fr 1fr; }
    .hero-cred { padding: 18px; border-right: 1px solid var(--line); padding-left: 18px !important; padding-right: 18px !important; }
    .hero-cred:nth-child(2n) { border-right: none; }
    .hero-cred:nth-child(1), .hero-cred:nth-child(2) { border-bottom: 1px solid var(--line); }
    .nav-links { gap: 18px; font-size: 13px; }
    .now-grid { grid-template-columns: 1fr; }
    .now-grid > :last-child { grid-column: span 1; }
    .books-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
    .notes-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .proj-showcase { grid-template-columns: 1fr; }
    .proj-lead,
    .proj-visual,
    .proj-list { min-height: auto; }
    .proj-lead { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
    .proj-lead h3 { max-width: 12em; }
    .proj-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proj-visual { min-height: 260px; }
    .proj-grid { grid-template-columns: repeat(2, 1fr); }
    .news-inner { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--gutter); }
    .news { padding: 0; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .art-grid { grid-template-columns: 1fr; }
    .art-card, .art-card:nth-child(2n) {
        grid-template-columns: 42px minmax(130px, 0.36fr) minmax(0, 1fr);
        border-right: 1px solid rgba(255,255,255,0.58);
        padding: 22px;
    }
    .art-visual { min-height: 136px; }
    .sec-head { grid-template-columns: minmax(0, 1fr) 150px; gap: 14px 24px; padding: 24px 0 26px; margin-bottom: 36px; }
    .sec-head .title { max-width: none; }
    .sec-head .meta { grid-column: 2; grid-row: 1 / span 2; text-align: right; padding-left: 18px; border-left: 1px solid var(--line); border-top: none; align-items: flex-end; }
    .manifesto-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
    :root { --gutter: 20px; }
    .nav-inner { padding: 14px var(--gutter); gap: 12px; }
    .nav-links { display: none; }
    .nav-end { flex-shrink: 0; }
    .nav-brand { font-size: 16px; }
    .nav-brand .en { display: none; }
    .hero { padding: 28px 0 64px; }
    .hero-portrait-wrap { max-width: 100%; }
    .hero-id .row-top { flex-direction: column; align-items: flex-start; }
    .hero-id .row-top .right { display: none; }
    .hero-name { font-size: clamp(2rem, 9vw, 3rem); }
    .hero-sub { font-size: 16px; }
    .hero-creds { grid-template-columns: 1fr; }
    .hero-cred { border-right: none !important; border-bottom: 1px solid var(--line); padding: 16px 0 !important; }
    .hero-cred:last-child { border-bottom: none; }
    .manifesto { padding: 56px 0 64px; margin-bottom: 72px; }
    .manifesto-label { padding-top: 0; }
    .manifesto-attr { grid-template-columns: 1fr; max-width: none; }
    .manifesto-source-wrap { white-space: normal; }
    .manifesto-shuffle { justify-self: start; }
    .sec { padding-bottom: 80px; }
    .sec-head { grid-template-columns: 1fr; gap: 14px; }
    .sec-head .num { min-height: 56px; }
    .sec-head .num .idx { font-size: 2rem; }
    .sec-head .num .kind { max-width: none; }
    .sec-head .title .ch { font-size: 2rem; }
    .sec-head .title { grid-column: auto; grid-row: auto; }
    .sec-head .meta { grid-column: auto; grid-row: auto; text-align: left; align-items: flex-start; padding: 12px 0 0; border-left: none; border-top: 1px solid var(--line); }
    .books-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
    .book-info .nm { font-size: 14.5px; }
    .book-info .nm-en { font-size: 12px; }
    .notes { padding: 56px 0 68px; margin-bottom: 72px; }
    .notes-grid { grid-template-columns: 1fr; }
    .note { padding: 24px 20px; }
    .note .quote { font-size: 18px; }
    .proj-row {
        grid-template-columns: 30px minmax(0, 1fr) 18px;
        gap: 10px;
    }
    .proj-row span { grid-column: 1; grid-row: 1; }
    .proj-row strong { grid-column: 2; grid-row: 1; }
    .proj-row b { grid-column: 3; grid-row: 1; }
    .proj-row em {
        grid-column: 2 / -1;
        grid-row: 2;
        margin-top: -8px;
    }
    .proj-grid { grid-template-columns: 1fr; }
    .proj-lead { padding: 24px 20px; }
    .proj-stack { grid-template-columns: 1fr 1fr; gap: 8px; }
    .proj-stack button { min-height: 64px; padding: 12px; }
    .proj-card { min-height: auto; padding: 20px 22px; }
    .now-card-name { font-size: 22px; }
    footer { padding: 44px 0 28px; }
    .foot-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
    .foot-brand .name { font-size: 24px; }
    .foot-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
    .foot-copy { align-items: flex-start; gap: 6px; font-size: 9.5px; }
    .agent-links { justify-content: flex-start; }
    .tweaks { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
    .tweaks-fab { bottom: 12px; right: 12px; }
    .art-title { font-size: 18px; }
    .art-card,
    .art-card:nth-child(2n) {
        grid-template-columns: 34px 1fr;
        gap: 14px;
        padding: 18px;
    }
    .art-visual {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 152px;
    }
    .art-card-num {
        grid-column: 1;
        grid-row: 2;
        font-size: 23px;
    }
    .art-card-body {
        grid-column: 2;
        grid-row: 2;
    }
    .icon-btn { padding: 8px 12px; font-size: 10px; letter-spacing: 0.12em; }
    .art-head .r { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 380px) {
    .hero-name { font-size: 1.8rem; }
    .manifesto-text { font-size: 1.7rem !important; }
    .news-l h3 .h-cn { font-size: 1.4rem; }
}


/* ============================================================
   v2.2 统一 nav 补丁：active 高亮 + 工具图标
   ============================================================ */
body[data-active="now"] .nav-links a[data-page="now"],
body[data-active="talks"] .nav-links a[data-page="talks"],
body[data-active="library"] .nav-links a[data-page="library"],
body[data-active="books"] .nav-links a[data-page="books"],
body[data-active="writing"] .nav-links a[data-page="writing"] {
    color: var(--ink);
}
body[data-active="now"] .nav-links a[data-page="now"]::after,
body[data-active="talks"] .nav-links a[data-page="talks"]::after,
body[data-active="library"] .nav-links a[data-page="library"]::after,
body[data-active="books"] .nav-links a[data-page="books"]::after,
body[data-active="writing"] .nav-links a[data-page="writing"]::after {
    opacity: 1;
    transform: translateY(0) scaleX(1);
}

a.nav-btn.nav-icon {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 7px 0;
    font-size: 15px;
    color: var(--ink-3);
    line-height: 1;
}
a.nav-btn.nav-icon:hover {
    color: var(--accent);
}