/*
 * How Thought Works — the Brain's calmer sibling.
 * Tokens: the shared Thought palette (thought-profile.css) and the Brain's
 * relation colours, so a node means the same thing on both pages. Mobile
 * first; every selector is scoped to .sh-how (the page-builder kit styles bare
 * elements, as documented in brain.css). Motion only reveals; without JS or
 * with reduced motion everything is simply visible.
 */

.sh-how {
	--h-serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
	--h-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--h-paper: var(--thought-bg, #f7f6f2);
	--h-surface: var(--thought-surface, #fff);
	--h-sunk: #f2f0ea;
	--h-ink: var(--thought-ink, #191918);
	--h-muted: var(--thought-muted, #66645f);
	--h-faint: var(--thought-faint, #8b8881);
	--h-line: var(--thought-line, #dedbd4);
	--h-rule: #c9c3b9;
	--h-accent: var(--thought-accent, #665b73);
	--h-accent-soft: var(--thought-accent-soft, #eeeaf1);
	--h-warm: var(--thought-warm, #a16f45);
	--h-support: #3f6fb0;
	--h-conflict: #b0433f;
	--h-tension: #7a5aa6;
	--h-convergence: #3f8f6a;
	--h-center: #8a7a52;
	--h-night: #111b30;
	--h-night-2: #0d1729;
	--h-shell: min(1120px, calc(100% - clamp(32px, 7vw, 104px)));
	--h-radius: var(--thought-radius, 14px);
	background: var(--h-paper);
	color: var(--h-ink);
	font-family: var(--h-sans);
	font-size: 16px;
	line-height: 1.6;
	overflow: clip;
}

.sh-how :where(h1, h2, h3) { color: inherit; font-family: var(--h-serif); font-weight: 400; margin: 0; }
/* Zero-specificity resets (:where) so every component class below wins. */
.sh-how :where(p, ol, ul, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
.sh-how :where(ol, ul) { list-style: none; }
.sh-how a { color: var(--h-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sh-how a:hover { color: var(--h-ink); }
.sh-how a:focus-visible { outline: 2px solid var(--h-accent) !important; outline-offset: 3px; border-radius: 3px; }
.sh-how .sh-how-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sh-how-breadcrumbs, .sh-how-hero, .sh-how-section { width: var(--h-shell); margin-inline: auto; }
.sh-how-breadcrumbs { display: flex; gap: 8px; padding-top: 22px; font-size: 13px; color: var(--h-faint); }
.sh-how-breadcrumbs em { font-style: normal; color: var(--h-muted); }

/* Glyphs: the Brain's node vocabulary, same colours per kind. */
.sh-how-glyph { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--h-ink); }
.sh-how-glyph .sh-brain-glyph__ring { opacity: .5; }
.sh-how-glyph .sh-brain-glyph__cut { opacity: .55; }
.sh-how-glyph .sh-brain-glyph__open { stroke-dasharray: 5 5.5; }
.sh-how-glyph--state { color: var(--h-tension); }
.sh-how-glyph--idea { color: var(--h-center); }
.sh-how-glyph--debate { color: var(--h-conflict); }
.sh-how-glyph--observed { color: var(--h-support); }
.sh-how-glyph--probe { color: var(--h-convergence); }
.sh-how-glyph--question { color: var(--h-warm); }

/* Type */
.sh-how-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--h-accent); }
.sh-how-title { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.028em; max-width: 22ch; margin-top: 10px; }
.sh-how-question { margin-top: 12px; font-family: var(--h-serif); font-style: italic; font-size: clamp(18px, 1.8vw, 22px); color: var(--h-muted); }
.sh-how-prose { max-width: 62ch; font-size: 16.5px; line-height: 1.75; color: var(--h-ink); }
.sh-how-prose p + p { margin-top: 1em; }
.sh-how-prose--center { margin-inline: auto; text-align: center; color: var(--h-muted); }
.sh-how-caption { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--h-muted); }
.sh-how-figure-title { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--h-faint); margin-bottom: 14px; }
.sh-how-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--h-accent-soft); color: var(--h-accent); font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }

/* Hero */
.sh-how-hero { padding: clamp(56px, 10vw, 128px) 0 clamp(36px, 6vw, 72px); }
.sh-how-hero__title { margin-top: 18px; font-size: clamp(44px, 8.4vw, 104px); line-height: .96; letter-spacing: -.045em; max-width: 13ch; }
.sh-how-hero__lead { margin-top: clamp(22px, 3vw, 34px); max-width: 44ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.58; color: var(--h-muted); }
.sh-how-hero__skip { margin-top: 26px; font-size: 14.5px; color: var(--h-faint); }

/* Sections */
.sh-how-section { padding: clamp(56px, 8vw, 104px) 0 clamp(16px, 3vw, 28px); border-top: 1px solid var(--h-line); }
.sh-how-head { margin-bottom: clamp(26px, 4vw, 44px); }
.sh-how-split { display: grid; gap: clamp(28px, 4vw, 56px); }
.sh-how-cta { margin-top: 28px; font-weight: 700; }
.sh-how-cta a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Opening sequence: a vertical progression that reads the same everywhere. */
.sh-how-sequence { text-align: center; border-top: 0; padding-top: 12px; }
.sh-how-steps { display: grid; gap: 0; margin-inline: auto; width: fit-content; max-width: 100%; }
.sh-how-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0; font-family: var(--h-serif); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; text-align: left; }
.sh-how-step + .sh-how-step::before { content: ""; position: absolute; left: 12.25px; top: -12px; height: 24px; border-left: 1.5px dashed var(--h-rule); }
.sh-how-thesis { margin: clamp(30px, 5vw, 56px) auto 18px; font-family: var(--h-serif); font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; }

/* Core model: vertical on phones, a horizontal spine from 720px. */
.sh-how-model { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-surface); }
.sh-how-model__spine { display: grid; gap: 22px; }
.sh-how-model__node { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; }
.sh-how-model__node .sh-how-glyph { grid-row: span 2; width: 34px; height: 34px; }
.sh-how-model__node strong { font-family: var(--h-serif); font-weight: 400; font-size: 24px; line-height: 1.1; }
.sh-how-model__node span { font-size: 14.5px; color: var(--h-muted); }
.sh-how-model__node + .sh-how-model__node::before { content: "\2195"; position: absolute; left: 7px; top: -21px; font-size: 14px; color: var(--h-faint); }
.sh-how-model__time { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--h-tension); }
.sh-how-model__rule { flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--h-tension), rgba(122, 90, 166, .25)); }
.sh-how-around { margin-top: 28px; max-width: 70ch; }
.sh-how-around__lead { font-weight: 700; margin-bottom: 10px; }
.sh-how-around li, .sh-how-flow li, .sh-how-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--h-line); }
.sh-how-around li:first-child, .sh-how-flow li:first-child, .sh-how-list li:first-child { border-top: 0; }

/* Time */
.sh-how-rules { margin-top: 18px !important; display: grid; gap: 10px; }
.sh-how-rules li { position: relative; padding-left: 22px; }
.sh-how-rules li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: var(--h-tension); }
.sh-how-rules li:nth-child(2)::before { background: transparent; border: 1.5px dashed var(--h-faint); }
.sh-how-note { margin-top: 1.4em !important; padding: 14px 16px; border-left: 3px solid var(--h-warm); background: var(--h-sunk); border-radius: 4px var(--h-radius) var(--h-radius) 4px; font-size: 15px; line-height: 1.65; }
.sh-how-encounter { align-self: start; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-surface); }
.sh-how-encounter__pair { display: grid; gap: 14px; }
.sh-how-encounter__side { padding: 14px 16px; border-radius: 10px; background: var(--h-sunk); font-family: var(--h-serif); font-size: 17px; line-height: 1.5; }
.sh-how-encounter__side + .sh-how-encounter__side { background: var(--h-accent-soft); }
.sh-how-encounter__year { font-family: var(--h-sans); font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--h-tension); margin-bottom: 6px !important; }
.sh-how-compare { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.sh-how-compare__col { padding: 16px 18px; border: 1px solid var(--h-line); border-radius: var(--h-radius); }
.sh-how-compare__col--thought { border-color: var(--h-accent); background: var(--h-accent-soft); }
.sh-how-compare__label { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--h-faint); margin-bottom: 6px !important; }
.sh-how-compare__col--thought .sh-how-compare__label { color: var(--h-accent); }
.sh-how-compare__line { font-family: var(--h-serif); font-size: 18px; line-height: 1.45; }
.sh-how-compare__line span { color: var(--h-faint); }

/* Thinkers, Thoughts, Ideas, Debate */
.sh-how-stat { margin-top: 22px; font-size: 15px; color: var(--h-muted); }
.sh-how-stat strong { font-family: var(--h-serif); font-weight: 400; font-size: 34px; color: var(--h-ink); margin-right: 4px; }
.sh-how-terms { margin-top: 20px !important; display: grid; gap: 8px; }
.sh-how-terms div { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-how-terms dt { font-weight: 700; }
.sh-how-list { margin-top: 22px; max-width: 70ch; }
.sh-how-list small { display: block; font-size: 13px; color: var(--h-faint); }
.sh-how-idea, .sh-how-outcome { align-self: start; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-surface); }
.sh-how-idea__name, .sh-how-outcome__title { display: flex; gap: 10px; align-items: flex-start; font-family: var(--h-serif); font-size: 21px; line-height: 1.3; }
.sh-how-idea__sides { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 14px !important; font-size: 15px; }
.sh-how-idea__sides em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h-conflict); border-top: 1.5px solid var(--h-conflict); padding-top: 2px; }
.sh-how-outcome__rows { margin-top: 14px !important; display: grid; gap: 8px; font-size: 15px; }
.sh-how-outcome__rows div { display: grid; gap: 2px; }
.sh-how-outcome__rows dt { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h-faint); }

/* NewsDesk */
.sh-how-flow { max-width: 70ch; margin-bottom: 22px; }
.sh-how-boundary { margin-top: 22px; max-width: 62ch; padding: 16px 18px; border: 1.5px dashed var(--h-support); border-radius: var(--h-radius); color: var(--h-ink); }
.sh-how-latest { margin-top: 18px; font-size: 15px; max-width: 70ch; }
.sh-how-latest small { color: var(--h-faint); }

/* Research pipeline: who decides is part of the diagram. */
.sh-how-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: 13px; color: var(--h-muted); }
.sh-how-legend__human::before, .sh-how-legend__system::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
.sh-how-legend__human::before { background: var(--h-warm); }
.sh-how-legend__system::before { border: 1.5px solid var(--h-rule); }
.sh-how-pipeline { display: grid; gap: 8px; counter-reset: none; margin-bottom: clamp(28px, 4vw, 44px); }
.sh-how-stage { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--h-line); border-radius: 10px; background: var(--h-surface); font-size: 15px; line-height: 1.55; }
.sh-how-stage__n { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--h-rule); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--h-muted); }
.sh-how-stage.is-human { border-color: rgba(161, 111, 69, .45); background: #fbf6f1; }
.sh-how-stage.is-human .sh-how-stage__n { border-color: var(--h-warm); background: var(--h-warm); color: #fff; }
.sh-how-compare--stacked { margin-top: 0; align-self: start; }

/* The loop: typed links. */
.sh-how-legend--links { margin-top: 18px; }
.sh-how-legend--links li { display: inline-flex; align-items: center; gap: 8px; }
.sh-how-legend--links li::before { content: ""; width: 28px; height: 0; border-top: 2px solid var(--h-ink); }
.sh-how-legend--links li.is-human::before { border-top-style: dashed; border-color: var(--h-warm); }
.sh-how-legend--links li.is-none::before { border-top: 2px dotted var(--h-faint); width: 10px; margin-right: 8px; box-shadow: 18px 0 0 -1px transparent; }
.sh-how-cycle { display: grid; gap: 10px; }
.sh-how-link { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--h-surface); border: 1px solid var(--h-line); }
.sh-how-link .sh-how-glyph { grid-row: span 2; }
.sh-how-link__path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--h-serif); font-size: 19px; }
.sh-how-link__arrow { display: inline-block; width: 34px; height: 0; border-top: 2px solid var(--h-ink); position: relative; }
.sh-how-link__arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 4px solid transparent; border-left: 6px solid var(--h-ink); }
.sh-how-link.is-human .sh-how-link__arrow { border-top-style: dashed; border-color: var(--h-warm); }
.sh-how-link.is-human .sh-how-link__arrow::after { border-left-color: var(--h-warm); }
.sh-how-link.is-none .sh-how-link__arrow { border-top: 2px dotted var(--h-faint); }
.sh-how-link.is-none .sh-how-link__arrow::after { display: none; }
.sh-how-link.is-none { background: transparent; border-style: dashed; }
.sh-how-link__note { font-size: 14.5px; color: var(--h-muted); }

/* Brain: the culmination, in the Brain's night palette. */
.sh-how-brain { width: auto; max-width: none; margin-top: clamp(40px, 6vw, 72px); padding: clamp(72px, 10vw, 128px) max(24px, calc((100% - 1120px) / 2)); text-align: center; border-top: 0; color: #eef0f7;
	background: radial-gradient(120% 90% at 20% 0%, rgba(72, 92, 142, .3), transparent 60%), radial-gradient(100% 80% at 90% 100%, rgba(73, 57, 115, .24), transparent 60%), linear-gradient(160deg, #17233a, var(--h-night) 54%, var(--h-night-2)); }
.sh-how-brain .sh-how-eyebrow { color: #b7a9d6; }
.sh-how-brain .sh-how-title { margin-inline: auto; max-width: 20ch; }
.sh-how-brain .sh-how-prose--center { color: rgba(238, 240, 247, .72); margin-top: 20px; }
.sh-how-vitals { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 28px !important; font-size: 14px; color: rgba(238, 240, 247, .7); }
.sh-how-vitals strong { display: block; font-family: var(--h-serif); font-weight: 400; font-size: 34px; color: #eef0f7; }
.sh-how-brain a { color: #cdbdf0; }
.sh-how-brain a:focus-visible { outline-color: #cdbdf0 !important; }
.sh-how-cta--large { margin-top: 34px; font-size: 20px; }

/* ---------------------------------------------------------------- 720px */
@media (min-width: 720px) {
	.sh-how-model__spine { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.sh-how-model__node { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start; text-align: center; padding: 0 18px; }
	.sh-how-model__node .sh-how-glyph { grid-row: auto; width: 44px; height: 44px; margin-bottom: 10px; }
	.sh-how-model__node + .sh-how-model__node::before { content: "\2194"; left: -10px; top: 12px; font-size: 20px; }
	.sh-how-compare { grid-template-columns: 1fr 1.5fr; }
	.sh-how-compare--stacked { grid-template-columns: 1fr; }
	.sh-how-encounter__pair { grid-template-columns: 1fr 1fr; }
	.sh-how-pipeline { grid-template-columns: 1fr 1fr; }
	.sh-how-cycle { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- 940px */
@media (min-width: 940px) {
	.sh-how-split { grid-template-columns: 1.1fr 1fr; align-items: start; }
	.sh-how-pipeline { grid-template-columns: repeat(3, 1fr); }
}

/* Motion: reveal only, and only when the script armed it. */
@media (prefers-reduced-motion: no-preference) {
	.sh-how.is-js [data-how-reveal].is-armed { opacity: 0; transform: translate3d(0, 18px, 0); }
	.sh-how.is-js [data-how-reveal] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
	.sh-how.is-js .sh-how-sequence.is-armed .sh-how-step { opacity: 0; }
	.sh-how.is-js .sh-how-sequence .sh-how-step { transition: opacity .5s ease calc(var(--i, 0) * 140ms); }
}

@media (prefers-reduced-motion: reduce) {
	.sh-how *, .sh-how *::before, .sh-how *::after { animation: none !important; transition: none !important; }
	.sh-how [data-how-reveal], .sh-how .sh-how-step { opacity: 1 !important; transform: none !important; }
}

@media (prefers-contrast: more) {
	.sh-how { --h-muted: #3f3d39; --h-faint: #55524c; --h-rule: #8f887c; }
}

@media print {
	.sh-how-hero__skip { display: none; }
	.sh-how-brain { background: #fff; color: #000; }
	.sh-how-brain .sh-how-prose--center, .sh-how-vitals, .sh-how-vitals strong, .sh-how-brain .sh-how-eyebrow { color: #000; }
}

.sh-how-aside { margin-top: 12px; max-width: 70ch; font-size: 14.5px; color: var(--h-muted); }