/* 首页几处「原站这样摆，但压在我们这套内容上读起来像坏了」的地方。
 *
 * ⚠️ 三条纪律:
 *   ① 只覆盖**声明**，不改结构。这些页是 React 水合的，往 DOM 里加/删节点
 *      就是水合失配 React #418。
 *   ② 每个选择器都只在首页命中 —— 由 build 的注入条件保证（见 tools/build.js 8.9），
 *      这里用的是 `[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;
	}
}