/*
 * Thought.global — The Living Brain (/brain/). Scoped to body.thb-page / main.thb; loaded on /brain/ only.
 * The homepage ("Midnight Observatory") is the design authority: its tokens, display face, chapters, seams and the
 * Brain's node shapes are copied here as values (thought/docs/THOUGHT-DESIGN-LANGUAGE.md), never as files.
 * Night carries wonder, parchment and paper carry reading, plum carries argument, the map carries the research route.
 * Solid gold = recorded. Dotted = not recorded (conceptual). Relationship colours mean relationship types only.
 */

@font-face {
	font-family: "Thought Display";
	src: url("../../../../home/assets/fonts/fraunces-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.thb-page {
	--thb-night-0: #060a15; --thb-night-1: #0b1426; --thb-night-2: #121d36; --thb-line: #2a3a5e;
	--thb-plum-0: #170f20; --thb-plum-1: #241a33; --thb-plum-2: #2a1d3a;
	--thb-lilac: #b9a7da; --thb-gold: #c9a35e; --thb-gold-hi: #e3c58c; --thb-gold-ink: #7a5a20; --thb-gold-deep: #b8893e;
	--thb-parch: #f4efe4; --thb-parch-2: #ece4d4; --thb-paper: #fffdf8; --thb-ink: #1d1a26; --thb-ink-2: #4a4453; --thb-ink-3: #676070; --thb-rule: #ddd3c0;
	--thb-bone: #f1ede4; --thb-bone-2: #d2cbbb; --thb-bone-3: #a6aec0; --thb-moon: #f3ead2;
	--thb-conflict: #d4726d; --thb-tension: #a189cf; --thb-support: #6f9bd6; --thb-convergence: #5fb489; --thb-leaves: #dcab7c;
	--thb-display: "Thought Display", "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
	--thb-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--thb-ease: cubic-bezier(.2, .7, .2, 1); --thb-spring: cubic-bezier(.34, 1.56, .64, 1);
	--thb-gutter: clamp(18px, 4vw, 48px);
	background: var(--thb-night-0);
}

/* ---------- the shared nav, in night (same markup, links and behaviour; recolour only) ---------- */
body.thb-page.flavor-thought .sh-thought-nav { background: rgba(6, 10, 21, .92); color: var(--thb-bone); border-bottom: 1px solid rgba(241, 237, 228, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.thb-page.flavor-thought .sh-thought-nav a,
body.thb-page.flavor-thought .sh-thought-nav-links > li > a,
body.thb-page.flavor-thought .sh-thought-nav-group-link,
body.thb-page.flavor-thought .sh-thought-nav-group-toggle,
body.thb-page.flavor-thought .sh-thought-nav-group-label { color: var(--thb-bone) !important; }
body.thb-page.flavor-thought .sh-thought-nav-brand { font-family: var(--thb-display) !important; font-weight: 450; }
body.thb-page.flavor-thought .sh-thought-nav-links a:hover,
body.thb-page.flavor-thought .sh-thought-nav-links a:focus,
body.thb-page.flavor-thought .sh-thought-nav-group-link:hover,
body.thb-page.flavor-thought .sh-thought-nav-group-toggle:hover,
body.thb-page.flavor-thought .sh-thought-nav-group.is-open .sh-thought-nav-group-toggle { background: rgba(241, 237, 228, .09); }
body.thb-page.flavor-thought .sh-thought-nav-links > li > a[aria-current="page"],
body.thb-page.flavor-thought .sh-thought-nav-group.is-current > .sh-thought-nav-split { background: rgba(241, 237, 228, .1); box-shadow: inset 0 -2px 0 var(--thb-gold); }
body.thb-page.flavor-thought .sh-thought-nav-menu a,
body.thb-page.flavor-thought .sh-thought-nav-menu a strong { color: var(--thought-ink, #191918) !important; }
body.thb-page.flavor-thought .sh-thought-nav-search input { background: rgba(241, 237, 228, .06) !important; border-color: rgba(241, 237, 228, .24) !important; color: var(--thb-bone) !important; }
body.thb-page.flavor-thought .sh-thought-nav-search input::placeholder { color: var(--thb-bone-3); }
body.thb-page.flavor-thought .sh-thought-nav-search button { background: var(--thb-gold) !important; border-color: var(--thb-gold) !important; color: var(--thb-night-0) !important; }
body.thb-page.flavor-thought .sh-thought-nav.is-enhanced .sh-thought-nav-toggle { background: rgba(241, 237, 228, .06); border-color: rgba(241, 237, 228, .3); color: var(--thb-bone); }
body.thb-page.flavor-thought .sh-thought-nav :focus-visible { outline: 2px solid var(--thb-gold-hi) !important; outline-offset: 2px; }
@media (max-width: 1023px) {
	body.thb-page.flavor-thought .sh-thought-nav-menu { background: transparent; }
	body.thb-page.flavor-thought .sh-thought-nav-menu a, body.thb-page.flavor-thought .sh-thought-nav-menu a strong { color: var(--thb-bone) !important; }
	body.thb-page.flavor-thought .sh-thought-nav-menu a span { color: var(--thb-bone-3) !important; }
	body.thb-page.flavor-thought .sh-thought-nav-menu a { background: rgba(241, 237, 228, .06) !important; box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .1); }
	body.thb-page.flavor-thought .sh-thought-nav-menu a:hover, body.thb-page.flavor-thought .sh-thought-nav-menu a:focus-visible { background: rgba(241, 237, 228, .11) !important; }
	body.thb-page.flavor-thought .sh-thought-nav-menu a[aria-current="page"] { background: rgba(241, 237, 228, .12) !important; box-shadow: inset 3px 0 0 #c9a35e, inset 0 0 0 1px rgba(241, 237, 228, .12); }
}

/* ---------- foundation ---------- */
/* ai/ai-styles.css caps main#content at 1200px / 92vw site-wide; this page is full-bleed. */
body.thb-page main#content.thb { width: auto; max-width: none; margin: 0; padding: 0; }
.thb:focus { outline: none; }
.thb { --thb-lane: 14px; display: block; overflow-x: clip; color: var(--thb-bone); background: var(--thb-night-0); font: 400 17px/1.6 var(--thb-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.thb *, .thb *::before, .thb *::after { box-sizing: border-box; }
.thb img { max-width: 100%; display: block; }
.thb a { color: inherit; text-underline-offset: 3px; }
.thb :focus-visible { outline: 2px solid var(--thb-gold-hi) !important; outline-offset: 3px; border-radius: 6px; }
.thb :is(.thb-ch--paper, .thb-ch--parch, .thb-ch--map) :focus-visible { outline-color: var(--thb-ink) !important; }
.thb :is(.thb-ch--paper, .thb-ch--parch, .thb-ch--map) .thb-time :focus-visible { outline-color: var(--thb-gold-hi) !important; }
.thb .thb-wrap { width: min(1200px, 100% - 2 * var(--thb-gutter)); margin-inline: auto; }
.thb [id] { scroll-margin-top: 80px; }
.thb h1, .thb h2, .thb h3, .thb h4 { margin: 0; font-family: var(--thb-display); font-weight: 420; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 96; letter-spacing: -.012em; text-wrap: balance; color: inherit; text-transform: none; }
.thb h3 { font-size: clamp(1.12rem, 1rem + .45vw, 1.4rem); line-height: 1.25; font-variation-settings: "SOFT" 30, "opsz" 36; }
.thb h4 { font: 700 12px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb p { margin: 0; }
.thb ul, .thb ol { margin: 0; padding: 0; list-style: none; }
.thb li { margin: 0; }
.thb figure, .thb blockquote, .thb dl, .thb dd { margin: 0; padding: 0; border: 0; background: none; quotes: none; }
.thb blockquote::before, .thb blockquote::after { content: none; }
.thb 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; cursor: pointer; -webkit-appearance: none; appearance: none; }
.thb button:hover, .thb button:focus { background: none; box-shadow: none; color: inherit; }
.thb .thb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* glyphs: shapes carry meaning (the Brain's vocabulary, filled + ring, as on the homepage and the shared ending) */
.thb .thb-glyph, .thb .thb-btn-glyph, .thb .thb-seal-spark { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.thb svg .sh-brain-glyph__ring, .thb svg .sh-brain-glyph__open { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.thb svg .sh-brain-glyph__open { stroke-dasharray: 4.2 3.6; }
.thb svg .sh-brain-glyph__cut { fill: none; stroke: var(--thb-glyph-cut, var(--thb-night-1)); stroke-width: 1.7; stroke-linecap: round; }
.thb .thb-glyph--debate path:last-child, .thb svg symbol#thb-k-debate path:last-child { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.thb .thb-glyph--probe path, .thb .thb-glyph--probe circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.thb .thb-glyph--question circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-dasharray: 4.2 3.6; }

/* type */
.thb .thb-eyebrow { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 16px; font: 700 12.5px/1.25 var(--thb-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--thb-gold); }
.thb .thb-eyebrow .thb-glyph { width: 17px; height: 17px; }
.thb .thb-mini-eyebrow { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 12px; font: 700 12px/1.25 var(--thb-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--thb-gold); }
.thb .thb-mini-eyebrow .thb-glyph { width: 16px; height: 16px; }
.thb .thb-lead { max-width: 62ch; margin-top: 16px; font-size: clamp(1.03rem, .98rem + .3vw, 1.16rem); line-height: 1.62; color: var(--thb-ink-2); }
.thb :is(.thb-hero, .thb-ch--night, .thb-ch--plum) .thb-lead { color: #d7d0c1; }
.thb .thb-ch-title { font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.7rem); line-height: 1.04; font-weight: 400; font-variation-settings: "SOFT" 70, "WONK" 0, "opsz" 144; letter-spacing: -.02em; }
.thb .thb-ch-title em, .thb h3 em { font-style: normal; color: var(--thb-gold-deep); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.thb :is(.thb-hero, .thb-ch--night, .thb-ch--plum, .thb-time) :is(.thb-ch-title, h3) em { color: var(--thb-gold-hi); }
.thb .thb-head { position: relative; max-width: 820px; margin-bottom: clamp(30px, 4vw, 50px); }
.thb .thb-sub { margin: clamp(36px, 4vw, 54px) 0 18px; font-size: clamp(1.3rem, 1.08rem + .8vw, 1.7rem); }
.thb .thb-kind { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 11.5px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--thb-gold-ink); }
.thb .thb-kind .thb-glyph { width: 16px; height: 16px; }
.thb :is(.thb-ch--night, .thb-ch--plum) .thb-kind { color: var(--thb-gold); }
.thb .thb-meta { color: var(--thb-ink-3); font: 600 13.5px/1.5 var(--thb-sans); }
.thb .thb-meta--night { color: var(--thb-bone-3); }
.thb .thb-fig-title { margin: 0 0 14px; font: 700 11.5px/1.3 var(--thb-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--thb-gold-ink); }
.thb :is(.thb-ch--night, .thb-ch--plum) .thb-fig-title { color: var(--thb-gold); }
.thb .thb-fig-cap { max-width: 70ch; margin-top: 14px; color: var(--thb-ink-3); font-size: 14px; line-height: 1.55; }
.thb .thb-fig-cap--night { color: var(--thb-bone-3); }
.thb .thb-fig-cap a, .thb .thb-prov a, .thb .thb-live a { font-weight: 650; color: inherit; text-decoration: underline; text-decoration-color: rgba(201, 163, 94, .6); }

/* the AI / honesty note (contract §4): a glyph and one plain sentence */
.thb .thb-note, .thb .thb-fine { display: flex; gap: 9px; align-items: flex-start; max-width: 66ch; margin-top: 22px; color: var(--thb-ink-3); font-size: 14px; line-height: 1.55; }
.thb .thb-note .thb-glyph, .thb .thb-fine .thb-glyph { width: 15px; height: 15px; margin-top: 3px; color: var(--thb-gold-ink); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-fine { color: var(--thb-bone-3); font-size: 13.5px; }
.thb .thb-fine .thb-glyph, .thb .thb-note--night .thb-glyph { color: var(--thb-gold); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-note--night { color: var(--thb-bone-3); }
.thb .thb-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(122, 90, 32, .09); color: var(--thb-gold-ink); font: 700 10.5px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb .thb-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.thb .thb-tag--night { background: rgba(227, 197, 140, .12); color: var(--thb-gold-hi); }

/* buttons: the homepage's pills */
.thb .thb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.thb .thb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 50px; max-width: 100%; margin: 0; padding: 12px 26px; border-radius: 999px; border: 1.5px solid transparent; font: 650 15.5px/1.25 var(--thb-sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s var(--thb-ease), background-color .18s var(--thb-ease), border-color .18s var(--thb-ease), color .18s var(--thb-ease); }
.thb .thb-btn span { min-width: 0; }
.thb .thb-btn:hover { transform: translateY(-2px); }
.thb .thb-btn--moon, .thb .thb-btn--moon:hover, .thb .thb-btn--moon:focus { background: var(--thb-moon); color: var(--thb-night-1); }
.thb .thb-btn--moon:hover { background: #fff7e2; }
.thb .thb-btn--line, .thb .thb-btn--line:focus { border-color: rgba(241, 237, 228, .42); color: var(--thb-bone); background: rgba(241, 237, 228, .04); }
.thb .thb-btn--line:hover { border-color: var(--thb-bone); background: rgba(241, 237, 228, .1); color: var(--thb-bone); }
.thb .thb-btn--ink, .thb .thb-btn--ink:focus { background: var(--thb-ink); color: var(--thb-parch); }
.thb .thb-btn--ink:hover { background: #2c2838; color: var(--thb-parch); }
.thb .thb-btn-glyph { width: 18px; height: 18px; transition: transform .18s var(--thb-ease); }
.thb .thb-btn:hover .thb-btn-glyph--arrow { transform: translateX(2px); }
.thb .thb-btn:hover .thb-btn-glyph--down { transform: translateY(2px); }

/* the record line: true counts, a zero left out */
.thb .thb-record { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(241, 237, 228, .14); }
.thb .thb-record li { display: flex; align-items: baseline; gap: 7px; color: var(--thb-bone-2); font-size: 14.5px; }
.thb .thb-record .thb-glyph { width: 15px; height: 15px; align-self: center; color: var(--thb-gold); --thb-glyph-cut: var(--thb-night-0); }
.thb .thb-record b { font: 500 21px/1 var(--thb-display); font-variation-settings: "opsz" 36; color: var(--thb-bone); font-variant-numeric: tabular-nums lining-nums; }

/* a live line: the record in a sentence */
.thb .thb-live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: clamp(30px, 4vw, 44px); padding-top: 16px; border-top: 1px solid var(--thb-rule); color: var(--thb-ink-2); font-size: 15px; }
.thb .thb-live .thb-glyph { width: 17px; height: 17px; color: var(--thb-gold-ink); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-live--night { border-top-color: rgba(241, 237, 228, .14); color: var(--thb-bone-2); }
.thb .thb-live--night .thb-glyph { color: var(--thb-gold); --thb-glyph-cut: var(--thb-night-1); }

/* cards */
.thb .thb-card { position: relative; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; background: var(--thb-paper); color: var(--thb-ink); box-shadow: 0 0 0 1px var(--thb-rule), 0 18px 40px -30px rgba(29, 26, 38, .45); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.thb .thb-card h3 a { text-decoration: none; }
.thb .thb-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--thb-gold); }
.thb .thb-card p { color: var(--thb-ink-2); line-height: 1.55; }
.thb .thb-card .thb-btn { margin-top: 18px; }
.thb .thb-card--night { background: linear-gradient(160deg, rgba(18, 29, 54, .92), rgba(11, 20, 38, .96)); color: var(--thb-bone); box-shadow: 0 0 0 1px var(--thb-line), 0 24px 50px -30px rgba(0, 0, 0, .8); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-card--night p { color: #d2cbdc; }
.thb .thb-card--night h3 .thb-glyph { color: var(--thb-gold-hi); }
.thb .thb-card--map { background: rgba(255, 253, 248, .86); }

/* ---------- chapters on the thread (contract §4) ---------- */
.thb .thb-ch { position: relative; padding: 0 0 clamp(72px, 8vw, 118px); color: var(--thb-ink); }
.thb .thb-ch--paper { background: var(--thb-paper); --thb-cut: var(--thb-paper); }
.thb .thb-ch--parch { background: var(--thb-parch); --thb-cut: var(--thb-parch); }
.thb .thb-ch--night { background: radial-gradient(1100px 520px at 78% 18%, rgba(74, 53, 87, .34), transparent 70%), linear-gradient(var(--thb-night-1), var(--thb-night-0)); color: var(--thb-bone); --thb-cut: var(--thb-night-1); }
.thb .thb-ch--plum { background: radial-gradient(900px 480px at 12% 8%, rgba(201, 163, 94, .13), transparent 70%), radial-gradient(800px 600px at 70% 60%, rgba(120, 80, 150, .16), transparent 70%), linear-gradient(var(--thb-plum-2), var(--thb-plum-1) 30%, var(--thb-plum-0)); color: var(--thb-bone); --thb-cut: var(--thb-plum-1); }
.thb .thb-ch--map { background: linear-gradient(rgba(122, 90, 32, .045) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(122, 90, 32, .045) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(#f1e7d6, var(--thb-parch)); --thb-cut: #f1e7d6; }
.thb .thb-seam { position: relative; height: clamp(96px, 10vw, 140px); margin-bottom: clamp(14px, 3vw, 34px); color: var(--thb-from, var(--thb-night-0)); }
.thb .thb-seam-edge { position: absolute; inset: -1px 0 0; display: block; width: 100%; height: calc(100% + 1px); }
.thb .thb-seam-edge path { fill: currentColor; }
.thb .thb-seal { position: absolute; left: 50%; top: 40%; z-index: 4; display: grid; place-items: center; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 34%, #1f2a48, #0b1426 72%); box-shadow: 0 0 0 1.5px var(--thb-gold), 0 0 0 5px rgba(11, 20, 38, .9), 0 0 0 6px rgba(201, 163, 94, .45), 0 12px 30px -12px rgba(0, 0, 0, .7); color: var(--thb-gold-hi); transition: box-shadow .6s var(--thb-ease); }
.thb .thb-seal-n { display: grid; place-items: center; font: 500 19px/1 var(--thb-display); font-variation-settings: "opsz" 48, "SOFT" 50; letter-spacing: .02em; }
.thb .thb-seal-spark { width: 20px; height: 20px; }
.thb .thb-seal.is-lit { box-shadow: 0 0 0 1.5px var(--thb-gold-hi), 0 0 0 5px rgba(11, 20, 38, .9), 0 0 0 6px rgba(227, 197, 140, .75), 0 0 34px 8px rgba(227, 197, 140, .38); }
.thb .thb-placename { position: absolute; left: 50%; bottom: 8px; z-index: 4; transform: translateX(-50%); color: var(--thb-gold-ink); font: 700 11.5px/1.2 var(--thb-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.thb :is(.thb-ch--night, .thb-ch--plum) .thb-placename { color: var(--thb-gold); }
.thb .thb-ch-in { position: relative; }
.thb.th-has-thread .thb-ch-in { z-index: 3; }
.thb .thb-mark { position: relative; display: flex; align-items: center; gap: .65em; margin: 0 0 20px; color: var(--thb-gold-ink); font: 700 12.5px/1.2 var(--thb-sans); letter-spacing: .17em; text-transform: uppercase; }
.thb :is(.thb-ch--night, .thb-ch--plum) .thb-mark { color: var(--thb-gold); }
.thb .thb-num { padding-right: .7em; border-right: 1px solid currentColor; font: 500 15px/1 var(--thb-display); letter-spacing: .04em; }
.thb .thb-mark .thb-glyph { width: 18px; height: 18px; --thb-glyph-cut: var(--thb-cut, var(--thb-paper)); }
.thb .thb-lane-star { display: none; }
@media (min-width: 1100px) {
	.thb .thb-ch-in { padding-left: 64px; }
	.thb .thb-lane-star { display: block; position: absolute; left: calc(var(--thb-lane) - 64px); top: 50%; width: 16px; height: 16px; margin-top: -8px; transform: translateX(-50%) rotate(45deg); border-radius: 3px; background: var(--thb-night-1); box-shadow: 0 0 0 1.5px var(--thb-gold), 0 0 0 4px rgba(201, 163, 94, .14); transition: box-shadow .5s var(--thb-ease), background-color .5s var(--thb-ease); }
	.thb .thb-lane-star.is-lit { background: var(--thb-gold-hi); box-shadow: 0 0 0 1.5px var(--thb-gold-hi), 0 0 0 5px rgba(227, 197, 140, .25), 0 0 18px rgba(227, 197, 140, .6); }
}

/* layout grids */
.thb .thb-grid { display: grid; gap: clamp(22px, 3.4vw, 46px); align-items: start; }
@media (min-width: 960px) {
	.thb .thb-grid { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .95fr); }
	.thb .thb-grid--thought { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.thb .thb-grid--rels { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr); }
	.thb .thb-grid--probe { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr); }
}

/* ---------- hero ---------- */
.thb .thb-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 5vw, 70px) 0 clamp(110px, 11vw, 150px); background: radial-gradient(120% 90% at 76% 30%, #142242 0%, var(--thb-night-0) 64%); }
.thb .thb-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.thb .thb-star { fill: var(--thb-bone); }
.thb .thb-hero-in { display: grid; gap: clamp(26px, 4vw, 60px); align-items: center; }
@media (min-width: 980px) { .thb .thb-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.thb .thb-crumbs { margin-bottom: clamp(26px, 4vw, 48px); }
.thb .thb-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--thb-bone-3); font: 600 12.5px/1.3 var(--thb-sans); letter-spacing: .04em; }
.thb .thb-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(166, 174, 192, .5); }
.thb .thb-crumbs a { color: var(--thb-bone-2); text-decoration: none; }
.thb .thb-crumbs a:hover { color: var(--thb-bone); text-decoration: underline; }
.thb .thb-hero h1 { font-size: clamp(3rem, 1.6rem + 5.2vw, 6rem); line-height: .98; font-weight: 360; font-variation-settings: "SOFT" 70, "WONK" 0, "opsz" 144; letter-spacing: -.028em; color: var(--thb-bone); }
.thb .thb-hero h1 em { font-style: normal; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; color: var(--thb-gold-hi); }
.thb .thb-hero .thb-lead { max-width: 54ch; margin-top: 22px; }
.thb .thb-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; color: var(--thb-bone-2); font: 600 12px/1 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.thb .thb-cue .thb-glyph { width: 18px; height: 18px; }

/* the orrery: the Observatory Brain with the record's kinds on its orbits */
.thb .thb-orrery { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.thb .thb-orrery-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thb .thb-orbit { fill: none; stroke: rgba(241, 237, 228, .12); stroke-width: 1; stroke-dasharray: 2 6; }
.thb .thb-orbit--far { stroke: rgba(201, 163, 94, .16); stroke-dasharray: 1 9; }
.thb .thb-orrery-link { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.thb .thb-orrery-link.is-rec { stroke: var(--thb-gold); stroke-opacity: .78; }
.thb .thb-orrery-link.is-con { stroke: var(--thb-bone-3); stroke-opacity: .5; stroke-dasharray: .01 7; stroke-width: 2.2; }
.thb .thb-orrery-road { fill: none; stroke: none; }
.thb .thb-orrery-brain { filter: drop-shadow(0 0 24px rgba(227, 197, 140, .32)); }
.thb .thb-spark { fill: #fff4d6; filter: drop-shadow(0 0 6px rgba(243, 214, 150, .95)); opacity: 0; }
.thb .thb-orrery-stop { position: absolute; left: calc(var(--x) / 560 * 100%); top: calc(var(--y) / 560 * 100%); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.thb .thb-orrery-node { display: grid; place-items: center; width: clamp(44px, 6.4vw, 60px); height: clamp(44px, 6.4vw, 60px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--thb-night-2), var(--thb-night-1)); box-shadow: 0 0 0 1px var(--thb-line), 0 0 30px -6px rgba(201, 163, 94, .45); color: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); transition: box-shadow .5s var(--thb-ease); }
.thb .thb-orrery-node .thb-glyph { width: 52%; height: 52%; }
.thb .thb-orrery-stop--thinker .thb-orrery-node { color: var(--thb-bone); }
.thb .thb-orrery-stop--question .thb-orrery-node, .thb .thb-orrery-stop--probe .thb-orrery-node { color: var(--thb-bone-2); }
.thb .thb-orrery-stop.is-touched .thb-orrery-node { box-shadow: 0 0 0 1.5px var(--thb-gold-hi), 0 0 34px 2px rgba(227, 197, 140, .55); }
.thb .thb-orrery-label { padding: 3px 9px; border-radius: 999px; background: rgba(6, 10, 21, .72); color: var(--thb-bone-2); font: 700 10.5px/1.2 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 979px) { .thb .thb-orrery { width: min(100%, 420px); } }
@media (max-width: 480px) { .thb .thb-orrery-label { font-size: 9.5px; letter-spacing: .07em; padding: 2px 6px; } .thb .thb-hero .thb-actions .thb-btn { width: 100%; } }

/* ---------- prologue: six stations on one gold line ---------- */
.thb .thb-stations { position: relative; display: grid; gap: 14px; margin-top: 8px; }
.thb .thb-station a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 14px 16px 14px 0; border-radius: 18px; color: var(--thb-ink); text-decoration: none; transition: background-color .25s var(--thb-ease); }
.thb .thb-station a:hover { background: rgba(255, 253, 248, .7); }
.thb .thb-station a > :not(.thb-station-dot) { grid-column: 2; }
.thb .thb-station-dot { position: relative; z-index: 1; display: grid; place-items: center; grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 50%; background: var(--thb-night-1); box-shadow: 0 0 0 1px var(--thb-line), 0 0 0 5px var(--thb-parch); color: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-station-dot .thb-glyph { width: 24px; height: 24px; }
.thb .thb-station.is-pending .thb-station-dot { background: var(--thb-parch); box-shadow: 0 0 0 1.5px var(--thb-ink-3); color: var(--thb-ink-3); border: 0; outline: 1.5px dashed rgba(103, 96, 112, .7); outline-offset: 3px; --thb-glyph-cut: var(--thb-parch); }
.thb .thb-station-n { color: var(--thb-gold-ink); font: 700 11px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb .thb-station strong { font: 450 1.28rem/1.2 var(--thb-display); font-variation-settings: "SOFT" 40, "opsz" 36; margin-top: 2px; }
.thb .thb-station-note { margin-top: 4px; color: var(--thb-ink-2); font-size: 15px; line-height: 1.5; }
.thb .thb-stations::before { content: ""; position: absolute; left: 27px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(180deg, var(--thb-gold), rgba(201, 163, 94, .4)); }
@media (min-width: 1000px) {
	.thb .thb-stations { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
	.thb .thb-stations::before { left: 40px; right: calc((100% - 60px) / 6 - 40px); top: 42px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--thb-gold), rgba(201, 163, 94, .45)); }
	.thb .thb-station a { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 18px; }
	.thb .thb-station a > :not(.thb-station-dot) { grid-column: 1; }
	.thb .thb-station-dot { grid-row: auto; margin-bottom: 14px; }
}
.thb .thb-contrast { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; max-width: 880px; margin-top: clamp(30px, 4vw, 44px); padding: 18px 22px; border-left: 2px solid var(--thb-gold); border-radius: 0 16px 16px 0; background: rgba(255, 253, 248, .66); color: var(--thb-ink-2); font-size: 15.5px; line-height: 1.5; }
.thb .thb-contrast span { color: var(--thb-gold-ink); font: 700 11.5px/1.9 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .thb .thb-contrast { grid-template-columns: minmax(0, 1fr); } }

/* ---------- I · a mind ---------- */
.thb .thb-bound { padding: clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--thb-parch); box-shadow: 0 0 0 1px var(--thb-rule); }
.thb .thb-bound-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .thb .thb-bound-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.thb .thb-bound-in, .thb .thb-bound-out { position: relative; padding: 20px 20px 22px; border-radius: 18px; }
.thb .thb-bound-in { background: var(--thb-paper); box-shadow: 0 0 0 1.5px var(--thb-gold), 0 0 0 6px rgba(201, 163, 94, .1); }
.thb .thb-bound-out { border: 1.5px dashed rgba(103, 96, 112, .5); color: var(--thb-ink-3); }
.thb .thb-bound h3 { margin-bottom: 10px; font-size: 1.12rem; }
.thb .thb-bound li { position: relative; padding-left: 18px; margin-top: 7px; line-height: 1.45; font-size: 15px; }
.thb .thb-bound li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--thb-gold); }
.thb .thb-bound-out li::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(103, 96, 112, .6); }
.thb .thb-bound-ring { position: absolute; right: 16px; top: 16px; color: var(--thb-gold-ink); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-bound-ring .thb-glyph { width: 26px; height: 26px; }
.thb .thb-card-who { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.thb .thb-card-who img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--thb-paper), 0 0 0 3.5px var(--thb-gold); }
.thb .thb-card-facts { color: var(--thb-ink) !important; font-weight: 600; }
.thb .thb-card-note { margin-top: 10px; font-size: 14.5px; }

/* the celestial timeline (a night inset inside the reading chapter) */
.thb .thb-time { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, 5vw, 64px); padding: clamp(26px, 3.4vw, 46px); border-radius: 28px; background: radial-gradient(90% 120% at 80% 0%, #1b2950 0%, var(--thb-night-1) 55%, var(--thb-night-0) 100%); color: var(--thb-bone); box-shadow: 0 0 0 1px var(--thb-line), 0 30px 60px -36px rgba(6, 10, 21, .9); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-time-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.thb .thb-time-title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.08; font-weight: 400; font-variation-settings: "SOFT" 70, "opsz" 120; }
.thb .thb-time-lead { max-width: 64ch; margin-top: 12px; color: #d7d0c1; font-size: 16px; line-height: 1.6; }
.thb .thb-axis { position: relative; height: 54px; margin: 30px 0 0; }
.thb .thb-axis-line, .thb .thb-axis-cut { position: absolute; left: 4%; top: 30px; height: 2px; }
.thb .thb-axis-line { right: 0; background-image: linear-gradient(90deg, rgba(227, 197, 140, .5) 50%, transparent 50%); background-size: 8px 2px; }
.thb .thb-axis-cut { width: calc(var(--thb-cut) - 4%); background: linear-gradient(90deg, var(--thb-gold), var(--thb-gold-hi)); box-shadow: 0 0 12px rgba(227, 197, 140, .5); transition: width .7s var(--thb-ease); }
.thb .thb-axis-end { position: absolute; top: 0; color: var(--thb-bone-3); font: 600 12px/1 var(--thb-sans); letter-spacing: .06em; }
.thb .thb-axis-end--a { left: 4%; }
.thb .thb-axis-end--b { left: 88%; transform: translateX(-50%); }
.thb .thb-axis-horizon { position: absolute; left: var(--thb-cut); top: 40px; display: flex; gap: 10px; transform: translateX(-50%); color: var(--thb-bone-3); font: 600 10.5px/1 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: left .7s var(--thb-ease); }
.thb .thb-axis-horizon span:first-child { color: var(--thb-gold-hi); }
.thb .thb-axis-horizon span:first-child::after { content: " ·"; color: var(--thb-bone-3); }
.thb .thb-time-rail { position: relative; height: 88px; margin-top: -2px; }
.thb .thb-moment { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; min-height: 64px; padding: 6px 8px; border-radius: 14px; color: var(--thb-bone-2); text-align: center; }
.thb .thb-moment:hover { background: rgba(241, 237, 228, .06); }
.thb .thb-moment-star { position: relative; width: 20px; height: 20px; border-radius: 50%; }
.thb .thb-moment.is-recorded .thb-moment-star { background: var(--thb-gold-hi); box-shadow: 0 0 0 3px var(--thb-night-1), 0 0 0 4.5px var(--thb-gold), 0 0 16px rgba(227, 197, 140, .6); }
.thb .thb-moment.is-illustration .thb-moment-star { background: var(--thb-night-1); box-shadow: inset 0 0 0 1.5px var(--thb-bone-2); }
.thb .thb-moment.is-now .thb-moment-star { background: var(--thb-moon); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.thb .thb-moment.is-after .thb-moment-star { opacity: .45; }
.thb .thb-moment-year { font: 500 16px/1 var(--thb-display); font-variation-settings: "opsz" 36; color: var(--thb-bone); }
.thb .thb-moment-kind { font: 700 9.5px/1 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--thb-bone-3); }
.thb .thb-moment[aria-selected="true"] { background: rgba(227, 197, 140, .12); box-shadow: inset 0 0 0 1px rgba(227, 197, 140, .45); }
.thb .thb-moment[aria-selected="true"] .thb-moment-star { opacity: 1; transform: scale(1.12); }
.thb .thb-mpanel { margin-top: 10px; padding: 20px 22px; border-radius: 18px; background: rgba(6, 10, 21, .45); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .1); }
.thb .thb-mpanel[hidden] { display: none; }
.thb .thb-mpanel-where { color: var(--thb-bone-2); font-size: 15.5px; }
.thb .thb-mpanel-where b { margin-right: 8px; font: 500 1.35rem/1 var(--thb-display); color: var(--thb-gold-hi); }
.thb .thb-mpanel-text { margin-top: 10px; max-width: 64ch; color: #d7d0c1; }
.thb .thb-mpanel-link .thb-btn { margin-top: 14px; }
.thb .thb-mpanel-cols { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 720px) { .thb .thb-mpanel-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.thb .thb-mpanel-cols h4 { margin-bottom: 8px; color: var(--thb-gold); }
.thb .thb-mpanel-cols .is-beyond h4 { color: var(--thb-bone-3); }
.thb .thb-mpanel-cols li { position: relative; padding-left: 18px; margin-top: 6px; color: var(--thb-bone-2); font-size: 15px; line-height: 1.45; }
.thb .thb-mpanel-cols li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--thb-gold); }
.thb .thb-mpanel-cols .is-beyond li { color: var(--thb-bone-3); }
.thb .thb-mpanel-cols .is-beyond li::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(166, 174, 192, .7); }
.thb .thb-prov { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(241, 237, 228, .1); color: var(--thb-bone-2); font-size: 14px; line-height: 1.55; }
.thb .thb-prov .thb-glyph { width: 16px; height: 16px; margin-top: 2px; color: var(--thb-gold-hi); }
.thb .thb-prov.is-illustration .thb-glyph { color: var(--thb-bone-3); }
.thb .thb-prov-sub { margin-top: 6px; color: var(--thb-bone-3); font-size: 12.5px; }
.thb .thb-key { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 860px) { .thb .thb-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; } }
.thb .thb-key-item { display: flex; gap: 12px; align-items: flex-start; color: var(--thb-bone-2); font-size: 14px; line-height: 1.5; }
.thb .thb-key-item b { color: var(--thb-bone); font-weight: 650; }
.thb .thb-key-mark { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; }
.thb .thb-key-item.is-recorded .thb-key-mark { background: var(--thb-gold-hi); box-shadow: 0 0 0 2.5px var(--thb-night-1), 0 0 0 4px var(--thb-gold); }
.thb .thb-key-item.is-illustration .thb-key-mark { box-shadow: inset 0 0 0 1.5px var(--thb-bone-2); }
.thb .thb-key-item.is-closed .thb-key-mark { border: 1.5px dashed var(--thb-bone-3); }
.thb .thb-key-item.is-open .thb-key-mark { border: 0; background: var(--thb-convergence); }
.thb .thb-key-item.is-now .thb-key-mark { background: var(--thb-moon); border-radius: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.thb .thb-key-item.is-horizon .thb-key-mark { height: 2px; margin-top: 10px; border-radius: 0; background: linear-gradient(90deg, var(--thb-gold-hi) 50%, transparent 50%), linear-gradient(90deg, rgba(227, 197, 140, .5) 50%, transparent 50%); background-size: 50% 2px, 4px 2px; background-repeat: no-repeat, repeat-x; background-position: 0 0, 100% 0; }
@media (max-width: 719px) {
	/* below this width the moments stack as a list: an evenly spaced rail would misstate the dates, so the axis and
	   its horizon (which need a dated axis to be true) step aside and the panels carry the point */
	.thb .thb-axis { display: none; }
	.thb .thb-time-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; height: auto; margin-top: 22px; }
	.thb .thb-moment { position: static; transform: none; width: 100%; }
}

/* ---------- II · a Thought ---------- */
.thb .thb-manuscript { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: 6px 22px 22px 6px; background: linear-gradient(180deg, #fffdf8, #fbf6ea); box-shadow: 0 0 0 1px var(--thb-rule), 0 24px 40px -30px rgba(29, 26, 38, .5), inset 6px 0 0 rgba(201, 163, 94, .35); color: var(--thb-ink); }
.thb .thb-manuscript h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.2; margin: 4px 0 10px; }
.thb .thb-manuscript h3 a { text-decoration: none; }
.thb .thb-manuscript h3 a:hover { text-decoration: underline; text-decoration-color: var(--thb-gold); }
.thb .thb-manuscript .thb-kind .thb-glyph { color: var(--thb-gold-ink); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-manuscript-rule { display: block; height: 46px; margin-top: 16px; background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(122, 90, 32, .14) 13px 14px); }
.thb .thb-gap { padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: rgba(255, 253, 248, .6); box-shadow: 0 0 0 1px var(--thb-rule); }
.thb .thb-gap-art { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 4px 4px; color: var(--thb-ink); }
.thb .thb-gap-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; --thb-glyph-cut: var(--thb-parch); }
.thb .thb-gap-node .thb-glyph { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--thb-night-1); color: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-gap-node.is-faint .thb-glyph { background: transparent; color: var(--thb-ink-3); box-shadow: inset 0 0 0 1.5px rgba(103, 96, 112, .5); }
.thb .thb-gap-node small { color: var(--thb-ink-3); font: 700 10.5px/1 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; }
.thb .thb-gap-link { position: relative; flex: 1; height: 2px; margin-bottom: 20px; }
.thb .thb-gap-link.is-rec { background: var(--thb-gold); }
.thb .thb-gap-link.is-con { background-image: radial-gradient(circle, var(--thb-ink-3) 1.2px, transparent 1.6px); background-size: 8px 2px; background-repeat: repeat-x; background-position: center; }
.thb .thb-gap-link i { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); padding: 0 6px; background: rgba(255, 253, 248, .9); color: var(--thb-ink-3); font: 700 13px/1.2 var(--thb-sans); font-style: normal; }
.thb .thb-gap-key { display: grid; gap: 10px; margin-top: 16px; }
.thb .thb-gap-key li { padding-left: 26px; position: relative; color: var(--thb-ink-2); font-size: 14.5px; line-height: 1.5; }
.thb .thb-gap-key li::before { content: ""; position: absolute; left: 0; top: .7em; width: 18px; height: 2px; background: var(--thb-gold); }
.thb .thb-gap-key li.is-con::before { background-image: radial-gradient(circle, var(--thb-ink-3) 1.2px, transparent 1.6px); background-color: transparent; background-size: 6px 2px; }
.thb .thb-gap-key b { color: var(--thb-ink); }
.thb .thb-shelf-list { display: grid; gap: 12px; }
@media (min-width: 860px) { .thb .thb-shelf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thb .thb-shelf-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255, 253, 248, .7); box-shadow: 0 0 0 1px var(--thb-rule); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-shelf-list .thb-glyph { width: 22px; height: 22px; margin-top: 2px; color: var(--thb-gold-ink); }
.thb .thb-shelf-list a { font: 450 1.06rem/1.35 var(--thb-display); font-variation-settings: "opsz" 24; text-decoration: none; }
.thb .thb-shelf-list a:hover { text-decoration: underline; text-decoration-color: var(--thb-gold); }
.thb .thb-shelf-list small { display: block; margin-top: 4px; color: var(--thb-ink-3); font-size: 13px; }

/* ---------- III · an idea ---------- */
.thb .thb-cons { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.thb .thb-cons a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 16px; border-radius: 18px; text-align: center; text-decoration: none; transition: background-color .25s var(--thb-ease); }
.thb .thb-cons a:hover { background: rgba(241, 237, 228, .06); }
.thb .thb-cons b { font: 450 1.06rem/1.25 var(--thb-display); color: var(--thb-bone); }
.thb .thb-cons span { color: var(--thb-bone-3); font-size: 13px; }
.thb .thb-con { width: 104px; height: 104px; overflow: visible; }
.thb .thb-con-line { stroke: rgba(227, 197, 140, .3); stroke-width: .8; }
.thb .thb-con-star { fill: var(--thb-bone); }
.thb .thb-con-idea { fill: var(--thb-gold-hi); filter: drop-shadow(0 0 6px rgba(227, 197, 140, .6)); }
.thb .thb-cons a:hover .thb-con-line { stroke: rgba(227, 197, 140, .65); }
.thb .thb-rels { padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: rgba(6, 10, 21, .4); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .1); }
.thb .thb-rels ul { display: grid; gap: 12px; }
.thb .thb-rel { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.thb .thb-rel svg { grid-row: span 3; width: 120px; height: 30px; overflow: visible; }
.thb .thb-rel svg g { fill: var(--thb-gold-hi); }
.thb .thb-rel line { stroke-width: 2.4; stroke-linecap: round; }
.thb .thb-rel--support line { stroke: var(--thb-support); }
.thb .thb-rel--convergence line { stroke: var(--thb-convergence); }
.thb .thb-rel--tension line { stroke: var(--thb-tension); stroke-dasharray: 6 5; }
.thb .thb-rel--conflict line { stroke: var(--thb-conflict); }
.thb .thb-rel b { color: var(--thb-bone); font: 650 15px/1.3 var(--thb-sans); }
.thb .thb-rel span { color: var(--thb-bone-2); font-size: 14px; line-height: 1.4; }
.thb .thb-rel em { color: var(--thb-bone-3); font: 700 10.5px/1.6 var(--thb-sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.thb .thb-rel--conflict em { color: #f0b3ae; }

/* ---------- IV · an encounter ---------- */
.thb .thb-floor { padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: rgba(23, 15, 32, .55); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .12), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.thb .thb-floor-head h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); line-height: 1.18; margin: 4px 0 8px; }
.thb .thb-floor-head h3 a { text-decoration: none; }
.thb .thb-floor-head h3 a:hover { text-decoration: underline; text-decoration-color: var(--thb-gold); }
.thb .thb-outcome { display: grid; gap: 12px; margin: 20px 0 16px; }
@media (min-width: 760px) { .thb .thb-outcome { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thb .thb-outcome div { padding: 14px 16px; border-radius: 14px; background: rgba(241, 237, 228, .05); box-shadow: inset 3px 0 0 var(--thb-gold); }
.thb .thb-outcome .is-challenged { box-shadow: inset 3px 0 0 var(--thb-conflict); }
.thb .thb-outcome .is-converged { box-shadow: inset 3px 0 0 var(--thb-convergence); }
.thb .thb-outcome .is-revised { box-shadow: inset 3px 0 0 var(--thb-tension); }
.thb .thb-outcome .is-question { box-shadow: inset 3px 0 0 var(--thb-leaves); }
.thb .thb-outcome dt { color: var(--thb-gold); font: 700 11px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb .thb-outcome dd { margin-top: 6px; color: var(--thb-bone); font: 400 1.02rem/1.5 var(--thb-display); font-variation-settings: "SOFT" 40, "opsz" 16; }
.thb .thb-meet { margin-top: clamp(30px, 4vw, 48px); }
.thb .thb-meet-q { max-width: 70ch; color: #d2cbdc; font-size: 15.5px; }
.thb .thb-meet-pair { display: grid; gap: 16px; align-items: center; margin-top: 20px; }
@media (min-width: 860px) { .thb .thb-meet-pair { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); } }
.thb .thb-meet-side { padding: 22px 24px; border-radius: 22px; background: rgba(241, 237, 228, .06); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .12); }
.thb .thb-meet-side p:not(.thb-meet-year) { margin-top: 8px; color: var(--thb-bone); font: 400 1.08rem/1.62 var(--thb-display); font-variation-settings: "SOFT" 40, "opsz" 16; }
.thb .thb-meet-side footer { margin-top: 12px; color: var(--thb-bone-3); font-size: 13px; }
.thb .thb-meet-year { color: var(--thb-gold-hi); font: 500 2rem/1 var(--thb-display); font-variation-settings: "opsz" 96; }
.thb .thb-meet-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--thb-bone-3); font: 700 10.5px/1.3 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.thb .thb-meet-mid img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--thb-plum-1), 0 0 0 3.5px var(--thb-gold); }
.thb .thb-gate-rows { display: grid; gap: 14px; }
@media (min-width: 860px) { .thb .thb-gate-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thb .thb-gate-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: rgba(241, 237, 228, .05); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .1); }
.thb .thb-gate-row svg { flex: none; width: 110px; height: 34px; margin-top: 4px; fill: none; stroke: var(--thb-gold-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thb .thb-gate-row.is-bounded svg { stroke: var(--thb-lilac); }
.thb .thb-gate-row h4 { color: var(--thb-bone); margin-bottom: 6px; }
.thb .thb-gate-row p { color: #d2cbdc; font-size: 14.5px; line-height: 1.5; }

/* ---------- V · an investigation ---------- */
.thb .thb-probe { padding: clamp(18px, 2.4vw, 28px); border-radius: 22px; background: rgba(255, 253, 248, .74); box-shadow: 0 0 0 1px var(--thb-rule); }
.thb .thb-probe-art { width: 100%; height: auto; overflow: visible; }
.thb .thb-probe-art * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thb .thb-probe-spine { stroke: var(--thb-ink-3); stroke-width: 2; }
.thb .thb-probe-q { stroke: var(--thb-gold-deep); stroke-width: 2; stroke-dasharray: 4 3.5; fill: var(--thb-paper); }
.thb .thb-probe-slot { stroke: var(--thb-ink-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.thb .thb-probe-scope { stroke: var(--thb-gold-ink); stroke-width: 1.4; stroke-dasharray: 6 6; fill: rgba(201, 163, 94, .05); }
.thb .thb-probe-feed, .thb .thb-probe-exit { stroke: var(--thb-gold-deep); stroke-width: 1.8; }
.thb .thb-probe-head { stroke: var(--thb-gold-deep); stroke-width: 1.8; }
.thb .thb-probe-cycle { stroke: var(--thb-gold); stroke-width: 1.8; }
.thb .thb-probe-lens { stroke: var(--thb-convergence); stroke-width: 1.6; stroke-dasharray: 3 3; fill: var(--thb-paper); }
.thb .thb-probe-mark { fill: var(--thb-convergence) !important; }
.thb .thb-probe-mark path, .thb .thb-probe-mark circle { stroke: var(--thb-convergence); stroke-width: 2; }
.thb .thb-probe-ev { stroke: var(--thb-ink-2); stroke-width: 1.5; fill: rgba(29, 26, 38, .06); }
.thb .thb-probe-prop { stroke: var(--thb-ink-2); stroke-width: 1.5; fill: var(--thb-paper); }
.thb .thb-probe-tag { stroke: var(--thb-ink-3); stroke-width: 1.5; }
.thb .thb-probe-gate { stroke: var(--thb-ink); stroke-width: 3; }
.thb .thb-probe-latch { fill: var(--thb-gold-deep) !important; stroke: none; }
.thb .thb-probe-pending { stroke: var(--thb-ink-3); stroke-width: 1.4; stroke-dasharray: 2 4; }
.thb text.thb-probe-zone, .thb text.thb-probe-inner { fill: var(--thb-ink-3) !important; stroke: none; font: 700 9.5px/1 var(--thb-sans); letter-spacing: .1em; }
.thb text.thb-probe-inner { fill: var(--thb-gold-ink) !important; font-size: 10px; }
.thb .thb-probe-key { display: grid; gap: 10px; margin-top: 14px; counter-reset: thbk; }
@media (min-width: 700px) { .thb .thb-probe-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thb .thb-probe-key li { position: relative; padding-left: 30px; color: var(--thb-ink-2); font-size: 14px; line-height: 1.45; counter-increment: thbk; }
.thb .thb-probe-key li::before { content: counter(thbk); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--thb-ink); color: var(--thb-parch); font: 700 11px/1 var(--thb-sans); }
.thb .thb-probe-key b { display: block; color: var(--thb-ink); }
.thb .thb-card--map h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
.thb .thb-card--map .thb-kind .thb-glyph { color: var(--thb-gold-ink); }
.thb .thb-qs-list { display: grid; gap: 12px; }
.thb .thb-qs-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255, 253, 248, .74); box-shadow: 0 0 0 1px var(--thb-rule); }
.thb .thb-qs-list .thb-glyph { width: 24px; height: 24px; color: var(--thb-gold-deep); }
.thb .thb-qs-list p { color: var(--thb-ink); font: 400 1.04rem/1.5 var(--thb-display); font-variation-settings: "opsz" 16; }
.thb .thb-qs-list small { display: block; margin-top: 4px; color: var(--thb-ink-3); font-size: 13px; }
.thb .thb-qs-list a { text-decoration: underline; text-decoration-color: rgba(184, 137, 62, .6); }

/* ---------- VI · an expanding universe: the stage ---------- */
.thb .thb-stage { position: relative; margin-top: 8px; border-radius: 30px; background: radial-gradient(80% 90% at 50% 40%, rgba(27, 41, 80, .55), rgba(6, 10, 21, .3) 70%); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .1), 0 40px 90px -50px rgba(0, 0, 0, .95); }
.thb .thb-stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(14px, 2vw, 22px) 0; }
.thb .thb-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(6, 10, 21, .6); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .12); }
.thb .thb-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 14px; border-radius: 999px; color: var(--thb-bone-2); transition: background-color .25s var(--thb-ease), color .25s var(--thb-ease); --thb-glyph-cut: var(--thb-night-0); }
.thb .thb-tabs [role="tab"] span { display: flex; flex-direction: column; line-height: 1.15; font: 650 15px/1.15 var(--thb-sans); }
.thb .thb-tabs [role="tab"] small { color: var(--thb-bone-3); font: 600 11.5px/1.3 var(--thb-sans); }
.thb .thb-tabs [role="tab"] .thb-glyph { width: 20px; height: 20px; color: var(--thb-gold); }
.thb .thb-tabs [role="tab"][aria-selected="true"] { background: var(--thb-moon); color: var(--thb-night-1); --thb-glyph-cut: var(--thb-moon); }
.thb .thb-tabs [role="tab"][aria-selected="true"] small { color: var(--thb-ink-3); }
.thb .thb-tabs [role="tab"][aria-selected="true"] .thb-glyph { color: var(--thb-gold-deep); }
.thb .thb-tabs [role="tab"]:not([aria-selected="true"]):hover { background: rgba(241, 237, 228, .08); color: var(--thb-bone); }
html:not(.thb-js) .thb .thb-stage-bar { display: none; }
.thb .thb-view { padding: clamp(14px, 2vw, 22px); }
.thb .thb-view-title { color: var(--thb-gold); font: 700 12px/1.3 var(--thb-sans); letter-spacing: .16em; text-transform: uppercase; margin: 4px 0 10px; }
html.thb-js .thb .thb-view-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.thb .thb-view[hidden] { display: none; }
.thb .thb-view.is-entering { animation: thb-view-in .6s var(--thb-ease) both; }
@keyframes thb-view-in { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
.thb .thb-view-next { display: flex; justify-content: center; margin-top: 18px; }

/* the model */
.thb .thb-model-stage { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 20px; scrollbar-width: thin; scrollbar-color: rgba(201, 163, 94, .5) transparent; }
.thb .thb-model-svg { display: block; width: 100%; min-width: 760px; height: auto; overflow: visible; }
.thb .thb-model-window { fill: rgba(111, 155, 214, .05); stroke: rgba(111, 155, 214, .55); stroke-width: 1.4; stroke-dasharray: 5 6; }
.thb .thb-model-gate { fill: none; stroke: var(--thb-bone-2); stroke-width: 3; stroke-linecap: round; }
.thb text.thb-model-zone { fill: var(--thb-bone-3); font: 700 11px/1 var(--thb-sans); letter-spacing: .14em; }
.thb .thb-model-edge { fill: none; stroke-width: 2; stroke-linecap: round; transition: opacity .35s var(--thb-ease), stroke-width .35s var(--thb-ease); }
.thb .thb-model-edge.is-rec { stroke: var(--thb-gold); stroke-opacity: .7; }
.thb .thb-model-edge--conflict.is-rec { stroke: var(--thb-conflict); stroke-opacity: .9; }
.thb .thb-model-edge--moment.is-rec { stroke: var(--thb-tension); stroke-opacity: .85; }
.thb .thb-model-edge.is-con { stroke: var(--thb-bone-3); stroke-opacity: .7; stroke-dasharray: .01 8; stroke-width: 3; }
.thb .thb-model-halo { fill: rgba(227, 197, 140, .06); }
.thb .thb-model-plate { fill: var(--thb-night-1); stroke: rgba(241, 237, 228, .18); stroke-width: 1; }
.thb .thb-model-mark { fill: var(--thb-gold-hi); color: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-model-node--thinker .thb-model-mark { fill: var(--thb-bone); color: var(--thb-bone); }
.thb .thb-model-node--state .thb-model-mark { fill: var(--thb-lilac); color: var(--thb-lilac); }
.thb .thb-model-node--observed .thb-model-mark { fill: var(--thb-support); color: var(--thb-support); }
.thb .thb-model-node--probe .thb-model-mark, .thb .thb-model-node--question .thb-model-mark { fill: var(--thb-bone-2); color: var(--thb-bone-2); }
.thb .thb-model-mark .sh-brain-glyph__cut { stroke: var(--thb-night-1); }
.thb text.thb-model-label { fill: var(--thb-bone-2); font: 600 15px/1 var(--thb-sans); }
.thb .thb-model-node { transition: opacity .35s var(--thb-ease); }
.thb .thb-model.is-tracing .thb-model-node:not(.is-lit), .thb .thb-model.is-tracing .thb-model-edge:not(.is-lit) { opacity: .16; }
.thb .thb-model.is-tracing .thb-model-edge.is-lit { stroke-width: 3; }
.thb .thb-model.is-tracing .thb-model-node.is-lit .thb-model-halo { fill: rgba(227, 197, 140, .2); }
.thb .thb-legend { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 960px) { .thb .thb-legend { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.thb .thb-legend-label { margin-bottom: 8px; color: var(--thb-gold); font: 700 11.5px/1.3 var(--thb-sans); letter-spacing: .16em; text-transform: uppercase; }
.thb .thb-legend-kinds ul { display: flex; flex-wrap: wrap; gap: 8px; }
.thb .thb-legend-key { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(241, 237, 228, .05); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .14); color: var(--thb-bone-2); font: 600 14px/1.2 var(--thb-sans); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-legend-key .thb-glyph { width: 20px; height: 20px; color: var(--thb-gold-hi); }
.thb .thb-legend-key:hover { background: rgba(241, 237, 228, .1); color: var(--thb-bone); }
.thb .thb-legend-key[aria-pressed="true"] { background: var(--thb-moon); color: var(--thb-night-1); box-shadow: none; --thb-glyph-cut: var(--thb-moon); }
.thb .thb-legend-key[aria-pressed="true"] .thb-glyph { color: var(--thb-gold-deep); }
html:not(.thb-js) .thb .thb-legend-kinds { display: none; }
.thb .thb-legend-lines { display: grid; gap: 10px; }
.thb .thb-legend-lines li { position: relative; padding-left: 40px; color: var(--thb-bone-3); font-size: 14px; line-height: 1.5; }
.thb .thb-legend-lines b { color: var(--thb-bone); font-weight: 650; }
.thb .thb-legend-lines span { position: absolute; left: 0; top: .72em; width: 28px; height: 2px; background: var(--thb-gold); }
.thb .thb-legend-lines .is-con span { background: radial-gradient(circle, var(--thb-bone-3) 1.4px, transparent 1.8px) 0 50% / 8px 3px repeat-x; height: 3px; }
.thb .thb-legend-lines .is-apart span { height: 14px; top: .2em; width: 22px; left: 3px; border: 1.4px dashed rgba(111, 155, 214, .8); border-radius: 4px; background: none; }

/* the record (the explorer) */
.thb .thb-ex { position: relative; display: grid; gap: 16px; }
@media (min-width: 1024px) { html.thb-js .thb .thb-ex { grid-template-columns: minmax(0, 1.75fr) minmax(330px, 1fr); align-items: start; } }
.thb .thb-ex-sky { position: relative; border-radius: 22px; overflow: hidden; background: radial-gradient(60% 70% at 50% 50%, rgba(31, 46, 88, .6), rgba(6, 10, 21, .2) 75%); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .08); }
html:not(.thb-js) .thb .thb-ex-sky, html:not(.thb-js) .thb .thb-ex-panel { display: none; }
.thb .thb-ex-svg { display: block; width: 100%; height: auto; aspect-ratio: 1160 / 720; overflow: visible; }
.thb .thb-ex.is-ready .thb-fallback { display: none; }
@media (min-width: 1024px) { .thb .thb-ex-sky { position: sticky; top: 92px; } }
/* sky parts (built by living.js) */
.thb .thb-x-orbit { fill: none; stroke: rgba(201, 163, 94, .16); stroke-width: 1; stroke-dasharray: 1 7; }
.thb .thb-x-band { fill: none; stroke: rgba(227, 197, 140, .32); stroke-width: 3; stroke-linecap: round; }
.thb text.thb-x-bandlabel { fill: var(--thb-gold); font: 700 16px/1 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb .thb-x-link { fill: none; stroke-linecap: round; transition: opacity .4s var(--thb-ease); }
.thb .thb-x-link.is-rec { stroke: var(--thb-gold); stroke-width: 1.6; stroke-opacity: .72; }
.thb .thb-x-link.is-faint { stroke: var(--thb-gold); stroke-width: 1; stroke-opacity: .13; }
.thb .thb-x-link.is-con { stroke: var(--thb-bone-3); stroke-width: 2.4; stroke-opacity: .6; stroke-dasharray: .01 8; }
.thb .thb-x-link.is-conflict { stroke: var(--thb-conflict); stroke-opacity: .9; stroke-width: 2; }
.thb .thb-x-link.is-tension { stroke: var(--thb-tension); stroke-dasharray: 6 5; }
.thb .thb-x-link.is-support { stroke: var(--thb-support); }
.thb .thb-x-link.is-convergence { stroke: var(--thb-convergence); }
.thb .thb-x-link.is-hot { stroke-opacity: .95; stroke-width: 2.2; }
.thb .thb-x-node { cursor: pointer; transition: opacity .45s var(--thb-ease); }
.thb .thb-x-node .thb-x-plate { fill: var(--thb-night-1); stroke: rgba(241, 237, 228, .22); stroke-width: 1; transition: stroke .3s var(--thb-ease); }
.thb .thb-x-node .thb-x-halo { fill: rgba(227, 197, 140, .0); transition: fill .3s var(--thb-ease); }
.thb .thb-x-node use { color: var(--thb-gold-hi); fill: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-x-node--t use { color: var(--thb-bone); fill: var(--thb-bone); }
.thb .thb-x-node--m use { color: var(--thb-lilac); fill: var(--thb-lilac); }
.thb .thb-x-node--q use, .thb .thb-x-node--r use { color: var(--thb-bone-2); fill: var(--thb-bone-2); }
.thb .thb-x-node--n use { color: var(--thb-support); fill: var(--thb-support); }
.thb .thb-x-node.is-con .thb-x-plate { fill: transparent; stroke: var(--thb-bone-3); stroke-dasharray: 3 4; }
.thb .thb-x-node.is-con { cursor: default; }
.thb .thb-x-node.is-ext .thb-x-plate { stroke-dasharray: 2 3; }
.thb .thb-x-star { fill: var(--thb-bone); transition: r .3s var(--thb-ease), fill .3s var(--thb-ease); }
.thb .thb-x-star.has-thought { fill: var(--thb-gold-hi); }
.thb .thb-x-node:hover .thb-x-plate, .thb .thb-x-node.is-hover .thb-x-plate { stroke: var(--thb-gold-hi); }
.thb .thb-x-node:hover .thb-x-halo, .thb .thb-x-node.is-hover .thb-x-halo { fill: rgba(227, 197, 140, .16); }
.thb .thb-x-node.is-focus .thb-x-plate { stroke: var(--thb-gold-hi); stroke-width: 2; }
.thb .thb-x-node.is-focus .thb-x-halo { fill: rgba(227, 197, 140, .2); }
.thb text.thb-x-label { fill: var(--thb-bone-2); font: 600 19.5px/1 var(--thb-sans); pointer-events: none; paint-order: stroke; stroke: rgba(6, 10, 21, .85); stroke-width: 4px; stroke-linejoin: round; }
.thb .thb-x-node.is-focus text.thb-x-label { fill: var(--thb-bone); font-size: 24px; font-weight: 700; }
.thb .thb-x-node--ring text.thb-x-label { opacity: 0; transition: opacity .2s var(--thb-ease); }
.thb .thb-x-node--ring:hover text.thb-x-label, .thb .thb-x-node--ring.is-hover text.thb-x-label, .thb .thb-x-node--ring.is-beacon text.thb-x-label { opacity: 1; }
.thb .thb-x-node--ring.is-dim { opacity: .35; }
.thb .thb-x-portrait { clip-path: circle(50%); }
.thb .thb-x-brain { pointer-events: none; transition: opacity .6s var(--thb-ease); }
.thb .thb-x-back { transition: opacity .6s var(--thb-ease); }
.thb .thb-x-spark { fill: #fff4d6; filter: drop-shadow(0 0 6px rgba(243, 214, 150, .95)); pointer-events: none; }
.thb .thb-x-hint { fill: var(--thb-bone-3); font: 600 18px/1 var(--thb-sans); }
@media (max-width: 759px) { .thb text.thb-x-label, .thb text.thb-x-bandlabel, .thb .thb-x-hint { display: none; } .thb .thb-x-node { pointer-events: none; } }

/* the panel: the record view's real interface */
.thb .thb-ex-panel { position: relative; padding: clamp(18px, 2vw, 24px); border-radius: 22px; background: linear-gradient(180deg, #fffdf8, #f6efe1); color: var(--thb-ink); box-shadow: 0 0 0 1px var(--thb-rule), 0 30px 60px -40px rgba(0, 0, 0, .9); --thb-glyph-cut: var(--thb-paper); }
.thb .thb-ex-panel :focus-visible { outline-color: var(--thb-ink) !important; }
.thb .thb-trail { display: grid; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--thb-rule); }
.thb .thb-trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; flex: 1; min-width: 0; }
.thb .thb-trail li { display: flex; align-items: center; min-width: 0; }
.thb .thb-trail li + li::before { content: ""; width: 14px; height: 2px; margin: 0 4px; background: var(--thb-gold); }
.thb .thb-trail button, .thb .thb-trail span.is-here { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; min-height: 32px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(29, 26, 38, .05); color: var(--thb-ink-2); font: 600 12.5px/1.2 var(--thb-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thb .thb-trail span.is-here { background: var(--thb-ink); color: var(--thb-parch); --thb-glyph-cut: var(--thb-ink); }
.thb .thb-trail .thb-glyph { width: 16px; height: 16px; color: var(--thb-gold-deep); }
.thb .thb-trail span.is-here .thb-glyph { color: var(--thb-gold-hi); }
.thb .thb-trail button:hover { background: rgba(201, 163, 94, .18); }
.thb .thb-trail-tools { display: flex; justify-content: flex-end; gap: 6px; }
.thb .thb-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--thb-rule); color: var(--thb-ink); font: 650 13px/1.2 var(--thb-sans); }
.thb .thb-tool:hover { box-shadow: inset 0 0 0 1.5px var(--thb-ink-3); background: rgba(29, 26, 38, .04); }
.thb .thb-tool .thb-glyph { width: 16px; height: 16px; }
.thb .thb-tool[disabled] { opacity: .45; cursor: default; }
.thb .thb-ex-title { display: flex; align-items: center; gap: 12px; font-family: var(--thb-display); font-weight: 430; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; letter-spacing: -.012em; text-transform: none; font-variation-settings: "SOFT" 40, "opsz" 48; }
.thb .thb-ex-title:focus { outline: none; }
.thb .thb-ex-title:focus-visible { outline: 2px solid var(--thb-ink) !important; outline-offset: 4px; }
.thb .thb-ex-title .thb-glyph, .thb .thb-ex-title img { flex: none; width: 46px; height: 46px; }
.thb .thb-ex-title .thb-glyph { padding: 10px; border-radius: 50%; background: var(--thb-night-1); color: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-ex-title img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--thb-paper), 0 0 0 3.5px var(--thb-gold); }
.thb .thb-ex-kind { margin-bottom: 6px; color: var(--thb-gold-ink); font: 700 11px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb .thb-ex-what { margin-top: 10px; color: var(--thb-ink-2); font-size: 14.5px; line-height: 1.55; }
.thb .thb-ex-facts { margin-top: 8px; color: var(--thb-ink); font-weight: 600; font-size: 14.5px; }
.thb .thb-ex-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--thb-ink); font: 650 14.5px/1.3 var(--thb-sans); text-decoration: underline; text-decoration-color: var(--thb-gold); text-underline-offset: 4px; }
.thb .thb-ex-open .thb-glyph { width: 16px; height: 16px; }
.thb .thb-ex-groups { display: grid; gap: 16px; margin-top: 18px; }
.thb .thb-ex-group h5 { margin: 0; font: 700 12px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; color: var(--thb-ink); }
.thb .thb-ex-group h5 small { color: var(--thb-ink-3); font: 600 11px/1.3 var(--thb-sans); letter-spacing: .02em; text-transform: none; }
.thb .thb-ex-list { display: grid; gap: 6px; }
.thb .thb-go { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px 10px 7px 8px; border-radius: 12px; background: rgba(29, 26, 38, .035); color: var(--thb-ink); font: 600 14.5px/1.3 var(--thb-sans); text-align: left; transition: background-color .2s var(--thb-ease), box-shadow .2s var(--thb-ease); }
.thb .thb-go:hover, .thb .thb-go.is-hover { background: rgba(201, 163, 94, .16); box-shadow: inset 0 0 0 1px rgba(184, 137, 62, .45); }
.thb .thb-go .thb-glyph { width: 20px; height: 20px; color: var(--thb-gold-deep); }
.thb .thb-go-t { flex: 1; min-width: 0; }
.thb .thb-go small { display: block; margin-top: 2px; color: var(--thb-ink-3); font-weight: 500; font-size: 12.5px; }
.thb .thb-go .thb-go-arrow { width: 16px; height: 16px; color: var(--thb-ink-3); }
.thb .thb-go.is-con { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(103, 96, 112, .35); cursor: default; }
.thb .thb-go.is-con:hover { background: transparent; }
.thb .thb-ex-more { color: var(--thb-ink-3); font-size: 13px; padding: 2px 4px; }
.thb .thb-ex-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--thb-ink-3); font-size: 13.5px; line-height: 1.5; }
.thb .thb-ex-note .thb-glyph { width: 15px; height: 15px; margin-top: 2px; color: var(--thb-gold-ink); }
.thb .thb-ex-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--thb-rule); color: var(--thb-ink-3); font-size: 12.5px; }
.thb .thb-ex-key span::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--thb-gold-deep); }
.thb .thb-ex-key span.is-con::before { background: radial-gradient(circle, var(--thb-ink-3) 1.2px, transparent 1.6px) 0 50% / 6px 3px repeat-x; height: 3px; }
.thb .thb-find { position: relative; display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.thb .thb-find .thb-glyph { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--thb-ink-3); pointer-events: none; }
.thb .thb-find input { width: 100%; min-height: 44px; padding: 8px 12px 8px 38px; border: 1.5px solid var(--thb-rule); border-radius: 999px; background: var(--thb-paper); color: var(--thb-ink); font: 500 15px/1.3 var(--thb-sans); }
.thb .thb-find input:focus { border-color: var(--thb-ink-3); outline: 2px solid var(--thb-ink) !important; outline-offset: 2px; }
.thb .thb-bandlist { display: grid; gap: 12px; max-height: 470px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(122, 90, 32, .45) transparent; }
.thb .thb-bandlist h5 { margin: 0 0 6px; color: var(--thb-gold-ink); font: 700 11px/1.3 var(--thb-sans); letter-spacing: .14em; text-transform: uppercase; }
.thb .thb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.thb .thb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 5px; border-radius: 999px; background: rgba(29, 26, 38, .045); color: var(--thb-ink); font: 600 13.5px/1.2 var(--thb-sans); }
.thb .thb-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.thb .thb-chip:hover, .thb .thb-chip.is-hover { background: rgba(201, 163, 94, .2); }
.thb .thb-chip[hidden] { display: none; }
.thb .thb-chip .thb-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--thb-gold-deep); }

/* the record without JavaScript (and its text equivalent) */
.thb .thb-fallback { color: var(--thb-bone-2); }
.thb .thb-sub--night { color: var(--thb-bone); }
.thb .thb-path { position: relative; display: grid; gap: 10px; margin: 14px 0 6px; }
.thb .thb-path::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, var(--thb-gold), rgba(201, 163, 94, .35)); }
.thb .thb-path li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.thb .thb-path .thb-glyph { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--thb-night-1); box-shadow: 0 0 0 1px var(--thb-line); color: var(--thb-gold-hi); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-path small { display: block; color: var(--thb-gold); font: 700 11px/1.4 var(--thb-sans); letter-spacing: .12em; text-transform: uppercase; }
.thb .thb-path a, .thb .thb-path span { color: var(--thb-bone); font: 450 1.05rem/1.4 var(--thb-display); }
.thb .thb-minds { display: grid; gap: 14px 24px; margin-top: 12px; }
@media (min-width: 760px) { .thb .thb-minds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.thb .thb-minds h4 { margin-bottom: 6px; color: var(--thb-gold); }
.thb .thb-minds ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.thb .thb-minds a { color: var(--thb-bone-2); font-size: 14.5px; text-decoration: underline; text-decoration-color: rgba(201, 163, 94, .45); }

/* NewsDesk: the window at the edge of the universe */
.thb .thb-window { display: flex; gap: 18px; align-items: flex-start; max-width: 860px; margin-top: clamp(34px, 4vw, 52px); padding: 22px 24px; border: 1.5px dashed rgba(111, 155, 214, .5); border-radius: 22px; background: rgba(111, 155, 214, .05); }
.thb .thb-window-mark { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--thb-night-1); box-shadow: 0 0 0 1px rgba(111, 155, 214, .5); color: var(--thb-support); --thb-glyph-cut: var(--thb-night-1); }
.thb .thb-window-mark .thb-glyph { width: 26px; height: 26px; }
.thb .thb-window .thb-sub { margin: 0 0 8px; }
.thb .thb-window p { color: var(--thb-bone-2); font-size: 15px; line-height: 1.6; }
.thb .thb-window .thb-btn { margin-top: 14px; }
@media (max-width: 560px) { .thb .thb-window { flex-direction: column; } }

/* ---------- motion (meaning, not decoration; finite; off under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.thb-js .thb [data-thb-reveal].is-armed { opacity: .4; transform: translateY(18px); }
	html.thb-js .thb [data-thb-reveal] { transition: opacity .8s var(--thb-ease), transform .8s var(--thb-ease); }
	html.thb-js .thb .thb-hero .thb-hero-copy > * { animation: thb-rise .9s var(--thb-ease) backwards; }
	html.thb-js .thb .thb-hero .thb-hero-copy > :nth-child(2) { animation-delay: .08s; }
	html.thb-js .thb .thb-hero .thb-hero-copy > :nth-child(3) { animation-delay: .16s; }
	html.thb-js .thb .thb-hero .thb-hero-copy > :nth-child(4) { animation-delay: .24s; }
	html.thb-js .thb .thb-hero .thb-hero-copy > :nth-child(n+5) { animation-delay: .32s; }
	html.thb-js .thb .thb-orrery-link { stroke-dashoffset: 0; animation: thb-draw 1.4s var(--thb-ease) backwards; animation-delay: calc(.5s + var(--i) * .16s); }
	html.thb-js .thb .thb-orrery-link.is-rec { stroke-dasharray: 1; }
	html.thb-js .thb .thb-orrery-link.is-con { animation-name: thb-fade; }
	html.thb-js .thb .thb-orrery-stop { animation: thb-pop .7s var(--thb-spring) backwards; animation-delay: calc(.3s + var(--d) * .12s); }
	html.thb-js .thb .thb-orrery-brain { animation: thb-glow 2.4s var(--thb-ease) backwards .2s; }
	html.thb-js .thb .thb-tw0 { animation: thb-twinkle 4.8s steps(5) infinite; }
	html.thb-js .thb .thb-tw2 { animation: thb-twinkle 6.4s steps(5) infinite 1.4s; }
	html.thb-js .thb .is-still .thb-tw0, html.thb-js .thb .is-still .thb-tw2 { animation-play-state: paused; }
}
@keyframes thb-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes thb-draw { from { stroke-dashoffset: 1; } }
@keyframes thb-fade { from { opacity: 0; } }
@keyframes thb-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@keyframes thb-glow { from { opacity: .2; filter: drop-shadow(0 0 0 rgba(227, 197, 140, 0)); } }
@keyframes thb-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
	.thb *, .thb *::before, .thb *::after { animation: none !important; transition: none !important; }
	.thb .thb-spark, .thb .thb-x-spark { display: none; }
}

/* without JavaScript: every moment's panel, both stage views and the record's path are on the page */
html:not(.thb-js) .thb .thb-mpanel[hidden] { display: block; }
html:not(.thb-js) .thb .thb-mpanel + .thb-mpanel { margin-top: 12px; }
html:not(.thb-js) .thb .thb-axis-cut, html:not(.thb-js) .thb .thb-axis-horizon { display: none; }
html:not(.thb-js) .thb .thb-time-rail, html:not(.thb-js) .thb .thb-axis { display: none; }
html:not(.thb-js) .thb .thb-view[hidden] { display: block; }
html:not(.thb-js) .thb .thb-view-next { display: none; }

@media print {
	.thb .thb-seam, .thb .thb-sky, .thb .thb-time-sky, .thb .thb-ex-sky, .thb .thb-orrery { display: none; }
	.thb .thb-ch, .thb .thb-hero { background: #fff !important; color: #000 !important; }
	.thb .thb-fallback { display: block !important; }
}

/* spacing between stacked figures */
.thb .thb-sky-row + .thb-grid { margin-top: clamp(30px, 4vw, 48px); }
.thb .thb-card .thb-meta { margin-top: 10px; }
.thb .thb-pan { display: none; margin-top: 8px; color: var(--thb-bone-3); font-size: 13px; }
@media (max-width: 899px) { .thb .thb-pan { display: block; } }

/* On wide screens the panel is a fixed instrument beside the sticky sky: it scrolls inside itself, so following a
   link never changes the page's height (which would make the shared thread re-measure the whole page). */
@media (min-width: 1024px) {
	html.thb-js .thb .thb-ex-panel { height: min(80vh, 760px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(122, 90, 32, .45) transparent; }
	html.thb-js .thb .thb-bandlist { max-height: none; overflow: visible; }
}
