/* instiv2 /blog/ section: the hub (bh-), topic pages (bt-) and posts (bx-). Written by hand, used by every page
   build-blog.mjs generates. Built on the kit tokens: light default, dark via html[data-theme="dark"]. Phone first. */

/* ---------- shared: rows, kicker on page backgrounds, plates ---------- */
.bx .kicker { color: var(--page-muted); }
.bx .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.bx .kicker a { color: var(--page-text); font-weight: 600; }
.bx .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bx-sep { opacity: .5; }
.bx-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bx-rows li { opacity: 0; transform: translateY(8px); animation: bxIn .5s var(--ease) forwards; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes bxIn { to { opacity: 1; transform: none; } }
.bx-row { display: grid; gap: 4px; min-height: 44px; padding: 14px 16px; border-radius: 16px; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); transition: transform .35s var(--ease), border-color .25s, box-shadow .35s; }
.bx-row:hover, .bx-row:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 20px 50px -30px rgba(11,18,32,.45); }
.bx-row-t { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.bx-row-d { font-size: 14px; line-height: 1.5; color: var(--page-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bx-row-m { display: block; margin-top: 2px; font: 500 12px/1.5 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .04em; color: var(--page-faint); }
.bx-row-m i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--c, var(--accent)); vertical-align: 1px; }
.bx-row mark { background: rgba(127,178,255,.28); color: inherit; border-radius: 3px; padding: 0 1px; }
/* the typographic plate (data art: a model curve under the title) when no rendered image exists */
.bx-plate { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: inherit; background: radial-gradient(90% 70% at 20% 0%, #13294D 0%, #0D1F3C 55%, #05080F 100%); color: #F2F5FB; padding: clamp(18px, 6%, 40px); display: flex; flex-direction: column; }
.bx-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bx-plate p { position: relative; margin: 0; }
.bx-plate-k { font: 500 11px/1.3 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,233,246,.6); }
.bx-plate-t { margin-top: 14px !important; font-size: clamp(22px, 5.4vw, 38px); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; }
.bx-plate-f { margin-top: auto !important; font: 500 11px/1.4 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.55); }

/* ======================================================================
   POST
   ====================================================================== */
.bx-post { color: var(--page-text); background: var(--page); }
.bx-prog { position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 49; height: 3px; pointer-events: none; }
.bx-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--c, var(--accent)), var(--gain)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* hero: art beside the words on desktop, a 4:5 panel under the header on phones; a soft glow in the topic colour */
.bx-hero { position: relative; overflow: hidden; background: var(--page); }
.bx-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, var(--c, var(--accent)) 18%, transparent), transparent 60%); pointer-events: none; }
.bx-hero-in { position: relative; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 80px); align-items: center; max-width: 1240px; margin: 0 auto; padding: calc(var(--hdr) + 64px) var(--pad) clamp(40px, 7vh, 80px); }
.bx-art { position: relative; margin: 0; max-width: 520px; border-radius: 22px; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--page-line), 0 50px 100px -50px rgba(5,8,15,.55); }
.bx-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.bx-art[data-pop] { cursor: zoom-in; }
.bx-head h1 { margin: 0; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.bx-head .kicker { margin-bottom: 16px; flex-wrap: wrap; row-gap: 6px; }
.bx-dek { margin: 20px 0 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--page-muted); }
.bx-stamp { display: inline-block; margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--page-muted); background: var(--page-2); border: 1px solid var(--page-line); }
.bx-stamp a { text-decoration: underline; text-underline-offset: 3px; color: var(--page-text); }
.bx-stamp + .bx-stamp { margin-left: 8px; }
.bx-by { margin: 18px 0 0; font-size: 14px; color: var(--page-faint); }
.bx-by a { color: var(--page-text); font-weight: 600; }
/* 44 px tap targets on the inline links without moving the layout */
.bx-by a, .bx-author a, .bx-stamp a, .bx-path-t a { position: relative; display: inline-block; padding: 12px 0; margin: -12px 0; }
.bx-head .kicker a { position: relative; display: inline-block; padding: 16px 0; margin: -16px 0; }
.bt-faqs details a { display: inline-flex; align-items: center; min-height: 44px; }
/* prose */
.bx-prose { padding-top: clamp(20px, 4vh, 40px); }
.bx-prose.no-toc { grid-template-columns: minmax(0, 760px); }
.bx-toc { font-size: 14px; }
.bx-toc-h { margin: 0 0 10px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.bx-toc a, .bx-chip-list a { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 7px 10px 7px 12px; border-left: 2px solid transparent; border-radius: 0 10px 10px 0; line-height: 1.35; color: var(--page-muted); transition: color .25s, border-color .25s, background .25s; }
.bx-toc a b, .bx-chip-list a b { font: 500 12px/1.35 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.bx-toc a.is-on { color: var(--page-text); border-left-color: var(--c, var(--accent)); background: var(--page-2); }
.bx-body { font-size: 17px; line-height: 1.7; min-width: 0; }
.bx-body > p { margin: 0 0 1.3em; color: var(--page-text); }
.bx-body > p:first-child { font-size: 18.5px; }
.bx-body h2 { margin: 2em 0 .6em; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; scroll-margin-top: calc(var(--hdr) + 70px); }
.bx-body h3 { margin: 1.6em 0 .4em; font-size: 19px; letter-spacing: -0.01em; }
.bx-body ul, .bx-body ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.bx-body li { margin: 0 0 .45em; }
.bx-body a { color: var(--page-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.bx-body a:hover { text-decoration-color: var(--page-text); }
.bx-body code { font: 500 .92em "JetBrains Mono", "JBM Fallback", monospace; padding: 1px 5px; border-radius: 5px; background: var(--page-2); border: 1px solid var(--page-line); }
.bx-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--page-line); }
/* the pull quote: one plate per post, navy, large; later quotes stay quiet */
.bx-quote { position: relative; margin: 2.2em 0; padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 44px); border-radius: 24px; overflow: hidden; color: #F2F5FB; background: radial-gradient(90% 70% at 15% 0%, #13294D 0%, #0D1F3C 55%, #05080F 100%); box-shadow: 0 40px 90px -50px rgba(5,8,15,.6); }
.bx-quote::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c, var(--accent)), var(--gain)); }
.bx-quote p { margin: 0; font-size: clamp(20px, 2vw, 27px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: inherit; }
.bx-q { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c, var(--accent)); font-size: 18px; line-height: 1.55; font-weight: 500; }
.bx-q p { margin: 0; }
/* figures: the post's SVG chart on a paper plate inside a glass panel (chart ink is navy by house rule) */
.bx-fig { position: relative; margin: 2em 0; padding: 14px; border-radius: 22px; background: var(--page-2); border: 1px solid var(--page-line); box-shadow: 0 30px 70px -50px rgba(5,8,15,.5); }
html[data-theme="dark"] .bx-fig { background: linear-gradient(160deg, rgba(127,178,255,.08), rgba(61,220,151,.04)), #0A1120; }
.bx-fig svg { display: block; width: 100%; height: auto; max-width: 100%; padding: 16px; border-radius: 14px; background: #fff; }
.bx-fig > svg { box-sizing: border-box; }
.bx-fig figcaption { margin: 12px 4px 2px; font: 400 12px/1.55 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .02em; color: var(--page-faint); }
.bx-tag { display: inline-block; margin: 2px 0 12px 2px; padding: 5px 9px; border-radius: 999px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--page-text); background: var(--page); border: 1px solid var(--page-line); }
.bx-fig svg { cursor: zoom-in; }
/* phone: the chart keeps its authored text size (at least 11 px for the 10 px labels) and scrolls sideways inside its
   plate; tap still opens the large viewer */
@media (max-width: 760px) {
  .bx-fig { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .bx-fig > svg { width: 760px; max-width: none; }
  .bx-fig figcaption, .bx-fig .bx-tag { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--pad, 20px) - 30px); }
}
/* the figure viewer (page.js): the chart cloned large, scrollable, for phones where the author's SVG text is small */
.bx-view { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: rgba(5,8,15,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bx-view.is-on { display: flex; }
.bx-view-in { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--hdr) + 10px) 12px 24px; }
.bx-view-in svg { display: block; width: max(100%, 720px); height: auto; padding: 18px; border-radius: 14px; background: #fff; }
.bx-view-x { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.bx-view-x svg { width: 20px; height: 20px; }
.bx-view-cap { margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); font: 400 12.5px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.75); text-align: center; }
body.bx-view-open { overflow: hidden; }
.bx-body > svg { display: block; width: 100%; height: auto; margin: 2em 0; padding: 16px; border-radius: 14px; background: #fff; box-sizing: border-box; }
/* tables: real tables above 720 px, stacked label and value rows below (TK rule) */
.btab { margin: 1.8em 0; }
.btab table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.btab th, .btab td { padding: 10px 12px; border-bottom: 1px solid var(--page-line); text-align: left; vertical-align: top; }
.btab th { font: 600 11px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); border-bottom: 1.5px solid var(--page-faint); }
.btab td + td, .btab th + th { font-family: "JetBrains Mono", "JBM Fallback", monospace; font-variant-numeric: tabular-nums; font-size: 14px; }
.btab tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .btab { border: 1px solid var(--page-line); border-radius: 16px; overflow: hidden; background: var(--page-2); }
  .btab table, .btab tbody, .btab tr, .btab td { display: block; width: 100%; box-sizing: border-box; }
  .btab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btab tr { padding: 10px 14px 12px; border-bottom: 1px solid var(--page-line); }
  .btab tr:last-child { border-bottom: 0; }
  .btab td { padding: 3px 0; border: 0; font-size: 14px; }
  .btab td:first-child { padding-bottom: 6px; font-size: 15.5px; font-weight: 650; font-family: Inter, "Inter Fallback", sans-serif; }
  .btab td + td { display: flex; justify-content: space-between; gap: 12px; }
  .btab td + td::before { content: attr(data-l); font: 500 11.5px/1.5 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--page-faint); }
}
/* strategy block: the live curve and the tile */
.bx-strat { padding: clamp(40px, 7vh, 80px) var(--pad); background: var(--frame-glow); }
.bx-strat-in { max-width: 1100px; margin: 0 auto; }
.bx-strat-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.bx-curve { min-height: 320px; }
.bx-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: 20px; color: var(--page-text); background: var(--page-2); border: 1px solid var(--page-line); box-shadow: 0 30px 70px -50px rgba(5,8,15,.5); transition: transform .35s var(--ease), border-color .25s; }
.bx-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.bx-tile > b { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.bx-tile > small { font-size: 13.5px; line-height: 1.45; color: var(--page-muted); }
.bx-tile-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--page-line); }
.bx-tile-fig span { display: flex; flex-direction: column; gap: 5px; font: 600 17px/1 "JetBrains Mono", "JBM Fallback", monospace; }
.bx-tile-fig span:first-child { color: var(--gain); }
.bx-tile-fig em { font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--page-faint); }
.bx-tile-note { margin-top: auto; padding-top: 12px; font: 400 12px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.bx-tile-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 44px; font-weight: 600; font-size: 15px; }
.bx-tile-go svg { width: 16px; height: 16px; }
/* cards strip */
.bx-cards { background: var(--page); }
.bx-cards .pg-gallery-head h2 { margin-top: 0; }
.bx-strip { grid-auto-columns: minmax(260px, 24vw); }
.bx-strip .pg-media { background: #fff; }
/* after the body: next in topic, path stop, related, author, cta */
.bx-after { padding: clamp(30px, 5vh, 60px) var(--pad) clamp(60px, 9vh, 110px); background: var(--page); }
.bx-after-in { max-width: 760px; margin: 0 auto; display: grid; gap: clamp(26px, 4vh, 40px); }
.bx-next { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bx-nx { display: grid; gap: 4px; min-height: 44px; padding: 14px 16px; border-radius: 16px; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); transition: transform .35s var(--ease), border-color .25s; }
.bx-nx:hover { transform: translateY(-2px); border-color: var(--accent); }
.bx-nx.is-end { opacity: .7; }
.bx-nx-l { font: 500 12px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.bx-nx b { font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; }
.bx-nx small { font: 500 12px/1.3 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.bx-nx[rel="next"] { text-align: right; }
.bx-path { position: relative; padding: 18px 20px 20px; border-radius: 20px; background: var(--page-2); border: 1px solid var(--page-line); overflow: hidden; }
.bx-path::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--accent)); }
.bx-path .kicker { margin-bottom: 8px; }
.bx-path-t { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.bx-path-t a { text-decoration: underline; text-underline-offset: 3px; }
.bx-path-dots { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 6px; }
.bx-path-dots li { width: 100%; max-width: 44px; height: 6px; border-radius: 6px; background: var(--page-line); }
.bx-path-dots li.is-done { background: color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); }
.bx-path-dots li.is-here { background: var(--c, var(--accent)); }
.bx-path-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.bx-path-nav a { display: grid; gap: 3px; min-height: 44px; padding: 10px 12px; border-radius: 12px; background: var(--page); border: 1px solid var(--page-line); }
.bx-path-nav a span { font: 500 11px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--page-faint); }
.bx-path-nav a b { font-size: 14px; line-height: 1.3; }
.bx-path-nav a:only-child { grid-column: 1 / -1; }
.bx-rel .kicker { margin-bottom: 12px; }
.bx-author { padding: 18px 20px; border-radius: 20px; background: var(--page-2); border: 1px solid var(--page-line); }
.bx-author-n { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.bx-author-b { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--page-muted); }
.bx-author a { text-decoration: underline; text-underline-offset: 3px; color: var(--page-text); }
.bx-fine { max-width: none; font-size: 13px; line-height: 1.55; color: var(--page-faint); }
.bx-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-cta .btn-solid { background: var(--page-text); color: var(--page); }
.bx-cta .btn-ghost { color: var(--page-text); border-color: var(--page-line); background: var(--page-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the phone contents chip (posts with 3 or more sections): a glass pill under the header once the hero is gone */
.bx-chip { position: fixed; z-index: 45; left: 12px; right: 12px; top: calc(var(--hdr) + 8px); display: none; transform: translate3d(0, -140%, 0); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), opacity .3s; }
.bx-chip.is-on { transform: none; opacity: 1; pointer-events: auto; }
.bx-chip-btn { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--page-line); background: color-mix(in srgb, var(--page-2) 90%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: var(--page-text); font: 600 14.5px/1.2 Inter, "Inter Fallback", sans-serif; cursor: pointer; text-align: left; }
.bx-chip-btn > svg { flex: none; width: 18px; height: 18px; color: var(--page-faint); }
.bx-chip-btn > svg:last-of-type { transition: transform .3s var(--ease); }
.bx-chip-btn[aria-expanded="true"] > svg:last-of-type { transform: rotate(180deg); }
.bx-chip-n { flex: none; font: 500 12.5px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.bx-chip-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bx-chip-list { margin-top: 6px; max-height: min(62svh, 520px); overflow: auto; overscroll-behavior: contain; border-radius: 16px; border: 1px solid var(--page-line); background: var(--page-2); box-shadow: 0 30px 60px -30px rgba(5,8,15,.55); }
.bx-chip-list a { min-height: 44px; align-items: center; padding: 10px 16px; border-left: 0; border-radius: 0; border-top: 1px solid var(--page-line); font-size: 15px; }
.bx-chip-list a:first-child { border-top: 0; }
.bx-chip-list a.is-on { color: var(--page-text); background: var(--page); }
@media (max-width: 860px) {
  .bx-hero-in { grid-template-columns: 1fr; gap: 22px; padding-top: calc(var(--hdr) + 58px); padding-bottom: 28px; }
  .bx-art { max-width: none; border-radius: 18px; }
  .bx-head h1 { font-size: clamp(28px, 7.6vw, 36px); }
  .bx-dek { font-size: 17px; }
  .bx-body { font-size: 16.5px; }
  .bx-body > p:first-child { font-size: 17.5px; }
  .bx-strat-grid { grid-template-columns: 1fr; }
  .bx-curve { min-height: 0; }
  .bx-strip { grid-auto-columns: 76vw; }
  .bx-next, .bx-path-nav { grid-template-columns: 1fr; }
  .bx-nx[rel="next"] { text-align: left; }
  .bx-chip { display: block; }
  .bx-stamp + .bx-stamp { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .bx-rows li { animation: none; opacity: 1; transform: none; } .bx-chip { transition: none; } .bx-prog i { transition: none; } }

/* ======================================================================
   TOPIC
   ====================================================================== */
.bt-hero .pg-hero-in { padding-bottom: clamp(36px, 8vh, 80px); }
.bt-hero .chips { margin-top: 24px; }
.bt-in { max-width: 1100px; margin: 0 auto; padding: clamp(60px, 10vh, 120px) var(--pad); color: var(--page-text); }
.bt-order .h-m, .bt-all .h-m, .bt-deeper .h-m, .bt-faq .h-m { margin-top: 0; max-width: 16em; }
.bt-stops { position: relative; list-style: none; margin: 28px 0 0; padding: 0 0 0 4px; display: grid; gap: 4px; }
.bt-stops::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: var(--c); }
.bt-stops a { position: relative; display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 56px; padding: 10px 14px 10px 0; border-radius: 14px; color: var(--page-text); transition: background .25s; }
.bt-stops a::before { content: ""; width: 16px; height: 16px; margin-left: 2px; border-radius: 50%; background: var(--page); border: 3px solid var(--c); box-sizing: border-box; position: relative; z-index: 1; }
.bt-stops a:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.bt-stop-n { font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.bt-stop-t { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.bt-stop-m { font: 500 12px/1.3 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); white-space: nowrap; }
.bt-rows { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bt-deeper { background: var(--ink); color: var(--text); }
.bt-deeper .bt-in { color: var(--text); }
.bt-deeper .kicker { color: var(--muted); } .bt-deeper .kicker .num { color: var(--text); border-color: var(--line); }
.bt-doors, .bh-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; text-align: left; }
.bt-doors a, .bh-doors a { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 20px 22px 22px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); color: var(--text); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition: transform .4s var(--ease), border-color .3s, background .3s; }
.bt-doors a::after, .bh-doors a::after { content: ""; position: absolute; right: 18px; top: 22px; width: 9px; height: 9px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .4s var(--ease); }
.bt-doors a:hover, .bh-doors a:hover { transform: translateY(-4px); border-color: rgba(214,226,255,.4); background: rgba(10,18,34,.62); }
.bt-doors b, .bh-doors b { font-size: 17px; letter-spacing: -0.01em; padding-right: 22px; }
.bt-doors span, .bh-doors span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.bt-faq { background: var(--page); }
.bt-faqs { margin-top: 26px; max-width: 760px; }
.bt-faqs details { border-top: 1px solid var(--page-line); }
.bt-faqs details:last-child { border-bottom: 1px solid var(--page-line); }
.bt-faqs summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 44px; padding: 16px 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; cursor: pointer; }
.bt-faqs summary::-webkit-details-marker { display: none; }
.bt-faqs summary::after { content: "+"; flex: none; font: 400 22px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); transition: transform .3s var(--ease); }
.bt-faqs details[open] summary::after { transform: rotate(45deg); }
.bt-faqs details p { margin: 0 0 20px; max-width: 40em; line-height: 1.6; color: var(--page-muted); }
.bt-faqs details a { display: inline-block; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; color: var(--page-text); }
@media (max-width: 860px) {
  .bt-stops a { grid-template-columns: 34px 1fr; grid-template-areas: "d t" "d m"; row-gap: 3px; min-height: 60px; }
  .bt-stops a::before { grid-area: d; }
  .bt-stop-n { display: none; }
  .bt-stop-t { grid-area: t; } .bt-stop-m { grid-area: m; }
  .bt-rows { grid-template-columns: 1fr; }
  .bt-doors, .bh-doors { grid-template-columns: 1fr; }
}

/* ======================================================================
   HUB
   ====================================================================== */
.bh-in { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 10vh, 120px) var(--pad); color: var(--page-text); }
.bh-in .h-m { margin-top: 0; max-width: 16em; }
.bh-center { justify-content: center; }
.bh-doors { max-width: 980px; margin-left: auto; margin-right: auto; }
.bh-doors-page { max-width: none; }
/* featured */
.bh-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.bh-card { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); box-shadow: 0 30px 70px -50px rgba(5,8,15,.5); transition: transform .4s var(--ease), border-color .3s; }
.bh-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.bh-card-art { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-bottom: 1px solid var(--page-line); }
.bh-card-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.bh-card-art .bx-plate { aspect-ratio: auto; height: 100%; border-radius: 0; }
.bh-card-in { display: grid; gap: 8px; padding: 18px 20px 20px; }
.bh-card-k { font: 500 12px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.bh-card-k::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.bh-card b { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.bh-card-d { font-size: 14.5px; line-height: 1.5; color: var(--page-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* topics */
.bh-tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.bh-topic { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 20px 20px 18px; border-radius: 20px; overflow: hidden; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); transition: transform .4s var(--ease), border-color .3s; }
.bh-topic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.bh-topic::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); pointer-events: none; }
.bh-topic:hover { transform: translateY(-4px); border-color: var(--c); }
.bh-topic b { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; }
.bh-topic span { font-size: 13.5px; line-height: 1.45; color: var(--page-muted); }
.bh-topic i { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .06em; color: var(--c); }
.bh-topic i svg { width: 14px; height: 14px; }
/* reading paths: the subway map (Learn pattern) */
.bh-paths-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 90px); align-items: end; margin-bottom: clamp(26px, 5vh, 48px); }
.bh-paths-sub { margin: 0; max-width: 28em; font-size: 15.5px; line-height: 1.55; color: var(--page-muted); }
.bh-map { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.bh-lines { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bh-line { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 40px minmax(170px, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: center; width: 100%; min-height: 58px; padding: 8px 14px 8px 10px; border-radius: 16px; cursor: pointer; color: var(--page-text); transition: background .3s, box-shadow .3s; }
.bh-line:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.bh-line:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.bh-line[aria-pressed="true"] { background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line), 0 20px 50px -30px rgba(5,8,15,.35); }
.bh-ln { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 600 13px/1 "JetBrains Mono", "JBM Fallback", monospace; color: #fff; background: color-mix(in srgb, var(--c) 78%, #05080F); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.bh-lt { min-width: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.bh-lt small { display: block; margin-top: 3px; font: 500 13px/1.3 Inter, "Inter Fallback", sans-serif; color: var(--page-muted); }
.bh-track { position: relative; display: block; height: 22px; }
.bh-rail { position: absolute; left: 0; top: 50%; width: calc(var(--n) / 10 * 100%); height: 6px; margin-top: -3px; border-radius: 6px; background: var(--c); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.3,.6,.1,1); }
.bh-lines.is-in .bh-rail, .no-js .bh-rail { transform: none; }
.bh-rail i { position: absolute; top: 50%; left: calc(var(--k) / (var(--n) - 1) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--page-2); border: 3px solid var(--c); box-sizing: border-box; }
.bh-rail i:first-child, .bh-rail i:last-of-type { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.bh-train { position: absolute; top: 50%; left: 0; width: 26px; height: 12px; margin: -6px 0 0 -13px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 16px var(--c); opacity: 0; }
.bh-line[aria-pressed="true"] .bh-train { opacity: 1; animation: bhRide 5.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes bhRide { 0%, 6% { left: 0; } 94%, 100% { left: 100%; } }
.bh-card-wrap { position: sticky; top: calc(var(--hdr) + 24px); }
.bh-pc { position: relative; padding: clamp(20px, 2.4vw, 30px); border-radius: 26px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line), 0 40px 90px -50px rgba(5,8,15,.45); overflow: hidden; }
.bh-pc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.bh-pc-k { display: flex; gap: 10px; margin: 6px 0 0; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-muted); }
.bh-pc-k span:first-child { color: var(--c); font-weight: 600; }
.bh-pc h3 { margin: 12px 0 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.03em; }
.bh-pc-m { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--page-muted); }
.bh-stops { position: relative; list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; display: grid; }
.bh-stops::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--c); }
.bh-stops li { opacity: 0; transform: translateX(-6px); animation: bhIn .45s var(--ease) forwards; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes bhIn { to { opacity: 1; transform: none; } }
.bh-stops a { position: relative; display: grid; grid-template-columns: 30px 28px 1fr; align-items: center; min-height: 44px; padding-right: 8px; font-size: 14.5px; line-height: 1.3; color: var(--page-text); border-radius: 10px; }
.bh-stops a::before { content: ""; width: 14px; height: 14px; margin-left: 3px; border-radius: 50%; background: var(--page-2); border: 3px solid var(--c); box-sizing: border-box; position: relative; z-index: 1; }
.bh-stops a:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.bh-stops a span { font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-muted); }
.bh-pc-go { margin-top: 18px; background: var(--page-text); color: var(--page); }
.bh-pc-go:hover { opacity: .9; }
/* all notes: search, chips, rows */
.bh-box { position: relative; display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 4vh, 44px); padding: 0 22px; height: 68px; border-radius: 22px; background: var(--page-glass); border: 1px solid var(--page-line); box-shadow: 0 30px 80px -40px rgba(11,18,32,.35); transition: border-color .3s, box-shadow .3s; }
.bh-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(127,178,255,.18), 0 30px 80px -40px rgba(11,18,32,.35); }
.bh-box svg { flex: none; width: 22px; height: 22px; color: var(--page-muted); }
.bh-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--page-text); font: 500 clamp(16px, 1.5vw, 20px)/1 Inter, "Inter Fallback", sans-serif; letter-spacing: -0.01em; }
.bh-box input::placeholder { color: var(--page-faint); }
.bh-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bh-box kbd { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--page-line); font: 500 13px "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); }
.bh-chips { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.bh-chips::-webkit-scrollbar { display: none; }
.bh-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--page-line); background: var(--page-glass); color: var(--page-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.bh-chips button b { font: 500 12px "JetBrains Mono", "JBM Fallback", monospace; opacity: .7; }
.bh-chips button[aria-pressed="true"] { background: var(--page-text); color: var(--page); border-color: var(--page-text); }
.bh-status { margin: 22px 0 12px; font: 500 12px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.bh-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-rows .none { grid-column: 1 / -1; padding: 24px 0; color: var(--page-muted); }
.bh-more { margin-top: 16px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); font-weight: 600; cursor: pointer; }
.bh-more[hidden] { display: none; }
.bh-nojs { margin: 12px 0 0; font-size: 14px; color: var(--page-muted); }
.bh-nojs:empty { display: none; }
.bh-sub { background: var(--ink); color: var(--text); }
.bh-sub .bh-in { color: var(--text); }
.bh-sub .kicker { color: var(--muted); } .bh-sub .kicker .num { color: var(--text); border-color: var(--line); }
@media (max-width: 1100px) { .bh-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bh-cards { grid-template-columns: 1fr 1fr; } .bh-cards .bh-card:first-child { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .bh-cards { grid-template-columns: 1fr; }
  .bh-cards .bh-card:first-child { grid-column: auto; }
  .bh-card-art { aspect-ratio: 16 / 10; }
  .bh-paths-head, .bh-map { grid-template-columns: 1fr; }
  .bh-line { grid-template-columns: 40px 1fr; }
  .bh-track { grid-column: 2; }
  .bh-card-wrap { position: static; }
  .bh-rows { grid-template-columns: 1fr; }
  .bh-box { height: 60px; padding: 0 16px; }
  .bh-box kbd { display: none; }
}
@media (max-width: 600px) { .bh-tgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .bh-topic { min-height: 0; padding: 16px 14px 14px; } .bh-topic b { font-size: 16.5px; } .bh-topic span { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .bh-rail { transition: none; transform: none; } .bh-line[aria-pressed="true"] .bh-train { animation: none; left: 0; } .bh-stops li { animation: none; opacity: 1; transform: none; } }

/* ======================================================================
   W2 (12-Oct): expanded posts. The Learn vis kit inside the reading column, the "Learn this properly" panel, the
   questions and the sources list. vis.css is linked before this file, so these rules win where they disagree.
   ====================================================================== */
/* the prose list and heading rules must not reach into the kit's components */
.bx-body :is(ol, ul).vis, .bx-body .vis :is(ol, ul) { padding-left: 0; }
.bx-body .vis li { margin: 0; }
.bx-body > .vis { margin: 2em 0; }
.bx-body .vis h3, .bx-body .vis h4 { margin: 0; letter-spacing: -0.01em; }
.bx-body .vis a { text-decoration-color: color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); }
/* inline SVG diagrams (360 wide viewBox): full column on phones, capped on desktop, text follows the theme */
.bx-body .vis-figure > svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; color: var(--page-text); overflow: visible; }
.bx-body .vis-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--page-muted); }
.bx-body .vis-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Learn this properly */
.bx-learn { position: relative; margin: 2.6em 0 2em; padding: 22px 22px 18px; border-radius: 22px; overflow: hidden; color: var(--page-text); background: linear-gradient(150deg, color-mix(in srgb, var(--c, var(--accent)) 14%, var(--page-2)), var(--page-2) 62%); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, var(--page-line)); }
.bx-learn::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--accent)) 30%, transparent), transparent 70%); pointer-events: none; }
.bx-learn-k { margin: 0 0 10px; font: 600 12px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-muted); }
.bx-body .bx-learn-t { margin: 0; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; }
.bx-learn-d { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--page-muted); }
.bx-body ul.bx-learn-m { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.bx-body .bx-learn-m li { margin: 0; padding: 5px 10px; border-radius: 999px; font: 500 12px/1.4 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-muted); background: var(--page); border: 1px solid var(--page-line); }
.bx-learn-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bx-body .bx-learn-go a { text-decoration: none; }
.bx-learn-go .btn-solid { background: var(--page-text); color: var(--page); }
.bx-learn-go .btn-ghost { color: var(--page-text); border-color: var(--page-line); background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bx-body a.bx-learn-tool { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--page); border: 1px solid var(--page-line); text-decoration: none; color: var(--page-text); transition: border-color .25s, transform .3s var(--ease); }
.bx-body a.bx-learn-tool:hover { border-color: var(--c, var(--accent)); transform: translateY(-1px); }
.bx-learn-tool span { font: 500 12px/1.3 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-faint); white-space: nowrap; }
.bx-learn-tool b { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; }
.bx-learn-tool svg { width: 16px; height: 16px; flex: none; }

/* questions */
.bx-faq { margin: 2.4em 0 1.6em; }
.bx-body .bx-faq h2 { margin-top: 0; }
.bx-faq details { border-top: 1px solid var(--page-line); }
.bx-faq details:last-child { border-bottom: 1px solid var(--page-line); }
.bx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 12px 2px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 650; line-height: 1.35; }
.bx-faq summary::-webkit-details-marker { display: none; }
.bx-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--page-muted); border-bottom: 2px solid var(--page-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.bx-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.bx-faq summary:focus-visible { outline: 2px solid var(--c, var(--accent)); outline-offset: 2px; border-radius: 8px; }
.bx-faq-a { padding: 0 2px 16px; }
.bx-faq-a p { margin: 0 0 .8em; font-size: 16px; line-height: 1.65; color: var(--page-muted); }
.bx-faq-a p:last-child { margin-bottom: 0; }

/* sources */
.bx-sources { margin: 1.6em 0 0; padding: 16px 18px; border-radius: 16px; background: var(--page-2); border: 1px solid var(--page-line); }
.bx-sources-k { margin: 0 0 8px; font: 600 12px/1.4 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.bx-body .bx-sources ol { margin: 0; padding-left: 1.2em; }
.bx-body .bx-sources li { margin: 0 0 .35em; font-size: 13.5px; line-height: 1.55; color: var(--page-muted); }
.bx-body .bx-sources li a { overflow-wrap: anywhere; }

/* the closing call to action on expanded posts: sign up first, Learn second, all notes as a quiet link */
.bx-cta-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; color: var(--page-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .bx-learn { padding: 18px 16px 16px; border-radius: 18px; }
  .bx-learn-go .btn { flex: 1 1 100%; justify-content: center; }
  .bx-learn-tool span { display: none; }
}