@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ============================================================
   MZ 摄影站 · 档案书前端
   语法：Taryn 常驻索引 + 一图一页 ｜ 配色：void 青灰宣纸
   全部内容由 app.js 依 window.SITE_DATA 渲染，本文件只定 token 与骨架
   ============================================================ */

:root {
  --paper:     #dbe6f2;   /* 纸 */
  --paper2:    #e9f0f8;   /* 纸版白（图版底） */
  --ink:       #26333f;   /* 墨 */
  --ink-60:    rgba(38,51,63,.6);
  --ink-45:    rgba(38,51,63,.45);
  --ink-35:    rgba(38,51,63,.35);
  --ink-18:    rgba(38,51,63,.18);
  --chrome-lo: #9db0c6;   /* chrome 声部 */
  --line:      rgba(38,51,63,.4);

  --serif: 'Cormorant', 'Songti SC', 'STSong', 'SimSun', serif;
  --mono:  'DM Mono', 'SFMono-Regular', ui-monospace, monospace;

  --sidebar: 300px;
  --pad: 44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 宣纸颗粒 —— 固定覆层，multiply 混入纸色 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9;
  pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.72 0 0 0 0 0.78 0 0 0 0 0.86 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(38,51,63,.14); }
a { color: inherit; text-decoration: none; }

/* ===================== 布局骨架 ===================== */
.frame {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

/* -------- 左：常驻索引 -------- */
.index {
  padding: var(--pad) 28px var(--pad) var(--pad);
  border-right: 1px solid var(--ink-35);
  position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto;
}
.index::-webkit-scrollbar { width: 0; }
.index { scrollbar-width: none; }

.brand {
  font-family: var(--serif);
  font-size: 22px; letter-spacing: .14em; font-weight: 500;
  background: none; border: 0; color: inherit; cursor: pointer;
  text-align: left; display: inline-block;
}
.rule { width: 34px; border-top: 1px solid var(--line); margin: 30px 0 26px; }

.sec {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .28em; color: var(--ink-60);
  margin: 26px 0 12px;
}
.idx { list-style: none; }
.idx li { margin: 9px 0; }
.idx a {
  display: flex; align-items: center; gap: 13px;
  font-size: 16.5px; line-height: 1.38; letter-spacing: .015em;
  color: var(--ink);
}
.idx-name { flex: 1; min-width: 0; }
.idx a:hover .idx-name { color: var(--ink-60); }
.idx a.on .idx-name {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.index-foot { margin-top: 40px; }
.about-link {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .22em; color: var(--chrome-lo);
}
.about-link:hover { color: var(--ink-60); }
.about-link.on { color: var(--ink); }

/* -------- 顶栏（仅移动端可见） -------- */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 40;
  align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-18);
}
.topbar .brand { font-size: 18px; letter-spacing: .14em; }
.menu-toggle {
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  color: var(--ink-60); background: none; border: 0; cursor: pointer;
  padding: 4px 2px;
}

/* -------- 右：视图区 -------- */
.view {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 56px 60px; position: relative; min-height: 100vh;
  min-width: 0;   /* 网格列不被超宽图片撑破，杜绝横向滚动 */
}

/* 落地页 */
.home-hero { text-align: center; }
.hero-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 7vw, 88px); letter-spacing: .18em;
  line-height: 1;
}
.hero-intro {
  margin-top: 26px; font-size: 18px; font-style: italic;
  color: var(--ink-60); letter-spacing: .03em;
}

/* About / 文档式正文（陈述页与 info 同一语法） */
.doc { max-width: 620px; text-align: center; }
.doc .para {
  font-size: 19px; line-height: 1.75; letter-spacing: .012em;
  color: var(--ink); margin: 0 0 1.05em;
  text-wrap: balance;   /* 各行长度自动配平，避免词组拦腰断行 */
}
.doc .para:last-child { margin-bottom: 0; }
.doc .para a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-35); }
.doc .para a:hover { text-decoration-color: var(--ink); }

/* 落地页进场：整段原地淡入 */
.info-doc.fadein { opacity: 0; transition: opacity 2s ease; }
.info-doc.fadein.go { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .info-doc.fadein { opacity: 1; transition: none; }
}

/* 陈述页标题 */
.work-title {
  font-size: 21px; letter-spacing: .05em; font-weight: 500;
  margin-bottom: 30px; text-align: center;
}
.statement .work-title { margin-bottom: 34px; }
.statement .doc .para { font-size: 20px; }

/* 一图一页 */
.book { width: 100%; display: flex; flex-direction: column; align-items: center; }
.plate {
  position: relative;   /* 首图上的遮罩/文字以此为定位基准 */
  max-width: 100%;
  transform: translate(var(--img-x, 0px), var(--img-y, 0px));
}
.plate img {
  display: block;
  /* 以调校值为目标，但绝不超过列宽/视口——窄屏自动收，不溢出不裁切 */
  max-width: min(var(--img-maxw, min(58vw, 760px)), calc(100vw - var(--sidebar) - 120px));
  max-height: min(var(--img-maxh, 62vh), 86vh);
  width: auto; height: auto;
  /* 显影：从相纸空白里浮现——先过曝发灰，再收敛成像 */
  transition: opacity 1.1s ease, filter 1.4s ease;
}
.plate img.developing {
  opacity: 0;
  filter: brightness(1.6) contrast(.55) saturate(.4);
}
@media (prefers-reduced-motion: reduce) {
  .plate img { transition: none; }
}

/* 背板遮罩（移动端抽屉） */
.backdrop {
  display: none; position: fixed; inset: 0; z-index: 30;
  background: rgba(38,51,63,.28);
}

/* ===================== 移动端 ===================== */
@media (max-width: 820px) {
  :root { --pad: 26px; }

  .topbar { display: flex; }

  .frame { display: block; }

  .index {
    position: fixed; top: 0; left: 0; z-index: 35;
    width: min(82vw, 320px); height: 100vh; max-height: 100vh;
    background: var(--paper);
    border-right: 1px solid var(--ink-35);
    padding: 30px 0 30px 26px;
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: 0 0 40px rgba(38,51,63,.12);
  }
  body.drawer-open .index { transform: translateX(0); }
  body.drawer-open .backdrop { display: block; }
  .index .brand { display: none; }        /* 抽屉里不重复字标，顶栏已有 */
  .index .rule { margin-top: 6px; }

  .view { min-height: calc(100vh - 52px); padding: 40px 22px 64px; }

  /* 移动端不套用桌面调校的图片位移（忽略桌面平移） */
  .plate { transform: none; }
  .plate img { max-width: 92vw; max-height: 64vh; }

  .hero-title { letter-spacing: .12em; }
  .doc .para, .statement .doc .para { font-size: 18px; }
}

/* 触摸设备：加大点按热区（桌面小窗也可点边缘翻页） */
@media (hover: none) and (pointer: coarse) {
  .view { touch-action: pan-y; }
}

@media (prefers-reduced-motion: reduce) {
  .index { transition: none; }
}

/* 调校面板：仅项目页 URL 带 ?tune 时出现，是开发态工具，正常访问不加载 */
.tune-panel {
  position: fixed; top: 64px; right: 16px; z-index: 60;
  width: 236px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--ink-35);
  box-shadow: 0 6px 30px rgba(38, 51, 63, .18);
  font-family: var(--mono); font-size: 11px; color: var(--ink);
}
.tune-head { letter-spacing: .18em; margin-bottom: 10px; color: var(--ink-60); }
.tune-row {
  display: grid; grid-template-columns: 52px 1fr 36px;
  align-items: center; gap: 8px; margin: 5px 0;
}
.tune-label { color: var(--ink-60); }
.tune-row input[type=range] { width: 100%; }
.tune-val { text-align: right; }
.tune-foot { display: flex; gap: 8px; margin-top: 10px; }
.tune-btn {
  flex: 1; font-family: var(--mono); font-size: 11px; padding: 5px 0;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink-35); cursor: pointer;
}
.tune-btn:hover { border-color: var(--ink); }
.tune-note { margin-top: 8px; line-height: 1.5; color: var(--ink-35); }

/* -------- 静场：观看时周围渐熄（项目页 body.quiet，JS 控制） -------- */
:root { --paper-quiet: #141a21; }   /* 熄灭后的底色，深浅只改这里 */
body { transition: background-color .6s ease; }        /* 唤醒回亮 */
body::after { transition: opacity .6s ease; }
.index, .topbar { transition: opacity .6s ease; }
body.quiet { background: var(--paper-quiet); transition: background-color 12s ease; }  /* 灯慢慢熄 */
body.quiet::after { opacity: 0; transition: opacity 12s ease; }
body.quiet .index,
body.quiet .topbar { opacity: 0; transition: opacity 3s ease; }
body.quiet .index,
body.quiet .topbar { pointer-events: none; }   /* 隐形侧栏/顶栏不接点击：渐熄中第一下点击只开灯，不误触链接或抽屉 */

/* 静场时侧栏悄悄让位：文字先熄，列宽再缓缓滑到 0，画面逐渐回到视口正中 */
.frame { transition: grid-template-columns 1.2s ease; }
.index { transition: opacity .6s ease, padding 1.2s ease, border-right-color 1.2s ease; }
body.quiet .frame {
  grid-template-columns: 0px 1fr;
  transition: grid-template-columns 4s ease 1.2s;
}
body.quiet .index {
  opacity: 0; overflow: hidden;
  padding-left: 0; padding-right: 0;
  border-right-color: transparent;
  transition: opacity 3s ease, padding 4s ease 1.2s, border-right-color 4s ease 1.2s;
}

/* -------- 片尾陈述：字幕块绝对居中于视口，标题挂在其上方（.end-wrap，JS 挂 .show） -------- */
.end-wrap {
  /* fixed 锚视口正中：不随侧栏滑动漂移（桌面），不被顶栏压低（手机）*/
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--txt-maxw, 620px), 90%);
  opacity: 0;
  transition: opacity 3.5s ease;
}
.end-wrap .work-title {
  position: absolute; bottom: 100%; left: 0; right: 0;
  margin: 0 0 44px;
}
.end-wrap.show { opacity: 1; }
.end-doc { margin: 0 auto; }   /* 外框宽于正文时（txtMaxW 调宽的项目）正文仍居中 */
.end-doc .para { font-size: var(--txt-size, 19px); }
body.quiet .end-doc .para,
body.quiet .end-wrap .work-title { color: rgba(255, 255, 255, .85); transition: color 3s ease; }

/* -------- 片尾电影式退场（body.ending）：动鼠标后字幕渐退、黑幕渐消，余味收场 -------- */
@media (prefers-reduced-motion: no-preference) {
  body.ending { transition: background-color 3.5s ease; }
  body.ending::after { transition: opacity 3.5s ease; }
  body.ending:not(.quiet) .end-wrap.show { opacity: 0; transition: opacity 2.5s ease .3s; }
}