/* ==========================================================================
   法律文书 — 使用条款 · 版权与撤稿 · 隐私说明 · 联系我们
   (owner, 2026-08-16: "redesign these pages"; "match the high design quality
   of the site")

   THE PROBLEM WITH THE OLD PAGES was not their words, which are owner-agreed
   and are not touched here. It was that they were a title and then prose:
   1040px of unbroken measure, headings the same weight as body text, no way
   to see the shape of the document, and no way to get from one document to
   the next without going back to the footer. A reader arrives at 版权与撤稿
   with a question, not with an evening.

   SO THE PAGE IS BUILT AS A DOCUMENT, not as an article: a masthead that
   states what this is and when it last changed, a standing index beside the
   text, and a body set at a reading measure with a visible section rhythm.
   Everything here is presentation over the existing markup — .page-head and
   .legal-body already exist — plus an index the script derives from the H2s.
   ========================================================================== */

.mh-doc {
	--doc-measure: 34em;
	--doc-rail: 232px;
	--doc-ink: var(--ink, #16150f);
	--doc-mut: var(--mh-muted, #6f6a5c);
	--doc-rule: var(--mh-line, #ddd6c6);
	--doc-accent: var(--art-gold, #87662d);
	--doc-green: #143f33;
}

/* ---- the masthead ------------------------------------------------------ */
.mh-doc .page-head {
	position: relative;
	max-width: none;
	margin: 0 0 34px;
	padding: 0 0 22px;
	border-bottom: 2px solid var(--doc-green);
	text-align: left;
}
/* The page head is a centring flex column everywhere else on the site; a
   document is not a poster, so its title starts at the margin like its first
   sentence does. align-items, not text-align: the children are flex items and
   were being centred as BOXES, which is why text-align alone left the title
   sitting at 522px on a canvas starting at 120px. */
.mh-doc .page-head {
	display: flex; flex-direction: column; align-items: flex-start;
}
.mh-doc .page-head .ph-row { justify-content: flex-start; margin-left: 0; }
.mh-doc .page-head .page-sub { margin-left: 0; margin-right: 0; }
.mh-doc .page-head h1 {
	font-family: var(--mh-serif, "Noto Serif SC", serif);
	font-size: clamp(30px, 4.2vw, 44px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.mh-doc .page-head .page-sub {
	max-width: var(--doc-measure);
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--doc-mut);
	text-align: left;
}
/* The kicker: what KIND of page this is, said before the title says which. */
.mh-doc .doc-kicker {
	display: block; margin-bottom: 9px;
	font-size: 11px; font-weight: 700; letter-spacing: .26em;
	color: var(--doc-accent); text-transform: uppercase;
}

/* ---- the canvas: index beside text ------------------------------------- */
.mh-doc .doc-canvas {
	display: grid;
	grid-template-columns: var(--doc-rail) minmax(0, 1fr);
	gap: 0 54px;
	align-items: start;
}
.mh-doc .doc-rail { position: sticky; top: 96px; }
.mh-doc .doc-rail-h {
	margin: 0 0 10px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
	color: var(--doc-mut); text-transform: uppercase;
}
.mh-doc .doc-index { margin: 0 0 30px; padding: 0; list-style: none; }
.mh-doc .doc-index li { margin: 0; }
.mh-doc .doc-index a {
	display: inline-block; max-width: 100%;
	padding: 5px 0;
	font-size: 13.5px; line-height: 1.5;
	color: var(--doc-mut); text-decoration: none;
	border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px;
}
.mh-doc .doc-index a:hover { color: var(--doc-ink); }
.mh-doc .doc-index a.is-here {
	color: var(--doc-ink); font-weight: 600;
	border-left-color: var(--doc-accent);
}
.mh-doc .doc-index .n {
	display: inline-block; width: 1.6em;
	font-size: 11px; color: var(--doc-accent);
}


/* ---- the body ---------------------------------------------------------- */
.mh-doc .legal-body {
	max-width: var(--doc-measure);
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--doc-ink);
}
.mh-doc .legal-body > p { margin: 0 0 1.15em; }
.mh-doc .legal-body > p:first-child {
	font-size: 17px; line-height: 1.85; color: var(--doc-ink);
}

/* Sections are numbered by the counter, not by hand: the words stay exactly
   as the owner approved them and the numerals belong to the design. */
.mh-doc .legal-body { counter-reset: doc-sec; }
.mh-doc .legal-body h2 {
	counter-increment: doc-sec;
	position: relative;
	margin: 2.6em 0 .85em;
	padding-top: 1.1em;
	border-top: 1px solid var(--doc-rule);
	font-family: var(--mh-serif, "Noto Serif SC", serif);
	font-size: 21px; font-weight: 700; line-height: 1.4;
	scroll-margin-top: 92px;
}
.mh-doc .legal-body h2::before {
	content: counter(doc-sec, decimal-leading-zero);
	display: block; margin-bottom: 4px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px; font-weight: 600; letter-spacing: .14em;
	color: var(--doc-accent);
}
.mh-doc .legal-body h3 {
	margin: 1.8em 0 .6em;
	font-size: 16px; font-weight: 700;
}

/* Lists read as terms, not as bullets: a hairline marker and room to breathe. */
.mh-doc .legal-body ul,
.mh-doc .legal-body ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.mh-doc .legal-body li {
	position: relative;
	margin: 0 0 .5em; padding-left: 20px;
	line-height: 1.85;
}
.mh-doc .legal-body ul > li::before {
	content: ""; position: absolute; left: 0; top: .85em;
	width: 9px; height: 1px; background: var(--doc-accent);
}
.mh-doc .legal-body ol { counter-reset: doc-item; }
.mh-doc .legal-body ol > li { counter-increment: doc-item; padding-left: 28px; }
.mh-doc .legal-body ol > li::before {
	content: counter(doc-item) ".";
	position: absolute; left: 0; top: 0;
	font-size: 12.5px; font-weight: 700; color: var(--doc-accent);
}

/* A bare mailbox in a legal document is the ONE thing readers come for; it
   stops being a paragraph and becomes a place to act. */
.mh-doc .legal-body a[href^="mailto:"] {
	display: inline-block;
	padding: 3px 10px 4px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 14px;
	color: var(--doc-green);
	background: color-mix(in srgb, var(--doc-accent) 12%, transparent);
	border-radius: 4px;
	text-decoration: none;
}
.mh-doc .legal-body a[href^="mailto:"]:hover {
	color: #fff; background: var(--doc-green);
}
.mh-doc .legal-body a:not([href^="mailto:"]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--doc-accent);
	text-underline-offset: 3px;
}

/* ---- the colophon ------------------------------------------------------ */
.mh-doc .doc-colophon {
	max-width: var(--doc-measure);
	margin-top: 46px; padding-top: 16px;
	border-top: 2px solid var(--doc-green);
	font-size: 12.5px; line-height: 1.8; color: var(--doc-mut);
}
.mh-doc .doc-colophon b { color: var(--doc-ink); font-weight: 600; }

/* ---- dark ground ------------------------------------------------------- */
html[data-mh-theme="dark"] .mh-doc {
	--doc-ink: #ece7da; --doc-mut: #9b968a; --doc-rule: #33302a;
	--doc-green: #2f7a63; --doc-accent: #c9a86a;
}
@media (prefers-color-scheme: dark) {
	html:not([data-mh-theme="light"]) .mh-doc {
		--doc-ink: #ece7da; --doc-mut: #9b968a; --doc-rule: #33302a;
		--doc-green: #2f7a63; --doc-accent: #c9a86a;
	}
}


/* ==========================================================================
   四份文书，一页 (owner, 2026-08-22).

   A tab strip, not an accordion and not a second page. The four documents are
   peers a reader compares — "转载保留多久" is in 版权与撤稿 but the reader
   often arrives at it from 使用条款 — and peers belong on one row.

   The strip carries the DOCUMENT NAMES, so it doubles as the 其他文书 nav the
   rail used to hold; that nav is gone from doc.js, because a second copy of
   the same four links two hundred pixels away is clutter, not redundancy.

   Scriptless: the radios do the switching. doc.js only re-points the index,
   the H1 and the address bar at whichever tab is open.
   ========================================================================== */
.mh-doc .lg-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mh-doc .lg-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0 26px;
	margin: 0 0 30px;
	border-bottom: 1px solid var(--doc-rule);
}
.mh-doc .lg-t {
	position: relative;
	padding: 11px 2px 13px;          /* 24px+ tall, per SC 2.5.8 */
	font-family: var(--mh-serif, "Noto Serif SC", serif);
	font-size: 16px;
	line-height: 1.3;
	color: var(--doc-mut);
	cursor: pointer;
	white-space: nowrap;
	transition: color .18s ease;
}
.mh-doc .lg-t::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: transparent;
	transition: background .18s ease;
}
.mh-doc .lg-t:hover { color: var(--doc-ink); }
.mh-doc .lg-r:focus-visible + .lg-bar .lg-t,
.mh-doc .lg-t:focus-visible { outline: 2px solid var(--doc-green); outline-offset: 2px; }

.mh-doc .lg-pane { display: none; }

/* Four documents, four pairs. Written out rather than generated: this list is
   the site's whole body of standing documents and it changes about once a
   year — a loop would be machinery around a constant. */
#lg-terms:checked     ~ .lg-bar .lg-t[data-doc="terms"],
#lg-copyright:checked ~ .lg-bar .lg-t[data-doc="copyright"],
#lg-privacy:checked   ~ .lg-bar .lg-t[data-doc="privacy"],
#lg-contact:checked   ~ .lg-bar .lg-t[data-doc="contact"] {
	color: var(--doc-ink);
	font-weight: 600;
}
#lg-terms:checked     ~ .lg-bar .lg-t[data-doc="terms"]::after,
#lg-copyright:checked ~ .lg-bar .lg-t[data-doc="copyright"]::after,
#lg-privacy:checked   ~ .lg-bar .lg-t[data-doc="privacy"]::after,
#lg-contact:checked   ~ .lg-bar .lg-t[data-doc="contact"]::after {
	background: var(--doc-green);
}
#lg-terms:checked     ~ .lg-pane[data-doc="terms"],
#lg-copyright:checked ~ .lg-pane[data-doc="copyright"],
#lg-privacy:checked   ~ .lg-pane[data-doc="privacy"],
#lg-contact:checked   ~ .lg-pane[data-doc="contact"] { display: block; }

/* ---- the phone --------------------------------------------------------- */
@media (max-width: 900px) {
	.mh-doc .doc-canvas { grid-template-columns: minmax(0, 1fr); gap: 0; }
	/* The index becomes a collapsed summary rather than a column: on a phone
	   a standing rail is a screenful of links before the first sentence. */
	.mh-doc .doc-rail {
		position: static;
		margin: 0 0 26px; padding: 14px 16px;
		border: 1px solid var(--doc-rule); border-radius: 8px;
	}
	.mh-doc .doc-index { margin-bottom: 16px; }
	.mh-doc .doc-index a { padding: 7px 0 7px 12px; font-size: 14px; }
	.mh-doc .legal-body { font-size: 16px; line-height: 1.9; }
	.mh-doc .legal-body h2 { font-size: 19px; margin-top: 2.1em; }
	.mh-doc .page-head h1 { font-size: 28px; }
}

@media (max-width: 560px) {
	/* The strip scrolls rather than wrapping to three lines: four Chinese
	   document names on a 360px screen are a paragraph, not a tab bar. */
	.mh-doc .lg-bar {
		flex-wrap: nowrap;
		gap: 0 20px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.mh-doc .lg-bar::-webkit-scrollbar { display: none; }
	.mh-doc .lg-t { font-size: 15px; }
}