/* perennial — 政策條款
   The legal documents, drawn to the geometry of kinfolk.com/privacy-policy and
   measured off it at 1024: content 956 wide, the section name flush at
   content-start, the wording in the right half starting at the midpoint plus
   half a gap, and a rule across the full content width above every section.
   The reference sets the whole document — title, section names, body — in one
   13.6px size; we keep our own scale instead, because Chinese at 13.6px is not
   a document anybody finishes.

   The rules here are the same rules the contact page draws between the blocks
   of its record: ink, 1px, above each block and never below the last. They are
   the page's only structure, and they earn it — a policy is a list of separate
   promises, and the line is what stops one running into the next.

   The dot is the list bullet, which is what the design system reserves it for.

   Blocksy styles bare h1..h6, p, dl and dd from its own palette, so everything
   here restates family, size, colour and margin rather than inheriting. */

.pn-policy {
	--pn-policy-n: 36px;          /* the number's column, left of a section name */

	padding-block: var(--space-8) var(--space-10);
}

@media (min-width: 768px) {
	.pn-policy { padding-block: var(--space-9) var(--space-11); }
}

/* ── The document's name ───────────────────────────────────────────────── */
.pn-policy__head { margin-bottom: var(--space-7); }

@media (min-width: 768px) {
	.pn-policy__head { margin-bottom: var(--space-8); }
}

.pn .pn-policy__updated {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--ls-label);
	color: var(--text-tertiary);
}

.pn .pn-policy__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	font-weight: var(--weight-regular);
	color: var(--text-primary);
	text-wrap: balance;
}

/* The Latin name of the document, under the Chinese one. Tracked sans, never
   uppercased — it is a title, not a label. */
.pn .pn-policy__subtitle {
	margin: var(--space-3) 0 0;
	font-family: var(--font-sans);
	font-size: var(--text-small);
	line-height: var(--lh-small);
	letter-spacing: 0.16em;
	color: var(--text-tertiary);
}

/* ── One point ─────────────────────────────────────────────────────────── */
.pn-policy__row {
	border-top: var(--line-weight) solid var(--line-strong);
	padding-block: var(--space-6);
}

/* The two columns wait for 1024, as the article's offset prose does. Splitting
   at 768 puts the wording in a 320px column — twenty Chinese characters a line,
   which is a column of ragged clauses — and buys a left column with one short
   sentence in it. Stacked, the same sentence still sits above the wording it
   summarises, which is the whole of what it has to do. */
@media (min-width: 1024px) {
	.pn-policy__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-7);
		align-items: start;
		padding-block: var(--space-7);
	}
}

.pn-policy__point { margin-bottom: var(--space-5); }

@media (min-width: 768px) {
	.pn-policy__row { padding-block: var(--space-7); }
}

@media (min-width: 1024px) {
	.pn-policy__point { margin-bottom: 0; }
}

/* The number sits in its own column, the way the journal's ranked rows number
   themselves: a reader citing 第 11 條 can find it by running down one edge. */
.pn .pn-policy__name {
	display: grid;
	grid-template-columns: var(--pn-policy-n) minmax(0, 1fr);
	align-items: baseline;
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--ls-lead);
	font-weight: var(--weight-regular);
	color: var(--text-primary);
	text-wrap: balance;
}

.pn-policy__n {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	line-height: var(--lh-caption);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--text-tertiary);
}

/* 生效日期 — the one row with no number. A label, in the same place a section
   name would be. */
.pn .pn-policy__label {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
}
:lang(zh) .pn .pn-policy__label { text-transform: none; letter-spacing: 0.12em; }

/* The plain sentence, in the column the reference leaves empty. It hangs under
   the section name, past the number, so the left edge of the page reads as a
   list of what the document actually does. */
.pn .pn-policy__summary {
	margin: var(--space-3) 0 0 var(--pn-policy-n);
	font-family: var(--font-sans);
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
	max-width: 20em;
}

.pn .pn-policy__summary--plain {
	margin-left: 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
}

/* ── The wording ───────────────────────────────────────────────────────── */
.pn .pn-policy__p {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	max-width: 34em;
	line-break: strict;
	hanging-punctuation: allow-end;
}

/* A titled set — 你主動提供的資料 and the two beside it. The title is the same
   12px tracked label the contact page puts above an entry. */
.pn .pn-policy__set-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
}
:lang(zh) .pn .pn-policy__set-title { text-transform: none; letter-spacing: 0.12em; }

.pn .pn-policy__list { margin: 0; padding: 0; list-style: none; }

.pn .pn-policy__item {
	position: relative;
	margin: 0;
	padding-left: calc(var(--dot-size) + var(--space-3));
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	max-width: 34em;
	line-break: strict;
}

.pn .pn-policy__item + .pn-policy__item { margin-top: var(--space-3); }

/* The dot, on the first line's centre rather than its top. `lh` would say this
   in one unit; it is not safe everywhere yet, so the half-leading is written
   out from the tokens: (line-height − dot) ÷ 2. */
.pn .pn-policy__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((var(--text-body) * var(--lh-body) - var(--dot-size)) / 2);
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: var(--radius-full);
	background: var(--dot-brand);
}

/* A procedure. The numerals are the content here — 退貨流程 is five things in
   an order — which is the one place on these pages a list is not a set of
   dots. Wider indent than the dotted list because a numeral is wider than a
   dot, and it holds at two digits. */
.pn .pn-policy__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pn-step;
}

.pn .pn-policy__step {
	position: relative;
	counter-increment: pn-step;
	margin: 0;
	padding-left: var(--space-5);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	max-width: 34em;
	line-break: strict;
}

.pn .pn-policy__step + .pn-policy__step { margin-top: var(--space-3); }

.pn .pn-policy__step::before {
	content: counter(pn-step);
	position: absolute;
	left: 0;
	/* The numeral's line box, centred in the item's: (item − numeral) ÷ 2, both
	   sides written from the tokens rather than from `em`. Inside this pseudo
	   `1em` is its own 12px, not the item's 16px, which put the first cut of
	   this 3.7px high — and moving the sum into a custom property does not fix
	   it either: an unregistered property inherits as tokens, so the calc is
	   still evaluated here, still against 12px. */
	top: calc((var(--text-body) * var(--lh-body) - var(--text-caption) * var(--lh-caption)) / 2);
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	line-height: var(--lh-caption);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--text-tertiary);
}

/* Name and definition, wherever the copy defines something. */
.pn .pn-policy__terms { margin: 0; }

.pn .pn-policy__term + .pn-policy__term { margin-top: var(--space-5); }

.pn .pn-policy__terms dt {
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

.pn .pn-policy__terms dd {
	margin: var(--space-1) 0 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	max-width: 34em;
	overflow-wrap: anywhere;
}

/* The beat between two blocks. It sits after the blocks themselves because
   every one of them zeroes its own margin — `margin: 0` on .pn-policy__p is
   two classes, exactly what this selector is, so the later of the two wins and
   the order is the whole rule. */
/* The signature. Serif and the size of a section name, because it is a name
   and not another sentence of the notice; the line under it is the brand's
   line, so it drops to the secondary ink. The extra air is padding rather than
   margin — the rhythm rule below sets every block's margin-top, and a margin
   here would lose to it. */
.pn .pn-policy__sign {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding-top: var(--space-4);
}

.pn-policy__sign-name {
	font-family: var(--font-serif);
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--ls-lead);
	color: var(--text-primary);
}

.pn-policy__sign-line {
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
}

.pn .pn-policy__body > * + * { margin-top: var(--space-5); }

/* An address or a URL in running text. Colour on hover, no line — the same
   signal every other live thing on the site uses. */
.pn .pn-policy__a {
	color: var(--text-link);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--dur-fast) var(--ease-out);
}

.pn .pn-policy__a:hover,
.pn .pn-policy__a:focus-visible { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
	.pn .pn-policy__a { transition: none; }
}