/* The serials (includes/games/serials.php, assets/serial.js).
 *
 * The paper's house language: white ground, black Times, hairline rules, link
 * blue, no boxes, radii, shadows or fills. Every colour is a theme token, so
 * Terminal and Rainbow repaint it with no override here. Text first: the
 * reading column is the page; the map and the list sit beside it on a wide
 * screen and under it on a phone.
 */

/* The page title (page-game-wide.html's h2) would repeat the serial's own h1. */
body:has(.rt-serial) .wp-block-post-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rt-serial {
	--rts-ink: var(--wp--preset--color--contrast);
	--rts-mute: var(--wp--preset--color--muted);
	--rts-rule: var(--wp--preset--color--border);
	--rts-link: var(--wp--preset--color--clay-dark);
	color: var(--rts-ink);
	margin: 1.5rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
}
.rt-serial a {
	color: var(--rts-link);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.rts-proofbar {
	margin: 0 0 1rem;
	padding: 0.4rem 0;
	border-top: 1px solid var(--rts-ink);
	border-bottom: 1px solid var(--rts-ink);
	font-size: 0.8125rem;
	font-style: italic;
}

/* -- masthead ------------------------------------------------------------ */
.rts-head {
	max-width: 44rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rts-ink);
}
.rts-kicker,
.rts-slug,
.rts-listh,
.rts-gh,
.rts-sources h2,
.rts-practical span {
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 400;
}
@media (min-width: 768px) {
	.rts-kicker,
	.rts-slug,
	.rts-listh,
	.rts-gh,
	.rts-sources h2,
	.rts-practical span {
		font-size: 14px;
	}
}
.rts-kicker {
	margin: 0 0 0.6rem;
	color: var(--rts-mute);
}
.rts-title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0;
	text-transform: none;
}
.rts-sub {
	margin: 0.35rem 0 0;
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.3;
}
.rts-deck {
	margin: 0.8rem 0 0;
	font-size: 1.125rem;
	line-height: 1.45;
	max-width: 36em;
}
.rts-fiction {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--rts-mute);
}
.rts-draft {
	margin: 0.6rem 0 0;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rts-ink);
}

/* -- the sheet: reading column, and the map + list beside it --------------- */
.rts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 3rem;
	margin-top: 1.25rem;
}
.rts-main {
	min-width: 0;
	max-width: 38rem;
	scroll-margin-top: 1rem;
}
.rts-aside {
	min-width: 0;
}
@media (min-width: 960px) {
	.rts-grid {
		grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
	}
	.rts-aside {
		position: sticky;
		top: 1rem;
		align-self: start;
		border-left: 1px solid var(--rts-rule);
		padding-left: 2rem;
	}
}

.rts-where {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--rts-mute);
}
.rts-intro p {
	margin: 0 0 1rem;
}
.rts-note {
	font-style: italic;
	color: var(--rts-mute);
}

/* -- a station ------------------------------------------------------------- */
.rts-st {
	padding: 0 0 1.25rem;
}
.rts-st + .rts-st {
	border-top: 1px solid var(--rts-rule);
	padding-top: 1.5rem;
}
.rts-js .rts-st + .rts-st {
	border-top: 0;
	padding-top: 0;
}
.rts-slug {
	margin: 0 0 0.5rem;
	color: var(--rts-mute);
}
.rts-place {
	margin: 0;
	font-family: inherit;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0;
	text-transform: none;
}
.rts-dateline {
	margin: 0.3rem 0 1rem;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--rts-mute);
}
.rts-lead {
	font-size: 1.25rem;
	line-height: 1.45;
	margin: 0 0 1rem;
}
.rts-st p {
	margin: 0 0 1rem;
}
.rts-st blockquote {
	margin: 0 0 1rem;
	padding: 0 0 0 1.1rem;
	border-left: 1px solid var(--rts-ink);
	font-style: italic;
}
.rts-st blockquote p {
	margin: 0 0 0.5rem;
}
.rts-st .rts-sub {
	font-size: 1rem;
	margin: 1.25rem 0 0.5rem;
}
.rts-caveat {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--rts-mute);
}
.rts-practical {
	padding: 0.5rem 0;
	border-top: 1px solid var(--rts-rule);
	border-bottom: 1px solid var(--rts-rule);
	font-size: 0.9375rem;
}
.rts-practical span {
	margin-right: 0.5em;
	color: var(--rts-mute);
}

/* -- the mystery's guess -------------------------------------------------- */
.rts-guess {
	margin: 1.5rem 0 0;
	padding: 0.9rem 0 0.2rem;
	border-top: 1px solid var(--rts-ink);
}
.rts-guess:empty {
	display: none;
}
.rts-gf {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.rts-gh {
	margin: 0 0 0.6rem;
	padding: 0;
}
.rts-gq {
	margin: 0.8rem 0 0.2rem !important;
	font-style: italic;
}
.rts-opt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	border-bottom: 1px solid var(--rts-rule);
	cursor: pointer;
}
.rts-opt input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--rts-ink);
}

/* -- buttons: the paper's letterspaced label on a hairline ---------------- */
.rts-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0.5rem 0 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rts-ink);
}
.rts-btn {
	min-height: 44px;
	padding: 0.55rem 1rem;
	border: 1px solid var(--rts-ink);
	border-radius: 0;
	background: var(--rts-ink);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}
.rts-btn--ghost {
	background: transparent;
	color: var(--rts-ink);
}
.rts-btn:disabled {
	background: transparent;
	color: var(--rts-mute);
	border-color: var(--rts-rule);
	cursor: default;
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: none;
	font-size: 0.9375rem;
}
.rts-btn:focus-visible,
.rts-list a:focus-visible {
	outline: 2px solid var(--rts-ink);
	outline-offset: 2px;
}
.rts-end {
	margin: 0;
	font-style: italic;
}

/* -- the map ---------------------------------------------------------------- */
.rts-map {
	margin: 0 0 1.25rem;
}
.rts-map__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
}
.rts-m-route {
	fill: none;
	stroke: var(--rts-mute);
	stroke-width: 1;
	stroke-dasharray: 4 4;
}
.rts-m-read {
	fill: none;
	stroke: var(--rts-ink);
	stroke-width: 2;
	stroke-linecap: round;
}
.rts-m-stop {
	fill: var(--wp--preset--color--base);
	stroke: var(--rts-ink);
	stroke-width: 1.25;
}
.rts-m-stop.is-read {
	fill: var(--rts-ink);
}
.rts-m-stop.is-here {
	fill: var(--wp--preset--color--base);
	stroke-width: 2;
}
.rts-m-stop.is-later {
	stroke: var(--rts-mute);
}
.rts-m-lab,
.rts-m-n {
	fill: var(--rts-mute);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.rts-m-lab {
	paint-order: stroke;
	stroke: var(--wp--preset--color--base);
	stroke-width: 4px;
	stroke-linejoin: round;
}
.rts-m-lab.is-here {
	fill: var(--rts-ink);
}

/* -- the list of stations -------------------------------------------------- */
.rts-listh {
	margin: 0;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--rts-ink);
	font-family: inherit;
}
.rts-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.rts-list li {
	margin: 0;
	border-bottom: 1px solid var(--rts-rule);
}
.rt-serial .rts-list a {
	text-decoration: none;
}
.rts-list a,
.rts-list li.is-tbc {
	/* number | title (wraps, never pushed under the status) | status (one line).
	   Owner bug 2026-09-21: the grid used to land on every locked <li>, which
	   squeezed its <a> into the 2rem number column and stacked the title on the
	   release date. It now applies to the link, and to the server's "to come"
	   rows that have no link. */
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	grid-template-areas: "n t s";
	column-gap: 0.75rem;
	row-gap: 0.15rem;
	align-items: baseline;
	min-height: 44px;
	padding: 0.6rem 0;
	box-sizing: border-box;
	color: var(--rts-ink);
	text-decoration: none;
}
.rts-list__n {
	grid-area: n;
}
.rts-list__t {
	grid-area: t;
	min-width: 0;
	overflow-wrap: anywhere;
}
.rts-list__s {
	grid-area: s;
	white-space: nowrap;
	text-align: right;
}
.rts-list__s:empty {
	display: none;
}
/* Narrow columns (a phone, or the side column on a mid-width screen): the
   status drops to its own line under the title rather than competing for it. */
@media (max-width: 959px), (min-width: 960px) and (max-width: 1180px) {
	.rts-list a,
	.rts-list li.is-tbc {
		grid-template-columns: 2rem minmax(0, 1fr);
		grid-template-areas: "n t" ". s";
	}
	.rts-list__s {
		text-align: left;
		white-space: normal;
	}
}
.rts-list a:hover .rts-list__t {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rts-list__n {
	font-variant-numeric: tabular-nums;
	color: var(--rts-mute);
}
.rts-list__s {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rts-mute);
}
.rts-list li.is-here .rts-list__t {
	font-style: italic;
}
.rts-list li.is-here .rts-list__n,
.rts-list li.is-here .rts-list__s {
	color: var(--rts-ink);
}
.rts-list li.is-later,
.rts-list li.is-later a {
	color: var(--rts-mute);
	cursor: default;
}
.rts-list li.is-later a:hover .rts-list__t {
	text-decoration: none;
}

/* -- sources: small type, at the end of the serial ------------------------ */
.rts-sources {
	margin: 1.5rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--rts-ink);
	font-size: 14px;
	line-height: 1.5;
	color: var(--rts-mute);
	max-width: 56rem;
}
.rts-sources h2 {
	margin: 0 0 0.4rem;
	font-family: inherit;
	color: var(--rts-ink);
}
.rts-sources ul {
	margin: 0 0 0.6rem;
	padding: 0 0 0 1.1rem;
}
.rts-sources li {
	margin: 0 0 0.2rem;
	overflow-wrap: anywhere;
}
.rts-sources p {
	font-style: italic;
	margin: 0;
}

@media (max-width: 600px) {
	.rt-serial {
		font-size: 1.0625rem;
	}
	.rts-nav .rts-btn {
		flex: 1 1 100%;
	}
	.rts-map__svg {
		max-height: 44vh;
	}
}

/* the intro, folded beside the text once reading has started */
.rts-about {
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--rts-rule);
}
.rts-about summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	border-bottom: 1px solid var(--rts-ink);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
.rts-about .rts-intro {
	padding-top: 0.8rem;
	font-size: 16px;
}