/*
 * Blog (/blog/ and /blog/<slug>/) in the new look — approved mockup "B · Reading room" (Jared, 2026-11-01,
 * claude.ai/artifact/UAjxCkiiCz899zwDUMtUi6): a light reading page with a navy header, one wide row per article and a
 * sidebar (join card, topics with counts, most read); articles get "In this article" contents and a sticky sidebar.
 * Loaded after public-live.css (top bar, buttons, chips, footer) and only when Jerand_Member_Frame::public_on() is true.
 * Scoped to body.kpp-blog. The article text keeps id="bpContent" (old scripts/links point at it).
 */
/* no Aurora: a light reading page, with a faint gold art-deco fan pattern on the grey (Jared, 2026-11-01; the same
   fans as the watch page's white side). The white cards sit on top, so the words are always on clean white. */
.kpp.kpp-blog { color: var(--kpp-text); font-size: 15px; line-height: 1.6; background-color: var(--kpp-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-opacity='.12' stroke-width='1'%3E%3Ccircle cx='24' cy='24' r='22'/%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='24' cy='24' r='8'/%3E%3Ccircle cx='0' cy='0' r='22'/%3E%3Ccircle cx='48' cy='0' r='22'/%3E%3Ccircle cx='0' cy='0' r='15'/%3E%3Ccircle cx='48' cy='0' r='15'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='48' cy='0' r='8'/%3E%3C/g%3E%3C/svg%3E"); }
.kpp.kpp-blog::before { display: none; }
.kpp-blog .kpp-bar { gap: 14px; }
.kpp-blog .kpp-bar .kpp-btn { min-height: 40px; }
.kbl-barlink { color: #e6e9f2; font: 600 14px var(--kps-display); text-decoration: none; }
.kbl-barlink:hover { color: var(--kpp-gold-xl); }
.kbl-lbl { display: block; font: 700 11px/1.4 var(--kps-display); letter-spacing: 1.3px; text-transform: uppercase; color: var(--kpp-gold-l); }
.kbl-lbl-d { color: #9a7424; }

/* person: initials under, photo on top when there is one */
.kbl-av { position: relative; overflow: hidden; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5a6585, #2f3654); color: #fff; font-weight: 800; }
.kbl-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbl-av-sm { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px var(--kpp-gold); }
.kbl-av-md { width: 46px; height: 46px; font-size: 15px; box-shadow: 0 0 0 2px var(--kpp-gold); }
.kbl-av-lg { width: 60px; height: 60px; font-size: 20px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kpp-gold); }
.kbl-av-xl { width: 68px; height: 68px; font-size: 22px; box-shadow: 0 0 0 3px var(--kpp-navy1), 0 0 0 5px var(--kpp-gold), 0 0 30px rgba(212,168,73,.25); }

.kbl-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font: 700 11.5px/1.2 var(--kps-display); letter-spacing: .3px; white-space: nowrap; }
.kbl-chip-gold { background: linear-gradient(135deg, var(--kpp-gold-xl), var(--kpp-gold)); color: var(--kpp-ink); }
.kbl-chip-white { background: #fff; color: var(--kpp-ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* ── list: navy header ── */
.kbl-hero { position: relative; padding: 40px max(28px, env(safe-area-inset-right, 0px)) 104px max(28px, env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, var(--kpp-navy2), var(--kpp-navy3)); color: var(--kpp-mut-d); }
/* the top bar and the header read as one unit on the list (Jared, 2026-11-01): no line between them, and the band starts
   in the bar's own bottom colour and runs top to bottom (a diagonal would show a seam) */
.kpp-blog .kpp-bar:has(+ .kbl-hero) { border-bottom: 0; }
.kbl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 320px 150px at calc(100% - 180px) 160px, rgba(212,168,73,.26), transparent 100%); pointer-events: none; }
/* charcoal now (Jared, 2026-11-02): the same effects the navy band had (getting lighter towards the wave, one soft gold
   glow on the right, no dots), so the bar and the band read as one unit */
/* the header's bottom edge (Jared picked "#8 Layered waves", 2026-11-01, claude.ai/artifact/9uqMCK2pRDqYpvdLkMPayk): the
   navy band ends in a wave, with two softer see-through waves rippling out under it (no gold line). One mask does it
   all: the main wave solid, the two lower waves at 45% / 20%, so the page and its pattern show through them. */
.kbl-hero { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 79px) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H1440V66C1180%2084%20940%2048%20700%2068C460%2086%20220%2054%200%2072Z%27%20fill-opacity%3D%27.2%27%2F%3E%3Cpath%20d%3D%27M0%200H1440V52C1200%2074%20960%2036%20720%2056C480%2076%20240%2040%200%2060Z%27%20fill-opacity%3D%27.45%27%2F%3E%3Cpath%20d%3D%27M0%200H1440V28C1200%2054%20960%2010%20720%2032C480%2054%20240%2014%200%2036Z%27%2F%3E%3C%2Fsvg%3E") bottom / 100% 80px no-repeat;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 79px) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H1440V66C1180%2084%20940%2048%20700%2068C460%2086%20220%2054%200%2072Z%27%20fill-opacity%3D%27.2%27%2F%3E%3Cpath%20d%3D%27M0%200H1440V52C1200%2074%20960%2036%20720%2056C480%2076%20240%2040%200%2060Z%27%20fill-opacity%3D%27.45%27%2F%3E%3Cpath%20d%3D%27M0%200H1440V28C1200%2054%20960%2010%20720%2032C480%2054%20240%2014%200%2036Z%27%2F%3E%3C%2Fsvg%3E") bottom / 100% 80px no-repeat; }
/* everything centred, the pills on their own row under the words (Jared, 2026-11-01) */
.kbl-hero-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.kbl-hero-in > div:first-child { display: grid; justify-items: center; }
.kbl-hero h1 { margin: 8px 0; font: 800 42px/1.1 var(--kps-display); letter-spacing: -1.1px; color: #fff; }
.kbl-hero h1 span { color: var(--kpp-gold-l); }
.kbl-hero p { max-width: 620px; font-size: 16px; }
.kbl-shared { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(212,168,73,.35); color: #e6e9f2; font-size: 14px; }
.kbl-shared b { color: #fff; }
.kbl-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ── list + sidebar ── */
.kbl-cols { flex: 1; width: 100%; max-width: 1296px; margin: 0 auto; padding: 28px max(28px, env(safe-area-inset-right, 0px)) 56px max(28px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.kbl-list { display: grid; gap: 16px; min-width: 0; }
.kbl-listh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; color: #64748b; }
.kbl-listh b { font: 800 22px var(--kps-display); color: var(--kpp-ink); }
.kbl-listh a { margin-left: auto; color: #9a7424; font-weight: 700; text-decoration: none; }
.kbl-empty { padding: 40px 24px; border-radius: 18px; background: #fff; text-align: center; color: #64748b; box-shadow: inset 0 0 0 1px #e3e6ee; }
.kbl-empty a { color: #9a7424; font-weight: 700; }
/* every row the same height (the tallest sets them all) */
.kbl-rows { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.kbl-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; text-decoration: none; color: inherit; min-width: 0; transition: box-shadow .15s, transform .15s; }
.kbl-row:hover { box-shadow: 0 10px 28px rgba(15,23,42,.10), inset 0 0 0 1px #e3d3a5; transform: translateY(-1px); }
.kbl-row:focus-visible { outline: 2px solid var(--kpp-gold); outline-offset: 2px; }
.kbl-rowimg { position: relative; min-height: 200px; background: linear-gradient(135deg, var(--kpp-navy3), var(--kpp-navy1)); }
.kbl-rowimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbl-rowimg .kbl-chip { position: absolute; left: 12px; top: 12px; z-index: 1; }
.kbl-rowbody { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; min-width: 0; }
.kbl-rowt { font: 800 19px/1.3 var(--kps-display); letter-spacing: -.2px; color: var(--kpp-ink); overflow-wrap: anywhere; }
.kbl-rowx { font-size: 14.5px; color: #5b6475; overflow-wrap: anywhere; }
.kbl-rowm { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--kpp-line); display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--kpp-mut); }
.kbl-rowm b { color: #9a7424; white-space: nowrap; }
.kbl-row-big { grid-template-columns: minmax(0, 1fr); }
.kbl-row-big .kbl-rowimg { min-height: 0; aspect-ratio: 1200 / 500; }
.kbl-row-big .kbl-rowbody { padding: 24px 28px 26px; }
.kbl-row-big .kbl-rowt { font-size: 27px; letter-spacing: -.5px; }
.kbl-row-big .kbl-rowx { font-size: 15.5px; }
.kbl-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kbl-pager a, .kbl-pager span { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 11px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--kpp-line); font: 700 14px var(--kps-display); color: var(--kpp-ink); text-decoration: none; }
.kbl-pager span { background: none; box-shadow: none; color: var(--kpp-mut); }
.kbl-pager a.on { background: var(--kpp-navy2); color: var(--kpp-gold-xl); box-shadow: none; }
.kbl-pager a.off { opacity: .45; pointer-events: none; }

/* ── sidebar boxes ── */
.kbl-side { display: grid; gap: 16px; position: sticky; top: 82px; min-width: 0; }
.kbl-box { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; min-width: 0; }
.kbl-box-h { font: 800 15px var(--kps-display); color: var(--kpp-ink); }
.kbl-box-navy { justify-items: center; text-align: center; background: linear-gradient(160deg, var(--kpp-navy2), var(--kpp-navy1)); color: var(--kpp-mut-d); box-shadow: 0 14px 40px rgba(15,23,42,.25); }
.kbl-box-navy b { font: 800 18px/1.3 var(--kps-display); color: #fff; overflow-wrap: anywhere; }
.kbl-box-navy p { font-size: 13.5px; }
.kbl-join .kbl-av-xl { margin-bottom: 4px; }
.kbl-join-mark { width: 52px; height: 52px; border-radius: 14px; font-size: 17px; margin-bottom: 4px; }
.kbl-join .kpp-btn { justify-self: center; }
.kbl-topics { display: grid; gap: 2px; }
.kbl-topics a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font: 600 14px var(--kps-display); color: var(--kpp-text); text-decoration: none; }
.kbl-topics a:hover { background: #f5f6fa; }
.kbl-topics em { font-style: normal; font-size: 13px; color: var(--kpp-mut); font-variant-numeric: tabular-nums; }
.kbl-topics a.on { background: var(--kpp-navy2); color: var(--kpp-gold-xl); }
.kbl-topics a.on em { color: var(--kpp-gold-l); }
.kbl-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; font: 700 13.5px/1.35 var(--kps-display); color: var(--kpp-ink); text-decoration: none; overflow-wrap: anywhere; }
.kbl-mini:hover { color: #9a7424; }
.kbl-mini small { display: block; margin-top: 2px; font-weight: 500; color: var(--kpp-mut); }
.kbl-miniimg { position: relative; width: 64px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--kpp-navy3), var(--kpp-navy1)); }
.kbl-miniimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── article ── */
.kbl-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; background: linear-gradient(90deg, var(--kpp-gold-xl), var(--kpp-gold)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.kbl-page { flex: 1; width: 100%; max-width: 1296px; margin: 0 auto; padding: 0 max(28px, env(safe-area-inset-right, 0px)) 56px max(28px, env(safe-area-inset-left, 0px)); }
.kbl-ahead { display: grid; justify-items: start; gap: 14px; padding: 32px 0 26px; }
.kbl-back { color: #64748b; font: 600 13.5px var(--kps-display); text-decoration: none; }
.kbl-back:hover { color: var(--kpp-ink); }
.kbl-h1 { max-width: 880px; font: 800 42px/1.14 var(--kps-display); letter-spacing: -1px; color: var(--kpp-ink); text-wrap: balance; overflow-wrap: anywhere; }
.kbl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--kpp-mut); }
.kbl-meta > span:not(:first-child)::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 14px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.kbl-meta b { color: var(--kpp-ink); }
.kbl-by { display: inline-flex; align-items: center; gap: 8px; }
.kbl-acols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.kbl-amain { display: grid; gap: 22px; min-width: 0; }
.kbl-reader { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; }
.kbl-fimg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--kpp-navy1); }

/* the article text (written in the Blog Manager / by the AI: headings, lists, quotes, tables, images, links) */
.kbl-prose { padding: 40px 52px 8px; color: #374151; font-size: 17.5px; line-height: 1.75; overflow-wrap: anywhere; }
.kpp .kbl-prose > * + * { margin-top: 18px; }   /* .kpp: beats public-live.css "p { margin: 0 }" */
.kpp .kbl-prose h2 { margin-top: 38px; font: 800 27px/1.25 var(--kps-display); letter-spacing: -.5px; color: var(--kpp-ink); scroll-margin-top: 84px; }
.kpp .kbl-prose h3 { margin-top: 28px; font: 800 20.5px/1.3 var(--kps-display); color: var(--kpp-ink); scroll-margin-top: 84px; }
.kpp .kbl-prose h4 { margin-top: 22px; font: 800 17.5px/1.35 var(--kps-display); color: var(--kpp-ink); }
.kpp .kbl-prose > :first-child { margin-top: 0; }
.kbl-prose p { margin-bottom: 0; }
.kbl-prose strong, .kbl-prose b { color: var(--kpp-ink); }
.kbl-prose a { color: #9a7424; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(154,116,36,.4); text-underline-offset: 3px; }
.kbl-prose a:hover { color: var(--kpp-ink); }
.kbl-prose ul, .kbl-prose ol { margin: 0; padding-left: 0; display: grid; gap: 10px; }
.kbl-prose ul { list-style: none; }
.kbl-prose ul > li { position: relative; padding-left: 28px; }
.kbl-prose ul > li::before { content: ""; position: absolute; left: 5px; top: .62em; width: 9px; height: 9px; border-radius: 3px; background: var(--kpp-gold); transform: rotate(45deg); }
.kbl-prose ol { list-style: none; counter-reset: kbl; }
.kbl-prose ol > li { counter-increment: kbl; position: relative; padding-left: 38px; }
.kbl-prose ol > li::before { content: counter(kbl); position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--kpp-navy2); color: var(--kpp-gold-l); font: 800 13px/1 var(--kps-display); }
.kbl-prose blockquote { margin: 26px 0 0; padding: 22px 26px; border: 0; border-radius: 16px; background: #fbf7ec; box-shadow: inset 4px 0 0 var(--kpp-gold); font: 600 19px/1.55 var(--kps-display); color: var(--kpp-ink); }
.kbl-prose blockquote p { margin: 0; }
.kbl-prose img, .kbl-prose video, .kbl-prose iframe { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.kbl-prose figure { margin: 26px 0 0; }
.kbl-prose figcaption { margin-top: 8px; font-size: 13.5px; color: var(--kpp-mut); text-align: center; }
.kbl-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.kbl-prose th, .kbl-prose td { padding: 10px 12px; border-bottom: 1px solid var(--kpp-line); text-align: left; vertical-align: top; }
.kbl-prose th { background: #f5f6fa; color: var(--kpp-ink); font-weight: 700; }
.kbl-prose hr { border: 0; border-top: 1px solid var(--kpp-line); margin: 32px 0 0; }
.kbl-prose code { padding: 2px 6px; border-radius: 6px; background: #f3f4f8; font-size: .9em; }

/* join box half way through */
.kbl-prose .kbl-midcta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, var(--kpp-navy2), var(--kpp-navy3)); color: var(--kpp-mut-d); font-size: 14px; line-height: 1.5; }
.kbl-midcta-t { flex: 1; min-width: 200px; }
.kbl-midcta-t small { display: block; font-size: 13px; }
.kbl-midcta-t small b { color: #fff; }
.kbl-midcta-t strong { display: block; font: 800 19px/1.3 var(--kps-display); color: #fff; }
.kbl-prose .kbl-midcta a { text-decoration: none; color: var(--kpp-ink); }
/* join box at the end */
.kbl-endcta { margin: 34px 52px 44px; padding: 32px 34px; border-radius: 22px; display: grid; justify-items: center; gap: 12px; text-align: center; background: radial-gradient(circle at 85% 0%, rgba(212,168,73,.25), transparent 50%), linear-gradient(135deg, var(--kpp-navy2), var(--kpp-navy3)); color: var(--kpp-mut-d); }
.kbl-endcta-rec { display: inline-flex; align-items: center; gap: 12px; text-align: left; font-size: 12.5px; }
.kbl-endcta-rec span { display: grid; }
.kbl-endcta-rec b { font: 800 17px var(--kps-display); color: #fff; }
.kbl-endcta-rec em { font-style: normal; font-size: 12px; color: #4ade80; }
.kbl-endcta-h { font: 800 28px/1.2 var(--kps-display); letter-spacing: -.5px; color: #fff; text-wrap: balance; }
.kbl-endcta p { max-width: 520px; font-size: 15px; }
.kbl-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13.5px; color: #e6e9f2; }
.kbl-perks span::before { content: "✓ "; color: var(--kpp-gold-l); font-weight: 800; }
.kbl-endcta-btn { min-height: 52px; padding: 8px 30px; font-size: 16px; }
.kbl-endcta small { font-size: 12.5px; color: var(--kpp-mut); }

.kbl-bio { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; }
.kbl-bio .kbl-lbl { color: #9a7424; }
.kbl-bio b { display: block; font: 800 18px var(--kps-display); color: var(--kpp-ink); }
.kbl-bio p { margin-top: 4px; font-size: 14.5px; color: #5b6475; }
.kbl-related { display: grid; gap: 14px; }
.kbl-related-h { font: 800 22px var(--kps-display); color: var(--kpp-ink); letter-spacing: -.4px; }
.kbl-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.kbl-rcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; text-decoration: none; color: inherit; min-width: 0; }
.kbl-rcard:hover { box-shadow: 0 10px 28px rgba(15,23,42,.10), inset 0 0 0 1px #e3d3a5; }
.kbl-rimg { position: relative; display: block; aspect-ratio: 1200 / 630; background: linear-gradient(135deg, var(--kpp-navy3), var(--kpp-navy1)); }
.kbl-rimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbl-rbody { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.kbl-rcat { font: 700 11px var(--kps-display); letter-spacing: 1.1px; text-transform: uppercase; color: #9a7424; }
.kbl-rbody strong { font: 800 15.5px/1.35 var(--kps-display); color: var(--kpp-ink); overflow-wrap: anywhere; }
.kbl-rbody small { margin-top: auto; font-size: 12.5px; color: var(--kpp-mut); }

/* article sidebar */
.kbl-tocbox { padding: 16px 14px; }
.kbl-toc-h { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 6px; border: 0; background: none; font: 800 15px var(--kps-display); color: var(--kpp-ink); cursor: default; text-align: left; }
.kbl-toc-h span { display: none; }
.kbl-toc { margin: 0; padding: 0; list-style: none; counter-reset: kt; display: grid; gap: 2px; }
.kbl-toc li { counter-increment: kt; }
.kbl-toc a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; padding: 8px; border-radius: 9px; font: 600 13.5px/1.35 var(--kps-display); color: var(--kpp-text); text-decoration: none; overflow-wrap: anywhere; }
.kbl-toc a::before { content: counter(kt); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #f1f2f7; color: #64748b; font-size: 11.5px; font-weight: 800; }
.kbl-toc a:hover { background: #f5f6fa; color: var(--kpp-ink); }
.kbl-toc a.on { background: #fbf7ec; color: var(--kpp-ink); }
.kbl-toc a.on::before { background: var(--kpp-navy2); color: var(--kpp-gold-xl); }
.kbl-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kbl-share a, .kbl-share button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: #f3f4f8; color: var(--kpp-ink); font: 700 13px var(--kps-display); text-decoration: none; cursor: pointer; }
.kbl-share a:hover, .kbl-share button:hover { background: #fbf7ec; box-shadow: inset 0 0 0 1px #e3d3a5; }

/* solid navy like the top bar (public-live.css makes it see-through dark for the Aurora pages, which reads grey here) */
.kpp-blog .kbl-foot { background: linear-gradient(180deg, var(--kpp-navy2), var(--kpp-navy1)); border-top: 1px solid rgba(212,168,73,.22); color: var(--kpp-mut); }
.kbl-foot p + p { margin-top: 6px; }
.kbl-foot a { color: var(--kpp-mut-d); text-decoration: none; }
.kbl-foot a:hover { color: #fff; }

/* ── narrower screens ── */
@media (max-width: 1100px) {
    .kbl-cols, .kbl-acols { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
    .kbl-row { grid-template-columns: 240px minmax(0, 1fr); }
    .kbl-prose { padding: 32px 36px 8px; }
    .kbl-endcta { margin: 30px 36px 36px; }
}
/* one column: the list, then the sidebar under it; an article's contents fold up above it */
@media (max-width: 960px) {
    .kbl-cols, .kbl-acols { grid-template-columns: minmax(0, 1fr); }
    .kbl-side { position: static; }
    .kbl-ahead { justify-items: center; text-align: center; }
    .kbl-meta { justify-content: center; gap: 4px 16px; }
    .kbl-meta > span:not(:first-child)::before { display: none; }   /* centred lines wrap: a dot would start a line */
    .kbl-acols > .kbl-side { display: contents; }
    .kbl-acols > .kbl-amain { order: 2; }
    .kbl-tocbox { order: 1; }
    .kbl-join, .kbl-sharebox { order: 3; }
    .kbl-toc-h { cursor: pointer; padding: 4px 6px; }
    .kbl-toc-h span { display: inline; transition: transform .2s; }
    .kbl-tocbox:not(.open) .kbl-toc { display: none; }
    .kbl-tocbox.open .kbl-toc-h span { transform: rotate(180deg); }
}
@media (max-width: 700px) {
    .kbl-hero { padding-top: 26px; padding-bottom: 88px; }
    .kbl-hero h1 { font-size: 32px; letter-spacing: -.7px; }
    .kbl-hero p { font-size: 15px; }
    .kbl-cols { padding-top: 16px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
    .kbl-row { grid-template-columns: minmax(0, 1fr); }
    .kbl-rowimg { min-height: 0; aspect-ratio: 1200 / 630; }
    .kbl-rowbody { padding: 16px 18px 18px; }
    .kbl-row-big .kbl-rowt { font-size: 22px; }
    .kbl-page { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
    .kbl-ahead { padding: 22px 4px 16px; }
    .kbl-h1 { font-size: 28px; letter-spacing: -.6px; }
    .kbl-meta { font-size: 13px; gap: 4px 10px; }
    .kbl-prose { padding: 24px 20px 4px; font-size: 16.5px; }
    .kbl-prose h2 { font-size: 22px; }
    .kbl-prose h3 { font-size: 19px; }
    .kbl-prose .kbl-midcta { flex-direction: column; text-align: center; }
    .kbl-midcta-t { min-width: 0; }
    .kbl-endcta { margin: 26px 14px 22px; padding: 24px 18px; }
    .kbl-endcta-h { font-size: 22px; }
    .kbl-endcta-btn { width: 100%; }
    .kbl-bio { flex-direction: column; align-items: center; text-align: center; }
    .kbl-rgrid { grid-template-columns: minmax(0, 1fr); }
    .kpp-blog .kbl-barlink { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kbl-row, .kbl-row:hover { transition: none; transform: none; } .kbl-toc-h span { transition: none; } }