/* ============================================================
   polish.css — 全站视觉精修层（在 style.css / home.css 之后加载）
   设计语言：江南文艺风（宣纸底 · 黛青主色 · 朱砂点缀）
   原则：只增强视觉与微交互，不改动结构与既有类名
   ============================================================ */

/* ---------- 1. 全局质感 ---------- */
::selection { background: rgba(44, 110, 99, .18); color: var(--jade-d); }

/* 细雅滚动条 */
html { scrollbar-width: thin; scrollbar-color: #c9c0b2 var(--paper-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb {
  background: #c9c0b2; border-radius: 99px;
  border: 3px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--jade); }

/* 更柔和、更有"宣纸感"的正文底纹 */
body.home, body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* 段落与标题的字距微调，中文更透气 */
h1, h2, h3 { letter-spacing: .01em; }
p { letter-spacing: .012em; }

/* ---------- 2. 文章卡片（列表页 / 首页动态） ---------- */
/* 列表网格：桌面端三列（原 style.css 未在桌面端定义列数，会退化成单列宽卡）
   断点：>1200 三列｜900–1200 两列｜<900 两列｜<600 单列（与既有响应式一致） */
.art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
@media (max-width: 1200px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 600px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.art-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(31, 35, 40, .04);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1),
              box-shadow .45s cubic-bezier(.2, .7, .3, 1),
              border-color .45s ease;
}

.art-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(31, 35, 40, .13);
  border-color: rgba(44, 110, 99, .32);
}

/* 封面：统一 16:10（用 padding 撑高，避免固定高度在不同列宽下变形） */
.art-cover {
  height: 0 !important;        /* 覆盖 style.css 的 height:190px */
  padding-bottom: 62.5%;       /* 16:10 */
  position: relative;
  overflow: hidden;
  background: var(--jade-l);
}
.art-cover img, .art-cover svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}
.art-card:hover .art-cover img { transform: scale(1.07); }

/* 封面底部渐变，让图片与白卡自然衔接 */
.art-cover::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(31, 35, 40, .26), transparent);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.art-card:hover .art-cover::after { opacity: 1; }

.art-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 让 meta 始终贴底，卡片等高时底部对齐 */
.art-body p { flex: 1; }

/* 分类标签：黛青描边小签，悬停填色 */
.art-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 4px;
  color: var(--jade);
  background: var(--jade-ll);
  border: 1px solid rgba(44, 110, 99, .18);
  transition: all .3s ease;
}
.art-card:hover .art-tag {
  background: var(--jade);
  color: #fff;
  border-color: var(--jade);
}

.art-card h3 {
  margin: 12px 0 8px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink);
  transition: color .3s ease;
  /* 标题最多两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card:hover h3 { color: var(--jade); }

.art-card p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mute-2);
  /* 摘要最多三行 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.art-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--mute-2);
}
.art-meta span:last-child { color: var(--jade); opacity: .75; }

/* ---------- 3. 首页：板块卡片精致化 ---------- */
.cat-card-v2 {
  border-radius: 14px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1),
              box-shadow .5s cubic-bezier(.2, .7, .3, 1);
}
.cat-card-v2:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 44px rgba(31, 35, 40, .13);
}
.cat-scene { overflow: hidden; }
.cat-scene svg, .cat-scene img {
  transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}
.cat-card-v2:hover .cat-scene svg,
.cat-card-v2:hover .cat-scene img { transform: scale(1.06); }

/* 板块卡片上的序号水印感 */
.cat-no {
  font-variant-numeric: tabular-nums;
  opacity: .13;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.cat-card-v2:hover .cat-no { opacity: .2; transform: translateX(4px); }

/* ---------- 4. 影像志：图片格子质感 ---------- */
.mosaic-grid > * ,
.mosaic a, .mosaic .mo {
  overflow: hidden;
}
.mosaic img {
  transition: transform 1.1s cubic-bezier(.2, .7, .3, 1), filter .5s ease;
}
.mosaic a:hover img, .mosaic .mo:hover img {
  transform: scale(1.06);
  filter: saturate(1.08) brightness(1.02);
}

/* ---------- 5. 按钮微交互 ---------- */
.btn-jade, .btn-white, .btn-paper, .btn-line, .btn-ghost-w {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1),
              box-shadow .3s ease, background-color .3s ease,
              color .3s ease, border-color .3s ease;
}
.btn-jade:hover, .btn-white:hover, .btn-paper:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44, 110, 99, .22);
}
.btn-line:hover { transform: translateY(-2px); }

/* 按钮扫光 */
.btn-jade::after, .btn-white::after, .btn-paper::after {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .75s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.btn-jade:hover::after, .btn-white:hover::after, .btn-paper:hover::after { left: 135%; }

/* ---------- 6. 入场动画增强（含无 JS 兜底） ---------- */
/* 默认可见：JS 不可用 / 观察器未触发时内容依然能读到（可访问性 + SEO 友好） */
.reveal { opacity: 1; transform: none; }

/* 仅在 JS 就绪（<html class="js-ready">）后才启用入场动画 */
html.js-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.2, .7, .3, 1),
              transform .85s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
html.js-ready .reveal.in { opacity: 1; transform: none; }

/* 卡片错峰入场（同容器内依次延迟） */
html.js-ready .art-grid .reveal:nth-child(2) { transition-delay: .07s; }
html.js-ready .art-grid .reveal:nth-child(3) { transition-delay: .14s; }
html.js-ready .art-grid .reveal:nth-child(4) { transition-delay: .21s; }
html.js-ready .art-grid .reveal:nth-child(5) { transition-delay: .28s; }
html.js-ready .art-grid .reveal:nth-child(6) { transition-delay: .35s; }
html.js-ready .cat-grid-v2 .reveal:nth-child(2) { transition-delay: .08s; }
html.js-ready .cat-grid-v2 .reveal:nth-child(3) { transition-delay: .16s; }
html.js-ready .cat-grid-v2 .reveal:nth-child(4) { transition-delay: .24s; }

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 7. 详情页正文排版 ---------- */
.article-body, .detail-body { font-size: 16.5px; line-height: 2.05; color: #33322e; }
.article-body h3, .detail-body h3 {
  margin: 2.1em 0 .8em;
  padding-left: 14px;
  font-size: 19px;
  color: var(--ink);
  border-left: 3px solid var(--jade);
  line-height: 1.5;
}
.article-body p, .detail-body p { margin: 1.15em 0; }
.article-body ul, .detail-body ul,
.article-body ol, .detail-body ol { margin: 1.15em 0; padding-left: 1.5em; }
.article-body li, .detail-body li { margin: .55em 0; }
.article-body strong, .detail-body strong { color: var(--jade-d); font-weight: 600; }

/* 引用块：朱砂竖线 + 淡底 */
.article-body blockquote, .detail-body blockquote {
  margin: 1.7em 0;
  padding: 16px 22px;
  background: linear-gradient(90deg, rgba(194, 80, 60, .05), transparent 85%);
  border-left: 3px solid var(--cinnabar);
  border-radius: 0 8px 8px 0;
  color: #6a4a42;
  font-size: 15.5px;
  line-height: 1.95;
}

/* ---------- 8. 页脚质感 ---------- */
.footer-top { position: relative; }
.footer-top::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(92%, 1100px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.inner-footer a, .footer-top a { transition: color .3s ease, opacity .3s ease; }
.inner-footer a:hover, .footer-top a:hover { color: var(--amber); }

/* ---------- 9. 图片加载占位（避免白闪） ---------- */
.art-cover, .cat-scene, .about-v2-img, .av-frame {
  background-color: var(--paper-2);
  background-image: linear-gradient(100deg, rgba(229, 222, 210, 0) 30%, rgba(255, 255, 255, .5) 50%, rgba(229, 222, 210, 0) 70%);
  background-size: 220% 100%;
  animation: yxShimmer 1.6s linear infinite;
}
.art-cover img, .cat-scene svg, .cat-scene img, .about-v2-img img, .av-frame img {
  /* 图片就绪后自身不透明，遮住底纹 */
  background: transparent;
}
@keyframes yxShimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
/* 子元素有图时不显示 shimmer（图片盖住即可），无图时保留 */

/* ---------- 10. 响应式微调 ---------- */
@media (max-width: 900px) {
  .art-grid { gap: 18px; }
  .art-card h3 { font-size: 16px; }
  .art-body { padding: 16px 15px 14px; }
  .article-body, .detail-body { font-size: 16px; line-height: 2; }
}
@media (max-width: 560px) {
  .art-cover { padding-bottom: 58%; }
  .article-body h3, .detail-body h3 { font-size: 17.5px; }
  .article-body blockquote, .detail-body blockquote { padding: 13px 16px; font-size: 15px; }
}

/* ---------- 11. 打印友好 ---------- */
@media print {
  .hero-v2, .footer-top, .inner-footer, .cta-sec, .art-card:hover { box-shadow: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}