/* The podcast and blog pages. Ported from the prototype's styles.css (L481-506, L878-884,
   L1341-1412, L3410-3430) and podcast/py-pod-11-jeremy-tammik.html, hex swapped for brand tokens.
   Every class is prefixed bl-; the shell's own (.sec, .wrap, .card, .badge, .pill, .cdot) are used
   as they are. Breakpoints are container queries over the site window, never media queries. */

/* ---------- the two heroes ---------- */
.bl-by{color:var(--faint);font-weight:600}

/* ---------- section head with the view toggle ---------- */
.bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.bl-head h2{margin-bottom:10px}
.bl-h-flat{margin-bottom:0}
.bl-head .sec-sub{margin:0}
.bl-count{flex:none;font:500 11px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}

/* ---------- cards: one grid, two kinds, the video id decides which ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.bl-grid[hidden],.bl-list[hidden]{display:none}   /* display:grid would beat the hidden attribute */
.bl-card{display:block;text-decoration:none;color:inherit;min-width:0}
.bl-thumb{position:relative;display:block;aspect-ratio:16/9;border:1px solid var(--hl1);
  border-radius:var(--rc);overflow:hidden;background:var(--s2)}
.bl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* lightly calmed at rest, never gray: full grayscale reads as "unavailable" (Erik 2026-08-28) */
.bl-grid .bl-thumb img{filter:grayscale(.28) brightness(.94);transition:filter .3s ease}
.bl-grid .bl-card:hover .bl-thumb img{filter:grayscale(0) brightness(1.04)}
.bl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;
  background:var(--s1);border:1px solid var(--hl3);opacity:0;transition:opacity .16s,background .16s}
.bl-play::before{content:"";position:absolute;left:19px;top:15px;border-left:12px solid var(--ink);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.bl-card:hover .bl-play,.bl-hlcard:hover .bl-play{opacity:1}
.bl-len{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);border:1px solid var(--hl2);
  color:var(--ink);font:500 10px/1 var(--fm);padding:4px 7px;border-radius:5px;letter-spacing:.06em;z-index:2}
.bl-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.bl-date{font:500 10px/1 var(--fm);letter-spacing:.1em;color:var(--faint)}
.bl-chip{font:600 9.5px/1 var(--fm);letter-spacing:.16em;color:var(--dim);font-style:normal}
.bl-card h3{font:500 .95rem/1.4 var(--fd);margin:12px 0 8px}
.bl-card p{font:400 .85rem/1.5 var(--fd);color:var(--dim)}
.bl-note{display:inline-flex;align-items:center;gap:8px;font:600 9.5px/1 var(--fm);
  letter-spacing:.16em;color:var(--faint)}
.bl-card:hover .bl-thumb{border-color:var(--hl3)}
.bl-card:hover .bl-note{color:var(--dim)}
/* a written card has no picture, so its own column keeps the row heights even */
.bl-writ{display:flex;flex-direction:column;border:1px solid var(--hl1);border-radius:var(--rc);
  padding:20px;background:var(--s1);transition:border-color .16s}
.bl-writ:hover{border-color:var(--hl3)}
.bl-writ .bl-meta{margin-top:0}
.bl-writ h3{margin:14px 0 8px}
.bl-writ p{flex:1}
.bl-writ .bl-note{margin-top:16px}

/* ---------- Expert's Highlights: two identical groups, the track drifts -50% and loops ---------- */
.bl-hl{overflow:hidden;min-width:0}
.bl-hl-track{display:flex;gap:16px;width:max-content;animation:bl-drift 48s linear infinite}
.bl-hl:hover .bl-hl-track,.bl-hl:focus-within .bl-hl-track{animation-play-state:paused}
/* -50% lands 8px short of the second group's start: half the 16px gap between the groups */
@keyframes bl-drift{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.bl-hl-track{animation:none}}
.bl-hlcard{display:block;width:min(370px,80cqw);flex:none;text-decoration:none;color:inherit;
  background:var(--s1);border:1px solid var(--hl1);border-radius:var(--rc);padding:14px;transition:border-color .16s}
.bl-hlcard:hover{border-color:var(--hl3)}
.bl-hlcard .bl-thumb{border-radius:9px}
/* the guest tag is a deliberate label, not a link: white, mono caps, centred over the card */
.bl-hltag{display:block;text-align:center;font:600 11px/1 var(--fm);color:var(--ink);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.bl-hlmeta{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:14px;min-width:0}
.bl-hlmeta b{font:600 14.5px/1 var(--fd)}
.bl-hlcard h3{font:500 .98rem/1.45 var(--fd);color:var(--dim);margin-top:8px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.bl-hlcard:hover h3{color:var(--ink)}

/* ---------- grid or list toggle ---------- */
.bl-view{display:flex;gap:6px;flex:none}
.bl-vbtn{width:34px;height:34px;display:grid;place-items:center;background:var(--s1);
  border:1px solid var(--hl2);border-radius:8px;color:var(--faint);cursor:pointer;
  transition:border-color .16s,color .16s,background .16s}
.bl-vbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.bl-vbtn svg rect[width="2"]{fill:currentColor;stroke:none}
.bl-vbtn:hover{border-color:var(--hl3);color:var(--dim)}
.bl-vbtn.on{color:var(--ink);border-color:var(--hl3);background:var(--s3)}

/* ---------- the list view ---------- */
.bl-list{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--hl1);
  border-radius:var(--rc);overflow:hidden}
.bl-row{display:flex;align-items:center;gap:16px;padding:9px 16px;border-bottom:1px solid var(--hl1);
  text-decoration:none;color:inherit;min-width:0;transition:background .16s}
.bl-row:last-child{border-bottom:none}
.bl-row:hover{background:var(--s2)}
.bl-n{flex:none;width:44px;font:700 20px/1 var(--fm);font-variant-numeric:tabular-nums;
  color:var(--faint);text-align:right;padding-right:2px}
.bl-row:hover .bl-n{color:var(--acc)}
.bl-rthumb{flex:none;width:112px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  border:1px solid var(--hl1);background:var(--s2)}
.bl-rthumb img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .3s ease}
.bl-row:hover .bl-rthumb img{filter:brightness(1.06)}
.bl-rt{flex:1;font:500 13.5px/1.4 var(--fd);color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-rg{flex:none;width:150px;font:400 12px/1.3 var(--fd);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-rlen{flex:none;width:62px;font:400 11px/1 var(--fm);color:var(--faint);text-align:right;
  font-variant-numeric:tabular-nums}
.bl-rdate{flex:none;width:70px;font:400 11px/1 var(--fm);color:var(--faint);text-align:right}

/* ---------- the NEXT card: the site's dark dotted card for a poster, white question marks ---------- */
.bl-qq{display:grid;place-items:center;background:radial-gradient(var(--hl2) 1px,transparent 1.3px) 0 0/14px 14px,var(--s1)}
.bl-qq b{font:800 52px/1 var(--fd);letter-spacing:.08em;color:var(--ink)}
.bl-rthumb.bl-qq b{font-size:20px}

/* ---------- one post or episode ---------- */
/* no own max-width: shares .wrap.narrow (780px) like terms, join pages, resources magnet (inbox 0226) */
.bl-back{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--fm);letter-spacing:.1em;
  color:var(--faint);text-decoration:none}
.bl-back:hover{color:var(--acc)}
.bl-mrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.bl-mlen{font:500 11px/1 var(--fm);color:var(--faint);letter-spacing:.08em}
.bl-yt{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--fm);
  letter-spacing:.14em;color:var(--faint);text-decoration:none}
.bl-yt:hover{color:var(--acc)}
.bl-post h1{font:600 1.9rem/1.2 var(--fd);letter-spacing:-.02em;margin-top:18px;text-wrap:balance}
.bl-vid{margin-top:26px;border:1px solid var(--hl2);border-radius:var(--rc);overflow:hidden;background:var(--s1)}
.bl-vid iframe{display:block;width:100%;aspect-ratio:16/9;border:none;background:var(--canvas)}
.bl-vplay{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:none;
  background:var(--s2);cursor:pointer}
.bl-vplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bl-vglyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;
  display:grid;place-items:center;border-radius:50%;background:var(--s1);border:1px solid var(--hl3);
  transition:background .16s,border-color .16s}
.bl-vglyph svg{width:26px;height:26px;fill:var(--ink)}
.bl-vplay:hover .bl-vglyph{background:var(--acc);border-color:var(--acc)}
.bl-vplay:hover .bl-vglyph svg{fill:var(--acc-ink)}

/* the episode spec strip (Erik 2026-09-03), one cell per fact, the last one the YouTube link */
.bl-spec{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  border:1px solid var(--hl2);border-radius:8px;overflow:hidden;background:var(--s1)}
.bl-spec > *{padding:11px 18px 12px;border-right:1px solid var(--hl1);min-width:0;text-decoration:none}
.bl-spec > *:last-child{border-right:none}
.bl-spec b{display:block;font:600 9px/1 var(--fm);letter-spacing:.16em;color:var(--faint);margin-bottom:7px}
.bl-spec span{display:block;font:600 13.5px/1.25 var(--fd);color:var(--ink)}
.bl-spec em{display:block;margin-top:5px;font:500 10px/1.3 var(--fm);letter-spacing:.06em;
  color:var(--acc);font-style:normal}
.bl-spec-yt span{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font:600 11px/1 var(--fm);
  letter-spacing:.14em;padding-top:2px}
.bl-spec-yt:hover span{color:var(--acc)}

.bl-links{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px 18px}
.bl-links a{font:500 12px/1 var(--fm);letter-spacing:.08em;color:var(--dim)}
.bl-links a:hover{color:var(--acc)}

/* the body Erik writes in the CMS: the rule above the post and nothing else. The prose itself is the
   editor's document, painted by app_editor/doc.css for every reader since 0116. */
.bl-body{margin-top:34px;padding-top:26px;border-top:1px solid var(--hl1)}

/* WATCH NEXT: three neighbours of the same kind */
.bl-wnext{margin-top:46px}
.bl-wn-h{font:600 11px/1 var(--fm);letter-spacing:.22em;color:var(--faint);margin-bottom:16px}
.bl-wn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bl-wn-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--hl1);
  border-radius:10px;overflow:hidden;background:var(--s1);transition:border-color .16s}
.bl-wn-card:hover{border-color:var(--hl3)}
.bl-wn-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--hl1)}
.bl-wn-card b{display:block;font:500 .82rem/1.45 var(--fd);color:var(--dim);padding:11px 13px 13px;
  transition:color .16s}
.bl-wn-card:hover b{color:var(--ink)}

/* the GUEST PITCH card under the episodes, Erik's prototype card (0369). The form is app_optin's
   fragment, so these keep the prototype's own names; the fields are the shell's .kf-* parts and the
   sent state is the shell's .cap.ok, as on every capture form */
.bl-pitch{display:flex;flex-direction:column;align-items:center}
/* a width and not a max-width: for staff the form stands in a fit-content box with its pencil, which
   would shrink a max-width card to its inputs; the column above centres either one */
/* the pitch is an application, not a capture line: its labels and long answers read from the left (0511) */
.pod-guest.cap{text-align:left;box-sizing:border-box;width:1050px;max-width:100%;padding:clamp(22px,3cqw,34px)}
.pod-guest h2{margin-bottom:10px}
.pod-guest .pg-sub{margin:0 0 26px;font-size:.95rem}
.pg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.pg-ta{min-height:0;font-size:14px;line-height:1.5;resize:vertical}
/* one full width bar here, where the prototype draws it, unlike the waitlist's auto width button */
.pod-guest .kf-btn{display:block;width:100%;margin-top:6px}
.cap.ok .pg-fields{display:none}
.pod-guest.err .kf-input:invalid,.pod-guest.err [data-email]{border-color:var(--red)}

@container page (max-width:900px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:640px){
  .bl-grid,.bl-wn-grid,.pg-row{grid-template-columns:minmax(0,1fr)}
  .bl-head{flex-direction:column;align-items:flex-start}
  .bl-rg,.bl-rdate{display:none}
  .bl-rthumb{width:88px}
  .bl-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-spec > *{border-bottom:1px solid var(--hl1)}
}
/* a finger needs 40px (0382): the grid and list switch; touch screens under 1100px only */
@media (max-width:1100px) and (pointer:coarse){
  .bl-vbtn{width:40px;height:40px}
  /* the two quiet links grow their hit area and not their box: the padding the margin takes back */
  .bl-back,.bl-yt{padding:15px 0;margin-block:-15px}
}