/* perennial — 長青生活 / about
   A masthead / colophon, built to the geometry of the reference page but drawn
   with this theme's own ground, ink and scale. It was contact.css, and the
   classes were .pn-contact__*, until round 22 folded 常見問題 and 徵才 in and
   took the page's one contact-shaped block apart — the name had stopped
   describing the page.

   The measured reference at 1440: the lead 32px running the full content
   width; ruled blocks split 50/50 with the entries in two ~182px columns
   48px apart; an editorial teaser inset 48px; the form 600px and centred, with
   placeholder-only field labels.

   Four blocks now rather than three, and the right half of a block holds more
   than a `<dl>`: 長青顧問 has a lead and a masthead, 常見問題 four topic groups
   of disclosure rows, 徵才 a lead and one job. So the right half is its own
   element, .pn-about__block-body, and the 50/50 split is between the title and
   it rather than between the title and the entries.

   The 1px rules between the blocks are the one place this theme keeps a
   horizontal rule: they separate distinct sections of the record the way the
   footer's surviving hairlines separate its parts. Structure, not ornament.

   Form fields are underline-only — a line you write on. The send button is
   hidden until the whole form is valid; it fades on hover like every other
   live thing on the site. */

.pn-about {
	padding-block: var(--space-8) var(--space-10);
}

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

/* ── The scale ────────────────────────────────────────────────────────────
   Measured on the reference at 1280: its whole about page runs on TWO sizes.
   The lead is 28.5px; the section labels (MAGAZINE, FAQS), the masthead, the
   offices, the FAQ topic names, the questions and the answers are every one of
   them 14px. Nothing on it steps between those. Hierarchy comes from which
   column a thing is in, from the rules between rows, and from family, case and
   letter-spacing — never from size.

   This page had six sizes doing that job and read as though each block had been
   set on its own. It has three now:

     display   32px   the lead, and the teaser above the form
     body      16px   everything else — block titles, record labels and values,
                      fold names, questions, answers, names, form fields
     fine      14px   footnotes only: 完整條款, the consent line, the form's
                      status line

   Two adaptations, and only two, because the reference's method does not carry
   into Chinese unchanged:

   - **16px, not 14.** A 14px Latin body is comfortable; 14px of 繁體中文 is not
     — the glyphs carry far more stroke in the same em. 16px is this theme's
     --text-body and the size every other page here reads at.
   - **No uppercase.** The reference leans on it to tell a label from a value at
     one size. Chinese has no case, so the work moves to the three things it
     does have: family (sans labels against sans values), weight, colour, and
     字距 — the 0.12em tracking this theme already puts on :lang(zh) labels. */

/* ── Lead intro — the reference's own step, between our h3 and h2 ─────
   22 → 26 → 32px. It is deliberately not --pn-text-h2 (36px at 1024),
   which would out-shout the title. */
/* No measure cap: on the reference the lead runs the full width of the page's
   content column, and at 32px that is ~38 Chinese characters a line.
   The gap below it is a beat, not a paragraph break: the intro is the page's
   opening, the ruled blocks are the record. */
.pn-about__intro {
	margin-bottom: var(--space-9);
}

@media (min-width: 768px) {
	.pn-about__intro { margin-bottom: var(--space-10); }
}
.pn .pn-about__intro > * + * { margin-top: var(--space-5); }
.pn .pn-about__intro p {
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 1.7;
	font-weight: var(--weight-regular);
	letter-spacing: var(--ls-lead);
	color: var(--text-primary);
}
@media (min-width: 768px) {
	.pn .pn-about__intro p { font-size: 26px; line-height: 1.68; }
}

@media (min-width: 1024px) {
	.pn .pn-about__intro p { font-size: 32px; line-height: 1.65; }
}

/* ── Blocks — rule on top, title left, entries right, 50/50 ──────────── */
.pn-about__block {
	border-top: var(--line-weight) solid var(--line-strong);
	padding-block: var(--space-7);
}

/* The reference's MAGAZINE / OFFICES / FAQS: body size, sans, uppercase,
   tracked — a label naming the column beside it, not a heading shouting over
   it. Ours cannot be uppercase, so it is tracked and sans at the body size,
   which is the same treatment the record's own dt carries. */
.pn .pn-about__block-title {
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: var(--weight-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-primary);
	margin-bottom: var(--space-5);
}
:lang(zh) .pn .pn-about__block-title { text-transform: none; letter-spacing: 0.12em; }

/* ── Entries — two narrow columns, left-aligned in the right half ───── */
.pn-about__entries {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

/* Label and value at one size, as on the reference, where both are 14px and
   only the label is uppercase. Here the label is tracked and grey and the value
   is neither. */
.pn-about__entry dt {
	margin-bottom: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: var(--weight-regular);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
}
:lang(zh) .pn-about__entry dt { text-transform: none; letter-spacing: 0.12em; }

.pn-about__entry dd {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	overflow-wrap: anywhere;
}

.pn-about__address {
	font-style: normal;
	line-height: var(--lh-body);
}

/* ── Teaser — one editorial beat before the form ─────────────────────── */
.pn-about__teaser {
	padding-block: var(--space-9) var(--space-10);
}

.pn-about__teaser-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* The lead's size, not a size of its own: it was --pn-text-h2, which at 1024
   is 36px — larger than the lead that opens the page, three screens above it.
   One display size on the page, used twice. */
.pn .pn-about__teaser-title,
.pn .pn-about__teaser-dek {
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: var(--ls-h2);
	font-weight: var(--weight-regular);
	color: var(--text-primary);
	margin: 0;
	max-width: 18em;
	text-wrap: balance;
}
.pn .pn-about__teaser-dek {
	margin-top: var(--space-4);
	color: var(--text-secondary);
}

/* The lead's own steps: one display size on the page means one at every width,
   not 32px on a phone where the lead is 22. */
@media (min-width: 768px) {
	.pn .pn-about__teaser-title,
	.pn .pn-about__teaser-dek { font-size: 26px; line-height: 1.38; }
}
@media (min-width: 1024px) {
	.pn .pn-about__teaser-title,
	.pn .pn-about__teaser-dek { font-size: 32px; line-height: 1.35; }
}

/* The link marks itself the way every other live thing here does: a colour
   change on hover, no line. */
.pn .pn-about__teaser-link {
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-about__teaser-link:hover,
.pn .pn-about__teaser-link:focus-visible { opacity: var(--hover-opacity); }

/* ── Desktop geometry ────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.pn-about__block {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-7);
		align-items: start;
	}
	.pn .pn-about__block-title { margin-bottom: 0; }

	/* The teaser is the one thing that steps in, off the blocks' left edge. */
	.pn-about__teaser { margin-left: var(--space-7); }
}

@media (min-width: 1024px) {
	.pn-about__teaser { margin-left: var(--space-8); }

	/* Two fixed narrow columns, packed left — the reference's 182px + 48px.
	   Not before 1024: at 768 the right half is 304px, and two 192px columns
	   with a 48px gap do not fit in it — they collapse to 128px and a long
	   address runs out of the page. */
	.pn-about__entries {
		grid-template-columns: repeat(2, minmax(0, 12rem));
		column-gap: var(--space-7);
		row-gap: var(--space-6);
		justify-content: start;
	}

	/* The address spans both: 台灣大道二段 910 號 13 樓之 2 in one 12rem column
	   is three lines and a widow. */
	.pn-about__entry--wide { grid-column: 1 / -1; }
}

/* ── The right half of a block ───────────────────────────────────────────
   Everything that is not the block's title. At 768+ it is the second cell of
   the 50/50 grid; below that it is simply what follows the title. */
.pn .pn-about__block-lead {
	margin-bottom: var(--space-6);
	max-width: 34em;
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: var(--lh-body);
}

/* ── Topic folds — 常見問題's four, 徵才's two ──────────────────────────
   The topic name is the control, and every answer under it opens at once.

   On the reference SUBSCRIPTIONS is set exactly as MAGAZINE is — same size,
   same sans, same uppercase — and what tells them apart is that one sits in the
   left column and one in the right. So `.pn-disc--section` is not a step up in
   scale; it is the block title's own treatment, at the body size, replacing the
   19px serif a 合作 question takes. */
.pn .pn-disc--section .pn-disc-q {
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: var(--weight-medium);
	letter-spacing: 0.12em;
}

/* No rules between the folds at all. The shared component draws one over its
   first row and a hairline under every other, which is right in 合作 where the
   rows are the whole section and nothing else bounds them. Here the block's own
   full-width rule is already directly above, the next block's is below, and
   between them five short lines were drawing boundaries the space had already
   drawn — this theme's own rule about lines, applied to itself. 合作 keeps
   every one of its own. */
.pn .pn-disc--section .pn-disc-row,
.pn .pn-disc--section > .pn-disc-row:first-child,
.pn .pn-disc--section > .pn-disc-row:last-child {
	border: 0;
}

/* ── The questions inside a fold ──────────────────────────────────────────
   A `<dl>`: a question is a term and its answer is the description. Seventeen
   of them stay out of the heading outline, where they would bury 辦公室 and
   徵才 under 常見問題. */
.pn-about__qa {
	margin: 0;
	padding-bottom: var(--space-5);
	display: grid;
	gap: var(--space-5);
	max-width: 34em;
}

/* The answer's size. On the reference a question and its answer are both 14px
   and the question is uppercase; here it keeps the ink and takes the weight,
   and the answer goes grey. Tracking would be wrong on a whole sentence of
   Chinese — 字距 marks a label, not a line of prose. */
.pn .pn-about__qa-q {
	margin: 0 0 var(--space-2);
	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-about__qa-a {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: var(--lh-body);
}

/* 正職 opens onto one sentence and no question, so that sentence carries the
   panel's own bottom spacing. */
.pn .pn-about__qa-a--alone {
	padding-bottom: var(--space-5);
	max-width: 34em;
}

/* The way out to the long version, at the foot of a fold, and the line under
   徵才 that is true of both its folds. */
.pn .pn-about__group-doc {
	margin: 0 0 var(--space-5);
	max-width: 34em;
	color: var(--text-secondary);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}
.pn .pn-about__block-body > .pn-about__group-doc { margin: var(--space-5) 0 0; }

/* ── 期刊 / 選物 — the masthead ───────────────────────────────────────────
   The reference's own shape: the role above the name, and the roles spread
   across two columns. Not the role-beside-the-name of the first pass — a label
   over what it labels is how the record below reads too, and the two columns
   are what stop four roles running down one narrow strip beside three-quarters
   of an empty page.

   Two equal columns, not the record's two fixed 12rem ones: a role here is a
   heading over a list, not a value beside a key, so it wants the width. They
   stack below 768, where two columns of names would be two 150px columns.

   Row-major fill, so the order the eye takes them in is the order they are
   written in. The reference fills column-major, which would need
   `grid-auto-flow: column` and would leave the DOM saying one thing while the
   page says another. */
.pn-about__entries--advisors { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
	.pn-about__entries--advisors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-7);
		row-gap: var(--space-6);
	}
}

@media (min-width: 1024px) {
	/* The record's `justify-content: start` and fixed columns are inherited from
	   .pn-about__entries and undone here: these two are half the body each. */
	.pn-about__entries--advisors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
	}
}

.pn-about__people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
	justify-items: start;
}

/* The li is what the card is positioned against, so it is only as wide as the
   name inside it — a card anchored to the left edge of a full-width row would
   open nowhere near the name it belongs to. */
.pn-about__person {
	position: relative;
	display: block;
}

/* Told apart by colour and nothing else, the way 合作's address is
   (`.pn-pt__mail`). It carried a ＋ until the masthead had five names in it and
   the marks read as a column of decoration down the right of the list — the
   colour says "there is more here" once, and stays out of the way of the
   names. */
.pn .pn-about__person-btn {
	display: inline;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	text-align: start;
	color: var(--text-link);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-about__person-btn:hover,
.pn .pn-about__person-btn:focus-visible { opacity: var(--hover-opacity); background: none; color: var(--text-link); }

/* ── The card ────────────────────────────────────────────────────────────
   Closed is a JavaScript state, as with the disclosure rows: with no script
   the cards are simply open and the masthead becomes four short biographies.
   That is a worse layout and a complete one. */
.pn-about__card {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: var(--space-4);
	max-width: 22rem;
	background: var(--bg-page);
	border: var(--line-weight) solid var(--line-strong);
}

.pn-js .pn-about__card[hidden] { display: none; }

@media (min-width: 768px) {
	/* Over the page rather than in it, once there is room for it to sit over
	   something. Below 768 it pushes the rest of the list down instead: a 22rem
	   card floating on a 375px screen has nowhere to go that is not on top of
	   the next name. */
	.pn-js .pn-about__card {
		position: absolute;
		top: calc(100% + var(--space-2));
		left: 0;
		z-index: 5;
		width: max-content;
		max-width: min(22rem, calc(100vw - 2 * var(--pn-gutter)));
		margin-top: 0;
		box-shadow: var(--shadow-overlay);
	}
	/* Flipped by about.js when a card at left:0 would run off the viewport. */
	.pn-js .pn-about__card.is-flipped { left: auto; right: 0; }
}

.pn .pn-about__card-bio {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

.pn .pn-about__card-link {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: var(--weight-medium);
}

/* ── Form — no rule, no visible title, 600px, centred like the reference ── */
.pn-about__form {
	display: grid;
	gap: var(--space-5);
	max-width: 37.5rem;
}

@media (min-width: 768px) {
	/* The 600px form sits on the page's own centre line, as measured on the
	   reference (x=420, w=600 at 1440). */
	.pn-about__form { margin-inline: auto; }
}

.pn-about__field {
	display: grid;
}

/* Underline only — ink, always, the way the reference form is set. The label
   is the placeholder; the real <label> is .pn-sr-only, behind it. */
.pn .pn-about__input {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) 0;
	background: none;
	color: var(--text-primary);
	border: 0;
	border-bottom: var(--line-weight) solid var(--line-strong);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: 1.5;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.pn .pn-about__input::placeholder {
	color: var(--text-secondary);
	opacity: 1;
}
.pn .pn-about__input:focus { border-bottom-width: 2px; padding-bottom: calc(var(--space-2) - 1px); }
.pn .pn-about__input:user-invalid { border-bottom-color: var(--error); }

.pn .pn-about__textarea {
	min-height: 5.5rem;
	line-height: var(--lh-body);
	resize: vertical;
}

/* ── Checkboxes ────────────────────────────────────────────────────── */
.pn .pn-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
	cursor: pointer;
}
/* The consent line names a document you are agreeing to: the link carries
   weight rather than size. (The size used to need putting back here too;
   base.css no longer hard-sets one.) */
.pn .pn-check .pn-link {
	font-weight: var(--weight-medium);
}

.pn .pn-check input {
	width: 16px;
	height: 16px;
	margin-top: 0.15em;
	accent-color: var(--green-800);
	flex: none;
}

/* ── Message line + submit ─────────────────────────────────────────── */
.pn .pn-about__message {
	margin: 0;
	min-height: calc(var(--text-small) * var(--lh-small));
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
}
.pn .pn-about__message.is-error { color: var(--error); }
.pn .pn-about__message.is-success { color: var(--success); }

/* Quiet text button, as on the reference — not a filled block. The colour is
   pinned here and base.css's fade is what marks it live. */
.pn .pn-about__submit {
	justify-self: start;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--text-primary);
	font-size: var(--text-body);
}
.pn .pn-about__submit:hover { color: var(--text-primary); }

/* Hidden until the whole form is valid — a stray Return has nothing to send.
   Without JavaScript (no .pn-js) the button is simply always there. */
.pn-js .pn-about__submit {
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		visibility 0s linear var(--dur-base);
}
.pn-js .pn-about__form.is-valid .pn-about__submit {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* After a successful send only the message stays. */
.pn-about__form.is-done .pn-about__field,
.pn-about__form.is-done .pn-check,
.pn-about__form.is-done .pn-about__submit { display: none; }

/* ── Honeypot ──────────────────────────────────────────────────────── */
.pn-about__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.pn-js .pn-about__submit { transform: none; }
	.pn .pn-about__person-btn { transition: none; }
	.pn .pn-about__teaser-link .pn-about__teaser-title { transition: none; }
}