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

   三层结构：
     首页（精选聚合） / 分类页（细分栏） / 项目页（详情）
   米白 / 暖灰 / 墨黑，低饱和。大留白，细线分割，少卡片，少圆角。
   类别色：摄影=赭石 视频=雾蓝 剪辑=苔绿（改 --clay / --mist / --moss 即可）
   ========================================================================== */

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

  --paper:      #F2EFE9;
  --paper-warm: #E9E4DB;
  --ink:        #1B1A18;
  --ink-soft:   #474440;
  --grey:       #8C857A;
  --grey-light: #ADA69C;
  --line:       #DBD5CA;
  --line-soft:  #E7E1D6;

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

  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", Georgia, serif;
  --sans:  "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

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

[data-cat="photography"]{ --accent: var(--clay); }
[data-cat="video"]{ --accent: var(--mist); }
[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:300;
  font-size:15px;
  line-height:1.95;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 极淡的纸纹 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  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; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--line); color:var(--ink); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; color:var(--ink); margin:0; letter-spacing:.06em; }

.label{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--grey-light); line-height:1; 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,.9);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  max-width:1180px; margin:0 auto; padding:18px 40px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.brand-name{
  display:block; font-family:var(--serif); font-size:18px;
  color:var(--ink); letter-spacing:.2em; line-height:1.4;
}
.brand-sub{ display:block; font-size:10px; letter-spacing:.22em; color:var(--grey-light); margin-top:3px; line-height:1; }
.nav{ display:flex; gap:26px; align-items:flex-end; padding-bottom:3px; flex-wrap:wrap; }
.nav a{
  font-size:13px; letter-spacing:.16em; color:var(--grey);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a.is-active{ color:var(--ink); border-bottom-color:var(--ink); }

/* ---------- 通用 ---------- */
.app{ min-height:66vh; position:relative; z-index:1; }
/* 只用 padding-top/bottom：写成简写会把 .wrap 的左右留白一起清成 0（内容就贴边了） */
.page{ padding-top:44px; padding-bottom:120px; }
.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); }

.sec{ margin-top:96px; }
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:13px; border-bottom:1px solid var(--line); margin-bottom:34px;
}
.sec-note{ font-size:13px; color:var(--grey); margin:-16px 0 36px; max-width:54ch; line-height:1.9; }
.empty{ font-size:14px; color:var(--grey); padding:44px 0; line-height:2; }
.empty code{ font-family:var(--serif); color:var(--ink); }

/* 脚本没跑起来时的提示块（正常情况下会被替换掉） */
.boot{ max-width:640px; margin:88px auto 0; padding:0 40px; }
.boot-title{ font-family:var(--serif); font-size:22px; letter-spacing:.06em; 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(--serif); color:var(--ink); background:var(--paper-warm);
  padding:1px 7px; margin:0 2px; font-size:13px;
}
.boot-text em{ font-style:normal; color:var(--clay); }

/* ---------- 面包屑 ---------- */
.crumbs{
  display:flex; gap:11px; align-items:baseline; flex-wrap:wrap;
  font-size:11px; letter-spacing:.16em; padding:8px 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(--line); }

/* ---------- 首页 · 封面 ---------- */
.cover{ padding:8px 0 0; }
.cover-top{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.cover-main{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:60px; align-items:end; padding:60px 0 52px;
}
.cover-title{ font-size:clamp(46px, 9.4vw, 118px); line-height:1.06; letter-spacing:.05em; margin:0; }
.cover-side{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:8px; }
.cover-intro{ font-size:14px; line-height:2.2; color:var(--ink-soft); max-width:30ch; white-space:pre-line; margin:0; }
.cover-vert{
  writing-mode:vertical-rl; font-size:10px; letter-spacing:.34em;
  color:var(--grey-light); line-height:1; white-space:nowrap;
}
.cover-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:14px; border-top:1px solid var(--line);
}

/* 首页开场大图 */
.opening{ margin:64px 0 0; }
.opening-frame{ position:relative; overflow:hidden; background:var(--paper-warm); aspect-ratio:21/9; }
.opening-frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(.82); }
.opening figcaption{ margin-top:12px; font-size:10px; letter-spacing:.24em; color:var(--grey-light); }

/* ---------- 卡片网格（首页精选 / 分类列表 / 档案） ---------- */
.picks{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:48px; row-gap:68px; }
.pick{ display:block; }
.pick.is-lead{ grid-column:1 / -1; }
.pick-figure{ position:relative; overflow:hidden; background:var(--paper-warm); }
.pick.is-lead .pick-figure{ aspect-ratio:21/9; }
.pick-figure img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.82); opacity:.95;
  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:14px; left:14px; z-index:2;
  background:var(--accent); color:#fff;
  font-size:10px; letter-spacing:.2em; padding:4px 10px; line-height:1.5;
}
.pick-body{ padding:18px 0 0; border-top:1px solid var(--line); margin-top:20px; }
.pick-meta{ display:block; font-size:10px; letter-spacing:.2em; color:var(--grey-light); text-transform:uppercase; }
.pick-title{ font-size:22px; letter-spacing:.08em; margin:10px 0 0; }
.pick.is-lead .pick-title{ font-size:clamp(24px,3vw,34px); }
.pick-sum{ font-size:13px; color:var(--grey); margin:8px 0 0; line-height:1.85; max-width:46ch; }
.pick-tags{ display:block; margin-top:14px; font-size:11px; letter-spacing:.12em; color:var(--accent); }

/* ---------- 筛选条 ---------- */
.facets{ padding:18px 0; margin:0 0 52px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facet{ display:flex; gap:20px; align-items:baseline; padding:7px 0; }
.facet-label{
  font-size:10px; letter-spacing:.24em; color:var(--grey-light);
  text-transform:uppercase; min-width:40px; flex:none;
}
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  font-size:12px; letter-spacing:.1em; color:var(--grey);
  border:1px solid var(--line); padding:5px 13px;
  transition:border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.chip i{ font-style:normal; color:var(--grey-light); margin-left:7px; font-size:10px; }
.chip:hover{ border-color:var(--grey); color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip.is-on i{ color:rgba(242,239,233,.55); }

/* ---------- 视图切换（图册 / 项目） ---------- */
.view-switch{
  display:flex; gap:30px; align-items:baseline;
  border-bottom:1px solid var(--line); margin:0 0 44px;
}
.view-switch a{
  display:block; font-size:12px; letter-spacing:.2em; color:var(--grey);
  padding-bottom:12px; margin-bottom:-1px; border-bottom:1px solid transparent;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.view-switch a:hover{ color:var(--ink); }
.view-switch a.is-on{ color:var(--ink); border-bottom-color:var(--ink); }
.view-switch a i{ font-style:normal; font-size:10px; color:var(--grey-light); margin-left:7px; letter-spacing:.1em; }
.view-switch a.is-on i{ color:var(--accent); }

/* ---------- 图册（瀑布流） ---------- */
.album{ column-count:3; column-gap:20px; }
.shot{ break-inside:avoid; -webkit-column-break-inside:avoid; display:block; margin:0 0 26px; }
.shot-frame{ position:relative; overflow:hidden; background:var(--paper-warm); }
.shot-frame img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.85);
  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:9px; font-size:10px; letter-spacing:.12em;
  color:var(--grey-light); line-height:1.7;
}
.shot-label b{ font-weight:400; color:var(--grey); }
.shot-label i{ font-style:normal; margin:0 6px; color:var(--line); }

/* ---------- 加载更多 ---------- */
.more-wrap{
  margin-top:76px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.more{
  font-size:12px; letter-spacing:.2em; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:opacity .4s var(--ease);
}
.more:hover{ opacity:.55; }
.more-count{ font-size:10px; letter-spacing:.2em; color:var(--grey-light); text-transform:uppercase; }

/* ---------- 页头（分类 / 档案 / 关于） ---------- */
.cat-head{ padding:26px 0 46px; border-bottom:1px solid var(--line); }
.cat-head .label{ display:block; margin-bottom:18px; }
.cat-title{ font-size:clamp(34px,5.4vw,66px); letter-spacing:.08em; line-height:1.24; }
.cat-lead{ font-size:14px; color:var(--grey); margin:14px 0 0; letter-spacing:.06em; }
.cat-foot{
  margin-top:92px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.back{ font-size:11px; letter-spacing:.22em; color:var(--grey); transition:color .4s var(--ease); }
.back:hover{ color:var(--ink); }

/* 首页底部的轻量入口（不占主体） */
.soft-links{
  display:flex; gap:20px; align-items:baseline; flex-wrap:wrap;
  margin-top:32px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:13px; letter-spacing:.06em;
}
.quick{ display:flex; gap:22px; flex-wrap:wrap; }
.quick a i{ font-style:normal; color:var(--grey-light); font-size:10px; }

/* ---------- 项目页 ---------- */
.proj-top{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:40px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.proj-hero{ position:relative; margin:40px 0 0; background:var(--paper-warm); overflow:hidden; aspect-ratio:21/9; }
.proj-hero img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85); }

.proj-head{ padding:48px 0 0; }
.proj-cat{ display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.proj-title{ font-size:clamp(34px,5.2vw,62px); letter-spacing:.08em; line-height:1.28; }
.proj-meta{
  display:flex; align-items:baseline; gap:24px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.18em; color:var(--grey);
}
.proj-rule{ width:34px; height:1px; background:var(--line); }
.proj-meta span:last-child{ letter-spacing:.06em; font-size:13px; color:var(--ink-soft); }

.proj-lead{
  max-width:46ch; margin:52px 0 80px; padding-left:26px;
  border-left:1px solid var(--accent);
  font-family:var(--serif); font-size:17px; line-height:2.15;
  color:var(--ink); white-space:pre-line;
}

.media-seq{ display:flex; flex-wrap:wrap; gap:70px 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; }
figure.media img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.84);
  cursor:zoom-in; transition:transform 1.6s var(--ease);
}
figure.media img:hover{ transform:scale(1.012); }
figure.media figcaption{
  margin-top:14px; display:flex; gap:14px;
  font-size:11px; letter-spacing:.14em; color:var(--grey-light);
}
figure.media figcaption .c-idx{ font-family:var(--serif); color:var(--accent); }
.proj-tags{ margin-top:52px; }
.tag-line{ font-size:11px; letter-spacing:.16em; 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(--line-soft);
  color:var(--grey-light); font-size:10px; letter-spacing:.18em; 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; }

/* 视频 */
.video{ position:relative; width:100%; background:var(--paper-warm); overflow:hidden; }
.video .poster{ width:100%; height:100%; object-fit:cover; filter:saturate(.82); 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:76px; height:76px; 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:12px solid rgba(242,239,233,.92);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.video:hover .play{ background:rgba(27,26,24,.14); }
.video:hover .play i{ background:rgba(27,26,24,.2); border-color:#F2EFE9; }
.video .play span{
  position:absolute; left:0; right:0; bottom:28px; text-align:center;
  font-size:10px; letter-spacing:.24em; 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:96px 0 0; padding-top:24px; border-top:1px solid var(--line); }
.credits .label{ display:block; margin-bottom:22px; }
.credits dl{ margin:0; display:grid; grid-template-columns:110px 1fr; row-gap:14px; column-gap:20px; max-width:560px; }
.credits dt{ font-size:10px; letter-spacing:.22em; color:var(--grey-light); text-transform:uppercase; padding-top:5px; }
.credits dd{ margin:0; font-size:14px; color:var(--ink-soft); }

/* 上/下一个 */
.pager{ margin:104px 0 0; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; }
.p-dir{ display:block; font-size:10px; letter-spacing:.24em; color:var(--grey-light); text-transform:uppercase; margin-bottom:8px; }
.p-title{ font-family:var(--serif); font-size:20px; letter-spacing:.08em; color:var(--ink); transition:opacity .4s var(--ease); }
.pager a:hover .p-title{ opacity:.55; }
.p-next{ text-align:right; }

/* ---------- 关于 ---------- */
.about-body{ max-width:640px; padding-top:16px; }
.about-body p{ line-height:2.3; margin:0 0 26px; }
.about-mail{
  display:inline-block; font-family:var(--serif); font-size:17px; letter-spacing:.06em;
  color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:border-color .5s var(--ease);
}
.about-mail:hover{ border-bottom-color:var(--ink); }

/* ---------- 页脚 ---------- */
.site-foot{ border-top:1px solid var(--line); }
.foot-inner{
  max-width:1180px; margin:0 auto; padding:38px 40px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.2em; color:var(--grey-light); text-transform:uppercase;
}

/* ---------- 灯箱 ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(242,239,233,.975);
  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(.86);
}
.lb-stage img.is-ready{ opacity:1; }
.lb-caption{ margin-top:22px; display:flex; gap:20px; align-items:baseline; justify-content:center; font-size:11px; letter-spacing:.16em; color:var(--grey); }
.lb-count{ font-family:var(--serif); color:var(--grey-light); }
.lb-close{
  position:absolute; top:28px; right:36px; font-size:10px; letter-spacing:.24em;
  color:var(--grey); text-transform:uppercase; transition:color .4s var(--ease);
}
.lb-close:hover{ color:var(--ink); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-size:38px; line-height:1; color:var(--grey-light);
  padding:20px 26px; transition:color .4s var(--ease);
}
.lb-nav:hover{ color:var(--ink); }
.lb-prev{ left:8px; } .lb-next{ right:8px; }
body.lb-open{ overflow:hidden; }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px){
  .cover-main{ grid-template-columns:1fr; gap:36px; align-items:start; }
  .cover-side{ align-items:flex-start; }
  .picks{ column-gap:36px; row-gap:56px; }
  .album{ column-count:2; column-gap:16px; }
}
/* 手机 / 小平板：整体放松，留白加大，图片放大 */
@media (max-width: 760px){
  .wrap,.head-inner,.foot-inner{ padding-left:26px; padding-right:26px; }

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

  /* 顶栏：站名一行，导航铺满整行（不再挤在左边），高度收一点 */
  .head-inner{ display:block; padding-top:15px; padding-bottom:13px; }
  .nav{
    display:flex; flex-wrap:wrap; justify-content:space-between;
    gap:11px 10px; margin-top:14px; padding-bottom:0;
  }
  .nav a{ font-size:13px; letter-spacing:.08em; padding:2px 0 4px; }

  .page{ padding-top:26px; padding-bottom:96px; }
  .sec{ margin-top:84px; }
  .sec-head{ margin-bottom:30px; padding-bottom:15px; }
  .sec-note{ margin:-12px 0 34px; font-size:14px; }
  .crumbs{ font-size:11px; gap:9px; padding-top:12px; }

  /* 首页封面 */
  .cover-main{ padding:46px 0 42px; gap:30px; }
  .cover-title{ letter-spacing:.02em; line-height:1.2; }
  .cover-intro{ font-size:15px; line-height:2.15; max-width:none; }
  .cover-vert{ display:none; }
  .opening{ margin:46px 0 0; }
  .opening figcaption{ margin-top:14px; }

  /* 卡片：单列 + 更宽松的行距 */
  .picks{ grid-template-columns:1fr; row-gap:58px; }
  .pick.is-lead .pick-figure{ aspect-ratio:3/2; }
  .pick-body{ padding-top:16px; margin-top:19px; }
  .pick-title{ font-size:21px; }
  .pick-meta{ font-size:11px; letter-spacing:.16em; }
  .pick-sum{ font-size:14px; line-height:1.95; max-width:none; }
  .pick-tags{ margin-top:16px; }

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

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

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

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

  /* 项目页 */
  .proj-top{ margin-top:34px; padding-bottom:15px; }
  .proj-hero{ aspect-ratio:3/2; margin-top:26px; }
  .proj-head{ padding-top:40px; }
  .proj-meta{ gap:10px 20px; 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:20px; max-width:none;
    font-size:16px; line-height:2.1;
  }
  .media-seq{ gap:52px; }
  figure.media figcaption{ margin-top:12px; font-size:11.5px; letter-spacing:.1em; }
  .credits{ margin-top:72px; }
  .credits dl{ grid-template-columns:88px 1fr; row-gap:16px; column-gap:16px; }
  .pager{ flex-direction:column; gap:36px; margin-top:80px; }
  .p-next{ text-align:left; }

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

  .about-body p{ line-height:2.15; }
  .boot{ padding:0 28px; margin-top:64px; }
  .lb-figure{ padding:64px 20px; }
  .lb-close{ top:20px; right:20px; }
  .lb-nav{ padding:18px 14px; }
}

/* 更窄的机器（≤360）才收边距，390 这类主流宽度保持宽松 */
@media (max-width: 360px){
  .wrap,.head-inner,.foot-inner{ padding-left:20px; padding-right:20px; }
  .nav{ gap:10px 8px; }
  .nav a{ font-size:12.5px; letter-spacing:.04em; }
  .cover-title{ letter-spacing:0; }
}

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