/* ==========================================================================
   Meta Light Studio 光元影业 — 全站样式
   一个文件管全站。改颜色 / 字体 / 间距，都在下面第一段 :root 里改。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
    /* 底色：不用纯黑。纯黑在 OLED 屏上会和图片脱节 */
    --bg:            #1c1c20;
    --bg-raised:     #24242a;
    --bg-inset:      #17171b;

    /* 文字：带一点暖，比纯白柔和 */
    --fg:            #eeebe5;
    --fg-muted:      #a8a8ae;
    --fg-dim:        #7d7d85;

    /* 描边 */
    --line:          rgba(255, 255, 255, 0.13);
    --line-soft:     rgba(255, 255, 255, 0.075);

    /* 唯一的强调色：偏黄铜的暖色，比科技蓝更像做影像的 */
    --accent:        #cf9d55;
    --accent-soft:   rgba(207, 157, 85, 0.16);

    /* 毛玻璃 */
    --glass-bg:      rgba(38, 38, 44, 0.6);
    --glass-bg-lite: rgba(255, 255, 255, 0.045);
    --glass-border:  rgba(255, 255, 255, 0.13);
    --glass-blur:    blur(24px) saturate(180%);
    --glass-shine:   inset 0 1px 0 rgba(255, 255, 255, 0.11);
    --glass-shadow:  0 18px 48px rgba(0, 0, 0, 0.5);

    /* 圆角：iOS 26 那种偏大的圆角 */
    --r-lg:          26px;
    --r-md:          18px;
    --r-sm:          12px;
    --r-pill:        999px;

    /* 版心与边距 */
    --maxw:          1280px;
    --gut:           clamp(20px, 5vw, 84px);

    /* 缓动 */
    --ease:          cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);

    /* 字体
       标题用高对比衬线（拉丁）+ 宋体（中文），这是全站最重要的一处性格。
       正文用无衬线。数字与标签用等宽，制造编辑感。
       都是系统自带字体，不下载任何文件，国内访问不受影响。 */
    --font-display:  Didot, "Bodoni 72", "Bodoni MT", "Hoefler Text", Georgia,
                     "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", SimSun, serif;
    --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                     "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --font-mono:     "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

::selection { background: var(--accent); color: #1c1c20; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: #35353b; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #46464d; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--fg);
    color: var(--bg);
    border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gut);
    padding-right: var(--gut);
}

.wrap-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding-left: var(--gut);
    padding-right: var(--gut);
}

/* --------------------------------------------------------------------------
   3. 排版
   -------------------------------------------------------------------------- */
.display,
.h-hero, .h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.025em;
}

.h-hero {
    font-size: clamp(40px, 7.4vw, 108px);
    line-height: 0.94;
}

.h1 {
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 1.04;
}

.h2 {
    font-size: clamp(24px, 2.9vw, 40px);
    line-height: 1.12;
}

.h3 {
    font-size: clamp(18px, 1.6vw, 23px);
    line-height: 1.3;
}

/* 小标签：等宽大写字，全站的节奏记号 */
.label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.label-accent { color: var(--accent); }

.lede {
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.7;
    color: var(--fg-muted);
    font-weight: 300;
    max-width: 46ch;
}

.body-text { max-width: 58ch; }
.body-text p {
    font-size: clamp(14.5px, 0.92vw, 16px);
    line-height: 1.85;
    color: var(--fg-muted);
}
.body-text p + p { margin-top: 1.3em; }
.body-text em { color: var(--fg); font-style: italic; }

/* 序号：作品编号那种 */
.ordinal {
    font-family: var(--font-mono);
    font-size: clamp(12px, 1vw, 13px);
    letter-spacing: 0.12em;
    color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   4. 毛玻璃
   -------------------------------------------------------------------------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shine), var(--glass-shadow);
}

/* 浏览器不支持 backdrop-filter 时，退回到不透明底，不会糊成一片 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgba(34, 34, 40, 0.94); }
}

/* --------------------------------------------------------------------------
   5. 悬浮胶囊导航
   -------------------------------------------------------------------------- */
.nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1240px, calc(100% - 28px));
    z-index: 100;
    transition: transform 0.55s var(--ease), opacity 0.4s var(--ease-soft);
}

.nav.is-hidden {
    transform: translateX(-50%) translateY(calc(-100% - 24px));
    opacity: 0;
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 10px 9px 20px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shine), 0 14px 40px rgba(0, 0, 0, 0.45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-bar { background: rgba(34, 34, 40, 0.95); }
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img {
    height: 26px;
    width: auto;
    opacity: 0.94;
    transition: opacity 0.3s var(--ease-soft);
}
.nav-logo:hover img { opacity: 1; }

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 38px);
    list-style: none;
}

.nav-links a {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    position: relative;
    padding: 6px 0;
    transition: color 0.3s var(--ease-soft);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--fg); }

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

.nav-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--glass-bg-lite);
    border: 1px solid var(--line-soft);
}

.nav-lang a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    color: var(--fg-dim);
    transition: all 0.35s var(--ease-soft);
}
.nav-lang a:hover { color: var(--fg); }
.nav-lang a.is-active {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.nav-toggle {
    display: none;
    width: 38px; height: 38px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--glass-bg-lite);
    cursor: pointer;
    position: relative;
}
.nav-toggle span {
    position: absolute;
    left: 11px;
    width: 16px; height: 1.5px;
    background: var(--fg);
    border-radius: 2px;
    transition: transform 0.4s var(--ease), opacity 0.2s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* 手机端下拉面板 */
.nav-sheet {
    display: none;
    margin-top: 10px;
    padding: 22px 24px 26px;
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shine), var(--glass-shadow);
}
.nav-sheet ul { list-style: none; }
.nav-sheet li + li { margin-top: 4px; }
.nav-sheet a {
    display: block;
    padding: 12px 0;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .nav.menu-open .nav-sheet { display: block; }
}

/* --------------------------------------------------------------------------
   6. 首屏
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #2f2f38 0%, var(--bg) 64%);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-media img,
.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(28,28,32,0.5) 0%, rgba(28,28,32,0.08) 38%, rgba(28,28,32,0.94) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: clamp(64px, 11vh, 148px);
    padding-top: 150px;
}

.hero-title {
    /* 不居中。左对齐是全站最强的一处姿态 */
    max-width: 12ch;
}

.hero-sub {
    margin-top: clamp(24px, 2.6vw, 36px);
    max-width: 42ch;
}

.hero-meta {
    margin-top: clamp(40px, 6vw, 76px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
}

/* --------------------------------------------------------------------------
   7. 章节
   -------------------------------------------------------------------------- */
.section { padding: clamp(96px, 14vw, 230px) 0; }
.section-tight { padding: clamp(72px, 9vw, 150px) 0; }
.section-raised { background: var(--bg-raised); }

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: clamp(48px, 7vw, 104px);
}

@media (min-width: 900px) {
    .section-head {
        grid-template-columns: minmax(0, 0.32fr) minmax(0, 2fr);
        align-items: end;
        gap: clamp(32px, 4vw, 72px);
    }
}

/* --------------------------------------------------------------------------
   8. 作品：概览一律 16:9 横幅
   -------------------------------------------------------------------------- */

/* 16:9 框。海报是竖幅时，用同一张图做模糊底，前景完整放进去不裁切；
   本来就是 16:9 的图会正好填满，看不出区别。 */
.frame-wide {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    isolation: isolate;
}

.frame-wide .frame-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(44px) saturate(130%) brightness(0.5);
    transform: scale(1.25);
    z-index: 0;
}

.frame-wide .frame-fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    transition: transform 1.1s var(--ease);
}
.frame-wide:hover .frame-fg { transform: scale(1.03); }

.frame-wide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(28,28,32,0) 60%, rgba(28,28,32,0.5) 100%);
    pointer-events: none;
}

/* 首页主推作品：图占约六成宽，和文字并排，图就不会大得压人 */
.feature {
    display: grid;
    gap: clamp(26px, 3.6vw, 56px);
    align-items: center;
}

@media (min-width: 900px) {
    .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .feature .frame-wide { max-width: 520px; }
}

.feature-body .work-item-name { margin-top: 12px; }
.feature-body .work-item-line { margin: 20px 0 0; max-width: 38ch; }
.feature-body .chip { margin-top: 16px; }
.feature-body .arrow-link { margin-top: clamp(24px, 2.8vw, 34px); }

/* 一部作品 = 图 + 下面一行简短说明 */
.work-item { margin-bottom: clamp(64px, 9vw, 140px); }
.work-item:last-of-type { margin-bottom: 0; }

.work-item-foot {
    display: grid;
    gap: 14px;
    padding-top: clamp(20px, 2.2vw, 30px);
}

@media (min-width: 900px) {
    .work-item-foot {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: baseline;
        gap: clamp(28px, 4vw, 64px);
    }
}

.work-item-name {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    transition: color 0.35s var(--ease-soft);
}
.work-item:hover .work-item-name { color: var(--accent); }
.work-item-name small {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    margin-top: 9px;
}

.work-item-line {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--fg-muted);
    max-width: 44ch;
}

/* 状态角标 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: var(--r-pill);
    background: var(--glass-bg-lite);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    white-space: nowrap;
}
.chip::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
.chip-live { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

/* 箭头链接 */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg);
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.4s var(--ease), color 0.3s;
}
.arrow-link span { display: inline-block; transition: transform 0.45s var(--ease); }
.arrow-link:hover { border-color: var(--accent); color: var(--accent); }
.arrow-link:hover span { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   9. 作品列表页
   -------------------------------------------------------------------------- */
.work-row {
    display: grid;
    gap: 20px;
    padding: clamp(30px, 3.6vw, 52px) 0;
    border-top: 1px solid var(--line);
    align-items: center;
    transition: opacity 0.4s var(--ease-soft);
}
.work-row:last-child { border-bottom: 1px solid var(--line); }

@media (min-width: 900px) {
    .work-row { grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.95fr) minmax(0, 0.85fr) 132px; gap: clamp(26px, 3vw, 44px); }
}

.work-row-thumb {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-raised);
    isolation: isolate;
}
.work-row-thumb .frame-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(24px) saturate(130%) brightness(0.5);
    transform: scale(1.25);
}
.work-row-thumb .frame-fg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain;
}

.work-row:hover .work-row-name { color: var(--accent); }
.work-row-name {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    transition: color 0.35s var(--ease-soft);
}
.work-row-name small {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--fg-dim);
    margin-top: 7px;
    letter-spacing: 0.04em;
}

.work-row-desc { font-size: 14.5px; color: var(--fg-muted); line-height: 1.7; }
.work-row-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

@media (min-width: 900px) {
    .work-row-meta { align-items: flex-end; }
}

/* --------------------------------------------------------------------------
   10. 详情页
   -------------------------------------------------------------------------- */
.detail-top {
    padding-top: clamp(130px, 17vh, 210px);
    padding-bottom: clamp(56px, 7vw, 110px);
}

.detail-top-grid {
    display: grid;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

@media (min-width: 900px) {
    .detail-top-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

/* 详情页用竖幅海报 */
.frame-poster {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    isolation: isolate;
}
.frame-poster .frame-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(40px) saturate(130%) brightness(0.5);
    transform: scale(1.25);
}
.frame-poster .frame-fg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain;
}

.detail-title { margin: 18px 0 22px; }
.detail-title small {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    margin-top: 12px;
}

.detail-grid {
    display: grid;
    gap: clamp(40px, 5vw, 80px);
}
@media (min-width: 980px) {
    .detail-grid { grid-template-columns: 300px minmax(0, 1fr); }
}

.detail-aside { display: flex; flex-direction: column; gap: 26px; }
.detail-aside > div { display: flex; flex-direction: column; gap: 7px; }
@media (min-width: 980px) {
    .detail-aside { position: sticky; top: 110px; align-self: start; }
}

/* 玻璃面板 */
.panel {
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--r-lg);
    background: var(--glass-bg-lite);
    border: 1px solid var(--line-soft);
    box-shadow: var(--glass-shine);
}

/* 横向滑动图廊：原生 scroll-snap，不依赖任何 JS 库 */
.rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut);
    scroll-behavior: smooth;
    padding-bottom: 14px;
    scrollbar-width: thin;
    /* 让第一张与版心左对齐，最后一张右边留白 */
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    padding-left: var(--gut);
    padding-right: var(--gut);
}
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: #2e2e33; }

.rail figure {
    flex: 0 0 min(84%, 680px);
    scroll-snap-align: start;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-raised);
    aspect-ratio: 16 / 9;
}
.rail figure img { width: 100%; height: 100%; object-fit: cover; }

.rail-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

/* 视频容器 */
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line-soft);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 原声带条 */
.soundtrack {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 26px;
    border-radius: var(--r-md);
    background: var(--glass-bg-lite);
    border: 1px solid var(--line-soft);
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.soundtrack:hover { border-color: var(--accent-soft); background: var(--accent-soft); }
.soundtrack-note { font-size: 20px; color: var(--accent); line-height: 1; }
.soundtrack-txt { flex: 1; font-size: 15px; }
.soundtrack-arrow { color: var(--fg-dim); transition: transform 0.4s var(--ease); }
.soundtrack:hover .soundtrack-arrow { transform: translateX(6px); color: var(--accent); }

/* 制作人员表 */
.credits {
    display: grid;
    gap: 30px 44px;
    list-style: none;
}
@media (min-width: 700px)  { .credits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .credits { grid-template-columns: repeat(3, 1fr); } }

.credits .role {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line-soft);
}
.credits .name { display: block; font-size: 15px; color: var(--fg); }
.credits .name + .name { margin-top: 5px; }

/* 上一部 / 下一部 */
.pager {
    display: grid;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .pager { grid-template-columns: 1fr 1fr; } }

.pager a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(30px, 4vw, 54px) var(--gut);
    background: var(--bg);
    transition: background 0.4s var(--ease-soft);
}
.pager a:hover { background: var(--bg-raised); }
.pager .pager-next { text-align: right; align-items: flex-end; }
.pager .pager-name {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 34px);
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   11. 奖项表
   -------------------------------------------------------------------------- */
.awards { width: 100%; border-collapse: collapse; }
.awards caption { display: none; }

.awards tr { border-bottom: 1px solid var(--line-soft); }
.awards tr:first-child { border-top: 1px solid var(--line); }

.awards td {
    padding: 20px 18px 20px 0;
    vertical-align: top;
    font-size: 15px;
}
.awards td:first-child {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    width: 92px;
    white-space: nowrap;
    padding-top: 23px;
}
.awards td:nth-child(2) { color: var(--fg); }
.awards td:last-child {
    color: var(--fg-muted);
    text-align: right;
    padding-right: 0;
    font-size: 14px;
}

@media (max-width: 680px) {
    .awards, .awards tbody, .awards tr, .awards td { display: block; width: 100%; }
    .awards tr { padding: 18px 0; }
    .awards td { padding: 0; }
    .awards td:first-child { width: auto; padding-top: 0; margin-bottom: 7px; }
    .awards td:last-child { text-align: left; margin-top: 5px; }
}

/* --------------------------------------------------------------------------
   12. 团队
   -------------------------------------------------------------------------- */
.people {
    display: grid;
    gap: clamp(18px, 2.2vw, 30px);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .people { grid-template-columns: repeat(4, 1fr); } }

.person img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--bg-raised);
    transition: transform 0.7s var(--ease);
}
.person:hover img { transform: scale(1.015); }
/* 错层：第 2、4 个人下沉，打破整齐的一排 */
@media (min-width: 860px) {
    .person:nth-child(even) { margin-top: 56px; }
}
.person h3 { font-size: 16px; font-weight: 500; margin-top: 16px; letter-spacing: 0; }
.person p { font-size: 13px; color: var(--fg-dim); margin-top: 5px; line-height: 1.5; }

/* 数字 */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(26px, 3vw, 44px);
    margin-top: clamp(44px, 5vw, 70px);
}
.stat { border-top: 1px solid var(--line); padding-top: 20px; }
.stat b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(38px, 4.4vw, 62px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
}
.stat span {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   13. 联系
   -------------------------------------------------------------------------- */
.mail-link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(24px, 4.2vw, 62px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.5s var(--ease), color 0.4s;
    word-break: break-word;
}
.mail-link:hover { color: var(--accent); border-color: var(--accent); }

.qr-set {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(22px, 3vw, 44px);
    margin-top: clamp(44px, 5vw, 72px);
}
.qr {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--glass-bg-lite);
    border: 1px solid var(--line-soft);
}
.qr img {
    width: 92px; height: 92px;
    border-radius: var(--r-sm);
    background: #fff;
    padding: 6px;
    object-fit: contain;
}
.qr b { display: block; font-size: 14.5px; font-weight: 500; }
.qr span { display: block; font-size: 12.5px; color: var(--fg-dim); margin-top: 4px; }

.cities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: clamp(44px, 5vw, 72px);
    padding-top: clamp(30px, 3vw, 44px);
    border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .cities { grid-template-columns: repeat(4, 1fr); } }
.city b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.city span { display: block; font-size: 13px; color: var(--fg-dim); margin-top: 7px; }

/* --------------------------------------------------------------------------
   14. 页脚
   -------------------------------------------------------------------------- */
.footer {
    border-top: 1px solid var(--line);
    padding: clamp(40px, 5vw, 70px) 0 clamp(30px, 4vw, 48px);
    background: var(--bg-inset);
}
.footer-grid {
    display: grid;
    gap: 34px;
}
@media (min-width: 860px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; }
}
.footer h4 {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 16px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: 14px; color: var(--fg-muted); transition: color 0.3s; }
.footer ul a:hover { color: var(--fg); }
.footer-logo img { height: 30px; width: auto; opacity: 0.8; }
.footer-legal {
    margin-top: clamp(38px, 5vw, 60px);
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    justify-content: space-between;
    font-size: 12px;
    color: var(--fg-dim);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   15. 动效
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* 自定义光标：只在有精确指针的设备上出现 */
.cursor {
    position: fixed;
    top: 0; left: 0;
    width: 86px; height: 86px;
    margin: -43px 0 0 -43px;
    border-radius: 50%;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg);
    pointer-events: none;
    z-index: 90;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}
.cursor.is-on { opacity: 1; transform: scale(1); }

@media (hover: none), (pointer: coarse) {
    .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .cursor { display: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* 加载遮罩 */
.boot {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.boot.is-done { opacity: 0; visibility: hidden; }
.boot-mark {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fg-dim);
}