/* ============================================================
   AAA 当代艺术词典 — 页面渲染层
   这份文件是唯一的排版真源：编辑器预览和 Playwright 导出都用它。
   数值全部来自 Figma 稿（*.dc.html），改这里等于改设计规范。
   ============================================================ */

:root {
  --page-w: 720px;
  --page-h: 960px;

  --ink: #0D3B3B;         /* 墨绿主色：标题、页码、索引、词头 */
  --paper: #fbfbfa;       /* 纸底 */
  --body-ink: #1a1a1a;    /* 正文黑 */
  --caption-ink: #2d2b2b; /* 图注与 Reference（原稿的 --color-neutral-900） */
  --hl: #5A9E94;          /* 正文高亮（[[双括号]]） */

  --font-en: 'Cormorant Garamond', 'Times New Roman', serif;  /* 英文标题、页码、索引 */
  --font-zh: 'Noto Serif SC', 'Songti SC', serif;             /* 中文标题、词头、封面释义 */

  /* 正文 / 图注 / Reference。原稿指定 Arial，但 Arial 没有中文字形，
     中文会掉到系统字体 —— Mac 出苹方、Windows 出雅黑，同事之间出图就不一致了。
     所以西文交给 Arial（两个系统都有，和原稿一致），中文明确指向自托管的
     Noto Sans SC，这样谁的机器上排出来都一样。 */
  --font-body: Arial, 'Noto Sans SC', 'Helvetica Neue', sans-serif;

  --font-ui: 'Noto Sans SC', 'PingFang SC', sans-serif;       /* 封面释义前的序号圆点 */
}

/* ---------- 页框 ---------- */

.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  background: var(--paper);
  font-family: var(--font-ui);
  flex: none;
}

/* 纸感噪点：两层叠加，multiply 压暗 + screen 提亮。整套视觉的底子，不要动。 */
.page::before,
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.page::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
  mix-blend-mode: multiply;
  opacity: .09;
}
.page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 96px;
  mix-blend-mode: screen;
  opacity: .16;
}

.page__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ---------- 页脚（内页共用） ---------- */

.pg-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/* aspect-ratio 是必需的，不是装饰：没有它，logo 图未加载时页脚高度会被量成
   只有页码那么高，分页引擎就会以为版心还剩两行，把正文顶出页面。 */
.pg-foot__logo {
  display: block;
  width: 98px;
  height: auto;
  aspect-ratio: 678 / 691;
  transform: translate(2px, 1px);
}
.pg-foot__num {
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
  font-feature-settings: 'tnum';
}

/* ============================================================
   封面
   ============================================================ */

.page--cover .page__inner { padding: 0; }

.cover__body {
  flex: 1;
  box-sizing: border-box;
  padding: 40px 40px 0;
  display: flex;
  flex-direction: column;
}

.cover__brand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .05em;
  color: var(--ink);
  margin-top: -14px;
}

.cover__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 词头绕排：大字浮动在左，英文与释义绕其右侧排布 */
.cover__wrap {
  overflow: hidden;
  width: 570px;
  height: 249px;
}
.cover__hw-box {
  float: left;
  width: 200px;
  height: 300px;
  margin: 4px 22px 0 0;
  position: relative;
  overflow: hidden;
}
.cover__hw {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-zh);
  font-weight: 900;
  font-size: 200px;      /* 起始值，由 fitHeadword() 缩放至框内 */
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  color: var(--ink);
  transform-origin: top right;
}
.cover__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.cover__def {
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.6;
  color: var(--ink);
  text-align: justify;
}
.cover__badge {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-ui);
  vertical-align: 2px;
  margin-right: 8px;
}

.cover__index {
  box-sizing: border-box;
  padding: 0 40px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-en);
  font-size: 21px;
  color: var(--ink);
}
.cover__no {
  letter-spacing: .14em;
  font-size: 17px;
}

.cover__photo {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(.15) contrast(1.03);
}

/* ============================================================
   内页 · 文字版
   ============================================================ */

.page--text .page__inner { padding: 31px 56px 46px; }

/* flex: none 很关键：默认 flex-shrink 会在内容超版心时悄悄压扁文字块，
   量出来的高度就永远不会"超"，分页引擎会因此失灵。 */
.text__head,
.text__body,
.pg-foot { flex: 0 0 auto; }

.text__head { text-align: right; }
.text__zh {
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  color: var(--ink);
}
.text__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 2px;
}

.text__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* 有标题的首页，正文距标题 28px；续页正文直接顶到版心上沿 */
.text__head + .text__body { margin-top: 28px; }

.text__p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.35;
  color: var(--body-ink);
  text-align: justify;
  letter-spacing: .01em;
  margin: 0;
}
.text__hl { color: var(--hl); }

.page--text .pg-foot {
  margin-top: auto;
  padding-top: 28px;
}

/* ============================================================
   内页 · 插图版
   ============================================================ */

.page--figure .page__inner { padding: 56px 56px 40px; }

/* 图片区吃掉页脚以外的全部空间，且 min-height:0 允许它被压缩。
   这两条是页角不被挤掉的关键：图再高也只能在这个盒子里缩，
   永远越不过页脚。宁可图小一点，也不能让 logo 和页码消失。 */
.fig__body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fig__body--single { justify-content: center; }
.fig__body--double { width: 510px; margin: 0 auto; justify-content: flex-start; }

.fig__item {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* object-fit: contain —— 被压缩时图片等比缩放居中，不会被拉变形 */
.fig__img {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(.05) contrast(1.02);
}

.fig__caption {
  flex: 0 0 auto;
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--caption-ink);
  padding: 0 20px;
}

.page--figure .pg-foot { margin-top: auto; }
.page--figure .pg-foot__logo { width: 92px; transform: none; }

/* ============================================================
   尾页 · 尾图 + Reference List
   每期最后一页，固定版式。带页眉，和正文页一致。
   ============================================================ */

.page--tail .page__inner { padding: 31px 56px 46px; }

.page--tail .text__head,
.page--tail .tail__refs { flex: 0 0 auto; }

/* 尾图尽量放大：宽度顶满版心，高度由 flex 决定。
   Reference 和页脚是 flex:0 0 auto（不可压缩），所以空间不够时
   只会压缩这张图 —— 图会变小，但 Ref 列表和页角永远完整。 */
.tail__fig {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tail__img {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(.03) contrast(1.02);
}
.tail__caption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--caption-ink);
  padding: 0 20px;
}

.tail__refs {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tail__refs-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--caption-ink);
}
.tail__ref {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: var(--caption-ink);
  text-align: left;
}

.page--tail .pg-foot {
  margin-top: auto;
  padding-top: 24px;
}

/* ---------- 离屏容器 ---------- */

/* 分页引擎用它量真实文字高度，必须和真页面同字体同宽度，只是搬到视口外。 */
.measure-host {
  position: absolute;
  left: -99999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 导出时页面临时挂在这里。刻意不用 visibility:hidden —— 栅格化会把它一起
   复制过去，截出来会是一张空白图。所以只把它挪出视口。 */
.export-stage {
  position: fixed;
  left: -99999px;
  top: 0;
  pointer-events: none;
  z-index: -1;
}