/* GENERATED by @prep-partner/waypoint scripts/build.mjs from tokens/waypoint.tokens.json — never hand-edit.
   Waypoint 1.2.0. The content family of the component layer (src/components/content.css); load it after components.css. */

/* ============================================================
   CONTENT — long-form prose, tables, callouts, figures (WS1.5)
   ============================================================

   dist/components/content.css. What the 85 posts are made of: h2 and h3
   sections, ordered and unordered lists, blockquotes, tables in every
   post, the "Key Takeaways" list and the FAQ — plus the dense data table
   the programmatic pages need, breadcrumbs, callouts and figures.

   Prose styles bare elements only (:not([class])): markdown writes none,
   so a post takes every rule, while a heading that carries its own class
   (a page's wp-d3) keeps it wherever this family is loaded.
   ============================================================ */

/* ---- Headings ------------------------------------------------------- */
/* A section opens with a short laser tick over its heading — the ledger's
   mark, the only accent a long read carries. */
.wp-prose h2:not([class]) {
	margin-top: 2.6em;
	margin-bottom: 0.7em;
	padding-top: 0.9rem;
	font-family: var(--u-font-display);
	font-size: var(--u-fs-h2);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--u-text-hi);
	text-wrap: balance;
	scroll-margin-top: 5rem;
	background: linear-gradient(var(--u-laser-line), var(--u-laser-line)) no-repeat 0 0 / 1.75rem 2px;
}
.wp-prose h3:not([class]) {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--u-text-hi);
	scroll-margin-top: 5rem;
}
.wp-prose h4:not([class]) {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-13);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--u-text-2);
}
/* A post that opens on a heading opens flush: the heading's own margin
   rule is the more specific one, so it is named here too. */
.wp-prose > :first-child,
.wp-prose > :is(h2, h3, h4):not([class]):first-child {
	margin-top: 0;
}

/* ---- Paragraph rhythm and inline marks ------------------------------ */
.wp-prose :where(ol, blockquote, .wp-tbl-wrap, figure, pre, .wp-callout, .wp-faq) + p,
.wp-prose p + :where(ol, blockquote, .wp-tbl-wrap, figure, pre, .wp-callout) {
	margin-top: 1.25em;
}
.wp-prose strong:not([class]) {
	font-weight: 600;
	color: var(--u-text-hi);
}
.wp-prose code:not([class]) {
	font-family: var(--u-font-mono);
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	border-radius: var(--u-r-1);
	background: var(--u-paper-2);
	color: var(--u-text-hi);
}
.wp-prose pre:not([class]) {
	margin-block: 1.5em;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-2);
	background: var(--u-paper-2);
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-14);
	line-height: 1.6;
}
.wp-prose pre code:not([class]) {
	padding: 0;
	background: transparent;
	font-size: inherit;
}
.wp-prose hr:not([class]) {
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid var(--u-rule);
}
.wp-prose img:not([class]) {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--u-r-2);
}

/* ---- Lists ---------------------------------------------------------- */
/* An ordered list counts in the ledger's mono numerals; a bullet is a
   laser point. */
.wp-prose ol:not([class]) {
	list-style: none;
	padding-left: 0;
	counter-reset: wp-ol;
}
.wp-prose ol:not([class]) > li {
	position: relative;
	padding-left: 2.25rem;
	counter-increment: wp-ol;
}
.wp-prose ol:not([class]) > li + li {
	margin-top: 0.55em;
}
.wp-prose ol:not([class]) > li::before {
	content: counter(wp-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.3em;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-13);
	font-variant-numeric: tabular-nums;
	color: var(--u-laser-text);
}
.wp-prose ul:not([class]) > li::marker {
	color: var(--u-laser-line);
}
.wp-prose :where(ul, ol) :where(ul, ol) {
	margin-top: 0.4em;
}

/* ---- Blockquote: a note set off the page ---------------------------- */
.wp-prose blockquote:not([class]) {
	margin-block: 1.75em;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--u-laser-line);
	border-radius: 0 var(--u-r-2) var(--u-r-2) 0;
	background: var(--u-laser-wash);
	font-size: var(--u-fs-16);
	line-height: 1.6;
	color: var(--u-text);
}
.wp-prose blockquote:not([class]) > * + * {
	margin-top: 0.6em;
}

/* ---- Tables in prose (rehype-wp-tables adds the wrapper and labels) -- */
.wp-prose .wp-tbl-wrap {
	margin-block: 1.75em;
	max-width: 100%;
}
.wp-prose .wp-tbl {
	font-size: var(--u-fs-15);
}
.wp-prose .wp-tbl td:first-child {
	font-weight: 600;
	color: var(--u-text-hi);
}
/* The wrapper is a named region a keyboard can reach when it scrolls. */
.wp-tbl-wrap[tabindex]:focus-visible {
	box-shadow: var(--u-focus);
	border-radius: var(--u-r-1);
}
/* A numeric column sits right, in figures that line up. */
.wp-tbl .is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
@media (max-width: 719px) {
	.wp-tbl td.is-num {
		text-align: left;
	}
}

/* ---- The dense data table: programmatic pages, sortable (DataTable) -- */
.wp-tbl--data {
	font-size: var(--u-fs-14);
}
.wp-tbl--data th,
.wp-tbl--data td {
	padding: 0.55rem 0.75rem;
}
.wp-tbl--data tbody tr:nth-child(even) {
	background: var(--u-paper-2);
}
.wp-tbl--data td {
	font-variant-numeric: tabular-nums;
}
.wp-tbl-wrap--scroll {
	overflow: auto;
	max-height: var(--wp-tbl-max, 70vh);
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-2);
}
/* Sticky column heads: inside a scrolling wrapper they stay in view. */
.wp-tbl--data thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--u-plate);
}
.wp-tbl__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}
.wp-tbl__sort:hover {
	color: var(--u-text-hi);
}
.wp-tbl th[aria-sort='ascending'],
.wp-tbl th[aria-sort='descending'] {
	color: var(--u-text-hi);
}
.wp-tbl__sort .wp-icon {
	color: var(--u-laser-text);
}
.wp-tbl__source {
	margin-top: 0.6rem;
	font-size: var(--u-fs-12);
	color: var(--u-text-3);
}
.wp-tbl__source a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---- Breadcrumbs: a visible trail (Breadcrumb) ----------------------- */
.wp-crumbs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
	gap: 0.25rem 0;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-13);
	letter-spacing: 0.02em;
	color: var(--u-text-3);
}
.wp-crumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.wp-crumbs li + li::before {
	content: '/' / '';
	margin-inline: 0.55rem;
	color: var(--u-rule-input);
}
.wp-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--u-text-2);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--u-laser-line) 35%, transparent);
	text-underline-offset: 0.2em;
}
.wp-crumbs a:hover {
	color: var(--u-laser-text);
	text-decoration-color: currentColor;
}
.wp-crumbs [aria-current='page'] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--u-text);
}

/* ---- Callouts: an aside in the text (Callout) ------------------------ */
.wp-callout {
	margin-block: 1.75em;
	padding: 1.1rem 1.35rem 1.2rem;
	border: 1px solid var(--u-rule);
	border-left: 3px solid var(--u-laser-line);
	border-radius: 0 var(--u-r-2) var(--u-r-2) 0;
	background: var(--u-plate);
	font-size: var(--u-fs-16);
	line-height: 1.6;
}
.wp-callout__title {
	margin-bottom: 0.4rem;
}
.wp-callout > * + * {
	margin-top: 0.55em;
}
/* The takeaways: the post's points, each led by a laser square. */
.wp-callout--takeaways {
	background: var(--u-paper-2);
	border-color: var(--u-rule);
	border-left-color: var(--u-laser-600);
}
.wp-callout--takeaways ul {
	list-style: none;
	padding-left: 0;
}
.wp-callout--takeaways li {
	position: relative;
	padding-left: 1.4rem;
}
.wp-callout--takeaways li + li {
	margin-top: 0.5em;
}
.wp-callout--takeaways li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	background: var(--u-laser-line);
}

/* ---- Figures (Figure) ------------------------------------------------ */
.wp-fig {
	margin-block: 1.75em;
}
.wp-fig img {
	display: block;
	/* Never wider than its column, never blown up past its own pixels; the width and height it
	   carries reserve its box before it loads (CLS). */
	max-width: 100%;
	height: auto;
	border-radius: var(--u-r-2);
	background: var(--u-paper-2);
}
.wp-fig figcaption {
	margin-top: 0.6rem;
	font-size: var(--u-fs-14);
	line-height: 1.5;
	color: var(--u-text-2);
}
.wp-fig__credit {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	color: var(--u-text-3);
}

/* ---- FAQ: questions that open (Faq) ---------------------------------- */
.wp-faq {
	margin-block: 1.5em;
	border-top: 1px solid var(--u-rule);
}
.wp-faq__item {
	border-bottom: 1px solid var(--u-rule);
}
.wp-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	min-height: 48px;
	padding-block: 1rem;
	cursor: pointer;
	list-style: none;
}
.wp-faq__q::-webkit-details-marker {
	display: none;
}
.wp-faq__qtext {
	margin: 0;
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-h3);
	font-weight: 600;
	line-height: 1.35;
	color: var(--u-text-hi);
}
.wp-faq__icon {
	margin-top: 0.3rem;
	color: var(--u-laser-text);
}
@media (prefers-reduced-motion: no-preference) {
	.wp-faq__icon {
		transition: transform var(--u-t-1) var(--u-ease);
	}
}
.wp-faq__item[open] .wp-faq__icon {
	transform: rotate(45deg);
}
.wp-faq__a {
	padding-bottom: 1.1rem;
	max-width: var(--u-measure);
	color: var(--u-text);
}
.wp-faq__a > * + * {
	margin-top: 0.6em;
}
.wp-faq__q:focus-visible {
	box-shadow: var(--u-focus);
	border-radius: var(--u-r-1);
}

/* ---- Row headers, and tables that keep their columns ---------------- */
/* A body row's first cell can head it (th scope=row): it reads as the
   row's name, not as a column head. */
.wp-tbl tbody th {
	font-family: var(--u-font-sans);
	font-size: inherit;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--u-text-hi);
	border-bottom-color: var(--u-rule);
}
@media (max-width: 719px) {
	.wp-tbl tbody th {
		display: block;
		padding: 0.15rem 0;
		border-bottom: 0;
	}
	/* A narrow table of figures keeps its columns on a phone (DataTable stack={false}). */
	.wp-tbl.wp-tbl--nostack {
		display: table;
	}
	.wp-tbl--nostack tbody {
		display: table-row-group;
	}
	.wp-tbl--nostack thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
	.wp-tbl--nostack tr {
		display: table-row;
		padding: 0;
		border-bottom: 0;
	}
	.wp-tbl--nostack th,
	.wp-tbl--nostack td,
	.wp-tbl--nostack tbody th {
		display: table-cell;
		padding: 0.55rem 0.5rem;
		border-bottom: 1px solid var(--u-rule);
	}
	.wp-tbl--nostack td[data-label]::before,
	.wp-tbl--nostack th[data-label]::before {
		content: none;
	}
	.wp-tbl--nostack td.is-num {
		text-align: right;
	}

	/* Stacked, a data table is as long as its rows: the page scrolls it,
	   not a box one card tall. Each row is a card, its stripe inside it. */
	.wp-tbl-wrap--scroll.wp-tbl-wrap--stack {
		max-height: none;
	}
	.wp-tbl--data:not(.wp-tbl--nostack) tr {
		padding: 0.75rem;
	}
	.wp-tbl--data:not(.wp-tbl--nostack) td,
	.wp-tbl--data:not(.wp-tbl--nostack) tbody th {
		padding: 0.15rem 0;
	}
	/* Its sort buttons stay on screen, a bar over the cards: a control the
	   keyboard reaches is one the reader can see (WCAG 2.4.7). A head that
	   does not sort stays for assistive technology only. */
	.wp-tbl--sortable:not(.wp-tbl--nostack) thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
	.wp-tbl--sortable:not(.wp-tbl--nostack) thead tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 1.25rem;
		padding: 0.35rem 0.75rem;
		border-bottom: 1px solid var(--u-rule-strong);
	}
	.wp-tbl--sortable:not(.wp-tbl--nostack) thead th {
		position: static;
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
	}
	.wp-tbl--sortable:not(.wp-tbl--nostack) thead th:not(.is-sortable) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}