/* =========================================================
   Neo-Brutalism 层（新粗野主义强化）
   —— 叠加在 style.css / anim.css 之上，不改动原有排版逻辑
   核心语言：
     1. 硬边：2px 实心描边 + 零圆角
     2. 实心投影：4px/8px 硬偏移（无模糊），随悬停放大
     3. 位移反馈：卡片 hover 时反向位移（-4px），投影同步扩大
     4. 物理按压：按钮 active 时按钮「沉下去」，投影压缩归零
     5. 语义化与键盘可达：统一 :focus-visible 焦点环
   无障碍：prefers-reduced-motion 下所有位移/缩放动效一律关闭
   零框架依赖：纯 CSS + 原生 JS
   ========================================================= */

:root {
  /* 粗野主义设计令牌（跟随明暗模式自动反转） */
  --nb-edge: 2px;                       /* 描边粗细 */
  --nb-x: 4px;                          /* 投影默认偏移 */
  --nb-sh-x: var(--nb-x);               /* 卡片投影 X 偏移（悬停时放大） */
  --nb-sh-y: var(--nb-x);               /* 卡片投影 Y 偏移 */
  --nb-lift: 0px;                       /* 卡片悬停位移（用变量避免与揭示动画冲突） */
  --nb-press-x: 4px;                    /* 按钮按下位移 */
  --nb-press-y: 4px;
  --nb-accent: var(--blue);
  --nb-rev: 18px;                       /* 滚动揭示的初始位移量 */
  --nb-edge-style: solid;
  --nb-edge-color: var(--ink);
}

/* =========================================================
   1. 表面：把「1px 发丝网格」升级为「2px 硬边 + 实心投影」
   ========================================================= */
/* 原设计用 gap:1px + 背景线条画出网格。粗野主义改为独立卡片 + 间隙。 */
.offers,
.who-grid,
.posts,
.facts,
.social-grid,
.case-meta {
  gap: 18px;
  background: transparent;
  border: 0;
}

/* 卡片通用：硬边 + 实心投影 */
.offer,
.who,
.post,
.fact {
  background: var(--bg);
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: var(--nb-sh-x) var(--nb-sh-y) 0 var(--nb-edge-color);
  transition:
    transform .2s cubic-bezier(.22, 1, .36, 1),
    box-shadow .2s cubic-bezier(.22, 1, .36, 1),
    background-color .2s,
    color .2s;
  /* 位移量与揭示位移合成：hover 抬升 + 进场下移 互不覆盖 */
  transform: translate(var(--nb-lift), calc(var(--nb-lift) + var(--nb-rev)));
  position: relative;
}

/* 卡片悬停：向左上位移 + 投影扩大（Neo-Brutalism 的标志性反馈） */
.offer:hover,
.who:hover,
.post:hover,
.fact:hover {
  --nb-lift: -5px;
  --nb-sh-x: 9px;
  --nb-sh-y: 9px;
  background: var(--card);
}
.offer:focus-within,
.who:focus-within,
.post:focus-within,
.fact:focus-within {
  --nb-lift: -5px;
  --nb-sh-x: 9px;
  --nb-sh-y: 9px;
}

/* 悬停时把卡片提到同层之上，避免被相邻卡片压住 */
.offer:hover,
.who:hover,
.post:hover,
.fact:hover,
.offer:focus-within,
.who:focus-within,
.post:focus-within,
.fact:focus-within {
  z-index: 2;
}

/* 编号色块：粗野主义的高饱和标签 */
.offer .n,
.post .tag {
  display: inline-block;
  padding: 3px 9px;
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  background: var(--nb-accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: .08em;
}
[data-mode="dark"] .offer .n,
[data-mode="dark"] .post .tag { color: #0e1726; }
.offer .n { font-size: 18px; }
.post .tag { font-size: 10px; }

/* 卡片内箭头：右上角的实心方块按钮观感 */
.offer .arr {
  top: 22px; right: 22px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  background: var(--bg);
  color: var(--nb-accent);
  font-size: 16px;
  transition: background-color .18s, color .18s, transform .18s;
}
.offer:hover .arr { background: var(--nb-accent); color: #fff; transform: rotate(45deg); }
[data-mode="dark"] .offer:hover .arr { color: #0e1726; }

/* 事实速览：dl/dt/dd 语义化后的排版 */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
/* dd / dt 浏览器默认有 40px 缩进（margin-inline-start），必须清零，
   否则语义化改造后文字会被莫名推走，与 dt 不对齐。 */
.facts dt, .facts dd { margin: 0; }
.fact { padding: 16px 20px; }
.fact .k { display: block; margin-bottom: 6px; }
.fact .v { display: block; text-align: left; margin: 0; }

/* 案例三栏元信息：改为独立硬边小卡 */
.case-meta { margin: 20px 0 18px; }
.case-meta dt, .case-meta dd { margin: 0; }
.case-meta > div {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 14px;
}

/* =========================================================
   2. 按钮：硬边 + 实心投影 + 物理按压
   ========================================================= */
.btn,
.btn-sm,
.copybtn,
.copybtn-lg {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: var(--nb-x) var(--nb-x) 0 var(--nb-edge-color);
  transition:
    transform .12s cubic-bezier(.22, 1, .36, 1),
    box-shadow .12s cubic-bezier(.22, 1, .36, 1),
    background-color .16s,
    color .16s,
    filter .16s;
}
.btn:hover,
.btn:focus-visible,
.btn-sm:hover,
.btn-sm:focus-visible,
.copybtn:hover,
.copybtn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--nb-edge-color);
}
/* 物理按压：按钮沉下去，投影压扁归零 —— 这是粗野主义最核心的触感 */
.btn:active,
.btn-sm:active,
.copybtn:active,
.copybtn-lg:active {
  transform: translate(var(--nb-press-x), var(--nb-press-y));
  box-shadow: 0 0 0 var(--nb-edge-color);
  transition-duration: .06s;
}
/* 禁用态：不可按压 */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  box-shadow: var(--nb-x) var(--nb-x) 0 var(--nb-edge-color);
}

/* 幽灵按钮（次级 CTA）：保持蓝描边，但边框跟随硬边风格 */
.btn-ghost { border-width: var(--nb-edge); }
.btn-ghost:hover,
.btn-ghost:focus-visible { box-shadow: 6px 6px 0 var(--nb-edge-color); }

/* 主题切换组：硬边容器 + 方形按钮 */
.mode {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--nb-edge-color);
}
.mode button { transition: background-color .15s, color .15s; }
.mode button:active { transform: translate(1px, 1px); }

/* 文本链接：粗野主义的实心下划线 */
.link {
  border-bottom: 3px solid var(--nb-accent);
  padding-bottom: 3px;
  font-weight: 600;
  transition: transform .15s, color .15s;
}
.link:hover, .link:focus-visible { transform: translateY(-2px); }
.why a.inline,
.offers a.inline,
.faq-a a { border-bottom: 2px solid var(--nb-accent); font-weight: 600; }

/* =========================================================
   3. 键盘可达：统一焦点环（所有可聚焦元素）
   ========================================================= */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--nb-accent);
  outline-offset: 3px;
}
/* 焦点环与硬边风格统一：焦点元素额外抬起一层投影 */
.btn:focus-visible,
.btn-sm:focus-visible,
.copybtn:focus-visible { outline-offset: 2px; }
/* 移动端点击不显示焦点环（避免"点了不消失"的突兀描边） */
@media (hover: none) {
  :where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid var(--nb-accent);
  }
}

/* 跳转链接：获得焦点时以粗野主义硬边卡呈现 */
.skip:focus {
  left: 12px; top: 12px;
  z-index: 99;
  background: var(--bg);
  color: var(--ink);
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: 4px 4px 0 var(--nb-edge-color);
  padding: 10px 14px;
  font-weight: 600;
}

/* =========================================================
   4. 滚动揭示（IntersectionObserver 驱动，JS 给 .nb-in）
   ========================================================= */
[data-nb-reveal] {
  opacity: var(--nb-o, 0);
  transition:
    opacity .55s ease var(--nb-d, 0ms),
    transform .55s cubic-bezier(.22, 1, .36, 1) var(--nb-d, 0ms);
}
[data-nb-reveal].nb-in { --nb-o: 1; --nb-rev: 0px; }

/* 揭示前的兜底：JS 未就绪 / 不支持 IO 时内容仍然可见 */
.no-js [data-nb-reveal] { opacity: 1; transform: none; }

/* =========================================================
   5. 阅读进度条：粗野主义硬边刻度条
   ========================================================= */
.progress {
  height: 6px;
  background: transparent;
  border-bottom: 2px solid var(--nb-edge-color);
  overflow: visible;
}
.progress::before {
  content: attr(data-p) "";
  position: absolute;
  right: 8px; top: 8px;
  padding: 2px 6px;
  background: var(--nb-edge-color);
  color: var(--bg);
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  opacity: 0;
  transition: opacity .2s;
}
.progress.active::before { opacity: 1; }
.progress::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(var(--nb-p, 0));
  transform-origin: 0 50%;
  background: var(--nb-accent);
  border-right: 2px solid var(--nb-edge-color);
  transition: transform .1s linear;
}

/* =========================================================
   6. 其它粗野主义细节
   ========================================================= */

/* —— 中文大标题的行高修正（关键）——
   原站为窄体拉丁字母设计，行高压到 .98 / 1.05。
   中文回退到 PingFang SC / 微软雅黑后，字面框高度约为字号的 1.4 倍，
   远超行盒 → 上下两行的中文会互相压叠（实测 writing 页 h1 溢出 15px）。
   这里只针对中文（.zh / 中文标题元素）把行高放宽到能容纳字面框，
   拉丁部分仍保持原有的紧行距 —— 两者同处一行时取最大值。 */
.pagehead,
.h2 {
  line-height: 1.2;
}
/* 中文语义单元自身也要给足行高，否则同一行内的中西文基线会打架 */
.pagehead .zh,
.h2 .zh {
  line-height: 1.2;
}
/* 章节编号：加硬边 + 实心投影
   注意行高：原样式是 font:400 64px/1，即行高等于字号。
   Bebas Neue 这类窄体大写字母的字形高度会略微超出行盒，
   加上 2px 描边后底部会被裁掉一点点（实测溢出 3px）。
   这里把行高放宽到 1.12 并给足上下内边距，数字完整落在框内。 */
.sec-num {
  display: inline-block;
  padding: 6px 14px 10px;
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  background: var(--tile);
  color: var(--tilefg);
  box-shadow: 4px 4px 0 var(--nb-accent);
  line-height: 1.12;
  /* 编号块与下方大标题之间需要明确的分隔：
     标题字号高达 64px，12px 的间距会显得两者挤在一起。 */
  margin-bottom: 26px;
}
/* 字母砖：硬边 + 实心投影
   注意：投影不能给到每一块砖 —— 每块砖各带偏移阴影会让砖缝里
   露出彩色底纹，整块字母板看起来像被拆散的方块（这正是上一版的低级错位）。
   正确做法：单词内的字母收紧成一条连贯的硬边条带，
   投影只加在「整词」这一层，缝隙里就不会漏色。 */
.board .word {
  gap: 0;
  box-shadow: 4px 4px 0 var(--nb-accent);
}
.tile {
  box-shadow: none;
  border: 2px solid var(--nb-edge-color);
}
/* 原设计里 .tile::after 是一条贯穿字母中线的装饰线。
   单块砖时它是个漂亮的细节；字母连成条带后，
   这条线会变成贯穿整排字母的横线，把字切得很难读。
   粗野主义风格下改为：只保留砖块自身的硬边，不再叠加中线。 */
.tile::after { display: none; }
.tile.accent { background: var(--nb-accent); color: #fff; }
[data-mode="dark"] .tile.accent { color: #0e1726; }

/* FAQ：问题行加硬边，按钮态有物理反馈 */
/* 容器：原本是 border-top + 每项 border-bottom 的「连体表」，
   加上硬边投影后会挤成一坨。改为独立卡片 + 间隙，
   每张卡自带硬边与投影，展开时也不压到下一项。 */
.faq { border-top: 0; max-width: 900px; }
.faq-item {
  padding: 0;
  border: 0;
  margin-bottom: 14px;
  background: var(--bg);
  position: relative;
}
.faq-item:last-child { margin-bottom: 0; }
/* 未展开的项也作为独立卡片，带硬边与投影 */
.faq-item > .faq-q {
  box-shadow: 4px 4px 0 var(--nb-edge-color);
}
.faq-q {
  padding: 18px 16px;
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  background: var(--bg);
  margin-bottom: 0;
  transition: background-color .18s, transform .12s, box-shadow .12s;
}
.faq-q:hover,
.faq-q:focus-visible { background: var(--card); }
.faq-q:active { transform: translate(2px, 2px); }
/* 展开态：填蓝 + 投影，并且下方答案接管投影位置 */
.faq-q[aria-expanded="true"] {
  background: var(--nb-accent);
  color: #fff;
  box-shadow: 5px 5px 0 var(--nb-edge-color);
  position: relative;
  z-index: 2;
}
[data-mode="dark"] .faq-q[aria-expanded="true"] { color: #0e1726; }
.faq-q[aria-expanded="true"] .pm { color: #fff; }
[data-mode="dark"] .faq-q[aria-expanded="true"] .pm { color: #0e1726; }

/* —— FAQ 答案：关键修正 ——
   问题行加了 16px 左右内边距，答案行必须用同样的内边距，
   否则答案文字会直接贴在卡片边框上（上一版出现的低级错位）。
   同时给上下留白，让答案与展开态问题行之间有呼吸空间。
   注意：.faq-a 必须撑满整行宽度（宽度由 .faq-item 决定），
   否则会退化成「比问题框窄一截」的错位。 */
.faq-a {
  padding: 16px 16px 20px;
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-top: 0;                    /* 与问题行共边，不重复描边 */
  margin-top: 0;
  background: var(--card);
  position: relative;
  z-index: 1;
  box-shadow: 5px 5px 0 var(--nb-edge-color);
  /* 关键：style.css 里 .faq-a 有 max-width:38em（约 608px），
     会让答案框比问题框窄一截，形成「右边不齐」的错位。
     这里显式拉满并保留 max-width 作为文字行长约束（放在内部 p 上）。 */
  width: 100%;
  max-width: none;
  /* 答案自身不再投影：投影由外层 .faq-item 统一承担，
     否则展开态的偏移阴影会压到下一个问题框上。 */
  box-shadow: none;
  border-bottom: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
}
/* 展开的整张卡片由 .faq-item 负责投影（JS 加 .is-open，:has() 作为增强） */
.faq-item.is-open,
.faq-item:has(.faq-q[aria-expanded="true"]) {
  box-shadow: 5px 5px 0 var(--nb-edge-color);
}
.faq-item.is-open .faq-q[aria-expanded="true"],
.faq-item:has(.faq-q[aria-expanded="true"]) .faq-q[aria-expanded="true"] {
  box-shadow: none;
}
/* 文字行长仍由内层 p 控制，避免长行难读 */
.faq-a p { margin: 0 0 12px; max-width: 38em; }
.faq-a p:last-child { margin-bottom: 0; }

/* 留言模板：硬边卡片 */
.note-template {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: 6px 6px 0 var(--nb-edge-color);
  background: var(--card);
}

/* 许愿列表条目：硬边小卡 */
.wish-list li {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: 4px 4px 0 var(--nb-edge-color);
  background: var(--bg);
  transition: transform .18s, box-shadow .18s;
}
.wish-list li:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--nb-edge-color);
}
.wish-list .wc {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-radius: 0;
  background: var(--nb-accent);
  color: #fff;
  font-weight: 700;
}
[data-mode="dark"] .wish-list .wc { color: #0e1726; }

/* 顶部导航：吸顶后加一条硬边底 */
header.top.stuck {
  box-shadow: 0 4px 0 var(--nb-edge-color);
}

/* 移动端底部圆点导航：硬边胶囊 → 硬边方块组 */
.mobnav {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--nb-edge-color);
}
.mobnav a { border-radius: 0; border-width: 2px; }
.mobnav a.on { background: var(--nb-accent); border-color: var(--nb-edge-color); }

/* 悬浮微信按钮：硬边 + 实心投影 + 按压 */
.fab-wechat {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--nb-edge-color);
  transition: transform .12s, box-shadow .12s, opacity .25s ease, visibility .25s ease;
}
.fab-wechat:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--nb-edge-color);
}
.fab-pop {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--nb-edge-color);
}

/* 左侧 rail 圆点：硬边方块 */
.rail nav a {
  border-radius: 0;
  border-width: 2px;
  width: 10px; height: 10px;
}
.rail nav a.on { background: var(--nb-accent); border-color: var(--nb-edge-color); }
.rail .tip {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: 3px 3px 0 var(--nb-edge-color);
  font-weight: 600;
}

/* 表单控件：硬边输入框，聚焦时抬起 */
.cform input,
.cform textarea,
.wish-form textarea,
.wish-form input {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-radius: 0;
  background: var(--card);
  transition: transform .14s, box-shadow .14s;
}
.cform input:focus,
.cform textarea:focus,
.wish-form textarea:focus,
.wish-form input:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--nb-accent);
}

/* =========================================================
   7. 无障碍：尊重系统「减少动态效果」
   —— 关闭所有位移 / 投影缩放 / 揭示动画，内容即刻呈现
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root { --nb-rev: 0px; --nb-lift: 0px; }

  .offer, .who, .post, .fact, .wish-list li,
  .btn, .btn-sm, .copybtn, .copybtn-lg, .link,
  .cform input, .cform textarea, .wish-form textarea, .wish-form input,
  .fab-wechat, .mobnav, .faq-q, .tile, .progress::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  /* 位移一律归零 */
  .offer:hover, .who:hover, .post:hover, .fact:hover,
  .offer:focus-within, .who:focus-within, .post:focus-within, .fact:focus-within,
  .wish-list li:hover,
  .btn:hover, .btn-sm:hover, .copybtn:hover,
  .cform input:focus, .cform textarea:focus,
  .wish-form textarea:focus, .wish-form input:focus,
  .link:hover {
    transform: none !important;
  }
  /* 按压反馈同样关闭（改为静态边框强调，避免位移） */
  .btn:active, .btn-sm:active, .copybtn:active, .copybtn-lg:active,
  .fab-wechat:active, .faq-q:active {
    transform: none !important;
    box-shadow: var(--nb-x) var(--nb-x) 0 var(--nb-edge-color) !important;
  }
  /* 揭示动画直接完成 */
  [data-nb-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 投影不再扩大（避免视觉突变），保持静态硬边 */
  .offer:hover, .who:hover, .post:hover, .fact:hover,
  .offer:focus-within, .who:focus-within, .post:focus-within, .fact:focus-within,
  .wish-list li:hover {
    --nb-sh-x: var(--nb-x) !important;
    --nb-sh-y: var(--nb-x) !important;
  }
}

/* =========================================================
   8. 移动端收敛：窄屏下缩小硬边/投影，避免撑破屏幕
   ========================================================= */
@media (max-width: 860px) {
  :root { --nb-x: 3px; --nb-press-x: 3px; --nb-press-y: 3px; }
  .offers, .who-grid, .posts, .facts, .social-grid, .case-meta { gap: 14px; }
  .offer:hover, .who:hover, .post:hover, .fact:hover,
  .offer:focus-within, .who:focus-within, .post:focus-within, .fact:focus-within {
    --nb-lift: -3px;
    --nb-sh-x: 6px;
    --nb-sh-y: 6px;
  }
  .tile { box-shadow: 3px 3px 0 var(--nb-accent); }
  .note-template { box-shadow: 4px 4px 0 var(--nb-edge-color); }
  .wish-list li:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--nb-edge-color); }
  .progress { height: 5px; }
}

/* =========================================================
   9. 图像：案例配图 + 人物肖像
   ---------------------------------------------------------
   粗野主义的图像处理原则：
   - 硬边 + 实心偏移投影（不用模糊投影，与整体语言一致）
   - 不用圆角、不用灰底衬边（保持"贴纸"感）
   - 图片本身做轻微去饱和 + 对比增强，与黑白/蓝调品牌色协调
   ========================================================= */

/* —— 案例卡片配图 —— */
.offer.case {
  display: flex;
  flex-direction: column;
  padding: 0;                 /* 图片需要贴到卡片边缘 */
}
.offer.case > .n {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  margin: 0;
  padding: 6px 12px 8px;
  background: var(--nb-accent);
  color: #fff;
  font: 400 20px/1 var(--display);
  border-right: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-bottom: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
}
[data-mode="dark"] .offer.case > .n { color: #0e1726; }

.case-shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-bottom: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  background: var(--tile);
}
.case-shot img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(.35) contrast(1.06);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
/* 悬停时图片轻微放大，制造"看进去"的感觉 */
.offer.case:hover .case-shot img,
.offer.case:focus-within .case-shot img {
  transform: scale(1.045);
  filter: grayscale(0) contrast(1.04);
}
/* 图片与正文之间的呼吸空间 */
.offer.case > h3 { margin: 22px 30px 12px; }
.offer.case > p { padding: 0 30px; }
.offer.case > .case-meta { margin: 18px 30px 16px; }
.offer.case > p:last-child { padding: 0 30px 34px; margin: 0; }

/* —— 人物肖像 —— */
.portrait {
  margin: 0 0 30px;
  max-width: 420px;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  box-shadow: 6px 6px 0 var(--nb-accent);
  filter: grayscale(1) contrast(1.05);
}
.portrait figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.portrait .pk {
  font: 400 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray);
}
.portrait .pv {
  font: 600 17px/1.3 var(--sans);
  color: var(--ink);
}

/* —— 移动端收敛 —— */
@media (max-width: 860px) {
  .case-shot img { height: 168px; }
  .offer.case > h3 { margin: 18px 22px 10px; }
  .offer.case > p { padding: 0 22px; }
  .offer.case > .case-meta { margin: 16px 22px 14px; }
  .offer.case > p:last-child { padding: 0 22px 26px; }
  .portrait { max-width: 100%; }
  .portrait img { box-shadow: 4px 4px 0 var(--nb-accent); }
}

/* =========================================================
   10. 案例卡片：独立卡片间距
   ---------------------------------------------------------
   原设计 .offers 是「1px 细线分隔的瑞士网格」。
   但案例卡片加了硬边 + 实心偏移投影后，1px 间隙会让
   相邻卡片的投影互相咬住，视觉上黏成一片。
   这里改成粗野主义的独立卡片：留出足够间隙让投影完整可见。
   ========================================================= */
.offers.has-case-cards {
  gap: 26px;
  background: transparent;
  border: 0;
}
.offers.has-case-cards > .offer.case {
  border: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  background: var(--bg);
  box-shadow: 5px 5px 0 var(--nb-edge-color);
  transition: transform .16s ease, box-shadow .16s ease, background-color .2s;
}
.offers.has-case-cards > .offer.case:hover,
.offers.has-case-cards > .offer.case:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--nb-edge-color);
}
/* 编号块贴在卡片左上角外沿，与硬边框对齐 */
.offer.case > .n {
  top: 0; left: 0;
  border-right: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
  border-bottom: var(--nb-edge) var(--nb-edge-style) var(--nb-edge-color);
}

@media (max-width: 860px) {
  .offers.has-case-cards { gap: 18px; }
  .offers.has-case-cards > .offer.case { box-shadow: 4px 4px 0 var(--nb-edge-color); }
  .offers.has-case-cards > .offer.case:hover,
  .offers.has-case-cards > .offer.case:focus-within {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--nb-edge-color);
  }
}