/*
 * 茉莉花深度报道 — the column index and the article's own furniture.
 *
 * EXTENDS THE PAPER, DOES NOT RESTATE IT. Every colour here is an existing
 * token (--ink, --ink-2, --rule, --rule-strong, --accent, --bg). This is a new
 * desk on a paper that already has a face, not a new identity; the fallbacks
 * mirror chrome.css so a token-less context still renders.
 *
 * THE ONE ACCENT IS THE CENTRAL QUESTION. Each deep report has exactly one
 * 中心问题 — required by the writer's contract, and the thing that separates
 * this column from a news summary. A reader choosing between five 3,000-字
 * pieces needs it more than they need a dek. It gets the column's only coloured
 * mark: a hairline in the site's jasmine green. Everything else stays as quiet
 * as the rest of the paper.
 *
 * NO CARDS, NO SHADOWS, NO RADIUS. The desks are hairline-ruled lists and this
 * is one of them.
 *
 * PHONE TIER IS LAST IN THE FILE AND MUST STAY LAST — chrome.css and
 * home-rescue.css guard theirs the same way. Append above the banner below.
 */

.mh-deep-index {
  border-top: 1px solid var(--rule-strong, #c9c6bc);
  max-width: 46em;
}

.mh-deep-row {
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--rule, #e3e1da);
}

.mh-deep-h {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-deep-h a {
  color: var(--ink, #1a1a18);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mh-deep-h a:hover,
.mh-deep-h a:focus-visible {
  border-bottom-color: var(--accent, #1e6b4e);
}

/* The signature. A question, marked as one — not a summary of the piece. */
.mh-deep-q {
  margin: 9px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--accent, #1e6b4e);
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-2, #5c5c56);
}

.mh-deep-meta {
  margin: 11px 0 0;
  font-size: 13px;
  color: var(--ink-2, #5c5c56);
}

.mh-deep-dot {
  margin: 0 7px;
  color: var(--rule-strong, #c9c6bc);
}

/*
 * ARTICLE FURNITURE. Composed by Deep\DeepPublisher, never by the writer —
 * the writer's contract forbids it from emitting a kicker, a byline or a source
 * block, and validate.py fails a body that carries any. Keeping the markup here
 * means the sentence and the ledger it describes cannot drift apart.
 */

.mh-deep-kicker {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent, #1e6b4e);
}

.mh-deep-byline {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink-2, #5c5c56);
}

.mh-deep-rule {
  margin: 34px 0 16px;
  border: 0;
  border-top: 1px solid var(--rule-strong, #c9c6bc);
}

/* 「本文综合以下报道写成…茉莉花未参与采访」 — the only place 禁令 4 is
   discharged in text, so it is quiet but never small enough to skim past. */
.mh-deep-sources {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2, #5c5c56);
}

@media (prefers-reduced-motion: no-preference) {
  .mh-deep-h a { transition: border-bottom-color 120ms ease; }
}

/*
 * HOMEPAGE BANDS — 今日焦点 / 今日简报. The focus piece gets the central
 * question; the briefs get a line each, because five stacked questions stop
 * being a question and become a texture.
 */

.mh-deep-band { margin: 0 0 30px; }

.mh-deep-band-h {
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--ink, #1a1a18);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mh-deep-focus { padding: 0 0 16px; }

.mh-deep-focus-h {
  margin: 0;
  font-size: 23px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-deep-focus-h a {
  color: var(--ink, #1a1a18);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mh-deep-focus-h a:hover,
.mh-deep-focus-h a:focus-visible { border-bottom-color: var(--accent, #1e6b4e); }

.mh-deep-briefs { margin: 0; padding: 0; list-style: none; }

.mh-deep-brief {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule, #e3e1da);
  font-size: 16px;
  line-height: 1.5;
}

.mh-deep-brief:last-child { border-bottom: 0; }

.mh-deep-brief a {
  color: var(--ink, #1a1a18);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mh-deep-brief a:hover,
.mh-deep-brief a:focus-visible { border-bottom-color: var(--accent, #1e6b4e); }

.mh-deep-brief-meta {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-2, #5c5c56);
}

/* ------------------------------------------------------------------ */
/* PHONE TIER — KEEP LAST. Append new rules ABOVE this banner.         */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .mh-deep-row { padding: 18px 0 16px; }
  .mh-deep-h { font-size: 18.5px; line-height: 1.5; }
  .mh-deep-q { font-size: 14.5px; padding-left: 11px; }
  .mh-deep-meta { font-size: 12.5px; }
  .mh-deep-byline { margin-bottom: 16px; }
  .mh-deep-focus-h { font-size: 19.5px; line-height: 1.48; }
  .mh-deep-brief { font-size: 15px; }
  .mh-deep-band-h { font-size: 14px; }
}