/* ==========================================================
   site-v3.css — 全站共享层
   PART A：设计令牌 + 站点外壳（导航 / 页脚 / 颗粒 / toast）—— 所有页面
   PART B：旧页面换肤（body.sub-page 作用域）
   整段放在 @layer skin 里；旧样式 style.css / project-v2.css / tech-explore.css 在 @layer legacy，
   skin 天然优先于 legacy，不需要 !important。
   ========================================================== */

:root {
    --ink: #0b0b0c;
    --ink-2: #131315;
    --ink-3: #1b1b1e;
    --paper: #ece8e1;
    --mute: rgba(236, 232, 225, 0.6);
    --faint: rgba(236, 232, 225, 0.34);
    --line: rgba(236, 232, 225, 0.12);
    --line-2: rgba(236, 232, 225, 0.22);
    --signal: #ff5b2e;
    --signal-soft: rgba(255, 91, 46, 0.12);

    --f-sans: 'Space Grotesk', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
    --f-serif: var(--f-sans);   /* 已统一为无衬线，保留变量以兼容旧引用 */
    --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

    --gutter: clamp(20px, 4vw, 56px);
    --max: 1440px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 层级（低 → 高）：reset < legacy（旧样式 + 页面内 <style>）< skin（PART B 换肤）< 不分层（PART A 外壳、B8 组件、home/fx）。
   重置放在最底层，否则它会把旧样式里的 margin / padding 全部清零。
   B8 组件不分层，所以能盖过换肤里权重更高的选择器（作用等同以前的内联 style）。 */
@layer reset, legacy, skin;
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
}
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--f-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
::selection { background: var(--signal); color: var(--ink); }

.dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    flex-shrink: 0;
    animation: v3pulse 2s infinite;
}
@keyframes v3pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 91, 46, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(255, 91, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 91, 46, 0); }
}
.kf {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--signal);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.lbl {
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* 胶片颗粒 */
.grain {
    position: fixed; inset: -50%;
    width: 200%; height: 200%;
    pointer-events: none;
    z-index: 900;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: v3grain 1.2s steps(6) infinite;
}
@keyframes v3grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -3%); }
    60% { transform: translate(-2%, -1%); }
    80% { transform: translate(3%, 3%); }
    100% { transform: translate(0, 0); }
}

/* ==========================================================
   A1. NAV
   ========================================================== */
.nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 18px var(--gutter);
    border-bottom: 1px solid transparent;
    font-family: var(--f-sans);
    line-height: 1.4;
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.5s var(--ease);
}
.nav.is-solid {
    background: rgba(11, 11, 12, 0.76);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line);
    padding-top: 12px; padding-bottom: 12px;
}
.nav a { color: inherit; text-decoration: none; }

.nav__brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; color: var(--paper); }
.nav__mark {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line-2);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.nav__brand:hover .nav__mark { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.nav__name { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; }
.nav__name em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 6px; letter-spacing: 0.1em; }

.nav__links { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); justify-self: end; grid-column: -2 / -1; }
.nav__links a {
    position: relative;
    font-size: 0.84rem;
    white-space: nowrap;
    color: var(--mute);
    transition: color 0.3s;
}
.nav__links a sup {
    font-family: var(--f-mono);
    font-size: 0.6rem;
    color: var(--faint);
    margin-right: 4px;
    vertical-align: 0.6em;
}
.nav__links a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -4px;
    height: 1px; background: var(--signal);
    transform: scaleX(0); transform-origin: right;
    transition: transform 0.45s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--paper); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current] sup { color: var(--signal); }

.nav__toggle { grid-column: -2 / -1; display: none; width: 40px; height: 40px; position: relative; justify-self: end; background: none; border: 0; cursor: pointer; }
.nav__toggle span {
    position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--paper);
    transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 24px; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

/* ==========================================================
   A2. 子页面页脚
   ========================================================== */
.site-foot {
    position: relative;
    z-index: 5;
    max-width: var(--max);
    margin: clamp(80px, 10vw, 140px) auto 0;
    padding: 0 var(--gutter);
    font-family: var(--f-sans);
    color: var(--paper);
    text-align: left;
    opacity: 1;
    width: auto;
}
.site-foot__cta {
    display: block;
    padding: clamp(40px, 6vw, 72px) 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: var(--paper);
}
.site-foot__cta .lbl { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.site-foot__big {
    display: block;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.045em;
    transition: color 0.4s;
}
.site-foot__big em {
    font-style: normal;
    color: var(--signal);
}
.site-foot__big i {
    display: inline-block;
    font-style: normal;
    font-size: 0.5em;
    vertical-align: 0.35em;
    margin-left: 0.2em;
    color: var(--signal);
    transition: transform 0.5s var(--ease);
}
.site-foot__cta:hover .site-foot__big i { transform: translate(0.15em, -0.15em); }
.site-foot__row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 12px 24px;
    padding: 24px 0 36px;
    border-top: 1px solid var(--line);
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}
.site-foot__row a, .site-foot__row button {
    color: var(--faint);
    background: none; border: 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}
.site-foot__row a:hover, .site-foot__row button:hover { color: var(--signal); }

/* toast */
.toast {
    position: fixed; left: 50%; top: 84px;
    z-index: 1100;
    padding: 10px 18px;
    background: var(--paper);
    color: var(--ink);
    border-radius: 99px;
    font-size: 0.84rem;
    font-family: var(--f-sans);
    transform: translate(-50%, -20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.4s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
    .nav { grid-template-columns: 1fr auto; }
}
@media (max-width: 760px) {
    .nav { padding-top: 14px; padding-bottom: 14px; }
    .nav__toggle { display: block; }
    .nav__name em { display: none; }
    .nav__links {
        position: fixed; inset: 0;
        justify-self: stretch; width: 100%;   /* 覆盖桌面端的 justify-self: end，否则菜单宽度会缩到文字宽 */
        z-index: -1;
        flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 6px;
        padding: 0 var(--gutter);
        background: var(--ink);
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.6s var(--ease);
    }
    .nav.is-open .nav__links { clip-path: inset(0 0 0 0); }
    .nav.is-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
    .nav__links a { font-size: 2.2rem; font-weight: 700; color: var(--paper); letter-spacing: -0.02em; }
    .nav__links a sup { font-size: 0.7rem; color: var(--signal); }
    .nav__links a::after { display: none; }
    .site-foot__row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .grain { display: none; }
    .dot { animation: none; }
}

/* ==========================================================
   PART B — 旧页面换肤（只作用于 body.sub-page）
   ========================================================== */
@layer skin {

body.sub-page {
    --accent: var(--signal);
    --bg-color: var(--ink);
    --text-main: var(--paper);
    --text-muted: var(--mute);
    --card-bg: rgba(236, 232, 225, 0.03);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--f-sans);
}

/* 统一字体：除图标外全部换成新字体 */
body.sub-page *:not(i, [class^="ri-"], [class*=" ri-"], code, pre, model-viewer) {
    font-family: var(--f-sans);
}
body.sub-page :is(
    .nav__mark, .nav__status, .nav__links sup, .lbl, .site-foot__row, .site-foot__row *,
    .detail-meta, .back-btn, .project-hero__kicker, .project-hero__tags span, .project-hero__scroll-hint,
    .project-meta__label, .project-section__label, .stat-item__label, .project-footer-nav__dir,
    .timeline-item .year, .award-date, .profile-eyebrow, .resume-kicker, .v3-mono-x,
    .page-index, .v3-mono
) {
    font-family: var(--f-mono);
}

/* 旧的视频背景在子页上不再使用 */

/* 标题统一 */
body.sub-page :is(h1, h2, h3, .detail-title, .project-hero__title, .project-section__heading, .profile-info h1) {
    letter-spacing: -0.02em;
}

/* 通用：图片与卡片直角化 */
body.sub-page :is(
    .detail-media, .video-container, .process-img-box, .parallax-img, .hscroll-gallery__item,
    .img-grid img, .sticky-section__images img, .cert-img, .project-meta, .award-banner,
    .callout-box, .project-video .video-container
) {
    border-radius: 2px;
}

/* ---------- B1. 返回按钮 ---------- */
body.sub-page .back-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0 0 6px;
    margin-bottom: 48px;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
    color: var(--mute);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: none;
}
body.sub-page .back-btn i { display: none; }
body.sub-page .back-btn::before { content: '←'; color: var(--signal); transition: transform 0.4s var(--ease); }
body.sub-page .back-btn:hover { color: var(--paper); border-color: var(--signal); background: none; transform: none; }
body.sub-page .back-btn:hover::before { transform: translateX(-4px); }

/* 琵琶 / 顽石页的固定返回链接：放到导航下方左侧，与新返回按钮同样式 */
body.sub-page .case-close-link {
    position: fixed;
    top: 84px; bottom: auto;
    left: var(--gutter);
    z-index: 950;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    background: none;
    font-family: var(--f-mono);
    font-size: 0;
    color: var(--mute);
    text-decoration: none;
    transition: opacity 0.4s, color 0.3s;
}
body.sub-page .case-close-link::before {
    content: '← Back';
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.sub-page .case-close-link:hover { color: var(--signal); border-color: var(--signal); }
body.sub-page.is-past-hero .case-close-link { opacity: 0; pointer-events: none; }

/* 琵琶 / 顽石页的固定返回链接：放到导航下方左侧，与新返回按钮同样式 */
body.sub-page .case-close-link {
    position: fixed;
    top: 84px; bottom: auto;
    left: var(--gutter);
    z-index: 950;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    background: none;
    font-family: var(--f-mono);
    font-size: 0;
    color: var(--mute);
    text-decoration: none;
    transition: opacity 0.4s, color 0.3s;
}
body.sub-page .case-close-link::before {
    content: '← Back';
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.sub-page .case-close-link:hover { color: var(--signal); border-color: var(--signal); }
body.sub-page.is-past-hero .case-close-link { opacity: 0; pointer-events: none; }

/* ---------- B2. 详情页（detail-container 系） ---------- */
body.sub-page .detail-container:not(.case-shell) {
    max-width: 1120px;
    margin: 0 auto;
    padding: 132px var(--gutter) 0;
    color: var(--paper);
}
body.sub-page .detail-header {
    text-align: left;
    margin-bottom: 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}
body.sub-page .detail-title {
    font-weight: 700;
    font-size: clamp(2.6rem, 6.4vw, 5.6rem);
    line-height: 1.02;
    margin-bottom: 20px;
    color: var(--paper);
}
body.sub-page .detail-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}
body.sub-page .detail-meta::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--signal);
    transform: rotate(45deg);
    flex-shrink: 0;
}
body.sub-page .detail-media { border: 1px solid var(--line); }
body.sub-page .detail-content {
    max-width: 860px;
    color: var(--mute);
    font-size: 1rem;
    line-height: 1.9;
    counter-reset: v3sec;
}
body.sub-page .detail-content > h3,
body.sub-page .detail-content .c-heading {
    counter-increment: v3sec;
    margin: 72px 0 18px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--paper);
}
body.sub-page .detail-content > h3:first-child,
body.sub-page .detail-content > .award-banner + h3 { margin-top: 0; }
body.sub-page .detail-content > h3::before,
body.sub-page .detail-content .c-heading::before {
    content: '◆ ' counter(v3sec, decimal-leading-zero);
    display: block;
    margin-bottom: 12px;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--signal);
}
body.sub-page .detail-content strong { color: var(--paper); font-weight: 500; }
body.sub-page .award-banner {
    display: flex; align-items: center; gap: 12px;
    text-align: left;
    padding: 16px 20px;
    margin-bottom: 64px;
    border: 0;
    border-left: 2px solid var(--signal);
    background: var(--signal-soft);
    color: var(--paper);
    font-weight: 500;
}
body.sub-page .process-card h4 { color: var(--paper); font-weight: 500; font-size: 0.98rem; margin-top: 4px; }
body.sub-page .process-card p { color: var(--faint); font-size: 0.84rem; line-height: 1.7; }
body.sub-page .process-img-box { border: 1px solid var(--line); background: var(--ink-2); }
body.sub-page .video-container { border: 1px solid var(--line); }

/* 详情页里的图片不超出容器（部分页面内联写了固定宽度） */
body.sub-page .detail-content img { max-width: 100%; }

/* ---------- B3. V2 项目页 ---------- */
body.sub-page .project-hero {
    padding: 0 calc(var(--gutter) + 36px) 12vh;
}
body.sub-page .project-hero::before {
    content: '';
    position: absolute;
    inset: 84px var(--gutter) 32px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.7;
    background:
        linear-gradient(var(--paper), var(--paper)) left top / 22px 1px,
        linear-gradient(var(--paper), var(--paper)) left top / 1px 22px,
        linear-gradient(var(--paper), var(--paper)) right top / 22px 1px,
        linear-gradient(var(--paper), var(--paper)) right top / 1px 22px,
        linear-gradient(var(--paper), var(--paper)) left bottom / 22px 1px,
        linear-gradient(var(--paper), var(--paper)) left bottom / 1px 22px,
        linear-gradient(var(--paper), var(--paper)) right bottom / 22px 1px,
        linear-gradient(var(--paper), var(--paper)) right bottom / 1px 22px;
    background-repeat: no-repeat;
}
body.sub-page .project-hero__bg::after {
    background: linear-gradient(90deg, rgba(11,11,12,.7), transparent 76%), linear-gradient(180deg, rgba(11,11,12,.15), transparent 40%, rgba(11,11,12,.8));
}
body.sub-page .project-hero__bg img { filter: none; }
body.sub-page .project-hero__content { max-width: 1000px; }
body.sub-page .project-hero__kicker {
    display: flex; align-items: center; gap: 12px;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: var(--paper);
    margin-bottom: 20px;
}
body.sub-page .project-hero__kicker::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--signal);
    transform: rotate(45deg);
    flex-shrink: 0;
}
body.sub-page .project-hero__title {
    font-weight: 700;
    font-size: clamp(2.8rem, 7.4vw, 7rem);
    line-height: 1;
    margin-bottom: 24px;
    color: var(--paper);
}
body.sub-page .project-hero__subtitle { color: var(--mute); max-width: 560px; font-size: 1rem; }
body.sub-page .project-hero__tags span {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    color: var(--paper);
    border-color: var(--line-2);
    border-radius: 99px;
    background: rgba(11, 11, 12, 0.35);
}
body.sub-page .project-hero__scroll-hint { right: calc(var(--gutter) + 36px); bottom: 52px; color: var(--mute); }
body.sub-page .project-hero__scroll-hint::after { background: linear-gradient(to bottom, var(--signal), transparent); }

body.sub-page .project-meta {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    gap: 0;
    background: none;
    border: 0;
    overflow: visible;
}
body.sub-page .project-meta__item {
    position: relative;
    padding: 24px 20px 24px 0;
    background: none;
    backdrop-filter: none;
    border-top: 1px solid var(--line-2);
}
body.sub-page .project-meta__item::before {
    content: '';
    position: absolute; top: -5px; left: 0;
    width: 9px; height: 9px;
    background: var(--ink);
    border: 1px solid var(--signal);
    transform: rotate(45deg);
}
body.sub-page .project-meta__label { color: var(--faint); letter-spacing: 0.14em; }
body.sub-page .project-meta__value { color: var(--paper); font-weight: 500; font-size: 1rem; }
body.sub-page .project-meta__value--accent { color: var(--signal); }

body.sub-page .project-section { max-width: 1120px; padding: clamp(64px, 8vw, 112px) var(--gutter); }
body.sub-page .project-section + .project-section { border-top-color: var(--line); }
body.sub-page .project-section__label {
    display: flex; align-items: center; gap: 12px;
    color: var(--signal);
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    margin-bottom: 18px;
}
body.sub-page .project-section__label::before { content: '◆'; font-size: 0.8em; }
body.sub-page .project-section__heading {
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--paper);
    margin-bottom: 24px;
}
body.sub-page .project-section__body { color: var(--mute); font-size: 1rem; line-height: 1.9; }

body.sub-page .stat-row {
    max-width: 1120px;
    justify-content: space-between;
    padding: 40px var(--gutter);
    border-color: var(--line);
}
body.sub-page .stat-item { text-align: left; }
body.sub-page .stat-item__number {
    font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--paper);
    margin-bottom: 10px;
}
body.sub-page .stat-item__label { color: var(--faint); letter-spacing: 0.14em; }

body.sub-page .callout-box { border-left: 2px solid var(--signal); background: var(--signal-soft); }
body.sub-page .callout-box__title { color: var(--signal); }
body.sub-page .callout-box__body { color: var(--mute); }

/* ---------- B4. 上一个 / 下一个 ---------- */
body.sub-page .project-footer-nav {
    position: relative;
    top: auto;
    width: auto;
    max-width: var(--max);
    margin: clamp(80px, 10vw, 140px) auto 0;
    padding: 0 var(--gutter);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
body.sub-page .project-footer-nav__link {
    padding: 36px 0;
    border-top: 1px solid var(--line);
    color: var(--paper);
    background: none;
}
body.sub-page .project-footer-nav__link--next { border-left: 0; padding-left: 24px; }
body.sub-page .project-footer-nav__link:not(.project-footer-nav__link--next) { padding-right: 24px; }
body.sub-page .project-footer-nav__dir { color: var(--signal); letter-spacing: 0.14em; font-size: 0.7rem; margin-bottom: 14px; }
body.sub-page .project-footer-nav__title {
    font-size: clamp(1.4rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    transition: color 0.3s, transform 0.5s var(--ease);
}
body.sub-page .project-footer-nav__link:hover .project-footer-nav__title { color: var(--signal); transform: translateX(-6px); }
body.sub-page .project-footer-nav__link--next:hover .project-footer-nav__title { transform: translateX(6px); }

/* 上一个/下一个 紧接页脚时收紧间距 */
body.sub-page .project-footer-nav + .site-foot { margin-top: 0; }
body.sub-page .project-footer-nav + .site-foot .site-foot__cta { border-top-color: var(--line); }

/* 旧 footer 若残留 */
body.sub-page footer:not(.site-foot) { display: none; }

/* ---------- B5. 关于页 ---------- */
body.sub-page .about-container { max-width: 1120px; margin: 0 auto; padding: 140px var(--gutter) 0; color: var(--paper); }
body.sub-page :is(.profile-section, .resume-col, .honors-section) {
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 48px 0 0;
    margin-bottom: 96px;
}
body.sub-page .profile-section { border-top: 0; padding-top: 0; gap: clamp(32px, 6vw, 80px); align-items: flex-end; }
/* 形象照：无边框，四周与底部渐隐融进背景（照片底部已在源图里做了渐进虚化） */
body.sub-page .profile-portrait {
    position: relative;
    flex: 0 0 clamp(280px, 34vw, 420px);
    aspect-ratio: 900 / 1441;
    margin: -40px 0 0 calc(-1 * clamp(0px, 3vw, 40px));
    pointer-events: none;
}
body.sub-page .profile-portrait img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 8%, #000 58%, transparent 97%),
        linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to bottom, transparent 0, #000 8%, #000 58%, transparent 97%),
        linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-composite: intersect;
    opacity: 0;
    transform: scale(1.03);
    animation: portraitIn 1.6s var(--ease) 0.15s forwards;
}
@keyframes portraitIn { to { opacity: 1; transform: none; } }
body.sub-page .profile-portrait__cap {
    position: absolute;
    left: 16%; bottom: 9%;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--f-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}
body.sub-page .profile-section .profile-info { padding-bottom: 6%; }
body.sub-page #intro { scroll-margin-top: 200px; }   /* 「联系 Contact」跳到这里：停在页面最顶，形象照头部不被导航挡住 */
@media (prefers-reduced-motion: reduce) {
    body.sub-page .profile-portrait img { animation: none; opacity: 1; transform: none; }
}
body.sub-page .profile-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--signal); font-weight: 400; letter-spacing: 0.16em; font-size: 0.72rem; margin-bottom: 18px; }
body.sub-page .profile-eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--signal); transform: rotate(45deg); }
body.sub-page .profile-info h1 { font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; line-height: 0.95; margin-bottom: 24px; }
body.sub-page .profile-info h1 span { font-size: 1rem; opacity: 1; color: var(--mute); margin-top: 16px; letter-spacing: 0; font-weight: 400; }
body.sub-page .bio { color: var(--mute); font-size: 1rem; line-height: 1.9; max-width: 640px; }
body.sub-page .bio strong { color: var(--paper); font-weight: 500; }
body.sub-page .skills-tags span {
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    color: var(--paper);
    font-size: 0.78rem;
    padding: 6px 14px;
}
body.sub-page :is(.profile-email, .about-resume-download) {
    border-radius: 99px;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 0.82rem;
}
body.sub-page .profile-email { border-color: var(--line-2); color: var(--paper); }
body.sub-page .about-resume-download { background: var(--paper); border-color: var(--paper); color: var(--ink); }
body.sub-page .about-resume-download:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
body.sub-page .about-container > .line { display: none; }
body.sub-page :is(.resume-col h2, .honors-section h2) {
    display: flex; align-items: baseline; gap: 14px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 40px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
}
body.sub-page :is(.resume-col h2, .honors-section h2) i { color: var(--signal); font-size: 0.7em; }
body.sub-page .timeline-item { border-left: 1px solid var(--line-2); padding-left: 28px; }
body.sub-page .timeline-item::before {
    left: -5px; top: 6px;
    width: 9px; height: 9px;
    border-radius: 0;
    background: var(--ink);
    border: 1px solid var(--signal);
    transform: rotate(45deg);
}
body.sub-page .timeline-item .year { color: var(--signal); font-weight: 400; letter-spacing: 0.08em; font-size: 0.76rem; opacity: 1; }
body.sub-page .timeline-item h3 { color: var(--paper); font-weight: 700; font-size: 1.4rem; }
body.sub-page .exp-list li::before { content: '◆'; font-size: 0.55em; top: 0.55em; color: var(--signal); }
body.sub-page .exp-list li { color: var(--mute); }
body.sub-page .exp-list li strong { color: var(--paper); font-weight: 500; }
body.sub-page .text-awards-list li { border-bottom-color: var(--line); transition: padding 0.45s var(--ease), background 0.3s; }
body.sub-page .text-awards-list li:hover { background: none; padding-left: 14px; border-radius: 0; }
body.sub-page .award-date { color: var(--signal); font-weight: 400; font-size: 0.82rem; }
body.sub-page .award-desc { color: var(--paper); }
body.sub-page .highlight-text { background: var(--signal-soft); color: var(--signal); border-radius: 99px; font-weight: 500; }
body.sub-page .cert-img { border-color: var(--line); background: var(--ink-2); }
body.sub-page .cert-card:hover .cert-img { border-color: var(--signal); }

/* ---------- B7. 技能星系 ---------- */
body.sub-page {
    --tx-cyan: #ece8e1;
    --tx-purple: #ff5b2e;
    --tx-gold: #ff5b2e;
    --tx-panel: rgba(19, 19, 21, 0.78);
    --tx-line: rgba(236, 232, 225, 0.14);
}
body.tx-exploring .overlay-ui { opacity: 0.9; }
@media (max-width: 760px) { body.tx-exploring .overlay-ui { opacity: 1; } }
body.sub-page .overlay-ui { top: 112px; left: calc(var(--gutter) + 28px); max-width: 360px; }
body.sub-page .tu-kicker {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--f-mono);
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 18px;
}
body.sub-page .tu-title {
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--paper);
    margin-bottom: 18px;
}
body.sub-page .tu-title span { color: transparent; -webkit-text-stroke: 1px var(--paper); }
body.sub-page .overlay-desc { color: var(--mute); font-size: 0.88rem; line-height: 1.75; max-width: 320px; }
body.sub-page .tu-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; }
body.sub-page .tu-legend li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: var(--paper);
}
body.sub-page .tu-legend li::before {
    content: ''; width: 7px; height: 7px;
    background: var(--c); transform: rotate(45deg);
}
body.sub-page .instruction {
    margin-top: 22px;
    padding: 0 0 6px;
    border: 0; border-bottom: 1px solid var(--line-2);
    border-radius: 0; background: none;
    font-family: var(--f-mono);
    font-size: 0.68rem; letter-spacing: 0.1em;
    color: var(--mute);
}

/* 取景框四角（全屏页通用） */
.v3-frame { position: fixed; inset: 84px var(--gutter) 24px; z-index: 5; pointer-events: none; }
.v3-frame i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--paper); opacity: 0.55; }
.v3-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.v3-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.v3-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.v3-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* 探索 HUD / 提示 / 弹层 */
body.sub-page .tx-hud { border-radius: 2px; box-shadow: none; }
@media (min-width: 901px) { body.sub-page .tx-hud { top: 104px; right: calc(var(--gutter) + 28px); } }
body.sub-page .tx-hud__fill { background: var(--signal); box-shadow: none; border-radius: 0; }
body.sub-page .tx-hud__bar { border-radius: 0; background: var(--line); }
body.sub-page .tx-hud__dot { border-radius: 0; transform: rotate(45deg); }
body.sub-page :is(.tx-hud__label, .tx-hud__gnum, .tx-hud__count i) { font-family: var(--f-mono); }
body.sub-page :is(.tx-hud__mini, .tx-btn) { border-radius: 99px; }
body.sub-page :is(.tx-hud__mini, .tx-btn):hover { border-color: var(--paper); background: rgba(236, 232, 225, 0.06); color: var(--paper); }
body.sub-page .tx-btn--primary { border-color: var(--paper); background: var(--paper); color: var(--ink); }
body.sub-page .tx-tip { border-radius: 99px; bottom: 34px; }
body.sub-page .tx-tip b { font-family: var(--f-mono); border-radius: 2px; }
body.sub-page .tx-toast { border-radius: 99px; background: rgba(19, 19, 21, 0.9); }
body.sub-page .tx-lockname { color: var(--signal); font-family: var(--f-mono); }
body.sub-page .tx-complete { background: rgba(11, 11, 12, 0.92); }
body.sub-page .tech-project-panel { border-radius: 2px; border-color: var(--line); box-shadow: none; }
body.sub-page .tech-project-card { border-radius: 2px; }
body.sub-page .tech-project-close { border-radius: 0; background: none; }
body.sub-page .tech-project-empty { border-radius: 2px; }
body.sub-page .skill-bar { border-radius: 0; }
@media (max-width: 760px) {
    body.sub-page .overlay-ui { top: 78px; left: 20px; right: 20px; }
    body.sub-page .tu-title { font-size: 1.6rem; margin-bottom: 10px; }
    body.sub-page .overlay-ui::before {
        content: ''; position: fixed; left: 0; right: 0; top: 0; height: 250px; z-index: -1;
        background: linear-gradient(180deg, #0b0b0c 62%, rgba(11,11,12,0));
        pointer-events: none;
    }
    body.sub-page .overlay-desc { display: none; }
    body.sub-page .tu-kicker { margin-bottom: 10px; }
    body.sub-page .instruction { display: none; }
    .v3-frame { inset: 70px 12px 14px; }
        /* 手机：探索进度收成底部一条，不挡标题 */
    body.sub-page .tx-hud { top: auto; bottom: 64px; left: 16px; right: 16px; padding: 10px 14px; }
    body.sub-page .tx-hud :is(.tx-hud__groups, .tx-hud__footer) { display: none; }
    body.sub-page .tx-hud__head { margin-bottom: 8px; }
}
@media (hover: none), (max-width: 760px) {
    body.sub-page .tx-tip { display: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
    body.sub-page .detail-container:not(.case-shell) { padding-top: 104px; }
    body.sub-page .about-container { padding-top: 110px; }
    body.sub-page .profile-section { flex-direction: column; align-items: flex-start; }
    body.sub-page .profile-portrait { flex: none; width: min(86vw, 380px); margin: -30px auto 0; }
    body.sub-page .profile-portrait__cap { display: none; }
    body.sub-page .profile-section, body.sub-page .profile-section .bio { text-align: left; }
    body.sub-page .profile-section .profile-info { position: relative; margin-top: -28%; padding-bottom: 0; }
    body.sub-page .project-hero { padding: 0 32px 10vh; }
    body.sub-page .project-hero::before { inset: 72px 14px 20px; }
    body.sub-page .project-meta { grid-template-columns: 1fr 1fr; }
    body.sub-page .stat-row { justify-content: flex-start; gap: 28px 40px; }
    body.sub-page .project-footer-nav { grid-template-columns: 1fr; }
    body.sub-page .project-footer-nav__link--next { padding-left: 0; text-align: left; border-top: 1px solid var(--line); }
    body.sub-page .case-hero-prometheus { grid-template-columns: minmax(0, 1fr); }
    body.sub-page .case-hero-info { min-width: 0; max-width: 100%; }
    body.sub-page .project-section .parallax-img--full { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
    body.sub-page > .parallax-img--full, body.sub-page main > .parallax-img--full { margin-left: 0; margin-right: 0; }
    body.sub-page .project-hero__scroll-hint { display: none; }
}

} /* @layer skin */

/* ---------- B8. 正文组件（替代页面里的内联 style） ----------
   写项目页正文时直接用这些 class，不要再写 style="…"。
   间距统一 5 档：xs 8 / s 16 / m 24 / l 40 / xl 60                       */
.mt-0 { margin-top: 0; }   .mt-xs { margin-top: 8px; }  .mt-s { margin-top: 16px; }  .mt-m { margin-top: 24px; }  .mt-l { margin-top: 40px; }  .mt-xl { margin-top: 60px; }
.mb-0 { margin-bottom: 0; } .mb-xs { margin-bottom: 8px; } .mb-s { margin-bottom: 16px; } .mb-m { margin-bottom: 24px; } .mb-l { margin-bottom: 40px; } .mb-xl { margin-bottom: 60px; }
.my-s { margin-block: 16px; } .my-m { margin-block: 24px; } .my-l { margin-block: 40px; } .my-xl { margin-block: 60px; }
.mx-auto { margin-inline: auto; }
.pt-0 { padding-top: 0; }
.gap-s { gap: 16px; } .gap-m { gap: 24px; } .gap-l { gap: 40px; }
.ar-1x1 { aspect-ratio: 1 / 1; } .ar-4x3 { aspect-ratio: 4 / 3; } .ar-3x4 { aspect-ratio: 3 / 4; } .ar-16x9 { aspect-ratio: 16 / 9; } .ar-9x16 { aspect-ratio: 9 / 16; }

/* 图片 */
.c-img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 2px; }
.c-img--bare { border: 0; }
.c-img--cover { object-fit: cover; }
.c-img--h250 { height: 250px; }
.c-img--narrow { max-width: min(100%, 350px); margin-inline: auto; }
.c-img--mid { max-width: min(100%, 450px); margin-inline: auto; }
.c-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 2px; }
.c-fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 图注、正文、强调 */
.c-cap { margin-top: 14px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-align: center; color: var(--faint); }
.c-text { color: var(--mute); line-height: 1.8; }
.c-mute { color: var(--faint); }
.c-small { font-size: 0.85rem; }
.c-italic { font-style: italic; }
.c-accent { color: var(--signal); }
.c-subtitle { font-size: 1.5rem; color: var(--mute); }
.c-list { padding-left: 20px; list-style: circle; line-height: 2; color: var(--mute); }
.c-quote { padding: 16px 24px; border-left: 2px solid var(--line-2); font-style: italic; color: var(--mute); }

/* 版式 */
.c-grid { display: grid; gap: 20px; }
.c-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-cols-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.c-row { display: flex; flex-wrap: wrap; gap: 12px; }
.c-divide { padding-top: 32px; border-top: 1px solid var(--line); }
.c-note { padding: 28px 30px; border-left: 2px solid var(--signal); background: var(--signal-soft); }

/* 小标签 */
.c-pill {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--mute);
}
.c-pill--hot { border-color: var(--signal); color: var(--signal); }

/* 个别页面的小变体 */
.c-items-center { align-items: center; }
.c-inline { display: flex; align-items: center; gap: 10px; }
.stat-row--bare { border: 0; padding: 30px 0; }
.full-width-box--bare { border: 0; background: transparent; }

/* 中性提示框（不用橙色强调时） */
.callout-box--plain { border-left-color: var(--line-2); background: rgba(236, 232, 225, 0.03); }
.callout-box--plain .callout-box__title { color: var(--paper); }

/* 忆音修复园：文字型数据块 */
.stat-item--note { max-width: 200px; text-align: left; }
.stat-item--note .stat-item__number { font-size: 1.8rem; }
.stat-item--note .stat-item__label { font-size: 0.75rem; text-transform: none; letter-spacing: 0; }

/* ---------- B9. 项目页补充内容组件 ----------
   c-shots：带编号图注的图组      <div class="c-shots c-shots--3"><figure class="c-shot"><img …><figcaption><b>01</b>说明</figcaption></figure>…</div>
            --1 / --2（默认）/ --3 / --4 列；加 c-shots--43 统一裁成 4:3，c-shots--phone 统一裁成手机竖屏
   c-brief：难题 / 解法 / 结果      <div class="c-brief"><div><b>Challenge · 难题</b><p>…</p></div>…</div>          */
.c-shots { --n: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; margin-block: 32px; }
.c-shots--1 { --n: 1; } .c-shots--3 { --n: 3; } .c-shots--4 { --n: 4; } .c-shots--5 { --n: 5; }
.c-shot { margin: 0; min-width: 0; }
.c-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; background: var(--ink-2); }
.c-shots--43 .c-shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.c-shots--phone .c-shot img { aspect-ratio: 9 / 18; object-fit: cover; }
.c-shot figcaption { margin-top: 12px; font-size: 0.84rem; line-height: 1.65; color: var(--faint); }
.c-shot figcaption b { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; color: var(--signal); }
.c-shot figcaption strong { color: var(--paper); font-weight: 500; }

.c-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 40px; border-block: 1px solid var(--line); }
.c-brief > div { padding: 26px 26px 28px 0; }
.c-brief > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.c-brief b { display: block; margin-bottom: 12px; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.c-brief p { margin: 0; font-size: 0.94rem; line-height: 1.8; color: var(--mute); }

@media (max-width: 900px) { .c-shots--4 { --n: 2; } .c-shots--5 { --n: 3; } }
@media (max-width: 760px) {
    .c-shots--3 { --n: 2; }
    .c-brief { grid-template-columns: 1fr; }
    .c-brief > div { padding: 22px 0; }
    .c-brief > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) { .c-shots:not(.c-shots--phone) { --n: 1; } }

/* ---------- B10. 待补图占位 ----------
   <figure class="c-shot c-shot--todo" data-src="assets/images/xxx.webp">
     <div class="c-ph"><span class="c-ph__lbl">…</span><span class="c-ph__hint">建议内容</span><code class="c-ph__file">xxx.webp</code></div>
     <figcaption>…</figcaption></figure>
   把图片按 data-src 的文件名放进 assets/images，site-v3.js 会自动把占位换成图片，不用改 HTML。
   访客只看到「图片整理中」；本地预览（localhost / 127.0.0.1）或网址加 ?todo 时显示建议内容与文件名。 */
.c-ph {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    aspect-ratio: 16 / 9;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(236, 232, 225, 0.025) 14px 15px), var(--ink-2);
    text-align: center;
}
.c-ph::before, .c-ph::after { content: ''; position: absolute; width: 12px; height: 12px; border: 0 solid var(--line-2); }
.c-ph::before { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.c-ph::after { right: 10px; bottom: 10px; border-right-width: 1px; border-bottom-width: 1px; }
.c-shots--43 .c-ph { aspect-ratio: 4 / 3; }
.c-shots--phone .c-ph { aspect-ratio: 9 / 18; }
.c-ph__lbl { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.c-ph__hint, .c-ph__file { display: none; }
.show-todo .c-ph { border-style: dashed; border-color: rgba(255, 91, 46, 0.45); }
.show-todo .c-ph__hint { display: block; max-width: 26em; font-size: 0.86rem; line-height: 1.6; color: var(--mute); }
.show-todo .c-ph__file { display: block; font-family: var(--f-mono); font-size: 0.66rem; color: var(--signal); word-break: break-all; }
.c-ph-solo { box-sizing: content-box; max-width: 1180px; margin: clamp(60px, 8vw, 120px) auto; padding: 0 var(--gutter); }
.c-ph-solo h2 { margin: 10px 0 14px; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; color: var(--paper); }
.c-ph-solo > p { max-width: 40em; color: var(--mute); line-height: 1.8; }

/* ---------- B11. 统一大图尺寸 ----------
   项目页里的单张大图（.parallax-img、琵琶概念板）统一装进 920px 宽、16:9 的取景框：
   - 图片完整显示（contain），两侧空白用同一张图的模糊放大版填充
   - 超宽图（宽高比 > 2.2）保持原比例
   - 点一下全屏看原图（长图可滚动），Esc 或再点一下关闭
   由 site-v3.js 加 .v3-media（不要和技能页的全屏取景框 .v3-frame 重名） 并写入 --bg，不需要改 HTML。
   手机截图组（腾讯游戏块 / c-shots--phone）统一成同一列宽与 9:19.5 比例。 */
:root { --frame-w: 920px; --shot-max-h: min(72vh, 620px); }
.v3-media {
    position: relative;
    isolation: isolate;
    width: min(var(--frame-w), 100%);
    margin: 48px auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--ink-2);
    cursor: zoom-in;
}
:is(body, main) > .v3-media { width: min(var(--frame-w), calc(100% - 2 * var(--gutter))); }
.v3-media::before {
    content: '';
    position: absolute; inset: -40px;
    z-index: -1;
    background: var(--bg, none) center / cover no-repeat;
    filter: blur(36px) brightness(0.42) saturate(0.8);
}
.v3-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform: none; }
.v3-media.is-wide { aspect-ratio: auto; }
.v3-media.is-wide img { position: static; height: auto; }
.v3-media .parallax-img__caption, .v3-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 40px 20px 16px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }

.v3-viewer {
    position: fixed; inset: 0; z-index: 3000;
    overflow: auto;
    padding: 64px var(--gutter);
    background: rgba(11, 11, 12, 0.96);
    cursor: zoom-out;
    opacity: 0; transition: opacity 0.25s ease;
}
.v3-viewer.is-on { opacity: 1; }
.v3-viewer img { display: block; max-width: min(1400px, 100%); height: auto; margin: 0 auto; }
.v3-viewer__x { position: fixed; top: 18px; right: var(--gutter); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--mute); }

/* 手机截图：所有游戏块和手机截图组用同一列宽 */
.game-block .img-grid, .c-shots--phone { grid-template-columns: repeat(auto-fill, minmax(var(--phone-col, 150px), 1fr)); }
.game-block .img-grid img, .c-shots--phone .c-shot img { aspect-ratio: 9 / 19.5; height: auto; object-fit: cover; }
.c-shots--phone .c-ph { aspect-ratio: 9 / 19.5; }

/* 其他单张大图：限制高度，不再占满一屏多 */
.c-shots--1 .c-shot img { width: auto; max-width: 100%; max-height: var(--shot-max-h); margin-inline: auto; }
.full-width-sketch img { width: auto; max-width: 100%; max-height: var(--shot-max-h); margin-inline: auto; }
.img-grid img { max-height: var(--shot-max-h); }
.c-img--mid, .c-img--narrow { width: auto; max-height: var(--shot-max-h); }

@media (max-width: 760px) {
    .v3-media { margin-block: 32px; }
    :root { --phone-col: 120px; }
}

/* ---------- B12. SEO 辅助 ----------
   .seo-links：<noscript> 里的纯文本链接（scripts/seo.py 生成），只在禁用 JS 时出现
   .nf：404 页 */
.seo-links { position: relative; z-index: 10; padding: 16px var(--gutter); font-size: 0.82rem; line-height: 2; color: var(--mute); }
.seo-links a { color: var(--paper); }
.nf { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 120px var(--gutter) 60px; max-width: 1180px; margin: 0 auto; }
.nf h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1; color: var(--paper); }
.nf p { color: var(--mute); }
.nf a { color: var(--signal); margin-right: 1.5em; }

/* Project-page imagery: stationary composition, opacity-only entrances. */
body.sub-page .reveal,
body.sub-page .reveal-up,
body.sub-page .reveal.is-visible,
body.sub-page .reveal-up.active,
body.sub-page .reveal--scale.is-visible {
    transform: none;
    transition-property: opacity;
    transition-duration: .7s;
}
body.sub-page .project-hero__bg img,
body.sub-page .project-hero:hover .project-hero__bg img,
body.sub-page .parallax-img img {
    transform: none;
    will-change: auto;
}
body.sub-page .project-hero__bg img {
    animation: project-image-fade .9s ease-out both;
    transition: none;
}
@keyframes project-image-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    body.sub-page .project-hero__bg img { animation: none; }
    body.sub-page .reveal, body.sub-page .reveal-up { transition: none; }
}
/* Polished, text-free project hero derivatives. */
body.sub-page .pipa-hero-bg {
    background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.08) 70%), url('../assets/images/pipa_hero_2026.webp') center/cover;
    filter: none;
    transform: none;
    animation: project-image-fade .9s both;
}
body.sub-page .case-hero-atmosphere {
    background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.08) 70%), url('../assets/images/stones_hero_2026.webp') center/cover;
    filter: none;
    transform: none;
    animation: project-image-fade .9s both;
}
@media (prefers-reduced-motion: reduce) {
    body.sub-page .pipa-hero-bg, body.sub-page .case-hero-atmosphere { animation: none; }
}