/* ═══════════════════════════════════════════════════════════════════════════
   bm-skin-aug1 · the editorial institution skin

   ⛔ AN OVERRIDE SHEET, NOT A REWRITE. All 62,619 characters of blog CSS are
   inlined in each of the 7,975 pages, so restyling by editing pages would mean
   7,975 rewrites of the riskiest thing on the site. This loads after that inline
   block and wins on source order alone, which is why almost nothing here needs
   !important. Removing one <link> line reverts the entire look.

   ⛔ IT CHANGES NO CONTENT. No text, no links, no headings, no schema, no ids and
   no classes the shipped modules in patches.js bind to.

   THE DIAGNOSIS, measured against kilo.co rather than argued:

                          kilo    bloodmarker
     text sizes 10-18px      3         9          ← the whole problem
     999px pill corners      0        79
     distinct greys          2         6+
     desktop layout    full width   676px floating in 1440

   Nine text sizes between 10 and 18px means nothing on the page was chosen, it
   drifted. Four decisions repeated everywhere is what "expensive" actually is.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── one scale, 1.25, and nothing between the steps ── */
  --t-micro: 13px;   /* eyebrows, captions, mono labels  */
  --t-small: 16px;   /* secondary prose, rail            */
  --t-body:  18px;   /* running text. kilo's is 18 too   */
  --t-lead:  20px;   /* the verdict sentence             */
  --t-h2:    25px;
  --t-h1:    40px;
  --t-disp:  64px;   /* their number, and only that      */

  /* ── three greys, not six ── */
  --g-ink:  #14201B;
  --g-mid:  #55635C;
  --g-soft: rgba(20,32,27,.13);

  --band:   #0E3623;   /* the institutional band, already in the palette */
  --rule:   rgba(20,32,27,.13);

  /* ── two corners ── */
  --r-sm: 2px;
  --r-md: 4px;
}

/* ── 1 · the frame ────────────────────────────────────────────────────────────
   ⛔ THE FLOATING PILL IS THE SINGLE LOUDEST "not a real company" SIGNAL. A pill
   hovering in space is what an indie side project looks like. An organisation has
   a masthead: edge to edge, a rule under it, and a wordmark that does not move.
   It also finally says what the company DOES, which the pill never did, so a
   reader arriving cold from Bing learns there is a product here. */
/* ⚠️ patches.js adds .solid to the nav on scroll, which sets a white background and
   beat `body > nav` on specificity. The band was correct at the top of the page and
   went white the moment you scrolled. */
body > nav, body > nav.solid{
  position: fixed; top: 0; left: 0; right: 0;
  transform: none; border-radius: 0;
  width: 100%; max-width: none;
  display: flex; align-items: center; gap: 26px;
  padding: 0 26px; height: 58px;
  background: var(--band);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  z-index: 60;
}
body > nav a{ color: rgba(255,255,255,.72); font-size: var(--t-small); }
body > nav a:hover{ color: #fff; }
body > nav a:first-child{ margin-right: auto; }
body > nav a:first-child b{
  color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .005em;
}
/* what the company does, said permanently rather than in a hero nobody reaches */
body > nav a:first-child b::after{
  content: " · reads your whole blood test";
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-weight: 400; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-left: 10px; white-space: nowrap;
}
@media (max-width: 720px){
  body > nav{ gap: 16px; padding: 0 15px; height: 52px; }
  body > nav a:first-child b::after{ display: none; }
  body > nav .navsci{ display: none; }
}
/* the one pill that earns it */
body > nav .navcta{
  background: #fff; color: var(--band);
  border-radius: 999px; padding: 8px 17px;
  font-weight: 700; font-size: 14px;
}
body > nav .navcta:hover{ background: #fff; color: #000; }

/* the hero no longer needs to clear a floating pill */
header.hero{ padding: 30px 0 12px; }

/* ── 2 · type ─────────────────────────────────────────────────────────────────
   Body to 18px. It is the cheapest expensive-looking change there is, and it is
   exactly what kilo runs. */
body{ font-size: var(--t-body); line-height: 1.66; }

h1{
  font-size: clamp(30px, 6.6vw, var(--t-h1));
  font-weight: 700; letter-spacing: -.028em; line-height: 1.08;
}
#article h2{
  font-size: var(--t-h2);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  margin-top: 2.1em;
  padding-top: .85em;
  border-top: 1px solid var(--rule);   /* the rule does the work a bigger gap did */
}
#article p, .artsec p{ font-size: var(--t-body); line-height: 1.66; }

/* ⚠️ the mono was on 108 elements as decoration, which reads gimmicky rather
   than technical. It keeps eyebrows and data labels and gives back the rest. */
.mono{ font-size: var(--t-micro); letter-spacing: .1em; }
#article .mono, #article p .mono{
  font-family: 'Satoshi', system-ui, sans-serif; letter-spacing: 0;
  font-size: inherit;
}

/* their number is the one display moment on the page */
.readout .value, .readout .val, .valu{
  font-size: clamp(46px, 13vw, var(--t-disp));
  font-weight: 700; letter-spacing: -.045em; line-height: .92;
  font-variant-numeric: tabular-nums;
}

/* ── 3 · shape ────────────────────────────────────────────────────────────────
   ⛔ 79 ELEMENTS AT 999px. Everything was a lozenge, which is the visual language
   of a consumer app rather than an institution. Squared everywhere; the pill
   survives only where something is genuinely pressable. */
.wrap :not(nav):not(.navcta):not(.chip):not(.stfl):not(.thumb):not(.sddot),
.panel, .pcard, .insight, .offer, .rec, .recin, .strip, .midhook, .iask,
.teaserblock, .drop, .fld, .row, .comp, .locked, .lockrows{
  border-radius: var(--r-md);
}
.panel, .insight, .offer, .rec, .strip, .midhook, .iask, .teaserblock, .pcard{
  box-shadow: none;
  border: 1px solid var(--rule);
}
.chips .chip{ border-radius: 999px; }          /* status, legitimately a pill */
.thumb, .sddot{ border-radius: 50%; }

/* ── 4 · desktop stops floating ───────────────────────────────────────────────
   ⛔ A 676px COLUMN IN 1440px OF EMPTY. Nothing at the edges, so the page reads
   as a document somebody pasted rather than a place. The rail fills that space
   with the two things the page is for: where you are, and the analyzer.

   ⚠️ Done with a fixed rail plus body padding rather than by restructuring the
   DOM, because #article, .wrap, #rail and a dozen ids are bound by patches.js and
   any re-parenting risks the slider, the drop zone and the chip answers. */
/* ⚠️ THE `display:block` MEDIA QUERY MUST COME AFTER THE BASE RULE, not before it.
   Written the other way round the base `display:none` won on source order and the
   rail never appeared at any width, silently. */
@media (min-width: 1180px){
  body{ padding-left: 300px; }
  .wrap{ max-width: 760px; }
}
#bmSpine{
  display: none;
  position: fixed; left: 0; top: 58px; bottom: 0; width: 300px;
  padding: 34px 26px 26px 30px;
  border-right: 1px solid var(--rule);
  background: var(--canvas);
  overflow-y: auto;
  z-index: 30;
}
#bmSpine .spk{
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-mid); margin: 0 0 12px;
}
#bmSpine ol{ list-style: none; margin: 0 0 30px; padding: 0; }
#bmSpine li{ margin: 0 0 9px; }
#bmSpine li a{
  font-size: var(--t-small); line-height: 1.35; color: var(--g-mid);
  text-decoration: none; display: block; padding-left: 13px;
  border-left: 2px solid transparent;
}
#bmSpine li a:hover{ color: var(--g-ink); }
#bmSpine li a.on{ color: var(--g-ink); border-left-color: var(--brand); font-weight: 600; }
@media (min-width: 1180px){ #bmSpine{ display: block; } }

/* ⛔ THE ANALYZER LIVES HERE, PERMANENTLY. Measured on the live page: nine upload
   asks, six of them firing before she has read a word and three sitting past the
   22.6% depth where half of mobile readers have already left. So the page manages
   to nag and to hide the product at the same time. One ask that is always on
   screen beats nine that are not. */
#bmSpine .spask{
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: #fff; padding: 16px 15px;
}
#bmSpine .spask p{
  margin: 0 0 12px; font-size: var(--t-small); line-height: 1.42; color: var(--g-ink);
}
#bmSpine .spask b{ font-weight: 700; }
#bmSpine .spask a{
  display: block; text-align: center; background: var(--brand); color: #fff;
  text-decoration: none; font-weight: 700; font-size: var(--t-small);
  padding: 12px; border-radius: var(--r-md);
}
#bmSpine .spask a:hover{ background: #116632; }
#bmSpine .spask .spfine{
  margin: 9px 0 0; font-size: var(--t-micro); color: var(--g-mid); text-align: center;
}

/* ── 5 · the footer an organisation has ───────────────────────────────────────
   ⛔ EVERY LINE HERE IS TRUE TODAY. The page's schema carries reviewedBy:null and
   the author is a clinical research WRITER, not a clinician, so there is no
   "medically reviewed" badge and there will not be one until a real reviewer is
   hired. A fabricated credential is the one thing that would make this site less
   trustworthy rather than more. */
#bmFoot{
  margin-top: 60px;
  background: var(--band); color: rgba(255,255,255,.66);
  padding: 44px 26px 34px;
  font-size: var(--t-small); line-height: 1.6;
}
@media (min-width: 1180px){ #bmFoot{ margin-left: -300px; padding-left: 326px; } }
#bmFoot .ftin{ max-width: 980px; margin: 0 auto; }
#bmFoot .ftmark{
  color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .005em;
  margin: 0 0 6px;
}
#bmFoot .fttag{
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin: 0 0 26px;
}
#bmFoot .ftcols{
  display: grid; gap: 26px; grid-template-columns: 1fr;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
}
@media (min-width: 760px){ #bmFoot .ftcols{ grid-template-columns: repeat(3, 1fr); } }
#bmFoot h4{
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin: 0 0 10px; font-weight: 400;
}
#bmFoot a{ color: rgba(255,255,255,.8); text-decoration: none; }
#bmFoot a:hover{ color: #fff; text-decoration: underline; }
#bmFoot ul{ list-style: none; margin: 0; padding: 0; }
#bmFoot li{ margin-bottom: 7px; }
#bmFoot .ftend{
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--t-micro); color: rgba(255,255,255,.4);
  display: flex; flex-wrap: wrap; gap: 6px 22px;
}

/* ── 6 · collapse the nine sizes onto four ────────────────────────────────────
   ⛔ THIS IS THE CORE OF THE WHOLE EXERCISE and the first pass did not do it:
   setting body to 18px changed nothing, because the nine sizes come from nine
   EXPLICIT rules scattered through 62kB of inline CSS, not from inheritance.
   Measured what each one actually was before collapsing it:

     10px (15)  mono eyebrows, footer heads
     11px (18)  em inside prose, author role
     12px (32)  .kick, italics, small spans
     13px (45)  links, units, .delta
     14px (40)  links, buttons, author bio
     15px (19)  spans, insight rows
     16px (37)  links, spans, pills
     17px  (8)  list items
     18px (32)  prose

   Four survive: 11 for mono eyebrows only, 13 caption, 16 secondary, 18 running
   text. Nothing else is allowed between 10 and 18. */

/* prose inherits, always. em/i/b/a inside the article were coming out at 11-16px
   which is why the body copy looked ragged even where the paragraph was 18. */
#article, #article p, #article li, #article a, #article em, #article i,
#article b, #article strong, #article span,
.artsec p, .artsec li, .artsec a, .artsec em, .artsec b{
  font-size: inherit;
}
#article, .artsec{ font-size: var(--t-body); }
#article li{ line-height: 1.6; margin-bottom: .5em; }

/* 11 · mono eyebrows and nothing else */
.mono, .kick, .cam, .fttag, #bmFoot h4, #bmSpine .spk,
.scale, .segl, .vtag, .author-role{
  font-size: 11px; letter-spacing: .1em;
}

/* 13 · captions, fine print, units, chips */
.fine, .spfine, .ftend, .delta, .unit, .cafine, .author-bio,
.chips .chip, .breadcrumb, .comphead, i, small{
  font-size: var(--t-micro);
}

/* 16 · secondary prose and everything that is a link outside the article */
.sub, .cat, .it-markers, .it-insight, .cago, .uab, .pill, .rec a, .rail a,
#refs a, .related a, .strip p, .midhook p, .iask p, .teaserblock p,
#bmSpine li a, #bmFoot a, #bmFoot li, body > nav a{
  font-size: var(--t-small);
}

/* 20 · the one lead sentence under the h1
   ⚠️ `header.hero > p:first-of-type` was wrong: the FIRST p in the hero is the
   mono eyebrow (p.kick), so this rule blew it up to 20px and it dominated the
   top of every phone screen. The lead is .sub, and the eyebrow is re-pinned. */
.hero .sub{ font-size: var(--t-lead); line-height: 1.5; }
header.hero p.kick{ font-size: 11px; letter-spacing: .1em; }

/* ⚠️ the dark band gets three alphas, not seven. An alpha ramp reads as
   indecision at exactly the moment the footer is meant to look institutional. */
#bmFoot{ color: rgba(255,255,255,.62); }
#bmFoot .fttag, #bmFoot h4, #bmFoot .ftend{ color: rgba(255,255,255,.42); }
#bmFoot a, #bmFoot .ftmark{ color: #fff; }

/* ── 7 · the last stragglers, by measured path ────────────────────────────────
   ⚠️ Broad rules got most of it and then nine selectors held out, because the
   inline sheet targets them more specifically than `.pill` or `.mono` can reach.
   Chased with the audit rather than guessed: each line below is one row of the
   "what is still off-scale" report. */
.related-links a{ font-size: var(--t-small); }              /* 35× at 14 */
.refs a i, .pcards .pcard span, .plate .cap span,
.drop span.bmdr{ font-size: var(--t-micro); }               /* 12 → 13     */
.readout .segl span, .cai .cam, .readout p.cafine,
.artsec svg text{ font-size: 11px; }                        /* 10 → 11     */
.cai p.cat, .readout a.cago, .drop .two button.pill,
.iask .uaf button.uab{ font-size: var(--t-small); }         /* 14,15 → 16  */
ul li.rv span, .readout p.reading b{ font-size: inherit; }  /* 15,17 → 18  */
body > nav a:first-child b{ font-size: var(--t-body); }
body > nav .navcta{ font-size: var(--t-small); }

/* ── 8 · one accent, doing one job ────────────────────────────────────────────
   The green was carrying headings, emphasis, links and buttons at once, which is
   why nothing on the page read as more important than anything else. It keeps
   the actions and gives back the prose. */
#article a{ color: var(--g-ink); text-decoration: underline;
  text-decoration-color: var(--g-soft); text-underline-offset: 3px; }
#article a:hover{ text-decoration-color: var(--brand); }

/* ── 9 · the ones patches.js injects at runtime ───────────────────────────────
   ⚠️ THIS IS THE ONLY BLOCK THAT NEEDS !important, AND THE REASON IS SOURCE ORDER,
   not specificity. patches.js appends its own <style> elements to <head> AFTER
   this file has loaded, so for the modules it owns (the asks, the teasers, the
   offer card, the interaction rows) an equally specific rule of mine loses every
   time. Twelve elements, listed from the audit rather than blanket-forced. */
ul li.rv span,
.readout p.reading b,
.ask p.askled em{ font-size: inherit !important; }

.cai span.cam,
.readout p.cafine{ font-size: 11px !important; }

.wrap .offer p.fine,
.wrap section button.more{ font-size: var(--t-micro) !important; }

.cai p.cat,
.readout a.cago,
.drop .two button.pill,
.interaction-teasers a{ font-size: var(--t-small) !important; }

/* ⚠️ `font-size:inherit` resolved to 17px because the PARENTS were 17. Chasing the
   child was the wrong move; these three containers set it. */
.readout p.reading,
.ask p.askled,
.ask ul li.rv{ font-size: var(--t-body) !important; }
#bmTopCta{ font-size: var(--t-small) !important; border-radius: var(--r-md); }

/* ── the phone's permanent ask is the bar the page already ships ────────────── */
.salebar{ background: rgba(255,255,255,.97); border-top: 1px solid var(--rule);
  box-shadow: none; }
.salebar .salein{ gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.salebar .saletext b{ font-size: var(--t-small); font-weight: 700; color: var(--g-ink); }
.salebar .salep{ font-size: var(--t-micro); color: var(--g-mid); letter-spacing: .02em; }
.salebar .saleGo{ border-radius: var(--r-md) !important; font-size: var(--t-small) !important;
  font-weight: 700; padding: 11px 16px; background: var(--brand); color: #fff; }
.salebar .salex{ color: var(--g-mid); }

/* ⚠️ .midhook's inner div only appears on SOME markers, so the LDL page I built
   against never showed it and it survived the first audit. Caught by running the
   token check across six different markers instead of one. */
#article .midhook, #article .midhook div, #article .midhook p{
  font-size: var(--t-small) !important;
}

/* ⚠️ #sexline only renders on markers whose ranges differ by sex, which is why it
   was invisible on LDL, hba1c and TSH and only surfaced on hemoglobin, ferritin and
   ALT. Marker-specific modules are the reason the token audit runs across eight
   different markers now rather than the one page the skin was designed against. */
#sexline .sxb{ font-size: var(--t-micro) !important; border-radius: var(--r-md); }

/* ═══════════════════════════════════════════════════════════════════════════
   bm-onesay-aug1 · say it once, then get to the article

   Owner, pointing at three screenshots of the same fact: "this need to be removed
   it repeats info ... this and this is the same thing repeated 2 times so id like
   this to be one thing", then at the two panels between the readout and the
   article: "lets remove this and this, lets go to full picture straight ... lets
   go straight to Is LDL Cholesterol 150 mg/dL Low, Normal, or High? i think makes
   page look way more legitimate". And: "im talking about every page".

   ⛔ NOTHING IS DELETED. Every element below is still in the HTML of all 7,973
   pages, exactly where it was. This hides them, so "save those elements somewhere
   for future if i decide to bring them back" is satisfied by the markup itself and
   any one of them returns by deleting its rule or setting its switch.

   ⚠️ THE PAGE SAID THE SAME THING THREE TIMES, in three different boxes:

     #verdict   "WHAT THIS MEANS · 151.3 is borderline high, just outside the
                 range for LDL."                                    ← KEPT
     #gapline   "You are 51.3 mg/dL over the optimal ceiling of 100. That reads
                 borderline high."                                  ← hidden
     #reading   "151.3 is borderline high. That is above the normal range for
                 LDL..."                                            ← hidden

   #verdict is the one kept because it is the box the SLIDER DRIVES: drag the
   value and it rewrites. Hiding it would kill the one interactive thing above the
   fold. The other two restate it in flatter words, and #gapline in particular is
   a sentence describing the scale drawn immediately above it.

   ⛔ ZERO SEO COST ON THOSE THREE: verified they are absent from the raw HTML and
   injected by patches.js at runtime, so Bing has never seen a word of them. */
#gapline, #reading{ display: none !important; }

/* ── straight to the article ──────────────────────────────────────────────────
   #more ("Make it yours", the inline drop zone) and #fix ("Eat the gap closed",
   the recipe cards) sit BETWEEN the readout and the article, which is why the
   first h2 arrived after a wall. Removing them puts "Is LDL Cholesterol 150 mg/dL
   Low, Normal, or High?" directly under the number.

   ⚠️ MEASURED COST BEFORE DOING IT, because these two ARE in the raw HTML unlike
   the three above: #more is 67 words and 0 links, #fix is 22 words and 0 links,
   against #article's 1,599 words, 4 h2s and every internal link, all untouched.
   89 words of 2,808, no links, no headings that carry a keyword.

   ⚠️ #more HELD THE INLINE UPLOADER, so this only holds because the analyzer now
   has four permanent homes it did not have before: the masthead action, the
   desktop rail, the sticky bar on phones, and the mid-article band. Do not hide
   these two on a page that lacks those. */
#more, #fix{ display: none !important; }

/* the recipe rail and the "read with X" rec block belong to #fix's idea */
body:not(.bm-keepfix) #rail, body:not(.bm-keepfix) #rec{ display: none !important; }

/* ── bm-fullpic-aug1 · the lone label and its crater ──────────────────────────
   "THE FULL PICTURE" is a mono eyebrow sitting alone above the article with 96px
   of padding over it and the h2's own space under it, so it reads as a caption
   for nothing in a field of empty. The h2 immediately below already says what the
   section is. Owner: "the full picture there is such a big empty gap there bro".
   Hidden, not deleted. */
#article > p.kick:first-child{ display: none !important; }
#article{ padding-top: 26px !important; }

/* ── bm-bandlabel-aug1 · the active band name gets its own line, at every width ─
   Owner: "text ooverlaps here", on /vitamin-d-20-ng-ml/ desktop.

   ⛔ MEASURED CAUSE. The band strip is a flex of fixed slots. Every label is
   `overflow:hidden`, EXCEPT the active one, which patches.js gives
   `overflow:visible` so it does not get clipped. It then spills straight over its
   neighbours. The overflow is not marginal:

       vitamin D   "insufficient"     89px of text in a  45px slot
       hba1c       "prediabetes"      82px of text in a  43px slot
       LDL         "borderline high" 112px of text in a 100px slot

   ⚠️ And the non-active labels were already lying: clipped at 45px, "sufficient/
   optimal" renders as "sufficient/optim…" and two clipped labels read as one run.
   That was fixed on phones in July and the fix was capped at 620px, so desktop
   kept both faults.

   ⛔ THE STRIP IS NOT WHERE A NAME FITS. Seven bands across 672px is 45px each,
   and no honest label fits in 45px. The one thing the reader needs is WHICH BAND
   THEY ARE IN, so that is stated on its own line at full width where it can never
   collide, and the coloured segments plus the numeric ends carry the structure.
   Same treatment mobile already ships, now at every width. */
#segl span{ display: none !important; }
#segl span.on{
  display: block !important;
  flex: 0 0 100% !important;
  text-align: center;
  overflow: visible !important;
  white-space: nowrap;
  font-weight: 700;
}
#segl{ flex-wrap: wrap; justify-content: center; }