/* perennial — contact / 公司資訊
   A masthead / colophon, built to the geometry of the reference page but drawn
   with this theme's own ground, ink and scale.

   The measured reference at 1440: the lead 32px running the full content
   width; three 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.

   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-contact {
	padding-block: var(--space-8) var(--space-10);
}

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

/* ── 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-contact__intro {
	margin-bottom: var(--space-9);
}

@media (min-width: 768px) {
	.pn-contact__intro { margin-bottom: var(--space-10); }
}
.pn .pn-contact__intro > * + * { margin-top: var(--space-5); }
.pn .pn-contact__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-contact__intro p { font-size: 26px; line-height: 1.68; }
}

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

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

.pn .pn-contact__block-title {
	font-family: var(--font-serif);
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	font-weight: var(--weight-regular);
	letter-spacing: var(--ls-lead);
	color: var(--text-primary);
	margin-bottom: var(--space-5);
}

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

.pn-contact__entry dt {
	margin-bottom: var(--space-2);
	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-contact__entry dt { text-transform: none; letter-spacing: 0.12em; }

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

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

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

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

.pn .pn-contact__teaser-title,
.pn .pn-contact__teaser-dek {
	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);
	margin: 0;
	max-width: 18em;
	text-wrap: balance;
}
.pn .pn-contact__teaser-dek {
	margin-top: var(--space-4);
	color: var(--text-secondary);
}

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

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

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

@media (min-width: 1024px) {
	.pn-contact__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-contact__entries {
		grid-template-columns: repeat(2, minmax(0, 12rem));
		column-gap: var(--space-7);
		row-gap: var(--space-6);
		justify-content: start;
	}
}

/* ── Form — no rule, no visible title, 600px, centred like the reference ── */
.pn-contact__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-contact__form { margin-inline: auto; }
}

.pn-contact__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-contact__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-contact__input::placeholder {
	color: var(--text-secondary);
	opacity: 1;
}
.pn .pn-contact__input:focus { border-bottom-width: 2px; padding-bottom: calc(var(--space-2) - 1px); }
.pn .pn-contact__input:user-invalid { border-bottom-color: var(--error); }

.pn .pn-contact__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-contact__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-contact__message.is-error { color: var(--error); }
.pn .pn-contact__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-contact__submit {
	justify-self: start;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--text-primary);
	font-size: var(--text-body);
}
.pn .pn-contact__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-contact__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-contact__form.is-valid .pn-contact__submit {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* After a successful send only the message stays. */
.pn-contact__form.is-done .pn-contact__field,
.pn-contact__form.is-done .pn-check,
.pn-contact__form.is-done .pn-contact__submit { display: none; }

/* ── Honeypot ──────────────────────────────────────────────────────── */
.pn-contact__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-contact__submit { transform: none; }
	.pn .pn-contact__teaser-link .pn-contact__teaser-title { transition: none; }
}