/* Central Bank lesson. All rules scoped under .cbk-* */
.cbk-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cbk-tw { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cbk-sv { width: 100%; height: auto; display: block; overflow: visible; }
.cbk-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* the central bank */
.cbk-ped, .cbk-ent, .cbk-col, .cbk-base { fill: #E9E2F5; }
.cbk-col { fill: #D6CCEA; }
.cbk-plt { fill: var(--raised); stroke: var(--gold); stroke-width: 2; }
.cbk-rt { font: 800 21px var(--sans); fill: var(--gold); text-anchor: middle; }
.cbk-cbl { font: 700 14px var(--sans); fill: var(--violet-bright); text-anchor: middle; }
.cbk-pre .cbk-cb { opacity: 0; }
.cbk-cb { transition: opacity .5s; }

/* the street */
.cbk-gr { stroke: var(--line-strong); stroke-width: 1.5; }
.cbk-bk path, .cbk-bk rect { fill: #C9BFE0; }
.cbk-bk text, .cbk-sh text { font: 700 14px var(--sans); text-anchor: middle; fill: #23293D; }
.cbk-door { fill: #3A3150 !important; }
.cbk-wall { fill: #EAE3D7; }
.cbk-sh .cbk-aw { fill: var(--violet); }
.cbk-sh[data-i="1"] .cbk-aw { fill: var(--mint); }
.cbk-sh[data-i="2"] .cbk-aw { fill: var(--gold); }
.cbk-shut { opacity: 0; transition: opacity .5s; }
.cbk-shut rect { fill: #4A4F60; }
.cbk-shut text { fill: #EAE3D7 !important; letter-spacing: .08em; text-transform: uppercase; }
.cbk-sh.shut .cbk-shut { opacity: 1; }
.cbk-tag rect { fill: var(--gold); }
.cbk-tag text { font: 800 14px var(--sans); fill: #2A1E05; text-anchor: middle; }
.cbk-p { fill: var(--violet-bright); }
.cbk-p.c1 { fill: var(--mint); } .cbk-p.c2 { fill: #FB9679; } .cbk-p.c3 { fill: #EAE3D7; }

/* readouts */
.cbk-rd { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cbk-rd span { display: flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13px var(--sans); color: var(--dim); }
.cbk-rd i { font-style: normal; }
.cbk-rd b { color: var(--text); font-weight: 800; }
.cbk-pr.hot { border-color: var(--gold); }
.cbk-pr.hot b { color: var(--gold); }

/* the quote */
.cbk-qt { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 340px; }
.cbk-qt img { width: 96px; height: 96px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; border: 2px solid var(--line-strong); }
.cbk-qt blockquote { margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font: 500 17px/1.35 var(--serif); color: var(--text); text-align: center; }
.cbk-cap { font-size: 12.5px; color: var(--faint); text-align: center; }

.cbk-hero { width: 100%; max-width: 360px; }
.cbk-hero img { width: 100%; display: block; }
.cbk-hero.cbk-small { max-width: 240px; }

@media (max-height: 700px) {
  .cbk-tw { max-width: 320px; }
  .cbk-qt img { width: 72px; height: 72px; }
  .cbk-qt blockquote { font-size: 15.5px; padding: 10px 14px; }
}