/* perennial — 選品標準
   The selection-standards page. A story, not a record: it belongs with the home
   page and 農場契作, not with 長青生活 and 長青會員, so it takes the theme's
   full type scale rather than those two pages' three sizes, and everything
   hangs off .pn-lanes — twelve columns in a full-bleed lane — so the four
   things that leave the content column (the hero, the paired photographs, the
   forest band and the closing photograph) can do it without a second layout
   system.

   ── The design document's clamps, and what is used instead ────────────────
   The document sizes every heading with its own clamp(): h1 clamp(34,5vw,52),
   h2 clamp(26,3.4vw,36), the band clamp(28,4vw,44), the numbers
   clamp(38,5vw,52). This theme already decided those steps once, in base.css,
   at 768 / 1024 / 1280 — --pn-text-h1 36→42→52, --pn-text-h2 28→32→36,
   --pn-text-h3 22→24→26 — and they land within a pixel or two of the clamps at
   every width the site is actually read at. So the tokens are used and the
   clamps are not: a second scale on one page is a second scale to keep in step,
   and round 22 spent a whole pass taking one page back down to the theme's own.

   Three places where that mapping loses something, all of them deliberate:
   - The forest band's heading tops out at 36px, not the document's 44. It is
     --pn-text-h2, the same size as 耐用，而不過時 above it, which is right:
     they are the same level of the argument.
   - The pillar bodies and the FAQ answers are 16px, not the document's 15 and
     17. --text-body. 14px of 繁體中文 already reads small; two sizes between
     14 and 16 is a distinction nobody can see and everybody has to maintain.
   - Measures are 34em, the :lang(zh) measure base.css sets, not the document's
     40em — 40 characters a line is a Latin measure wearing an em.

   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, dt, dd
      with `.pn :is(…)`, which is 0-1-1. Every rule below that sets margin or
      padding on one of those carries a `.pn ` prefix (0-2-0) or it is silently
      dropped.
   2. Blocksy styles bare headings and paragraphs from its own palette. Anything
      that must not arrive blue-grey states its own colour. */

/* ── The page ──────────────────────────────────────────────────────────── */
.pn-std { row-gap: 0; }

.pn-std :is(h1, h2, h3, p, dt, dd) { color: inherit; }

/* That rule is Blocksy's fault — it colours bare headings and paragraphs from
   its own palette — but it is 0-2-0 and .pn-eyebrow is 0-1-0, so it takes the
   eyebrow's grey off with Blocksy's blue-grey. Ink is what this page's design
   document asks for anyway (§3 and §10), and it is how 合作 sets its section
   labels; stating it here makes that a decision rather than a side effect. */
.pn .pn-std .pn-eyebrow { color: var(--text-primary); }

/* Same rule, opposite problem: the forest band's sub-lead has to be --green-300
   against the paper-000 heading above it, and .pn-lead states no colour at all,
   so it inherited the band's ink. On the inverse ground --text-secondary IS
   --green-300; the alias does the work. */
.pn .pn-std__band-lead { color: var(--text-secondary); }

/* The two one-sentence leads on the page — the band's and the closing one —
   take `text-wrap: balance`, the same as the serif headings in base.css. Left
   to fill, 你的選擇減少運送造成的污染，也讓塑膠用得更少。 puts 少。 alone on a
   second line, and the closing sentence breaks 從一件 across two. A break
   between two characters of a compound is ordinary in Chinese; two characters
   alone on a line is not. Measured at 1280, where the lead's measure is 22em. */
.pn .pn-std__band-lead,
.pn .pn-std__closing-text { text-wrap: balance; }

/* 64 + 64 = the 128 between beats. The full-bleed sections carry no padding of
   their own; the beat above or below them supplies it. */
.pn .pn-std__sec { padding-block: var(--pn-section-pad); }

/* ── The split: label left, argument right ─────────────────────────────────
   The essay, the criteria and the FAQ are all one shape — four columns and
   seven, with the twelfth column's worth of grid between them. Below 768 the
   left half simply sits above the right; four columns of a single-column
   layout is not a split, it is an indent. */
.pn-std__split {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.pn-std__split {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--grid-gap);
		row-gap: var(--space-7);
		align-items: start;
	}
	.pn-std__split > :first-child { grid-column: 1 / span 4; }
	.pn-std__split > :last-child  { grid-column: 6 / span 7; }
}

/* ── §2 · Hero ─────────────────────────────────────────────────────────────
   Full bleed, square corners, nothing written over it. The document asks for
   clamp(360px, 52vh, 560px); this is stated as a ratio instead, the way
   農場契作's hero is — a viewport-height hero on a phone in landscape is a
   photograph taller than the screen it is on. 21:9 at 1280 is 549px. */
.pn-std__hero { grid-column: full-start / full-end; }
.pn-std__hero-media { aspect-ratio: 4 / 3; }

@media (min-width: 768px)  { .pn-std__hero-media { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .pn-std__hero-media { aspect-ratio: 21 / 9; } }

/* ── §3 · The essay ────────────────────────────────────────────────────── */
.pn .pn-std__title { margin-top: var(--space-5); }

.pn-std__essay-body {
	display: grid;
	gap: var(--space-5);
	max-width: 34em;
}

.pn .pn-std__essay-body > p {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

/* The one paragraph in ink: the standard itself, stated in a line, before the
   three that explain it go grey. Stated with the same 0-2-1 reach as the rule
   above it, not the 0-2-0 a bare class would have — otherwise those three win
   the colour back and the standard reads as one of the explanations. */
.pn .pn-std__essay-body > .pn-std__essay-lead {
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--ls-lead);
	color: var(--text-primary);
}

/* ── §4 · The rejection beat ───────────────────────────────────────────────
   One dot and one line. The dot is --dot-size-lg clay, and it is the only clay
   on this page: the tokens allow one per view and pn_dot( 'accent' ) is called
   exactly once in template-parts/standards/. */
.pn-std__rejected {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
}

/* Nudged up against the baseline it sits on: a circle centred on a Chinese
   character's baseline reads low, because the glyph's optical centre sits
   higher than a Latin x-height would put it. */
.pn-std__rejected-dot { transform: translateY(-2px); }

.pn .pn-std__rejected-line {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-quote);
	letter-spacing: var(--ls-h2);
	font-weight: var(--weight-regular);
	color: var(--text-primary);
	max-width: 24em;
	text-wrap: balance;
}
/* 22 → 24 → 26 → 30, which is the document's clamp(22, 3vw, 30) drawn on the
   theme's own steps. --text-quote is the last one; it is not italic here,
   because .pn-quote's italic belongs to a quotation and this is the page
   speaking. */
@media (min-width: 1280px) {
	.pn .pn-std__rejected-line { font-size: var(--text-quote); }
}

/* ── §5 · The two criteria ─────────────────────────────────────────────────
   Photograph left, the two standards right, centred against it — the only
   place on the page where a column is centred rather than starting at the top,
   because there is nothing above either one to line up with. */
@media (min-width: 768px) {
	.pn-std__criteria { align-items: center; }
	.pn-std__criteria > .pn-std__criteria-figure { grid-column: 1 / span 5; }
	.pn-std__criteria > .pn-std__criteria-body   { grid-column: 7 / span 6; }
}

.pn-std__criteria-media { aspect-ratio: 4 / 3; }

.pn-std__criteria-body {
	display: grid;
	gap: var(--space-7);
}

.pn .pn-std__criterion-title { letter-spacing: var(--ls-h2); }

.pn .pn-std__criterion-text {
	margin-top: var(--space-4);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	max-width: 34em;
}

/* ── §6 · 標示對照 ─────────────────────────────────────────────────────────
   Three columns, then six — six codes never orphan a cell either way. No
   borders and no dividers: the gaps do the separating, and a box round each
   pair would be six boxes saying what the spacing already said. */
.pn-std__legend-grid {
	margin-top: var(--space-6);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: var(--space-3);
}

@media (min-width: 1024px) {
	.pn-std__legend-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.pn-std__legend-cell {
	padding: var(--space-5) var(--space-4);
	text-align: center;
}

.pn .pn-std__legend-code {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	letter-spacing: 0.04em;
	font-weight: var(--weight-regular);
	color: var(--text-primary);
}

.pn .pn-std__legend-name {
	/* base.css's element reset does not cover dt/dd, so the browser's own
	   40px indent on a <dd> is still there — it centred the code over a cell
	   and the name 40px to the right of it. Every dd on this page states its
	   own margin for that reason. */
	margin: var(--space-2) 0 0;
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
}

/* ── §7 · The paired photographs ───────────────────────────────────────────
   Full bleed, and a 2px seam between them. Not a rule — this theme's rules are
   1px and carry meaning — but the join between two pictures, which has to be
   visible or the pair reads as one badly-cropped one. They stack below 768,
   where two 3:2 crops side by side would be 187px wide. */
.pn-std__pair {
	grid-column: full-start / full-end;
	display: grid;
	gap: 2px;
}

@media (min-width: 768px) {
	.pn-std__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pn-std__pair-media { aspect-ratio: 3 / 2; }

/* ── §8 · The impact numbers ───────────────────────────────────────────────
   No rules between them, per the brand guide: a line here would be dividing
   three things the grid has already divided. Renders only when a figure has
   been set — see template-parts/standards/stats.php. */
.pn-std__stats-grid {
	margin-top: var(--space-6);
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 768px) {
	.pn-std__stats-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
		column-gap: var(--grid-gap);
	}
}

.pn .pn-std__stat-figure {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--pn-text-h1);
	/* The figures are Latin digits, so they do not want the 1.2 the tokens give
	   a Chinese display line — 1.1 is the document's own value and it is right
	   for a single row of numerals. */
	line-height: 1.1;
	letter-spacing: var(--ls-h1);
	font-weight: var(--weight-regular);
	color: var(--text-primary);
}

.pn .pn-std__stat-label {
	margin: var(--space-3) 0 0;
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
}

/* ── §9 · The forest band ──────────────────────────────────────────────────
   The one inverse section on this page. Full-bleed and not a card: a dark card
   on a phone is a box in a paper page, which is a different thing to look at
   than a page that changes ground. Same shape as 聯盟行銷's application band.

   base.css paints the ground from the swapped aliases; everything inside
   follows on its own, which is why there is not one colour stated below. */
.pn-std__band {
	grid-column: full-start / full-end;
	background: var(--bg-page);
	color: var(--text-primary);
	padding-block: var(--space-8);
}

@media (min-width: 1024px) { .pn-std__band { padding-block: 104px; } }

.pn-std__band-inner {
	width: 100%;
	max-width: calc(var(--page-max) + 2 * var(--pn-gutter));
	margin-inline: auto;
	padding-inline: var(--pn-gutter);
}

.pn .pn-std__band-lead { margin-top: var(--space-5); }

.pn-std__pillars {
	margin-top: var(--space-7);
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 768px) {
	.pn-std__pillars {
		margin-top: var(--space-8);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		column-gap: var(--grid-gap);
	}
}

.pn .pn-std__pillar-title { letter-spacing: var(--ls-h2); }

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

/* ── §10 · 常見問題 ───────────────────────────────────────────────────────
   The shared accordion, in its own register — a 19px serif question, the way
   合作's five are set. `.pn-disc--section` is about.css's and belongs to folds
   inside a ruled record; these sit under their own heading on a story page. */
.pn .pn-std__faq-title { margin-top: var(--space-5); }

/* The list loses its two outer rules and keeps the two between the rows.

   base.css draws a --line-strong over the first row and a hairline under the
   last, which is right in 合作 where the rows are the whole section and nothing
   else bounds them. Here they are not boundaries: the heading beside them opens
   the section, the closing photograph closes it, and a dark rule over the first
   question read as a third thing starting rather than as the top of a list.
   The hairlines between the rows stay — those separate one question from the
   next, which is the one job a line on this site is kept for.

   Scoped to this page's FAQ, not to the component: 合作 keeps every one of its
   own, the way round 22 left them when 長青生活's folds dropped theirs. 0-5-0,
   so it clears base.css's 0-4-0 first-child and last-child rules. */
.pn .pn-std__faq-body > .pn-disc > .pn-disc-row:first-child { border-top: 0; }
.pn .pn-std__faq-body > .pn-disc > .pn-disc-row:last-child { border-bottom: 0; }

/* ── §11 · The closing beat ────────────────────────────────────────────── */
.pn-std__closing-figure { grid-column: full-start / full-end; }
.pn-std__closing-media { aspect-ratio: 4 / 3; }

@media (min-width: 768px)  { .pn-std__closing-media { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .pn-std__closing-media { aspect-ratio: 2 / 1; } }

.pn-std__closing {
	display: grid;
	justify-items: start;
	gap: var(--space-5);
	padding-block: var(--space-7) var(--space-9);
}

@media (min-width: 1024px) {
	.pn-std__closing { padding-block: var(--space-8) var(--space-10); }
}

.pn .pn-std__closing-text { color: var(--text-secondary); }