/* perennial — 期刊
   The journal index and the single article. Two pages, one mechanism.

   Everything here hangs off .pn-lanes: a 12-column grid with two named lanes,
   `full` and `content`. Text stays in content; pictures may leave it. There is
   no second layout system on either page — a feature, a hero and a full-bleed
   image are all the same grid with a different pair of lines.

   Lines: the index has exactly two sets — between 熱門話題 rows, and around
   分類. The article has one, around the credits. Everything else separates on
   space. Hover states change colour; the only hover underline on either page is
   全部文章 / 回到期刊, which is a link to somewhere rather than a link to a thing.

   Blocksy styles bare h1..h6 and p from its own palette, so every heading and
   paragraph here restates family, size, colour and margin rather than
   inheriting. Round 12 and Round 15 both lost an afternoon to that. */

/* ── The lane grid ─────────────────────────────────────────────────────── */
.pn-lanes {
	display: grid;
	column-gap: var(--grid-gap);
	grid-template-columns:
		[full-start] minmax(calc(var(--pn-gutter) - var(--grid-gap)), 1fr)
		[content-start] repeat(12, [col] minmax(0, calc((var(--page-max) - 11 * var(--grid-gap)) / 12)))
		[content-end] minmax(calc(var(--pn-gutter) - var(--grid-gap)), 1fr) [full-end];
}

.pn-lanes > * { grid-column: content-start / content-end; }

.pn-journal__block { padding-block: var(--pn-section-pad); }

/* Headings and paragraphs arrive from Blocksy with its own family and margins. */
.pn-journal h1, .pn-journal h2, .pn-journal h3, .pn-journal p,
.pn-article h1, .pn-article h2, .pn-article h3, .pn-article p {
	margin: 0;
	color: var(--text-primary);
}

.pn-journal a,
.pn-article a { color: inherit; text-decoration: none; }

/* ── 1 · 報頭 ──────────────────────────────────────────────────────────── */
.pn-jmast__inner { display: grid; gap: var(--space-4); }

.pn-jmast__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
}

.pn-jmast__name {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	font-size: var(--pn-text-h2);
	line-height: 1;
	letter-spacing: 0.1em;
}

.pn-jmast__issue,
.pn-jcats__label {
	font-family: var(--font-sans);
	font-size: var(--text-small);
	letter-spacing: 0.16em;
	color: var(--text-secondary);
}

.pn-jmast__purpose {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	max-width: 32em;
}

/* ── 2 · 熱門話題 ──────────────────────────────────────────────────────── */
.pn-jpop { row-gap: var(--space-7); }

.pn-jpop__title {
	font-family: var(--font-sans);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--ls-label);
	line-height: var(--lh-label);
	color: var(--text-secondary);
	margin-bottom: var(--space-4);
}

/* One row of the ranking. The hairline sits between rows only: a rule above the
   first and below the last would draw a box, and the block is a list, not one. */
.pn-jrow {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: var(--space-1);
	row-gap: 2px;
	align-items: baseline;
	padding-block: var(--space-4);
}

.pn-jrow + .pn-jrow { border-top: 1px solid var(--paper-300); }

.pn-jrow__n {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	letter-spacing: 0.04em;
	color: var(--text-tertiary);
	font-variant-numeric: tabular-nums;
}

.pn-jrow__t {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: 1.45;
	letter-spacing: var(--ls-h3);
	line-break: strict;
	transition: color var(--dur-fast) var(--ease-out);
}

.pn-jrow__c {
	grid-column: 2;
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	letter-spacing: 0.16em;
	color: var(--text-tertiary);
}

.pn-jrow:hover .pn-jrow__t,
.pn-jrow:focus-visible .pn-jrow__t { color: var(--text-link); }

.pn-jcover__text { display: grid; gap: var(--space-3); margin-top: var(--space-5); }

.pn-jcover__name {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
}

.pn-jcover__name a { transition: color var(--dur-fast) var(--ease-out); }
.pn-jcover__name a:hover,
.pn-jcover__name a:focus-visible { color: var(--text-link); }

.pn-jcover__dek {
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	color: var(--text-secondary);
	max-width: 30em;
}

.pn-jpop__cover .pn-media { aspect-ratio: 4 / 5; }

@media (min-width: 768px) {
	.pn-jpop__list { grid-column: content-start / span 5; }
	.pn-jpop__cover { grid-column: col 7 / content-end; }
}

/* ── 3 · 分類 ──────────────────────────────────────────────────────────── */
.pn-jcats__rail {
	display: flex;
	align-items: baseline;
	gap: var(--space-3) var(--space-6);
	padding-block: var(--space-5);
	border-top: 1px solid var(--paper-300);
	border-bottom: 1px solid var(--paper-300);
}

.pn-jcats__scroll {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	min-width: 0;
	flex: 1;
}

.pn-jcats__link {
	font-size: var(--text-body);
	letter-spacing: 0.06em;
	transition: color var(--dur-fast) var(--ease-out);
}

.pn-jcats__link:hover,
.pn-jcats__link:focus-visible { color: var(--text-link); }

.pn-jcats__link.is-empty { color: var(--text-tertiary); }

.pn-jcats__count {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0;
	color: var(--text-tertiary);
	vertical-align: super;
	margin-left: 3px;
}

/* Below 1024 the rail stops wrapping and scrolls. It bleeds past the right
   margin so the overflow is visible rather than implied — the rules above and
   below stop at the margin while the categories keep going. */
@media (max-width: 1023px) {
	.pn-jcats__rail { align-items: center; }
	.pn-jcats__scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--paper-300) transparent;
		margin-right: calc(-1 * var(--pn-gutter));
		padding-right: var(--pn-gutter);
		padding-bottom: var(--space-2);
	}
	.pn-jcats__link { white-space: nowrap; }
}

/* ── 4 · 特寫 ──────────────────────────────────────────────────────────── */
.pn-jfeat { row-gap: var(--space-5); align-items: center; }

.pn-jfeat__text {
	display: grid;
	gap: var(--space-3);
	align-content: center;
	max-width: 34em;
}

.pn-jfeat__name {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
}

.pn-jfeat__name a { transition: color var(--dur-fast) var(--ease-out); }
.pn-jfeat__name a:hover,
.pn-jfeat__name a:focus-visible { color: var(--text-link); }

.pn-jfeat__dek {
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	color: var(--text-secondary);
}

.pn-jfeat__date {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	letter-spacing: 0.14em;
	color: var(--text-tertiary);
}

.pn-jfeat .pn-media { aspect-ratio: 4 / 5; }
.pn-jfeat--wide .pn-media { aspect-ratio: 3 / 2; }

@media (min-width: 768px) {
	.pn-jfeat--right .pn-jfeat__media { grid-column: col 7 / content-end; }
	.pn-jfeat--right .pn-jfeat__text { grid-column: content-start / span 5; grid-row: 1; }

	.pn-jfeat--left .pn-jfeat__media { grid-column: content-start / span 6; }
	.pn-jfeat--left .pn-jfeat__text { grid-column: col 8 / content-end; }

	.pn-jfeat--wide { row-gap: var(--space-6); }
	.pn-jfeat--wide .pn-jfeat__media { grid-column: full-start / full-end; }
	.pn-jfeat--wide .pn-jfeat__text { grid-column: content-start / span 7; }
	.pn-jfeat--wide .pn-media { aspect-ratio: 21 / 9; }
}

/* ── 5 · 其他文章 ──────────────────────────────────────────────────────── */
.pn-jrest__head,
.pn-arel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.pn-jrest__title,
.pn-arel__title {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}

/* The one hover underline on either page. .pn-link fades on hover by default —
   restated here, opacity off and the line on, because these two go somewhere
   rather than to a thing. */
.pn .pn-jrest__more,
.pn .pn-arel__more {
	font-family: var(--font-sans);
	font-size: var(--text-small);
	letter-spacing: 0.1em;
	color: var(--text-secondary);
	white-space: nowrap;
}

.pn .pn-jrest__more:hover,
.pn .pn-jrest__more:focus-visible,
.pn .pn-arel__more:hover,
.pn .pn-arel__more:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* No rules between these rows. After the features the page needs somewhere to
   land, and the line spacing is enough to hold six titles apart. */
.pn-jidx {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-5);
	row-gap: 2px;
	padding-block: var(--space-3);
}

.pn-jidx__t {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: 1.45;
	letter-spacing: var(--ls-h3);
	line-break: strict;
	transition: color var(--dur-fast) var(--ease-out);
}

.pn-jidx:hover .pn-jidx__t,
.pn-jidx:focus-visible .pn-jidx__t { color: var(--text-link); }

.pn-jidx__m {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	letter-spacing: 0.14em;
	color: var(--text-tertiary);
	align-self: center;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.pn-jidx { grid-template-columns: minmax(0, 1fr); }
	.pn-jidx__m { align-self: start; }
}

/* ── Empty journal ─────────────────────────────────────────────────────── */
.pn-jempty__inner { display: grid; gap: var(--space-4); justify-items: start; }
.pn-jempty__line {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: var(--lh-h3);
	color: var(--text-secondary);
}

/* ══ THE ARTICLE ═══════════════════════════════════════════════════════════ */

/* The prose column is offset right, which leaves the left margin empty for a
   picture to sit in. `overflow-x: clip` with y left visible contains the
   full-bleed images without creating a scroll container — the combination
   matters, because `hidden` here would also break any sticky descendant. */
.pn-article {
	overflow-x: clip;
	overflow-y: visible;
}

/* ── 6 · 分欄標題 ──────────────────────────────────────────────────────── */
.pn-ahero { row-gap: var(--space-6); align-items: start; }

.pn-ahero__text { display: grid; gap: var(--space-5); align-content: start; }

.pn-ahero__title {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	font-size: var(--pn-text-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
	text-wrap: balance;
	line-break: strict;
}

.pn-ahero__dek {
	font-size: var(--pn-text-lead);
	line-height: var(--lh-lead);
	color: var(--text-secondary);
	max-width: 26em;
}

/* On a phone the opening photograph takes the whole width. It is the one image
   on the article that is worth the edge-to-edge, and the proof opens this way. */
.pn-ahero__media { grid-column: full-start / full-end; }
.pn-ahero .pn-media { aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
	.pn-ahero__text {
		grid-column: content-start / span 5;
		padding-top: var(--space-5);
	}
	/* The picture leaves the grid on the right. This asymmetry is what makes the
	   page read as a spread, and it is why the title can stay at h1 rather than
	   growing to carry the opening on its own. */
	.pn-ahero__media { grid-column: col 7 / full-end; }
	.pn-ahero .pn-media { aspect-ratio: 4 / 5; }
}

/* ── 7 · 作者列 ────────────────────────────────────────────────────────── */
.pn-acredits__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-6);
	padding-block: var(--space-4);
	border-top: 1px solid var(--paper-300);
	border-bottom: 1px solid var(--paper-300);
}

.pn-acredits__item {
	font-family: var(--font-sans);
	font-size: var(--text-small);
	letter-spacing: 0.1em;
	color: var(--text-tertiary);
}

.pn-acredits__label { margin-right: var(--space-2); }
.pn-acredits__value { color: var(--text-primary); }
.pn-acredits__date { margin-left: auto; }

/* ── 8–12 · The writing ────────────────────────────────────────────────── */
.pn-article__body { padding-block: var(--pn-section-pad); }

.pn-article__prose { grid-column: content-start / content-end; }

/* The prose stays on the full content lane until 1024. Offsetting it at 768
   bought an empty margin nothing could sit in — the aside does not float until
   1024 either — and paid for it with a 23-character line. */
@media (min-width: 1024px) {
	.pn-article__prose { grid-column: col 6 / content-end; }
}

/* Running text is serif here and sans in the shop. That is deliberate: 商店
   explains, 期刊 is read. One declaration reverts it. */
.pn-article__prose p {
	font-family: var(--font-serif);
	font-size: calc(var(--text-body) + 1px);
	line-height: 2;
	letter-spacing: 0.02em;
	color: var(--text-primary);
	max-width: 34em;
	margin-bottom: 1.6em;
	line-break: strict;
	hanging-punctuation: allow-end;
}

.pn-article__prose > *:last-child { margin-bottom: 0; }

.pn-article__prose h2,
.pn-article__prose h3 {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	max-width: 24em;
	margin-top: 2em;
	margin-bottom: 0.8em;
	text-wrap: balance;
}

.pn-article__prose h2 { font-size: var(--pn-text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.pn-article__prose h3 { font-size: var(--pn-text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

.pn-article__prose a {
	color: var(--text-link);
	transition: color var(--dur-fast) var(--ease-out);
}
.pn-article__prose a:hover,
.pn-article__prose a:focus-visible { color: var(--text-primary); }

.pn-article__prose img { max-width: 100%; height: auto; display: block; }
.pn-article__prose figure { margin: 2.4em 0; }

.pn-article__prose figcaption,
.pn-article__prose .wp-element-caption {
	font-family: var(--font-sans);
	font-size: var(--text-small);
	line-height: var(--lh-small);
	color: var(--text-tertiary);
	margin-top: var(--space-3);
	max-width: 34em;
}

/* 導言 — the paragraph style, reused as the pull quote. Kinfolk does the same
   thing, and it is right: a dek and a pulled line are the same voice at the
   same size, one at the top and one in the middle. */
.pn-article__prose .is-style-pn-lede {
	font-family: var(--font-serif);
	font-size: var(--pn-text-h3);
	line-height: 1.75;
	letter-spacing: 0.03em;
	color: var(--text-primary);
	max-width: 22em;
	margin-block: 1.6em 2em;
}

.pn-article__prose blockquote {
	margin: 2.4em 0;
	padding: 0;
	border: 0;
}

.pn-article__prose blockquote p {
	font-size: var(--pn-text-h3);
	line-height: 1.75;
	letter-spacing: 0.03em;
	max-width: 22em;
}

/* The prose is seven of the twelve columns, so one column is measurable from
   inside it: (100% - 6 gaps) / 7. Both modules below are placed with that
   figure rather than with viewport maths — `100vw` centred on `50%` only works
   from a centred column, and this one is offset five columns to the right, which
   put the first full-bleed 190px off the page. */
@media (min-width: 1024px) {
	.pn-article__prose { --pn-col: calc((100% - 6 * var(--grid-gap)) / 7); }

	/* 跨欄 — back out to both page margins: twelve columns and eleven gaps,
	   starting five columns and five gaps to the left of the text. */
	.pn-article__prose .is-style-pn-full {
		width: calc(12 * var(--pn-col) + 11 * var(--grid-gap));
		max-width: none;
		margin-left: calc(-1 * (5 * var(--pn-col) + 5 * var(--grid-gap)));
		margin-block: 3em;
	}
	.pn-article__prose .is-style-pn-full img { width: 100%; }
	.pn-article__prose .is-style-pn-full figcaption { max-width: 34em; }
}

.pn-article__prose .is-style-pn-full { margin-block: 2.4em; }

/* 邊欄圖 — the picture that lives in the empty left margin.
   Five columns wide and pulled five columns plus a gap to the left, so its left
   edge lands on content-start and its right edge butts against the text. The
   negative margin cancels its own width, which means it reserves no space in
   the text column at all: the lines beside it keep their full measure instead of
   wrapping short. Under 1024 there is no margin to sit in, so it becomes an
   ordinary image. */
@media (min-width: 1024px) {
	.pn-article__prose .is-style-pn-aside {
		float: left;
		width: calc(5 * var(--pn-col) + 4 * var(--grid-gap));
		margin: 0.4em var(--grid-gap) 1.6em calc(-1 * (5 * var(--pn-col) + 5 * var(--grid-gap)));
	}
	.pn-article__prose .is-style-pn-aside figcaption { max-width: none; }
}

/* ── 13 · 延伸閱讀 ─────────────────────────────────────────────────────── */
.pn-arel__inner { border-top: 0; }

.pn-arel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--grid-gap);
	row-gap: var(--space-7);
}

.pn-acard .pn-media { aspect-ratio: 3 / 4; margin-bottom: var(--space-3); }

.pn-acard__kicker {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	letter-spacing: 0.16em;
	color: var(--text-tertiary);
	margin-bottom: var(--space-2);
}

.pn-acard__name {
	font-family: var(--font-serif);
	font-weight: var(--weight-medium);
	font-size: var(--pn-text-h3);
	line-height: 1.45;
	letter-spacing: var(--ls-h3);
	text-wrap: balance;
}

.pn-acard__name a { transition: color var(--dur-fast) var(--ease-out); }
.pn-acard__name a:hover,
.pn-acard__name a:focus-visible { color: var(--text-link); }

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

@media (prefers-reduced-motion: reduce) {
	.pn-jrow__t,
	.pn-jidx__t,
	.pn-jcats__link,
	.pn-jfeat__name a,
	.pn-jcover__name a,
	.pn-acard__name a,
	.pn-article__prose a { transition: none; }
}