/* ============================================================
   制片台 / The Production Desk — v3.3
   亮色系 · 纸墨底 + 影像黑图槽 + 琥珀点缀
   四个识别部件：胶片齿孔边轨 / 取景框角标(hover) / 场记板色块 / 手写批注(克制2处)
   ============================================================ */

:root {
  color-scheme: light;

  --paper:    #F3F0E9;
  --paper-2:  #EDE9E0;
  --sheet:    #FAF8F3;
  --ink:      #17150F;
  --ink-2:    #565045;
  --ink-3:    #8B8377;
  --rule:     #DED7C9;
  --rule-2:   #C3BAA9;

  --stage:    #14120E;

  --mark:     #A5711A;
  --mark-ink: #8A5D0E;
  --mark-soft: #EFE3CE;

  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
          -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow", var(--sans);

  --t-fast: 140ms;
  --t-norm: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  --edge: clamp(20px, 5vw, 64px);
  --maxw: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a, button { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
video { display: block; background: var(--stage); }

/* 纸纹：极细横纹，远看只是"纸不平" */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(23, 21, 15, 0.014) 0px, rgba(23, 21, 15, 0.014) 1px,
    transparent 1px, transparent 4px);
}

/* ============================================================
   胶片齿孔边轨：贴视口最左缘，随滚动固定不动——唯一的常驻识别符。
   出血图片（人像/预览拼贴）天然盖住它；纸背景段落露出来，
   在"纸"与"影像"之间自己切换。
   ============================================================ */
.sprocket-rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 0;
  width: 30px; pointer-events: none;
  background:
    linear-gradient(to right, transparent 26px, var(--rule-2) 26px, var(--rule-2) 27px, transparent 27px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22'%3E%3Ccircle cx='10' cy='11' r='3' fill='none' stroke='%23C3BAA9' stroke-width='1'/%3E%3C/svg%3E") repeat-y;
  background-position: 0 0, 0 6px;
  opacity: 0.6;
}
@media (max-width: 720px) { .sprocket-rail { display: none; } }

/* ============================================================
   取景框角标：图槽默认无框，hover/focus 才浮现——相机自动对焦锁定的
   动作感，不是静态装饰。共享一份规则，作用于站内所有真实图片容器。
   ============================================================ */
.card-thumb, .gal-stage,
.scene-row-media-item a, .scene-row-media-item,
.preview-filmstrip-item, .lightbox-media--image, .lightbox-media--video {
  position: relative; overflow: hidden; background: var(--stage);
}
.card-thumb::before, .card-thumb::after,
.scene-row-media-item::before, .scene-row-media-item::after,
.preview-filmstrip-item::before, .preview-filmstrip-item::after {
  content: ""; position: absolute; z-index: 3; width: 16px; height: 16px;
  pointer-events: none;
  opacity: 0; transform: scale(0.82); transform-origin: center;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.card-thumb::before,
.scene-row-media-item::before, .preview-filmstrip-item::before {
  top: 8px; left: 8px;
  border-top: 1.6px solid var(--mark); border-left: 1.6px solid var(--mark);
}
.card-thumb::after,
.scene-row-media-item::after, .preview-filmstrip-item::after {
  bottom: 8px; right: 8px;
  border-bottom: 1.6px solid var(--mark); border-right: 1.6px solid var(--mark);
}
.v2-card:hover .card-thumb::before, .v2-card:hover .card-thumb::after,
.v2-card:focus-visible .card-thumb::before, .v2-card:focus-visible .card-thumb::after,
.scene-row-media-item:hover::before, .scene-row-media-item:hover::after,
.scene-row-media-item a:hover::before, .scene-row-media-item a:hover::after,
.preview-filmstrip-item:hover::before, .preview-filmstrip-item:hover::after {
  opacity: 1; transform: scale(1);
}
/* 人像不再用取景框角标——2026-08-25 换成"工牌"呈现方式，见下方 .profile-badge，
   取景框语汇让给可点击的作品图槽用 */

/* ============================================================
   场记板色块：编号旁一个对角双色小方块，附着在数字元素后面，
   不需要额外 HTML —— ::after 直接挂在既有的编号 class 上。
   ============================================================ */
.pipeline-num, .chapter-num, .profile-icon, .section-label {
  position: relative;
}
.pipeline-num::after, .chapter-num::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 5px;
  vertical-align: middle;
  background: linear-gradient(135deg, var(--ink) 50%, transparent 50.5%);
}

/* 手写批注：全站 3 处使用（index.html 首页两个板块入口的 mark-circle-a/b + Contact的
   mark-swipe）。两个圈是同一支"笔"画的，粗细/颜色一样，只是画法不同——圈01用一笔画成的
   椭圆（原mark-circle不变），圈02用两笔重描一圈的潦草感（多一层::before错位叠加），
   "类似但不一样"，不是同一个圈复制两份。 */
.mark-circle-a, .mark-circle-b { position: relative; display: inline-block; }
.mark-circle-a::after, .mark-circle-b::after {
  content: ""; position: absolute; z-index: -1;
  left: -0.22em; right: -0.24em; top: -0.16em; bottom: -0.2em;
  border: 1.6px solid var(--mark);
  border-radius: 52% 48% 47% 53% / 57% 44% 56% 43%;
  transform: rotate(-2.4deg);
}
.mark-circle-b::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.28em; right: -0.18em; top: -0.22em; bottom: -0.14em;
  border: 1.4px solid var(--mark);
  border-radius: 46% 54% 55% 45% / 48% 53% 47% 52%;
  transform: rotate(3.2deg);
  opacity: 0.7;
}
.mark-swipe { position: relative; display: inline-block; }
.mark-swipe svg { position: absolute; left: -2%; bottom: -0.3em; width: 104%; height: 0.5em; overflow: visible; color: var(--mark); }

/* ============================================================
   通用排版
   ============================================================ */

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 600; }
p { margin: 0 0 1em; }

.section-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mark-ink); margin-bottom: 14px; display: block;
}

.panel { position: relative; z-index: 1; }

/* ============================================================
   顶部导航：纸上的刻度尺（原 liquid-glass 胶囊 → 标尺）
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: stretch; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--edge);
  height: 68px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--rule-2); }

.header-spacer { display: none; }

.pipeline-nav {
  display: flex; align-items: flex-end; flex: 1; margin-left: 28px;
  overflow-x: auto;
}
.pipeline-rail, .chapter-rail, .pipeline-fill, .chapter-fill { display: none; } /* 用刻度线+高亮替代进度条 */

.pipeline-stop {
  position: relative;
  display: flex; align-items: baseline; gap: 6px; flex: none;
  padding: 22px clamp(12px, 2vw, 26px) 12px;
}
.pipeline-stop::before {
  content: ""; position: absolute; top: 8px; left: clamp(12px, 2vw, 26px);
  width: 1px; height: 8px; background: var(--rule-2);
  transition: height var(--t-fast) var(--ease), background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.pipeline-dot { display: none; }
.pipeline-num {
  font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}
.pipeline-label { font-size: 13.5px; color: var(--ink-2); transition: color var(--t-fast) var(--ease); }
.pipeline-stop:hover::before { height: 12px; background: var(--ink-2); }
.pipeline-stop:hover .pipeline-label { color: var(--ink); }
.pipeline-stop.is-current::before, .pipeline-stop[data-current]::before { width: 2px; height: 14px; background: var(--mark); }
.pipeline-stop.is-current .pipeline-num, .pipeline-stop[data-current] .pipeline-num { color: var(--mark-ink); }
.pipeline-stop.is-current .pipeline-label, .pipeline-stop[data-current] .pipeline-label { color: var(--ink); font-weight: 600; }

/* ============================================================
   按钮
   ============================================================ */

.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  font-size: 13.5px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.button:hover { background: var(--ink); color: var(--paper); }
.liquid-glass-strong.button, a.liquid-glass-strong.button {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.liquid-glass-strong.button:hover { background: var(--mark-ink); border-color: var(--mark-ink); }
.button-plain {
  border: 0; padding: 0 0 3px; border-bottom: 1px solid var(--rule-2); color: var(--ink-2);
}
.button-plain:hover { color: var(--mark-ink); border-color: var(--mark); background: none; }
.liquid-glass, .liquid-glass-strong { background: transparent; backdrop-filter: none; box-shadow: none; }

/* ============================================================
   Home（index.html）：Profile 首屏
   ============================================================ */

.profile-section { padding: clamp(40px, 5vw, 64px) var(--edge) clamp(56px, 7vw, 96px); max-width: var(--maxw); margin: 0 auto; }
.profile-backdrop { display: none; }

.profile-split-content {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: start;
}

/* 工牌：仿 v3.1 homepage-ledger.html 的曲别针工牌构图（照片+姓名+条码+编号，
   微微倾斜、hover时摆正抬起）——原型是贴在台账纸角落的小配件（128px宽），这里放大到
   跟原"相纸装裱"版本同样占左栏38%宽度当主视觉，倾斜角度相应收窄（-1.6deg，不是原来的
   2.4deg），hover也改成摆正+上浮，不用原来128px小图那种scale(1.3)（大图那样放会碰到右栏）。*/
.profile-badge {
  position: relative;
  background: var(--sheet); border: 1px solid var(--ink);
  padding: 14px 14px 16px;
  box-shadow: 0 14px 30px -18px rgba(23, 21, 15, 0.4);
  transform: rotate(-1.6deg);
  transition: transform var(--t-norm) var(--ease), box-shadow var(--t-norm) var(--ease);
}
.profile-badge:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 20px 34px -16px rgba(23, 21, 15, 0.45);
}
/* .profile-badge也带fade-up滚动入场动画，但通用规则`.panel.is-inview .fade-up{transform:none}`
   （两个class）比这里的`.profile-badge{transform:rotate(...)}`（一个class）specificity更高，
   入场动画一播完就把工牌的倾斜/hover摆正效果整个吃掉，变成永远端正——这两条用同样叠加
   .fade-up类名的写法把specificity提回来，把工牌自己的倾斜/hover效果找回来。 */
.panel.is-inview .fade-up.profile-badge { transform: rotate(-1.6deg); }
.panel.is-inview .fade-up.profile-badge:hover { transform: rotate(0deg) translateY(-4px); }
.badge-clip {
  position: absolute; top: -16px; left: 50%; z-index: 2;
  width: 26px; height: 34px; margin-left: -13px;
  border: 3px solid var(--rule-2); border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.badge-photo { overflow: hidden; background: var(--stage); }
.badge-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center 36%;
}
.badge-plate { padding-top: 12px; }
.badge-plate-row { display: flex; justify-content: space-between; align-items: baseline; }
.badge-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.badge-year { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.badge-role { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.profile-heading { margin-bottom: 22px; }
.profile-heading h2 {
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.24; letter-spacing: -0.008em; font-weight: 600; color: var(--ink);
}

.profile-split-right { padding-top: 0; }
.profile-split-cards { display: flex; flex-direction: column; gap: 16px; }

/* 索引卡：白卡纸 + 边框 + 阴影，和照片装裱同一质感 */
.border-glow-card {
  position: relative;
  background: var(--sheet); border: 1px solid var(--rule);
  padding: 18px 20px;
  box-shadow: 0 8px 18px -14px rgba(23, 21, 15, 0.3);
}
.border-glow-card .edge-light { display: none; }
.border-glow-inner { padding: 0; }

.profile-card-top {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--rule);
  margin-bottom: 4px;
}
.profile-icon {
  font-family: var(--mono); font-size: 11px; color: var(--mark-ink);
  border: 1px solid var(--mark); padding: 1px 7px;
}
.profile-card-title { font-size: 15px; font-weight: 600; margin: 0; }

.exp-timeline { display: flex; flex-direction: column; }
.exp-item {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.exp-item:last-child { border-bottom: 0; }
.exp-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.exp-role { font-size: 14px; color: var(--ink); line-height: 1.5; }
.exp-outcome {
  font-family: var(--mono); font-size: 12px; color: var(--mark-ink); white-space: nowrap; text-align: right;
}

/* ============================================================
   Home：项目管理 / 作品 出血段落
   ============================================================ */

.section-with-collage { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 118px) var(--edge) !important; border-top: 1px solid var(--rule); }

/* 拼贴滚动带：原暗底光效 → 接触印相带（灰度低对比，两端渐隐到纸色） */
.section-collage { position: absolute; inset: 0; z-index: 0; opacity: 1; pointer-events: none; }
.section-collage-row { display: flex; gap: 5px; width: max-content; position: absolute; left: 0; animation: sheet-slide 90s linear infinite; }
.section-collage-row img { width: 148px; height: 84px; object-fit: cover; filter: grayscale(1) contrast(0.8); opacity: 0.14; }
.section-collage-row:first-child { top: 6%; }
.section-collage-row--b { top: auto; bottom: 6%; animation-direction: reverse; }
.section-with-collage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--paper);
  -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.94) 22%, rgba(0,0,0,0.94) 78%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.94) 22%, rgba(0,0,0,0.94) 78%, transparent 100%);
}
@keyframes sheet-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .section-collage-row { animation: none; } }

.section-content { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.scenario-heading {
  font-size: clamp(23px, 3vw, 38px); line-height: 1.28; text-align: center; max-width: 22em; margin: 0 auto;
}
.hero-copy { color: var(--ink-2); }

/* 印章：旋转数字徽标，纯文字场景计数——不用截图也能一眼看到量级 */
.stamp-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
.stamp {
  background: var(--sheet); border: 1px solid var(--ink); padding: 10px 22px;
  transform: rotate(-1.4deg); text-align: center;
}
.stamp:nth-child(2) { transform: rotate(1.2deg); }
.stamp-n { display: block; font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--mark-ink); }
.stamp-t { font-size: 12px; color: var(--ink-2); }

/* 样片条：小尺寸预告图，首页只做索引不做详情 */
.preview-filmstrip { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(24px, 2.6vw, 40px); }
.preview-filmstrip-item { flex: 0 0 clamp(128px, 15vw, 196px); background: var(--stage); }
.preview-filmstrip-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--t-norm) var(--ease); }
.preview-filmstrip-item:hover img { transform: scale(1.03); }
.preview-filmstrip-item span {
  display: block; margin-top: 9px; text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-2);
}

.scenario-cta { margin-top: clamp(26px, 3vw, 40px); }
.preview-textlink {
  font-size: 14.5px; border-bottom: 1px solid var(--rule-2); padding-bottom: 3px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.preview-textlink:hover { color: var(--mark-ink); border-color: var(--mark); }

.works-stats-grid > div { text-align: center; }
.works-stats-grid > div > div:first-child {
  font-family: var(--display) !important; font-weight: 500 !important; font-size: clamp(22px, 2.6vw, 32px) !important;
  color: var(--ink) !important; letter-spacing: -0.01em;
}
.works-stats-grid > div > div:last-child { color: var(--ink-2) !important; font-size: 12.5px !important; margin-top: 4px; }

/* ============================================================
   Contact 段落（index.html 收尾）
   ============================================================ */

.contact { padding: clamp(70px, 9vw, 128px) var(--edge); border-top: 1px solid var(--rule); }
.contact-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.contact-inner h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 46px); font-weight: 500; letter-spacing: -0.01em; }
.contact-inner p { color: var(--ink-2); }
.contact-links .button { border-radius: 0; }

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 22px var(--edge) 44px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3);
  position: relative; z-index: 1;
}
.site-footer a { border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--mark-ink); border-color: var(--mark); }

/* ============================================================
   内页通用外壳（works / ai-assist / resume / contact）
   ============================================================ */

.page-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); position: relative; z-index: 1; }

.page-hero { padding: clamp(40px, 5vw, 64px) 0 clamp(30px, 3.4vw, 46px); }
.page-hero h1 { font-size: clamp(27px, 3.4vw, 42px); line-height: 1.24; max-width: 20em; }
.page-hero > p { color: var(--ink-2); max-width: 36em; }
.hero-stats { display: flex; gap: 20px; margin-top: 18px; font-size: 13.5px; color: var(--ink-2); }
.hero-stats strong { font-family: var(--display); font-weight: 500; color: var(--mark-ink); font-size: 17px; margin-right: 4px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   章节条 → 场记表：从吸顶横条改成左侧悬挂侧栏。
   .page-layout 变成两列 grid，chapter-bar 作为第一个 grid item
   （需要 HTML 把 chapter-bar 移进 page-layout 内，class/data-* 不变，
   setupChapterBar()/setupSceneTicks() 完全不用改）。
   ============================================================ */

.page-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding-bottom: clamp(60px, 7vw, 110px);
}

.chapter-bar {
  position: sticky; top: 86px;
  border: 1px solid var(--rule); background: var(--paper-2);
  padding: 0;
}
.chapter-bar-row { display: block; }
.chapter-bar-caption {
  display: block; padding: 11px 14px; border-bottom: 1px solid var(--rule); background: var(--paper);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.chapter-track { position: relative; }
/* 每个章节自己一个 .chapter-item（章节入口 chapter-stop + 它自己的子菜单 scene-tick-group），
   章节之间的分隔线放在 .chapter-item 上，不再放在 .chapter-stop 上——子菜单跟着自己的章节走，
   不是"两个章节列完之后另起一段公共子菜单"。 */
.chapter-item { border-bottom: 1px solid var(--rule); }
.chapter-item:last-child { border-bottom: 0; }
.chapter-stop {
  position: relative;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 14px;
  transition: background var(--t-fast) var(--ease);
}
.chapter-stop::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: transparent;
  transition: background var(--t-fast) var(--ease);
}
.chapter-dot { display: none; }
.chapter-num { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink-3); }
.chapter-name { font-size: 13.5px; color: var(--ink-2); transition: color var(--t-fast) var(--ease); }
.chapter-stop:hover { background: var(--paper); }
.chapter-stop:hover .chapter-name { color: var(--ink); }
.chapter-stop.is-current { background: var(--paper); }
.chapter-stop.is-current::before { background: var(--mark); }
.chapter-stop.is-current .chapter-num { color: var(--mark-ink); }
.chapter-stop.is-current .chapter-name { color: var(--ink); font-weight: 600; }

/* 场景细分刻度（ai-assist 专属）：嵌在自己所属的 .chapter-item 里，紧跟在 chapter-stop
   下方——只有当前所在章节的这一组会展开显示，滚到另一章节时这里收起、那里展开。
   padding-left 比 .chapter-stop 多留一截，做出"子菜单"的缩进层级。 */
.scene-tick-group { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.scene-tick-group[hidden] { display: none; } /* [hidden]和上面的flex规则specificity相同，作者样式在后会赢，
  不加这条hidden组照样按flex显示——两组场景刻度一直堆在一起，这就是"02·傲驰排序不对"的真实成因 */
.scene-tick {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 14px 9px 28px; border-bottom: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.scene-tick:last-child { border-bottom: 0; }
.scene-tick-num { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); min-width: 14px; }
.scene-tick:hover { background: var(--paper); color: var(--ink); }
.scene-tick.is-current { background: var(--paper); color: var(--ink); font-weight: 600; }
.scene-tick.is-current .scene-tick-num { color: var(--mark-ink); }
.scene-tick--minor { color: var(--ink-3); font-size: 12px; }

/* 顶部横条形态废弃，不再需要 on-light 反色（新导航实底不透明，恒定可读） */
.site-header.on-light, [data-chapter-bar].on-light { background: var(--paper); }

/* ============================================================
   作品网格（works.html）：v2-card
   ============================================================ */

.gallery-group { padding-top: clamp(50px, 6vw, 90px); }
.gallery-group:first-child { padding-top: 0; }
.gallery-group h2 { font-size: clamp(21px, 2.5vw, 30px); }
.gallery-intro { color: var(--ink-2); }

.filter-bar { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 24px); margin: 16px 0 4px; }
.filter-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  padding: 0 0 4px; color: var(--ink-3); border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.is-active { color: var(--ink); border-color: var(--mark); }

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(24px, 2.6vw, 38px) clamp(16px, 1.8vw, 26px);
  margin-top: 20px;
}
.v2-card { display: block; }
.v2-card.is-hidden { display: none; }
.card-thumb { aspect-ratio: 16/9; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-norm) var(--ease); }
.card-thumb--embed { aspect-ratio: 4/3; }
.thumb-badge {
  position: absolute; z-index: 2; right: 8px; top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 2px 7px; background: rgba(250, 248, 243, 0.94); color: var(--ink);
}
.v2-card:hover .card-thumb img { transform: scale(1.025); }
.card-body { padding: 11px 2px 0; }
.card-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 5px; }
.card-title { font-size: 13.5px; color: var(--ink); line-height: 1.45; transition: color var(--t-fast) var(--ease); }
.card-meta { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.v2-card:hover .card-title { color: var(--mark-ink); }
.card-link-out { font-size: 12px; color: var(--ink-3); }

.note { font-size: 12.5px; color: var(--ink-3); margin-top: 30px; }

/* ============================================================
   AI Assist：scene-row / compare-card / chain
   ============================================================ */

.scene-subgroup-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin: 34px 0 10px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.scene-subgroup-label--minor { opacity: 0.8; }

.scene-row-list { display: flex; flex-direction: column; }
.scene-row, .scene-row-block { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.scene-row { transition: background var(--t-fast) var(--ease); }
.scene-row:hover { background: var(--paper-2); }
.scene-row-block--minor { opacity: 0.92; }
.scene-row-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.scene-row-num { font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--mark-ink); }
.scene-row-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.scene-row-chain { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
/* 问题被划掉 / 结果打勾——一眼看出这条链条解决了什么 */
.chain-problem { display: inline-block; position: relative; color: var(--ink-3); }
.chain-problem::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 2px;
  background: var(--mark); transform: rotate(-1deg); opacity: 0.85;
}
.chain-arrow { color: var(--mark); margin: 0 6px; }
.chain-action { color: var(--ink-2); }
.chain-result { color: var(--mark-ink); }
.chain-result::before { content: "✓ "; }

.scene-row-media { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.scene-row-media-item { flex: 0 0 auto; }
.scene-row-media-item img { display: block; max-height: 260px; width: auto; }

/* 对比卡：旧结构/新结构，重上亮色 */
.compare-card { background: var(--paper-2); border: 1px solid var(--rule); padding: 14px; margin-top: 12px; }
.compare-old { background: rgba(165, 113, 26, 0.05); border: 1px solid var(--rule); border-radius: 0; padding: 10px; }
.compare-old-label { color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.08em; }
.compare-new { background: rgba(165, 113, 26, 0.09); border: 1px solid var(--rule-2); border-radius: 0; padding: 10px; }
.compare-new-label { color: var(--mark-ink); font-family: var(--mono); letter-spacing: 0.08em; }
.compare-level { color: var(--ink-3); }
.compare-tag { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 0; color: var(--ink-2); }
.compare-tag--new { background: var(--paper); border: 1px solid var(--mark); border-radius: 0; color: var(--ink); }
.compare-tag-sub { color: var(--mark-ink); opacity: 0.85; }
.compare-arrow { color: var(--ink-3); }

.case-outro { padding: clamp(50px, 6vw, 84px) 0 clamp(60px, 7vw, 96px); border-top: 1px solid var(--rule); margin-top: 30px; text-align: center; }
.case-outro > p { font-size: 15px; color: var(--ink-2); max-width: 30em; margin: 0 auto 20px; }
.outro-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ============================================================
   Resume
   ============================================================ */

.resume-download { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.resume-download .card-meta { font-size: 12.5px; color: var(--ink-3); }

.resume-entry { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.resume-entry:last-child { border-bottom: 0; }
.resume-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-bottom: 8px; }
.resume-role { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.resume-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.resume-note { font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.resume-note b { color: var(--ink); font-weight: 600; }
.resume-bullets { margin: 0; padding-left: 1.2em; }
.resume-bullets li { font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.7; }
.resume-bullets li b { color: var(--ink); font-weight: 600; }

.resume-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.resume-table th, .resume-table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.resume-table th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; width: 120px; white-space: nowrap; }
.resume-table td { font-size: 13px; color: var(--ink-2); line-height: 1.7; }

/* ============================================================
   Contact
   ============================================================ */

.contact-list { display: flex; flex-direction: column; margin-top: 26px; max-width: 480px; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.contact-row-label { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); }
.contact-icon { width: 18px; height: 18px; color: var(--mark-ink); flex: none; }

/* ============================================================
   灯箱 Lightbox
   ============================================================ */

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 5vh 20px;
  background: rgba(20, 18, 14, 0.7);
  opacity: 0; visibility: hidden; transition: opacity 220ms ease;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-panel {
  position: relative; width: clamp(320px, 76vw, 1160px); max-height: 92vh; overflow-y: auto;
  background: var(--paper-2); border: 1px solid var(--rule);
  transform: translateY(10px); transition: transform 220ms ease;
}
.lightbox-overlay.is-open .lightbox-panel { transform: translateY(0); }
.lightbox-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; background: var(--ink); color: var(--paper); border: 0;
  font-size: 1.2rem; line-height: 1;
}
.lightbox-close:hover { background: var(--mark-ink); }
.lightbox-media { background: var(--stage); min-height: 200px; display: flex; align-items: center; justify-content: center; }
.lightbox-media--image img { max-width: 100%; max-height: 74vh; width: auto; height: auto; object-fit: contain; }
.lightbox-media--video video, .lightbox-media--video iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.lightbox-media--webpage iframe { width: 100%; height: 70vh; border: 0; }
.lightbox-media--placeholder { padding: 60px; color: var(--ink-3); font-size: 14px; }
.lightbox-body { padding: 18px 22px; }
.lightbox-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.lightbox-meta { color: var(--ink-3); font-size: 12.5px; margin-bottom: 12px; }

/* 早期经历画廊灯箱（works.html 独立结构，非上面共享灯箱） */
.gal-overlay {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center; padding: 5vh 20px;
  background: rgba(20, 18, 14, 0.7);
  opacity: 0; visibility: hidden; transition: opacity 220ms ease;
}
.gal-overlay.is-open { opacity: 1; visibility: visible; }
.gal-panel {
  position: relative; width: clamp(320px, 74vw, 1200px); max-height: 92vh; overflow-y: auto;
  background: var(--paper-2); border: 1px solid var(--rule);
  transform: translateY(12px); transition: transform 220ms ease;
  display: flex; flex-direction: column;
}
.gal-overlay.is-open .gal-panel { transform: translateY(0); }
.gal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px; background: var(--ink); color: var(--paper); border: 0;
  font-size: 1.3rem; line-height: 1;
}
.gal-close:hover { background: var(--mark-ink); }
.gal-stage { height: min(52vh, 560px); flex: none; display: flex; align-items: center; justify-content: center; }
.gal-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gal-nav {
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.75); font-size: 2rem;
  transition: background 150ms ease, color 150ms ease;
}
.gal-nav:hover { background: rgba(0, 0, 0, 0.2); color: #fff; }
.gal-nav--prev { left: 0; } .gal-nav--next { right: 0; }
.gal-counter {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  background: rgba(20, 18, 14, 0.6); border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 9px; color: rgba(255, 255, 255, 0.85);
}
.gal-body { padding: 16px 22px; }
.gal-title { font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin-bottom: 4px; }
.gal-caption { color: var(--ink-3); font-size: 0.86rem; }
.gal-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 22px 18px; }
.gal-strip img {
  width: 62px; height: 44px; object-fit: cover; cursor: pointer;
  opacity: 0.55; border: 1.5px solid transparent; transition: opacity 150ms ease, border-color 150ms ease; flex: none;
}
.gal-strip img:hover { opacity: 0.85; }
.gal-strip img.is-active { opacity: 1; border-color: var(--mark); }

/* ============================================================
   动画：淡入
   ============================================================ */

/* script.js 用两套独立的 IntersectionObserver 加 is-inview：一套观察 .panel
   （index.html 的大段落），一套观察 .reveal（内页的 page-hero/gallery-group）。
   两个都要接，漏一个 fade-up 就永远停在 opacity:0。 */
.fade-up { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.is-inview .fade-up, .panel.is-inview .fade-up { opacity: 1; transform: none; }
.fade-up:nth-child(1) { transition-delay: 0ms; }
.fade-up:nth-child(2) { transition-delay: 60ms; }
.fade-up:nth-child(3) { transition-delay: 120ms; }
.fade-up:nth-child(4) { transition-delay: 180ms; }

@keyframes nav-flash {
  0% { background-color: var(--mark-soft); }
  100% { background-color: transparent; }
}
.nav-flash-target { animation: nav-flash 1100ms ease-out; }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1080px) {
  .profile-split-content { grid-template-columns: 1fr; }
  .profile-badge { max-width: 340px; transform: rotate(-1.2deg); }
  /* 同上，跟.fade-up的specificity打平，窄屏倾斜角度改小一些的规则才能生效 */
  .panel.is-inview .fade-up.profile-badge { transform: rotate(-1.2deg); }
}

@media (max-width: 860px) {
  .page-layout { grid-template-columns: 1fr; }
  .chapter-bar { position: static; }
  .site-header { height: auto; flex-wrap: wrap; padding-top: 8px; }
  .pipeline-nav { width: 100%; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); }
}

@media (max-width: 640px) {
  .exp-item, .fact { grid-template-columns: 1fr; }
  .resume-head { flex-direction: column; }
}