/* ========================================
   RESET & BASE
   ======================================== */
:root {
    --radius-sm: 8px;   /* 小按钮 / 标签 */
    --radius-md: 12px;  /* 普通卡片 */
    --radius-lg: 16px;  /* 图片 / 视频容器 */
    --radius-xl: 20px;  /* 弹窗大容器 */
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    background: #ffffff;
    color: #111;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ========================================
   NAVIGATION
   ======================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 48px;
    background: transparent;
    border-bottom: none;
}

.nav-brand {
    font-family: 'Bebas Neue', 'Noto Sans SC', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #111;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links {
    display: flex;
    gap: 26px;
    list-style: none;
}

.nav-links a {
    font-family: 'Bebas Neue', 'Noto Sans SC', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #111;
    transition: color 0.25s ease;
}

/* hover 仅文字变色，无高亮块、无下划线 */
.nav-links a:hover {
    color: #8a5a3a;
}

.nav-links a.active {
    color: #111;
}

.nav-cta {
    font-family: 'Bebas Neue', 'Noto Sans SC', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #111;
    transition: color 0.25s ease;
}

.nav-cta:hover {
    color: #8a5a3a;
}

/* 底部镜像小导航（桌面显示；作品集子页与移动端隐藏） */
.nav-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 12px 48px;
    pointer-events: none;
}

.nav-bottom a {
    font-family: 'Bebas Neue', 'Noto Sans SC', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #111;
    opacity: 0.4;
    pointer-events: auto;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.nav-bottom a:hover {
    opacity: 1;
    color: #8a5a3a;
}

body.works-mode .nav-bottom {
    display: none;
}

/* 移动端汉堡按钮（桌面隐藏） */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px 4px;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: #111;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav.open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav.open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav.open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ========================================
   COVER / 首页
   ======================================== */
/* 首页 → About Me 滚动视差轨道：外段加高，内层 sticky 钉住一屏做分层运动 */
.cover {
    position: relative;
    height: 250vh;
    background: #ffffff;
}

.cover-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 48px 130px;
    overflow: hidden;
}

/* 标题后方隐约露出的黑白小插图：被文字遮挡的层次感，滚动视差层 */
.cover-peek {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity, filter;
    /* 初始 = 滚动起点状态（JS 会按视口接管），避免加载前闪现 */
    opacity: 0.32;
    transform: translate(-50%, calc(-50% + 16vh));
    filter: grayscale(1) blur(4px);
}

.cover-peek img {
    width: clamp(220px, 30vw, 430px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    filter: grayscale(1);
}

.cover-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
}

.bg-word {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28vw;
    letter-spacing: 0.05em;
    line-height: 1;
}

.cover-content {
    position: relative;
    z-index: 2;
    max-width: none;
    width: 100%;
    /* 标题文字块整体上移（背景图 .cover-peek 为绝对定位，不受影响；JS 视差只作用于子级 hero-line） */
    transform: translateY(calc(-1 * clamp(34px, 7vh, 92px)));
}

.cover-tagline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    letter-spacing: 3px;
    font-weight: 500;
    margin-bottom: 40px;
}

.tag-dot {
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.cover-title {
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    line-height: 0.95;
    font-size: clamp(3.7rem, 15.4vw, 16rem);
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
    color: #111;
    display: flex;
    flex-direction: column;
}

/* 两行均为 flex 行：文字 / 照片 / 句号结构性锁定同一排，永不换行 */
.hero-line {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    will-change: transform, opacity;
}

.hero-line-1 {
    align-self: flex-start;
    word-spacing: 0.3em;
}

/* 第二行整体右下错位，与第一行留出空隙 */
.hero-line-2 {
    align-self: flex-end;
    gap: 0.06em;
    margin-top: 0.16em;
    padding-right: 2vw;
}

.hero-img {
    /* 嵌入式人像：与字母等高、固定方形框，flex 基线对齐 = 底边落在基线上 */
    height: 0.78em;
    width: 0.78em;
    object-fit: cover;
    border-radius: 0;
    flex: none;
    /* 硬切快闪轮播：图片瞬间切换，无任何渐变/滑动过渡 */
    transition: none;
}

.title-sub {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 4px;
    margin-top: 16px;
    padding: 8px 20px;
    border: 1.5px solid #111;
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.cover-meta {
    display: flex;
    gap: 48px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #888;
    font-weight: 500;
}

.meta-value {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
}

.cover-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: #111;
    color: #faf8f5;
}

.btn-primary:hover {
    background: #333;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: #111;
    border: 1.5px solid #111;
}

.btn-outline:hover {
    background: #111;
    color: #faf8f5;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 20px 48px;
    font-size: 0.95rem;
}

.cover-scroll {
    position: absolute;
    bottom: 32px;
    right: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    letter-spacing: 2px;
    font-weight: 500;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: #111;
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0% { top: -60px; }
    100% { top: 60px; }
}

/* ========================================
   SECTION COMMON
   ======================================== */
section {
    padding: 140px 48px;
    position: relative;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.section-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #999;
}

.section-num.light {
    color: rgba(255,255,255,0.6);
}

.section-label {
    font-size: 0.75rem;
    letter-spacing: 3px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
}

.section-label.light {
    color: rgba(255,255,255,0.6);
}

.section-title {
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin-bottom: 64px;
}

.title-stroke {
    color: inherit;
}

/* ========================================
   关于我（首页内嵌子路由）
   ======================================== */
.about {
    background: #ffffff;
}

.sub-route-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 24px;
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
}

.sub-dot {
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
}

.about-title {
    font-family: 'Anton', 'Oswald', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(4.5rem, 19vw, 22rem);
    line-height: 0.85;
    letter-spacing: -0.01em;
    color: #111;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    pointer-events: none;
    margin-bottom: 0;
    will-change: transform, opacity, filter;
}

.about-body {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    max-width: 1200px;
}

.about-photo {
    position: relative;
    z-index: 1;
    margin-top: calc(clamp(4.5rem, 19vw, 22rem) * -0.28);
    will-change: transform;
}

.about-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(20%);
    border-radius: 0;
}

.photo-caption {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 0 16px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #888;
    border-radius: var(--radius-sm);
}

.about-text {
    max-width: 620px;
    padding-top: clamp(2rem, 5vw, 4rem);
}

.about-para {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.9;
    margin-bottom: 24px;
    color: #333;
    text-align: justify;
}

.about-para strong {
    font-weight: 500;
}

/* ========================================
   个人能力（跑马灯文字 + 悬浮详情面板）
   ======================================== */
.capabilities {
    background: #000000;
    color: #faf8f5;
}

/* 黑底板块：章节编号/标签改浅色 */
.capabilities .section-num,
.capabilities .section-label {
    color: rgba(255, 255, 255, 0.5);
}

/* 大标题：Anton 全大写，放大并居中，页面视觉主角 */
.capabilities .section-title {
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(4rem, 13vw, 11rem);
    text-align: center;
    margin-bottom: 48px;
    color: #faf8f5;
}

/* ---- 跑马灯：4 行能力文字，行间细线分隔 ---- */
.cap-marquee {
    width: 100%;
    /* 底部细分隔线 + 自然留白边界，避免直接被下方深色区压住 */
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

.cap-row {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding: 24px 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.cap-row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.cap-track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: capScroll var(--dur, 30s) linear infinite;
}

/* 第 2 / 4 行反向滚动 */
.cap-row.reverse .cap-track {
    animation-name: capScrollRev;
}

@keyframes capScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes capScrollRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* 两段相同内容拼接实现无缝循环 */
.cap-chunk {
    display: inline-flex;
    align-items: baseline;
}

.cap-unit {
    display: inline-flex;
    align-items: baseline;
    margin-right: 28px;
}

/* 序号：更小、更淡，置于能力名称前 */
.cap-idx {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    letter-spacing: 1px;
    color: #faf8f5;
    opacity: 0.35;
    margin-right: 14px;
}

/* 能力文字：Bebas Neue / Inter，中小字号次级层级（重复内容铺满整行） */
.cap-txt {
    font-family: 'Bebas Neue', 'Inter', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 1.8vw, 28px);
    letter-spacing: 2px;
    line-height: 1;
    color: #faf8f5;
}

.cap-sep {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(15px, 1.3vw, 21px);
    color: #faf8f5;
    opacity: 0.3;
    margin-left: 28px;
}

/* 悬浮：该行暂停，其余行淡化突出当前行 */
.cap-row:hover .cap-track {
    animation-play-state: paused;
}

/* 点击打开面板后：对应行持续暂停（鼠标移到面板上也不恢复） */
.cap-row.active .cap-track {
    animation-play-state: paused;
}

.cap-marquee:hover .cap-row {
    opacity: 0.35;
}

.cap-marquee:hover .cap-row:hover {
    opacity: 1;
}

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

/* ---- 详情面板：黑底板块上用白色面板保持对比，右侧滑入 ---- */
.cap-panel {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1500;
    width: min(400px, 88vw);
    max-height: 86vh;
    overflow-y: auto;
    background: #ffffff;
    color: #111;
    padding: 42px 38px 46px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translate(100%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

.cap-panel.show {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
}

/* 关闭按钮：面板右上角极简 × */
.cap-panel-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 50%;
    background: transparent;
    color: #111;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cap-panel-close:hover {
    background: #111;
    border-color: #111;
    color: #ffffff;
}

.cap-panel-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.2rem;
    line-height: 1;
    color: #111;
    opacity: 0.3;
}

.cap-panel-title {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 14px 0 18px;
}

.cap-panel-desc p {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.9;
    opacity: 0.82;
    margin-bottom: 10px;
}

.cap-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.cap-panel-tags span {
    font-size: 0.68rem;
    letter-spacing: 1px;
    padding: 5px 12px;
    border: 1px solid rgba(17, 17, 17, 0.35);
    border-radius: var(--radius-sm);
    opacity: 0.85;
}

/* ========================================
   纵向转横向 Pin（About → Capabilities 扫码过闸式抽拉）
   外层加高提供垂直滚动行程；stage sticky 钉住一屏；
   track 随滚动从 0 平移到 -100vw，About 向左滑出、Capabilities 接踵而来
   ======================================== */
.h-scroll {
    position: relative;
    height: 300vh;
}

.h-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.h-track {
    display: flex;
    align-items: flex-start;
    height: 100%;
    width: 200vw;
    will-change: transform;
}

/* About 面板：自然高度完整排布，钉住后先在视口内正常上滚供阅读，不裁切 */
.about.h-panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: auto;
    min-height: 100vh;
    padding: 120px clamp(28px, 5vw, 72px) 90px;
    justify-content: flex-start;
    overflow: visible;
    will-change: transform;
}

/* Capabilities 面板：固定一屏、内容居中，横向抽拉阶段才进入视口 */
.capabilities.h-panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    padding: clamp(56px, 8vh, 96px) clamp(28px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* 降级（减少动态偏好 / 窄屏触屏）：恢复普通纵向文档流，两页顺序正常滚动 */
body.hpin-off .h-scroll {
    height: auto;
}

body.hpin-off .h-stage {
    position: static;
    height: auto;
    overflow: visible;
}

body.hpin-off .h-track {
    display: block;
    width: auto;
    transform: none !important;
    will-change: auto; /* 取消合成层：避免 fixed pin（网格转场）相对此容器错位产生空白 */
}

body.hpin-off .h-panel {
    flex: none;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 140px 48px;
    overflow: visible;
    display: block; /* 还原普通纵向块级布局，取消 pin 用的 flex 横向排列 */
}

/* ========================================
   网格动态文字重组转场（ABOUT → CAPABILITIES）
   两层全宽网格：旧整套（线+词+圆点）整体左滑，新整套从视口右侧外整体驶入。
   ======================================== */
.gt-stage {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden; /* 滑出视口的层在此裁切，无横向滚动条 */
    background: transparent; /* 完全透明，继承前后页面白底 */
}

/* 网格层：铺满视口，4 列 × 7 行（旧内容 1-3 行、新内容 4-6 行、第 7 行空白留白） */
.gt-sheet {
    position: absolute;
    inset: 0;
    will-change: transform, opacity;
}

/* 静态辅助线层：水平线 + 等距竖线铺满视口，固定不动、不随文字位移、无外围边线故不封闭成框；颜色加深 */
.gt-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 5 行网格 → 行界线 4 根，分别在 1/5 ~ 4/5 高度处 */
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(100% / 5 - 1px),
        #c8c8c8 calc(100% / 5 - 1px),
        #c8c8c8 calc(100% / 5)
    );
}

/* 等距竖线：4 等列 → 3 根内部竖线（25% / 50% / 75%），每格间距恒定 */
.gt-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c8c8c8;
}
.gt-vline-1 { left: 25%; }
.gt-vline-2 { left: 50%; }
.gt-vline-3 { left: 75%; }

/* 竖线编号：小号数字标在竖线顶部右侧（参考图样式） */
.gt-num {
    position: absolute;
    top: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #111;
}
.gt-num-1 { left: calc(25% + 6px); }
.gt-num-2 { left: calc(50% + 6px); }
.gt-num-3 { left: calc(75% + 6px); }

.gt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    height: 100%;
    /* 网格层本身透明：辅助线由固定的 .gt-lines 层提供，线条不再跟随文字移动 */
    background: none;
}

/* 网格单元：内容在格子内水平+垂直居中 */
.gt-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

/* 单元落位（共 5 行：旧内容 1-3 行、新内容 4-5 行），全部居中 */
.gt-r1   { grid-area: 1 / 1 / 2 / 4; }
.gt-the  { grid-area: 2 / 1 / 3 / 2; }
.gt-dot1 { grid-area: 2 / 2 / 3 / 3; }
.gt-l2   { grid-area: 2 / 3 / 3 / 5; }
.gt-dot2 { grid-area: 3 / 1 / 4 / 2; }
.gt-of   { grid-area: 3 / 2 / 4 / 3; }
.gt-l3   { grid-area: 3 / 3 / 4 / 5; }

/* 新内容：第 4 行 SEE / THE / ● / PULSE 依次四格，第 5 行 ● / OF / CAPABILITIES */
.gt-n-see   { grid-area: 4 / 1 / 5 / 2; }
.gt-n-the   { grid-area: 4 / 2 / 5 / 3; }
.gt-n-dot1  { grid-area: 4 / 3 / 5 / 4; }
.gt-n-pulse { grid-area: 4 / 4 / 5 / 5; }
.gt-n-dot2  { grid-area: 5 / 1 / 6 / 2; }
.gt-n-of    { grid-area: 5 / 2 / 6 / 3; }
.gt-n-cap   { grid-area: 5 / 3 / 6 / 5; }

/* 文字：统一大字号（贴近行高、参考图比例），Anton 大写、窄长粗黑杂志排版感，字距收紧 */
.gt-word {
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #111;
    line-height: 1;
    letter-spacing: 0;
    margin: 0;
    white-space: nowrap;
    font-size: clamp(2.6rem, 8.2vw, 8.2rem);
}

/* 黑色实心圆点：独立圆形 DOM，放大到与大标题视觉权重匹配（约 0.75 倍字高） */
.gt-dot {
    width: clamp(30px, 6.2vw, 92px);
    height: clamp(30px, 6.2vw, 92px);
    border-radius: 50%;
    background: #111;
    flex: 0 0 auto;
}

/* 新整套初始在视口右侧外（GSAP接管位移）；GSAP失败时也保持可见(opacity:1) */
.gt-new {
    opacity: 1;
}

/* 末尾放大承接的 CAPABILITIES 单词 */
.gt-cap {
    will-change: transform;
}

/* 降级：减少动态偏好 → 不钉住，直接静态呈现新整套 */
@media (prefers-reduced-motion: reduce) {
    .gt-stage {
        height: auto;
        min-height: 60vh;
    }
    .gt-old {
        display: none;
    }
    .gt-sheet {
        position: relative;
    }
    .gt-grid {
        height: 60vh;
    }
    .gt-new {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* 移动端：字号/圆点自适应，网格全宽不溢出（动画完整保留） */
@media (max-width: 768px) {
    /* 移动端缩短区块高度，避免占据全屏造成压迫感 */
    .gt-stage {
        height: 42vh;
        min-height: 240px;
    }
    .gt-word {
        font-size: clamp(2.2rem, 9.6vw, 4.4rem);
    }
    .gt-dot {
        width: clamp(26px, 8vw, 48px);
        height: clamp(26px, 8vw, 48px);
    }
    .gt-num {
        font-size: 9px;
        top: 6px;
    }
}

/* ========================================
   作品集子页（Manual / AIGC Works）
   ======================================== */
.works-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    padding-top: 96px;
    animation: pageIn 0.7s ease;
}

@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* VISUAL WORKS 聚合页：黑底白字静态杂志版式（单屏，标题在图片右上方，平面图片） */
.vw-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 与上方能力区拉开过渡空档；底部超大黑色呼吸区，衔接 MANUAL WORKS 前不局促 */
    padding: 160px 0 220px;
    background: #000000;
    overflow: hidden;
}

/* 换页面纱动效已取消：板块直接黑底，与能力区普通滚动相邻，无揭开过渡 */

.vw-section > * {
    position: relative;
    z-index: 1;
}

/* 序号行颜色适配深色背景 */
.vw-section .section-num,
.vw-section .section-label {
    color: #ffffff;
}

/* 栏目小标题：MANUAL&AIGC，位于主标题正上方（右侧标题区内）；微软雅黑 */
.vw-subtitle {
    font-family: 'Microsoft YaHei', '微软雅黑', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: #cccccc;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

/* 画布：图组与标题相向靠拢，整体水平居中 */
.vw-canvas {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
    width: 100%;
    margin: 8px 0 0 0;
    padding: 0 24px;
}

/* 左侧：照片组放大并左移，整组下压与标题错开；外层提供 3D 透视（卡片轻度倾斜的容器） */
.vw-media {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-left: -5vw;
    margin-top: 7vh;
    grid-column: 1;
    grid-row: 1;
    perspective: 800px;
}

.vw-img {
    display: block;
    border-radius: 0;
    box-shadow: none;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.vw-img.main {
    height: 71vh;
    width: auto;
    max-width: none;
    object-fit: fill;
}

.vw-img.side {
    height: 24vh;
    width: auto;
    max-width: none;
    object-fit: fill;
}

/* 右侧：标题区大幅抬升，顶部明显高于照片组顶部 */
.vw-side {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-top: -8vh;
}

.vw-title {
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(4.5rem, min(15.5vw, 30vh), 15rem); /* 大而有力，宽/高双保险不溢出 */
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-transform: uppercase;
    /* 深色背景上更稳：轻微文字阴影，不破坏极简感 */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

/* 简介：移入右栏标题下方（右上区域），与左侧海报同栅格不同列、互不覆盖；微软雅黑、小字号、白色、行高宽松 */
.vw-intro {
    margin: 26px 0 0;
    padding: 0;
    font-family: 'Microsoft YaHei', '微软雅黑', 'Noto Sans SC', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 2;
    color: #ffffff;
    max-width: min(360px, 34vw);
    text-align: right;
}

/* 黑底页面时的导航适配：文字白色，透明无背景无边框 */
body.vw-mode .nav a,
body.vw-mode .nav-bottom a {
    color: #ffffff;
}

body.vw-mode .nav-links a:hover,
body.vw-mode .nav-cta:hover,
body.vw-mode .nav-bottom a:hover {
    color: #d99a6c;
}

body.vw-mode .nav-bottom a {
    opacity: 0.55;
}

body.vw-mode .nav-toggle span {
    background: #ffffff;
}

/* 子页大标题：Anton 大写，大幅放大增强视觉冲击力（仅 AIGC 页使用） */
.wk-title {
    padding: 14px 48px 0;
    margin-bottom: 6vh;
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(4.37rem, 10.35vw, 9.89rem); /* AIGC WORKS 字号增大 15% */
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
}

/* ========================================
   Manual Works：黑白拼色版式（左黑竖标题栏贴边 + 右侧两行作品网格）
   ======================================== */
.mw-page {
    flex-direction: row;
    align-items: stretch;
    background: #ffffff;
    padding: 0; /* 覆盖 section / .works-page 的内边距：黑栏必须贴边 */
    overflow: visible; /* 内容超高时正常滚动，禁止裁切 */
}

/* 左侧黑色竖栏：紧贴页面最左边，宽度压缩到 20%~25%，把空间让给右侧作品网格 */
.mw-side {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 clamp(200px, 22vw, 320px);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #000000;
    color: #f4f1ea;
}

/* 标题区：竖排 MANUAL 与左边缘留出呼吸间距，WORKS 固定底部靠右——两词同屏完整可见 */
.mw-title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 70px 0 0;
    padding: 0 0 clamp(90px, 16vh, 150px) clamp(22px, 2.2vw, 40px); /* MANUAL 右移，离开黑栏左边缘 */
}

/* 竖排 MANUAL：自下而上阅读，字号随视口适配，保证完整显示不溢出（再放大约 7%） */
.mw-title-v {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(6.4rem, 22vh, 16.8rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #f4f1ea;
    white-space: nowrap;
}

/* 横排 WORKS：竖栏底部靠右，与 MANUAL 同屏可见（字号增大 15%） */
.mw-title-h {
    position: absolute;
    right: clamp(12px, 1.6vw, 28px);
    bottom: clamp(28px, 5vh, 52px);
    display: block;
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(2.42rem, 4.03vw, 4.14rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: right;
    color: #f4f1ea;
}

/* 右侧作品区：12 列网格，Hero 主次错落——01 跨 7 列主图、02 跨 5 列；03-05 各 4 列；06-09 各 3 列 */
.mw-grid {
    flex: 1;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(24px, 3.2vh, 46px) clamp(20px, 2.2vw, 38px);
    align-items: start;
    align-content: start;
    padding: 128px clamp(28px, 4vw, 72px) 96px;
}

.mw-item:nth-child(1) { grid-column: span 7; }  /* Hero 主图 */
.mw-item:nth-child(2) { grid-column: span 5; }  /* 次主图 */
.mw-item:nth-child(3),
.mw-item:nth-child(4),
.mw-item:nth-child(5) { grid-column: span 4; }  /* 第二排三等分 */
.mw-item:nth-child(n+6)  { grid-column: span 3; }  /* 第三排四等分 */

.mw-item {
    position: relative;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: mwCardIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: var(--d, 0s);
}

.mw-item:nth-child(1) { --d: 0.05s; }
.mw-item:nth-child(2) { --d: 0.12s; }
.mw-item:nth-child(3) { --d: 0.19s; }
.mw-item:nth-child(4) { --d: 0.26s; }
.mw-item:nth-child(5) { --d: 0.33s; }
.mw-item:nth-child(6) { --d: 0.40s; }
.mw-item:nth-child(7) { --d: 0.47s; }
.mw-item:nth-child(8) { --d: 0.54s; }
.mw-item:nth-child(9) { --d: 0.61s; }

@keyframes mwCardIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 照片按原始比例完整显示：直角、无圆角、无边框、无卡片阴影，不裁切不变形 */
/* 默认黑白微压暗（杂志冷调），hover 恢复全彩并轻微放大 */
.mw-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1) brightness(0.94);
    transition: transform 0.5s ease, filter 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mw-item:hover img {
        transform: scale(1.03);
        filter: grayscale(0) brightness(1);
    }
}

/* 序号：统一置于图片外侧下方左对齐，黑色粗体，无框无底 */
.mw-num {
    display: block;
    text-align: left;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.5vw, 1.6rem);
    line-height: 1;
    letter-spacing: 0.03em;
    color: #0b0b0b;
    margin-top: 10px;
}

/* 视频项：与图片同尺寸规则 */
.mw-item video {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1) brightness(0.94);
    transition: transform 0.5s ease, filter 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mw-item:hover video {
        transform: scale(1.03);
        filter: grayscale(0) brightness(1);
    }
}

.mw-item:nth-child(10) { --d: 0.68s; }

/* 播放按钮覆盖层（Manual + AIGC 共用） */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    z-index: 5;
    pointer-events: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.mw-item:hover .play-btn,
.eg-item:hover .play-btn {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.08);
}

/* Manual 页：左侧黑色竖栏上的品牌名切为浅色（导航右侧链接仍在米色区，保持深色） */
body.mw-mode .nav-brand {
    color: #f4f1ea;
}

/* ========================================
   AIGC Works：杂志画报式非对称编辑网格
   ======================================== */
.eg-grid {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 24px;
    align-content: start;
    padding: 4vh 48px 12vh;
}

.eg-item {
    position: relative;
    margin: 0;
    perspective: 900px;
    cursor: pointer;
}

.eg-tilt {
    transform-style: preserve-3d;
    transition: transform 0.35s ease;
    will-change: transform;
}

.eg-frame {
    overflow: hidden;
    background: #edebe7;
}

/* 图片不裁剪：保持原始宽高比，完整显示 */
.eg-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.eg-item:hover .eg-frame img {
    transform: scale(1.05);
}

/* 杂志元素：大序号 */
.eg-num {
    position: absolute;
    top: -0.55em;
    left: -12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1;
    color: #111;
    z-index: 4;
    pointer-events: none;
}

/* 非对称排布：第一排 主图 / 竖图 / 小图（高度随图片原始比例自然排列） */
.eg-hero { grid-column: 1 / 6;  grid-row: 1; }
.eg-v   { grid-column: 6 / 9;  grid-row: 1; margin-top: 7vh; }
.eg-s1  { grid-column: 9 / 13; grid-row: 1; margin-top: 16vh; }

/* 第二排：中图 / 大图 / 小图，高低错落 */
.eg-m1  { grid-column: 2 / 6;  grid-row: 3; margin-top: 10vh; }
.eg-l   { grid-column: 6 / 10; grid-row: 3; margin-top: 16vh; }
.eg-s2  { grid-column: 10 / 13; grid-row: 3; margin-top: 6vh; }

/* 第二排：视频(缩小3列) + 两张照片(4列)，与第三排排版一致 */
.eg-vid1 { grid-column: 2 / 5;  grid-row: 2; margin-top: 8vh; }
.eg-r2a  { grid-column: 5 / 9;  grid-row: 2; margin-top: 10vh; }
.eg-r2b  { grid-column: 9 / 13; grid-row: 2; margin-top: 16vh; }

/* 第三排：照片(6列) + 视频(缩小3列)，两个 */
.eg-r3a  { grid-column: 2 / 6;  grid-row: 3; margin-top: 8vh; }
.eg-vid2 { grid-column: 7 / 10; grid-row: 3; margin-top: 14vh; }

/* 视频在网格中与图片同规则 */
.eg-frame video {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.eg-item:hover .eg-frame video {
    transform: scale(1.05);
}

/* ========================================
   AIGC Works：居中大图预览（Lightbox）
   ======================================== */
.eg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.eg-lightbox.active {
    opacity: 1;
    visibility: visible;
}

/* 大图保持原始比例，不拉伸变形 */
.eg-lightbox img {
    width: auto;
    height: auto;
    max-width: 86vw;
    max-height: 82vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    transform: scale(0.88);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eg-lightbox.active img {
    transform: scale(1);
}

/* 视频在灯箱中：与图片同尺寸约束 */
.eg-lightbox video {
    max-width: 86vw;
    max-height: 82vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    transform: scale(0.88);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eg-lightbox.active video {
    transform: scale(1);
}

.eg-lb-close,
.eg-lb-prev,
.eg-lb-next {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(250, 248, 245, 0.92);
    color: #111;
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.eg-lb-close:hover,
.eg-lb-prev:hover,
.eg-lb-next:hover {
    background: #ffffff;
}

.eg-lb-close { top: 28px; right: 28px; }

.eg-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.eg-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

.eg-lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.eg-lb-next:hover { transform: translateY(-50%) translateX(2px); }

/* 顶部导航中央 (BACK)：仅作品集子页显示 */
.nav-back {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #111;
    transition: opacity 0.3s ease;
}

.nav-back:hover {
    opacity: 0.55;
}

body.works-mode .nav-back {
    display: inline-block;
}

/* AIGC 子页：不显示 (BACK) */
body.no-back .nav-back {
    display: none;
}

/* ===== 弹窗公共组件 ===== */
@keyframes panelIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wmFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   实践经历
   ======================================== */
.experience {
    background: #000000;
    color: #faf8f5;
}

.experience .section-num,
.experience .section-label {
    color: rgba(255,255,255,0.5);
}

.experience .section-title {
    color: #faf8f5;
    font-size: clamp(4.4rem, 14vw, 11rem); /* 再次放大，与 CAPABILITIES 同级视觉 */
}

/* 卡片可点击打开详情弹窗 */
.experience .exp-item {
    cursor: pointer;
}

/* ---- 经历详情弹窗：小型居中卡片 + 磨砂模糊遮罩（不铺满全屏） ---- */
.exp-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 26, 26, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.exp-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.exp-modal-card {
    width: min(480px, 100%);
    max-height: 76vh;
    overflow: auto;
    background: #ffffff;
    color: #111;
    border-radius: var(--radius-xl);
    padding: 36px 34px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.85) translateY(16px);
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性回弹 */
}

.exp-modal.open .exp-modal-card {
    transform: scale(1) translateY(0);
}

.exp-modal-year {
    font-family: 'Bebas Neue', 'Noto Sans SC', sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: #8a5a3a;
    margin-bottom: 12px;
}

.exp-modal-role {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.exp-modal-org {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 0.82rem;
    color: rgba(17, 17, 17, 0.5);
    letter-spacing: 0.5px;
}

.exp-modal-line {
    width: 44px;
    height: 1px;
    background: rgba(17, 17, 17, 0.25);
    margin: 16px 0;
}

.exp-modal-text {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 0.92rem;
    line-height: 1.9;
    color: #333;
    white-space: pre-line; /* 支持 JS 数据中的 \n 换行（多条经历分项展示） */
}

@media (prefers-reduced-motion: reduce) {
    .exp-modal-card { transition: none; }
}

/* 弹窗移动端：自适应缩小 */
@media (max-width: 640px) {
    .exp-modal { padding: 16px; }

    .exp-modal-card { padding: 26px 22px 24px; }

    .exp-modal-year { font-size: 1.6rem; }

    .exp-modal-role { font-size: 1.15rem; }

    .exp-modal-text { font-size: 0.88rem; }
}

.experience .title-stroke {
    color: #faf8f5;
}

.exp-timeline {
    max-width: 900px;
    position: relative;
    padding-left: 40px;
}

.exp-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(255,255,255,0.2);
}

.exp-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 48px;
    padding: 32px 0;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.exp-item:last-child {
    border-bottom: none;
}

.exp-item::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 44px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    border: 3px solid #000000;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

.exp-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    color: rgba(255,255,255,0.4);
    transition: color 0.3s ease;
}

/* 年份中的中文（至今）：缩小两个字号，随父级 em 缩放，移动端同步变小 */
.exp-year .year-cn {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.45em;
    letter-spacing: 0.05em;
}

.exp-item:hover .exp-year {
    color: #faf8f5;
}

.exp-body h3 {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.exp-org {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}

/* ========================================
   联系我
   ======================================== */
.contact {
    min-height: 100vh;
    background: #ffffff;
    padding: 140px 48px 60px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.contact-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* 大标题：Anton，左上角，大字号（比初版放大 20%） */
.contact-title {
    font-family: 'Anton', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    font-size: clamp(4.8rem, 14.4vw, 12.6rem);
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 20px 0 64px;
}

/* 标题中间的猫爪图标，随字号等比缩放 */
.contact-title-paw {
    display: inline-block;
    width: auto;
    height: 0.72em;
    margin: 0 0.08em;
    transform: translateY(0.04em);
    object-fit: contain;
}

/* 标题拆字：每个字母 / 猫爪为独立可交互元素（排版位置不变） */
.contact-title .ct-ch {
    display: inline-block;
}

/* 鼠标悬停：仅当前字母 / 猫爪短弹性下沉回弹（Y2K 粗野，位移小、不循环、不自动播放）；
   仅精确指针设备生效，移动端无 hover 自动降级为静态 */
@media (hover: hover) and (pointer: fine) {
    .contact-title .ct-ch:hover {
        animation: ctBounce 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
}

@keyframes ctBounce {
    0%   { transform: translateY(0); }
    38%  { transform: translateY(0.16em); }
    64%  { transform: translateY(-0.05em); }
    83%  { transform: translateY(0.03em); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .contact-title .ct-ch:hover { animation: none; }
}

/* 左右分栏：左侧个人信息，右侧联系方式 */
.contact-cols {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(320px, 1.2fr);
    gap: 48px 96px;
    align-items: start;
}

/* 左侧信息区：整体右移，缩小页面左侧留白 */
.contact-info {
    padding-left: min(18vw, 240px);
}

.contact-info p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 2;
    color: #333;
}

/* 两列猫咪图标统一规则：同款尺寸、同款透明度（不再被父级 opacity 压暗） */
.contact-info p img,
.ct-row-head img {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.9;
}

/* 右侧联系信息区：三组，每组小标题行 + 内容行（下带细横线） */
.contact-rows {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.ct-group {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ct-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    /* 弱化只作用于文字（颜色变淡），猫咪图标保持与左列一致，不被父级 opacity 乘暗 */
    color: rgba(17, 17, 17, 0.55);
}

.ct-row-value {
    display: block;
    margin-top: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.35);
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    color: #111;
    transition: border-color 0.3s ease;
}

a.ct-group:hover .ct-row-value {
    border-bottom-color: #111;
}

.ct-hint {
    margin: 14px 0 0;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(17, 17, 17, 0.55);
    letter-spacing: 0.3px;
}

/* 右下方简历下载：胶囊按钮 */
.contact-download {
    display: flex;
    justify-content: flex-end;
    margin-top: 44px;
}

.contact-resume-btn {
    display: inline-block;
    background: #111;
    color: #faf8f5;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding: 14px 46px;
    border-radius: 999px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.contact-resume-btn:hover {
    transform: scale(1.05);
    background: #333;
}

.footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
    padding-top: 40px;
    border-top: 1px solid #ddd;
    margin-top: 80px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .nav { padding: 16px 28px; }
    .nav-links { gap: 20px; }
    .nav-links a { font-size: 0.75rem; }

    section { padding: 100px 28px; }

    /* 降级为普通滚动时，面板沿用平板 section 内边距 */
    body.hpin-off .h-panel { padding: 100px 28px; }

    /* 768~1024 区间 pin 仍启用：About 面板改紧凑双列，缩短阅读行程（降级纵向布局不受影响） */
    body:not(.hpin-off) .h-panel .about-body {
        grid-template-columns: minmax(190px, 250px) 1fr;
        gap: 34px;
    }

    body:not(.hpin-off) .h-panel .about-photo { max-width: 250px; margin-top: 0; }

    body:not(.hpin-off) .h-panel .about-text { padding-top: 0; }

    body:not(.hpin-off) .h-panel .about-title { font-size: clamp(3rem, 12vw, 8.5rem); }

    body:not(.hpin-off) .h-panel .about-para { font-size: 0.84rem; line-height: 1.72; margin-bottom: 13px; }

    body:not(.hpin-off) .h-panel .sub-route-tag { margin-bottom: 12px; }

    body:not(.hpin-off) .h-panel .section-header { margin-bottom: 16px; }

    /* Capabilities 面板紧凑 */
    body:not(.hpin-off) .h-panel.capabilities .section-title { margin-bottom: 26px; }

    body:not(.hpin-off) .h-panel .cap-row { padding: 15px 0; }

    .about-body {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-photo {
        max-width: 320px;
    }

    /* 作品集子页：AIGC 编辑网格收窄（高度随原始比例自然排列） */
    .eg-grid { gap: 0 16px; padding: 3vh 28px 10vh; }

    /* Manual Works 黑白拼色：平板黑栏压缩至 20%，Hero 主图整幅 + 两列拼贴 */
    .mw-page { overflow: visible; }

    .mw-side { flex-basis: clamp(150px, 20vw, 210px); }

    .mw-title { padding-bottom: clamp(70px, 13vh, 110px); }

    .mw-title-v { font-size: clamp(4.3rem, 14.8vh, 9rem); }

    .mw-title-h { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }

    .mw-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 22px 16px;
        padding: 118px 26px 80px;
    }

    /* 平板：01 整幅 Hero，其余两列排布，照片完整显示 */
    .mw-item:nth-child(1) { grid-column: span 12; }
    .mw-item:nth-child(n+2) { grid-column: span 6; }

    .exp-item {
        grid-template-columns: 90px 1fr;
        gap: 32px;
    }
}

/* 移动端 VISUAL WORKS 适配（768px 与 JS 断点一致） */
@media (max-width: 768px) {
    .vw-section {
        overflow: visible;
        padding: 76px 0 60px;
    }

    .vw-canvas {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 20px;
    }

    .vw-media {
        grid-column: 1;
        grid-row: 2;
        margin-left: 0;
        margin-top: 0;
        gap: 6px;
        perspective: none;
    }

    .vw-side {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        align-items: flex-start;
        text-align: left;
        margin-top: 0;
    }

    .vw-img {
        transform-style: flat;
        backface-visibility: visible;
        will-change: auto;
    }

    .vw-img.main {
        width: 68%;
        height: auto;
        max-width: 68%;
        object-fit: contain;
    }

    .vw-img.side {
        width: 30%;
        height: auto;
        max-width: 30%;
        object-fit: contain;
    }

    .vw-intro {
        max-width: 100%;
        margin-top: 20px;
        padding: 0 0 40px;
        font-size: 0.82rem;
    }

    .vw-subtitle {
        font-size: 0.78rem;
        margin: 0 0 10px;
    }

    .vw-title {
        font-size: clamp(3.4rem, 14vw, 8rem);
    }
}

@media (max-width: 640px) {
    /* 导航折叠：菜单收入汉堡下拉 */
    .nav { padding: 14px 20px; }
    .nav-right { gap: 14px; }
    .nav-toggle { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: #ffffff;
        box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
        padding: 10px 24px 18px;
    }

    .nav.open .nav-links {
        display: flex;
        background: #ffffff;
        box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
        padding: 8px 22px 16px;
    }

    .nav-links a {
        display: block;
        padding: 14px 0;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    }

    .nav-links li:last-child a {
        border-bottom: none;
    }

    .nav-cta { font-size: 0.74rem; }

    /* 底部镜像导航手机端隐藏（汉堡菜单代替） */
    .nav-bottom { display: none; }

    body { padding-bottom: 0; }

    /* Hero 移动端：标题与嵌入图同步等比缩小 */
    .cover { height: 210vh; }

    .cover-sticky { padding: 88px 20px 96px; }

    .cover-peek img { width: 62vw; }

    .cover-title {
        font-size: clamp(3.1rem, 15.4vw, 16rem);
        margin: 0;
    }

    .hero-img { height: 0.78em; }

    .btn { width: 100%; }

    /* 能力跑马灯：手机端缩小字号，面板改为底部弹出 */
    .cap-row { padding: 16px 0; }

    .cap-txt { font-size: clamp(15px, 4.4vw, 21px); }

    .cap-sep { font-size: 12px; margin-left: 16px; }

    .cap-unit { margin-right: 16px; }

    .cap-panel {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 74vh;
        padding: 30px 24px 38px;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%);
    }

    .cap-panel.show { transform: translateY(0); }

    .cap-panel-num { font-size: 3rem; }

    /* 作品集子页移动端 */
    /* Manual Works 黑白拼色：保留左侧贴边黑栏（收窄至 22vw），作品两列完整显示 */
    .mw-page { flex-direction: row; overflow: visible; }

    .mw-side { flex: 0 0 22vw; }

    .mw-title { margin-top: 54px; padding: 0 0 60px; align-items: center; justify-content: center; }

    .mw-title-v { font-size: clamp(2.8rem, 11.4vh, 4.7rem); line-height: 0.95; }

    .mw-title-h {
        left: 0;
        right: 0;
        bottom: 16px;
        padding: 0;
        font-size: clamp(1.3rem, 6vw, 2.1rem);
        text-align: center;
    }

    .mw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
        padding: 96px 14px 60px 12px;
    }

    /* 手机端：01 整幅 Hero，其余两列自然排布，序号左对齐清晰 */
    .mw-item:nth-child(1) { grid-column: span 2; }
    .mw-item:nth-child(n+2) { grid-column: auto; }

    .mw-num { font-size: 1.1rem; text-align: left; }

    /* AIGC 编辑网格：单列纵向流（高度随原始比例自然排列） */
    .eg-grid {
        display: flex;
        flex-direction: column;
        gap: 54px;
        padding: 2vh 20px 10vh;
    }

    .eg-v, .eg-s1, .eg-m1, .eg-l, .eg-s2, .eg-vid1, .eg-vid2, .eg-r2a, .eg-r2b, .eg-r3a { margin-top: 0; }

    .wk-title { font-size: clamp(3rem, 15vw, 5.4rem); }

    .eg-num { font-size: 2.2rem; top: -0.5em; left: 0; }

    /* 大图预览：手机端自适应屏幕宽度 */
    .eg-lightbox img { max-width: 92vw; max-height: 72vh; }

    .eg-lb-close { top: 14px; right: 14px; width: 42px; height: 42px; }

    .eg-lb-prev, .eg-lb-next { width: 42px; height: 42px; }

    .eg-lb-prev { left: 10px; }

    .eg-lb-next { right: 10px; }

    /* 联系我：左右分栏改上下堆叠，按钮居中 */
    .contact-title { margin-bottom: 40px; }

    .contact-cols { grid-template-columns: 1fr; gap: 40px; }

    .contact-download { justify-content: center; margin-top: 56px; }

    section { padding: 80px 20px; }

    /* 降级为普通滚动时，面板沿用手机 section 内边距 */
    body.hpin-off .h-panel { padding: 80px 20px; }

    .exp-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ========================================
   猫爪光标 + 抓痕画布（仅桌面精确指针，JS 加类启用）
   ======================================== */
/* 隐藏原生指针，由 DOM 猫爪元素代替（保证可见性） */
html.paw-cursor,
html.paw-cursor * {
    cursor: none !important;
}

/* 猫爪光标：跟随鼠标的固定元素 */
.paw-cursor-dot {
    position: fixed;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    background: url("../assets/cursor-paw.svg") no-repeat center / contain;
    pointer-events: none;
    z-index: 4000;
    opacity: 0;
    transform: translate3d(var(--x, -100px), var(--y, -100px), 0) scale(var(--s, 1));
    will-change: transform;
    transition: opacity 0.25s ease;
}

/* 按下时爪子轻微收拢 */
.paw-cursor-dot.pressing { --s: 0.85; }