/* ===========================================================
   那西索亚故事集 · 正文档案阅读器（第二阶段）
   命名空间 .ar- ，与博客主题及第一阶段 .archive- 完全隔离
   =========================================================== */

:root{
  --ar-paper:      #eee9dc;   /* A4 米白 */
  --ar-paper-edge: #ded7c6;
  --ar-ink:        #24211d;   /* 正文 */
  --ar-ink-soft:   #686258;   /* 辅助文字 */
  --ar-ink-faint:  #8b8272;   /* 编号 / 页码 */
  --ar-folder-red:   #7f292b;
  --ar-folder-green: #465b46;
  --ar-folder-black: #111111;
  --ar-folder-blue:  #314b67;
  --ar-folder-beige: #e8dfcd;   /* 目录页「关于」分类用（正文页无此分类，故只在目录生效） */
}

.ar-body{
  margin: 0; height: 100vh; height: 100dvh;
  background: #000; color: #e9e4dc;
  font-family: "EB Garamond", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;              /* 指南 §7：禁止纵向无限滚动 */
}
.ar-starfield{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 14% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 31% 68%, rgba(255,255,255,.32), transparent),
    radial-gradient(1.3px 1.3px at 52% 16%, rgba(255,255,255,.46), transparent),
    radial-gradient(1px 1px at 69% 44%, rgba(255,255,255,.36), transparent),
    radial-gradient(1.2px 1.2px at 84% 74%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.1px 1.1px at 91% 26%, rgba(255,255,255,.34), transparent);
}

/* ---------- 顶部：极少量档案信息（§66） ---------- */
.ar-topbar{
  position: fixed; z-index: 40; top: 18px; left: 22px; right: 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.ar-back{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .18em;
  color: rgba(233,228,220,.62); text-decoration: none;
  border: 1px solid rgba(233,228,220,.28); border-radius: 2px;
  padding: 7px 13px; transition: color .2s ease, border-color .2s ease;
}
.ar-back:hover{ color: #e9e4dc; border-color: rgba(233,228,220,.6); }
.ar-stamp{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .26em; color: rgba(233,228,220,.42);
}

/* ---------- 阅读舞台 ---------- */
.ar-stage{
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 74px 16px 40px; box-sizing: border-box;
}
.ar-spread{
  position: relative; display: flex;
  height: min(78vh, 860px, 66vw);   /* A4：高度随视口，宽度按 210/297 推导 */
  perspective: 1600px;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.62));
  touch-action: pan-y;
}

/* ---------- A4 纸 ---------- */
.ar-page{
  position: relative;
  height: 100%; aspect-ratio: 210 / 297;   /* 固定比例，绝不因内容变长 */
  background: var(--ar-paper);
  color: var(--ar-ink);
  overflow: hidden;
}
/* 纸张：极轻噪点 + 极淡边缘暗化（§10，不做强纹理） */
.ar-page::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 30;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 62%, rgba(90,76,52,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 22%);
  mix-blend-mode: multiply;
}
.ar-page--right{
  border-radius: 0 3px 3px 0;
  box-shadow: inset 16px 0 26px rgba(120,100,64,.14);   /* 装订侧暗部 */
}
.ar-page--left{
  border-radius: 3px 0 0 3px;
  box-shadow: inset -14px 0 24px rgba(120,100,64,.10);
}
/* 第 0 跨：左页 = 档案夹内侧（满幅分类色） */
.ar-page--left.is-interior{
  background: var(--ar-folder-color, var(--ar-folder-red));
  box-shadow: none;
}
.ar-page--left.is-interior::after{ display: none; }
/* 后续跨：左页 = 上一页 A4 的纯米色背面，左侧露出一线封面色（§4） */
.ar-page--left:not(.is-interior)::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3.2%; background: var(--ar-folder-color, var(--ar-folder-red));
  z-index: 2;
}

/* ---------- 正文流（安全区 §52） ---------- */
.ar-flow{
  position: relative; z-index: 10;
  height: 100%; box-sizing: border-box;
  padding: 11% 12% 13%;
  overflow: hidden;                 /* 溢出不撑破 A4，交由 debug 提示（§53） */
  /* A4 高度随视口变化，字号温和跟随（15–17px 区间），避免小窗口溢出 */
  font-size: clamp(13.5px, 1.85vh, 17px); line-height: 1.86;
  letter-spacing: .01em;
}
.ar-flow > p{
  margin: 0 0 .82em;
  text-align: justify;            /* 两端对齐，版心更规整 */
  text-justify: inter-ideograph; /* CJK 按字距拉伸，而非只在词间 */
  text-align-last: left;          /* 末行左对齐，不被强行拉伸 */
  text-wrap: pretty;              /* 自动规避末行只剩 1–2 字的孤行 */
}
.ar-flow p:last-child{ margin-bottom: 0; }
/* 参考文献为短行，两端对齐会产生难看空隙，保持左对齐 */
.ar-flow > p.ar-ref{ text-align: left; }

/* 年份（§14：档案不使用现代大标题，年份即分节） */
.ar-year{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: .3em; color: var(--ar-ink-soft);
  margin: 1.5em 0 .7em;
}
.ar-year:first-child{ margin-top: 0; }
.ar-h{
  font-size: 17px; font-weight: 600; letter-spacing: .12em;
  margin: 0 0 1em; color: var(--ar-ink);
}

/* identity：人物信息放左侧边栏（§20，参照 mosbyfiles） */
.ar-identity{
  float: left; width: 30%; margin: 0 5% 1.2em 0;
  padding-right: 5%; border-right: 1px solid rgba(140,124,92,.34);
  font-size: 13px; line-height: 1.7; color: var(--ar-ink-soft);
}
.ar-identity__name{
  font-size: 19px; font-weight: 600; letter-spacing: .1em;
  color: var(--ar-ink); margin-bottom: .35em;
}
/* 有肖像时：肖像独占左栏，姓名 / 生卒 / 编号移到右侧栏（贯穿页宽） */
.ar-identity.has-photo{
  float: none; width: 100%; margin: 0 0 1.2em; padding-right: 0;
  border-right: 0;
  display: flex; align-items: stretch; gap: 0;
}
.ar-identity__body{ flex: 1 1 0; min-width: 0; position: relative; }
.ar-identity.has-photo .ar-identity__body{
  padding-left: 7%;
  transform: translateX(-20px);   /* 竖线 + 右栏整体左移 20px，左栏肖像不动 */
}
/* 竖分隔线：比肖像略长，上下各留 8px 呼吸感 */
.ar-identity.has-photo .ar-identity__body::before{
  content: ""; position: absolute; left: 0; top: -8px;
  width: 1px; height: calc(100% + 16px);
  background: rgba(140,124,92,.34);
}

/* 人物肖像：像直接贴在纸上 —— 无白边、无阴影、不可点击、不可拖动 */
.ar-identity__photo{
  flex: 0 0 40%; margin: 0; padding: 0; position: relative;
  display: flex; align-items: flex-start; justify-content: flex-start;
  background: none; border: 0; box-shadow: none;
  cursor: default; user-select: none; -webkit-user-select: none;
}
/* 肖像占位必须与肖像的实际显示框完全一致：img 是 width:70%、左上锚定、max-height 38vh，
   占位就照搬同一套尺寸。若沿用通用规则（absolute inset:0 铺满整个 figure）会比肖像宽约 43%，
   加载时看着是一块与图片尺寸不符的怪块。 */
.ar-identity__photo > .ar-ph__box{
  position: relative; inset: auto;   /* 参与布局，不再是铺满 figure 的绝对覆盖层 */
  width: 70%;                        /* 与 img 同宽 */
  aspect-ratio: 4 / 5;               /* 缺省竖构图比例；真实图片就位后由 img 接管 */
  max-height: 38vh;                  /* 与 img 同一高度上限 */
  box-sizing: border-box;
  font-size: 9px; letter-spacing: .04em;   /* 肖像框很小，收紧字距以免文字溢出 */
  white-space: nowrap; overflow: visible;
}
/* 未就绪：藏起 img，让占位独占该槽位。否则 0 高度的 img 配上绝对定位占位会错位、压到正文 */
.ar-identity__photo.is-loading img,
.ar-identity__photo.is-missing img{ display: none; }
/* 就绪：占位必须彻底退出布局 —— 只置 opacity:0 仍会占住位置，把身份栏撑开 */
.ar-identity__photo:not(.is-loading):not(.is-missing) > .ar-ph__box{ display: none; }
/* 肖像自动缩放：仅占左栏 70%，右侧留白与竖线拉开距离，绝不撑破版心 */
.ar-identity__photo img{
  display: block; width: 70%; height: auto;
  max-height: 38vh; object-fit: contain; object-position: left top;
  pointer-events: none;
}
.ar-identity__meta{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; }
.ar-identity__no{
  margin-top: .8em; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .22em; color: var(--ar-ink-faint);
}

/* facts 表：表头与内容统一为同一套样式（§60，不再区分） */
.ar-facts{
  width: 100%; border-collapse: collapse;
  margin: 0 0 1.3em;
}
.ar-facts th, .ar-facts td{
  text-align: left; padding: 4px 8px 4px 0;
  border-bottom: 1px solid rgba(140,124,92,.22);
  color: var(--ar-ink-faint); font-weight: 400;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em;
}
.ar-facts th{ width: 30%; }
.ar-facts tr:last-child th, .ar-facts tr:last-child td{ border-bottom: 0; }

/* note：整理者旁注，小字、纸边感，禁止彩色提示框（§36） */
.ar-note{
  display: block; margin: 1.1em 0; padding-left: 10px;
  border-left: 1px solid rgba(140,124,92,.45);
  font-size: 12px; line-height: 1.7; color: var(--ar-ink-soft); font-style: italic;
}
/* quote：书信 / 口述（§37） */
.ar-quote{
  margin: 1.4em 0 1.4em 1.1em; padding-left: 1em;
  border-left: 2px solid rgba(140,124,92,.4);
  font-size: 12px; line-height: 1.85; color: var(--ar-ink);
}
.ar-quote cite{
  display: block; margin-top: .5em; font-style: normal;
  font-size: 11.5px; letter-spacing: .14em; color: var(--ar-ink-faint);
}
/* references */
.ar-ref{ font-size: 12.5px; color: var(--ar-ink-soft); margin: 0 0 .5em; }

/* 脚注 */
.ar-fn{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; vertical-align: super; color: var(--ar-ink-faint);
  cursor: help; padding: 0 1px;
}
.ar-fnlist{
  position: absolute; left: 12%; right: 12%; bottom: 6.5%;
  font-size: 10.5px; line-height: 1.6; color: var(--ar-ink-faint);
  border-top: 1px solid rgba(140,124,92,.28); padding-top: 6px;
}
.ar-fnlist p{ margin: 0 0 .3em; }

/* 页码：极小、居中于右页底部（§9） */
.ar-foot{
  position: absolute; z-index: 25; left: 75%; bottom: 3.2%;
  transform: translateX(-50%); pointer-events: none;
}
.ar-pagenum{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .3em; color: var(--ar-ink-faint);
}

/* ---------- 图片独立图层（§24 / §25 / §32） ---------- */
.ar-layer{ position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ar-photo{
  position: absolute; pointer-events: auto;
  margin: 0; padding: 0; background: none;
  border: 0; box-shadow: none;
  cursor: grab; user-select: none; -webkit-user-select: none;
  transition: box-shadow .2s ease;
  touch-action: none;
}
.ar-photo:hover{ box-shadow: none; }   /* 浮动状态纯图，无外框、不发光 */
.ar-photo.is-dragging{ z-index: 100 !important; cursor: grabbing; box-shadow: 0 22px 34px rgba(0,0,0,.55); }
.ar-photo img{ display: block; width: 100%; height: auto; pointer-events: none; }

/* 图片占位：载入中 / 缺失（档案素色风，克制，尊重降低动效偏好） */
.ar-ph__box{
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(214,205,184,.55);
  color: var(--ar-ink-faint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .22em; text-align: center;
  pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.ar-ph__miss{ display: none; }
.is-loading > .ar-ph__box,
.is-missing > .ar-ph__box{ opacity: 1; }
.is-missing > .ar-ph__box .ar-ph__load{ display: none; }
.is-missing > .ar-ph__box .ar-ph__miss{ display: block; }

/* 浮动照片：载入/缺失时给一个默认比例占位框，避免整块塌成 0 高度看不见 */
.ar-photo.is-loading,
.ar-photo.is-missing{ aspect-ratio: 4 / 3; }

/* 线索墙覆盖层（§新）：SVG 盖在照片之上、pointer-events:none 不挡拖动与点击放大 */
.ar-clue{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  z-index: 100000;            /* 高于 dragged .ar-photo 的 100，红线/图钉始终在最上层 */
}
.ar-clue__line{
  stroke: #c0392b; stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 1.4px 1px rgba(40,0,0,.35));   /* 红线带阴影：像悬在纸面上的细绳 */
}
.ar-clue__needle{ stroke: #6e1d15; stroke-width: 1.6; stroke-linecap: round; }
.ar-clue__head{ fill: #d8442f; stroke: #6e1d15; stroke-width: 1; }
.ar-clue__hi{ fill: rgba(255,255,255,.55); }   /* 高光点，使图钉区别于红线

/* 浮动标签卡（§35：参照 mosbyfiles 的低饱和纯色块，圆角、文字直嵌） */
.ar-card{
  position: absolute; pointer-events: auto; margin: 0;
  width: fit-content; max-width: 42%;
  padding: 12px 15px; border-radius: 13px;
  background-color: rgba(232,223,205,.9);   /* 默认 beige，统一 90% 不透明 */
  /* 极轻纸张纹理：内联 SVG 噪点，无外部资源（§35 增强） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  color: #24211d;
  font-family: "EB Garamond","Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  font-size: 13px; line-height: 1.62; letter-spacing: .01em;
  text-align: justify;            /* 卡片文字同样两端对齐 */
  text-justify: inter-ideograph;
  text-align-last: left;
  text-wrap: pretty;
  box-shadow: 0 9px 18px rgba(0,0,0,.20);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  transition: box-shadow .2s ease;
}
.ar-card.is-dragging{ z-index: 100 !important; cursor: grabbing; box-shadow: 0 22px 32px rgba(0,0,0,.5); }
.ar-card strong{ font-weight: 600; }
.ar-card em{ font-style: italic; }
.ar-card a{ color: inherit; text-decoration: underline; }
.ar-card sup{ font-family: "IBM Plex Mono",ui-monospace,monospace; font-size: 10px; vertical-align: super; color: #5b5446; cursor: help; }
/* 低饱和调色板（固定指令 color: yellow|red|blue|green|beige），统一 90% 不透明 */
.ar-card--yellow{ background-color: rgba(231,215,163,.9); }
.ar-card--red{ background-color: rgba(216,167,154,.9); }
.ar-card--blue{ background-color: rgba(166,192,214,.9); }
.ar-card--green{ background-color: rgba(180,200,164,.9); }
.ar-card--beige{ background-color: rgba(232,223,205,.9); }

/* ---------- 放大查看（§34） ---------- */
.ar-lightbox{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.86);
  display: flex; align-items: center; justify-content: center; padding: 5vh 4vw;
}
.ar-lightbox[hidden]{ display: none; }
.ar-lightbox__inner{ position: relative; max-width: 1080px; width: 100%; }
.ar-lightbox__close{
  position: absolute; top: -34px; right: 0; background: none; border: 0;
  color: rgba(233,228,220,.7); font-size: 26px; line-height: 1; cursor: pointer;
}
.ar-lightbox__fig{ margin: 0; display: flex; gap: 26px; align-items: flex-start; justify-content: center; }
.ar-lightbox__fig img{ max-width: 62%; max-height: 74vh; background: #fbf7ee; padding: 8px; }
.ar-lightbox__fig figcaption{ display: flex; flex-direction: column; gap: 9px; max-width: 300px; }
.ar-lightbox__fig-no{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .3em; color: rgba(233,228,220,.5);
}
.ar-lightbox__caption{ font-size: 15px; letter-spacing: .06em; }
.ar-lightbox__desc{ font-size: 13px; line-height: 1.8; color: rgba(233,228,220,.68); }
.ar-lightbox__src{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; color: rgba(233,228,220,.45);
}

/* ---------- 翻页动画（§42 / §43：克制，550ms） ---------- */
@keyframes arTurnNext{
  0%   { transform: translateX(5%) rotateY(-9deg); opacity: .10; }
  100% { transform: none; opacity: 1; }
}
@keyframes arTurnPrev{
  0%   { transform: translateX(-5%) rotateY(9deg); opacity: .10; }
  100% { transform: none; opacity: 1; }
}
@keyframes arFadeIn{ 0%{ opacity: .12 } 100%{ opacity: 1 } }
.ar-anim-next{ animation: arTurnNext .55s cubic-bezier(.22,.61,.36,1); transform-origin: left center; }
.ar-anim-prev{ animation: arTurnPrev .55s cubic-bezier(.22,.61,.36,1); transform-origin: left center; }
.ar-anim-fade{ animation: arFadeIn .5s ease; }

/* ---------- 开发提示（§54） ---------- */
.ar-debug{
  position: fixed; z-index: 60; left: 22px; bottom: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; color: #ffb4b4;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,180,180,.35);
  padding: 7px 11px; border-radius: 2px; max-width: 46vw;
}
.ar-loading{
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  color: rgba(233,228,220,.6); letter-spacing: .2em; font-size: 13px;
}

/* ---------- 手机：与桌面端完全一致（双页摊开），仅「竖屏手机」强制横屏 ---------- */
/* 设备判定由 <head> 内联脚本给出 html.is-phone：触屏 + 手机 UA + 屏幕短边 ≤560，且排除平板。
   电脑缩窄窗口 / 平板拿不到 is-phone → 一律保持完整桌面布局、绝不旋转（需求 1 / 3）。
   双页尺寸按手机短边（vmin 在横竖屏下均为短边）自适应，书本自然摊开并居中。 */
@media (max-width: 760px){
  html.is-phone .ar-spread{ height: min(94vmin, 680px); }
  html.is-phone .ar-stage{ padding: 56px 8px 22px; }

  /* 正文与组件字号按短边 vmin 等比缩放，书页缩小时文字同步缩小、不溢出 */
  html.is-phone .ar-flow{ font-size: clamp(11.5px, 3.3vmin, 16px); line-height: 1.8; }
  html.is-phone .ar-h{ font-size: clamp(14px, 4.2vmin, 17px); }
  html.is-phone .ar-year{ font-size: clamp(10px, 2.7vmin, 13px); }
  html.is-phone .ar-identity{ font-size: clamp(10px, 2.7vmin, 13px); }
  html.is-phone .ar-identity__name{ font-size: clamp(14px, 4.4vmin, 19px); }
  html.is-phone .ar-identity__photo img{ max-height: 30vh; }
  html.is-phone .ar-note{ font-size: clamp(10px, 2.8vmin, 13px); }
  html.is-phone .ar-quote{ font-size: clamp(10px, 2.8vmin, 13px); }
  html.is-phone .ar-facts th, html.is-phone .ar-facts td{ font-size: clamp(8.5px, 2.3vmin, 11px); }
  html.is-phone .ar-card{ font-size: clamp(11px, 3vmin, 14px); }
}
/* 竖屏手机：旋转 90° 强制横屏，使双页书本沿手机长边摊开。
   三重保险，缺一即不旋转：JS 判定 is-phone + 窄屏竖屏 + 粗指针无悬停（排掉带鼠标的电脑窗口）。
   横屏手机与桌面一致，无需旋转。 */
@media (max-width: 560px) and (orientation: portrait) and (hover: none) and (pointer: coarse){
  html.is-phone .ar-rotate{
    position: fixed; top: 0; left: 0;
    width: 100vh; height: 100vw;          /* 旋转后 = 屏幕长边 × 短边 */
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100vw);
    overflow: hidden;
  }
  html.is-phone .ar-stage{ height: 100%; width: 100%; }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .ar-anim-next, .ar-anim-prev, .ar-anim-fade{ animation: none !important; }
  .ar-photo{ transition: none; }
  .ar-ph__box{ transition: none; }
}