/* ============================================================
   scale.css — 尺度层（最后加载，压过 refine.css）
   ------------------------------------------------------------
   「精致」和「大气」是两件事：
     精致＝细节考究（字重、字距、对齐）—— refine.css 解决
     大气＝**尺度**（满屏的图、超大的字、奢侈的留白）—— 本层解决

   前面几轮一直在调细节，页面变得"排得整齐"但没有气场。
   气场来自三件事，缺一不可：

     1. hero 占满屏 —— 26% 的 hero 只是个横幅，不是门面
     2. 字要够大 —— 64px 在 1400px 屏上只是"标题"，不是"宣言"
     3. 板块间距大到近乎奢侈 —— 挤在一起的内容永远不大气

   ⚠ 尺度是有代价的：首屏能看到的内容变少。
     这是刻意的取舍 —— 品牌站首屏的任务是"立住调性"，不是"塞信息"。
     真要看内容，读者会滚。
   ============================================================ */

/* ============================================================
   1. Hero 占满屏
   ------------------------------------------------------------
   `100svh` 用小视口高度：手机上地址栏收起时不会跳动，
   比 100vh 稳（100vh 在移动端会被浏览器 UI 撑出一截）。
   减去页头高度，让 hero 恰好填满页头以下的整屏。
   ============================================================ */
.jg-hero {
	min-height: min(78svh, 44rem);
}

@media (min-width: 900px) {
	.jg-hero {
		min-height: min(82svh, 50rem);
	}
}

/* ============================================================
   2. 字要够大
   ------------------------------------------------------------
   上限从 4rem 提到 6rem（96px）。字重压到 200 ——
   越大的字越要轻，96px 的 300 会显得笨重。
   ============================================================ */
.jg-hero__title {
	font-size: clamp(2.5rem, 1.2rem + 5.2vw, 6rem);
	font-weight: 200;
	letter-spacing: .1em;
	line-height: 1.04;
}

.jg-hero__eyebrow {
	font-size: 11px;
	letter-spacing: .4em;      /* 眉标字距拉到极致，和巨大标题形成张力 */
	margin-bottom: 2em;
}

.jg-hero__text {
	font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
	line-height: 1.85;
	margin-top: 2em;
}

/* ============================================================
   3. 奢侈的留白
   ------------------------------------------------------------
   原来 section 间距移动端 2.5rem / 桌面 4rem —— 那是资讯站的密度。
   翻倍到 5rem / 8.5rem。板块之间要能"喘一口气"。
   ============================================================ */
:root {
	--jg-section-y: 4.5rem;
	--jg-stack-gap: 2.75rem;
}

@media (min-width: 700px) {
	:root {
		--jg-section-y: 7rem;
		--jg-stack-gap: 3.5rem;
	}
}

@media (min-width: 1150px) {
	:root {
		--jg-section-y: 8.5rem;
		--jg-stack-gap: 4rem;
	}
}

/* 分类条给足上下气口，别贴着 hero */
.jg-topics__inner { padding-block: 2.2rem; }
.jg-topics { margin-bottom: 0; }

/* ⚠ 这几个倍数曾经开得太大，实测出现 200px+ 的纯白断层。
   留白要有**节奏**（紧-松-紧），不是一味放大 ——
   一大片空白读者会以为页面加载失败或内容到头了。
   原值：lead 上 1.3× / grid 上 2× / 分隔线下 0.9×  → 三处都收。 */
.jg-grid-wrap::before { margin-bottom: calc(var(--jg-section-y) * 0.45); }

/* ============================================================
   4. 头条满宽 —— 品牌站的标志性动作
   ------------------------------------------------------------
   内容一直被框在容器里会显得拘谨。
   头条图冲破容器铺满整个视口宽度，节奏上立刻不一样。
   文字仍收在容器里，保持可读。
   ============================================================ */
@media (min-width: 900px) {
	.jg-card--lead .jg-card__media {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		aspect-ratio: 21 / 9;      /* 满宽了就该更扁，否则一屏装不下 */
	}
	.jg-card--lead .jg-card__body {
		padding-top: 2.4em;
	}
}

/* ============================================================
   5. 头条标题也要大
   ============================================================ */
.jg-card--lead .jg-card__title {
	font-size: clamp(1.875rem, 1.1rem + 3vw, 3.25rem);
	font-weight: 200;
	letter-spacing: .09em;
}

.jg-card--lead .jg-card__standfirst {
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
	margin-top: 1.6em;
}

/* ============================================================
   6. 单篇标题同步放大 —— 全站尺度要一致
   ============================================================ */
.jg-single__title {
	font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem);
	font-weight: 200;
}
.jg-single__header { padding-block: calc(var(--jg-section-y) * .9) var(--jg-stack-gap); }

/* ============================================================
   7. 遮罩加深
   ------------------------------------------------------------
   字放到 94px 之后覆盖面积大得多，撞上高光区域的概率也高得多
   （实测 "EXPLAINED" 正压在金属扣的反光上）。
   左侧从 .72 加到 .84，中段 .48→.58，右侧保持通透好让图透出来。

   ⚠ 注意：`cover` 状态下方图的宽度正好等于容器宽度，
     所以 background-position 的**横向值无效**，只有纵向值起作用。
     想横向挪主体只能改 background-size 或换图，别在横向百分比上白费力气。
   ============================================================ */
.jg-hero__media::after {
	background: linear-gradient(
		100deg,
		/* ⚠ 换成明亮的海边图之后遮罩必须加重：
		     浅色天空的亮度接近白字，.58 那档白字直接糊没。
		     左侧 .88 保证标题区绝对可读，右侧留 .26 让画面透出来。
		     **换图必调这组值** —— 深色图可以更透，亮色图必须更重。 */
		rgb(var(--jg-ink) / .88) 0%,
		rgb(var(--jg-ink) / .68) 40%,
		rgb(var(--jg-ink) / .40) 70%,
		rgb(var(--jg-ink) / .26) 100%
	);
}