/* ═══════════════════════════════════════════════════════════════════
   FaberSoft — Blog
   Extends styles.css. No :root here, no token redefinition.
   Prefix: .bl-   ·   Page scope: body.bl
   ═══════════════════════════════════════════════════════════════════ */

.bl{
  --bl-measure:68ch;
  --bl-rail:clamp(210px,19vw,268px);
  --bl-card:#070D1E;
}

/* The hero entrance choreography in styles.css leaves .eyebrow__text/.btn
   paused at opacity 0 until body.run. Editorial pages must be readable the
   instant the HTML lands, with or without JS. */
.bl .eyebrow__text,
.bl .btn,
.bl .tick{animation:none;opacity:1;transform:none;filter:none}

.bl .nav__links a[aria-current="page"]{color:var(--ink)}
.bl .nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.bl .nav__panel a[aria-current="page"]{color:var(--gold)}

/* ── Reading progress ──────────────────────────────────────────────── */

.bl-progress{
  position:fixed;
  top:var(--nav-h);
  left:0;
  right:0;
  z-index:49;
  height:2px;
  background:rgba(250,250,250,.05);
  pointer-events:none;
}
/* blog.js drives this with transform:scaleX(0…1) — full width, zero scale */
.bl-progress > i{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-500) 62%,var(--gold));
  box-shadow:0 0 12px rgba(67,102,219,.55);
}

/* ═══ Masthead ═════════════════════════════════════════════════════ */

.bl-mast{
  overflow:hidden;
  padding:clamp(46px,6vw,104px) var(--pad) clamp(34px,4vw,62px);
}
.bl-mast__inner{position:relative;z-index:2}
.bl-mast .eyebrow{margin-bottom:24px}

.bl-mast__title{
  margin:0;
  max-width:19ch;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2rem,1.05rem + 3.4vw,3.75rem);
  line-height:1.05;
  letter-spacing:-.024em;
  color:var(--ink);
  text-wrap:balance;
}
.bl-mast__title em{font-style:normal;color:var(--ink-38)}

.bl-mast__lede{
  max-width:60ch;
  margin-top:clamp(18px,2vw,28px);
  padding-left:16px;
  border-left:2px solid rgba(67,102,219,.55);
  font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);
  line-height:1.68;
  color:var(--text-muted);
}

.bl-mast__stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(14px,2vw,30px);
  margin-top:clamp(26px,3vw,42px);
}
.bl-mast__stats li{
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mono);
}
.bl-mast__stats b{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.25rem,1.1rem + .5vw,1.625rem);
  letter-spacing:-.02em;
  color:var(--ink);
}
.bl-mast__stats i{
  width:3px;
  height:3px;
  background:var(--gold);
  opacity:.6;
}

/* ═══ Section heads ════════════════════════════════════════════════ */

.bl-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:clamp(28px,3vw,44px) var(--pad) clamp(18px,2vw,26px);
}
.bl-head__title{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.125rem,1.02rem + .45vw,1.4375rem);
  line-height:1.2;
  letter-spacing:-.014em;
  color:var(--ink);
}
.bl-head__note{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-mono);
}

/* ═══ Generated cover (CSS-only, deterministic per topic) ══════════ */

.bl-cover{
  position:relative;
  display:block;
  overflow:hidden;
  container-type:inline-size;
  isolation:isolate;
  background:
    radial-gradient(110% 130% at 14% 8%,rgba(67,102,219,.26),transparent 58%),
    linear-gradient(162deg,#0B1330 0%,#070D1F 52%,#05091A 100%);
}
.bl-cover::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:0;
  background:conic-gradient(from var(--ca,200deg) at 74% 22%,
    transparent 0deg,
    var(--c1,rgba(67,102,219,.42)) 38deg,
    transparent 96deg,
    var(--c2,rgba(222,189,84,.14)) 150deg,
    transparent 210deg);
  opacity:.9;
}
.bl-cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:linear-gradient(180deg,rgba(6,11,26,.10) 0%,rgba(6,11,26,.30) 62%,rgba(6,11,26,.72) 100%);
}

.bl-cover__grid{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:var(--pat,repeating-linear-gradient(90deg,rgba(250,250,250,.07) 0 1px,transparent 1px 16px));
  -webkit-mask-image:radial-gradient(120% 100% at 30% 100%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 30% 100%,#000 25%,transparent 78%);
  opacity:.9;
}

.bl-cover__code{
  position:absolute;
  left:5cqi;
  bottom:4cqi;
  z-index:3;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2rem,27cqi,7.5rem);
  line-height:.86;
  letter-spacing:-.05em;
  color:transparent;
  background:linear-gradient(170deg,rgba(250,250,250,.30) 0%,rgba(67,102,219,.34) 68%,rgba(67,102,219,0) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.bl-cover__code::before{content:var(--code,"FS")}

.bl-cover__year{
  position:absolute;
  top:0;
  right:0;
  z-index:3;
  padding:9px 12px;
  border-left:1px solid var(--tick);
  border-bottom:1px solid var(--tick);
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.2em;
  color:rgba(250,250,250,.55);
  background:rgba(6,11,26,.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.bl-cover__tick{
  position:absolute;
  z-index:3;
  width:14px;
  height:14px;
  top:12px;
  left:12px;
  border-top:1px solid var(--tick);
  border-left:1px solid var(--tick);
}

.bl-cover__img{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--cover-pos,50% 50%);
}

/* Per-topic identity */
.bl-cover[data-topic="mes-e-chao-de-fabrica"]{
  --ca:206deg;--code:"MES";
  --c1:rgba(67,102,219,.52);--c2:rgba(222,189,84,.14);
  --pat:repeating-linear-gradient(90deg,rgba(250,250,250,.10) 0 2px,transparent 2px 15px),
        linear-gradient(0deg,rgba(67,102,219,.16),transparent 62%);
}
.bl-cover[data-topic="indicadores-e-dados"]{
  --ca:142deg;--code:"OEE";
  --c1:rgba(67,102,219,.40);--c2:rgba(222,189,84,.26);
  --pat:repeating-linear-gradient(0deg,rgba(250,250,250,.09) 0 1px,transparent 1px 18px),
        linear-gradient(28deg,transparent 46%,rgba(222,189,84,.34) 47%,rgba(222,189,84,0) 49%);
}
.bl-cover[data-topic="industria-4-0"]{
  --ca:18deg;--code:"4.0";
  --c1:rgba(67,102,219,.50);--c2:rgba(250,250,250,.08);
  --pat:radial-gradient(circle at center,rgba(250,250,250,.20) 1px,transparent 1.2px);
}
.bl-cover[data-topic="industria-4-0"] .bl-cover__grid{background-size:16px 16px}
.bl-cover[data-topic="inteligencia-artificial"]{
  --ca:298deg;--code:"IA";
  --c1:rgba(67,102,219,.46);--c2:rgba(222,189,84,.20);
  --pat:repeating-radial-gradient(circle at 78% 24%,rgba(250,250,250,.12) 0 1px,transparent 1px 15px);
}
.bl-cover[data-topic="manutencao-e-melhoria-continua"]{
  --ca:62deg;--code:"TPM";
  --c1:rgba(67,102,219,.38);--c2:rgba(222,189,84,.24);
  --pat:repeating-linear-gradient(-45deg,rgba(250,250,250,.09) 0 1px,transparent 1px 12px);
}
.bl-cover[data-topic="pcp-e-producao"]{
  --ca:248deg;--code:"PCP";
  --c1:rgba(67,102,219,.48);--c2:rgba(222,189,84,.12);
  --pat:repeating-linear-gradient(90deg,rgba(250,250,250,.07) 0 1px,transparent 1px 22px),
        repeating-linear-gradient(0deg,rgba(250,250,250,.07) 0 1px,transparent 1px 22px);
}
.bl-cover[data-topic="tecnologia-e-negocios"]{
  --ca:172deg;--code:"TEC";
  --c1:rgba(67,102,219,.34);--c2:rgba(222,189,84,.28);
  --pat:repeating-linear-gradient(90deg,rgba(250,250,250,.06) 0 1px,transparent 1px 9px),
        linear-gradient(180deg,transparent 58%,rgba(222,189,84,.12) 100%);
}

/* ═══ Featured ═════════════════════════════════════════════════════ */

.bl-feat{padding:0}
.bl-card.bl-feat__card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border-top:1px solid var(--line);
  background:var(--bl-card);
  overflow:hidden;
}
.bl-feat__media{
  position:relative;
  border-right:1px solid var(--line);
}
.bl-feat__media .bl-cover{height:100%;min-height:clamp(220px,26vw,380px)}
.bl-feat__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:clamp(26px,3.2vw,52px);
}
.bl-feat__flag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.bl-feat__flag i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  animation:ckPing 2.6s ease-out infinite;
}
.bl-feat__title{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.375rem,1.1rem + 1.5vw,2.375rem);
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}
.bl-feat__excerpt{
  max-width:52ch;
  font-size:clamp(.9375rem,.91rem + .18vw,1.0625rem);
  line-height:1.66;
  color:var(--text-muted);
}
.bl-feat__card:hover .bl-feat__title{color:var(--ink)}

/* ═══ Meta line ════════════════════════════════════════════════════ */

.bl-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--text-mono);
}
/* Separator rides the end of the preceding item, so a wrapped meta line never
   starts with an orphan dot. */
.bl-meta > *:not(:last-child)::after{
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  margin-left:12px;
  vertical-align:middle;
  background:rgba(67,102,219,.55);
}
.bl-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  /* --blue-500 puro da 3.7:1 sobre o --ground e reprova no AA em texto desse
     tamanho; este tom e o mesmo azul clareado, ~7:1. */
  color:#95AAF0;
  background:rgba(67,102,219,.07);
  transition:background-color .3s var(--e-soft),color .3s var(--e-soft);
}
.bl-meta > .bl-tag::after{display:none}
a.bl-tag:hover{background:rgba(67,102,219,.18);color:var(--ink)}

/* ═══ Toolbar: search + count ══════════════════════════════════════ */

.bl-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.no-js .bl-tools{display:none}

.bl-search{position:relative;display:flex;align-items:center;min-width:0}
.bl-search__icon{
  position:absolute;
  left:var(--pad);
  width:15px;
  height:15px;
  color:var(--text-mono);
  pointer-events:none;
}
.bl-search input{
  width:100%;
  min-height:60px;
  padding:18px 20px 18px calc(var(--pad) + 26px);
  border:0;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:.9375rem;
  letter-spacing:.01em;
}
.bl-search input::placeholder{color:var(--text-mono);opacity:1}
.bl-search input:focus-visible{outline-offset:-3px}
.bl-search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}

.bl-results{
  display:flex;
  align-items:center;
  gap:9px;
  padding:18px var(--pad);
  border-left:1px solid var(--line);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mono);
  white-space:nowrap;
}
.bl-results b{
  font-family:var(--display);
  font-weight:900;
  font-size:1rem;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ═══ Topic index (doubles as filter) ══════════════════════════════ */

.bl-topics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.no-js .bl-topics{display:none}

.bl-topic{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  min-height:44px;
  margin:0;
  padding:clamp(16px,1.7vw,22px) clamp(16px,1.6vw,22px) clamp(18px,1.9vw,24px);
  border:0;
  background:var(--ground);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .3s var(--e-soft);
}
.bl-topic::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:var(--blue-500);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .32s var(--e-soft);
}
.bl-topic:hover{background:rgba(67,102,219,.06)}
.bl-topic[aria-pressed="true"]{background:rgba(67,102,219,.10)}
.bl-topic[aria-pressed="true"]::before{transform:scaleX(1)}

.bl-topic__name{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--display);
  font-weight:900;
  font-size:.9375rem;
  line-height:1.24;
  letter-spacing:-.012em;
  color:var(--ink-72);
  transition:color .3s var(--e-soft)}
.bl-topic:hover .bl-topic__name,
.bl-topic[aria-pressed="true"] .bl-topic__name{color:var(--ink)}
.bl-topic__count{
  flex:none;
  font-family:var(--sans);
  font-weight:600;
  font-size:.625rem;
  letter-spacing:.1em;
  color:var(--text-mono);
}
.bl-topic__desc{
  font-size:.75rem;
  line-height:1.55;
  color:var(--text-faint);
}
/* Topic blurbs live here so the generator only has to emit slug + name + count */
.bl-topic[data-topic="all"] .bl-topic__desc::before{content:"Tudo o que publicamos sobre indústria, dados e software, do mais recente ao primeiro."}
.bl-topic[data-topic="mes-e-chao-de-fabrica"] .bl-topic__desc::before{content:"Sistemas de execução da manufatura e automação do apontamento na linha."}
.bl-topic[data-topic="indicadores-e-dados"] .bl-topic__desc::before{content:"OEE, KPIs, MTTR/MTBF e cartas de controle: dado de produção que vira decisão."}
.bl-topic[data-topic="industria-4-0"] .bl-topic__desc::before{content:"Conectividade, nuvem, IoT e as tendências que digitalizam a operação."}
.bl-topic[data-topic="inteligencia-artificial"] .bl-topic__desc::before{content:"IA na indústria: visão de máquina, casos práticos e colaboração homem-máquina."}
.bl-topic[data-topic="manutencao-e-melhoria-continua"] .bl-topic__desc::before{content:"TPM, preventiva, preditiva, causa raiz e Lean para reduzir parada e desperdício."}
.bl-topic[data-topic="pcp-e-producao"] .bl-topic__desc::before{content:"Planejamento e controle da produção, estoque e redução de custo industrial."}
.bl-topic[data-topic="tecnologia-e-negocios"] .bl-topic__desc::before{content:"Gestão, pessoas, sustentabilidade e tendências tech além do chão de fábrica."}

/* ═══ Card grid ════════════════════════════════════════════════════ */

.bl-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.bl-grid--related{border-top:1px solid var(--line)}

.bl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--ground);
  transition:background-color .35s var(--e-soft);
}
.bl-card__media{position:relative;display:block;border-bottom:1px solid var(--line)}
.bl-card__media .bl-cover{aspect-ratio:16/9}

.bl-card__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  flex:1;
  padding:clamp(20px,2vw,28px);
}
.bl-card__title{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1rem,.95rem + .3vw,1.1875rem);
  line-height:1.24;
  letter-spacing:-.014em;
  color:var(--ink);
  text-wrap:pretty;
}
.bl-card__excerpt{
  font-size:.8125rem;
  line-height:1.66;
  color:var(--text-muted);
}
.bl-card__go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--text-mono);
  transition:color .3s var(--e-soft);
}
.bl-card__go svg{transition:transform .3s var(--e-soft)}

/* One link per card, stretched over the whole cell */
.bl-card__link{position:static}
.bl-card__link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
}
.bl-card:hover{background:var(--bl-card)}
.bl-card:hover .bl-card__go,
.bl-card:focus-within .bl-card__go{color:var(--gold)}
.bl-card:hover .bl-card__go svg{transform:translateX(3px)}
.bl-card:focus-within{background:var(--bl-card)}
.bl-card__link:focus-visible::after{outline:2px solid var(--blue-500);outline-offset:-4px}

.bl-empty{
  padding:clamp(40px,5vw,72px) var(--pad);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.bl-empty__title{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:900;
  font-size:1.125rem;
  color:var(--ink);
}
.bl-empty p{font-size:.875rem;line-height:1.7;color:var(--text-muted)}

/* ═══ Post ═════════════════════════════════════════════════════════ */

.bl-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(22px,2.6vw,34px);
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--text-mono);
}
.bl-crumbs a{transition:color .3s var(--e-soft)}
.bl-crumbs a:hover{color:var(--ink)}
.bl-crumbs svg{opacity:.5}
/* O ultimo item e o titulo do artigo, que passa de 100 caracteres em varios
   posts: corta com reticencia em vez de empurrar a linha inteira. */
.bl-crumbs [aria-current]{
  color:var(--ink-72);
  max-width:min(46ch,100%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bl-post__head{
  padding:clamp(30px,3.6vw,58px) var(--pad) clamp(26px,3vw,42px);
}
.bl-post__head .eyebrow{margin-bottom:20px}
.bl-post__title{
  margin:0;
  max-width:24ch;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.75rem,1.2rem + 2.3vw,3.125rem);
  line-height:1.06;
  letter-spacing:-.024em;
  color:var(--ink);
  text-wrap:balance;
}
.bl-post__deck{
  max-width:60ch;
  margin-top:clamp(16px,1.8vw,24px);
  font-size:clamp(1rem,.95rem + .28vw,1.1875rem);
  line-height:1.64;
  color:var(--text-muted);
}
.bl-post__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
}

/* A capa e gerada por CSS, nao e foto: em 21/9 sangrada ela empurrava o texto
   quase uma tela inteira para baixo sem entregar informacao nenhuma. Vira uma
   faixa alinhada a coluna do artigo, com altura limitada. */
/* .shell traz border-top junto com as laterais; nas duas faixas em volta da
   capa isso desenhava um risco em cima e outro embaixo dela. Ficam so as
   linhas verticais, como no resto do site. */
.bl-post__cover,
.bl-post__body{border-top:0}
.bl-post__cover{padding:0 var(--pad)}
.bl-post__cover .bl-cover{
  height:clamp(150px,22vw,320px);
  /* sem contorno proprio: as unicas linhas por perto sao as verticais do
     shell, iguais as do resto do site. */
  border:0;
  /* faixa baixa: nas 4 capas que sao foto o assunto fica na metade de cima */
  --cover-pos:50% 40%;
}

/* Body: article + sticky rail */
.bl-post__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--bl-rail);
  gap:clamp(28px,4vw,72px);
  align-items:start;
  padding:clamp(32px,4vw,70px) var(--pad) clamp(40px,5vw,86px);
}

.bl-side{
  position:sticky;
  top:calc(var(--nav-h) + 26px);
  display:flex;
  flex-direction:column;
  gap:26px;
  order:2;
}

.bl-toc{
  padding-left:18px;
  border-left:1px solid var(--line);
}
.no-js .bl-toc{display:none}
.bl-toc:not(:has(a)){display:none}
.bl-toc__title{
  margin:0 0 14px;
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-mono);
}
.bl-toc nav{display:flex;flex-direction:column}
.bl-toc a{
  display:block;
  padding:8px 0;
  font-size:.8125rem;
  line-height:1.4;
  color:var(--text-faint);
  border-left:1px solid transparent;
  margin-left:-19px;
  padding-left:18px;
  transition:color .3s var(--e-soft),border-color .3s var(--e-soft);
}
.bl-toc a:hover{color:var(--ink)}
.bl-toc a[aria-current],
.bl-toc a[data-active]{color:var(--ink);border-left-color:var(--gold)}

.bl-share{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.bl-share__label{
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-mono);
}
.bl-share__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(250,250,250,.02);
  color:var(--ink-72);
  font:inherit;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color .3s var(--e-soft),color .3s var(--e-soft),border-color .3s var(--e-soft);
}
.bl-share__btn svg{flex:none;color:var(--text-mono);transition:color .3s var(--e-soft)}
.bl-share__btn:hover{background:rgba(67,102,219,.10);color:var(--ink);border-color:rgba(67,102,219,.34)}
.bl-share__btn:hover svg{color:var(--blue-500)}
.no-js .bl-share__btn--copy{display:none}

/* ═══ Long-form typography ═════════════════════════════════════════ */

.bl-prose{
  order:1;
  max-width:var(--bl-measure);
  font-size:clamp(1rem,.97rem + .22vw,1.125rem);
  line-height:1.78;
  letter-spacing:.002em;
  color:rgba(250,250,250,.78);
  overflow-wrap:break-word;
}
.bl-prose > :first-child{margin-top:0}
.bl-prose > :last-child{margin-bottom:0}

.bl-prose p{margin:0 0 1.35em}
.bl-prose > p:first-of-type{
  font-size:1.06em;
  color:rgba(250,250,250,.86);
}

.bl-prose h2,
.bl-prose h3,
.bl-prose h4{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-.018em;
  color:var(--ink);
  text-wrap:balance;
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.bl-prose h2{
  position:relative;
  margin:2.1em 0 .62em;
  padding-top:.7em;
  border-top:1px solid var(--line);
  font-size:clamp(1.3125rem,1.16rem + .62vw,1.75rem);
  line-height:1.16;
}
.bl-prose h2::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:34px;
  height:1px;
  background:var(--gold);
}
.bl-prose h3{
  margin:1.8em 0 .5em;
  font-size:clamp(1.0625rem,1.01rem + .32vw,1.25rem);
  line-height:1.24;
}
.bl-prose h4{
  margin:1.6em 0 .45em;
  font-size:1.0625rem;
  line-height:1.3;
}

.bl-prose a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:rgba(67,102,219,.75);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .25s var(--e-soft),text-decoration-color .25s var(--e-soft);
}
.bl-prose a:hover{color:var(--gold);text-decoration-color:var(--gold)}

.bl-prose strong,.bl-prose b{font-weight:600;color:var(--ink)}
.bl-prose em,.bl-prose i{font-style:italic}

.bl-prose ul,.bl-prose ol{
  margin:0 0 1.35em;
  padding-left:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.6em;
}
.bl-prose li{position:relative;padding-left:26px}
.bl-prose ul > li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:6px;
  height:1px;
  background:var(--blue-500);
}
.bl-prose ol{counter-reset:bl-ol}
.bl-prose ol > li{counter-increment:bl-ol}
.bl-prose ol > li::before{
  content:counter(bl-ol,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.14em;
  font-family:var(--display);
  font-weight:900;
  font-size:.75em;
  letter-spacing:.04em;
  color:var(--text-mono);
}
.bl-prose li > ul,.bl-prose li > ol{margin:.55em 0 0}

.bl-prose blockquote{
  margin:1.8em 0;
  padding:4px 0 4px 22px;
  border-left:2px solid rgba(67,102,219,.55);
  font-family:var(--display);
  font-weight:400;
  font-size:1.08em;
  line-height:1.56;
  color:rgba(250,250,250,.88);
}
.bl-prose blockquote p:last-child{margin-bottom:0}
.bl-prose blockquote cite{
  display:block;
  margin-top:.7em;
  font-family:var(--sans);
  font-style:normal;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-mono);
}

.bl-prose figure{margin:1.9em 0}
.bl-prose img{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--slab);
}
.bl-prose figcaption{
  margin-top:10px;
  padding-left:12px;
  border-left:1px solid var(--line);
  font-size:.75rem;
  line-height:1.6;
  color:var(--text-mono);
}

.bl-prose hr{
  margin:2.4em 0;
  border:0;
  height:1px;
  background:linear-gradient(90deg,rgba(67,102,219,.55),transparent);
}

.bl-prose code{
  padding:.14em .38em;
  border:1px solid var(--line);
  border-radius:3px;
  background:rgba(67,102,219,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;
  color:var(--ink);
}
.bl-prose pre{
  margin:1.7em 0;
  padding:18px 20px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--slab);
  font-size:.8125rem;
  line-height:1.6;
}
.bl-prose pre code{padding:0;border:0;background:none;font-size:inherit}

.bl-prose table{
  width:100%;
  margin:1.7em 0;
  border-collapse:collapse;
  font-size:.875rem;
}
.bl-prose th,.bl-prose td{
  padding:11px 14px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.bl-prose th{
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-mono);
  background:rgba(67,102,219,.07);
}
.bl-prose iframe,.bl-prose video{width:100%;max-width:100%;border:1px solid var(--line);border-radius:4px}

/* ═══ Post footer: share row, prev/next ═══════════════════════════ */

.bl-post__foot{padding:0}

/* auto-fit: a post with only one neighbour gets a single full-width cell
   instead of an empty half showing the grid's hairline background */
.bl-pager{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.bl-pager__item{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:44px;
  padding:clamp(20px,2.4vw,32px) clamp(18px,2vw,30px);
  background:var(--ground);
  transition:background-color .35s var(--e-soft);
}
.bl-pager__item:hover{background:var(--bl-card)}
.bl-pager__item--next{align-items:flex-end;text-align:right}
.bl-pager__dir{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-mono);
  transition:color .3s var(--e-soft);
}
.bl-pager__item:hover .bl-pager__dir{color:var(--gold)}
.bl-pager__title{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(.9375rem,.9rem + .3vw,1.125rem);
  line-height:1.26;
  letter-spacing:-.012em;
  color:var(--ink-72);
  transition:color .3s var(--e-soft);
}
.bl-pager__item:hover .bl-pager__title{color:var(--ink)}

.bl-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);
  padding:clamp(28px,3.4vw,52px) var(--pad);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 180% at 12% 0%,rgba(67,102,219,.14),transparent 62%),
    var(--ground);
}
.bl-cta__text{max-width:44ch}
.bl-cta__title{
  margin:0 0 8px;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.125rem,1.02rem + .5vw,1.5rem);
  line-height:1.18;
  letter-spacing:-.016em;
  color:var(--ink);
}
.bl-cta__text p{font-size:.875rem;line-height:1.66;color:var(--text-muted)}

/* ═══ Responsive ═══════════════════════════════════════════════════ */

@media (max-width:1180px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-post__body{grid-template-columns:1fr;gap:clamp(24px,3vw,38px)}
  .bl-side{
    position:static;
    order:0;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    gap:22px 34px;
    padding-bottom:clamp(20px,2.4vw,30px);
    border-bottom:1px solid var(--line);
  }
  .bl-toc{flex:1 1 320px;min-width:0}
  .bl-share{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .bl-share__label{width:100%}
  .bl-share__btn{width:auto}
  .bl-prose{order:1}
}

@media (max-width:900px){
  .bl-card.bl-feat__card{grid-template-columns:1fr}
  .bl-feat__media{border-right:0;border-bottom:1px solid var(--line)}
  .bl-feat__media .bl-cover{min-height:0;aspect-ratio:16/9}
}

@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr}
  .bl-topics{grid-template-columns:1fr}
  .bl-tools{grid-template-columns:1fr}
  .bl-results{border-left:0;border-top:1px solid var(--line);justify-content:flex-start}
  .bl-search__icon{left:20px}
  .bl-search input{padding-left:46px}
  .bl-pager{grid-template-columns:1fr}
  .bl-pager__item--next{align-items:flex-start;text-align:left}
  .bl-cta .btn{width:100%}
  .bl-cta .btn__label{justify-content:center;width:100%}
  .bl-mast__lede{padding-left:14px}
  .bl-prose ul,.bl-prose ol{gap:.7em}
}

@media (prefers-reduced-motion:reduce){
  .bl-feat__flag i,
  .bl-progress > i{animation:none!important;transition:none!important}
  .bl-card__go svg,
  .bl-topic::before{transition:none!important}
}