/* FictionFarm — 水位线
   --depth 由 site.js 按滚动位置写入：0 = 水面，1 = 湖底。关于页固定为 1。
   字体：League Gothic（标题，像片头字幕）· Jost（正文与导航）· Courier Prime（影片规格，剧本字体） */

@font-face { font-family: 'League Gothic'; src: url(/assets/fonts/league-gothic-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Jost'; src: url(/assets/fonts/jost-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Jost'; src: url(/assets/fonts/jost-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: 'Courier Prime'; src: url(/assets/fonts/courier-prime-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap }

:root {
  --depth: 0;
  --surface: #e4e6e3;
  --mid: #34504f;
  --floor: #0b1415;
  --bg: color-mix(in oklab, color-mix(in oklab, var(--surface), var(--mid) calc(clamp(0, var(--depth) * 1.8, 1) * 100%)), var(--floor) calc(clamp(0, (var(--depth) - .55) * 2.2, 1) * 100%));
  --ink: color-mix(in oklab, #161c1b, #e3e7e4 calc(clamp(0, (var(--depth) - .3) * 4, 1) * 100%));
  --dim: color-mix(in oklab, var(--ink) 60%, var(--bg));
  --rule: color-mix(in oklab, var(--ink) 22%, transparent);
  --display: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Jost', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --zh: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  --gutter: 80px;
  --side: 40px;
  --line-y: 42svh;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--bg); -webkit-text-size-adjust: 100% }
body { background: var(--bg); color: var(--ink); font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
a { color: inherit; text-decoration: none }
img, video { display: block; width: 100%; height: auto }
[lang='zh-Hans'], .zh { font-family: var(--zh) }
.mono { font: 14px/1.6 var(--mono); color: var(--dim) }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .012em }
::selection { background: var(--ink); color: var(--bg) }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px }

.skip { position: absolute; left: -9999px }
.skip:focus { left: var(--gutter); top: 60px; z-index: 20; background: var(--bg); padding: 6px 10px }
.preview-flag { position: fixed; right: var(--side); bottom: 18px; z-index: 6; padding: 3px 9px; border: 1px solid var(--rule); background: var(--bg); font-size: 12px }

/* ---------- 顶部导航与水尺 ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: 20px var(--side) 14px var(--gutter); background: var(--bg) }
.top nav { display: flex; gap: 30px; font-size: 15px; line-height: 22px; letter-spacing: .02em }
.top nav a { position: relative; color: var(--dim); transition: color .3s }
.top nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1) }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink) }
.top nav a:hover::after, .top nav a[aria-current]::after { transform: scaleX(1) }

.gauge { position: fixed; left: 0; top: 0; bottom: 0; width: 52px; z-index: 6; pointer-events: none }
.gauge::before { content: ''; position: absolute; inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 12px) 34px 0 / 10px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 60px) 26px 0 / 18px 100% no-repeat }
.gauge b { position: absolute; left: 18px; top: 50%; width: 30px; height: 1px; background: var(--ink) }
.gauge .reading { position: absolute; left: 6px; top: calc(50% + 10px); writing-mode: vertical-rl; font: 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink) }

/* ---------- 首页：水面以上（团体与点阵网络）/ 水位线 / 水下 ---------- */
.surface { min-height: var(--line-y); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: stretch; padding: 92px var(--side) 0 var(--gutter) }
.intro { align-self: end; padding-bottom: 30px }
.surface h1 { font: 400 clamp(60px, 7.4vw, 120px)/.9 var(--display); text-transform: uppercase; letter-spacing: .012em }
.surface p { margin-top: 22px; max-width: 30em; font-size: 19px; line-height: 1.45; color: var(--dim) }
.surface p.zh { margin-top: 8px; font-size: 15px; line-height: 1.9 }
.waterline { height: 1px; background: var(--ink); margin-left: 52px }
.under { margin-left: 52px; background: var(--mid) }
.under video, .under img { width: 100%; height: auto }

/* 点阵网络 */
.field { position: relative; min-height: 300px; color: var(--ink) }
.field svg { position: absolute; inset: 0; overflow: visible }
.field .grain { fill: var(--ink); opacity: .22 }
.field .edges line { stroke: var(--ink); stroke-width: 1; opacity: .28; transition: opacity .3s }
.field[data-focus] .edges line { opacity: .1 }
.field .edges line.lit { opacity: .9 }
.field .threads line { stroke: var(--ink); stroke-width: 1; fill: none; transition: opacity .3s }
.field .threads .time { stroke-dasharray: 1 5; opacity: .45 }
.field .threads .place { stroke-dasharray: 2 6; opacity: .2 }
.field[data-focus] .threads line { opacity: .08 }
.field .threads line.lit { opacity: .7 }
.field .node { cursor: pointer; outline: none }
.field .node .hit { fill: transparent }
.field .node .dot { fill: var(--ink); transition: r .3s }
.field .node.member .dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4 }
.field .node text { font: 12px/1 var(--mono); fill: var(--ink) }
.field .node.member .label { font: 13px/1 var(--sans); font-weight: 500 }
.field .node.work .label { fill: var(--dim); font-size: 11px }
.field .node .name { opacity: 0; transition: opacity .3s; font-family: var(--sans); font-size: 13px }
.field .node.member .name { opacity: .7; font-family: var(--zh); font-size: 12px }
.field .node:hover .name, .field .node:focus-visible .name { opacity: 1 }
.field .node:hover .dot, .field .node:focus-visible .dot { r: 5 }

/* 首页的作品清单 */
.index { padding: 16vh var(--side) 4vh var(--gutter) }
.index h2, .works-head h1 { font: 400 clamp(48px, 5vw, 72px)/.95 var(--display); text-transform: uppercase; letter-spacing: .012em; margin-bottom: 30px }
.index h2 .mono { font-size: 14px; vertical-align: top; margin-left: 6px }
.index ol { list-style: none; max-width: 1100px }
.index li a { display: grid; grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); column-gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule) }
.index li:last-child a { border-bottom: 1px solid var(--rule) }
.index li .n { font: 400 28px/1.05 var(--display); text-transform: uppercase; letter-spacing: .012em }
.index li .zh { font-size: 15px; color: var(--dim) }
.index li a:hover .n { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px }
.index .descend { padding: 12vh 0 12vh }

/* 作品页（/works/） */
.works-head { padding: 22vh var(--side) 0 var(--gutter) }
.works-head h1 { font-size: clamp(64px, 9vw, 140px); margin: 10px 0 14px }

/* 作品像沉积层：越往下越早 */
.strata { padding: 24vh var(--side) 22vh var(--gutter); display: grid; gap: 28vh }
.stratum { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end }
.stratum::before { content: ''; position: absolute; left: -28px; right: 0; top: -38px; height: 1px; background: var(--rule) }
.stratum .y { position: absolute; left: -28px; top: -64px }
.stratum figure { grid-column: 1 / 8; grid-row: 1; position: relative; overflow: hidden; background: var(--rule) }
.stratum figure img { transition: transform 2.2s cubic-bezier(.2, .7, .2, 1) }
.stratum figure video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.2s cubic-bezier(.2, .7, .2, 1), opacity .8s }
.stratum figure video { opacity: 0 }
.stratum.playing figure video { opacity: 1 }
.stratum:hover figure img, .stratum:hover figure video { transform: scale(1.025) }
.stratum .t { grid-column: 9 / 13; grid-row: 1 }
.stratum:nth-child(even) figure { grid-column: 6 / 13 }
.stratum:nth-child(even) .t { grid-column: 1 / 5 }
.t h2 { font: 400 clamp(40px, 3.9vw, 56px)/.95 var(--display); text-transform: uppercase; letter-spacing: .012em; text-wrap: balance }
.t .zh { font-size: 16px; letter-spacing: .12em; margin: 10px 0 0 }
.t .mono { margin-top: 16px }

.descend { display: grid; gap: 8px; padding: 6vh var(--side) 18vh var(--gutter) }
.descend span:last-child { font: 400 40px/1 var(--display); text-transform: uppercase; letter-spacing: .012em }
.descend:hover span:last-child { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px }

/* ---------- 关于（湖底） ---------- */
.about { padding: 22vh var(--side) 20vh var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px }
.about > * { grid-column: 1 / 11 }
.about h1 { font: 400 clamp(60px, 7.4vw, 112px)/.9 var(--display); text-transform: uppercase; letter-spacing: .012em }
.about h1 span { display: block; font: 400 15px/1 var(--zh); letter-spacing: .5em; margin: 14px 0 0 2px; text-transform: none }
.about .bio { grid-column: 1 / 8; display: grid; gap: 26px; margin: 9vh 0 14vh }
.about .bio .en { font-size: 18px; line-height: 1.7 }
.about .bio .zh { font-size: 15px; line-height: 2.05; color: var(--dim) }
.about h2 { font: 400 44px/1 var(--display); text-transform: uppercase; letter-spacing: .012em; color: var(--ink); margin-bottom: 26px }
.about h2 .mono { font-size: 14px; vertical-align: top; margin-left: 6px }
.member { padding-top: 34px; border-top: 1px solid var(--rule); margin-bottom: 14vh }
.member h3 { font: 400 clamp(40px, 4vw, 56px)/.95 var(--display); text-transform: uppercase; letter-spacing: .012em }
.member h3 span { display: block; font: 400 15px/1 var(--zh); letter-spacing: .2em; margin-top: 12px; text-transform: none }
.member .bio { margin: 5vh 0 8vh }
.member h4 { font-weight: 400; margin-bottom: 14px }
.cv { list-style: none }
.cv li { display: grid; grid-template-columns: 90px 1fr 1fr; column-gap: 24px; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6 }
.cv li .zh { font-size: 14px; color: var(--dim); line-height: 1.75 }
.contact .mail { display: inline-block; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: .01em }
.contact a.mail:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px }
.contact .pending { color: var(--dim); font-size: 20px }
.contact .links { display: flex; gap: 22px; margin-top: 18px }
.lost h1 { margin: 10px 0 30px }

.floor { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; padding: 26px var(--side) 30px var(--gutter); border-top: 1px solid var(--rule); font-size: 13px }

/* ---------- 首页：一屏底图 + 白色点阵 + 白字，不往下滚 ---------- */
body[data-page='home'] { overflow: hidden; height: 100svh; background: #0c0c0d }
body[data-page='home'] .gauge, body[data-page='home'] .floor { display: none }
body[data-page='home'] .top { background: transparent; padding-left: var(--side) }
body[data-page='home'] .top nav a { color: rgba(255, 255, 255, .72) }
body[data-page='home'] .top nav a:hover, body[data-page='home'] .top nav a[aria-current] { color: #fff }
body[data-page='home'] .top nav a::after { background: #fff; transition: transform 1.2s cubic-bezier(.45, 0, .2, 1) }
body[data-page='home'] .preview-flag { top: 22px; bottom: auto; background: transparent; color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .3) }
.home { position: relative; height: 100svh; overflow: hidden; color: #fff; background: #0b1415 }
.home .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0 }
.home::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 14, 18, .72), rgba(8, 14, 18, .3) 55%, rgba(8, 14, 18, .42)) }
.home canvas.farm { position: absolute; inset: 0; z-index: 2; touch-action: manipulation }
.home .intro { position: absolute; left: var(--side); bottom: 7vh; z-index: 3; pointer-events: none; max-width: min(640px, 80vw) }
.home h1 { font: 400 clamp(76px, 11vw, 176px)/.86 var(--display); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 1px 30px rgba(0, 0, 0, .25) }
.home .sub { margin-top: 18px; font: 400 18px/1.4 var(--zh); letter-spacing: .5em }
.home .sub span { font-family: var(--sans); letter-spacing: .04em; opacity: .75 }
.home .line { margin-top: 14px; font-size: 20px; line-height: 1.5 }
.home .line.zh { letter-spacing: .12em }
.home .line.en { margin-top: 2px; font-size: 17px; opacity: .78 }
.home .farm-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.home .farm-list a:focus { position: fixed; left: var(--side); top: 60px; z-index: 9; width: auto; height: auto; clip-path: none; background: #000; color: #fff; padding: 6px 10px }
.farm-tip { position: absolute; left: 0; top: 0; z-index: 4; display: grid; gap: 3px; pointer-events: none; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); max-width: 340px; transition: opacity .2s }
.farm-tip .n { font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: .015em }
.farm-tip .zh { font: 400 14px/1.4 var(--zh); letter-spacing: .14em; opacity: .9 }
.farm-tip .y { font: 12px/1.4 var(--mono); opacity: .7; margin-top: 2px }

/* ---------- 左上角：FICTIONFARM 和紧跟的目录 ---------- */
.top nav { align-items: baseline }
.top nav a.brand { font: 400 24px/1 var(--display); display: inline-block; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-right: 6px }
.top nav a.brand::after { display: none }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* ---------- 首页：视频实时画成的网点，铺满一屏 ---------- */
.home.live { position: relative; height: 100svh; overflow: hidden; background: #0c0c0d }
.home.live .live-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none }
.home.live .live-art { position: absolute; inset: 0; overflow: hidden; background: inherit }
.home.live .live-art canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block }
body[data-page='home'] .top nav a.brand { color: #fff }
body[data-page='home'] .preview-flag { display: none }

/* 首页序列：视频放在页面里但不显示，只用来取画面 */
.home.live .seq-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none }
.home.live .live-art { background: #0c0c0d }
/* 画面在开场结束后才慢慢淡入 */
.home.live .live-art canvas { opacity: 0; transition: opacity 7s ease-in-out }
.home.live .live-art.playing canvas { opacity: 1 }
/* 暗角 */
.home.live .live-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%) }

/* ---------- 开场：字符拼成 FICTIONFARM，再移到左上角 ---------- */
.intro-overlay { display: none }
html.intro .intro-overlay { display: block; position: fixed; inset: 0; z-index: 30; background: #0c0c0d }
.intro-overlay canvas { position: absolute; inset: 0 }
.intro-word { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 400 120px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: #fff; white-space: nowrap; opacity: 0 }
html.intro .top nav a { opacity: 0 }
html.intro-done .top nav a { animation: nav-in 2.75s ease-in-out both }
html.intro-done .top nav a.brand { animation: none }
/* works / about / contact 一起淡入（不再依次） */
html.intro-done .top nav a:not(.brand) { animation-delay: .5s }
@keyframes nav-in { from { opacity: 0 } to { opacity: 1 } }

/* 正下方中间：直接浮在画面上，画面显出后再慢慢浮现 */
/* 底部正中的 FICTIONFARM © 年份：每一页同一个位置。页面不用往下滑时一直都在；要往下滑的（works 列表、作品页等），
   滑到底才出现（site.js 加减 colophon-away，用 filter 淡入淡出）。第一次打开放开场时，等画面显出后再慢慢浮现（opacity 动画） */
.home .colophon, body[data-page='work'] .colophon { position: fixed; left: 50vw; bottom: max(22px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 5; margin: 0; padding: 0; font: 400 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .78); text-shadow: 0 0 12px rgba(0, 0, 0, .6); pointer-events: none; transition: filter .7s ease }
html.colophon-away .colophon { filter: opacity(0) }
html.intro .home .colophon, html.intro-done .home .live-art:not(.playing) ~ .colophon { opacity: 0 }
html.intro-done .home .live-art.playing ~ .colophon { animation: colophon-in 4.5s ease 7s both }
@keyframes colophon-in { from { opacity: 0 } to { opacity: 1 } }
/* 电脑上首页的品牌名和目录放大一些（手机保持原样） */
@media (min-width: 761px) {
  body[data-page='home'] .top, body[data-page='work'] .top { padding-top: 28px }
  body[data-page='home'] .top nav, body[data-page='work'] .top nav { gap: clamp(34px, 2.6vw, 48px); font-size: clamp(18px, 1.3vw, 22px); line-height: 1.3 }
  body[data-page='home'] .top nav a.brand, body[data-page='work'] .top nav a.brand { font-size: clamp(30px, 2.15vw, 40px); margin-right: 10px }
}
/* 右下角：声音开关，和 © 同样的字、颜色、基线，一起浮现（按钮多出的上下 6px 只为好点） */
.home .sound-toggle { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) - 6px); z-index: 3; margin: 0; padding: 6px 0 6px 8px; -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer; font: 400 11px/1 var(--mono); font-synthesis: none; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-shadow: 0 0 12px rgba(0, 0, 0, .6); -webkit-tap-highlight-color: transparent; transition: color .4s }
/* 声音开关和 © 一样：只有放开场的那次等画面显出后再浮现，其余时候一直在 */
html.intro .home .sound-toggle, html.intro-done .home .live-art:not(.playing) ~ .sound-toggle { opacity: 0; visibility: hidden }
html.intro-done .home .sound-toggle { transition: opacity 4.5s ease 7s, visibility 0s linear 7s, color .4s }
.home .sound-toggle:hover { color: #fff }
/* 音乐被浏览器拦着时（电脑上没点过页面）：慢慢呼吸三次，提示点一下就有声音，之后停在平常的颜色 */
.home .sound-toggle.waiting { animation: sound-breathe 3.6s ease-in-out 3 }
.home .sound-toggle.waiting:hover { animation: none; color: #fff }
@keyframes sound-breathe { 0%, 100% { color: rgba(255, 255, 255, .78) } 35% { color: rgba(255, 255, 255, .3) } 70% { color: #fff } }
@media (prefers-reduced-motion: reduce) { .home .sound-toggle.waiting { animation: none } }
.home .sound-toggle:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 2px }

/* ---------- 首页叠层：works / about / contact 叠在字符画面上 ---------- */
.home.live .live-art { transition: opacity 1.2s ease }
html.layer-open .home.live .live-art { opacity: .3 }
/* 层可以上下滚；顶部渐隐，滚上去的字不压在目录上 */
.layer { position: fixed; inset: 0; z-index: 4; overflow-y: auto; overscroll-behavior: contain; padding: 120px var(--side) 14vh; color: #fff; background: rgba(12, 12, 13, .45); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 104px, #000 calc(100% - 84px), transparent calc(100% - 30px)); mask-image: linear-gradient(to bottom, transparent 0, #000 104px, #000 calc(100% - 84px), transparent calc(100% - 30px)); opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s }
.layer::-webkit-scrollbar { width: 6px }
.layer::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px }
html.layer-open .layer { opacity: 1; visibility: visible; transition: opacity .9s ease }
.home .sound-toggle { z-index: 6 }
.panel { max-width: 1080px; pointer-events: auto }
.panel:not([hidden]) { animation: panel-in .9s ease both }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.panel .layer-title { font: 400 clamp(56px, 7vw, 112px)/.9 var(--display); text-transform: uppercase; letter-spacing: .012em; margin: 0 0 7vh; outline: none }
.panel a { color: inherit }
/* works：一行一件，年份 | 标题 | 形式与时长；电脑上列表让出右栏放原图预览 */
.panel-works .work-list { max-width: min(56vw, 900px) }
/* 预览放在层外面（层里的进场动画会让 fixed 变成相对层定位），只在 works 打开时出现 */
/* 右栏：在列表右边的空白区里居中；上面是图（两层叠化），下面是片尾字幕和放映入围 */
.work-preview { position: fixed; z-index: 4; left: calc(var(--side) + min(56vw, 900px) + 48px); right: var(--side); top: var(--preview-top, max(108px, 14vh)); pointer-events: none; display: none; flex-direction: column; align-items: center; gap: 30px }
html.layer-open[data-layer='works'] .work-preview { display: flex }
/* 图的上沿对齐列表第一条线（位置由 layers.js 算），图从上往下挂，换图时上沿不动 */
.work-preview .stage { position: relative; width: 100%; height: var(--stage-h, 46vh); flex: none }
.work-preview figure { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; opacity: 0; transition: opacity .5s ease }
.work-preview figure.on { opacity: 1 }
.work-preview img, .work-preview video { display: block; max-width: 100%; max-height: calc(100% - 30px); width: auto; height: auto; min-height: 0; object-fit: contain }
.work-preview figure.on { z-index: 1 }
.work-preview .count { margin: 0; min-height: 11px; display: flex; align-items: center; gap: 14px; font: 400 11px/1 var(--mono); letter-spacing: .22em; color: rgba(255, 255, 255, .55) }
.work-preview .count button { pointer-events: auto; background: none; border: 0; padding: 6px 8px; margin: -6px 0; color: rgba(255, 255, 255, .55); font: 400 14px/1 var(--mono); cursor: pointer; transition: color .3s }
.work-preview .count button:hover { color: #fff }
.work-preview figure:not(.on) .count button { pointer-events: none }
.work-info { width: 100%; max-width: 560px; height: 26vh; overflow: hidden; opacity: 0; transition: opacity .45s ease }
.work-info.on { opacity: 1 }
.work-info .roll { display: grid; row-gap: 8px; margin: 0 }
.work-info .cr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px }
.work-info dt { text-align: right; font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5) }
.work-info dd { margin: 0; font: 400 13px/1.5 var(--sans); color: rgba(255, 255, 255, .86) }
.work-info .sel-head { margin: 24px 0 10px; text-align: center; font: 400 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5) }
.work-info .selections { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.work-info .selections li { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; font: 400 13px/1.45 var(--sans); color: rgba(255, 255, 255, .86) }
.work-info .selections .sy { text-align: right; font: 400 11px/1.6 var(--mono); letter-spacing: .1em; color: rgba(255, 255, 255, .5) }
.work-info .selections small { display: block; margin-top: 2px; font: 400 10.5px/1.5 var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .5) }
/* 双列：内容按列排，每条不拆开；职务在上、名字在下，左对齐 */
.work-info.two { columns: 2; column-gap: 36px }
.work-info.two .roll { display: block }
.work-info.two .cr, .work-info.two .selections li { display: block; break-inside: avoid; margin-bottom: 10px }
.work-info.two dt, .work-info.two .selections .sy { text-align: left }
.work-info.two .sel-head { text-align: left; break-after: avoid; margin-top: 4px }
.work-info.two .selections { display: block }
@media (max-width: 1000px), (hover: none) {
  .work-preview { display: none }
  .panel-works .work-list { max-width: none }
}
.work-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .16) }
.work-list a { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 28px; align-items: baseline; padding: 20px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .5s ease }
.work-list a:hover, .work-list a:focus-visible { color: #fff; outline: none }
.work-list .y, .work-list .f { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: rgba(255, 255, 255, .55) }
/* 标题：中文在上（小字），英文在下（大字），左对齐 */
.work-list .t { display: flex; flex-direction: column; align-items: flex-start; gap: 9px }
.work-list .t .zh { font: 400 15px/1.2 var(--zh); letter-spacing: .2em; color: rgba(255, 255, 255, .62) }
/* 正式版还没放作品：一行「施工中 / Under construction」，排版和作品行一样，不是链接 */
.work-list li.wip { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 28px; align-items: baseline; padding: 20px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78) }
.work-list .t .en { font: 400 clamp(26px, 2.5vw, 40px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .015em }
.work-list .f { text-align: right; max-width: 27em; justify-self: end }
/* about */
.panel-about .bio { max-width: 660px; display: grid; gap: 22px; margin: 0 0 12vh }
.panel-about .bio .en { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .88) }
.panel-about .bio .zh { font-size: 15px; line-height: 2.05; color: rgba(255, 255, 255, .66) }
.panel-about .bio p + p { margin-top: 1em }
.panel-about .layer-sub { font: 400 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 4vh; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16) }
.panel-about .member { border: 0; padding: 0; margin: 0 0 10vh }
.panel-about .member .name { font: 400 clamp(36px, 3.6vw, 56px)/.95 var(--display); text-transform: uppercase; letter-spacing: .012em; margin: 0 0 5vh }
/* 名字这一块和英文名一样宽：中文名在左，邮件、Instagram 图标在右，右边对齐英文名最后一个字母 */
.panel-about .member .name { width: fit-content; max-width: 100% }
.panel-about .member .name .sub { display: flex; align-items: center; gap: 26px; margin-top: 12px; font: 400 15px/1 var(--zh); text-transform: none; color: rgba(255, 255, 255, .62) }
.panel-about .member .name .sub span[lang] { letter-spacing: .2em; margin-right: -.2em }
/* 图标比字略小、线条细，和中文名同样的灰，停上去变白；右边按看到的线条对齐 O 的外沿（扣掉 svg 四周的空和字母自带的边距） */
.panel-about .member .ways { display: inline-flex; align-items: center; gap: 14px; margin: -1px 1px 0 auto }
.panel-about .member .way { display: inline-flex; width: 16px; height: 16px; color: rgba(255, 255, 255, .62); transition: color .3s }
.panel-about .member .way:hover, .panel-about .member .way:focus-visible { color: #fff; outline: none }
.panel-about .member .way svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round }
.panel-about .member .way svg .dot { fill: currentColor; stroke: none }
.panel-about h4.mono { font: 400 12px/1 var(--mono); letter-spacing: .2em; color: rgba(255, 255, 255, .55); margin: 0 0 18px }
.panel-about .cv { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 1px solid rgba(255, 255, 255, .12) }
.panel-about .cv li { display: grid; grid-template-columns: 4.5em 1fr; column-gap: 24px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .85) }
.panel-about .cv li .mono { font-size: 12px; color: rgba(255, 255, 255, .55) }
.panel-about .cv li .zh { grid-column: 2; font-size: 13px; color: rgba(255, 255, 255, .55) }
/* contact */
.panel-contact .mail { display: inline-block; font: 400 clamp(30px, 3.6vw, 56px)/1.1 var(--display); letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 6px; transition: border-color .3s }
.panel-contact .mail:hover { border-color: #fff }
.panel-contact .links { margin-top: 5vh; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 13px; letter-spacing: .08em }
.panel-contact .links a { color: rgba(255, 255, 255, .7); text-decoration: none }
.panel-contact .links a:hover { color: #fff }

@media (prefers-reduced-motion: reduce) {
  .stratum figure img, .stratum figure video, .top nav a::after { transition: none }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  .layer { padding: 96px 16px 12vh }
  .work-list a, .work-list li.wip { grid-template-columns: 3.4em 1fr; gap: 14px; padding: 16px 0 14px }
  .work-list .f { grid-column: 2; text-align: left; margin-top: -4px }
  .work-list .t { gap: 7px }
  .panel-about .cv li { grid-template-columns: 3.4em 1fr; column-gap: 14px }
  :root { --gutter: 40px; --side: 16px; --line-y: auto }
  .top { padding: 16px var(--side) 12px var(--gutter) }
  .top nav { gap: 20px; font-size: 15px }
  .gauge { width: 24px }
  .gauge::before { opacity: .35;
    background:
      repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 24px) 14px 0 / 6px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px 120px) 8px 0 / 12px 100% no-repeat }
  .gauge b { left: 4px; width: 18px }
  .gauge .reading { display: none }
  .surface { grid-template-columns: 1fr; padding-top: 80px }
  .surface h1 { font-size: 64px }
  .surface p { font-size: 17px; margin-top: 16px }
  .intro { padding-bottom: 8px }
  .field { min-height: 230px; margin: 0 0 8px -8px }
  .waterline, .under { margin-left: 24px }
  .index { padding-top: 10vh }
  .index li a { grid-template-columns: 1fr; row-gap: 2px }
  .index li .n { font-size: 26px }
  .works-head { padding-top: 16vh }
  .strata { gap: 18vh; padding-top: 18vh }
  .stratum::before, .stratum .y { left: -12px }
  .stratum figure, .stratum .t, .stratum:nth-child(even) figure, .stratum:nth-child(even) .t { grid-column: 1 / -1; grid-row: auto }
  .stratum .t { margin-top: 18px }
  .work .lead { margin-left: 0 }
  .work .text .zh, .work .text .en, .work .text.single .zh, .work .text.single .en, .figures figure:nth-child(n), .about .bio, .about > * { grid-column: 1 / -1; margin-top: 0 }
  .work .text { row-gap: 28px }
  .figures { row-gap: 9vh }
  .credits { grid-template-columns: 1fr; row-gap: 2px }
  .credits dd { margin-bottom: 12px }
  .cv li { grid-template-columns: 52px 1fr }
  .cv li .zh { grid-column: 2 }
  .about .member .bio { margin: 28px 0 48px }
  .member h3 { font-size: 44px }
  .preview-flag { right: 8px; bottom: 8px; font-size: 10px; padding: 2px 6px; opacity: .8; pointer-events: none }
  body[data-page='home'] .preview-flag { top: 52px; right: var(--side) }
  .home .intro { bottom: 12vh; max-width: calc(100vw - 32px) }
  .home h1 { font-size: 22vw }
  .home .sub { font-size: 15px; margin-top: 12px }
  .home .line { font-size: 17px }
  .home .line.en { font-size: 15px }
    .farm-tip .n { font-size: 24px }
}

/* ---------- 单件作品页：暗色，和首页、works 目录一个语言 ---------- */
:root:has(body[data-page='work']) { background: #0c0c0d }
body[data-page='work'] { background: #0c0c0d; color: #fff }
body[data-page='work'] .gauge, body[data-page='work'] .preview-flag { display: none }
body[data-page='work'] ::selection { background: #fff; color: #0c0c0d }
body[data-page='work'] :focus-visible { outline-color: rgba(255, 255, 255, .7) }
/* 目录和首页一样；往下滚时内容从目录下面淡出去 */
body[data-page='work'] .top { padding-left: var(--side); padding-bottom: 34px; background: linear-gradient(#0c0c0d 50%, rgba(12, 12, 13, 0)) }
body[data-page='work'] .top nav a { color: rgba(255, 255, 255, .72) }
body[data-page='work'] .top nav a:hover, body[data-page='work'] .top nav a[aria-current], body[data-page='work'] .top nav a.brand { color: #fff }
body[data-page='work'] .top nav a::after { background: #fff; transition: transform 1.2s cubic-bezier(.45, 0, .2, 1) }

.wk { padding: 150px var(--side) 0; animation: panel-in .9s ease both }
.wk .back { display: inline-block; margin: 0 0 4vh; font: 400 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: color .3s }
.wk .back:hover { color: #fff }
.wk .y, .wk .f { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: rgba(255, 255, 255, .55) }
.wk .t { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin: 0; font-weight: 400 }
.wk .t .zh { margin: 0; font: 400 15px/1.2 var(--zh); letter-spacing: .2em; color: rgba(255, 255, 255, .62) }
.wk .t .en { font: 400 clamp(26px, 2.5vw, 40px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .015em }
/* 开头：目录里那一行放大（年份 | 中文在上、英文在下 | 形式与时长、地点） */
.wk .head { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 28px; align-items: baseline; padding: 30px 0 34px; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16) }
.wk .head .t { gap: 16px }
.wk .head .t .zh { font-size: 18px; letter-spacing: .24em }
.wk .head .t .en { font-size: clamp(56px, 6.6vw, 112px); line-height: .92; letter-spacing: .012em; text-wrap: balance }
.wk .head .f { margin: 0; text-align: right; max-width: 27em; justify-self: end }
.wk .head .f span { display: block; margin-top: 6px }
/* 动态影像或封面：按原比例，一屏放得下 */
.wk .lead { display: flex; justify-content: center; margin-top: 6vh }
.wk .lead img, .wk .lead video { width: min(100%, calc(66svh * var(--r, 1.7778))); height: auto; aspect-ratio: var(--r, auto) }
/* 影像下面一排：左边文字、片尾字幕和放映入围，右边并排原图小图；只有一边时居中 */
.wk .notes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5vw; align-items: start; margin-top: 10vh }
.wk .notes.solo { grid-template-columns: minmax(0, 760px); justify-content: center }
.wk .words { display: grid; gap: 7vh }
.wk .notes.solo .info { margin: 0 auto }
.wk .text { display: grid; gap: 34px; max-width: 640px }
.wk .text .zh p { font-size: 15.5px; line-height: 2.05; color: rgba(255, 255, 255, .86) }
.wk .text .en p { font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .6) }
.wk .text p + p { margin-top: 1.1em }
.wk .info { width: 100%; max-width: 520px }
.wk .roll { display: grid; row-gap: 10px; margin: 0 }
.wk .cr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px }
.wk .cr dt { text-align: right; font: 400 11px/1.75 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5) }
.wk .cr dd { margin: 0; font: 400 14px/1.55 var(--sans); color: rgba(255, 255, 255, .88) }
.wk .sel-head { margin: 40px 0 14px; text-align: center; font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5) }
.wk .selections { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.wk .selections li { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; font: 400 14px/1.5 var(--sans); color: rgba(255, 255, 255, .88) }
.wk .selections .sy { text-align: right; font: 400 11px/1.75 var(--mono); letter-spacing: .1em; color: rgba(255, 255, 255, .5) }
.wk .selections small { display: block; margin-top: 2px; font: 400 11px/1.5 var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .5) }
/* 完整影片（有链接时） */
.wk .watch { margin: 7vh auto 0; max-width: 1180px }
.wk .watch-frame { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16) }
.wk .watch-frame iframe { width: 100%; height: 100%; border: 0 }
.wk .watch-sources { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px }
.wk .watch-sources button { font: 400 12px/1 var(--mono); letter-spacing: .08em; color: #fff; background: none; border: 1px solid rgba(255, 255, 255, .25); padding: 10px 14px; cursor: pointer }
.wk .watch-sources button[aria-pressed='true'], .wk .watch-sources button:hover { border-color: #fff }
/* 原图小图：两列（多于 4 张时三列），每格按原比例，点开看大图 */
.wk .figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start }
.wk .figures.three { grid-template-columns: 1fr 1fr 1fr }
.wk .figures .th { position: relative; display: block; aspect-ratio: var(--r, 1.5); overflow: hidden; background: rgba(255, 255, 255, .04); cursor: zoom-in }
.wk .figures .th img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .6s ease }
.wk .figures .th:hover img, .wk .figures .th:focus-visible img { opacity: 1 }
.wk .figures .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 12, 13, .55); font: 400 13px/1 var(--mono); letter-spacing: .2em; color: #fff }
html.reveal-on .wk .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1) }
html.reveal-on .wk .reveal.in { opacity: 1; transform: none }
/* 大图：铺满一屏的暗底，图按原比例放下，下面说明和「← 2 / 6 →」；Esc 或右上角关掉 */
.lb { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 72px var(--side) 34px; background: rgba(8, 8, 9, .96); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s }
.lb.on { opacity: 1; visibility: visible; transition: opacity .45s ease }
.lb img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; object-fit: contain; cursor: pointer; transition: opacity .35s ease }
.lb .cap { min-height: 1.5em; font: 400 11px/1.5 var(--mono); letter-spacing: .14em; color: rgba(255, 255, 255, .55) }
.lb .count { display: flex; align-items: center; gap: 14px; font: 400 11px/1 var(--mono); letter-spacing: .22em; color: rgba(255, 255, 255, .55) }
.lb button { background: none; border: 0; padding: 6px 8px; color: rgba(255, 255, 255, .55); font: 400 14px/1 var(--mono); cursor: pointer; transition: color .3s }
.lb button:hover { color: #fff }
.lb .close { position: absolute; top: 24px; right: calc(var(--side) - 8px); font-size: 11px; letter-spacing: .22em; text-transform: uppercase }
html.lb-open, html.lb-open body { overflow: hidden }
/* 上一件 / 下一件：和目录的行一样 */
.wk .turn { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12vh; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16) }
.wk .turn a { display: grid; grid-template-columns: 6em 1fr; gap: 20px; align-items: baseline; padding: 24px 0 26px; color: rgba(255, 255, 255, .78); transition: color .5s ease }
.wk .turn a + a { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 28px }
.wk .turn a:hover, .wk .turn a:focus-visible { color: #fff; outline: none }
/* 作品页：内容滚到底部时在 © 下面淡出去（和顶部目录下面一样），最后一行不会压在 © 上 */
body[data-page='work']::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 76px; z-index: 4; pointer-events: none; background: linear-gradient(rgba(12, 12, 13, 0), #0c0c0d 70%) }
body[data-page='work'] .wk { padding-bottom: 120px }
@media (max-width: 760px) {
  .wk { padding: 100px 16px 0 }
  .wk .head { grid-template-columns: 3.4em 1fr; gap: 14px; padding: 22px 0 24px }
  .wk .head .f { grid-column: 2; text-align: left; justify-self: start; margin-top: 4px }
  .wk .head .t { gap: 10px }
  .wk .head .t .zh { font-size: 15px }
  .wk .head .t .en { font-size: 44px }
  .wk .lead { margin: 5vh 0 0 }
  .wk .lead img, .wk .lead video { width: 100% }
  .wk .notes, .wk .notes.solo { grid-template-columns: 1fr; row-gap: 7vh; margin-top: 7vh }
  .wk .figures, .wk .figures.three { grid-template-columns: 1fr 1fr; gap: 8px }
  .lb { padding: 64px 0 28px }
  .wk .turn { grid-template-columns: 1fr; margin-top: 9vh }
  .wk .turn a { grid-template-columns: 4.6em 1fr; gap: 14px }
  .wk .turn a + a { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding-left: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .wk { animation: none }
  html.reveal-on .wk .reveal { opacity: 1; transform: none; transition: none }
}