/* Article "Unsolved economic mysteries" (/articles/economic-mysteries/): its own
   pictures on top of articles.css. Classes start with my-. Colors only through the
   site's variables: c1..c6 (--s1..--s6) for things that are not assets, --bond for
   interest rates, --cash for prices, --bad for falls and recessions. Status stamps:
   open = --bad, reopened = --btc-ink, partly explained = --bond-ink. */

/* ---------- status stamps ---------- */
.my-stamp { display: inline-flex; align-items: center; padding: 3px 8px 2px; border: 1.5px solid currentColor; border-radius: 6px;
  font: 700 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transform: rotate(-2.5deg); }
.my-st-open { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.my-st-reopened { color: var(--btc-ink); background: color-mix(in srgb, var(--btc) 10%, transparent); }
.my-st-partly { color: var(--bond-ink); background: color-mix(in srgb, var(--bond) 10%, transparent); }

/* ---------- the case board (contents as case files) ---------- */
.my-board { margin-top: 36px; }
.my-board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 4px 12px; }
.my-board-head .label { margin: 0; font-size: 13px; font-weight: 650; color: var(--ink); text-transform: none; }
.my-board-sub { margin: 0; font-size: 13px; color: var(--muted); }
.my-board-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .my-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .my-board-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.my-board-grid > li { display: flex; min-width: 0; }
.my-card { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 16px 18px 14px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink-2); text-decoration: none; overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease; }
.my-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--track); }
.my-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.my-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.my-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-no { font: 700 12.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.my-card-name { font: 700 18px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.my-card-ask { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.my-mini { display: block; width: 100%; height: 56px; margin: 4px 0 2px; overflow: visible; }
.my-card-num { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); font: 600 12px/1.45 var(--mono); letter-spacing: -0.02em; color: var(--ink); }
.my-board-also { margin: 12px 4px 0; font-size: 14px; color: var(--muted); }
.my-board-also a { color: var(--accent-ink); }
.my-mini line, .my-mini path { vector-effect: non-scaling-stroke; }
.my-mini-zero { stroke: var(--axis); stroke-width: 1; }
.my-mini-bar { fill: var(--ink-2); opacity: 0.35; }
.my-mini-bar.hot { fill: var(--s1); opacity: 0.9; }
.my-mini-band { fill: var(--s1); opacity: 0.08; }
.my-mini-ln { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; opacity: 0.45; }
.my-mini-ln.hot { stroke: var(--s1); opacity: 1; stroke-width: 2.2; }
.my-mini-dot { fill: var(--s1); stroke: var(--surface); stroke-width: 1.5; }
.my-mini-track { fill: var(--track); }
.my-mini-t { fill: var(--muted); font: 600 10px var(--mono); }

/* ---------- a case's head ---------- */
.my-intro { margin-top: 44px !important; }
.my-sec { margin-top: 76px !important; }
.my-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px !important; }
.my-kicker .my-no { font-size: 14px; color: var(--ink); }
.my-who { font-size: 13px; color: var(--muted); }
.my-sec h2 { margin-top: 0; }
.my-claim { position: relative; margin: 0 0 18px !important; padding: 14px 18px 14px 20px; border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow); font: 600 17px/1.5 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.my-claim::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 3px 3px 0; background: var(--solid); }

/* exhibits: three numbers tagged like evidence */
.my-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
@media (max-width: 560px) { .my-ex { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.my-ex-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 560px) { .my-ex-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; }
  .my-ex-item .my-ex-k { grid-column: 1 / -1; } }
.my-ex-k { align-self: flex-start; padding: 2px 7px; border-radius: 5px; background: var(--track); font: 600 10.5px/1.3 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.my-ex-item b { font: 650 22px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.my-ex-l { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* ---------- the suspects ---------- */
.my-sus { margin-top: 28px; }
.my-sus-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 4px 10px; font: 700 15px/1.3 var(--display); color: var(--ink); }
.my-sus-h span { font: 500 13px var(--font); color: var(--muted); }
.my-lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .my-lineup.my-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) { .my-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 400px) { .my-lineup { gap: 6px; } .my-suspect { padding: 12px 12px; } .my-sus-t { font-size: 13px; } }
.my-suspect { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 14px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(to bottom, transparent 0 13px, var(--border) 13px 14px);
  background-size: 6px 100%; background-repeat: no-repeat; background-position: right 10px top; }
.my-sus-no { font: 700 11.5px/1 var(--mono); color: var(--muted); }
.my-sus-name { font: 650 15.5px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); padding-right: 12px; }
.my-sus-who { font: 500 11.5px/1.35 var(--mono); letter-spacing: -0.02em; color: var(--muted); padding-right: 12px; }
.my-sus-t { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); padding-right: 12px; }
.my-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: var(--col); margin: 14px auto 0 0; padding: 0 4px;
  font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.my-verdict-k { font: 600 12px var(--font); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.my-verdict > span:last-child { flex: 1 1 280px; }

/* ---------- figures ---------- */
.my-fig-h { margin: 2px 10px 8px; font: 650 15px/1.3 var(--display); color: var(--ink); }
.my-plot-ph { min-height: 330px; }
.my-plot-gm { min-height: 340px; }
.my-plot-rt { min-height: 320px; }
.my-plot-ledger { min-height: 300px; }
.my-plot-ls { min-height: 300px; }
.my-plot-cv { min-height: 410px; }
.my-plot-ph svg, .my-plot-gm svg, .my-plot-rt svg, .my-plot-ledger svg, .my-plot-ls svg, .my-plot-cv svg { touch-action: pan-y; }
.my-axis { fill: var(--muted); font: 500 11.5px var(--font); }
.my-rec { fill: var(--bad); fill-opacity: 0.07; }
.my-on { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }

/* legend swatches */
.sw-sq.my-sw-dot { background: var(--ink); border-radius: 50%; width: 8px; height: 8px; }
.ln.my-fit-neg, .my-fit.neg { stroke: var(--s1); stroke-width: 2.2; }
.ln.my-fit-pos, .my-fit.pos { stroke: var(--s2); stroke-width: 2.2; stroke-dasharray: 5 4; }
.sw-sq.my-sw-up { background: color-mix(in srgb, var(--ink-2) 55%, var(--surface)); }
.sw-sq.my-sw-down { background: var(--bad); }
.sw-sq.my-sw-band { background: color-mix(in srgb, var(--s1) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s1) 35%, transparent); }
.sw-sq.my-sw-cell { background: var(--s1); }
.sw-sq.my-sw-rec { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 28%, transparent); }
.sw-sq.my-sw-idle, .sw-sq.my-sw-vDown { background: repeating-linear-gradient(45deg, var(--track) 0 2px, color-mix(in srgb, var(--muted) 55%, var(--track)) 2px 3px); box-shadow: inset 0 0 0 1px var(--border); }
.sw-sq.my-sw-m, .sw-sq.my-sw-mNeg { background: var(--s1); }
.sw-sq.my-sw-vUp { background: var(--s3); }
.sw-sq.my-sw-p, .sw-sq.my-sw-pNeg { background: var(--cash); }
.sw-sq.my-sw-y, .sw-sq.my-sw-yNeg { background: var(--s2); }
.sw-sq.my-sw-poor { background: var(--s1); border-radius: 50%; }
.sw-sq.my-sw-rich { background: var(--s6); border-radius: 50%; }
.sw-sq.my-sw-us { background: var(--s2); border-radius: 50%; }
.ln.my-avg { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ln.my-avg.faint { opacity: 0.45; }
.ln.my-us { stroke: var(--s2); stroke-width: 1.6; stroke-dasharray: 6 4; }

/* 01 Phillips small multiples */
.my-ph-bg { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.my-ph-zero { stroke: var(--axis); stroke-width: 1; }
.my-ph-t { fill: var(--ink); font: 650 13px var(--display); }
.my-ph-s { font: 600 11px var(--mono); letter-spacing: -0.02em; }
.my-ph-s.neg { fill: var(--s1); }
.my-ph-s.pos { fill: var(--btc-ink); }
.my-fit { stroke-linecap: round; }
.my-ph-path { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-linejoin: round; opacity: 0.4; }
.my-ph-dot { fill: var(--ink); stroke: var(--surface-2); stroke-width: 1.2; }
.my-ph-dot.on { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.my-ph-y { fill: var(--muted); font: 500 10px var(--mono); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }

/* 02 the volatility strip */
.my-gm-band { fill: var(--s1); fill-opacity: 0.1; }
.my-gm-sep { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 2 3; }
.my-gm-era { fill: var(--ink); font: 650 12px var(--display); }
.my-gm-sw { fill: var(--muted); font: 600 11px var(--mono); letter-spacing: -0.02em; }
.my-gm-era.mid, .my-gm-sw.mid { fill: var(--s1); }
.my-gm-bar.up { fill: var(--ink-2); fill-opacity: 0.5; }
.my-gm-bar.down { fill: var(--bad); fill-opacity: 0.85; }
.my-gm-bar.on { fill-opacity: 1; }
.my-gm-off { fill: var(--bad); }
.my-gm-offl { fill: var(--bad); font: 650 11px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.my-gm-strip-l { fill: var(--muted); font: 600 10.5px var(--font); }
.my-gm-cell { fill: var(--s1); }

/* 03 the rate staircase */
.my-rt-desc { fill: var(--bond); fill-opacity: 0.07; }
.my-rt-desc-l { fill: var(--bond-ink); font: 600 11.5px var(--font); }
.my-rt-area { fill: var(--bond); fill-opacity: 0.12; }
.ln.my-rt-part { stroke-width: 3; stroke-dasharray: 3 3; }
.my-rt-dot { fill: var(--bond); stroke: var(--surface); stroke-width: 2; }
.my-rt-l { fill: var(--ink); font: 650 12px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* 04 the ledger */
.my-lg-h { fill: var(--ink); font: 650 13.5px var(--display); }
.my-lg-span { fill: var(--muted); font: 500 11.5px var(--mono); }
.my-lg-side { fill: var(--muted); font: 600 11.5px var(--font); }
.my-lg-track { fill: var(--track); opacity: 0.6; }
.my-idle { fill: var(--track); }
.my-hatch { stroke: var(--muted); stroke-width: 1.4; opacity: 0.55; }
.my-hatch-fill { pointer-events: none; }
.my-lg-v { fill: var(--surface); font: 650 11px var(--mono); pointer-events: none; }
.my-lg-v.dark { fill: var(--ink); }
.my-lg-tot { fill: var(--ink-2); font: 600 11.5px var(--mono); letter-spacing: -0.02em; }
#my-ledger rect.my-on { stroke: var(--ink); stroke-width: 2; }

/* 05 the labor share */
.my-ls-area { fill: var(--s1); fill-opacity: 0.07; }
.my-ls-l { fill: var(--ink-2); font: 600 11px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.my-ls-dot { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.my-ls-v { fill: var(--ink); font: 650 12px var(--mono); }

/* 06 the catch-up scatter */
.my-cv-t { fill: var(--ink); font: 700 15px var(--display); letter-spacing: -0.01em; }
.my-cv-beat { fill: var(--muted); font: 500 12px var(--font); }
.my-cv-fit { stroke: var(--ink-2); stroke-width: 1.4; opacity: 0.6; }
.my-cv-dot.poor { fill: var(--s1); fill-opacity: 0.7; }
.my-cv-dot.rich { fill: var(--s6); fill-opacity: 0.6; }
.my-cv-dot.on { fill-opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.my-cv-us { fill: var(--s2); stroke: var(--surface); stroke-width: 2; }
.my-cv-usl { fill: var(--btc-ink); font: 650 11.5px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

/* the Maddison Project's original sources (list markup from pages/art_world_history.sources_html) */
.my-src { margin-top: 18px; }
.my-src summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.my-src h3 { margin: 16px 0 6px; font-size: 15px; color: var(--ink); }
.my-src .wh-src-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); columns: 2 320px; column-gap: 28px; }
.my-src .wh-src-list li { break-inside: avoid; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) { .my-card { transition: none; } }