/* ==================================================================
   TRUTHSCAPE - Base typography and layout primitives
   ------------------------------------------------------------------
   Everything here is scoped under .ts, so this file changes nothing
   until a page's wrapper carries that class. That is what makes the
   migration reversible: add .ts alongside the existing scope class,
   verify, and only then remove the page's inline CSS.
   ================================================================== */

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

.ts {
	font-family: var(--ts-font-sans);
	font-size: var(--ts-size-body);
	line-height: var(--ts-lh-body);
	color: var(--ts-body);
	background: var(--ts-cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* --- Headings ----------------------------------------------------- */

.ts h1,
.ts h2,
.ts h3,
.ts h4,
.ts h5 {
	font-family: var(--ts-font-serif);
	color: var(--ts-navy);
	line-height: var(--ts-lh-head);
	margin: 0;
}

.ts h1 { font-size: var(--ts-size-h1); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.ts h2 { font-size: var(--ts-size-h2); font-weight: 700; }
.ts h3 { font-size: var(--ts-size-h3); font-weight: 700; }
.ts h4 { font-size: var(--ts-size-h4); font-weight: 700; }
.ts h5 { font-size: var(--ts-size-h5); font-weight: 700; line-height: 1.4; }

/* --- Prose -------------------------------------------------------- */

.ts p {
	margin: 0 0 1.05em;
}

.ts strong,
.ts b {
	color: var(--ts-ink);
}

.ts a {
	color: var(--ts-gold-text);
	text-decoration: none;
	transition: color .2s;
}

.ts a:hover {
	color: var(--ts-navy);
}

.ts a:focus-visible,
.ts button:focus-visible,
.ts input:focus-visible,
.ts select:focus-visible,
.ts textarea:focus-visible,
.ts summary:focus-visible {
	outline: 2px solid var(--ts-gold);
	outline-offset: 2px;
}

.ts ul,
.ts ol {
	padding-left: 22px;
}

.ts li {
	margin-bottom: 7px;
}

.ts hr {
	border: none;
	height: 1px;
	background: var(--ts-rule-solid);
	margin: var(--s5) 0;
}

.ts code {
	font-family: var(--ts-font-mono);
	font-size: .86em;
	background: var(--ts-cream-deep);
	color: var(--ts-ink);
	padding: 1px 5px;
	border-radius: var(--ts-radius);
}

.ts .ts-greek,
.ts-greek {
	font-family: var(--ts-font-greek);
}

/* --- Containers --------------------------------------------------- */

.ts .ts-wrap {
	max-width: var(--ts-width-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ts-gutter);
	padding-right: var(--ts-gutter);
}

.ts .ts-narrow {
	max-width: var(--ts-width-reading);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ts-gutter);
	padding-right: var(--ts-gutter);
}

.ts .ts-measure {
	max-width: var(--ts-width-reading);
}

/* --- Utility ------------------------------------------------------ */

.ts .ts-muted { color: var(--ts-muted); }
.ts .ts-meta  { font-size: var(--ts-size-meta); color: var(--ts-muted); }
.ts .ts-lead  { font-size: 1.13em; line-height: 1.6; }

.ts .ts-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ts *,
	.ts *::before,
	.ts *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}