:root{
  --paper:#f7f3eb;
  --ink:#171411;
  --ink-90:#171411e6;
  --ink-80:#171411d1;
  --ink-70:#171411b3;
  --ink-65:#171411ad;
  --ink-60:#1714119e;
  --ink-55:#17141199; /* 原 0x8c 在纸色上只有 3.95:1，小字过不了 AA；0x99 = 4.63:1 */
  --rule:#1714111f;
  --rule-soft:#1714111a;
  --rule-strong:#1714114d;
  --card:#ffffff52;
}
*{box-sizing:border-box}
html,body{
  background:var(--paper);
  min-height:100%;
  color:var(--ink);
  margin:0;
  font-family:Georgia,Iowan Old Style,Times New Roman,serif;
}
body{
  border-top:1px solid var(--rule-soft);
}
a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
  text-underline-offset:.18em;
}
.page-shell{
  max-width:1100px;
  margin:0 auto;
  padding:32px 24px 80px;
}
/* 头部导航 */
.site-header{
  display:grid;
  gap:12px;
  margin-bottom:40px;
}
.site-header__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.admin-entry{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.72rem;
  color:var(--ink-70);
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:1px;
}
.editorial-rule{
  height:1px;
  background:var(--rule);
}
/* Hero区域 */
.home-hero{
  max-width:720px;
  margin-bottom:34px;
}
.home-hero h1{
  margin:0;
  font-size:clamp(3.2rem,7vw,5.5rem);
  font-weight:500;
  line-height:.95;
}
.home-hero p{
  color:var(--ink-70);
  margin:14px 0 0;
  font-size:1rem;
  line-height:1.75;
}
.home-hero--compact{
  margin-bottom:24px;
}
.home-hero--compact h1{
  font-size:clamp(2.4rem,6vw,4rem);
}
/* 首页网格：置顶文章 + 侧边栏 */

/* 首页 = 内容索引（仓库式）。不放 hero 大标题、不放自我介绍：
   左侧文章列表当主体，右侧 Notes / Photos / Lab 次级陈列，内容直接铺开。 */

.kicker{
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-60);
  margin:0 0 10px;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.72rem;
}

.text-link{
  display:inline-block;
  margin-top:18px;
}

/* 首页的 Lab 模块。它列的是「提示」不是「图片说明」，一行就完，
   所以把间距收回来；收尾那个链接也不用正文那么大的留白。 */

/* 最近文章列表 */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--rule);
  margin:40px 0 8px;
  padding-top:16px;
}
.section-header h2{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.85rem;
  margin:0;
  font-weight:500;
}
.article-list__items{
  list-style:none;
  margin:0;
  padding:0;
}
.article-row{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 110px;
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--rule);
}
.article-row:last-child{
  border-bottom:1px solid var(--rule);
}
.article-row__meta{
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-65);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.78rem;
}
.article-row__date{
  text-align:right;
}
.article-row h3{
  margin:0;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.15;
}
.article-row__body p{
  color:var(--ink-70);
  margin:12px 0 0;
  line-height:1.7;
}
/* 文章详情 prose 样式 */
.prose{
  border-top:1px solid var(--rule);
  padding-top:18px;
  max-width:720px;
}
.prose p{
  margin:0 0 24px;
  font-size:1.08rem;
  line-height:2;
}
.prose h2{
  border-top:1px solid var(--rule-soft);
  padding-top:24px;
  margin:56px 0 18px;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:500;
  line-height:1.06;
}
.prose h3{
  margin:40px 0 14px;
  font-size:1.35rem;
  font-weight:500;
  line-height:1.2;
}
.prose h4,.prose h5,.prose h6{
  margin:32px 0 12px;
  font-size:1.1rem;
  font-weight:500;
}
.prose blockquote{
  color:var(--ink-90);
  background:#17141108;
  border-left:3px solid var(--rule-strong);
  margin:32px 0;
  padding:16px 20px;
  font-size:1.05rem;
  line-height:1.8;
}
.prose blockquote p{
  font-size:1.05rem;
  margin:0 0 12px;
}
.prose blockquote p:last-child{
  margin-bottom:0;
}
.prose ul,.prose ol{
  margin:0 0 24px;
  padding-left:1.4em;
  font-size:1.08rem;
  line-height:1.9;
}
.prose li{
  margin-bottom:6px;
}
.prose img{
  max-width:100%;
  height:auto;
  border-radius:6px;
  margin:8px 0 24px;
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;
  background:#1714110f;
  padding:.12em .38em;
  border-radius:4px;
}
.prose pre{
  background:#1714110f;
  border:1px solid var(--rule);
  border-radius:8px;
  padding:16px 18px;
  overflow-x:auto;
  margin:0 0 24px;
  line-height:1.7;
}
.prose pre code{
  background:none;
  padding:0;
  font-size:.86rem;
}
.prose hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:40px 0;
}
/* 文章详情页头部 */
.post__head{
  max-width:720px;
}
.post__head .section-header{
  margin-top:0;
}
.post__title{
  margin:8px 0 0;
  font-size:clamp(2.1rem,5vw,3.4rem);
  font-weight:500;
  line-height:1.04;
}
.post__meta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:18px 0 0;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-65);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.78rem;
}
.draft-flag{
  color:#993c1d;
  border:1px solid #993c1d66;
  border-radius:4px;
  padding:1px 6px;
}
.post__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 26px;
  color:var(--ink-60);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.8rem;
}
.post__nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  border-top:1px solid var(--rule);
  margin-top:48px;
  padding-top:18px;
  max-width:720px;
  font-size:.95rem;
  line-height:1.6;
}
.post__nav-next{
  text-align:right;
}
/* 笔记 */
.note-list{
  list-style:none;
  margin:0;
  padding:0;
}
.note-item{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--rule);
}
.note-item:last-child{
  border-bottom:1px solid var(--rule);
}
.note-item__date{
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-65);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.78rem;
}
.note-item__text{
  font-size:1.08rem;
  line-height:1.8;
}
/* 照片 */
.photo-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;
  padding-top:18px;
}
.photo-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
}
.photo-card__img{
  display:block;
  width:100%;
  height:auto;
}
.photo-card__placeholder{
  height:132px;
  background:repeating-linear-gradient(135deg,#17141110 0 10px,#17141105 10px 20px);
}

.photo-card__body{
  padding:16px 18px 18px;
}
.photo-card__body strong{
  font-weight:500;
  display:block;
  font-size:1.05rem;
}
.photo-card__body p{
  color:var(--ink-70);
  margin:10px 0 0;
  line-height:1.7;
  font-size:.95rem;
}
.photo-card__date{
  display:block;
  margin-top:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-60);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.72rem;
}
/* 实验区索引 */
.lab-grid{
  list-style:none;
  margin:0;
  padding:18px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;
}
.lab-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:8px;
  transition:border-color .15s ease;
}
.lab-card:hover{
  border-color:var(--rule-strong);
}
.lab-card a{
  display:block;
  padding:22px 22px 20px;
}
.lab-card a:hover{
  text-decoration:none;
}
.lab-card h3{
  font-size:1.28rem;
  font-weight:500;
  margin:12px 0 0;
  line-height:1.35;
}
.lab-card:hover h3{
  text-decoration:underline;
  text-underline-offset:.18em;
}
.lab-card p{
  color:var(--ink-70);
  font-size:.95rem;
  line-height:1.75;
  margin:10px 0 0;
}
.lab-card__hint{
  display:inline-block;
  margin-top:16px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-55);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.7rem;
}
/* 首页 Lab 展示区：文章列表下方整排陈列，直接复用实验区那套卡片样式。
   正文限三行 —— 果冻罐那条说明特别长，不限行会把同一行的卡片撑成一根高柱。 */

/* 空状态与页脚 */
.empty{
  color:var(--ink-60);
  font-size:.95rem;
  margin:18px 0;
  padding:18px 0;
}
.site-footer{
  margin-top:72px;
}
.site-footer__row{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-top:18px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-60);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.75rem;
}
.site-footer__note{
  color:var(--ink-70);
  margin:14px 0 0;
  line-height:1.7;
  font-size:.9rem;
}
/* 页脚统计：累计访问 / 已运营 —— 沿用纸感配色，数字等宽对齐，弱化为一行。 */
.site-footer__stats{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
  padding-top:1.75rem;
  color:var(--ink-60);
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.75rem;
  letter-spacing:.06em;
}
.site-footer__stats .stat b{
  color:var(--ink);
  font-weight:600;
  margin-right:.5em;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.site-footer__stats .stat-sep{
  color:var(--rule-strong);
}
/* 响应式适配移动端 */
@media (max-width:720px){
  .page-shell{
    padding:24px 18px 64px;
  }
  .article-row,.note-item,.lab-grid{
    grid-template-columns:1fr;
  }
  .article-row__date{
    text-align:left;
  }
  .post__nav{
    grid-template-columns:1fr;
  }
  .post__nav-next{
    text-align:left;
  }
  .site-footer__stats{
    flex-direction:column;
    gap:.5rem;
    text-align:center;
    padding-top:1.5rem;
  }
}
/* 首页吉祥物：四个小人，重绘成纸感/墨色调（雾紫 / 墨黑 / 陶土橙 / 赭黄）。
   纯装饰，鼠标移上去眼睛会跟、偶尔眨；开了减弱动效就静止。 */

.eye{
  position:relative;
  width:16px;
  height:16px;
  background:#fbf8f1;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:height .12s ease;
}
.pupil{
  width:7px;
  height:7px;
  background:var(--ink);
  border-radius:50%;
  transition:transform .08s linear;
}
.pupil-only{
  width:11px;
  height:11px;
  background:var(--ink);
  border-radius:50%;
  transition:transform .08s linear;
}

/* 站内检索 / 标签 / 归档 */
.search-form{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 34px;
  max-width:520px;
}
.search-form input[type=search]{
  flex:1;
  min-width:0;
  background:var(--card);
  border:1px solid var(--rule-strong);
  border-radius:8px;
  padding:10px 14px;
  color:var(--ink);
  font-family:Georgia,Iowan Old Style,Times New Roman,serif;
  font-size:.95rem;
}
.search-form input[type=search]::placeholder{
  color:var(--ink-55);
}
.search-form input[type=search]:focus{
  outline:none;
  border-color:var(--ink-70);
}
.search-form button{
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:8px;
  padding:11px 18px;
  color:var(--paper);
  cursor:pointer;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.search-form button:hover{
  background:var(--ink-80);
}
mark{
  background:#f6e3a1;
  color:inherit;
  padding:0 .1em;
}
.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag-chip{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  border:1px solid var(--rule-strong);
  border-radius:8px;
  padding:7px 12px;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.8rem;
}
.tag-chip:hover{
  background:var(--card);
  text-decoration:none;
}
.tag-chip__count{
  color:var(--ink-55);
  font-size:.7rem;
}
@media (max-width:720px){
  .search-form{
    max-width:none;
  }
}

/* 后台照片画廊（纯照片） */
#photos-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.photo-card{position:relative;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--paper)}
.photo-card__img{display:block;width:100%;height:140px;object-fit:cover}
.photo-card__del{position:absolute;top:6px;right:6px;padding:2px 7px;line-height:1;opacity:.92}
/* /photos 点击看大图 */
.photo-card{cursor:zoom-in}
.photo-lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,8,6,.86);opacity:0;transition:opacity .18s ease}
.photo-lightbox.is-open{opacity:1}
.photo-lightbox__fig{margin:0;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;cursor:zoom-out}
.photo-lightbox__img{max-width:92vw;max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:6px;background:var(--paper);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.photo-lightbox__cap{margin-top:12px;color:#f2ece2;font-size:.85rem;letter-spacing:.04em;text-align:center;max-width:92vw}

/* 作品页 /projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}
.project-card{border:1px solid var(--rule);border-radius:8px;background:var(--card);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.project-card__head{display:flex;flex-direction:column;gap:6px}
.project-card__name{font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;line-height:1.2;margin:0;letter-spacing:-.01em}
.project-card__meta{display:flex;flex-wrap:wrap;gap:8px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-55)}
.project-card__kind{border:1px solid var(--rule-strong);border-radius:999px;padding:2px 9px}
.project-card__year{color:var(--ink-55)}
.project-card__tagline{margin:0;font-style:italic;color:var(--ink-55);font-size:.95rem}
.project-card__desc{margin:0;font-size:.92rem;line-height:1.62}
.project-card__link{margin-top:auto;align-self:flex-start;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
.project-card__link:hover{text-decoration:none}
.project-card__status{margin-top:auto;align-self:flex-start;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-55);border:1px solid var(--rule);border-radius:999px;padding:3px 10px}

/* ============================ 索引首页与暗色主题 ============================
   首页 = 全站唯一入口页：站名 + 搜索 + 一份把所有内容摆出来的索引 + 页脚。
   配色全走 :root 的变量，所以暗色只要把变量换一遍 —— 不必逐条覆盖规则。
   默认（<html> 上没有 data-theme）跟随系统，见 lib/render.js 的 THEME_INIT。 */

:root{
  color-scheme:light;
  /* 数字与按键提示用等宽，正文继续用衬线 —— 衬线是这张纸，等宽是账本上的数字 */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --paper:#131110;
  --ink:#ece7de;
  --ink-90:#ece7dee6;
  --ink-80:#ece7ded1;
  --ink-70:#ece7deb3;
  --ink-65:#ece7dead;
  --ink-60:#ece7de9e;
  --ink-55:#ece7de8c;
  --rule:#ece7de1f;
  --rule-soft:#ece7de14;
  --rule-strong:#ece7de4d;
  --card:#ffffff0f;
  color-scheme:dark;
}

/* ---------------------------------- 页头 ---------------------------------- */
.site-header__brand{
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  transition:opacity .18s ease;
}
.site-header__brand:hover{text-decoration:none;opacity:.62}
.site-header__tools{
  display:flex;
  align-items:center;
  gap:7px;
}
.tool-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:27px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--ink-70);
  font:inherit;
  font-size:.75rem;
  letter-spacing:.04em;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.tool-btn:hover{
  color:var(--ink);
  border-color:var(--rule);
  background:var(--card);
}
.tool-btn--icon{padding:0 8px}
.tool-btn kbd{
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.5;
  color:var(--ink-55);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:0 4px;
}
.ico{display:none;align-items:center}
.ico--moon{display:inline-flex}
[data-theme="dark"] .ico--moon{display:none}
[data-theme="dark"] .ico--sun{display:inline-flex}

/* ---------------------------------- 首页 ---------------------------------- */
.hub-hero{
  padding:62px 0 38px;
  text-align:center;
}
.hub-mark{
  margin:0;
  font-size:clamp(2.1rem,5.6vw,2.9rem);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
}
/* 逐字涟漪：只有光标真的移上来才动，移开就完全静止 —— 低调就在那 2px 上 */
.hub-mark span{
  display:inline-block;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.hub-mark span:hover,
.hub-mark span:has(+ span:hover),
.hub-mark span:hover + span{
  transform:translateY(-2px);
}
.hub-tag{
  margin:12px 0 0;
  font-size:.94rem;
  color:var(--ink-55);
}
.hub-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:520px;
  margin:28px auto 0;
  padding:13px 15px;
  border:1px solid var(--rule);
  border-radius:10px;
  transition:border-color .25s ease;
}
.hub-search__ico{flex:none;color:var(--ink-55)}
.hub-search__in{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.98rem;
}
.hub-search__in::placeholder{color:var(--ink-55)}
.hub-search__in::-webkit-search-cancel-button{display:none}
.hub-search__k{
  flex:none;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--ink-55);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1px 5px;
}
/* 聚焦时从左边长出一条实线 —— 全页唯一的「动」，且只在你开始打字时出现 */
.hub-search__rule{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.hub-search:focus-within{border-color:var(--ink-60)}
.hub-search:focus-within .hub-search__rule{transform:scaleX(1)}
.hub-count{
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--ink-55);
  font-variant-numeric:tabular-nums;
}

.hub-index{max-width:840px;margin:0 auto}
.hub-sec{margin-top:34px}
.hub-sec__head{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-bottom:7px;
  border-bottom:1px solid var(--ink-80);
}
.hub-sec__num{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--ink-55);
}
.hub-sec__label{
  margin:0;
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hub-sec__label a{color:inherit}
.hub-sec__n{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--ink-55);
  font-variant-numeric:tabular-nums;
}
.hub-sec__more{
  margin:10px 0 0;
  font-size:.78rem;
  text-align:right;
}
.hub-sec__more a{color:var(--ink-65)}

.hub-list{
  list-style:none;
  margin:0;
  padding:0;
}
.hub-item a{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--rule-soft);
  color:inherit;
  text-decoration:none;
}
.hub-item:last-child a{border-bottom:0}
.hub-item__ar{
  flex:none;
  width:12px;
  font-size:.74rem;
  color:var(--ink-55);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease,transform .18s ease;
}
.hub-item a:hover .hub-item__ar{opacity:1;transform:none}
.hub-item__t{font-size:.95rem;line-height:1.45}
.hub-item a:hover .hub-item__t{
  text-decoration:underline;
  text-underline-offset:.18em;
}
.hub-item__m{
  margin-left:auto;
  flex:none;
  font-size:.75rem;
  color:var(--ink-55);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hub-item a:hover .hub-item__m{color:var(--ink-70)}

/* 照片：只摆缩略图和标题，链接到相册里那一张 */
.hub-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  gap:14px;
  list-style:none;
  margin:0;
  padding:14px 0 0;
}
.hub-item--thumb a{
  display:block;
  padding:0;
  border-bottom:0;
}
.hub-thumb{
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--rule-soft);
  border-radius:3px;
  background:var(--card);
  transition:border-color .18s ease;
}
.hub-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hub-thumb--empty{background:var(--rule-soft)}
.hub-item--thumb a:hover .hub-thumb{border-color:var(--ink-55)}
.hub-thumb__t{
  display:block;
  margin-top:7px;
  font-size:.75rem;
  color:var(--ink-55);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 实验：19 个挤在一条窄带里、三列 —— 像货架，不像文章列表 */
.hub-lab{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:26px;
  list-style:none;
  margin:0;
  padding:2px 0 0;
}

.hub-pages{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  list-style:none;
  margin:0;
  padding:13px 0 0;
  font-size:.82rem;
}
.hub-pages a{color:inherit}

/* 过滤后的空态。显式关掉 display —— 上面给 li / section 设过 flex、grid，
   光靠 [hidden] 的默认样式压不住。 */
.hub-sec[hidden],
.hub-item[hidden]{display:none}
.hub-none{
  max-width:840px;
  margin:36px auto 0;
  font-size:.9rem;
  color:var(--ink-55);
}
.hub-none[hidden]{display:none}

@media (max-width:720px){
  .hub-hero{padding:42px 0 28px}
  .hub-sec{margin-top:28px}
  .hub-lab{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .hub-thumbs{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
  /* 元信息不再在窄屏缩小：原来的 .66rem = 10.56px，手机上读不出来 */
}
@media (max-width:520px){
  .tool-btn--wide .tool-btn__label{display:none}
  .site-header__tools{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .hub-mark span,
  .hub-search__rule,
  .hub-item__ar{transition:none}
  .hub-mark span:hover,
  .hub-mark span:has(+ span:hover),
  .hub-mark span:hover + span{transform:none}
}

/* ============================ 主题切换：圆形扩散 ============================ */

:root{
  /* 圆心（点击位置）与半径（到最远角的距离），由 hub.js 在切换前写进来。
     给默认值是为了「万一 JS 没写也能跑」，不是常规路径。 */
  --kk-vt-x:50%;
  --kk-vt-y:50%;
  --kk-vt-r:140vmax;
}
@media (prefers-reduced-motion:no-preference){
  /* old 不参与动画：它保持不动，等着被 new 裁掉 */
  ::view-transition-old(root){
    animation:none;
    mix-blend-mode:normal;
  }
  /* new 压在上面，从一个 0 半径的圆开始长到盖住全屏 */
  ::view-transition-new(root){
    mix-blend-mode:normal;
    clip-path:circle(0 at var(--kk-vt-x) var(--kk-vt-y));
    animation:kk-vt-grow .5s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes kk-vt-grow{
    to{clip-path:circle(var(--kk-vt-r) at var(--kk-vt-x) var(--kk-vt-y))}
  }
}
/* 削弱动效偏好下 startViewTransition 会立即完成，这里显式关掉裁剪动画，
   免得留下一个「没长完」的圆。 */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation:none;
    clip-path:none;
    mix-blend-mode:normal;
  }
}

/* ============================ 首页细节修正 ============================ */

/* 过滤：条目与分区靠 hidden 属性收起来。显式关掉 display —— 光靠 UA 的
   [hidden] 压不住被设过 display 的节点（.hub-pages li 这类）。 */
.hub-sec[hidden],
.hub-item[hidden],
[data-hub-item][hidden]{display:none}

/* 逐字涟漪把标题拆成一个个 inline-block 的 <span>；这种原子盒子会各自领一次
   父级的 letter-spacing，-.015em 就被重复计入了。归零交给父级，间距才对得上。 */
.hub-mark span{letter-spacing:0}

/* ===================== 首页底部动作区 =====================
   点赞和「支持这个站」并排：这两件事在同一个层级上 ——「觉得有用」和
   「愿意请杯咖啡」是相邻的两个动作，不该一个吊在标题下、一个落进页脚里。 */
.hub-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px 18px;
  max-width:840px;
  margin:40px auto 0;
}
.hub-actions .hub-like,
.hub-actions .hub-donate{margin:0}

/* ===================== 点赞 =====================
   按钮做成一颗小药丸，和 /donate 那行入口同一档字号：它是附注，不是第三个 hero。
   点过的状态只换 fill —— 从空心到实心，颜色不变。 */

.hub-like{
  max-width:840px;
  margin:40px auto 0;
  text-align:center;
}
.hub-like__btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  background:none;
  border:1px solid var(--rule);
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  font-size:.8rem;
  color:var(--ink-60);
  transition:border-color .25s ease,color .2s ease;
}
.hub-like__btn:hover{
  border-color:var(--ink-55);
  color:var(--ink);
}
.hub-like__ico{
  display:block;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.hub-like__btn.is-liked .hub-like__ico path{fill:currentColor}
.hub-like__btn.is-pop .hub-like__ico{transform:scale(1.28)}
.hub-like__n{
  font-family:var(--mono);
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
}
/* WCAG 2.2 SC 2.5.8：inline-flex 的按钮本身就有 24px 以上，不需要补热区 */
@media (prefers-reduced-motion:reduce){
  .hub-like__ico{transition:none}
  .hub-like__btn.is-pop .hub-like__ico{transform:none}
}

/* ===================== 赞助 =====================
   首页那行入口贴着 hub-count 下面，用的是和页脚同一档字号 —— 它是附注，不是
   第二个 hero。/donate 上的收款码必须能在暗色下扫得出来：二维码是黑墨白纸的
   东西，压在深色底上各家的识别算法表现不一，所以那块底板恒为纯白，不跟主题走。 */

.hub-donate{
  margin:14px 0 0;
  font-size:.82rem;
}
.hub-donate a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-60);
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:2px;
}
.hub-donate a:hover{
  color:var(--ink);
  text-decoration:none;
  border-bottom-color:var(--ink-60);
}
.hub-donate__ico{
  display:inline-flex;
  color:var(--ink-55);
}

.donate-tip{
  margin:0 0 26px;
  font-size:.88rem;
  color:var(--ink-55);
}
.donate-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:34px 30px;
}
.donate-card{margin:0}
.donate-card__qr{
  width:100%;
  max-width:200px;
  aspect-ratio:1/1;
  padding:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 白底不是配色而是功能：二维码要在暗色主题下也扫得出来 */
  background:#fff;
  border:1px solid var(--rule);
  border-radius:10px;
  transition:border-color .25s ease;
}
.donate-card__qr img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.donate-card__label{
  margin:15px 0 0;
  font-size:.95rem;
  font-weight:400;
}
.donate-card__note{
  margin:5px 0 0;
  font-size:.82rem;
  line-height:1.6;
  color:var(--ink-55);
}
.donate-card__link{
  margin:9px 0 0;
  font-size:.82rem;
}
.donate-card__link a{color:var(--ink-65)}
.donate-empty,
.donate-thanks{
  margin:30px 0 0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--ink-60);
}
@media (max-width:640px){
  .donate-grid{gap:28px 20px}
}

/* ===================== 无障碍与版式修正（2026-10-08 审计） ===================== */

/* 备案号：.site-footer__beian 这个类名写了，但样式表里一条规则都没有 —— 于是落回
   body 的 Georgia 16px 衬线 + 段落默认外边距，比页脚其余部分（无衬线、大写、12px）
   大 40%、字体都不是一套。法规要求展示不等于要跳出整套版式。 */
.site-footer__beian{
  margin:14px 0 0;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--ink-60);
}
.site-footer__beian a{color:inherit}

/* WCAG 2.2 SC 2.5.8：这几个链接是零 padding 的行内文本，命中高度只有 13–15px。
   用伪元素把热区撑到 24px —— 只增加命中面积，不占位，版面一动不动。
   （比加 padding 安全：它们多处在 baseline / space-between 的 flex 里，
     加 padding 会连带推高整行、动到分隔线位置。） */
.site-header__brand,
.hub-sec__label a,
.hub-pages a,
.site-footer__row a{position:relative}
.site-header__brand::after,
.hub-sec__label a::after,
.hub-pages a::after,
.site-footer__row a::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:24px;
  transform:translateY(-50%);
}

/* 跳到正文：键盘 / 读屏用户跳过页头。平时移到屏幕外，聚焦时显形。 */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
}
.skip-link:focus{
  left:8px;
  top:8px;
  padding:8px 14px;
  background:var(--paper);
  border:1px solid var(--ink-60);
  border-radius:6px;
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:.8rem;
  color:var(--ink);
}