/* Economic bubble lesson. All rules scoped under .ebb-* */
.ebb-sc { position: relative; width: 100%; display: flex; justify-content: center; }
.ebb-yr { width: 100%; max-width: 340px; height: auto; max-height: 42vh; overflow: visible; }
.ebb-card { fill: #F1E6CC; stroke: #C98C1B; stroke-width: 2; }
.ebb-co { font: 700 15px var(--serif); fill: #3A2A10; }
.ebb-one { font: 600 12.5px var(--sans); fill: #7A6440; text-transform: uppercase; letter-spacing: .08em; }
.ebb-pr { font: 800 28px var(--sans); fill: #3A2A10; text-anchor: end; }
.ebb-mo { font: 600 12.5px var(--sans); fill: #7A6440; text-anchor: end; }
.ebb-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.ebb-gl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.ebb-gt, .ebb-mt { font: 600 12.5px var(--sans); fill: var(--faint); }
.ebb-gt { text-anchor: end; }
.ebb-mt { text-anchor: middle; }
.ebb-line { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.ebb-dot { fill: #fff; stroke: var(--gold); stroke-width: 2.5; }
.ebb-yr.fall .ebb-dot { stroke: var(--violet-bright); }
.ebb-mk { fill: var(--surface); stroke-width: 3; }
.ebb-mk.sold { stroke: var(--mint); } .ebb-mk.buy { stroke: var(--violet-bright); }
.ebb-mkt { font: 800 12.5px var(--sans); text-anchor: middle; }
.ebb-mkt.sold { fill: var(--mint); } .ebb-mkt.buy { fill: var(--violet-bright); }

/* one ship a year */
.ebb-sea { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ebb-sea img { width: 70%; max-width: 230px; max-height: 26vh; object-fit: contain; }
.ebb-tag { padding: 6px 14px; border-radius: 10px; background: #F1E6CC; border: 2px solid #C98C1B; font: 800 18px var(--sans); color: #3A2A10; }

.ebb-pic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ebb-pic img { height: 30vh; max-height: 260px; width: auto; border-radius: 14px; }
.ebb-pic figcaption { font: 500 12.5px var(--sans); color: var(--faint); }