/* ============================================================
   星抖奇玩 — cases.css
   互动案例 / 案例详情 / 互动洞察
   方向：纪实摄影 + 编辑式排版 + 可持续内容增长
   ============================================================ */

.page-cases,
.page-case,
.page-insights,
.page-article { background: var(--ink); }

.page-cases .footer,
.page-case .footer,
.page-insights .footer,
.page-article .footer { margin-top: 0; }

.case-footer { background: var(--ink); }

.case-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.case-eyebrow::before { content:""; width: 24px; height: 1px; background: currentColor; }

/* ------------------------------ 案例总览 Hero */
.case-hero {
  position: relative;
  min-height: min(860px, 100svh);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0b0b0b;
}
.case-hero__image,
.case-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-hero__image { object-fit: cover; object-position: center 48%; filter: saturate(.84) contrast(1.03) brightness(.7); }
.case-hero__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 35%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.32) 100%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 45%);
}
.case-hero__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(160px, 22vh, 230px);
  padding-bottom: clamp(64px, 9vh, 100px);
}
.case-hero h1 {
  margin-top: clamp(24px, 3vw, 42px);
  max-width: 11.5ch;
  font-size: clamp(2.65rem, 6.8vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 850;
  color: #fff;
  text-wrap: balance;
}
.case-hero__content > p:not(.case-hero__note) {
  margin-top: clamp(24px, 3.1vw, 44px);
  max-width: 52ch;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.78;
  color: rgba(255,255,255,.78);
}
.case-hero__note { margin-top: 18px; font-size: .78rem; color: rgba(255,255,255,.48); }
.case-scroll { display: inline-flex; gap: .75em; align-items: center; margin-top: 40px; font-size: .84rem; color: rgba(255,255,255,.78); }
.case-scroll span { color: var(--accent); font-size: 1.25rem; transition: transform .3s ease; }
.case-scroll:hover span { transform: translateY(5px); }

/* ------------------------------ 通用 section */
.case-section { position: relative; padding: clamp(80px, 9vw, 138px) 0; }
.case-section--light { background: var(--paper); color: var(--ink); }
.case-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(38px, 5.4vw, 76px);
}
.case-section__head h2 {
  margin-top: 18px;
  max-width: 12ch;
  font-size: clamp(2rem, 4.6vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 830;
  color: var(--ink);
}
.case-section__head > p { max-width: 34ch; font-size: .98rem; line-height: 1.8; color: rgba(11,11,11,.58); }
.case-section__head--dark h2 { color: #fff; }
.case-section__head--dark > p { color: rgba(255,255,255,.58); }

/* ------------------------------ 精选案例 */
/* 第二屏（2026-09-28 深色改版）：整屏高度压到原来约一半。
   ⚠️ 光收 padding 没用 —— 拆开量过：1440px 下高 1483px = padding 185 + head 225 + grid 1073。
   大头在卡片（620+24+430），所以留白 / 标题 / 卡片三处要一起收。 */
#featuredCases { padding-top: clamp(38px, 3.8vw, 54px); padding-bottom: clamp(42px, 4.2vw, 58px); }
#featuredCases .case-section__head { margin-bottom: clamp(16px, 1.7vw, 24px); }
#featuredCases .case-section__head h2 { margin-top: 10px; font-size: clamp(1.62rem, 3.1vw, 3.05rem); }
#featuredCases .case-section__head .case-eyebrow { font-size: .66rem; }
/* 卡片高度减半：620 -> 272，430 -> 243。两行高度刻意不是等比例砍：
   ⚠️ 3/4 号卡的原高只有 430，文案块固定要 161px，砍到 215 时文字占了 75%、照片只剩一条边 ——
   所以从第一行匀 28px 给第二行（两行合计仍 = 531px，屏高不变），让四张卡的照片露出比例接近 */
#featuredCases .feature-case--1, #featuredCases .feature-case--2 { min-height: 272px; }
#featuredCases .feature-case--3, #featuredCases .feature-case--4 { min-height: 243px; }
#featuredCases .featured-grid { gap: clamp(10px, 1.1vw, 16px); }
/* 卡片变矮后内边距 / 字号必须跟着收，否则 215px 的卡装不下「编号+标题+描述+标签」四层 */
#featuredCases .feature-case__body { padding: clamp(14px, 1.5vw, 22px); }
#featuredCases .feature-case h3 { margin-top: 4px; font-size: clamp(1.02rem, 1.35vw, 1.34rem); }
#featuredCases .feature-case p { margin-top: 4px; font-size: .82rem; }
#featuredCases .feature-case ul { margin-top: 9px; }
#featuredCases .feature-case li { padding: .3em .62em; font-size: .62rem; }
#featuredCases .case-arrow { right: 18px; bottom: 18px; width: 34px; height: 34px; font-size: .95rem; }

/* 第二屏整块背景照（2026-09-28 深色版）：沿用 .case-hero 的「图 + shade」做法，而不是 CSS background —— 能保留 alt、遮罩也好单独调
   ⚠️ 上一版是「浅色薄纱 + 深色字」，被否掉了：照片里有内容的部位（两个人 + 手机）正好落在卡片盖住的中段，
   露出来的只剩头顶和虚化背景 → 怎么调都像一张"洗坏的白图"。深色版把这个矛盾反过来了：
   照片只当氛围底（压暗、降饱和），纯白标题压在最上层对比最强，而且与前面的 .case-hero、后面的 .moments 连成一片暗调。
   已去掉 blur：改成暗调之后不再需要靠柔化"藏"照片，留一点点纹理反而更有质感。
   ⚠️ 但两屏都是深色 + 都是展会照，交界处会"照片接照片"糊成一片 → 顶部加一条极细白线断句，
   并把本屏压得比 .case-hero 更暗，让整页形成「亮 → 暗 → 更暗」三层，而不是一片平黑。 */
.case-section--photo { position: relative; isolation: isolate; overflow: hidden; background: #0b0b0b; border-top: 1px solid rgba(255,255,255,.14); }
.case-section--photo .case-section__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  z-index: -2; filter: brightness(.56) saturate(.74) contrast(1.08); transform: scale(1.02);
}
.case-section--photo .case-section__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 100% at 10% 6%, rgba(11,11,11,.66) 0%, rgba(11,11,11,.36) 46%, rgba(11,11,11,.1) 76%),
    linear-gradient(180deg, rgba(11,11,11,.78) 0%, rgba(11,11,11,.64) 40%, rgba(11,11,11,.92) 100%);
}
.case-section--photo > .wrap { position: relative; z-index: 1; }
/* 深底上文字全部转浅 —— eyebrow 走 data-theme=dark 的 --fg-faint 即可，这里只处理被硬编码成黑色 ink 的几处 */
.case-section--photo .case-section__head h2 { color: #fff; }
.case-section--photo .case-section__aside > p:not(.case-hint) { color: rgba(255,255,255,.78); }
/* 「点击查看」提示在深底上要反过来：强调色圆底 + 黑箭头（浅底那版是黑底 + 强调色箭头） */
.case-section--photo .case-hint { color: rgba(255,255,255,.88); }
.case-section--photo .case-hint__icon { background: var(--accent); color: var(--ink); }
.case-section--photo .case-hint__icon::after { border-color: rgba(255,255,255,.55); }
/* 卡片在深底上：出场时整体压暗一档，别比背景还抢；细描边让卡片边界利落 */
#featuredCases .feature-case { outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
#featuredCases .feature-case img { filter: saturate(.84) contrast(1.05) brightness(.9); }
#featuredCases .feature-case:hover img { filter: saturate(1) contrast(1.03) brightness(1); }

/* 标题右侧那一列：副文案下面挂「点击查看」动画提示，把右侧空白用起来 */
.case-section__head > .case-section__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.case-section__aside > p:not(.case-hint) { max-width: 34ch; font-size: .98rem; line-height: 1.8; color: rgba(11,11,11,.58); }
.case-section__head--dark .case-section__aside > p:not(.case-hint) { color: rgba(255,255,255,.58); }

/* 动态提示图标：深色圆底 + 强调色箭头（浅底上必须用 ink，accent 在纸上不可读）
   ::after 是一圈向外扩散的涟漪，反复提示「这里可以点」 */
.case-hint { display: inline-flex; align-items: center; gap: .7em; font-size: .86rem; line-height: 1.5; color: var(--ink); }
.case-hint__icon { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--accent); transition: transform .3s var(--ease-out); }
/* 图标本身是链接（跳到第一个案例），悬停放大做触觉提示；键盘聚焦用 base.css 的全局 :focus-visible */
.case-hint__icon:hover { transform: scale(1.09); }
.case-hint__icon svg { width: 19px; height: 19px; animation: caseHintArrow 1.7s var(--ease-out) infinite; }
.case-hint__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); animation: caseHintRing 1.7s ease-out infinite; }
@keyframes caseHintArrow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.5px, -2.5px); } }
@keyframes caseHintRing { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .case-hint__icon svg,
  .case-hint__icon::after { animation: none; }
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.feature-case { position: relative; min-height: 360px; overflow: hidden; border-radius: 5px; background: #151515; }
.feature-case--1 { grid-column: span 7; min-height: 620px; }
.feature-case--2 { grid-column: span 5; min-height: 620px; }
.feature-case--3,
.feature-case--4 { grid-column: span 6; min-height: 430px; }
.feature-case__link { position: absolute; inset: 0; display: block; }
.feature-case img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02); transition: transform .9s var(--ease-out), filter .6s ease; }
.feature-case__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.86) 100%); }
.feature-case__body { position: absolute; inset: auto 0 0 0; padding: clamp(22px, 2.7vw, 38px); color: #fff; }
.feature-case__no { font-family: var(--font-mono); color: var(--accent); font-size: .78rem; letter-spacing: .16em; }
.feature-case h3 { margin-top: 9px; font-size: clamp(1.45rem, 2.2vw, 2.25rem); letter-spacing: -.03em; }
.feature-case p { margin-top: 6px; max-width: 30ch; color: rgba(255,255,255,.75); line-height: 1.55; }
.feature-case ul { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.feature-case li { padding: .38em .78em; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: .68rem; color: rgba(255,255,255,.72); }
.case-arrow { position: absolute; right: 28px; bottom: 28px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; color: var(--accent); font-size: 1.15rem; transition: transform .35s ease, background .35s ease, color .35s ease; }
.feature-case:hover img { transform: scale(1.035); filter: saturate(1); }
.feature-case:hover .case-arrow { transform: rotate(45deg); background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ------------------------------ 现场瞬间 */
.moments { padding: clamp(78px, 8.5vw, 126px) 0; background: #0b0b0b; }
.moments-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px, 1.5vw, 22px); }
.moment img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.78) contrast(1.05); }
.moment figcaption { padding-top: 18px; }
.moment time { font-family: var(--font-mono); font-size: 1.05rem; color: var(--accent); font-weight: 700; }
.moment p { margin-top: 8px; font-size: .86rem; line-height: 1.65; color: rgba(255,255,255,.63); }

/* ------------------------------ 更多场景 */
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px, 1.6vw, 22px); }
.more-case { position: relative; border-top: 1px solid rgba(11,11,11,.16); padding-top: 14px; }
.more-case a { display: block; position: relative; }
.more-case__media { overflow: hidden; background: #ddd; }
.more-case img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .7s var(--ease-out); }
.more-case__copy { padding: 18px 54px 0 0; }
.more-case__copy > span { font-family: var(--font-mono); font-size: .72rem; color: rgba(11,11,11,.48); }
.more-case h3 { margin-top: 6px; font-size: 1.18rem; color: var(--ink); }
.more-case p { margin-top: 5px; font-size: .84rem; line-height: 1.55; color: rgba(11,11,11,.56); }
.more-case .case-arrow { right: 2px; bottom: -2px; width: 34px; height: 34px; color: var(--ink); border-color: rgba(11,11,11,.3); font-size: .9rem; }
.more-case:hover img { transform: scale(1.035); }
.more-case:hover .case-arrow { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); }

/* ------------------------------ 互动方式 */
.methods { padding: clamp(80px, 9vw, 138px) 0; background: #0b0b0b; }
.methods-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); }
.method-card { background: #0f0f0f; min-width: 0; }
.method-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(.12) saturate(.7) brightness(.82); }
.method-card > div { padding: 22px 20px 26px; }
.method-card h3 { font-size: 1rem; color: #fff; }
.method-card p { margin-top: 8px; font-size: .78rem; line-height: 1.65; color: rgba(255,255,255,.54); }

/* ------------------------------ 洞察预览 */
.insights-preview { padding-top: clamp(76px, 8vw, 120px); }
.insight-card { max-width: 1000px; border-top: 1px solid rgba(11,11,11,.18); border-bottom: 1px solid rgba(11,11,11,.18); }
.insight-card a { display: grid; grid-template-columns: 160px 1fr 1.1fr 90px; gap: 28px; align-items: start; padding: 28px 0; color: var(--ink); }
.insight-card__cat { font-family: var(--font-mono); font-size: .72rem; color: rgba(11,11,11,.54); }
.insight-card h3 { font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.5; }
.insight-card p { font-size: .84rem; line-height: 1.72; color: rgba(11,11,11,.58); }
.insight-card a > span:last-child { font-size: .8rem; text-align: right; }
.insights-preview__more { margin-top: 26px; font-size: .86rem; }
.insights-preview__more a { border-bottom: 1px solid currentColor; }

/* ------------------------------ CTA */
.next-project { position: relative; min-height: 580px; display: grid; align-items: center; overflow: hidden; background: #080808; }
.next-project > img,
.next-project__shade { position: absolute; inset:0; width:100%; height:100%; }
.next-project > img { object-fit: cover; filter: saturate(.7) brightness(.48); }
.next-project__shade { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.46) 60%, rgba(0,0,0,.22)); }
.next-project__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: end; padding-block: 100px; }
.next-project h2 { margin-top: 20px; max-width: 12ch; font-size: clamp(2.3rem, 5vw, 5.2rem); line-height: 1.02; letter-spacing: -.05em; }
.next-project p { margin-top: 24px; max-width: 52ch; color: rgba(255,255,255,.68); }
.next-project p strong { color: #fff; font-weight: 650; }
.next-project__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   案例详情页
   ============================================================ */
.detail-hero { padding-top: clamp(132px, 16vh, 190px); background: var(--ink); }
.detail-hero__top { padding-bottom: clamp(48px, 5vw, 72px); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .65em; margin-bottom: clamp(42px, 5vw, 70px); font-size: .76rem; color: rgba(255,255,255,.45); }
.breadcrumb a:hover { color: var(--accent); }
.detail-hero h1 { margin-top: 26px; max-width: 14ch; font-size: clamp(2.55rem, 6vw, 6.2rem); line-height: .98; letter-spacing: -.055em; }
.detail-hero__top > p { margin-top: 28px; max-width: 60ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.82; color: rgba(255,255,255,.65); }
.detail-hero ul { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.detail-hero li { padding: .36em .8em; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .72rem; color: rgba(255,255,255,.62); }
.detail-hero__media { margin: 0; background: #111; }
.detail-hero__media img { width: 100%; max-height: min(74vh, 900px); object-fit: cover; }
.detail-hero__media figcaption { padding: 10px var(--pad) 12px; font-size: .68rem; color: rgba(255,255,255,.35); text-align: right; }

.detail-story { padding: clamp(72px, 9vw, 132px) 0; background: var(--paper); }
.story-block { display: grid; grid-template-columns: 110px minmax(0, 780px); gap: clamp(24px, 5vw, 76px); padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid rgba(11,11,11,.15); }
.story-block:first-child { border-top: 0; padding-top: 0; }
.story-block__index { font-family: var(--font-mono); color: rgba(11,11,11,.36); font-size: .8rem; letter-spacing: .15em; }
.story-block h2 { font-size: clamp(1.65rem, 3vw, 3rem); line-height: 1.12; letter-spacing: -.035em; color: var(--ink); }
.story-block p { margin-top: 22px; font-size: clamp(.98rem, 1.08vw, 1.08rem); line-height: 1.9; color: rgba(11,11,11,.68); }
.participation-steps { margin-top: 32px; border-top: 1px solid rgba(11,11,11,.15); }
.participation-steps li { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(11,11,11,.12); align-items: center; }
.participation-steps span { font-family: var(--font-mono); font-size: .72rem; color: rgba(11,11,11,.4); }
.participation-steps p { margin:0; color: var(--ink); line-height: 1.55; }
/* 详情页正文章节里的插图（2026-09-28 新增，用于「观众怎么玩」这类章节配图）
   注意 figcaption 在文件上方有一条全局规则 padding-top:18px，这里用更高的权重覆盖 */
.story-figure { margin-top: clamp(28px, 3.4vw, 42px); }
.story-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: rgba(11,11,11,.05); }
.story-figure figcaption { padding-top: 14px; font-size: .78rem; line-height: 1.6; color: rgba(11,11,11,.5); }
.tag-list { display:flex; gap:9px; flex-wrap:wrap; margin-top:28px; }
.tag-list li { padding:.55em .9em; border:1px solid rgba(11,11,11,.18); border-radius:999px; color:rgba(11,11,11,.7); font-size:.8rem; }

.detail-faq { padding: clamp(78px, 9vw, 128px) 0; background: #0b0b0b; }
.faq-list { max-width: 980px; margin-left: auto; }
.faq-list details { border-top: 1px solid rgba(255,255,255,.16); }
.faq-list details:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.faq-list summary { list-style:none; cursor:pointer; padding: 24px 54px 24px 0; position:relative; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 650; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:8px; top:20px; font-size:1.5rem; color:var(--accent); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { padding: 0 54px 24px 0; max-width: 70ch; color: rgba(255,255,255,.62); line-height: 1.8; }

.related-cases { padding: clamp(72px, 8vw, 116px) 0; background: var(--paper); color: var(--ink); }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.related-grid a { color: var(--ink); }
.related-grid img { width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:14px; }
.related-grid span { font-family:var(--font-mono); font-size:.7rem; color:rgba(11,11,11,.45); }
.related-grid strong { display:block; margin-top:5px; font-size:1rem; line-height:1.45; }
.detail-cta { padding: clamp(92px, 11vw, 160px) 0; text-align:center; background:#0b0b0b; }
.detail-cta h2 { margin: 24px auto 0; max-width: 16ch; font-size: clamp(2.2rem, 5vw, 5rem); line-height:1.04; letter-spacing:-.045em; }
.detail-cta p { margin:24px auto 34px; max-width:52ch; color:rgba(255,255,255,.6); }

/* ============================================================
   洞察列表与文章
   ============================================================ */
.insights-hero { padding: clamp(150px, 19vh, 220px) 0 clamp(70px, 8vw, 110px); background:#0b0b0b; }
.insights-hero h1 { margin-top:28px; max-width:12ch; font-size:clamp(2.7rem,6vw,6.2rem); line-height:.98; letter-spacing:-.055em; }
.insights-hero p { margin-top:28px; max-width:56ch; color:rgba(255,255,255,.62); line-height:1.82; }
.article-list { max-width:1080px; }
.article-card { border-top:1px solid rgba(11,11,11,.16); }
.article-card:last-child { border-bottom:1px solid rgba(11,11,11,.16); }
.article-card a { display:grid; grid-template-columns: 320px 1fr; gap:34px; padding:28px 0; color:var(--ink); }
.article-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.article-card span { font-family:var(--font-mono); font-size:.7rem; color:rgba(11,11,11,.46); }
.article-card h2 { margin-top:10px; font-size:clamp(1.35rem,2.3vw,2.25rem); line-height:1.25; letter-spacing:-.025em; }
.article-card p { margin-top:12px; max-width:58ch; font-size:.9rem; line-height:1.75; color:rgba(11,11,11,.58); }
.article-card time { display:block; margin-top:18px; font-size:.72rem; color:rgba(11,11,11,.42); }

.knowledge-head { padding: clamp(140px,18vh,210px) 0 clamp(64px,7vw,100px); background:#0b0b0b; }
.knowledge-head h1 { margin-top:28px; max-width:18ch; font-size:clamp(2.3rem,5.4vw,5.6rem); line-height:1.02; letter-spacing:-.05em; }
.knowledge-head p { margin-top:28px; max-width:68ch; font-size:clamp(1rem,1.2vw,1.14rem); line-height:1.82; color:rgba(255,255,255,.65); }
.knowledge-head time { display:block; margin-top:22px; font-size:.74rem; color:rgba(255,255,255,.42); }
.knowledge-cover { background:#111; }
.knowledge-cover img { width:100%; max-height:760px; object-fit:cover; }
.knowledge-body { display:grid; grid-template-columns:220px minmax(0,760px); gap:clamp(40px,8vw,120px); align-items:start; padding-top:clamp(70px,8vw,110px); padding-bottom:clamp(90px,10vw,150px); background:var(--paper); max-width:none; color:var(--ink); }
.knowledge-toc { position:sticky; top:110px; display:flex; flex-direction:column; gap:12px; padding-left:var(--pad); }
.knowledge-toc strong { margin-bottom:8px; font-size:.8rem; }
.knowledge-toc a { font-size:.78rem; color:rgba(11,11,11,.52); }
.knowledge-toc a:hover { color:var(--ink); }
.knowledge-content { max-width:760px; padding-right:var(--pad); }
.knowledge-content section { scroll-margin-top:120px; margin-bottom:64px; }
.knowledge-content h2 { font-size:clamp(1.7rem,3vw,2.8rem); line-height:1.2; letter-spacing:-.03em; margin-bottom:24px; }
.knowledge-content h3 { font-size:1.08rem; margin:30px 0 10px; }
.knowledge-content p,
.knowledge-content li { font-size:1rem; line-height:1.9; color:rgba(11,11,11,.7); }
.knowledge-content ul { padding-left:1.2em; list-style:disc; }
.knowledge-content li { margin:10px 0; }
.knowledge-content details { border-top:1px solid rgba(11,11,11,.16); }
.knowledge-content details:last-of-type { border-bottom:1px solid rgba(11,11,11,.16); }
.knowledge-content summary { cursor:pointer; padding:18px 0; font-weight:650; }
.knowledge-content details p { padding-bottom:18px; }
.knowledge-related { padding-top:34px; border-top:1px solid rgba(11,11,11,.16); }
.knowledge-related a { border-bottom:1px solid currentColor; }

/* ------------------------------ 响应式 */
@media (max-width: 1100px) {
  .feature-case--1,.feature-case--2,.feature-case--3,.feature-case--4 { grid-column: span 6; min-height: 470px; }
  .moments-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap:34px; }
  .more-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap:36px; }
  .methods-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .insight-card a { grid-template-columns: 130px 1fr; }
  .insight-card p, .insight-card a > span:last-child { grid-column:2; text-align:left; }
  .next-project__inner { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .case-hero { min-height: 760px; }
  .case-hero__shade { background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.38)),linear-gradient(0deg,rgba(0,0,0,.82),transparent 55%); }
  .case-hero h1 { font-size:clamp(2.4rem,12vw,4.2rem); }
  .case-section__head { grid-template-columns:1fr; gap:20px; }
  .case-section__head h2 { max-width:15ch; }
  .featured-grid { grid-template-columns:1fr; }
  .feature-case--1,.feature-case--2,.feature-case--3,.feature-case--4 { grid-column:auto; min-height:430px; }
  .moments-grid,.more-grid { grid-template-columns:1fr; }
  .methods-grid { grid-template-columns:1fr 1fr; }
  .method-card:last-child { grid-column:1/-1; }
  .insight-card a { grid-template-columns:1fr; gap:12px; }
  .insight-card p, .insight-card a > span:last-child { grid-column:auto; }
  .story-block { grid-template-columns:1fr; gap:14px; }
  .story-block__index { margin-bottom:4px; }
  .related-grid { grid-template-columns:1fr; }
  .detail-hero__media img { aspect-ratio:4/3; }
  .article-card a { grid-template-columns:1fr; }
  .knowledge-body { grid-template-columns:1fr; padding-inline:var(--pad); }
  .knowledge-toc { position:static; padding-left:0; padding-bottom:24px; border-bottom:1px solid rgba(11,11,11,.15); }
  .knowledge-content { padding-right:0; }
}

@media (max-width: 480px) {
  .methods-grid { grid-template-columns:1fr; }
  .method-card:last-child { grid-column:auto; }
  .feature-case--1,.feature-case--2,.feature-case--3,.feature-case--4 { min-height:390px; }
  .feature-case ul { display:none; }
  .case-arrow { right:20px; bottom:20px; }
}