/* Blog surface. Consumes the brand tokens declared in styles.css -- this file
   adds NO colours of its own, so both themes and any future token change flow
   through untouched. Loaded after styles.css, never instead of it.

   Deliberately not built on landing.css: that file owns the marketing page's
   full-bleed section rhythm, and an article wants a single narrow measure
   instead. The only thing shared is the token layer. */

/* ---- readable gold ---------------------------------------------------
   --accent is one colour doing two jobs. On the dark ground #d9b356 is both
   a surface tint and a legible ink. On paper the light theme's #d4a017 is
   still a fine surface tint, but as TEXT on --bg it runs at 1.9:1 -- an
   eyebrow, a link and a callout heading set in it are visible without being
   readable.

   So the blog splits the two. Gold that is a surface (the polished gradient
   under the CTA and the nav button) still comes from the token layer and is
   untouched. Gold that has to be READ comes from --b-gold, which is --accent
   on dark and, on paper, the same #8a6420 the hero already switches to at the
   end of landing.css -- the brand's own gold from the dark ramp's darker end,
   not a new colour, and 4.65:1 against the page. */
:root{--b-gold:var(--accent);}
:root[data-theme="light"]{--b-gold:#8a6420;}

/* ---- dark-theme reading ink -------------------------------------------
   The app's dark theme sets --text:#ffffff, which is right for UI chrome and
   too hot for a long article: pure white on a near-black ground haloes, and
   the reader feels it after two screens rather than noticing it at once.

   Both of the two dark-theme sites found in a 16-page survey of ranking
   finance articles deliberately back off from white, landing around 9 to 11:1
   contrast rather than the 15 to 21:1 the light-theme sites use for the same
   reading task. This token follows them: warm off-white on the app's own
   --panel ground, about 10.5:1, which still clears WCAG AAA.

   Scoped to .bBody so it changes the article measure only. The nav, the
   headings and the whole app keep --text untouched. */
:root:not([data-theme="light"]) .bBody{--b-ink:#c9c4bb;}
:root[data-theme="light"] .bBody{--b-ink:var(--muted);}

/* ---- chrome ---------------------------------------------------------- */
.bNav{border-bottom:1px solid var(--border);background:var(--panel);}
.bNavIn{max-width:74ch;margin:0 auto;padding:14px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;}
.bNav a.bLogo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.bNav a.bLogo .bMark{flex:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(212,161,63,.30));}
/* The wordmark is drawn here rather than pulled from landing.css, so the blog
   still depends on nothing but the token layer. Same Fraunces + clipped gold
   as the masthead, one step smaller because this bar is 26px tall, not 27px
   type on a 72px bar. No sheen animation: on an article the mark should sit
   still while you read. */
.bNav a.bLogo .bWord{font-family:var(--serif);font-optical-sizing:auto;font-size:19px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  padding-right:.2em; /* trailing tracking would clip the A's gradient */
  background:linear-gradient(100deg,
    #8a6420 0%, #c9992f 14%, #f2dc9e 30%, #ffffff 38%, #f2dc9e 46%,
    #d4a13f 58%, #a87c28 74%, #e8c86f 88%, #c9992f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));}
.bNavLinks{display:flex;align-items:center;gap:18px;}
.bNavLinks a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;}
.bNavLinks a:hover{color:var(--b-gold);}
/* The way back to the product, said in words. It leads the links group and is
   the one item in it that survives a phone, because on a post reached from
   search it is the only thing telling the reader where they are. Gold and one
   weight up on the links beside it, but still a link -- a filled button here
   reads as an advert in a place a reader wants a door. */
.bNavLinks a.bBack{color:var(--b-gold);font-weight:700;white-space:nowrap;}
.bNavLinks a.bBack:hover{color:var(--b-gold);text-decoration:underline;text-underline-offset:3px;}

.bNavCta{background:var(--grad-polished);color:var(--on-grad)!important;padding:7px 14px;
  border-radius:var(--radius-sm);font-weight:700;font-size:13px;white-space:nowrap;}

/* ---- article measure -------------------------------------------------
   74ch, not 76ch: this page mixes prose with tables and code-ish rows, and
   the table is what sets the real minimum. */
.bWrap{max-width:74ch;margin:0 auto;padding:0 24px 96px;}

.bCrumb{font-size:12px;color:var(--muted-dim);margin:26px 0 0;}
.bCrumb a{color:var(--muted-dim);text-decoration:none;}
.bCrumb a:hover{color:var(--b-gold);text-decoration:underline;}

.bKicker{font-family:var(--display-font);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--b-gold);margin:30px 0 10px;}

.bTitle{font-family:var(--display-font);font-size:clamp(30px,5.2vw,46px);line-height:1.08;
  letter-spacing:-.028em;font-weight:800;margin:0 0 14px;}
/* The index headline, one step down from a post's. The index needs a real h1
   for a crawler and for a reader arriving at the hub, but it is not the
   destination -- the posts under it are, and a full 46px slab pushes the
   first of them off a laptop screen. */
.bTitleIdx{font-size:clamp(26px,4vw,34px);}

.bStand{font-family:var(--serif);font-size:clamp(17px,2.4vw,20px);line-height:1.55;
  color:var(--muted);margin:0 0 22px;}

.bMeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;
  color:var(--muted-dim);padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.bMeta .dot{opacity:.45;}

/* ---- prose ----------------------------------------------------------- */
/* 18px, not 16.5px. Measured across 16 ranking finance articles: 18px is both
   the median and the modal body size, and 16.5 sat at the 25th percentile.
   The size also fixes the measure for free: at 74ch the line was running 65
   characters against a corpus median of 74, and 18px lifts it to about 74
   without touching --measure.

   Line-height stays at 1.72. The corpus median is 1.60 with an interquartile
   range of 1.50 to 1.78, so this is a deliberate loose-end choice that suits a
   parchment reading page, not a default left unexamined. */
.bBody{font-size:18px;line-height:1.72;color:var(--b-ink,var(--muted));}
.bBody > p{margin:0 0 20px;}
.bBody strong{color:var(--text);font-weight:700;}
.bBody a{color:var(--b-gold);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--b-gold) 45%,transparent);}
.bBody a:hover{text-decoration-color:var(--b-gold);}

.bBody h2{font-family:var(--display-font);font-size:24px;line-height:1.22;font-weight:800;
  letter-spacing:-.02em;color:var(--text);margin:44px 0 14px;padding-top:14px;
  border-top:1px solid var(--border);}
.bBody h3{font-family:var(--display-font);font-size:17.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--text);margin:30px 0 8px;}

.bBody ul,.bBody ol{margin:0 0 20px;padding-left:22px;}
.bBody li{margin:0 0 9px;}
.bBody li::marker{color:var(--b-gold);}

.bBody blockquote{margin:26px 0;padding:2px 0 2px 20px;border-left:2px solid var(--b-gold);
  font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--text);font-style:italic;}

/* ---- callout --------------------------------------------------------- */
.bNote{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--b-gold);
  border-radius:var(--radius-md);padding:16px 18px;margin:26px 0;font-size:15px;line-height:1.62;}
.bNote p{margin:0 0 10px;}
.bNote p:last-child{margin:0;}
.bNote .bNoteHead{font-family:var(--display-font);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--b-gold);margin:0 0 7px;}

/* ---- table ----------------------------------------------------------
   Scoped to .bTable ONLY. The app's table rules assume their own column
   counts, so reusing them here silently breaks alignment. */
.bTableWrap{overflow-x:auto;margin:26px 0;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--panel);}
table.bTable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px;}
table.bTable th{text-align:left;font-family:var(--display-font);font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dim);
  padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--panel2);}
/* white-space is RESET here, not merely set. styles.css applies nowrap to td
   globally for the app's own dense data grids; inherited into a prose table it
   forces every cell to its max-content width, which pushed this 3-column table
   to 904px inside a 699px measure and made it scroll sideways on desktop.
   Prose cells must wrap; only the Item label stays on one line. */
table.bTable td{padding:13px 16px;border-bottom:1px solid var(--border);
  color:var(--muted);vertical-align:top;line-height:1.5;white-space:normal;}
table.bTable tr:last-child td{border-bottom:none;}
table.bTable td:first-child{color:var(--text);font-weight:600;white-space:nowrap;}
/* Figures right-align on their own decimal, per the house number style. */
table.bTable td.num,table.bTable th.num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--display-font);white-space:nowrap;}

/* ---- end CTA ----------------------------------------------------------
   Flush-left, not centred. Centring works for a line or two and turns into a
   ragged block the moment the copy runs to a full paragraph, which is exactly
   what this box holds. Left alignment gives every line the same starting edge
   as the article above it, so the CTA reads as the end of the piece rather
   than as an ad dropped into it.

   One hairline under the heading carries the separation, so the box does not
   need a second border, a tint, or a size jump to announce itself. */
.bCta{margin:56px 0 0;padding:24px 26px 26px;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--panel);}
.bCta h3{font-family:var(--display-font);font-size:17px;font-weight:800;letter-spacing:-.01em;
  color:var(--text);margin:0 0 14px;padding-bottom:14px;
  border-bottom:1px solid var(--border);}
.bCta p{font-size:14.5px;color:var(--muted);margin:0 0 16px;line-height:1.62;}
.bCta a{display:inline-block;background:var(--grad-polished);color:var(--on-grad);
  text-decoration:none;font-weight:800;font-size:14px;padding:11px 22px;
  border-radius:var(--radius-sm);}
/* The free-tier line sits under the button as small print, where it answers
   "what does this cost me" at the moment the reader is deciding to click,
   instead of competing with the offer above it. */
.bCta .bCtaFine{font-size:12.5px;color:var(--muted-dim);margin:14px 0 0;}

/* On the index the footer follows the list directly. The list already closed
   itself with a rule, so the footer's own border-top stacked a second hairline
   34px under the first. One line, not two. */
.bList + .bFoot{border-top:none;padding-top:0;margin-top:34px;}
.bFoot{margin:44px 0 0;padding-top:20px;border-top:1px solid var(--border);
  font-size:12px;line-height:1.6;color:var(--muted-dim);}
.bFoot a{color:var(--muted-dim);}

/* ---- index listing --------------------------------------------------- */
.bList{list-style:none;margin:30px 0 0;padding:0;}
.bList li{border-top:1px solid var(--border);}
.bList li:last-child{border-bottom:1px solid var(--border);}
.bList a{display:block;padding:26px 0;text-decoration:none;}
.bList a:hover .bListTitle{color:var(--b-gold);}
.bListMeta{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-dim);font-weight:700;margin:0 0 7px;}
/* With no masthead above it, the post headline IS the top of this page, so it
   is set at article-headline scale rather than list-row scale. Fluid rather
   than a flat bump: at 30px flat, a long title wrapped to three lines on a
   phone. Line-height tightens as the type grows -- 1.24 is right for 21px and
   loose for 30px. */
.bListTitle{font-family:var(--display-font);font-size:clamp(24px,3.4vw,30px);line-height:1.16;
  font-weight:800;letter-spacing:-.024em;color:var(--text);margin:0 0 9px;
  transition:color .16s ease;}
.bListDek{font-size:14.5px;line-height:1.58;color:var(--muted);margin:0;}

@media(max-width:640px){
  .bWrap{padding:0 18px 72px;}
  .bBody{font-size:16px;}
  .bBody h2{font-size:21px;}

  /* Wordmark, two section links, the theme switch and the CTA do not fit one
     phone row, and the switch cannot be shrunk to make them: styles.css gives
     it a 44px tap target on this breakpoint and that floor is the point of it.
     So the bar wraps instead. The section links go -- they point back into the
     marketing page, which the wordmark beside them already does -- and the two
     controls take a full-width second row. Nothing is truncated and nothing
     drops below 44px. */
  .bNavIn{flex-wrap:wrap;padding:10px 18px;gap:10px;}
  .bNavLinks{width:100%;justify-content:space-between;gap:10px;}
  .bNavLinks a:not(.bBack){display:none;}
  .bNav a.bLogo .bWord{font-size:16px;letter-spacing:.16em;}
  /* Match the switch beside it rather than sitting 10px shorter than it. */
  .bNavLinks a.bBack{display:inline-flex;align-items:center;min-height:44px;}
}

/* ---- theme switch ----------------------------------------------------
   The blog is read on its own, away from the app's Settings panel, so the
   choice between the dark ledger and paper has to be here. The control is
   .themeToggle straight out of styles.css and theme.js wires it on load --
   no markup, no CSS and no script of its own, and the choice it writes is
   the same localStorage key the rest of the site reads. */
.bNavLinks .themeToggle{flex:none;}

/* ---- gold on paper ---------------------------------------------------
   The nine-stop polished ramp is built for a near-black ground: its 38%
   catch stop is #ffffff, and on cream that stop IS the page, so the sheen
   wipes a band clean through the middle of the wordmark and the raven.

   The replacement is the light ramp already set for the hero at the end of
   landing.css -- same geometry, same nine stops at the same positions, and
   every colour lifted off the dark ramp's own darker end. Only the near-white
   stops move: the catch becomes #d4a13f, still the brightest stop and still
   unmistakably the shine, but gold instead of white so the letters stay put
   underneath it. Polish is the DIFFERENCE between stops, not the absolute
   brightness of any one of them. */
:root[data-theme="light"] .bNav a.bLogo .bWord{
  background:linear-gradient(100deg,
    #7a5619 0%, #a87c28 14%, #c08f33 30%, #d4a13f 38%, #c08f33 46%,
    #a87c28 58%, #8a6420 74%, #c09033 88%, #a87c28 100%);
  -webkit-background-clip:text;background-clip:text;
  /* A glow around gold on cream reads as haze, not light. */
  filter:none;}

/* Same ramp, same order, pushed into the mark's own <linearGradient>.
   stop-color is a presentation attribute, so CSS overrides it without the
   SVG having to be duplicated per theme. */
:root[data-theme="light"] .bNav a.bLogo .bMark{filter:none;}
:root[data-theme="light"] .bMark stop:nth-child(1){stop-color:#7a5619;}
:root[data-theme="light"] .bMark stop:nth-child(2){stop-color:#a87c28;}
:root[data-theme="light"] .bMark stop:nth-child(3){stop-color:#c08f33;}
:root[data-theme="light"] .bMark stop:nth-child(4){stop-color:#d4a13f;}
:root[data-theme="light"] .bMark stop:nth-child(5){stop-color:#c08f33;}
:root[data-theme="light"] .bMark stop:nth-child(6){stop-color:#a87c28;}
:root[data-theme="light"] .bMark stop:nth-child(7){stop-color:#8a6420;}
:root[data-theme="light"] .bMark stop:nth-child(8){stop-color:#c09033;}
:root[data-theme="light"] .bMark stop:nth-child(9){stop-color:#a87c28;}
/* The eye is a hole punched in the mark, so it has to be the ground it sits
   on -- the dark literal would be a dark dot floating on paper. */
:root[data-theme="light"] .bMark circle{fill:#fcfcfb;}