/* Rotating book banner (from nostringsqr.com). Colors are set here; change the --bb-* values to match the site.
   Matched to investigatorstools.com: teal accent, Archivo titles, Public Sans text, IBM Plex Mono formats. */
:root{
  --bb-card:#FFFFFF; --bb-ink:#12202B; --bb-muted:#556473; --bb-line:#D1D9E0; --bb-line-strong:#B3BFCA;
  --bb-accent:#0B6A72; --bb-shadow:rgba(18,32,43,.08);
  --bb-f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --bb-f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bb-f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bb-card:#141E26; --bb-ink:#E3EBF1; --bb-muted:#93A2AF; --bb-line:#283744; --bb-line-strong:#3A4A58;
    --bb-accent:#5BC0C6; --bb-shadow:rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bb-card:#141E26; --bb-ink:#E3EBF1; --bb-muted:#93A2AF; --bb-line:#283744; --bb-line-strong:#3A4A58;
  --bb-accent:#5BC0C6; --bb-shadow:rgba(0,0,0,.35);
}

/* Page layout: wrap the page's <main> and the banner's <aside> in <div class="bb-layout">.
   Wide screens get a 250px side column; narrower screens show the banner under the content. */
.bb-layout{display:block}
@media (min-width:1200px){
  .bb-layout{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:0 48px; align-items:stretch}
  .bb-side{padding-top:30px}
  .bb-side-in{position:sticky; top:20px}
}
.bb-side-in:empty{display:none}
@media (max-width:1199px){ .bb-side{margin-top:36px} }

/* The banner card: a row (small cover left) by default, a column (big cover on top) in the side column */
.bb-offer{width:100%; max-width:420px; margin-inline:auto; display:flex; gap:14px; align-items:flex-start; padding:12px 14px;
  border:1px solid var(--bb-line); border-radius:12px; background:var(--bb-card); color:var(--bb-ink); text-align:left; font-family:var(--bb-f-body);
  transition:opacity .5s ease; box-sizing:border-box}
.bb-offer[hidden]{display:none}
.bb-offer.bb-fading{opacity:0}
.bb-cover{width:64px; height:auto; flex:none; border-radius:3px; box-shadow:0 2px 8px var(--bb-shadow)}
.bb-body{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0}
.bb-body p{margin:0}
.bb-title{font-family:var(--bb-f-display); font-stretch:108%; font-weight:700; font-size:1rem; line-height:1.25}
.bb-by{font-size:.8rem; color:var(--bb-muted)}
.bb-blurb{font-size:.86rem; line-height:1.4}
.bb-formats{font-family:var(--bb-f-mono); font-size:.74rem; color:var(--bb-muted); font-weight:500; letter-spacing:.01em}
.bb-btn{display:inline-flex; align-items:center; margin-top:4px; padding:6px 10px; border:1px solid var(--bb-line-strong); border-radius:8px;
  color:var(--bb-ink); background:transparent; font-family:var(--bb-f-body); font-size:.85rem; font-weight:600; text-decoration:none}
.bb-btn:hover{border-color:var(--bb-accent)}
.bb-btn:focus-visible,.bb-dots button:focus-visible{outline:2px solid var(--bb-accent); outline-offset:2px}
.bb-dots{display:flex; gap:7px; margin-top:8px}
.bb-dots[hidden]{display:none}
.bb-dots button{width:9px; height:9px; padding:0; border-radius:999px; border:none; background:var(--bb-line-strong); cursor:pointer}
.bb-dots button[aria-current="true"]{background:var(--bb-accent)}
.bb-disc{font-size:.74rem; color:var(--bb-muted); margin-top:2px}
@media (min-width:1200px){
  .bb-side .bb-offer{flex-direction:column; align-items:stretch; max-width:none; padding:16px; gap:10px; border-radius:14px; box-shadow:0 6px 20px var(--bb-shadow)}
  .bb-side .bb-cover{width:150px; align-self:center}
  .bb-side .bb-dots{justify-content:center; align-self:stretch}
}
@media (prefers-reduced-motion: reduce){ .bb-offer{transition:none} }