/* Article "What actually beats inflation" (/articles/inflation-hedges/): its own
   pictures, on top of articles.css. Classes start with ih-. Asset colors are the
   site's (a-spx, a-gold …); cash at interest and silver use the portfolio
   builder's colors. Gains --good, losses --bad, inflation --cash. */

.ih { --ih-bills: #e58a7a; --ih-silver: #9aa5b1; }
.ih .a-spx { --c: var(--spx); } .ih .a-bond { --c: var(--bond); } .ih .a-gold { --c: var(--gold); }
.ih .a-home { --c: var(--home); } .ih .a-btc { --c: var(--btc); } .ih .a-cash { --c: var(--cash); }
.ih .ih-bills { --c: var(--ih-bills); } .ih .ih-silver { --c: var(--ih-silver); }
.ln.ih-bills { stroke: var(--ih-bills); stroke-width: 2.2; } .ln.ih-silver { stroke: var(--ih-silver); stroke-width: 2.2; }
.dot.ih-bills { fill: var(--ih-bills); } .dot.ih-silver { fill: var(--ih-silver); }
.sw-sq.ih-bills { background: var(--ih-bills); } .sw-sq.ih-silver { background: var(--ih-silver); }
.ih-fill { background: var(--c); fill: var(--c); }
.ih-mode { margin-top: 4px; }
.ih-wait { visibility: hidden; }
.ih .up-t { color: var(--good); } .ih .down-t { color: var(--bad); }

/* ---------- legends ---------- */
.ih-dots-legend span, .ih-mx-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.ih-d { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ih-d.win { width: 14px; height: 14px; background: var(--ink-2); }
.ih-d.beat { background: var(--ink-2); }
.ih-d.lost { box-shadow: inset 0 0 0 1.6px var(--ink-2); }
.ih-d.infl { width: 8px; height: 12px; border-radius: 2px; background: var(--cash); }
.ih-d.band { width: 18px; height: 12px; border-radius: 3px; background: var(--track); }
.ih-d.bar { width: 18px; height: 8px; border-radius: 3px; background: var(--ink-2); }
.ih-d.open { width: 18px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ink-2) 30%, transparent); box-shadow: inset 0 0 0 1.4px var(--ink-2); }
.ih-d.never { box-shadow: inset 0 0 0 2px var(--ink-2); }
.ih-d.low { width: 2px; height: 14px; border-radius: 1px; background: var(--ink); }
.ih-d.h0 { box-shadow: inset 0 0 0 1.8px var(--ink-2); }
.ih-d.h1 { background: color-mix(in srgb, var(--ink-2) 45%, transparent); box-shadow: inset 0 0 0 1.4px var(--ink-2); }
.ih-d.h2 { background: var(--ink-2); }
.ih-grad { display: inline-block; width: 70px; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bad) 44%, var(--surface)) 0 20%, color-mix(in srgb, var(--bad) 20%, var(--surface)) 20% 40%,
    var(--surface-2) 40% 60%, color-mix(in srgb, var(--good) 20%, var(--surface)) 60% 80%,
    color-mix(in srgb, var(--good) 44%, var(--surface)) 80% 100%);
  box-shadow: inset 0 0 0 1px var(--border); }
.ih-mx-key { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }

/* ---------- the heat matrix ---------- */
.ih-mxfig { padding: 16px 14px 8px; }
.ih-mx-box { position: relative; }
.ih-mx { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 5px; margin: 0; }
.ih-mx thead th:first-child { width: 27%; }
.ih-mx th[scope="col"] { padding: 4px 2px 6px; text-align: center; vertical-align: bottom; font-weight: 600; }
.ih-mx-r { display: block; font: 650 13.5px/1.2 var(--font); color: var(--ink); }
.ih-mx-rng { display: block; margin-top: 2px; font: 500 11.5px/1.25 var(--font); color: var(--muted); }
.ih-mx-n { display: block; margin-top: 2px; font: 500 11px/1.2 var(--mono); color: var(--muted); }
.ih-mx th[scope="row"] { padding: 2px 6px 2px 0; text-align: left; font-weight: 600; vertical-align: middle; white-space: normal; }
.ih-mx th[scope="col"] { white-space: normal; }
.ih-mx th[scope="row"] .sw-sq { margin-right: 7px; vertical-align: 0; }
.ih-mx-a { font: 600 14px/1.25 var(--font); color: var(--ink); }
.ih-mx-since { display: block; padding-left: 17px; font: 500 11px/1.3 var(--font); color: var(--muted); }
.ih-short { display: none; }
.ih-c { padding: 9px 3px 8px; border-radius: 12px; text-align: center; vertical-align: middle; background: var(--surface-2); cursor: default; outline: none; }
.ih-c.pos { background: color-mix(in srgb, var(--good) calc(var(--k) * 40% + 6%), var(--surface)); }
.ih-c.neg { background: color-mix(in srgb, var(--bad) calc(var(--k) * 40% + 6%), var(--surface)); }
.ih-c b { display: block; font: 650 15px/1.15 var(--mono); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.ih-c span { display: block; margin-top: 3px; font: 500 11px/1 var(--mono); color: var(--ink-2); }
.ih-c.none { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); }
.ih-c.on, .ih-c:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.ih-mx-tip { min-width: 0; width: max-content; max-width: min(280px, 86vw); }
@media (max-width: 640px) {
  .ih-mxfig { padding: 14px 6px 6px; }
  .ih-mx { border-spacing: 3px; }
  .ih-mx thead th:first-child { width: 23%; }
  .ih-long { display: none; }
  .ih-short { display: inline; }
  .ih-mx-a { font-size: 12.5px; }
  .ih-mx th[scope="row"] .sw-sq { display: none; }
  .ih-mx-since { padding-left: 0; font-size: 10.5px; }
  .ih-mx-r { font-size: 12px; }
  .ih-mx-rng, .ih-mx-n { font-size: 10.5px; }
  .ih-c { padding: 8px 1px 7px; border-radius: 9px; }
  .ih-c b { font-size: 12.5px; letter-spacing: -0.05em; }
  .ih-c span { font-size: 10px; }
}

/* ---------- the score strip ---------- */
.ih-plot-strip { min-height: 280px; }
.ih-yr.nar { font-size: 8.5px; letter-spacing: -0.04em; }
.ih-col-on { fill: var(--track); opacity: 0.7; }
.ih-infl { fill-opacity: 0.85; }
.ih-infl-lbl { fill: var(--cash-ink); font: 600 10.5px var(--mono); letter-spacing: -0.03em; }
.ih-head { fill: var(--muted); font: 600 10px var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.ih-row-ln { stroke: var(--grid); stroke-width: 1; }
.ih-gap { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 2 4; }
.ih-row-lbl { fill: var(--ink); font: 600 12.5px var(--font); }
.ih-tally { fill: var(--ink); font: 650 16px var(--mono); }
.ih-tally.zero { fill: var(--muted); font-weight: 500; }
.ih-nodata { fill: var(--axis); }
.ih-dot.win { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.ih-dot.beat { fill: var(--c); }
.ih-dot.lost { fill: var(--surface); stroke: var(--c); stroke-width: 1.6; }

/* ---------- the episodes ---------- */
.ih-epfig { padding: 14px 14px 8px; }
.ih-eps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .ih-eps { grid-template-columns: minmax(0, 1fr); } }
.ih-ep { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 16px 14px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.ih-ep-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ih-ep-yrs { font: 700 24px/1 var(--mono); letter-spacing: -0.05em; color: var(--ink); }
.ih-ep-name { font: 650 14px/1.2 var(--display); color: var(--ink); }
.ih-ep-what { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ih-ep-infl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 0 10px; border-bottom: 1px solid var(--border); }
.ih-ep-infl .label { width: 100%; margin: 0; }
.ih-ep-infl b { font: 650 22px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--cash-ink); }
.ih-ep-infl > span:not(.label) { font-size: 12px; line-height: 1.35; color: var(--muted); }
.ih-ep-infl > span:last-child:not(.ih-ep-sub) { width: 100%; }
.ih-ep-rows { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.ih-ep-rows li { display: grid; grid-template-columns: 10px minmax(0, 8.8em) minmax(40px, 1fr) 4.2em; align-items: center; gap: 8px; font-size: 12.5px; }
.ih-ep-n { color: var(--ink); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ih-ep-rows b { font: 600 13px var(--mono); letter-spacing: -0.03em; text-align: right; color: var(--ink); white-space: nowrap; }
.ih-ep-rows b.up { color: var(--good); } .ih-ep-rows b.down { color: var(--bad); }
.ih-ep-bar { position: relative; height: 10px; border-radius: 3px; background: var(--track); }
.ih-ep-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; margin-left: -0.75px; background: var(--axis); }
.ih-ep-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ih-ep-bar i.pos { left: 50%; width: calc(var(--w) / 2); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ih-ep-bar i.neg { right: 50%; width: calc(var(--w) / 2); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ih-ep-bar i.over::after { content: ""; position: absolute; right: -7px; top: -2px; border: 7px solid transparent; border-right: 0; border-left-color: var(--c); }
.ih-ep-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

/* ---------- $100 through 1966–82 ---------- */
.ih-plot-lines { min-height: 400px; }

/* ---------- the recovery bars ---------- */
.ih-plot-rec { min-height: 420px; }
.ih-band { fill: var(--track); opacity: 0.75; }
.ih-ep-h { fill: var(--ink); font: 700 14px var(--mono); letter-spacing: -0.03em; }
.ih-ep-hs { fill: var(--cash-ink); font: 600 11.5px var(--mono); letter-spacing: -0.02em; }
.ih-rbar { fill-opacity: 0.85; }
.ih-rbar.open { fill-opacity: 0.3; stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ih-rbar.on { fill-opacity: 1; }
.ih-rbar.open.on { fill-opacity: 0.5; }
.ih-arrow { fill: var(--c); }
.ih-low { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ih-never { fill: var(--surface); stroke: var(--c); stroke-width: 2.4; }
.ih-bar-lbl { fill: var(--ink-2); font: 600 11px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ih-bar-lbl.open { fill: var(--muted); }
.ih-bar-lbl.in { fill: var(--surface); stroke: none; }
.ih-cap { margin: 0; padding: 16px 18px 6px; font-weight: 650; color: var(--ink); }
.ih-axis { fill: var(--muted); font: 500 11px var(--font); }
.ih-tip-note, .ih-tip-sub { margin: 1px 0 4px 28px; font-size: 11px; line-height: 1.35; color: var(--muted); }

/* ---------- the odds ---------- */
.ih-plot-odds { min-height: 300px; }
.ih-row-on { fill: var(--track); opacity: 0.6; }
.ih-track { stroke: var(--track); stroke-width: 6; stroke-linecap: round; }
.ih-half { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.ln.ih-span { stroke-width: 3; stroke-opacity: 0.55; }
.ih-dot.h0 { fill: var(--surface); stroke: var(--c); stroke-width: 2; }
.ih-dot.h1 { fill: color-mix(in srgb, var(--c) 45%, var(--surface)); stroke: var(--c); stroke-width: 1.5; }
.ih-dot.h2 { fill: var(--c); stroke: var(--surface); stroke-width: 1.5; }
.ih-odds-lbl { fill: var(--ink); font: 650 13px var(--mono); letter-spacing: -0.03em; }
.tip-row .ih-d { justify-self: center; }

.ih-plot-strip svg, .ih-plot-rec svg, .ih-plot-odds svg { touch-action: pan-y; }
.ih-table td.ih-win { font-weight: 700; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ih-table .sw-sq { vertical-align: 0; }