/* 站点附加样式：仅补充复刻主题未覆盖的部分（文章详情等），不改动任何原有规则。 */

/* ============================================================
   字体：本站不请求任何外部字体服务（Google Fonts 已整体移除）
   ------------------------------------------------------------
   原主题的 body.custom-font-enabled 指定 "Open Sans"、style.css 指定
   'Roboto'，原本都靠 fonts.googleapis.com 提供。国内访问该域名经常
   超时，字体请求挂住会拖慢首屏。这里改用系统内置字体：
     中文优先 苹方 / 微软雅黑，西文回退 Helvetica / Arial，
   观感与原来的无衬线风格一致，且零外部请求、零阻塞。
   ============================================================ */
body,
body.custom-font-enabled {
	font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
		"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- 文章详情 ---- */
.article-summary {
	font-size: 18px;
	color: #666;
	margin-bottom: 30px;
}

.article-body {
	font-size: 16px;
	line-height: 1.8;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---- 正文图片 ----------------------------------------------------
   旧的写法是「.article-body img 一律 display:block + margin:auto」，
   结果是任何左/右对齐设置都被强制居中，后台选了也不生效。
   现在改成：
     · 默认仍居中（兼容历史文章里裸露的 <img>），
     · 一旦元素带了对齐标记（.mr-align-* 或内联 text-align），
       就交回给它的父容器用 text-align 控制。
   ---------------------------------------------------------------- */
.article-body img {
	max-width: 100%;
	height: auto;
	box-shadow: 0 4px 16px rgba(92, 54, 0, 0.18);
}

/* 独立成段的裸图：默认居中 */
.article-body > div > img:only-child,
.article-body > p > img:only-child,
.article-body > img {
	display: block;
	margin: 24px auto;
}

/* 明确指定过对齐的容器：图片回到行内块，由容器的 text-align 决定位置 */
.article-body .mr-fig,
.article-body [class*="mr-align-"],
.article-body [style*="text-align"] {
	display: block;
}

.article-body .mr-align-center { text-align: center; }
.article-body .mr-align-left   { text-align: left; }
.article-body .mr-align-right  { text-align: right; }

.article-body .mr-fig { margin: 24px 0; }

.article-body .mr-fig img,
.article-body [class*="mr-align-"] > img:only-child,
.article-body [style*="text-align"] > img:only-child {
	display: inline-block;
	margin: 0;
}

/* ---- 正文视频（iframe / video）----------------------------------
   后台「插入视频代码」产出的结构：
     <div class="mr-video mr-video-169 mr-align-center"><iframe …></iframe></div>
   外层用「宽高比容器」（height:0 + padding-bottom）承载，内层绝对定位铺满，
   这样无论电脑 / 平板 / 手机，视频都会按容器宽度等比缩放：
   不会横向溢出，也不会因为平台给的固定像素被压扁或留黑边。
   ---------------------------------------------------------------- */
.article-body .mr-video {
	position: relative;
	width: 100%;
	height: 0;
	margin: 24px auto;
	overflow: hidden;
	background: #000;
	box-shadow: 0 4px 16px rgba(92, 54, 0, 0.18);
}

.article-body .mr-video-169 { padding-bottom: 56.25%; }
.article-body .mr-video-43  { padding-bottom: 75%; }
.article-body .mr-video-11  { padding-bottom: 100%; }

/* 竖屏短视频：限制最大宽度并居中，避免在电脑上占满整屏高度 */
.article-body .mr-video-916 {
	padding-bottom: 177.78%;
	max-width: 420px;
}

.article-body .mr-video iframe,
.article-body .mr-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.article-body h2,
.article-body h3 {
	color: #f26604;
	margin: 32px 0 12px;
}

.article-body blockquote {
	margin: 24px 0;
	padding: 12px 20px;
	border-left: 4px solid #ffc955;
	background: #fffdf4;
	color: #666;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}

.article-body th,
.article-body td {
	border: 1px solid #e2dcc4;
	padding: 8px 12px;
}

.article-body th {
	background: #fff6e2;
	text-align: left;
}

/* ============================================================
   移动端修正
   本文件在主题样式（style.css 等）之后加载，用于覆盖原主题的
   绝对定位 / 负边距写法在窄屏下的问题。
   ============================================================ */

/* ---- 1. 首页「最新 4 篇文章」：窄屏改为每行 2 个 ---- */
@media (max-width: 780px) {
	/* 原主题在 780px 以下把每个 cell 设为 width:100%（一行一个），
	   这里改为 flex 换行 + 每行 2 个 */
	#pg-5-2.panel-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-start;
		justify-content: flex-start;
	}
	#pg-5-2 .panel-grid-cell {
		width: 50%;
		max-width: 50%;
		flex: 0 0 50%;
		/* 关键：flex 项默认 min-width:auto，单元格内 200px 宽的图片会把它撑满一行，
		   置 0 后才能真的两个并排 */
		min-width: 0;
		padding: 0 8px;
		box-sizing: border-box;
		overflow: hidden;
	}
	#pg-5-2 .panel-grid-cell img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/* ---- 2. 「Let's make it pop!」工具插画：窄屏回归文档流并居中 ----
   原主题用 position:absolute + 负边距实现“跨分区叠加”，窄屏会把图片推到屏幕外。
   实测可见比例：1200px→91%、1024→74%、810→53%、600 及以下→21%。
   这里在 1024px 以下改为居中显示，并保留轻微上移以维持“压边”观感。 */
@media (max-width: 1024px) {
	.MR-DIY-tools {
		position: relative !important;
		margin: -30px auto 14px auto !important;
		width: auto !important;
		height: auto !important;
		max-width: 300px;
		z-index: 2;
	}
	.MR-DIY-tools img {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-width: 300px;
		margin: 0 auto;
	}
}

/* ---- 3. 「Did you know?」主插画：保证不越出屏幕 ---- */
@media (max-width: 1024px) {
	.MR-featured-b-top-1-img {
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.MR-featured-b-top-1-img img {
		max-width: 100%;
		height: auto;
	}
}

/* ============================================================
   首页 · 文章无封面时的占位（尺寸与 200×265 书封一致，避免破图）
   ============================================================ */
.MR-no-cover {
	display: block;
	width: 200px;
	height: 265px;
	margin: 0 auto;
	background: #f4f2ee url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="265"><rect width="200" height="265" fill="none" stroke="%23d8d2c8" stroke-width="2"/></svg>') center/100% 100% no-repeat;
	color: #b3aca2;
	font-size: 14px;
	line-height: 265px;
	text-align: center;
}

/* ============================================================
   文章详情 · 下载区域（配色与按钮沿用站点橙色系，保持整体风格一致）
   ============================================================ */
.MR-download {
	max-width: 720px;
	margin: 40px auto 28px auto;
	border: 2px solid #f26604;
	background: #fffaf2;
	box-shadow: 0 6px 0 rgba(242, 102, 4, .14);
}

.MR-download-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: #f26604;
	color: #fff;
	font-size: 20px;
	letter-spacing: 1px;
}

.MR-download-head .MR-dl-ico {
	font-size: 18px;
	line-height: 1;
}

.MR-download-head .MR-dl-title {
	flex: 1;
}

.MR-download-head .MR-dl-source {
	font-size: 12px;
	letter-spacing: 0;
	padding: 3px 10px;
	border: 1px solid rgba(255, 255, 255, .7);
	white-space: nowrap;
}

.MR-download-body {
	padding: 22px 22px 26px 22px;
	text-align: center;
}

.MR-dl-note {
	font-size: 16px;
	color: #7a6a58;
	margin: 0 0 12px 0;
}

.MR-dl-file,
.MR-dl-code {
	font-size: 16px;
	color: #4a4038;
	margin: 0 0 16px 0;
	word-break: break-all;
}

.MR-dl-code b {
	color: #f26604;
	letter-spacing: 2px;
}

.MR-download-btn {
	display: inline-block;
	min-width: 160px;
	padding: 0 26px;
	height: 44px;
	line-height: 44px;
	background-color: #f26604;
	color: #FFFFFF !important;
	font-family: 'MRF', 'Microsoft YaHei', 'PingFang SC', sans-serif;
	font-size: 22px;
	text-align: center;
	transform: rotate(1deg);
	text-decoration: none;
}

.MR-download-btn:hover {
	background-color: grey;
	color: #FFFFFF !important;
	transform: rotate(-1deg);
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	transition: 0.4s ease;
}

/* ============================================================
   大赛页
   ============================================================ */
.MR-contest-hero {
	padding: 6px 0 4px 0;
}

/* hero 只有一栏内容，必须显式占满整行。
   否则 SiteOrigin 的 .panel-grid-cell 默认按 50% 排布（桌面约 442px），
   h1 的 text-align:center 只在这半个宽度的盒子里居中 —— 整页看起来
   就像是标题左对齐。文章页 / 图集页的 cell 本来就是整行，所以正常。 */
.MR-contest-hero .panel-grid-cell {
	width: 100%;
}

.MR-contest-lead {
	font-size: 17px;
	color: #6b6259;
	line-height: 1.9;
}

/* 年度标签：水平横列 */
.MR-contest-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 10px 0 26px 0;
}

.MR-contest-tab {
	display: inline-block;
	padding: 9px 26px;
	border: 2px solid #f26604;
	background: #fff;
	color: #f26604 !important;
	font-size: 18px;
	text-decoration: none;
	transition: background .18s, color .18s;
}

.MR-contest-tab:hover,
.MR-contest-tab.active {
	background: #f26604;
	color: #FFFFFF !important;
}

/* 赛事信息 */
.MR-contest-info {
	text-align: center;
}

.MR-contest-cover img {
	max-width: 100%;
	height: auto;
	margin: 0 auto 22px auto;
	display: block;
	box-shadow: 0 4px 16px rgba(92, 54, 0, .2);
}

.MR-contest-title {
	color: #f26604;
	font-size: 32px;
	margin: 0 0 8px 0;
}

.MR-contest-sub {
	font-size: 17px;
	font-style: italic;
	color: #8a8177;
	margin: 0 0 16px 0;
}

.MR-contest-intro {
	font-size: 16px;
	line-height: 1.9;
	color: #4a4038;
	max-width: 820px;
	margin: 0 auto 14px auto;
}

.MR-contest-body {
	font-size: 15px;
	line-height: 1.9;
	color: #6b6259;
	max-width: 820px;
	margin: 0 auto;
	text-align: left;
	border-top: 1px dashed #e6d9c6;
	padding-top: 16px;
}

/* 作品网格 */
.MR-contest-works-head {
	text-align: center;
	color: #7866c1;
	font-size: 26px;
	margin: 34px 0 20px 0;
}

.MR-contest-empty {
	text-align: center;
	color: #9a9089;
	font-size: 16px;
	padding: 24px 0 40px 0;
}

.MR-contest-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: center;
}

.MR-contest-work {
	display: block;
	width: calc(33.333% - 18px);
	min-width: 250px;
	box-sizing: border-box;
	background: #fffdf9;
	border: 1px solid #f0e2cf;
	padding: 14px;
	text-decoration: none;
	transition: box-shadow .2s, transform .2s;
}

.MR-contest-work:hover {
	box-shadow: 0 8px 22px rgba(92, 54, 0, .16);
	transform: translateY(-3px);
}

.MR-contest-work-img {
	position: relative;
	width: 100%;
	padding-top: 72%;
	overflow: hidden;
	background: #f6f3ee;
	margin-bottom: 12px;
}

.MR-contest-work-img img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.MR-contest-noimg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8afa6;
	font-size: 14px;
}

.MR-contest-award {
	display: inline-block;
	padding: 3px 12px;
	margin-bottom: 8px;
	background: #ffc955;
	color: #6b4b00;
	font-size: 13px;
}

.MR-contest-work-title {
	margin: 0 0 4px 0;
	font-size: 19px;
	color: #f26604;
}

.MR-contest-work-author {
	margin: 0 0 8px 0;
	font-size: 14px;
	color: #8a8177;
}

.MR-contest-work-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: #5c544c;
}

@media (max-width: 780px) {
	.MR-contest-work { width: calc(50% - 13px); min-width: 0; }
	.MR-contest-title { font-size: 25px; }
	.MR-contest-tab { padding: 8px 18px; font-size: 16px; }
}

@media (max-width: 480px) {
	.MR-contest-work { width: 100%; }
}

/* ============================================================
   文章列表页 articles.html
   ============================================================ */
.MR-articles-head { text-align: center; }

.MR-articles-count {
	font-size: 15px;
	color: #8a8177;
	margin-top: 6px;
}

.MR-articles-empty {
	width: 100%;
	text-align: center;
	color: #9a9089;
	font-size: 16px;
	padding: 30px 0 40px 0;
}

/* 桌面端：每行 4 个。
   首页那 4 个格子是因为 #pgc-5-2-0 ~ #pgc-5-2-3 各有 25% 的 ID 规则，
   且栅格容器是 flex-wrap:nowrap —— 4 个正好排一行。
   文章列表要放 16 个，所以必须「改成自动换行」，并把同样的 25% 宽度
   与 30px 列间距套用到全部格子。 */
@media (min-width: 781px) {
	#pg-5-2.MR-articles-grid.panel-grid {
		flex-wrap: wrap;
		justify-content: flex-start;
		column-gap: 30px;
	}
	#pg-5-2.MR-articles-grid .panel-grid-cell {
		width: 25%;
		width: calc(25% - (0.75 * 30px));
	}
}

/* 分页器：沿用站点橙色体系（与大赛页年度标签同一套视觉） */
.MR-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 34px 0 6px 0;
}

.MR-pager-btn,
.MR-pager-num {
	display: inline-block;
	min-width: 44px;
	height: 44px;
	line-height: 42px;
	padding: 0 14px;
	text-align: center;
	border: 2px solid #f26604;
	background: #fff;
	color: #f26604 !important;
	font-size: 17px;
	text-decoration: none;
	box-sizing: border-box;
}

.MR-pager-num { padding: 0 6px; }

.MR-pager-num.active {
	background: #f26604;
	color: #FFFFFF !important;
	font-weight: 700;
}

.MR-pager-btn:hover,
.MR-pager-num:hover {
	background: #f26604;
	color: #FFFFFF !important;
	text-decoration: none;
}

.MR-pager-btn.disabled {
	border-color: #e2ddd6;
	background: #faf9f7;
	color: #b8afa6 !important;
}

.MR-pager-dots {
	line-height: 44px;
	color: #b8afa6;
	padding: 0 2px;
}

.MR-pager-info {
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #8a8177;
	margin-top: 4px;
}

@media (max-width: 480px) {
	.MR-pager { gap: 7px; }
	.MR-pager-btn, .MR-pager-num { min-width: 38px; height: 38px; line-height: 36px; font-size: 15px; padding: 0 10px; }
	.MR-pager-num { padding: 0 5px; }
	.MR-pager-dots { line-height: 38px; }
}


/* ==========================================================
   文章正文：编辑器插入的图片与附件
   （后台编辑器插入的 HTML 直接在前台呈现，这里统一外观）
   ========================================================== */

/* 附件块（新编辑器以 <div> 承载 <a class="mr-attach">） */
.article-body div:has(> a.mr-attach) { margin: 8px 0; }

.article-body .mr-attach {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 14px;
	margin: 6px 0;
	background: #fdf6ef;
	border: 1px solid #f2cfae;
	border-radius: 4px;
	color: #b0500a;
	font-size: 15px;
	text-decoration: none;
	line-height: 1.5;
}

.article-body .mr-attach:hover {
	background: #fbeada;
	text-decoration: none;
}

.article-body .mr-attach-name {
	font-weight: 700;
	word-break: break-all;
}

.article-body .mr-attach-meta {
	color: #8a8177;
	font-size: 13px;
}


/* 文章详情页：分类标识 + 附件尺寸格式 */
.MR-article-cat {
	font-size: 14px;
	color: #8a8177;
	letter-spacing: .5px;
	margin: 6px 0 2px;
}

.MR-dl-file b { word-break: break-all; }

.MR-dl-meta {
	color: #8a8177;
	font-size: 13px;
}


/* ==========================================================
   平台矩阵：彩色圆形平台图标
   ----------------------------------------------------------
   由后台「首页管理 → 平台矩阵」维护，**仅在首页**替换页头的
   社交按钮（site-chrome.js 里按 body 标识判断）；其它页面保持
   站点原有的 PNG 社交图标，不受影响。

   ★ 图标大小：改下面这一个变量即可（首页压边量会自动跟随）。
   ========================================================== */
:root {
	--MR-pf-size: 48px;   /* 平台矩阵图标直径 */
	--MR-pf-gap: 14px;    /* 图标间距 */
}

.MR-sm-buttons-group.MR-social-live {
	width: auto !important;
	max-width: 100%;
	height: auto;
}

/* HTML 里的社交图标块已清空（数据全部来自后台），矩阵由 JS 异步注入。
   注入前给一个与图标等高的占位，避免页头高度先塌陷再撑开造成跳动。 */
.MR-sm-buttons-group {
	min-height: var(--MR-pf-size, 48px);
}

.MR-pf-title {
	display: block;
	text-align: center;
	font-size: 15px;
	letter-spacing: 1px;
	color: #6b6259;
	margin: 0 0 10px;
}

.MR-pf-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--MR-pf-gap, 14px);
	/* 必须显式写宽度，不能靠 width:auto。
	   本行是 <span>，父容器继承主题的 text-align: justify。实测：当页头
	   导航 <ul> 处于空状态时（js/navigation.js 检测到菜单为空 → 把
	   .menu-toggle 按钮设为 display:none），本行在页头里的 used width
	   会被算成 0（offsetWidth=0、computed width=0px），flex 于是逐项换行，
	   一排图标竖成了一列；导航 ul 一有内容（按钮恢复显示）就正常。
	   显式写 width:100% 后，该状态下同样稳定：宽 335、单行 48 高。 */
	width: 100%;
	box-sizing: border-box;
}

.MR-pf-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.MR-pf-plain { cursor: default; }

/* 尺寸用 !important 是为了盖过 JS 写在元素上的内联宽高，
   保证「改一处变量 = 全局生效」。 */
.MR-pf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--MR-pf-size, 48px) !important;
	height: var(--MR-pf-size, 48px) !important;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
	transition: transform .22s ease, box-shadow .22s ease;
}

.MR-pf-icon svg {
	width: 58%;
	height: 58%;
	display: block;
}

.MR-pf-link:hover .MR-pf-icon {
	transform: translateY(-3px) scale(1.06);
	box-shadow: 0 7px 16px rgba(0, 0, 0, .22);
}

/* 窄屏：图标尺寸不变（--MR-pf-size），只收紧点间距与标题字号，
   避免一排图标被挤成两行。 */
@media (max-width: 600px) {
	:root { --MR-pf-gap: 9px; }
	.MR-pf-title { font-size: 14px; margin-bottom: 8px; }
}


/* ==========================================================
   图集页 photo.html
   · 图册总览：每行 3 个、每页 12 个、图册标题在图下方
   · 图册详情：图片九宫格 + 点击放大（灯箱）
   容器自己在 JS 里带了 .MR-albums-grid / .MR-photos-grid 类，
   这里用 !important 覆盖主题基于 #pgc-5-2-N 写死的 25% 宽度。
   ========================================================== */
.MR-albums-head { text-align: center; }

.MR-albums-count {
	font-size: 15px;
	color: #8a8177;
	margin-top: 6px;
}

.MR-albums-empty {
	width: 100%;
	text-align: center;
	color: #9a9089;
	font-size: 16px;
	padding: 30px 0 40px 0;
}

/* ---- 分类标签（沿用站点橙色体系） ---- */
.MR-album-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 16px 0 4px;
}

.MR-album-cat {
	display: inline-block;
	padding: 8px 20px;
	border: 2px solid #f26604;
	background: #fff;
	color: #f26604 !important;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	transition: background .18s, color .18s;
}

.MR-album-cat span {
	display: inline-block;
	margin-left: 6px;
	font-size: 12px;
	opacity: .72;
}

.MR-album-cat:hover,
.MR-album-cat.active {
	background: #f26604;
	color: #FFFFFF !important;
	text-decoration: none;
}

/* ---- 网格：桌面每行 3 个 ----
   width/flex-direction 必须显式写死：
     · 主题在 @media (max-width:780px) 给 #pg-5-2 设了 flex-direction:column，
       会让 wrap 换行失效；
     · #pg-5-2 本身是 #pl-5 的 flex item，宽度默认由内容决定。子项一旦用
       「百分比宽度」（如 50%），父宽与子宽互相依赖，浏览器会把容器收缩到
       最小内容宽度（实测塌到 45px），整页横向溢出。
   显式撑满 + 锁定行方向后，百分比才有稳定的参照。 */
.MR-albums-grid,
.MR-photos-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	gap: 26px 24px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.MR-albums-grid > .panel-grid-cell,
.MR-photos-grid > .panel-grid-cell {
	flex: 0 0 auto !important;
	width: calc((100% - 48px) / 3) !important;
	max-width: calc((100% - 48px) / 3) !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

/* 分页器同样是 .panel-grid-cell（但没有卡片类），必须还原成独占整行，
   否则会被上面的 1/3 宽度规则命中，缩成窄窄一条贴在左边。 */
.MR-albums-grid > .panel-grid-cell:not(.MR-album-cell),
.MR-photos-grid > .panel-grid-cell:not(.MR-photo-cell) {
	width: 100% !important;
	max-width: 100% !important;
}

.MR-albums-grid .so-panel,
.MR-photos-grid .so-panel { margin-bottom: 0 !important; }

/* ---- 图册卡片 ---- */
.MR-album-card {
	background: #fffdf9;
	border: 1px solid #f0e2cf;
	padding: 12px 12px 16px;
	text-align: center;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}

.MR-album-card:hover {
	box-shadow: 0 10px 24px rgba(92, 54, 0, .16);
	transform: translateY(-3px);
	border-color: #f2cfae;
}

.MR-album-cover {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 75%;            /* 4:3，配合 object-fit 保证每行高度一致 */
	overflow: hidden;
	background: #f6f3ee;
	text-decoration: none;
}

.MR-album-cover img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.MR-album-card:hover .MR-album-cover img { transform: scale(1.04); }

.MR-album-noimg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8afa6;
	font-size: 14px;
}

.MR-album-count {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 9px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
}

.MR-album-title {
	margin: 12px 0 4px;
	font-size: 19px;
	line-height: 1.45;
}

.MR-album-title a {
	color: #f26604;
	text-decoration: none;
}

.MR-album-title a:hover { text-decoration: underline; }

.MR-album-sub {
	margin: 0;
	font-size: 14px;
	color: #8a8177;
	line-height: 1.6;
}

.MR-album-meta {
	margin: 6px 0 0;
	font-size: 13px;
	color: #b8afa6;
	letter-spacing: .5px;
}

/* ---- 图册详情头部 ---- */
.MR-album-desc {
	max-width: 820px;
	margin: 10px auto 0;
	font-size: 15px;
	line-height: 1.9;
	color: #6b6259;
	text-align: left;
}

.MR-album-back { margin: 16px 0 4px; }

.MR-album-sub { font-style: italic; }

/* ---- 图册内的图片 ---- */
.MR-photo-item {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 75%;
	overflow: hidden;
	background: #f6f3ee;
	border: 1px solid #f0e2cf;
	text-decoration: none;
}

.MR-photo-item img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.MR-photo-item:hover img { transform: scale(1.05); }

.MR-photo-cap {
	margin: 8px 0 0;
	font-size: 13px;
	color: #8a8177;
	text-align: center;
	line-height: 1.6;
}

/* ---- 灯箱 ---- */
.MR-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9990;
	background: rgba(18, 14, 10, .94);
	display: flex;
	align-items: center;
	justify-content: center;
}
.MR-lightbox[hidden] { display: none; }
body.MR-lb-open { overflow: hidden; }

.MR-lb-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 64px;
	box-sizing: border-box;
}

.MR-lb-stage img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.MR-lb-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	text-align: center;
	color: #f2e9dd;
	font-size: 14px;
	padding: 0 70px;
	line-height: 1.6;
}

.MR-lb-counter {
	position: absolute;
	left: 14px;
	top: 12px;
	color: #cfc4b6;
	font-size: 13px;
	letter-spacing: 1px;
}

.MR-lightbox button {
	position: absolute;
	width: 44px;
	height: 44px;
	line-height: 40px;
	text-align: center;
	font-size: 26px;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}

.MR-lightbox button:hover { background: #f26604; border-color: #f26604; }

.MR-lb-close { top: 12px; right: 14px; font-size: 22px; }
.MR-lb-prev  { left: 12px;  top: 50%; margin-top: -22px; }
.MR-lb-next  { right: 12px; top: 50%; margin-top: -22px; }

/* ==========================================================
   多终端适配
   ========================================================== */

/* ---- 1. 文章内页「资料下载」卡片：手机端不再挤压变形 ----
   原来按钮是固定 min-width:160px + height:44px + font-size:22px 的行内块，
   容器左右各 22px 内边距，在 320~360px 的窄屏上文字会撑出按钮、行高错位；
   标题栏又是不换行的 flex，来源标签会把标题挤没。 */
@media (max-width: 640px) {
	/* 左右保持 auto —— 之前写成 0 会覆盖上方的居中规则，卡片会贴到左边 */
	.MR-download { margin: 28px auto 22px auto; max-width: 100%; }

	.MR-download-head {
		flex-wrap: wrap;
		gap: 6px 8px;
		padding: 10px 14px;
		font-size: 17px;
		letter-spacing: .5px;
	}

	.MR-download-head .MR-dl-title { flex: 1 1 auto; min-width: 0; }

	.MR-download-head .MR-dl-source {
		font-size: 11px;
		padding: 2px 8px;
		margin-left: auto;
	}

	.MR-download-body { padding: 16px 14px 20px; }

	.MR-dl-note,
	.MR-dl-file,
	.MR-dl-code { font-size: 14px; margin-bottom: 10px; }

	.MR-download-btn {
		display: block;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		height: 46px;
		line-height: 46px;
		padding: 0 10px;
		font-size: 19px;
		transform: none;            /* 手机端去掉倾斜，避免右侧溢出 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.MR-download-btn:hover { transform: none; }
}

/* ---- 2. 文章正文：表格 / 长链接 / 代码块在窄屏不撑破页面 ---- */
.article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.article-body a,
.article-body .mr-attach-name { word-break: break-word; }

.article-body pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
	.article-body { font-size: 15px; line-height: 1.85; }
	.article-body h1 { font-size: 22px; }
	.article-body h2 { font-size: 19px; }
	.article-body h3 { font-size: 17px; }
	.article-body th,
	.article-body td { padding: 7px 9px; font-size: 14px; }
	.article-body .mr-attach { font-size: 14px; padding: 7px 11px; }
}

/* ---- 3. 图集页：1440 三列 / ≤1024 两列 / ≤640 仍两列（与文章列表观感一致） ----
   选择器只锁定卡片本身（.MR-album-cell / .MR-photo-cell），
   分页器同样是 .panel-grid-cell，必须排除，否则会被压成半宽。 */
@media (max-width: 1024px) {
	.MR-albums-grid > .MR-album-cell,
	.MR-photos-grid > .MR-photo-cell {
		width: calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
}

@media (max-width: 640px) {
	.MR-albums-grid,
	.MR-photos-grid { gap: 16px 12px !important; }

	.MR-albums-grid > .MR-album-cell,
	.MR-photos-grid > .MR-photo-cell {
		width: calc((100% - 12px) / 2) !important;
		max-width: calc((100% - 12px) / 2) !important;
	}

	/* 分页器始终独占整行 */
	.MR-albums-grid > .panel-grid-cell:not(.MR-album-cell),
	.MR-photos-grid > .panel-grid-cell:not(.MR-photo-cell) {
		width: 100% !important;
		max-width: 100% !important;
	}

	.MR-album-card { padding: 7px 7px 11px; }
	.MR-album-title { font-size: 14px; }
	.MR-album-cat { padding: 6px 11px; font-size: 13px; }
	.MR-albums-head .MR-big-h1 { font-size: 30px; }

	.MR-lb-stage { padding: 48px 12px; }
	.MR-lb-caption { padding: 0 56px; font-size: 13px; }
	.MR-lb-prev, .MR-lb-next { width: 38px; height: 38px; line-height: 34px; font-size: 22px; margin-top: -19px; }
	.MR-lb-prev { left: 4px; }
	.MR-lb-next { right: 4px; }
}

/* ---- 4. 全站兜底：任何页面都不出现横向滚动条 ---- */
html, body { max-width: 100%; overflow-x: hidden; }

img, video, iframe, table { max-width: 100%; }


/* ==========================================================
   页头基础：必须自己包住内部浮动
   ----------------------------------------------------------
   站点原有的社交图标是 .MR-img-sm（width:25% + float:left），
   而 .MR-sm-buttons-group 自身没有清除浮动，高度会塌陷成 0 ——
   浮动图标溢出到页头下方，而 #main.wrapper 带 overflow:hidden（BFC），
   会「避让浮动」被整体挤到右侧，导致整页横向溢出、内容偏移。
   给页头建 BFC 即可根治。用 flow-root 而不是 overflow:hidden：
   它只包含浮动、不裁剪溢出内容，首页矩阵的压边依然能露出页头之外。
   ========================================================== */
.site-header { display: flow-root; }


/* ==========================================================
   首页轮播：必须突破 #main 的裁剪
   ----------------------------------------------------------
   style.css 给 #main.wrapper 设了 overflow:hidden，
   而首页轮播是靠 margin-top:-114px 上拉、**溢出到 #main 顶部之外**才被
   页头矩阵压住的。overflow:hidden 会把超出 #main 上边界的那截整块裁掉
   （实测轮播元素 rect 顶部 308，#main 顶部 380 —— 顶部 72px 被裁），
   结果就是「矩阵和轮播之间凭空多出一大片空白，压边完全看不见」。
   换成 flow-root：同样建立 BFC（继续包住内部浮动），但不裁剪溢出内容。
   ========================================================== */
body.MR-page-home #main.wrapper {
	overflow: visible;
	display: flow-root;
}


/* ==========================================================
   页头「平台矩阵」版面修正（仅首页）
   ----------------------------------------------------------
   矩阵只在首页出现（见 js/site-chrome.js），其它页面保持站点原有的
   PNG 社交图标，因此这里所有规则都带 body.MR-page-home 限定。

   压边原理（仅首页）：矩阵是 .site-header 的最后一个子元素。
   两者之间隔着 #main / #content / entry-content / panel 好几层，中间各层的
   margin 会随主题断点（1200/1024/810/700/600/460）变化，用固定值必然在
   某些宽度失准。所以压边量交给 js/site-chrome.js 的 alignHomeOverlap()
   实测校准 —— 目标恒为「矩阵底边 = 轮播上沿 + 半个图标高」。
   下面的 CSS 只提供 JS 尚未执行/被禁用的兜底。
   ========================================================== */

/* ---------- 1. 首页：矩阵一半覆盖在轮播图上 ---------- */
body.MR-page-home .site-header {
	padding-bottom: 34px;
}

body.MR-page-home .site-header .MR-sm-buttons-group.MR-social-live {
	position: relative;
	z-index: 6;                                       /* 必须高于轮播，才能压在上面 */
	transform: translateY(calc(var(--MR-pf-size, 48px) / 2)); /* JS 校准前的兜底值 */
}

/* 轮播自身带 z-index:1，但没有定位时 z-index 不生效，补上定位让层叠关系明确 */
body.MR-page-home .MR-home-slider {
	position: relative;
	z-index: 1;
}

/* ---------- 2. 内页：页头只留 logo + 菜单，不再为矩阵预留空间 ----------
   原来 内页 页头 padding-bottom:24px + margin-bottom:30px，再叠加主题给
   #menu-main-navigation 的 margin-bottom:25px，导航文字到下方栏目标题之间
   实测有 60px 以上的空白，标题看着「掉」在页面下半部。
   这里统一收紧这三处（首页不在此列，仍走上面的压边规则）。 */
body.MR-page-inner .site-header {
	padding-bottom: 6px;
	margin-bottom: 0;
}

body.MR-page-inner .main-navigation ul#menu-main-navigation {
	margin-bottom: 6px;
}

/* ---- 2b. 内页：页头与大标题之间的行距再收一档（仅内页，首页不变）----
   原主题给 .entry-content h1 的 margin 是 24px、line-height 是 1.5。
   内页面包屑式的 75px 大标题（全部文章 / 画廊 / 大赛作品）套上 1.5 倍行高后，
   标题盒高度有 113px —— 文字上下各凭空多出约 19px 的空白，看起来
   「导航离标题很远」。这里只在内页把行高收到 1.2、上边距收到 8px，
   视觉间距从约 49px 降到约 26px，与标题到正文的间距比例协调。
   首页不含 MR-page-inner，因此完全不受影响。 */
body.MR-page-inner h1.MR-big-h1 {
	line-height: 1.2;
	margin-top: 8px;
}

/* 标题行与下方内容之间也一并收紧（列表页头部行 / 大赛页头部行） */
body.MR-page-inner #pg-5-1,
body.MR-page-inner #pg-9-0 {
	margin-bottom: 16px;
}

/* ---------- 3. 文章详情页：正文必须独占整行 ----------
   extra.css 里给「首页最新文章」写的窄屏规则
   `#pg-5-2 .panel-grid-cell{flex:0 0 50%}` 会命中详情页复用的同一个 ID，
   flex-basis 优先于内联 width，会把正文挤成半屏宽 —— 表现就是
   正文图片看起来没居中、下载卡片和返回按钮全部偏到左侧。 */
#pg-5-2.MR-article-one.panel-grid {
	flex-wrap: wrap;
	justify-content: flex-start;
}

#pg-5-2.MR-article-one > .panel-grid-cell {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 0 30px 0 !important;
}

/* 窄屏那条 `#pg-5-2 .panel-grid-cell img{width:100%}` 是给首页卡片缩略图用的，
   详情页正文的图片必须保留自身宽度 —— 否则 310px 的小图会被拉满整屏。 */
#pg-5-2.MR-article-one .panel-grid-cell img {
	width: auto;
	height: auto;
	max-width: 100%;
}

/* ---------- 3b. 单页管理产物：正文独占整行（与详情页同因同治）----------
   inc/pagestatic.php 生成的活动页 / 自定义页复用了 #pg-5-2 这个 ID，
   于是上面那条「首页最新文章 → 窄屏每行 2 个」的
   `#pg-5-2 .panel-grid-cell{width:50%;max-width:50%;flex:0 0 50%}`
   也命中了它们。注意 flex-basis 无法被内联的 width:100% 覆盖 ——
   结果就是 390px 手机上正文只剩 159px 宽（不到半屏），
   封面 / 信息项被挤成窄条、正文图片全部缩水，正是用户反馈的
   「单页不能自适应」。这里用 MR-sp-body 标记类把宽度还原为整行。 */
@media (max-width: 780px) {
	#pg-5-2.MR-sp-body.panel-grid {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	#pg-5-2.MR-sp-body > .panel-grid-cell,
	#pg-5-2.MR-sp-body .panel-grid-cell {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		overflow: visible;
	}

	/* 覆盖首页卡片用的「图片拉满一行」，正文里的小图保持自身尺寸 */
	#pg-5-2.MR-sp-body .panel-grid-cell img {
		width: auto;
		height: auto;
		max-width: 100%;
	}
}

/* 返回首页按钮：在正文宽度内水平居中，窄屏不溢出 */
.MR-back-wrap { text-align: center; }

.MR-back-wrap .more-info-button {
	box-sizing: border-box;
	max-width: 100%;
	margin: -5px auto 0 auto;
}

/* 原主题给首页标题区写了 `margin-top:-50px`（让它与上方内容重叠），
   详情页复用了同一个 panel ID，导致文章标题紧贴页头矩阵（实测只剩 6px）。
   详情页取消这次上拉，与其它内页保持一致的 56px 间距。 */
body.MR-page-article #panel-5-1-0-0 > .panel-widget-style {
	margin-top: 0;
}

/* ---------- 4. 窄屏微调 ---------- */
@media (max-width: 600px) {
	/* 首页：页头底部留白收紧；压边量由 --MR-pf-size 自动决定，无需再写 */
	body.MR-page-home .site-header { padding-bottom: 22px; }

	/* 内页：手机端页头 padding 本身更小，只收 margin */
	body.MR-page-inner .site-header {
		padding-bottom: 6px;
		margin-bottom: 0;
	}

	/* 原主题在窄屏给 .entry-content 塞了 170px 上边距，是留给「悬浮」在
	   页头上的按钮组的空位。复刻站的页头是正常流布局，这个空洞只会让
	   页头和下方内容之间空一大片，这里按页面类型各自收紧。 */
	body.MR-page-inner .entry-content { margin-top: 14px; }
	body.MR-page-home  .entry-content { margin-top: 82px; }
}

/* ============================================================
   页脚：内容全部由 PHP 在服务端渲染（inc/render.php）。后台某栏没填
   数据时会直接输出空的挂载容器并带 style="display:none"，这里的
   :empty 规则作为兜底（例如后台只填了空白字符、或将来改回前端渲染）。
   ============================================================ */
.MR-footer1a:empty,
.MR-footer3:empty,
.MR-footer4:empty,
.MR-footer5:empty,
.MR-footer-credit:empty {
	display: none;
}

/* ============================================================
   轮播：SSR 之后 <ul class="wp1s-bxslider"> 的 HTML 在首屏就存在，
   而 bxSlider 要等 jQuery 加载完才初始化 —— 中间这段空窗期里 5 张
   幻灯片会按文档流竖着摞起来，把页面撑高好几倍（改成 SSR 后新引入
   的跳动，必须在 CSS 里兜住）。

   做法：初始化前只让第一张留在文档流里，其余 li 隐藏 —— 于是 ul 的
   高度天然等于「第一个 li 的真实高度」，与 bxSlider 初始化后给
   .bx-viewport 设的高度分毫不差（实测各断点均为 0 偏差）。视觉上就是
   「第一张图静静待着，等初始化完成后开始轮播」。

   为什么不用 aspect-ratio 锁高：图片是 inline，行盒底部天然带一段
   基线空隙（实测约 8.5px），li 的实际高度 = 图高 + 这段空隙。
   用 aspect-ratio 只能算出图高，比真实值矮 8px —— 初始化完成的瞬间
   整页会被推下去 8px，正好是「跳一下」。让第一个 li 自己撑高就没有
   这个换算误差。

   ⚠️ 不要把这条规则改成「用 overflow 裁剪但仍然保留 5 个 li」以外
   的形态时忘了下面的顺序约束：js/site-ssr.js 的 initCarousel() 必须
   先 $ul.addClass('MR-bx-ready') 再调 $ul.bxSlider()。bxSlider 初始化
   时会遍历所有 li 累加宽度算总宽，若此时隐藏规则还生效，它会以为
   只有一张，轮播直接失效。两者是同一次同步执行，不会产生中间绘制。
   ============================================================ */
.MR-home-slider .wp1s-bxslider:not(.MR-bx-ready) {
	overflow: hidden;
}

.MR-home-slider .wp1s-bxslider:not(.MR-bx-ready) > li + li {
	display: none;
}

/* ============================================================
   参赛作品详情页（work.php）
   ============================================================ */
.MR-work-hero .MR-big-h1 { margin-bottom: 8px; }

.MR-work-crumb {
	font-size: 14px;
	color: #8b9198;
	margin: 0 0 14px 0;
}
.MR-work-crumb a { color: #f26604; text-decoration: none; }
.MR-work-crumb a:hover { text-decoration: underline; }
.MR-work-crumb-sep { margin: 0 8px; color: #c9ced4; }

.MR-work-awardline { margin: 2px 0 10px 0; }
.MR-work-authorline {
	margin: 0 0 4px 0;
	color: #55595f;
	font-size: 15px;
}
.MR-work-nodesc { color: #8b9198; }
.MR-work-extlink { text-align: center; }

/* 作品详情页里的主图：与文章详情页一致，居中且不超宽 */
.article-detail .MR-contest-award { vertical-align: middle; }

/* 详情页正文里的视频容器兜底（编辑器产物也可能落在其它容器里） */
.mr-video {
	position: relative;
	width: 100%;
	height: 0;
	margin: 20px auto;
	overflow: hidden;
	background: #000;
	border-radius: 4px;
}
.mr-video-169 { padding-bottom: 56.25%; }
.mr-video-43  { padding-bottom: 75%; }
.mr-video-11  { padding-bottom: 100%; }
.mr-video-916 { padding-bottom: 177.78%; max-width: 380px; }
.mr-video iframe,
.mr-video video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}

@media (max-width: 640px) {
	.MR-work-authorline { font-size: 14px; }
	.MR-work-crumb { font-size: 13px; }
}

/* ============================================================
   页头：Logo 下方的网站副标题
   ------------------------------------------------------------
   由「全站管理 → 网站标题与副标题」的开关控制是否输出，
   这里只负责排版：居中、字号小于导航、与 Logo 之间留一点呼吸。
   ============================================================ */
.MR-site-headtext {
	text-align: center;
	margin: 6px 0 2px;
}
.MR-site-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: .5px;
	color: #2f3338;
}
.MR-site-sub {
	margin: 2px 0 0;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: .5px;
	color: #6b7178;
}

@media (max-width: 640px) {
	.MR-site-title { font-size: 17px; }
	.MR-site-sub { font-size: 13px; margin-top: 1px; }
}

/* ============================================================
   单页管理：活动模式（event/<别名>.html）
   ------------------------------------------------------------
   上半部分左右结构：左封面、右信息；下半部分是富文本正文。
   窄屏自动折成上下堆叠，避免左右两栏都被压得过窄。
   ============================================================ */
.MR-sp-title { margin-bottom: 22px; }

.MR-ev-top {
	display: flex;
	gap: 34px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.MR-ev-cover {
	flex: 0 0 380px;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: #f4f5f7;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}
.MR-ev-cover img { display: block; width: 100%; height: auto; }
.MR-ev-noimg { color: #b0b6bd; font-size: 14px; padding: 60px 0; }

.MR-ev-info { flex: 1 1 320px; min-width: 0; }

.MR-ev-summary {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.85;
	color: #55595f;
}

.MR-ev-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.MR-ev-list li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 11px 0;
	border-bottom: 1px dashed #e6e8eb;
	line-height: 1.75;
}
.MR-ev-list li:last-child { border-bottom: 0; }

.MR-ev-label {
	flex: 0 0 108px;
	color: #8b9198;
	font-size: 14px;
}
.MR-ev-value {
	flex: 1 1 auto;
	min-width: 0;
	color: #2f3338;
	font-size: 16px;
	word-break: break-word;
}
.MR-ev-empty { color: #9aa0a6; }

.MR-ev-btnrow { margin: 24px 0 0; }
.MR-ev-btn { display: inline-block; }

/* 下半部分正文：与文章详情页正文同宽、同样的行距 */
.MR-ev-bottom { margin-top: 46px; }
.MR-ev-bottom:empty { margin-top: 0; }

@media (max-width: 900px) {
	.MR-ev-top { gap: 20px; }
	.MR-ev-cover { flex: 1 1 100%; }
	.MR-ev-info { flex: 1 1 100%; }
}

@media (max-width: 640px) {
	.MR-ev-label { flex: 0 0 84px; font-size: 13px; }
	.MR-ev-value { font-size: 15px; }
	.MR-ev-list li { padding: 9px 0; }
	.MR-ev-bottom { margin-top: 32px; }
}

/* ============================================================
   手机端（≤600px）页头收紧：logo → 导航按钮 → 栏目标题 紧凑排列
   ------------------------------------------------------------
   成因（两条叠加）：
   ① style.css 在 ≤600px 给 .menu-toggle 写了 margin:140px auto 40px。
      这个值原本是给「悬浮在页头之上的社交按钮组」预留的空位，本站页头
      是正常流布局，于是 140px 整个变成了 logo 与「导航」按钮之间的空档。
   ② .MR-logo-top 是 float:left，而它的父级 hgroup 没有建立 BFC ——
      高度塌缩成 0，logo 溢出到导航区域，导航按钮又带着 140px 上外边距，
      两者位置彻底错位；导航下方再叠 .main-navigation 的 40px 下边距，
      栏目标题 / 详情页标题被整片空白顶下去。

   修法：
   · hgroup 建 BFC（flow-root），logo 高度参与正常布局，不再塌陷；
   · 导航按钮上边距 140px → 12px、下边距 40px → 10px；
   · logo 容器取消 20px 下边距并把图片限高 120px（容器整体 ≤120）；
   · 页头上下 padding 收紧，正文入口 margin-top 收到 8px。

   修改后内页页头总高约由 330px 降到 180px 以内，logo / 导航 / 标题
   依次紧邻，彼此不重叠。只作用于 ≤600px，桌面端与首页版式完全不受影响。
   ============================================================ */
@media (max-width: 600px) {

	/* 1) 让 hgroup 自己包住内部浮动的 .MR-logo-top */
	hgroup { display: flow-root; }

	/* 2) 页头：上下留白收紧（首页仍走它自己的压边规则，这里只管内页） */
	body.MR-page-inner .site-header {
		padding: 12px 16px 10px 16px;
		margin-bottom: 0;
	}

	/* 3) logo：容器高度不超过 120px，去掉与导航之间的 20px 空档 */
	body.MR-page-inner .MR-logo-top {
		float: none;
		margin-bottom: 0;
		max-height: 120px;
	}
	body.MR-page-inner .MR-logo-top img {
		max-height: 120px;
		width: auto;
		height: auto;
	}

	body.MR-page-inner .MR-site-headtext { margin: 6px 0 0 0; }

	/* 4) 导航容器与下方标题之间留 18px（实测值：再小标题会显得被压住） */
	body.MR-page-inner .main-navigation { margin-bottom: 18px; }

	/* 5) 正文入口紧贴导航下方 */
	body.MR-page-inner .entry-content { margin-top: 8px; }
	body.MR-page-inner h1.MR-big-h1 { margin-top: 4px; line-height: 1.2; }
	body.MR-page-article h1.MR-big-h1 { margin-top: 4px; }
}

/* ============================================================
   手机端（≤600px）首页页头同样收紧：与内页保持一致
   ------------------------------------------------------------
   上面的收紧规则只带了 body.MR-page-inner，首页漏掉了 —— 于是首页
   继续吃 style.css 的 .menu-toggle{margin:140px auto 40px}，
   logo 到「导航」按钮之间空出 206px（内页已是 73px），页头总高
   516px（内页 281px），两套页面手机端观感完全不一致。

   这里给首页补齐同样的间距。首页页头末尾还有「平台矩阵」按钮组，
   它靠 transform: translateY() 压在轮播上沿（量值由 js/site-chrome.js
   的 alignHomeOverlap() 按实测校准），页头变矮时矩阵与轮播同步上移，
   相对关系不变，所以压边效果不受影响，只需保持为矩阵预留的
   padding-bottom（22px）不动。
   ============================================================ */
@media (max-width: 600px) {

	/* 1) 页头：只收上边与左右，底部 22px 是矩阵压边的余量，保持原样 */
	body.MR-page-home .site-header {
		padding-top: 12px;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 22px;
	}

	/* 2) logo：与内页同一套约束（容器 ≤120px、不再与下方留 20px 空档） */
	body.MR-page-home .MR-logo-top {
		float: none;
		margin-bottom: 0;
		max-height: 120px;
	}
	body.MR-page-home .MR-logo-top img {
		max-height: 120px;
		width: auto;
		height: auto;
	}
	body.MR-page-home .MR-site-headtext { margin: 6px 0 0 0; }

	/* 3) 导航容器下边距与内页统一 18px */
	body.MR-page-home .main-navigation { margin-bottom: 18px; }
}

/* ============================================================
   手机端（≤600px）导航：取消「导航」按钮，改成与 PC 一致的横排菜单
   ------------------------------------------------------------
   原来窄屏是「点按钮 → 展开竖排菜单」：theme-parent.css 让 ul.nav-menu
   默认 display:none，只有点 <button class="menu-toggle"> 时 JS 才会给它
   加上 .toggled-on 显示出来（见 js/navigation.js）。

   现在窄屏也要常驻横排，所以这里做三件事：
   · 按钮一律不显示 —— 包括**已经生成的静态单页**（event/*.html 里还留着
     这个按钮的 HTML），所以这条规则必须保留，不是给新页面擦屁股的兼容代码；
   · ul.nav-menu 用 flex 强制常显，不再依赖 .toggled-on；
   · 字号用 clamp() 随视口宽度缩放：窄屏自动收小不至于挤成两行，
     屏宽接近 600px 时又回到接近桌面的观感。

   另外主题给 ul.nav-menu 写死了固定高度（桌面横向菜单的高度），窄屏必须
   放开，否则菜单盒子被压扁、内容溢出到下方盖住栏目标题。
   ============================================================ */
@media (max-width: 600px) {

	/* 1) 隐藏汉堡按钮 */
	body .main-navigation .menu-toggle {
		display: none !important;
	}

	/* 2) 菜单常驻横排，居中自适应 */
	body .main-navigation ul.nav-menu,
	body .main-navigation div.nav-menu > ul {
		display: flex !important;
		flex-wrap: wrap;                    /* 导航项变多时换行，不至于挤出屏幕 */
		justify-content: center;
		align-items: center;
		gap: clamp(8px, 3.2vw, 20px);
		width: 100%;
		height: auto !important;            /* 放开主题写死的固定高度 */
		min-height: 0 !important;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* 3) 菜单项：主题给的是 24px 字号 + 左右各 20px 外边距，窄屏太占地方；
	      间距交给上面的 gap，字号随屏宽自适应 */
	body .main-navigation ul.nav-menu > li {
		display: inline-block;
		margin: 0 !important;
		font-size: clamp(13px, 3.6vw, 22px);
		line-height: 1.5;
		white-space: nowrap;
	}
	body .main-navigation ul.nav-menu > li > a {
		display: inline-block;
		margin: 0 !important;
		padding: 6px 0;
		/* style.css 第 1215 行给 .main-navigation li a 写死了 font-size:24px，
		   光改 li 的字号对文字无效 —— 必须让 a 跟随 li 的自适应字号 */
		font-size: inherit;
	}
}

/* ============================================================
   单页管理：移动端自适应兜底
   ------------------------------------------------------------
   单页产物（event/<别名>.html）与其它内页共用同一套外壳，但正文里
   可能混入编辑器写死的宽度 / 表格 / 长串 URL。这里统一兜底：
   · 正文区所有媒体元素不超出屏宽；
   · 编辑器写死的固定宽度一律降级为 100%；
   · 长英文串 / 长 URL 强制换行，避免把页面撑出横向滚动条。
   ============================================================ */
@media (max-width: 780px) {
	/* 单页正文（活动模式 / 自定义模式共用） */
	.MR-ev,
	.MR-ev-bottom,
	.article-detail,
	.article-body {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.MR-ev img,
	.MR-ev-bottom img,
	.article-detail img,
	.article-body img,
	.MR-ev video,
	.MR-ev iframe,
	.MR-ev-bottom iframe,
	.article-body iframe {
		max-width: 100% !important;
		height: auto !important;
	}

	/* 编辑器可能写死 width/height 属性或内联 style，这里统一降级 */
	.MR-ev-bottom [style*="width"],
	.article-body [style*="width"],
	.article-detail [style*="width"] {
		max-width: 100% !important;
	}

	.MR-ev-bottom table,
	.article-body table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.MR-ev-summary { font-size: 15px; }
}