/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The blog, on top of landing.css.

   IT SHARES THE COVER'S STYLESHEET, and therefore its palette, its bar,
   its footer and its light-only decision. A blog post is the first page
   most strangers will ever see of this company -- somebody arriving from
   a search result has not met us -- so it is part of the front of the
   site, not part of the application behind it.

   Every colour comes from a token defined in landing.css. A literal here
   would be a colour that exists only on this page; the two shadows are
   the exception, because a shadow needs alpha and no token carries any.

   ---------------------------------------------------------------------
   THE FRAME
   ---------------------------------------------------------------------
   Asked for as: "I want a nice style to the blog posts. Framed in some
   sort of nice looking setup" -- and, in the same breath, the reason:
   "create 10 blog posts so we can see what the layout and style looks
   like with 10 posts."

   Which is the argument for all of it. Ten identical cards down one
   column is a list, and a list has no front page: nothing on it says
   which piece is new or which is worth the first minute. So:

     a MASTHEAD, ruled top and bottom, that says whose blog this is
     a LEAD, at full width, which is the newest post
     a RULED HEADING, and then a GRID of everything else

   One card shape at two sizes rather than two card designs, so there is
   one set of rules to keep in step and the page reads as one thing. */
/* .blogbody, .bfootnav, .bfootlaw and .beyebrow are in landing.css: the
   notices are drawn by the same template and need them too.

   The measure everything lines up to. The masthead, the lead, the rule
   and the grid all take this width, which is what makes the page look
   set rather than assembled. */
.bmast,.bcard.lead,.brule,.bgrid,.bpost,.bnext,.bempty{
  max-width:1000px;margin-inline:auto}

/* ---- the masthead ----
   A band with a rule under it, not a heading floating above a list. The
   eyebrow is what turns it from a page title into a masthead. */
.bmast{padding:56px 0 26px;margin-bottom:30px;
  border-bottom:2px solid var(--ink);text-align:center}
.bmast h1{margin:0 0 14px;font-size:clamp(34px,5.2vw,58px);line-height:1.03;
  font-weight:700;letter-spacing:-1.6px;text-wrap:balance}
.bmast .lead{margin:0 auto;max-width:60ch;font-size:16.5px;line-height:1.6;
  color:var(--ink2)}

/* ---- a ruled heading ----
   A centred label sitting on a hairline that runs the full measure. It
   is what separates the lead from everything after it without needing a
   second background colour. */
.brule{display:flex;align-items:center;gap:18px;margin:44px auto 22px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut)}
.brule::before,.brule::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.brule span{flex:none}

/* ---- a card ----
   The same object at two sizes. `lead` is the newest post across the
   whole measure; `small` is one cell of the grid underneath. */
.bcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 1px 2px rgba(15,28,42,.04);
  display:flex;flex-direction:column;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.bcard:hover{box-shadow:0 10px 26px rgba(15,28,42,.09);transform:translateY(-2px);
  border-color:var(--accent2)}
/* THE WHOLE CARD IS THE LINK. A title that is the only target makes a
   card look clickable and then behave as though it is not. */
.bcardl{display:block;text-decoration:none;color:inherit;flex:1 1 auto}
.bcardl:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bthumb{display:block;aspect-ratio:16/9;background:var(--band);
  border-bottom:1px solid var(--line)}
.bthumb img{width:100%;height:100%;object-fit:cover;display:block}
/* A post with no picture gets a band of the house colour rather than a
   hole where one would have been -- a card with a ragged top edge in a
   row of cards with pictures reads as a broken image. */
.bthumb.none{aspect-ratio:auto;height:5px;background:var(--accent);
  border-bottom:0;opacity:.6}
.btext{display:block;padding:18px 20px 6px}
.bkick{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin:0 0 9px}
.btitle{display:block;font-size:19px;font-weight:700;letter-spacing:-.4px;
  line-height:1.25;color:var(--ink);text-wrap:balance;margin:0 0 8px}
.bcardl:hover .btitle{text-decoration:underline;text-underline-offset:3px}
.bsum{display:block;font-size:14px;line-height:1.6;color:var(--ink2);margin:0}
/* The byline is outside the link and under a rule: it belongs to the
   post, not to the act of opening it. Pushed to the foot so a row of
   cards with titles of different lengths still lines its bylines up. */
.bcard .bby{margin-top:auto;padding:13px 20px 15px;border-top:1px solid var(--line)}

/* ---- the lead ----
   Picture beside the words rather than above them, because across the
   full measure a 16:9 picture on top is most of a screen before the
   headline arrives. */
.bcard.lead{margin-bottom:8px}
.bcard.lead .bcardl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.bcard.lead .bthumb{aspect-ratio:auto;height:100%;min-height:300px;
  border-bottom:0;border-right:1px solid var(--line)}
.bcard.lead .btext{align-self:center;padding:34px 38px}
.bcard.lead .btitle{font-size:clamp(24px,3vw,34px);letter-spacing:-.9px;
  line-height:1.16;margin:0 0 12px}
.bcard.lead .bsum{font-size:16px;line-height:1.65;max-width:52ch}
.bcard.lead .bby{padding:15px 38px 18px}

/* ---- the grid ----
   Three across, because that is what makes nine posts read as a body of
   work rather than as a queue. */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-bottom:64px}

/* ---- the byline ----
   The same block on a card and at the top of a post, because it is the
   same fact in both places: who wrote this, and when. Initials rather
   than a photograph -- there is no avatar to draw from, and a grey
   silhouette says less than two letters do. */
.bby{display:flex;align-items:center;gap:10px;min-width:0}
.bav{flex:none;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent2);
  color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.02em}
/* A PHOTOGRAPH WHERE THERE IS ONE. Same circle, same size, so a row of
   cards where some writers have a picture and some do not still lines up
   -- the fallback is the initials, not a gap. object-fit because a
   portrait is rarely square and a squashed face is worse than a crop. */
.bavimg{object-fit:cover;background:var(--band)}
.bwho{display:flex;flex-direction:column;gap:1px;min-width:0}
.bwho b{font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bwhen{font-size:12px;color:var(--mut)}

.bempty{margin:0 auto 60px;color:var(--mut)}

/* A draft is visible to staff on the same page as everything else, marked
   rather than on a screen of its own -- a separate preview is a second
   thing to keep in step with the real one. */
.bcard.draft{background:var(--band)}
.bdraft{display:inline-block;font-style:normal;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px;
  background:var(--accent2);color:var(--accent);vertical-align:middle}
.bdraftnote{display:block;margin:0 0 22px;padding:11px 15px;border-radius:9px;
  background:var(--accent2);color:var(--accent);font-size:13.5px}

/* ---- one post ----
   A sheet on the same tinted ground, so arriving from the list is the
   same page getting bigger rather than a different site. */
.bpost{max-width:840px;margin:34px auto 0;background:var(--card);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,28,42,.05)}
/* Full bleed across the top of the sheet, not inset inside its padding:
   the picture is the lid. */
.bhero{width:100%;max-width:100%;display:block;margin:0;
  aspect-ratio:21/9;object-fit:cover;border-bottom:1px solid var(--line)}
.bpin{padding:44px clamp(22px,5vw,64px) 54px}
/* 68 characters of measure, which is where an eye tracks back reliably.
   The cover's own disclosures are the standing proof of what happens
   without it: across the full width they ran to about two hundred. */
.bpin>*{max-width:68ch;margin-inline:auto}

/* The head of the article is its own band, ruled off from the prose. */
.bphead{padding:0 0 26px;margin:0 0 32px;border-bottom:1px solid var(--line);
  text-align:center}
.bphead .beyebrow{color:var(--mut)}
.bpost h1{margin:0 0 16px;font-size:clamp(29px,4.2vw,46px);line-height:1.12;
  font-weight:700;letter-spacing:-1.2px;text-wrap:balance}
.blead{margin:0 0 24px;font-size:18.5px;line-height:1.6;color:var(--ink2);
  max-width:56ch;margin-inline:auto}
/* The byline is centred under the standfirst, which is what makes the
   head of the post a masthead rather than a stack of paragraphs. */
.bphead .bby{justify-content:center}
.bphead .bav{width:38px;height:38px;font-size:13.5px}
.bphead .bwho{text-align:left}
.bphead .bwho b{font-size:14px}

.bbody{font-size:17px;line-height:1.72;color:var(--ink2)}
/* THE FIRST PARAGRAPH IS THE WAY IN. A touch larger and darker than the
   rest, which is the oldest trick in a magazine and still the cheapest
   way to make a wall of text start somewhere. */
.bbody>p:first-child{font-size:18.5px;line-height:1.65;color:var(--ink)}
.bbody h2{margin:40px 0 12px;font-size:25px;font-weight:700;
  letter-spacing:-.5px;color:var(--ink);text-wrap:balance}
/* h3 IS THE SECTION HEADING PEOPLE ACTUALLY WRITE. Every level shifts
   down by one -- h1 belongs to the post's title -- so an author typing
   `##` for a section gets an h3, and at 19px it read as barely heavier
   than the 17px body around it. Sized for the job it does, not for its
   number. */
.bbody h3{margin:34px 0 11px;font-size:22px;font-weight:700;
  letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
.bbody h4,.bbody h5{margin:24px 0 8px;font-size:16px;font-weight:700;color:var(--ink)}
.bbody p{margin:0 0 18px}
.bbody strong{color:var(--ink);font-weight:600}
.bbody a{color:var(--accent)}
.bbody ul,.bbody ol{margin:0 0 18px;padding-left:24px}
.bbody li{margin:0 0 8px}
.bbody hr{border:0;border-top:1px solid var(--line);margin:34px 0}
/* A PICTURE INSIDE THE PROSE. Authors put them there with
   ![alt](/blog-image/x.jpg), and one at body width with no frame reads as
   an attachment rather than part of the post. */
.bbody img{max-width:100%;height:auto;border-radius:12px;display:block;
  margin:24px 0;border:1px solid var(--line)}
/* A pulled quote, framed rather than merely indented: on a page this
   long it is the one place the eye can rest. */
.bbody blockquote{margin:26px 0;padding:18px 24px;border-radius:12px;
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--band);color:var(--ink);font-size:18px;line-height:1.6}
.bbody blockquote p:last-child{margin:0}
/* Wide content gets its own scroller so the page body never moves
   sideways -- the one rule a long-form page cannot do without. */
.bbody pre{margin:0 0 18px;padding:14px 16px;border-radius:10px;
  background:var(--band);border:1px solid var(--line);overflow-x:auto}
.bbody pre code{font-size:13px;line-height:1.6}
.bbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;background:var(--band);padding:1px 5px;border-radius:4px;
  border:1px solid var(--line)}
.bbody pre code{background:none;border:0;padding:0}

.bback{margin:46px 0 0;padding-top:24px;border-top:1px solid var(--line);
  text-align:center}
.bback a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14.5px}
.bback a:hover{text-decoration:underline}

/* ---- what to read next ----
   A post that ends in one "All posts" link ends in a dead end, and
   somebody who has just finished one is the likeliest reader of a
   second. */
.bnext{padding:0 0 10px}
.bnext .brule{margin-top:52px}

@media (max-width:980px){
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* The lead stops being a lead when there is no room beside the picture
     for it to be one; it becomes the first card, at the size of the
     others. */
  .bcard.lead .bcardl{grid-template-columns:minmax(0,1fr)}
  .bcard.lead .bthumb{aspect-ratio:16/9;min-height:0;
    border-right:0;border-bottom:1px solid var(--line)}
  .bcard.lead .btext{padding:18px 20px 6px}
  .bcard.lead .btitle{font-size:22px;letter-spacing:-.5px}
  .bcard.lead .bsum{font-size:14px}
  .bcard.lead .bby{padding:13px 20px 15px}
  .bgrid{grid-template-columns:minmax(0,1fr);gap:16px}
  .bmast{padding:34px 0 20px;margin-bottom:22px}
  .bpost{margin:20px auto 0;border-radius:14px}
  .bpin{padding:30px 20px 42px}
  .bbody{font-size:16px}
  .bbody>p:first-child{font-size:17px}
}