/* B298 · The home page's "How to run a care company this way." as the front door to the two hubs.
   The pieces are the hubs' own (content-b289.css: play and read buttons, episode cards; follow-b287.css: Follow buttons).
   This file only lays them out on the home page. CultureAI blue is the accent; Scrubs' purple lives only in its logo and art. */
.hw{--hb-acc:#1559F5;--hb-acc-ink:#0f46c9;--hb-tint:#eef3ff;--hb-tint2:#dfe8ff;--hb-ink:#0a1633;--hb-char:#3b4457;--hb-mute:#566074;--hb-line:#e3e7ef;--hb-card:#fff;--hb-r:18px;
  --px-gut:clamp(20px,5vw,48px);--hw-night:#0a1633}
.hw .sx-head{margin-bottom:40px}

/* ---- the two newest notes, one per show ---- */
.hw-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hw-feat{position:relative;display:grid;grid-template-columns:minmax(0,184px) minmax(0,1fr);grid-template-areas:"art tx" "acts acts";gap:24px 22px;align-items:start;
  padding:24px;border-radius:24px;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%,#1d3a8a 0%,rgba(29,58,138,0) 60%),linear-gradient(165deg,#132a66 0%,var(--hw-night) 62%);
  grid-template-rows:1fr auto;box-shadow:0 1px 2px rgba(10,22,51,.08),0 28px 56px -32px rgba(10,22,51,.55)}
.hw-fart{grid-area:art;display:block;border-radius:16px;overflow:hidden;box-shadow:0 18px 36px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hw-feat:hover .hw-fart{transform:translateY(-2px) rotate(-.6deg)}
.hw-fimg{display:block;width:100%;height:auto;aspect-ratio:1}
.hw-ftx{grid-area:tx;min-width:0;display:flex;flex-direction:column;align-self:stretch}
.hw-show{margin:0 0 18px!important;line-height:0}
.hw-show a{display:inline-block;border-radius:6px}
.hw-show img{display:block;height:26px;width:auto}
.hw-scrubs .hw-show img{height:24px;margin:1px 0}
.hw-fk{display:flex;align-items:center;gap:10px;margin:0!important;font:500 13px/1.3 Rubik,system-ui,sans-serif;color:#c9d6ff}
.hw-fn{margin:12px 0 0!important;font:500 13px/1.35 Rubik,system-ui,sans-serif;color:#a9bfff}
.px-home main .hw-ft{margin:6px 0 0;font:600 clamp(22px,1.9vw,27px)/1.14 "Source Serif 4","Source Serif Pro",Georgia,serif;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.hw-ft a{color:#fff;text-decoration:none}
.hw-ft a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.hw-by{display:flex;align-items:center;gap:10px;margin:auto 0 0!important;padding-top:18px;font:400 13px/1.35 Rubik,system-ui,sans-serif;color:#b9c4dc}
.hw-by img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
.hw-by>span{display:flex;flex-direction:column;min-width:0}
.hw-by b{font-weight:500;color:#fff}
.hw-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:10px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.hw-acts .hb-playbig{background:#fff;color:var(--hw-night);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.hw-acts .hb-playbig .hb-pi{background:var(--hb-acc);color:#fff}
.hw-acts .hb-playbig:hover{background:#eef3ff}
.hw-acts .hb-playbig .px-pt{color:#3b4457;opacity:1}
.hw-acts .hb-read .hb-rt2{opacity:.86}
.hw-feat>.px-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:#5b8cfa;z-index:2}
.hw-feat :focus-visible{outline:3px solid #fff;outline-offset:3px}
.hw-acts button,.hw-acts a{font-family:Rubik,system-ui,sans-serif}

/* ---- the shelf: the next six notes from both shows, the hubs' cards ---- */
.hw-shelf{margin-top:56px}
.hw-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:18px}
.hw-sh{margin:0!important;font:600 22px/1.2 Rubik,system-ui,sans-serif;letter-spacing:-.01em;color:var(--hb-ink)}
.hw-hubs{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0!important}
.hw .hb-more{display:inline-flex;align-items:center;gap:6px;min-height:32px;font:500 15px/1.2 Rubik,system-ui,sans-serif;color:var(--hb-acc);text-decoration:none}
.hw .hb-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hw .hb-more:hover svg{transform:translateX(3px)}
.hw .hb-more:hover{text-decoration:underline;text-underline-offset:3px}
.hw .hb-card .hb-ct a{color:var(--hb-ink)}
.hw :focus-visible{outline:3px solid var(--hb-acc);outline-offset:2px}
.hw .hb-ct a:focus-visible{outline:none}
.hw .hb-cplay{font-family:Rubik,system-ui,sans-serif}
@media (min-width:641px){
  .hw .hb-cards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 18px;overflow:visible;padding:2px 0 0;scroll-snap-type:none}
  .hw .hb-ct{font-size:16px!important}
  .hw .hb-ck{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hw .hb-cm{font-size:13px}
  .hw .hb-card .hb-cplay{width:40px;height:40px;right:10px;top:10px}
}

/* ---- the quiet close: follow both shows, the Ledger, Ask the Lab ---- */
.hw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:44px;padding-top:28px;border-top:1px solid var(--sx-line,#e3e8f2)}
.hw-fols{display:flex;flex-wrap:wrap;gap:16px 36px}
.hw .hw-fol{margin:0;gap:8px}
.hw .hw-fol .px-fl{font-size:13px;color:#566074;margin-right:6px}
.hw .hw-fol .px-fbtn{min-height:40px;font-size:14px;padding:0 14px 0 11px}
.hw .hw-fol .px-fbtn svg{width:18px;height:18px}
.hw .hw-links{margin:0;gap:10px 28px}
.hw .hw-links a,.hw .hw-links button{min-height:40px;align-items:center;font-size:15px}
.hw .hw-links a:hover,.hw .hw-links button:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- laptop to phone ---- */
@media (max-width:1100px){
  .hw-feats{grid-template-columns:minmax(0,1fr)}
  .hw-feat{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .hw .hb-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hw-feat{grid-template-rows:1fr auto}
  .px-home main .hw-ft{font-size:clamp(26px,3.4vw,34px)}
  .hw .hb-cards{gap:24px 20px}
}
@media (max-width:640px){
  .hw .sx-head{margin-bottom:28px}
  .hw-feats{gap:16px}
  .hw-feat{grid-template-columns:96px minmax(0,1fr);grid-template-areas:none;grid-template-rows:auto auto auto 1fr auto auto auto;gap:0 16px;padding:18px;border-radius:20px}
  .hw-fart{grid-area:auto;grid-column:1;grid-row:1/5;border-radius:12px}
  .hw-ftx{display:contents}
  .hw-show{grid-column:2;grid-row:1;margin:2px 0 0!important}
  .hw-fk{grid-column:2;grid-row:2;margin-top:10px!important;font-size:12.5px}
  .hw-fn{grid-column:2;grid-row:3;margin-top:6px!important;font-size:12.5px}
  .px-home main .hw-ft{grid-column:1/-1;grid-row:5;margin:16px 0 0;font-size:24px;line-height:1.14}
  .hw-by{grid-column:1/-1;grid-row:6;padding-top:14px;margin:0!important}
  .hw-acts{grid-area:auto;grid-column:1/-1;grid-row:7;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:16px}
  .hw-acts>*{justify-content:center;padding:0 12px 0 6px}
  .hw-acts .hb-read{padding:0 14px}
  .hw-acts .hb-playbig .px-pt,.hw-acts .hb-read .hb-rt2{display:none}
  .hw-shelf{margin-top:44px}
  .hw-shead{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:12px}
  .hw-hubs{gap:0 18px}
  .hw-sh{font-size:20px}
  .hw .hb-rail{margin:0 calc(-1 * var(--px-gut))}
  .hw .hb-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;gap:14px}
  .hw .hb-ck{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hw .hb-cm{font-size:12.5px}
  .hw .hb-ct{font-size:15px!important}
  .hw .hb-card .hb-cplay{width:40px;height:40px;right:8px;top:8px}
  .hw-foot{flex-direction:column;align-items:stretch;gap:22px;margin-top:32px;padding-top:24px}
  .hw-fols{flex-direction:column;gap:14px}
  .hw .hw-fol .px-fl{width:100%;margin:0}
  .hw .hw-fol .px-fbtn{min-height:44px}
  .hw .hw-links{flex-direction:column;gap:4px}
  .hw .hw-links a,.hw .hw-links button{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .hw *{transition:none!important}
  .hw-feat:hover .hw-fart,.hw .hb-card:hover .hb-cimg{transform:none}
  .hw .hb-more:hover svg{transform:none}
}