/* Blog listing pages, design v2 (2026-09-18): /blog/, /blog/?page=N, /blog/<category>/, /blog/tag/<id>/.
   Served as /inc/templates/current/petronella/css/blog-home-v2.css and loaded ONLY by blog-home.tpl.
   Single posts (blog-post.tpl) keep loading blog.css and never load this file. On top of that, every
   selector below contains the class .bh2, which exists only in blog-home.tpl, so even if this file were
   loaded on a post by mistake not one rule could match (proof: SELECTOR-ISOLATION.md).
   Same family as the podcast hub (ea-hub.css): cyan #00A9E0 on the site's near-black, Manrope through
   --font-heading / --font-body, glass panels, image-led cards, calm spacing.

   Site CSS traps this file is written around (first documented in ea-episode.css / ea-hub.css):
   1. homepage.css forces `.petronella-content * {color:#f0f0f0 !important}`; `.ptg-embed` is the hatch,
      so the wrapper is <div class="ptg-embed bh2">.
   2. master.css sets `#content h1..h6, #content p {padding:10px}`, `#content ul,ol {margin-left:20px;
      padding-left:20px}`, `#content ul li {list-style:inside}`, `#content img {margin:auto !important;
      display:block}`; the template inlines `#content h1 {font-size:36px !important}`, `#content h2
      {font-size:32px !important}` and an underline on every `#content a`. All at ID specificity, so the
      overrides are written `#content .bh2 ...`, with !important only where the site used it first.
      master.css also has a bare `img {height:auto !important}`: a cover-cropped thumbnail needs
      `height:100% !important` or it stops filling its box (the v1 "gap on the right" bug).
   3. The site owns the bottom edge on phones (sticky call bar, chat bubble, accessibility button).
      Nothing here is fixed or sticky.
   homepage.css and custom.css arrive async, so nothing here depends on them. */

.bh2{--bh2-cyan:#00A9E0;--bh2-cyan-hi:#5fd0f5;--bh2-cyan-soft:rgba(0,169,224,.14);--bh2-ink:#f0f0f0;
  --bh2-text:rgba(240,240,240,.82);--bh2-dim:rgba(240,240,240,.62);--bh2-line:rgba(255,255,255,.09);
  --bh2-line-2:rgba(255,255,255,.16);--bh2-panel:#0e1526;--bh2-panel-hi:#121b31;--bh2-bg:#0a0a0f;
  --bh2-ease:cubic-bezier(.2,.8,.2,1);--bh2-r:18px;
  position:relative;text-align:left;color:var(--bh2-text);background:var(--bh2-bg);
  font-family:var(--font-body,'Manrope',system-ui,sans-serif);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
.bh2 *,.bh2 *::before,.bh2 *::after{box-sizing:border-box}
#content:has(> .bh2){background-color:transparent !important}
/* The site header is position:static at every width (measured 2026-09-18, tools/probe_header.py), yet
   #content_container still carries the 110px / 56px top padding of the old fixed header: a dead band above
   every page. Listing pages reclaim it so posts start above the fold. Scoped with :has(.bh2), so it can only
   ever apply to a page that renders blog-home.tpl. Delete this one rule to get the band back. */
#content_container:has(.bh2){padding-top:0 !important}

/* ---- put the page back on its own grid (trap 2) ---- */
#content .bh2 h1,#content .bh2 h2,#content .bh2 h3,#content .bh2 p{padding:0;margin:0}
#content .bh2 ul{margin:0;padding:0;list-style:none}
#content .bh2 li{list-style:none;margin:0;padding:0}
#content .bh2 li::before{content:none}
#content .bh2 img{margin:0 !important;padding:0;max-width:100%;border:0}
#content .bh2 h1,#content .bh2 h2,#content .bh2 h3{font-family:var(--font-heading,'Manrope',system-ui,sans-serif);
  color:var(--bh2-ink);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
#content .bh2 p,#content .bh2 li{font-size:1rem;line-height:1.65}
#content .bh2 a{color:var(--bh2-cyan);text-decoration:none !important;transition:color .15s}
#content .bh2 a:hover{color:var(--bh2-cyan-hi)}
.bh2 :focus-visible{outline:2px solid var(--bh2-cyan);outline-offset:3px;border-radius:10px}
.bh2 .bh2-c{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);position:relative;z-index:1}
.bh2 .bh2-i{flex:none;width:20px;height:20px}
.bh2 .bh2-dot{flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bh2-cyan);
  box-shadow:0 0 0 4px var(--bh2-cyan-soft)}
#content .bh2 .bh2-label{display:flex;align-items:center;gap:12px;margin:0;font:700 .75rem/1 var(--font-body,inherit);
  letter-spacing:.18em;text-transform:uppercase;color:var(--bh2-cyan)}
.bh2 .bh2-label::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--bh2-cyan)}

/* ---- buttons ---- */
#content .bh2 a.bh2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;
  border-radius:14px;border:1px solid var(--bh2-line-2);background:rgba(255,255,255,.045);color:var(--bh2-ink);
  font:700 .97rem/1.2 var(--font-body,inherit);letter-spacing:-.005em;white-space:nowrap;
  transition:transform .2s var(--bh2-ease),border-color .2s,background .2s,box-shadow .2s}
#content .bh2 a.bh2-btn:hover{border-color:var(--bh2-cyan);background:var(--bh2-cyan-soft);color:var(--bh2-ink);transform:translateY(-2px)}
#content .bh2 a.bh2-btn--main{background:var(--bh2-cyan);border-color:var(--bh2-cyan);color:#04131b;box-shadow:0 10px 30px rgba(0,169,224,.26)}
#content .bh2 a.bh2-btn--main:hover{background:#2cc0f2;border-color:#2cc0f2;color:#04131b;box-shadow:0 14px 38px rgba(0,169,224,.38)}

/* ---- hero ---- */
.bh2 .bh2-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,4vw,52px) 0 clamp(30px,4vw,56px);
  border-bottom:1px solid var(--bh2-line)}
.bh2 .bh2-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(60% 85% at 10% 0%,rgba(0,169,224,.22),transparent 62%),
    radial-gradient(42% 70% at 96% 28%,rgba(86,78,214,.16),transparent 66%),linear-gradient(180deg,#0b1324 0%,var(--bh2-bg) 100%)}
.bh2 .bh2-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(65% 90% at 72% 42%,#000 0,transparent 78%);
  mask-image:radial-gradient(65% 90% at 72% 42%,#000 0,transparent 78%)}
.bh2 .bh2-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
#content .bh2 .bh2-eyebrow{display:inline-flex;justify-self:start;align-items:center;gap:10px;margin:0 0 18px;padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(11,13,18,.5);backdrop-filter:blur(8px);
  font:600 .74rem/1 var(--font-body,inherit);letter-spacing:.15em;text-transform:uppercase;color:var(--bh2-ink)}
#content .bh2 h1.bh2-h1{display:block;margin:0;padding:0 0 .08em;text-align:left;font-size:clamp(2.35rem,5.2vw,3.5rem) !important;
  line-height:1.05;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(100deg,#fff 30%,#9fe3fb 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
#content .bh2 p.bh2-hero__sub{max-width:54ch;margin:14px 0 0;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.65;color:var(--bh2-text)}
.bh2 .bh2-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media(max-width:479px){.bh2 .bh2-actions{display:grid;grid-template-columns:1fr}}
/* listing pages without a lead post: a slim band, copy left, actions right */
.bh2:not(.bh2--front) .bh2-hero{padding:clamp(22px,2.6vw,32px) 0 clamp(22px,2.6vw,30px)}
@media(max-width:899px){.bh2:not(.bh2--front) .bh2-actions{margin-top:18px}}
#content .bh2:not(.bh2--front) .bh2-eyebrow{margin-bottom:14px}
@media(min-width:900px){
  .bh2:not(.bh2--front) .bh2-hero__copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
  .bh2:not(.bh2--front) .bh2-hero__copy > *{grid-column:1}
  .bh2:not(.bh2--front) .bh2-actions{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0 0 4px}
}
@media(min-width:1000px){
  .bh2--front .bh2-hero__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(36px,4.5vw,72px)}
  #content .bh2--front h1.bh2-h1{font-size:clamp(2.8rem,4.9vw,4.3rem) !important}
}

/* ---- shared card parts: thumbnail, placeholder, meta, tags ---- */
#content .bh2 a.bh2-thumb{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:#0d1730;color:var(--bh2-ink)}
#content .bh2 .bh2-thumb img{position:absolute;inset:0;display:block;width:100%;height:100% !important;object-fit:cover;
  transition:transform .6s var(--bh2-ease)}
.bh2 .bh2-thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);pointer-events:none}
/* a post with no image: the category set large on a tile. Pure CSS, so it cannot break. */
.bh2 .bh2-ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(16px,6%,28px);
  background:radial-gradient(90% 120% at 12% 0%,rgba(0,169,224,.32),transparent 60%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(135deg,#101b38,#0a0f1d);
  font:800 clamp(1.5rem,3.2vw,2.3rem)/1.02 var(--font-heading,'Manrope',system-ui,sans-serif);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(159,227,251,.6);overflow-wrap:anywhere}
#content .bh2 p.bh2-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:600 .74rem/1.3 var(--font-body,inherit);
  letter-spacing:.09em;text-transform:uppercase;color:var(--bh2-dim)}
.bh2 .bh2-cat,.bh2 .bh2-flag{color:var(--bh2-cyan-hi)}
.bh2 .bh2-flag{display:inline-flex;align-items:center;gap:9px;letter-spacing:.15em}
.bh2 .bh2-cat + .bh2-date::before,.bh2 .bh2-flag + .bh2-date::before{content:"";display:inline-block;width:4px;height:4px;
  margin:0 10px 2px 0;border-radius:50%;background:rgba(240,240,240,.35);vertical-align:middle}
/* every tag link stays in the HTML; one row shows (about three), the rest open up on keyboard focus.
   The link box is 40px tall for touch, the visible pill inside it is smaller. */
#content .bh2 ul.bh2-tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:0 6px;max-height:40px;overflow:hidden;margin:0 -2px}
#content .bh2 ul.bh2-tags:focus-within{max-height:none;overflow:visible}
#content .bh2 a.bh2-tag{display:inline-flex;align-items:center;min-height:40px;min-width:40px;justify-content:center;border-radius:999px;outline-offset:-4px}
.bh2 .bh2-tag span{display:block;padding:5px 11px;border-radius:999px;border:1px solid var(--bh2-line-2);background:rgba(255,255,255,.04);
  font:600 .75rem/1.2 var(--font-body,inherit);color:var(--bh2-text);white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.bh2 .bh2-tag:hover span{border-color:var(--bh2-cyan);background:var(--bh2-cyan-soft);color:#fff}
/* the whole card is the click target; the title carries the real link */
.bh2 .bh2-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--bh2-r)}
#content .bh2 a.bh2-link{color:var(--bh2-ink)}
#content .bh2 a.bh2-link:focus-visible{outline:none}
/* the card clips its children (rounded image), so the ring is drawn just inside the card edge */
.bh2 .bh2-link:focus-visible::after{outline:3px solid var(--bh2-cyan-hi);outline-offset:-4px;box-shadow:inset 0 0 0 6px rgba(4,19,27,.55)}

/* ---- lead post (front page only) ---- */
.bh2 .bh2-lead{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--bh2-r);overflow:hidden;
  background:linear-gradient(180deg,rgba(18,27,49,.96),rgba(12,18,34,.96));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 90px rgba(0,169,224,.1);transition:border-color .25s,transform .35s var(--bh2-ease)}
.bh2 .bh2-lead:hover{border-color:rgba(0,169,224,.6);transform:translateY(-3px)}
.bh2 .bh2-lead:hover .bh2-thumb img,.bh2 .bh2-card:hover .bh2-thumb img{transform:scale(1.04)}
.bh2 .bh2-lead__body{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px) clamp(12px,1.6vw,18px)}
#content .bh2 h2.bh2-lead__title{font-size:clamp(1.3rem,2vw,1.7rem) !important;line-height:1.22;font-weight:800;letter-spacing:-.03em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#content .bh2 p.bh2-lead__desc{color:var(--bh2-text);font-size:.98rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bh2 .bh2-lead:hover .bh2-link,.bh2 .bh2-card:hover .bh2-link{color:var(--bh2-cyan-hi)}
@media(min-width:640px) and (max-width:999px){
  /* tablets: the lead runs sideways so its image does not swallow the screen */
  .bh2 .bh2-lead{flex-direction:row;align-items:stretch}
  #content .bh2 a.bh2-lead__thumb{flex:0 0 48%;aspect-ratio:auto;min-height:300px}
  .bh2 .bh2-lead__body{justify-content:center}
}

/* ---- categories + topics ---- */
.bh2 .bh2-filter{padding:clamp(18px,2.4vw,28px) 0 0}
.bh2 .bh2-filter__head{display:flex;align-items:center;min-height:44px;margin:0 0 6px}
#content .bh2 ul.bh2-chips{display:flex;flex-wrap:wrap;gap:8px}
#content .bh2 a.bh2-chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;
  border:1px solid var(--bh2-line-2);background:rgba(255,255,255,.035);color:var(--bh2-ink);white-space:nowrap;
  font:600 .92rem/1 var(--font-body,inherit);transition:border-color .2s,background .2s,color .2s}
#content .bh2 a.bh2-chip:hover{border-color:var(--bh2-cyan);background:var(--bh2-cyan-soft);color:#fff}
#content .bh2 a.bh2-chip.is-active{background:var(--bh2-cyan);border-color:var(--bh2-cyan);color:#04131b}
.bh2 .bh2-chip__n{font-size:.78rem;font-weight:700;color:var(--bh2-dim);font-variant-numeric:tabular-nums}
.bh2 .bh2-chip.is-active .bh2-chip__n{color:rgba(4,19,27,.72)}
@media(max-width:699px){
  /* phones: one swipeable row instead of five wrapped ones; the fade says there is more */
  .bh2 .bh2-scroll{margin:0 calc(-1 * clamp(20px,4vw,48px));overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%)}
  .bh2 .bh2-scroll::-webkit-scrollbar{display:none}
  #content .bh2 .bh2-scroll ul.bh2-chips{flex-wrap:nowrap;width:max-content;padding:4px 56px 4px clamp(20px,4vw,48px)}
  #content .bh2 a.bh2-chip{min-height:44px}
}
/* the toggle sits on the "Categories" label row (top right); its panel opens under the category chips */
.bh2 .bh2-topics__sum{position:absolute;top:0;right:clamp(20px,4vw,48px);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;cursor:pointer;list-style:none;
  font:700 .92rem/1 var(--font-body,inherit);color:var(--bh2-cyan);border-radius:10px;transition:color .15s}
.bh2 .bh2-topics__sum::-webkit-details-marker{display:none}
.bh2 .bh2-topics__sum:hover{color:var(--bh2-cyan-hi)}
.bh2 .bh2-topics__chev{width:18px;height:18px;transition:transform .25s var(--bh2-ease)}
.bh2 .bh2-topics[open] .bh2-topics__chev{transform:rotate(180deg)}
#content .bh2 ul.bh2-chips--topics{gap:6px;margin-top:14px;padding:16px;border-radius:16px;border:1px solid var(--bh2-line);background:rgba(255,255,255,.025)}
#content .bh2 a.bh2-chip--topic{min-height:40px;padding:0 14px;font-size:.86rem;font-weight:600;background:none;color:var(--bh2-text)}

/* ---- the list ---- */
.bh2 .bh2-list{padding:clamp(24px,3vw,38px) 0 clamp(40px,5vw,72px)}
.bh2 .bh2-list__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin:0 0 clamp(18px,2.4vw,28px)}
#content .bh2 h2.bh2-h2{font-size:clamp(1.4rem,2.4vw,1.95rem) !important;line-height:1.15;font-weight:800;letter-spacing:-.03em}
#content .bh2 p.bh2-list__side{display:flex;align-items:center;gap:14px;font-size:.92rem;color:var(--bh2-dim)}
.bh2 .bh2-pageno{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--bh2-line-2);
  font:700 .74rem/1 var(--font-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--bh2-ink)}
#content .bh2 a.bh2-back{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
#content .bh2 ul.bh2-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,26px)}
@media(min-width:640px){#content .bh2:not(.bh2--front) ul.bh2-grid{grid-auto-rows:1fr}}
#content .bh2 li.bh2-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--bh2-r);overflow:hidden;
  background:var(--bh2-panel);border:1px solid var(--bh2-line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .35s var(--bh2-ease),border-color .25s,box-shadow .35s,background .25s}
#content .bh2 li.bh2-card:hover{transform:translateY(-4px);border-color:rgba(0,169,224,.55);background:var(--bh2-panel-hi);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.bh2 .bh2-card__body{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 20px 10px}
#content .bh2 h3.bh2-card__title{font-size:1.12rem;line-height:1.32;font-weight:700;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#content .bh2 p.bh2-card__desc{color:var(--bh2-dim);font-size:.94rem;line-height:1.58;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#content .bh2 .bh2-card__body ul.bh2-tags,#content .bh2 .bh2-lead__body ul.bh2-tags{margin-top:auto}
.bh2 .bh2-card__body:not(:has(.bh2-tags)){padding-bottom:20px}
#content .bh2 p.bh2-empty{padding:40px 0;color:var(--bh2-text)}
@media(min-width:640px){
  #content .bh2 ul.bh2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* front page: 11 cards follow the lead. The first runs full width so ten remain (no orphan). */
  #content .bh2--front li.bh2-card:first-child{grid-column:1 / -1;flex-direction:row}
  #content .bh2--front li.bh2-card:first-child > a.bh2-thumb{flex:0 0 50%;aspect-ratio:auto;min-height:100%}
  #content .bh2--front li.bh2-card:first-child .bh2-card__body{justify-content:center;padding:22px 26px 12px}
}
@media(min-width:1000px){
  #content .bh2 ul.bh2-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  #content .bh2 li.bh2-card{grid-column:span 2}
  /* front page: two larger cards, then nine (3 x 3) */
  #content .bh2--front li.bh2-card:first-child,#content .bh2--front li.bh2-card:nth-child(2){grid-column:span 3;flex-direction:column}
  #content .bh2--front li.bh2-card:first-child > a.bh2-thumb{flex:none;aspect-ratio:16/9;min-height:0}
  #content .bh2--front li.bh2-card:first-child .bh2-card__body{justify-content:flex-start;padding:20px 24px 10px}
  #content .bh2--front li.bh2-card:nth-child(-n+2) h3.bh2-card__title{font-size:1.32rem;line-height:1.26;letter-spacing:-.025em}
}

/* ---- pagination (the <li> markup comes from Blog.class.php) ---- */
.bh2 .bh2-pager{margin-top:clamp(32px,4.5vw,56px)}
#content .bh2 ul.bh2-pager__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#content .bh2 .bh2-pager__list li{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:0;
  border-radius:13px;border:1px solid transparent;font:700 .95rem/1 var(--font-body,inherit);color:var(--bh2-dim);font-variant-numeric:tabular-nums}
#content .bh2 .bh2-pager__list li a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:0 15px;
  border-radius:13px;border:1px solid var(--bh2-line-2);background:rgba(255,255,255,.035);color:var(--bh2-ink);white-space:nowrap;
  transition:border-color .2s,background .2s,transform .2s var(--bh2-ease)}
#content .bh2 .bh2-pager__list li a:hover{border-color:var(--bh2-cyan);background:var(--bh2-cyan-soft);color:#fff;transform:translateY(-2px)}
@media(max-width:479px){
  #content .bh2 ul.bh2-pager__list{gap:6px}
  #content .bh2 .bh2-pager__list li,#content .bh2 .bh2-pager__list li a{min-width:42px;min-height:44px}
  #content .bh2 .bh2-pager__list li a{padding:0 11px}
}
#content .bh2 .bh2-pager__list li.active{background:var(--bh2-cyan);border-color:var(--bh2-cyan);color:#04131b}

/* ---- podcast cross-promo ---- */
.bh2 .bh2-promo{padding:0 0 clamp(48px,6vw,88px)}
.bh2 .bh2-promo__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;
  padding:clamp(20px,3vw,32px);border-radius:22px;border:1px solid var(--bh2-line-2);
  background:radial-gradient(70% 140% at 0% 0%,rgba(0,169,224,.18),transparent 60%),linear-gradient(135deg,#0f1930,#0b101f)}
#content .bh2 img.bh2-promo__art{display:block;justify-self:start;width:88px;height:88px !important;border-radius:16px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 16px 40px rgba(0,0,0,.5)}
#content .bh2 h2.bh2-promo__h{margin:12px 0 0;font-size:clamp(1.25rem,2.1vw,1.6rem) !important;line-height:1.2;font-weight:800;letter-spacing:-.03em}
#content .bh2 p.bh2-promo__p{margin:8px 0 0;max-width:62ch;color:var(--bh2-text);font-size:.98rem}
@media(min-width:760px){
  .bh2 .bh2-promo__card{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,36px)}
  #content .bh2 img.bh2-promo__art{width:120px;height:120px !important;border-radius:20px}
}

@media(prefers-reduced-motion:no-preference){
  .bh2 .bh2-hero__copy > *,.bh2 .bh2-lead{animation:bh2-rise .7s var(--bh2-ease) both}
  .bh2 .bh2-hero__copy > :nth-child(2){animation-delay:.06s}
  .bh2 .bh2-hero__copy > :nth-child(3){animation-delay:.12s}
  .bh2 .bh2-hero__copy > :nth-child(4){animation-delay:.18s}
  .bh2 .bh2-lead{animation-delay:.16s}
}
@keyframes bh2-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bh2 *,.bh2 *::before,.bh2 *::after{transition:none !important;animation:none !important}
}
@media(forced-colors:active){
  #content .bh2 li.bh2-card,.bh2 .bh2-lead,.bh2 .bh2-promo__card,.bh2 .bh2-tag span{border:1px solid CanvasText}
  #content .bh2 h1.bh2-h1{background:none;color:CanvasText;-webkit-text-fill-color:currentColor}
  .bh2 .bh2-ph{color:CanvasText;-webkit-text-stroke:0}
}
@media print{.bh2 .bh2-filter,.bh2 .bh2-promo,.bh2 .bh2-actions{display:none}}