/* ⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣤⣶⣶⣶⣶⣶⣶⣦⣄
⠀⠀⠀⠀⣀⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣤⡀
⠀⠀⣠⣿⣿⣿⣿...   Kaguya is watching u

   迭代域 Studio · v3.0
   编辑杂志风 · Editorial Design
   - 侧边固定序号导航
   - Hero 全屏大字
   - Google Sans Code（英文）+ Source Han Sans SC / 思源黑（中文）+ JetBrains Mono（代码）
  浏览器按字符自动选字形：英文→GSC、中文→思源黑、代码/编号→JetBrains Mono
   - 多列不对称排版
   - 滚动驱动 reveal
   - 项目编辑式目录
   - 极简联系 + 杂志版权页
*/

/* ==================== 0. 设计令牌 ==================== */
:root {
    --bg-0: #030303;
    --bg-1: #0a0a0a;
    --bg-2: #141414;
    --bg-3: #1f1f1f;
    --fg-0: #ffffff;
    --fg-1: #d3d3d3;
    --fg-2: #888888;
    --fg-3: #555555;
    --line: #1a1a1a;
    --line-light: #2a2a2a;

    /* v3.0 · 字体栈：
       --font-sans / --font-serif  Google Sans Code（英文）+ Source Han Sans SC（思源黑 · 中文）
                                  + 系统中文 fallback（PingFang SC / Microsoft YaHei）
                                  浏览器按字符选择第一个含字形的字体
       --font-mono                  JetBrains Mono（站点编号 / 时间戳 / 代码 · 保留冷硬感）
       --font-en                    Google Sans Code（.en 英文翻译类 · 含 Renaissance italic + monospace fallback）
       --font-cn                    Source Han Sans SC（思源黑 · 中文专用 · 系统字体 fallback） */
    --font-sans: 'Google Sans Code', 'Source Han Sans SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-serif: 'Google Sans Code', 'Source Han Sans SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-en: 'Google Sans Code', ui-monospace, 'JetBrains Mono', monospace;
    --font-cn: 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --dur-fast: 120ms;
    --dur-base: 280ms;
    --dur-slow: 480ms;
    --dur-reveal: 720ms;

    --gutter: clamp(2rem, 5vw, 5rem);
    --section-pad: clamp(5rem, 10vh, 10rem);

    /* v3.1 · 首屏品牌字与顶部 meta 的额外左对齐偏移
       - 桌面（≥1025px）启用，模拟"杂志大标题缩进"——让 brand 与 meta 错开一个字符位
       - 移动/平板 = 0（与 gutter 同位，无额外偏移）
       - 用同一变量驱动 .hero-meta-top padding-left 与 .hero-brand-name margin-left
         两条保持各自显示与左位置永远一致 */
    --hero-shift: 0;
}

/* ==================== 1. Reset & 基础 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-0);
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--fg-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* v3.0.1 移动端补强 · iPhone 安全区 */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

/* ==================== 2. 侧边导航 ==================== */
.side-nav {
    position: fixed;
    top: 50%;
    right: clamp(1rem, 2vw, 2rem);
    transform: translateY(-50%);
    z-index: 100;
    mix-blend-mode: difference;
    /* v3.0.5 · hero 蒙版压暗后，difference 模式 + 文字抗噪描边足够清晰 */
}

.side-nav-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.side-nav li {
    opacity: 0.4;
    transition: opacity var(--dur-base) var(--ease-out);
}

.side-nav li.active {
    opacity: 1;
}

.side-nav li:hover {
    opacity: 0.8;
}

.side-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--fg-0);
    transition: opacity var(--dur-fast) var(--ease-out);
    /* v3.0.5 · 抗噪点描边：difference 模式下文字周围加细黑边 */
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(0, 0, 0, 0.9);
}

/* 圆点：默认空心小圆，active 变短横线 */
.side-nav .nav-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    transition:
        width var(--dur-base) var(--ease-out),
        height var(--dur-base) var(--ease-out),
        border-radius var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out);
}

.side-nav li.active .nav-dot {
    width: 12px;
    height: 1.5px;
    border-radius: 0;
    background: currentColor;
}

/* 双语标签：中文为主（顶），英文为副描述（底）— 与 section-header 同序 */
.side-nav .nav-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.15;
}

.side-nav .nav-label .zh {
    order: 1;
    font-family: var(--font-cn);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--fg-0);
}

.side-nav .nav-label .en {
    order: 2;
    font-family: var(--font-en);
    font-style: normal;
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    color: var(--fg-2);
}

/* ==================== 3. HERO ==================== */
.section-hero {
    min-height: 100vh;
    padding: var(--section-pad) var(--gutter);
    display: grid;
    /* v3.0 · 5 行：top meta / 弹性空白 / brand（顶替原 title 位置） / subtitle / bottom meta */
    grid-template-rows: auto 1fr auto auto auto;
    position: relative;
    overflow: hidden;
    max-width: none; /* v3.0.5 · 全出血背景，覆盖 .section 的 1600px 限制 */
}

/* v3.0.5 · hero 背景图 */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;   /* 锚定左上 · 桌面左右裁时保留 logo；竖屏等效 left top */
    display: block;
}

/* 暗色渐变蒙版：v3.0.5 加强 · 整体压暗到杂志感黑度，左侧 88% 黑底压住 logo 与噪点，右侧 65% 黑保留肌理氛围 */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 50%,
            rgba(3, 3, 3, 0.35) 0%,
            rgba(3, 3, 3, 0.75) 70%,
            rgba(3, 3, 3, 0.85) 100%),
        linear-gradient(
            to right,
            rgba(3, 3, 3, 0.88) 0%,
            rgba(3, 3, 3, 0.78) 40%,
            rgba(3, 3, 3, 0.70) 70%,
            rgba(3, 3, 3, 0.62) 100%
        );
    pointer-events: none;
}

/* 内容层浮于背景之上（z-index:0 的绝对定位元素在 CSS 绘制顺序中晚于未定位兄弟元素，必须显式抬升） */
.section-hero > .hero-title,
.section-hero > .hero-subtitle {
    position: relative;
    z-index: 1;
}

.section-hero > .hero-meta {
    position: relative;
    z-index: 3;
}

.hero-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-1); /* v3.0.5 · 从 fg-2 提到 fg-1，亮噪点上更读 */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* v3.0.5 · 抗噪点描边：双层阴影，远近皆清 */
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.85),
        0 1px 2px rgba(0, 0, 0, 0.9);
}

/* v3.0 · 首屏品牌字 · logo 图标 + 中英文工作室名（中上英下竖排）
   顶替原 .hero-title 位置，作为首屏主标题
   视觉权重对齐原 hero-title：大字 + 紧字距 + fg-0 + 抗噪描边 */
.hero-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    align-self: end;              /* 贴底、靠左（原 hero-title 行为） */
    margin: 0;
    pointer-events: none;         /* 不阻挡 3D 立方体交互 */
}

.hero-brand-name {
    width: auto;
    /* v3.0.x · 默认尺寸再缩一半（半 → 1/4 原尺寸） */
    height: clamp(40px, 7.5vw, 70px);
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    /* v3.1 · 与 .hero-meta-top padding-left 共享 --hero-shift 变量
       → 桌面两端永远对齐，不再因 viewport 变化而错位 */
    margin-left: var(--hero-shift);
}

.hero-title {
    font-family: var(--font-serif);
    font-weight: 700;            /* v3.0 · Geist 单家族后，从 400 提到 700 出"硬" */
    line-height: 0.88;
    letter-spacing: -0.045em;   /* v3.0 · 配合 Geist 收字距，更紧凑 */
    color: var(--fg-0);
    align-self: end;
    margin: 0;
    /* v3.0.5 · 标题区柔光晕 + 锐利抗噪 */
    text-shadow:
        0 0 30px rgba(0, 0, 0, 0.75),
        0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-line {
    display: block;
}

.hero-line.cn {
    font-family: var(--font-cn);
    font-size: clamp(2.6rem, 8vw, 6rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.hero-line.en {
    font-family: var(--font-en);     /* v3.0 · 显式声明，原来继承 body→Manrope，现切到 GSC */
    font-size: clamp(1.5rem, 4.5vw, 3.5rem);
    font-style: normal;
    /* v3.0.5 · 从 fg-2 提到 fg-1，亮噪点上更可读 */
    color: var(--fg-1);
    margin-top: 0.5rem;
}

.hero-subtitle {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 500;            /* v3.0 · Geist 取代衬线 italic，weight 提到 500 */
    color: var(--fg-0); /* v3.0.5 · 从 fg-1 提到 fg-0，最高对比 */
    line-height: 1.5;
    margin-top: 2rem;
    margin-bottom: 3rem;        /* v3.0.x · 与下方 .hero-meta-bottom（12 Projects…）拉开距离 */
    max-width: 36rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); /* v3.0.5 · 抗噪点描边 */
}

/* ==================== 4. Section 通用 ==================== */
.section {
    padding: var(--section-pad) var(--gutter);
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

.section-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4rem;
}

/* v3.0 · section-header 三元素字号统一对齐 .founders-lede 基准
   用字重/颜色/字距/字体区分层级（不再靠字号） */
.section-num {
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 400;
    color: var(--fg-3);
    letter-spacing: 0.1em;
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--fg-0);
}

.section-zh {
    font-family: var(--font-cn);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 500;
    color: var(--fg-2);
    letter-spacing: 0.08em;
}

/* ==================== 5. ABOUT ==================== */
/* v3.0 · logo + 工作室名已迁移到首屏 .hero-brand
   旧的 .about-logo* 样式整段删除（HTML 也已移除对应元素）*/

.about-lede {
    font-family: var(--font-serif);
    font-size: 0.95rem;   /* 对齐 feature-bio 正文字号 */
    line-height: 1.4;
    font-weight: 300;
    color: var(--fg-0);
    max-width: 60rem;
    margin-bottom: 5rem;
    /* v3.0.x · 中英两段统一字号 + 两端对齐 */
    text-align: justify;
}

.about-lede p {
    margin: 0;
    word-spacing: -0.3em;
    line-height: 1.2;
    /* v3.0.x · 中文也走两端对齐（末行自动左对齐避免孤字间距过大） */
    text-align: justify;
}

/* lede 英文镜像注释（v3.0.x · 中英统一字号 + 两端对齐）
   - 与中文同字号、同颜色、同对齐方式
   - 保留字体差异（英文走 --font-en 等宽感）
   - padding-left: 0 让英文首字母与中文首字左缘对齐 */
.about-lede-en {
    font-family: var(--font-en);
    font-style: normal;
    font-size: 0.95rem;            /* v3.0.x · 与中文段统一字号 */
    line-height: 1.65;
    font-weight: 300;
    color: var(--fg-0);             /* v3.0.x · 颜色与中文段一致（去降级灰） */
    margin-top: 3rem;               /* v3.0.x · 中文↔英文之间加大间距（1.75 → 3rem） */
    padding-top: 2rem;              /* v3.0.x · 顶部加细分隔区 */
    padding-left: 0;
    max-width: 60rem;               /* v3.0.x · 与中文段同宽 */
    letter-spacing: 0.005em;
    text-align: justify;            /* v3.0.x · 两端对齐 */
    border-top: 1px solid var(--line);   /* v3.0.x · 细分隔线让中英两段视觉分组 */
}

/* 全局非 hero 段落：堆叠布局 + 大中文标题 + 小英文描述（翻转主副顺序） */
.section:not(.section-hero) .section-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 2rem;
    row-gap: 0.4rem;
    align-items: baseline;
    margin-bottom: 2rem;
}

.section:not(.section-hero) .section-num {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}

.section:not(.section-hero) .section-zh {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-cn);
    font-weight: 400;
    color: var(--fg-0);
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.section:not(.section-hero) .section-title {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-style: normal;
    font-weight: 400;
    color: var(--fg-2);
    letter-spacing: 0.05em;
}

.about-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: 5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.about-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.col-mark {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--fg-2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.about-col p {
    font-size: 0.90rem;
    line-height: 1.2;
    color: var(--fg-1);
    word-spacing: -0.3em;
}

/* 三栏英文镜像注释（中主英辅）
   - 比 .about-lede-en 字号更小（三栏窄列需要）
   - 视觉降级保留：italic + fg-2 + 首字对齐
   - 上间距由 .about-col 的 gap: 1rem 控制 */
.about-col-en {
    font-family: var(--font-en);
    font-style: normal;
    font-size: clamp(0.78rem, 0.9vw, 0.88rem);
    line-height: 1.6;
    font-weight: 300;
    color: var(--fg-2);
    padding-left: 0;
    margin: 0;
    letter-spacing: 0.005em;
}

/* ==================== 6. FOUNDERS ==================== */
.founders-lede {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 300;
    color: var(--fg-1);
    margin-bottom: 5rem;
    max-width: 50rem;
}

/* ----- Founders 卡片横排 ----- */
.founders-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.founder-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all var(--dur-base) var(--ease-out);
    position: relative;
}

.founder-card:hover {
    border-color: var(--fg-3);
    transform: translateY(-2px);
}

.founder-card.active {
    border-color: var(--fg-1);
    background: var(--bg-0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.founder-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-2);
}

.founder-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(0.3);
    transition: filter var(--dur-base) var(--ease-out);
}

.founder-card:hover .founder-card-avatar img,
.founder-card.active .founder-card-avatar img {
    filter: grayscale(0);
}

.founder-card-info {
    flex: 1;
    min-width: 0;
}

.founder-card-name {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fg-0);
    margin: 0 0 0.2rem 0;
    letter-spacing: -0.02em;
}

.founder-card-name .en {
    font-family: var(--font-en);
    font-style: normal;
    color: var(--fg-2);
    font-size: 0.7em;
    margin-left: 0.5em;
    font-weight: 400;
}

.founder-card-role {
    font-size: 0.75rem;
    color: var(--fg-2);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.founder-card-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-3);
    letter-spacing: 0.1em;
    align-self: flex-start;
    flex-shrink: 0;
}

/* ----- Founders 详情面板 ----- */
.founder-detail {
    border-top: 1px solid var(--line);
    padding-top: 2.5rem;
}

.founder-detail-inner {
    display: grid;
    grid-template-columns: clamp(10rem, 20vw, 16rem) 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.founder-detail-avatar {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.founder-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.founder-detail-text .founder-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-3);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.founder-detail-text .feature-num { color: var(--fg-2); }
.founder-detail-text .feature-role { color: var(--fg-1); }

.feature-name {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fg-0);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.feature-name .en {
    font-family: var(--font-en);
    font-style: normal;
    color: var(--fg-2);
    font-size: 0.7em;
    margin-left: 0.5em;
    font-weight: 400;
}

.feature-bio {
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--fg-1);
    margin-bottom: 1rem;
    word-spacing: -0.3em;
}

.feature-bio.en {
    color: var(--fg-2);
    font-style: normal;
    font-family: var(--font-en);
    font-size: 0.95rem;
}

/* ==================== 7. AWARDS ==================== */
/* ==================== 7. AWARDS · PART I/II/III 三段 ==================== */

/* PART 容器：垂直堆叠三段 */
.award-part {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.award-part:last-of-type {
    margin-bottom: 0;
}

/* PART 标题（— 01 / Exhibitions · 参展） */
.part-marker {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--fg-2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    font-weight: 500;
    margin: 0;
}

/* 列表：年份 + 中英同行 */
.award-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

.award-list li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    column-gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.award-list li:hover {
    background-color: var(--bg-1);
}

.award-list .year {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-3);
    letter-spacing: 0.05em;
}

.award-list .name {
    font-size: 0.95rem;   /* 对齐 feature-bio 正文字号 */
    color: var(--fg-1);
    line-height: 1.4;
}

/* 同行中英镜像：cn 主体 / sep 分隔 / en italic 衬线 */
.award-list .name-cn {
    color: var(--fg-1);
}

.award-list .name-sep {
    font-family: var(--font-mono);
    color: var(--fg-3);
    margin: 0 0.5rem;
    font-weight: 400;
}

.award-list .name-en {
    font-family: var(--font-en);
    font-style: normal;
    color: var(--fg-2);
}

/* ==================== Logo 墙 · monochrome 静隐 / hover 显形 ==================== */
.logo-wall {
    margin-top: 0.5rem;
    margin-bottom: clamp(3rem, 6vw, 5rem);   /* v3.0.x · 与下方「— 01 / Exhibitions · 参展」拉开距离 */
    max-width: 32rem;
}

.logo-wall-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.55;
    transition: opacity var(--dur-base) var(--ease-out);
}

.logo-wall-img:hover {
    opacity: 1;
}

/* ==================== 8. PROJECTS · 编辑式目录 ==================== */
/* ==================== 8. PROJECTS · 单行编辑刊专题 ==================== */

/* 专题导航 · 中英混搭 + 分类感 */
.filter-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem 0;
    margin-bottom: 4rem;
    padding: 0;
    border: none;
}

.filter-btn {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0.3rem 1.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--fg-2);
    position: relative;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

/* 分类之间竖线分隔（除最后一个） */
.filter-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--line);
}

.filter-btn:hover { color: var(--fg-0); }
.filter-btn.active {
    color: var(--fg-0);
    border-bottom-color: var(--fg-0);
}

/* 中英混搭：中文 cn 主 / 分隔点 / 英文 serif italic 辅 */
.filter-btn .filter-cn {
    font-family: var(--font-cn);
    color: inherit;
    font-weight: 400;
}

.filter-btn .filter-dot {
    font-family: var(--font-serif);
    color: var(--fg-3);
    margin: 0 0.4rem;
    font-weight: 400;
}

.filter-btn .filter-en {
    font-family: var(--font-en);
    font-style: normal;
    color: var(--fg-2);
    font-size: 0.9rem;
}

.filter-btn:hover .filter-en { color: var(--fg-1); }
.filter-btn.active .filter-en { color: var(--fg-1); }

/* 列表容器 */
.project-toc {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 单行专题：序号 / 大封面 / 信息块 */
.project-row {
    display: grid;
    grid-template-columns: 3rem minmax(18rem, 26rem) 1fr;
    column-gap: 2.5rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.project-row:hover {
    background-color: var(--bg-1);
}

.row-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--fg-3);
    letter-spacing: 0.05em;
    padding-top: 0.5rem;
}

/* 大封面（编辑刊专题图） */
.row-cover {
    display: block;            /* span 默认 inline，aspect-ratio 不生效 · 改 block */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-2);
}

.row-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
}

.project-row:hover .row-cover img {
    transform: scale(1.04);
}

/* 右侧信息块：标题 / 简介 / meta */
.row-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.25rem;
}

.row-title {
    font-family: var(--font-serif);
    font-size: 0.95rem;   /* 对齐 feature-bio 正文字号 */
    font-weight: 500;            /* v3.0 · 基准档保持 500 */
    color: var(--fg-0);                 /* 主调：中文用最亮 */
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.row-title .title-cn { color: var(--fg-0); }
.row-title .title-sep {
    color: var(--fg-3);
    margin: 0 0.5rem;
    font-family: var(--font-mono);
    font-weight: 400;
}
.row-title .title-en {
    font-family: var(--font-en);
    font-style: normal;
    color: var(--fg-2);
    font-size: 0.85em;
}

.row-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--fg-1);                 /* 描述：中文次亮 */
    margin: 0;
    max-width: 48rem;
}

.row-desc .desc-cn { color: var(--fg-1); }
.row-desc .desc-en {
    font-family: var(--font-en);
    font-style: normal;
    color: var(--fg-3);                 /* 描述英文：更弱 */
    margin-left: 0.5rem;
}

.row-meta {
    display: flex;
    gap: 2rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 0.5rem;
}

.row-cat { color: var(--fg-2); }
.row-year { color: var(--fg-3); }

.markdown-container {
    background-color: var(--bg-1);
    border: 1px solid var(--line);
    padding: clamp(2rem, 4vw, 4rem);
    border-radius: 4px;
    font-family: var(--font-cn);
    line-height: 1.8;
    color: var(--fg-1);
    max-height: 80vh;
    overflow-y: auto;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    font-family: var(--font-serif);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 400;
    color: var(--fg-0);
    letter-spacing: -0.01em;
}

.markdown-content p { margin-bottom: 1em; word-spacing: -0.3em; line-height: 1.2; }
.markdown-content ul,
.markdown-content ol { padding-left: 1.5em; margin-bottom: 1em; }
.markdown-content code {
    background-color: var(--bg-2);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}
.markdown-content a {
    color: var(--fg-0);
    border-bottom: 1px dotted var(--fg-2);
}
.markdown-content a:hover { border-bottom-style: solid; }

/* ==================== 8.2 PROJECTS · 桌面端 横排 Carousel（≥1025px） ==================== */
/* v3.1 · 横排 slide：左 1 + 中 1 + 右 1 · 缩放 / 透明感
   - JS 维护 data-slot="prev|current|next|hidden"，CSS 仅负责物理位置 + 过渡
   - 主舞台（current）完整展示封面 + 标题 + 描述 + meta
   - 侧边（prev / next）缩小到 0.78 + 压暗到 0.45
   - 左右箭头 + 键盘 ← → + 拖拽 + 点侧边图 · 4 种切换方式
   - 无限循环（01 → 02 → … → 12 → 01）
   — 移动端（≤1024px）保持原杂志目录行列表 + 双列卡片不变 */


/* ==================== 8.5 PROJECT DETAIL · v3.0.x 已迁入 Shadow DOM ==================== */
/* 所有 .project-detail / .detail-* 样式已迁到 <project-detail> 自定义元素的 shadow root 内联 <style>
   外层 CSS 完全不感知详情页 → 不再受 .section-projects perspective / 3D transform / stacking context 污染
   见 index.html 里的 class ProjectDetail extends HTMLElement 定义 */

/* ==================== 9. CONTACT · 极简大字 ==================== */
/* v3.1 · Contact · 邮箱列表
   - .contact-mails：wrapper · 持有外边距/底边线/垂直堆叠
   - .contact-mail：单个 <a> · 每个邮箱独立链接 + 独立 hover 偏移 */
.contact-mails {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 1.5rem 0 4rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.5rem;
}

.contact-mail {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-serif);
    font-size: 0.95rem;   /* 对齐 feature-bio 正文字号 */
    font-weight: 400;
    color: var(--fg-0);
    letter-spacing: -0.01em;
    transition: padding-left var(--dur-base) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.mail-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75rem;
}

.contact-mail:hover {
    padding-left: 1rem;
}

.mail-prefix {
    font-family: var(--font-mono);
    color: var(--fg-2);
    font-size: 0.4em;
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.contact-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.col-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.contact-col p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-1);
}

/* ==================== 10. FOOTER · 杂志版权页 ==================== */
.site-footer {
    padding: 2rem var(--gutter) 4rem;
    border-top: 1px solid var(--line);
    margin-top: 4rem;
}

.footer-line {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    max-width: 1600px;
    margin: 0 auto;
}

/* ==================== 11. Reveal 动效 ==================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.project-row.reveal {
    transform: translateY(0);
}
.project-row.revealed {
    /* 保持原位 */
}

/* ==================== 12. 响应式 ==================== */


/* v3.0.3 iPad 768-1024px 中等屏适配 */

/* ==================== 13. 文本选择 ==================== */
::selection {
    background: var(--fg-0);
    color: var(--bg-0);
}

/* ==================== 14. 滚动条 ==================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* ==================== 15. 移动端补强（v3.0.1） ==================== */

/* 15.1 安全区：footer / hero 顶部底部让出 iPhone 刘海 / home indicator */
.site-footer {
    padding-bottom: max(4rem, calc(env(safe-area-inset-bottom) + 1.5rem));
}

.section-hero {
    padding-top: max(var(--section-pad), calc(env(safe-area-inset-top) + 1rem));
    padding-bottom: max(var(--section-pad), calc(env(safe-area-inset-bottom) + 1rem));
}

/* v3.0.1 iPhone 安全区已在 hero section-padding 内处理 */

/* 15.1b 全 section 顶部安全区：灵动岛机型 section 顶部贴顶修正 */

/* 15.2 触摸目标 ≥44pt（仅在 600px 以下启用） */

/* 15.3 320px 极小屏断点 */

/* 15.4 prefers-reduced-motion：尊重用户系统级动画偏好 */

/* 15.5 移动端隐藏滚动条（避免与底部 pill 视觉冲突） */

/* ==================== 17. HERO CUBE（v3.1） ==================== */

/* 17.1 容器 —— 绝对定位覆盖 hero，z-index 高于 DOM 标题使玻璃材质可覆盖 */
.hero-cube {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-cube-stage {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

.hero-cube-stage:active { cursor: grabbing; }

.hero-cube-canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-cube-css-fallback { display: none; }

/* 17.9 WebGL 激活后：DOM 标题保留在左侧（3D 立方体在右侧居中）*/
.has-cube-gl .hero-title--dom {
    align-self: end;             /* v3.6 · 改 center → end · 标题紧贴副标题上方 */
    max-width: 38vw;
    padding-left: 4vw;
    transition: all 0.6s ease;
}

.has-cube-gl .hero-subtitle--dom {
    max-width: 38vw;
    padding-left: 4vw;
    transition: all 0.6s ease;
}

/* v3.0.x · .hero-subtitle--dom 单独优化：
   - 字号 -10px（1rem~1.5rem → 0.4rem~0.65rem）
   - 字体切换 JetBrains Mono（冷硬代码感） */
.hero-subtitle--dom {
    font-family: var(--font-mono);
    /* v3.0.x · 固定 18px（= 1.125rem） */
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-1);
}

.has-cube-gl .hero-meta-top,
.has-cube-gl .hero-meta-bottom {
    padding-left: var(--hero-shift);
    padding-right: var(--hero-shift);
}

.hero-cube--fallback .hero-cube-css-fallback {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(180px, 38vmin, 320px);
    height: clamp(180px, 38vmin, 320px);
    transform: translate(-50%, -50%) perspective(900px) rotateX(-22deg) rotateY(-28deg);
    transform-style: preserve-3d;
    animation: cubeRotate 18s linear infinite;
    will-change: transform;
}

/* 17.2 CSS 立方体六个面（3D 定位） */
.css-face {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.06) 60%,
            rgba(255, 255, 255, 0.22) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        inset 0 0 80px rgba(255, 255, 255, 0.10),
        inset 0 0 1px rgba(255, 255, 255, 0.6);
}

/* 每个面按立方体一半尺寸向各自法线方向平移 */
.css-face-front  { transform: translateZ(calc(clamp(180px, 38vmin, 320px) / 2)); }
.css-face-back   { transform: rotateY(180deg) translateZ(calc(clamp(180px, 38vmin, 320px) / 2)); }
.css-face-right  { transform: rotateY(90deg)  translateZ(calc(clamp(180px, 38vmin, 320px) / 2)); }
.css-face-left   { transform: rotateY(-90deg) translateZ(calc(clamp(180px, 38vmin, 320px) / 2)); }
.css-face-top    { transform: rotateX(90deg)  translateZ(calc(clamp(180px, 38vmin, 320px) / 2)); }
.css-face-bottom { transform: rotateX(-90deg) translateZ(calc(clamp(180px, 38vmin, 320px) / 2)); }

/* 17.5 自转 keyframes */
@keyframes cubeRotate {
    from { transform: translate(-50%, -50%) perspective(900px) rotateX(-22deg) rotateY(-28deg); }
    to   { transform: translate(-50%, -50%) perspective(900px) rotateX(338deg) rotateY(332deg); }
}

/* 17.6 响应式 —— 移动端 CSS 立方体放大 */

/* 17.7 降低动效偏好 */

/* 17.8 降低透明度偏好 —— 移除 backdrop-filter */

/* ===== v3.0 · ≤768px 移动/平板竖屏 · Hero 上下堆叠（3D 在上 · 文字在下） ===== */
/* 桌面是绝对定位立方体 + 文字在左；这里改为 flex column：立方体独立占 45vh 区，文字依次堆在下方
   覆盖手机（≤600）和 iPad 竖屏（600-768）—— 平板横屏保留桌面布局
   ⚠ 必须在 section 3 (.section-hero / .hero-cube 等 base 规则) 之后，否则会被 base 覆盖 */

/* ==================== 16. 交互增强（v3.0.3） ==================== */

/* 16.1 触摸设备 active 反馈 */

/* 16.2 图片骨架屏（v3.0.3 性能优化） */
@keyframes skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.founder-detail-avatar,
.founder-card-avatar,
.row-cover,
.horizontal-banner {
    background:
        linear-gradient(90deg,
            var(--bg-1) 0%,
            var(--bg-2) 50%,
            var(--bg-1) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* 图片加载完后停止动画 */
.founder-detail-avatar img,
.founder-card-avatar img,
.row-cover img,
.horizontal-banner img {
    position: relative;
    z-index: 1;
}

/* 16.3 章节进入视口：标题文字字符逐个 reveal */
.section-title {
    overflow: hidden;
}

/* 16.4 键盘导航：上下箭头切换章节 */
.side-nav a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

/* 16.5 prefers-color-scheme: light 探测（保留 hook，未来扩展用） */