/* Blog home: a bento of posts (inspired by Sid's reference, in the AllyMatter palette). Dark mode follows the tokens. */
.bhome{padding:var(--cta-gap) 0}
.bhome h1{max-width:22ch;font:500 clamp(30px,3.8vw,42px)/1.06 var(--head);letter-spacing:-.03em;color:var(--ink)}
.bintro{margin-top:16px;max-width:62ch;font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--text)}
.bbento{margin-top:22px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:352px 256px;gap:10px}
.bpc{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;color:var(--ink);transition:transform .35s var(--ease)}
a.bpc:hover,a.bpc:focus-visible{transform:translateY(-3px)}
a.bpc:focus-visible,.bstretch:focus-visible,.bsub a:focus-visible,.bviewall:focus-visible,.blr:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.bpc img{height:auto}
.bpc h2{font:500 clamp(17px,1.9vw,22px)/1.12 var(--head);letter-spacing:-.025em}
.bmeta{display:block;font-size:12.5px;color:var(--text)}.bmeta b{font-weight:600;color:var(--ink)}
/* featured: image card with a cut-out title notch */
.bpc-feat{grid-column:1/12;grid-row:1/3;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.bpc-feat>img{position:absolute;left:5%;top:5%;width:140%;max-width:none;border-radius:16px;box-shadow:0 0 0 1px var(--line),0 24px 40px -22px rgba(0,0,0,.4)}
.bnotch{position:absolute;left:0;bottom:0;width:78%;padding:20px 22px 18px 0;background:var(--bg);border-top-right-radius:var(--r-card)}
.bnotch::before,.bnotch::after{content:"";position:absolute;width:var(--r-card);height:var(--r-card);background:radial-gradient(circle at 100% 0,transparent calc(var(--r-card) - .5px),var(--bg) var(--r-card))}
.bnotch::before{left:0;top:calc(-1 * var(--r-card));background:radial-gradient(circle at 100% 0,transparent calc(var(--r-card) - .5px),var(--bg) var(--r-card));transform:scale(1,-1) scale(-1,1);transform:none}
.bnotch::after{right:calc(-1 * var(--r-card));bottom:0;transform:none}
.bnotch h2{margin-top:8px;padding-left:22px;font-size:clamp(18px,2.3vw,26px)}.bnotch .bmeta{padding-left:22px}
/* orange card */
.bpc-or{grid-column:12/21;grid-row:1;background:var(--orange);color:#0a0a0a;padding:20px 22px 0;display:flex;flex-direction:column}
.bpc-or .bmeta,.bpc-or .bmeta b{color:#0a0a0a}
.bpc-or h2{margin-top:18px;max-width:17ch;font-size:clamp(19px,2.3vw,26px)}
.bstretch{color:inherit}.bstretch::after{content:"";position:absolute;inset:0}
.bpc-or p{margin:10px 0 18px;max-width:36ch;font-size:13.5px;line-height:1.45;color:rgba(10,10,10,.8)}
.bgo{position:absolute;right:0;top:0;display:grid;place-items:center;width:52px;height:52px;border-bottom-left-radius:var(--r-card);background:var(--bg);color:var(--ink)}
.bsub{margin:auto -22px 0;position:relative;z-index:1}
.bsub a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 22px;border-top:1px solid rgba(10,10,10,.35);font:500 14px/1.2 var(--head);color:#0a0a0a}
.bsub a:hover span{text-decoration:underline}
/* dark card */
.bpc-dk{grid-column:21/25;grid-row:1;background:var(--ink);color:var(--card);padding:20px 18px 0}
.bpc-dk .bmeta,.bpc-dk .bmeta b{color:var(--card)}.bpc-dk .bm2{margin-top:4px;opacity:.7}
.bpc-dk h2{margin-top:12px;color:var(--card);font-size:clamp(17px,1.9vw,21px)}
.bpc-dk>img{position:absolute;left:10%;bottom:-8%;width:170%;max-width:none;border-radius:14px}
/* wide image card */
.bpc-img{grid-column:12/20;grid-row:2;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.bpc-img>img{position:absolute;left:6%;top:-4%;width:92%;max-width:none;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 20px 34px -20px rgba(0,0,0,.4)}
.bimt{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;background:linear-gradient(transparent,var(--card) 42%)}
.bimt h2{margin-top:6px;max-width:22ch}
/* categories card */
.bpc-tag{grid-column:20/25;grid-row:2;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.bgts{display:flex;flex-wrap:wrap;gap:6px}
.bgt{padding:6px 10px;border-radius:999px;background:var(--card);font-size:12px;color:var(--ink);box-shadow:0 0 0 1px var(--line)}.bgt.on{background:var(--orange);color:#0a0a0a;box-shadow:none}
.bviewall{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 14px/1.2 var(--head);color:var(--ink)}
.bviewall i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .3s var(--ease)}.bviewall:hover i{transform:translateX(3px)}
/* latest list */
.blat{padding:0 0 var(--cta-gap)}
.blh h2{font:500 clamp(24px,3vw,32px)/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.blist{margin-top:16px;border-radius:var(--r-card);background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 28px -24px rgba(0,0,0,.3);overflow:hidden}
.blr{display:grid;grid-template-columns:110px minmax(0,1fr) auto 18px;gap:18px;align-items:center;padding:18px 24px;border-top:1px solid var(--line);color:var(--ink)}.blr:first-child{border-top:0}
.blr b{font:500 17px/1.25 var(--head);letter-spacing:-.015em}.bld,.blm{font-size:13px;color:var(--text)}.blr svg{color:var(--faint);transition:transform .3s var(--ease)}
.blr:hover,.blr:focus-visible{background:var(--inset)}.blr:hover svg{transform:translateX(3px);color:var(--ink)}
.blmore{margin-top:18px;display:flex;justify-content:center}
@media (max-width:899px){
  .bbento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bpc-feat{grid-column:1 / span 2;grid-row:auto;height:360px}.bpc-or{grid-column:1 / span 2;grid-row:auto;min-height:330px}
  .bpc-dk{grid-column:1 / span 1;grid-row:auto;min-height:300px}.bpc-img{grid-column:2 / span 1;grid-row:auto;min-height:300px}
  .bpc-tag{grid-column:1 / span 2;grid-row:auto;min-height:190px;gap:18px}
}
@media (max-width:899px){
  .bpc-dk{min-height:0;padding-bottom:0}.bpc-dk>img{position:relative;left:auto;bottom:auto;width:100%;margin-top:16px;border-radius:14px 14px 0 0;display:block}
  .bpc-img{min-height:0;display:flex;flex-direction:column}.bpc-img>img{position:relative;left:auto;top:auto;width:calc(100% - 40px);margin:20px 20px 0;display:block}.bimt{position:relative;padding:16px 20px 20px;background:none}
  .bpc-feat>img{width:118%}
  .bpc-or{min-height:0}
}
@media (max-width:620px){
  .bpc-dk,.bpc-img{grid-column:1 / span 2}
  .bpc-feat{height:320px}
  .blr{grid-template-columns:minmax(0,1fr) 18px;gap:4px 12px}.blr .bld,.blr b,.blr .blm{grid-column:1}.blr svg{grid-column:2;grid-row:1/4}
}
@media (prefers-reduced-motion:reduce){.bpc,.bviewall i,.blr svg{transition:none}}

/* Browse by category: pick a category, the first ten show in a 5 x 2 grid */
.bbrw{padding:0 0 var(--cta-gap)}
.bbrw h2{font:500 clamp(24px,3vw,32px)/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.bcats{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.bcat{appearance:none;border:0;cursor:pointer;padding:9px 13px;border-radius:999px;background:var(--card);color:var(--ink);font:500 13.5px/1 var(--body);box-shadow:0 0 0 1px var(--line);transition:background .25s var(--ease),color .25s var(--ease)}
.bcat:hover{background:var(--inset)}
.bcat[aria-pressed=true]{background:var(--ink);color:var(--card);box-shadow:none}
.bcat:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bgrid5{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bgc{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:var(--card);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 28px -24px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.bgc[hidden]{display:none}
.bgc:hover,.bgc:focus-visible{transform:translateY(-3px)}.bgc:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bgc img{width:100%;aspect-ratio:16/11;height:auto;object-fit:cover;object-position:top left;background:var(--inset)}
.bgc>div{padding:12px 14px 16px}.bgc .bmeta{font-size:12px}.bgc .bmeta b{display:inline;margin:0;font:600 12px/1.3 var(--body);letter-spacing:0}.bgc>div>b{display:block;margin-top:6px;font:500 15px/1.25 var(--head);letter-spacing:-.015em}
.bempty{margin-top:16px;padding:28px;border-radius:var(--r-card);background:var(--card);color:var(--text);text-align:center}.bempty[hidden]{display:none}
@media (max-width:899px){.bgrid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.bgrid5{grid-template-columns:repeat(2,minmax(0,1fr))}.bcats{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scrollbar-width:none}.bcat{flex:none}}

/* ---- 2026-10-16 ---- */
/* featured card: the screenshot sits inside the card, above the title notch, never past the edge */
.bpc-feat>img{left:5%;top:5%;width:90%;height:62%;object-fit:cover;object-position:top left}
@media (max-width:899px){.bpc-feat>img{width:90%;height:54%}}
@media (max-width:620px){
  .bpc-feat{height:auto;display:flex;flex-direction:column}
  .bpc-feat>img{position:relative;left:auto;top:auto;width:calc(100% - 40px);height:220px;margin:20px 20px 0}
  .bnotch{position:relative;width:auto;padding:16px 20px 20px;background:none;border-radius:0}
  .bnotch::before,.bnotch::after{display:none}
  .bnotch h2,.bnotch .bmeta{padding-left:0}
}
/* the dark card stays black in both modes */
.bpc-dk{background:#0a0a0a;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.bpc-dk .bmeta,.bpc-dk .bmeta b,.bpc-dk h2{color:#fff}
/* a read time never splits from its number */
.brt,.blm{white-space:nowrap}
/* categories: two rows first, the rest behind "Show all categories"; on a phone they wrap too, no sideways scroll */
.bcat[hidden]{display:none}
.bcmore{margin-top:12px;appearance:none;border:0;background:none;padding:4px 0;cursor:pointer;font:500 14px/1.3 var(--body);color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.bcmore[hidden]{display:none}
.bcmore:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
@media (max-width:620px){.bcats{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}
/* grid cards: the category on one line, the read time under it, so neither ever breaks */
.bgc .bmeta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgc .bmeta .brt{display:block;margin-top:2px}

/* ---- post header picture (the same design as the social image), used wherever a post is linked ---- */
.bha{container-type:inline-size;position:relative;display:block;width:100%;aspect-ratio:1200/630;overflow:hidden;isolation:isolate;background:#0a0a0a;color:#fff;font-family:var(--head)}
.bha::before,.bpc-dk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:14px 14px;-webkit-mask-image:radial-gradient(70% 90% at 80% 28%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 80% 28%,#000,transparent 75%)}
.bha::after,.bpc-dk::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 60% at 78% 34%,rgba(236,104,44,.34),transparent 72%)}
.bha-l{position:absolute;left:6cqw;top:5.6cqw;display:block;height:2.9cqw}.bha-l img{display:block;height:100%;width:auto}
.bha-c{position:absolute;left:6cqw;top:14.6cqw;font:600 1.8cqw/1 var(--head);letter-spacing:-.01em;white-space:nowrap}
.bha-t{position:absolute;left:6cqw;right:8cqw;top:18.4cqw;font:600 5.2cqw/1.06 var(--head);letter-spacing:-.035em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bha-t.m{font-size:4.7cqw}.bha-t.s{font-size:4cqw}
.bha-a{position:absolute;left:6cqw;bottom:5.4cqw;display:flex;align-items:center;gap:1.6cqw;font:500 2cqw/1 var(--head);white-space:nowrap}
.bha-a i{display:grid;place-items:center;width:4.2cqw;height:4.2cqw;border-radius:50%;background:var(--orange);color:#0a0a0a;font:600 1.5cqw/1 var(--head);font-style:normal}
/* grid cards */
.bgc .bha{border-bottom:1px solid var(--line)}
/* featured card: the picture fills the top, the notch keeps the title */
.bpc-feat>.bha{position:absolute;left:5%;top:5%;width:90%;height:62%;aspect-ratio:auto;border-radius:16px;box-shadow:0 0 0 1px var(--line),0 24px 40px -22px rgba(0,0,0,.4)}
.bpc-feat>.bha .bha-t{font-size:4.6cqw}
/* image card */
.bpc-img>.bha{position:absolute;left:16px;right:16px;top:16px;width:auto;border-radius:12px}
/* dark card: the card itself is the header design */
.bpc-dk{isolation:isolate}
.bpc-dk>.bha-l{position:relative;left:auto;top:auto;height:18px;margin-bottom:16px}
.bpc-dk>.bha-a{position:absolute;left:18px;bottom:20px;gap:10px;font-size:13.5px;color:#fff}
.bpc-dk>.bha-a i{width:28px;height:28px;font-size:10.5px}
@media (max-width:899px){
  .bpc-feat>.bha{height:54%}
  .bpc-img>.bha{position:relative;left:auto;right:auto;top:auto;width:calc(100% - 40px);margin:20px 20px 0}
  .bpc-dk{padding-bottom:70px}
}
@media (max-width:620px){
  .bpc-feat>.bha{position:relative;left:auto;top:auto;width:calc(100% - 40px);height:auto;aspect-ratio:1200/630;margin:20px 20px 0}
  .bpc-feat>.bha .bha-t{font-size:5.2cqw}
}
/* the logo inside the picture keeps its own shape (card image rules must not stretch it) */
.bha .bha-l img,.bpc-dk>.bha-l img{width:auto!important;height:100%!important;aspect-ratio:auto!important;background:none!important;object-fit:contain;border-radius:0;box-shadow:none}
/* featured: a tall picture, so the type scales up to fill it */
.bpc-feat>.bha .bha-l{top:6cqw;height:4.2cqw}
.bpc-feat>.bha .bha-c{top:17cqw;font-size:2.8cqw}
.bpc-feat>.bha .bha-t{top:21.5cqw;font-size:7.2cqw;-webkit-line-clamp:4}
.bpc-feat>.bha .bha-a{bottom:6cqw;font-size:3cqw;gap:2.2cqw}.bpc-feat>.bha .bha-a i{width:6.4cqw;height:6.4cqw;font-size:2.4cqw}
@media (max-width:620px){
  .bpc-feat>.bha .bha-l{top:5.6cqw;height:2.9cqw}.bpc-feat>.bha .bha-c{top:14.6cqw;font-size:1.8cqw}
  .bpc-feat>.bha .bha-t{top:18.4cqw;font-size:5.2cqw;-webkit-line-clamp:3}
  .bpc-feat>.bha .bha-a{bottom:5.4cqw;font-size:2cqw;gap:1.6cqw}.bpc-feat>.bha .bha-a i{width:4.2cqw;height:4.2cqw;font-size:1.5cqw}
}

/* ---- top of the blog home: the same bento cards as the home page (2026-10-16) ---- */
.bento.bbn{margin-top:28px;grid-template-rows:234px 234px 234px}
.bbn .n1{grid-column:1/3;grid-row:1/3}.bbn .n2{grid-column:3/5;grid-row:1}.bbn .n3{grid-column:3;grid-row:2}.bbn .n4{grid-column:4;grid-row:2}
.bbn .n5{grid-column:1/3;grid-row:3}.bbn .n6{grid-column:3;grid-row:3}.bbn .n7{grid-column:4;grid-row:3}
.bbn .bmeta{font-size:12.5px;margin-bottom:8px}
.bbn .bc.l h3{font-size:24px;max-width:440px}
.bbn .l .vis{top:auto;height:250px}
.bbn .m .tx{width:46%}
.bbn .s .tx{padding-right:34px}
.bbn .pane{background:transparent}
.bbn .vis .bha{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:12px}
.bbn .m .vis .bha .bha-t{font-size:6.6cqw}.bbn .m .vis .bha .bha-c{font-size:2.6cqw;top:17cqw}.bbn .m .vis .bha .bha-t{top:22cqw}
.bbn .m .vis .bha .bha-l{height:4.2cqw;top:7cqw}.bbn .m .vis .bha .bha-a{font-size:3cqw;bottom:7cqw;gap:2.2cqw}.bbn .m .vis .bha .bha-a i{width:6.2cqw;height:6.2cqw;font-size:2.3cqw}
/* orange and black cards, as on the home page */
.bbn .bc.or{background:var(--orange)}.bbn .bc.or h3,.bbn .bc.or .bmeta,.bbn .bc.or .bmeta b{color:#0a0a0a}
.bbn .bc.or .go{background:#0a0a0a;color:#fff}.bbn .bc.or:hover .go,.bbn .bc.or:focus-visible .go{background:#fff;color:#0a0a0a}
.bbn .bc.dk{background:#0a0a0a;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 18px 36px -28px rgba(0,0,0,.4)}
.bbn .bc.dk h3,.bbn .bc.dk .bmeta,.bbn .bc.dk .bmeta b{color:#fff}
.bbn .bc.dk .go{background:#fff;color:#0a0a0a}.bbn .bc.dk:hover .go,.bbn .bc.dk:focus-visible .go{background:var(--orange);color:#0a0a0a}
/* the category card */
.bbn .n7 p{margin-top:6px}
.bbn .n7 .vis{left:14px;right:14px;bottom:14px;top:auto;height:auto}
.bnchips{display:flex;flex-wrap:wrap;gap:5px}
.bnchips span{padding:5px 9px;border-radius:999px;background:var(--inset);font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap}
@media (max-width:900px){.bbn .bc{grid-column:auto!important;grid-row:auto!important}.bbn .bc.m,.bbn .bc.l{grid-column:1/-1!important}.bento.bbn{grid-template-rows:none}}
@media (max-width:560px){
  .bbn .l .vis{height:200px}.bbn .m .vis{height:180px}
  .bbn .n7 .vis{position:relative}
  .bbn .bc.s{min-height:0!important}
}
/* small cards: the date sits under the category, never wrapping mid-line */
.bbn .s .bmeta b{display:block}
.bbn .n7 .vis{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px}

/* ---- category grid: each card is the header picture alone; the title lives only inside it ---- */
.bgrid5{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bgc{background:#0a0a0a;box-shadow:0 0 0 1px var(--line),0 12px 28px -22px rgba(0,0,0,.4)}
.bgc>.bha{padding:0;aspect-ratio:4/3;border:0}
.bgc .bha-l{top:7cqw;left:7cqw;height:4.6cqw}
.bgc .bha-c{top:17cqw;left:7cqw;font-size:3.6cqw}
.bgc .bha-t,.bgc .bha-t.m,.bgc .bha-t.s{top:23cqw;left:7cqw;right:7cqw;font-size:7.6cqw;line-height:1.1;letter-spacing:-.03em;-webkit-line-clamp:3}
.bgc .bha-t.s{font-size:6.8cqw}
.bgc .bha-a{left:7cqw;bottom:7cqw;font-size:3.6cqw;gap:2.4cqw;color:rgba(255,255,255,.88)}
.bgc .bha-a i{width:7cqw;height:7cqw;font-size:2.8cqw}
.bgc .bha-a em{font-style:normal;color:rgba(255,255,255,.6)}
.bgmore{margin-top:18px;display:flex;justify-content:center}.bgmore [hidden]{display:none}
@media (max-width:899px){.bgrid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.bgrid5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.bgrid5{grid-template-columns:1fr}.bgc>.bha{aspect-ratio:1200/630}.bgc .bha-t,.bgc .bha-t.m,.bgc .bha-t.s{font-size:5.6cqw;top:17cqw;-webkit-line-clamp:3}.bgc .bha-c{top:12cqw;font-size:2.6cqw}.bgc .bha-l{top:5cqw;height:3.4cqw}.bgc .bha-a{bottom:5cqw;font-size:2.8cqw}.bgc .bha-a i{width:5.4cqw;height:5.4cqw;font-size:2.1cqw}}

/* three header cards in a row at most, then the rest as title lines */
.bgrid5{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bgc>.bha{aspect-ratio:16/11}
.bgc .bha-t,.bgc .bha-t.m,.bgc .bha-t.s{font-size:7.4cqw;line-height:1.12}
.bgc .bha-t.s{font-size:6.6cqw}
.blines{margin-top:14px}.blines[hidden]{display:none}
.blr.nd{grid-template-columns:minmax(0,1fr) auto 18px}
@media (max-width:899px){.bgrid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.bgrid5{grid-template-columns:1fr}.bgc>.bha{aspect-ratio:1200/630}.bgc .bha-t,.bgc .bha-t.m,.bgc .bha-t.s{font-size:5.6cqw;top:17cqw;-webkit-line-clamp:3}.bgc .bha-c{top:12cqw;font-size:2.6cqw}.bgc .bha-l{top:5cqw;height:3.4cqw}.bgc .bha-a{bottom:5cqw;font-size:2.8cqw}.bgc .bha-a i{width:5.4cqw;height:5.4cqw;font-size:2.1cqw}}
@media (max-width:620px){.blr.nd{grid-template-columns:minmax(0,1fr) 18px}.blr.nd b,.blr.nd .blm{grid-column:1}.blr.nd svg{grid-column:2;grid-row:1/3}}
/* blog bento: the plain white cards carry the same faint dot pattern, fading out from one corner */
.bbn .bc:not(.or):not(.dk):not(.l):not(.m)::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.5px);background-size:14px 14px;background-position:7px 7px;-webkit-mask-image:radial-gradient(90% 80% at 100% 100%,#000,transparent 75%);mask-image:radial-gradient(90% 80% at 100% 100%,#000,transparent 75%)}
/* finer dot grid on the plain white cards */
.bbn .bc:not(.or):not(.dk):not(.l):not(.m)::before{background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 22%,transparent) .8px,transparent 1.2px);background-size:11px 11px;background-position:0 0}

.bc .bex{margin-top:12px;max-width:540px;font-size:16px;line-height:1.55;color:var(--text)}
@media (max-width:700px){.bc .bex{font-size:15px}}