/* Article "Gold, jewelry, art and antiques" (/articles/gold-art-and-collectibles/):
   its own pictures, on top of articles.css. Classes start with tr-. Gold is the
   site's gold (--gold), stocks the S&P blue (--spx), cash and inflation red
   (--cash); silver c6, platinum c3, jewelry c5. */

/* ---------- the ladder ---------- */
.tr-plot-ladder { min-height: 340px; }
.tr-plot-ladder svg, .tr-plot-art svg, .tr-plot-strip svg { touch-action: pan-y; }
.tr-band { fill: var(--ink); fill-opacity: 0.025; }
.tr-band.alt { fill-opacity: 0.05; }
.tr-band.mkt { fill: var(--gold); fill-opacity: 0.06; }
.tr-band-lbl { fill: var(--muted); font: 600 11px var(--mono); letter-spacing: -0.02em; }
.tr-ev { fill: var(--ink); fill-opacity: 0.035; }
.tr-ev-bar { fill: var(--ink-2); fill-opacity: 0.35; }
.tr-ev-ban.tr-ev-bar { fill: var(--cash); fill-opacity: 0.55; }
.tr-ev-lbl { fill: var(--muted); font: 500 10.5px var(--font); }
.tr-xline { stroke: var(--axis); stroke-width: 1; }
.tr-real-area { fill: var(--gold); fill-opacity: 0.1; }
.ln.tr-q { stroke-width: 1.8; }
.tr-dot { stroke: var(--surface); stroke-width: 2; }
.tr-dot.q { fill: var(--s6); }
.tr-dot.r { fill: var(--gold); }
.tr-lbl { fill: var(--ink); font: 650 12px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.tr-cursor { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 3 3; }
.tr-tip-note { margin: -2px 0 4px 26px; font-size: 11px; color: var(--muted); }
.tr-tip-title { margin: -2px 0 6px; font-size: 12px; color: var(--ink-2); }
.tr-tip-sep { height: 1px; margin: 5px 0; background: var(--border); }
.tip b.tr-tip-sel { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- metals: the best month vs now ---------- */
.tr-fig-h { margin: 6px 10px 12px; font: 650 15px/1.3 var(--display); color: var(--ink); }
.tr-met { display: flex; flex-direction: column; gap: 14px; padding: 0 10px 8px; }
.tr-met-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 240px; align-items: center; gap: 16px; }
.tr-met-name { display: flex; align-items: center; gap: 8px; font: 650 15px var(--display); color: var(--ink); }
.tr-met-bar { position: relative; height: 26px; border-radius: 8px; background: var(--track); overflow: hidden; }
.tr-met-pk { position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--axis); }
.tr-met-now { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.tr-met-now.a-gold { background: var(--gold); }
.tr-met-now.c6 { background: var(--s6); }
.tr-met-now.c3 { background: var(--s3); }
.tr-met-num { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.tr-met-num b { font: 650 16px var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.tr-met-sub { color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) {
  .tr-met-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- jewelry: what $100 of the first year became ---------- */
.tr-hunds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.tr-hund { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.tr-hund .label { display: flex; align-items: center; gap: 8px; margin: 0; }
.tr-hund-sub { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 640px) { .tr-hunds { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- art: two price tags ---------- */
.tr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; padding: 6px 6px 8px; }
.is-full .tr-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tr-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 12px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 0.15s ease; }
.tr-card:hover { box-shadow: inset 0 0 0 1.5px var(--axis); }
.tr-card-head { display: flex; flex-direction: column; gap: 1px; }
.tr-card-artist { font: 650 15px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.tr-card-title { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.tr-tags { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; }
.tr-tag { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 9px 22px; border-radius: 6px 12px 12px 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow); }
.tr-tag::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--axis); background: var(--surface-2); }
.tr-tag-p { font: 650 18px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.tr-tag-w { font-size: 11px; line-height: 1.3; color: var(--muted); }
.tr-tag-arrow { display: flex; align-items: center; justify-content: center; min-width: 44px; position: relative; }
.tr-tag-arrow::before { content: ""; position: absolute; left: 2px; right: 6px; top: 50%; height: 1.5px; background: var(--axis); }
.tr-tag-arrow::after { content: ""; position: absolute; right: 2px; top: 50%; margin-top: -4px; border: 4.5px solid transparent; border-left: 6px solid var(--axis); border-right: 0; }
.tr-tag-arrow .num { position: relative; z-index: 1; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); font: 650 11.5px var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.tr-card.down .tr-tag-arrow .num { color: var(--bad); }
.tr-tag-mid { margin: -2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.tr-tag-mid .num { font: 600 11.5px var(--mono); color: var(--ink-2); }
.tr-tag-y { color: var(--muted); }
.tr-card-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; }
.tr-rate { display: flex; flex-direction: column; gap: 2px; }
.tr-rate .label { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; }
.tr-rate .sw-sq { width: 8px; height: 8px; }
.tr-rate b { font: 650 15px var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.tr-rate:first-child b { font-size: 17px; }
.tr-verdict { align-self: flex-start; padding: 4px 9px; border-radius: 999px; font: 600 11px/1 var(--font); letter-spacing: 0.02em; text-transform: uppercase; }
.tr-verdict.up { color: var(--spx-ink); background: color-mix(in srgb, var(--spx) 12%, transparent); }
.tr-verdict.down { color: var(--ink-2); background: var(--track); }
@media (max-width: 400px) {
  .tr-tag { padding-left: 18px; }
  .tr-tag::before { left: 6px; }
  .tr-tag-p { font-size: 16px; }
  .tr-tag-arrow { min-width: 38px; }
}

/* the time axis of all repeat sales */
.tr-plot-art { min-height: 360px; }
.tr-art-ln { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-art-ln.down { stroke: var(--bad); }
.tr-art-ln.on { stroke: var(--ink); stroke-width: 3; }
.tr-art-ln.down.on { stroke: var(--bad); }
.tr-art-ln.dim, .tr-art-dot.dim { opacity: 0.18; }
.tr-art-dot { fill: var(--ink-2); stroke: var(--surface); stroke-width: 1.5; }
.tr-art-dot.down { fill: var(--bad); }
.tr-art-dot.on { fill: var(--ink); }
.tr-art-dot.down.on { fill: var(--bad); }
.tr-ghost { opacity: 0.45; }
.tr-ghost.on { opacity: 1; stroke-width: 2; }
.tr-ghost.dim { opacity: 0.08; }
.tr-art-lbl { fill: var(--ink-2); font: 600 11px var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.tr-art-lbl.on { fill: var(--ink); font-weight: 700; }
.tr-art-lbl.dim { opacity: 0.25; }
.ln.tr-sw-art { stroke: var(--ink-2); stroke-width: 2.4; }
.tr-art-table td.text { min-width: 220px; white-space: normal; font-size: 13px; line-height: 1.5; }
.tr-art-table td.text a { color: var(--ink); text-decoration-color: var(--axis); }

/* ---------- the wall of the unmeasured ---------- */
.tr-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 1000px) { .tr-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tr-wall { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.tr-wall-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.tr-wall-card::after { content: "?"; position: absolute; right: 12px; top: 4px; font: 700 54px/1 var(--display); color: var(--ink); opacity: 0.05; pointer-events: none; }
.tr-wall-card b { font: 650 16px/1.25 var(--display); color: var(--ink); }
.tr-wall-card > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tr-wall-tag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; font: 600 11px/1 var(--font); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); background: var(--track); }
.tr-wall-card.dark { background: var(--tile-dark); }
.tr-wall-card.dark b, .tr-wall-card.dark > span:last-child { color: #fff; }
.tr-wall-card.dark > span:last-child { opacity: 0.85; }
.tr-wall-card.dark .tr-wall-tag { color: #fff; background: rgba(255, 255, 255, 0.14); }
.tr-wall-card.dark::after { content: "$"; color: #fff; opacity: 0.08; }

/* ---------- the ranking strip ---------- */
.tr-strip-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 4px 48px 6px 10px; }
.tr-strip-top .legend { padding: 0; margin: 0; }
.tr-seg { flex-wrap: wrap; }
.tr-plot-strip { min-height: 300px; }
.tr-strip-static { margin: 0; padding: 12px 24px; columns: 2 220px; font-size: 14px; }
.tr-strip-static li { margin: 0 0 6px; }
.tr-strip-static .sw-sq { margin-right: 6px; }
.sw-sq.tr-sw-on { background: var(--ink); border-radius: 50%; }
.sw-sq.tr-sw-other { background: var(--muted); opacity: 0.5; border-radius: 50%; width: 8px; height: 8px; }
.tr-zero { stroke: var(--ink); stroke-opacity: 0.5; stroke-width: 1.2; }
.tr-zero-lbl { fill: var(--ink-2); font: 600 11px var(--font); }
.tr-row-on { fill: var(--ink); fill-opacity: 0.04; }
.tr-row-lbl { fill: var(--ink); font: 600 13px var(--font); }
.tr-track { stroke: var(--grid); stroke-width: 1; }
.tr-ghost-dot { fill: var(--muted); fill-opacity: 0.45; }
.tr-stem { stroke-width: 3; stroke-linecap: round; }
.tr-stem.a-gold { stroke: var(--gold); } .tr-stem.a-spx { stroke: var(--spx); } .tr-stem.a-cash { stroke: var(--cash); }
.tr-stem.c3 { stroke: var(--s3); } .tr-stem.c5 { stroke: var(--s5); } .tr-stem.c6 { stroke: var(--s6); }
.tr-head { stroke: var(--surface); stroke-width: 2; }
.dot.c3.tr-head { fill: var(--s3); } .dot.c5.tr-head { fill: var(--s5); } .dot.c6.tr-head { fill: var(--s6); }
.tr-val { fill: var(--ink); font: 650 12.5px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* tables */
.tr-table td.text { text-align: left; white-space: normal; }
@media (prefers-reduced-motion: reduce) { .tr-card { transition: none; } }

/* graphite and black: the gold tints are brighter there, so softer fills */
:root[data-theme="dark"] .tr-real-area, :root[data-theme="black"] .tr-real-area { fill-opacity: 0.06; }
:root[data-theme="dark"] .tr-band.mkt, :root[data-theme="black"] .tr-band.mkt { fill-opacity: 0.035; }