/* 项目内页：长文档骨架。

   版式的唯一规则：整页只有一根内容栏。页面里每个块都包在 .page 里，所以只在
   这里收一次宽度，所有块的左边缘和宽度就必然一致。之前是给 split / fig /
   emo / deck / seq 各自写了 52rem 或 60rem，左边缘对不齐、疏密也不一样——
   那是"有些地方紧凑有些又没变"的根源。不要再给单个块加 max-width。 */
.is-case .page { max-width: 60rem; }

/* 项目内页：长文档骨架。
 * 一页 = 四幕，靠色带切章；每幕内部用「吸顶栏 + 推进列」承载顺序。
 * 招牌段落两处：钉住的横向情绪带、钉住的六屏接管。 */

/* ---- 顶部阅读进度：一条发丝，宽度跟着进度走 --------------------------
   光点那套挪去小段落内部用（见 .track 连线），整页进度还是细条更安静。 */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 95;
  height: 2px;
  pointer-events: none;
}
.progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---- 抬头 ------------------------------------------------------------ */
.case-head { padding-block: calc(var(--nav-h) + var(--space-3xl)) var(--space-3xl); }
.case-head__title { margin-top: var(--space-lg); }
.case-head__title .line-clip { display: block; }
.case-head__dim { color: var(--ink-soft); }
.case-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule) solid var(--hair);
}
.case-head__meta .work__tags { margin-top: 0; }
.case-head__intro {
  margin-top: var(--space-2xl);
  margin-left: auto;
  max-width: var(--measure);
}

/* ---- 幕：统一的纵向节奏 ---------------------------------------------- */
.act { padding-block: var(--space-3xl); }
.act > * + * { margin-top: var(--space-3xl); }
.act:first-of-type { padding-top: var(--space-4xl); }

/* ---- 幕一 · 钉住的舞台：整屏镜片 + 两句依次浮现 ---------------------- */
.stage { height: 300vh; }                 /* 三屏的滚动量换一屏的停留 */
.stage__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  display: grid;
  align-items: end;
}
.stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  will-change: transform;
}
.stage__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: var(--space-3xl);
  display: grid;
  grid-template-areas: 'label' 'line';
  gap: var(--space-md);
}
/* 两句话占同一格，交接时不互相顶位 */
.stage__copy > .t-label { grid-area: label; }
.stage__line { grid-area: line; max-width: 46rem; align-self: end; }
.js .stage__line { opacity: 0; }
/* 舞台底部往下渐隐到墨色，接住下一段 */
.stage__pin::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(14, 15, 17, 0) 0%, var(--ink) 88%);
  pointer-events: none;
}

/* ---- 吸顶章名 + 推进列（mandandan 把章节文案钉在 top:171px） --------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.split__aside {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-xl));
  display: grid;
  gap: var(--space-xs);
}
.split__lead { color: var(--ink-soft); margin-top: var(--space-sm); }
.band--ink .split__lead { color: var(--on-ink-soft); }
.split__main { display: grid; gap: var(--space-lg); }

/* 三个问题：编号悬挂在左外侧 */
.steps { display: grid; gap: var(--space-3xl); }
.step { position: relative; display: grid; gap: var(--space-md); }
.step__no {
  position: absolute;
  left: -3.25rem;
  top: 0.35em;
  color: var(--ink-soft);
}
.step__claim { max-width: 36rem; }
.step__fig { margin-top: var(--space-sm); }
.step__fig img { max-width: 34rem; }
.step__fig--narrow img { max-width: 15rem; }

/* 初步结论：四条发丝行，最后一条给强调色 */
.conclusion__head { margin-bottom: var(--space-lg); }
.conclusion__row { grid-template-columns: 2rem minmax(0, 1fr); }
.conclusion__row .t-body, .conclusion__row .t-lead { max-width: 44rem; }
.conclusion__row.is-final { border-bottom-width: 0; }

/* ---- 图版 ------------------------------------------------------------
   圆角改成 0：augen 实测全站图片 border-radius 都是 0px，mandandan 只有
   手机屏那一层有 44px、外框仍是 0。原来每张图都挂 10px，凑在一起就是一叠
   "卡片"，反而把版面切碎了。 */
.fig { display: grid; gap: var(--space-sm); }
.fig img { border-radius: 0; }
.fig--wide img { width: 100%; }
/* augen 的内页正文都收在页面中部，两侧大量留白。满幅图看着臃肿，
   所以图版统一走这条窄栏，只有首屏那种主视觉才铺满。 */
.fig--mid img { width: 100%; }
/* 图片不做 hover 缩放：impeccable 判为 image-hover-transform——
   图不可点，放大只是无意义的骚动，而且会把已经对齐的画幅顶出容器。 */

/* ---- 四种情绪：2×2 平铺，一共就四张，不值得做钉住横滚 --------------- */
.emo { display: grid; gap: var(--space-2xl); }
.emo__head { display: grid; gap: var(--space-xs); max-width: 34rem; }
.emo__lead { max-width: none; }
.emo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
}
.emo__item { display: grid; gap: var(--space-sm); }
.emo__item img { width: 100%; height: auto; border-radius: 0; }
.emo__name { color: var(--ink); letter-spacing: 0; }
.emo__bars { display: grid; gap: 5px; max-width: 7.5rem; }
.emo__bars i { display: block; height: 9px; border-radius: 2px; }

/* ---- 图文对开 -------------------------------------------------------- */
.grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.grid2__copy { display: grid; gap: var(--space-md); align-content: center; }

/* ---- 招牌二 · 六屏接管同一个位置 ------------------------------------- */
.deck { height: 420vh; }
.deck__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
}
.deck__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  row-gap: var(--space-md);
  width: 100%;
}
.deck__index { display: grid; gap: var(--space-sm); }
.deck__idx {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  opacity: 0.32;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.deck__idx.is-on { opacity: 1; transform: translate3d(0.35rem, 0, 0); }
.deck__idx.is-on .t-cap { color: var(--ink); }
.deck__idx.is-on .t-num { color: var(--accent); }

/* 六张屏叠在同一格里，后一张从下方裁进来接管。
   宽度卡在 46rem：原图只有 1004px，铺满 3fr 那一栏（约 900px）在二倍屏上就发虚。 */
.deck__stack { position: relative; aspect-ratio: 1004 / 628; width: 100%; max-width: 46rem; }
.deck__card {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: clip;
  background: var(--paper-3);
  will-change: transform, clip-path;
}
.deck__card img { width: 100%; height: 100%; object-fit: cover; }
.deck__caption { grid-column: 2; }

/* ---- Pet Tracking 四步：不同画幅并排，底线对齐 ----------------------- */
.seq {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}
.seq__item {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-xl);
  border-top: var(--rule) solid var(--hair);
}
.seq__no { position: absolute; top: var(--space-sm); left: 0; }
.seq__item img {
  width: 100%;
  border-radius: 0;
  background: var(--paper-3);
}
.seq__caption { margin-top: var(--space-md); }

/* ---- 收尾 ------------------------------------------------------------
   这句话是补白不是标题，字号跟正文一档；色带跟着收一档，不然一整屏蓝里
   只飘着两行小字。左对齐（和全站一样），但要在色带里上下居中——
   居中指的是与上下两条边等距，不是把字挪到画面中间。

   写成 .act.coda 是必须的：上面那条 `.act:first-of-type { padding-top: 4xl }`
   选择器权重更高，而在多数内页里结语正好是 main 里第一个 <section>，
   于是上内边距 6.5rem、下 4.5rem，字就被压低了两厘米——那就是"偏下"的来源。 */
.act.coda { padding-block: var(--space-3xl); }
.coda__line {
  max-width: none;
  white-space: nowrap;
}

.next { padding-block: var(--space-3xl); }
.next__link { display: grid; gap: var(--space-md); }
.next__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule) solid var(--hair);
  transition: border-color var(--dur-2) var(--ease-out);
}
.next__title { flex: 1; transition: color var(--dur-2) var(--ease-out); }
.next__arrow {
  align-self: center;
  transition: transform var(--dur-3) var(--ease-out);
}
.next__link:hover .next__row { border-color: var(--accent); }
.next__link:hover .next__title { color: var(--accent); }
.next__link:hover .next__arrow { transform: translate3d(0.6rem, 0, 0); }
.next__desc { color: var(--ink-soft); }

/* ---- 降级：关掉动效偏好时，钉住段落全部摊平 -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .stage__line { opacity: 1; }
  .progress > span { transform: scaleX(0); }
  .deck__idx { opacity: 1; }
}

/* ---- 移动端：所有钉住段落改成纵向直读 -------------------------------- */
@media (max-width: 767px) {
  .act { padding-block: var(--space-3xl); }
  .act > * + * { margin-top: var(--space-2xl); }
  .case-head { padding-block: var(--space-3xl) var(--space-2xl); }
  .case-head__intro { margin-top: var(--space-xl); }
  /* 窄屏放不下整句，让它折行（居中保留） */
  .coda__line { white-space: normal; }

  .split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .split__aside { position: static; }
  .steps { gap: var(--space-2xl); }
  .step__no { position: static; }
  .step__fig--narrow { max-width: none; }

  .stage { height: auto; }
  .stage__pin { position: static; height: auto; min-height: 78vh; }
  .stage__copy { padding-block: var(--space-4xl) var(--space-2xl); }


  .grid2 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }

  .deck { height: auto; }
  .deck__pin { position: static; height: auto; }
  .deck__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .deck__index { display: none; }
  .deck__stack { position: static; aspect-ratio: auto; display: grid; gap: var(--space-md); }
  .deck__card { position: static; }
  .deck__caption { grid-column: 1; }

  .seq { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .emo__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- CES 媒体奖项：十个牌子规格已在切图时统一，这里只排队 -------------- */
.awards { margin-top: var(--space-xl); }
.awards__head { margin-bottom: var(--space-md); }
.awards__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.awards__row img {
  height: 2.5rem;
  width: auto;
  opacity: 0.86;
  transition: opacity var(--dur-2) var(--ease-out);
}
/* 只提亮，不位移：图不可点，hover 位移是 impeccable 点名的 image-hover-transform */
.awards__row img:hover { opacity: 1; }

/* ---- 设计策略 · 推演线 -------------------------------------------------
   重做过，不再照原稿那张平铺的板：三个高亮环节各自成一列（感知→Human、
   思考→Agent、反馈→Machine），列与列之间用一条轨道串起来，四个未点亮的
   环节（记忆/规划/解决/行动）缩成轨道上的幽灵标签。轨道上跑光点。 */
.stack { position: relative; display: grid; gap: var(--space-xl); }

.stack__stages { display: none; }              /* 环节改成随列走，不再单独一行 */

.stack__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-2xl);
}
.stack__rail::before {
  content: '';
  position: absolute;
  top: var(--space-lg);
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--hair);
}
.stack__node { position: relative; display: grid; gap: var(--space-xs); justify-items: start; }
.stack__node::before {
  content: '';
  position: absolute;
  top: calc(var(--space-lg) - var(--space-2xl) - 3px);
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.stack__stage {
  font-size: var(--text-h2);
  letter-spacing: var(--track-h2);
  line-height: 1.1;
}
.stack__role {
  align-self: start;
  padding: 0.25em 0.7em;
  border: var(--rule) solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: var(--text-xs);
  letter-spacing: 0;
}
.stack__job { color: var(--ink-soft); font-size: var(--text-sm); }
.stack__ghosts {
  display: flex;
  gap: var(--space-lg);
  color: var(--ink-soft);
  opacity: 0.45;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
}
.stack__spark {
  position: absolute;
  top: var(--space-lg);
  left: 8%;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  /* 原来这里挂了两层零偏移的蓝色光晕，impeccable 判为 dark-glow：
     零偏移彩色阴影是生成式 UI 最典型的"酷"默认。改成实心点，靠位移交代它在动。 */
  opacity: 0;
  will-change: transform, opacity;
}

.stack__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
.stack__orb { margin: 0; width: clamp(8rem, 14vw, 12rem); }
.stack__orb img { width: 100%; height: auto; }
.stack__note { color: var(--ink-soft); font-size: var(--text-sm); max-width: 22rem; }

/* ---- 设计策略 · 体验地图 ----------------------------------------------
   原稿是一张表。这里保留五行的行头与全部单元格文字，改成发丝分隔的行——
   窄屏时单元格自己换行，不会像表格那样横向溢出。 */
.emap { display: grid; gap: 0; }
.emap__head { margin-bottom: var(--space-md); }
.emap__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-md);
  border-top: var(--rule) solid var(--hair);
}
.emap__row--last { border-bottom: var(--rule) solid var(--hair); }
.emap__key { color: var(--accent); letter-spacing: 0; }
.emap__cells { display: grid; gap: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.emap__row:not(.emap__row--last) .emap__cells li {
  justify-self: start;
  padding: 0.28em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--paper-3);
  white-space: nowrap;
}
/* Feeling 四格带上情绪色点，和上面"四种情绪"那段对得上 */
.emap__cells--feel li { display: inline-flex; align-items: center; gap: 0.45em; }
.emap__cells--feel li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--ink));
}
.emap__cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emap__cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.emap__cells--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.emap__cells--notes li { display: grid; gap: 0.35rem; }
.emap__cells--notes span {
  position: relative;
  padding-left: 0.8em;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.emap__cells--notes span::before {
  content: '·';
  position: absolute;
  left: 0;
}

@media (max-width: 767px) {
  .stack__stages { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-xs); }
  .stack__chips, .stack__chips--low { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emap__row { grid-template-columns: minmax(0, 1fr); }
  .emap__cells--4, .emap__cells--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emap__cells--3 { grid-template-columns: minmax(0, 1fr); }
}