/**
 * The Plan — the working half of a World.
 *
 * Art direction, and the reasoning.
 *
 * The study above this section is seduction: a twelve-band colour field at real
 * proportions, a title, a premise. This part is the opposite job, and it has to
 * look like the opposite job without looking like a spreadsheet that wandered
 * into a design magazine. So: the same serif at the same scale for anything
 * that is an argument, and a hairline monospace grid for anything that is
 * reference. The eye should be able to tell, at a glance and before reading a
 * word, which lines are prose and which are specification.
 *
 * The open-questions block is the one that mattered most to get right. It is
 * not an error state and it must never read as one — no red, no warning icon,
 * no apologetic grey. It is set as a torn-out notebook page in ember, because
 * a named unanswered question is a piece of work, and the collection's whole
 * argument is that naming it beats papering over it.
 *
 * Ground: dark. The study page is on ink. Colour comes only from --tt-* tokens.
 */

.tp {
	--tp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--tp-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	max-width: var(--atl-wide);
	margin-inline: auto;
	padding-inline: var(--atl-gutter);
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
	border-top: 1px solid var(--tt-rule-on-dark);
	margin-top: clamp(2rem, 5vw, 3.5rem);
	color: var(--tt-bone);
}

/* ---------------------------------------------------------------- the head */

.tp__head { max-width: 52rem; }

.tp__eyebrow {
	font-family: var(--tp-mono);
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tt-ember-on-dark);
	margin: 0 0 0.9rem;
}

.tp__title {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: clamp(2.2rem, 6vw, 3.8rem);
	line-height: 1;
	margin: 0;
	color: var(--tt-bone);
	text-wrap: balance;
}

.tp__dek {
	font-family: var(--tp-sans);
	font-size: 1rem;
	line-height: 1.68;
	color: var(--tt-quiet-on-dark);
	margin: 1.1rem 0 0;
	max-width: 60ch;
}

.tp__standing {
	font-family: var(--tp-mono);
	font-size: 0.78rem;
	line-height: 1.7;
	letter-spacing: 0.01em;
	color: var(--tt-brass-on-dark);
	margin: 1.4rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--tt-rule-on-dark);
	max-width: 62ch;
}

/* ------------------------------------------------------- nothing yet built */

.tp-empty {
	margin-top: clamp(1.8rem, 4vw, 2.6rem);
	padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 2rem);
	border-left: 3px solid var(--tt-ember);
	background: color-mix(in srgb, var(--tt-bone) 5%, transparent);
	max-width: 62ch;
}

.tp-empty p {
	font-family: var(--tp-sans);
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--tt-bone);
	margin: 0;
}

.tp-empty__q {
	margin-top: 0.9rem !important;
	color: var(--tt-quiet-on-dark) !important;
	font-size: 0.9rem !important;
}

/* ----------------------------------------------------------- the movements */

.tp-move {
	margin-top: clamp(2.6rem, 6vw, 4rem);
	padding-top: clamp(1.6rem, 4vw, 2.4rem);
	/* --tt-rule-on-dark, not --tt-rule-faint. Faint is the light-ground rule
	   and it resolves to a pale lilac that reads as a hard bright line over
	   ink; it looked correct in the token name and wrong on the page. */
	border-top: 1px solid var(--tt-rule-on-dark);
}

.tp-move__head { max-width: 54rem; margin-bottom: clamp(1.4rem, 3.5vw, 2.2rem); }

.tp-move__no {
	font-family: var(--tp-mono);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	color: var(--tt-ember-on-dark);
	margin: 0 0 0.5rem;
}

.tp-move__title {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 4.2vw, 2.6rem);
	line-height: 1.04;
	margin: 0;
	color: var(--tt-bone);
}

.tp-move__line {
	font-family: var(--tp-sans);
	font-size: 0.94rem;
	line-height: 1.62;
	color: var(--tt-quiet-on-dark);
	margin: 0.6rem 0 0;
	max-width: 56ch;
}

/* -------------------------------------------------------------- an answer */

.tp-a { margin-block: clamp(1.4rem, 3.5vw, 2.1rem); max-width: 62ch; }
.tp-a--wide { max-width: none; }

.tp-a__label {
	font-family: var(--tp-mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tt-quiet-on-dark);
	margin: 0 0 0.7rem;
}

.tp-a__prose {
	font-family: var(--tp-sans);
	font-size: 1rem;
	line-height: 1.72;
	color: var(--tt-bone);
	margin: 0;
}

/* The governing sentence. Large, because everything else answers to it. */
.tp-a--line { max-width: 46rem; }

.tp-a__sentence {
	font-family: var(--tt-serif);
	font-size: clamp(1.4rem, 3.6vw, 2.25rem);
	line-height: 1.22;
	color: var(--tt-bone);
	margin: 0;
	padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.5rem);
	border-left: 3px solid var(--tt-ember);
	background: color-mix(in srgb, var(--tt-bone) 4%, transparent);
	text-wrap: balance;
}

.tp-a__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }

.tp-a__list li {
	font-family: var(--tp-sans);
	font-size: 0.96rem;
	line-height: 1.62;
	color: var(--tt-bone);
	padding-left: 1.1rem;
	position: relative;
}

.tp-a__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.42rem;
	height: 1px;
	background: var(--tt-ember-on-dark);
}

.tp-a__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.tp-a__links li { font-family: var(--tp-sans); font-size: 0.96rem; line-height: 1.55; }
.tp-a__links span { color: var(--tt-quiet-on-dark); font-size: 0.86rem; }

/* ---------------------------------------------------------------- a reveal */

.tp-reveal {
	border: 1px solid var(--tt-rule-on-dark);
	padding: clamp(1.1rem, 2.6vw, 1.6rem);
}

.tp-reveal__what {
	font-family: var(--tt-serif);
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	line-height: 1.32;
	color: var(--tt-bone);
	margin: 0 0 1.1rem;
	max-width: 46ch;
}

/* Bordered cells rather than a background showing through 1px gaps.
   The gridlines-as-background trick is elegant until a row does not fill its
   tracks: with three facts in a four-track fit, the leftover track renders as
   a solid block of the rule colour, which on this ground is a large lilac
   rectangle sitting in the middle of the page. Borders cannot do that. */
.tp-reveal__facts {
	margin: 0;
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.tp-reveal__facts > div {
	background: var(--tt-ink);
	border: 1px solid var(--tt-rule-on-dark);
	padding: 0.85rem 0.95rem;
}

.tp-reveal__facts dt {
	font-family: var(--tp-mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tt-brass-on-dark);
	margin-bottom: 0.4rem;
}

.tp-reveal__facts dd {
	margin: 0;
	font-family: var(--tp-sans);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--tt-bone);
}

/* ----------------------------------------------------------- the reference */

.tp-table {
	display: grid;
	gap: 1px;
	background: var(--tt-rule-on-dark);
	border: 1px solid var(--tt-rule-on-dark);
}

.tp-table__head,
.tp-table__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--tt-rule-on-dark);
}

@media (min-width: 44rem) {
	.tp-table__head,
	.tp-table__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
	.tp-table--3 .tp-table__head,
	.tp-table--3 .tp-table__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 1fr); }
}

.tp-table__head > *,
.tp-table__row > * { background: var(--tt-ink); padding: 0.8rem 0.95rem; }

.tp-table__head > * {
	font-family: var(--tp-mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tt-brass-on-dark);
}

/* On a phone the columns stack, so a header row is a heading for nothing and
   it goes visually. It does NOT go from the accessibility tree: a role="table"
   whose rows have cells and whose header row has been display:none'd is a
   table that has quietly lost its column names for exactly the users who most
   need them. Hidden visually, present to a screen reader. */
@media (max-width: 43.99rem) {
	.tp-table__head {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.tp-table__row > * { padding-block: 0.55rem; }
	.tp-table__row > *:first-child { padding-top: 0.9rem; }
	.tp-table__row > *:last-child { padding-bottom: 0.9rem; }
}

.tp-table__row > * {
	font-family: var(--tp-sans);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--tt-bone);
}

.tp-table__k {
	font-family: var(--tt-serif) !important;
	font-size: 1.05rem !important;
	line-height: 1.28 !important;
	color: var(--tt-bone);
}

/* --------------------------------------------------------- what is not yet */

.tp-na {
	font-family: var(--tp-sans);
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--tt-quiet-on-dark);
	margin: 1.2rem 0 0;
	display: grid;
	gap: 0.25rem;
	max-width: 62ch;
}

.tp-open {
	margin-top: clamp(1.4rem, 3.5vw, 2rem);
	padding: clamp(1.1rem, 2.6vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.6rem);
	border-left: 3px solid var(--tt-ember);
	background: color-mix(in srgb, var(--tt-bone) 4%, transparent);
	max-width: 62ch;
}

.tp-open__head {
	font-family: var(--tp-mono);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tt-ember-on-dark);
	margin: 0 0 0.8rem;
}

.tp-open ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }

.tp-open li {
	font-family: var(--tp-sans);
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--tt-quiet-on-dark);
}

.tp-open li strong {
	color: var(--tt-bone);
	font-weight: 500;
}

/* ------------------------------------------------------------------- foot */

.tp__foot {
	margin: clamp(2.4rem, 6vw, 3.6rem) 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--tt-rule-on-dark);
	font-family: var(--tp-sans);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--tt-quiet-on-dark);
}

.tp__foot a { margin-left: 0.4rem; }

/* =========================================================== the mechanism */

.tp-routes {
	max-width: var(--atl-wide);
	margin-inline: auto;
	padding-inline: var(--atl-gutter);
	padding-block: clamp(2.4rem, 6vw, 4rem);
	border-top: 1px solid var(--tt-rule-on-dark);
	color: var(--tt-bone);
}

.tp-routes .tp__eyebrow { margin-bottom: 0.9rem; }

.tp-routes__title {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4.6vw, 2.8rem);
	line-height: 1.04;
	margin: 0;
	color: var(--tt-bone);
}

.tp-routes__dek {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 0.98rem;
	line-height: 1.68;
	color: var(--tt-quiet-on-dark);
	margin: 0.8rem 0 clamp(1.6rem, 4vw, 2.4rem);
	max-width: 62ch;
}

/* Same reason as .tp-reveal__facts: a mechanism list is any length from one to
   four and an unfilled track must not paint itself. */
.tp-mechs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.tp-mechs li {
	background: var(--tt-ink);
	border: 1px solid var(--tt-rule-on-dark);
	padding: clamp(1.1rem, 2.6vw, 1.5rem);
}

.tp-mechs h3 {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.15;
	margin: 0 0 0.6rem;
	color: var(--tt-bone);
	text-wrap: balance;
}

.tp-mechs p {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 0.88rem;
	line-height: 1.62;
	color: var(--tt-quiet-on-dark);
	margin: 0;
}

.tp-routes__sub {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tt-brass-on-dark);
	margin: clamp(1.8rem, 4vw, 2.4rem) 0 0.9rem;
}

.tp-neighbours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.tp-neighbours li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--tt-rule-on-dark);
}

.tp-neighbours a {
	font-family: var(--tt-serif);
	font-size: 1.2rem;
	line-height: 1.2;
}

.tp-neighbours span {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	color: var(--tt-quiet-on-dark);
}

/* ================================================ the collection, measured */

.tpc { color: var(--tt-ink); }

.tpc__intro p {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 1.02rem;
	line-height: 1.72;
	color: var(--tt-ink);
	margin: 0 0 1rem;
	max-width: 64ch;
}

.tpc-move { margin-top: clamp(2.2rem, 5vw, 3.4rem); }

.tpc-move h3 {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.6vw, 2.1rem);
	line-height: 1.06;
	margin: 0;
	color: var(--tt-ink);
}

.tpc-move__line {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--tt-quiet-on-light);
	margin: 0.5rem 0 1.4rem;
	max-width: 58ch;
}

.tpc-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }

.tpc-q__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

.tpc-q__label {
	font-family: var(--tt-serif);
	font-size: 1.18rem;
	line-height: 1.2;
	color: var(--tt-ink);
}

.tpc-q__count {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--tt-quiet-on-light);
	white-space: nowrap;
}

.tpc-q__q {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--tt-quiet-on-light);
	margin: 0.25rem 0 0.5rem;
	max-width: 60ch;
}

.tpc-q__bar { height: 3px; background: var(--tt-rule-faint); }
.tpc-q__bar span { display: block; height: 100%; background: var(--tt-ember); }

.tpc-table { margin-top: clamp(2.6rem, 6vw, 4rem); }

.tpc-table h3 {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.6vw, 2.1rem);
	margin: 0 0 1.2rem;
	color: var(--tt-ink);
}

.tpc-table ol { list-style: none; margin: 0; padding: 0; counter-reset: tpc; }

.tpc-table li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--tt-rule-faint);
}

.tpc-table li a { font-family: var(--tt-serif); font-size: 1.1rem; }

.tpc-table li span {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.74rem;
	color: var(--tt-quiet-on-light);
	white-space: nowrap;
}

.tpc-mechs { display: grid; gap: 1.6rem; margin-top: 1.5rem; }

.tpc-mech { padding-bottom: 1.4rem; border-bottom: 1px solid var(--tt-rule-faint); }

.tpc-mech h3 {
	font-family: var(--tt-serif);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.12;
	margin: 0 0 0.5rem;
	color: var(--tt-ink);
}

.tpc-mech p {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--tt-ink);
	margin: 0;
	max-width: 62ch;
}

.tpc-mech__worlds { margin-top: 0.7rem !important; font-size: 0.88rem !important; color: var(--tt-quiet-on-light) !important; }
.tpc-mech__none { font-style: italic; }

@media print {
	.tp, .tp-routes { color: #000; }
	.tp-move, .tp-a, .tp-open, .tp-table__row { break-inside: avoid; }
}