/* Article "The gold standard" (/articles/gold-standard/): its own pictures, on
   top of articles.css. Classes start with gs-. Gold is --gold (the site's asset
   color), dollars and inflation --cash, falling prices --s1; everything else ink,
   grid and track, so the four themes work. */

.gs-plot-ribbon { min-height: 340px; }
.gs-plot-strips { min-height: 420px; }
.gs-plot-run { min-height: 320px; }
.gs-plot-cube { min-height: 360px; }
.gs-plot-mine { min-height: 300px; }
@media (max-width: 600px) { .gs-plot-cube { min-height: 240px; } .gs-plot-strips { min-height: 300px; } }
.gs-plot-ribbon svg, .gs-plot-strips svg, .gs-plot-run svg, .gs-plot-cube svg, .gs-plot-mine svg { touch-action: pan-y; }

/* ---------- the ribbon ---------- */
.gs-seg { shape-rendering: crispEdges; }
.gs-seg-coin, .sw-sq.gs-sw-coin { fill: var(--gold); background: var(--gold); }
.gs-seg-gov, .sw-sq.gs-sw-gov { fill: color-mix(in srgb, var(--gold) 42%, var(--surface)); background: color-mix(in srgb, var(--gold) 42%, var(--surface)); }
.gs-seg-susp { fill: color-mix(in srgb, var(--gold) 18%, var(--surface)); }
.gs-seg-none, .sw-sq.gs-sw-none { fill: var(--track); background: var(--track); }
.gs-step { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.gs-step-gap { stroke-width: 2; opacity: 0.35; stroke-dasharray: 2 4; }
.gs-step-book { stroke-width: 2.2; stroke-dasharray: 1 5; }
.gs-step-join { stroke: var(--gold); stroke-width: 1.4; opacity: 0.55; }
.gs-step-lbl { fill: var(--gold-ink); font: 650 12px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.gs-mkt, .ln.gs-ln-mkt { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linejoin: round; }
.gs-end { fill: var(--ink); font: 650 12px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.gs-pin { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.4; }
.gs-pin-lbl { fill: var(--ink-2); font: 600 11px var(--font); }
.gs-log { fill: var(--muted); font: italic 500 11px var(--font); }
.gs-tip-seg { display: flex; align-items: center; gap: 7px; margin: 2px 0 6px; font-size: 12.5px; color: var(--ink-2); }
.gs-tip-seg .sw-sq { flex: none; }

/* ---------- inflation strips ---------- */
.gs-era { fill: var(--ink); font: 650 13px var(--display); letter-spacing: -0.01em; }
.gs-era-y { fill: var(--muted); font: 500 11.5px var(--font); }
.gs-rec-track { fill: var(--track); }
.gs-rec-fill, .sw-sq.gs-sw-rec { fill: color-mix(in srgb, var(--bad) 60%, var(--surface)); background: color-mix(in srgb, var(--bad) 60%, var(--surface)); }
.gs-row-base { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.gs-zero { stroke: var(--axis); stroke-width: 1.2; stroke-dasharray: 3 3; }
.gs-dot { stroke: var(--surface); stroke-width: 1; }
.gs-dot.up, .sw-sq.gs-sw-up { fill: var(--cash); background: var(--cash); }
.gs-dot.dn, .sw-sq.gs-sw-down { fill: var(--s1); background: var(--s1); }
.gs-dot.on { stroke: var(--ink); stroke-width: 2; }

/* ---------- the 1960s run ---------- */
.gs-bar.on { fill: var(--gold-ink); }
.gs-bar-lbl { fill: var(--gold-ink); font: 650 11.5px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ln.gs-off { stroke-width: 1.8; }
.gs-pt { stroke: var(--surface); stroke-width: 1.5; }
.gs-pt.a-cash { fill: var(--cash); }
.gs-cross { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.gs-cross-tie { stroke: var(--ink); stroke-width: 1; opacity: 0.6; }
.gs-cross-lbl { fill: var(--ink); font: 650 12px var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* ---------- the cube and the statue ---------- */
.gs-cube-front { fill: var(--gold); }
.gs-cube-top { fill: color-mix(in srgb, var(--gold) 62%, #fff); }
.gs-cube-side { fill: color-mix(in srgb, var(--gold) 78%, #000); }
.gs-cube-us .gs-cube-front, .sw-sq.gs-sw-us { fill: color-mix(in srgb, var(--gold) 66%, #000); background: color-mix(in srgb, var(--gold) 66%, #000); }
.gs-cube-us .gs-cube-top { fill: color-mix(in srgb, var(--gold) 80%, #000); }
.gs-cube-us .gs-cube-side { fill: color-mix(in srgb, var(--gold) 52%, #000); }
.gs-cube-yr .gs-cube-front, .sw-sq.gs-sw-yr { fill: color-mix(in srgb, var(--gold) 50%, var(--surface)); background: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.gs-cube-yr .gs-cube-top { fill: color-mix(in srgb, var(--gold) 30%, var(--surface)); }
.gs-cube-yr .gs-cube-side { fill: color-mix(in srgb, var(--gold) 62%, var(--surface)); }
.gs-cube.on .gs-cube-front, .gs-cube.on .gs-cube-top, .gs-cube.on .gs-cube-side { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.gs-cube-v { fill: var(--ink); font: 650 12px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.gs-cube-in { fill: color-mix(in srgb, var(--gold) 15%, #000); font: 700 12.5px var(--mono); letter-spacing: -0.02em; }
.gs-cube-guide { stroke: var(--gold-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.gs-lib { fill: color-mix(in srgb, var(--bond) 50%, var(--muted)); }
.gs-lib-ray { stroke: color-mix(in srgb, var(--bond) 50%, var(--muted)); stroke-width: 1.4; stroke-linecap: round; }
.gs-lib-tab { fill: color-mix(in srgb, var(--bond) 35%, var(--ink-2)); }
.gs-lib-flame { fill: var(--gold); }
.gs-lib-base { fill: color-mix(in srgb, var(--muted) 30%, var(--surface)); }
.gs-lib-ped { fill: color-mix(in srgb, var(--muted) 48%, var(--surface)); }
.on > .gs-lib, .on > .gs-lib-ped, .on > .gs-lib-base { stroke: var(--ink); stroke-width: 1; }
.gs-lib-lbl { fill: var(--ink-2); font: 600 12px var(--font); }

/* ---------- mine production ---------- */
.gs-half { fill: color-mix(in srgb, var(--gold) 9%, transparent); }
.gs-half-lbl { fill: var(--gold-ink); font: 650 11.5px var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.gs-mbar.gs-est, .sw-sq.gs-sw-est { opacity: 0.45; }
.sw-sq.gs-sw-est { background: var(--gold); }
.gs-mbar.on { fill: var(--gold-ink); }

/* ---------- the official prices and the dated facts ---------- */
.gs-px-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .gs-px-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.gs-px-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.gs-px-card .label { margin: 0; }
.gs-px-card .mid { color: var(--ink); }
.gs-px-note { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.gs-dl-box { margin-top: 12px !important; padding: 16px 18px; }
.gs-dl-box .label { margin: 0 0 10px; }
.gs-dl { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 28px; }
@media (max-width: 760px) { .gs-dl { column-count: 1; } }
.gs-dl li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; margin: 0 0 8px; break-inside: avoid;
  font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.gs-dl-d { font: 600 12px/1.55 var(--mono); letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 480px) { .gs-dl li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.gs-places tr.gs-tot th, .gs-places tr.gs-tot td { font-weight: 650; }