/* ==========================================================================
   暗房日记 —— 样式表

   三层结构：
     首页（精选聚合） / 分类页（细分栏） / 项目页（详情）

   设计基调：米白 / 暖灰 / 墨黑，低饱和。大留白，细线分割，少卡片，少圆角。
   精密感来自四件事：
     ① 清晰的字阶（显示级 / 标题级 / 正文级 / 微字级，比例拉开）
     ② 发丝线的三级层次（主分隔 / 常规 / 极淡）
     ③ 数字与微标签用等宽字体（tabular，对齐、克制、档案感）
     ④ 统一的留白节奏（8 的倍数）
   绝不使用：圆角、投影、渐变、弹跳动画。
   类别色：摄影=赭石 视频=雾蓝 剪辑=苔绿（改 --clay / --mist / --moss 即可）
   ========================================================================== */

:root{
  /* 明确声明只支持浅色，避免手机浏览器的「自动深色」把整页反色成黑底 */
  color-scheme: only light;

  /* ---- 纸与墨 ---- */
  --paper:      #F2EFE9;   /* 主背景 */
  --paper-hi:   #F7F5F1;   /* 比纸更亮：浮层、芯片 */
  --paper-warm: #E9E4DB;   /* 图片未就位时的底 */
  --ink:        #171614;   /* 标题、强调 */
  --ink-soft:   #4A4640;   /* 正文 */
  --grey:       #857E73;   /* 次级文字 */
  --grey-light: #A6A096;   /* 微字 */

  /* ---- 发丝线三级 ---- */
  --rule-strong: #C4BCAF;  /* 页眉 / 区块头 —— 稍重，用来立骨架 */
  --rule:        #DCD6CB;  /* 常规分隔 */
  --rule-soft:   #E8E2D8;  /* 内部细线 */
  --rule-faint:  #EFEAE1;  /* 几乎不可见 */

  /* ---- 类别色 ---- */
  --clay: #9C7A5B;   /* 摄影 */
  --mist: #6E7C8A;   /* 视频 */
  --moss: #6F7A63;   /* 剪辑 */
  --accent: var(--clay);

  /* ---- 字体 ---- */
  /* 标题：宋体 / 衬线 */
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", Georgia, serif;
  /* 正文：干净无衬线 */
  --sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
           "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  /* 数字与微标签：等宽（CJK 会回落到后面的黑体，数字保持等宽对齐） */
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", "Cascadia Mono",
           "Segoe UI Mono", Consolas, "Liberation Mono", Menlo,
           "PingFang SC", "Microsoft YaHei", monospace;

  /* ---- 字阶 ---- */
  /* display 级是首页站名（我的暗房，三字）。
     原值 clamp(48px,9.4vw,124px) 是按四字「时光胶囊」调的；换成三字后
     手机上只填充约 62% 宽度，明显偏小偏空。

     实测（390px 屏可用 338px / 320px 屏可用 280px）：
       48px + .10em → 211px（填充 62%，偏空）
       66px + .06em → 280px（填充 83%，320px 下恰好不溢出）
     所以只把「下限」从 48 提到 62（配合 .06em 字距），vw 系数与上限保持不变 ——
     这样手机端标题变大，平板/桌面的渐变节奏完全不受影响。
     ⚠️ 站名再改字数时，这里要重新量。 */
  --fs-display: clamp(62px, 9.4vw, 124px);
  --fs-h1:      clamp(36px, 5.2vw, 60px);
  --fs-h2:      clamp(24px, 2.6vw, 32px);
  --fs-h3:      22px;
  --fs-lead:    17px;
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-meta:    11px;
  --fs-micro:   10px;

  /* ---- 字距 ---- */
  --tk-micro: .16em;   /* 全大写 / 数字微标签 */
  --tk-label: .14em;
  --tk-cjk:   .03em;   /* 中文正文与标题：只加一点点 */
  --tk-title: .06em;

  /* ---- 留白节奏（8 的倍数） ---- */
  --s1: 8px;  --s2: 12px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;

  --gap: 32px;
  --ease: cubic-bezier(.22,.61,.24,1);
  --dur: 900ms;

  /* 全站图片的统一去饱和程度：所有图片（封面 / 图册 / 视频海报 / 灯箱）
     共用这一个值，画面才是一套的。想整体更"素"就调到 .78。 */
  --img-sat: .84;
}

[data-cat="photography"]{ --accent: var(--clay); }
[data-cat="edit"]{ --accent: var(--moss); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.92;
  letter-spacing:var(--tk-cjk);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 极淡的纸纹 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; text-underline-offset:3px; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:#E2DAC9; color:var(--ink); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }

/* 触摸设备：浏览器会给被点中的链接/按钮画一块自带的高亮
   （Android 上多为浅蓝半透明方块，iOS 上是浅灰），和本站的克制气质冲突。
   这里关掉它 —— 点按反馈改由我们自己的 :active、下划线和图片淡入来承担。
   （键盘操作的焦点圈由上面的 :focus-visible 保留，无障碍不受影响。） */
html,a,button,[role="button"]{ -webkit-tap-highlight-color:transparent; }

h1,h2,h3{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  margin:0; letter-spacing:var(--tk-title); line-height:1.3;
}

/* ---------- 微标签：全站最小的一级字 ---------- */
.label{
  display:inline-block;
  font-family:var(--mono);
  font-size:var(--fs-micro); letter-spacing:var(--tk-label); text-transform:uppercase;
  color:var(--grey-light); line-height:1.4; font-weight:400;
}

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 40px; position:relative; z-index:1; }

/* 悬停下划线：从左展开 */
.link-line{ position:relative; display:inline-block; font-style:normal; }
.link-line::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.link-line:hover::after, a:hover .link-line::after{ transform:scaleX(1); }

/* ---------- 顶栏（始终可见，仅作入口） ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(242,239,233,.86);
  backdrop-filter:saturate(130%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.head-inner{
  max-width:1180px; margin:0 auto; padding:20px 40px 18px;
  display:flex; align-items:flex-end; gap:26px;
}
/* 站名靠左；margin-right:auto 把后面两项（导航、音乐播放器）一起推到右边 */
.brand{ display:block; margin-right:auto; min-width:0; }
.brand-name{
  display:block; font-family:var(--serif); font-size:19px;
  color:var(--ink); letter-spacing:.18em; line-height:1.35;
}
.brand-sub{
  display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:var(--tk-micro); color:var(--grey-light); margin-top:4px; line-height:1.5;
}
.nav{ display:flex; gap:26px; align-items:flex-end; padding-bottom:2px; flex-wrap:wrap; }
.nav a{
  position:relative;
  font-size:12.5px; letter-spacing:.1em; color:var(--grey);
  padding-bottom:5px;
  transition:color .4s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
/* 触屏没有 hover：按下瞬间就给颜色，激活项留一条墨色细线（下划线略带展开动画） */
.nav a:active{ color:var(--ink); }
.nav a:active::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--ink); }
.nav a.is-active::after{ transform:scaleX(1); }

/* ---------- 通用 ---------- */
.app{ min-height:66vh; position:relative; z-index:1; }
/* 只用 padding-top/bottom：写成简写会把 .wrap 的左右留白一起清成 0（内容就贴边了） */
.page{ padding-top:48px; padding-bottom:var(--s9); }
.page-enter{ animation:pageIn .7s var(--ease) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* 图片淡入：配懒加载 —— 滚进视口才下载，下载完才轻柔浮现。
   用 .fade-on 包一层：脚本没跑起来时图片照常显示，不会整片空白。 */
.fade-on .shot-frame > img,
.fade-on .frame > img{ opacity:0; transition:opacity .9s var(--ease); }
.fade-on .shot-frame > img.is-in,
.fade-on .frame > img.is-in{ opacity:1; }

.sec{ margin-top:var(--s8); }
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:14px; border-bottom:1px solid var(--rule-strong); margin-bottom:var(--s5);
}
.sec-note{ font-size:var(--fs-sm); color:var(--grey); margin:-14px 0 38px; max-width:52ch; line-height:1.95; }
.empty{ font-size:14px; color:var(--grey); padding:44px 0; line-height:2; }
.empty code{ font-family:var(--mono); color:var(--ink); font-size:13px; }

/* 脚本没跑起来时的提示块（正常情况下会被替换掉） */
.boot{ max-width:640px; margin:96px auto 0; padding:0 40px; }
.boot-title{ font-family:var(--serif); font-size:23px; letter-spacing:var(--tk-title); color:var(--ink); margin:0 0 16px; }
.boot-text{ font-size:14px; line-height:2; color:var(--grey); margin:0 0 10px; }
.boot-text strong{ color:var(--ink); font-weight:400; }
.boot-text code{
  font-family:var(--mono); color:var(--ink); background:var(--paper-warm);
  padding:2px 7px; margin:0 2px; font-size:12.5px;
}
.boot-text em{ font-style:normal; color:var(--clay); }

/* ---------- 面包屑 ---------- */
.crumbs{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:var(--tk-micro);
  padding:10px 0 0;
}
.crumbs a{ color:var(--grey); transition:color .4s var(--ease); }
.crumbs a:hover{ color:var(--ink); }
.cr-cur{ color:var(--ink); }
.cr-sep{ color:var(--rule); }

/* ---------- 首页 · 封面 ---------- */
.cover{ padding:6px 0 0; }
.cover-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-bottom:15px; border-bottom:1px solid var(--rule-strong);
}
.cover-main{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:64px; align-items:end; padding:66px 0 58px;
}
/* 站名三字（我的暗房）比原来的四字（时光胶囊）短一截，同一字号下会显得左列空、标题弱。
   加字距 + 提下限把它撑回来（数值见 --fs-display 的注释）。
   ⚠️ 字数再变（比如改成五字）要回来复核这里的 letter-spacing，否则会过松或过挤。 */
.cover-title{
  font-size:var(--fs-display); line-height:1.02; letter-spacing:.06em; margin:0;
}
.cover-side{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:10px; }
.cover-intro{
  font-size:14px; line-height:2.25; color:var(--ink-soft);
  max-width:30ch; white-space:pre-line; margin:0;
}
.cover-vert{
  writing-mode:vertical-rl; font-family:var(--mono); font-size:9.5px; letter-spacing:.32em;
  color:var(--grey-light); line-height:1; white-space:nowrap;
}
.cover-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-top:15px; border-top:1px solid var(--rule);
}

/* 首页开场大图 */
.opening{ margin:var(--s7) 0 0; }
.opening-frame{
  position:relative; overflow:hidden; background:var(--paper-warm); aspect-ratio:21/9;
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.06);
}
.opening-frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(var(--img-sat)); }
.opening figcaption{
  margin-top:13px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:var(--tk-micro); color:var(--grey-light);
}

/* ---------- 卡片网格（首页精选 / 分类列表 / 档案） ---------- */
/* 首页精选 / 分类项目列表：改为瀑布流（多列），不再用 grid。
   原因：封面比例现在跟随素材真实尺寸，横图竖图混排时 grid 的两列会被最高的一张撑高，
   短图下面必然留出大片空白（实测右侧竖图比左侧横图长出近一倍）。
   瀑布流让每张卡按自身高度紧接下一张，和「图册」用同一套机制，视觉上更连续。 */
.picks{ column-count:2; column-gap:48px; }
.pick{ display:block; break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 64px; }
/* 首页头条：单独一段，通栏，不属于 .picks 的多列流 */
.picks-lead{ margin-bottom:72px; }
.picks-lead .pick{ margin:0; }
.pick-figure{
  position:relative; overflow:hidden; background:var(--paper-warm);
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.06);
}
/* 头条（首页第一张）：通栏大图，比例同样跟随真实尺寸。
   这里保留 21/9 只是「图片还没下载完」时的占位高度，load 后会被真实比例覆盖。 */
.pick.is-lead .pick-figure{ aspect-ratio:21/9; }
/* 封面框：比例以素材真实尺寸为准（JS 在图片 load 后用 naturalWidth/Height 写入）。
   CSS 不写死任何比例，避免和数据里的 coverRatio 打架。 */
.pick-figure img{
  width:100%; height:100%; object-fit:cover; filter:saturate(var(--img-sat)); opacity:.94;
  transition:transform 1.5s var(--ease), opacity .8s var(--ease);
}
.pick:hover .pick-figure img{ transform:scale(1.025); opacity:1; }
.badge{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--paper); color:var(--accent);
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  padding:6px 9px 5px; line-height:1.3;
}
.pick-body{ padding:17px 0 0; border-top:1px solid var(--rule-soft); margin-top:22px; }
.pick-meta{
  display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:var(--tk-micro); color:var(--grey-light); text-transform:uppercase;
}
.pick-title{ font-size:var(--fs-h3); letter-spacing:var(--tk-title); margin:11px 0 0; line-height:1.42; }
.pick.is-lead .pick-title{ font-size:var(--fs-h2); }
.pick-sum{ font-size:var(--fs-sm); color:var(--grey); margin:9px 0 0; line-height:1.9; max-width:46ch; }
.pick-tags{ display:block; margin-top:15px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--accent); }

/* ---------- 筛选条 ---------- */
/* 层次：上沿用重线立骨架（与页头同一级），下沿用极淡线收尾。
   原来上下都是 --rule，像一张表格；现在上重下轻，视线从标题落进来更顺。 */
.facets{
  padding:22px 0; margin:0 0 54px;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-faint);
}
.facet{ display:flex; gap:22px; align-items:baseline; padding:7px 0; }
.facet-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:var(--grey-light); text-transform:uppercase; min-width:44px; flex:none;
}
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  font-size:12.5px; letter-spacing:.05em; color:var(--grey);
  border:1px solid var(--rule-soft); background:transparent;
  padding:6px 12px 5px;
  transition:border-color .4s var(--ease), color .4s var(--ease),
             background-color .4s var(--ease);
}
.chip i{ font-family:var(--mono); font-style:normal; color:var(--grey-light); margin-left:8px; font-size:9.5px; }
.chip:hover{ border-color:var(--rule-strong); color:var(--ink); background:var(--paper-hi); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip.is-on i{ color:rgba(242,239,233,.6); }

/* ---------- 视图切换（图册 / 项目） ---------- */
.view-switch{
  display:flex; gap:32px; align-items:baseline;
  border-bottom:1px solid var(--rule); margin:0 0 46px;
}
.view-switch a{
  position:relative; display:block; font-size:12.5px; letter-spacing:.1em; color:var(--grey);
  padding-bottom:13px; transition:color .4s var(--ease);
}
.view-switch a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.view-switch a:hover{ color:var(--ink); }
.view-switch a.is-on{ color:var(--ink); }
.view-switch a.is-on::after{ transform:scaleX(1); }
.view-switch a i{
  font-family:var(--mono); font-style:normal; font-size:9.5px;
  color:var(--grey-light); margin-left:8px; letter-spacing:0;
}
.view-switch a.is-on i{ color:var(--accent); }

/* ---------- 图册（瀑布流） ---------- */
/* 三列时 20px 的列距偏紧，图和图挤在一起显得密；放到 24px，
   行距同步加到 32px，让每一格有独立的呼吸感。 */
.album{ column-count:3; column-gap:24px; }
.shot{ break-inside:avoid; -webkit-column-break-inside:avoid; display:block; margin:0 0 32px; }
.shot-frame{
  position:relative; overflow:hidden; background:var(--paper-warm);
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.05);
}
.shot-frame img{
  width:100%; height:100%; object-fit:cover; filter:saturate(var(--img-sat));
  cursor:zoom-in; transition:transform 1.5s var(--ease), opacity .7s var(--ease);
}
.shot:hover .shot-frame img{ transform:scale(1.025); }
.shot-frame .video{ height:100%; }
.shot-label{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.07em;
  color:var(--grey-light); line-height:1.75;
}
.shot-label b{ font-weight:400; color:var(--grey); }
.shot-label i{ font-style:normal; margin:0 6px; color:var(--rule); }

/* ---------- 加载更多 ---------- */
/* 上沿用重线，和筛选条、区块头同一级，页面由此形成"重—轻—重"的节奏；
   按钮的短下划线改成整条 1px 细线延伸到右侧，更像档案页的"续页"。 */
.more-wrap{
  margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule-strong);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.more{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:opacity .4s var(--ease);
}
.more:hover{ opacity:.55; }
.more-count{
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:var(--grey-light); text-transform:uppercase;
}

/* ---------- 页头（分类 / 档案 / 关于） ---------- */
.cat-head{ padding:var(--s4) 0 var(--s6); border-bottom:1px solid var(--rule-strong); }
.cat-head .label{ display:block; margin-bottom:20px; }
.cat-title{ font-size:var(--fs-h1); letter-spacing:var(--tk-title); line-height:1.2; }
.cat-lead{ font-size:14px; color:var(--grey); margin:15px 0 0; letter-spacing:var(--tk-cjk); }
.cat-foot{
  margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.back{
  font-family:var(--mono); font-size:10px; letter-spacing:var(--tk-micro);
  color:var(--grey); transition:color .4s var(--ease);
}
.back:hover{ color:var(--ink); }

/* 首页底部的轻量入口（不占主体） */
.soft-links{
  display:flex; gap:24px; align-items:baseline; flex-wrap:wrap;
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--rule-faint);
  font-size:var(--fs-sm); letter-spacing:.05em;
}
.quick{ display:flex; gap:24px; flex-wrap:wrap; }
.quick a i{ font-family:var(--mono); font-style:normal; color:var(--grey-light); font-size:9.5px; margin-left:5px; }

/* ---------- 项目页 ---------- */
.proj-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:var(--s6); padding-bottom:15px; border-bottom:1px solid var(--rule-strong);
}
.proj-hero{
  position:relative; margin:var(--s6) 0 0; background:var(--paper-warm);
  overflow:hidden; aspect-ratio:21/9;
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.06);
}
.proj-hero img{ width:100%; height:100%; object-fit:cover; filter:saturate(var(--img-sat)); }

.proj-head{ padding:var(--s6) 0 0; }
.proj-cat{
  display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:var(--tk-micro); text-transform:uppercase; color:var(--accent); margin-bottom:20px;
}
.proj-title{ font-size:var(--fs-h1); letter-spacing:var(--tk-title); line-height:1.22; }
.proj-meta{
  display:flex; align-items:baseline; gap:22px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; letter-spacing:var(--tk-micro); color:var(--grey);
}
.proj-rule{ width:36px; height:1px; background:var(--rule-strong); }
.proj-meta span:last-child{ font-family:var(--sans); letter-spacing:var(--tk-cjk); font-size:13px; color:var(--ink-soft); }

/* 引言：竖线用伪元素绝对定位，不占正文宽度 ——
   这样引言的左边缘和上方的项目标题、下方的素材框严格对齐，
   而不是被 28px 的 padding 推成一条"缩进段落"（那样会显得没对齐）。 */
.proj-lead{
  position:relative;
  max-width:44ch; margin:var(--s6) 0 var(--s8); padding-left:26px;
  font-family:var(--serif); font-size:var(--fs-lead); line-height:2.1;
  color:var(--ink); white-space:pre-line; letter-spacing:var(--tk-cjk);
}
.proj-lead::before{
  content:""; position:absolute; left:0; top:.55em; bottom:.55em;
  width:1px; background:var(--accent);
}

.media-seq{ display:flex; flex-wrap:wrap; gap:76px var(--gap); }
figure.media{ margin:0; flex:0 0 100%; max-width:100%; }
figure.media.span-half{ flex:1 1 calc(50% - var(--gap)); max-width:calc(50% - var(--gap)); min-width:280px; }
figure.media.span-mid{ max-width:760px; margin-left:auto; margin-right:auto; }
figure.media .frame{
  position:relative; background:var(--paper-warm); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.05);
}
figure.media img{
  width:100%; height:100%; object-fit:cover; filter:saturate(var(--img-sat));
  cursor:zoom-in; transition:transform 1.6s var(--ease);
}
figure.media img:hover{ transform:scale(1.012); }
figure.media figcaption{
  margin-top:15px; display:flex; gap:14px; align-items:baseline;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--grey-light);
}
figure.media figcaption .c-idx{ color:var(--accent); }
.proj-tags{ margin-top:var(--s6); }
.tag-line{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--accent); }

.missing{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:var(--paper-warm); border:1px solid var(--rule-soft);
  color:var(--grey-light); font-family:var(--mono); font-size:9.5px;
  letter-spacing:var(--tk-micro); text-align:center; padding:20px;
}
.missing .m-mark{ font-family:var(--serif); font-size:20px; color:#BEB6A9; }
.has-missing .missing{ display:flex; }
.has-missing > img{ visibility:hidden; }
/* 素材缺失：图册格子 / 项目页素材框整格收起，版面不留空白 */
.shot-frame.has-missing,
.frame.has-missing{ display:none; }

/* 视频 */
.video{ position:relative; width:100%; background:var(--paper-warm); overflow:hidden; }
.video .poster{ width:100%; height:100%; object-fit:cover; filter:saturate(var(--img-sat)); opacity:.94; }
.video .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition:background-color .6s var(--ease);
}
.video .play i{
  width:72px; height:72px; border:1px solid rgba(242,239,233,.85); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
}
.video .play i::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:11px solid rgba(242,239,233,.92);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.video:hover .play{ background:rgba(23,22,20,.16); }
.video:hover .play i{ background:rgba(23,22,20,.22); border-color:#F2EFE9; }
.video .play span{
  position:absolute; left:0; right:0; bottom:30px; text-align:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:rgba(242,239,233,.85);
}
.video.is-playing .poster{ display:none; }
.video video{ width:100%; height:100%; display:block; background:#111; }
.video.is-broken .play i{ border-color:var(--grey-light); }
.video.is-broken .play i::before{ border-left-color:var(--grey-light); }
.video.is-broken .play span{ color:var(--grey); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 制作信息 */
.credits{ margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule); }
.credits .label{ display:block; margin-bottom:24px; }
.credits dl{
  margin:0; display:grid; grid-template-columns:112px 1fr;
  row-gap:15px; column-gap:20px; max-width:560px;
}
.credits dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:var(--grey-light); text-transform:uppercase; padding-top:5px;
}
.credits dd{ margin:0; font-size:14px; color:var(--ink-soft); }

/* 上/下一个 */
.pager{
  margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:24px;
}
.p-dir{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:var(--grey-light); text-transform:uppercase; margin-bottom:10px;
}
.p-title{
  font-family:var(--serif); font-size:20px; letter-spacing:var(--tk-title);
  color:var(--ink); transition:opacity .4s var(--ease); line-height:1.4;
}
.pager a:hover .p-title{ opacity:.5; }
.p-next{ text-align:right; }

/* ---------- 关于 ---------- */
.about-body{ max-width:640px; padding-top:var(--s3); }
.about-body p{ line-height:2.25; margin:0 0 26px; }
.about-mail{
  display:inline-block; font-family:var(--mono); font-size:15px; letter-spacing:.02em;
  color:var(--ink); border-bottom:1px solid var(--rule); padding-bottom:4px;
  transition:border-color .5s var(--ease);
}
.about-mail:hover{ border-bottom-color:var(--ink); }

/* ---------- 页脚 ---------- */
/* 不再加 margin-top：.page 自己已有 128px 底部内边距，
   再叠一层会变成 256px 的空洞。页脚的呼吸交给 .page 就够。 */
.site-foot{ border-top:1px solid var(--rule); }
.foot-inner{
  max-width:1180px; margin:0 auto; padding:40px 40px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:var(--grey-light); text-transform:uppercase;
}
/* 左侧版权说明稍亮一点，右侧站名保持最弱 —— 页脚只需被看见，不需要被读 */
.foot-left{ color:var(--grey); }

/* ---------- 灯箱 ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(242,239,233,.985);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s var(--ease);
}
/* 关键：作者样式的 display:flex 会压过浏览器对 hidden 的 display:none，
   必须显式恢复，否则不可见的灯箱会盖在全页上吃掉所有点击 */
.lightbox[hidden]{ display:none; }
/* 双保险：只有打开状态才接收点击，关闭/淡出过程绝不挡页面 */
.lightbox{ pointer-events:none; }
.lightbox.is-open{ pointer-events:auto; }
.lightbox.is-open{ opacity:1; }
.lb-figure{
  margin:0; width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:64px 76px;
}
.lb-stage{ display:flex; align-items:center; justify-content:center; max-height:100%; }
.lb-stage img{
  max-width:100%; max-height:calc(100vh - 150px); object-fit:contain;
  opacity:0; transition:opacity .45s var(--ease); filter:saturate(var(--img-sat));
}
.lb-stage img.is-ready{ opacity:1; }
.lb-caption{
  margin-top:26px; padding-top:14px; border-top:1px solid var(--rule-soft);
  display:flex; gap:22px; align-items:baseline; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:var(--tk-micro); color:var(--grey);
  min-width:200px;
}
.lb-count{ color:var(--grey-light); }
/* 关闭键：默认很淡，鼠标进来才变墨 —— 看图时不抢注意力；
   给足 44px 的点按区（手机上也能轻松按到）。 */
.lb-close{
  position:absolute; top:22px; right:26px;
  padding:10px 12px; min-height:44px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tk-micro);
  color:var(--grey); text-transform:uppercase; opacity:.75;
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.lb-close:hover{ color:var(--ink); opacity:1; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:26px; line-height:1; color:var(--grey-light);
  padding:22px 26px; transition:color .4s var(--ease);
}
.lb-nav:hover{ color:var(--ink); }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
body.lb-open{ overflow:hidden; }

/* ---------- 背景音乐播放器（顶栏内联 · 安静版） ----------
   没有边框、没有底色、没有投影：就是顶栏右侧四个 12px 的小图标，
   与站名／导航同一行（手机上落在站名右侧）。
   默认半透明，鼠标移上去、按下或键盘聚焦时才浮出来。
   没有曲目时保持 hidden —— .player[hidden] 必须写：
   作者样式的 display 会压过浏览器对 hidden 的默认 display:none（和灯箱同一个坑）。 */
.player{
  flex:none; display:flex; align-items:center;
  font-family:var(--mono); color:var(--grey-light);
}
.player[hidden]{ display:none; }

.player-ctl{ display:flex; align-items:center; gap:1px; }
.pl-btn{
  height:28px; min-width:28px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:inherit; opacity:.62;
  transition:opacity .35s var(--ease), color .35s var(--ease);
}
.pl-btn:hover,.pl-btn:focus-visible,.pl-btn:active{ opacity:1; color:var(--ink); }
.pl-btn.primary{ opacity:.85; color:var(--ink); }   /* 播放键是唯一略重的一个 */
.pl-btn.primary:hover{ opacity:1; }

.player svg{ width:12px; height:12px; display:block; flex:none; }
.player svg *{ fill:currentColor; }
.player svg .s{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }

/* 图标随状态切换 */
.player .ico-pause,.player .ico-unfold{ display:none; }
.player.is-playing .ico-play{ display:none; }
.player.is-playing .ico-pause{ display:block; }

/* 收起态：只剩「播放/暂停」和一个展开箭头，最安静 */
.player.is-min #plPrev,.player.is-min #plNext{ display:none; }
.player.is-min .player-ctl{ gap:0; }
.player.is-min .ico-fold{ display:none; }
.player.is-min .ico-unfold{ display:block; }

/* 出错提示：偶尔才出现，做成屏幕底部居中的一条小通知 ——
   不占顶栏位置，也不遮挡正文（它放在 header 之外，所以 position:fixed 才有效）。 */
.player-msg{
  position:fixed; left:50%; transform:translateX(-50%); z-index:130;
  bottom:calc(26px + env(safe-area-inset-bottom));
  max-width:min(88vw, 420px); margin:0; padding:9px 14px;
  background:var(--paper-hi); border:1px solid var(--rule-strong);
  font-size:11.5px; line-height:1.7; text-align:center; color:var(--ink);
}
.player-msg[hidden]{ display:none; }
/* ---------- 响应式 ---------- */
@media (max-width: 1000px){
  .cover-main{ grid-template-columns:1fr; gap:38px; align-items:start; }
  .cover-side{ align-items:flex-start; }
  .picks{ column-gap:36px; }
  .album{ column-count:2; column-gap:16px; }
}
/* 手机 / 小平板：整体放松，留白加大，图片放大 */
/* 窄一点的桌面：把导航间距收一收，给顶栏留余量 */
@media (max-width: 1100px){ .nav{ gap:18px; } }

@media (max-width: 760px){
  .wrap,.head-inner,.foot-inner{ padding-left:26px; padding-right:26px; }

  /* 正文：字号与行距各加一点，读起来不挤 */
  body{ font-size:16px; line-height:2; letter-spacing:.02em; }

  /* 顶栏：站名一行 + 播放器贴其右侧；导航独占第二行铺满 */
  .head-inner{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    justify-content:space-between; gap:14px 12px;
    padding-top:16px; padding-bottom:14px;
  }
  .brand{ margin-right:auto; max-width:58%; }
  .brand-name,.brand-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-name{ font-size:18px; }
  .nav{
    order:3; flex:0 0 100%;
    display:flex; flex-wrap:wrap; justify-content:space-between;
    gap:12px 10px; margin-top:2px; padding-bottom:0;
  }
  .nav a{ font-size:13px; letter-spacing:.06em; padding-bottom:4px; }
  /* 注意：手机端原来把下划线的伪元素关掉了（display 设为 none），那等于把"激活下划线"
     连同它的展开动画一起删掉。触屏没有 hover，下划线是唯一的激活指示，必须保留。 */

  .page{ padding-top:26px; padding-bottom:var(--s8); }
  .sec{ margin-top:80px; }
  .sec-head{ margin-bottom:var(--s5); padding-bottom:15px; gap:12px; }
  .sec-note{ margin:-10px 0 34px; font-size:14px; }
  .crumbs{ font-size:10px; gap:8px; padding-top:14px; }

  /* 首页封面 */
  .cover-main{ padding:46px 0 42px; gap:32px; }
  .cover-title{ letter-spacing:.06em; line-height:1.14; }
  .cover-intro{ font-size:15px; line-height:2.15; max-width:none; }
  .cover-vert{ display:none; }
  .cover-top,.cover-foot{ gap:12px; }
  .opening{ margin:46px 0 0; }
  .opening figcaption{ margin-top:14px; }
  .opening-frame{ box-shadow:none; }

  /* 卡片：手机上单列瀑布流（column-count:1 等价于普通竖排） */
  .picks{ column-count:1; column-gap:0; }
  .pick{ margin-bottom:60px; }
  .picks-lead{ margin-bottom:60px; }
  .pick.is-lead .pick-figure{ aspect-ratio:3/2; }
  .pick-figure,.shot-frame,figure.media .frame,.proj-hero{ box-shadow:none; }
  .pick-body{ padding-top:15px; margin-top:20px; }
  .pick-title{ font-size:21px; }
  .pick-meta{ font-size:10px; letter-spacing:.12em; }
  .pick-sum{ font-size:14px; line-height:1.95; max-width:none; }
  .pick-tags{ margin-top:17px; }

  /* 图册：手机上改单列，图片更大更透气 */
  .album{ column-count:1; column-gap:0; }
  .shot{ margin-bottom:36px; }
  .shot-label{ font-size:10px; letter-spacing:.04em; margin-top:11px; }
  .shot-label i{ margin:0 6px; }

  /* 筛选条：手机上换成安静的小标签并自动换行（不再被裁掉一截） */
  .facets{ margin-bottom:38px; padding:15px 0; }
  .facet{ flex-direction:column; gap:10px; align-items:flex-start; padding:9px 0; }
  .facet-label{ min-width:auto; font-size:9.5px; letter-spacing:var(--tk-micro); }
  .chips{ flex-wrap:wrap; gap:7px; overflow:visible; padding-bottom:0; width:100%; }
  .chip{ padding:6px 11px 5px; font-size:12.5px; letter-spacing:.03em; }
  .chip i{ margin-left:6px; }

  .view-switch{ gap:28px; margin-bottom:36px; }
  .view-switch a{ font-size:13px; letter-spacing:.08em; padding-bottom:14px; }

  /* 分类页头 */
  .cat-head{ padding:22px 0 38px; }
  .cat-head .label{ margin-bottom:17px; }
  .cat-lead{ font-size:14.5px; line-height:1.95; }
  .cat-foot{ margin-top:76px; gap:16px; }

  /* 项目页 */
  .proj-top{ margin-top:34px; padding-bottom:15px; gap:12px; }
  .proj-hero{ aspect-ratio:3/2; margin-top:26px; }
  .proj-head{ padding-top:40px; }
  .proj-meta{ gap:10px 18px; margin-top:22px; padding-top:18px; }
  .proj-rule{ display:none; }
  .proj-meta span:last-child{ flex:1 1 100%; font-size:14px; }
  .proj-lead{
    margin:36px 0 58px; padding-left:18px; max-width:none;
    font-size:16px; line-height:2.05;
  }
  .media-seq{ gap:52px; }
  figure.media figcaption{ margin-top:13px; font-size:10px; letter-spacing:.06em; }
  .credits{ margin-top:70px; }
  .credits dl{ grid-template-columns:92px 1fr; row-gap:16px; column-gap:16px; }
  .pager{ flex-direction:column; gap:36px; margin-top:76px; }
  .p-next{ text-align:left; }

  .more-wrap{ flex-direction:column; gap:14px; align-items:flex-start; margin-top:60px; }
  .soft-links{ gap:16px; font-size:14px; }

  .about-body p{ line-height:2.1; }
  .boot{ padding:0 28px; margin-top:64px; }
  .lb-figure{ padding:64px 20px; }
  .lb-close{ top:20px; right:22px; }
  .lb-nav{ padding:18px 14px; font-size:19px; }
  .lb-caption{ margin-top:20px; font-size:9.5px; gap:16px; }

  /* 播放器：跟在站名右侧，一小簇图标，整体右对齐 */
  .player{ order:2; }
  .player-ctl{ gap:0; }
  .pl-btn{ height:30px; min-width:30px; }        /* 点按区域比视觉稍大一点 */
}

/* 更窄的机器（≤360）才收边距，390 这类主流宽度保持宽松 */
@media (max-width: 360px){
  .wrap,.head-inner,.foot-inner{ padding-left:20px; padding-right:20px; }
  .nav{ gap:10px 8px; }
  .pl-btn{ height:28px; min-width:28px; }
  .nav a{ font-size:12.5px; letter-spacing:.03em; }
  /* 标题字距不再归零：实测 62px + .06em 在 320px 下宽 263px、可用 280px，
     仍有 17px 余量。归零会让三字标题在窄屏上反而显得松散。 */
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}