/* ============================================================
   冷月幽 · 首页专属
   门面 hero / 今日一言 / 三处去处 / 最近更新 / 关于
   只被 home.html（首页）引入
   ============================================================ */

[data-lang="en"] .hero-sub { letter-spacing: .12em; }

/* ============================================================
   门面 hero
   右侧水墨图 + 左缘渐隐融进宣纸，文字在左侧干净区
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 38vw, 440px);
  display: flex;
  align-items: center;
  padding: clamp(40px, 4.5vw, 60px) 0;
  isolation: isolate;
}

/* 底层的柔和光晕，保留一点暖调 */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 620px;
  z-index: -2;
  background:
    radial-gradient(50% 60% at 50% 40%, rgba(185, 146, 79, .16), transparent 70%),
    radial-gradient(40% 50% at 18% 20%, rgba(164, 80, 58, .08), transparent 70%);
  filter: blur(2px);
}

/* 右侧水墨图：占 56% 宽，左缘渐隐 */
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  z-index: -1;
  background-image: url('../images/hero-ink-wash.jpg');
  background-size: cover;
  background-position: 68% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 18%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 18%, #000 48%);
}

/* 暗色下把图压暗一点，避免过亮刺眼 */
[data-theme="dark"] .hero-art {
  opacity: .82;
  filter: brightness(.72) contrast(.95);
}

[data-theme="dark"] .hero::before {
  background:
    radial-gradient(50% 60% at 50% 40%, rgba(201, 164, 104, .10), transparent 70%),
    radial-gradient(40% 50% at 18% 20%, rgba(201, 106, 78, .07), transparent 70%);
}

/* 文字区：左对齐，与页面栅格对齐
   注意 .hero-inner 同时带 .wrap 类（负责左右留白与最大宽度），
   这里只把内容限制在左半，不动 .wrap 的水平居中逻辑 */
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: left;
}

/* 用一个内层容器限制文字宽度，避免撑到图上去 */
.hero-inner > * {
  max-width: 540px;
}
.hero-inner .hero-note {
  max-width: 30em;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .4em;
  color: var(--ink-3);
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--line-2);
}
/* 左对齐时只留右边那条装饰线 */
.hero-eyebrow::before { display: none; }

.hero-title {
  margin-top: 14px;
  font-family: var(--font-kai);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: 0;
  line-height: 1.25;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 253, 248, .8);
}
[data-theme="dark"] .hero-title { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

.hero-sub {
  margin-top: 12px;
  font-size: 16px;
  letter-spacing: .28em;
  color: var(--ink-2);
}

.hero-note {
  max-width: 30em;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

.hero-rule {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
}

.hero-rule span {
  width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.hero-rule span:last-child { display: none; }

.hero-rule i {
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--cinnabar);
  opacity: .55;
}

.daily { padding-top: clamp(28px, 4vw, 38px); }

/* ============================================================
   今日一言 · 极简题跋
   上下两条细线 + 一句话 + 落款
   展开：线从左向右延伸，文字随之浮现
   ============================================================ */

.daily-scroll {
  position: relative;
  padding: clamp(22px, 3vw, 34px) 0 clamp(18px, 2.4vw, 26px);
}

/* ---------- 上下两条线 ---------- */
.daily-scroll::before,
.daily-scroll::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(150, 125, 85, .58) 9%,
    rgba(150, 125, 85, .58) 91%,
    transparent 100%);
  transition: width 1.05s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.daily-scroll::before { top: 0; }
.daily-scroll::after { bottom: 0; }

.daily-scroll.is-open::before,
.daily-scroll.is-open::after {
  width: 100%;
}
[data-theme=dark] .daily-scroll::before,
[data-theme=dark] .daily-scroll::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 240, 210, .38) 9%,
    rgba(255, 240, 210, .38) 91%,
    transparent 100%);
}

/* 换一条时瞬间复位 */
.daily-scroll.is-resetting::before,
.daily-scroll.is-resetting::after,
.daily-scroll.is-resetting .daily-reveal {
  transition: none;
}

/* ---------- 内容：线延伸完再浮现 ---------- */
.daily-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--ease) .42s,
              transform .8s var(--ease) .42s;
}

.daily-scroll.is-open .daily-reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 引文 ---------- */
.daily-quote {
  margin: 0;
  font-family: var(--font-kai);
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

/* ---------- 落款 ---------- */
.daily-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(12px, 1.8vw, 18px);
}

.daily-from {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-2);
}/* ---------- 底部信息 ---------- */
.daily-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px, 2.2vw, 22px);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.daily-foot-gap {
  flex: 1 1 auto;
}

.daily-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cinnabar);
  letter-spacing: .2em;
}

.daily-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cinnabar);
  transform: rotate(45deg);
}

.daily-date {
  color: var(--ink-3);
  letter-spacing: .06em;
}

.daily-shuffle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color .22s var(--ease), border-color .22s var(--ease),
              background .22s var(--ease), transform .12s var(--ease);
}
/* 只有一条词章时，「换一条」视觉上不可用 */
.daily-shuffle.is-disabled {
  opacity: .42;
  cursor: default;
}

.daily-shuffle.is-disabled:hover {
  border-color: var(--line-2);
  color: var(--ink-4);
}


.daily-shuffle:hover {
  color: var(--cinnabar);
  border-color: rgba(164, 80, 58, .45);
  background: var(--cinnabar-soft);
}

.daily-shuffle:active { transform: scale(.96); }

.daily-shuffle svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-shuffle.is-spinning svg {
  animation: dailySpin .55s var(--ease);
}

@keyframes dailySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 减弱动效：直接显示，不做展开动画 */
@media (prefers-reduced-motion: reduce) {
  .daily-scroll::before,
  .daily-scroll::after { width: 100%; transition: none; }
  .daily-reveal { opacity: 1; transform: none; transition: none; }}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.entry-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.entry-num {
  font-family: var(--font-kai);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--ink-4);
}

.entry-art {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-4);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}

.entry-card:hover .entry-art { background: #fff; border-color: var(--line-2); }

.entry-art svg { width: 22px; height: 22px; }

.entry-title {
  font-family: var(--font-kai);
  font-size: 20px;
  letter-spacing: .18em;
  margin-bottom: 8px;
}

.entry-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  flex: 1;
}

.entry-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--cinnabar);
}

.entry-link .arrow {
  transition: transform .3s var(--ease);
}

.entry-card:hover .entry-link .arrow { transform: translateX(4px); }

/* ============================================================
   时间轴（替代原来的最近更新网格）
   中轴线 + 左右交替卡片 + 日期节点
   ============================================================ */
.timeline {
  position: relative;
  padding: 8px 0 20px;
  /* 入场时卡片会从两侧各平移 26px，宽度等于容器宽度，
     平移那一下会伸出视口把整页撑出 2px 横向滚动条 */
  overflow-x: clip;
}

/* 中轴线：用渐变模拟墨迹，两头淡出 */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--line-2) 6%,
    var(--line-2) 92%,
    transparent 100%
  );
}

/* ---------- 单条 ---------- */
.tl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0 0 28px;
}

/* 左卡片：内容在左，日期在右 */
.tl-item.is-left {
  flex-direction: row;
}

/* 右卡片：日期在左，内容在右 */
.tl-item.is-right {
  flex-direction: row-reverse;
}

.tl-half {
  width: 50%;
  display: flex;
}

.tl-item.is-left .tl-half.is-card {
  justify-content: flex-end;
  padding-right: 34px;
}

.tl-item.is-right .tl-half.is-card {
  justify-content: flex-start;
  padding-left: 34px;
}

.tl-item.is-left .tl-half.is-date {
  justify-content: flex-start;
  padding-left: 34px;
}

.tl-item.is-right .tl-half.is-date {
  justify-content: flex-end;
  padding-right: 34px;
}

/* ---------- 日期 ---------- */
.tl-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
}

.tl-date-day {
  font-family: var(--font-kai);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tl-date-year {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--ink-4);
}

/* ---------- 轴上节点 ---------- */
.tl-dot {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--cinnabar);
  z-index: 2;
  transition: transform .3s var(--ease), background .3s var(--ease);
}

.tl-item:hover .tl-dot {
  background: var(--cinnabar);
  transform: scale(1.35);
}

/* 节点外圈：一层很淡的晕，像墨点洇开 */
.tl-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--cinnabar);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.tl-item:hover .tl-dot::after {
  opacity: .3;
  transform: scale(1.1);
}

/* ---------- 卡片 ---------- */
.tl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 100px;
  padding: 18px 20px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}

.tl-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--cinnabar);
  transform: scaleY(0);
  transition: transform .35s var(--ease);
}

.tl-item.is-left .tl-card::before {
  left: 0;
  transform-origin: top;
}

.tl-item.is-right .tl-card::before {
  right: 0;
  transform-origin: bottom;
}

.tl-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.tl-item.is-left .tl-card:hover::before,
.tl-item.is-right .tl-card:hover::before {
  transform: scaleY(1);
}

/* 卡片指向轴的小尖角 */
.tl-card::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 8px;
  height: 8px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  transform: rotate(45deg);
}

.tl-item.is-left .tl-card::after {
  right: -4px;
  border-left: 0;
  border-bottom: 0;
}

.tl-item.is-right .tl-card::after {
  left: -4px;
  border-right: 0;
  border-top: 0;
}

.tl-tag {
  font-size: 13px;
  letter-spacing: .24em;
  color: var(--cinnabar);
}

/* 丹青条目的缩略图：撑满卡片宽度，顶部贴边 */
.tl-card.has-thumb {
  padding-top: 0;
  gap: 8px;
}

.tl-thumb {
  display: block;
  margin: 0 -20px 6px;          /* 抵消卡片左右 padding */
  aspect-ratio: 5 / 2;
  overflow: hidden;
  background: var(--paper-4);
}

.tl-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.tl-card:hover .tl-thumb img { transform: scale(1.04); }

.tl-title {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink);
}

.tl-meta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-4);
}

/* 栏目色差 */
.tl-item[data-kind="photo"] .tl-tag { color: #8a7a52; }
.tl-item[data-kind="guide"] .tl-tag { color: #5f7a6a; }
.tl-item[data-kind="photo"] .tl-dot { border-color: #8a7a52; }
.tl-item[data-kind="guide"] .tl-dot { border-color: #5f7a6a; }
.tl-item[data-kind="photo"] .tl-card::before { background: #8a7a52; }
.tl-item[data-kind="guide"] .tl-card::before { background: #5f7a6a; }

/* 暗色下卡片尖角底色跟着变 */
[data-theme="dark"] .tl-card::after { background: var(--paper-3); }

/* ---------- 入场：滚动到视口时从两侧滑入 ---------- */
.tl-item {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.tl-item.is-left { transform: translateX(-26px); }
.tl-item.is-right { transform: translateX(26px); }

.tl-item.is-in {
  opacity: 1;
  transform: none;
}

/* 减弱动效：不做位移 */
@media (prefers-reduced-motion: reduce) {
  .tl-item { opacity: 1; transform: none; transition: none; }
}

/* ---------- 时间轴空状态 ---------- */
.tl-empty {
  padding: 40px 20px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-4);
  text-align: center;
  background: var(--paper-3);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
}

/* 卡片内的行内日期：桌面端隐藏（日期在轴上），窄屏才显示 */
.tl-date-inline { display: none; }

/* ---------- 窄屏：全部靠左，轴移到左侧 ----------
   断点取 940px：低于此宽度时左右分栏会因卡片最小宽度不足而横向溢出 */
@media (max-width: 940px) {
  .timeline::before {
    left: 15px;
    margin-left: 0;
  }

  .tl-item,
  .tl-item.is-left,
  .tl-item.is-right {
    flex-direction: row;
    padding-left: 0;
  }

  /* 日期挪到卡片上方，作为小字 */
  .tl-item .tl-half.is-date,
  .tl-item.is-left .tl-half.is-date,
  .tl-item.is-right .tl-half.is-date {
    display: none;
  }

  .tl-item .tl-half.is-card,
  .tl-item.is-left .tl-half.is-card,
  .tl-item.is-right .tl-half.is-card {
    width: 100%;
    padding-left: 44px;
    padding-right: 0;
    justify-content: flex-start;
  }

  .tl-dot {
    left: 15px;
    margin-left: -4.5px;
    top: 22px;
  }

  /* 卡片内补一行日期 */
  .tl-date-inline {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--ink-4);
  }

  .tl-card { max-width: none; }

  .tl-item.is-left .tl-card::after,
  .tl-item.is-right .tl-card::after {
    left: -4px;
    right: auto;
    border-right: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .tl-item.is-left { transform: translateX(-16px); }
  .tl-item.is-right { transform: translateX(-16px); }
}

.about-card {
  display: grid;
  /* 左：自述 / 中：导航 / 右：联系 */
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 44px);
  padding: clamp(26px, 4vw, 44px);
  background: linear-gradient(180deg, var(--paper-3), var(--paper-4));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.about-main p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  /* 两行时把字数摊匀，避免「文 / 件。」这种把词拆开、末行只剩一个字的断法 */
  text-wrap: balance;
}

/* 自述只有两行，和右边两列对齐时垂直居中，避免左下角空一大块 */
.about-main { align-self: center; }

/* ---------- 关于里的两列小导航 ---------- */
.about-col { align-content: start; }

.about-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ink-3);
}

.about-col-title::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--cinnabar);
  transform: rotate(45deg);
}

.about-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.about-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}

.about-links a:hover { color: var(--cinnabar); }

.about-num {
  font-size: 12px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.about-arrow {
  font-size: 12px;
  color: var(--ink-4);
  transition: transform .2s var(--ease), color .2s var(--ease);
}

.about-links a:hover .about-arrow {
  color: var(--cinnabar);
  transform: translate(2px, -2px);
}

/* ---------- 最近更新：空状态 ---------- */
/* 不同栏目的卡片给一点色差，方便一眼区分 */
/* ---------- 数据概览 ---------- */
.site-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1px;
  margin-top: 16px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--paper-4);
}.stat-num {
  font-family: var(--font-kai);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--cinnabar);; font-variant-numeric: tabular-nums; }

.stat-label {
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ink-4);
}

@media (max-width: 940px) {
  /* 窄屏：图移到下方，文字在上，左缘渐隐改成上缘渐隐 */
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 40px 0 0;
  }
  .hero-inner {
    padding-bottom: 28px;
  }
  /* 图片改为相对定位、置于文字之后 */
  .hero-art {
    position: relative;
    order: 2;
    width: 100%;
    height: clamp(180px, 34vw, 240px);
    margin-top: -20px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    background-position: 62% center;
  }
}

@media (max-width: 980px) {
  .entry-grid, .quote-grid { grid-template-columns: repeat(2, 1fr); }
  /* 关于：自述占满一行，导航与联系并排 */
  .about-card { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .about-main { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-stats {
    grid-template-columns: repeat(3, 1fr);
  }}

@media (max-width: 560px) {
  .entry-grid, .quote-grid { grid-template-columns: 1fr; }

  /* 今日一言：窄屏底部换行 */
  .daily-quote { font-size: 20px; }
  .daily-foot { flex-wrap: wrap; gap: 10px 12px; }
  .daily-foot-gap { flex: 1 1 0; }
  .daily-foot { flex-wrap: wrap; gap: 12px; }
  
  .daily-shuffle { margin-inline: auto; }.hero-title { letter-spacing: .18em; }
  .hero-art { height: 170px; }
  /* 关于：三栏全部堆成单栏 */
  .about-card { grid-template-columns: 1fr; row-gap: 26px; }
  .about-main { grid-column: auto; }
  .stat-num { font-size: 20px; }
}