/* ============================================================
   宝贝的时间胶囊 · 版本 A「编辑杂志刊」· v2 修订
   Hugo 自定义主题样式（覆盖 PaperMod，不修改主题本身）
   删除本文件与项目根 layouts/ 即可完全回退

   ── v2 改了什么（2026-10）────────────────────────────────
   1. 版面：原先正文挤在 12 栏里的第 4~10 栏，左边空 3 栏、右边空 2 栏，
      1279px 以上屏幕上整页重心偏左、右半张纸是空的。
      现改成「边注栏 + 测量宽正文」：左栏放元信息（贴着正文右对齐），
      正文定宽 42rem（约 33 汉字/行），右边留出对称外白边。
      宽图可用 .wide / .full 出血，把外白边用起来。
   2. 对比度：--ink-faint 由 #9A9186 提到 #6F6659，
      在纸白上从 2.6:1 提到 5.1:1（WCAG AA 小字要求 4.5:1）。
      原来元信息、图注、存档日期都是 11px 的浅灰，手机阳光下基本看不见。
      纸纹 opacity 也从 .35 降到 .16，纸面不再发脏。
   3. 照片：删掉 grayscale 滤镜。原来正文图 grayscale(.18)、胶片条 .55，
      靠 hover 恢复彩色 —— 手机上根本没有 hover，等于所有照片永远是灰的。
   4. 胶片条：原来强制 3:4 + object-fit:cover，横幅照片会被裁掉大半。
      现在按原始画幅显示（统一高度、宽度自适应），并把这一条改成通栏出血。
   5. 深色模式：暖黑 #17140F（不是纯黑），默认跟随系统，可手动切换。
   6. 手机端：正文提到元信息之前（原来先看到 350px 的日期/分类/作者），
      元信息压成一行卡片放到正文之后。
   7. 正文行高 2.05 → 1.9，中文补 .01em 字距；首字下沉基线对齐。
   ============================================================ */

/* ---------- 1. 变量与基础 ---------- */
:root{
  /* 浅色（默认）：暖纸白 */
  --paper:#FAF7F2;
  --paper-2:#F3EFE7;
  --ink:#1A1815;
  --ink-soft:#5C554B;
  --ink-faint:#6F6659;          /* v2：原 #9A9186 */
  --rule:#DAD2C6;
  --rule-soft:#E7E0D4;
  --accent:#C0402C;
  --accent-soft:rgba(192,64,44,.30);
  --topbar:rgba(250,247,242,.86);
  --noise-opacity:.16;          /* v2：原 .35 */
  --shadow:0 1px 2px rgba(26,24,21,.06);

  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC",STSong,"SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* v2：版面骨架 —— 下面 4 个值同时被 .wrap / .feature / 出血计算引用，
     想调整整页留白只改这里 */
  --wrap-max:1180px;
  --wrap-pad:clamp(20px,5vw,56px);
  --rail:clamp(104px,11vw,150px);     /* 左侧边注栏宽（下限 104px：再窄标签就折行了） */
  --rail-gap:clamp(22px,3.6vw,52px);  /* 边注栏与正文的间距 */
  --measure:42rem;                    /* 正文测量宽 */

  /* 出血时用来抵掉 .wrap 在宽屏上的居中偏移 */
  --wrap-center:max(0px,calc((100vw - var(--wrap-max)) / 2));
}

/* 深色：暖黑。JS 会在 <head> 里立刻写好 data-theme，不会闪白。 */
:root[data-theme="dark"]{
  --paper:#17140F;
  --paper-2:#1F1B15;
  --ink:#EDE7DB;
  --ink-soft:#B4A996;
  --ink-faint:#948A78;
  --rule:#332C22;
  --rule-soft:#282218;
  --accent:#E0714F;
  --accent-soft:rgba(224,113,79,.34);
  --topbar:rgba(23,20,15,.84);
  --noise-opacity:.09;
  --shadow:0 1px 2px rgba(0,0,0,.45);
}
/* 这里**故意没有**「跟随系统」的兜底段（2026-10-09 按用户要求删掉）。
   本站默认永远是纸白：手机开着深色模式进来也还是纸白，只有点顶栏那个按钮才进暖黑。
   关掉 JS 时 data-theme 不会被写上，:root{} 里那套浅色变量就是默认值 —— 正好。
   ⚠️ 别再把 @media (prefers-color-scheme:dark) 加回来，那会让深色系统下自动变黑。 */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
/* 纸纹 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;filter:invert(1)}

img{max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);position:relative;z-index:2}

/* ---------- 2. 顶栏与进度条 ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:70;width:0}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--topbar);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--rule);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
.topbar.show{transform:translateY(0)}
.topbar-in{
  max-width:var(--wrap-max);margin:0 auto;padding:12px var(--wrap-pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{
  font-family:var(--serif);font-size:15px;letter-spacing:.16em;font-weight:600;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topnav{display:flex;gap:26px;font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft);flex:0 0 auto}
.topnav a{color:inherit;text-decoration:none;position:relative;padding-bottom:2px}
.topnav a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.topnav a:hover::after{transform:scaleX(1);transform-origin:left}

/* v2：深浅色切换按钮。放在 .topnav 之外 —— 手机上 .topnav 是隐藏的，
   按钮不能跟着一起消失。 */
.themebtn{
  flex:0 0 auto;appearance:none;background:none;border:1px solid var(--rule);
  border-radius:100px;width:30px;height:30px;cursor:pointer;color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
.themebtn:active{transform:scale(.92)}
.themebtn svg{width:15px;height:15px;display:block}
.themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:block}
:root[data-theme="dark"] .themebtn .i-moon{display:none}
@media(max-width:720px){.topnav{display:none}}

/* ---------- 3. 报头 ---------- */
.masthead{padding:clamp(70px,13vw,140px) 0 clamp(28px,4vw,44px)}
.masthead .kicker{
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;
}
.masthead h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(42px,10.5vw,112px);
  line-height:.98;letter-spacing:-.02em;
}
.masthead h1 em{font-style:italic;color:var(--accent)}
.mast-rule{
  display:flex;align-items:center;gap:18px;margin-top:clamp(24px,4vw,40px);
  border-top:1px solid var(--ink);padding-top:14px;
  font-size:12px;letter-spacing:.14em;color:var(--ink-soft);
  flex-wrap:wrap;
}
.mast-rule .sep{color:var(--rule)}
.mast-rule .grow{flex:1}
.mast-rule a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.mast-rule a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* 内页报头（文章页 / 列表页） */
.masthead.is-inner{padding:clamp(80px,14vw,150px) 0 clamp(24px,3.4vw,38px)}
.masthead.is-inner h1{font-size:clamp(34px,7.2vw,76px);line-height:1.06;letter-spacing:-.015em}
.masthead.is-inner .kicker a{color:inherit;text-decoration:none}
.masthead.is-inner .kicker a:hover{color:var(--accent)}

/* ---------- 4. 主文章（v2：边注栏 + 测量宽正文） ---------- */
.feature{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--rail-gap);
  padding:clamp(30px,5vw,56px) 0 clamp(50px,8vw,96px);
}
/* 元信息：贴住正文右对齐，形成「边注」 */
.feature .meta{
  grid-column:1;position:sticky;top:96px;align-self:start;
  text-align:right;
}
.feature .body{grid-column:2;min-width:0}

.meta-list{font-size:12px;letter-spacing:.08em;color:var(--ink-faint);line-height:1.9}
.meta-list b{display:block;color:var(--ink);font-weight:600;letter-spacing:.06em;font-size:12.5px;margin-bottom:3px}
.meta-list .item{margin-bottom:18px}
.tag{
  display:inline-block;border:1px solid var(--rule);border-radius:100px;
  padding:4px 11px;font-size:11px;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 6px 6px;
  text-decoration:none;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.tag:hover{border-color:var(--accent);color:var(--accent)}

/* 正文测量宽：标题 / 导语 / 段落共用同一条右边界，
   图片默认也在同一边界内；.wide / .full 才出血。 */
.feature .body > h2,
.feature .body > .standfirst,
.feature .prose > *{max-width:var(--measure)}

.feature h2, .col h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,5.4vw,54px);line-height:1.12;letter-spacing:-.01em;
  margin-bottom:20px;
}
.feature h2 a{text-decoration:none;transition:color .4s var(--ease)}
.feature h2 a:hover{color:var(--accent)}
.standfirst{
  font-size:clamp(15px,1.6vw,18px);color:var(--ink-soft);line-height:1.75;
  padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--rule);
}

/* v2：首页封面故事的「读全文」—— 做成一条发丝线底部的编辑式行 */
.readmore{
  max-width:var(--measure);margin-top:clamp(26px,3.6vw,40px);
  padding-top:14px;border-top:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
}
.readmore a{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:13px;letter-spacing:.14em;color:var(--accent);
  transition:gap .4s var(--ease);
}
.readmore a:hover{gap:16px}
.readmore a span:first-child{border-bottom:1px solid var(--accent-soft);padding-bottom:3px}
.readmore .rcount{font-size:12px;letter-spacing:.1em;color:var(--ink-faint);white-space:nowrap}

/* ---------- 5. 正文 ---------- */
.prose{
  font-family:var(--serif);
  font-size:clamp(16.5px,1.85vw,19.5px);
  line-height:1.9;                 /* v2：原 2.05，中文衬线太松 */
  letter-spacing:.01em;            /* v2：中文补一点字距 */
  color:var(--ink);
}
.prose p{margin-bottom:1.35em}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose h2,.prose h3,.prose h4{
  font-family:var(--serif);font-weight:600;line-height:1.3;
  margin:1.8em 0 .8em;letter-spacing:-.005em;
}
.prose h2{font-size:1.42em}
.prose h3{font-size:1.2em}
.prose h4{font-size:1.06em}
.prose ul,.prose ol{margin:0 0 1.35em 1.4em}
.prose li{margin-bottom:.5em}
.prose blockquote{
  margin:1.8em 0;padding:0 0 0 22px;border-left:2px solid var(--accent);
  font-style:italic;color:var(--ink-soft);
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;background:var(--paper-2);padding:.15em .4em;border-radius:3px;
}
.prose pre{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;
  padding:18px;overflow-x:auto;margin:0 0 1.5em;line-height:1.7;
}
.prose pre code{background:none;padding:0;font-size:.82em}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.prose img{display:block;width:100%;margin:0}
/* 首字下沉（v2：对齐首行基线，原来偏高） */
.prose.drop > p:first-of-type::first-letter{
  float:left;font-size:3.9em;line-height:.78;padding:.1em .14em 0 0;
  font-weight:600;color:var(--accent);
}

/* 图注 / 正文插图 */
.prose .cap-fig{margin:clamp(30px,5vw,52px) 0}
.prose .cap-fig img{
  display:block;width:100%;
  /* v2：删掉了 grayscale(.18)。手机没有 hover，那等于照片永远发灰。 */
}
.prose .cap-fig figcaption{
  font-size:12px;letter-spacing:.07em;color:var(--ink-faint);
  margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:14px;
  font-family:var(--sans);
}
.prose .cap-fig figcaption:empty{display:none}

/* v2：图片出血档位
   .wide —— 占满整个正文栏（吃掉右侧外白边）  .full —— 顶到浏览器两边
   .small —— 缩到 28rem，做小插图
   用法：{{< figure src="…" class="wide" caption="…" >}} */
.prose .cap-fig.wide,
.feature .body > .cap-fig.wide{max-width:none}
.prose .cap-fig.full,
.feature .body > .cap-fig.full{
  max-width:none;
  margin-left:calc(-1 * (var(--wrap-center) + var(--wrap-pad) + var(--rail) + var(--rail-gap)));
  margin-right:calc(-1 * (var(--wrap-center) + var(--wrap-pad)));
}
.prose .cap-fig.small,
.feature .body > .cap-fig.small{max-width:28rem}
.prose .cap-fig.full figcaption,
.prose .cap-fig.wide figcaption{
  max-width:var(--measure);
}

/* ---------- 6. 引文 ---------- */
.pull-wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--rail-gap)}
.pull{
  grid-column:1/-1;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,3.1vw,34px);line-height:1.5;color:var(--ink);
  padding:clamp(26px,4vw,44px) 0;margin:clamp(26px,4vw,44px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  text-align:center;
  max-width:44rem;margin-left:auto;margin-right:auto;
}
.pull span{color:var(--accent)}

/* ---------- 7. 胶片条（v2：通栏出血 + 原始画幅） ---------- */
/* 这一条放在 .wrap 之外（见 layouts/index.html），所以本身就是通栏块。
   里面的 .strip-wrap 再按 .wrap 的宽度与内边距对齐 ——
   比用 100vw 去算居中偏移可靠（带滚动条时 100vw 会多出十几像素）。 */
.filmstrip{
  position:relative;z-index:2;
  padding:clamp(40px,7vw,84px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);
}
.strip-wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}
.strip-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:20px;flex-wrap:wrap}
.strip-head h3{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-weight:600;letter-spacing:.01em}
.strip-head span{font-size:11.5px;letter-spacing:.16em;color:var(--ink-faint)}
.strip{
  display:flex;align-items:flex-start;gap:16px;overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  /* 让第一/最后一帧能滚到与正文同一条边 */
  scroll-padding-inline:0;
}
.strip::-webkit-scrollbar{height:4px}
.strip::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
.frame{flex:0 0 auto;scroll-snap-align:start}
.frame img{
  display:block;
  /* v2：统一高度、宽度按原始画幅走 —— 原来的 3:4 + object-fit:cover
     会把横幅照片裁掉大半（出生照、走廊照都被裁废了）。 */
  height:clamp(220px,30vw,330px);width:auto;max-width:none;
  /* v2：不再去色 */
}
.frame p{font-size:11.5px;letter-spacing:.07em;color:var(--ink-faint);margin-top:10px;line-height:1.6}
.frame p b{color:var(--ink);font-weight:600;font-family:var(--serif);font-size:13px}

/* ---------- 8. 往期存档 ---------- */
.archive{padding:clamp(50px,9vw,110px) 0}
.archive h3{font-family:var(--serif);font-size:clamp(22px,3vw,34px);font-weight:600;margin-bottom:8px}
.archive .sub{font-size:12.5px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:40px}
.row{
  display:grid;grid-template-columns:56px 118px 1fr 34px;gap:20px;align-items:center;
  padding:22px 4px;border-top:1px solid var(--rule);
  text-decoration:none;color:inherit;position:relative;
  transition:padding .5s var(--ease);
}
.row:last-child{border-bottom:1px solid var(--rule)}
.row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.row:hover::after{transform:scaleX(1)}
.row:hover{padding-left:16px}
.row .num{font-family:var(--serif);font-size:13px;color:var(--accent);letter-spacing:.06em}
.row .date{font-size:12.5px;letter-spacing:.08em;color:var(--ink-faint)}
.row .ttl{font-family:var(--serif);font-size:clamp(17px,2.1vw,24px);font-weight:600;letter-spacing:-.005em;line-height:1.35}
.row .arrow{font-size:19px;color:var(--ink-faint);transition:transform .5s var(--ease),color .5s}
.row:hover .arrow{transform:translateX(8px);color:var(--accent)}
.row.is-new .ttl::after{
  content:"新";display:inline-block;margin-left:12px;vertical-align:middle;
  font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--paper);
  background:var(--accent);border-radius:100px;padding:3px 9px;font-weight:400;
}
.empty-note{
  font-family:var(--serif);font-size:15px;color:var(--ink-faint);
  padding:28px 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
/* 标签云 */
.tagcloud{display:flex;flex-wrap:wrap;gap:12px}
.tagcloud .tag{font-size:13px;padding:9px 18px;margin:0}
.tagcloud .tag b{font-family:var(--serif);color:var(--accent);font-weight:600;margin-left:6px}

/* ---------- 9. 翻页 ---------- */
.pager{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,70px);
  padding:clamp(24px,3.4vw,36px) 0;
}
.pager a{
  flex:1 1 240px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .5s var(--ease);
}
.pager a:hover{transform:translateX(var(--dir,6px))}
.pager .plabel{font-size:11.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.pager .ptitle{font-family:var(--serif);font-size:clamp(16px,2vw,21px);font-weight:600;line-height:1.4}
.pager .next{text-align:right;--dir:-6px}
.pager a:hover .ptitle{color:var(--accent)}

/* ---------- 10. 页脚 ---------- */
footer{
  border-top:1px solid var(--ink);
  padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,60px);
  margin-top:clamp(20px,4vw,50px);
}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.foot .sign{font-family:var(--serif);font-size:clamp(20px,3vw,30px);font-weight:600;line-height:1.3}
.foot .sign a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s}
.foot .sign a:hover{border-bottom-color:var(--accent)}
.foot .note{font-size:12px;letter-spacing:.1em;color:var(--ink-faint);line-height:2;text-align:right}
@media(max-width:640px){.foot .note{text-align:left}}

/* ---------- 11. 入场动画 ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}
.rv.d2{transition-delay:.18s}
.rv.d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ---------- 12. 响应式 ---------- */
/* 中等屏（901~1080px）：边注栏收窄，正文测量宽也跟着收一点 */
@media(max-width:1080px){
  :root{--rail:clamp(104px,10vw,124px);--rail-gap:clamp(22px,3vw,36px);--measure:38rem}
}
/* v2：900px 以下不再用边注栏 —— 窄屏上边注栏只能挤到 70~90px，
   「爸爸（胖虎）」和标签会折行成「爸爸（胖 / 虎）」。
   改成单栏：正文在前、元信息压成一行跟在后面。
   原来元信息排在标题之前，手机上要先滚 350px 才看见文章标题。 */
@media(max-width:900px){
  .feature{grid-template-columns:minmax(0,1fr);row-gap:0}
  .feature .body{grid-column:1;grid-row:1}
  .feature .body > h2,
  .feature .body > .standfirst,
  .feature .prose > *,
  .prose .cap-fig.wide,
  .prose .cap-fig.small{max-width:none}
  .feature .meta{
    grid-column:1;grid-row:2;position:static;text-align:left;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
    border-top:1px solid var(--rule);margin-top:clamp(30px,7vw,46px);padding-top:16px;
  }
  .meta-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
  .meta-list .item{margin:0}
  .meta-list b{display:inline;margin:0 6px 0 0;font-size:12px}
  .feature .meta > div:last-child{display:flex;flex-wrap:wrap;gap:6px}
  .tag{margin:0}
  .pull{grid-column:1/-1}
  .pull-wrap{grid-template-columns:minmax(0,1fr)}
  /* 窄屏上 .full 出血只抵掉 .wrap 内边距即可 */
  .prose .cap-fig.full{
    margin-left:calc(-1 * var(--wrap-pad));
    margin-right:calc(-1 * var(--wrap-pad));
  }
}
/* 手机：存档行换成两行布局（日期挪到标题下面） */
@media(max-width:720px){
  .row{grid-template-columns:40px 1fr 24px;gap:12px}
  .row .date{display:none}
}

/* ---------- 13. 图片管线补丁 ----------
   图片由 partials/capsule-img.html 输出 <picture> + WebP + srcset。
   <picture> 默认是 inline，会让块的 <img> 周围多出几像素的行内间隙，
   所以统一按块级元素处理。
   另外：手机端原来把 .row 的日期整列藏掉了，看起来像一格空白，
   这里改成日期换到标题下面一行显示。 */
picture{display:block}
.strip picture,.frame picture,.prose .cap-fig picture{display:block;width:100%}
/* 胶片条按原始画幅，宽度交给 <img> 决定，别让 <picture> 撑满 */
.frame picture{width:auto}

@media(max-width:720px){
  .row{grid-template-columns:38px 1fr 20px;column-gap:12px;row-gap:3px;align-items:baseline}
  .row .num{grid-column:1;grid-row:1/3;align-self:center}
  .row .ttl{grid-column:2;grid-row:1}
  .row .date{display:block;grid-column:2;grid-row:2}
  .row .arrow{grid-column:3;grid-row:1/3;align-self:center}
}

/* ---------- 14. 影像页（/gallery/） ----------
   首页「影像」胶片条点任意一张都会进到这里，并定位到那一张。

   版式的关键：相纸托盘等高，宽度 = 内高 × 该张的画幅比。
   比例由模板算好写在 --r 上（取自原图），所以每张照片都被托盘
   严丝合缝地框住，横的竖的都不会剩一大片白边。
   改 --gal-h 就能整体放大缩小；--gal-pad 是照片四周的纸边。 */
.gal-intro{max-width:var(--measure);margin-bottom:clamp(28px,4.5vw,48px);color:var(--ink-soft)}

.gal{
  --gal-h:min(60vh,580px);
  --gal-w:min(88vw,1040px);
  --gal-pad:clamp(10px,1.5vw,18px);
  position:relative;z-index:2;
  padding:clamp(32px,5vw,60px) 0 clamp(24px,3.6vw,40px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);
}

.gal-track{
  display:flex;align-items:flex-start;
  gap:clamp(18px,3vw,44px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:6px 0 14px;
  cursor:grab;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-track.grab{cursor:grabbing}
.gal-track:focus-visible{outline:2px solid var(--accent-soft);outline-offset:6px}

.gal-slide{
  flex:0 0 auto;
  width:calc((var(--gal-h) - 2 * var(--gal-pad)) * var(--r,1) + 2 * var(--gal-pad));
  max-width:var(--gal-w);
  scroll-snap-align:center;scroll-snap-stop:always;
  /* 不在中心的那几张压暗、微缩 —— 视线自然落在中间那张上 */
  opacity:.4;transform:scale(.972);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.gal-slide.on{opacity:1;transform:none}
/* 首尾各留一段，让第一张能和正文对在同一条左边线上 */
.gal-slide:first-child{margin-left:calc(var(--wrap-center) + var(--wrap-pad))}
.gal-slide:last-child{margin-right:calc(var(--wrap-center) + var(--wrap-pad))}

.gal-frame{
  width:100%;height:var(--gal-h);
  display:flex;align-items:center;justify-content:center;
  padding:var(--gal-pad);
  background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;
  box-shadow:var(--shadow);
}
.gal-frame picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.gal-frame img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

.gal-cap{
  display:flex;gap:14px;align-items:baseline;
  margin-top:clamp(14px,2vw,20px);padding-top:13px;
  border-top:1px solid var(--rule);
}
.gal-num{
  flex:0 0 auto;font-family:var(--serif);font-size:12px;
  letter-spacing:.14em;color:var(--accent);
}
.gal-txt{flex:1 1 auto;min-width:0}
.gal-txt b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,2.1vw,22px);line-height:1.3;letter-spacing:-.005em;
}
.gal-txt i{
  display:block;font-style:normal;margin-top:6px;
  font-size:13.5px;line-height:1.7;letter-spacing:.02em;color:var(--ink-faint);
}
.gal-date{flex:0 0 auto;font-size:12px;letter-spacing:.1em;color:var(--ink-faint)}

/* 上一张 / 下一张放在进度条那一行 ——
   幻灯片宽度是随画幅变的，按钮悬在两侧没法对齐，放在这里永远对得上。 */
.gal-hud-wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}
.gal-hud{display:flex;align-items:center;gap:18px;margin-top:clamp(20px,3vw,30px)}
.gal-nav{flex:0 0 auto;display:inline-flex;align-items:center;gap:14px}
.gal-btn{
  appearance:none;width:32px;height:32px;padding:0;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft);
  font-size:14px;line-height:1;
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.gal-btn:hover{border-color:var(--accent);color:var(--accent)}
.gal-btn:active{transform:scale(.92)}
/* 自动播放开关：播着的时候显示暂停图标并染成强调色，停了显示三角。
   图标用 SVG 而不是字符，避免各平台字形不一致。 */
.gal-btn-play svg{width:12px;height:12px;display:block;fill:currentColor}
.gal-btn-play .i-pause{display:none}
.gal-btn-play.is-playing{border-color:var(--accent-soft);color:var(--accent)}
.gal-btn-play.is-playing .i-play{display:none}
.gal-btn-play.is-playing .i-pause{display:block}
.gal-count{font-size:12px;letter-spacing:.14em;color:var(--ink-faint);white-space:nowrap}
.gal-count b{font-family:var(--serif);font-weight:600;font-size:13px;color:var(--ink)}
.gal-bar{position:relative;flex:1 1 auto;height:1px;background:var(--rule)}
.gal-bar i{
  position:absolute;left:0;top:0;height:1px;width:0;background:var(--accent);
  transition:width .45s var(--ease);
}
.gal-hint{flex:0 0 auto;font-size:11.5px;letter-spacing:.16em;color:var(--ink-faint)}

.gal-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:10px;margin:clamp(34px,5.5vw,64px) 0 0;
}
.gal-th{
  appearance:none;padding:0;cursor:pointer;overflow:hidden;
  aspect-ratio:1;border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);
  opacity:.6;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.gal-th picture{display:block;width:100%;height:100%}
.gal-th img{display:block;width:100%;height:100%;object-fit:cover}
.gal-th:hover{opacity:1}
.gal-th.on{opacity:1;border-color:var(--accent);transform:translateY(-2px)}

/* 首页胶片条：每一帧都是通往影像页的链接，但外观与原版 .frame 完全一致 ——
   只做「去掉链接下划线 / 继承文字颜色」，不加悬停位移，也不加任何新元素。
   首页看上去和加影像页之前一模一样，区别只是图能点了。 */
a.frame{display:block;text-decoration:none;color:inherit}

@media(max-width:720px){
  .gal{--gal-h:min(46vh,400px);--gal-w:90vw}
  .gal-hud{gap:12px}
  .gal-hint{display:none}
  .gal-cap{flex-wrap:wrap}
  .gal-date{margin-left:auto}
  .gal-thumbs{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
}