/* perennial — 長青會員 / membership
   What the scheme is, how to join, and the answers. 長青生活's geometry, because
   it is the same kind of page: a document with a record in it.

   ── This file is the page's second stylesheet ─────────────────────────────
   about.css loads before it, as a declared dependency (inc/enqueue.php), and
   carries everything the two pages genuinely share:

     .pn-about__block / __block-title / __block-body   the ruled 50/50 block
     .pn-about__qa / __qa-q / __qa-a                   a question inside a fold
     .pn-about__group-doc                              the way to the long version
     .pn-disc--section                                 the folds' own register

   Those are one component doing one job on two pages, and a copy of them under
   a .pn-mem prefix would be a second set of rules to keep in step. The prefix is
   the only thing wrong with them; the round a third page wants a ruled block is
   the round to rename them to something none of the three owns.

   What is below is only what this page has and 長青生活 does not: the opening,
   the benefits list, the numbered methods, and the closing beat.

   ── The scale ─────────────────────────────────────────────────────────────
   32 display · 16 body · 14 footnote — the scale round 22 measured on the
   reference and stated at the top of about.css. Nothing here steps between
   those three.

     32   the headline, and the closing line. Two display moments, one size,
          stepping 22 → 26 → 32 exactly as .pn-about__intro does.
     16   everything else — the eyebrow, the lead, block titles, benefit names
          and bodies, method names, steps, questions, answers.
     14   footnotes only: 完整規則, 完整條款.

   The eyebrow is the one place the design document had to be adapted rather
   than followed. `.pn-eyebrow` is --text-label, 12px, and a fourth size is the
   exact thing the last round took off 長青生活 after measuring the reference at
   two. It is set here in the block titles' own register instead — 16px sans,
   medium, tracked — which is what that round found a label wants in Chinese,
   where there is no uppercase to lean on and the work falls to family, weight,
   colour and 字距. */

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

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

/* ── The opening ──────────────────────────────────────────────────────────
   Eyebrow, headline, one line, and the two ways in. The gap under it is the
   same beat .pn-about__intro leaves: the opening is the page's, the ruled
   blocks are the record. */
.pn-mem__intro {
	margin-bottom: var(--space-9);
}

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

/* The block titles' treatment exactly — this names the page the way 會員權益
   names the block below it. */
.pn .pn-mem__eyebrow {
	margin: 0 0 var(--space-5);
	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);
}
:lang(zh) .pn .pn-mem__eyebrow { text-transform: none; letter-spacing: 0.12em; }

/* The page's one display moment, sharing the closing line's size. Deliberately
   not --pn-text-h2 (36px at 1024), which would out-shout every page on the
   site that opens at 32. No measure cap: at 32px the content column is ~38
   Chinese characters a line, which is the reference's own measure. */
.pn .pn-mem__title {
	margin: 0;
	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-mem__title { font-size: 26px; line-height: 1.68; }
}

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

/* Body size, and the one paragraph that says what joining is. 34em is the
   measure every block of prose on this page and 長青生活 holds to. */
.pn .pn-mem__lead {
	margin: var(--space-5) 0 0;
	max-width: 34em;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

/* ── The two ways in ──────────────────────────────────────────────────────
   A filled button and a quiet link beside it, and since round 27 they point at
   two different doors: the button at /my-account/register/, the link at
   我的帳戶, which is the login form until you are in. They differ in weight
   because they differ in reader — one is the offer, one is for someone who
   already has a key.

   Wrapped rather than in a row below 768: a 375px screen is not wide enough for
   a full-width button and a link beside it, and the link under the button is
   the order they are read in anyway. */
.pn-mem__cta {
	margin-top: var(--space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
}

.pn-mem__cta .pn-btn { width: 100%; }

@media (min-width: 768px) {
	.pn-mem__cta .pn-btn { width: auto; }
}

.pn .pn-mem__login {
	font-size: var(--text-body);
	line-height: var(--lh-body);
}

/* ── 會員權益 ──────────────────────────────────────────────────────────────
   A `<dl>` in two columns: the benefit is the term, what it means is the
   description. Not the record's two fixed 12rem columns — a benefit is a
   heading over a sentence, not a value beside a key, so it takes the width.

   Row-major fill, so the order the eye takes them in is the order they are
   written in. They stack below 768, where two columns would be two 150px
   strips. */
.pn-mem__benefits {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

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

/* The name takes the ink and the weight, the line goes grey — exactly as a
   question and its answer are set inside a fold. Same size, and the whole
   difference is weight and colour. No tracking: 字距 marks a label, and these
   are names, not labels. */
.pn .pn-mem__benefit dt {
	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-mem__benefit dd {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
}

/* ── 怎麼加入 ──────────────────────────────────────────────────────────────
   The two methods side by side, so they read as a choice rather than as a
   sequence — one page, two doors. */
.pn-mem__methods {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

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

.pn .pn-mem__method-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: var(--weight-medium);
	letter-spacing: normal;
	color: var(--text-primary);
}

/* The numbers are the list's own — a counter hung in the margin rather than a
   marker, so the step text sets flush and wraps to its own left edge instead of
   indenting under the digit. `list-style: none` takes the browser's marker off;
   the counter puts ours back, which is also why the element stays an <ol>:
   a numbered list should be a numbered list, and a screen reader says so
   without being told. */
.pn-mem__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pn-step;
	display: grid;
	gap: var(--space-3);
	max-width: 34em;
}

.pn .pn-mem__steps li {
	position: relative;
	margin: 0;
	padding-left: 2em;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	counter-increment: pn-step;
}

/* Grey, not ink: the digit is an index, and it should not read louder than the
   step it points at. */
.pn .pn-mem__steps li::before {
	content: counter(pn-step) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--text-tertiary);
	font-variant-numeric: tabular-nums;
}

/* ── The closing beat ─────────────────────────────────────────────────────
   The page's second display line, the button once more, and the terms. It sits
   below the last ruled block with no rule of its own and steps in off their
   left edge — the one thing on the page that does, exactly as 長青生活's teaser
   does before its form. */
.pn-mem__close {
	padding-block: var(--space-9) 0;
}

@media (min-width: 768px) {
	.pn-mem__close { margin-left: var(--space-7); }
}

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

/* Serif here, where the opening headline is sans: the same size and the same
   step, and the family is what marks this as the page's closing rather than a
   second opening. 長青生活's teaser is set the same way, for the same reason. */
.pn .pn-mem__close-title {
	margin: 0;
	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);
	max-width: 18em;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.pn .pn-mem__close-title { font-size: 26px; line-height: 1.38; }
}

@media (min-width: 1024px) {
	.pn .pn-mem__close-title { font-size: 32px; line-height: 1.35; }
}

/* The footnote register — 14px, the size 完整條款 takes at the foot of a fold. */
.pn .pn-mem__terms {
	margin: var(--space-5) 0 0;
	max-width: 34em;
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-secondary);
}