.sp,
.sp *::before,
.sp *::after,
.sp * {
	box-sizing: border-box;
}
.sp {
	max-width: 1100px;
	margin-inline: auto;
	padding-block: 8px 56px;
	padding-inline: clamp(16px, 2.5vw, 40px);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink);
	min-width: 0;
	overflow-x: clip;
}
.sp p,
.sp h1,
.sp h2,
.sp dl,
.sp dt,
.sp dd,
.sp ol,
.sp li {
	margin: 0;
	padding: 0;
}
.sp ol {
	list-style: none;
}
.sp a {
	color: inherit;
	text-decoration: none;
}
.sp a:hover {
	color: var(--accent);
}
.sp :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.sp-mast {
	padding-block: 20px 14px;
	border-bottom: 2px solid var(--rule-strong);
}
.sp-kicker {
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--ink-2);
}
.sp-h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-block: 2px 6px;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.3;
	font-weight: 700;
}
.sp-short {
	padding: 1px 8px;
	border: 1px solid var(--rule);
	border-radius: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-2);
}
.sp-perm {
	font-size: 14px;
	color: var(--ink-2);
}
.sp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	padding-block: 12px;
	border-bottom: 1px solid var(--rule);
	font-size: 14px;
}
.sp-facts > div {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
.sp-facts dt {
	flex: none;
	color: var(--ink-2);
}
.sp-facts dd {
	min-width: 0;
	overflow-wrap: anywhere;
}
.sp-facts a {
	border-bottom: 1px solid var(--rule-strong);
}
.sp-live {
	padding-block: 20px 0;
}
.sp-live-h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
}
.sp-n {
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-2);
}
.sp-list {
	column-gap: 36px;
}
@media (min-width: 860px) {
	.sp-list {
		columns: 2;
	}
}
.sp-e {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-block: 7px;
	border-bottom: 1px solid var(--rule);
	break-inside: avoid;
}
.sp-e-d {
	flex: none;
	width: 4.6em;
	font-size: 13px;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
.sp-e-t {
	min-width: 0;
}
.sp-e-t:visited {
	color: var(--visited);
}
.sp-window {
	padding-block: 14px;
	font-size: 14px;
	color: var(--ink-2);
}
.sp-window-none {
	padding-block: 22px 14px;
}
.sp-note {
	padding-block: 16px;
	border-top: 1px solid var(--rule);
	font-size: 14px;
	color: var(--ink-2);
}
.sp-note a {
	border-bottom: 1px solid var(--rule-strong);
}
.sp-dir-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
	column-rule: 1px solid var(--rule);
}
.sp-dir-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-block: 9px;
	border-bottom: 1px solid var(--rule);
	break-inside: avoid;
	min-width: 0;
}
.sp-dir-name {
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
a.sp-dir-name:visited {
	color: var(--visited);
}
.sp-dir-domain {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	color: var(--ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sp-dir-count {
	flex: none;
	font-size: 12.5px;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
.sp-dir-h {
	margin: 38px 0 0;
	padding-bottom: 9px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-2);
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--ink);
}
.sp-dir-list--quiet {
	columns: 3;
	column-gap: 34px;
}
.sp-dir-list--quiet .sp-dir-name {
	font-size: 14px;
}
.sp-dir-list--quiet .sp-dir-domain {
	flex: 1 1 0;
}
@media (max-width: 1100px) {
	.sp-dir-list--quiet {
		columns: 2;
	}
}
@media (max-width: 760px) {
	.sp-dir-list,
	.sp-dir-list--quiet {
		columns: 1;
	}
}

/* ==========================================================================
   出处档案 — the 档案卡 record sheet (owner design A, 2026-08-08).

   The page answers two questions in fixed positions: who is this outlet
   (masthead + catalogue), and on what basis do we republish them (the one
   enclosed panel). Everything is 1px lines and type; no shadows, no radii.
   ========================================================================== */
.sp-dossier {
	--sp-serif: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", serif;
	--sp-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--sp-mono-f: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sp-dossier .sp-mast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.sp-mono { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; box-sizing: border-box; border: 1px solid var(--rule); background: color-mix(in srgb, var(--accent) 7%, transparent); font-family: var(--sp-serif); font-size: 24px; line-height: 1; letter-spacing: .04em; color: var(--accent); }
/* --------------------------------------------------------------------------
   The identity mark when the publisher has a real logo (owner, 2026-08-09)
   --------------------------------------------------------------------------
   Same 72px box the monogram uses, so the masthead grid does not move. The
   accent wash is dropped: it was a tint behind OUR letterform, and behind a
   publisher's own mark it reads as a coloured card nobody designed.

   NOTE the token family. This is an inner page, so --mh-* does not exist here
   — those are defined in home-rescue.css, which is enqueued on the FRONT PAGE
   ONLY. Everything below uses --rule / --ink / --accent from the parent theme
   and theme-dark.css. Reaching for --mh-panel here silently yields nothing.
   -------------------------------------------------------------------------- */
.sp-mono-logo {
  padding: 7px;
  background: transparent;
}

/* Definite box for the same reason as the rail — see the long note in
   home-rescue.css. Without it, VOA's own profile page showed an empty square,
   because voa-chinese.svg declares no width or height attribute. */
.sp-mono-logo .mh-rail-logo {
  display: block;
  width: 100%;
  height: 48px;
  object-fit: contain;
}

/* Dark-ink marks — the NYT nameplate, 風傳媒's wordmark, 澎湃's brush
   characters — vanish into a dark page, so they get back the light ground they
   were drawn for. Only the marks that need it, same classification the rails
   use, so the page does not fill up with light cards. */
html[data-mh-theme="dark"] .sp-mono-logo.needs-plate {
  background: #eef0ea;
  border-color: #46514a;
}

@media (prefers-color-scheme: dark) {
  html:not([data-mh-theme="light"]) .sp-mono-logo.needs-plate {
    background: #eef0ea;
    border-color: #46514a;
  }
}

/* 爱范儿 is the mirror case: white artwork for a dark masthead, so it needs an
   ink plate on the LIGHT page and nothing on the dark one. */
html[data-mh-theme="light"] .sp-mono-logo.needs-ink {
  background: #1b211d;
  border-color: #2c352f;
}

@media (prefers-color-scheme: light) {
  html:not([data-mh-theme="dark"]) .sp-mono-logo.needs-ink {
    background: #1b211d;
    border-color: #2c352f;
  }
}

.sp-dossier .sp-h { margin: 0; }
.sp-figs { display: flex; gap: 26px; align-items: baseline; }
.sp-fig { text-align: right; }
.sp-fig b { display: block; font-family: var(--sp-mono-f); font-size: 26px; font-weight: 500; line-height: 1.1; }
.sp-fig span { font-family: var(--sp-sans); font-size: 11px; letter-spacing: .1em; color: var(--ink-2); }

.sp-intro { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.sp-intro-src { margin-left: 12px; font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }
.sp-intro-t { margin: 8px 0 0; font-size: 15px; line-height: 1.85; max-width: 74ch; }
.sp-intro-x { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-2); max-width: 74ch; }

.sp-sheet { padding-top: 18px; }
.sp-sheet-h { margin-bottom: 14px; }
.sp-h2 { margin: 2px 0 0; font-family: var(--sp-serif); font-size: 19px; font-weight: 500; }
.sp-sheet-b { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 0 34px; align-items: start; }
.sp-reg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.sp-dl { margin: 0; }
.sp-r { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.sp-r dt { font-size: 12px; color: var(--ink-2); }
.sp-r dd { margin: 0; font-size: 14px; font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.sp-r-n { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.sp-sheet-x { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-2); max-width: 84ch; }

/* The rights panel: the only enclosed block on the page, by design. */
.sp-rights { padding: 16px 18px; border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.sp-rights-k { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font-family: var(--sp-sans); font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.sp-rights-d { letter-spacing: .04em; color: var(--ink-2); }
.sp-rights-t { margin: 6px 0 12px; font-family: var(--sp-serif); font-size: 17px; font-weight: 500; }
.sp-rights-src { margin: 12px 0 0; font-size: 12px; color: var(--ink-2); }
.sp-rights-src a { color: var(--accent); font-family: var(--sp-mono-f); font-size: 11px; overflow-wrap: anywhere; }
.sp-rights-x { margin: 10px 0 0; font-size: 11px; line-height: 1.7; color: var(--ink-2); }

.sp-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 0 34px; align-items: start; margin-top: 26px; padding-top: 14px; border-top: 2px solid var(--ink); }
.sp-body-main { min-width: 0; }
.sp-rail { min-width: 0; }
.sp-tally { margin-bottom: 22px; }
.sp-tally-k { margin: 0; font-family: var(--sp-sans); font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.sp-tally-h { margin: 2px 0 10px; font-family: var(--sp-serif); font-size: 15px; font-weight: 500; }
.sp-tally-x { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: var(--ink-2); }
.sp-bar { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 0 10px; align-items: center; margin-bottom: 7px; font-size: 12px; }
.sp-bar-l { color: var(--ink); }
.sp-bar-t { display: block; height: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.sp-bar-f { display: block; height: 100%; background: var(--accent); }
.sp-bar-n { font-family: var(--sp-mono-f); color: var(--ink-2); }

@media (max-width: 900px) {
	.sp-sheet-b, .sp-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.sp-rights { margin-top: 4px; }
}
@media (max-width: 680px) {
	.sp-dossier .sp-mast { grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; }
	.sp-figs { grid-column: 1 / -1; justify-content: flex-start; gap: 20px; margin-top: 12px; }
	.sp-fig { text-align: left; }
	.sp-reg { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sp-mono { width: 56px; height: 56px; font-size: 19px; }
}