/* ═══════════════════════════════════════════════════════════
   陈厚竹 CHEN HOUZHU — 摄影
   三个同层级页面：About / Works / Contact
   自定义浮萍光标 · 暗调水纹 · 中文字体：MiSans
   ═══════════════════════════════════════════════════════════ */

/* 菩提細明已全站退役（三页统一 MiSans），@font-face 与 preload 一并撤掉 ——
   留着只会让浏览器白下载一个 158KB 却无人使用的字体文件。
   字体文件本体 fonts/puti-subset.woff2 仍在磁盘上，确认无其它引用后可删 */

@font-face{
  font-family:"Nunito Sans"; font-style:normal; font-weight:400;
  src:url("fonts/nunito-sans-latin.woff2") format("woff2");
  font-display:swap;
}

@property --amb-a { syntax: '<color>'; inherits: true; initial-value: #273721; }
@property --amb-b { syntax: '<color>'; inherits: true; initial-value: #182419; }

:root{
  --bg:      #080A07;
  --surface: #141712;
  --ink:     #EDEAE3;
  --ink-2:   rgba(237,234,227,.94);
  --ink-3:   rgba(237,234,227,.86);
  --sage:    #A6BA8C;
  /* 配合取色光斑的亮度上限校准；层级继续由字号、字重与间距承担。
     场馆等次要正文略亮于标签，避免动态背景使低透明度小字消失。 */
  --ink-body: rgba(237,234,227,.90);

  /* 中文用 MiSans，导航等辅助拉丁文用 Inter，英文阅读内容用 Nunito Sans。
     --serif 保留为旧选择器的兼容别名。 */
  --serif: "MiSans","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --cjk:   "MiSans","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --ui:    "Inter","MiSans",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --reading-en: "Nunito Sans","Inter","MiSans",sans-serif;
  --mono:  ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ── 字重三档，与 misans.css 的三个 @font-face 一一对应 ──
     判据是「用途」而非「尺寸」：标签（读一眼）才加重，
     内容（要读进去）使用 Regular */
  --w-display: 300;   /* 大字：靠字号取胜，字重收轻 */
  --w-body:    400;   /* 正文，以及全部条目名 —— 页面的默认声音 */
  --w-label:   500;   /* 只留给 ≤11px 的标签：反白后笔画细如发丝，必须补重才立得住 */

  /* 三页共享正文左轴；纵向间距由同一基础单位推导。
     每道区块间距只由一侧负责，避免相邻 padding 叠加。 */
  --col-gap: clamp(26px, 3.4vw, 52px);
  --space-unit: 4px;
  --space-2: calc(2 * var(--space-unit));
  --space-4: calc(4 * var(--space-unit));
  --space-6: calc(6 * var(--space-unit));
  --space-8: calc(8 * var(--space-unit));
  --space-12: calc(12 * var(--space-unit));
  --space-16: calc(16 * var(--space-unit));
  --sec-top: var(--space-12);
  --section-gap: 80px;
  --footer-gap: 64px;

  --gut:  clamp(20px, 4vw, 64px);
  --maxw: 1400px;
  --head-h: 72px;

  /* 肖像与栏目标签共用左栏，自述与履历共用右栏起点。 */
  --about-col: clamp(132px, 9.6vw, 148px);
  --about-gap: clamp(28px, 4.2vw, 64px);

  /* 按信息角色设定字号；双语页标题同级，中英文通过实际字形校准视觉分量。 */
  --fs-display: clamp(32px, 3.3vw, 44px);
  --fs-name:    clamp(23px, 1.75vw, 26px);
  --fs-title:   clamp(20px, 1.5vw, 22px);
  --fs-body:    15px;
  --fs-sub:     13px;
  --fs-meta:    11px;
  --fs-micro:   10px;   /* 最小一档：等宽元信息（序号、年份、时间戳），
                            以及标签的英文副行 —— 都是「扫一眼」的附属信息 */

  /* 大写辅助标签微量放宽，等宽年份使用自然字距。 */
  --ls-meta:    .08em;
  --ls-mono:    normal;

  --ease: cubic-bezier(.19,1,.22,1);
}

/* 排印：中英文按信息角色建立层级；中文微量字距，英文正文自然字距。
   标题使用真实 Light，内容使用 Regular；网格与分组间距在基础规则中定义。 */

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  background:var(--bg);
  transition:--amb-a 1.2s ease, --amb-b 1.2s ease, background-color .65s ease;
}
body{
  margin:0; color:var(--ink);
  font-family:var(--ui); font-size:var(--fs-body); line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:transparent;
  transition:color .65s ease;
}
body.is-locked{ overflow:hidden; }
h1,h2,h3,p,figure,figcaption{ margin:0; padding:0; }
/* 列表与定义列表必须一起归零 —— 浏览器的默认样式里：
     ul/ol 带 padding-inline-start:40px 与 margin-block:1em，
     dd    带 margin-inline-start:40px。
   上面那行 reset 漏掉了这几项，后果不是「多一点内边距」那么简单：
   简介页的右栏里，自述与履历共用同一条左轴（x=325），
   而 ul 的 40px 内边距会把整张履历推到 365、dd 的 40px 外边距会把
   登记信息的值再推一列 —— 同一栏于是出现四条相差 40px 的左轴。
   ⚠️ 这种泄漏量「容器」是量不出来的（ul 的盒子仍在 325），
   必须量到内容（.cv-year / dd）才会暴露。
   水平靠这一点归零，垂直的节奏则由 .about-sec 的 padding 显式给足，
   不再让 1em 的默认外边距混进节间距里 */
ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ display:block; max-width:100%; }
::selection{ background:var(--sage); color:#10150E; }

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

/* ── 无障碍底线 ─────────────────────────────────────────── */
/* 焦点可见：键盘用户必须看得见自己停在哪 */
:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
/* 跳转链接：平时移出视口，获得焦点时滑下 */
.skip{
  position:fixed; left:50%; top:0; z-index:9850;
  transform:translate(-50%,-108%);
  padding:10px 18px; background:var(--ink); color:var(--bg);
  font-family:var(--ui); font-size:var(--fs-meta); letter-spacing:.16em;
  text-transform:uppercase;   /* 与 letter-spacing 成对，缺一个标签就散架 */
  white-space:nowrap;
  transition:transform .3s var(--ease);
}
.skip:focus{ transform:translate(-50%,0); }

/* ── 大写小字标签 / 极弱标记 ───────────────────────────────
   本语言的辨识度来源：正字距 + 大写必须成对出现。
   层级不用颜色区分，只用字号与透明度。
   中英双语一律「中文在上、英文在下」竖排。 */
/* ── 节标签：三页共用的一套小字标签系统 ─────────────────────
   中文走 .02em，拉丁大写标签走 .08em——
   一个元素里两种文种两套字距，这是和欧混植的基本纪律。
   字重取 Medium(500)：11px 黑体笔画细如发丝，暗底反白后容易糊，
   这一档必须补重才立得住（这是 --w-label 唯一的用途） */
.label{
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-start;   /* 两行各自贴内容宽，不被栏宽拉伸 */
  font-family:var(--ui); font-weight:var(--w-label);
  font-size:var(--fs-meta); letter-spacing:.02em;
  text-transform:uppercase; line-height:1.35;
  color:var(--ink-3);
}
/* 等宽元信息：序号、年份、时间戳。字距走 --ls-mono ——
   等宽字体的每个字格等宽，本身已提供节奏，放宽反而松散 */
.micro{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--ls-mono);
  color:var(--ink-3);
}

/* ── 自定义光标：浮萍水环 ───────────────────────────────────
   ⚠️ canvas 是「替换元素」，只写 inset:0 不会把它拉伸到视口 ——
   宽度会退回 canvas 的固有尺寸 300×150，导致绘制缓冲区与显示尺寸不一致，
   光标整体错位。必须显式 width/height:100%。 */
.fx-cursor{
  position:fixed; inset:0; z-index:9700; pointer-events:none;
  width:100%; height:100%;
  display:none;
}
html.has-cursor .fx-cursor{ display:block; }
html.has-cursor,
html.has-cursor *{ cursor:none !important; }

/* ── 正文水纹：低分辨率画布上覆暗色，模糊只作用于画布 ───── */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(125% 88% at 50% 34%, var(--amb-a, #273721) 0%, transparent 68%),
    radial-gradient(100% 78% at 12% 98%, var(--amb-b, #182419) 0%, transparent 64%),
    #11190e;
}
.ambient::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:#fff; opacity:0;
  transition:opacity .65s ease;
}
.ambient-water{
  position:absolute; inset:-16px;
  width:calc(100% + 32px); height:calc(100% + 32px);
  display:block;
  filter:blur(4px);
  transition:opacity .65s ease;
}
.ambient::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:rgba(3,5,4,.06);
  transition:opacity .65s ease;
}
html.is-daytime-open{
  --bg:#fff; --surface:#fff;
  --ink:#20231f; --ink-2:rgba(32,35,31,.88); --ink-3:rgba(32,35,31,.64);
  --ink-body:rgba(32,35,31,.88); --sage:#839473;
  --day-rule:#d9dad8;
}
html.is-daytime-open .ambient::before{ opacity:1; }
html.is-daytime-open .ambient-water,
html.is-daytime-open .ambient::after{ opacity:0; }
html.is-bell-open{
  --bg:#242424; --surface:#242424;
  --ink:#f2f0eb; --ink-2:rgba(242,240,235,.84); --ink-3:rgba(242,240,235,.62);
  --ink-body:rgba(242,240,235,.9);
}
html.is-bell-open .ambient{ background:#242424; }
html.is-bell-open .ambient-water,
html.is-bell-open .ambient-wave,
html.is-bell-open .ambient::after{ opacity:0; }
.ambient-wave{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .65s ease;
}
html.is-seaside-open .ambient-water{ opacity:0; }
html.is-seaside-open .ambient-wave{ opacity:1; }
main{
  position:relative; z-index:1;
  transition:opacity .22s ease, transform .22s ease;
}
main[hidden]{ display:none !important; }
html.is-page-leaving main{ opacity:0; transform:translateY(-6px); pointer-events:none; }
html.is-page-arrival main{ animation:pageArrival .4s var(--ease) backwards; }
html.is-page-arrival .ambient{ animation:ambientArrival .4s ease backwards; }
html.is-soft-page-arrival main{ animation:pageArrival .4s var(--ease) backwards; }
html.is-page-arrival .loader{ display:none; }
html.is-returning-to-entry{ background:var(--sage); }
html.is-returning-to-entry .loader{ display:none; }
@keyframes pageArrival{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes ambientArrival{
  from{ opacity:.65; }
  to{ opacity:1; }
}

html.js:not(.is-entered) main,
html.js:not(.is-entered) .site-header{ visibility:hidden; }
html:not(.js) .entry,
html:not(.js) .loader{ display:none; }
html:not(.js) body.is-locked{ overflow:auto; }

body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 幕布 ───────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:9900; background:var(--bg);
  transition:opacity .8s ease, visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ── 封面（仅首页首次） ─────────────────────────────────── */
.entry{
  position:fixed; inset:0; z-index:9600; background:var(--sage);
  overflow:hidden; cursor:pointer;
  transition:opacity .95s var(--ease), transform 1.15s var(--ease), visibility .95s;
}
.entry.is-out{ opacity:0; transform:scale(1.07); visibility:hidden; pointer-events:none; }
#entryCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.entry-cue{
  position:absolute; left:50%; top:50%; z-index:1;
  width:max(124px,22vmin); height:max(124px,22vmin); transform:translate(-50%,-50%);
  display:grid; place-items:center; border-radius:50%;
  color:rgba(255,255,255,.9);
}
.entry-cue svg{
  width:80px; height:80px; overflow:visible;
  fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .6s var(--ease);
}
.entry-cue-wave{ transform-origin:40px 40px; }
.entry-cue-wave-outer{
  stroke-width:1.15; opacity:.58;
  animation:entry-cue-breathe 4.8s ease-in-out infinite;
}
.entry-cue-wave-inner{
  stroke-width:1.2; opacity:.82;
}
.entry-cue-core{ fill:currentColor; stroke:none; opacity:.9; }
.entry-cue:hover svg,.entry-cue:focus-visible svg{ transform:scale(1.12); }
@keyframes entry-cue-breathe{
  0%,100%{ opacity:.48; transform:scale(.96); }
  50%{ opacity:.76; transform:scale(1.06); }
}

/* 左缘只提供入口预览；画布只在悬停期间以 15fps 绘制。 */
.entry-preview{
  position:fixed; inset:0; z-index:9300; pointer-events:none;
  opacity:0; visibility:hidden; transform:translateX(-4vw);
  background:linear-gradient(90deg,
    rgba(166,186,140,.98) 0%, rgba(166,186,140,.93) 19%,
    rgba(166,186,140,.66) 45%, rgba(166,186,140,.18) 73%,
    rgba(166,186,140,0) 100%);
  transition:opacity .55s var(--ease), transform .75s var(--ease), visibility .55s;
}
.entry-preview::before{
  content:''; position:absolute; inset:0; background:var(--sage);
  opacity:0; transition:opacity .65s var(--ease);
}
.entry-preview canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 35%,transparent 92%);
  mask-image:linear-gradient(90deg,#000 0%,#000 35%,transparent 92%);
}
.entry-edge{
  position:fixed; left:0; top:0; bottom:0; z-index:9350;
  width:clamp(18px,2vw,28px); touch-action:none;
}
.entry-edge::before{
  content:''; position:absolute; left:0; top:50%; width:2px; height:72px;
  transform:translateY(-50%); background:var(--sage); opacity:.35;
  transition:height .55s var(--ease), opacity .55s var(--ease);
}
.entry-edge:hover::before,.entry-edge:focus-visible::before{ height:128px; opacity:.9; }
html.is-entry-previewing .entry-preview,
html.is-entry-returning .entry-preview{
  opacity:1; visibility:visible; transform:translateX(0);
}
html.is-entry-returning .entry-preview::before{ opacity:1; }
html.is-entry-returning .entry-preview canvas{
  -webkit-mask-image:none; mask-image:none;
}
html.is-entry-returning .entry-edge{ pointer-events:none; }
html:not(.is-entered) .entry-preview,
html:not(.is-entered) .entry-edge{ display:none; }
@media (hover:none),(pointer:coarse){
  .entry-preview,.entry-edge{ display:none !important; }
}

/* ── 页头 ────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9000; height:var(--head-h);
  background:transparent;
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; height:100%; padding:0 var(--gut);
  display:flex; align-items:center; justify-content:flex-end;
}
.nav{ display:flex; align-items:center; min-height:22px; }
.nav-links{
  display:flex; gap:clamp(18px,2.4vw,34px);
}
.nav-links a{
  position:relative;
  font-family:var(--ui); font-size:var(--fs-meta); font-weight:var(--w-label);
  letter-spacing:var(--ls-meta); color:var(--ink-2);
  white-space:nowrap; transition:color .4s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.is-current{ color:var(--ink); }
.nav-links a.is-current::before{
  content:''; position:absolute; left:50%; top:-9px;
  width:3px; height:3px; margin-left:-1.5px; border-radius:50%;
  background:var(--sage);
}

/* ── 页面标题：双语同排、共用基线，空间不足时整词换行 ── */
.page-head,
.about-intro{
  padding-top:calc(var(--head-h) + var(--space-16));
}
.page-head h1{
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:var(--space-4); row-gap:var(--space-2);
  font-family:var(--cjk); font-weight:var(--w-display);
  font-size:var(--fs-display); letter-spacing:.02em; line-height:1.16;
}
.page-head .zh,
.page-head .en{ white-space:nowrap; }
.page-head .en{
  font-family:var(--ui); font-weight:inherit;
  font-size:1em; letter-spacing:normal; color:inherit;
}
html.is-daytime-open .page-head{
  padding-bottom:clamp(26px,3vw,40px);
}

/* ── 个人简介：姓名 → 肖像和自述 → 履历 → 页脚 ────────── */
.about-intro{ padding-bottom:var(--space-8); }
.about-statement{
  font-family:var(--cjk); font-weight:var(--w-display);
  font-size:var(--fs-name); letter-spacing:.02em; line-height:1.15;
  max-width:22em;
}

.about-statement .alt{
  display:block; margin-top:0;
  font-family:var(--ui); font-weight:var(--w-body);
  font-size:var(--fs-sub); line-height:1.25; letter-spacing:var(--ls-meta);
  color:var(--ink-3);
}

.about-origin{
  margin-top:var(--space-4);
  font-family:var(--ui);
  font-size:var(--fs-meta); line-height:1.45; letter-spacing:normal; color:var(--ink-3);
  white-space:nowrap;
}

.about-body{ padding-bottom:var(--section-gap); }
.about-cols{
  display:grid;
  grid-template-columns:minmax(0,var(--about-col)) minmax(0,1fr);
  gap:var(--about-gap); align-items:start;
}

.about-fig{ width:clamp(88px,7.2vw,108px); max-width:100%; margin-top:8px; }
.about-fig img{ width:100%; height:auto; background:var(--surface); }

/* 方块字保留适度行框，拉丁字形收紧；语言间停顿由段距承担。 */
.about-text{
  font-family:var(--cjk); font-weight:var(--w-body);
  font-size:var(--fs-body); line-height:1.65; letter-spacing:.02em;
  color:var(--ink-2);
  max-width:43em;
}

.about-copy + .about-copy{ margin-top:var(--space-4); }
.about-copy[lang="en"]{
  font-family:var(--reading-en); line-height:1.5; letter-spacing:normal;
  max-width:35em;
}

.about-sentence{ display:block; }

.about-aside{
  display:block;
  margin-top:var(--space-2);
}

.about-sec + .about-sec{ padding-top:96px; }
/* 栏目标题是阅读入口，与年份等辅助信息保持清楚的字号差。 */
.about-sec .label{ font-size:13px; line-height:1.5; color:var(--ink); align-self:start; }

.about-sec-inner{
  display:grid;
  grid-template-columns:var(--about-col) minmax(0,1fr);
  column-gap:var(--about-gap);
}

/* 展览只收起列表；展开后仍使用原有年份与场馆网格。 */
.js .about-exhibitions:not(.is-open) .cv-exhibitions{ display:none; }
.exh-toggle{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; padding-right:20px; text-align:left;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
}
.exh-toggle::before,.exh-toggle::after{
  content:''; position:absolute; right:0; top:9px;
  width:10px; height:1px; background:currentColor;
  transition:transform .3s var(--ease);
}
.exh-toggle::after{ transform:rotate(90deg); }
.exh-toggle[aria-expanded="true"]::after{ transform:rotate(0deg); }
.exh-toggle:hover{ color:var(--ink); }
.exh-title{ position:relative; display:inline-block; }
.exh-title::after{
  content:''; position:absolute; inset:auto 0 -3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.exh-toggle:hover .exh-title::after,
.exh-toggle:focus-visible .exh-title::after{ transform:scaleX(1); }

.label-en{
  font-size:var(--fs-micro); letter-spacing:var(--ls-meta);
  color:var(--ink-3); text-transform:uppercase;
}

/* 同一条目内部紧密成组；条目与栏目采用逐级增加的留白。 */
.cv{ display:flex; flex-direction:column; gap:16px; }
/* 年份只标记一次：同年条目 16px，年份分组 24px，栏目 72–80px。 */
.cv-exhibitions{ gap:24px; }
.cv-year-items{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.cv-item{
  display:grid;
  grid-template-columns:clamp(78px,7.5vw,112px) minmax(0,1fr);
  column-gap:clamp(14px,2vw,32px); align-items:baseline;
  padding-block:0;
}

.cv-year{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--ls-mono);
  color:var(--ink-3); white-space:nowrap;
}

.cv-main{
  display:grid; grid-template-columns:6em minmax(0,1fr);
  align-items:baseline; column-gap:16px; row-gap:8px;
}
.cv-project-link{ grid-template-columns:minmax(0,1fr); row-gap:2px; }

/* 展名与地点作为一个信息组：同时收紧组内间隔和行框留白。 */
.cv-stack{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cv-stack .cv-title{ line-height:1.45; }

.cv-title{
  font-family:var(--cjk); font-weight:var(--w-body);
  font-size:var(--fs-body); letter-spacing:.02em;
  color:var(--ink); line-height:1.55;
}

.cv-sub{
  font-family:var(--reading-en); font-weight:var(--w-body);
  font-size:var(--fs-body); letter-spacing:normal;
  color:var(--ink-2); line-height:1.5;
}
.cv-project-link .cv-title,
.cv-project-link .cv-sub{ position:relative; width:max-content; max-width:100%; }
.cv-project-link .cv-title::after,
.cv-project-link .cv-sub::after{
  content:''; position:absolute; inset:auto 0 -3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.cv-project-link:hover .cv-title::after,
.cv-project-link:hover .cv-sub::after,
.cv-project-link:focus-visible .cv-title::after,
.cv-project-link:focus-visible .cv-sub::after{ transform:scaleX(1); }

.cv-venue{
  font-family:var(--cjk); font-size:var(--fs-sub);
  letter-spacing:.02em; line-height:1.45;
  color:var(--ink-body);
}

.cv-title .hang{
  display:inline-block; width:0;
  letter-spacing:0;
  position:relative; left:-.4em;
}

.about-meta{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:var(--space-4); row-gap:clamp(2px,.3vw,4px);
  align-items:baseline;
}
.about-meta dt{
  font-family:var(--ui); font-weight:var(--w-label);
  font-size:var(--fs-meta); letter-spacing:var(--ls-meta);
  text-transform:uppercase; color:var(--ink-3); line-height:1.6;
}

.about-meta dd{
  font-family:var(--cjk); font-size:var(--fs-body);
  letter-spacing:.02em; color:var(--ink-2); line-height:1.8;
}
.about-meta dd[lang="en"]{ font-family:var(--reading-en); letter-spacing:normal; }

/* ── 更新时间 ────────────────────────────────── */

.site-footer{ padding-block:var(--footer-gap) var(--space-8); }

.icp-link{
  display:block; width:fit-content; margin-top:var(--space-2);
  font-size:var(--fs-meta); line-height:1.6;
  color:color-mix(in srgb, var(--ink) 9%, var(--bg));
  transition:color .25s ease;
}
.icp-link:hover{ color:color-mix(in srgb, var(--ink) 24%, var(--bg)); }
.icp-link:focus-visible{ color:var(--ink); }
.colophon{ display:block; }

.colophon .micro{ display:block; text-align:left; }

/* ── 作品：可展开项目（互斥） ───────────────────────────── */

.works{ padding-top:var(--sec-top); }
html.is-daytime-open .works{ padding-top:0; }
.proj{
  display:flex; flex-direction:column;
  padding-bottom:var(--space-8);
  transition:padding-bottom .9s var(--ease);
}
.proj[id]{ scroll-margin-top:calc(var(--head-h) + var(--space-4)); }
.proj:not(.is-open){ padding-bottom:var(--space-4); }
.proj:last-child{ padding-bottom:0; }

.proj-head{
  order:1; display:block; width:100%; text-align:left;
  padding:0 0 var(--space-4);
  transition:background-color .4s var(--ease), padding-bottom .9s var(--ease);
}

.proj:not(.is-open) .proj-head{ padding-bottom:0; }
.proj-body{ order:2; }
.proj-head:hover{ background:rgba(237,234,227,.028); }
.proj-static .proj-head:hover{ background:transparent; }
html.is-daytime-open .proj-head:hover{ background:rgba(32,35,31,.04); }
html.is-daytime-open .proj:not(.is-open){ padding-bottom:0; }
html.is-daytime-open .proj-head{ padding-top:var(--space-4); }
html.is-daytime-open .proj:not(.is-open) .proj-head{ padding-bottom:var(--space-4); }
html.is-daytime-open .proj:first-child,
html.is-daytime-open .proj-daytime{
  border-top:1px solid var(--day-rule);
  padding-top:0;
}
html.is-daytime-open .proj-daytime.is-open .proj-head{
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--day-rule);
}
.proj-status{
  display:block; grid-column:2; grid-row:2; margin-top:var(--space-2);
  font-family:var(--ui); font-size:var(--fs-meta); font-weight:var(--w-body);
  line-height:1.5; letter-spacing:.02em; color:var(--ink-3);
}

/* 各项目共用轨道。 */
.proj-row{
  --row-gap:clamp(11px,1.3vw,18px);
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:calc(var(--gut) - var(--row-gap)) minmax(0,calc(20 * var(--fs-title) + var(--row-gap))) clamp(92px,8vw,112px) minmax(0,1fr) var(--gut);
  grid-template-areas:'i t m . s' 'i e m . s';
  column-gap:var(--row-gap); row-gap:6px; align-items:baseline;
}
.proj-idx  { grid-area:i; }
.proj-title{ grid-area:t; }
.proj-en   { grid-area:e; }
.proj-meta { grid-area:m; align-self:center; }
.proj-sign { grid-area:s; align-self:center; }

.proj-idx{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--ls-mono); color:var(--ink-3); }

.proj-title,.proj-en{
  font-weight:var(--w-body); font-style:normal;
  font-size:var(--fs-title); line-height:1.35;
  display:block; min-width:0; white-space:nowrap;
}

.proj-title{ font-family:var(--cjk); letter-spacing:.02em; color:var(--ink); }

.proj-en{ font-family:var(--reading-en); letter-spacing:normal; color:var(--ink-2); }

.proj-meta{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--ls-mono);
  color:var(--ink-3); white-space:nowrap;
}
.proj-sign{ position:relative; width:14px; height:14px; justify-self:end; }
.proj-sign i{
  position:absolute; left:0; top:50%; width:100%; height:1px; margin-top:-.5px;
  background:var(--ink-2); transition:transform .5s var(--ease);
}
.proj-sign i:last-child{ transform:rotate(90deg); }
.proj.is-open .proj-sign i:last-child{ transform:rotate(0deg); }
@media (min-width:901px){
  .proj-sign{ margin-right:32px; }
}
.proj-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .9s var(--ease); }
.proj.is-open .proj-body{ grid-template-rows:1fr; }
.proj-inner{ overflow:hidden; min-height:0; }

/* ── 照片条：横向层叠，无边框/阴影/标题栏 ─────────────────── */
.strip-wrap{
  position:relative;
  /* 外部间距由项目标题和容器提供。 */
}

/* 先看照片，再读概述；中英文在同一行起笔，共享正文层级。 */
.work-statement{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(52px,6vw,88px) var(--gut) clamp(72px,9vw,128px);
  display:grid; grid-template-columns:clamp(104px,10vw,148px) minmax(0,1fr);
  column-gap:clamp(24px,2.5vw,40px); align-items:start;
}
.work-statement .label{
  font-size:13px; line-height:1.5; color:var(--ink);
}
.work-statement-copy{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);
  column-gap:clamp(32px,4vw,60px); row-gap:20px;
}
.work-statement-zh,.work-statement-translation{ display:contents; }
.work-statement-zh p:first-child{ grid-column:1; grid-row:1; }
.work-statement-zh p:last-child{ grid-column:1; grid-row:2; }
.work-statement-translation p:first-child{ grid-column:2; grid-row:1; }
.work-statement-translation p:last-child{ grid-column:2; grid-row:2; }
.work-statement-copy p{
  font-family:var(--cjk); font-size:16px; font-weight:var(--w-body);
  line-height:1.68; letter-spacing:.02em; color:var(--ink-body);
}
.work-statement-translation p{
  font-family:var(--reading-en); line-height:1.62;
  letter-spacing:normal;
}

/* 单语概述按叙事分段，避免被双语网格压成窄栏。 */
.proj-seaside .work-statement-copy{ display:block; max-width:40em; }
.proj-seaside .work-statement-zh{ display:block; }
.proj-seaside .work-statement-copy p{
  word-break:normal; overflow-wrap:normal; line-break:strict; text-wrap:wrap;
}
.proj-seaside .work-statement-copy p + p{ margin-top:20px; }
.proj-seaside .statement-phrase{ white-space:nowrap; }
@media (min-width:901px){
  .proj-seaside .work-statement-copy{
    display:grid; max-width:none;
  }
  /* 三段作为整体使用旧版单段正文的轨道与起始位置。 */
  .proj-seaside .work-statement-zh{ grid-column:1; grid-row:2; }
}


/* 白日流星：逐页展示保留原比例；网格使用同一批图片节点。 */
.day-carousel{ position:relative; max-width:var(--maxw); margin-inline:auto; padding:clamp(22px,3vw,38px) var(--gut) clamp(56px,6vw,88px); }
.day-stage{
  min-height:clamp(420px,68vh,690px);
  display:grid; place-items:center;
  padding-inline:clamp(44px,7vw,100px);
  scroll-margin-top:calc(var(--head-h) + var(--space-4));
}
.day-slide{ width:100%; height:clamp(420px,68vh,690px); align-items:center; justify-items:center; gap:clamp(14px,2.4vw,34px); }
.day-slide:not(.is-active){ display:none; }
.day-shot{ position:relative; min-width:0; min-height:0; display:grid; place-items:center; background:var(--surface); }
.day-shot img{ display:block; width:auto; height:auto; min-height:0; max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; }
.day-shot.is-preview-error img{ visibility:hidden; }
.day-slide--single{ display:grid; grid-template-columns:minmax(0,1fr); }
.day-slide--single .day-shot{ width:100%; height:100%; }
.day-slide--single .day-shot img{ max-width:min(100%,960px); max-height:100%; }
.day-slide--portrait .day-shot img{ max-width:min(100%,460px); }
.day-slide--pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.day-slide--pair .day-shot{ width:100%; height:100%; }
.day-slide--stack{ display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); }
.day-slide--stack .day-shot{ width:min(100%,530px); height:100%; }
.day-slide--trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.day-slide--trio .day-shot{ width:100%; height:100%; }
.day-carousel.is-grid .day-stage{
  --day-grid-gap:clamp(12px,1.4vw,20px);
  display:flex; flex-direction:column; align-items:stretch; gap:var(--day-grid-gap);
  min-height:0; padding-inline:0;
}
.day-carousel.is-grid .day-slide{ display:none; }
.day-grid-row{ display:flex; align-items:flex-start; gap:var(--day-grid-gap); width:100%; }
.day-carousel.is-grid .day-shot{
  display:block; flex:0 0 auto;
}
.day-carousel.is-grid .day-shot img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:contain;
}
.day-carousel.is-grid .day-navigation{ display:none; }
.day-navigation{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,4vw,48px); margin-top:var(--space-8);
}
.day-count{ min-width:5ch; text-align:center; font-family:var(--mono); font-size:var(--fs-meta); color:var(--ink-3); letter-spacing:.05em; }
.day-arrow{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center; color:var(--ink-2);
  transition:color .25s ease, opacity .25s ease;
}
.day-arrow-icon{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
.day-arrow:hover:not(:disabled){ color:var(--ink); }
.day-arrow:first-child:hover:not(:disabled) .day-arrow-icon{ transform:translateX(-4px); }
.day-arrow:last-child:hover:not(:disabled) .day-arrow-icon{ transform:translateX(4px); }
.day-arrow:disabled{ opacity:.32; cursor:default; }
.day-arrow:focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }
.strip{
  position:relative; z-index:0;
  height:var(--strip-h, 430px);
  overflow:hidden;                 /* 仅为不产生横向滚动条，视觉渐隐靠 mask */
  cursor:grab;
  touch-action:pan-y;              /* 手机上纵向仍可翻页，横向才是条内滚动 */
  -webkit-user-select:none; user-select:none;

  /* 左右两端渐隐 —— 不要出现硬边/窗口感 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.strip.is-drag{ cursor:grabbing; }

.strip-track{
  position:absolute; left:0; top:0; height:100%; width:100%;
  will-change:transform;
  opacity:1;
  transition:opacity .24s ease;
}
.strip-track.is-fading{ opacity:0; }
.strip-item{
  position:absolute; left:0; top:50%;
  cursor:zoom-in;
  width:var(--w);
  z-index:var(--z, 1);
  transform:translate3d(var(--x), calc(-50% + var(--y)), 0) rotate(var(--r));
  background:var(--surface);
  transition:transform .45s var(--ease);
}
.strip-item img{ display:block; width:100%; height:100%; pointer-events:none; }
.strip-item.is-preview-error img{ visibility:hidden; }
.preview-retry{
  position:absolute; inset:0; margin:auto; width:max-content; height:max-content;
  padding:8px 12px; border:1px solid currentColor; border-radius:2px;
  color:var(--ink); background:var(--surface); font:inherit; font-size:13px; cursor:pointer;
}
.preview-retry[hidden]{ display:none; }
.strip-item.is-cropped{ overflow:hidden; }
.strip-item.is-cropped img{
  position:absolute; left:var(--crop-left); top:var(--crop-top);
  width:var(--crop-width); height:var(--crop-height); max-width:none;
}
/* 拖动中：关掉过渡（不跟手的主因），并停止命中测试 */
.strip.is-drag .strip-item{ transition:none; }
.strip.is-drag .strip-item{ pointer-events:none; }

.strip-item.is-hot{
  z-index:60;
  transform:translate3d(var(--x), calc(-50% + var(--y)), 0) rotate(0deg) scale(1.14);
}
.strip-item.pushed{
  transform:translate3d(calc(var(--x) + var(--push, 0px)), calc(-50% + var(--y)), 0) rotate(var(--r));
}

/* 网格：复用同一批图片节点，只改变布局，不克隆、不重复请求 */
.strip.is-grid{
  height:auto;
  overflow:visible;
  cursor:default; touch-action:auto;
  -webkit-mask-image:none;
          mask-image:none;
}
.strip.is-grid .strip-track{
  position:relative; left:auto; top:auto;
  max-width:var(--maxw); margin-inline:auto;
  --grid-photo-height:clamp(120px,18vw,220px);
  display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start;
  gap:clamp(10px,1.3vw,20px);
  width:auto; height:auto;
  padding:clamp(26px,3vw,46px) var(--gut) 0;
  transform:none !important; will-change:auto;
}
.strip.is-grid .strip-item{
  position:relative; left:auto; top:auto;
  flex:0 0 auto;
  height:var(--grid-photo-height);
  width:calc(var(--grid-photo-height) * var(--preview-ratio));
  z-index:auto;
  transform:none !important;
  cursor:zoom-in;
}
.strip.is-grid .strip-item:hover{ opacity:.82; }

/* 网格末行到概述只由概述顶部的一个间距负责。 */
.proj.is-grid-view .work-statement{ padding-top:var(--space-8); }

/* 两侧整块控制区：箭头是提示，整个区域都可悬停或点击 */
.strip-arrow{
  position:absolute; top:0; bottom:0; z-index:5;
  width:clamp(64px,9vw,128px);
  touch-action:manipulation;
  display:flex; align-items:center;
  padding-inline:clamp(18px,2.8vw,38px);
  color:var(--ink-2);
  background:transparent;
  transition:color .35s var(--ease), opacity .35s var(--ease);
}
.strip-arrow::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(var(--arrow-fade),rgba(10,12,9,.18),transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
}
.strip-arrow[data-dir="-1"]{ left:0; justify-content:flex-start; --arrow-fade:90deg; }
.strip-arrow[data-dir="1"]{ right:0; justify-content:flex-end; --arrow-fade:270deg; }
.strip-arrow svg{ position:relative; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.strip-item:focus-within{ outline:1px solid var(--ink-2); outline-offset:3px; }
/* 条不在视野里时按钮淡出 */
.strip-wrap .strip-arrow{ opacity:0; pointer-events:none; }
.strip.is-live ~ .strip-arrow{ opacity:1; pointer-events:auto; }
.strip-wrap .strip.is-grid ~ .strip-arrow{ visibility:hidden; pointer-events:none; }
.strip-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* 悬浮更显眼 */
.strip-arrow:hover{ color:var(--ink); }
.strip-arrow:hover svg{ transform:scale(1.18); }
.strip-arrow svg{ transition:transform .35s var(--ease); }
.strip-arrow:active svg{ transform:scale(1.02); }
.strip-wrap .strip.is-live ~ .strip-arrow:disabled{ opacity:.24; pointer-events:none; }

/* 新作品延续原有轨道和网格的尺度；彩色照片按原比例逐张排开。 */
.seaside-wrap{ padding-block:clamp(36px,6vw,88px); }
.sea-strip{
  height:clamp(310px,54vh,560px); overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; cursor:grab; touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
}
.sea-strip::-webkit-scrollbar{ display:none; }
.sea-strip.is-drag{ cursor:grabbing; }
.sea-track{ display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); width:max-content; height:100%; padding-inline:var(--gut); }
.new-photo{ position:relative; flex:0 0 auto; height:100%; aspect-ratio:var(--photo-ratio); background:var(--surface); }
.new-photo img{ display:block; width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.new-photo.is-preview-error img{ visibility:hidden; }
.sea-strip.is-drag .new-photo{ pointer-events:none; }
.sea-strip.is-live ~ .strip-arrow{ opacity:1; pointer-events:auto; }
.seaside-wrap .sea-strip.is-live ~ .strip-arrow:disabled{ opacity:.24; pointer-events:none; }
.seaside-wrap .strip-arrow{ top:clamp(36px,6vw,88px); bottom:clamp(36px,6vw,88px); }
.bell-gallery{
  --day-grid-gap:clamp(12px,1.4vw,20px);
  display:flex; flex-direction:column; align-items:stretch; gap:var(--day-grid-gap);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(22px,3vw,38px) var(--gut) clamp(56px,6vw,88px);
}
.bell-gallery .new-photo{ display:block; }
.bell-gallery .new-photo img{ object-fit:contain; }
.bell-grid-row{ display:flex; align-items:flex-start; gap:var(--day-grid-gap); width:100%; }
.new-photo .preview-retry{ z-index:2; }
@media (max-width:900px){
  .seaside-wrap{ padding-block:22px; }
  .seaside-wrap .strip-arrow{ top:22px; bottom:22px; }
  .sea-strip{ height:min(54vh,500px); min-height:300px; }
}

/* 层叠 ↔ 网格切换 */
.view-toggle{
  position:absolute; right:clamp(18px,2.8vw,42px); bottom:clamp(14px,2vw,28px); z-index:7;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-2); background:rgba(10,12,9,.52);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  transition:color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.view-toggle:hover{ color:var(--ink); background:rgba(237,234,227,.13); transform:scale(1.14); }
.view-toggle svg{ grid-area:1/1; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.35; transition:opacity .3s var(--ease), transform .4s var(--ease); }
.view-toggle .ico-stack{ opacity:0; transform:rotate(-25deg) scale(.75); }
.view-toggle.is-grid .ico-grid{ opacity:0; transform:rotate(25deg) scale(.75); }
.view-toggle.is-grid .ico-stack{ opacity:1; transform:none; }
html.is-daytime-open .proj-daytime .view-toggle{
  color:var(--ink); background:rgba(32,35,31,.08);
}
html.is-daytime-open .proj-daytime .view-toggle:hover{ background:rgba(32,35,31,.16); }

/* 影像待补的项目：展开区保持空，不留占位块 —— 出假图比空着更糟。
   给一个零高度的锚点，将来直接把内容塞进来即可 */
.proj-pending{ display:block; }
/* 单幅大图（.shot-fig）—— app.js 的环境取色与灯箱都按这个选择器取样，
   即使当前没有实例也必须保留 */
.shot-fig img{ display:block; width:100%; height:auto; background:var(--surface); cursor:zoom-in; }
.shot-fig figcaption{
  display:flex; justify-content:space-between; gap:16px;
  padding-top:13px; font-size:var(--fs-meta); letter-spacing:normal; color:var(--ink-3);
}
.shot-fig figcaption span:last-child{ font-family:var(--mono); }

.frame{ position:relative; overflow:hidden; background:var(--surface); }
.frame img{ display:block; width:100%; height:auto; }
.js .frame{ clip-path:inset(0 0 101% 0); transition:clip-path 1.5s var(--ease); }
.js .frame.is-in{ clip-path:inset(0 0 0 0); }

/* ── 联系：标题 → 两项主要联系方式 → 其他渠道 → 页脚 ── */
.page-contact main{ min-height:100vh; display:flex; flex-direction:column; }
.page-contact main > .wrap{ width:100%; }
.page-contact .site-footer{ margin-top:auto; }
.contact-body{ padding-top:var(--space-16); }
.contact-details{
  display:flex; flex-direction:column; gap:var(--space-6);
  min-height:clamp(360px,50vh,480px);
}
.contact-row{
  display:grid; grid-template-columns:var(--about-col) minmax(0,1fr);
  column-gap:var(--about-gap); align-items:start;
}
.contact-row h2{
  font-family:var(--ui); font-size:var(--fs-meta); font-weight:var(--w-label);
  letter-spacing:var(--ls-meta); line-height:1.55;
  color:var(--ink-3); text-transform:uppercase;
}
.contact-value{
  font-family:var(--ui); font-size:clamp(16px,1.3vw,18px);
  font-weight:var(--w-body); line-height:1.35; letter-spacing:normal;
  color:var(--ink); overflow-wrap:anywhere; width:max-content; max-width:100%;
}
.contact-mail{ text-underline-offset:4px; transition:color .3s var(--ease); }
.contact-mail:hover,.contact-mail:focus-visible{ color:var(--ink-2); text-decoration:underline; }
/* 主要联系途径靠上，其他渠道沿同一网格落在下部；空白成为两组的分隔。 */
.contact-elsewhere{ margin-top:auto; }
.contact-elsewhere p, .contact-elsewhere a{
  font-family:var(--cjk); font-size:var(--fs-body);
  line-height:1.8; letter-spacing:.02em; color:var(--ink-2);
}
.contact-elsewhere a{ transition:color .4s var(--ease); }
.contact-elsewhere a:hover{ color:var(--ink); }

/* ── 大图 ───────────────────────────────────────────────── */
.lb{
  --bg:#080A07; --ink:#EDEAE3; --ink-2:rgba(237,234,227,.94); --ink-3:rgba(237,234,227,.86);
  color:var(--ink);
  position:fixed; inset:0; z-index:9400;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,4vw,60px);
  background:rgba(4,5,4,.988);
  visibility:hidden; opacity:0;
  transition:opacity .5s var(--ease), visibility .5s;
}
.lb.is-open{ visibility:visible; opacity:1; }
.lb-stage{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:100%; max-height:100%; min-width:min(72vw,760px); min-height:min(68vh,640px);
  justify-content:center;
}
.lb-media{ display:grid; place-items:center; max-width:100%; min-width:0; }
.lb-stage img[hidden]{ display:none; }
.lb-stage img{
  max-width:100%; max-height:calc(100vh - 150px); width:auto; height:auto;
  opacity:0; transform:scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.lb.is-open .lb-stage img{ opacity:1; transform:none; }
.lb-stage figcaption{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.16em; color:var(--ink-3); }
.lb-caption{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:16px; row-gap:4px; }
#lbOriginal{ display:inline-block; color:inherit; padding:6px 10px; text-decoration:none; text-underline-offset:3px; }
#lbOriginal:hover,#lbOriginal:focus-visible{ color:var(--ink); text-decoration:underline; }
.lb-loading{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
  width:max-content; max-width:100%; padding:6px 9px; background:rgba(4,5,4,.48);
  color:var(--ink-2); font-size:11px; line-height:1.5; letter-spacing:.02em;
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.lb.is-loading .lb-loading,.lb.is-error .lb-loading{ opacity:1; visibility:visible; }
.lb.is-error .lb-loading i{ display:none; }
#lbRetry{ padding:4px 8px; text-decoration:underline; text-underline-offset:3px; }
#lbRetry[hidden]{ display:none; }
.lb-loading i{
  width:12px; height:12px; flex:none; border-radius:50%;
  border:1px solid rgba(237,234,227,.18); border-top-color:rgba(237,234,227,.78);
  animation:lbSpin .9s linear infinite;
}
@keyframes lbSpin{ to{ transform:rotate(360deg); } }

/* 灯箱控件：UI chrome，不参与版面文字的字号阶梯
   （尺寸按图标本身定，与 :root 的 --fs-* 无关 —— 见阶梯注释的「边界」） */
.lb-close,.lb-prev,.lb-next{
  position:absolute; z-index:2; color:rgba(237,234,227,.6);
  transition:color .4s var(--ease), transform .4s var(--ease);
  line-height:1;
}
.lb-close{ top:clamp(16px,2.4vw,30px); right:clamp(18px,2.6vw,34px); font-size:17px; }
.lb-prev{ left:clamp(12px,2vw,30px); top:50%; transform:translateY(-50%); font-size:22px; }
.lb-next{ right:clamp(12px,2vw,30px); top:50%; transform:translateY(-50%); font-size:22px; }
.lb-close:hover{ color:#fff; transform:rotate(90deg); }
.lb-prev:hover,.lb-next:hover{ color:#fff; }
.lb-prev:disabled,.lb-next:disabled{ opacity:.22; pointer-events:none; }

/* ── 文字进场 ───────────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ── 响应式 ─────────────────────────────────────────────── */
@media (min-width:901px){
  .about-sec-inner{ align-items:first baseline; }
  .about-sec .label{
    align-self:first baseline;
    position:relative; top:-1px;
  }
  /* 小字号数字的字面偏低，在共同首行基线上做光学校正。 */
  .about-sec .cv-year{ position:relative; top:-2px; }
  .about-meta dt{ position:relative; top:-1px; }
}
@media (max-width:900px){
  .about-sec + .about-sec{ padding-top:88px; }
  :root{ --head-h:60px; --section-gap:72px; --footer-gap:48px; }
  .nav-links{ gap:clamp(14px,4vw,22px); }
  .nav-links a.is-current::before{ top:-7px; }
  /* 简介页：生年换行展示（窄屏放不下） */
  .about-origin{ white-space:normal; }
  /* 肖像与自述上下堆叠，肖像在前；窄屏也不再放大，保持注脚的体量 */
  .about-cols{ grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
  .about-cols .about-fig{ width:96px; max-width:100%; margin-top:0; }
  /* 节标签改横排一行，省一行高度 */
  .about-sec .label{
    flex-direction:row; flex-wrap:wrap; align-items:baseline;
    column-gap:8px; row-gap:4px;
  }
  .exh-toggle{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:4px; }
  /* 栏目标题在内容上方：24px 引入内容，72px 分隔下一栏目。 */
  .about-sec-inner,
  .cv-item{ grid-template-columns:minmax(0,1fr); }
  .about-sec-inner{ row-gap:24px; }
  .about-info .about-sec-inner{ row-gap:var(--space-2); }
  /* 年份在名称上方，两者算一组：缝使用 8px，别把它当独立一行 */
  .cv-item{ row-gap:8px; }
  .cv-main{ grid-template-columns:minmax(0,1fr); }
  .cv-project-link{ grid-template-columns:minmax(0,1fr); row-gap:4px; }
  /* Info 的字段和值贴近成组，不为单个短字段撑出空列。 */
  .about-meta{ row-gap:5px; }
  .contact-row{ grid-template-columns:80px minmax(0,1fr); column-gap:var(--space-4); }
  .strip-arrow{ width:clamp(54px,16vw,72px); padding-inline:18px; }
  .strip-arrow svg{ width:16px; height:16px; }
  .work-statement{ grid-template-columns:minmax(0,1fr); row-gap:16px; }
  .work-statement-copy{ grid-template-columns:minmax(0,1fr); row-gap:var(--space-8); }
  .work-statement-zh,.work-statement-translation{ display:block; }
  .work-statement-copy p + p{ margin-top:20px; }
  .day-stage{ padding-inline:clamp(0px,3vw,30px); }
  /* 序号使用左页边的空间，作品名与页标题共用正文左轴。
     第一列完整占用 gutter，列间不再重复增加偏移。 */
  .proj-row{
    padding-inline:0 var(--gut);
    grid-template-columns:var(--gut) minmax(0,1fr) 22px;
    grid-template-areas:'i t s' 'i e s' 'i m s';
    column-gap:0; row-gap:8px; align-items:baseline;
  }
  .proj-static .proj-row{ grid-template-areas:'i t s' 'i e s' 'i status s' 'i m s'; }
  .proj-status{ grid-area:status; margin-top:0; }
  .proj-idx{ grid-area:i; justify-self:end; padding-right:4px; }
  .proj-title{ grid-area:t; }
  .proj-title,.proj-en{ padding-right:var(--row-gap); }
  .proj-en{ grid-area:e; display:block; min-width:0; overflow-wrap:normal; word-break:normal; }
  .proj-meta{ grid-area:m; } .proj-sign{ grid-area:s; align-self:center; }
}
@media (max-width:600px){
  .proj-row{ row-gap:4px; }
  .proj-meta{ margin-top:4px; }
  .day-carousel{ padding-top:22px; }
  .day-stage{ min-height:340px; padding-inline:0; }
  .day-slide{ height:min(58vh,500px); min-height:340px; gap:12px; }
  .day-slide--pair{ grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); height:min(78vh,680px); }
  .day-slide--final-pair{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); height:min(58vh,500px); }
  .day-slide--trio{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .day-slide--trio .day-shot:last-child{ grid-column:1 / -1; width:min(52%,230px); }
  .day-slide--stack{ grid-template-rows:repeat(2,minmax(0,1fr)); }
  .work-statement{ padding-top:44px; padding-bottom:84px; }
  .lb-prev,.lb-next{ top:auto; bottom:clamp(14px,3vw,24px); transform:none; }
  .lb-stage img{ max-height:calc(100vh - 190px); }
}

@media (prefers-reduced-motion:reduce){
  .entry-cue-wave-outer{ animation:none; opacity:.68; }
  html{ scroll-behavior:auto; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .js .frame{ clip-path:none !important; }
  .loader{ display:none; }
  html.has-cursor, html.has-cursor *{ cursor:auto !important; }
  .fx-cursor{ display:none !important; }
}

/* 白日流星的白色目录：四组双语标题使用相同轨道与留白。 */
html.is-daytime-open .proj{ border-top:1px solid var(--day-rule); padding-top:0; padding-bottom:0; }
html.is-daytime-open .proj .proj-head{ padding-block:24px; }
html.is-daytime-open .proj-daytime.is-open .proj-head{ border-bottom:1px solid var(--day-rule); }
.lb{ touch-action:pan-y pinch-zoom; }
.lb-stage img{ user-select:none; -webkit-user-drag:none; }
@media(max-width:900px){
  html.is-daytime-open .proj .proj-head{ padding-block:20px; }
}