/* ============================================================================
   Previously — SHARED PAGE MASTHEAD (pv-masthead)
   James 2026-10-08: every section page opens like /podcasts/ — one source of
   truth. Thick red top border, red caps kicker, giant Fraunces title, italic
   dek, optional action row, sticky numbered index bar. Content starts tight
   underneath — no dead space.

   Tokens resolve against the site's design tokens with safe fallbacks, so this
   works on pages with or without micro.css. No raw hex anywhere.
   ========================================================================== */
.pv-masthead{
  --mh-red:var(--red,var(--brand-red-deep,var(--brand-red)));
  --mh-ink:var(--ink,var(--desert-ink));
  --mh-ink-soft:var(--ink-soft,var(--desert-ink-faint));
  --mh-dim:var(--desert-ink-dim);
  --mh-rule:var(--desert-rule);
  --mh-bg:var(--desert-bg);
  --mh-card:var(--card,var(--desert-card));
  --mh-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mh-sans:var(--sans,var(--font-sans),-apple-system,"Segoe UI",sans-serif);
  background:var(--mh-bg);
  border-top:14px solid var(--mh-red);
  padding:56px 0 40px;
}
.pv-masthead .wrap{max-width:var(--max,1280px);margin:0 auto;padding:0 48px}
.pv-masthead .kicker{
  font:700 11px/1 var(--mh-sans);
  letter-spacing:.28em;
  color:var(--mh-red);
  text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
  margin:0 0 18px;
}
.pv-masthead h1{
  font-family:var(--mh-serif);
  font-weight:800;
  font-size:clamp(64px,10vw,148px);
  line-height:.92;
  letter-spacing:-.02em;
  color:var(--mh-ink);
  margin:0;
  text-transform:uppercase;
}
.pv-masthead .dek{
  font-family:var(--mh-serif);
  font-style:italic;
  font-size:20px;
  line-height:1.5;
  color:var(--mh-ink-soft);
  margin:14px 0 0;
  max-width:60ch;
}
.pv-masthead .dek b{font-style:normal;font-weight:700}
/* ---- meta row (fresh badge + stamp) ---- */
.pv-masthead .meta-row{
  display:flex;align-items:center;gap:18px;
  margin-top:18px;flex-wrap:wrap;
  font-size:13px;color:var(--mh-dim);
  font-family:var(--mh-sans);
}
.pv-fresh-badge{
  display:inline-flex;align-items:center;gap:8px;
  font:700 11px/1 var(--mh-sans);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--desert-card,var(--desert-card));
  background:var(--mh-red);
  padding:9px 14px;border-radius:4px;
}
.pv-fresh-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--desert-card,var(--desert-card));
  animation:pv-mh-pulse 2s infinite;
}
@keyframes pv-mh-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pv-masthead .lib-stamp b{color:var(--mh-ink)}
/* ---- action slot (search box etc.) ---- */
.pv-masthead .pv-mh-action{margin-top:28px;max-width:560px}
.pv-masthead .pv-mh-action .pv-search{margin:0}
/* ================= STICKY INDEX BAR ================= */
.pv-indexbar{
  position:sticky;top:0;z-index:30;
  background:var(--mh-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--mh-rule);
}
.pv-indexbar__in{
  max-width:var(--max,1280px);margin:0 auto;
  padding:14px 48px;
  display:flex;align-items:center;gap:26px;
  overflow-x:auto;scrollbar-width:none;
}
.pv-indexbar__in::-webkit-scrollbar{display:none}
.pv-ilink{
  font:600 12px/1 var(--mh-sans);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mh-dim);white-space:nowrap;
  padding:6px 2px;border-bottom:2px solid transparent;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.pv-ilink__n{
  font-family:var(--mh-serif);font-style:italic;font-weight:600;
  color:var(--mh-dim);letter-spacing:0;font-size:13px;
}
.pv-ilink:hover{color:var(--mh-ink)}
.pv-ilink.active{color:var(--mh-ink);border-bottom-color:var(--mh-red)}
/* ================= MOBILE ================= */
@media(max-width:640px){
  .pv-masthead{padding:36px 0 28px;border-top-width:10px}
  .pv-masthead .wrap{padding:0 20px}
  .pv-masthead h1{font-size:clamp(48px,17vw,72px)}
  .pv-masthead .dek{font-size:17px}
  .pv-indexbar__in{padding:12px 20px;gap:20px}
}