/**
 * /chapters/ — page-chapters.php. Built 2026-09-03.
 *
 * Reuses .tcs-band, .tcs-band--paper, .tcs-btn and the home page's chapter
 * cards (chapters.css) untouched. Everything here is layout and the few
 * shapes this page adds: the hero cover stack, the reading path, the
 * <details> table of contents, the chapter spread, the fit
 * columns and the buy panel. The buy panel and the ghost button are shared
 * with /readers/ (readers.css loads after this file and adds nothing to
 * them).
 *
 * Colours are tokens throughout; the only literals are geometry.
 */

/* ---------------------------------------------------------------------------
 * 0. Shared pieces: ghost button, avatars.
 * ------------------------------------------------------------------------- */

.tcs-btn--ghost {
	background: transparent;
	color: var(--tcs-black);
	border: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-btn--ghost:hover {
	background: var(--tcs-white);
	border-color: var(--tcs-black);
	color: var(--tcs-black);
}

.tcs-band--black .tcs-btn--ghost {
	color: var(--tcs-cream);
	border-color: color-mix(in srgb, var(--tcs-cream) 22%, transparent);
}


.tcs-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-black);
	color: var(--tcs-orange);
	font-size: 14px;
	font-weight: var(--tcs-fw-semibold);
	flex-shrink: 0;
}

.tcs-avatar--placeholder {
	background: linear-gradient(150deg, var(--tcs-orange), var(--tcs-amber));
	color: var(--tcs-black);
}

/* ---------------------------------------------------------------------------
 * 1. Hero.
 * ------------------------------------------------------------------------- */

.tcs-cpage-hero {
	padding-top: 72px;
	padding-bottom: 72px;
}

.tcs-cpage-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.tcs-cpage-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.tcs-cpage-hero__title {
	margin: 0;
	font-size: clamp(42px, 5vw, 68px);
	line-height: 1.0;
	letter-spacing: var(--tcs-ls-hero);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-hero__accent {
	color: var(--tcs-amber);
}

.tcs-cpage-hero__lede {
	margin: 0;
	max-width: 540px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--tcs-body);
}

.tcs-cpage-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tcs-cpage-hero__cta,
.tcs-cpage-hero__secondary {
	padding: 15px 26px;
	font-size: 15.5px;
}

.tcs-cpage-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 10px 0 0;
	border-top: var(--tcs-border-width) solid var(--tcs-border);
	padding-top: 22px;
}

.tcs-cpage-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tcs-cpage-stat dt {
	order: 2;
	font-size: 12px;
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-muted);
}

.tcs-cpage-stat dd {
	order: 1;
	margin: 0;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

/* The cover stack: a sample page behind, the real cover in front, an orbit
 * ring, two chips. */
.tcs-cpage-hero__visual {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tcs-cpage-hero__ring {
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: var(--tcs-radius-full);
	border: 1px dashed color-mix(in srgb, var(--tcs-orange) 45%, transparent);
	animation: tcs-cpage-spin 60s linear infinite;
}

.tcs-cpage-hero__ring::after {
	content: "";
	position: absolute;
	inset: 46px;
	border-radius: var(--tcs-radius-full);
	border: 1px solid color-mix(in srgb, var(--tcs-black) 8%, transparent);
}

@keyframes tcs-cpage-spin {
	to { transform: rotate(360deg); }
}

/*
 * The sample page behind the cover. The artwork is exactly 250x350 and the box
 * is exactly 250x350, so `object-fit` crops nothing; it is declared so the rule
 * stays correct if the page is ever re-exported at a different ratio. The tilt
 * is applied here, never baked into the image.
 */
.tcs-cpage-hero__page {
	position: absolute;
	display: block;
	width: 250px;
	height: 350px;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--tcs-black) 45%, transparent);
	transform: translate(120px, 40px) rotate(8deg);
}

.tcs-cpage-hero__cover {
	position: relative;
	width: 292px;
	height: auto;
	border-radius: 3px 9px 9px 3px;
	box-shadow:
		0 40px 70px -30px color-mix(in srgb, var(--tcs-black) 55%, transparent),
		0 0 0 1px color-mix(in srgb, var(--tcs-black) 10%, transparent);
	transform: rotate(-4deg);
}

.tcs-cpage-hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--tcs-radius);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--tcs-black) 40%, transparent);
	font-size: 13px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
	white-space: nowrap;
}

.tcs-cpage-hero__chip svg {
	width: 16px;
	height: 16px;
	color: var(--tcs-orange);
}

.tcs-cpage-hero__chip--pages {
	right: 0;
	bottom: 48px;
	background: var(--tcs-black);
	color: var(--tcs-cream);
	border-color: var(--tcs-black);
}

.tcs-cpage-hero__chip--start {
	left: 0;
	top: 56px;
}

.tcs-cpage-hero__chip-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-orange);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tcs-orange) 25%, transparent);
}

/* ---------------------------------------------------------------------------
 * 2. The reading path — black.
 * ------------------------------------------------------------------------- */

.tcs-cpage-path__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 64px;
	align-items: start;
}

.tcs-cpage-path__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 40px;
}

.tcs-cpage-path__eyebrow {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-orange);
}

.tcs-cpage-path__title {
	margin: 0;
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 1.06;
	letter-spacing: var(--tcs-ls-h2);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-path__copy {
	margin: 0;
	max-width: 420px;
	color: var(--tcs-body-dark);
	line-height: 1.65;
}

.tcs-cpage-path__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

.tcs-cpage-path__steps::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 28px;
	bottom: 28px;
	width: 1px;
	background: linear-gradient(180deg, var(--tcs-orange), color-mix(in srgb, var(--tcs-orange) 15%, transparent));
}

.tcs-cpage-path__step {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 16px 18px 16px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--tcs-cream) 10%, transparent);
	transition: padding-left var(--tcs-dur-btn-hover) var(--tcs-ease-reveal);
}

.tcs-cpage-path__step:hover {
	padding-left: 8px;
}

.tcs-cpage-path__num {
	position: relative;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-black);
	border: 1px solid color-mix(in srgb, var(--tcs-orange) 55%, transparent);
	color: var(--tcs-orange);
	font-size: 14px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: 0.04em;
}

.tcs-cpage-path__name {
	font-size: 20px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.02em;
	color: var(--tcs-cream);
}

.tcs-cpage-path__count {
	font-size: 13px;
	color: var(--tcs-muted);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 3. Eight parts — orange. chapters.css owns the cards entirely.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 4. Table of contents — cream, <details>.
 * ------------------------------------------------------------------------- */

.tcs-cpage-toc__inner {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 70px;
	align-items: start;
}

.tcs-cpage-toc__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: sticky;
	top: 40px;
}

.tcs-cpage-toc__title {
	margin: 0;
	font-size: clamp(32px, 3.2vw, 44px);
	line-height: 1.06;
	letter-spacing: var(--tcs-ls-page-title);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-toc__lede {
	margin: 0;
	color: var(--tcs-body);
	line-height: 1.6;
}

.tcs-cpage-toc__cta {
	align-self: flex-start;
	margin-top: 8px;
}

.tcs-cpage-toc__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tcs-cpage-toc__part {
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	overflow: hidden;
}

.tcs-cpage-toc__part[open] {
	border-color: color-mix(in srgb, var(--tcs-orange) 55%, var(--tcs-border));
}

.tcs-cpage-toc__summary {
	display: grid;
	grid-template-columns: 44px 1fr auto 18px;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	list-style: none;
	cursor: pointer;
	min-height: var(--tcs-tap-min);
}

.tcs-cpage-toc__summary::-webkit-details-marker {
	display: none;
}

.tcs-cpage-toc__summary:hover .tcs-cpage-toc__part-name {
	color: var(--tcs-amber);
}

.tcs-cpage-toc__summary:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: -2px;
}

.tcs-cpage-toc__num {
	font-size: 13px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-amber-2);
	letter-spacing: 0.04em;
}

.tcs-cpage-toc__part-name {
	font-size: 20px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.024em;
	color: var(--tcs-black);
}

.tcs-cpage-toc__part-count {
	font-size: 12px;
	font-weight: var(--tcs-fw-semibold);
	padding: 4px 9px;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-cream-2);
	color: var(--tcs-label-on-white);
}

.tcs-cpage-toc__icon {
	position: relative;
	width: 18px;
	height: 18px;
}

.tcs-cpage-toc__icon::before,
.tcs-cpage-toc__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--tcs-orange);
	transform: translate(-50%, -50%);
}

.tcs-cpage-toc__icon::before {
	width: 14px;
	height: 1.9px;
}

.tcs-cpage-toc__icon::after {
	width: 1.9px;
	height: 14px;
	transition: transform var(--tcs-dur-btn-hover) var(--tcs-ease-reveal);
}

.tcs-cpage-toc__part[open] .tcs-cpage-toc__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.tcs-cpage-toc__body {
	padding: 0 24px 24px 86px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tcs-cpage-toc__part-summary {
	margin: 0;
	color: var(--tcs-body);
	line-height: 1.6;
	max-width: 560px;
}

.tcs-cpage-toc__chapters {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.tcs-cpage-toc__chapter {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 10px 0;
	border-top: 1px solid var(--tcs-cream-2);
	font-size: 15.5px;
	color: var(--tcs-black);
}

.tcs-cpage-toc__chapter-num {
	font-size: 12.5px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-muted);
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
 * 5. Inside a chapter — cream.
 * ------------------------------------------------------------------------- */

.tcs-cpage-anatomy {
	background: var(--tcs-cream-2);
}

.tcs-cpage-anatomy__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.tcs-cpage-anatomy__spread {
	margin: 0;
	transform: rotate(-1.5deg);
}

/*
 * The artwork is generated FLAT and tilted here, so a re-export never has to
 * carry the rotation baked in. The shadow sits on the image itself rather than
 * a wrapper -- the spread has no border, so its own edge is the page edge.
 */
.tcs-cpage-anatomy__spread-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tcs-radius-md);
	box-shadow:
		0 24px 48px -28px color-mix(in srgb, var(--tcs-black) 50%, transparent),
		0 0 0 1px var(--tcs-border);
}

.tcs-cpage-anatomy__spread-caption {
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
	color: var(--tcs-muted);
}

.tcs-cpage-anatomy__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tcs-cpage-anatomy__title {
	margin: 0;
	font-size: clamp(36px, 4vw, 54px);
	line-height: 1.04;
	letter-spacing: var(--tcs-ls-h2);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-anatomy__lede {
	margin: 0;
	color: var(--tcs-body);
	font-size: 17px;
	line-height: 1.6;
}

.tcs-cpage-anatomy__beats {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tcs-cpage-anatomy__beat {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	padding: 18px 20px;
	border-radius: var(--tcs-radius-md);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-cpage-anatomy__beat-num {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-orange);
	color: var(--tcs-black);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-anatomy__beat-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.02em;
}

.tcs-cpage-anatomy__beat-copy {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcs-body);
}

/* ---------------------------------------------------------------------------
 * 6. Who it is for — black.
 * ------------------------------------------------------------------------- */

.tcs-cpage-fit__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.tcs-cpage-fit__col {
	padding: 36px;
	border-radius: var(--tcs-radius-lg);
	border: 1px solid color-mix(in srgb, var(--tcs-cream) 12%, transparent);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tcs-cpage-fit__col--yes {
	background: linear-gradient(160deg, color-mix(in srgb, var(--tcs-orange) 16%, transparent), transparent 60%);
	border-color: color-mix(in srgb, var(--tcs-orange) 40%, transparent);
}

.tcs-cpage-fit__eyebrow {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-orange);
}

.tcs-cpage-fit__col--no .tcs-cpage-fit__eyebrow {
	color: var(--tcs-muted);
}

.tcs-cpage-fit__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-fit__list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--tcs-body-dark);
	line-height: 1.55;
}

.tcs-cpage-fit__list li {
	position: relative;
	padding-left: 26px;
}

.tcs-cpage-fit__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--tcs-orange);
	border-bottom: 2px solid var(--tcs-orange);
	transform: rotate(-45deg);
}

.tcs-cpage-fit__col--no .tcs-cpage-fit__list li::before {
	width: 10px;
	height: 0;
	border-left: 0;
	border-bottom: 2px solid var(--tcs-muted);
	transform: none;
	top: 11px;
}

/* ---------------------------------------------------------------------------
 * 7. Buy panel — orange. Shared with /readers/.
 * ------------------------------------------------------------------------- */

.tcs-cpage-buy__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.tcs-cpage-buy__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tcs-cpage-buy__title {
	margin: 0;
	font-size: clamp(36px, 4vw, 54px);
	line-height: 1.04;
	letter-spacing: var(--tcs-ls-h2);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-buy__lede {
	margin: 0;
	max-width: 460px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tcs-guarantee-copy-ink);
}

.tcs-cpage-buy__panel {
	background: var(--tcs-black);
	color: var(--tcs-cream);
	border-radius: var(--tcs-radius-xl);
	padding: 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--tcs-black) 70%, transparent);
}

.tcs-cpage-buy__price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.tcs-cpage-buy__price {
	font-size: 46px;
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: var(--tcs-fw-semibold);
}

.tcs-cpage-buy__was {
	font-size: 18px;
	color: var(--tcs-body-dark);
}

.tcs-cpage-buy__save {
	font-size: 12px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-orange);
}

.tcs-cpage-buy__cta {
	width: 100%;
	padding: 17px 24px;
	font-size: 16px;
	margin-top: 6px;
}

.tcs-cpage-buy__list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: var(--tcs-body-dark);
}

.tcs-cpage-buy__list li {
	position: relative;
	padding-left: 22px;
}

.tcs-cpage-buy__list li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 6px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--tcs-orange);
	border-bottom: 2px solid var(--tcs-orange);
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * 8. Mobile.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.tcs-cpage-hero__inner,
	.tcs-cpage-path__inner,
	.tcs-cpage-toc__inner,
	.tcs-cpage-anatomy__inner,
	.tcs-cpage-fit__inner,
	.tcs-cpage-buy__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.tcs-cpage-path__head,
	.tcs-cpage-toc__intro {
		position: static;
	}

	.tcs-cpage-hero__visual {
		min-height: 440px;
		order: -1;
	}

	.tcs-cpage-hero__ring {
		width: 380px;
		height: 380px;
	}

	.tcs-cpage-hero__cover {
		width: 220px;
	}

	.tcs-cpage-hero__page {
		width: 190px;
		height: 266px;
		transform: translate(90px, 30px) rotate(8deg);
	}
}

@media (max-width: 768px) {
	.tcs-cpage-hero {
		padding-top: 40px;
		padding-bottom: 48px;
	}

	.tcs-cpage-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 18px;
	}

	.tcs-cpage-stat dd {
		font-size: 26px;
	}

	.tcs-cpage-hero__chip--pages {
		bottom: 8px;
		right: auto;
		left: 0;
	}

	.tcs-cpage-hero__chip--start {
		top: 8px;
	}

	.tcs-cpage-hero__cta,
	.tcs-cpage-hero__secondary {
		width: 100%;
	}

	.tcs-cpage-path__step {
		grid-template-columns: 44px 1fr;
		gap: 14px;
	}

	.tcs-cpage-path__num {
		width: 44px;
		height: 44px;
	}

	.tcs-cpage-path__steps::before {
		left: 21px;
	}

	.tcs-cpage-path__count {
		grid-column: 2;
	}

	.tcs-cpage-path__name {
		font-size: 17px;
	}

	.tcs-cpage-toc__summary {
		grid-template-columns: 32px 1fr auto 18px;
		gap: 12px;
		padding: 16px 18px;
	}

	.tcs-cpage-toc__part-name {
		font-size: 16.5px;
	}

	.tcs-cpage-toc__body {
		padding: 0 18px 18px 18px;
	}

	.tcs-cpage-anatomy__spread {
		transform: none;
	}

	.tcs-cpage-fit__col {
		padding: 24px;
	}

	.tcs-cpage-fit__title {
		font-size: 24px;
	}

	.tcs-cpage-buy__panel {
		padding: 24px;
	}

	.tcs-cpage-buy__price {
		font-size: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcs-cpage-hero__ring {
		animation: none !important;
	}

	.tcs-cpage-path__step,
	.tcs-cpage-toc__icon::after {
		transition: none !important;
	}
}