/* 首页几处「原站这样摆，但压在我们这套内容上读起来像坏了」的地方，
 * 外加案例详情页的横向滚动（§④，2026-10-03 加的）。
 *
 * ⚠️ 三条纪律:
 *   ① 只覆盖**声明**，不改结构。这些页是 React 水合的，往 DOM 里加/删节点
 *      就是水合失配 React #418。
 *   ② 每个选择器都只在需要的页面上命中 —— 由 build 的注入条件保证（见 tools/build.js 8.9）:
 *      首页按两个类名 needle、案例页按英雄区那张 svg 的 viewBox needle。
 *      这里用的是 `[class*=…]` 属性选择器，因为 Tailwind 的类名里有 `[` `]` `#` `/` `:`，
 *      写成类选择器要一路转义，容易写错。
 *   ③ 站点自己的 CSS 是 Tailwind v4，全在 `@layer utilities` 里。
 *      **未分层的样式一律赢过分层样式**，所以这个文件不用抢优先级、也不用 !important。
 *      但 `lg:` 那几条本身在 `@media (min-width:64rem)` 里，覆盖也必须套进同一个查询 ——
 *      否则窄屏上会连带把 `pt-20`（80px）那一档也改掉。
 */

/* ── ① 桥演示卡悬出深色面板的那 48px ────────────────────────────────────────
 *
 * 卡片比它身下那块深色面板低 48px（`lg:-bottom-12`，**原设计**，不是我们弄丢的）。
 * 问题是卡身是 `bg-[#363043]/50` —— 50% 透明。压在面板上时合成出一个深色，
 * 可悬出去的那一截压在**浅色页面**上，合成出来是 #9895A0 的一条灰带，
 * 看起来像渲染坏了。
 *
 * 实测像素（_tmp/sample-px.js，用 ffmpeg 抠的）:
 *   卡身压在面板上 = #302B41     悬出去那一截 = #9895A0     页面底 = #FAFAFD
 * 所以把卡身写成不透明的 #302B41:
 *   · 压在面板上时**外观一个像素都不变**（那正是它现在的合成结果）
 *   · 悬出去的那一截变成一条干净的深色卡边，读起来是「卡片压在面板边上」，
 *     而不是一条来路不明的灰带
 * 顺带:卡上那个 `backdrop-blur-[2px]` 从此不起作用 —— 本来也看不出来。
 */
[class*="bg-[#363043]/50"] {
	background-color: #302B41;
}

/* ── ② 图表段的上内边距 —— **不动，这一条是量过之后否掉的** ────────────────
 *
 * 一度想把它从 224px（`lg:pt-56`）压到全站标准的 112px，理由是"两倍于其它段落"。
 * 量完发现**那个理由是错的**:这一段里的 h3 带 `md:-mt-24`（-96px），
 * 224 − 96 = **128px** 才是它真正的可见间距，本来就贴齐了全站 112px 那一档。
 * 压到 112 的话可见间距只剩 **16px** —— 标题直接顶到上面那条跑马灯上
 * （见 _look/home-step-02.png 前后对比）。
 *
 * 柱子之间那块空白也**不是布局问题**:九根柱是底对齐的，而数据是指数增长的
 * （2025 年 0.6 → 2033 年 18.5），左半边自然是空的。
 * ⚠️ 而且柱高是**服务端写死的内联 px**（最高那根 500px、容器 `md:h-[580px]`），
 * 改容器高度会让它直接溢出去 —— 想压缩只能改数据或重画，不是改 CSS。
 */
@media (min-width: 64rem) {
	/* ── ③ 四张卡的高度 ──────────────────────────────────────────────────────
	 *
	 * `lg:min-h-[310px]` 里装的是「一个 60px 的图标（贴顶）+ 一个词（贴底）」，
	 * 中间约 150px 全是空的。220px 是它自己在小屏上用的那一档，拿过来用。
	 * 图标也在这里顺带放大一点 —— 60 → 72px，在 220 的卡里才撑得住。
	 *
	 * 卡片里**没有**说明文字（源站也就一个标题），所以这次只做视觉，不编句子。
	 */
	[class*="lg:min-h-[310px]"] {
		min-height: 220px;
	}

	[class*="lg:min-h-[310px]"] > img {
		width: 72px;
		height: 72px;
	}
}

/* ── ④ 案例详情页的横向滚动（**第六处刻意偏离**，2026-10-03）────────────────
 *
 * 12 个案例详情页在 1440 宽下**整页能横向滚 576px**：英雄区那张
 * `<svg width="2560" height="440">` 用 `left-1/2 -translate-x-1/2` 居中，
 * 而它的祖先（header → article → main → div）一个个 overflow 都是 visible ——
 * 没人裁它，多出来的 576px 就成了文档的横向滚动区。
 *
 * ⚠️ **这不是我们弄坏的**:把 `_raw/site/case-studies/synonym/index.html`
 * （源站原件、标题还写着 Synonym | Wormhole）原样放进镜像、用同一套 CSS 渲一遍，
 * 同样 576px、同样能滚。源站自己就长这样。
 * 之所以还是修:横向滚动条就挂在每一个案例页的最下面，读起来是"页面坏了"，
 * 不属于 §二 ④ 那种"原文里多一个词"的级别。
 *
 * 为什么是 `clip` 不是 `hidden`:
 *   · `overflow-x: hidden` 会把元素变成**滚动容器**（sticky 的定位基准就变了），
 *     而且它**不禁止程序化滚动** —— 用 `window.scrollTo` 量，hidden 那版读数照样是 576px（假阴性）；
 *     `clip` 不建滚动容器，多余的滚动连程序化都没有。
 *   · **只写 x 轴**。`visible` + `clip` 是合法组合（不会像 hidden 那样把另一轴逼成 auto），
 *     所以纵向一律不动 —— 英雄区标题带负 margin、卡片也可能外扩，一裁纵向就是新事故。
 *
 * ⚠️ **落点试过四个，`body` 是不行的**（2026-10-03 实测）:
 *   A `html{overflow-x:clip}` ✅   B `body{overflow-x:hidden}` ✗（读数还是 576）
 *   C `main{overflow-x:clip}` ✅   D `article{overflow-x:clip}` ✅
 *   B 不行的原因不在我们:按 CSS 规范，**根元素 overflow 是 visible 时，body 的 overflow 会被
 *   传播给视口、body 自己按 visible 算** —— 写在 body 上的规则压根没落在这个盒子上。
 *   最后选 C:`main` 是这几页真正包含溢出物的盒子，不碰根元素的传播规则，
 *   也不像 D 那样只盖住 article —— 页面上别处再有横向溢出也一并收掉。
 *
 * 视觉上**一个像素都不变**:那张图案本来就铺满视口、多出来的部分在屏幕外，
 * 裁掉之后只是"滚不过去了"。
 */
main {
	overflow-x: clip;
}