/*
 * 新淦线门户 —— 排版即设计。
 *
 * 【方向：编辑/报纸风】
 * 这个站没有大图、没有渐变、没有卡片阴影，靠字体层级、栏宽和留白撑住。
 * 原因有两个：
 *   1. 手上没有一张真实的本地照片。现有八个频道图全是 Unsplash 的外国素材，
 *      门户上再用同类图，做什么排版都救不回来——素材图是"模板味"最大的来源。
 *   2. 备案审核和搜索引擎读的是文字。把预算花在文字的可读性上，
 *      比花在装饰上划算。
 *
 * 【刻意不用的东西】
 * 紫蓝渐变、玻璃拟态、模糊光斑、等宽三卡片、数字滚动、无脸插画、
 * 标题里的 emoji。这些凑在一起就是"看起来像 AI 生成的网站"。
 *
 * 【中文排版的几处】
 * 正文行高 1.8（中文方块字比拉丁字母更需要行距）；
 * 不用 300/200 这种细字重（中文细体在普通屏幕上发虚）；
 * 标题用 sans、正文也用 sans——中文衬线在小字号下笔画会糊。
 */

:root {
	/* 纸 + 墨。绿色只做点缀，不做大面积——大面积的品牌色是 APP 的活，不是门户的 */
	--paper: #fbfaf7;
	--ink: #14171a;
	--ink-2: #3d444b;
	--ink-3: #6b737c;
	--rule: #e2ded6;
	--rule-2: #cfc9be;
	--accent: #07733c;
	--max: 1080px;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
		'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', sans-serif;
	font-size: 16px;
	line-height: 1.8;
	/* 中文标点挤压，避免句号后出现一个大洞 */
	text-spacing-trim: space-first;
}

a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-2);
}

a:hover {
	border-bottom-color: var(--accent);
	color: var(--accent);
}

.wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 28px;
}

/* ── 页眉 ──────────────────────────────────────────── */

.masthead {
	border-bottom: 2px solid var(--ink);
}

.masthead-in {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0 16px;
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 12px;
	border: 0;
}

.brand-name {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ink);
}

.brand-note {
	font-size: 13px;
	color: var(--ink-3);
	letter-spacing: 0.02em;
}

.nav {
	display: flex;
	gap: 22px;
	font-size: 15px;
}

.nav a {
	border-bottom: 0;
	color: var(--ink-2);
}

.nav a:hover,
.nav a[aria-current='page'] {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── 头版 ──────────────────────────────────────────── */

.lede {
	padding: 64px 0 52px;
	border-bottom: 1px solid var(--rule);
}

/*
 * 主标题。用 clamp 而不是媒体查询：一行 CSS 覆盖从手机到宽屏，
 * 而且中间尺寸不会突然跳一档。
 */
.lede h1 {
	margin: 0;
	font-size: clamp(30px, 5.2vw, 54px);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	max-width: 16em;
}

.lede-sub {
	margin: 22px 0 0;
	max-width: 34em;
	font-size: 17px;
	color: var(--ink-2);
}

.lede-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
}

.btn {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--ink);
	border-radius: 2px;
	font-size: 15px;
	background: transparent;
	color: var(--ink);
}

.btn:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.btn--solid {
	background: var(--ink);
	color: var(--paper);
}

.btn--solid:hover {
	background: var(--accent);
	border-color: var(--accent);
}

/* ── 正文区：两栏，不居中 ────────────────────────────── */

/*
 * ★ 非对称两栏。左边是正文，右边是边栏。
 *   居中的单栏 + 三个等宽卡片是模板站的标准长相，这里刻意避开。
 */
.cols {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 56px;
	padding: 52px 0;
	border-bottom: 1px solid var(--rule);
}

.sec-label {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--ink-3);
}

.prose p {
	margin: 0 0 1.1em;
	font-size: 17px;
	color: var(--ink-2);
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose strong {
	color: var(--ink);
	font-weight: 600;
}

/* 边栏：一条条列，用细线分隔，不用卡片 */
.side dl {
	margin: 0;
}

.side dt {
	padding-top: 14px;
	border-top: 1px solid var(--rule);
	font-size: 15px;
	font-weight: 600;
}

.side dd {
	margin: 4px 0 16px;
	font-size: 14px;
	color: var(--ink-3);
	line-height: 1.7;
}

/* ── 频道一览：文字表格，不是图标卡片 ─────────────────── */

.lanes {
	padding: 52px 0;
	border-bottom: 1px solid var(--rule);
}

.lane-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.lane {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.lane-name {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.lane-desc {
	font-size: 15px;
	color: var(--ink-3);
}

/* ── 公告 ──────────────────────────────────────────── */

.notices {
	padding: 52px 0;
	border-bottom: 1px solid var(--rule);
}

.notice-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.notice {
	display: grid;
	grid-template-columns: 7em minmax(0, 1fr);
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.notice-date {
	font-size: 14px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.notice-title {
	font-size: 16px;
	font-weight: 600;
}

.notice-body {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--ink-3);
}

.empty-line {
	padding: 14px 0;
	font-size: 15px;
	color: var(--ink-3);
}

/* ── 内容页（关于 / 协议）───────────────────────────── */

.page-head {
	padding: 56px 0 28px;
	border-bottom: 2px solid var(--ink);
}

.page-head h1 {
	margin: 0;
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.3;
}

.page-head .meta {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--ink-3);
}

.page-body {
	max-width: 44em;
	padding: 40px 0 8px;
}

.page-body h2 {
	margin: 40px 0 14px;
	font-size: 20px;
	line-height: 1.5;
}

.page-body h2:first-child {
	margin-top: 0;
}

.page-body p {
	margin: 0 0 1.05em;
	color: var(--ink-2);
}

.page-body ul {
	margin: 0 0 1.05em;
	padding-left: 1.3em;
	color: var(--ink-2);
}

.page-body li {
	margin-bottom: 0.5em;
}

.page-body strong {
	color: var(--ink);
	font-weight: 600;
}

/* 关于页那张信息表：定义列表比 table 好读，也好在手机上折行 */
.facts {
	margin: 0;
	max-width: 44em;
}

.facts div {
	display: grid;
	grid-template-columns: 8em minmax(0, 1fr);
	gap: 20px;
	padding: 15px 0;
	border-bottom: 1px solid var(--rule);
}

.facts dt {
	font-size: 15px;
	color: var(--ink-3);
}

.facts dd {
	margin: 0;
	font-size: 16px;
}

/* ── 页脚 ──────────────────────────────────────────── */

.foot {
	margin-top: 8px;
	padding: 40px 0 56px;
	border-top: 2px solid var(--ink);
	font-size: 14px;
	color: var(--ink-3);
}

.foot-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 56px;
	margin-bottom: 28px;
}

.foot-col h3 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ink-2);
}

.foot-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot-col li {
	margin-bottom: 6px;
}

.foot-col a {
	border-bottom: 0;
	color: var(--ink-3);
}

.foot-col a:hover {
	color: var(--accent);
}

.foot-legal {
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	line-height: 2;
}

.foot-legal a {
	border-bottom: 0;
	color: var(--ink-3);
}

/* ── 手机 ──────────────────────────────────────────── */

@media (max-width: 760px) {
	.wrap {
		padding: 0 20px;
	}

	.masthead-in {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.nav {
		gap: 18px;
		flex-wrap: wrap;
	}

	.lede {
		padding: 44px 0 36px;
	}

	.cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.lane,
	.notice,
	.facts div {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}