/* ==========================================================================
   Museum Full —— 细节打磨（refine.css）
   原则：不动任何版式与栅格，只做「内行才看得出」的排版与交互微处理。
       全部为 CSS 原生能力，零库、零图片、零额外请求。
   ========================================================================== */

/* ---------------------------------------------------------------- *
 * 1. 选中文字：朱红底 + 暖白字（品牌色，而不是系统默认的蓝）
 * ---------------------------------------------------------------- */
::selection {
  background: var(--red);
  color: #fbf9f4;
  text-shadow: none;
}
::-moz-selection {
  background: var(--red);
  color: #fbf9f4;
  text-shadow: none;
}

/* ---------------------------------------------------------------- *
 * 2. 中文排版：比例字宽（palt）让衬线标题收得更紧致
 *    只在衬线字体上启用，避免黑体变窄后发飘
 * ---------------------------------------------------------------- */
.hero-title,
.section-cn,
.article-title,
.intro-title,
.footer-name,
.hero-sub {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
}

/* ---------------------------------------------------------------- *
 * 3. 断行控制：避免末行只剩一个字、避免中文标点跑到行首
 *    text-wrap 是渐进增强，老浏览器直接忽略
 * ---------------------------------------------------------------- */
.article-content,
.article-body p,
.intro-text,
.card-body p,
.news-lead-body p,
.footer-desc {
  line-break: strict;
  word-break: normal;
  text-wrap: pretty;
}
.article-title,
.section-cn,
.intro-title,
.card-body h3,
.news-lead-body h3 {
  text-wrap: balance;
}

/* ---------------------------------------------------------------- *
 * 4. 链接下划线：留白更宽、颜色更淡；悬停时从 35% 加深到 100%
 * ---------------------------------------------------------------- */
.article-content a,
.footer-col a,
.footer-contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(176, 141, 79, .35);
  text-underline-offset: .22em;
  transition: text-decoration-color .35s ease, color .25s ease;
}
.article-content a:hover,
.footer-col a:hover,
.footer-contact a:hover {
  text-decoration-color: rgba(176, 141, 79, 1);
}

/* ---------------------------------------------------------------- *
 * 5. 文章元信息：日期数字等宽、分隔点用金色
 *    （原计划做「首字下沉」，实测正文段落自带两个全角空格，
 *      做下沉会把这个空格撑成 3em 的空洞，故改为这处更稳的细节）
 * ---------------------------------------------------------------- */
.article-meta {
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}
.article-meta .dot {
  color: var(--gold);
  opacity: .75;
  padding: 0 .12em;
}

/* ---------------------------------------------------------------- *
 * 6. 按下手感：指针设备上轻微下压，200ms 回弹
 * ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .btn-gold:active,
  .section-more:active,
  .link-more:active,
  .card:active,
  .news-lead:active,
  .talk-item:active,
  .edu-list a:active {
    transform: scale(.985);
    transition: transform .18s ease;
  }
}

/* ---------------------------------------------------------------- *
 * 7. 键盘可达：只在键盘聚焦时出现金色描边，鼠标点击不出现
 * ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- *
 * 8. 搜索框：聚焦时描边外扩一圈极淡金光（只用阴影，不做大面积模糊）
 * ---------------------------------------------------------------- */
.header-search input[type="search"],
.header-search input[type="text"],
.search-box-wrap input[type="search"] {
  transition: border-color .3s ease, box-shadow .35s ease;
}
.header-search input:focus,
.search-box-wrap input:focus {
  box-shadow: 0 0 0 3px rgba(176, 141, 79, .16);
}

/* ---------------------------------------------------------------- *
 * 9. 图片载入淡入：解码完成后 0.55s 淡入，避免生硬地「啪」出来
 * ---------------------------------------------------------------- */
.museum-img-fade {
  opacity: 0;
  transition: opacity .55s ease;
}
.museum-img-fade.is-loaded {
  opacity: 1;
}

/* ---------------------------------------------------------------- *
 * 10. 滚动条：细金滑块，悬停时透出朱红；轨道始终透明
 * ---------------------------------------------------------------- */
html { scrollbar-gutter: stable; }
* { scrollbar-width: thin; scrollbar-color: rgba(176, 141, 79, .5) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(176, 141, 79, .52), rgba(176, 141, 79, .28));
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(176, 141, 79, .88), rgba(196, 18, 26, .55));
  background-clip: padding-box;
}

/* ---------------------------------------------------------------- *
 * 11. 顶栏 logo 切换：白/红两版改为淡入，不再硬切
 *     （display 切换会重新触发动画，天然只在切换那一刻生效）
 * ---------------------------------------------------------------- */
.brand-logo {
  animation: brandFade .45s ease both;
}
@keyframes brandFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------- *
 * 12. 返回顶部：右边缘一枚竖排小签（不用圆形浮动按钮）
 *     细金线 + 竖排「回到顶部」+ 小箭头；滚过一屏多才淡入
 * ---------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 118px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: rgba(176, 141, 79, .9);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}
.back-to-top.is-on {
  opacity: .68;
  transform: none;
  pointer-events: auto;
}
.back-to-top:hover {
  opacity: 1;
  color: var(--red);
}
.back-to-top span {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .34em;
  line-height: 1;
}
.back-to-top::after {
  content: "";
  width: 1px;
  height: 38px;
  background: currentColor;
  opacity: .38;
  transition: height .4s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.back-to-top:hover::after {
  height: 54px;
  opacity: .72;
}
@media (max-width: 768px) {
  .back-to-top {
    right: 10px;
    bottom: 86px;
    font-size: 11px;
  }
  .back-to-top span { font-size: 11px; letter-spacing: .26em; }
  .back-to-top::after { height: 30px; }
}

/* ---------------------------------------------------------------- *
 * 13. 页脚收藏印：一枚朱红方印「信」，像盖在展签边角
 * ---------------------------------------------------------------- */
.site-footer { position: relative; }
.footer-seal {
  position: absolute;
  right: 44px;
  bottom: 40px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: rgba(196, 18, 26, .82);
  border: 1.5px solid rgba(196, 18, 26, .68);
  border-radius: 2px;
  transform: rotate(-2.6deg);
  opacity: .62;
  pointer-events: none;
  user-select: none;
  transition: opacity .5s ease, transform .5s ease;
}
.site-footer:hover .footer-seal {
  opacity: .9;
  transform: rotate(0deg);
}
@media (max-width: 768px) {
  .footer-seal { display: none; }
}

/* ---------------------------------------------------------------- *
 * 14. 无特色图文章的亮色馆藏封面：浅色遮罩 + 墨色文字
 *     （原 .has-bg 的暗遮罩会把亮底图压成灰糊，故单独覆盖）
 * ---------------------------------------------------------------- */
.article-head.is-cover-plain {
  color: var(--dark);
  background-position: center bottom;
}
.article-head.is-cover-plain::after {
  background: linear-gradient(to bottom, rgba(250, 247, 241, .22), rgba(250, 247, 241, .64));
}
.article-head.is-cover-plain .article-title {
  color: var(--dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.article-head.is-cover-plain .article-cat {
  color: #8a6a2f;
  border-color: rgba(176, 141, 79, .55);
  background: rgba(255, 255, 255, .55);
}
.article-head.is-cover-plain .crumb,
.article-head.is-cover-plain .crumb a {
  color: rgba(26, 24, 21, .55);
}
.article-head.is-cover-plain .crumb em {
  color: rgba(26, 24, 21, .82);
}
.article-head.is-cover-plain .article-meta {
  color: rgba(26, 24, 21, .62);
}
.article-head.is-cover-plain .article-meta .dot {
  color: rgba(176, 141, 79, .9);
  opacity: 1;
}

/* ---------------------------------------------------------------- *
 * 15. 隐藏的第二个 logo（红版/白版）延迟加载，避免首屏白下 6 KB
 *     （由 header.php 输出 loading=lazy，这里只兜底尺寸）
 * ---------------------------------------------------------------- */
.brand-logo[loading="lazy"] {
  content-visibility: auto;
}

/* ---------------------------------------------------------------- *
 * 无障碍：减少动态偏好下，取消 logo 淡入与缩放反馈
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none; }
  .museum-img-fade { opacity: 1; transition: none; }
  .site-footer:hover .footer-seal { transform: rotate(-2.6deg); }
  .back-to-top,
  .back-to-top::after { transition: none; }
  .back-to-top:hover::after { height: 38px; }
}