/* ============================================================
   pages.css · WORK 作品总览页 + 通用项目详情页
   ------------------------------------------------------------
   WORK 段为 4 列等宽索引网格版：依据 work.mp4 与用户首屏截图校准节奏，
   只改 WORK 专属规则；项目详情页段与公共样式不受影响。
   项目详情页段为专项返工版：依据项目详情2.mp4 逐帧分析 +
   ordinaryfolk.co/project/creation 在 1440/390 下的真实 DOM 几何。
   层级只靠字号差 + 留白 + 栅格对齐；不用卡片、阴影、色块容器。
   ============================================================ */

/* ============ WORK 页：4 列等宽索引网格 ============
   参考 ordinaryfolk.co/work 的 .cms-work{width:24%} + w-col-3 四列结构，
   以及用户提供的首屏截图：导航 0–9%、标题约 32%、第一排两行文字约 88%、
   图片上沿约 95%（首屏能看到项目文字与「部分画面」）。
   eyebrow / 统计 / 返回区按确认移除；不做跨列 wide 卡。 */
.work-hero {
  /* nav 实测高 98px；标题区吃到 88vh，之后紧接作品文字块。
     用 vh 而非固定 px，窗口高度变化时首屏露出量保持稳定。 */
  --nav-h: 98px;
  min-height: calc(88vh - var(--nav-h));
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(110px, 22vh, 320px);
}
.work-hero__title {
  font-size: var(--fs-h1); font-weight: 500;
  letter-spacing: -.045em; line-height: 1.02;
}
.work-hero__line { display: block; }
.work-hero__line--indent { padding-left: var(--indent); }

/* 12 列栅格里每卡占 3 列；新增项目自动换行，不写死「只有 4 个」。
   列间沿用全站 --gap（1.5vw = 21.6px），行距取参考站 3vw 上限 43.2px。 */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(30px, 3vw, 43.2px);
  align-items: start;
  /* 与页脚的距离由公共 .footer 的 --section-gap 承担，不重复叠加 */
  padding-bottom: 0;
}
.work-item { grid-column: span 3; min-width: 0; }

/* 文字块固定 50px（参考站 .card-lockup），两行 15px 左对齐，与图片左缘同线 */
.work-item__lockup {
  height: 50px; box-sizing: border-box;
  padding-top: 10px; margin-bottom: 18px;
}
.work-item__cat {
  font-size: 15px; line-height: 15px; color: var(--c-mid);
  margin: 0 0 10px;
}
.work-item__title {
  font-size: 15px; line-height: 15px; font-weight: 500;
  letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.work-grid .frame { border-color: transparent; }
.work-grid .frame:hover { border-color: var(--c-line-strong); }
.work-grid .frame__poster { transition: opacity .4s var(--ease); }

/* ============================================================
   项目详情页 · 专项返工版
   节奏：舞台 750 → 数据 155 → 自述 → 署名 → 时间轴 → 媒体墙 → 交棒
   两个「大对象」是首屏的圆与页尾的圆；中间靠字号差与留白分节。
   ============================================================ */
html:has(.stage) { scroll-behavior: smooth; }
body:has(.stage) .footer { margin-top: 0; }
/* 参考站首屏：从视口顶部到约 94vh 是完整一片灰，顶部导航也在这片灰里；
   底部只留一条空白浅色带，形成「下面是另一个空间」的分界。 */
body:has(.stage) .nav { background: var(--c-stage); }

/* ---------- 1. 首屏舞台：灰底 + 一个圆 + 一个标题 + 两个锚点 ---------- */
.stage {
  /* 圆与标题整体下移，使它们在整片灰色空间里居中（上/下留白均衡） */
  --stage-drop: 24px;
  position: relative;
  background: var(--c-stage);
  height: clamp(750px, 80vh, 1200px);
  padding-bottom: 150px;
  overflow: hidden;
}
.stage__inner {
  position: relative; height: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); align-items: center;
}
.stage__title {
  grid-column: 1 / 7; position: relative; z-index: 2;
  /* 与圆同步下移，保持标题与圆心同高 */
  transform: translateY(var(--stage-drop));
  /* 长英文标题在空格处换行，宽度止于圆的左边缘，不与圆重叠 */
  max-width: 30vw;
  font-size: 5vw; font-weight: 500;
  letter-spacing: -.045em; line-height: .95;
  overflow-wrap: anywhere;
}
.stage__reel {
  position: absolute; left: 50%; top: calc(50% + var(--stage-drop));
  /* 参考站 [data-hover]：hover 放大 1.1，.5s 过渡；
     translate 独立属性承载轻微的鼠标跟随位移，两者互不覆盖 */
  transform: translate(-50%, -50%) scale(1);
  /* 中文标题比参考站的单词长得多，放大锚点略靠左，避免左缘压到标题 */
  transform-origin: 30% 50%;
  transition: transform .5s var(--ease), translate .3s ease-out;
  width: 30vw; height: 30vw;
  border: 0; padding: 0; border-radius: 50%; overflow: hidden;
  /* 圆形容器不再铺深色底：容器 background 会在圆边的抗锯齿像素上
     透出一圈 1px 灰线（实测 #9a9a99），非常刺眼。
     改为透明，并让媒体自身带上同样的圆角，边缘只剩画面与灰底的自然过渡。 */
  background: transparent; cursor: pointer;
}
.stage__reel:hover,
.stage__reel:focus-visible { transform: translate(-50%, -50%) scale(1.1); }
.stage__still, .stage__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;          /* 媒体自带圆角，避免容器底色在圆边溢出成线 */
}
/* 默认静帧；hover / 键盘聚焦时成片淡入，点击由全屏播放器接管 */
.stage__video { opacity: 0; transition: opacity var(--dur-s) var(--ease); }
.stage__reel.is-playing .stage__video { opacity: 1; }
/* 播放提示：只有一枚深色三角，几何居中于圆内。
   无遮罩、无外侧圆底、无 PLAY FILM 字样。
   参考站 .icon-play-project 实测 30px / opacity 0→1 / .5s，这里用纯 CSS 三角复刻。
   极淡的浅色外发光仅保证深色成片上也能辨认，不引入任何底色或容器。 */
.stage__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--c-ink);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-s) var(--ease);
}
.stage__reel:hover .stage__play,
.stage__reel:focus-visible .stage__play { opacity: 1; }
.stage__play-ico {
  width: 0; height: 0;
  border-left: 18px solid currentColor;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  filter: drop-shadow(0 0 2px rgba(248, 248, 248, .9));
}
.stage__anchors {
  position: absolute; left: 0; right: 0; bottom: -104px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
/* 参考站为「圆形下箭头在上、文字在下」的竖排，不用横排图标条 */
.stage__anchor {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  font-size: 18px; line-height: 1.3;
}
.stage__anchor:nth-child(1) { grid-column: 7 / 10; }
.stage__anchor:nth-child(2) { grid-column: 10 / 13; }
.stage__anchor-ico {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--c-line-strong); border-radius: 50%; font-size: 13px;
  transition: background var(--dur-xs), color var(--dur-xs);
}
.stage__anchor:hover .stage__anchor-ico { background: var(--c-ink); color: var(--c-paper); }

/* ---------- 2. 三项数据：第 4 组列位刻意留空 ---------- */
/* 顶部留白大于首屏底部浅色带高度，保证那条带是干净的空白，不提前露出文字 */
.facts { padding-top: clamp(88px, 11vh, 120px); }
.facts__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.fact { grid-column: span 3; min-width: 0; }
.fact__label { font-size: 18px; color: var(--c-mid); }
.fact__value {
  margin-top: 10px; font-size: 48px; font-weight: 500;
  line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere;
}
/* 长类别值（如 Motion Design / Graphic Design）降一档，避免 48px 折成三行 */
.fact__value.is-long { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }

/* ---------- 3. 大字号自述：57px / 1.1，首行缩进 25% ---------- */
.statement { padding-top: 150px; }
.statement__lead, .statement__body {
  font-size: 57px; font-weight: 400; line-height: 1.1; letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.statement__lead { text-indent: 25%; }
.statement__body { margin-top: .55em; }

/* ---------- 4. Credits：四等分列，标题占第一组 ---------- */
.credits { padding-block: 150px 100px; }
.credits__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 32px;
}
.credits__title {
  grid-column: span 3; font-size: 57px; font-weight: 500;
  letter-spacing: -.03em; line-height: 1.1;
}
.credit { grid-column: span 3; min-width: 0; }
.credit__role { font-size: 18px; color: var(--c-mid); }
.credit__value { margin-top: 12px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- 5. 制作信息时间轴（.oftl 语义：圆点 + 标记 + 文本，可拖动） ----------
   本轮按用户要求不再渲染该区段（信息与 Process 重复）。
   以下样式与 initTimeline() 保留可回溯，不删除任何既有代码。          */
.timeline { padding-bottom: 100px; }
.timeline__kicker { font-size: 18px; color: var(--c-mid); }
.oftl { position: relative; margin-top: 12px; }
.oftl__track {
  display: flex; gap: var(--gap); overflow-x: auto;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  cursor: grab; scrollbar-width: none;
  /* 右侧留出与渐隐等宽的余量，滚到底时最后一个节点的文字能完整露出 */
  padding: 44px 8vw 14px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 5vw), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 5vw), transparent 100%);
}
.oftl__track::-webkit-scrollbar { display: none; }
.oftl__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.oftl__i {
  position: relative; flex: 0 0 34vw; min-width: 0;
  scroll-snap-align: start; padding-top: 26px;   /* 顶部 1px 轨道线已删除 */
}
.oftl__marker {
  font-size: 48px; font-weight: 500; line-height: 1;
  letter-spacing: -.04em; color: var(--c-mid);
}
/* 原小圆点压在轨道线上；轨道线删除后一并隐藏，避免留下悬空点 */
.oftl__dot { display: none; }
.oftl__label { margin-top: 22px; font-size: 18px; color: var(--c-mid); }
.oftl__value { margin-top: 8px; font-size: 24px; line-height: 1.35; }
.oftl__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.oftl__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(22, 22, 22, .2); border-radius: 50%;
  font-size: 17px; transition: background var(--dur-xs), color var(--dur-xs);
}
.oftl__btn:hover { background: var(--c-ink); color: var(--c-paper); }

/* ---------- 6. 连续媒体墙：行高 = 素材比例，缝隙 22px，无卡片 ---------- */
.wall { padding-bottom: 100px; }
.wall__title {
  font-size: 57px; font-weight: 500; letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: 63px;
}
.wall__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); align-items: start;
  margin-bottom: var(--gap);
}
.wall__row:last-child { margin-bottom: 0; }
.wall__item { grid-column: var(--col, 1 / span 6); min-width: 0; margin: 0; }
.wall__frame {
  position: relative; width: 100%;
  aspect-ratio: var(--ratio, 1 / 1); overflow: hidden;
}
.wall__frame.is-circle { border-radius: 50%; }
.wall__frame img, .wall__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;          /* 圆形遮罩格同样由媒体自带圆角 */
}
.wall__frame video { background: var(--c-ink); }
.wall__cap {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  margin-top: 12px; font-size: var(--fs-label); color: var(--c-mid);
}
.wall__cap-btn {
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- 7. Next Project：满幅浅带 + 一个圆 + 一行字，无返回入口 ---------- */
.next { background: var(--c-next); padding-block: 100px; }
.next__link { display: block; color: inherit; }
.next__inner { position: relative; min-height: 28vw; }
.next__circle {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: block; width: 28vw; height: 28vw;
  border-radius: 50%; overflow: hidden; background: transparent;
  transition: transform var(--dur-s) var(--ease);
}
.next__still, .next__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
}
/* 与首屏圆同一语言：默认静帧，hover 才播放成片，避免浅色带上出现「空圆」 */
.next__video { opacity: 0; transition: opacity var(--dur-s) var(--ease); }
.next__link.is-playing .next__video { opacity: 1; }
.next__link:hover .next__circle { transform: translateX(-50%) scale(1.03); }
/* 参考站这行字落在约 75% 列位、右侧留约 16% 空白，不贴视口边缘 */
.next__label {
  position: absolute; right: 16%; top: 50%; transform: translateY(-50%);
  font-size: 18px; white-space: nowrap;
}

/* ============ 响应式 ============ */
@media (max-width: 1199px) {
  .work-hero__line--indent { padding-left: 14vw; }
  .stage__title { font-size: 6vw; }
  .statement__lead, .statement__body { font-size: clamp(34px, 4.6vw, 52px); }
  .credits__title, .wall__title { font-size: clamp(34px, 4.6vw, 52px); }
}

@media (max-width: 767px) {
  /* WORK 页：窄屏只重置桌面用的 88vh 标题区，避免留白被拉长；
     本轮不新增移动端设计或验收（按用户要求无视移动端需求）。 */
  .work-hero { min-height: 0; padding-block: 72px 60px; }
  .work-hero__line--indent { padding-left: 0; }
  .work-hero__meta { justify-content: flex-start; gap: 16px; margin-top: 40px; }
  .work-grid { row-gap: 52px; }
  .work-item { grid-column: 1 / 13; margin-top: 0; }
  .work-item__title { font-size: 19px; }

  /* 详情页 */
  .stage { --stage-drop: 0px; height: 600px; padding-bottom: 96px; }
  .stage__inner { align-items: flex-start; }
  .stage__title { grid-column: 1 / 13; max-width: none; font-size: 12vw; margin-top: 44px; }
  .stage__reel { width: 77vw; height: 77vw; top: 64%; }
  .stage__anchors { bottom: -70px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__anchor:nth-child(1), .stage__anchor:nth-child(2) {
    grid-column: auto; flex-direction: row; align-items: center;
    font-size: 13px; gap: 8px;
  }
  .stage__anchor-ico { width: 24px; height: 24px; font-size: 11px; }

  .facts { padding-top: 40px; }
  .facts__grid { row-gap: 28px; }
  .fact { grid-column: span 6; }
  .fact__label { font-size: 16px; }
  .fact__value { font-size: 30px; }

  .statement { padding-top: 80px; }
  .statement__lead, .statement__body { font-size: 30px; line-height: 1.25; }
  .statement__lead { text-indent: 0; }

  .credits { padding-block: 80px 64px; }
  .credits__title, .credit { grid-column: 1 / 13; }
  .credits__title { font-size: 40px; }
  .credits__grid { row-gap: 36px; }
  .credit__role, .credit__value { font-size: 16px; }

  .timeline { padding-bottom: 72px; }
  .timeline__kicker { font-size: 16px; }
  .oftl__i { flex-basis: 78vw; }
  .oftl__marker { font-size: 36px; }
  .oftl__label { font-size: 16px; }
  .oftl__value { font-size: 20px; }

  .wall { padding-bottom: 72px; }
  .wall__title { font-size: 34px; margin-bottom: 36px; }
  .wall__row { row-gap: 12px; margin-bottom: 12px; }
  .wall__row .wall__item { grid-column: 1 / 13; }

  .next { padding-block: 72px; }
  .next__inner { min-height: 58vw; }
  .next__circle { width: 40vw; height: 40vw; }
  .next__label {
    top: auto; bottom: 0; right: auto; left: 50%;
    transform: translateX(-50%); font-size: 16px;
  }
}

/* 触屏没有真实 hover：圆不放大，播放三角常驻显示，保证可发现性 */
@media (hover: none) {
  .stage__reel:hover { transform: translate(-50%, -50%) scale(1); }
  .stage__play { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .work-grid .frame__poster { transition: none; }
  html:has(.stage) { scroll-behavior: auto; }
  .stage__play, .next__circle, .stage__reel { transition: none; }
  .stage__reel:hover,
  .stage__reel:focus-visible { transform: translate(-50%, -50%) scale(1); }
}