/* ============================================================
   Portfolio — warm off-white, monochrome chrome
   ------------------------------------------------------------
   字体三件套：
     --display  Instrument Serif   高对比编辑体，只做标题/大句
     --text     Inter Tight        无衬线，微字（图注/索引/导航/页脚）
     --zh       Noto Serif SC      宋体系，和 Instrument 骨架对得上
   中英并置的规矩：英文是主行，<i class="zh"> 永远退到次级位置
   （小一号、淡一档、字距放开）。
   ============================================================ */

:root {
  --paper:   #faf9f6;   /* warm off-white */
  --ink:     #1b1a18;   /* charcoal */
  --muted:   #6f6b64;
  --faint:   #a9a49b;
  --rule:    #e3e0d9;
  --rule-strong: #1b1a18;

  --display: "Instrument Serif", "Noto Serif SC", "Songti SC", Georgia, serif;
  --text:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --zh:      "Noto Serif SC", "Songti SC", "STSong", serif;

  --gut:     clamp(1rem, 4vw, 4.5rem);
  --col:     68rem;                 /* 全站内容列宽 —— 所有页面的左竖线都对齐到它 */
  --band-gap: clamp(.4rem, 1.2vw, 1rem);
  --ease:    cubic-bezier(.22, 1, .36, 1);
  /* hover 弹出的照片：约半屏宽，3:2 定框（横竖进来同一个尺寸）。
     宽高都写死，不靠 aspect-ratio —— 不同内核算出来的高度不一样。 */
  --peek-w:  min(50vw, 48rem);
  --peek-h:  calc(var(--peek-w) / 1.5);   /* 跟着 --peek-w 走，媒体查询改一处就够 */
  /* 竖向可用高度的上限。手机上 vh 是「地址栏收起」的高度，
     地址栏一出来整张图就被切 —— svh 取的是最坏情况，永远不会被切。 */
  --vcap:      84vh;
  --vcap-hero: 82vh;
}
@supports (height: 1svh) {
  :root { --vcap: 84svh; --vcap-hero: 82svh; }
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;   /* iOS 横屏不要自作主张放大正文 */
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
i.zh { font-style: normal; }

/* 中英并置：中文统一小一号 + 淡一档 */
.zh {
  font-family: var(--zh);
  font-size: .82em;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--faint);
  margin-left: .55em;
}
h1 > .zh, .ttl > .zh, .statement h1 > .zh { display: block; margin-left: 0; }

/* ---------- chrome ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4rem var(--gut) 1.5rem;
}
.masthead .name {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.masthead .name .zh {
  font-size: .6em;
  letter-spacing: .18em;
  margin-left: .7em;
}
.masthead .name a { border-bottom: 1px solid transparent; }
.masthead .name a:hover { border-bottom-color: var(--ink); }

.nav { display: flex; gap: 1.75rem; }
.nav a {
  font-family: var(--text);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.nav a .zh {
  margin-left: .5em;
  letter-spacing: .08em;
  text-transform: none;
  font-size: .92em;
  color: var(--faint);
}
.nav a:hover { color: var(--ink); }

.rule { height: 1px; background: var(--rule); margin: 0 var(--gut); }

/* ---------- content column ----------
   chrome 满幅（像 Sam Thies），内容全部锁进 --col 居中列。
   这样每个页面的标题、正文、图片左边缘落在同一条竖线上。 */
.page { padding: 0 var(--gut); }
.page > * {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}

footer {
  padding: 4rem var(--gut) 3rem;
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
footer .zh { font-size: .95em; letter-spacing: .1em; text-transform: none; margin-left: .5em; }

/* ---------- hero（首页大图）----------
   整张可见、不裁切；横幅顶到屏宽，竖幅顶到 82vh。 */
.page > .hero {
  max-width: none;
  margin: clamp(1rem, 3vh, 2rem) calc(-1 * var(--gut)) clamp(2.5rem, 7vh, 5rem);
}
.hero img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: var(--vcap-hero);
}
.hero figcaption {
  margin-top: .9rem;
  padding: 0 var(--gut);
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}
.hero figcaption .zh { font-size: .95em; letter-spacing: .08em; text-transform: none; }

/* ---------- index: statement ---------- */

.statement { padding: clamp(3rem, 9vh, 7rem) 0 clamp(2.5rem, 6vh, 5rem); }
.statement h1 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.2vw, 3.1rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.018em;
  margin: 0 0 1.6rem;
  max-width: 30ch;
}
.statement h1 .zh {
  margin-top: .55em;
  font-size: .52em;
  line-height: 1.7;
  letter-spacing: .06em;
}
.statement p { color: var(--muted); margin: 0 0 .5rem; max-width: 36rem; font-size: .95rem; }
.statement p.zh { font-size: .84rem; color: var(--faint); line-height: 1.85; margin-bottom: 0; }

/* ---------- index: album list ---------- */

.albums { padding: 0 0 8rem; }

.album-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 0 1.5rem;                 /* 行间距交给 peek-slot，这里不加 */
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
}
.album-row:last-child { border-bottom: 1px solid var(--rule); }

.album-row .idx {
  font-family: var(--text);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
  color: var(--faint);
  transition: color .3s ease;
}
.album-row .ttl {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.8vw, 2.05rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.012em;
}
.album-row .ttl .zh {
  display: block;
  margin: .3em 0 0;
  font-size: .42em;
  letter-spacing: .16em;
  transition: color .3s ease;
}
.album-row .meta {
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  transition: opacity .35s ease;
}
.album-row .meta .zh {
  font-size: .95em;
  letter-spacing: .06em;
  text-transform: none;
  margin-left: .45em;
}

/* --- hover：把空隙拉宽，照片从行里长出来 ---
   照片走**正常流**（.peek-slot 用 max-height 从 0 撑开），不是绝对定位。
   所以「照片出现」和「下一行下移」是同一件事，物理上压不到下一行 —— 任何内核都一样。
   用 max-height 而不是 height/animate-to-auto，是因为它可插值、且不需要 JS 量高度。 */
.peek-slot {
  grid-column: 1 / -1;
  align-self: start;
  max-height: 0;
  overflow: hidden;
  transition: max-height .62s var(--ease);
}
.album-row:hover .peek-slot {
  max-height: calc(var(--peek-h) + 4.6rem);   /* 图高 + 上下留白 */
}

.peek {
  display: block;
  width: var(--peek-w);
  height: var(--peek-h);
  object-fit: cover;
  margin: 2rem auto 2.6rem;      /* auto 左右 = 居中 */
  transform: translateY(-1.4rem) scale(.96);
  transform-origin: top center;
  transition: transform .62s var(--ease);
}
.album-row:hover .peek { transform: none; }

.album-row:hover .idx { color: var(--ink); }
.album-row:hover .ttl .zh { color: var(--muted); }
.album-row:hover .meta { opacity: .35; }

/* ---------- album page ---------- */

.album-head {
  padding: clamp(2.5rem, 7vh, 5.5rem) 0 clamp(1.5rem, 4vh, 3rem);
}
.album-head .sub {
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.album-head .sub .zh { font-size: .95em; letter-spacing: .08em; text-transform: none; }
.album-head h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 .35rem;
}
.album-head .zh-title {
  font-family: var(--zh);
  font-size: clamp(.9rem, 1.6vw, 1.1rem);
  font-weight: 400;
  letter-spacing: .34em;
  color: var(--faint);
  margin: 0 0 .5rem;
}
/* 书名 / 片名出处 —— 每本的名字都借自一部电影或一本书 */
.album-head .credit {
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 2rem;
}
.album-head .credit .zh {
  display: block;
  font-family: var(--zh);
  font-size: 1em;
  letter-spacing: .1em;
  text-transform: none;
  margin-top: .35rem;
}
.album-head .lede {
  margin: 0 0 .6rem;
  color: var(--muted);
  max-width: 34rem;
  font-size: .95rem;
}
.album-head .lede.zh {
  font-family: var(--zh);
  font-size: .84rem;
  color: var(--faint);
  line-height: 1.95;
  letter-spacing: .03em;
  margin-bottom: 0;
}

/* 正文这一层放开内容列，内容列下沉到每一页身上。
   原先锁在 .album-body 上，满出血的负边距只够到「内容列 + 页边距」，
   在 1400 的屏上离视口边还差一截 —— 满出血没真的出血。
   下沉之后 .ly-full / .ly-edge 用 -var(--gut) 就正好到视口边。
   全程只用百分比和 rem，不碰 100vw，所以不会因为滚动条撑出横向溢出。 */
.album-body {
  padding: 0 0 7rem;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.album-body .rhythm,
.book > .leaf {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}
/* 满出血和只出一边绕开内容列。选择器要带 .book > .leaf 才压得住上一行
   的 auto 边距（同权重看先后，这里权重更高，稳）。 */
.book > .leaf.ly-full {
  max-width: none;
  margin-left: calc(-1 * var(--gut));
  margin-right: calc(-1 * var(--gut));
}
/* 只出一边也是整页宽的框：图的 80% 才是视口的 80%。
   只抵掉一侧的话另一侧的 margin:auto 会把框吃掉一截，比例就对不上了。 */
.book > .leaf.ly-edge {
  max-width: none;
  margin-left: calc(-1 * var(--gut));
  margin-right: calc(-1 * var(--gut));
}

/* --- 等高对齐行（grid / bands 共用）---------------------------------
   行高不写死。每张 figure 按自己的宽高比 --ar 拿到 flex-grow：
   宽度 = 行宽 × ar / Σar  →  高度 = 宽度 / ar = 行宽 / Σar，行内必然相等。
   好处：整行刚好撑满容器（右边不留豁口），任何横竖组合都不会溢出，
   也不会有 object-fit 裁切。横 + 竖并排时天然形成一个等高「合成单元」。 */
.band {
  display: flex;
  align-items: flex-start;
  gap: var(--band-gap);
  /* 行高 = 行宽 / Σar。限住行宽就限住了行高 —— 整行一起缩，比例不变，不裁切。
     横片多的行 Σar 大，84vh×Σar 撑得住，照常满宽；竖片多的行自动收窄居中。 */
  max-width: min(100%, calc(var(--vcap) * var(--sum, 4)));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(1.2rem, 3.5vh, 3rem);
}
.band > figure {
  margin: 0;
  min-width: 0;
  flex: var(--ar, 1) 1 0%;
}
.band img { width: 100%; height: auto; }

/* 独占一行的图：限宽那一步已经由 --sum 做掉了，这里只负责居中 */
.band.solo img {
  width: auto;
  max-width: 100%;
  max-height: var(--vcap);
}

/* --- 大图脚下常驻图注（小图走 hover）--- */
.solo-cap {
  margin: 1rem auto 0;
  font-family: var(--text);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}
.solo-cap .zh { font-size: .95em; letter-spacing: .06em; text-transform: none; }
.band.solo {
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(2.5rem, 8vh, 6rem);
}

/* ============================================================
   书的页型
   ------------------------------------------------------------
   一页 = 一个 .leaf。每页右下角印页码（.book 上的计数器），
   页与页之间留的空白本身就是标点 —— 满出血之后那张小图之所以成立，
   靠的是前面那页的宽度，不是它自己。
   ============================================================ */
.book { counter-reset: leaf; }
.leaf { counter-increment: leaf; position: relative; }
.leaf::after {
  content: counter(leaf, decimal-leading-zero);
  display: block;
  /* 页型里有一半本身是网格容器（图版/错位/对页/多幅），页码会被当成网格项
     塞进下一格。让它横跨所有栏，就落到新起的一行上，跟块级页型表现一致。 */
  grid-column: 1 / -1;
  margin-top: clamp(.6rem, 1.6vh, 1.1rem);
  font-family: var(--text);
  font-size: .6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
  color: var(--faint);
  text-align: right;
}
/* 整页的图和只有地名的空页不打页码 —— 页码压在出血图上不好看，
   起一章的那一页本来也不该有号。 */
.leaf.ly-full::after,
.leaf.ly-quiet::after,
.leaf.ly-edge::after { content: none; }
.leaf figcaption,
.leaf .cap {
  font-family: var(--text);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.leaf figcaption .zh,
.leaf .cap .zh { font-size: .95em; letter-spacing: .06em; text-transform: none; }
.leaf .cap { margin: .8rem 0 0; }
.leaf figure { margin: 0; }
.leaf img { width: 100%; height: auto; display: block; }

/* --- 满出血：这一页没有页边距 ------------------------------------
   .book > .leaf.ly-full 的负边距正好抵掉 .page 的 gutter，所以 figure 的
   100% 就是视口宽 —— 横幅于是真的顶到两边。竖幅顶到视口高就停，
   否则 2:3 在 1400 的屏上会有 1600 多 px 高，一屏看不完，那就不叫满出血。
   图注挂在 figure 外面的宽度上，跟着页边距走，不当图的一部分。 */
.ly-full { margin-bottom: clamp(2rem, 7vh, 5rem); }
.ly-full figure { margin: 0 auto; width: 100%; }
.ly-full figure.port { width: min(100%, calc(var(--vcap) * var(--ar, 1.5))); }
.ly-full .cap { padding: 0 var(--gut); text-align: right; }
/* 竖幅是居中的，注也得居中 —— 右对齐会让它飘到离图八百里的地方去 */
.ly-full figure.port + .cap { text-align: center; }

/* --- 图版：图占七成，编号与图注退到外栏、贴图底对齐 ----------------
   图栏宽 = min(74%, 视口高 × 比例)：横幅顶到 74%，竖幅收到视口高就停
   （同 .band 那套算法）—— 否则 2:3 铺到 74% 就是 1200px 高，一页看不完。
   图靠注那一侧对齐，注就紧贴着图；留白全甩到外侧去。 */
.ly-plate {
  display: grid;
  grid-template-columns: min(74%, calc(var(--vcap) * var(--ar, 1.5))) minmax(0, 1fr);
  gap: 0 clamp(1.2rem, 3vw, 2.6rem);
  align-items: end;
  margin-bottom: clamp(3.5rem, 13vh, 9rem);
}
.ly-plate figure { grid-column: 1; grid-row: 1; width: 100%; margin-left: auto; }
.ly-plate .pnote { grid-column: 2; grid-row: 1; padding-bottom: .35rem; }
.ly-plate.r { grid-template-columns: minmax(0, 1fr) min(74%, calc(var(--vcap) * var(--ar, 1.5))); }
.ly-plate.r figure { grid-column: 2; grid-row: 1; margin-left: 0; margin-right: auto; }
.ly-plate.r .pnote { grid-column: 1; grid-row: 1; text-align: right; }
.ly-plate .pnote { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ly-plate .pnote .zh { font-size: .95em; letter-spacing: .06em; text-transform: none; }

/* --- 并置 ------------------------------------------------------- */
.ly-pair { margin-bottom: clamp(2rem, 7vh, 5rem); }
.ly-pair .band { margin-bottom: 0; }

/* --- 一大一小错位 ------------------------------------------------ */
.ly-asym {
  display: grid;
  grid-template-columns: minmax(0, 62%) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 9vh, 6rem);
}
/* 大图也照视口高封顶：竖幅铺满 62% 会有 1000px 高 */
.ly-asym .big { width: min(100%, calc(var(--vcap) * var(--ar, 1.5))); margin-left: auto; }
.ly-asym .small { margin-top: clamp(3rem, 17vh, 12rem); }
.ly-asym figcaption { margin-top: .7rem; }

/* --- 小样条：一条胶片 -------------------------------------------- */
.ly-strip { margin-bottom: clamp(2.5rem, 9vh, 6rem); }
.ly-strip .band { margin-bottom: 0; }
.ly-strip figcaption.fn {
  margin-top: .45rem;
  text-align: center;
  font-size: .6rem;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}

/* --- 印样：等格密排 ---------------------------------------------- */
.ly-contact { margin-bottom: clamp(3rem, 11vh, 7rem); }
.ly-contact .sheet {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: clamp(.7rem, 2vw, 1.3rem) clamp(.5rem, 1.5vw, 1rem);
}
.ly-contact .sheet .c {
  aspect-ratio: var(--cell, 1.5);
  overflow: hidden;
  /* 格子底色：裁切后不会露白边。走 token —— 换过纸色的那一本要是还铺
     这块冷白，格子里就会露出不属于这本书的底色。 */
  background: var(--cell-floor, #f2f0ea);
}
.ly-contact .sheet img { width: 100%; height: 100%; object-fit: cover; }
.ly-contact .sheet figcaption {
  margin-top: .4rem;
  text-align: center;
  font-size: .6rem;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}

/* --- 对页：隔着一条书脊缝 ---------------------------------------- */
.ly-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  column-gap: clamp(1.2rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 11vh, 7rem);
}
.ly-spread .seam { align-self: stretch; background: var(--rule); }
.ly-spread figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.ly-spread img { width: auto; max-width: 100%; max-height: 60vh; }
.ly-spread figcaption { margin-top: .8rem; text-align: center; }

/* --- 小图大留白 -------------------------------------------------- */
.ly-field { padding: clamp(2.5rem, 13vh, 10rem) 0; }
.ly-field figure { width: clamp(9rem, 34%, 24rem); }
.ly-field.r figure { margin-left: auto; }
.ly-field figcaption { margin-top: .7rem; }

/* --- 只出一边：图咬住视口的一侧，另一侧空着、注压在图底 ------------
   和满出血是两回事。满出血是两边都不留；这个是「咬住」一边，
   页面的框在这一侧是开着的 —— 眼睛被拖着往画面外面走。 */
.ly-edge { margin-bottom: clamp(2.5rem, 10vh, 7rem); }
.ly-edge.l { margin-left: calc(-1 * var(--gut)); }
.ly-edge.r { margin-right: calc(-1 * var(--gut)); }
.ly-edge figure { margin: 0; width: min(80%, calc(var(--vcap) * var(--ar, 1.5))); }
/* 竖幅换一种出血法：不封高，让它高过一屏往下走。
   比例 2:3 的片子横着只占 500px 宽，右边会空出 900px —— 那不是「咬住一边」，
   是「孤零零贴在左边」。让它长过屏幕，翻页时图还在往下延，才是书里那个感觉。 */
.ly-edge figure.port { width: 56%; }
.ly-edge.l figure { margin-right: auto; }
.ly-edge.r figure { margin-left: auto; }
.ly-edge.l .cap { text-align: left; padding-left: var(--gut); }
.ly-edge.r .cap { text-align: right; padding-right: var(--gut); }

/* --- 拼块：几幅咬成一块，行高不等 ------------------------------------
   六列宽的场子、五行高，容器锁死 6:5。于是列宽和行高会是同一个长度 u：
   横片占 3 列 2 行 = 3u × 2u，比例正好 1.5；竖片占 2 列 3 行 = 2u × 3u，
   正好 0.667。两种块的面积都是 6u²，所以「两横一排 + 三竖一排」刚好铺满
   6×5，不留缝也不裁图 —— 这是唯一能不靠 JS 量就能把格子尺寸和图片比例
   对齐的办法：容器宽高比一锁，1fr 的列和 1fr 的行就等长了。
   图与图之间不留缝（gap:0）：它们是一个整块，不是五张各自独立的图。
   高度封顶还是老办法 —— 限宽。宽 = 84vh × 6/5 时高正好 84vh。 */
.ly-mosaic { margin-bottom: clamp(3rem, 11vh, 7rem); }
.ly-mosaic .mosgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  aspect-ratio: 6 / 5;
  gap: 0;
  width: 100%;
  max-width: calc(var(--vcap) * 1.2);
  margin-left: auto;
  margin-right: auto;
}
.ly-mosaic figure { margin: 0; position: relative; overflow: hidden; }
/* 格子是按比例算出来的，到不了裁切那一步；object-fit 只是兜住取整误差
   造成的一两个像素，免得相邻两格之间裂出一条纸缝。 */
.ly-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 注在图外 —— 格子是锁死比例的，放进去会顶破格子压到下一行图上 */
.ly-mosaic .mosfoot {
  max-width: calc(var(--vcap) * 1.2);
  margin: .8rem auto 0;
  font-family: var(--text);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.ly-mosaic .mosfoot .zh { font-size: .95em; letter-spacing: .06em; text-transform: none; }

/* --- 空页：只有地名 ---------------------------------------------- */
.ly-quiet {
  padding: clamp(3.5rem, 20vh, 13rem) 0 clamp(2.5rem, 12vh, 8rem);
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 7vh, 5rem);
}
.ly-quiet .qn {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  letter-spacing: -.012em;
  line-height: 1;
}
.ly-quiet .qn .zh {
  display: block;
  margin: .5em 0 0;
  font-size: .42em;
  letter-spacing: .3em;
}

/* --- 精选页的混排节奏 --- */
.rhythm .band { margin-bottom: clamp(.4rem, 1.2vw, 1rem); }

/* --- Plates 索引（图注表）--- */
.plates-list {
  padding: clamp(2.5rem, 7vh, 5rem) 0 6rem;
  border-top: 1px solid var(--rule);
}
.plates-list h2 {
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  margin: 0 0 1.8rem;
}
.plates-list h2 .zh { font-size: .95em; letter-spacing: .08em; text-transform: none; }
.plates-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  font-family: var(--text);
  font-size: .7rem;
  letter-spacing: .08em;
}
.plates-list li {
  break-inside: avoid;
  padding: .34rem 0;
  color: var(--muted);
}
.plates-list .pc { color: var(--ink); }
.plates-list .pd { float: right; color: var(--faint); font-size: .92em; }

/* hover caption (Selene) */
figure.cap-hover { position: relative; }
figure.cap-hover figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .7rem .8rem;
  font-family: var(--text);
  font-size: .66rem;
  letter-spacing: .12em;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  opacity: 0;
  transition: opacity .3s ease;
}
figure.cap-hover figcaption .zh {
  color: rgba(255,255,255,.72);
  font-size: .95em;
  letter-spacing: .06em;
}
figure.cap-hover:hover figcaption { opacity: 1; }
figcaption .pl,
.cap .pl,
.pnote .pl,
.solo-cap .pl,
.plates-list .pl {
  display: inline-block;
  margin-right: .55em;
  font-variant-numeric: tabular-nums;
  opacity: .62;
}

/* album pager */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem var(--gut) 5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--text);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pager a { color: var(--muted); }
.pager a .zh { font-size: .95em; letter-spacing: .06em; text-transform: none; }
.pager a:hover { color: var(--ink); }

/* ---------- about ---------- */

.prose { padding: 0 0 6rem; }
.prose p { margin: 0 0 1.35rem; color: var(--ink); max-width: 34rem; font-size: .95rem; }
.prose p.muted { color: var(--muted); }
.prose p.zh {
  font-family: var(--zh);
  font-size: .85rem;
  line-height: 1.95;
  letter-spacing: .03em;
  color: var(--muted);
  margin-bottom: 2rem;
}
.prose h2 {
  font-family: var(--text);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  margin: 3rem 0 1.1rem;
}
.prose h2 .zh { font-size: .95em; letter-spacing: .08em; text-transform: none; }

/* ---------- Selected 单独一条线 ---------- */
.album-row.sel-row { border-top: 1px solid var(--rule-strong); }

@media (max-width: 900px) {
  .plates-list ol { columns: 2; }
}

/* ---------------- 手机 ----------------
   平板宽度往下的三条：整行不再按比例摊平（一行 4 张横片在 390px 上每张只有 85px，
   看不清），改成两列网格；靠 hover 的东西全部退成常驻。 */
@media (max-width: 720px) {
  /* 一「行」拆成 2 列网格 —— 图片自然比例、不裁切，单张面积大 2~3 倍 */
  .band:not(.solo) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    max-width: 100%;
    gap: clamp(.5rem, 2.2vw, .9rem);
    margin-bottom: clamp(1.4rem, 4.5vh, 2.6rem);
  }
  .band:not(.solo) > figure { flex: none; }

  /* 图版：外栏在手机上只有几十像素，编号改到图下面去，图占满宽 */
  .ly-plate,
  .ly-plate.r {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ly-plate figure,
  .ly-plate.r figure { grid-column: 1; grid-row: 1; max-width: 100%; margin-left: 0; }
  .ly-plate .pnote,
  .ly-plate.r .pnote {
    grid-column: 1; grid-row: 2; text-align: left; padding-top: .6rem;
  }

  /* 错位对：一格放不下 62/38，也不该往下沉半屏 —— 收成上下两行 */
  .ly-asym { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ly-asym .small { margin-top: 0; }

  /* 对页：书脊缝在窄屏上没意义，两张各占一行 */
  .ly-spread { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .ly-spread .seam { display: none; }
  .ly-spread img { max-height: none; }

  /* 印样：六格并排在手机上每格只剩 50px */
  .ly-contact .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 小图大留白：手机上三分之一宽只剩一百来像素，放到六成 */
  .ly-field figure { width: 62%; }

  /* 只出一边：边上那点空白在手机上只剩一条缝，图放到九成 */
  .ly-edge figure { width: min(90%, calc(var(--vcap) * var(--ar, 1.5))); }
  .ly-edge figure.port { width: 88%; }

  /* 拼块：六列在手机上每格只剩五十来像素，横竖那套对格就更没意思了。
     代价是「咬成一块」这个意思没了 —— 手机上一屏本来也只看得见一两张。
     下面这版是一列，不是两列。原先是拆两列的，但两列**必然留窟窿**：
     实测（390px，格宽 175）三张竖的 262 高、两张横的 117 高，grid 的行高
     按行里最高那张走 —— 第二行「竖+横」横的底下空 145px，第三行只剩一张
     横的、右半边空 183px，右下角一整块死白。这不是比例没调好，是 5 张按
     两列分行必然空一格（奇数）。而列内对齐这事没法用 CSS 修，除非裁图 ——
     裁他的照片不在选项里。
     改一列：每张按自己的比例占满宽度，顺序不变（还是生成时的顺序），
     不裁不空。175px 宽的图本来就偏小，占满宽度反而大了一倍。 */
  .ly-mosaic .mosgrid {
    display: block;
    aspect-ratio: auto;
    max-width: 100%;
  }
  /* 行列位置是生成时按 6×5 场子写死在标签上的，这里只能压掉 */
  .ly-mosaic figure {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: var(--ar, 1.5);
    width: 100%;
    margin: 0 0 clamp(.5rem, 2.2vw, .9rem);
  }
  .ly-mosaic .mosfoot { max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --peek-w: min(78vw, 22rem); }

  .album-row { grid-template-columns: 2.2rem 1fr; gap: .35rem 1rem; }
  .album-row .meta {
    grid-column: 2;
    white-space: normal;
    line-height: 1.6;
  }
  /* 触屏没有 hover */
  .peek-slot { display: none; }
  .masthead { flex-wrap: wrap; gap: .8rem 1.5rem; }
  .plates-list ol { columns: 1; }
  figure.cap-hover figcaption {
    position: static;
    padding: .3rem 0 0;
    background: none;
    color: var(--faint);
    opacity: 1;
  }
  figure.cap-hover figcaption .zh { color: var(--faint); }
}

/* ============================================================
   按专辑换材质
   ------------------------------------------------------------
   在这之前，六本共用同一张纸、同一套字、同一种墨，差别只在页型 ——
   于是读起来是一个站点的六章，不是六本书。

   而 body 画的正是 var(--paper) / var(--ink)（见文件开头），每一条横线、
   每个图注、每个页码读的也全是 --muted / --faint / --rule。
   所以**一组 token 就换掉一整本书**：纸、墨、线、微字、页码一起走，
   不用逐条去改页型。这是这套改法成立的全部理由。

   下面这些规则全部锁在 body.a-* 里面。没写的那几本，
   渲染结果与从前逐字节相同 —— 这是可以 diff 出来的，不是「应该没事」。
   ============================================================ */

/* --- 凡是有版式的本，共用同一套书脚 --------------------------------
   书脚 = 每页底下一条细线：左边印书名，右边印号。
   书脚原本长在小城之春里面，但六本都要它，所以提到 body.a-ed 上，
   每本只贡献自己的那串字（--run）和号印成什么。

   两件事分开走：
     ::before  印书名，绝对定位。不能让它当网格项 —— .ly-plate 的两个
               子元素都写死 grid-row:1，自动排布会把它挤到图片下面去。
     ::after   印号。全局那条已经给了 display/grid-column/右对齐，
               这里只管字。

   下面这串压在 content:none 上的选择器是必需的，不是保险：
   body.a-ed .book > .leaf::after 的权重是 (0,3,1)，比文件开头
   .leaf.ly-full::after 的 (0,2,1) 高，所以满出血页会凭空长出一行号。 */
body.a-ed .book > .leaf::after {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  border-top: 1px solid var(--rule);
  padding-top: .55rem;
  margin-top: clamp(1rem, 3vh, 2rem);
}
body.a-ed .book > .leaf::before {
  content: var(--run, "");
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--mono);
  font-size: .58rem;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
/* 整页的图、只出一边的图、以及所有只有字不取片的页，都不印书脚。
   后面那几类（chapter/quiet/note/breath/essay）本来就是「一口气」的位置，
   底下挂一行书名会把那口气泄掉。 */
body.a-ed .book > .leaf.ly-full::after,
body.a-ed .book > .leaf.ly-edge::after,
body.a-ed .book > .leaf.ly-spread::after,
body.a-ed .book > .leaf.ly-chapter::after,
body.a-ed .book > .leaf.ly-quiet::after,
body.a-ed .book > .leaf.ly-note::after,
body.a-ed .book > .leaf.ly-breath::after,
body.a-ed .book > .leaf.ly-essay::after,
body.a-ed .book > .leaf.ly-full::before,
body.a-ed .book > .leaf.ly-edge::before,
body.a-ed .book > .leaf.ly-spread::before,
body.a-ed .book > .leaf.ly-chapter::before,
body.a-ed .book > .leaf.ly-quiet::before,
body.a-ed .book > .leaf.ly-note::before,
body.a-ed .book > .leaf.ly-breath::before,
body.a-ed .book > .leaf.ly-essay::before { content: none; }

/* 宽屏才印书名：五百宽的屏上它跟号会撞在一起。 */
@media (max-width: 720px) {
  body.a-ed .book > .leaf::before { content: none; }
}

/* 有下内边距的页型要把那点内边距腾出来 -------------------------------
   ::before 是 position:absolute; bottom:0 —— 它对齐的是**内边距盒**的底，
   不是书脚那一行。.ly-field 上下各留 2.5–10rem，书脚因此会被吊到
   版心底下十厘米的地方，书名和帧号错开一整行（截图里看得见）。

   治法：把这两种页型的下内边距清零，改成书脚自己的下外边距 ——
   两者数值一样，总高度不变，只是书脚那行回到了盒子最底下，
   书名才和号落在同一基线上。

   只管这两种：别的页型要么没有下内边距（.ly-plate/.ly-pair/.ly-contact
   /.ly-mosaic/.ly-strip/.ly-asym 都是 0），要么根本不印书脚
   （.ly-chapter/.ly-note/.ly-quiet 在共享那串 content:none 里）。 */
body.a-ed .book > .leaf.ly-field,
body.a-ed .book > .leaf.ly-twoup { padding-bottom: 0; }
body.a-ed .book > .leaf.ly-field::after { margin-bottom: clamp(2.5rem, 13vh, 10rem); }
body.a-ed .book > .leaf.ly-twoup::after { margin-bottom: clamp(1rem, 4vh, 2.5rem); }

/* --- 小城之春 —— 勘查记录 ----------------------------------------
   工地上的记录纸、铁锈红的编号、等宽的数据。这一本的情绪不是「好看」，
   是「有人来量过」。 */
body.a-walls {
  /* 冷灰绿。原来这里是 #e7e5dd —— 那其实是一张暖的奶白，跟注释说的
     「冷灰绿」没关系，而且跟 02 的纸只差 2。六本的纸全挤在同一个明度带上，
     所以这次真把它压下去一档：204 的绿灰，像放旧的勘查纸。 */
  --paper:  #ccd2c8;
  --ink:    #16161a;   /* 更冷更黑 —— 压在这张纸上是硬的 */
  --muted:  #4c5147;
  /* 纸压暗一档，faint 跟着压 —— 不然图注会从 3.85 掉到 3.15。
     这个色是印图注、图版小字（0.64rem）和索引日期的，不是装饰。 */
  --faint:  #666b61;
  --rule:   #adb4a8;   /* 跟着纸一起压暗，不然线会浮在纸上面 */
  --accent: #9b3f28;   /* 铁锈红，只用在编号和竖排字上。不是全站唯一的彩色了
                          —— 03 有墨蓝、04 有墨绿、05 有赭金，六本各有各的点缀色 */
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cell-floor: #c0c6bb;
  --run: "小城之春 · Spring in a Small Town";
}

/* 抬头：中文书名竖起来立在标题右边 —— 第一眼就看得出这本不一样 */
body.a-walls .ah-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
body.a-walls .ah-titlerow h1 { flex: 1 1 auto; min-width: 0; }
body.a-walls .album-head h1 {
  font-size: clamp(2rem, 5.6vw, 4rem);
  letter-spacing: -.02em;
}
body.a-walls .ah-vert {
  writing-mode: vertical-rl;
  flex: 0 0 auto;
  font-family: var(--zh);
  font-size: clamp(.9rem, 1.5vw, 1.15rem);
  letter-spacing: .42em;
  line-height: 1;
  color: var(--accent);
  padding-top: .3rem;
}
/* 抬头那行小字改成等宽，底下拉一条线 —— 像表格的表头 */
body.a-walls .album-head .sub {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .6rem;
}
/* 这行导言不加引号、不居中，左边压一条铁锈红的竖线 —— 是现场记的一笔 */
body.a-walls .album-head .lede {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 2;
  letter-spacing: .01em;
  color: var(--muted);
  max-width: 38rem;
  margin-top: 1.6rem;
  border-left: 2px solid var(--accent);
  padding-left: clamp(.8rem, 2vw, 1.3rem);
}

/* --- 书脚 -----------------------------------------------------------
   这一本的书脚就是共享的那一套（见上面 body.a-ed），书名走 --run、
   号走全局的页码计数器。这里不需要再写一遍。 */

/* --- 章节页：勘查单上的一站 -----------------------------------------
   顶上一条铁锈红的粗线 —— 这一页不是「翻过去」，是「翻到这一站」。 */
.ly-chapter {
  padding: clamp(3rem, 15vh, 9rem) 0 clamp(2rem, 8vh, 5rem);
  border-top: 2px solid var(--accent);
  margin-bottom: clamp(2rem, 7vh, 5rem);
}
.ly-chapter .ch-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.ly-chapter .ch-num {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding-right: clamp(1rem, 3vw, 2.4rem);
}
.ly-chapter .ch-txt { flex: 1 1 auto; min-width: 0; }
.ly-chapter .ch-place {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1;
  margin: 0 0 .8rem;
}
.ly-chapter .ch-place .zh {
  display: block;
  margin: .6em 0 0;
  font-size: .46em;
  letter-spacing: .3em;
}
.ly-chapter .ch-meta {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}
.ly-chapter .ch-vert {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  font-family: var(--zh);
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  letter-spacing: .4em;
  line-height: 1;
  color: var(--accent);
}
/* 地名：从章页的主角降成一行小字，跟在张数底下。只出英文、等宽、极淡 ——
   看一眼知道在哪儿，不参与叙事。章页的主角现在是主题（见 build.py page_chapter）。 */
.ly-chapter .ch-at {
  margin-top: .7em;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
}
/* 图注里的地名：同样是那行小字。全站中文地名到此为止。 */
.pl-at {
  font-family: var(--mono);
  font-size: .94em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- 札记页：只有字的一页 -------------------------------------------
   一章翻完、下一章还没开的那口气。落款写 NOTE · 札记，
   是因为这些字是编进去的编辑文字，不是照片的说明。 */
.ly-note {
  padding: clamp(3rem, 14vh, 8rem) 0 clamp(2.5rem, 11vh, 7rem);
  border-top: 2px solid var(--accent);
  margin-bottom: clamp(2rem, 7vh, 5rem);
}
.ly-note .nt-body {
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  line-height: 2.1;
  color: var(--ink);
  max-width: 30rem;
  margin: 0 0 clamp(1.5rem, 5vh, 3rem);
  text-wrap: pretty;
}
.ly-note .nt-sig {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.ly-note .nt-sig .zh { letter-spacing: .14em; }

/* --- 图版外栏：编号放大成主角 ---------------------------------------
   原来外栏只有一行 .64rem 的微字。改成：一条细线、大号编号、地点和日期
   各占一行。这一条一次改掉半本书的页，是这套改法里最省事的一处。 */
body.a-walls .ly-plate .pnote {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  border-top: 1px solid var(--rule);
  padding-top: .8rem;
}
body.a-walls .ly-plate.r .pnote { align-items: flex-end; }
body.a-walls .ly-plate .pnote .pn-num {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: .9;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
body.a-walls .ly-plate .pnote .pn-txt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
body.a-walls .ly-plate .pnote .pn-date {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- 图版索引：改成一本账 -------------------------------------------
   加表头、行线，编号走点缀色。单栏 —— 表头跟多栏列表对不齐，
   而账本就该一行一行读下去。 */
body.a-walls .plates-list ol { columns: 1; }
body.a-walls .plates-list .pt-head,
body.a-walls .plates-list li {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: baseline;
}
body.a-walls .plates-list .pt-head {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .5rem;
  margin-bottom: .35rem;
}
body.a-walls .plates-list li {
  font-family: var(--mono);
  border-bottom: 1px solid var(--rule);
  padding: .42rem 0;
}
body.a-walls .plates-list .pl { color: var(--accent); opacity: 1; }
body.a-walls .plates-list .pd { float: none; text-align: right; }
/* 「同上」那一格的破折号要压下去，不然它跟真地名抢一样的黑度。 */
body.a-walls .plates-list .pc-ditto { color: var(--faint); }

/* --- 版权页 ---------------------------------------------------------- */
.colophon {
  padding: clamp(2.5rem, 7vh, 5rem) 0 5rem;
  border-top: 1px solid var(--rule);
}
.colophon h2 {
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.4rem;
}
.colophon h2 .zh { font-size: .95em; letter-spacing: .1em; text-transform: none; }
.colophon .cl-body p {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  line-height: 2.1;
  color: var(--muted);
  max-width: 34rem;
  margin: 0;
}

/* --- 窄屏：这一本在手机上要让位的地方 -------------------------------
   书脚上的书名有三十来个字符，500 宽的屏上会和页码挤到一起；
   竖排中文放在标题边上也不剩多少地方。这两处在窄屏收起来，
   页码和标题留着 —— 手机上本来也读不出一本书的版式。 */
@media (max-width: 720px) {
  body.a-walls .ah-vert { display: none; }
  body.a-walls .book > .leaf::before { content: none; }
  .ly-chapter .ch-vert { display: none; }
  .ly-chapter .ch-in { gap: 1.2rem; }
  body.a-walls .album-head .lede { font-size: .76rem; line-height: 1.95; }
}

/* ============================================================
   其余五本
   ------------------------------------------------------------
   共用上面 body.a-ed 那套书脚，各自只写自己的纸、墨、点缀色
   和那两三个别人没有的元素。
   ============================================================ */

/* --- 夜与城市 —— 黑底上的片子 ---------------------------------------
   六本里唯一翻黑的一本。近黑的纸、米白的字，点缀色是街灯的黄。
   黑纸最难的是一张暗片子会跟纸糊在一起，所以每张图外面留一道
   几乎看不见的亮边，把画幅从纸里拎出来 —— 这是这一本唯一的技巧。 */
body.a-night {
  --paper:  #0c0c0e;
  --ink:    #e9e6de;
  --muted:  #a8a39a;
  --faint:  #6c6963;
  --rule:   #26262b;
  --accent: #d8b26a;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cell-floor: #16161a;
  --run: "夜与城市 · Night and the City";
}
body.a-night figure img {
  outline: 1px solid rgba(233, 230, 222, .10);
  outline-offset: -1px;
}
/* 抬头不是一行字，是一张片头卡：字大、行短、下面留一大片黑 */
body.a-night .album-head {
  padding: clamp(3rem, 20vh, 13rem) 0 clamp(2.5rem, 9vh, 6rem);
  border-bottom: 1px solid var(--rule);
}
body.a-night .album-head h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 6.2rem);
  line-height: .96;
  letter-spacing: -.02em;
  max-width: 14ch;
}
body.a-night .album-head .sub {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 1.6rem;
}
body.a-night .album-head .lede {
  max-width: 32rem;
  font-size: .92rem;
  line-height: 1.9;
  color: var(--muted);
}
/* 号印真帧号，不印页码 —— 这一本的叶子会吃掉两张片，页码不等于帧号 */
body.a-night .book > .leaf::after {
  content: "Frame " attr(data-fr) " / " var(--tot);
  letter-spacing: .22em;
}

/* --- 三峡好人 —— 陈列台 ----------------------------------------------
   换过一轮。原来那版想的是「无色的标本目录」，问题不在无色 ——
   在**结构跟别本一模一样**：还是左对齐、还是外栏、还是靠页边距说话。
   于是每本换了纸色，翻起来却仍然是同一本书。

   这一版改的是骨架：整本**居中对称**。六本里只有这一本是对称的，
   翻到任何一页都知道不是同一本书，不需要看颜色。
   纸也从纯白挪到标本盘的冷灰 —— 纯白和其余四本太像，撑不起「只有它是白的」。

   每块图版加一圈细线：东西是「陈列」出来的，不是「排」出来的。 */
body.a-still {
  --paper:  #f0f2f3;   /* 六本里最白、最冷的一本 */
  --ink:    #131518;
  --muted:  #4a5058;
  /* 原来是 #8b939b —— 压在 #f0f2f3 上只有 2.77，六本里最淡的一处。
     而这个色印的是图版外栏那行 0.64rem 的小字（编号、地点、日期）
     和索引里的日期，是全站最小的一档字。压到 3.55，跟另外四本拉平。 */
  --faint:  #7a8087;
  --rule:   #d3d9dc;
  /* 原来是 #2f4858（泥板蓝）—— 跟 03 的墨蓝 #1e3a68 只差 16，
     两本的点缀色在屏幕上是一回事。标本目录用墨绿更对，也把色相让开。 */
  --accent: #1f4a3d;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cell-floor: #e4e9eb;
  --run: "三峡好人 · Still Life";
}
/* 居中：这一条是这本的骨架，底下所有规则都建在它上面 */
body.a-still .album-head,
body.a-still .plates-list,
body.a-still .colophon,
body.a-still .ly-chapter .ch-in,
body.a-still .book figcaption,
body.a-still .book .cap { text-align: center; }
body.a-still .album-head .lede { margin-inline: auto; }
body.a-still .album-head .sub,
body.a-still .album-head .lede {
  font-family: var(--mono);
  letter-spacing: .14em;
}
body.a-still .album-head .lede {
  font-size: .78rem;
  line-height: 2;
  text-transform: uppercase;
  color: var(--faint);
}
/* 展板：图版整页从两栏 grid 变成一块带框的竖版 —— 图和它的说明
   上下叠在一块板子里，板子居中。这是这一本和其余五本最大的分别。 */
body.a-still .ly-plate,
body.a-still .ly-plate.r {
  display: block;
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 5vh, 3rem) clamp(1rem, 4vw, 2.6rem);
  margin-bottom: clamp(2.6rem, 9vh, 5.5rem);
}
/* 原来那个「图栏宽 = min(74%, 视口高×比例)」是 grid 算的；换成一块板子之后
   得自己封顶 —— 不封的话一张 2:3 竖片铺满整栏就是一千五百 px 高，一页看不完。
   这一条只管图版。 */
body.a-still .ly-plate figure,
body.a-still .ly-plate.r figure {
  width: min(100%, calc(var(--vcap) * var(--ar, 1.5)));
  margin: 0 auto;
}
body.a-still .ly-plate .pnote,
body.a-still .ly-plate.r .pnote {
  grid-column: auto;
  padding: .95rem 0 0;
  text-align: center;
}
/* 「Plate 07   WUXI」—— 编号是牌子，地名缩在后面 */
body.a-still .ly-plate .pnote .pl { color: var(--accent); }
body.a-still .ly-plate .pnote .pl::before {
  content: "Plate ";
  color: var(--faint);
}
body.a-still .ly-plate .pnote .pl-at { margin-left: .9em; }
body.a-still .book > .leaf::after {
  content: "Plate " attr(data-fr) " / " var(--tot);
  letter-spacing: .22em;
}
/* 章页也居中：编号收小、竖排中文撤掉（对称的版面里没有「挂在一侧」的位置） */
body.a-still .ly-chapter { border-top: 1px solid var(--rule); }
body.a-still .ly-chapter .ch-in { display: block; }
body.a-still .ly-chapter .ch-num {
  padding: 0 0 .5rem;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}
body.a-still .ly-chapter .ch-vert { display: none; }
body.a-still .ly-chapter .ch-place .zh { display: block; margin: .7em 0 0; letter-spacing: .3em; }
body.a-still .ly-chapter .ch-at { letter-spacing: .3em; }
/* 索引：一行一件，底下划一道线。编号是馆藏号，用泥板蓝 */
body.a-still .plates-list ol { columns: 1; }
body.a-still .plates-list li {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding: .54rem 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-align: left;
}
body.a-still .plates-list .pl { color: var(--accent); opacity: 1; }
body.a-still .plates-list .pd { float: none; text-align: right; }

/* --- 城市之光 —— 号外 -------------------------------------------------
   九十一张，最长的一本。原来那版是「冷白纸 + 一点印红」：路子没错，
   但那点红是唯一的记号，撤掉红就什么都不剩了 —— 说明风格长在颜色上，
   没长在版面上。

   这一版把力气全放到**线**上：新闻纸的灰、报头上下两道粗线、
   正文栏之间的竖线、索引的双栏。**一点彩色也不要** —— 号外的力气
   从来不在颜色上。九十一张挤在一本里会闷，所以换气页从「居中引文」
   改成一条窄栏的断栏文，像报纸中间那块编者的话。 */
body.a-people {
  /* 报纸白 —— 比小城之春那张旧勘查纸**暗一档**（纸 221 vs 231），
     偏暖、低彩度，就是没涂布的新闻纸。原来这里是 #e9e6dd，
     跟 body.a-walls 的 #e7e5dd 最大通道只差 2 —— 那不是两本书，
     是同一本书换了排版。整站六本里就这一对是真撞上了。 */
  --paper:  #ddd9cd;
  --ink:    #17150f;
  --muted:  #4b4740;
  /* 跟 walls 同一个道理：纸暗了，faint 不跟就掉到 2.60，
     小字图注会糊进纸里。这个值把它拉回 3.5 上下。 */
  --faint:  #746f65;
  --rule:   #a8a294;   /* 跟着纸一起压暗，保住「粗线压细线」的那口气 */
  --accent: #17150f;   /* 这一本不要彩色 */
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cell-floor: #d2cdc0;
  --run: "城市之光 · City Lights";
}
/* 报头：上下各一道，上头那道粗。标题用衬线大字，底下压一栏小字 */
body.a-people .album-head {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(1.3rem, 4vh, 2.6rem) 0 clamp(1.1rem, 3vh, 2rem);
}
body.a-people .album-head h1 {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  letter-spacing: -.032em;
  line-height: .92;
}
body.a-people .album-head .lede {
  border: 0;
  padding: 0;
  max-width: 46rem;
}
/* 图注：小一号、不大写、前面一道细线 —— 排出来的，不是印出来的。
   编号加黑：报纸的注里数字是实的。 */
body.a-people .book figcaption,
body.a-people .book .cap {
  border-top: 1px solid var(--rule);
  padding-top: .45rem;
  text-transform: none;
  letter-spacing: .04em;
  font-size: .72rem;
  color: var(--muted);
}
body.a-people .book figure figcaption .pl,
body.a-people .book .cap .pl { color: var(--ink); font-weight: 600; }
/* 换气页：不居中了，改成一条窄栏的断栏文，上下各一道线 */
body.a-people .ly-breath {
  display: block;
  align-items: initial;
  justify-content: initial;
  min-height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
body.a-people .ly-breath .br-in { max-width: 30ch; }
body.a-people .ly-breath .br-body {
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  margin-bottom: 1.2rem;
}
/* 索引：双栏，中间一道竖线 —— 报纸的目录页 */
body.a-people .plates-list ol {
  columns: 2;
  column-gap: clamp(1.4rem, 4vw, 3rem);
  column-rule: 1px solid var(--rule);
}
@media (max-width: 720px) { body.a-people .plates-list ol { columns: 1; } }
/* 呼吸页：一页一句话，落在正中偏上，上下都是空白 */
.ly-breath {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(14rem, 52vh, 30rem);
  padding: clamp(2rem, 8vh, 5rem) 0;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 7vh, 5rem);
}
.ly-breath .br-in { max-width: 26rem; }
.ly-breath .br-body {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 1.6rem;
  text-wrap: pretty;
}
.ly-breath .br-sig,
.ly-essay .es-sig {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.ly-breath .br-sig .zh,
.ly-essay .es-sig .zh { letter-spacing: .14em; }

/* --- 土星之环 —— 游记 -------------------------------------------------
   骨白纸、墨蓝，正文是**真的长段落**。六本里唯一一本有衬线正文的
   （Newsreader 只在这一本加载，别的本不为它多下一次请求）。
   七十张里四十七张是竖的 —— 所以这一本多一种页型：两张竖的并成
   一篇双栏画谱，别让竖片永远只占半幅。 */
body.a-land {
  /* 骨白再往黄里走一点。原来 #f1eee6 跟 04 的冷白 #eef0f1 只差 11 ——
     一本游记和一本标本目录不该是同一张纸。 */
  --paper:  #f2ece0;
  --ink:    #151a25;
  --muted:  #4b505d;
  /* 同 04：原来 #888c96 压在骨白纸上 2.86。这本用 faint 的地方特别多 ——
     图版外栏、长文的页边小字、索引日期都靠它。压到 3.56。 */
  --faint:  #787c85;
  --rule:   #d0c9b8;
  --accent: #1e3a68;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:  "Newsreader", "Instrument Serif", Georgia, serif;
  --cell-floor: #e8e2d3;
  --run: "土星之环 · The Rings of Saturn";
}
body.a-land .album-head h1 { font-family: var(--display); }
body.a-land .album-head .lede {
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  max-width: 34rem;
}
body.a-land .book figcaption,
body.a-land .book .cap { color: var(--faint); }
/* 双栏画谱：两张竖的并排。窄屏塌回一栏。 */
.ly-twoup { padding: clamp(1rem, 4vh, 2.5rem) 0; }
.ly-twoup .tw-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--band-gap);
  align-items: start;
}
.ly-twoup figure { min-width: 0; margin: 0; }
/* 正文页：真长段落，行宽二十八字上下，跟图对读 */
.ly-essay {
  padding: clamp(2.5rem, 11vh, 7rem) 0 clamp(2rem, 8vh, 5rem);
  border-top: 2px solid var(--accent);
  margin-bottom: clamp(2rem, 7vh, 5rem);
}
.ly-essay .es-in { max-width: 34rem; }
.ly-essay .es-in p {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.95;
  color: var(--ink);
  margin: 0 0 1.2em;
  text-wrap: pretty;
}
.ly-essay .es-in p:first-child { font-size: clamp(1.08rem, 1.8vw, 1.28rem); }
.ly-essay .es-sig { margin-top: 2rem; }

/* --- 页与页之间的空白：这本的毛病是「多」加「齐」---------------------
   原来每一页底下都是同一个 clamp(2.5rem,13vh,10rem)。翻二十页等于同一页
   翻了二十遍 —— **空白每次都一样，就不叫呼吸，叫空**。两个动作：

   一、把最肥的几处收小（章页顶着 15vh 的空白翻开，像一堵空墙）。
   二、让相邻的页**有意**不一样。用两个量相乘，不是一个量：

        --air   相位：按叶子在书里的位置轮一个三拍子（放开／正常／贴紧）。
        --airy  幅度：按页型放大或收小 —— 通栏大图给多一口气，
                条图和并排的两张本来就该贴紧。

   为什么非得分两个量：只轮位置的话是 **13 → 114 → 41 → 13 → …** 一个
   死循环，量出来相邻 47 对全不重样，可中间有连续九页是同一组数字转了
   九圈 —— 那是节拍器，不是节奏，看久了照样「齐」。只按页型定格也不行：
   同一种页型连排时又齐成一片。两个轮子周期不同（位置 3、页型 3 但不同步），
   合起来才不成拍。

   相位用 :nth-child 挂在元素上、幅度用页型挂同一个元素，两边都只写各自的
   变量 —— 这样不存在谁盖谁的问题（写死 margin 就必须比 specificity，
   而 :nth-child 那条永远赢，页型那条会变成死代码）。 */
body.a-land .book > .leaf {
  margin-bottom: calc(var(--air, 2rem) * var(--airy, 1));
}
body.a-land .book > .leaf:nth-child(3n) {
  --air: clamp(.5rem, 1.6vh, 1rem);
}
body.a-land .book > .leaf:nth-child(3n + 1) {
  --air: clamp(3.4rem, 14vh, 9rem);
}
body.a-land .book > .leaf:nth-child(3n + 2) {
  --air: clamp(1.6rem, 5vh, 3.4rem);
}
body.a-land .book > .leaf.ly-spread,
body.a-land .book > .leaf.ly-full { --airy: 1.3; }
body.a-land .book > .leaf.ly-strip,
body.a-land .book > .leaf.ly-twoup { --airy: .62; }
body.a-land .ly-chapter { padding-top: clamp(1.6rem, 6vh, 3.4rem); }

/* --- 甲方乙方 —— 客户那本相册 ------------------------------------------
   第三版。第一版是牛皮纸交付单，第二版是冷灰打样单 —— 都是「单据」，
   都是等宽字、表格、印样格。他说风格和排法都不要了，整本重来。

   这次不做公文，做**相册**：这本的内容本来就是替别人拍的婚礼和球赛，
   那就照旧相册的样子做 —— 深褐的板，板上裱印张，四角用相角压住。
   六本里只有这一本有「板」和「裱边」，也只有这一本不用等宽字：
   正文和图注走无衬线，等宽那套留给其余的勘查记录、账本、打样。

   颜色：板是深褐 #33261f（不是黑 —— 黑那本让给 05，也不是上一版
   那块饱和的酒红 #47252a：平涂的饱和色读起来是「设计」，不是「东西」）。
   板上叠了一层颗粒和一层不匀的光，见下面的 background-image。

   为什么不并进 .dispatch 那套：那套已经删了，见下。 */
body.a-commissioned {
  /* 旧相册：深褐的板，不是平涂的酒红。
     上一版是一整块饱和的酒红 #47252a —— 平涂的色块读起来是「设计」，
     不是「东西」。回忆的质感只能来自材料：颜色要旧、要暖、要不匀，
     再叠一层颗粒。 */
  --paper:      #33261f;   /* 深褐，像放了很久的硬壳相册 */
  --ink:        #ece0cc;   /* 米白。板上的字和印张的纸边都是这个 */
  --muted:      #bda98f;
  --faint:      #8f7a63;
  --rule:       #4a382c;
  --accent:     #ece0cc;   /* 这一本不另上色 */
  --mono:       "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cell-floor: #271c16;
  --print:      #f0e7d4;   /* 印张的纸边：旧的米色，比纯白黄一点 */
  /* 相角要小、要透。第一版给了 16px 的实心深色三角，压在米色卡纸上
     就成了四个黑角，像贴纸而不是相角 —— 相角是「压住」，不是「框住」。 */
  --corner:     rgba(52, 36, 26, .52);
  --mount:      clamp(6px, .72vw, 11px);
  --cnr:        clamp(9px, .88vw, 13px);
  --run: "甲方乙方 · Party A, Party B";

  /* 板上要有颗粒和不匀的光 —— 这是「东西」和「色块」的分界。
     颗粒走内联的 SVG data URI：不引外部文件，Safari 的 file:// 才不会挡。 */
  background-color: var(--paper);
  background-image:
    radial-gradient(130% 100% at 50% 26%, rgba(255, 236, 202, .06), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
}

/* 裱印张：一圈旧米色的纸边，四角用相角压住。
   投影从 0 18px 40px 收到贴着的 1px —— 上一版那团大投影让照片「浮」在板上，
   那是卡片式网页的语法；相册里的照片是躺平的。
   全局是 border-box，所以 padding 不会把图撑出去。 */
body.a-commissioned .leaf figure {
  position: relative;
  padding: var(--mount);
  background: var(--print);
  border-radius: 1px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    0 7px 16px rgba(0, 0, 0, .26);
}
/* 四角相角。一个伪元素铺四层渐变、四片三角各占一角 —— 不用动 HTML。
   相角压在印张的外角上，就是「这张卡是别在板上的」。 */
body.a-commissioned .leaf figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: var(--cnr) var(--cnr);
  background-position: left top, right top, left bottom, right bottom;
  background-image:
    linear-gradient(to bottom right, var(--corner) 50%, transparent 50%),
    linear-gradient(to bottom left,  var(--corner) 50%, transparent 50%),
    linear-gradient(to top right,   var(--corner) 50%, transparent 50%),
    linear-gradient(to top left,    var(--corner) 50%, transparent 50%);
}
/* 手贴的照片不会张张摆正。差零点几度就够 —— 多了就成了「斜着排版」。
   转的是相纸这一层，不是版面 —— 所以只有「一整张裱在板上」的页型才转，
   并列的（对页、小样条）一起转会互相压边，所以下面那条把它们按回去。 */
body.a-commissioned .leaf figure:nth-of-type(odd)  { transform: rotate(-.35deg); }
body.a-commissioned .leaf figure:nth-of-type(even) { transform: rotate(.3deg); }
body.a-commissioned .ly-pair  .band > figure,
body.a-commissioned .ly-strip .band > figure { transform: none; }

/* 照片泛黄。**这是全站唯一一处动了他照片的地方**，一行，删掉即还原。
   只加暖、不动影调：没有 contrast / brightness —— 明暗必须还是他拍的那张。
   sepia 会把彩度抽掉（婚礼的红会发灰），所以用 saturate 补回一点。
   压在图这一层，不压在印张上 —— 纸边和相角不能被染黄。 */
body.a-commissioned .leaf figure img {
  filter: sepia(.15) saturate(1.05);
}

/* 印样格里的图是 object-fit: cover、裁在 .c 里的，不能跟着一起裱 */
body.a-commissioned .ly-contact .sheet figure {
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
body.a-commissioned .ly-contact .sheet figure::after { display: none; }
body.a-commissioned .ly-contact .sheet .c {
  background: var(--print);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .22);
}

/* 小样条：一行三张，间距从 3px（胶片那套）放开到一颗米的宽度 ——
   裱了纸边、又各转了一点点，再按 3px 排就会叠在一起。
   相角去掉：相角只在「一整张裱在板上」时成立。小样条的 figure 底下
   还压着一行帧号（.fn 是静态的，不像 .cap-hover 是浮在上面的），
   照 inset:0 铺四角，下面两个角会掉到帧号下面去 —— 那是真错位。 */
body.a-commissioned .ly-strip .band { gap: clamp(9px, 1vw, 16px); }
body.a-commissioned .ly-strip .band > figure::after { display: none; }

/* 单张图版页的尺寸：**不动**。
   我原来想把竖幅放大（栏宽乘 1.25），理由是「一页只剩 56vh、底下空三成屏」。
   那个数是错的 —— 我把 min() 里那条约束当成了图高，它其实是**图栏宽**。
   竖幅的图高 = 栏宽 / 比例 = 0.84vh·ar / ar = 84vh，本来就顶到 84vh 就停：
   实实在在量下来，一张图版页（含下边距）占掉 96% 的屏高，本来就不空。
   乘 1.25 之后是 117% —— 每一页都得往下滚，那才是坏事。撤掉。
   下面这张表是实测（1440×900，图高按 813px 的视口折算）：
     系数 1.00 → 图高 80vh，整页 96% 屏   ← 现状
     系数 1.25 → 图高 101vh，整页 117% 屏  ← 我错加的那版
   真正空的是**横向**：竖幅图宽 455px、图注栏 591px，而图注只有一行。
   基础版把图注栏写成 minmax(0, 1fr) —— 外栏吃满剩下的 591px，图注却缩在
   那一栏的左边，于是字右面挂着 480px 的空板，读起来像「东西摆歪了」。
   原注释写的意图是「图靠注那一侧对齐，留白全甩到外侧去」，靠 figure 上的
   margin-left:auto 实现；可 figure 宽是 100% 的栏宽，auto 边距没有余量可吃，
   所以那一条从来没生效过。
   这里改成 max-content：外栏只占图注自己的宽，图文当成一个整体居中。
   图还是 84vh、图注还是贴图底 —— 只是把空从「中间」挪到「两侧」。 */
body.a-commissioned .ly-plate {
  grid-template-columns: min(74%, calc(var(--vcap) * var(--ar, 1.5))) minmax(0, max-content);
  justify-content: center;
}
body.a-commissioned .ly-plate.r {
  grid-template-columns: minmax(0, max-content) min(74%, calc(var(--vcap) * var(--ar, 1.5)));
  justify-content: center;
}
/* 这一本不用等宽字做正文 —— 六本里唯一一本。
   等宽留给勘查记录、账本、打样那三本。 */
body.a-commissioned .album-head .sub,
body.a-commissioned .album-head .lede,
body.a-commissioned .book figcaption,
body.a-commissioned .book .cap,
body.a-commissioned .plates-list,
body.a-commissioned .colophon {
  font-family: var(--text);
  letter-spacing: .1em;
}
/* 图注分两种底，不能一个颜色：
     figcaption 在印张**里面**（旧米色的纸边上）→ 要用深褐的墨写上去。
       上一版给的是 #c6ada4 那样的浅色 —— 浅色压浅色，编号几乎看不见，
       这是真错，不是口味问题。
     .cap / .pnote 在板上（深褐底）→ 才用浅色。 */
body.a-commissioned .book figcaption { color: #6a5847; }
body.a-commissioned .book .cap { color: var(--muted); }
body.a-commissioned .ly-plate .pnote { color: var(--muted); }
/* 书脚也跟着不走等宽。六本的书脚本来是一模一样的一行
   「中文 · English —— 页码」，全站就这一本换掉字体和字距。
   版权页里写了「Set in Instrument Serif and Inter Tight」——
   那句話得是真的，所以这里必须把等宽拿掉，不然版权页就在撒谎。 */
body.a-commissioned .book > .leaf::before,
body.a-commissioned .book > .leaf::after {
  font-family: var(--text);
  letter-spacing: .28em;
}
body.a-commissioned .book > .leaf::after { color: var(--muted); }

/* 抬头：相册的扉页，不是单据的头。去掉上下两道横线，让标题自己站住 */
body.a-commissioned .album-head {
  padding: clamp(3rem, 9vh, 7rem) 0 clamp(1.6rem, 4vh, 2.8rem);
}
body.a-commissioned .album-head h1 {
  font-family: var(--display);
  max-width: 22ch;
}
body.a-commissioned .album-head .lede { max-width: 42rem; }

/* 图版索引：排成三栏的账本。**这里原来是坏的** —— li 没给 grid，
   只剩 .pd 的 float:none，于是「无锡」和「2022 年 4 月」直接粘成
   「无锡April 2022」。补上 grid。 */
body.a-commissioned .plates-list ol { columns: 1; }
body.a-commissioned .plates-list .pt-head,
body.a-commissioned .plates-list li {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: baseline;
}
body.a-commissioned .plates-list .pt-head {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .5rem;
  margin-bottom: .35rem;
}
body.a-commissioned .plates-list li {
  border-bottom: 1px solid var(--rule);
  padding: .42rem 0;
}
body.a-commissioned .plates-list .pl { color: var(--ink); opacity: 1; }
body.a-commissioned .plates-list .pd { float: none; text-align: right; }

/* --- 尾字幕（夜与城市用，替掉版权页）-------------------------------- */
.credits {
  padding: clamp(2.5rem, 8vh, 6rem) 0 5rem;
  border-top: 1px solid var(--rule);
}
.credits .cr-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 3rem);
}
.credits .cr-cell { display: flex; flex-direction: column; gap: .3rem; }
.credits .cr-n {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.credits .cr-l {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
}
.credits .cr-l .zh { letter-spacing: .12em; }
.credits .cr-line {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.5rem 0 0;
}

@media (max-width: 720px) {
  body.a-night .album-head { padding: clamp(2.5rem, 14vh, 7rem) 0 2rem; }
  .ly-twoup .tw-in { grid-template-columns: minmax(0, 1fr); }
  .ly-breath { min-height: 0; }
  .credits .cr-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}