/* Wild Signal opening only. The page's later sections retain their layout. */
:root { --ws-ink:#274c42; --ws-paper:#fff9e9; --ws-accent:#725033; }
.ws-intro { position:relative; height:240vh; }
.ws-stage { position:fixed; inset:0; width:100%; height:100vh; overflow:hidden; background:#244b50; color:var(--ws-ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; isolation:isolate; }
.ws-stage [data-tl] { --tw-translate-x:0px; --tw-translate-y:0px; --tw-rotate:0deg; --tw-skew-x:0deg; --tw-skew-y:0deg; --tw-scale-x:1; --tw-scale-y:1; }
.ws-landscape { position:absolute; inset:-2%; z-index:-2; transform-origin:50% 65%; }
.ws-landscape img { width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.ws-cast { position:absolute; inset:-2%; transform-origin:50% 65%; z-index:2; pointer-events:none; }
.ws-cast-plane { position:absolute; width:max(100%,184.8vh); aspect-ratio:1672/941; left:50%; top:58%; transform:translate(-50%,-58%); }
.ws-snow-position { position:absolute; left:21%; bottom:15%; width:24%; transform-origin:65% 90%; }
.ws-gibbon-position { position:absolute; left:45%; bottom:15%; width:18%; transform-origin:50% 90%; }
.ws-snow-position::before,.ws-gibbon-position::before { content:""; position:absolute; bottom:1%; left:25%; width:55%; height:5%; background:#3c302c45; border-radius:50%; filter:blur(5px); pointer-events:none; }
.ws-animal { display:block; padding:0; border:0; background:none; width:100%; transform-origin:50% 90%; }
.ws-animal img { display:block; width:100%; height:auto; pointer-events:none; }
.ws-wind { position:absolute; width:27%; left:7%; top:65%; color:#fffcec; opacity:.65; pointer-events:none; }
body.ws-opening-active>nav,body.ws-opening-active [data-wp],body.ws-opening-active [data-ws-subtitle] { visibility:hidden; pointer-events:none; }
@media(max-width:700px) {
 .ws-landscape img { object-position:50% 58%; }
 .ws-cast-plane { left:50%; top:60%; transform:translate(-50%,-60%); }
 .ws-snow-position { left:38.5%; bottom:11%; width:16%; }
 .ws-gibbon-position { left:48%; bottom:11%; width:14%; }
 .ws-wind { width:48%; left:-12%; top:64%; }
}
@media(prefers-reduced-motion:reduce) { .ws-stage *, .ws-stage *::before { animation:none!important; transition:none!important; } }

/* 首屏标题保留原始手绘透明图。每个内嵌 SVG 的 viewBox 裁出一个字，
   因而能独立滚动，而屏幕上仍是原图的笔触，不受浏览器字体渲染影响。 */

.ws-stage { --padding-nav: clamp(1rem, 4vw, 2.5rem); }

.ws-logo {
	position: absolute;
	left: var(--padding-nav);
	top: var(--padding-nav);
	z-index: 5;
	width: clamp(78px, 6.4vw, 123px);
	height: auto;
	pointer-events: none;
}

/* nav 里的同款字标。尺寸与 .ws-logo 完全一致 —— 首屏 stage 淡出、nav 显形
   发生在同一段滚动里，两处宽度或落点差一个像素，切换时就能看见跳变。
   ⚠️ 别写 Tailwind 任意值类（w-[clamp()]）：原设计 CSS 是预编译产物，
   没生成的任意值类静默失效，盒子会退回 <img> 的 width 属性。 */
.ws-brand {
	display: block;
	width: clamp(78px, 6.4vw, 123px);
}
.ws-wordmark {
	display: block;
	width: 100%;
	height: auto;
}

/* 定位锚负责居中，h1 自己不带 transform —— 引擎会整条覆写 transform，
   居中若也写在 h1 上会被冲掉（首版就这么错过一次）。 */
.ws-title-anchor {
	position: absolute;
	left: 50%;
	top: 29.5%;
	z-index: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ws-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	--main-width: min(25vw, 480px);
	gap: calc(var(--main-width) * -0.04);
	filter: drop-shadow(0 2px 8px rgba(20, 34, 28, .22));
}

.ws-title__row { display: block; width: var(--main-width); height: auto; overflow: visible; }
.ws-title__glyph { overflow: hidden; transform-box: fill-box; transform-origin: center; }

/* 两行图层尺寸比取自设计稿：480×160 与 280×110。 */
.ws-title__row--sub { width: calc(var(--main-width) * 7 / 12); }

@media (max-width: 700px) {
	.ws-title { --main-width: min(66vw, 340px); }
	.ws-title-anchor { top: 26%; }
	.ws-logo { width: 82px; }
}

/* ════════════════════════════════════════════════════════════════════════
   中文文案的字体与行高（2026-10-22 文案中文化，见 COPY-REPLACEMENT-SPEC.md）
   ------------------------------------------------------------------------
   原设计的 `text-md` / `text-xs` 等把 line-height 定成 **0.8** —— 那是为 Gurajada
   这种窄高拉丁体量身做的（它的字形只占 em 框的一小半）。CJK 字形几乎占满整个
   em 框，套上 0.8 会让相邻两行直接叠在一起：实测页尾导语两行重叠约 40%，
   “许多野生动物的家正受到威胁”那行被上行的下部压掉一截。

   所以这里只对**承载中文的容器**放开行高，拉丁排版（导航、卡号、按钮）一律不动。
   `font-style: normal` 是因为来源行沿用原设计的 `italic`，中文没有真斜体，浏览器会
   合成一个歪斜的假斜体 —— 读起来发毛，直接关掉。

   ⚠️ 选择器必须比工具类更靠后或更具体：本文件在 head 里排在全部工具类之后，
     属性选择器 [data-text=…] 与 .ws-cn 的特异性足以压过 .text-md。
   ════════════════════════════════════════════════════════════════════════ */
[data-text="home / subtitle / content"],
.ws-cn {
	font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
		"Source Han Sans SC", "Microsoft YaHei", sans-serif;
	font-style: normal;
	line-height: 1.55;
}

/* 页尾导语在 450px 容器里是三句短话，1.55 会显得散；1.45 更紧凑，
   同时仍远高于 0.8 的叠行阈值。 */
.ws-cn { line-height: 1.45; }

/* 2026-10-23：text-md 基准由 28px 降到 16px，原来那套手机上限随之作废。
   旧规则是 min(28px, 6.4vw) / min(28px, 6vw)，存在的理由只有一个：13 字的
   「你希望它们看见怎样的未来？」按 28px 排是 364px，会超出行宽 336px 掉出孤字行。
   16px 下同一行只有 208px，余量充足，不再需要任何上限；若保留反而会把手机
   字号顶回 28px，比桌面还大 —— 故整段移除，手机与桌面统一取 16px。 */

/* 导航 CTA「自然之友」= 20px。
   这个站的字号阶里没有 20px 一档（text-3xl 30px、text-xl 40px、text-lg 32px），
   而 page.css 是预编译产物，text-[20px] 这类任意值类不会生成、静默失效，
   所以只能写成真规则。line-height 给 1.2：按钮本身 56px 高、内层 flex 居中，
   行高只决定行盒高度，1.2 比继承下来的宽松值更贴视觉中线。 */
.ws-nav-cta__label {
	font-size: 20px;
	line-height: 1.2;
}