/* layout.css —— 版心宽度与页面容器、栏目分隔头、淡入。 */

/* ==========================================================================
   版心
   ========================================================================== */

.page {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 40px var(--gut) 96px;
}
.page-read { max-width: calc(var(--read) + var(--gut) * 2); }

.fade { animation: fade .45s var(--ease) both; }
@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 数据是异步加载的，页面级的 .fade 在数据到达前就播完了，
   所以内容渲染完成后需要再淡入一次。 */
.content-in { animation: fade .3s var(--ease) both; }

/* 栏目标题 */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 22px;
}
.sec-head h2 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.sec-head .count {
  font-size: .72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sec-head .sub {
  margin-left: auto;
  font-size: .74rem;
  color: var(--ink-2);
}

/* Hub 各主区块之间的呼吸。相邻兄弟才加，第一个区块不额外留白。 */
.page > section + section { margin-top: 46px; }

/* 「往期」与「内容分布」是同一条阅读路径上的两站，
   用细线断开但不做重量级分隔。 */
#archiveBox + section { margin-top: 52px; }