/* perennial — 合作
   The four partnership pages. Everything hangs off .pn-lanes, the journal's
   grid: twelve columns in a `content` lane inside a `full` lane, so the two
   things that leave the content column — the farms hero photograph and the
   affiliate application band — can do it without a second layout system.

   Two rules that cost time elsewhere in this theme and are restated here:

   1. base.css resets margin and padding on bare h1–h6, p, ul, ol, li with
      `.pn :is(…)`, which is 0-1-1. Every rule below that sets margin or
      padding on one of those elements carries a `.pn ` prefix (0-2-0) or it
      is silently dropped.
   2. Blocksy styles bare headings, paragraphs, tables and submit buttons from
      its own palette. Anything that must not arrive blue-grey states its own
      colour. */

/* ── The page ──────────────────────────────────────────────────────────── */
.pn-partners {
	--pt-rail: 768px;          /* the width at which the eyebrow rail appears */
	row-gap: 0;
	padding-bottom: var(--space-9);
}

.pn-partners :is(h1, h2, h3, p, li, dt, dd, th, td) { color: inherit; }

/* ── Section rhythm: 64 + 64 = the 128 between beats ───────────────────── */
.pn .pn-pt__sec { padding-block: var(--pn-section-pad); }

/* The rail: a tracked label in columns 1–3, the content in 4–10/11/12.
   Below 768 the label simply sits above the content — three columns of a
   single-column layout is not a rail, it is an indent. */
.pn-pt__rail,
.pn-pt__sec--open,
.pn-pt__story,
.pn-pt__reach {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.pn-pt__rail,
	.pn-pt__sec--open,
	.pn-pt__story,
	.pn-pt__reach {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--grid-gap);
		row-gap: var(--space-6);
	}

	.pn-pt__side { grid-column: 1 / span 3; }
	.pn-pt__body--9  { grid-column: 4 / span 6; }
	.pn-pt__body--10 { grid-column: 4 / span 7; }
	.pn-pt__body--11 { grid-column: 4 / span 8; }
	.pn-pt__body--12 { grid-column: 4 / span 9; }
}

/* The label is the section's heading, not a caption beside one: there is no
   second h2 in the content column repeating it. */
.pn .pn-pt__label { color: var(--text-primary); }
.pn-pt__label--dot { display: flex; align-items: center; gap: var(--space-3); }

.pn .pn-pt__note {
	margin-top: var(--space-3);
	max-width: 22em;
	color: var(--text-secondary);
	font-size: var(--text-small);
	line-height: var(--lh-body);
}

/* ── Openings ──────────────────────────────────────────────────────────── */
.pn-pt__open { grid-column: 1 / -1; }

@media (min-width: 768px) {
	.pn-pt__open { grid-column: 1 / span 7; }
	.pn-pt__open--wide { grid-column: 1 / span 8; }
}

.pn .pn-pt__h1 { margin-top: var(--space-5); }
.pn .pn-pt__lead { margin-top: var(--space-5); color: var(--green-900); }
.pn .pn-pt__cta { margin-top: var(--space-6); }

/* The breadcrumb is the eyebrow: 合作 quiet and linked, this page in ink. */
.pn-pt__crumb { display: flex; align-items: baseline; gap: var(--space-2); }
.pn .pn-pt__crumb-up {
	color: var(--text-secondary);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-pt__crumb-up:hover,
.pn .pn-pt__crumb-up:focus-visible { opacity: var(--hover-opacity); }
.pn-pt__crumb-sep { color: var(--text-secondary); }
.pn-pt__crumb-here { color: var(--text-primary); }

/* ── /partners/ — the three entries ────────────────────────────────────── */
@media (min-width: 768px) {
	.pn-pt__entries { max-width: calc((100% - 11 * var(--grid-gap)) / 12 * 10 + 9 * var(--grid-gap)); }
}

/* Hairlines between the rows and under the last, and nothing above the first:
   the three entries are a list that starts, not a block that is fenced. */
.pn .pn-pt__entry + .pn-pt__entry { border-top: var(--border-hair); }
.pn .pn-pt__entry:last-child { border-bottom: var(--border-hair); }

/* The whole row is the link: a six-character anchor at the end of a row is a
   target you have to aim at, and the title and the description are the two
   things a reader is actually reading. */
.pn-pt__entry-link {
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-5);
}

@media (min-width: 768px) {
	.pn-pt__entry-link {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 160px;
		align-items: center;
		column-gap: var(--grid-gap);
		padding-block: 28px;
	}
}

.pn-pt__entry-title {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

.pn-pt__entry-line {
	color: var(--green-900);
	font-size: var(--text-body);
	line-height: var(--lh-body);
}

/* 了解更多 carries the row's whole hover: a 1px rule growing left to right
   under it, and no colour change anywhere else in the row. It rests with no
   line, so the rule appearing is what says the row is live — this is the one
   place in the theme that draws a line on hover, asked for by name after the
   first review of this page.

   Drawn as a background rather than a border or an underline, because those
   two cannot animate their width: a gradient the size of the text, grown from
   0 to 100% of it. */
.pn-pt__entry-more {
	justify-self: start;
	color: var(--text-link);
	font-size: var(--text-small);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 var(--line-weight);
	transition: background-size var(--dur-base) var(--ease-out);
}
.pn-pt__entry-link:hover .pn-pt__entry-more,
.pn-pt__entry-link:focus-visible .pn-pt__entry-more { background-size: 100% var(--line-weight); }

@media (min-width: 768px) { .pn-pt__entry-more { justify-self: end; } }

/* Reduced motion keeps the line — it is the only thing marking the link — and
   drops the growing. */
@media (prefers-reduced-motion: reduce) {
	.pn-pt__entry-more { transition: none; }
}

/* ── Closing lines ─────────────────────────────────────────────────────── */
.pn .pn-pt__sec--closing { padding-top: var(--space-9); }

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

/* The address is told apart by colour and nothing else. */
.pn .pn-pt__mail {
	color: var(--text-link);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-pt__mail:hover,
.pn .pn-pt__mail:focus-visible { opacity: var(--hover-opacity); }

/* 廠商合作's last sentence: one line over a rule, not a second call to action. */
.pn .pn-pt__last {
	padding-top: var(--space-5);
	border-top: var(--border-strong);
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	text-wrap: balance;
}
@media (min-width: 768px) { .pn .pn-pt__last { max-width: calc((100% - 11 * var(--grid-gap)) / 12 * 8 + 7 * var(--grid-gap)); } }

/* ── Hairline row lists: 適合 / 不適合, 我們不賣什麼 ─────────────────────── */
.pn .pn-pt__sublabel { color: var(--text-secondary); padding-bottom: var(--space-3); }
.pn .pn-pt__sublabel--later { padding-top: 28px; }

.pn .pn-pt__row {
	padding-block: var(--space-4);
	border-top: var(--border-hair);
	font-size: 17px;
	line-height: var(--lh-body);
}
.pn .pn-pt__rows-list > .pn-pt__row:first-child { border-top: var(--border-strong); }
.pn .pn-pt__rows-list > .pn-pt__row:last-child { border-bottom: var(--border-hair); }
.pn .pn-pt__rows-list.is-quiet .pn-pt__row { color: var(--text-secondary); }

/* ── 聯盟行銷 03 · the plan line ───────────────────────────────────────────
   One rule across the content columns with a dot per step sitting on it. The
   line means a progression, which is the only thing this section says; the
   third dot is clay because that is where the money arrives. Vertical below
   768, with the same rule turned on its side. */
.pn-pt__plan { position: relative; display: grid; gap: var(--space-6); }

.pn-pt__plan::before {
	content: "";
	position: absolute;
	inset-block: 4px;
	left: 4px;
	width: var(--line-weight);
	background: var(--line-strong);
	transform-origin: top;
}

.pn .pn-pt__step { position: relative; padding-left: var(--space-6); }
.pn-pt__step-dot { position: absolute; left: 1px; top: 6px; }

@media (min-width: 768px) {
	.pn-pt__plan { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
	.pn-pt__plan::before {
		inset-block: auto;
		top: 4px;
		left: 0;
		right: 0;
		width: auto;
		height: var(--line-weight);
		transform-origin: left;
	}
	.pn .pn-pt__step { padding-left: 0; padding-right: var(--space-7); padding-top: 40px; }
	.pn-pt__step-dot { left: 0; top: 1px; }
}

.pn .pn-pt__step-title {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	font-weight: var(--weight-regular);
}
.pn .pn-pt__step-line {
	margin-top: var(--space-2);
	color: var(--green-900);
	font-size: var(--text-body);
	line-height: var(--lh-body);
}

/* ── Component A · the terms table ─────────────────────────────────────── */
.pn .pn-pt__term {
	display: grid;
	gap: var(--space-1);
	padding-block: 18px;
	border-top: var(--border-hair);
}
.pn .pn-pt__terms > .pn-pt__term:first-child { border-top: var(--border-strong); }
.pn .pn-pt__terms > .pn-pt__term:last-child { border-bottom: var(--border-hair); }

@media (min-width: 768px) {
	.pn .pn-pt__term { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); }
}

.pn .pn-pt__term-name { font-size: var(--text-body); line-height: var(--lh-body); }
.pn .pn-pt__term-desc { font-size: 17px; line-height: var(--lh-body); color: var(--green-900); }

/* ── 廠商合作 02 · the six criteria on a story line ─────────────────────────
   The line is the claim: all six, and all of them count. */
.pn .pn-pt__criteria { position: relative; padding-left: 28px; }

.pn-pt__criteria::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--space-2);
	bottom: var(--space-2);
	width: var(--line-weight);
	background: var(--line-hair);
	transform-origin: top;
}

.pn .pn-pt__criterion { position: relative; }
.pn .pn-pt__criterion + .pn-pt__criterion { margin-top: 40px; }

/* The dot is centred on the line: half the dot, plus half the rule. */
.pn-pt__criterion-dot {
	position: absolute;
	left: calc(-28px - var(--dot-size) / 2 + var(--line-weight) / 2);
	top: 12px;
}

.pn-pt__criterion-n {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-tertiary);
}

.pn .pn-pt__criterion-title {
	margin-top: var(--space-2);
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	font-weight: var(--weight-medium);
}
.pn .pn-pt__criterion-line {
	margin-top: var(--space-2);
	color: var(--green-900);
	font-size: 17px;
	line-height: var(--lh-body);
	max-width: 34em;
}

@media (min-width: 1024px) {
	.pn .pn-pt__criteria { padding-left: 36px; }
	.pn-pt__criterion-dot { left: calc(-36px - var(--dot-size) / 2 + var(--line-weight) / 2); }
	.pn .pn-pt__criterion { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5); align-items: baseline; }
	.pn-pt__criterion-n { padding-top: 2px; }
	.pn .pn-pt__criterion-title { margin-top: 0; }
}

@media (min-width: 1280px) {
	.pn .pn-pt__criteria { padding-left: 40px; }
	.pn-pt__criterion-dot { left: calc(-40px - var(--dot-size) / 2 + var(--line-weight) / 2); }
}

/* ── 廠商合作 04 · the process, vertical on purpose ─────────────────────── */
.pn .pn-pt__pstep {
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-5);
	border-top: var(--border-hair);
}
.pn .pn-pt__process > .pn-pt__pstep:first-child { border-top: var(--border-strong); }
.pn .pn-pt__process > .pn-pt__pstep:last-child { border-bottom: var(--border-hair); }

@media (min-width: 768px) {
	.pn .pn-pt__pstep { grid-template-columns: minmax(0, 1fr) 160px; column-gap: var(--grid-gap); align-items: baseline; }
	.pn .pn-pt__pstep-time { text-align: end; }
}

.pn .pn-pt__pstep-title {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	font-weight: var(--weight-regular);
}
.pn .pn-pt__pstep-line { margin-top: var(--space-2); color: var(--green-900); font-size: 17px; line-height: var(--lh-body); }
.pn .pn-pt__pstep-time { color: var(--text-secondary); font-size: var(--text-small); }

/* ── 農場契作 ──────────────────────────────────────────────────────────── */
.pn-pt__hero { grid-column: full-start / full-end; }
.pn-pt__hero-media { aspect-ratio: 4 / 3; background: var(--bg-muted); }
.pn-pt__hero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .pn-pt__hero-media { aspect-ratio: 16 / 10; } }

/* Two paragraphs, one step larger than body: this audience is older. */
.pn .pn-pt__why > p { font-size: 19px; line-height: 1.95; max-width: 34em; }
.pn .pn-pt__why > p + p { margin-top: var(--space-5); }

/* 03 · the contract table. A real table: 類別 and 年需求 are looked up
   against each other, which is the one thing a table's headers buy. */
.pn-pt__crops { width: 100%; border-collapse: collapse; text-align: start; }

/* The header row states the eyebrow's type itself rather than carrying
   .pn-eyebrow, which is `display: block` — on a <th> that drops the cell out
   of its row, and the three labels stack under each other. */
.pn .pn-pt__crops-head {
	padding-bottom: var(--space-3);
	border-bottom: var(--border-strong);
	color: var(--text-secondary);
	text-align: start;
	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);
}
.pn .pn-pt__crops-head--end { text-align: end; }

.pn .pn-pt__crops-row > * {
	padding-block: 18px;
	border-top: var(--border-hair);
	text-align: start;
	font-weight: var(--weight-regular);
	font-size: 18px;
	line-height: var(--lh-body);
	vertical-align: baseline;
}
.pn .pn-pt__crops tbody tr:first-child > * { border-top: 0; }
.pn .pn-pt__crops tbody tr:last-child > * { border-bottom: var(--border-hair); }
.pn .pn-pt__crops-desc { color: var(--green-900); }
.pn .pn-pt__crops-vol { text-align: end; white-space: nowrap; }

@media (min-width: 768px) {
	.pn-pt__crops { table-layout: fixed; }
	.pn .pn-pt__crops-head:first-child { width: 200px; }
	.pn .pn-pt__crops-head--end { width: 160px; }
}

/* Below 768 the table folds: 類別 and 年需求 share the first line — the two
   things a grower is comparing — and the description sits under them. The
   header row goes with it: three labels over a two-line block name nothing,
   and each row now says what it is by its own shape.

   The rules move to the row, so the fold is one hairline per entry rather
   than one per cell. Every `> *` rule above is undone here on purpose: a
   cell's border and padding belong to the table it is no longer in. */
@media (max-width: 767px) {
	.pn-pt__crops thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.pn-pt__crops,
	.pn-pt__crops tbody { display: block; }

	.pn .pn-pt__crops-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--space-4);
		align-items: baseline;
		padding-block: var(--space-4);
		border-top: var(--border-hair);
	}
	.pn .pn-pt__crops tbody tr:first-child { border-top: var(--border-strong); }
	.pn .pn-pt__crops tbody tr:last-child { border-bottom: var(--border-hair); }

	.pn .pn-pt__crops-row > *,
	.pn .pn-pt__crops tbody tr:first-child > *,
	.pn .pn-pt__crops tbody tr:last-child > * {
		padding-block: 0;
		border: 0;
	}
	/* Rows are placed, not auto-flowed: the description is second in the
	   document and spans both columns, so auto-placement filled row one with
	   the category, row two with the description and pushed the volume down
	   to row three — the one pairing the fold exists to make. */
	.pn .pn-pt__crops-cat { grid-column: 1; grid-row: 1; }
	.pn .pn-pt__crops-vol { grid-column: 2; grid-row: 1; }
	.pn .pn-pt__crops-desc {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: var(--space-2);
		font-size: var(--text-body);
	}
}

/* 04 · the terms a grower reads. One step larger again, and above the story. */
.pn .pn-pt__give {
	padding-block: var(--space-5);
	border-top: var(--border-hair);
}
.pn .pn-pt__gives > .pn-pt__give:first-child { border-top: var(--border-strong); }
.pn .pn-pt__gives > .pn-pt__give:last-child { border-bottom: var(--border-hair); }

.pn .pn-pt__give-title {
	font-family: var(--font-serif);
	font-size: 28px;
	line-height: var(--lh-h3);
	font-weight: var(--weight-regular);
}
@media (max-width: 767px) { .pn .pn-pt__give-title { font-size: 24px; } }

.pn .pn-pt__give-line { margin-top: var(--space-2); color: var(--green-900); font-size: 18px; line-height: 1.9; max-width: 34em; }

/* ── Component C · the seasonal line ───────────────────────────────────────
   Vertical at 1024 and below, as drawn: four seasons and their activities do
   not sit side by side in a 900px column. */
.pn .pn-pt__season-line { position: relative; display: grid; gap: var(--space-5); padding-left: 28px; }

.pn-pt__season-line::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--space-2);
	bottom: var(--space-2);
	width: var(--line-weight);
	background: var(--line-strong);
	transform-origin: top;
}

.pn .pn-pt__season-mark { position: relative; }
.pn-pt__season-dot {
	position: absolute;
	left: calc(-28px - var(--dot-size) / 2 + var(--line-weight) / 2);
	top: 8px;
}
.pn-pt__season-mark.is-now .pn-pt__season-dot { left: calc(-28px - var(--dot-size-lg) / 2 + var(--line-weight) / 2); top: 6px; }

.pn-pt__season-name {
	display: block;
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
}
.pn-pt__season-do { display: block; margin-top: var(--space-1); color: var(--green-900); font-size: var(--text-body); line-height: var(--lh-body); }

@media (min-width: 1280px) {
	/* `.pn ` because this is an <ol>: base.css zeroes padding on bare list
	   elements at 0-1-1, and a single class does not reach it. Both paddings
	   here were silently dropped until the dots were measured against the
	   rule they are supposed to sit on. */
	.pn .pn-pt__season-line { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-left: 0; padding-top: 40px; }
	.pn-pt__season-line::before {
		inset-block: auto;
		top: 4px;
		left: 0;
		right: 0;
		width: auto;
		height: var(--line-weight);
		transform-origin: left;
	}
	.pn .pn-pt__season-mark { padding-right: var(--space-6); }
	.pn-pt__season-dot { left: 0; top: -39px; }
	.pn-pt__season-mark.is-now .pn-pt__season-dot { left: -2px; top: -41px; }
}

.pn .pn-pt__season-note {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: var(--border-hair);
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	/* No measure cap: the rule above this note is drawn by its own border, and
	   a 34em cap stopped that rule halfway across a 954px column, which reads
	   as a line that gave up rather than a line that separates. The note is
	   one short sentence and never reaches the measure anyway. */
}

/* ── 農場契作 06 · the grower's story ──────────────────────────────────── */
@media (min-width: 768px) {
	.pn-pt__story-photo { grid-column: 1 / span 4; }
	.pn-pt__story-text { grid-column: 6 / span 6; align-self: center; }
}

.pn .pn-pt__story-quote {
	margin-top: var(--space-5);
	font-family: var(--font-serif);
	font-size: var(--text-quote);
	line-height: var(--lh-quote);
	font-style: italic;
}
@media (max-width: 767px) { .pn .pn-pt__story-quote { font-size: 24px; } }

.pn .pn-pt__story-credit { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-small); }

/* ── 農場契作 07 · 聯絡 ────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.pn-pt__reach-intro { grid-column: 1 / span 4; }
	.pn-pt__reach-form { grid-column: 6 / span 7; }
}

.pn .pn-pt__reach-head {
	margin-top: var(--space-4);
	font-family: var(--font-serif);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
}
.pn .pn-pt__reach-lead { margin-top: var(--space-4); color: var(--green-900); font-size: 17px; line-height: var(--lh-body); }

.pn .pn-pt__call { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-hair); }
.pn .pn-pt__call-line { color: var(--green-900); font-size: 17px; line-height: var(--lh-body); }
.pn .pn-pt__call-number { margin-top: var(--space-3); font-family: var(--font-serif); font-size: var(--pn-text-h3); }
.pn .pn-pt__call-number a { transition: opacity var(--dur-fast) var(--ease-out); }
.pn .pn-pt__call-number a:hover,
.pn .pn-pt__call-number a:focus-visible { opacity: var(--hover-opacity); }

/* On a phone this audience scrolls to the bottom first, so the offer to call
   instead lands after the form rather than before it. One `order`. */
@media (max-width: 767px) {
	.pn-pt__reach { display: flex; flex-direction: column; }
	.pn-pt__call { order: 2; }
	.pn-pt__reach-intro { display: contents; }
	.pn-pt__reach-form { order: 1; }
}

/* ── Component B · the disclosure rows ─────────────────────────────────── */
/* Moved to base.css as `.pn-disc` in round 22, when 長青生活 grew an FAQ built
   the same way. One accordion on this site, not two that drift apart. */

/* The two serif lines in a four-column measure — the forest band's heading
   and the farm's 聯絡 heading — keep `text-wrap: balance`, the same as the
   headings in base.css. Measured on 留下你的網站，我們會去讀 at 411px: balance
   gives 5 + 7, plain filling 11 + 1, `pretty` 11 + 2. Balance wins because a
   break between two characters of a compound is ordinary in Chinese, and a
   line with one or two characters alone on it is not. */

/* ── The application band (聯盟行銷 05) ────────────────────────────────────
   The one forest section in 合作. Full-bleed, not a card: a card on a phone
   would be a dark box in a paper page, which is a different thing to look at
   than a page that changes ground. */
.pn-pt__sec--inverse {
	grid-column: full-start / full-end;
	background: var(--bg-page);
	color: var(--text-primary);
	padding-block: var(--space-8);
}
@media (min-width: 1024px) { .pn-pt__sec--inverse { padding-block: 112px; } }

.pn-pt__inverse-inner {
	width: 100%;
	max-width: calc(var(--page-max) + 2 * var(--pn-gutter));
	margin-inline: auto;
	padding-inline: var(--pn-gutter);
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 1280px) {
	.pn-pt__inverse-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
	.pn-pt__apply-intro { grid-column: 1 / span 4; }
	.pn-pt__apply-form { grid-column: 6 / span 7; }
}

.pn .pn-pt__apply-head {
	margin-top: var(--space-4);
	font-family: var(--font-serif);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
}
.pn .pn-pt__apply-line { margin-top: var(--space-4); color: var(--text-secondary); font-size: 17px; line-height: var(--lh-body); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.pn-pt__fields { display: grid; gap: 28px var(--grid-gap); }
@media (min-width: 768px) { .pn-pt__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pn-pt__field { display: grid; align-content: start; gap: var(--space-2); }
@media (min-width: 768px) { .pn-pt__field--wide { grid-column: 1 / -1; } }

.pn .pn-pt__flabel {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}
.pn-pt__optional { color: var(--text-tertiary); font-size: var(--text-caption); }

.pn .pn-pt__hint { color: var(--text-tertiary); font-size: var(--text-caption); line-height: var(--lh-body); }

/* 48px everywhere, not only on the farm page: one input height across the
   site is one thing to remember. */
.pn .pn-pt__input { min-height: 48px; background: transparent; }
.pn .pn-pt__textarea { padding: var(--space-3) var(--space-4); line-height: var(--lh-body); resize: vertical; }

/* The select's own arrow, drawn rather than left to the platform, because the
   platform's is blue on this ground and grey on forest. */
.pn .pn-pt__select {
	padding-right: var(--space-8);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 22px top 22px, right 16px top 22px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.pn-pt__rows { display: grid; gap: var(--space-3); }

.pn .pn-pt__add {
	justify-self: start;
	margin-top: var(--space-1);
	color: var(--text-link);
	font-size: var(--text-small);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn .pn-pt__add:hover { opacity: var(--hover-opacity); background: none; }

.pn-pt__area { display: flex; align-items: center; gap: var(--space-3); }
.pn-pt__area .pn-pt__input { flex: 1 1 0; min-width: 5ch; }
.pn .pn-pt__units { flex: none; display: flex; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.pn-pt__unit { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-small); white-space: nowrap; }

.pn .pn-pt__file {
	padding: var(--space-3) 0;
	font-size: var(--text-small);
	color: var(--text-secondary);
}

/* Visually hidden, not display:none — something that reads the computed style
   should still see a field worth filling in. */
.pn-pt__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.pn .pn-pt__consent { margin-top: 28px; }
.pn-pt__check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-small); line-height: var(--lh-body); color: var(--text-secondary); }
.pn-pt__check input { flex: none; margin-top: 5px; width: 16px; height: 16px; accent-color: var(--bg-brand); }
.pn-pt__check .pn-pt__mail { font-size: inherit; }

/* --error is #A9443A, which is nearly invisible against forest. The lighter
   clay carries the same meaning at 4.5:1 on that ground — for the message and
   for the border it marks the field with. */
.pn .pn-pt__err { margin-top: var(--space-1); color: var(--error); font-size: var(--text-small); line-height: var(--lh-small); }
.pn-pt__sec--inverse .pn-pt__err { color: var(--clay-400); }
.pn-pt__sec--inverse .pn-input[aria-invalid="true"] { border-color: var(--clay-400); }

.pn .pn-pt__formerr { margin-top: var(--space-5); color: var(--error); font-size: var(--text-small); }
.pn-pt__sec--inverse .pn-pt__formerr { color: var(--clay-400); }

.pn-pt__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.pn .pn-pt__promise { color: var(--text-secondary); font-size: var(--text-small); }

@media (max-width: 767px) {
	.pn-pt__send { display: grid; }
	.pn .pn-pt__submit { width: 100%; }
}

/* Success replaces the form: there is nothing left to do, so there is nothing
   left to do it with. */
.pn .pn-pt__done {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
}
.pn .pn-pt__done:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Reveal, and the two lines that draw ─────────────────────────────────
   Keyed off `.pn-pt-live`, which partners.js sets on <html> before it does
   anything else — not off `.pn-js`, which site.js sets on every page. If this
   page's script 404s or throws on load, nothing here applies and the four
   pages render in full. A reveal is worth having; it is not worth a blank
   page when it is the one file that failed to deploy. */
.pn-pt-live .pn-pt__sec { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.pn-pt-live .pn-pt__sec.is-in { opacity: 1; }

.pn-pt-live .pn-pt__plan::before,
.pn-pt-live .pn-pt__season-line::before,
.pn-pt-live .pn-pt__criteria::before { transform: scaleY(0); }
.pn-pt-live .is-in .pn-pt__plan::before,
.pn-pt-live .is-in .pn-pt__season-line::before,
.pn-pt-live .is-in .pn-pt__criteria::before {
	transform: none;
	transition: transform var(--dur-story) var(--ease-out);
}
@media (min-width: 768px) {
	.pn-pt-live .pn-pt__plan::before { transform: scaleX(0); }
}
@media (min-width: 1280px) {
	.pn-pt-live .pn-pt__season-line::before { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pn-pt-live .pn-pt__plan::before,
	.pn-pt-live .pn-pt__season-line::before,
	.pn-pt-live .pn-pt__criteria::before,
	.pn-pt-live .is-in .pn-pt__plan::before,
	.pn-pt-live .is-in .pn-pt__season-line::before,
	.pn-pt-live .is-in .pn-pt__criteria::before { transform: none; transition: none; }
	.pn-pt__entry-link:active,
	.pn .pn-pt__submit:active { transform: none; }
}