/*
Theme Name: Kungfu 2026
Theme URI: https://novel.369usa.com/
Author: Townsquare Interactive
Description: Serial fiction theme for novel.369usa.com. Chapters are posts, arcs are tags, and chapters are numbered continuously across the whole run.
Version: 2.27.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kungfu_2026
*/

/*
 * Light only, on purpose. The palette and the ruled chapter table follow
 * fk.369usa.com, so there is no dark variant to switch to: a
 * prefers-color-scheme block here would only produce a second, unintended
 * design.
 *
 * Type scales with the viewport rather than stepping at breakpoints. clamp()
 * means a phone gets comfortable sizes and a desktop gets a proper masthead
 * without a stack of media queries drifting out of step with each other.
 */
:root {
	--ink: #2f3338;
	--ink-strong: #1a2530;
	--ink-soft: #5c6470;
	--ink-faint: #8b929c;
	--link: #1a2530;
	--paper: #fff;
	--rule: #d9dce0;
	--rule-soft: #ebedef;
	--shade: #f7f8f9;
	--accent: #8c2f22;
	/* The copy button's green, taken from fk.369usa.com. It is the one colour
	   in the design that is not from this theme's own palette. */
	--go: #1c7430;
	--go-dark: #155d27;
	--go-darker: #0f4e1b;

	/* Page gutter and the two widths the layout uses. */
	--gutter: clamp(1rem, 0.5rem + 2vw, 1.75rem);
	--measure: 62rem;
	--measure-text: 36rem;

	--font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
	/* The masthead. Same family as the body, separated by weight and size
	   rather than by a second personality. */
	--font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
	--font-nav: "Coustard", Georgia, serif;
	--font-han: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei";
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Stops iOS inflating text when the phone is turned sideways. */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/*
 * No underlines anywhere, by preference: a link is marked by colour, and hover
 * changes that colour. Keyboard users still get the focus ring below, which is
 * the one affordance that is not colour.
 */
a {
	color: var(--link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--accent);
}

/* One visible focus ring for everything, since the design has no other. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ink-strong);
	font-weight: 600;
	line-height: 1.3;
	/* Progressive: keeps a two-line heading from leaving one word alone. */
	text-wrap: balance;
}

::selection {
	background: #f2e3d9;
	color: var(--ink-strong);
}

/* Visible to a screen reader, not to the eye — WordPress' own convention. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Masthead ---- */

.masthead {
	position: relative;
	border-bottom: 1px solid var(--rule-soft);
	background: var(--paper);
}

.masthead__inner {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(0.7rem, 0.55rem + 0.6vw, 1rem) var(--gutter) clamp(1.1rem, 0.85rem + 1vw, 1.5rem);
}

/*
 * A plain wordmark, ranged left: body weight, barely above body size. It reads
 * as a label for the page rather than a banner across it, which is what leaves
 * the chapter title below it as the largest thing on the page.
 */
.site-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	/* A long site name must fold rather than push the page sideways. */
	overflow-wrap: break-word;
}

.site-title a {
	color: var(--ink-strong);
}

.site-tagline {
	margin: 0.45rem 0 0;
	color: var(--ink-faint);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ---- Language switcher ---- */

/*
 * Its own row at the top of the masthead container, ranged right. The bottom
 * margin is the point of the row: sharing a line with the site name put this
 * tap target next to the home link, which is a misclick on a phone.
 */
.lang-switch {
	margin: 0 0 clamp(0.8rem, 0.6rem + 1vw, 1.15rem);
	font-size: 0.78rem;
	line-height: 1.4;
	text-align: right;
}

.lang-switch__link {
	/* inline-block so the padding gives it a real tap target. */
	display: inline-block;
	padding: 0.2rem 0;
	color: var(--ink-faint);
	letter-spacing: 0.02em;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
	color: var(--accent);
}

/* ---- Menu drawer ---- */

.masthead__tools {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.8rem;
}

.menu-toggle,
.menu-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink-strong);
	cursor: pointer;
}

.menu-toggle[hidden] {
	display: none;
}

.menu-toggle:hover,
.menu-drawer__close:hover {
	background: var(--shade);
	border-color: var(--ink-soft);
}

html.menu-drawer-open {
	overflow: hidden;
}

.menu-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(85vw, 22rem);
	max-width: none;
	height: 100%;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 1.25rem;
	border: 0;
	border-right: 1px solid var(--rule);
	background: var(--paper);
	color: var(--ink-strong);
	box-shadow: 8px 0 32px rgb(0 0 0 / 12%);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	transition: transform 220ms ease;
}

.menu-drawer.is-open {
	transform: translateX(0);
}

.menu-drawer::backdrop {
	background: rgb(15 23 42 / 45%);
}

.menu-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rule);
}

.menu-drawer__head h2 {
	margin: 0;
	font-size: 1.2rem;
}

.menu-drawer__links {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.menu-drawer__links a {
	display: block;
	padding: 0.9rem 0.75rem;
	border-radius: 4px;
	font-family: var(--font-nav);
	overflow-wrap: anywhere;
}

.menu-drawer__links a:hover,
.menu-drawer__links a:focus-visible,
.menu-drawer__links .current-menu-item > a,
.menu-drawer__links .current-menu-ancestor > a {
	background: var(--shade);
	color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
	.menu-drawer {
		transition: none;
	}
}

/* ---- Navigation ---- */

.site-nav {
	border-bottom: 1px solid var(--rule-soft);
}

.site-nav__inner {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding: 0.85rem 1rem;
	color: var(--ink-soft);
	font-family: var(--font-nav);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--ink-strong);
}

/* ---- Layout ---- */

.site {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(2rem, 1.25rem + 3vw, 3.25rem) var(--gutter) clamp(3rem, 2rem + 4vw, 4.5rem);
}

.empty {
	color: var(--ink-faint);
	font-style: italic;
}

/* ---- Archive header ---- */

.archive-head {
	margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.archive-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.archive-meta {
	margin: 0.55rem 0 0;
	color: var(--ink-faint);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

.archive-meta a {
	color: inherit;
}

.archive-desc {
	margin: 0.9rem 0 0;
	max-width: var(--measure-text);
	color: var(--ink-soft);
}

/* ---- Chapter table ---- */

/*
 * Ruled, not boxed. The old full grid drew a border on all four sides of every
 * cell, which reads as a spreadsheet; a table of contents wants one horizontal
 * rule per row and nothing else.
 */
.chapter-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.chapter-table thead th {
	padding: 0 0.9rem 0.7rem;
	border-bottom: 1px solid var(--rule);
	color: var(--ink-faint);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.chapter-table td {
	padding: 0.85rem 0.9rem;
	border-bottom: 1px solid var(--rule-soft);
	text-align: left;
	vertical-align: baseline;
}

.chapter-table tbody tr:hover {
	background: var(--shade);
}

.chapter-table__number {
	width: 4.5rem;
	white-space: nowrap;
	color: var(--ink-faint);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.chapter-table__title {
	font-weight: 500;
}

.chapter-table__title a {
	color: var(--ink-strong);
}

.chapter-table__title a:hover {
	color: var(--accent);
}

.chapter-table__arc {
	width: 14.5rem;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.chapter-table__arc a {
	color: inherit;
}

.chapter-table__arc a:hover {
	color: var(--accent);
}

/*
 * Narrow screens: three columns in 320px gives every title a two-word line, so
 * the row becomes a small block instead — number and title on one line, arc
 * underneath. Grid rather than display:block on the cells, because that keeps
 * the number beside the title rather than above it.
 */
@media (max-width: 40rem) {
	/*
	 * The table has to stop being a table, not just its rows. Leaving
	 * display:table on the element while the rows are grids means the table
	 * still sizes itself to its widest cell, which pushes the whole page wider
	 * than the phone and clips the masthead along with it.
	 */
	.chapter-table,
	.chapter-table tbody {
		display: block;
		width: 100%;
	}

	.chapter-table thead {
		/* The columns are labelled by position now, not by a header row. */
		display: none;
	}

	.chapter-table tbody tr {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.75rem;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--rule-soft);
	}

	.chapter-table tbody tr:hover {
		background: none;
	}

	.chapter-table td {
		padding: 0;
		border: 0;
	}

	.chapter-table__number {
		width: auto;
		min-width: 1.75rem;
	}

	.chapter-table__arc {
		width: auto;
		grid-column: 2;
		margin-top: 0.25rem;
		color: var(--ink-faint);
		font-size: 0.8rem;
	}
}

/* ---- One chapter ---- */

.chapter__head {
	max-width: var(--measure-text);
	margin: 0 0 clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule-soft);
}

.chapter__label {
	margin: 0 0 0.5rem;
	color: var(--ink-faint);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.chapter__label a {
	color: inherit;
}

.chapter__label a:hover {
	color: var(--accent);
}

/*
 * The way to the former version of a remastered chapter, or back from it.
 * Floated to the right of the label line so it costs no height, and set
 * smaller and fainter than the label: it is for the few who want it.
 */
.chapter__version {
	float: right;
	margin-left: 1rem;
	color: var(--ink-faint);
	font-size: 0.72rem;
	line-height: 1.6;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.chapter__version:hover {
	color: var(--accent);
}

.chapter__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.25rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
}

/* Top row: former-version link left, revision information right. */
.chapter__head-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	min-height: 2.6rem;
	margin: 0 0 calc(0.75rem + 25px);
}

.chapter__head-top .chapter__version {
	float: none;
	margin-left: 0;
}

.chapter__revision-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	margin-left: auto;
}

.chapter__compare {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 30px;
	padding: 0.25rem 0.55rem;
	border: 1px solid #111;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-size: 0.72rem;
	line-height: 1.2;
}

.chapter__compare:hover,
.chapter__compare:focus-visible {
	border-color: #000;
	background: #000;
	color: #fff;
}

/* ---- Front-end revision comparison ---- */

.revision-compare {
	max-width: var(--measure);
}

.revision-compare__head {
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--rule-soft);
}

.revision-compare__back {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.revision-compare__eyebrow {
	margin: 0 0 0.4rem;
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.revision-compare__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.25rem);
}

.revision-compare__post-id {
	margin: 0.55rem 0 0;
	color: var(--ink-faint);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.75rem;
}

.revision-compare__summary {
	max-width: var(--measure-text);
	margin: 0.75rem 0 0;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.revision-compare__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
}

.revision-compare__filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 36px;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink-soft);
	font-size: 0.78rem;
}

.revision-compare__filter:hover,
.revision-compare__filter:focus-visible,
.revision-compare__filter.is-current {
	border-color: var(--ink-strong);
	color: var(--ink-strong);
}

.revision-compare__filter.is-current {
	background: var(--shade);
	font-weight: 600;
}

.revision-compare__filter-mark {
	display: inline-block;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
}

.revision-compare__filter--both .revision-compare__filter-mark {
	background: linear-gradient(90deg, #b42318 0 50%, #175cd3 50% 100%);
}

.revision-compare__filter--deleted .revision-compare__filter-mark {
	background: #b42318;
}

.revision-compare__filter--added .revision-compare__filter-mark {
	background: #175cd3;
}

.revision-compare__filter--plain .revision-compare__filter-mark {
	background: var(--ink-soft);
}

.revision-compare__section + .revision-compare__section {
	margin-top: 2.5rem;
}

.revision-compare__section h2 {
	margin: 0 0 0.8rem;
	font-size: 1.1rem;
}

.revision-compare__diff {
	overflow-x: auto;
	border: 1px solid var(--rule);
	border-radius: 4px;
}

.revision-compare__diff .diff {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.82rem;
	line-height: 1.55;
}

.revision-compare__diff .diff th {
	display: none;
}

.revision-compare__diff .diff td {
	width: auto;
	padding: 0.55rem 0.85rem;
	border: 0;
	border-bottom: 1px solid var(--rule-soft);
	vertical-align: top;
	white-space: pre-wrap;
	word-break: break-word;
}

.revision-compare__diff .diff-changedline,
.revision-compare__diff .diff-context {
	color: var(--ink-strong);
	text-decoration: none;
}

.revision-compare__diff .diff td.diff-line-numbers {
	width: 4.75rem;
	padding: 0.55rem 0.45rem;
	background: var(--shade);
	color: var(--ink-faint);
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	text-decoration: none;
	white-space: nowrap;
}

.diff-line-number {
	display: inline-block;
	width: 1.75rem;
}

.diff-line-number--old {
	color: #b42318;
}

.diff-line-number--new {
	color: #175cd3;
}

.revision-compare__diff .diff tr:last-child td {
	border-bottom: 0;
}

.revision-compare__diff .diff-deletedline {
	background: transparent;
	color: #b42318;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.revision-compare__diff .diff-addedline {
	background: transparent;
	color: #175cd3;
}

.revision-compare__diff del,
.revision-compare__diff ins {
	padding: 0 0.12em;
	border-radius: 3px;
	font-weight: 700;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-decoration: none;
}

.revision-compare__diff del {
	background: #fee2e2;
	color: #991b1b;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.revision-compare__diff ins {
	background: #dbeafe;
	color: #1e40af;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.15em;
}

.revision-compare--changes-deleted .diff-row--added,
.revision-compare--changes-deleted .diff-row--changed ins,
.revision-compare--changes-added .diff-row--deleted,
.revision-compare--changes-added .diff-row--changed del,
.revision-compare--changes-plain .diff-row--deleted,
.revision-compare--changes-plain .diff-row--changed del {
	display: none;
}

.revision-compare--changes-deleted .diff-line-number--new,
.revision-compare--changes-added .diff-line-number--old,
.revision-compare--changes-plain .diff-line-number--old {
	visibility: hidden;
}

.revision-compare--changes-plain .diff-addedline,
.revision-compare--changes-plain ins {
	background: transparent;
	color: var(--ink-strong);
	font-weight: inherit;
	text-decoration: none;
}

.revision-compare__unchanged {
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--rule-soft);
	background: var(--shade);
	color: var(--ink-soft);
	font-size: 0.88rem;
}

@media (max-width: 40rem) {
	.revision-compare__head {
		margin-bottom: 1.5rem;
	}

	.revision-compare__filters {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.35rem;
		margin-bottom: 1.5rem;
	}

	.revision-compare__filter {
		min-width: 0;
		padding-inline: 0.4rem;
	}

	.revision-compare__diff {
		border-radius: 3px;
	}

	.revision-compare__diff .diff {
		font-size: 0.76rem;
		line-height: 1.5;
	}

	.revision-compare__diff .diff td {
		padding: 0.65rem;
	}

	.revision-compare__diff .diff td.diff-line-numbers {
		width: 3.8rem;
		padding: 0.65rem 0.3rem;
		font-size: 0.62rem;
	}

	.diff-line-number {
		width: 1.4rem;
	}
}

/* ---- Chapter tools ---- */

/*
 * One row over the reading column, both ranged left where the prose starts.
 * Same height, so the row reads as one strip rather than two unrelated
 * objects.
 *
 * nowrap on purpose. A 28px button and the count come to well under half the
 * narrowest phone, so letting them wrap would only ever produce a stacked row
 * nobody asked for.
 */
.chapter-tools {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.6rem;
	max-width: var(--measure-text);
	margin: 0 0 1.75rem;
}

/* Button-shaped and flat: the outline says "label", not "press me". */
.chapter-tools__count {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	margin: 0;
	padding: 0 0.65rem;
	/* Barely there: the outline is only to give the count the button's shape. */
	border: 1px solid var(--rule-soft);
	border-radius: 4px;
	background: none;
	color: var(--ink-faint);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Icon only, so the name lives in aria-label and title rather than in text. */
.copy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Padding rather than a fixed width, so the icon sits in a bit of room. */
	min-width: 28px;
	height: 28px;
	padding: 0 0.8rem;
	border: 1px solid var(--go);
	border-radius: 4px;
	background: var(--go);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.copy-button__icon {
	display: block;
}

/* The tick replaces the clipboard while .is-copied is on the button. */
.copy-button__icon--done,
.copy-button.is-copied .copy-button__icon--copy {
	display: none;
}

.copy-button.is-copied .copy-button__icon--done {
	display: block;
}

.copy-button:hover {
	border-color: var(--go-darker);
	background: var(--go-dark);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.copy-button.is-copied {
	border-color: var(--go-darker);
	background: var(--go-darker);
}

/* The live region: announced, never shown, since the button says it too. */
.chapter-tools__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.admin-post-id,
.character-entry__head .admin-post-id {
	margin: 0.65rem 0 0;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 400;
}

.admin-post-id span {
	user-select: all;
}

/* ---- Character wiki ---- */

.character-wiki {
	max-width: 46rem;
	margin-inline: auto;
}

.character-entry__head {
	margin-bottom: 2rem;
}

.character-entry__head h1 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
	overflow-wrap: anywhere;
}

.character-entry__head > p,
.character-entry__summary,
.character-entry__edit {
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.character-entry__portrait {
	margin: 0 0 2rem;
}

.character-entry__portrait img {
	display: block;
	width: auto;
	max-height: 38rem;
	object-fit: contain;
}

.character-entry__body {
	max-width: none;
	overflow-wrap: anywhere;
}

.character-entry__body h2,
.character-entry__body h3 {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--rule);
	scroll-margin-top: 2rem;
}

.character-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.character-card {
	min-width: 0;
	padding: 1.25rem;
	border: 1px solid var(--rule);
	overflow-wrap: anywhere;
}

.character-card__link {
	display: block;
}

.character-card__portrait {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	background: var(--shade);
}

.character-card h2 {
	margin: 0.75rem 0 0;
	font-size: 1.25rem;
}

.character-card p {
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

/* ---- Chapter body ---- */

/*
 * The measure is the point of this block. Chapter text at the page's full
 * 62rem would run to well over a hundred characters a line, which is where
 * the eye starts losing its place on the way back.
 */
.chapter-body {
	max-width: var(--measure-text);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	line-height: 1.8;
}

.chapter-body > * {
	margin-top: 0;
	margin-bottom: 0.9em;
}

.chapter-body h1,
.chapter-body h2,
.chapter-body h3,
.chapter-body h4,
.chapter-body h5,
.chapter-body h6 {
	margin-top: 1.8em;
	margin-bottom: 0.65em;
	font-weight: 600;
	line-height: 1.35;
}

.chapter-body > :first-child {
	margin-top: 0;
}

.chapter-body > :last-child {
	margin-bottom: 0;
}

.chapter-body h1 {
	font-size: 1.65em;
}

.chapter-body h2 {
	font-size: 1.35em;
}

.chapter-body h3 {
	font-size: 1.15em;
}

.chapter-body h4 {
	font-size: 1em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.chapter-body h5 {
	font-size: 0.95em;
}

.chapter-body h6 {
	font-size: 0.875em;
}

.chapter-body blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--rule);
	color: var(--ink-soft);
	font-style: italic;
}

.chapter-body ul,
.chapter-body ol {
	padding-left: 1.4rem;
}

.chapter-body li + li {
	margin-top: 0.4em;
}

.chapter-body hr {
	max-width: 6rem;
	margin: 2.5em auto;
	border: 0;
	border-top: 1px solid var(--rule);
}

.chapter-body figure,
.chapter-body img {
	display: block;
}

/* A wide table in the body scrolls itself rather than the page. */
.chapter-body .wp-block-table {
	overflow-x: auto;
}

/* ---- Next chapter ---- */

.chapter-next {
	max-width: var(--measure-text);
	margin: clamp(2.25rem, 1.75rem + 2vw, 3.25rem) 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule-soft);
}

.chapter-next__link {
	display: inline-flex;
	flex-direction: column;
	gap: 0.3rem;
}

.chapter-next__label {
	color: var(--ink-faint);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.chapter-next__title {
	color: var(--ink-strong);
	font-size: 1.05rem;
	font-weight: 500;
}

/* Decorative, so it lives in CSS rather than in the translated markup. */
.chapter-next__title::after {
	content: " \2192";
}

.chapter-next__link:hover .chapter-next__title,
.chapter-next__link:focus-visible .chapter-next__title {
	color: var(--accent);
}

/* ---- Comments ---- */

/*
 * Set to the reading measure, not the page, so the thread lines up under the
 * chapter it belongs to instead of running out past both sides of it.
 */
.comments {
	max-width: var(--measure-text);
	margin: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule-soft);
}

/*
 * Same small-caps label the rest of the chapter chrome uses, so the heading
 * reads as a divider between the chapter and the replies rather than as
 * another heading inside the story.
 */
.comments__title {
	margin: 0 0 1.5rem;
	color: var(--ink-faint);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.comments__list,
.comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comments__list > li + li {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule-soft);
}

/*
 * A reply is indented and hung off a rule rather than boxed: threading has to
 * be legible at a glance, and on a phone a box inside a box inside a box runs
 * out of width by the third level. The indent is small for the same reason —
 * five levels of it still leave a readable line.
 */
.comments__list .children {
	margin-top: 1.25rem;
	padding-left: clamp(0.85rem, 0.5rem + 1.5vw, 1.5rem);
	border-left: 1px solid var(--rule-soft);
}

.comments__list .children > li + li {
	margin-top: 1.25rem;
}

.comment__body {
	font-size: 0.95rem;
}

.comment__head {
	margin-bottom: 0.5rem;
}

.comment__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
}

.comment__author {
	color: var(--ink-strong);
	font-size: 0.9rem;
	font-weight: 600;
}

.comment__date {
	color: var(--ink-faint);
	font-size: 0.74rem;
	letter-spacing: 0.02em;
}

/* The author's own copy of a comment nobody else can see yet. */
.comment__pending {
	margin: 0 0 0.5rem;
	color: var(--accent);
	font-size: 0.78rem;
}

.comment__text > * {
	margin-top: 0;
	margin-bottom: 0.8em;
}

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

.comment__text blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: 1rem;
	border-left: 2px solid var(--rule);
	color: var(--ink-soft);
}

/* Links inside someone else's text are marked, unlike the rest of the site:
   here the surrounding words are also not ours, so colour alone is thin. */
.comment__text a {
	color: var(--accent);
	text-decoration: underline;
}

.comment__foot {
	display: flex;
	gap: 0.9rem;
	margin-top: 0.6rem;
}

.comment__reply a,
.comment__edit a {
	color: var(--ink-faint);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.comment__reply a:hover,
.comment__reply a:focus-visible,
.comment__edit a:hover,
.comment__edit a:focus-visible {
	color: var(--accent);
}

/* Core's own markup for a pingback, which the walker draws rather than the
   theme — styled to sit quietly under the real replies. */
.comments__list .pingback p,
.comments__list .trackback p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.comment-navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.75rem;
	font-size: 0.8rem;
}

.comments__closed {
	margin: 1.75rem 0 0;
	color: var(--ink-faint);
	font-size: 0.8rem;
}

/* ---- Comment form ---- */

.comment-respond {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Matches .comments__title: the form is the next section, not a subsection. */
.comments__title--reply {
	margin-bottom: 1.25rem;
}

/* Core puts the cancel link inside the heading, where uppercase small-caps
   would swallow it. Set back to running text so it reads as the way out. */
.comments__title--reply #cancel-comment-reply-link {
	margin-left: 0.6rem;
	color: var(--ink-faint);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

.comments__title--reply #cancel-comment-reply-link:hover,
.comments__title--reply #cancel-comment-reply-link:focus-visible {
	color: var(--accent);
}

.comment-form__field {
	margin: 0 0 1.1rem;
}

.comment-form__field label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--ink-soft);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.comment-form__required {
	color: var(--accent);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	/* Inherited, not inherited-by-default: a form control takes the system UI
	   font unless it is told otherwise, which would put a second typeface on
	   the page at the one point the reader is writing into it. */
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	line-height: 1.6;
	transition: border-color 0.15s ease-in-out;
}

.comment-form textarea {
	display: block;
	min-height: 9rem;
	resize: vertical;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
	border-color: var(--ink-soft);
}

.comment-form__hint {
	display: block;
	margin-top: 0.3rem;
	color: var(--ink-faint);
	font-size: 0.74rem;
}

/*
 * Ink rather than the copy button's green. The green is on loan from
 * fk.369usa.com for that one control; a second green button would make the
 * page look like it has two primary actions.
 */
.comment-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 1.4rem;
	border: 1px solid var(--ink-strong);
	border-radius: 4px;
	background: var(--ink-strong);
	color: var(--paper);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.comment-form__submit:hover {
	border-color: var(--accent);
	background: var(--accent);
}

/* The "logged in as …" line core writes when an author is signed in. */
.comment-form .logged-in-as {
	margin: 0 0 1.1rem;
	color: var(--ink-faint);
	font-size: 0.8rem;
}

/* ---- Footer ---- */

.site-footer {
	border-top: 1px solid var(--rule-soft);
}

.site-footer__inner {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 1.4rem var(--gutter) 2.25rem;
}

.site-footer__copyright {
	margin: 0;
	color: var(--ink-faint);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

/*
 * Inherits size, weight and colour from the line around it: this is a credit,
 * not a call to action. Hover is the only thing that marks it as a link, which
 * is the same bargain the rest of the site's links make.
 */
.site-footer__link {
	color: inherit;
	font-weight: inherit;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: var(--accent);
}

/* ---- Back to top ---- */

/*
 * Neutral rather than the copy button's green: two coloured circles competing
 * for attention would make neither of them read as the primary action. Sits in
 * the page gutter so it lines up with the content's own margin.
 */
.to-top {
	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	z-index: 20;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--rule);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink-soft);
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	/*
	 * visibility, not just opacity: a transparent button is still in the tab
	 * order and still swallows taps in the corner.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms;
}

.to-top.is-visible {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.to-top:hover {
	border-color: var(--ink-strong);
	color: var(--ink-strong);
}

@media (prefers-reduced-motion: reduce) {
	.to-top {
		transition: none;
	}
}

/* ---- Chinese ---- */

/*
 * The body face has no Han coverage, so a Chinese page would otherwise fall
 * back to whatever the OS picks, which is rarely the right one. The extra
 * leading is not decoration: Han glyphs fill their em box, so lines set at a
 * Latin line-height sit visibly tighter.
 */
.lang-cn {
	font-family: var(--font-han), var(--font-body);
	line-height: 1.9;
}

.lang-cn .chapter-body {
	line-height: 2.05;
	/* Han runs shorter per character, so the same measure holds more of them. */
	max-width: 32rem;
}

.lang-cn .chapter__title,
.lang-cn .archive-title {
	letter-spacing: 0;
}

.lang-cn .chapter__label,
.lang-cn .site-tagline,
.lang-cn .chapter-table thead th,
.lang-cn .comments__title,
.lang-cn .comment-form__field label {
	letter-spacing: 0.08em;
}

/* Uppercasing has no meaning in Han script, and the tracking that makes a
   Latin small-caps label readable only pulls these apart. */
.lang-cn .comment__reply a,
.lang-cn .comment__edit a,
.lang-cn .comment-form__submit {
	letter-spacing: 0.04em;
	text-transform: none;
}

/* ---- Narrow screens ---- */

@media (max-width: 40rem) {
	.site-nav__list a {
		padding: 0.8rem 0.75rem;
	}
}