/**
 * Molihua homepage visual rescue
 *
 * Load AFTER assets/css/home-skins.css.
 * Scope: the default 茉莉电讯 skin only. The skin switcher, Bricks header,
 * other skins and the site footer are intentionally untouched.
 */

/* --------------------------------------------------------------------------
   1. Calm the canvas and establish one editorial rhythm
   -------------------------------------------------------------------------- */

html[data-mh-theme="light"] .mh.mh-skin-dianxun,
html:not([data-mh-theme]) .mh.mh-skin-dianxun {
  --mh-paper: #f7f5ee;
  --mh-panel: #fffdf8;
  --mh-panel-soft: #ecefe9;
  --mh-ink: #17221c;
  --mh-muted: #68736c;
  --mh-line: #cfd5cf;
  --mh-green: #245d43;
  --mh-rust: #9d493f;
  --mh-switch: #ebece6;
}

@media (prefers-color-scheme: dark) {
  html:not([data-mh-theme]) .mh.mh-skin-dianxun {
    --mh-paper: #0d100e;
    --mh-panel: #131714;
    --mh-panel-soft: #181d19;
    --mh-ink: #f0eee6;
    --mh-muted: #a9afa9;
    --mh-line: #354039;
    --mh-green: #7db38f;
    --mh-rust: #c45c52;
    --mh-switch: #111411;
  }
}

.mh.mh-skin-dianxun {
  background: var(--mh-paper);
}

.mh.mh-skin-dianxun .mh-body {
  padding-block: 22px 48px;
}

.mh.mh-skin-dianxun .mh-leads,
.mh.mh-skin-dianxun .mh-brief,
.mh.mh-skin-dianxun .mh-desks,
.mh.mh-skin-dianxun .mh-roll,
.mh.mh-skin-dianxun .mh-cmt {
  scroll-margin-top: 24px;
}

/* --------------------------------------------------------------------------
   2. Top story: authoritative, large, but not an empty beige billboard
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-lead {
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 3px solid var(--mh-ink);
  box-shadow: 0 16px 40px rgb(24 38 29 / 5%);
}

.mh.mh-skin-dianxun .mh-lead > .mh-art,
.mh.mh-skin-dianxun .mh-lead > .mh-art .mh-img {
  border-radius: 0;
}

.mh.mh-skin-dianxun .mh-lead > .mh-m,
.mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
.mh.mh-skin-dianxun .mh-lead > .mh-x,
.mh.mh-skin-dianxun .mh-lead > .mh-read {
  margin-inline: clamp(20px, 2.1vw, 28px);
}

.mh.mh-skin-dianxun .mh-lead > .mh-lead-t {
  margin-top: 14px;
  font-size: clamp(31px, 3vw, 43px);
  line-height: 1.25;
  letter-spacing: -.018em;
}

.mh.mh-skin-dianxun .mh-lead > .mh-x {
  max-width: 34em;
  color: color-mix(in srgb, var(--mh-muted) 94%, var(--mh-ink));
}

.mh.mh-skin-dianxun .mh-lead > .mh-read {
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--mh-green) 38%, transparent);
}

.mh.mh-skin-dianxun .mh-brief {
  background: color-mix(in srgb, var(--mh-panel-soft) 82%, var(--mh-panel));
  border-right: 1px solid var(--mh-line);
  box-shadow: 8px 16px 38px rgb(24 38 29 / 4%);
}

.mh.mh-skin-dianxun .mh-brief > .mh-h {
  padding-inline: 16px;
}

.mh.mh-skin-dianxun .mh-brief .mh-e {
  padding-block: 12px;
}

.mh.mh-skin-dianxun .mh-brief .mh-e > .mh-t {
  line-height: 1.48;
}

/* --------------------------------------------------------------------------
   3. 分类精选: one fixed editorial module, 1 lead + exactly 6 single lines
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-desks {
  margin-top: 42px;
  padding: 18px 22px 20px;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 3px solid var(--mh-ink);
  box-shadow: 0 14px 36px rgb(24 38 29 / 4%);
}

.mh.mh-skin-dianxun .mh-desks-h {
  min-height: 30px;
  margin-bottom: 16px;
}

.mh.mh-skin-dianxun .mh-desks-title,
.mh.mh-skin-dianxun .mh-roll-title,
.mh.mh-skin-dianxun .mh-cmt-h {
  font-size: 21px;
  letter-spacing: .025em;
}

.mh.mh-skin-dianxun .mh-desk.is-on {
  grid-template-columns: 328px minmax(0, 1fr);
  gap: 0 30px;
  height: 420px;
}

.mh.mh-skin-dianxun .mh-desk-pic {
  height: 218px;
  border: 1px solid color-mix(in srgb, var(--mh-line) 72%, transparent);
}

.mh.mh-skin-dianxun .mh-desk-lead-h {
  min-height: 4.5em;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -.01em;
}

.mh.mh-skin-dianxun .mh-desk-lead-h a {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.mh.mh-skin-dianxun .mh-desk-lead-x {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Picless desk leads (3 of 8 on live data: society, culture, entertainment).
   The fixed 420px column showed a two-line title over ~300px of nothing — the
   blank-space defect the owner has ruled against three times. The skin's own
   fix relied on the excerpt taking the slack, but a lead with no photograph
   never has an excerpt either, so it cannot fire. With no picture the type
   itself earns the column: the headline sets larger, may run to five lines,
   and centres in the space the picture would have taken (margin-block: auto
   on the headline; the meta keeps the foot), on a quiet tinted panel so the
   height reads as a deliberate text feature rather than a hole. */
.mh.mh-skin-dianxun .mh-desk-lead:not(:has(.mh-desk-pic)) {
  padding: 22px 20px 16px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--mh-green) 8%, var(--mh-panel)), var(--mh-panel) 72%);
  border: 1px solid color-mix(in srgb, var(--mh-line) 85%, transparent);
}

.mh.mh-skin-dianxun .mh-desk-lead:not(:has(.mh-desk-pic)) .mh-desk-lead-h {
  min-height: 0;
  margin-block: auto;
  font-size: 23px;
  line-height: 1.62;
}

.mh.mh-skin-dianxun .mh-desk-lead:not(:has(.mh-desk-pic)) .mh-desk-lead-h a {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.mh.mh-skin-dianxun .mh-desk-list > li {
  flex: 0 0 70px;
}

.mh.mh-skin-dianxun .mh-desk-t {
  font-size: 15px;
  line-height: 26px;
}

.mh.mh-skin-dianxun .mh-desks-dots {
  margin-top: 16px;
}

.mh.mh-skin-dianxun .mh-desk-dot {
  width: 6px;
  height: 6px;
  border-color: color-mix(in srgb, var(--mh-muted) 68%, transparent);
}

/* --------------------------------------------------------------------------
   4. 滚动新闻: refined switch, real side rails and equal desktop heights
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-roll {
  margin-top: 42px;
  padding: 18px 20px 24px;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 3px solid var(--mh-ink);
  box-shadow: 0 14px 36px rgb(24 38 29 / 4%);
}

.mh.mh-skin-dianxun .mh-roll-h {
  min-height: 36px;
  margin-bottom: 14px;
}

.mh.mh-skin-dianxun .mh-roll-swap {
  position: relative;
  height: 34px;
  gap: 8px;
  padding: 0 9px 0 13px;
  border: 1px solid #173d2d;
  border-radius: 2px;
  background: #173d2d;
  color: #f4eedf;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 5%),
    0 5px 14px rgb(18 48 35 / 13%);
  font-family: var(--mh-serif);
  font-size: 13px;
  letter-spacing: .08em;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.mh.mh-skin-dianxun .mh-roll-swap:hover {
  transform: translateY(-1px);
  border-color: #0f3022;
  background: #0f3022;
  color: #fff9e9;
  box-shadow: 0 8px 18px rgb(18 48 35 / 18%);
}

.mh.mh-skin-dianxun .mh-roll-swap:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgb(18 48 35 / 14%);
}

.mh.mh-skin-dianxun .mh-roll-cyc {
  font-family: var(--mh-sans);
  font-size: 14px;
  opacity: .72;
}

.mh.mh-skin-dianxun .mh-roll-chip {
  min-width: 27px;
  padding: 4px 5px;
  color: #173d2d;
  background: #d9c994;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-roll-grid {
  grid-template-columns: 86px minmax(0, 1fr) 86px;
  gap: 0 16px;
}

.mh.mh-skin-dianxun .mh-roll-rail-h {
  margin-bottom: 10px;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-roll-rail ul {
  display: grid;
  gap: 7px;
}

.mh.mh-skin-dianxun .mh-roll-rail li {
  border: 0;
}

.mh.mh-skin-dianxun .mh-roll-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 5px 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mh-line) 86%, transparent);
  background: color-mix(in srgb, var(--mh-panel-soft) 55%, var(--mh-panel));
  color: var(--mh-muted);
  font-family: var(--mh-serif);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.mh.mh-skin-dianxun .mh-roll-rail a:hover {
  border-color: var(--mh-green);
  background: color-mix(in srgb, var(--mh-green) 7%, var(--mh-panel));
  text-decoration: none;
}

/* 50 rows × 29px = 1450px. The 16-story view uses exactly the same height. */
.mh.mh-skin-dianxun .mh-roll-feat,
.mh.mh-skin-dianxun .mh-roll-dense {
  height: 1450px;
}

.mh.mh-skin-dianxun .mh-roll-dense {
  grid-template-rows: repeat(50, 29px);
  column-gap: 24px;
}

.mh.mh-skin-dianxun .mh-roll-dense > li > article {
  gap: 7px;
}

.mh.mh-skin-dianxun .mh-roll-ds {
  flex-basis: 5em;
  font-size: 12px;
}

.mh.mh-skin-dianxun .mh-roll-dt {
  font-size: 15px;
  line-height: 26px;
}

/* Two rows, not the skin's three. In a 90px cell the three auto rows get
   squeezed below their content, and a clamped two-line title (54px at
   19px/1.42) centers in a ~28px row and paints over the source line. A
   1fr/auto pair gives the title whatever the meta line leaves — 55px after
   7px padding, enough for both title lines — and pins every row's meta to
   one shared baseline. */
.mh.mh-skin-dianxun .mh-roll-feat > li > article {
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 2px 11px;
  padding: 7px 0;
}

.mh.mh-skin-dianxun .mh-roll-feat .mh-roll-badge,
.mh.mh-skin-dianxun .mh-roll-feat .mh-roll-pic,
.mh.mh-skin-dianxun .mh-roll-feat .mh-roll-go {
  grid-row: 1 / span 2;
}

.mh.mh-skin-dianxun .mh-roll-t {
  font-size: 19px;
  line-height: 1.42;
}

.mh.mh-skin-dianxun .mh-roll-pic {
  width: 112px;
  height: 68px;
}

/* --------------------------------------------------------------------------
   5. 评论: show the conversation surface, not a giant disabled form
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-cmt {
  margin-top: 42px;
  padding: 18px 20px 22px;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 3px solid var(--mh-ink);
  box-shadow: 0 14px 36px rgb(24 38 29 / 4%);
}

.mh.mh-skin-dianxun .mh-cmt-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 20px;
}

.mh.mh-skin-dianxun .mh-cmt-list {
  min-height: 210px;
  padding: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mh-green) 5%, var(--mh-panel)), var(--mh-panel));
}

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) fieldset {
  display: none;
}

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--mh-line);
  background: color-mix(in srgb, var(--mh-panel-soft) 52%, var(--mh-panel));
}

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) .mh-cmt-ask {
  margin: 0;
}

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) .mh-cmt-off {
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   6. Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .mh.mh-skin-dianxun .mh-desk.is-on {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 0 22px;
  }

  .mh.mh-skin-dianxun .mh-desk-pic {
    height: 190px;
  }

  .mh.mh-skin-dianxun .mh-roll-grid {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   6b. The whole stacked window, not just phones
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  /* The skin stacks the lead single-column up to 959px, and its unconditional
     `.mh-leads .mh-lead .mh-art { height: 360px }` (one selector step more
     specific than a 4-step override) beats its own stacked-tier 16/9 rule all
     the way up. Scoping this fix to 720px left iPad portrait with a 360px
     letterbox that cropped heads. Both selectors, so the taller one wins
     wherever the band nests, across the entire stacked window. */
  .mh.mh-skin-dianxun .mh-lead > .mh-art,
  .mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-art {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile: reduce the default page from a 6,700px wall to readable modules
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .mh.mh-skin-dianxun {
    width: calc(100% - 20px);
  }

  .mh.mh-skin-dianxun .mh-body {
    padding-block: 18px 34px;
  }

  .mh.mh-skin-dianxun .mh-lead {
    box-shadow: none;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-m,
  .mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
  .mh.mh-skin-dianxun .mh-lead > .mh-x,
  .mh.mh-skin-dianxun .mh-lead > .mh-read {
    margin-inline: 14px;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-lead-t {
    font-size: 24px;
    line-height: 1.34;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-x {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-read {
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .mh.mh-skin-dianxun .mh-brief {
    margin-top: 16px;
  }

  .mh.mh-skin-dianxun .mh-brief .mh-e:nth-child(n + 4) {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-brief-note {
    margin-block: 10px;
  }

  .mh.mh-skin-dianxun .mh-desks,
  .mh.mh-skin-dianxun .mh-roll,
  .mh.mh-skin-dianxun .mh-cmt {
    margin-top: 28px;
    padding: 15px 12px 18px;
    box-shadow: none;
  }

  .mh.mh-skin-dianxun .mh-desks-h {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
  }

  .mh.mh-skin-dianxun .mh-desks-title {
    grid-column: 1;
  }

  .mh.mh-skin-dianxun .mh-desks-ctl {
    grid-column: 2;
    grid-row: 1;
  }

  .mh.mh-skin-dianxun .mh-desks-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding-bottom: 4px;
  }

  .mh.mh-skin-dianxun .mh-desk.is-on {
    grid-template-columns: minmax(0, 1fr);
    height: 570px;
  }

  .mh.mh-skin-dianxun .mh-desk-lead {
    height: 282px;
  }

  .mh.mh-skin-dianxun .mh-desk-pic {
    height: 166px;
  }

  .mh.mh-skin-dianxun .mh-desk-lead-h {
    min-height: 4.35em;
    font-size: 16px;
    line-height: 1.45;
  }

  /* The picless text-feature treatment above outranks this tier's sizing
     (its :has() selector carries one extra step), so restate the phone
     scale for it: same centred feature, phone-sized type. */
  .mh.mh-skin-dianxun .mh-desk-lead:not(:has(.mh-desk-pic)) .mh-desk-lead-h {
    min-height: 0;
    font-size: 19px;
    line-height: 1.6;
  }

  .mh.mh-skin-dianxun .mh-desk-lead-x {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-desk-list {
    height: 288px;
  }

  .mh.mh-skin-dianxun .mh-desk-list > li {
    flex: 0 0 48px;
  }

  .mh.mh-skin-dianxun .mh-desk-t {
    font-size: 14px;
    line-height: 24px;
  }

  .mh.mh-skin-dianxun .mh-roll-h {
    align-items: center;
    justify-content: space-between;
  }

  .mh.mh-skin-dianxun .mh-roll-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l .mh-roll-rail-h {
    text-align: left;
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l ul {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l ul::-webkit-scrollbar {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l a {
    min-width: 64px;
    min-height: 30px;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .mh.mh-skin-dianxun .mh-roll-feat {
    height: auto;
  }

  .mh.mh-skin-dianxun .mh-roll-feat > li {
    flex: none;
    min-height: 85px;
  }

  .mh.mh-skin-dianxun .mh-roll-feat > li > article {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 85px;
  }

  .mh.mh-skin-dianxun .mh-roll-t {
    font-size: 16px;
    line-height: 1.45;
  }

  .mh.mh-skin-dianxun .mh-roll-pic {
    grid-column: 3;
    width: 92px;
    height: 60px;
  }

  .mh.mh-skin-dianxun .mh-roll-go {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-roll-dense {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(100, 30px);
    height: 3000px;
  }

  .mh.mh-skin-dianxun .mh-roll-ds {
    flex-basis: 4.5em;
  }

  .mh.mh-skin-dianxun .mh-cmt-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .mh.mh-skin-dianxun .mh-cmt-list,
  .mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) {
    min-height: 0;
  }
}


/* ==========================================================================
   MOLIHUA HOME RESCUE V2 — 2026-08-07
   Append once to assets/css/home-rescue.css.
   Depends on the v1 rescue file and only refines the default dianxun skin.
   ========================================================================== */

/* Owner ruling: the desktop canvas is exactly 1100px. */
.mh.mh-skin-dianxun {
  width: calc(100% - 40px);
  max-width: 1100px;
  margin-inline: auto;
}

/* The selected primary category was inheriting white from an older skin rule. */
.mh.mh-skin-dianxun:has(#mh-c-all:checked) .mh-cats [for="mh-c-all"],
.mh.mh-skin-dianxun:has(#mh-c-china:checked) .mh-cats [for="mh-c-china"],
.mh.mh-skin-dianxun:has(#mh-c-hk-taiwan:checked) .mh-cats [for="mh-c-hk-taiwan"],
.mh.mh-skin-dianxun:has(#mh-c-usa:checked) .mh-cats [for="mh-c-usa"],
.mh.mh-skin-dianxun:has(#mh-c-world:checked) .mh-cats [for="mh-c-world"],
.mh.mh-skin-dianxun:has(#mh-c-finance:checked) .mh-cats [for="mh-c-finance"],
.mh.mh-skin-dianxun:has(#mh-c-society:checked) .mh-cats [for="mh-c-society"],
.mh.mh-skin-dianxun:has(#mh-c-tech:checked) .mh-cats [for="mh-c-tech"],
.mh.mh-skin-dianxun:has(#mh-c-culture:checked) .mh-cats [for="mh-c-culture"],
.mh.mh-skin-dianxun:has(#mh-c-minjian:checked) .mh-cats [for="mh-c-minjian"],
.mh.mh-skin-dianxun:has(#mh-c-entertainment:checked) .mh-cats [for="mh-c-entertainment"] {
  color: var(--mh-ink) !important;
  background: color-mix(in srgb, var(--mh-green) 6%, transparent);
  border-bottom-color: var(--mh-rust);
}

/* --------------------------------------------------------------------------
   Top story: never end the homepage's main headline in an unnecessary ellipsis
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-lead > .mh-lead-t {
  font-size: clamp(30px, 2.6vw, 37px);
  line-height: 1.28;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* --------------------------------------------------------------------------
   分类精选: remove the visual hole below a short lead title
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-desk-pic {
  height: 240px;
}

.mh.mh-skin-dianxun .mh-desk-lead-txt {
  padding-bottom: 2px;
}

.mh.mh-skin-dianxun .mh-desk-lead-m {
  margin: auto 0 0;
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Source rails: compact typographic wordmarks with recognizable brand colour
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-roll-rail a {
  position: relative;
  min-height: 40px;
  border-radius: 2px;
  box-shadow: inset 3px 0 0 var(--source-color, var(--mh-line));
}

.mh.mh-skin-dianxun .mh-roll-rail a::before {
  color: var(--source-color, var(--mh-muted));
  font-family: Arial, "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/rfi-cn/"] {
  --source-color: #df1728;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/rfi-cn/"]::before { content: "RFI"; font-size: 15px; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/collective-hk/"] {
  --source-color: #202020;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/collective-hk/"]::before { content: "集志"; font-family: var(--mh-serif); }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/dw-chinese/"] {
  --source-color: #0878bd;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/dw-chinese/"]::before { content: "DW"; font-size: 15px; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/yulezibenlun/"] {
  --source-color: #8a2942;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/yulezibenlun/"]::before { content: "娱资"; font-family: var(--mh-serif); }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/ifanr/"] {
  --source-color: #f26b21;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/ifanr/"]::before { content: "ifanr"; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/yonhap-cn/"] {
  --source-color: #1265a8;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/yonhap-cn/"]::before { content: "YNA"; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/huxiu/"] {
  --source-color: #e87524;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/huxiu/"]::before { content: "虎嗅"; font-family: var(--mh-serif); }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/storm-mg/"] {
  --source-color: #81374c;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/storm-mg/"]::before { content: "風傳媒"; font-family: var(--mh-serif); font-size: 11px; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/greenbean/"] {
  --source-color: #2f7d4f;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/greenbean/"]::before { content: "綠豆"; font-family: var(--mh-serif); }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/udn-money/"] {
  --source-color: #ad2e32;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/udn-money/"]::before { content: "經日"; font-family: var(--mh-serif); }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/8world/"] {
  --source-color: #e2232e;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/8world/"]::before { content: "8"; font-size: 19px; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/ebc-news/"] {
  --source-color: #075ca8;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/ebc-news/"]::before { content: "EBC"; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/nextapple/"] {
  --source-color: #d92333;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/nextapple/"]::before { content: "壹蘋"; font-family: var(--mh-serif); }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/twstreetcorner/"] {
  --source-color: #795037;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/twstreetcorner/"]::before { content: "巷仔口"; font-family: var(--mh-serif); font-size: 11px; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/globalvoices-zh/"] {
  --source-color: #2475ad;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/globalvoices-zh/"]::before { content: "GV"; font-size: 15px; }

.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/voa-chinese/"] {
  --source-color: #175a9c;
  font-size: 0;
}
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/voa-chinese/"]::before { content: "VOA"; font-size: 14px; }

/* --------------------------------------------------------------------------
   Empty comments: make the state intentional instead of looking unfinished
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:only-child) {
  display: grid;
  place-items: center;
  min-height: 190px;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-cmt-empty {
  display: grid;
  gap: 9px;
  max-width: 30em;
  line-height: 1.7;
}

.mh.mh-skin-dianxun .mh-cmt-empty::before {
  content: "COMMENTS · 等待第一条讨论";
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 10px;
  letter-spacing: .13em;
}

/* --------------------------------------------------------------------------
   Mobile chrome: keep every control, but stop using three rows for two jobs
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .mh.mh-skin-dianxun {
    width: calc(100% - 20px);
  }

  html[data-mh-skin="dianxun"] .site-head {
    height: 82px !important;
    min-height: 82px !important;
  }

  html[data-mh-skin="dianxun"] .site-head .head-in {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    grid-template-rows: 36px 34px;
    gap: 0 8px;
    align-items: center;
    width: 100%;
    height: 82px;
    padding: 6px 10px !important;
  }

  html[data-mh-skin="dianxun"] .site-head .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  html[data-mh-skin="dianxun"] .site-head .mh-join-wrap {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  html[data-mh-skin="dianxun"] .site-head .search {
    position: static;
    grid-column: 3;
    grid-row: 1;
    order: initial;
    width: 34px !important;
    height: 30px;
    margin: 0 !important;
    gap: 0;
  }

  html[data-mh-skin="dianxun"] .site-head .search > .form-group:first-child {
    position: absolute;
    width: 1px !important;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  html[data-mh-skin="dianxun"] .site-head .search .submit-button-wrapper,
  html[data-mh-skin="dianxun"] .site-head .search button {
    width: 34px !important;
    height: 30px;
    padding: 0 !important;
  }

  html[data-mh-skin="dianxun"] .site-head .search button {
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    background: transparent;
  }

  html[data-mh-skin="dianxun"] .site-head .search button .text {
    font-size: 0;
  }

  html[data-mh-skin="dianxun"] .site-head .search button .text::before {
    content: "⌕";
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  html[data-mh-skin="dianxun"] .site-head .search.is-open {
    position: absolute;
    z-index: 20;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    top: 5px;
    right: 0 !important;
    left: 0 !important;
    display: flex;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px;
    padding: 4px 5px;
    gap: 5px;
    border: 1px solid var(--rule-strong);
    background: var(--paper, #fafaf7);
    box-shadow: 0 8px 24px rgb(20 30 24 / 14%);
  }

  html[data-mh-skin="dianxun"] .site-head .search.is-open > .form-group:first-child {
    position: static;
    display: block;
    flex: 1 1 0 !important;
    width: calc(100% - 39px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  html[data-mh-skin="dianxun"] .site-head .search.is-open > .submit-button-wrapper {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
  }

  html[data-mh-skin="dianxun"] .site-head .search.is-open input[type="text"] {
    width: 100% !important;
    height: 28px;
  }

  html[data-mh-skin="dianxun"] .site-head .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    height: 34px;
    margin: 0 !important;
    overflow: hidden;
  }

  html[data-mh-skin="dianxun"] .site-head .main-nav ul {
    height: 34px;
  }

  /* One horizontally scrollable category row instead of two wrapped rows. */
  .mh.mh-skin-dianxun .mh-cats {
    flex-wrap: nowrap;
    gap: 0 17px;
    min-height: 42px;
    padding: 7px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .mh.mh-skin-dianxun .mh-cats::-webkit-scrollbar {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-cat {
    flex: 0 0 auto;
    padding: 3px 1px;
  }

  /* Two compact rows: status, then one-line breaking news. */
  .mh.mh-skin-dianxun .mh-strip {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    align-items: center;
    min-height: 61px;
    margin-top: 6px;
    padding: 7px 10px;
  }

  .mh.mh-skin-dianxun .mh-strip > span + span::before {
    content: none;
  }

  .mh.mh-skin-dianxun .mh-strip .mh-count {
    display: none;
  }

  .mh.mh-skin-dianxun .mh-strip .mh-date,
  .mh.mh-skin-dianxun .mh-strip .mh-updated {
    display: block;
    min-width: 0;
    font-size: 11px;
    white-space: nowrap;
  }

  .mh.mh-skin-dianxun .mh-strip .mh-updated {
    justify-self: end;
  }

  .mh.mh-skin-dianxun .mh-strip > span.mh-flash {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mh.mh-skin-dianxun .mh-desk-pic {
    height: 166px;
  }

  .mh.mh-skin-dianxun .mh-roll-rail a {
    min-height: 31px;
    box-shadow: inset 2px 0 0 var(--source-color, var(--mh-line));
  }

  .mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:only-child) {
    min-height: 112px;
  }
}

/* ==========================================================================
   V2 CORRECTION — 2026-08-07, same session the v2 block landed.
   The live Bricks search form carries more children than v2's clip pattern
   anticipated: a second .form-group and the submit-feedback .message. With
   the closed form pinned into its 34px grid cell they kept their natural
   width and pushed the page 30px past the right edge — v2's own acceptance
   forbids horizontal overflow. Clip everything that is not the submit
   button while closed. The open state needs no counterpart: v2's restore
   rule for the visible input's group is more specific than this and still
   wins, and the feedback .message staying clipped is fine on a form whose
   submit navigates.
   ========================================================================== */

@media (max-width: 720px) {
  html[data-mh-skin="dianxun"] .site-head .search > :not(.submit-button-wrapper) {
    position: absolute;
    width: 1px !important;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ==========================================================================
   MOLIHUA HOME RESCUE V3 — 2026-08-07
   The owner's prototype design (molihua-site app/HomeClient.tsx +
   globals.css), ported onto the live superset DOM. Append after V2 and its
   correction; later always wins. Scope: the default dianxun skin, light
   theme values; dark keeps the skin's own tokens.

   Deviations from the prototype, all deliberate and reported:
   - Roll bodies stay 1450px (V2's acceptance forbids changing them; the
     prototype uses 1700px — one variable to change if the owner rules).
   - The comment form renders but stays DISABLED with the honest
     评论功能尚未开放 note: a live form that pretends to accept submissions
     would fabricate functionality the backend does not have.
   - Rail tooltips are the anchor's own title attribute, not a custom layer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   V3.0 Tokens: the prototype palette, light scheme only
   -------------------------------------------------------------------------- */

html[data-mh-theme="light"] .mh.mh-skin-dianxun,
html:not([data-mh-theme]) .mh.mh-skin-dianxun {
  --mh-paper: #eceae4;
  --mh-panel: #fbfaf6;
  --mh-panel-soft: #f4f2ec;
  --mh-ink: #171a17;
  --mh-muted: #70756f;
  --mh-line: #dedbd2;
  --mh-green: #245f48;

  /* THREE NAMES FOR THREE LITERALS THAT NEVER JOINED THE PALETTE (2026-08-11).

     Every one of them was a hard-coded `#fff` sitting opposite a token, so the
     token moved when the reader chose dark and the literal did not. This is a
     different fault from the binding-order bug fixed the day before: that one
     was about WHICH declaration won, this one is about a colour that was never
     declared at all. Measured on the live default skin before the fix, in dark:

       .mh-deep-content  #fff panel + var(--mh-ink) titles       1.16:1
       .mh-deep-film-m   #fff panel + var(--mh-muted) dates      2.24:1
       .mh-news-row      #fff field + var(--mh-ink) typed text   1.16:1
       .mh-cmt-go etc.   #fff label on var(--mh-green)           2.41:1

     --mh-stage      the surface that is paper-white in light: the 深度观察
                     content plate and the 每周精选 e-mail field. In dark it is
                     one step ABOVE --mh-panel (#131714) so the plate still
                     reads as a plate rather than dissolving into the band.
     --mh-on-accent  the ink that sits ON --mh-green. The accent inverts between
                     modes (#245f48 -> #7db38f), so its ink must invert with it;
                     a fixed white gives 6.94:1 on light green and 2.41:1 on
                     dark green.
     --mh-plate      the ground of the round source badge, whose ink is white in
                     BOTH modes (the per-source --mh3-badge colours are fixed
                     and dark). It used to fall back to --mh-green, which is why
                     the fallback badges failed only in dark. The light value is
                     --mh-green's light value exactly, so light is unchanged.

     Add a token here and it must be added to BOTH dark blocks below. */
  --mh-stage: #ffffff;
  --mh-on-accent: #ffffff;
  --mh-plate: #245f48;
}

/* THE DARK ENTRANCE FOR THE SEVEN NAMES ABOVE. Without it the V3 light block
   is the LAST declaration of these tokens anywhere in the load order, and its
   second selector — html:not([data-mh-theme]) — is TRUE for a reader whose OS
   is dark and who has never touched the toggle. A media query grants no
   specificity, so at equal weight source order decides and that light block
   beat BOTH dark entrances that had already answered the OS: the one at the
   top of this file and skin-dianxun's in home-skins.css.

   The result was not merely "light for a dark reader". --mh-rust, --mh-switch
   and every --mh3-* DO have dark entrances after this point, so they stayed
   dark while the paper went light: --mh3-soft (#1c241f) is a BACKGROUND on the
   featured roll rows and --mh-switch (#111411) is the switcher bar, so a
   near-black plate landed on light paper. The toggle then fixed it in either
   direction, which is why this survived — only a FIRST visit from a dark
   device ever showed it.

   Values are the skin's own dark palette, byte-identical to home-skins.css and
   to the block at the top of this file — the V3 header's promise that "dark
   keeps the skin's own tokens", restored rather than reinvented. Both
   entrances are declared, as skin-dianxun.css and theme-dark.css do, so an
   explicit toggle and an OS preference cannot disagree. Add a token to the
   light block above and it must be added to BOTH blocks below. */
@media (prefers-color-scheme: dark) {
  html:not([data-mh-theme]) .mh.mh-skin-dianxun {
    --mh-paper: #0d100e;
    --mh-panel: #131714;
    --mh-panel-soft: #181d19;
    --mh-ink: #f0eee6;
    --mh-muted: #a9afa9;
    --mh-line: #354039;
    --mh-green: #7db38f;
    --mh-stage: #1a201c;
    --mh-on-accent: #0d100e;
    --mh-plate: #174534;
  }
}

html[data-mh-theme="dark"] .mh.mh-skin-dianxun {
  --mh-paper: #0d100e;
  --mh-panel: #131714;
  --mh-panel-soft: #181d19;
  --mh-ink: #f0eee6;
  --mh-muted: #a9afa9;
  --mh-line: #354039;
  --mh-green: #7db38f;
  --mh-stage: #1a201c;
  --mh-on-accent: #0d100e;
  --mh-plate: #174534;
}

.mh.mh-skin-dianxun {
  --mh3-deep: #174534;
  --mh3-signal: #9f3e35;
  --mh3-faint: #999c96;
  --mh3-rule-strong: #c7c2b6;
  --mh3-soft: #e5eee9;
}

@media (prefers-color-scheme: dark) {
  html:not([data-mh-theme]) .mh.mh-skin-dianxun {
    --mh3-deep: #10251c;
    --mh3-signal: #c45c52;
    --mh3-faint: #7d837d;
    --mh3-rule-strong: #46524a;
    --mh3-soft: #1c241f;
  }
}

html[data-mh-theme="dark"] .mh.mh-skin-dianxun {
  --mh3-deep: #10251c;
  --mh3-signal: #c45c52;
  --mh3-faint: #7d837d;
  --mh3-rule-strong: #46524a;
  --mh3-soft: #1c241f;
}

/* --------------------------------------------------------------------------
   V3.1 Newspaper headings: kicker · serif title · right-hand tagline
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-leads > .mh-h,
.mh.mh-skin-dianxun .mh-desks-h,
.mh.mh-skin-dianxun .mh-roll-h,
.mh.mh-skin-dianxun .mh-cmt-h {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 15px;
  min-height: 85px;
  padding: 18px 0 15px;
  border-top: 3px solid var(--mh-ink);
  border-bottom: 1px solid var(--mh3-rule-strong);
}

.mh.mh-skin-dianxun .mh-desks-title,
.mh.mh-skin-dianxun .mh-roll-title,
.mh.mh-skin-dianxun .mh-cmt-h {
  font-family: var(--mh-serif);
  font-size: 31px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* The English kickers. The renderer's own kicker spans keep their box but
   speak the design's words. */
.mh.mh-skin-dianxun .mh-desks-h::before,
.mh.mh-skin-dianxun .mh-roll-h::before,
.mh.mh-skin-dianxun .mh-cmt-h::before {
  align-self: center;
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.mh.mh-skin-dianxun .mh-desks-h::before { content: "SECTIONS"; }
.mh.mh-skin-dianxun .mh-cmt-h::before { content: "READER COMMENTS"; }

/* Right-hand taglines. */
.mh.mh-skin-dianxun .mh-desks-h::after,
.mh.mh-skin-dianxun .mh-cmt-h::after {
  margin-left: auto;
  color: var(--mh-muted);
  font-family: var(--mh-serif);
  font-size: 12px;
  font-weight: 400;
}

.mh.mh-skin-dianxun .mh-desks-h::after { content: "点击栏目，切换当天重点报道"; }
.mh.mh-skin-dianxun .mh-cmt-h::after { content: "观点可以不同，事实必须经得起追问"; }

/* --------------------------------------------------------------------------
   V3.2 今日焦点: image | copy | numbered briefing, one paper card
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-body {
  gap: 0 0;
}

.mh.mh-skin-dianxun .mh-leads {
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-right: 0;
  box-shadow: 0 14px 45px rgb(28 32 28 / 5.5%);
}

.mh.mh-skin-dianxun .mh-leads > .mh-h {
  margin-inline: 24px;
}

.mh.mh-skin-dianxun .mh-leads > .mh-h .mh-brief-k,
.mh.mh-skin-dianxun .mh-leads > .mh-h > span:first-child {
  font-size: 0;
}

.mh.mh-skin-dianxun .mh-leads > .mh-h > span:first-child::before {
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  content: "TOP STORY";
}

/* The first lead is the top story; the second stays in the DOM for the
   other skins but does not render here (the design shows one). */
.mh.mh-skin-dianxun .mh-leads .mh-lead:nth-of-type(n+2) {
  display: none;
}

.mh.mh-skin-dianxun .mh-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .92fr);
  min-height: 520px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.mh.mh-skin-dianxun .mh-lead > .mh-art,
.mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-art {
  position: relative;
  grid-row: 1 / span 4;
  height: 100%;
  min-height: 520px;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
}

.mh.mh-skin-dianxun .mh-lead > .mh-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgb(9 20 15 / 38%));
  content: "";
}

.mh.mh-skin-dianxun .mh-lead > .mh-art .mh-img {
  height: 100%;
  filter: saturate(.84) contrast(1.03);
  transition: transform 700ms cubic-bezier(.2, .7, 0, 1), filter 300ms ease;
}

.mh.mh-skin-dianxun .mh-lead:hover > .mh-art .mh-img {
  filter: saturate(1);
  transform: scale(1.025);
}

.mh.mh-skin-dianxun .mh-lead > .mh-art::before {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 22px;
  padding: 7px 10px;
  color: #fff;
  background: var(--mh3-signal);
  font-family: var(--mh-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  content: "今日头条";
}

.mh.mh-skin-dianxun .mh-lead > .mh-m,
.mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
.mh.mh-skin-dianxun .mh-lead > .mh-x,
.mh.mh-skin-dianxun .mh-lead > .mh-read {
  grid-column: 2;
  margin-inline: 36px;
}

.mh.mh-skin-dianxun .mh-lead > .mh-m {
  margin-top: 48px;
  color: var(--mh-muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.mh.mh-skin-dianxun .mh-lead > .mh-m .mh-s-link {
  color: var(--mh-green);
  font-weight: 700;
}

.mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
.mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-lead-t {
  margin-top: 28px;
  font-family: var(--mh-serif);
  font-size: clamp(29px, 2.65vw, 42px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.42;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.mh.mh-skin-dianxun .mh-lead > .mh-x {
  display: block;
  margin-top: 22px;
  color: var(--mh-muted);
  font-family: var(--mh-serif);
  font-size: 14px;
  line-height: 1.85;
}

.mh.mh-skin-dianxun .mh-lead > .mh-read {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 132px;
  margin-top: 30px;
  margin-bottom: 34px;
  padding: 9px 0;
  color: var(--mh-green);
  border-bottom: 1px solid var(--mh-green);
  font-size: 11px;
  font-weight: 700;
}

/* Briefing: numbered, timeless, serif. */
.mh.mh-skin-dianxun .mh-brief {
  margin: 0;
  padding: 31px 28px 25px;
  background: var(--mh-panel-soft);
  border: 1px solid var(--mh-line);
  border-left: 0;
  box-shadow: none;
}

.mh.mh-skin-dianxun .mh-brief > .mh-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 18px;
  border-top: 0;
  border-bottom: 2px solid var(--mh-ink);
  font-family: var(--mh-serif);
  font-size: 23px;
}

.mh.mh-skin-dianxun .mh-brief .mh-brief-k {
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 8px;
  letter-spacing: .13em;
}

.mh.mh-skin-dianxun .mh-brief .mh-list {
  counter-reset: mh3-brief;
}

.mh.mh-skin-dianxun .mh-brief .mh-e {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  counter-increment: mh3-brief;
  padding: 17px 0;
  border-bottom: 1px solid var(--mh-line);
}

.mh.mh-skin-dianxun .mh-brief .mh-e::before {
  color: var(--mh3-signal);
  font-family: var(--mh-mono);
  font-size: 8px;
  font-weight: 600;
  content: "0" counter(mh3-brief);
}

.mh.mh-skin-dianxun .mh-brief .mh-e time {
  display: none;
}

.mh.mh-skin-dianxun .mh-brief .mh-e:nth-child(n+6) {
  display: none;
}

.mh.mh-skin-dianxun .mh-brief .mh-e > .mh-t {
  font-family: var(--mh-serif);
  font-size: 13px;
  line-height: 1.55;
}

.mh.mh-skin-dianxun .mh-brief-note {
  margin-top: 20px;
  border: 0;
  padding: 0;
  color: var(--mh3-faint);
  font-size: 9px;
}

.mh.mh-skin-dianxun .mh-brief-more {
  display: block;
  margin-top: 14px;
  color: var(--mh-green);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   V3.3 分类精选: tab cards with numbers, three-column slide, footer dots
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-desks {
  /* 85px — the grey divider above every section title is this margin, the
     page's paper showing between two panel bands. They were 76 / 84 / 88 / 34,
     which is four different gaps reading as one rhythm (owner, 2026-08-09). */
  margin-top: 85px;
  padding: 0;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 0;
  box-shadow: none;
}

.mh.mh-skin-dianxun .mh-desks-h {
  display: flex;
  flex-wrap: wrap;
  margin: 0 26px 0;
}

.mh.mh-skin-dianxun .mh-desks-title { margin: 0; }

/* Control row: arrows flank the numbered tab cards. */
.mh.mh-skin-dianxun .mh-desks-ctl {
  display: contents;
}

.mh.mh-skin-dianxun .mh-desks-tabs {
  display: flex;
  order: 4;
  flex-basis: calc(100% - 92px);

  /* `safe center` NOT `center`, and this is a real bug fix, not a preference.
     
     On a 390px screen the eight tabs measure 679px against a 368px strip. With
     plain `justify-content: center` the overflow is split across BOTH edges —
     and the LEFT overflow is unreachable: scrollLeft is already 0 at its
     minimum while 中国 sits at x = -254. The selected tab was permanently
     offscreen with no scroll position that could reveal it, which is exactly
     what the owner reported (中国 selected, 中国 and 国际 invisible, 财经 through
     文化 showing instead).
     
     The `safe` keyword centres only while the content FITS and falls back to
     flex-start the moment it would overflow, so the first tab is always
     reachable. The plain `flex-start` on the line after is the fallback for
     engines without `safe` — declared first so `safe center` wins where it is
     understood, and losing the centring on a wide screen is a far smaller fault
     than losing a tab on a narrow one. */
  justify-content: flex-start;
  justify-content: safe center;

  min-width: 0;
  min-height: 72px;
  margin: 0;
  padding: 0;
  overflow-x: auto;

  /* The active tab is scrolled into view by home.js; smooth makes that read as
     a movement rather than a jump, and reduced-motion switches it off below. */
  scroll-behavior: smooth;
  counter-reset: mh3-tab;
  scrollbar-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .mh.mh-skin-dianxun .mh-desks-tabs { scroll-behavior: auto; }
}

.mh.mh-skin-dianxun .mh-desks-tabs::-webkit-scrollbar { display: none; }

.mh.mh-skin-dianxun .mh-desk-tab {
  position: relative;
  flex: 1 0 100px;
  max-width: 150px;
  padding: 14px 15px 12px;
  counter-increment: mh3-tab;
  color: var(--mh-muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mh-line);
  border-radius: 0;
  font-family: var(--mh-serif);
  font-size: 15px;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-desk-tab::before {
  display: block;
  margin-bottom: 4px;
  color: var(--mh3-faint);
  font-family: var(--mh-mono);
  font-size: 7px;
  content: "0" counter(mh3-tab);
}

.mh.mh-skin-dianxun .mh-desk-tab::after {
  position: absolute;
  right: 50%;
  bottom: -1px;
  left: 50%;
  height: 3px;
  background: var(--mh-green);
  content: "";
  transition: right 180ms ease, left 180ms ease;
}

.mh.mh-skin-dianxun .mh-desk-tab:hover,
.mh.mh-skin-dianxun .mh-desk-tab.is-on {
  color: var(--mh-green);
  background: var(--mh3-soft);
}

.mh.mh-skin-dianxun .mh-desk-tab.is-on::after { right: 20%; left: 20%; }

.mh.mh-skin-dianxun .mh-desk-arrow {
  display: grid;
  order: 3;
  place-items: center;
  width: 46px;
  min-height: 72px;
  padding: 0;
  color: var(--mh-green);
  background: var(--mh-panel-soft);
  border: 0;
  border-top: 1px solid var(--mh3-rule-strong);
  border-bottom: 1px solid var(--mh3-rule-strong);
  border-radius: 0;
  font-size: 16px;
}

.mh.mh-skin-dianxun .mh-desk-next { order: 5; }
.mh.mh-skin-dianxun .mh-desk-arrow:hover { color: var(--mh-on-accent); background: var(--mh-green); }

.mh.mh-skin-dianxun .mh-desks-tabs,
.mh.mh-skin-dianxun .mh-desk-arrow {
  border-top: 1px solid var(--mh3-rule-strong);
  border-bottom: 1px solid var(--mh3-rule-strong);
}

/* The count moves to the footer row that home-rescue v3 assembles. */
.mh.mh-skin-dianxun .mh-desks-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  border-top: 1px solid var(--mh3-rule-strong);
}

.mh.mh-skin-dianxun .mh-desks-foot .mh-desk-count {
  color: var(--mh3-faint);
  font-family: var(--mh-mono);
  font-size: 8px;
}

.mh.mh-skin-dianxun .mh-desks-dots { margin: 0; }
.mh.mh-skin-dianxun .mh-desk-dot {
  width: 6px;
  height: 6px;
  background: var(--mh3-rule-strong);
  border: 0;
  border-radius: 50%;
  transition: width 160ms ease, background 160ms ease;
}
.mh.mh-skin-dianxun .mh-desk-dot.is-on {
  width: 20px;
  background: var(--mh-green);
  border-radius: 4px;
}

/* The slide: image | lead copy | numbered list. */
.mh.mh-skin-dianxun .mh-desks-stage { padding: 0; }

.mh.mh-skin-dianxun .mh-desk.is-on {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, .72fr) minmax(280px, .9fr);
  gap: 0;
  height: 420px;
}

.mh.mh-skin-dianxun .mh-desk-lead {
  display: contents;
}

.mh.mh-skin-dianxun .mh-desk-pic {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  height: 420px;
  border: 0;
  overflow: hidden;
}

.mh.mh-skin-dianxun .mh-desk-pic::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgb(10 22 16 / 50%));
  content: "";
}

.mh.mh-skin-dianxun .mh-desk-pic .mh-img {
  filter: saturate(.84) contrast(1.03);
  transition: transform 700ms cubic-bezier(.2, .7, 0, 1), filter 300ms ease;
}

.mh.mh-skin-dianxun .mh-desk-pic:hover .mh-img { filter: saturate(1); transform: scale(1.025); }

.mh.mh-skin-dianxun .mh-desk-lead-txt {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 43px 34px 32px;
  border-right: 1px solid var(--mh-line);
}

.mh.mh-skin-dianxun .mh-desk-lead-txt::before {
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  content: "今日精选";
}

.mh.mh-skin-dianxun .mh-desk-lead-h {
  min-height: 4.5em;
  margin: 29px 0 24px;
  font-family: var(--mh-serif);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.mh.mh-skin-dianxun .mh-desk-lead-h a {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Picless leads keep their V1 text-feature treatment, retinted by the new
   tokens; the centring rule still applies on top of this grid. */

.mh.mh-skin-dianxun .mh-desk-lead-m {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--mh-muted);
  font-size: 10px;
}

.mh.mh-skin-dianxun .mh-desk-lead-m .mh-desk-more {
  margin-left: auto;
  color: var(--mh-green);
  font-weight: 700;
}

.mh.mh-skin-dianxun .mh-desk-list {
  display: flex;
  flex-direction: column;
  grid-column: 3;
  grid-row: 1;
  height: 420px;
  margin: 0;
  padding: 12px 28px 18px;
  background: var(--mh-panel-soft);
  counter-reset: mh3-desk;
}

.mh.mh-skin-dianxun .mh-desk-list > li {
  flex: 1 1 0;
  min-height: 0;
  border-bottom: 1px solid var(--mh-line);
}

/* TWO LINES, MAXIMUM — NOT TWO LINES ALWAYS (owner, 2026-08-11: 「in 分类精选,
   the 01-06 titles, if longer than one line, should occupy two lines」).

   `align-content: center` REPLACES `align-items: center`, and the swap is the
   whole mechanism. With `align-items` the two implicit rows were stretched to
   split the row's 64px evenly and the title was pulled to the BOTTOM of a
   32px track (`align-self: end`) with the source at the TOP of the next — a
   pair of tricks that made a one-line title and its byline read as one
   centred block. A title that now runs to two lines does not fit that scheme:
   the tracks stop stretching and everything the tricks positioned moves. With
   `align-content` the two tracks are exactly their content and the BLOCK is
   centred, which gives the identical result for one line (measured: title top
   12.19px, source bottom 62.88px, both unchanged) and the only sane result
   for two.

   THE ROW DOES NOT GROW, AND THAT IS DELIBERATE. `.mh-desk-list` is a fixed
   420px and its six `<li>` are `flex: 1 1 0`, so every row is (420 − 30) / 6 =
   65px whatever it holds, and `.mh-desk.is-on` is a fixed 420px too. The
   carousel's panels therefore all stand at one height and switching tabs
   cannot jump — the thing that WOULD make it jump is a panel sized by its
   content, which this band has never had. Two lines cost 45px + 3px + 13.95px
   = 61.95px against 64px of usable row: it fits with 2px to spare, and every
   term is a fixed multiple of a fixed font-size, so that margin is arithmetic
   rather than a hope about font metrics. */
.mh.mh-skin-dianxun .mh-desk-list > li > article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 3px 9px;
  align-content: center;
  height: 100%;
  counter-increment: mh3-desk;
}

/* The number belongs to the FIRST line, not to the block. It used to span
   both rows and centre against them, which with a two-line title parks 03
   halfway down the headline as if it numbered the second line. `baseline` in
   row 1 puts it on the first line's own baseline — grid first-baseline
   alignment reads the FIRST baseline of a multi-line item — so it holds that
   position for a one-line title and a two-line one alike, with no measured
   height to keep in step with the type scale. */
.mh.mh-skin-dianxun .mh-desk-list > li > article::before {
  grid-row: 1;
  align-self: baseline;
  color: var(--mh3-signal);
  font-family: var(--mh-mono);
  font-size: 8px;
  content: "0" counter(mh3-desk);
}

/* `white-space: nowrap` is gone and a two-line clamp takes its place. The
   clamp is a MAXIMUM: a title that fits on one line still occupies one, which
   is why this is -webkit-line-clamp and not a fixed `height: 2lh`. The
   standard `line-clamp` is declared beside the -webkit pair for the engines
   that ship it; `text-overflow` stays for the same reason the full headline
   stays in title= — the truncation must remain recoverable. */
.mh.mh-skin-dianxun .mh-desk-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  grid-column: 2;
  align-self: baseline;
  overflow: hidden;
  font-family: var(--mh-serif);
  font-size: 13px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: normal;
}

.mh.mh-skin-dianxun .mh-desk-list .mh-s {
  grid-column: 2;
  align-self: start;
  color: var(--mh3-faint);
  font-size: 9px;
}

/* --------------------------------------------------------------------------
   V3.4 滚动新闻: sticky badge rails, numbered rows, dark CTA bar
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-roll {
  margin-top: 85px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mh.mh-skin-dianxun .mh-roll-h {
  min-height: 85px;
  margin: 0 28px;
  padding: 20px 0 17px;
  border-top: 4px solid var(--mh-ink);
  gap: 15px;
  align-items: center;
}

/* align-self: CENTER, not end (owner, 2026-08-08). The head is
   align-items: center already; `end` was overriding it for this one kicker, so
   LIVE NEWS sat on the title's baseline while SECTIONS, COMMENTS and IN DEPTH
   all sit on their line's middle. */
.mh.mh-skin-dianxun .mh-roll-h::before { content: "LIVE NEWS"; align-self: center; }

/* 31px, the page's band-title size — 分类精选, 茉莉花评论 and 茉莉花深度 are all
   31px and this was the one at 36px (owner, 2026-08-08). The 4px top rule and
   96px band still give it the extra weight it should carry. */
.mh.mh-skin-dianxun .mh-roll-title { font-size: 31px; }
.mh.mh-skin-dianxun .mh-roll-title a { text-decoration: none; }

.mh.mh-skin-dianxun .mh-roll-h::after {
  margin-left: auto;
  color: var(--mh-muted);
  font-size: 10px;
  content: "今日持续更新";
}

/* The roll card and its rails: the card owns the border, the rails stick. */
.mh.mh-skin-dianxun .mh-roll-grid {
  grid-template-columns: 84px minmax(0, 1fr) 84px;
  gap: 0;
  align-items: start;
}

.mh.mh-skin-dianxun .mh-roll-body {
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
}

.mh.mh-skin-dianxun .mh-roll-h { background: var(--mh-panel); }

.mh.mh-skin-dianxun .mh-roll-rail {
  position: sticky;
  top: 20px;
  align-self: start;
  background: var(--mh-panel-soft);
  border: 1px solid var(--mh-line);
  box-shadow: 0 10px 26px rgb(28 32 28 / 4.5%);
}

.mh.mh-skin-dianxun .mh-roll-rail-l { border-right: 0; }
.mh.mh-skin-dianxun .mh-roll-rail-r { border-left: 0; }

.mh.mh-skin-dianxun .mh-roll-rail-h {
  display: grid;
  place-items: center;
  min-height: 55px;
  margin: 0;
  padding: 0;
  color: var(--mh3-faint);
  border-bottom: 1px solid var(--mh-line);
  font-size: 8px;
  letter-spacing: .15em;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-roll-rail ul { display: block; }

.mh.mh-skin-dianxun .mh-roll-rail li { border: 0; }

/* Split the shared source list between the two rails.
   NINE A SIDE (owner, 2026-08-09), from a list of HomeRenderer::RAIL_SOURCES.
   These two numbers and that constant are ONE setting written in two files:
   the left takes 1-9, the right takes 10-18. Change the constant without
   changing these and the middle of the list is silently dropped; change these
   without the constant and outlets appear in both rails. */

.mh.mh-skin-dianxun .mh-roll-rail a {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--mh-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0;
}

.mh.mh-skin-dianxun .mh-roll-rail li:last-child a { border-bottom: 0; }
.mh.mh-skin-dianxun .mh-roll-rail a:hover { background: var(--mh-panel); }

/* The circular source badge the rails and rows share. */
.mh.mh-skin-dianxun .mh-roll-rail a::before {
  display: inline-grid;
  place-items: center;
  width: 33px;
  height: 33px;
  color: #fff;
  background: var(--mh3-badge, var(--mh-plate));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 17%);
  font-family: var(--mh-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

/* Tone + mark per source (the prototype's own palette). Unmapped sources
   fall back to a green badge carrying the site's flower dot. */
.mh.mh-skin-dianxun .mh-roll-rail a::before { content: "源"; }

.mh.mh-skin-dianxun a[href*="/source/huxiu/"] { --mh3-badge: #a95b30; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/huxiu/"]::before { content: "虎"; }
.mh.mh-skin-dianxun a[href*="/source/yonhap-cn/"] { --mh3-badge: #3c67a3; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/yonhap-cn/"]::before { content: "联"; }
.mh.mh-skin-dianxun a[href*="/source/rfi-cn/"] { --mh3-badge: #ae3d3c; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/rfi-cn/"]::before { content: "RFI"; font-size: 8px; }
.mh.mh-skin-dianxun a[href*="/source/voa-chinese/"] { --mh3-badge: #304b69; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/voa-chinese/"]::before { content: "VOA"; font-size: 8px; }
.mh.mh-skin-dianxun a[href*="/source/storm-mg/"] { --mh3-badge: #695786; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/storm-mg/"]::before { content: "风"; }
.mh.mh-skin-dianxun a[href*="/source/udn-money/"] { --mh3-badge: #9b7a3c; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/udn-money/"]::before { content: "经"; }
.mh.mh-skin-dianxun a[href*="/source/8world/"] { --mh3-badge: #8a4059; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/8world/"]::before { content: "8"; font-size: 13px; }
.mh.mh-skin-dianxun a[href*="/source/ebc-news/"] { --mh3-badge: #3f7c70; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/ebc-news/"]::before { content: "东"; }
.mh.mh-skin-dianxun a[href*="/source/nextapple/"] { --mh3-badge: #b34a72; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/nextapple/"]::before { content: "壹"; }
.mh.mh-skin-dianxun a[href*="/source/greenbean/"] { --mh3-badge: #557643; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/greenbean/"]::before { content: "豆"; }
.mh.mh-skin-dianxun a[href*="/source/witness-hk/"] { --mh3-badge: #7c3541; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/witness-hk/"]::before { content: "法"; }
.mh.mh-skin-dianxun a[href*="/source/globalvoices-zh/"] { --mh3-badge: #257b73; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/globalvoices-zh/"]::before { content: "GV"; font-size: 9px; }
.mh.mh-skin-dianxun a[href*="/source/chuapp/"] { --mh3-badge: #363936; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/chuapp/"]::before { content: "触"; }
.mh.mh-skin-dianxun a[href*="/source/twstreetcorner/"] { --mh3-badge: #765844; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/twstreetcorner/"]::before { content: "巷"; }
.mh.mh-skin-dianxun a[href*="/source/dw-chinese/"] { --mh3-badge: #2f6a94; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/dw-chinese/"]::before { content: "德"; }
.mh.mh-skin-dianxun a[href*="/source/collective-hk/"] { --mh3-badge: #44403b; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/collective-hk/"]::before { content: "集"; }
.mh.mh-skin-dianxun a[href*="/source/yulezibenlun/"] { --mh3-badge: #8a2942; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/yulezibenlun/"]::before { content: "娱"; }
.mh.mh-skin-dianxun a[href*="/source/ifanr/"] { --mh3-badge: #c05f28; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/ifanr/"]::before { content: "范"; }
.mh.mh-skin-dianxun a[href*="/source/gcores/"] { --mh3-badge: #b3403a; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/gcores/"]::before { content: "核"; }
.mh.mh-skin-dianxun a[href*="/source/coolloud/"] { --mh3-badge: #6c5a2f; }
.mh.mh-skin-dianxun .mh-roll-rail a[href*="/source/coolloud/"]::before { content: "苦"; }

/* --------------------------------------------------------------------------
   Source rails: real publisher logos (owner, 2026-08-09)
   --------------------------------------------------------------------------
   These rules MUST stay below the monogram block above. A per-source monogram
   selector scores (0,4,2) — three classes plus an [href*=] attribute, an
   element and a pseudo-element — and .has-logo::before scores exactly the same
   (0,4,2). On a specificity tie the later rule wins, so source order is the
   whole mechanism here. Move this block up and every logo gets a monogram
   stamped on top of it.

   The monograms are NOT deleted. Eighteen sources have logo files; the other
   seventy-odd still need something in the chip, and 苦 for 苦勞網 remains a
   better mark than a truncated Chinese name. So the two systems coexist and
   .has-logo is the switch between them, per source, with no CSS edit when a
   new file lands.
   -------------------------------------------------------------------------- */

/* Kill the monogram, and the font-size:0 that hid the name for it. */
.mh.mh-skin-dianxun .mh-roll-rail a.has-logo {
  padding: 4px 5px;
  font-size: 0;
}

.mh.mh-skin-dianxun .mh-roll-rail a.has-logo::before {
  display: none;
  content: none;
}

/* The name stays in the accessibility tree and leaves the visual layer.
   display:none would strip it from the link's accessible name, and the link
   would announce as nothing but its URL. */
.mh.mh-skin-dianxun .mh-roll-rail a.has-logo .mh-rail-nm {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The chip is 84px wide and 58px tall — a PORTRAIT box, which is worth stating
   because the instinct is to size a logo against the width. 34px of height
   leaves a comfortable margin inside the 50px the padding allows, and it is
   what the eight roughly-square marks actually use; capping at 26px, as this
   first did, threw away half the chip and made every mark look timid.

   The wide lockups stay width-bound and simply sit shorter — 74px is all the
   width there is, so EBC's 7.7:1 wordmark can only ever be about 10px tall.
   That is a property of an 84px column, not something a cap can fix. */
/* A DEFINITE BOX, NOT auto/auto — three of the SVGs render NOTHING otherwise.
   8world.svg, un-news-zh.svg and voa-chinese.svg declare no width or height
   attribute, only a viewBox. With `width: auto; height: auto` an <img> holding
   such a file has no intrinsic size to resolve against, and inside a grid item
   it computes to 0x0: the file loads (naturalWidth reports the browser's 300px
   fallback), the chip is drawn, and the logo is simply invisible. That is what
   the owner saw as 「both 8world and 联合国新闻 … do not appear in the logo
   bars」, and VOA would have done the same the moment it re-entered the roll.

   Giving the element the full 74x34 content box and letting object-fit:contain
   place the artwork inside works for every case and depends on no attribute
   the publisher may or may not have set: a 1:1 tile renders 34x34 centred, a
   7.7:1 lockup renders 74x9.6 centred. */
.mh.mh-skin-dianxun .mh-rail-logo {
  display: block;
  width: 100%;
  height: 34px;
  object-fit: contain;
}

/* 爱范儿's mark is white type for a dark masthead: on the light skin half of it
   is simply absent. It is the only one that needs the plate INVERTED, so it
   gets an ink plate on light and nothing on dark, where it already reads. */
html[data-mh-theme="light"] .mh.mh-skin-dianxun .mh-roll-rail a.has-logo.needs-ink {
  padding: 3px 4px;
  background: #1b211d;
  border-color: #2c352f;
}

@media (prefers-color-scheme: light) {
  html:not([data-mh-theme="dark"]) .mh.mh-skin-dianxun .mh-roll-rail a.has-logo.needs-ink {
    padding: 3px 4px;
    background: #1b211d;
    border-color: #2c352f;
  }
}

/* Dark skin: give the dark-ink marks the light ground they were drawn for.
   Only the thirteen that need it, so the dark rail stays mostly dark — a
   column of eighteen white plates would outshout the headlines beside it. */
/* The html:not([data-mh-theme]) guard is not decoration: without it this
   query also fired for a dark-OS reader who had TOGGLED TO LIGHT. The light
   rule below it (html[data-mh-theme="light"] …) only restates background and
   border-color, so the padding and the inset source bar leaked through and the
   toggled-light rail did not match the rail a light machine gets. Explicit
   dark is answered by the block directly beneath this one. */
@media (prefers-color-scheme: dark) {
  html:not([data-mh-theme]) .mh.mh-skin-dianxun .mh-roll-rail a.has-logo.needs-plate {
    padding: 3px 4px;
    background: #eef0ea;
    border-color: #46514a;
    box-shadow: inset 3px 0 0 var(--source-color, #46514a);
  }
}

html[data-mh-theme="dark"] .mh.mh-skin-dianxun .mh-roll-rail a.has-logo.needs-plate {
  padding: 3px 4px;
  background: #eef0ea;
  border-color: #46514a;
  box-shadow: inset 3px 0 0 var(--source-color, #46514a);
}

/* NO LIGHT COUNTERPART, DELIBERATELY. There used to be one here:

     html[data-mh-theme="light"] … .needs-plate {
       background: color-mix(in srgb, var(--mh-panel-soft) 55%, var(--mh-panel));
       border-color: color-mix(in srgb, var(--mh-line) 86%, transparent);
     }

   It was never a light treatment; it was the UNDO for the unguarded dark query
   above, and it is legible as such — it restated only the two properties the
   dark plate would have got visibly wrong (background, border-color) and left
   the padding and the inset source bar alone. Once that query carries
   html:not([data-mh-theme]) nothing dark reaches an explicitly-light reader,
   and the undo has nothing left to undo.

   Keeping it would have left the fourth case wrong in the other direction.
   A light machine that has never touched the toggle matches no [data-mh-theme]
   selector at all, so it kept the base transparent chip and the full-strength
   --mh-line hairline; a reader who pressed 浅色 got the tint and an 86%-alpha
   hairline. Thirteen of the eighteen rail rows carry .needs-plate, so the
   visible result was thirteen paler rules among five ordinary ones — a ladder
   of mismatched hairlines that appeared only after someone used the toggle.
   Deleting is the smaller blast radius than adding the prefers-color-scheme:
   light twin: the untoggled light rail is the reference both other rules are
   measured against, and it is what almost every light reader already sees.

   .needs-ink above DOES keep both entrances, and that is not an inconsistency:
   its light plate is a real design decision (爱范儿's mark is white type and
   disappears on light paper), so it must reach implicit light too. */

/* The plate is the reason the hover tint is restated: the generic hover sets a
   green wash that would fight the plate and leave the mark on a colour it was
   never drawn against. */
.mh.mh-skin-dianxun .mh-roll-rail a.has-logo:hover {
  border-color: var(--mh-green);
}

.mh.mh-skin-dianxun .mh-roll-rail a.has-logo.needs-plate:hover {
  background: #f6f8f3;
  border-color: var(--mh-green);
}

/* The dark shuffle control. */
.mh.mh-skin-dianxun .mh-roll-swap {
  height: 38px;
  padding: 0 5px 0 12px;
  color: #d9bc87;
  background: #221b19;
  border: 1px solid #5c4439;
  border-radius: 2px;
  box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 4px 10px rgb(30 20 16 / 10%);
  font-family: var(--mh-sans);
  letter-spacing: 0;
  transition: color 170ms ease, background 170ms ease, border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}

.mh.mh-skin-dianxun .mh-roll-swap:hover {
  color: #f6e8cd;
  background: #161210;
  border-color: #9e765e;
  box-shadow: inset 0 1px rgb(255 255 255 / 10%), 3px 5px 0 rgb(125 48 45 / 17%);
  transform: translateX(2px);
}

.mh.mh-skin-dianxun .mh-roll-cyc { margin-right: 6px; }
.mh.mh-skin-dianxun .mh-roll-swap:hover .mh-roll-cyc { transform: rotate(145deg); }

.mh.mh-skin-dianxun .mh-roll-swap-a,
.mh.mh-skin-dianxun .mh-roll-swap-b {
  font-family: var(--mh-serif);
  font-size: 12px;
  letter-spacing: .14em;
}

.mh.mh-skin-dianxun .mh-roll-chip {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 26px;
  margin-left: 9px;
  padding: 0 5px;
  color: #ecd7b0;
  background: #7d302d;
  border-radius: 1px;
  font-family: var(--mh-mono);
  font-size: 7px;
}

.mh.mh-skin-dianxun .mh-roll-swap:hover .mh-roll-chip { color: #fff; background: #963a35; }

/* Featured rows: number · badge+source · serif title · category · arrow.
   Height contract stays V2's 1450px. */
.mh.mh-skin-dianxun .mh-roll-feat {
  padding: 0 28px;
  counter-reset: mh3-roll;
  border-top: 0;
}

.mh.mh-skin-dianxun .mh-roll-feat > li > article {
  grid-template-columns: 38px 25px auto minmax(0, 1fr) 48px 26px;
  grid-template-rows: auto;
  gap: 0 10px;
  padding: 0;
  counter-increment: mh3-roll;
  transition: background 160ms ease;
}

.mh.mh-skin-dianxun .mh-roll-feat > li > article:hover { background: var(--mh3-soft); }

.mh.mh-skin-dianxun .mh-roll-feat > li > article::before {
  color: var(--mh3-rule-strong);
  font-family: var(--mh-mono);
  font-size: 8px;
  content: "0" counter(mh3-roll);
}

.mh.mh-skin-dianxun .mh-roll-feat > li:nth-child(n+10) > article::before {
  content: counter(mh3-roll);
}

.mh.mh-skin-dianxun .mh-roll-badge {
  display: inline-grid;
  grid-row: auto;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #fff;
  background: var(--mh3-badge, var(--mh-plate));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 17%);
  font-family: var(--mh-sans);
  font-size: 9px;
  font-weight: 800;
}

/* Give the row badge its tone from the source link beside it. */
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/huxiu/"]) { --mh3-badge: #a95b30; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/yonhap-cn/"]) { --mh3-badge: #3c67a3; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/rfi-cn/"]) { --mh3-badge: #ae3d3c; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/voa-chinese/"]) { --mh3-badge: #304b69; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/storm-mg/"]) { --mh3-badge: #695786; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/udn-money/"]) { --mh3-badge: #9b7a3c; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/8world/"]) { --mh3-badge: #8a4059; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/ebc-news/"]) { --mh3-badge: #3f7c70; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/nextapple/"]) { --mh3-badge: #b34a72; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/greenbean/"]) { --mh3-badge: #557643; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/witness-hk/"]) { --mh3-badge: #7c3541; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/globalvoices-zh/"]) { --mh3-badge: #257b73; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/chuapp/"]) { --mh3-badge: #363936; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/twstreetcorner/"]) { --mh3-badge: #765844; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/dw-chinese/"]) { --mh3-badge: #2f6a94; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/collective-hk/"]) { --mh3-badge: #44403b; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/yulezibenlun/"]) { --mh3-badge: #8a2942; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/ifanr/"]) { --mh3-badge: #c05f28; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/gcores/"]) { --mh3-badge: #b3403a; }
.mh.mh-skin-dianxun .mh-roll-feat article:has(a[href*="/source/coolloud/"]) { --mh3-badge: #6c5a2f; }

.mh.mh-skin-dianxun .mh-roll-meta { display: contents; }

.mh.mh-skin-dianxun .mh-roll-meta .mh-s {
  grid-column: 3;
  color: var(--mh-muted);
  font-size: 9px;
}

.mh.mh-skin-dianxun .mh-roll-meta .mh-s:hover { color: var(--mh-green); }

.mh.mh-skin-dianxun .mh-roll-t {
  grid-column: 4;
  padding: 0 22px 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.mh.mh-skin-dianxun .mh-roll-meta .mh-roll-cat {
  grid-column: 5;
  color: var(--mh3-faint);
  font-size: 9px;
  text-decoration: none;
}

.mh.mh-skin-dianxun .mh-roll-pic { display: none; }

.mh.mh-skin-dianxun .mh-roll-go {
  display: grid;
  grid-column: 6;
  grid-row: auto;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--mh-green);
  border: 1px solid var(--mh-line);
  border-radius: 50%;
  font-size: 10px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mh.mh-skin-dianxun .mh-roll-feat > li > article:hover .mh-roll-go {
  opacity: 1;
  transform: none;
}

/* Dense mode: accent source · serif one-line title. */
.mh.mh-skin-dianxun .mh-roll-dense { padding: 0 28px; border-top: 0; }

.mh.mh-skin-dianxun .mh-roll-dense > li > article {
  grid-template-columns: 66px minmax(0, 1fr);
}

.mh.mh-skin-dianxun .mh-roll-dense > li:nth-child(-n+50) > article {
  padding-right: 20px;
  border-right: 1px solid var(--mh3-rule-strong);
}

.mh.mh-skin-dianxun .mh-roll-ds {
  flex-basis: auto;
  max-width: 60px;
  overflow: hidden;
  color: var(--mh-green);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh.mh-skin-dianxun .mh-roll-ds::after { margin-left: 5px; color: var(--mh3-rule-strong); content: "·"; }
.mh.mh-skin-dianxun .mh-roll-ds:hover { color: var(--mh3-signal); }

.mh.mh-skin-dianxun .mh-roll-dt {
  font-family: var(--mh-serif);
  font-size: 15px;
}

/* The dark-green CTA bar home-rescue v3 appends. */
.mh.mh-skin-dianxun .mh-roll-more {
  display: grid;
  grid-template-columns: 1fr auto 30px;
  align-items: center;
  min-height: 70px;
  margin-top: 26px;
  padding: 0 28px;
  color: #fff;
  background: var(--mh3-deep);
  text-decoration: none;
}

.mh.mh-skin-dianxun .mh-roll-more span { font-family: var(--mh-serif); font-size: 17px; }
.mh.mh-skin-dianxun .mh-roll-more b { color: rgb(255 255 255 / 52%); font-size: 9px; }
.mh.mh-skin-dianxun .mh-roll-more i { justify-self: end; font-style: normal; }

/* --------------------------------------------------------------------------
   V3.5 茉莉花评论: feed | dark editorial prompt | the (still closed) form
   -------------------------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-cmt {
  margin-top: 85px;
  padding: 0 0 20px;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 0;
  box-shadow: none;
}

.mh.mh-skin-dianxun .mh-cmt-h { margin: 0 26px 34px; }

.mh.mh-skin-dianxun .mh-cmt-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, .62fr) minmax(280px, .82fr);
  gap: 0;
  margin: 0 26px;
  border: 1px solid var(--mh3-rule-strong);
  box-shadow: 0 18px 48px rgb(28 32 28 / 7%);
}

.mh.mh-skin-dianxun .mh-cmt-side { display: contents; }

.mh.mh-skin-dianxun .mh-cmt-list {
  min-height: 520px;
  padding: 30px;
  background: var(--mh-panel);
  border-right: 1px solid var(--mh-line);
}

.mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:only-child) {
  display: grid;
  min-height: 520px;
  place-items: center;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-cmt-empty::before {
  display: block;
  height: 65px;
  color: var(--mh3-soft);
  font-family: Georgia, serif;
  font-size: 100px;
  line-height: 1;
  letter-spacing: 0;
  content: "\201C";
}

.mh.mh-skin-dianxun .mh-cmt-empty {
  color: var(--mh-muted);
  font-family: var(--mh-serif);
  font-size: 17px;
  line-height: 1.8;
}

/* The editorial prompt panel goes deep green. */
.mh.mh-skin-dianxun .mh-cmt-ask {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  margin: 0;
  padding: 36px 30px;
  color: #fff;
  background: var(--mh3-deep);
  border: 0;
}

.mh.mh-skin-dianxun .mh-cmt-ask-k {
  color: rgb(255 255 255 / 58%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.mh.mh-skin-dianxun .mh-cmt-ask-q {
  margin: 42px 0 26px;
  color: #fff;
  font-family: var(--mh-serif);
  font-size: clamp(23px, 2.1vw, 32px);
  font-weight: 500;
  line-height: 1.65;
}

/* The form panel: visible, styled, still honestly closed. */
.mh.mh-skin-dianxun .mh-cmt-form { display: block; }

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) fieldset {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  margin: 0;
  padding: 32px 28px 0;
  border: 0;
  background: var(--mh-panel-soft);
  opacity: .92;
}

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) {
  display: contents;
}

.mh.mh-skin-dianxun .mh-cmt-form::before {
  display: block;
  padding: 32px 28px 0;
  background: var(--mh-panel-soft);
  color: var(--mh-green);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  content: "加入讨论";
}

.mh.mh-skin-dianxun .mh-cmt-legend {
  margin: 0 0 4px;
  font-family: var(--mh-serif);
  font-size: 23px;
  color: var(--mh-ink);
}

.mh.mh-skin-dianxun .mh-cmt-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 6px 0;
  padding: 6px 10px;
  color: var(--mh-muted);
  border: 1px solid var(--mh3-rule-strong);
  border-radius: 99px;
  font-size: 9px;
}

.mh.mh-skin-dianxun .mh-cmt-type:has(input:checked) {
  color: var(--mh-on-accent);
  background: var(--mh-green);
  border-color: var(--mh-green);
}

.mh.mh-skin-dianxun .mh-cmt-type input { position: absolute; opacity: 0; }
.mh.mh-skin-dianxun .mh-cmt-type-h { display: none; }
.mh.mh-skin-dianxun .mh-cmt-type-n { font-weight: 600; }

.mh.mh-skin-dianxun .mh-cmt-f { margin: 10px 0 0; }

.mh.mh-skin-dianxun .mh-cmt-f > span,
.mh.mh-skin-dianxun .mh-cmt-f > label {
  display: block;
  margin: 0 0 6px;
  color: var(--mh-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .09em;
}

.mh.mh-skin-dianxun .mh-cmt-form input[type="text"],
.mh.mh-skin-dianxun .mh-cmt-form textarea {
  width: 100%;
  padding: 11px 12px;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-radius: 0;
}

.mh.mh-skin-dianxun .mh-cmt-form input[type="text"] { height: 38px; font-size: 11px; }
.mh.mh-skin-dianxun .mh-cmt-form textarea { min-height: 145px; resize: vertical; font-family: var(--mh-serif); font-size: 13px; line-height: 1.7; }

.mh.mh-skin-dianxun .mh-cmt-go {
  min-width: 122px;
  height: 39px;
  margin-top: 13px;
  padding: 0 13px;
  color: var(--mh-on-accent);
  background: var(--mh-green);
  border: 0;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  opacity: .35;
}

.mh.mh-skin-dianxun .mh-cmt-off {
  margin: 0;
  padding: 15px 28px 26px;
  background: var(--mh-panel-soft);
  color: var(--mh3-faint);
  font-size: 8px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   V3.6 The stacked window: one column below 880px, rails become a strip
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .mh.mh-skin-dianxun .mh-lead {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-art,
  .mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-art {
    grid-row: auto;
    grid-column: 1;
    min-height: 300px;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-m,
  .mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
  .mh.mh-skin-dianxun .mh-lead > .mh-x,
  .mh.mh-skin-dianxun .mh-lead > .mh-read {
    grid-column: 1;
    margin-inline: 22px;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-lead-t { font-size: 31px; }

  .mh.mh-skin-dianxun .mh-desk.is-on {
    grid-template-columns: 1fr;
    height: auto;
  }

  .mh.mh-skin-dianxun .mh-desk-pic { grid-column: 1; grid-row: auto; height: 280px; }
  .mh.mh-skin-dianxun .mh-desk-lead-txt { grid-column: 1; grid-row: auto; min-height: 0; padding: 34px 22px 28px; border-right: 0; border-bottom: 1px solid var(--mh-line); }
  .mh.mh-skin-dianxun .mh-desk-list { grid-column: 1; grid-row: auto; }

  .mh.mh-skin-dianxun .mh-roll-grid { grid-template-columns: minmax(0, 1fr); }

  .mh.mh-skin-dianxun .mh-roll-rail {
    position: static;
    border-right: 1px solid var(--mh-line);
    border-left: 1px solid var(--mh-line);
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l ul {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }

  .mh.mh-skin-dianxun .mh-roll-rail-l a { min-width: 57px; min-height: 55px; border-bottom: 0; border-right: 1px solid var(--mh-line); }

  .mh.mh-skin-dianxun .mh-roll-feat > li > article {
    grid-template-columns: 30px minmax(0, 1fr) 26px;
    grid-template-rows: auto auto;
    padding: 14px 0;
  }

  .mh.mh-skin-dianxun .mh-roll-feat > li > article::before { grid-row: 1 / span 2; align-self: start; padding-top: 7px; }
  .mh.mh-skin-dianxun .mh-roll-badge { grid-column: 2; grid-row: 1; }
  .mh.mh-skin-dianxun .mh-roll-meta .mh-s { grid-column: 2; grid-row: 1; margin-left: 34px; align-self: center; }
  .mh.mh-skin-dianxun .mh-roll-t { grid-column: 2; grid-row: 2; padding: 6px 12px 0 0; }
  .mh.mh-skin-dianxun .mh-roll-meta .mh-roll-cat { display: none; }
  .mh.mh-skin-dianxun .mh-roll-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; opacity: 1; transform: none; }

  .mh.mh-skin-dianxun .mh-cmt-grid { grid-template-columns: 1fr; }
  .mh.mh-skin-dianxun .mh-cmt-list { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--mh-line); }
  .mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:only-child) { min-height: 300px; }
  .mh.mh-skin-dianxun .mh-cmt-ask { min-height: 320px; }
}

/* ==========================================================================
   V3 FIX ROUND 1 — 2026-08-07, same session. What looking found:
   auto-placement split the roll rows in two, the lead grid grew phantom
   rows below the copy, the desks header scattered its arrows, and two
   generated headings still spoke Round 6's words.
   ========================================================================== */

/* Lead: every child placed, art spans everything, no phantom rows. */
.mh.mh-skin-dianxun .mh-lead { grid-template-rows: auto auto 1fr auto; }
.mh.mh-skin-dianxun .mh-lead > .mh-art,
.mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-art { grid-row: 1 / -1; height: 100%; }
.mh.mh-skin-dianxun .mh-lead > .mh-m { grid-row: 1; }
.mh.mh-skin-dianxun .mh-lead > .mh-lead-t { grid-row: 2; }
.mh.mh-skin-dianxun .mh-lead > .mh-x { grid-row: 3; align-self: start; }
.mh.mh-skin-dianxun .mh-lead > .mh-read { grid-row: 4; align-self: end; }

/* The design's words on the skin's generated heading. */
.mh.mh-skin-dianxun .mh-leads > .mh-h::before { content: "TOP STORY"; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.mh.mh-skin-dianxun .mh-leads > .mh-h { height: auto; min-height: 85px; align-items: center; }
.mh.mh-skin-dianxun .mh-leads > .mh-h a::after { font-size: 31px; font-weight: 700; line-height: 1.2; }

/* Desks header: one row of words, one row of controls. */
.mh.mh-skin-dianxun .mh-desks-h { padding-bottom: 0; border-bottom: 0; }
.mh.mh-skin-dianxun .mh-desks-h::after { order: 2; }
.mh.mh-skin-dianxun .mh-desks-title { order: 1; }
.mh.mh-skin-dianxun .mh-desks-h::before { order: 0; }
.mh.mh-skin-dianxun .mh-desk-arrow { order: 3; margin-top: 15px; }
/* 6px, not 15: 分类精选's head is the only one that also contains a tab strip,
   so its TITLE ROW is measured from the head's top to the tabs' top. At 15px
   that came to 94px while every other section title sat at 85. Trimming 9px
   here puts the title line on 85 with the rest; the strip's own 72px is
   separate content below the title, not part of it. */
.mh.mh-skin-dianxun .mh-desks-tabs { order: 4; margin-top: 6px; }
.mh.mh-skin-dianxun .mh-desk-next { order: 5; }
.mh.mh-skin-dianxun .mh-desks-h {
  border-bottom: 1px solid var(--mh3-rule-strong);
}

/* Roll rows: one line on desktop — auto-placement had wrapped the
   out-of-order columns onto a second row. */
@media (min-width: 881px) {
  .mh.mh-skin-dianxun .mh-roll-feat > li > article::before { grid-row: 1; grid-column: 1; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-badge { grid-row: 1; grid-column: 2; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-meta .mh-s { grid-row: 1; grid-column: 3; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-t { grid-row: 1; grid-column: 4; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-meta .mh-roll-cat { grid-row: 1; grid-column: 5; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-go { grid-row: 1; grid-column: 6; }
}

/* The roll header's live counter is a real element (v3 js provides it):
   the red count the pseudo-element could not carry. */
.mh.mh-skin-dianxun .mh-roll-h::after { content: none; }
.mh.mh-skin-dianxun .mh-roll-live {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
  color: var(--mh-muted);
  font-size: 10px;
}
.mh.mh-skin-dianxun .mh-roll-live b {
  color: var(--mh3-signal);
  font-family: var(--mh-serif);
  font-size: 27px;
  font-weight: 400;
}

/* The form heading speaks the design's words; the legend keeps its
   accessible name and loses its visual size. */
.mh.mh-skin-dianxun .mh-cmt-legend { font-size: 0; }
.mh.mh-skin-dianxun .mh-cmt-legend::before {
  display: block;
  margin: 0 0 18px;
  font-family: var(--mh-serif);
  font-size: 23px;
  color: var(--mh-ink);
  content: "写下你的观点";
}

.mh.mh-skin-dianxun .mh-cmt-empty { max-width: 30em; text-align: center; }

/* V3 FIX: the tagline fills the heading's first row, so both arrows and
   the tab rail wrap together as the second row — 46 + (100% − 92) + 46. */
.mh.mh-skin-dianxun .mh-desks-h::after {
  flex: 1 0 auto;
  margin-left: 24px;
  text-align: right;
}

/* V3 FIX: flex-wrap arithmetic kept stranding one arrow on the word row.
   The arrows now pin to the heading's bottom line — exactly the 72px tab
   row — and the tab rail insets 46px each side to make room. */
.mh.mh-skin-dianxun .mh-desks-h { position: relative; }
.mh.mh-skin-dianxun .mh-desks-tabs {
  flex: 1 0 100%;
  margin-inline: 46px;
}
.mh.mh-skin-dianxun .mh-desk-arrow {
  position: absolute;
  bottom: 0;
  height: 72px;
  min-height: 0;
  margin-top: 0;
}
.mh.mh-skin-dianxun .mh-desk-prev { left: 0; }
.mh.mh-skin-dianxun .mh-desk-next { right: 0; }

/* ==========================================================================
   V3 FIX ROUND 2 — 2026-08-07, owner-directed refinements:
   full-bleed tab row with edge arrows, whole 35px lead titles, a shorter
   comments band, footer mini-arrows, row thumbnails instead of category
   names, the primary category bar removed, and a shrinking sticky header.
   ========================================================================== */

/* 1. The tab row bleeds to the band's edges; the heading line stays; the
   arrows sit at the very sides with 46px lanes the tabs never enter. */
.mh.mh-skin-dianxun .mh-desks-h {
  margin: 0;
  padding: 18px 26px 0;
}

.mh.mh-skin-dianxun .mh-desks-tabs {
  flex: 1 0 calc(100% + 52px);
  /* 6px top, matching the order:4 rule above — this SHORTHAND comes later in
     the file and was quietly overriding it, which is why the title row stayed
     at 94px after the first fix. */
  margin: 6px -26px 0;
  padding-inline: 46px;
  background: var(--mh-panel);
}

.mh.mh-skin-dianxun .mh-desk-prev { left: 0; }
.mh.mh-skin-dianxun .mh-desk-next { right: 0; }

/* 2. 今日焦点: the whole headline, at 35px — no ellipsis on the top story. */
.mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
.mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-lead-t {
  display: block;
  overflow: visible;
  font-size: 35px;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* 3. 茉莉花评论: ~27% shorter. */
.mh.mh-skin-dianxun .mh-cmt-list,
.mh.mh-skin-dianxun .mh-cmt-ask { min-height: 380px; }
.mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:only-child) { min-height: 380px; }
.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) fieldset { min-height: 320px; padding-top: 24px; }
.mh.mh-skin-dianxun .mh-cmt-form textarea { min-height: 100px; }
.mh.mh-skin-dianxun .mh-cmt-ask-q { margin: 28px 0 20px; }
.mh.mh-skin-dianxun .mh-cmt-empty::before { height: 48px; font-size: 76px; }
.mh.mh-skin-dianxun .mh-cmt-legend::before { margin-bottom: 14px; }

/* 4. The footer mini-arrows (v3 js provides the buttons). */
.mh.mh-skin-dianxun .mh-desk-mini {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--mh-green);
  background: transparent;
  border: 1px solid var(--mh3-rule-strong);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}
.mh.mh-skin-dianxun .mh-desk-mini:hover { color: var(--mh-on-accent); background: var(--mh-green); border-color: var(--mh-green); }

/* 5. 滚动新闻 rows: the article's own photograph replaces the category
   name. A row without a photograph simply gives the space to its title. */
@media (min-width: 881px) {
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-meta .mh-roll-cat { display: none; }
  .mh.mh-skin-dianxun .mh-roll-feat > li > article { grid-template-columns: 38px 25px auto minmax(0, 1fr) auto 26px; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-pic {
    display: block;
    grid-row: 1;
    grid-column: 5;
    width: 104px;
    height: 64px;
    overflow: hidden;
    background: var(--mh-panel-soft);
  }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-pic .mh-img { width: 100%; height: 100%; object-fit: cover; }
}

/* 6. The primary category bar under the masthead is gone (owner ruling —
   the radios stay in the DOM; nothing else changes). */
.mh.mh-skin-dianxun .mh-cats { display: none; }

/* 7. The masthead sticks and shrinks once the reader scrolls (v3 js flags
   html.mh-stuck and compensates the page's top padding). */
html[data-mh-skin="dianxun"] .site-head {
  transition: box-shadow 180ms ease;
}

html[data-mh-skin="dianxun"].mh-stuck .site-head {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 300;
  box-shadow: 0 10px 30px rgb(20 30 24 / 12%);
}

@media (min-width: 881px) {
  html[data-mh-skin="dianxun"].mh-stuck .site-head .head-in {
    min-height: 54px;
    padding-block: 4px;
  }
  html[data-mh-skin="dianxun"].mh-stuck .site-head .brand {
    transform: scale(.82);
    transform-origin: left center;
  }
  /* The sticky rails duck under the stuck masthead. */
  html[data-mh-skin="dianxun"].mh-stuck .mh-roll-rail { top: 78px; }
}

/* ==========================================================================
   V3 FIX ROUND 3 — 2026-08-07, owner-directed:
   a mostly-solid stuck masthead, the 25px desk lead with its summary,
   15px for every non-featured title, and the roll heading aligned
   edge-to-edge like the tab rail before it.
   ========================================================================== */

/* 1. The stuck masthead is 70% opaque paper (owner: only 30% see-through),
   with a blur so the sliver that does show through stays legible. */
html[data-mh-skin="dianxun"].mh-stuck .site-head {
  background: rgb(251 250 246 / 70%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html[data-mh-skin="dianxun"][data-mh-theme="dark"].mh-stuck .site-head {
  background: rgb(19 23 20 / 70%);
}

@media (prefers-color-scheme: dark) {
  html[data-mh-skin="dianxun"]:not([data-mh-theme]).mh-stuck .site-head {
    background: rgb(19 23 20 / 70%);
  }
}

/* 2. 分类精选 lead: 25px headline, summary beneath. The excerpts exist for
   every published article now (backfilled from their own opening
   sentences; new articles arrive with the feed's teaser). */
.mh.mh-skin-dianxun .mh-desk-lead-h {
  min-height: 0;
  font-size: 25px;
}

.mh.mh-skin-dianxun .mh-desk-lead-x {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  flex: 0 0 auto;
  margin: 14px 0 0;
  overflow: hidden;
  color: var(--mh-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* The picless text-feature leads keep their larger centred type. */
.mh.mh-skin-dianxun .mh-desk-lead:not(:has(.mh-desk-pic)) .mh-desk-lead-h { font-size: 23px; }

/* 3. Non-featured titles read at 15px, the dense list's size: the desks'
   six, and the briefing's five. */
.mh.mh-skin-dianxun .mh-desk-t { font-size: 15px; }
.mh.mh-skin-dianxun .mh-brief .mh-e > .mh-t { font-size: 15px; }

/* 4. The roll heading card bleeds to the band edges — the slivers beside
   it are gone; its two rules stay, now full width. */
.mh.mh-skin-dianxun .mh-roll-h {
  margin: 0;
  padding-inline: 28px;
}

/* ==========================================================================
   V3 FIX ROUND 4 — 2026-08-07, owner-directed:
   no badges on the roll rows (the rails keep theirs), both roll modes at
   ONE height — 13 featured rows / 40-per-column dense, 1160px each — and
   the swap button back in the site's own green and old gold.
   ========================================================================== */

/* 1. Row badges gone; the source name leads the row. */
.mh.mh-skin-dianxun .mh-roll-feat .mh-roll-badge { display: none; }

@media (min-width: 881px) {
  .mh.mh-skin-dianxun .mh-roll-feat > li > article { grid-template-columns: 38px auto minmax(0, 1fr) auto 26px; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-meta .mh-s { grid-column: 2; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-t { grid-column: 3; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-pic { grid-column: 4; }
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-go { grid-column: 5; }
}

@media (max-width: 880px) {
  .mh.mh-skin-dianxun .mh-roll-feat .mh-roll-meta .mh-s { margin-left: 0; }
}

/* 2. One height for both modes (owner: the box must not move when
   换一批 is clicked). 40 dense rows per column and the 13 featured rows
   both close at exactly 1160px. The hidden rows stay in the DOM; the
   full hundred remains one click away at /latest/. */
.mh.mh-skin-dianxun .mh-roll-feat { height: 1160px; }
.mh.mh-skin-dianxun .mh-roll-feat > li:nth-child(n+14) { display: none; }

.mh.mh-skin-dianxun .mh-roll-dense {
  height: 1160px;
  grid-template-rows: repeat(40, 29px);
}
.mh.mh-skin-dianxun .mh-roll-dense > li:nth-child(n+81) { display: none; }
.mh.mh-skin-dianxun .mh-roll-dense > li:nth-child(-n+50) > article { border-right: 0; padding-right: 0; }
.mh.mh-skin-dianxun .mh-roll-dense > li:nth-child(-n+40) > article {
  padding-right: 20px;
  border-right: 1px solid var(--mh3-rule-strong);
}

@media (max-width: 880px) {
  .mh.mh-skin-dianxun .mh-roll-feat { height: auto; }
  .mh.mh-skin-dianxun .mh-roll-dense {
    height: 2400px;
    grid-template-rows: repeat(80, 30px);
  }
}

/* 3. The swap control in the site's own colors: deep jasmine green, cream
   text, the count on old gold. */
.mh.mh-skin-dianxun .mh-roll-swap {
  color: #f4eedf;
  background: var(--mh3-deep);
  border-color: var(--mh3-deep);
  box-shadow: 0 5px 14px rgb(18 48 35 / 13%);
}

.mh.mh-skin-dianxun .mh-roll-swap:hover {
  color: #fff9e9;
  background: #0f3022;
  border-color: #0f3022;
  box-shadow: 0 7px 16px rgb(18 48 35 / 18%);
  transform: translateY(-1px);
}

.mh.mh-skin-dianxun .mh-roll-chip {
  color: #173d2d;
  background: #d9c994;
}

.mh.mh-skin-dianxun .mh-roll-swap:hover .mh-roll-chip {
  color: #11291d;
  background: #c9b57e;
}

/* ==========================================================================
   V3 FIX ROUND 5 — 2026-08-07, owner-directed:
   a narrower 分类精选 picture so the middle column breathes, and a comment
   band that is neither left-heavy nor stacking its three chips.
   ========================================================================== */

/* 1. The desk picture gives width back to the headline and its summary —
   it no longer matches the 今日焦点 lead's weight, which is right: this
   is a section pick, not the day's top story. */
.mh.mh-skin-dianxun .mh-desk.is-on {
  grid-template-columns: minmax(0, .82fr) minmax(300px, .95fr) minmax(280px, .88fr);
}

/* 2. 茉莉花评论: the empty feed no longer takes the widest column, and the
   three type chips share one line. The fieldset was a COLUMN flex, so each
   label became its own row; it now wraps in a row and everything else
   claims a full line of its own. */
.mh.mh-skin-dianxun .mh-cmt-grid {
  grid-template-columns: minmax(0, .78fr) minmax(220px, .62fr) minmax(320px, .95fr);
}

.mh.mh-skin-dianxun .mh-cmt-side:has(fieldset:disabled) fieldset {
  flex-flow: row wrap;
  align-items: center;
  gap: 6px;
}

.mh.mh-skin-dianxun .mh-cmt-legend,
.mh.mh-skin-dianxun .mh-cmt-f {
  flex: 0 0 100%;
}

.mh.mh-skin-dianxun .mh-cmt-type {
  flex: 0 1 auto;
  margin: 0;
}

.mh.mh-skin-dianxun .mh-cmt-go { flex: 0 0 auto; }

/* The empty state stops hugging the middle of a tall column. */
.mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:only-child) { padding: 30px 24px; }

/* V3 FIX ROUND 6 — the 分类精选 summary runs four to five lines (owner
   2026-08-07), which is what the narrowed picture column bought. The clamp
   is FIVE with the box free to end at four when the text does; the excerpt
   takes the slack, so a short summary leaves no hole above the meta. */
.mh.mh-skin-dianxun .mh-desk-lead-x {
  flex: 1 1 auto;
  min-height: 0;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

/* V3 FIX: flex-grow defeated the clamp — a stretched -webkit-box shows as
   many lines as its height allows, so the "five" rendered as seven. The
   box sizes to its own text again and the meta keeps the column's foot. */
.mh.mh-skin-dianxun .mh-desk-lead-x {
  flex: 0 0 auto;
  max-height: calc(5 * 1.7 * 13px);
}

/* ==========================================================================
   V3 FIX ROUND 7 — 2026-08-07: the comment band matches the owner's
   reference design. Presentation only; every control stays disabled and
   the honest 尚未开放 note stays until ADR-0021 is approved and the
   backend exists.
   ========================================================================== */

/* LEFT: 最新评论 over a 2px rule, then the two-line empty state. */
.mh.mh-skin-dianxun .mh-cmt-list {
  display: flex;
  flex-direction: column;
  padding: 30px;
  text-align: left;
}

.mh.mh-skin-dianxun .mh-cmt-list:has(> .mh-cmt-empty:last-child) {
  display: flex;
  place-items: stretch;
}

.mh.mh-skin-dianxun .mh-cmt-list-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--mh-ink);
}

.mh.mh-skin-dianxun .mh-cmt-list-h h3 {
  margin: 0;
  font-family: var(--mh-serif);
  font-size: 23px;
  font-weight: 500;
}

.mh.mh-skin-dianxun .mh-cmt-list-h span {
  color: var(--mh3-faint);
  font-size: 9px;
}

.mh.mh-skin-dianxun .mh-cmt-empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: none;
  margin: 0;
  color: var(--mh-muted);
  font-family: var(--mh-serif);
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
}

.mh.mh-skin-dianxun .mh-cmt-empty b,
.mh.mh-skin-dianxun .mh-cmt-empty i {
  display: block;
  font-style: normal;
  font-weight: 400;
}

.mh.mh-skin-dianxun .mh-cmt-empty::before {
  order: -1;
  height: 52px;
  color: var(--mh3-soft);
  font-family: Georgia, serif;
  font-size: 84px;
  line-height: 1;
  content: "\201C";
}

/* MIDDLE: the standing rules sit at the foot of the green panel. */
.mh.mh-skin-dianxun .mh-cmt-ask-x {
  margin: 0;
  color: rgb(255 255 255 / 57%);
  font-size: 11px;
  line-height: 1.8;
}

.mh.mh-skin-dianxun .mh-cmt-ask-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  color: rgb(255 255 255 / 50%);
  font-size: 9px;
}

.mh.mh-skin-dianxun .mh-cmt-ask-rules li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mh.mh-skin-dianxun .mh-cmt-ask-rules li::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cf9188;
  content: "";
}

/* RIGHT: the counter and the arrow button share the submit row. */
.mh.mh-skin-dianxun .mh-cmt-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}

.mh.mh-skin-dianxun .mh-cmt-count {
  color: var(--mh3-faint);
  font-family: var(--mh-mono);
  font-size: 8px;
}

.mh.mh-skin-dianxun .mh-cmt-go {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 122px;
  margin-top: 0;
}

.mh.mh-skin-dianxun .mh-cmt-go i { font-style: normal; }

.mh.mh-skin-dianxun .mh-cmt-form input[type="text"]::placeholder,
.mh.mh-skin-dianxun .mh-cmt-form textarea::placeholder {
  color: var(--mh3-faint);
}

/* ==========================================================================
   PHONE HEADER: title · dark mode · hamburger · search (owner 2026-08-07).
   The register entry is gone globally, the nav lives behind the hamburger,
   and the row is single-height because there is no second row left to fill.
   This supersedes V2's two-row 82px header.
   ========================================================================== */

@media (max-width: 880px) {
  html[data-mh-skin="dianxun"] .site-head,
  html[data-mh-skin="dianxun"] .site-head .head-in {
    height: 56px !important;
    min-height: 56px !important;
  }

  /* The header must be the panel's positioning context. Without this the
     dropdown resolved top:56px against an outer Bricks wrapper and hung
     58px too low, below the 快讯 strip. */
  html[data-mh-skin="dianxun"] .site-head { position: relative; }

  html[data-mh-skin="dianxun"] .site-head .head-in {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto 34px;
    grid-template-rows: 56px;
    gap: 0 6px;
    align-items: center;
    padding: 0 10px !important;
  }

  html[data-mh-skin="dianxun"] .site-head .brand { grid-column: 1; grid-row: 1; }
  html[data-mh-skin="dianxun"] .site-head .mh-toggle-hoisted { grid-column: 2; grid-row: 1; display: flex; }
  html[data-mh-skin="dianxun"] .site-head .mh-burger { grid-column: 3; grid-row: 1; }
  html[data-mh-skin="dianxun"] .site-head .search { grid-column: 4; grid-row: 1; }

  /* The nav becomes a panel under the header, not a row inside it. */
  html[data-mh-skin="dianxun"] .site-head .main-nav {
    position: absolute;
    z-index: 30;
    top: 100%;
    right: 0;
    left: 0;
    display: none !important;
    width: auto !important;
    height: auto;
    margin: 0 !important;
    padding: 6px 10px 12px !important;
    background: var(--paper, #fbfaf6);
    border-bottom: 1px solid var(--rule-strong, #c7c2b6);
    box-shadow: 0 16px 30px rgb(28 32 28 / 12%);
    overflow: visible;
  }

  html[data-mh-skin="dianxun"] .site-head .main-nav.is-open { display: block !important; }

  html[data-mh-skin="dianxun"] .site-head .main-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    height: auto;
  }

  html[data-mh-skin="dianxun"] .site-head .main-nav li { border-bottom: 1px solid var(--rule, #dedbd2); }
  html[data-mh-skin="dianxun"] .site-head .main-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    border-right: 0 !important;
  }

  /* The hamburger itself: three rules, no icon font, no image. */
  html[data-mh-skin="dianxun"] .site-head .mh-burger {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 5px;
    width: 34px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  html[data-mh-skin="dianxun"] .site-head .mh-burger span {
    width: 21px;
    height: 1px;
    background: var(--ink, #171a17);
    transition: transform 160ms ease, opacity 160ms ease;
  }

  html[data-mh-skin="dianxun"] .site-head .mh-burger span:nth-child(2) { width: 15px; }
  html[data-mh-skin="dianxun"] .site-head .mh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  html[data-mh-skin="dianxun"] .site-head .mh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  html[data-mh-skin="dianxun"] .site-head .mh-burger[aria-expanded="true"] span:nth-child(3) { width: 21px; transform: translateY(-6px) rotate(-45deg); }

  /* The stuck header follows the shorter row. */
  html[data-mh-skin="dianxun"].mh-stuck .site-head .head-in { height: 56px !important; }
  html[data-mh-skin="dianxun"].mh-stuck .site-head .main-nav { top: 100%; }

  /* The open search layer sits over the single row. */
  html[data-mh-skin="dianxun"] .site-head .search.is-open { top: 9px; }
}

/* The hamburger is a phone control only. GUARDED BY min-width, not written
   as a bare later rule: a top-level declaration after a @media block wins
   over it at every width — which is how this very rule hid the hamburger on
   phones on its first deploy. */
@media (min-width: 881px) {
  html[data-mh-skin="dianxun"] .site-head .mh-burger { display: none; }
}

/* --------------------------------------------------------------------------
   茉莉花深度 — long-form band (不明白播客).

   Section head is the site's own grammar (3px ink rule, 9px mono kicker, 31px
   serif). The body is a LEAD plus a two-column grid, the same shape 分类精选
   uses, because a flat list of 12 titles is a sitemap rather than a section.

   These pieces have no photographs — they are conversations. Rather than
   invent one, the lead carries a deep-green plate with the episode number set
   large, the same device the question plate and the source monogram use.
   -------------------------------------------------------------------------- */
/* ORDER 7, AND THIS IS NOT COSMETIC. .mh-body lays its children out with
   explicit CSS order — leads 1, brief 2, mods 3, log 4, op 5, discussion 6 —
   so DOM position decides nothing. Without an order of its own this band
   defaulted to 0 and jumped to the TOP of the homepage no matter where it was
   emitted, which is exactly what the owner saw. It belongs after the
   discussion (6). */
/* THE BAND IS A PANEL, LIKE ITS SIBLINGS. .mh-desks and .mh-cmt are both
   var(--mh-panel) #fbfaf6 sitting on the page's #eceae4 paper; this band had no
   background at all, so the paper showed through and it read as a darker, colder
   slab wedged between two cards — the 「title area background is wrong」 the
   owner saw (2026-08-08). */
/* NO `order` HERE — IT LIVES IN EXACTLY ONE PLACE (2026-08-11). This rule used
   to declare `order: 7` and the 中国·美国 renumbering block near the end of the
   file declares `order: 8`; both are `.mh.mh-skin-dianxun .mh-deep`, so equal
   specificity handed it to the later one and the 7 had been dead since
   2026-08-11 while still reading as this band's number. The same was true of
   .mh-news (8 here, 9 there). Deleting the dead halves changes nothing the
   browser computes — verified order 8 / 9 before and after — and leaves the
   file saying ONE thing about each band's position. If this band's order needs
   to change, change it in the renumbering block; do not re-add a number here. */
.mh.mh-skin-dianxun .mh-deep { grid-column: 1 / -1; margin-top: 85px; background: var(--mh-panel); }
/* padding-left 26px is NOT arbitrary: every other band's head carries it
   (.mh-desks 26px, .mh-roll 28px) so the mono kicker hangs in a gutter and the
   Chinese title lands at ~400px while the BODY stays flush at the container
   edge. Without it this head sat 27px left of every other head on the page. */
.mh.mh-skin-dianxun .mh-deep-h { display: flex; align-items: flex-end; justify-content: flex-start; gap: 15px; min-height: 85px; padding: 18px 26px 15px; border-top: 3px solid var(--mh-ink); border-bottom: 1px solid var(--mh3-rule-strong); }
.mh.mh-skin-dianxun .mh-deep-h::before { align-self: center; content: "IN DEPTH"; color: var(--mh-green); font-family: var(--mh-mono); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.mh.mh-skin-dianxun .mh-deep-title { margin: 0; font-family: var(--mh-serif); font-size: 31px; font-weight: 700; line-height: 1.1; }
.mh.mh-skin-dianxun .mh-deep-src { display: flex; align-items: baseline; gap: 14px; margin: 0 0 2px auto; font-family: var(--mh-serif); font-size: 12px; color: var(--mh-muted); }
.mh.mh-skin-dianxun .mh-deep-src-l { white-space: nowrap; }
.mh.mh-skin-dianxun .mh-deep-src a { color: var(--mh-green); }
/* The count, with the page's own separator dot before it — the device
   .mh-lead .mh-m time::before and .mh-roll-ds::after already use — instead of
   relying on the head's flex gap to imply a break between the credit and the
   figure. */
.mh.mh-skin-dianxun .mh-deep-count { font-family: var(--mh-mono); font-size: 11px; color: var(--mh-muted); }
.mh.mh-skin-dianxun .mh-deep-count::before { content: "\00b7"; margin-right: 10px; color: var(--mh3-rule-strong); }
.mh.mh-skin-dianxun .mh-deep-count b { color: var(--mh-ink); font-weight: 500; }

/* A FOCUS RING, which this band had none of. .mh-pq-* rings its controls and
   this band's links were invisible to a keyboard — three selectors, the same
   device. */
.mh.mh-skin-dianxun .mh-deep-src a:focus-visible,
.mh.mh-skin-dianxun .mh-deep-film-t:focus-visible,
.mh.mh-skin-dianxun .mh-deep-t:focus-visible {
  outline: 2px solid var(--mh-green);
  outline-offset: 2px;
}

/* align-items: STRETCH, not start. The list column is always the taller of
   the two, so with `start` the lead column stopped ~200px short and left a
   slab of empty paper — the defect the owner has flagged three times. Stretch
   hands the lead the full row height and the plate below absorbs the slack, so
   the two columns end level at ANY episode count rather than at one that
   happens to fit. */
/* ------------------------------------------------------------------
   THE CONTENT SURFACE. One white box under the head holding both parts —
   players above, episodes as text below (owner, 2026-08-08). White rather
   than the band's #fbfaf6 so the content reads as the page's other section
   stages do, and so six dark video thumbnails have something to sit on that
   is not almost the same value as they are.
   
   26px on all four sides, matching the head's own inset: the plate used to
   start hard against the band's left edge and the right-hand column of titles
   used to finish hard against its right edge, while the head above them was
   inset 26px — so the band looked like two pieces of different furniture.
   ------------------------------------------------------------------ */
/* --mh-stage, NOT #fff. The literal was the last thing in this band that did
   not follow the palette: the plate stayed white while --mh-ink went light, so
   in dark mode every episode title on it measured 1.16:1 and every date 2.24:1.
   The token keeps the light rendering byte-identical (#ffffff) and gives dark a
   plate one step above the band. */
.mh.mh-skin-dianxun .mh-deep-content { background: var(--mh-stage); padding: 24px 26px 26px; }

/* --- part one: the players -------------------------------------------- */

/* Three across. Not auto-fit: the owner asked for three in a row, and
   auto-fit would silently become four on a wide viewport. */
.mh.mh-skin-dianxun .mh-deep-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }

/* ---- the click-to-load plate ---------------------------------------------
   A button, styled as the plate the band already uses, sized by the same
   16/9 box a player will occupy — so pressing it swaps the iframe in without
   the grid moving a pixel. */
.mh.mh-skin-dianxun .mh-deep-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 1px solid var(--mh-line);
  background: var(--mh3-deep);
  color: #f2ece0;
  cursor: pointer;
  transition: background-color .25s ease;
}
.mh.mh-skin-dianxun .mh-deep-play:hover { background: color-mix(in srgb, var(--mh3-deep) 88%, #fff); }
.mh.mh-skin-dianxun .mh-deep-play:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 2px; }

.mh.mh-skin-dianxun .mh-deep-play-ep { font-family: var(--mh-mono); font-size: 22px; letter-spacing: -.02em; color: #c9a86a; }

/* A triangle drawn in CSS rather than an image or an icon font: it is the one
   glyph on the page that must never fail to load. */
.mh.mh-skin-dianxun .mh-deep-play-i {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #f2ece0;
  transition: border-left-color .25s ease;
}
.mh.mh-skin-dianxun .mh-deep-play:hover .mh-deep-play-i { border-left-color: #fff; }
.mh.mh-skin-dianxun .mh-deep-play-x { font-family: var(--mh-sans); font-size: 11px; letter-spacing: .12em; color: rgba(242, 236, 224, .72); }

.mh.mh-skin-dianxun .mh-deep-film-f.is-live { position: relative; aspect-ratio: 16 / 9; background: var(--mh-ink); border: 1px solid var(--mh-line); overflow: hidden; }
.mh.mh-skin-dianxun .mh-deep-film-f.is-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  .mh.mh-skin-dianxun .mh-deep-play,
  .mh.mh-skin-dianxun .mh-deep-play-i { transition: none; }
}

.mh.mh-skin-dianxun .mh-deep-film { margin: 0; min-width: 0; }

/* aspect-ratio, not a padding-top hack: the iframe fills a box whose height
   is derived from its own width, so the grid never reflows when a player
   loads. 16/9 is YouTube's frame; anything else letterboxes inside it. */
/* var(--mh-ink), not an invented near-black. The well behind a player that has
   not loaded yet is visible for a moment on a slow connection, and inventing a
   colour for it is exactly what the owner objected to in this band — every
   value here is now a token the rest of the page already uses. */
.mh.mh-skin-dianxun .mh-deep-film-f { position: relative; aspect-ratio: 16 / 9; background: var(--mh-ink); border: 1px solid var(--mh-line); overflow: hidden; }
.mh.mh-skin-dianxun .mh-deep-film-f iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* The fallback plate, for an episode with no video id. Same deep green as the
   band's own device so a missing player is a deliberate-looking panel rather
   than a hole. */
.mh.mh-skin-dianxun .mh-deep-film-f.is-none { display: flex; align-items: center; justify-content: center; background: var(--mh-green); }
.mh.mh-skin-dianxun .mh-deep-film-ep { font-family: var(--mh-mono); font-size: 30px; color: var(--mh-paper); letter-spacing: -.02em; }

/* text-align: left is a RESET, not a preference: a bare <figcaption> is
   centred by the UA stylesheet, and centred captions under a left-aligned
   three-up grid was the one thing on this band that did not line up with
   anything else on the page. */
.mh.mh-skin-dianxun .mh-deep-film-c { display: block; padding-top: 10px; text-align: left; }
.mh.mh-skin-dianxun .mh-deep-film-t { display: block; font-family: var(--mh-serif); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--mh-ink); text-decoration: none; overflow-wrap: break-word; }
.mh.mh-skin-dianxun .mh-deep-film-t:hover { color: var(--mh-green); }

/* ONE LINE: EP number hard left, the rest hard right (owner, 2026-08-08).
   space-between rather than a margin-left:auto so the two ends are pinned to
   the caption's own width and stay aligned across all three columns. baseline
   alignment because the two runs are different sizes. gap 10px is the floor
   that keeps them apart if a long meta line ever meets a four-digit episode. */
/* margin-BOTTOM now: the line sits between the player and the title, so the
   space it owns is the one under it. */
.mh.mh-skin-dianxun .mh-deep-film-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.mh.mh-skin-dianxun .mh-deep-film-n { flex: none; font-family: var(--mh-mono); font-size: 10px; letter-spacing: .06em; color: var(--mh-green); }
.mh.mh-skin-dianxun .mh-deep-film-m { text-align: right; font-size: 10.5px; color: var(--mh-muted); }

/* --- part two: the episodes as text ----------------------------------- */

/* The 3px ink rule is the same device that separates bands on this page, used
   here at 1px to separate the two halves of one band — a heavier rule would
   read as two sections. margin-top carries the whole gap so the list's own
   first row padding does not double it. */
.mh.mh-skin-dianxun .mh-deep-list { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--mh-ink); columns: 2; column-gap: 30px; }
.mh.mh-skin-dianxun .mh-deep-row { break-inside: avoid; display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted var(--mh-line); }
.mh.mh-skin-dianxun .mh-deep-n { font-family: var(--mh-mono); font-size: 10px; letter-spacing: .04em; color: var(--mh-green); }
.mh.mh-skin-dianxun .mh-deep-body-c { min-width: 0; }
.mh.mh-skin-dianxun .mh-deep-t { display: block; font-family: var(--mh-serif); font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--mh-ink); text-decoration: none; overflow-wrap: break-word; }
.mh.mh-skin-dianxun .mh-deep-t:hover { color: var(--mh-green); }
.mh.mh-skin-dianxun .mh-deep-m { display: block; margin-top: 2px; font-size: 10.5px; color: var(--mh-muted); }

@media (max-width: 1000px) {
  /* Two across, so six becomes three rows rather than three cramped columns. */
  .mh.mh-skin-dianxun .mh-deep-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .mh.mh-skin-dianxun .mh-deep-h { flex-wrap: wrap; min-height: 0; padding: 14px 18px 12px; }
  .mh.mh-skin-dianxun .mh-deep-src { margin-left: 0; }
  .mh.mh-skin-dianxun .mh-deep-content { padding: 16px 18px 20px; }
  .mh.mh-skin-dianxun .mh-deep-films { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mh.mh-skin-dianxun .mh-deep-list { columns: 1; margin-top: 22px; padding-top: 18px; }
}


/* --------------------------------------------------------------------------
   每周精选 — the weekly-digest sign-up, last band on the page (order 8).

   Built from the owner's reference: rust kicker, a large serif promise on the
   left, a labelled field with the button flush against it on the right.

   The promise carries the band, so it is set at 40px — larger than any section
   title — because it is the only argument being made and there is nothing else
   here competing for the eye. The panel is one step warmer than the page so the
   band reads as a different KIND of thing from the news above it, without a
   border drawing a box around a request.
   -------------------------------------------------------------------------- */
/* NO `order` HERE either — see the note on .mh-deep above. The dead value was
   8; the renumbering block's 9 is the one that has been in force. */
.mh.mh-skin-dianxun .mh-news {
  grid-column: 1 / -1;
  margin-top: 85px;
  background: color-mix(in srgb, var(--mh-panel-soft) 70%, var(--mh-panel));
}

/* THE SITE'S SECTION HEAD, COPIED RATHER THAN APPROXIMATED: 3px ink rule, 74px
   band, 9px/700/.13em mono kicker in green, 31px serif 700 title, 26px inset,
   right-hand tagline pushed out with margin-left:auto. Every value here is the
   same value .mh-deep-h and .mh-desks-h use. The rule moved off .mh-news and
   onto this header for the same reason it did there — the head owns the rule
   that separates the band from what is above it. */
.mh.mh-skin-dianxun .mh-news-h {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  min-height: 85px;
  padding: 18px 26px 15px;
  /* var(--mh-panel), the same near-white every other section title sits on
     (owner, 2026-08-08). The band's body keeps its warmer tint — that is what
     marks it as a sign-up rather than another news band — but the TITLE LINE
     had no business being a different colour from 分类精选, 滚动新闻, 茉莉花评论
     and 茉莉花深度, all of which sit on panel. */
  background: var(--mh-panel);
  border-top: 3px solid var(--mh-ink);
  border-bottom: 1px solid var(--mh3-rule-strong);
}
.mh.mh-skin-dianxun .mh-news-h::before {
  align-self: center;
  content: "CURATED";
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  /* min-width so the kicker occupies the SAME GUTTER as SECTIONS (52.7px) and
     IN DEPTH (52.7px), which put their titles at x=400 and x=399. CURATED is a
     shorter word, so without this the title started at 392 — the band matched
     every specified value and still failed to line up with its neighbours,
     which is the kind of near-miss the owner has caught twice. */
  min-width: 53px;
}
.mh.mh-skin-dianxun .mh-news-t {
  margin: 0;
  font-family: var(--mh-serif);
  font-size: 31px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mh-ink);
}
.mh.mh-skin-dianxun .mh-news-tag {
  margin: 0 0 2px auto;
  font-family: var(--mh-serif);
  font-size: 12px;
  color: var(--mh-muted);
}

/* 1fr for the promise, a fixed measure for the form: the field must not grow
   with the viewport — a 700px-wide email box looks like a search bar. */
.mh.mh-skin-dianxun .mh-news-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 34px 48px;
  align-items: center;
  padding: 30px 26px 36px;
}

/* The promise, now BELOW the section title and therefore smaller than it. At
   40px it was the largest type on the page and outranked the heading it sat
   under; 28px keeps it clearly the band's argument without competing. */
.mh.mh-skin-dianxun .mh-news-say-t {
  margin: 0;
  font-family: var(--mh-serif);
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--mh-ink);
}

.mh.mh-skin-dianxun .mh-news-x {
  margin: 12px 0 0;
  max-width: 30em;
  font-size: 13px;
  line-height: 1.85;
  color: color-mix(in srgb, var(--mh-muted) 82%, var(--mh-ink));
}

.mh.mh-skin-dianxun .mh-news-form { margin: 0; }

/* ONE STEP TOWARDS THE INK, IN WHICHEVER DIRECTION THE INK IS (2026-08-11).

   --mh-muted is tuned against --mh-panel (#fbfaf6), where it measures 4.51:1.
   This band's ground is one step warmer and DARKER than the panel —
   color-mix(--mh-panel-soft 70%, --mh-panel) = rgb(246,244,239) — and on that
   ground the same token measures 4.28:1, so the three pieces of small print in
   每周精選 were the only AA failure left on the light default skin.

   `color-mix(… var(--mh-muted) 82%, var(--mh-ink))` fixes it in both modes
   WITHOUT a fourth token and without a literal: in light the ink is dark so the
   grey darkens (5.42:1); in dark the ink is light so the same declaration
   lightens it. A hand-picked darker grey would have had to be re-picked for
   dark, which is the whole class of bug this session is closing.
   Applied to the three elements on the band's own ground; .mh-news-tag sits in
   the head on --mh-panel and keeps the plain token. */
.mh.mh-skin-dianxun .mh-news-l {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mh-sans);
  font-size: 11px;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--mh-muted) 82%, var(--mh-ink));
}

/* The button is FLUSH against the field, sharing one outline, so the pair reads
   as a single control rather than two things that happen to be adjacent. The
   wrapper owns the border; the children have none. */
/* THE FIELD IS A SURFACE, SO IT TAKES --mh-stage. .mh-news-i draws its text in
   var(--mh-ink) on this ground; with the ground pinned to #fff, a dark-mode
   reader typed #f0eee6 onto white — 1.16:1, i.e. an invisible e-mail address in
   the one control on the page that asks for input. */
.mh.mh-skin-dianxun .mh-news-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mh-line);
  background: var(--mh-stage);
}

.mh.mh-skin-dianxun .mh-news-i {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  color: var(--mh-ink);
  font-family: var(--mh-sans);
  font-size: 15px;
  line-height: 1.4;
}
.mh.mh-skin-dianxun .mh-news-i::placeholder { color: color-mix(in srgb, var(--mh-muted) 70%, transparent); }

/* The whole pair takes the focus ring, not the input alone: a ring around only
   half of something that looks like one control reads as a rendering fault. */
.mh.mh-skin-dianxun .mh-news-i:focus { outline: 0; }
.mh.mh-skin-dianxun .mh-news-row:focus-within {
  border-color: var(--mh-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-green) 16%, transparent);
}

.mh.mh-skin-dianxun .mh-news-go {
  flex: none;
  padding: 15px 22px;
  border: 0;
  background: var(--mh3-deep);
  color: #fff;
  font-family: var(--mh-sans);
  font-size: 14px;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease;
}
.mh.mh-skin-dianxun .mh-news-go:hover { background: color-mix(in srgb, var(--mh3-deep) 86%, #000); }
.mh.mh-skin-dianxun .mh-news-go:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 2px; }

.mh.mh-skin-dianxun .mh-news-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--mh-muted) 82%, var(--mh-ink));
}

.mh.mh-skin-dianxun .mh-news-live { margin: 8px 0 0; font-size: 12px; color: var(--mh-green); }
.mh.mh-skin-dianxun .mh-news-live:empty { display: none; }

@media (max-width: 900px) {
  .mh.mh-skin-dianxun .mh-news-in { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 18px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mh.mh-skin-dianxun .mh-news-go { transition: none; }
}

/* --------------------------------------------------------------------------
   HERO IMAGE RULES (owner, 2026-08-09: the 今日焦点 photo is 「too high」).

   MEASURED BEFORE: a 313x640 phone screenshot rendered 482x986 in the hero —
   enlarged 1.5x from its own pixels, so also soft, and tall enough to strand
   the headline beside a column of nothing. Nothing capped the height, so the
   picture's 0.49 ratio decided it.

   680px is the cap, inside the owner's 650–720 range.

   The two shapes are treated differently on purpose, and the class comes from
   the server — HomeRenderer::photo_shape() compares the width_card and
   height_card it already holds, so there is no layout shift and no script:

     [data-orient="wide"]  fills the frame, cropped (object-fit: cover). A
                   landscape news photograph is a photograph; it should bleed.
     [data-orient="tall"]  is CONTAINED and never upscaled. A phone screenshot is a
                   document, not a photograph — blown up it looks like a
                   mistake, and at its own size it reads as what it is.
   -------------------------------------------------------------------------- */

/* The cap belongs to the FRAME as well as the image: overflow:hidden means a
   cropped landscape cannot spill, and max-height on the span is what actually
   shortens the band. */
.mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo {
  max-height: 680px;
  overflow: hidden;
}

.mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo[data-orient="wide"] .mh-img {
  width: 100%;
  height: 100%;
  max-height: 680px;
  object-fit: cover;
}

/* Centred in the frame with a flat neutral behind it. NOT a blurred blow-up of
   the same picture: that is the trick every content farm uses, and on a site
   whose claim is that its pictures are real it reads as decoration standing in
   for information. --mh-panel-soft is the same tone the page's quiet panels
   use, so the letterbox looks like paper rather than a hole. */
.mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo[data-orient="tall"] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mh-panel-soft);
}

/* width:auto with the intrinsic attributes present means the browser uses the
   picture's OWN pixels — 313px wide here, not 482 — so it is never enlarged.
   max-width keeps a wide-but-tall picture inside the column, max-height keeps
   a very long screenshot inside the cap. */
.mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo[data-orient="tall"] .mh-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 680px;
  object-fit: contain;
}

@media (max-width: 880px) {
  /* Shorter cap on a phone: 680px is most of a viewport, and the hero is not
     the page. */
  .mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo,
  .mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo[data-orient="wide"] .mh-img,
  .mh.mh-skin-dianxun .mh-leads .mh-lead .mh-art-photo[data-orient="tall"] .mh-img { max-height: 420px; }
}

/* --------------------------------------------------------------------------
   TITLES CENTERED IN THE 85px BAND (owner, 2026-08-09).

   The kicker, the Chinese title and the right-hand tagline all sit on the
   band's vertical middle. These heads were align-items:flex-end with
   asymmetric padding (18px top / 15px bottom, roll 20/17) — invisible while
   the band hugged its content, but the moment every band became a fixed 85px
   the titles sat visibly low. Vertical padding goes to ZERO so flex centring
   is exact; each head's HORIZONTAL inset lives in the same shorthand and the
   longhand overrides leave it untouched.

   分类精选 is absent on purpose: its head also contains the tab strip, so
   align-items would recentre the wrap lines. Its title row already measures
   21px above / 21px below the title — centred by construction after the
   6px tab-margin fix. */
.mh.mh-skin-dianxun .mh-leads > .mh-h,
.mh.mh-skin-dianxun .mh-cmt-h,
.mh.mh-skin-dianxun .mh-roll-h,
.mh.mh-skin-dianxun .mh-deep-h,
.mh.mh-skin-dianxun .mh-news-h {
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   中国 · 美国 — MIRRORED TWO-DESK BAND (owner, 2026-08-11)

   ADDED HERE, DIRECTLY ABOVE THE MOBILE TIER, ON PURPOSE. This stylesheet is
   append-only and its last block is the mobile tier of record; a bare
   top-level rule appended AFTER it beats that tier at every width, which is
   how Round 5 shipped 48px of horizontal overflow to a 390px reader. Every
   desktop rule for this band is here; everything a phone also needs is
   re-asserted INSIDE the 880px block below.

   WHY THIS FILE AND NOT site-build/home/skin-dianxun.css. This is the sheet
   that wins: home-skins.css sets the section title to 19px and this file
   overrides it to 31px, so a band written into the skin would be beaten by
   this file's own generic rules. It is hand-maintained and outside
   tools/audit-css-drift.py's bundle map, and HomeRescueOverlayTest forbids
   rescue rules migrating back into home-skins.css. The band's DEFAULT (off)
   is the one piece that had to go in the build source instead —
   site-build/home/skin-base.css, beside the identical defaults for .mh-desks,
   .mh-roll and .mh-cmt — because 文学城 and 小红书 must not inherit a band
   whose reading order the owner has not revisited.

   EVERY VALUE BELOW WAS READ OFF THIS FILE, NOT REMEMBERED. Sources are cited
   line by line. Only --mh-* and --mh3-* are consumed: falling through to a
   site token (--ink / --rule / --accent) is exactly the defect class at
   HANDOFF:1023, where an element followed the OS scheme while the skin's
   palette stayed light.

   THE HEADER IS THE DESIGN. The owner cut the per-column 中国 / 美国 labels as
   redundant — and they were, but they were also the only thing that said
   which side was which. So the head is laid on THE SAME THREE TRACKS as the
   columns (1fr / 66px / 1fr, same 26px inset), which puts 中国 over the left
   column and 美国 over the right. The mapping moves from a label to a
   position, the label really does become redundant, and nothing is lost.

   That leaves the column header holding only its freshness and its 全部 link.
   It is NOT given a rule of its own: a second hairline 24px under the head's
   would read as the leftover of a deleted title. Instead .mh-pair-cols loses
   its top padding and the line is pulled up to hang directly beneath the
   head's own 1px rule, as a dateline hangs under a section rule. One rule,
   and the line is its subscript rather than a strip of its own.
   ========================================================================== */

/* THE BAND. Panel, hairline border, no top border (the head's 3px ink line is
   this band's top edge) and no shadow — .mh-desks:1464-1474 exactly. The 85px
   margin is the owner's 2026-08-09 ruling that replaced four gaps
   (76/84/88/34) pretending to be one rhythm. grid-column AND order are both
   required: .mh-body is a two-column grid, so a band that sets order without
   grid-column lands in one column instead of across the page. */
.mh.mh-skin-dianxun .mh-pair {
  display: block;
  grid-column: 1 / -1;
  order: 3;
  margin-top: 85px;
  padding: 0;
  background: var(--mh-panel);
  border: 1px solid var(--mh-line);
  border-top: 0;
  box-shadow: none;
}

/* THE REST OF THE MAP SHIFTS BY ONE. order takes integers, 0 is the forbidden
   top (an unnumbered band is promoted ahead of the lede — SkinBandOrderTest)
   and 每周精選 must stay highest, so there is no free value between 今日简报
   and 分类精选 and inserting a band means renumbering. Reading order after
   this: 1 今日焦点 · 2 今日简报 · 3 中国美国 · 4 分类精选 · 5 滚动新闻 ·
   6 观点 · 7 投票表达 · 8 深度 · 9 每周精选. .mh-mods and .mh-log are
   display:none in this skin and keep their numbers. */
.mh.mh-skin-dianxun .mh-desks { order: 4; }
.mh.mh-skin-dianxun .mh-roll  { order: 5; }
.mh.mh-skin-dianxun .mh-op    { order: 6; }
.mh.mh-skin-dianxun .mh-cmt   { order: 7; }
.mh.mh-skin-dianxun .mh-deep  { order: 8; }
.mh.mh-skin-dianxun .mh-news  { order: 9; }

/* ---- the head ------------------------------------------------------------ */

/* Rules, inset and height are the band-head system verbatim (:1178-1190,
   :1478): 3px ink over, 1px --mh3-rule-strong under, 26px inset, 85px tall.
   Vertical padding is ZERO and the rows are centred, which is the owner's
   2026-08-09 ruling for every other head in this file (:3634-3658) — with two
   rows instead of one it is the only way this head measures the same 85px as
   its neighbours. Tracks match .mh-pair-cols exactly; that identity is the
   whole mechanism. */
.mh.mh-skin-dianxun .mh-pair-h {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
  align-content: center;
  row-gap: 9px;
  min-height: 85px;
  margin: 0 26px;
  padding: 0;
  border-top: 3px solid var(--mh-ink);
  border-bottom: 1px solid var(--mh3-rule-strong);
}

/* The English kicker, :1203-1212. */
.mh.mh-skin-dianxun .mh-pair-h::before {
  grid-area: 1 / 1;
  align-self: center;
  color: var(--mh-green);
  font-family: var(--mh-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.2;
  content: "TWO DESKS";
}

/* The right-hand tagline, :1218-1225. justify-self: end is what margin-left:
   auto does in the flex heads. It says what the band asks of a reader, once —
   two places shown side by side to be read across. Not a comparison, not a
   ranking: the ticks in the spine already state the counts as a fact. */
.mh.mh-skin-dianxun .mh-pair-h::after {
  grid-area: 1 / 3;
  align-self: center;
  justify-self: end;
  color: var(--mh-muted);
  font-family: var(--mh-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  /* NOT 「供读者对读」. 对读 promises paired readings and there are no
     pairs: seven articles face three, none about the same event. A
     caption describing something the page is not doing is worse than
     no caption. This states only what is true — two desks, today. */
  content: "两地当日要闻";
}

/* THE TITLE, on the columns' own grid. Type is :1192-1199 to the declaration
   — --mh-serif 31px/700, letter-spacing .02em — and margin 0 per :1482. The
   line-height is stated rather than left to the font so the head's height is
   the same 85px on every machine. */
.mh.mh-skin-dianxun .mh-pair-title {
  grid-area: 2 / 1 / 3 / -1;
  /* CENTRED AS ONE UNIT (owner, 2026-08-11), not split across the columns'
     grid. The three-track template that used to stand 中国 over the left
     column and 美国 over the right is gone; flex centres the pair and the
     interpunct sits between them instead of on the spine's axis. */
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .38em;
  text-align: center;
  margin: 0;
  font-family: var(--mh-serif);
  font-size: 31px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* The separator sits in the gutter, on the spine's axis, quiet and smaller
   than the names: it joins the two halves into one title without competing
   with either. It is not a third label — it carries no name. */
.mh.mh-skin-dianxun .mh-pair-conj {
  /* justify-self meant something under the old three-track grid; under flex
     the gap does the spacing. Kept off rather than left as a dead property. */
  color: var(--mh3-faint);
  font-size: 21px;
  font-weight: 400;
}

/* ---- the columns --------------------------------------------------------- */

/* minmax(0, 1fr), NOT 1fr. 1fr's minimum is auto, so one unbreakable 45-character
   headline would widen its own column and the mirror would lean. The 66px
   gutter is fixed; the two columns split what is left, always equally.
   padding-top is 0 so the freshness line can hang off the head's rule. */
.mh.mh-skin-dianxun .mh-pair-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
  align-items: stretch;
  padding: 0 26px 26px;
}

.mh.mh-skin-dianxun .mh-pair-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* THE LINE THE NAME USED TO OCCUPY. Freshness and the way through to the full
   desk, tucked up under the head's rule. No border: the head already drew it. */
.mh.mh-skin-dianxun .mh-pair-colh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 9px 0 17px;
}

.mh.mh-skin-dianxun .mh-pair-colh time {
  color: var(--mh3-faint);
  font-family: var(--mh-mono);
  font-size: 9px;
  letter-spacing: .06em;
}

/* --mh-green at 700, the treatment every other 全部 on this page already has
   (.mh-desk-more, :1715-1719). */
.mh.mh-skin-dianxun .mh-pair-all {
  color: var(--mh-green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---- the lead ------------------------------------------------------------ */

.mh.mh-skin-dianxun .mh-pair-lead {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 0 0 20px;
}

/* 2/1 is fixed and does not follow the source image. Two leads whose pictures
   set their own heights start their lists at different y, and a mirror that
   does not line up is worse than no mirror. 2/1 rather than 16/9: at this
   column width 16/9 gives 276px of picture and outweighs the six titles under
   it; 2/1 lands near 245px, which is the balance 分类精选 strikes. */
.mh.mh-skin-dianxun .mh-pair-pic {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--mh-panel-soft);
}

.mh.mh-skin-dianxun .mh-pair-pic .mh-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(1.03);
  transition: transform 700ms cubic-bezier(.2, .7, 0, 1), filter 300ms ease;
}

.mh.mh-skin-dianxun .mh-pair-pic:hover .mh-img { filter: saturate(1); transform: scale(1.025); }

/* The scrim 分类精选 puts on its lead (:1655-1659), expressed in a token
   instead of that rule's literal rgb() so it follows the scheme. */
.mh.mh-skin-dianxun .mh-pair-pic::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--mh3-deep) 62%, transparent));
  content: "";
}

/* A LEAD WITH NO PHOTOGRAPH. Not an empty frame: the type takes the height the
   picture would have had, centred on a quiet tinted plate, so the column reads
   as a deliberate text feature. This is the live treatment at :178-195,
   retargeted — the owner has ruled against the blank-space version three
   times. The mirror degrades honestly here: two leads of different heights
   start their lists at different y, but the columns stay equal height and the
   ticks still state each side's count. */
/* AND IT TAKES THE HEIGHT THE PICTURE WOULD HAVE TAKEN. Measured on screen
   first: left at its content height a picless lead came out 142px against the
   other side's 418px, and the 276px difference fell into the list, which
   stretched two entries to 270px each — a hole in the middle of the rows
   rather than at the top of the column. So the lead grows and the list stops
   growing in exactly the column where this happens. The mirror still gives up
   its shared list origin here, which is honest: the ticks go on stating each
   side's count, and no column is padded. */
.mh.mh-skin-dianxun .mh-pair-lead:not(:has(.mh-pair-pic)) { flex: 1 1 auto; }

/* NOT `:has(.mh-pair-lead:not(:has(…)))`. A :has() may not be nested inside
   another :has(), and a browser drops the entire selector when it is — which
   is exactly what happened on the first pass here: the rule parsed as nothing
   and the measurement below did not move. The column carries no picture at
   all, so one level says it. */
.mh.mh-skin-dianxun .mh-pair-col:not(:has(.mh-pair-pic)) .mh-pair-list,
.mh.mh-skin-dianxun .mh-pair-col:not(:has(.mh-pair-pic)) .mh-pair-list > li {
  /* The rows go to CONTENT height here, not to a share of the column. Stopping
     at the list was not enough — a flex container at `auto` sizes to its rows'
     max-content, so two entries still came out 180px each. With the rows fixed
     too, every pixel of the slack reaches the lead, where the headline is
     centred on the plate and the height reads as deliberate. */
  flex: 0 0 auto;
}

.mh.mh-skin-dianxun .mh-pair-lead:not(:has(.mh-pair-pic)) {
  padding: 22px 20px 16px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--mh-green) 8%, var(--mh-panel)), var(--mh-panel) 72%);
  border: 1px solid color-mix(in srgb, var(--mh-line) 85%, transparent);
}

.mh.mh-skin-dianxun .mh-pair-lead:not(:has(.mh-pair-pic)) .mh-pair-lead-t {
  min-height: 0;
  margin-block: auto;
  font-size: 23px;
  line-height: 1.62;
}

.mh.mh-skin-dianxun .mh-pair-lead:not(:has(.mh-pair-pic)) .mh-pair-lead-t a {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

/* min-height 4.5em is three lines at line-height 1.5 — the same number
   .mh-desk-lead-h uses (:1689). It is the condition for the mirror, not
   decoration: without it the two lists begin at different heights and the
   ticks in the spine have no shared origin. 400 and not 700 — 分类精选's lead
   is 400 too; only 今日焦点 sets its headline bold. */
.mh.mh-skin-dianxun .mh-pair-lead-t {
  /* 3.9em, not 4.5em, and line-height 1.3, not 1.5 — the owner inspected and
     asked for this box to be 90px, arrived at after 113 -> 98 -> 90 -> 80 -> 90 (2026-08-11). The 15px comes
     out of the BOX, so the source/time line and the ten rows under it rise while
     the title stays where it is. An earlier attempt took the 15px off the top
     margin instead; that moved the title too, which is not what was asked.

     THE INVARIANT IS FLOOR == MAXIMUM, and both numbers move together to keep
     it. -webkit-line-clamp below caps the title at three lines, so the tallest
     a title can be is 3 x line-height; min-height is set to exactly that. While
     the two are equal, a one-line title and a three-line title occupy the same
     box, both lists start at the same y, and the spine ticks have the shared
     origin the band is built on. Change one without the other and the columns
     part company by the difference on the days a headline runs long — a fault
     that appears and disappears with the news.

       3 x 1.2 = 3.6em   ->  25px font: 90px (the owner's 90)
                             24.48px at 1440px: 88.1px, still equal

     THREE LINES FIT AT 90px AND DO NOT AT 80px, which is why the clamp moved
     with the height and back again. Holding three lines in 80px needs
     line-height 1.067, and CJK glyphs fill roughly 0.9em of their box, so
     successive lines would very nearly touch; at 90px, 1.2 leaves a real gap.
     So the third line is back, and a long headline keeps a line it would
     otherwise have lost to an ellipsis.
     Measured before: 113px at >=1471px, 110.16px at 1440px, both at 4.5 x 1.5. */
  min-height: 3.6em;
  margin: 18px 0 0;
  font-family: var(--mh-serif);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.mh.mh-skin-dianxun .mh-pair-lead-t a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* THREE, and it must stay equal to the min-height above divided by
     line-height. Floor == maximum is what keeps a short title and a full-height
     title in the same box, both lists on one y, and the spine ticks on a
     shared origin. */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.mh.mh-skin-dianxun .mh-pair-lead-t a:hover { color: var(--mh-green); }

/* :1705-1713 — the desks' lead meta, same gap, same size, same muted ink. */
.mh.mh-skin-dianxun .mh-pair-lead-m {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--mh-muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.mh.mh-skin-dianxun .mh-pair-lead-m .mh-s { color: var(--mh-green); font-weight: 700; }

/* ---- the numbered titles ------------------------------------------------- */

/* 01-06 IS 分类精选'S TREATMENT, COPIED (:1722-1773 with the 15px correction at
   :2813): a 26px counter column, the numeral in --mh-mono at 8px in
   --mh3-signal spanning both rows, the headline at grid-column 2 in --mh-serif
   at 15px/1.5, the source under it in --mh3-faint at 9px. The only change is
   the counter's name, so the two bands cannot fight over one counter.
   flex: 1 1 0 on the rows is the mechanism that keeps the ten desks at
   identical height (:1734-1737); here it is what lets the short column spend
   the same height on fewer, larger entries. */
.mh.mh-skin-dianxun .mh-pair-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  counter-reset: mh-pair-n;
}

.mh.mh-skin-dianxun .mh-pair-list > li {
  /* position: relative is the positioning context for the spine ticks. The
     absolutely-positioned ::after is not a flex item, so it does not enter
     this row's content flow. */
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border-top: 1px solid var(--mh-line);
}

.mh.mh-skin-dianxun .mh-pair-list > li:last-child { border-bottom: 1px solid var(--mh-line); }

.mh.mh-skin-dianxun .mh-pair-list > li > article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  height: 100%;
  counter-increment: mh-pair-n;
}

/* 分类精选's numeral verbatim, and it MUST stay verbatim —
   HomePairBandTest::test_the_numbers_are_the_same_numbers_the_desks_use
   compares the two blocks byte for byte but for the counter's name. The
   placement changed there on 2026-08-11 when the desks' titles were allowed a
   second line, and it changes here for a reason this band already had:
   `open` density clamps .mh-pair-t to THREE lines, so a numeral centred
   across the row was already floating halfway down a three-line headline.
   Row 1 plus baseline puts it on the first line in both densities. */
.mh.mh-skin-dianxun .mh-pair-list > li > article::before {
  grid-row: 1;
  align-self: baseline;
  color: var(--mh3-signal);
  font-family: var(--mh-mono);
  font-size: 8px;
  content: "0" counter(mh-pair-n);
}

.mh.mh-skin-dianxun .mh-pair-t {
  grid-column: 2;
  align-self: end;
  min-width: 0;
  font-family: var(--mh-serif);
  line-height: 1.5;
}

.mh.mh-skin-dianxun .mh-pair-t:hover { color: var(--mh-green); }

.mh.mh-skin-dianxun .mh-pair-m {
  display: flex;
  grid-column: 2;
  align-self: start;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--mh3-faint);
}

/* Source and time never wrap. Without this 纽约时报中文网 breaks across two
   lines in a narrow column, turning a one-line meta into three and taking the
   row's height with it. */
.mh.mh-skin-dianxun .mh-pair-m > * { flex: 0 0 auto; white-space: nowrap; }

/* DENSE (>=4 rows below the lead) — the scanning list. 44px is measured, not
   chosen: a 15px serif title on a 22px line plus a 9px source on a 14px line
   occupies 36px, and 8px is what is left to breathe. 15px rather than the
   desks' 13px because that 13px was set for a 280px column and this one is
   near 500px — the plainest benefit of the mirror is that today's longest
   headline fits without an ellipsis. */
.mh.mh-skin-dianxun .mh-pair-list[data-density="dense"] > li { min-height: 44px; }

.mh.mh-skin-dianxun .mh-pair-list[data-density="dense"] .mh-pair-t {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh.mh-skin-dianxun .mh-pair-list[data-density="dense"] .mh-pair-m { font-size: 9px; }
.mh.mh-skin-dianxun .mh-pair-list[data-density="dense"] .mh-pair-m time { display: none; }

/* OPEN (<=3) — THE ANSWER TO 7 VERSUS 3, and it is the whole point. The short
   column gets no filler rows and no placeholder cards. Both columns are the
   same height because the grid stretches them; with fewer entries each entry
   simply takes more of it, so the type grows, the headline may run to three
   lines and the date comes back. Nothing is padded and nothing is invented. */
.mh.mh-skin-dianxun .mh-pair-list[data-density="open"] > li { min-height: 92px; }
.mh.mh-skin-dianxun .mh-pair-list[data-density="open"] > li > article { gap: 8px 12px; padding-block: 14px; }

.mh.mh-skin-dianxun .mh-pair-list[data-density="open"] .mh-pair-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 19px;
  line-height: 1.55;
}

.mh.mh-skin-dianxun .mh-pair-list[data-density="open"] .mh-pair-m {
  color: var(--mh-muted);
  font-size: 11px;
}

.mh.mh-skin-dianxun .mh-pair-list[data-density="open"] .mh-pair-m .mh-s {
  color: var(--mh-green);
  font-weight: 700;
}

/* ---- the spine ----------------------------------------------------------- */

.mh.mh-skin-dianxun .mh-pair-spine { position: relative; }

/* --mh3-rule-strong, not --mh-line: --mh-line is the edge of a panel, and in
   dark #354039 on #131714 disappears — the whole gutter reads as empty. This
   is a structural line and takes the structural token. */
.mh.mh-skin-dianxun .mh-pair-spine::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: var(--mh3-rule-strong);
  content: "";
}

/* The head's 3px ink rule turning the corner and running down for 22px, which
   is what pins the mirror to the head it belongs to. */
.mh.mh-skin-dianxun .mh-pair-spine::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 22px;
  margin-left: -1.5px;
  background: var(--mh-ink);
  content: "";
}

/* A vertical seal, the way a newspaper uses its gutter: it says what this band
   asks of the reader once, and only once. 12px/700 — at 11px/400 it vanished
   on screen, and the gutter is this band's entire argument. */
.mh.mh-skin-dianxun .mh-pair-seam {
  position: absolute;
  top: 30%;
  left: 50%;
  padding: 15px 0;
  background: var(--mh-panel);
  color: var(--mh-green);
  font-family: var(--mh-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: translateX(-50%);
}

/* TICKS. Each entry marks its own top edge into the gutter. -33px is the
   centre of the 66px gutter from either side, so the marks meet the hairline.
   The two sides' spacings differ, and that difference IS the 6-versus-2 fact,
   drawn rather than padded over. It is not a score: it says which side has
   more entries today, nothing else. Keyed by position, not by desk, so the
   band is correct whichever side is the short one. */
.mh.mh-skin-dianxun .mh-pair-cols > .mh-pair-col .mh-pair-list > li::after {
  position: absolute;
  top: -1px;
  width: 24px;
  border-top: 1px solid var(--mh-green);
  content: "";
}

.mh.mh-skin-dianxun .mh-pair-cols > .mh-pair-col:first-child .mh-pair-list > li::after { right: -33px; }
.mh.mh-skin-dianxun .mh-pair-cols > .mh-pair-col:last-child .mh-pair-list > li::after { left: -33px; }

/* ---- P5: a side with exactly one article --------------------------------- */

/* No list is emitted, so the one story IS the lead. The first attempt centred
   the text and left 70px of air above and below, which on screen read as "a
   piece is missing" — the blank space the owner has ruled against three times.
   The picture takes the height instead: one story fills its column and reads
   as "today this desk has one story, and it matters". min-height catches the
   degenerate short case. A side with ZERO is handled in PHP: the band does not
   render at all. */
.mh.mh-skin-dianxun .mh-pair-col[data-count="1"] .mh-pair-lead { flex: 1 1 auto; }

.mh.mh-skin-dianxun .mh-pair-col[data-count="1"] .mh-pair-pic {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 245px;
}

@media (prefers-reduced-motion: reduce) {
  .mh.mh-skin-dianxun .mh-pair-pic .mh-img { transition: none; }
  .mh.mh-skin-dianxun .mh-pair-pic:hover .mh-img { transform: none; }
}

/* ==========================================================================
   MOBILE TIER OF RECORD — 2026-08-07. KEEP THIS BLOCK LAST IN THE FILE.

   THE TRAP THIS CLOSES. This stylesheet is append-only and now layers v1 →
   v2 → v3 → seven fix rounds. Every round appended its desktop rules at the
   TOP LEVEL, which means each one silently overrode the mobile tier that had
   been written earlier — "a wider tier after a narrower one undoes it", the
   exact failure tools/order-tiers.py exists to catch in the skin build and
   does NOT check here. Round 5's two grid rules landed after the 880px block
   and gave a 390px reader a 48px horizontal overflow: the desk grid resolved
   to "0px 300px 280px" and the comment grid to "0px 220px 320px", both of
   them fixed desktop minmax values on a 390px screen. V2's acceptance list
   forbids horizontal overflow outright.

   THE RULE FOR WHOEVER APPENDS NEXT: put new desktop rules above this block,
   and if they touch anything the small screen also needs, re-assert the
   mobile value INSIDE this block. Never append a bare top-level rule after
   it.
   ========================================================================== */

@media (max-width: 880px) {
  /* One column, everywhere a V3 layer laid out three. */
  .mh.mh-skin-dianxun .mh-desk.is-on,
  .mh.mh-skin-dianxun .mh-cmt-grid,
  .mh.mh-skin-dianxun .mh-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .mh.mh-skin-dianxun .mh-desk-pic { grid-column: 1; grid-row: auto; height: 280px; }
  .mh.mh-skin-dianxun .mh-desk-lead-txt { grid-column: 1; grid-row: auto; border-right: 0; }
  .mh.mh-skin-dianxun .mh-desk-list { grid-column: 1; grid-row: auto; }

  .mh.mh-skin-dianxun .mh-cmt-list { border-right: 0; border-bottom: 1px solid var(--mh-line); }

  /* ---- 中国 · 美国 on a phone (2026-08-11) -------------------------------
     A mirror needs both columns in one field of view, and 390px cannot give
     that. The columns stack, the gutter's hairline turns from vertical to
     horizontal, and the ticks switch off — there is no gutter left to mark. */
  .mh.mh-skin-dianxun .mh-pair-cols {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 18px 20px;
  }

  .mh.mh-skin-dianxun .mh-pair-h {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 7px;
    margin: 0 18px;
    padding: 14px 0;
  }

  .mh.mh-skin-dianxun .mh-pair-h::before,
  .mh.mh-skin-dianxun .mh-pair-h::after {
    grid-area: auto;
    justify-self: start;
  }

  /* Stacked, the head's three tracks mean nothing; the title becomes one
     ordinary line again. */
  .mh.mh-skin-dianxun .mh-pair-title {
    display: flex;
    grid-area: auto;
    gap: 12px;
    font-size: 27px;
  }

  .mh.mh-skin-dianxun .mh-pair-conj { justify-self: auto; }

  /* THE ONE PLACE THE NAMES COME BACK — and only because the thing that
     replaced them cannot exist here. Stacked, 中国 in the head is no longer
     ABOVE the china column, so the spatial mapping the owner's cut relies on
     is gone and the reader would have nothing left to tell the two apart.
     This is generated content, not markup: the columns still carry no label
     element, the desktop page still shows each name exactly once, and a
     screen reader still takes each region's name from the head through
     aria-labelledby. */
  /* Small, tracked and green — a marker, not a second headline. At 17px in ink
     it sat 100px under the head's own 中国 at nearly the same weight, and the
     screen read it as the repetition the owner cut. Green tracked type is what
     this page already uses for a marker (全部, 对读, the kickers), so it names
     the column without competing with the title above it. */
  .mh.mh-skin-dianxun .mh-pair-colh::before {
    margin-right: auto;
    color: var(--mh-green);
    font-family: var(--mh-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
  }

  .mh.mh-skin-dianxun .mh-pair-col[data-desk="china"] .mh-pair-colh::before { content: "中国"; }
  .mh.mh-skin-dianxun .mh-pair-col[data-desk="usa"] .mh-pair-colh::before { content: "美国"; }

  .mh.mh-skin-dianxun .mh-pair-colh { padding: 14px 0 12px; }

  /* The three-line box exists to give the two lists a shared starting height.
     Stacked there is nothing to share it with, and a two-line headline left
     40px of air above its own byline — the blank space the owner has ruled
     against three times. */
  .mh.mh-skin-dianxun .mh-pair-lead-t { min-height: 0; }

  .mh.mh-skin-dianxun .mh-pair-spine { height: 46px; }

  .mh.mh-skin-dianxun .mh-pair-spine::before {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    margin: 0;
  }

  .mh.mh-skin-dianxun .mh-pair-spine::after { display: none; }

  .mh.mh-skin-dianxun .mh-pair-seam {
    top: 50%;
    padding: 0 12px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: translate(-50%, -50%);
  }

  .mh.mh-skin-dianxun .mh-pair-list > li::after { display: none; }

  /* Stacked, "both columns are the same height" no longer exists, and with it
     goes the reason for `open`. Both sides read dense: the band gets shorter
     and the reader scrolls one screen less. */
  .mh.mh-skin-dianxun .mh-pair-list[data-density="open"] > li { min-height: 40px; }
  .mh.mh-skin-dianxun .mh-pair-list[data-density="open"] > li > article { gap: 3px 9px; padding-block: 0; }

  .mh.mh-skin-dianxun .mh-pair-list[data-density="open"] .mh-pair-t {
    display: block;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mh.mh-skin-dianxun .mh-pair-list[data-density="open"] .mh-pair-m { font-size: 9px; }

  .mh.mh-skin-dianxun .mh-pair-col[data-count="1"] .mh-pair-pic { min-height: 180px; }

  /* The lead's four rows collapse; the picture stops spanning them. */
  .mh.mh-skin-dianxun .mh-lead > .mh-art,
  .mh.mh-skin-dianxun .mh-leads .mh-lead > .mh-art {
    grid-row: auto;
    grid-column: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-m,
  .mh.mh-skin-dianxun .mh-lead > .mh-lead-t,
  .mh.mh-skin-dianxun .mh-lead > .mh-x,
  .mh.mh-skin-dianxun .mh-lead > .mh-read {
    grid-column: 1;
    grid-row: auto;
    margin-inline: 22px;
  }

  .mh.mh-skin-dianxun .mh-lead > .mh-lead-t { font-size: 27px; }
  .mh.mh-skin-dianxun .mh-lead > .mh-m { margin-top: 22px; }

  /* Nothing may exceed the viewport: the fixed minmax floors that make the
     desktop columns are exactly what overflows a phone. */
  .mh.mh-skin-dianxun,
  .mh.mh-skin-dianxun .mh-leads,
  .mh.mh-skin-dianxun .mh-brief,
  .mh.mh-skin-dianxun .mh-desks,
  .mh.mh-skin-dianxun .mh-roll,
  /* .mh-pair added 2026-08-11 for the same reason: its desktop columns rest on
     a fixed 66px gutter plus two minmax tracks, which is exactly the shape
     that overflows a 390px screen if the tier does not name it. */
  .mh.mh-skin-dianxun .mh-pair,
  /* .mh-deep added 2026-08-08: it is a full-bleed band like the other
     two, and its rules now sit ABOVE this tier, so the tier has to name
     it to keep the 390px overflow guard. */
  .mh.mh-skin-dianxun .mh-deep,
  .mh.mh-skin-dianxun .mh-cmt {
    max-width: 100%;
    overflow-x: clip;
  }
}