/*
 * Thought.global — The Brain.
 *
 * Self-contained. Every selector is prefixed `sh-brain`, so nothing here can
 * reach Constellation, Atlas, thinker, debate or archive markup, and nothing
 * is declared on a bare element, class or custom property outside that
 * prefix. Colours are inherited from the shared Thought tokens where they
 * exist, with literal fallbacks so the page is correct even if it is ever
 * rendered without thought-profile.css.
 *
 * The page is a diagrammatic plate: warm paper, hairline rules, ink figures.
 * It inverts to the Constellation's night ground for the closing network, so
 * the tour ends by walking into the map it has been describing.
 *
 * Motion is used only to draw a relationship, always one-shot, always
 * suppressed under prefers-reduced-motion, and never required to understand
 * anything on the page.
 */

.sh-brain {
	--b-serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
	--b-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--b-paper: var(--thought-bg, #f7f6f2);
	--b-surface: #fff;
	--b-sunk: #f2f0ea;
	--b-ink: var(--thought-ink, #191918);
	--b-muted: var(--thought-muted, #66645f);
	--b-faint: var(--thought-faint, #8b8881);
	--b-line: var(--thought-line, #dedbd4);
	--b-rule: #c9c3b9;
	--b-accent: var(--thought-accent, #665b73);
	--b-accent-soft: var(--thought-accent-soft, #eeeaf1);
	--b-warm: var(--thought-warm, #a16f45);

	/* The Constellation's relationship palette, reused verbatim. */
	--b-support: #3f6fb0;
	--b-conflict: #b0433f;
	--b-tension: #7a5aa6;
	--b-convergence: #3f8f6a;
	--b-center: #8a7a52;

	--b-night: #111b30;
	--b-night-2: #0d1729;
	--b-night-ink: #eef0f7;

	--b-shell: min(1280px, calc(100% - clamp(28px, 7vw, 104px)));
	--b-radius: 14px;

	display: block;
	max-width: 100%;
	/* The closing night section carries its own bottom padding and should meet
	   the site footer directly, with no strip of paper between them. */
	padding: 0;
	background: var(--b-paper);
	color: var(--b-ink);
	font-family: var(--b-sans);
	overflow: clip;
}

/* Parent-theme heading palettes must not leak in. */
.sh-brain h1,
.sh-brain h2,
.sh-brain h3,
.sh-brain h4 {
	color: var(--b-ink);
	text-wrap: balance;
}

.sh-brain a {
	color: var(--b-accent);
	text-decoration-color: color-mix(in srgb, var(--b-accent) 40%, transparent);
	text-underline-offset: 3px;
}

.sh-brain a:hover,
.sh-brain a:focus-visible {
	color: var(--b-ink);
}

/*
 * Visible focus is a guarantee, not a preference. The page builder loaded on
 * this site removes outlines at a specificity that would otherwise win, so the
 * indicator is asserted here for every focusable thing the page contains.
 */
.sh-brain :focus-visible,
.sh-brain a:focus-visible,
.sh-brain button:focus-visible,
.sh-brain [tabindex]:focus-visible {
	outline: 2px solid var(--b-accent) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

.sh-brain .sh-brain-whole :focus-visible,
.sh-brain .sh-brain-whole a:focus-visible,
.sh-brain .sh-brain-whole button:focus-visible {
	outline-color: #cdbdf0 !important;
}

/*
 * Scoped reset. The shared site loads a page builder kit plus two parent
 * stylesheets, several of which style bare `button`, `blockquote` and `figure`
 * at element level. This page's controls are plain semantic buttons, so the
 * reset is declared once here rather than fought class by class. Everything
 * below is inside .sh-brain and cannot reach any other Thought markup.
 */
.sh-brain button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}

.sh-brain button:hover,
.sh-brain button:focus {
	background: none;
	box-shadow: none;
}

.sh-brain blockquote,
.sh-brain figure,
.sh-brain dl,
.sh-brain dd {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	quotes: none;
}

.sh-brain blockquote::before,
.sh-brain blockquote::after { content: none; }

.sh-brain .sh-brain-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	width: var(--b-shell);
	margin: 0 auto;
	padding: 24px 0 0;
	font: 700 12px/1.4 var(--b-sans);
	color: var(--b-muted);
}

.sh-brain .sh-brain-breadcrumbs a { color: inherit; text-decoration: none; }
.sh-brain .sh-brain-breadcrumbs a:hover { color: var(--b-accent); }
.sh-brain .sh-brain-breadcrumbs em { font-style: normal; color: var(--b-ink); }

/* ------------------------------------------------------------------ shared */

.sh-brain .sh-brain-section {
	position: relative;
	width: var(--b-shell);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 118px) 0 clamp(20px, 3vw, 34px);
	border-top: 1px solid var(--b-line);
}

.sh-brain .sh-brain-section:first-of-type { border-top: 0; }

.sh-brain .sh-brain-eyebrow {
	margin: 0;
	color: var(--b-accent);
	font: 800 11px/1.3 var(--b-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-title {
	max-width: 24ch;
	margin: 14px 0 0;
	font: 400 clamp(33px, 4.5vw, 60px)/1.03 var(--b-serif);
	letter-spacing: -.032em;
}

.sh-brain .sh-brain-deck {
	max-width: 62ch;
	margin: 20px 0 0;
	color: var(--b-muted);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.62;
}

.sh-brain .sh-brain-head { margin-bottom: clamp(30px, 4vw, 54px); }

.sh-brain .sh-brain-prose { max-width: 60ch; }
.sh-brain .sh-brain-prose--wide { max-width: 74ch; margin-bottom: clamp(30px, 4vw, 52px); }

.sh-brain .sh-brain-prose p {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.78;
	color: color-mix(in srgb, var(--b-ink) 88%, var(--b-muted));
}

.sh-brain .sh-brain-prose p:last-child { margin-bottom: 0; }
.sh-brain .sh-brain-prose strong { color: var(--b-ink); }
.sh-brain .sh-brain-prose em { font-style: italic; }

.sh-brain .sh-brain-split {
	display: grid;
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
}

.sh-brain .sh-brain-figure-title {
	margin: 0 0 16px;
	color: var(--b-faint);
	font: 800 11px/1.3 var(--b-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-caption {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--b-line);
	color: var(--b-muted);
	font-size: 13.5px;
	line-height: 1.62;
}

.sh-brain .sh-brain-caption__tag {
	display: inline-block;
	margin-right: 9px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--b-accent-soft);
	color: var(--b-accent);
	font: 800 10px/1.5 var(--b-sans);
	letter-spacing: .11em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.sh-brain .sh-brain-cta {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--b-accent) 45%, transparent);
}

.sh-brain .sh-brain-cta:hover,
.sh-brain .sh-brain-cta:focus-visible { border-bottom-color: currentColor; }
.sh-brain .sh-brain-cta span { transition: transform .2s ease; }
.sh-brain .sh-brain-cta:hover span { transform: translateX(3px); }

/* A live figure from the record, called out as such. */
/*
 * Block, not flex: the figure and its link are inline prose that must reflow
 * as one paragraph at any width, with the mark held in the gutter.
 */
.sh-brain .sh-brain-live {
	position: relative;
	margin: clamp(26px, 3vw, 40px) 0 0;
	padding: 15px 18px 15px 36px;
	border: 1px solid var(--b-line);
	border-left: 3px solid var(--b-warm);
	border-radius: 4px var(--b-radius) var(--b-radius) 4px;
	background: var(--b-surface);
	color: var(--b-muted);
	font-size: 14.5px;
	line-height: 1.62;
}

.sh-brain .sh-brain-live__mark {
	position: absolute;
	top: 24px;
	left: 18px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--b-warm);
}

.sh-brain .sh-brain-live a { font-weight: 700; }

/* Node-kind glyphs: shape carries the meaning, colour only reinforces it. */
.sh-brain .sh-brain-glyph {
	flex: none;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--b-accent);
}

.sh-brain .sh-brain-glyph__ring { opacity: .5; }
.sh-brain .sh-brain-glyph__cut { opacity: .55; }
.sh-brain .sh-brain-glyph__open { stroke-dasharray: 5 5.5; }
.sh-brain .sh-brain-glyph--thinker { color: var(--b-ink); }
.sh-brain .sh-brain-glyph--state { color: var(--b-tension); }
.sh-brain .sh-brain-glyph--thought { color: var(--b-ink); }
.sh-brain .sh-brain-glyph--idea { color: var(--b-center); }
.sh-brain .sh-brain-glyph--debate { color: var(--b-conflict); }
.sh-brain .sh-brain-glyph--observed { color: var(--b-support); }
.sh-brain .sh-brain-glyph--probe { color: var(--b-convergence); }
.sh-brain .sh-brain-glyph--question { color: var(--b-warm); }

/* --------------------------------------------------------------------- hero */

.sh-brain .sh-brain-hero {
	position: relative;
	width: 100%;
	padding: clamp(52px, 8vw, 116px) 0 clamp(40px, 5vw, 64px);
	overflow: hidden;
	border-bottom: 1px solid var(--b-line);
}

.sh-brain .sh-brain-hero__field {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 96%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 96%);
}

/*
 * A paper scrim over the text column. The field should be forming beside the
 * opening statement, not behind it — legibility wins over atmosphere.
 */
.sh-brain .sh-brain-hero__field::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Narrow screens have no free column, so the scrim protects the text from
	   above and lets the field show through beneath it instead. */
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--b-paper) 92%, transparent) 0%,
		color-mix(in srgb, var(--b-paper) 78%, transparent) 46%,
		transparent 88%
	);
}

.sh-brain .sh-brain-field {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The hero field is the closing network's geometry at a distance. It keeps the
 * relationship palette, heavily muted: enough that the shape of the structure
 * is present behind the opening statement, never enough to compete with it.
 */
.sh-brain .sh-brain-field__edge {
	fill: none;
	stroke: var(--b-accent);
	stroke-width: 1;
	opacity: .16;
}

.sh-brain .sh-brain-field__edge--support { stroke: var(--b-support); }
.sh-brain .sh-brain-field__edge--convergence { stroke: var(--b-convergence); }
.sh-brain .sh-brain-field__edge--tension { stroke: var(--b-tension); }
.sh-brain .sh-brain-field__edge--conflict,
.sh-brain .sh-brain-field__edge--contested { stroke: var(--b-conflict); opacity: .2; }
.sh-brain .sh-brain-field__edge--leaves { stroke: var(--b-warm); }

.sh-brain .sh-brain-field__node {
	fill: var(--b-accent);
	opacity: .22;
}

.sh-brain .sh-brain-field__node--idea { fill: var(--b-center); opacity: .3; }
.sh-brain .sh-brain-field__node--debate { fill: var(--b-conflict); opacity: .26; }
.sh-brain .sh-brain-field__node--question { fill: var(--b-warm); opacity: .26; }

.sh-brain .sh-brain-hero__inner {
	position: relative;
	width: var(--b-shell);
	margin: 0 auto;
}

.sh-brain .sh-brain-eyebrow--hero { color: var(--b-warm); }

.sh-brain .sh-brain-hero__title {
	max-width: 18ch;
	margin: 18px 0 0;
	font: 400 clamp(58px, 12vw, 158px)/.88 var(--b-serif);
	letter-spacing: -.05em;
}

.sh-brain .sh-brain-hero__deck {
	max-width: 58ch;
	margin: clamp(24px, 3vw, 38px) 0 0;
	font-size: clamp(18px, 1.9vw, 24px);
	line-height: 1.52;
	color: color-mix(in srgb, var(--b-ink) 92%, var(--b-muted));
}

.sh-brain .sh-brain-hero__sub {
	max-width: 54ch;
	margin: 18px 0 0;
	color: var(--b-muted);
	font-size: 16px;
	line-height: 1.68;
}

.sh-brain .sh-brain-vitals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: clamp(34px, 4vw, 56px) 0 0;
	padding: 0;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-vitals__item {
	padding: 18px 20px 20px;
	background: var(--b-surface);
}

.sh-brain .sh-brain-vitals dt {
	margin: 0;
	color: var(--b-ink);
	font: 700 12px/1.5 var(--b-sans);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-vitals__value {
	display: block;
	margin-bottom: 2px;
	font: 400 clamp(30px, 3.2vw, 44px)/1 var(--b-serif);
	letter-spacing: -.03em;
	text-transform: none;
}

.sh-brain .sh-brain-vitals dd {
	margin: 8px 0 0;
	color: var(--b-muted);
	font-size: 13px;
	line-height: 1.55;
}

.sh-brain .sh-brain-jump { margin: clamp(28px, 3vw, 40px) 0 0; }

.sh-brain .sh-brain-jump ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-brain .sh-brain-jump a {
	display: block;
	padding: 8px 14px;
	border: 1px solid var(--b-line);
	border-radius: 999px;
	background: var(--b-surface);
	color: var(--b-muted);
	font: 700 12.5px/1.3 var(--b-sans);
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.sh-brain .sh-brain-jump a:hover,
.sh-brain .sh-brain-jump a:focus-visible {
	border-color: var(--b-accent);
	background: var(--b-accent-soft);
	color: var(--b-accent);
}

/* ----------------------------------------------------------------- contrast */

.sh-brain .sh-brain-contrast {
	display: grid;
	gap: clamp(20px, 2.5vw, 32px);
}

.sh-brain .sh-brain-contrast__panel {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(22px, 2.6vw, 34px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

/* Both panels stand the same height so the comparison reads as one figure. */
.sh-brain .sh-brain-contrast__panel .sh-brain-caption { margin-top: auto; }

.sh-brain .sh-brain-contrast__panel--structure {
	border-color: color-mix(in srgb, var(--b-accent) 34%, var(--b-line));
	box-shadow: 0 16px 44px -30px rgba(31, 29, 25, .5);
}

.sh-brain .sh-brain-contrast__name {
	margin: 0 0 4px;
	font: 400 clamp(21px, 2vw, 27px)/1.16 var(--b-serif);
	letter-spacing: -.02em;
}

.sh-brain .sh-brain-contrast__art {
	display: grid;
	flex: 1;
	align-content: center;
	margin: clamp(14px, 2vw, 24px) 0 clamp(14px, 2vw, 24px);
}

.sh-brain .sh-brain-contrast__art svg { display: block; width: 100%; height: auto; }

.sh-brain .sh-brain-pass__line { stroke: var(--b-rule); stroke-width: 1.4; }
.sh-brain .sh-brain-pass__dot { fill: var(--b-surface); stroke: var(--b-ink); stroke-width: 1.5; }
.sh-brain .sh-brain-pass__head { fill: none; stroke: var(--b-rule); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sh-brain .sh-brain-pass__labels {
	display: flex;
	justify-content: space-between;
	margin: 6px 0 0;
	padding: 0 4px;
	list-style: none;
}

.sh-brain .sh-brain-pass__labels li {
	color: var(--b-muted);
	font: 700 11.5px/1.4 var(--b-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-mesh__node { fill: var(--b-surface); stroke: var(--b-ink); stroke-width: 1.5; }
.sh-brain .sh-brain-mesh__edge { stroke-width: 1.5; stroke-linecap: round; }
.sh-brain .sh-brain-mesh__edge--plain { stroke: var(--b-rule); }
.sh-brain .sh-brain-mesh__edge--conflict { stroke: var(--b-conflict); }
.sh-brain .sh-brain-mesh__edge--convergence { stroke: var(--b-convergence); }
.sh-brain .sh-brain-mesh__edge--tension { stroke: var(--b-tension); stroke-dasharray: 5 4; }
.sh-brain .sh-brain-mesh__edge--support { stroke: var(--b-support); }

/* ------------------------------------------------------------- the boundary */

.sh-brain .sh-brain-bound { margin: 0; }

.sh-brain .sh-brain-bound__grid {
	display: grid;
	gap: clamp(16px, 2vw, 26px);
}

.sh-brain .sh-brain-bound__inside,
.sh-brain .sh-brain-bound__outside {
	position: relative;
	padding: clamp(22px, 2.6vw, 32px);
	border-radius: var(--b-radius);
}

.sh-brain .sh-brain-bound__inside {
	border: 1px solid color-mix(in srgb, var(--b-ink) 22%, var(--b-line));
	background: var(--b-surface);
	overflow: hidden;
}

.sh-brain .sh-brain-bound__ring {
	position: absolute;
	top: -46%;
	right: -22%;
	width: 62%;
	aspect-ratio: 1;
	border: 1px dashed color-mix(in srgb, var(--b-accent) 42%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

.sh-brain .sh-brain-bound__outside {
	border: 1px dashed var(--b-line);
	background: var(--b-sunk);
}

.sh-brain .sh-brain-bound__label {
	position: relative;
	margin: 0 0 14px;
	font: 800 10.5px/1.4 var(--b-sans);
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--b-accent);
}

.sh-brain .sh-brain-bound__outside .sh-brain-bound__label { color: var(--b-faint); }

.sh-brain .sh-brain-bound ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-brain .sh-brain-bound li {
	position: relative;
	padding: 8px 0 8px 26px;
	border-top: 1px solid var(--b-line);
	font-size: 15px;
	line-height: 1.5;
}

.sh-brain .sh-brain-bound li:first-child { border-top: 0; }

.sh-brain .sh-brain-bound__inside li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--b-ink);
}

.sh-brain .sh-brain-bound__outside li { color: var(--b-faint); }

.sh-brain .sh-brain-bound__outside li::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid currentColor;
}

.sh-brain .sh-brain-bound__outside li::after {
	content: "";
	position: absolute;
	top: 19px;
	left: 4px;
	width: 8px;
	height: 1px;
	background: currentColor;
}

/* ------------------------------------------------------------- the temporal rail */

.sh-brain .sh-brain-section--time { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--b-accent-soft) 55%, transparent) 45%, transparent); }

.sh-brain .sh-brain-rail {
	margin: 0;
	padding: clamp(22px, 3vw, 38px);
	border: 1px solid color-mix(in srgb, var(--b-accent) 26%, var(--b-line));
	border-radius: var(--b-radius);
	background: var(--b-surface);
	box-shadow: 0 22px 54px -40px rgba(31, 29, 25, .55);
}

.sh-brain .sh-brain-rail__track {
	position: relative;
	display: grid;
	gap: 6px;
	margin: 0 0 clamp(22px, 3vw, 34px);
	padding: 0 0 0 22px;
}

/* The rail itself: vertical on small screens, horizontal from 720px. */
.sh-brain .sh-brain-rail__track::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 7px;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--b-rule) 12%, var(--b-rule) 88%, transparent);
}

.sh-brain .sh-brain-rail__stop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 8px 12px 8px 0;
	border: 0;
	background: none;
	color: var(--b-muted);
	font: 700 13px/1.3 var(--b-sans);
	text-align: left;
	cursor: pointer;
	transition: color .18s ease;
}

.sh-brain .sh-brain-rail__dot {
	position: absolute;
	left: -22px;
	width: 15px;
	height: 15px;
	border: 1px solid var(--b-rule);
	border-radius: 50%;
	background: var(--b-surface);
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sh-brain .sh-brain-rail__year {
	font: 400 clamp(22px, 2.4vw, 30px)/1 var(--b-serif);
	letter-spacing: -.02em;
	color: var(--b-muted);
	transition: color .2s ease;
}

.sh-brain .sh-brain-rail__stop:hover .sh-brain-rail__year,
.sh-brain .sh-brain-rail__stop:hover { color: var(--b-ink); }

.sh-brain .sh-brain-rail__stop.is-active .sh-brain-rail__year { color: var(--b-ink); }

.sh-brain .sh-brain-rail__stop.is-active .sh-brain-rail__dot {
	border-color: var(--b-tension);
	background: var(--b-tension);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--b-tension) 16%, transparent);
}

.sh-brain .sh-brain-state { display: none; }
.sh-brain .sh-brain-state.is-active { display: block; }

.sh-brain .sh-brain-state__where {
	margin: 0 0 clamp(18px, 2.2vw, 26px);
	font: 400 clamp(20px, 2.2vw, 28px)/1.24 var(--b-serif);
	letter-spacing: -.02em;
	color: var(--b-ink);
}

.sh-brain .sh-brain-state__year {
	display: inline-block;
	margin-right: 10px;
	padding: 3px 10px 4px;
	border-radius: 999px;
	background: var(--b-ink);
	color: var(--b-paper);
	font: 800 12px/1.4 var(--b-sans);
	letter-spacing: .08em;
	vertical-align: 4px;
}

.sh-brain .sh-brain-state__cols {
	display: grid;
	gap: clamp(18px, 2.4vw, 32px);
}

.sh-brain .sh-brain-state__col h4 {
	margin: 0 0 12px;
	font: 800 10.5px/1.4 var(--b-sans);
	letter-spacing: .17em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-state__col--has h4 { color: var(--b-convergence); }
.sh-brain .sh-brain-state__col--lacks h4 { color: var(--b-conflict); }

.sh-brain .sh-brain-state__col ul { margin: 0; padding: 0; list-style: none; }

.sh-brain .sh-brain-state__col li {
	position: relative;
	padding: 9px 0 9px 24px;
	border-top: 1px solid var(--b-line);
	font-size: 15px;
	line-height: 1.5;
}

.sh-brain .sh-brain-state__col li:first-child { border-top: 0; }

.sh-brain .sh-brain-state__col--has li::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--b-convergence);
}

.sh-brain .sh-brain-state__col--lacks { color: var(--b-faint); }

.sh-brain .sh-brain-state__col--lacks li::before,
.sh-brain .sh-brain-state__col--lacks li::after {
	content: "";
	position: absolute;
	top: 21px;
	left: 1px;
	width: 12px;
	height: 1px;
	background: var(--b-conflict);
}

.sh-brain .sh-brain-state__col--lacks li::before { transform: rotate(45deg); }
.sh-brain .sh-brain-state__col--lacks li::after { transform: rotate(-45deg); }

/* --------------------------------------------------------- the real encounter */

.sh-brain .sh-brain-encounter {
	margin: clamp(26px, 3.4vw, 46px) 0 0;
	padding: clamp(22px, 3vw, 38px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

.sh-brain .sh-brain-encounter__intro {
	max-width: 62ch;
	margin: 0 0 clamp(22px, 3vw, 32px);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--b-muted);
}

.sh-brain .sh-brain-encounter__grid {
	display: grid;
	gap: clamp(14px, 2vw, 20px);
	align-items: stretch;
}

.sh-brain .sh-brain-encounter__side {
	margin: 0;
	padding: clamp(18px, 2.2vw, 26px);
	border-radius: 10px;
	background: var(--b-sunk);
	border-left: 3px solid var(--b-rule);
}

.sh-brain .sh-brain-encounter__side--earlier { border-left-color: var(--b-center); }
.sh-brain .sh-brain-encounter__side--later { border-left-color: var(--b-tension); }

.sh-brain .sh-brain-encounter__stamp {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 12px;
}

.sh-brain .sh-brain-encounter__moment {
	font: 400 clamp(26px, 3vw, 38px)/1 var(--b-serif);
	letter-spacing: -.03em;
	color: var(--b-ink);
}

.sh-brain .sh-brain-encounter__who {
	font: 700 12px/1.4 var(--b-sans);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--b-muted);
}

.sh-brain .sh-brain-encounter__quote {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.66;
	color: color-mix(in srgb, var(--b-ink) 90%, var(--b-muted));
}

.sh-brain .sh-brain-encounter__quote::before { content: "\201C"; }
.sh-brain .sh-brain-encounter__quote::after { content: "\201D"; }

.sh-brain .sh-brain-encounter__seam {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 44px;
}

/* The hairline runs the full height of the taller quote, in either axis. */
.sh-brain .sh-brain-encounter__seam::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 6%;
	right: 6%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--b-rule) 18%, var(--b-rule) 82%, transparent);
}

/*
 * Two marks converging on the seam. Stacked layout presses vertically, so the
 * marks read as-drawn; the side-by-side layout rotates them onto the axis.
 */
.sh-brain .sh-brain-encounter__seam svg {
	position: relative;
	display: block;
	width: 34px;
	height: 34px;
	padding: 5px 0;
	background: var(--b-surface);
	fill: none;
	stroke: color-mix(in srgb, var(--b-ink) 42%, transparent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sh-brain .sh-brain-encounter__chair {
	margin: clamp(20px, 2.6vw, 30px) 0 0;
	padding: clamp(18px, 2.2vw, 26px);
	border: 1px solid var(--b-line);
	border-top: 3px solid var(--b-ink);
	border-radius: 3px 3px 10px 10px;
	background: var(--b-paper);
}

.sh-brain .sh-brain-encounter__chair-name {
	margin: 0 0 10px;
	font: 800 10.5px/1.4 var(--b-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--b-ink);
}

.sh-brain .sh-brain-encounter__chair-text {
	margin: 0;
	font: 400 clamp(16px, 1.7vw, 19px)/1.62 var(--b-serif);
	color: var(--b-ink);
}

.sh-brain .sh-brain-encounter__meta {
	max-width: 74ch;
	margin: clamp(18px, 2.4vw, 26px) 0 0;
	color: var(--b-muted);
	font-size: 14.5px;
	line-height: 1.68;
}

/* ------------------------------------------------------------------- the spine */

.sh-brain .sh-brain-chain { margin: 0; }

.sh-brain .sh-brain-chain__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sh-brain .sh-brain-chain__step {
	position: relative;
	display: grid;
	grid-template-columns: 20px 26px minmax(0, 1fr);
	gap: 4px 16px;
	padding: 18px 20px 26px;
	border: 1px solid var(--b-line);
	border-bottom: 0;
	background: var(--b-surface);
}

/* The step number: this is an order, and the order is the claim. */
.sh-brain .sh-brain-chain__index {
	grid-row: span 2;
	align-self: start;
	margin-top: 2px;
	color: var(--b-faint);
	font: 400 19px/1.1 var(--b-serif);
}

.sh-brain .sh-brain-chain__step:first-child { border-radius: var(--b-radius) var(--b-radius) 0 0; }

.sh-brain .sh-brain-chain__step:last-child {
	border-bottom: 1px solid var(--b-line);
	border-radius: 0 0 var(--b-radius) var(--b-radius);
	padding-bottom: 20px;
}

/*
 * The connector between steps: a short rule down the gutter with a chevron on
 * the seam, in ink rather than hairline grey. The direction has to be visible
 * at a glance — it is the one thing this figure exists to assert.
 */
/*
 * Both marks are lifted above the following card: a sibling step is itself
 * positioned, so an unlayered connector hanging over the seam would be
 * painted over by the step it points at — which is exactly what used to make
 * this figure read as four unrelated cards.
 */
.sh-brain .sh-brain-chain__step:not(:last-child)::before {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: -3px;
	left: 68px;
	width: 1.5px;
	height: 15px;
	background: var(--b-accent);
}

.sh-brain .sh-brain-chain__step:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: -9px;
	left: 63.5px;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--b-accent);
	border-bottom: 1.5px solid var(--b-accent);
	transform: rotate(45deg);
}

.sh-brain .sh-brain-chain__name {
	grid-column: 3;
	font: 400 clamp(19px, 1.9vw, 24px)/1.2 var(--b-serif);
	letter-spacing: -.02em;
}

.sh-brain .sh-brain-chain__note {
	grid-column: 3;
	color: var(--b-muted);
	font-size: 14px;
	line-height: 1.55;
}

.sh-brain .sh-brain-chain .sh-brain-glyph { grid-row: span 2; margin-top: 3px; }

/* ------------------------------------------------------- object + idea lists */

.sh-brain .sh-brain-objects,
.sh-brain .sh-brain-idearow,
.sh-brain .sh-brain-outcome,
.sh-brain .sh-brain-gate,
.sh-brain .sh-brain-questions,
.sh-brain .sh-brain-moving { margin: clamp(30px, 4vw, 56px) 0 0; }

.sh-brain .sh-brain-objects__title {
	margin: 0 0 18px;
	color: var(--b-faint);
	font: 800 11px/1.3 var(--b-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-objects__list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-object {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	background: var(--b-surface);
}

.sh-brain .sh-brain-object__name {
	display: block;
	font: 400 clamp(17px, 1.7vw, 21px)/1.28 var(--b-serif);
	letter-spacing: -.018em;
	text-decoration: none;
	color: var(--b-ink);
}

.sh-brain .sh-brain-object__name:hover,
.sh-brain .sh-brain-object__name:focus-visible { color: var(--b-accent); }

.sh-brain .sh-brain-object__by {
	margin: 7px 0 0;
	color: var(--b-muted);
	font-size: 13.5px;
}

.sh-brain .sh-brain-objects__more { margin: 20px 0 0; }

.sh-brain .sh-brain-idearow__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-brain .sh-brain-idearow__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--b-line);
	border-left: 3px solid var(--b-rule);
	border-radius: 3px 999px 999px 3px;
	background: var(--b-surface);
	font-size: 14.5px;
}

.sh-brain .sh-brain-idearow__item.is-conflict { border-left-color: var(--b-conflict); }
.sh-brain .sh-brain-idearow__item.is-tension { border-left-color: var(--b-tension); }
.sh-brain .sh-brain-idearow__item.is-support { border-left-color: var(--b-support); }
.sh-brain .sh-brain-idearow__item.is-convergence { border-left-color: var(--b-convergence); }

.sh-brain .sh-brain-idearow__item a { text-decoration: none; color: var(--b-ink); font-weight: 600; }
.sh-brain .sh-brain-idearow__item a:hover { color: var(--b-accent); }

.sh-brain .sh-brain-idearow__count {
	color: var(--b-faint);
	font: 700 11px/1.4 var(--b-sans);
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- the dossier */

.sh-brain .sh-brain-dossier { margin: 0; }

.sh-brain .sh-brain-dossier__card {
	padding: clamp(22px, 2.6vw, 32px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
	box-shadow: 0 18px 44px -34px rgba(31, 29, 25, .5);
}

.sh-brain .sh-brain-dossier__name {
	margin: 0;
	font: 400 clamp(23px, 2.5vw, 33px)/1.16 var(--b-serif);
	letter-spacing: -.026em;
}

.sh-brain .sh-brain-dossier__name a { color: var(--b-ink); text-decoration: none; }
.sh-brain .sh-brain-dossier__name a:hover { color: var(--b-accent); }

.sh-brain .sh-brain-dossier__state {
	display: inline-block;
	margin: 12px 0 0;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--b-sunk);
	color: var(--b-muted);
	font: 700 11.5px/1.5 var(--b-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-dossier__state--conflict { background: #f6e0dd; color: #8b3a34; }
.sh-brain .sh-brain-dossier__state--tension { background: #ece5f3; color: #61478a; }
.sh-brain .sh-brain-dossier__state--support { background: #e2e9f2; color: #33567c; }
.sh-brain .sh-brain-dossier__state--convergence { background: #e4efe2; color: #34663f; }

.sh-brain .sh-brain-dossier__rows { margin: clamp(18px, 2.2vw, 26px) 0 0; }

.sh-brain .sh-brain-dossier__rows > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 18px;
	padding: 11px 0;
	border-top: 1px solid var(--b-line);
}

.sh-brain .sh-brain-dossier__rows dt {
	margin: 0;
	color: var(--b-muted);
	font-size: 13.5px;
}

.sh-brain .sh-brain-dossier__rows dd {
	margin: 0;
	color: var(--b-ink);
	font-weight: 700;
	font-size: 14.5px;
	text-align: right;
}

/* ------------------------------------------------------------------ the arena */

.sh-brain .sh-brain-section--debates { background: linear-gradient(180deg, transparent, color-mix(in srgb, #f6e0dd 40%, transparent) 42%, transparent); }

.sh-brain .sh-brain-arena {
	margin: 0;
	padding: clamp(22px, 3vw, 38px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

.sh-brain .sh-brain-arena__grid {
	display: grid;
	gap: clamp(14px, 2vw, 22px);
	align-items: center;
}

.sh-brain .sh-brain-arena__side {
	position: relative;
	padding: clamp(20px, 2.4vw, 30px) 18px;
	border-radius: 10px;
	background: var(--b-sunk);
	text-align: center;
	overflow: hidden;
}

.sh-brain .sh-brain-arena__label {
	margin: 0;
	font: 800 10.5px/1.4 var(--b-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--b-muted);
}

/*
 * What leans on the seam is a position, so it is drawn as one: the idea mark,
 * not an anonymous disc. The offset ring behind it is the pressure.
 */
.sh-brain .sh-brain-arena__mark {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 14px auto 12px;
	border: 1.5px solid color-mix(in srgb, var(--b-center) 55%, transparent);
	border-radius: 50%;
	background: var(--b-surface);
}

.sh-brain .sh-brain-arena__mark .sh-brain-glyph { width: 22px; height: 22px; }

.sh-brain .sh-brain-arena__side--a .sh-brain-arena__mark { box-shadow: 0 7px 0 -3px color-mix(in srgb, var(--b-ink) 26%, transparent); }
.sh-brain .sh-brain-arena__side--b .sh-brain-arena__mark { box-shadow: 0 -7px 0 -3px color-mix(in srgb, var(--b-ink) 26%, transparent); }

.sh-brain .sh-brain-arena__hint {
	margin: 0;
	color: var(--b-faint);
	font-size: 12.5px;
	line-height: 1.5;
}

/* Each position leans on the seam. Stacked layout: it presses vertically. */
.sh-brain .sh-brain-arena__side::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 13px;
	height: 13px;
	margin-left: -7px;
	border-top: 1.5px solid var(--b-ink);
	border-right: 1.5px solid var(--b-ink);
}

.sh-brain .sh-brain-arena__side--a::after { bottom: 9px; transform: rotate(135deg); }
.sh-brain .sh-brain-arena__side--b::after { top: 9px; transform: rotate(-45deg); }

.sh-brain .sh-brain-arena__seam {
	position: relative;
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: 10px;
	overflow: hidden;
}

.sh-brain .sh-brain-arena__marker {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 2px 13px;
	padding: 13px 16px;
	background: var(--b-surface);
}

.sh-brain .sh-brain-arena__marker strong {
	grid-column: 2;
	font-size: 14.5px;
	font-weight: 700;
}

.sh-brain .sh-brain-arena__marker span:not(.sh-brain-arena__glyph) {
	grid-column: 2;
	color: var(--b-muted);
	font-size: 13px;
	line-height: 1.5;
}

.sh-brain .sh-brain-arena__glyph {
	grid-row: span 2;
	width: 16px;
	height: 16px;
	margin-top: 3px;
}

.sh-brain .sh-brain-arena__marker--objection .sh-brain-arena__glyph {
	background: var(--b-conflict);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sh-brain .sh-brain-arena__marker--concession .sh-brain-arena__glyph {
	background: var(--b-convergence);
	clip-path: polygon(50% 100%, 100% 0, 0 0);
}

.sh-brain .sh-brain-arena__marker--abandoned .sh-brain-arena__glyph {
	border: 1.5px solid var(--b-faint);
	background:
		linear-gradient(45deg, transparent 45%, var(--b-faint) 45%, var(--b-faint) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--b-faint) 45%, var(--b-faint) 55%, transparent 55%);
}

.sh-brain .sh-brain-arena__marker--survived .sh-brain-arena__glyph {
	background: var(--b-ink);
	border-radius: 3px;
}

.sh-brain .sh-brain-arena__marker--question .sh-brain-arena__glyph {
	border: 1.5px dashed var(--b-warm);
	border-radius: 50%;
}

/* ------------------------------------------------------- recorded outcome */

.sh-brain .sh-brain-outcome__topic {
	margin: 0;
	font: 400 clamp(20px, 2.2vw, 28px)/1.22 var(--b-serif);
	letter-spacing: -.024em;
}

.sh-brain .sh-brain-outcome__topic a { color: var(--b-ink); text-decoration: none; }
.sh-brain .sh-brain-outcome__topic a:hover { color: var(--b-accent); }

.sh-brain .sh-brain-outcome__cast {
	margin: 10px 0 0;
	color: var(--b-muted);
	font: 700 12.5px/1.5 var(--b-sans);
	letter-spacing: .04em;
}

.sh-brain .sh-brain-outcome__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(14px, 1.8vw, 20px);
	margin: clamp(20px, 2.4vw, 28px) 0 0;
}

.sh-brain .sh-brain-outcome__block {
	padding: 18px 20px 20px;
	border: 1px solid var(--b-line);
	border-top: 3px solid var(--b-rule);
	border-radius: 3px 3px var(--b-radius) var(--b-radius);
	background: var(--b-surface);
}

.sh-brain .sh-brain-outcome__block--strengthened { border-top-color: var(--b-support); }
.sh-brain .sh-brain-outcome__block--challenged { border-top-color: var(--b-conflict); }
.sh-brain .sh-brain-outcome__block--revised { border-top-color: var(--b-tension); }
.sh-brain .sh-brain-outcome__block--converged { border-top-color: var(--b-convergence); }
.sh-brain .sh-brain-outcome__block--question { border-top-color: var(--b-warm); border-top-style: dashed; }

.sh-brain .sh-brain-outcome__block h4 {
	margin: 0 0 12px;
	font: 800 10.5px/1.4 var(--b-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--b-muted);
}

.sh-brain .sh-brain-outcome__block ul { margin: 0; padding: 0; list-style: none; }

.sh-brain .sh-brain-outcome__block li {
	padding: 7px 0;
	border-top: 1px solid var(--b-line);
	font-size: 14.5px;
	line-height: 1.5;
}

.sh-brain .sh-brain-outcome__block li:first-child { border-top: 0; }
.sh-brain .sh-brain-outcome__block--question li { font-style: italic; color: var(--b-warm); }

/* --------------------------------------------------------------- the gate */

.sh-brain .sh-brain-gate__grid {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

.sh-brain .sh-brain-gate__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

.sh-brain .sh-brain-gate__art { display: block; width: 132px; height: auto; }
.sh-brain .sh-brain-gate__from { fill: var(--b-ink); }
.sh-brain .sh-brain-gate__to { fill: none; stroke: var(--b-ink); stroke-width: 1.6; }
.sh-brain .sh-brain-gate__path { stroke: var(--b-ink); stroke-width: 1.6; }
.sh-brain .sh-brain-gate__head { fill: none; stroke: var(--b-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-brain .sh-brain-gate__stop { fill: none; stroke: var(--b-faint); stroke-width: 1.6; stroke-linecap: round; }
.sh-brain .sh-brain-gate__row--bounded .sh-brain-gate__path { stroke: var(--b-faint); stroke-dasharray: 5 5; }
.sh-brain .sh-brain-gate__row--bounded .sh-brain-gate__from { fill: var(--b-faint); }

.sh-brain .sh-brain-gate__row h4 {
	margin: 0 0 8px;
	font: 400 clamp(18px, 1.8vw, 22px)/1.2 var(--b-serif);
	letter-spacing: -.018em;
}

.sh-brain .sh-brain-gate__row p {
	margin: 0;
	max-width: 56ch;
	color: var(--b-muted);
	font-size: 14.5px;
	line-height: 1.66;
}

/* ---------------------------------------------------------- news aperture */

.sh-brain .sh-brain-aperture { margin: 0; }

.sh-brain .sh-brain-aperture__art {
	display: block;
	width: 100%;
	height: auto;
	padding: clamp(14px, 2vw, 22px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

.sh-brain .sh-brain-aperture__source { stroke: var(--b-ink); stroke-width: 2; stroke-linecap: round; }
.sh-brain .sh-brain-aperture__ray { stroke: var(--b-rule); stroke-width: .8; opacity: .8; }
.sh-brain .sh-brain-aperture__ray--out { stroke: var(--b-support); stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 1; }
.sh-brain .sh-brain-aperture__bracket { fill: none; stroke: var(--b-accent); stroke-width: 1.6; }
.sh-brain .sh-brain-aperture__slit { stroke: var(--b-accent); stroke-width: 3; stroke-linecap: round; }
.sh-brain .sh-brain-aperture__object { fill: var(--b-sunk); stroke: var(--b-support); stroke-width: 1.6; }
.sh-brain .sh-brain-aperture__tag { fill: none; stroke: var(--b-support); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.sh-brain .sh-brain-aperture__node { fill: var(--b-surface); stroke: var(--b-ink); stroke-width: 1.6; }
.sh-brain .sh-brain-aperture__edge { stroke: var(--b-rule); stroke-width: 1.4; }

.sh-brain .sh-brain-aperture__key,
.sh-brain .sh-brain-probe__key {
	display: grid;
	gap: 1px;
	margin: clamp(16px, 2vw, 22px) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: sh-brain-step;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-aperture__key li,
.sh-brain .sh-brain-probe__key li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 2px 14px;
	padding: 14px 18px;
	background: var(--b-surface);
	counter-increment: sh-brain-step;
}

.sh-brain .sh-brain-aperture__key li::before,
.sh-brain .sh-brain-probe__key li::before {
	content: counter(sh-brain-step);
	grid-row: span 2;
	align-self: start;
	color: var(--b-accent);
	font: 400 20px/1 var(--b-serif);
}

.sh-brain .sh-brain-aperture__key strong,
.sh-brain .sh-brain-probe__key strong { grid-column: 2; font-size: 14.5px; }

.sh-brain .sh-brain-aperture__key span,
.sh-brain .sh-brain-probe__key span {
	grid-column: 2;
	color: var(--b-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

/* -------------------------------------------------------------- the probe */

.sh-brain .sh-brain-section--research { background: linear-gradient(180deg, transparent, color-mix(in srgb, #e4efe2 42%, transparent) 42%, transparent); }

.sh-brain .sh-brain-probe { margin: 0; }

.sh-brain .sh-brain-probe__art {
	display: block;
	width: 100%;
	height: auto;
	padding: clamp(14px, 2vw, 22px);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	background: var(--b-surface);
}

.sh-brain .sh-brain-probe__question { fill: none; stroke: var(--b-warm); stroke-width: 1.6; stroke-dasharray: 6 6; }
.sh-brain .sh-brain-probe__evidence { fill: var(--b-convergence); }
.sh-brain .sh-brain-probe__record { fill: none; stroke: var(--b-ink); stroke-width: 1.6; }
.sh-brain .sh-brain-probe__out,
.sh-brain .sh-brain-probe__back { fill: none; stroke: var(--b-convergence); stroke-width: 1.5; stroke-dasharray: 7 6; }
.sh-brain .sh-brain-probe__back { stroke: var(--b-accent); }
.sh-brain .sh-brain-probe__gate { fill: none; stroke: var(--b-ink); stroke-width: 1.8; stroke-linecap: round; }
.sh-brain .sh-brain-probe__gate--lip { stroke-width: 1.6; }
.sh-brain .sh-brain-probe__pending { fill: none; stroke: var(--b-rule); stroke-width: 1.4; stroke-dasharray: 3 6; }

.sh-brain .sh-brain-questions__list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-questions__item {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	background: var(--b-surface);
}

.sh-brain .sh-brain-questions__text {
	margin: 0;
	font: 400 clamp(17px, 1.7vw, 21px)/1.36 var(--b-serif);
	letter-spacing: -.014em;
}

.sh-brain .sh-brain-questions__from {
	margin: 8px 0 0;
	color: var(--b-muted);
	font-size: 13px;
}

/* ------------------------------------------------------- the whole (night) */

.sh-brain .sh-brain-whole {
	width: 100%;
	margin-top: clamp(56px, 8vw, 118px);
	padding: 0;
	border-top: 0;
	background:
		radial-gradient(78% 60% at 16% 6%, rgba(72, 92, 142, .3), transparent 70%),
		radial-gradient(66% 66% at 88% 16%, rgba(73, 57, 115, .24), transparent 72%),
		linear-gradient(160deg, #17233a 0%, var(--b-night) 54%, var(--b-night-2) 100%);
	color: var(--b-night-ink);
}

.sh-brain .sh-brain-whole__inner {
	width: var(--b-shell);
	margin: 0 auto;
	padding: clamp(58px, 8vw, 118px) 0 clamp(50px, 7vw, 100px);
}

.sh-brain .sh-brain-whole h2,
.sh-brain .sh-brain-whole h3,
.sh-brain .sh-brain-whole h4 { color: var(--b-night-ink); }
.sh-brain .sh-brain-whole .sh-brain-eyebrow { color: #b7a9d6; }
.sh-brain .sh-brain-whole .sh-brain-deck { color: rgba(238, 240, 247, .72); }
.sh-brain .sh-brain-whole .sh-brain-figure-title { color: rgba(238, 240, 247, .55); }

.sh-brain .sh-brain-whole .sh-brain-caption {
	border-top-color: rgba(238, 240, 247, .16);
	color: rgba(238, 240, 247, .6);
}

.sh-brain .sh-brain-whole a { color: #cdbdf0; text-decoration-color: rgba(205, 189, 240, .45); }
.sh-brain .sh-brain-whole a:hover,
.sh-brain .sh-brain-whole a:focus-visible { color: #fff; }
.sh-brain .sh-brain-whole :focus-visible { outline-color: #cdbdf0; }

/* legend */

.sh-brain .sh-brain-legend { margin: 0 0 clamp(26px, 3.4vw, 44px); }

.sh-brain .sh-brain-legend__cols {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
}

.sh-brain .sh-brain-legend__label {
	margin: 0 0 12px;
	color: rgba(238, 240, 247, .5);
	font: 800 10.5px/1.4 var(--b-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-legend__group ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-brain .sh-brain-legend__group > ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.sh-brain .sh-brain-legend__key {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 1px 12px;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(238, 240, 247, .16);
	border-radius: 10px;
	background: rgba(12, 18, 34, .42);
	color: var(--b-night-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.sh-brain .sh-brain-legend__key:hover { border-color: rgba(238, 240, 247, .4); background: rgba(24, 32, 54, .6); }
.sh-brain .sh-brain-legend__key[aria-pressed="true"] { border-color: #cdbdf0; background: rgba(60, 48, 96, .55); }

.sh-brain .sh-brain-legend__key .sh-brain-glyph { grid-row: span 2; margin-top: 2px; }
.sh-brain .sh-brain-legend__name { grid-column: 2; font: 700 13.5px/1.35 var(--b-sans); }

.sh-brain .sh-brain-legend__note {
	grid-column: 2;
	color: rgba(238, 240, 247, .62);
	font-size: 12.5px;
	line-height: 1.45;
}

/* Glyph colours are lifted for the night ground. */
.sh-brain .sh-brain-whole .sh-brain-glyph--thinker,
.sh-brain .sh-brain-whole .sh-brain-glyph--thought { color: #e7e9f2; }
.sh-brain .sh-brain-whole .sh-brain-glyph--state { color: #b198da; }
.sh-brain .sh-brain-whole .sh-brain-glyph--idea { color: #d9c68a; }
.sh-brain .sh-brain-whole .sh-brain-glyph--debate { color: #e08a86; }
.sh-brain .sh-brain-whole .sh-brain-glyph--observed { color: #86aade; }
.sh-brain .sh-brain-whole .sh-brain-glyph--probe { color: #7fc4a2; }
.sh-brain .sh-brain-whole .sh-brain-glyph--question { color: #dcab7c; }

/*
 * One relation per row inside its family. Two ragged columns per family read
 * as a list with holes in it; a single column reads as a family.
 */
.sh-brain .sh-brain-legend__family {
	margin: 16px 0 9px;
	padding-top: 11px;
	border-top: 1px solid rgba(238, 240, 247, .14);
	color: rgba(238, 240, 247, .5);
	font: 400 13px/1.3 var(--b-serif);
	font-style: italic;
	letter-spacing: 0;
}

.sh-brain .sh-brain-legend__family:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.sh-brain .sh-brain-legend__group > ul.sh-brain-legend__rels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.sh-brain .sh-brain-legend__rel {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(238, 240, 247, .78);
	font-size: 13px;
}

.sh-brain .sh-brain-legend__rel svg { flex: none; width: 34px; height: 10px; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.sh-brain .sh-brain-legend__rel--produces svg { stroke: #e7e9f2; }
.sh-brain .sh-brain-legend__rel--commits svg { stroke: rgba(231, 233, 242, .6); }
.sh-brain .sh-brain-legend__rel--holds svg { stroke: rgba(231, 233, 242, .45); stroke-dasharray: 2 4; }
.sh-brain .sh-brain-legend__rel--support svg { stroke: #6f9bd6; }
.sh-brain .sh-brain-legend__rel--convergence svg { stroke: #5fb489; }
.sh-brain .sh-brain-legend__rel--tension svg { stroke: #a189cf; stroke-dasharray: 6 4; }
.sh-brain .sh-brain-legend__rel--conflict svg { stroke: #d4726d; }
.sh-brain .sh-brain-legend__rel--contested svg { stroke: #d4726d; stroke-dasharray: 9 4; }
.sh-brain .sh-brain-legend__rel--observes svg { stroke: #86aade; stroke-dasharray: 4 5; }
.sh-brain .sh-brain-legend__rel--investigates svg { stroke: #7fc4a2; stroke-dasharray: 4 5; }
.sh-brain .sh-brain-legend__rel--leaves svg { stroke: #dcab7c; stroke-dasharray: 2 5; }

/* lattice */

.sh-brain .sh-brain-lattice { margin: 0; }

/*
 * The stage the network sits on. Above the width where the whole figure fits
 * legibly it is an ordinary block and the figure fills the column, exactly as
 * before. Below that width it pans: the figure holds its smallest reviewed
 * scale and the reader moves along it, so a phone gets the same closing
 * assembly a desktop gets rather than a decorative substitute or a smear.
 *
 * The panning box is its own scroll container, so the PAGE never scrolls
 * sideways — only the diagram does.
 */
.sh-brain .sh-brain-lattice__stage {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(205, 189, 240, .45) transparent;
}

.sh-brain .sh-brain-lattice__stage::-webkit-scrollbar { height: 6px; }
.sh-brain .sh-brain-lattice__stage::-webkit-scrollbar-track { background: rgba(238, 240, 247, .08); border-radius: 999px; }
.sh-brain .sh-brain-lattice__stage::-webkit-scrollbar-thumb { background: rgba(205, 189, 240, .45); border-radius: 999px; }

.sh-brain .sh-brain-lattice__art {
	display: block;
	/* The smallest scale the figure was reviewed at. Holding it here is what
	   keeps every node label readable while the stage pans. */
	width: 1000px;
	max-width: none;
	height: auto;
	/* Clip rather than spill: a stray label must never widen the page. */
	overflow: hidden;
}

/*
 * --b-so carries each relation's resting stroke opacity, so the arrival
 * animation can fade a dashed relation up to its own value instead of to a
 * hardcoded one — which is what lets the figure keep the dash patterns the
 * legend teaches.
 */
.sh-brain .sh-brain-lattice__edge {
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-opacity: var(--b-so, 1);
}

.sh-brain .sh-brain-lattice__edge--produces { stroke: #e7e9f2; --b-so: .55; }
.sh-brain .sh-brain-lattice__edge--commits { stroke: rgba(231, 233, 242, .5); }
.sh-brain .sh-brain-lattice__edge--holds { stroke: rgba(231, 233, 242, .4); stroke-dasharray: 2 5; }
.sh-brain .sh-brain-lattice__edge--support { stroke: #6f9bd6; }
.sh-brain .sh-brain-lattice__edge--convergence { stroke: #5fb489; }
.sh-brain .sh-brain-lattice__edge--tension { stroke: #a189cf; stroke-dasharray: 7 5; }
.sh-brain .sh-brain-lattice__edge--conflict { stroke: #d4726d; stroke-width: 2; }
.sh-brain .sh-brain-lattice__edge--contested { stroke: #d4726d; stroke-dasharray: 10 5; --b-so: .8; }
.sh-brain .sh-brain-lattice__edge--observes { stroke: #86aade; stroke-dasharray: 5 6; }
.sh-brain .sh-brain-lattice__edge--investigates { stroke: #7fc4a2; stroke-dasharray: 5 6; }
.sh-brain .sh-brain-lattice__edge--leaves { stroke: #dcab7c; stroke-dasharray: 2 6; }

.sh-brain .sh-brain-lattice__halo { fill: rgba(205, 189, 240, .09); }

/*
 * A node is a plate that stops relations running visibly through it, plus the
 * kind's own mark. Shape carries the meaning here exactly as it does in the
 * legend; colour only reinforces it.
 */
.sh-brain .sh-brain-lattice__plate { fill: #16203a; }
.sh-brain .sh-brain-lattice__node--idea .sh-brain-lattice__plate { fill: #221f14; }
.sh-brain .sh-brain-lattice__node--debate .sh-brain-lattice__plate { fill: #2b171a; }
/*
 * An open question and an investigation are both provisional: neither is a
 * settled resident of the structure, so neither gets a solid plate. An
 * investigation in particular must never read like a thinker — it is scoped to
 * a project and it goes when that project does.
 */
.sh-brain .sh-brain-lattice__node--question .sh-brain-lattice__plate,
.sh-brain .sh-brain-lattice__node--probe .sh-brain-lattice__plate { fill: rgba(22, 32, 58, .55); }

.sh-brain .sh-brain-lattice__node .sh-brain-mark { stroke-width: 1.45; }
.sh-brain .sh-brain-lattice__node--thinker .sh-brain-mark { color: #eef0f7; }
.sh-brain .sh-brain-lattice__node--state .sh-brain-mark { color: #b198da; }
.sh-brain .sh-brain-lattice__node--thought .sh-brain-mark { color: #e7e9f2; }
.sh-brain .sh-brain-lattice__node--idea .sh-brain-mark { color: #d9c68a; }
.sh-brain .sh-brain-lattice__node--debate .sh-brain-mark { color: #e08a86; }
.sh-brain .sh-brain-lattice__node--observed .sh-brain-mark { color: #86aade; }
.sh-brain .sh-brain-lattice__node--probe .sh-brain-mark { color: #7fc4a2; }
.sh-brain .sh-brain-lattice__node--question .sh-brain-mark { color: #dcab7c; }

.sh-brain .sh-brain-lattice__label {
	fill: rgba(238, 240, 247, .88);
	font: 500 13px/1.2 var(--b-serif);
	paint-order: stroke;
	stroke: rgba(9, 14, 28, .88);
	stroke-width: 3.5px;
	pointer-events: none;
}

/* Kind highlighting: driven by a class on the figure, set by the legend. */
.sh-brain .sh-brain-lattice.is-focused .sh-brain-lattice__node,
.sh-brain .sh-brain-lattice.is-focused .sh-brain-lattice__edge { opacity: .16; }
.sh-brain .sh-brain-lattice.is-focused .sh-brain-lattice__node.is-lit,
.sh-brain .sh-brain-lattice.is-focused .sh-brain-lattice__edge.is-lit { opacity: 1; }
.sh-brain .sh-brain-lattice__node,
.sh-brain .sh-brain-lattice__edge,
.sh-brain .sh-brain-lattice__index-row { transition: opacity .22s ease; }

/* The index traces with the figure, so the control works with no diagram. */
.sh-brain .sh-brain-lattice.is-focused .sh-brain-lattice__index-row { opacity: .3; }
.sh-brain .sh-brain-lattice.is-focused .sh-brain-lattice__index-row.is-lit { opacity: 1; }

.sh-brain .sh-brain-lattice__index {
	display: grid;
	gap: 1px;
	margin: clamp(18px, 2.4vw, 28px) 0 0;
}

.sh-brain .sh-brain-lattice__index ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(238, 240, 247, .14);
	border: 1px solid rgba(238, 240, 247, .14);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-lattice__index-row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 2px 14px;
	padding: 16px 18px;
	background: rgba(12, 18, 34, .5);
}

.sh-brain .sh-brain-lattice__index-row .sh-brain-glyph { grid-row: span 3; margin-top: 2px; }

.sh-brain .sh-brain-lattice__index-name {
	grid-column: 2;
	margin: 0;
	font: 700 13.5px/1.35 var(--b-sans);
	color: var(--b-night-ink);
}

.sh-brain .sh-brain-lattice__index-rel {
	grid-column: 2;
	margin: 3px 0 0;
	color: rgba(238, 240, 247, .58);
	font-size: 12.5px;
	line-height: 1.5;
}

.sh-brain .sh-brain-lattice__index-members {
	grid-column: 2;
	margin: 8px 0 0;
	color: rgba(238, 240, 247, .82);
	font: 400 14px/1.55 var(--b-serif);
}

.sh-brain .sh-brain-lattice__index-members a { text-decoration: none; border-bottom: 1px solid rgba(205, 189, 240, .4); }

/* what moved */

.sh-brain .sh-brain-moving__list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(238, 240, 247, .14);
	border: 1px solid rgba(238, 240, 247, .14);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-moving__item {
	display: flex;
	gap: 14px;
	padding: 15px 18px;
	background: rgba(12, 18, 34, .5);
}

.sh-brain .sh-brain-moving__item a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	text-decoration: none;
	border: 0;
}

.sh-brain .sh-brain-moving__mark {
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: 7px;
	border-radius: 50%;
	background: #cdbdf0;
}

.sh-brain .sh-brain-moving__item--conflict .sh-brain-moving__mark { background: #d4726d; }
.sh-brain .sh-brain-moving__item--convergence .sh-brain-moving__mark { background: #5fb489; }
.sh-brain .sh-brain-moving__item--meeting .sh-brain-moving__mark { background: #86aade; }

.sh-brain .sh-brain-moving__text { font-size: 14.5px; line-height: 1.55; color: var(--b-night-ink); }

.sh-brain .sh-brain-moving__when {
	color: rgba(238, 240, 247, .52);
	font: 700 11px/1.4 var(--b-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* close */

.sh-brain .sh-brain-close {
	max-width: 74ch;
	margin: clamp(46px, 6vw, 84px) 0 0;
	padding-top: clamp(30px, 4vw, 46px);
	border-top: 1px solid rgba(238, 240, 247, .18);
}

.sh-brain .sh-brain-close__lead {
	margin: 0 0 20px;
	font: 400 clamp(26px, 3.4vw, 44px)/1.12 var(--b-serif);
	letter-spacing: -.032em;
	color: #fff;
	text-wrap: balance;
}

.sh-brain .sh-brain-close__body {
	margin: 0 0 16px;
	color: rgba(238, 240, 247, .8);
	font-size: 16.5px;
	line-height: 1.72;
}

.sh-brain .sh-brain-close__doors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(24px, 3vw, 34px) 0 0;
}

.sh-brain .sh-brain-door {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid rgba(238, 240, 247, .3);
	border-radius: 999px;
	background: rgba(12, 18, 34, .4);
	color: var(--b-night-ink);
	font: 700 13.5px/1.3 var(--b-sans);
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.sh-brain .sh-brain-door:hover,
.sh-brain .sh-brain-door:focus-visible {
	border-color: #cdbdf0;
	background: rgba(60, 48, 96, .5);
	color: #fff;
	transform: translateY(-1px);
}

/* --------------------------------------------------- the shared node marks */

/*
 * One drawn vocabulary, used at every size on the page: inline glyphs, the
 * hero's model line, the miniature model in the contrast panel, the relation
 * cards, the news aperture and the closing network. Shape carries meaning;
 * colour only reinforces it.
 */
.sh-brain .sh-brain-mark {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--b-accent);
}

.sh-brain .sh-brain-mark--thinker { color: var(--b-ink); }
.sh-brain .sh-brain-mark--state { color: var(--b-tension); }
.sh-brain .sh-brain-mark--thought { color: var(--b-ink); }
.sh-brain .sh-brain-mark--idea { color: var(--b-center); }
.sh-brain .sh-brain-mark--debate { color: var(--b-conflict); }
.sh-brain .sh-brain-mark--observed { color: var(--b-support); }
.sh-brain .sh-brain-mark--probe { color: var(--b-convergence); }
.sh-brain .sh-brain-mark--question { color: var(--b-warm); }

/* --------------------------------------------------- the model, in one line */

/*
 * The whole model as a single sentence, on the first screen. It reads across
 * on a wide viewport and down a narrow one; the connector is drawn on the
 * gutter side in both directions, so the order is never ambiguous.
 */
.sh-brain .sh-brain-model {
	display: grid;
	gap: 1px;
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: 0;
	list-style: none;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-model__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 18px;
	background: var(--b-surface);
}

.sh-brain .sh-brain-model__name {
	font: 400 clamp(16px, 1.6vw, 19px)/1.25 var(--b-serif);
	letter-spacing: -.014em;
	color: var(--b-ink);
}

.sh-brain .sh-brain-model__step + .sh-brain-model__step::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 26px;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--b-rule);
	border-bottom: 1.5px solid var(--b-rule);
	background: var(--b-surface);
	transform: rotate(45deg);
}

.sh-brain .sh-brain-model__note {
	max-width: 62ch;
	margin: 14px 0 0;
	color: var(--b-faint);
	font-size: 13.5px;
	line-height: 1.6;
}

/* ----------------------------------------------- ideas: the four relations */

.sh-brain .sh-brain-stack { display: grid; gap: clamp(28px, 3.4vw, 44px); align-content: start; }

.sh-brain .sh-brain-rels { margin: 0; }

.sh-brain .sh-brain-rels__list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--b-line);
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	overflow: hidden;
}

.sh-brain .sh-brain-rels__item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 2px 14px;
	align-items: center;
	padding: 14px 18px;
	background: var(--b-surface);
}

.sh-brain .sh-brain-rels__art { grid-row: span 2; width: 92px; height: auto; }
.sh-brain .sh-brain-rels__plate { fill: var(--b-surface); }
.sh-brain .sh-brain-rels__edge { stroke-width: 1.6; stroke-linecap: round; }

.sh-brain .sh-brain-rels__item--support .sh-brain-rels__edge { stroke: var(--b-support); }
.sh-brain .sh-brain-rels__item--convergence .sh-brain-rels__edge { stroke: var(--b-convergence); }
.sh-brain .sh-brain-rels__item--tension .sh-brain-rels__edge { stroke: var(--b-tension); stroke-dasharray: 7 5; }
.sh-brain .sh-brain-rels__item--conflict .sh-brain-rels__edge { stroke: var(--b-conflict); stroke-width: 2.2; }

.sh-brain .sh-brain-rels__item strong {
	grid-column: 2;
	align-self: end;
	font: 700 14.5px/1.3 var(--b-sans);
}

.sh-brain .sh-brain-rels__item span {
	grid-column: 2;
	align-self: start;
	color: var(--b-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------------------------------------------- the horizon on the lifeline */

/*
 * The rail's labels for the two halves of the line. They only make sense on
 * the horizontal axis, so they are hidden while the rail is stacked.
 */
.sh-brain .sh-brain-rail__horizon { display: none; }

.sh-brain .sh-brain-rail__horizon-a,
.sh-brain .sh-brain-rail__horizon-b {
	font: 800 10px/1.4 var(--b-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sh-brain .sh-brain-rail__horizon-a { color: var(--b-tension); }
.sh-brain .sh-brain-rail__horizon-b { color: var(--b-faint); }

/*
 * The line up to the selected moment is drawn in ink; past it the rule stays
 * dashed and the later moments recede, because everything on that side of the
 * cut is unavailable to this state.
 *
 * The cut is a position along a DATED axis, so it is only drawn once the rail
 * is a dated axis. While the rail is a stacked list the years are evenly
 * spaced, an ink measure along it would be a lie, and the recession of the
 * later moments carries the same point on its own.
 */
.sh-brain .sh-brain-rail__track::after {
	content: "";
	display: none;
	position: absolute;
	top: 14px;
	left: 7px;
	width: 1px;
	height: var(--b-cut, 0%);
	background: var(--b-tension);
}

.sh-brain .sh-brain-rail__stop.is-after { color: var(--b-faint); }
.sh-brain .sh-brain-rail__stop.is-after .sh-brain-rail__year { color: var(--b-faint); opacity: .68; }
.sh-brain .sh-brain-rail__stop.is-after .sh-brain-rail__dot { border-style: dashed; }
.sh-brain .sh-brain-rail__stop:hover .sh-brain-rail__year { opacity: 1; }

/* How far apart two states of one thinker actually stand. */
.sh-brain .sh-brain-encounter__gap {
	position: relative;
	display: block;
	max-width: 100%;
	margin-top: 10px;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--b-surface);
	color: var(--b-muted);
	font: 800 9.5px/1.4 var(--b-sans);
	letter-spacing: .13em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

/* ------------------------------------------- the miniature model, on paper */

.sh-brain .sh-brain-mesh__plate { fill: var(--b-surface); }
.sh-brain .sh-brain-mesh__edge--contested { stroke: var(--b-conflict); stroke-dasharray: 8 5; opacity: .85; }
.sh-brain .sh-brain-mesh__edge--leaves { stroke: var(--b-warm); stroke-dasharray: 2 5; }

/* --------------------------------------------------- figures that name zones */

.sh-brain .sh-brain-aperture__zone,
.sh-brain .sh-brain-probe__zone {
	fill: var(--b-faint);
	font: 800 11px/1 var(--b-sans);
	letter-spacing: .13em;
}

.sh-brain .sh-brain-aperture__plate { fill: var(--b-surface); }

/* --------------------------------------------------- the investigation cycle */

.sh-brain .sh-brain-probe__spine { stroke: var(--b-rule); stroke-width: 1.4; }
.sh-brain .sh-brain-probe__question { fill: var(--b-surface); stroke: var(--b-warm); stroke-width: 1.6; stroke-dasharray: 6 6; }
.sh-brain .sh-brain-probe__slot { fill: none; stroke: var(--b-rule); stroke-width: 1.4; stroke-dasharray: 2 5; }

/* The project boundary: dashed, because the apparatus inside it is temporary. */
.sh-brain .sh-brain-probe__scope {
	fill: color-mix(in srgb, var(--b-convergence) 5%, transparent);
	stroke: color-mix(in srgb, var(--b-convergence) 46%, transparent);
	stroke-width: 1.4;
	stroke-dasharray: 9 7;
}

.sh-brain .sh-brain-probe__zone--scope { fill: var(--b-convergence); letter-spacing: .17em; }

.sh-brain .sh-brain-probe__feed { fill: none; stroke: var(--b-rule); stroke-width: 1.5; }
.sh-brain .sh-brain-probe__cycle { fill: none; stroke: var(--b-convergence); stroke-width: 1.5; opacity: .85; }
.sh-brain .sh-brain-probe__head { fill: none; stroke: var(--b-convergence); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sh-brain .sh-brain-probe__inner {
	fill: var(--b-muted);
	font: 800 10.5px/1 var(--b-sans);
	letter-spacing: .15em;
}

/*
 * A scoped lens is dashed and carries no plate. It must never read as a
 * thinker: a thinker is a solid ring that stays in the record, and this is
 * neither — it belongs to one investigation and goes when that does.
 */
.sh-brain .sh-brain-probe__lens {
	fill: var(--b-surface);
	stroke: color-mix(in srgb, var(--b-convergence) 55%, transparent);
	stroke-width: 1.4;
	stroke-dasharray: 5 5;
}

.sh-brain .sh-brain-probe__evidence { fill: var(--b-convergence); }
.sh-brain .sh-brain-probe__proposal { fill: var(--b-sunk); stroke: var(--b-accent); stroke-width: 1.5; stroke-dasharray: 6 5; }
.sh-brain .sh-brain-probe__tag { fill: none; stroke: var(--b-accent); stroke-width: 1.8; stroke-linecap: round; opacity: .6; }
.sh-brain .sh-brain-probe__exit { fill: none; stroke: var(--b-accent); stroke-width: 1.6; }
.sh-brain .sh-brain-probe__gate { fill: none; stroke: var(--b-ink); stroke-width: 2.4; stroke-linecap: round; }
.sh-brain .sh-brain-probe__gate--lip { stroke-width: 1.8; }
.sh-brain .sh-brain-probe__latch { fill: var(--b-ink); }
.sh-brain .sh-brain-probe__pending { fill: none; stroke: var(--b-rule); stroke-width: 1.4; stroke-dasharray: 3 6; }

/* ------------------------------------------------------------- breakpoints */

@media (min-width: 620px) {
	.sh-brain .sh-brain-contrast { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
	.sh-brain .sh-brain-state__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sh-brain .sh-brain-gate__row { grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: clamp(18px, 2.4vw, 30px); }
	.sh-brain .sh-brain-rels__item { grid-template-columns: 128px minmax(0, 1fr); }
	.sh-brain .sh-brain-rels__art { width: 128px; }
}

@media (min-width: 720px) {
	/* Wide enough for a free column: the field forms beside the statement.
	   The scrim clears the whole text column, so no node can ever land in a
	   headline and read as a typographic accident. */
	.sh-brain .sh-brain-hero__field::after {
		background: linear-gradient(
			100deg,
			var(--b-paper) 0%,
			var(--b-paper) 44%,
			color-mix(in srgb, var(--b-paper) 62%, transparent) 62%,
			transparent 84%
		);
	}

	/*
	 * The rail becomes a real lifeline: the years are placed by DATE, not
	 * evenly, so the gaps between them mean something. Nineteen-fifteen sits
	 * close to 1905 because it is close to 1905.
	 */
	.sh-brain .sh-brain-rail__horizon {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		margin: 0 0 10px;
	}

	.sh-brain .sh-brain-rail__track {
		display: block;
		height: 48px;
		gap: 0;
		margin-bottom: clamp(26px, 3.4vw, 38px);
		padding: 30px 0 0;
	}

	.sh-brain .sh-brain-rail__track::before {
		top: 7px;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
		background: repeating-linear-gradient(90deg, var(--b-rule) 0 3px, transparent 3px 8px);
	}

	/* Ink up to the chosen moment; dashed rule beyond it. */
	.sh-brain .sh-brain-rail__track::after {
		display: block;
		top: 7px;
		left: 0;
		width: var(--b-cut, 0%);
		height: 1.5px;
	}

	.sh-brain .sh-brain-rail__stop {
		position: absolute;
		top: 30px;
		left: var(--b-pos, 0%);
		flex-direction: column;
		align-items: center;
		gap: 0;
		width: auto;
		padding: 0;
		transform: translateX(-50%);
	}

	.sh-brain .sh-brain-rail__dot { top: -30px; left: 50%; margin-left: -7.5px; }

	/* Wide enough for the distance between the two states to sit on the seam
	   without leaning into either quote. */
	.sh-brain .sh-brain-encounter__grid {
		grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
		align-items: stretch;
	}

	/* Horizontal layout: the seam stands upright between the two states. */
	.sh-brain .sh-brain-encounter__seam::before {
		top: 6%;
		bottom: 6%;
		left: 50%;
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, transparent, var(--b-rule) 18%, var(--b-rule) 82%, transparent);
	}

	.sh-brain .sh-brain-encounter__seam svg {
		padding: 0 5px;
		transform: rotate(90deg);
	}

	/*
	 * The model line lies down and reads across, one step per column, with the
	 * chevron on the seam between columns.
	 */
	.sh-brain .sh-brain-model { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.sh-brain .sh-brain-model__step {
		flex-direction: column;
		align-items: flex-start;
		gap: 11px;
		padding: 17px 16px 19px;
	}

	.sh-brain .sh-brain-model__name { font-size: clamp(15px, 1.35vw, 18px); }

	.sh-brain .sh-brain-model__step + .sh-brain-model__step::before {
		top: 50%;
		left: -6px;
		margin-top: -5px;
	}
}

@media (min-width: 940px) {
	.sh-brain .sh-brain-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	}

	.sh-brain .sh-brain-split--reverse > .sh-brain-prose { order: 2; }
	.sh-brain .sh-brain-split--reverse > .sh-brain-chain { order: 1; }

	.sh-brain .sh-brain-bound__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
	.sh-brain .sh-brain-arena__grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr) minmax(0, .72fr); }

	/* Side-by-side layout: the pressure turns horizontal, onto the seam. */
	.sh-brain .sh-brain-arena__side::after {
		top: 50%;
		bottom: auto;
		left: auto;
		margin: -7px 0 0;
	}

	.sh-brain .sh-brain-arena__side--a::after { right: 9px; transform: rotate(45deg); }
	.sh-brain .sh-brain-arena__side--b::after { left: 9px; transform: rotate(-135deg); }
	.sh-brain .sh-brain-arena__side--a .sh-brain-arena__mark { box-shadow: 7px 0 0 -3px color-mix(in srgb, var(--b-ink) 26%, transparent); }
	.sh-brain .sh-brain-arena__side--b .sh-brain-arena__mark { box-shadow: -7px 0 0 -3px color-mix(in srgb, var(--b-ink) 26%, transparent); }
	.sh-brain .sh-brain-legend__cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
	.sh-brain .sh-brain-gate__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sh-brain .sh-brain-gate__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.sh-brain .sh-brain-gate__row h4 { margin-top: 4px; }
}

@media (min-width: 1000px) {
	/* Wide enough for the whole figure at once: it stops panning and fills
	   the column, and the pan affordance is withdrawn. */
	/* Both axes, or the box stays a scroll container. */
	.sh-brain .sh-brain-lattice__stage { overflow: visible; }
	.sh-brain .sh-brain-lattice__art { width: 100%; }
	.sh-brain .sh-brain-pan { display: none; }
	.sh-brain .sh-brain-lattice__index ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sh-brain .sh-brain-lattice__index-row { padding: 14px 16px; }
	.sh-brain .sh-brain-lattice__index-members { font-size: 13px; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
	/* Scroll reveals. Only elements JavaScript has armed are ever hidden, so
	   a no-JS or slow-JS visitor never sees a blank section. */
	.sh-brain [data-brain-reveal].is-armed {
		opacity: 0;
		transform: translate3d(0, 22px, 0);
		transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	}

	.sh-brain [data-brain-reveal].is-armed.is-in {
		opacity: 1;
		transform: none;
	}

	/* The hero field draws itself once: the structure assembling. */
	.sh-brain .sh-brain-field__edge {
		stroke-dasharray: var(--sh-brain-len, 200);
		stroke-dashoffset: var(--sh-brain-len, 200);
		animation: sh-brain-draw 2.1s cubic-bezier(.3, .7, .2, 1) forwards;
		animation-delay: calc(.35s + var(--sh-brain-delay, 0s));
	}

	.sh-brain .sh-brain-field__node {
		opacity: 0;
		animation: sh-brain-settle .9s ease forwards;
		animation-delay: calc(.15s + var(--sh-brain-delay, 0s));
	}

	/* The horizon slides when another moment is chosen. This is the one piece
	   of transition on the page that carries an argument: the boundary between
	   what a state can reach and what it cannot is a position on a line. */
	.sh-brain .sh-brain-rail__track::after {
		transition: width .45s cubic-bezier(.3, .7, .2, 1), height .45s cubic-bezier(.3, .7, .2, 1);
	}

	/*
	 * Lattice edges arrive when the closing figure is reached. A solid
	 * relation draws itself along its own path. A dashed relation cannot —
	 * the draw needs the dash array, and the dash array is what tells that
	 * relation apart — so it fades up to its own resting opacity instead.
	 */
	.sh-brain .sh-brain-lattice__edge:not(.is-dashed) {
		stroke-dasharray: var(--sh-brain-len, 300);
		stroke-dashoffset: var(--sh-brain-len, 300);
	}

	.sh-brain .sh-brain-lattice__edge.is-dashed { stroke-opacity: 0; }

	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge:not(.is-dashed) {
		animation: sh-brain-draw 1.5s cubic-bezier(.3, .7, .2, 1) forwards;
	}

	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge.is-dashed {
		animation: sh-brain-arrive 1.1s ease forwards;
	}

	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--holds,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--produces { animation-delay: .1s; }
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--commits { animation-delay: .35s; }
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--support,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--convergence,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--tension,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--conflict { animation-delay: .6s; }
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--contested { animation-delay: .85s; }
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--observes,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--investigates,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--leaves { animation-delay: 1.1s; }

	/* The only continuous motion on the page: observation and investigation
	   are the two relations that are actually in flight, and their direction
	   of travel is the thing being claimed. Both are dashed, so the flow runs
	   the dashes along the path without touching the pattern itself. */
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--observes,
	.sh-brain .sh-brain-lattice.is-drawn .sh-brain-lattice__edge--investigates {
		animation: sh-brain-arrive 1.1s ease 1.1s forwards,
			sh-brain-flow 4.4s linear 2.6s infinite;
	}

	.sh-brain .sh-brain-aperture__ray--out { animation: sh-brain-flow 3.6s linear infinite; }
}

@keyframes sh-brain-draw { to { stroke-dashoffset: 0; } }
@keyframes sh-brain-settle { to { opacity: .28; } }
@keyframes sh-brain-flow { to { stroke-dashoffset: -22; } }
@keyframes sh-brain-arrive { from { stroke-opacity: 0; } to { stroke-opacity: var(--b-so, 1); } }

@media (prefers-reduced-motion: reduce) {
	.sh-brain *,
	.sh-brain *::before,
	.sh-brain *::after {
		animation: none !important;
		transition: none !important;
	}

	.sh-brain [data-brain-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	/*
	 * Only the hero field is length-dashed for its draw-in, so only it needs
	 * resetting. The closing network's dash patterns are relation TYPES and
	 * must survive here: a reader who suppresses motion still has to be able
	 * to tell a tension from a conflict.
	 */
	.sh-brain .sh-brain-field__edge {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}
}

@media (prefers-contrast: more) {
	.sh-brain { --b-muted: #4c4a45; --b-faint: #5d5b55; --b-rule: #8c877e; }
	.sh-brain .sh-brain-hero__field { display: none; }
	.sh-brain .sh-brain-whole .sh-brain-deck,
	.sh-brain .sh-brain-close__body { color: #fff; }
}

/*
 * Printing a diagrammatic plate should still read as one: every temporal
 * moment on the page, the closing structure as its text index rather than a
 * dark-ground network, and no interactive furniture.
 */
@media print {
	.sh-brain .sh-brain-hero__field,
	.sh-brain .sh-brain-jump,
	.sh-brain .sh-brain-lattice__art,
	.sh-brain .sh-brain-lattice__stage,
	.sh-brain .sh-brain-pan { display: none; }
	.sh-brain .sh-brain-state,
	.sh-brain .sh-brain-state[hidden] { display: block !important; }
	.sh-brain .sh-brain-rail__track,
	.sh-brain .sh-brain-rail__horizon { display: none; }
	.sh-brain .sh-brain-whole { background: #fff; color: #000; }
	.sh-brain .sh-brain-whole h2,
	.sh-brain .sh-brain-whole h3,
	.sh-brain .sh-brain-whole h4,
	.sh-brain .sh-brain-whole .sh-brain-deck,
	.sh-brain .sh-brain-whole .sh-brain-eyebrow,
	.sh-brain .sh-brain-whole .sh-brain-figure-title,
	.sh-brain .sh-brain-whole a,
	.sh-brain .sh-brain-legend__name,
	.sh-brain .sh-brain-legend__note,
	.sh-brain .sh-brain-legend__label,
	.sh-brain .sh-brain-legend__rel,
	.sh-brain .sh-brain-lattice__index-name,
	.sh-brain .sh-brain-lattice__index-rel,
	.sh-brain .sh-brain-lattice__index-members,
	.sh-brain .sh-brain-moving__text,
	.sh-brain .sh-brain-moving__when,
	.sh-brain .sh-brain-close__lead,
	.sh-brain .sh-brain-close__body { color: #000; }
	.sh-brain .sh-brain-legend__key,
	.sh-brain .sh-brain-lattice__index-row,
	.sh-brain .sh-brain-moving__item { background: none; border-color: #999; }
	.sh-brain .sh-brain-lattice__index ul,
	.sh-brain .sh-brain-moving__list { background: none; border-color: #999; }
	.sh-brain .sh-brain-door { border-color: #333; background: none; color: #000; }
}