/* 作品集页的页头：左边大标题「作品集」和一句说明，右边三个项目的目录（序号、名称、地区），点了跳到对应项目。
   项目本身由 sections/cases 和 sections/product 两个区块画，三个项目用同一种开头（序号 · 类别 · 地区 · 状态 / 标题 / 说明 / 要点 / 详情链接）。 */
.wk-head { padding: calc(var(--nav-h) + clamp(72px, 9vw, 136px)) 0 0; }
.wk-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.wk-head-main { grid-column: 1 / span 6; }
.wk-title { margin: 0; font-size: clamp(56px, 8.4vw, 120px); line-height: 1; font-weight: var(--fw-head); letter-spacing: -0.04em; }
.wk-lead { margin-top: 28px; }

.wk-index { grid-column: 8 / span 5; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wk-index a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 18px 0;
  border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.4; color: var(--ink-1);
  transition: color .3s var(--ease), padding .5s var(--ease); }
.wk-index li:last-child a { border-bottom: 0; }
.wk-index b { font-family: var(--mono); font-weight: 400; font-size: 14px; color: var(--amber); }
.wk-index em { font-style: normal; font-size: 14px; color: var(--ink-3); transition: color .3s var(--ease); }
.wk-index em::after { content: "↓"; display: inline-block; margin-left: 10px; color: var(--ink-4); transition: transform .5s var(--ease), color .3s var(--ease); }
.wk-index a:hover { padding-left: 8px; }
.wk-index a:hover em, .wk-index a:hover em::after { color: var(--amber); }
.wk-index a:hover em::after { transform: translateY(3px); }

/* 页头下面紧接第一个项目：两块区块的上边距在这里收成和项目之间一样的节奏 */
.wk-page { --wk-gap: clamp(96px, 11vw, 168px); }
.wk-page #cases { padding-top: clamp(80px, 9vw, 136px); padding-bottom: clamp(88px, 9vw, 128px); }
/* 暖色面板的上边本身就是分隔，里面不用再空一整段 section-y */
.wk-page #product { padding-top: clamp(80px, 8vw, 112px); }

/* 三个项目共用的开头：序号 · 类别 · 地区 · 状态 / 标题 / 说明 / 三条要点 / 详情链接。
   颜色用 --wk-* 变量，深色区块用默认，暖色面板（#product）换成自己的墨色和杏色。 */
.wk-item { scroll-margin-top: calc(var(--nav-h) + 48px); }
.wk-body { max-width: 480px; }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; line-height: 1; letter-spacing: .06em; color: var(--wk-ink-3, var(--ink-3)); }
.wk-meta b { margin-right: 6px; font-family: var(--mono); font-weight: 400; letter-spacing: .04em; color: var(--wk-accent, var(--amber)); }
.wk-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.wk-live { color: var(--wk-ink-1, var(--ink-1)); }
.wk-live::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 2px; border-radius: 50%;
  background: var(--wk-accent, var(--amber)); box-shadow: 0 0 0 3px var(--wk-accent-soft, var(--amber-soft)); }
.wk-name { margin-top: 22px; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.15; letter-spacing: -0.025em; color: var(--wk-ink-1, var(--ink-1)); }
.wk-summary { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.65; color: var(--wk-ink-2, var(--ink-2)); }
.wk-keys { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--wk-ink-1, var(--ink-1)); }
.wk-keys li { display: flex; align-items: center; gap: 14px; }
.wk-keys li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--wk-accent, var(--amber)); opacity: .8; }
.wk-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; font-size: 16px; font-weight: 500; color: var(--wk-ink-1, var(--ink-1)); }
.wk-more i { font-style: normal; color: var(--wk-ink-3, var(--ink-3)); transition: transform .6s var(--ease), color .6s var(--ease); }
a.wk-more:hover i { transform: translateX(6px); color: var(--wk-accent, var(--amber)); }

@media (max-width: 1100px) and (min-width: 861px) {
  .wk-name { font-size: 30px; }
  .wk-summary { font-size: 17px; }
}

@media (max-width: 860px) {
  .wk-head { padding-top: calc(var(--nav-h) + 56px); }
  .wk-head-grid { display: block; padding-bottom: 8px; border-bottom: 0; }
  .wk-title { font-size: 64px; }
  .wk-lead { margin-top: 18px; }
  .wk-index { margin-top: 40px; }
  .wk-index li:last-child a { border-bottom: 1px solid var(--line); }
  .wk-index a { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 16px 0; font-size: 16px; }
  .wk-page { --wk-gap: 88px; }
  .wk-page #cases { padding-top: 64px; padding-bottom: 88px; }
  .wk-page #product { padding-top: 72px; }
  .wk-body { max-width: none; }
  .wk-name { margin-top: 16px; font-size: 28px; }
  .wk-summary { margin-top: 16px; font-size: 17px; }
  .wk-keys { margin-top: 22px; }
  .wk-more { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-more i { transition: none; }
  a.wk-more:hover i { transform: none; }
  .wk-index a, .wk-index em, .wk-index em::after { transition: none; }
  .wk-index a:hover { padding-left: 0; }
}