/* ============================================================
   如是心 · 文章页样式（article.css）
   ------------------------------------------------------------
   刻意与 tags.html / journal.html 的「米底圆角卡片 + 图标方块」
   右栏拉开距离，本页右栏走编辑部竖栏风格：
   左侧金线竖栏 + 序号小节 + 无卡片留白，内容为随机/标签/专题
   ============================================================ */

/* 文章头部（替代原大字 hero，轻量） */
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .74rem; color: rgba(30,58,46,.45); }
.ar-meta .arpill { font-size: .7rem; padding: .16rem .6rem; border-radius: .35rem; background: #A63D2F; color: #F7F3EA; }
.ar-meta .arline { width: 3px; height: 3px; border-radius: 99px; background: rgba(30,58,46,.25); }
.ar-title { font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: 1.75rem; line-height: 1.4; color: #1E3A2E; }
@media (min-width: 768px) { .ar-title { font-size: 2.15rem; } }
.ar-byline { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(30,58,46,.12); }
.ar-byline img { height: 2.1rem; width: auto; }

/* ---------- 右栏：竖线 + 序号小节 ---------- */
.ar-rail { border-left: 1px solid rgba(201,164,92,.38); padding-left: 1.35rem; }
@media (max-width: 1023px) { .ar-rail { border-left: 0; padding-left: 0; } }
.ar-block { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(30,58,46,.1); }
.ar-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* 小节标题：壹贰叁 序号 + 宋体标题 */
.ar-h { display: flex; align-items: center; gap: .55rem; font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: .95rem; color: #1E3A2E; margin: 0 0 .9rem; letter-spacing: .04em; }
.ar-h .ar-hn { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: .3rem; border: 1px solid rgba(201,164,92,.6); color: #C9A45C; font-size: .72rem; font-weight: 700; }

/* 随机文章：图 + 标题 + 相对时间（竖排，无卡片） */
.ar-randrow { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem 0; text-decoration: none; }
.ar-randimg { flex: 0 0 auto; width: 4.5rem; height: 3.4rem; border-radius: .4rem; object-fit: cover; background: #E4E0D2; filter: saturate(.92); transition: filter .35s; }
.ar-randrow:hover .ar-randimg { filter: saturate(1.08); }
.ar-randbody { flex: 1 1 0; min-width: 0; display: block; }
.ar-randtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.65; color: rgba(30,58,46,.8); transition: color .25s; }
.ar-randrow:hover .ar-randtitle { color: #A63D2F; }
.ar-randdate { display: block; margin-top: .3rem; font-size: .68rem; color: rgba(30,58,46,.38); }

/* 全站标签：方形 chip（区别于标签页的圆形 pill） */
.ar-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ar-tag { font-size: .74rem; padding: .3rem .62rem; border-radius: .3rem; border: 1px solid rgba(30,58,46,.13); background: rgba(255,255,255,.5); color: rgba(30,58,46,.66); text-decoration: none; transition: all .25s; }
.ar-tag:hover { border-color: rgba(201,164,92,.7); background: rgba(201,164,92,.12); color: #1E3A2E; }
.ar-tag.hot { border-color: rgba(166,61,47,.35); color: #A63D2F; background: rgba(166,61,47,.05); }

/* 精选专题：编号列表（区别于标签页的图标方块 + › 箭头） */
.ar-topics { display: block; }
.ar-topic { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; text-decoration: none; border-bottom: 1px dashed rgba(30,58,46,.1); }
.ar-topic:last-child { border-bottom: 0; }
.ar-tno { flex: 0 0 auto; font-family: 'Noto Serif SC', serif; font-size: .8rem; font-weight: 700; color: rgba(201,164,92,.9); }
.ar-tname { flex: 1 1 0; min-width: 0; font-size: .82rem; color: rgba(30,58,46,.82); transition: color .25s; }
.ar-tname em { display: block; font-style: normal; font-size: .66rem; color: rgba(30,58,46,.38); margin-top: .15rem; }
.ar-topic:hover .ar-tname { color: #A63D2F; }
.ar-tgo { flex: 0 0 auto; font-size: .8rem; color: rgba(30,58,46,.22); transition: transform .3s, color .25s; }
.ar-topic:hover .ar-tgo { color: #A63D2F; transform: translateX(3px); }

/* 底部延伸阅读：竖线编号卡（无 emoji，区别于其他页卡片） */
.ar-more { display: block; position: relative; padding: .95rem 1rem .95rem 1.15rem; border: 1px solid rgba(30,58,46,.09); border-radius: .55rem; text-decoration: none; background: rgba(255,255,255,.55); transition: border-color .3s, transform .3s, box-shadow .3s; }
.ar-more::before { content: ''; position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 3px; border-radius: 99px; background: rgba(201,164,92,.55); transition: background .3s; }
.ar-more:hover { border-color: rgba(201,164,92,.5); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(30,58,46,.6); }
.ar-more:hover::before { background: #A63D2F; }
.ar-moreno { display: block; font-family: 'Noto Serif SC', serif; font-size: .72rem; font-weight: 700; color: rgba(201,164,92,.9); }
.ar-moret { display: block; margin-top: .3rem; font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: .88rem; line-height: 1.5; color: #1E3A2E; transition: color .25s; }
.ar-more:hover .ar-moret { color: #A63D2F; }
.ar-morec { display: block; margin-top: .35rem; font-size: .68rem; color: rgba(30,58,46,.4); }

/* ---------- 热点文章：横排一行一篇，图左文右 ---------- */
.ar-hotlist { display: block; }
.ar-hotrow { display: flex; align-items: stretch; gap: 1rem; padding: .9rem 0; border-bottom: 1px dashed rgba(30,58,46,.1); text-decoration: none; }
.ar-hotrow:last-child { border-bottom: 0; }
.ar-hotimg { flex: 0 0 auto; width: 8.75rem; height: 5.9rem; border-radius: .5rem; object-fit: cover; background: #E4E0D2; filter: saturate(.92); transition: filter .35s, transform .35s; }
.ar-hotrow:hover .ar-hotimg { filter: saturate(1.08); }
.ar-hotbody { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ar-hottitle { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: .98rem; line-height: 1.5; color: #1E3A2E; transition: color .25s; }
.ar-hotrow:hover .ar-hottitle { color: #A63D2F; }
.ar-hotdesc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .3rem; font-size: .78rem; line-height: 1.7; color: rgba(30,58,46,.55); }
.ar-hotmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .45rem; font-size: .68rem; color: rgba(30,58,46,.4); }
.ar-hotno { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: .72rem; color: rgba(201,164,92,.95); }
.ar-hotmeta .text-cinnabar { font-size: .6rem; font-weight: 700; letter-spacing: .08em; }
.ar-hotmeta .arline { width: 3px; height: 3px; border-radius: 99px; background: rgba(30,58,46,.25); }
@media (max-width: 639px) {
  .ar-hotimg { width: 6.5rem; height: 4.6rem; }
  .ar-hottitle { -webkit-line-clamp: 2; font-size: .88rem; }
  .ar-hotdesc { display: none; }
}