/* 卷舒 — 首页
   遵循 DESIGN.md：颜色、间距、字号一律用 type.css 的 token，本文件不写死数值。
   外框与书脊在 frame.css，本文件只写四部区。 */

/* ── 四部区 ─────────────────────────────────────────── */
/* 右起：DOM 顺序是 經史子集，row-reverse 让 經 落在最右。
   不用 direction: rtl——它会被继承进竖排块，把列排到块底。 */
.seats {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  min-width: 0;
}

.seat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-l) 0;
  box-sizing: border-box;
  container-type: size;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 四块之间的界行：右起，除最左一块外每块左边一条 */
.seat:not(:last-child) {
  border-left: var(--rule-width) solid var(--rule-color);
}

/* ── 单格 ───────────────────────────────────────────── */
.seat-icon {
  flex: 0 0 auto;
  width: min(var(--icon-size), 15cqw);
  aspect-ratio: 1;
  height: auto;
  margin-bottom: var(--space-xl);
  color: var(--accent);
}

.seat-name {
  font-size: min(var(--size-display), 72cqw);
}

/* 部名下的短分割线 */
.seat-rule {
  width: var(--rule-short);
  height: var(--rule-width);
  margin: var(--space-m) 0;
  background: var(--rule-color);
}

/* 分割线以下两列：左简介、右四字题。
   DOM 顺序是 sub → intro，靠 row-reverse 反转成 简介 在左。 */
.seat-body {
  display: flex;
  flex-direction: row-reverse;
  flex: 0 0 auto;
  min-height: 0;
  justify-content: center;
  gap: var(--space-xs);
}

.seat-sub {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: var(--size-body);
  letter-spacing: var(--track-loose);
}

/* 简介：竖排多列，右起续排；高度取格子内高的 60%，四格等高才能对齐 */
.seat-intro {
  display: block;
  box-sizing: border-box;
  height: 60cqh;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: var(--size-note);
  line-height: 1.8;
}

/* ── 状态 ───────────────────────────────────────────── */
/* 悬停 / 键盘聚焦 / 按下：整格转朱，icon 本色不变 */
.seat:hover,
.seat:focus-visible,
.seat:active {
  color: var(--accent);
  outline: none;
}

/* ── 窄屏 ───────────────────────────────────────────── */
/* 竖排多列放不下，简介收起，只留部名与四字题 */
@media (max-width: 900px) {
  .seat-intro {
    display: none;
  }
}

/* 首页书脊：标题顶对齐，副题 20 */
.spine--home {
  justify-content: flex-start;
  padding: var(--space-xxl) 0;
}

.spine--home .spine-sub {
  font-size: var(--size-body);
}

/* 全站统计贴书脊底部 */
.spine--home .spine-total {
  margin-top: auto;
}