/* ============================================================
   refine.css — 精致度提升层（最后加载，压过前面所有排版）
   ------------------------------------------------------------
   前面几层解决的是「像不像主站」，这一层解决的是「够不够高级」。
   三个杠杆，按影响力排序：

     1. 大字号用轻字重（300）—— 影响最大的一条
     2. 不对称排版 —— 破掉"居中即模板"的观感
     3. 极端尺度对比 —— 标题特别大、辅助信息特别小

   全部在 Poppins 内部完成，不引入新字体族：
   主站用的就是 Poppins，换字体是最大的一处品牌偏离，
   要换应该是一次明确的决定，不该混在"调精致"里悄悄做掉。
   ============================================================ */

/* ============================================================
   1. 轻字重
   ------------------------------------------------------------
   36px 以上还用 400 会显墩实。奢侈品牌的大标题几乎都是 300/200 ——
   气场靠字距和留白撑，不靠笔画粗细。
   小字号仍留 400，300 在 14px 以下会发虚、可读性掉。
   ============================================================ */
.jg-hero__title,
.jg-card--lead .jg-card__title,
.jg-single__title,
.jg-archive__title {
	font-weight: 300;
}

/* ============================================================
   2. 尺度对比拉开
   ------------------------------------------------------------
   原来标题 36 / 正文 17 / meta 12，层级是均匀的。
   高级感来自极端对比：主标题给到 clamp 上限 4rem，
   辅助信息压到 10px 并加大字距 —— 小而精确，不是小而随便。
   ============================================================ */
.jg-hero__title {
	font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem);
	letter-spacing: .12em;      /* 字号越大，字距要越松，否则挤 */
	line-height: 1.08;
}

.jg-card--lead .jg-card__title {
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
	letter-spacing: .1em;
	line-height: 1.18;
}

.jg-single__title {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
	letter-spacing: .1em;
	line-height: 1.15;
}

/* 辅助信息：更小、更宽、更淡 */
.jg-hero__eyebrow,
.jg-card__cat,
.jg-single__cat,
.jg-archive__eyebrow {
	font-size: 10px;
	letter-spacing: .34em;      /* 极宽字距是"精确"的信号 */
}

.jg-single__meta,
.jg-card__meta {
	font-size: 10px;
	letter-spacing: .24em;
}

/* ============================================================
   3. 不对称 —— hero 文字靠左
   ------------------------------------------------------------
   居中是最安全也最"模板"的排法。刊物封面几乎都是文字压一侧、
   留白给另一侧，视觉上更有主张。
   窄屏回到居中：手机上偏左会顶到边，反而局促。
   ============================================================ */
@media (min-width: 900px) {
	/* 文字压一侧、留白给另一侧 —— 居中是最"模板"的排法 */
	.jg-hero__text-col {
		place-items: center start;
		padding-inline: clamp(3rem, 7vw, 8rem);
	}
	.jg-hero__inner { text-align: left; max-width: 40rem; }
	.jg-hero__text  { margin-inline: 0; max-width: 30rem; }

	/* --- 文字放右侧（图里主体偏左时用）--- */
	.jg-hero--text-right .jg-hero__text-col { place-items: center end; }
	.jg-hero--text-right .jg-hero__inner    { text-align: right; }
	.jg-hero--text-right .jg-hero__text     { margin-left: auto; margin-right: 0; }
	/* 遮罩跟着镜像：重的一侧要压在文字那边 */
	.jg-hero--text-right .jg-hero__media::after {
		background: linear-gradient(
			260deg,
			rgb(var(--jg-ink) / .82) 0%,
			rgb(var(--jg-ink) / .58) 42%,
			rgb(var(--jg-ink) / .30) 72%,
			rgb(var(--jg-ink) / .18) 100%
		);
	}
}

/* ============================================================
   4. 网格：编号索引 + 细分隔线
   ------------------------------------------------------------
   给卡片编号（01 02 03…）是杂志目录页的做法，
   一眼就把"文章列表"提升成"栏目索引"。
   竖细线比留白更能体现"精确排布"。
   ============================================================ */
.jg-grid { counter-reset: jg-idx; }

.jg-card--grid {
	counter-increment: jg-idx;
	position: relative;
}

.jg-card--grid .jg-card__body {
	padding-top: 1.6em;
}

/* 编号：压在分类眉左侧，极小号 */
.jg-card--grid .jg-card__cat::before {
	content: counter(jg-idx, decimal-leading-zero);
	margin-right: 1.1em;
	color: rgb(var(--jg-ink) / .35);
	letter-spacing: .1em;
}

/* 竖细线：只在多列时出现，最后一列不画 */
@media (min-width: 700px) {
	.jg-card--grid::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(var(--jg-stack-gap) / -2);
		width: 1px;
		background: rgb(var(--jg-border-soft));
	}
	.jg-card--grid:last-child::before { display: none; }
}

/* ============================================================
   5. 间距对比
   ------------------------------------------------------------
   均匀间距＝平庸。紧的地方更紧（标题和它的分类眉贴住），
   松的地方更松（板块之间拉开），节奏才出得来。
   ============================================================ */
.jg-card__cat { margin-bottom: .8em; }

.jg-grid-wrap { padding-top: calc(var(--jg-section-y) * 0.7); }
.jg-lead { padding-block: calc(var(--jg-section-y) * 0.5) 0; }

/* ============================================================
   6. 细节：正文首字母下沉（单篇）
   ------------------------------------------------------------
   刊物感最便宜也最有效的一个细节。只在单篇正文的第一段用。
   ============================================================ */
.jg-single__body .entry-content > p:first-of-type::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: .82;
	font-weight: 300;
	margin: .06em .12em 0 0;
	color: rgb(var(--jg-ink));
}