/*
 * Big stories (事件, D3): the event page, the box at the end of an article in a story, the homepage's 本周大事 band.
 * Design: site-build/event-pages-2026-10-01/ (the newspaper layout, full width, little empty space — the owner,
 * 2026-10-01). Outlets are small grey credits only (#81–#84). Colours come from the site's own variables, so the
 * dark theme (theme-dark.css) applies unchanged.
 */
.mh-ev, .mh-ev-box, .mh-ev-band {
	--ev-accent: var(--accent, #1E6B4E);
	--ev-ink: var(--ink, #1A1A18);
	--ev-ink-2: var(--ink-2, #5C5C56);
	--ev-rule: var(--rule, #E3E1DA);
	--ev-surface: var(--surface, #FFFFFF);
	--ev-paper: var(--paper-2, #f4f1e8);
	--ev-red: #B0362B;
	--ev-serif: var(--mh-serif, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", STSong, Georgia, serif);
	--ev-sans: var(--mh-sans, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
	--ev-mono: "SF Mono", Menlo, Consolas, monospace;
	color: var(--ev-ink);
}
.mh-ev a, .mh-ev-box a, .mh-ev-band a { color: inherit; text-decoration: none; }
.mh-ev a:hover .mh-ev-it-t, .mh-ev-box li a:hover, .mh-ev-band a:hover .mh-ev-band-card-t, .mh-ev-rel-it:hover .mh-ev-rel-t { color: var(--ev-accent); }
.mh-ev-k { font: 600 11px var(--ev-mono); letter-spacing: .22em; color: var(--ev-accent); }
.mh-ev-meta { display: block; font: 12.5px/1.5 var(--ev-sans); color: var(--ev-ink-2); }
.mh-ev-cr { font: 12px var(--ev-sans); color: #9a968a; margin-left: 8px; white-space: nowrap; }
.mh-ev-time { font: 12px var(--ev-mono); color: var(--ev-ink-2); }
.mh-ev-nophoto { display: block; background-color: #ddd8ca; background-image: linear-gradient(135deg, #d8d2c3, #e6e1d5 45%, #d3cdbd); background-size: cover; background-position: center; }
.mh-ev-go, .mh-ev a.mh-ev-go, .mh-ev-box a.mh-ev-go, .mh-ev-band .mh-ev-go { display: inline-block; font: 600 13px var(--ev-sans); color: var(--ev-accent); }

/* ---- the event page ---- */
.mh-ev { max-width: 1100px; margin: 0 auto 40px; }
.mh-ev-h { background: var(--ev-surface); border: 1px solid var(--ev-rule); border-top: 4px solid var(--ev-ink); padding: 26px 32px 20px; }
.mh-ev-t { font: 500 38px/1.3 var(--ev-serif); margin: 6px 0 12px; letter-spacing: .03em; }
.mh-ev-lede { font: 17px/1.9 var(--ev-serif); margin: 0 0 12px; max-width: 780px; }
.mh-ev-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; margin-top: 22px; align-items: start; }
.mh-ev-h2 { font: 500 20px var(--ev-serif); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ev-ink); }
.mh-ev-ours { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.mh-ev-our { display: grid; grid-template-columns: 120px 1fr; background: var(--ev-surface); border: 1px solid var(--ev-rule); min-height: 112px; }
.mh-ev-our-img { width: 120px; height: 100%; min-height: 112px; }
.mh-ev-our-tx { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.mh-ev-tag { align-self: flex-start; font: 600 11px var(--ev-sans); color: #fff; background: var(--ev-accent); padding: 1px 7px; border-radius: 2px; }
.mh-ev-our-t { font: 500 17px/1.45 var(--ev-serif); }
.mh-ev-day { font: 600 13px var(--ev-sans); margin: 16px 0 2px; }
.mh-ev-it { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 9px 0 10px; border-bottom: 1px solid var(--ev-rule); }
.mh-ev-it .mh-ev-time { padding-top: 4px; }
.mh-ev-it-t { display: block; font: 16px/1.55 var(--ev-serif); }
.mh-ev-it-x { display: block; font: 13.5px/1.6 var(--ev-sans); color: var(--ev-ink-2); margin-top: 2px; }
.mh-ev-side { background: var(--ev-surface); border: 1px solid var(--ev-rule); padding: 16px 18px; position: sticky; top: 16px; }
.mh-ev-side .mh-ev-h2 + * { margin-bottom: 22px; }
.mh-ev-days { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 16px; border-bottom: 1px solid var(--ev-rule); }
.mh-ev-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.mh-ev-bar i { display: block; background: var(--ev-accent); opacity: .82; min-height: 2px; }
.mh-ev-bar b { font: 400 11px var(--ev-sans); color: var(--ev-ink-2); text-align: center; }
.mh-ev-bar em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font: normal 11px var(--ev-sans); color: var(--ev-ink-2); }
.mh-ev-days { margin-bottom: 30px !important; }
.mh-ev-rel-it { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ev-rule); }
.mh-ev-rel-img { width: 72px; height: 54px; }
.mh-ev-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mh-ev-pic-img { width: 100%; aspect-ratio: 4 / 3; }
.mh-ev-older > summary { cursor: pointer; list-style: none; margin: 14px 0 4px; padding: 9px 0; text-align: center; font: 600 13px var(--ev-sans); color: var(--ev-accent); border: 1px solid var(--ev-rule); background: var(--ev-surface); }
.mh-ev-older > summary::-webkit-details-marker { display: none; }
.mh-ev-older[open] > summary { display: none; }
.mh-ev-rel-t { display: block; font: 15px/1.45 var(--ev-serif); }

/* ---- the box at the end of an article ---- */
.mh-ev-box { margin: 30px 0 10px; border: 1px solid var(--ev-rule); border-top: 3px solid var(--ev-accent); background: var(--ev-surface); padding: 18px 22px; }
.mh-ev-box-t { display: block; font: 500 22px/1.4 var(--ev-serif); margin: 4px 0 4px; }
.mh-ev-box ol { list-style: none; margin: 12px 0 12px; padding: 0; }
.mh-ev-box li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px dashed var(--ev-rule); font: 14.5px/1.55 var(--ev-serif); }
.mh-ev-box li .mh-ev-time { padding-top: 2px; }

/* ---- the homepage band ---- */
.mh-ev-band { margin: 22px 0; background: var(--ev-surface); border: 1px solid var(--ev-rule); border-top: 4px solid var(--ev-ink); }
.mh-ev-band-h { display: flex; align-items: baseline; gap: 16px; padding: 16px 24px 12px; border-bottom: 1px solid var(--ev-rule); }
.mh-ev-band-k { font: 600 11px var(--ev-mono); letter-spacing: .22em; color: var(--ev-accent); }
.mh-ev-band-t { font: 500 28px var(--ev-serif); margin: 0; letter-spacing: .04em; }
.mh-ev-band-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; }
.mh-ev-band-lead { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border-right: 1px solid var(--ev-rule); }
.mh-ev-band-lead-img { width: 100%; height: 210px; margin-bottom: 6px; }
.mh-ev-band-lead-t { font: 500 26px/1.3 var(--ev-serif); }
.mh-ev-band-lede { font: 15px/1.7 var(--ev-serif); color: #33322e; }
.mh-ev-latest { font: 14px/1.6 var(--ev-serif); border-top: 1px solid var(--ev-rule); padding-top: 8px; }
.mh-ev-latest b { font: 600 11px var(--ev-sans); color: #fff; background: var(--ev-red); padding: 1px 6px; margin-right: 8px; border-radius: 2px; vertical-align: 2px; }
.mh-ev-band-card { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--ev-rule); align-items: start; }
.mh-ev-band-card:nth-of-type(odd) { border-right: 1px solid var(--ev-rule); }
.mh-ev-band-card-img { width: 104px; height: 78px; }
.mh-ev-band-card-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mh-ev-band-card-t { font: 500 18px/1.4 var(--ev-serif); }
.mh-ev-band-card-x { font: 13.5px/1.6 var(--ev-sans); color: #46453f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mh-ev-band-more { display: grid; border-top: 1px solid var(--ev-rule); }
.mh-ev-band-more a { padding: 12px 18px; border-right: 1px solid var(--ev-rule); font: 15px/1.45 var(--ev-serif); }
.mh-ev-band-more a:last-child { border-right: 0; }

/*
 * WHERE THE BAND SITS IN .mh-body — after the lead area, in every skin. .mh-body is a dense grid with an order per
 * band (see social.css C1): a child declaring neither lands at the top, so both halves are set, one step more
 * specific than home-skins.css (generated; never edited by hand). 电讯: leads 1 and the briefing 2 share the first
 * row, so order 2 at full width is the next row. 文学城: photo 1, log 2, leads 3, brief 4, 滚动 6 → 5. 小红书 runs
 * CSS columns: the band spans them.
 */
.mh.mh-skin-dianxun .mh-body > .mh-ev-band { grid-column: 1 / -1; order: 2; }
.mh.mh-skin-wxc .mh-body > .mh-ev-band     { grid-column: 1 / -1; order: 5; }
.mh.mh-skin-xhs .mh-body > .mh-ev-band     { column-span: all; break-inside: avoid; }

/* ---- narrow screens: one column, same order ---- */
@media (max-width: 860px) {
	.mh-ev { padding: 0 14px; }
	.mh-ev-body { grid-template-columns: 1fr; }
	.mh-ev-side { position: static; }
	.mh-ev-ours { grid-template-columns: 1fr; }
	.mh-ev-h { padding: 20px 18px 16px; }
	.mh-ev-t { font-size: 28px; }
	.mh-ev-band-grid { grid-template-columns: 1fr; }
	.mh-ev-band-lead { grid-row: auto !important; border-right: 0; border-bottom: 1px solid var(--ev-rule); }
	.mh-ev-band-card:nth-of-type(odd) { border-right: 0; }
	.mh-ev-band-more { grid-template-columns: 1fr 1fr !important; }
	.mh-ev-box li { grid-template-columns: 1fr; gap: 2px; }
}