/* Bretton Woods system lesson. All rules scoped under .brw-* */
.brw-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brw-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.brw-hero { width: 100%; max-width: 380px; animation: brwRise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.brw-hero img { width: 100%; display: block; }
@keyframes brwRise { from { opacity: 0; translate: 0 30px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* the mobile */
.brw-mb { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
.brw-ceil { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.brw-ch { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 5 3; }
.brw-cc { transition: opacity .2s; }
.brw-top, .brw-ch1, .brw-ch2 { display: none; }
.brw-mb.gold .brw-top, .brw-mb.gold .brw-ch2 { display: inline; }
.brw-mb.gold .brw-ch1 { display: inline; }
.brw-mb.gold .brw-ch0 { display: none; }
.brw-bar { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 2; }
.brw-bt { font: 800 14px var(--sans); fill: #3B2A06; text-anchor: middle; }
.brw-gt { font: 700 13px var(--sans); fill: var(--gold); }
.brw-hit { fill: transparent; pointer-events: all; cursor: pointer; display: none; }
.brw-mb.gold .brw-hit { display: inline; }
.brw-mb.snapped .brw-hit, .brw-mb.snapped .brw-ch2 { display: none; }
.brw-bill { fill: #2F7D4F; stroke: #9BD8B1; stroke-width: 2; }
.brw-ns { fill: none; stroke: #9BD8B1; stroke-width: 1.5; }
.brw-nt { font: 800 22px var(--sans); fill: #FFF6DC; text-anchor: middle; }
.brw-nl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: end; }
.brw-c { cursor: pointer; }
.brw-c circle { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2.5; }
.brw-c.on circle { stroke: var(--gold); }
.brw-c.me circle { stroke: var(--violet-bright); stroke-width: 3.5; }
.brw-cs { font: 800 17px var(--sans); fill: var(--text); text-anchor: middle; }
.brw-ct { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.brw-c.on .brw-ct { fill: var(--text); }
.brw-fly rect { fill: #2F7D4F; stroke: #9BD8B1; stroke-width: 1.5; }
.brw-fly text { font: 800 12px var(--sans); fill: #FFF6DC; text-anchor: middle; }
.brw-oz path { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.brw-oz text { font: 700 12.5px var(--sans); fill: var(--gold); text-anchor: middle; }
/* Britain's road to gold, lit after the answer. */
.brw-mb.path .brw-cc[data-i="0"], .brw-mb.path .brw-ch2 { stroke: #FFE08A; stroke-width: 5; stroke-dasharray: none; }
.brw-mb.path .brw-c[data-i="0"] circle, .brw-mb.path .brw-bill { stroke: #FFE08A; stroke-width: 3.5; }
.brw-hang { transform-box: view-box; transform-origin: 160px 56px; }
.brw-mb.gone .brw-top, .brw-mb.snapped .brw-ceil { opacity: 0; transition: opacity .6s; }

/* Nixon beside the mobile */
.brw-snapsc { position: relative; }
.brw-nx { position: absolute; left: 4px; top: 0; z-index: 1; }
.brw-nx img { width: 66px; height: 66px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; border: 2px solid var(--line-strong); display: block; }

/* the piles */
.brw-pl { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brw-yr { font: 700 34px var(--serif); color: var(--text); }
.brw-cols { display: flex; gap: 36px; align-items: flex-end; height: 170px; }
.brw-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.brw-col span { font: 700 13.5px var(--sans); color: var(--dim); white-space: nowrap; }
.brw-stk { width: 92px; height: 140px; display: flex; align-items: flex-end; border-bottom: 2px solid var(--line-strong); }
.brw-stk i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; transition: height .12s linear; }
.brw-usd i { background: repeating-linear-gradient(0deg, #2F7D4F 0 9px, #3E9A63 9px 11px); border: 1.5px solid #9BD8B1; }
.brw-au i { background: repeating-linear-gradient(0deg, var(--gold-deep) 0 3px, var(--gold) 3px 16px); border: 1.5px solid #FFE08A; }
.brw-x { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold); font: 700 13px var(--sans); color: var(--text); opacity: 0; transition: opacity .3s; text-align: center; }
.brw-pl.crossed .brw-x { opacity: 1; }

@media (max-height: 700px) {
  .brw-mb { max-width: 300px; }
  .brw-cols { height: 150px; }
  .brw-stk { height: 120px; }
  .brw-yr { font-size: 28px; }
  .brw-hero { max-width: 320px; }
}