/* Junior Gold Stocks. The palette of the assay office: parchment paper for the
   page, the warm black of a fire-assay crucible for the bands the prices sit
   on, and bullion gold for the one accent, with a green for what is up. The token names are the engine's
   shared ones (--copper is "the accent", --patina "the dark band"). */

:root {
  --page: #0a0a09;
  --card: #121210;
  --card-2: #191916;
  --ink: #f2eee4;
  --ink-2: #c8c3b6;
  --muted: #8a857a;
  --rule: #2a2924;
  --copper: #c9a14a;
  --copper-hi: #e6c068;
  --copper-lo: #8a6d2b;
  --copper-text: #e6c068;
  --copper-tint: #2a2312;
  --verdigris: #5bc08f;
  --verdigris-tint: #12261c;
  --patina: #121210;
  --patina-2: #191916;
  --band-ink: #f2eee4;
  --band-muted: #a39e91;
  --down: #e5735c;
  --shadow: none;
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --brand: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r: 0;
  color-scheme: dark;
}
/* One dark theme, by design (brand.theme pins it in the page). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15.5px/1.55 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }
.wrap { max-width: 1260px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .wrap { padding-left: 24px; padding-right: 24px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* --- TradingView embeds ---------------------------------------------------- */
.tv { position: relative; min-width: 0; }
.tv > script { display: none; }
.tv-wait { margin: 0; padding: 14px 0; font-size: 13px; color: var(--band-muted); }
.tv.is-ready .tv-wait { display: none; }
/* Loading state for live widgets: a shimmer bar with a label until the frame loads. */
.tv:not(.is-ready):not(.is-failed) .tv-wait { position: relative; overflow: hidden; border-radius: 8px; padding-left: 12px; background: rgb(140 160 178 / .12); }
.tv:not(.is-ready):not(.is-failed) .tv-wait::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent); animation: tv-shimmer 1.4s infinite; }
@keyframes tv-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tv-wait::after { animation: none !important; } }
.tv-credit { margin: 4px 0 0; font-size: 11px; text-align: right; opacity: .7; }
.tv-credit a:hover { text-decoration: underline; }
.tradingview-widget-container, .tradingview-widget-container__widget { width: 100%; }

/* --- ticker tape --------------------------------------------------------- */
.tape { background: var(--patina); color: var(--band-muted); min-height: 46px; border-bottom: 1px solid rgb(242 194 48 / .25); }
.tape .tv-wait { padding: 13px 24px; }
.tape .tv-credit { display: none; } /* the tape carries TradingView's own credit link */
.tape .tradingview-widget-container { height: 46px; }

/* --- masthead ------------------------------------------------------------ */
.masthead { background: var(--card); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
.mast-in { display: flex; align-items: center; gap: 12px 28px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo-mark { width: 40px; height: 40px; flex: none; }
.lm-t { fill: #fff; font: 800 18.5px var(--brand); }
.lm-n { fill: #fff; font: 700 7px var(--brand); opacity: .85; }
.logo-word { font: 800 28px/1 var(--brand); font-stretch: 72%; letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); }
.logo-word b { color: var(--copper); font-weight: 850; }
.logo-word i { font-style: normal; font-weight: 600; font-size: .5em; font-stretch: 100%; color: var(--muted); text-transform: lowercase; margin-left: 2px; }
.nav { display: flex; gap: 2px; margin-left: auto; font: 600 14.5px var(--ui); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 8px 12px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); }
.nav a:hover { color: var(--ink); background: var(--page); }
.nav a[aria-current="page"] { color: var(--copper-text); background: var(--copper-tint); }
.theme-btn { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.theme-btn:hover { color: var(--copper); border-color: var(--copper); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: block; }
}

/* --- the desk: copper plate + chart -------------------------------------- */
.desk { position: relative; background:
    radial-gradient(900px 420px at 18% -10%, rgb(242 194 48 / .22), transparent 60%),
    radial-gradient(700px 380px at 95% 120%, rgb(114 185 147 / .28), transparent 65%),
    var(--patina);
  color: var(--band-ink); overflow: hidden; }
.desk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.desk-in { position: relative; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; padding-block: 32px 36px; align-items: stretch; }

.plate { display: flex; flex-direction: column; gap: 14px; }
.plate-face { position: relative; overflow: hidden; border-radius: 14px; padding: 18px 16px 16px; color: #fff;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #2c3d4e 0%, #1c2a37 60%, #15212c 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .18), 0 24px 48px -20px rgb(0 0 0 / .6); }
.plate-face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .38) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen 1.6s .4s cubic-bezier(.3,.6,.3,1) 1 forwards; }
@keyframes sheen { to { transform: translateX(120%); } }
.plate-top { display: flex; align-items: center; gap: 14px; }
.el { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 8px; border: 1.5px solid rgb(255 255 255 / .55);
  font: 800 26px/1 var(--brand); position: relative; text-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.el small { position: absolute; top: 4px; right: 5px; font-size: 9.5px; font-weight: 700; }
.plate-name { font: 700 22px/1.05 var(--brand); font-stretch: 80%; }
.plate-name small { font: 500 12.5px var(--ui); opacity: .85; }
.plate .tv { min-height: 190px; }
/* The live quote sits in a dark inset, like a screen set into the copper plate:
   TradingView draws its numbers in white or price colours, which need a dark ground. */
.plate-screen { margin-top: 16px; padding: 8px 10px 4px; border-radius: 10px; background: #17150e;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / .55), 0 1px 0 rgb(255 255 255 / .35); }
.plate-screen .tv-credit { color: var(--band-muted); }
.plate .tv-wait { color: var(--band-muted); }

.plate-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--band-muted); }

.desk-chart { min-height: 470px; border-radius: 14px; background: #17150e; border: 1px solid rgb(255 255 255 / .07); padding: 8px; display: flex; flex-direction: column; }
.desk-chart .tradingview-widget-container { flex: 1; height: 450px; }
.desk-chart .tradingview-widget-container__widget { height: 100%; }
.desk-chart .tv-wait { padding: 16px; }
.desk-chart .tv-credit { color: var(--band-muted); padding: 0 6px 2px; }
.desk-compact .desk-in { padding-top: 24px; }

/* --- photo frames and logo chips ----------------------------------------- */
.ph { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--copper-lo), var(--copper)); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a:hover .ph img { transform: scale(1.03); }
.ph.tile { display: grid; place-items: center; background: var(--copper-tint); }
.lt { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: #fff; color: var(--ink);
  font: 800 11px var(--brand); font-stretch: 85%; letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.lt img { position: static; width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.lt.mono { background: linear-gradient(140deg, var(--copper-hi), var(--copper-lo)); color: #fff; box-shadow: none; }
.lt-lg { width: 72px; height: 72px; font-size: 16px; border-radius: 12px; }
.lt-lg img { padding: 9px; }

/* --- top story + just in -------------------------------------------------- */
.note { margin-top: 28px; padding: 20px 24px; background: var(--card); border-radius: var(--r); border-left: 4px solid var(--copper); box-shadow: var(--shadow); }
.note time { margin-left: 10px; font-size: 13px; color: var(--muted); }
.note h2 { margin: 6px 0 8px; font: 600 25px/1.2 var(--head); }
.note p { margin: 0 0 8px; max-width: 68ch; color: var(--ink-2); }

.top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; padding-block: 36px 12px; }
.kicker { display: inline-block; font: 700 13px var(--ui); color: var(--copper-text); }
.lead { position: relative; min-width: 0; }
.lead > a { display: block; position: relative; border-radius: var(--r); overflow: hidden; }
.lead-img { aspect-ratio: 16 / 9; }
.lead-over { position: absolute; inset: auto 0 0 0; padding: 120px 30px 26px; color: #fff;
  background: linear-gradient(to top, rgb(14 22 30 / .95) 0%, rgb(14 22 30 / .7) 45%, transparent 100%); }
.lead-over .kicker { color: #fff; background: var(--copper); padding: 3px 9px; border-radius: 999px; font-size: 12.5px; }
.lead h1 { margin: 12px 0 8px; font: 600 clamp(27px, 3.2vw, 42px)/1.08 var(--head); text-wrap: balance; letter-spacing: -.012em; }
.lead-over p { margin: 0; max-width: 60ch; font-size: 16px; color: rgb(255 255 255 / .88); }
.lead-meta { padding-top: 10px; }
.lead-text { align-self: start; display: flex; gap: 22px; align-items: flex-start; padding: 28px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.lead-text > a.lead-chip { display: block; flex: none; }
.lead-text h1 a:hover { color: var(--copper-text); }
.lead-text .dek { max-width: 60ch; font-size: 16.5px; }

.featured { min-width: 0; }
.featured h2, .box h2, .wire-head h2 { margin: 0; font: 800 26px/1.1 var(--brand); font-stretch: 75%; letter-spacing: -.005em; }
.featured h2 { padding-bottom: 6px; }
.row { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.row h3 { margin: 0; font: 600 17.5px/1.25 var(--head); text-wrap: pretty; }
.row h3 a:hover { color: var(--copper-text); }
.row .lt { width: 40px; height: 40px; }

/* new-since-last-visit marker */
.is-new h3::before, .lead.is-new h1::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--copper); vertical-align: .18em; box-shadow: 0 0 0 4px var(--copper-tint); }

/* --- meta row ------------------------------------------------------------ */
.meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.via { opacity: .85; }
.via-ext { opacity: 1; font-weight: 600; color: var(--ink-2); }
.via-ext i { font-style: normal; color: var(--copper-text); }
.tk { font: 700 11.5px var(--brand); font-stretch: 88%; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--copper-text); background: var(--copper-tint); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.dek { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }

/* --- layout -------------------------------------------------------------- */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding-block: 28px 56px; }
.main { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* --- the wire ------------------------------------------------------------ */
.wire { min-width: 0; }
.wire-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 14px; }
.wire-head .count { font-size: 13.5px; color: var(--muted); }
.find { position: relative; flex: 1 1 260px; max-width: 360px; }
.find svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.find input { width: 100%; font: 15px var(--ui); padding: 10px 14px 10px 38px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); }
.find input:focus { border-color: var(--copper); outline: none; box-shadow: 0 0 0 3px var(--copper-tint); }


.wire-new { margin: 8px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--copper-tint); color: var(--copper-text); font-weight: 600; font-size: 14px; }
.wire-list { display: flex; flex-direction: column; }
.w { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.th { display: block; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; }
.th .ph { width: 100%; height: 100%; }
.th-chip { display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.th-chip .lt { width: 52px; height: 52px; box-shadow: none; }
.w h3 { margin: 0; font: 600 19px/1.25 var(--head); text-wrap: pretty; }
.w h3 a:hover { color: var(--copper-text); }
.w .dek { font-size: 14.5px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.w-meta .meta { margin-top: 0; }
.tag { font: 700 12px var(--ui); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tag-markets { background: var(--copper-tint); color: var(--copper-text); }
.tag:hover { filter: brightness(.95); text-decoration: underline; }
.wire-empty { padding: 28px 0; color: var(--ink-2); }
.wire-empty button, .more { font: 600 14px var(--ui); color: var(--copper-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.more { display: block; width: 100%; margin-top: 20px; padding: 13px; border-radius: 999px; text-decoration: none; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.more:hover { box-shadow: inset 0 0 0 1px var(--copper); }

/* --- rail boxes ---------------------------------------------------------- */
.box { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.box h2 { font-size: 22px; margin-bottom: 12px; }
.box > p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; }
.watch { padding-bottom: 12px; }
.watch-tv { min-height: 560px; }
.watch .tv-wait { color: var(--muted); }
.watch .tv-credit { color: var(--muted); }
.cos { list-style: none; margin: 0; padding: 0; }
.cos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 10px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 14.5px; }
.cos li:first-child { border-top: 0; padding-top: 0; }
.cos a:hover { color: var(--copper-text); }

.conv { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.conv label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.conv input { width: 100%; font: 700 20px var(--brand); font-stretch: 90%; font-variant-numeric: tabular-nums; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--page); color: var(--ink); }
.conv input:focus { border-color: var(--copper); outline: none; box-shadow: 0 0 0 3px var(--copper-tint); }
.conv-eq { padding-bottom: 12px; font: 700 18px var(--brand); color: var(--muted); }

.element { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 18px; align-items: start;
  background: linear-gradient(160deg, var(--verdigris-tint), var(--card) 60%); }
.el-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; color: #fff;
  font: 800 34px/1 var(--brand); background: linear-gradient(140deg, #3a4d5f, #22313f 60%, #1a1710); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4); }
.el-tile small { position: absolute; top: 6px; left: 8px; font-size: 11px; }
.el-tile span { font: 600 10.5px var(--ui); margin-top: 4px; opacity: .9; }
.element dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13.5px; }
.element dt { color: var(--muted); }
.element dd { margin: 0; font-weight: 600; }
.el-where { grid-column: 1 / -1; margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }

.signup { display: flex; gap: 8px; }
.signup input { flex: 1; min-width: 0; font: 15px var(--ui); padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--page); color: var(--ink); }
.signup button { font: 700 14px var(--ui); background: var(--copper); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.signup button:hover { background: var(--copper-lo); }
.signup-msg { margin: 0 !important; font-weight: 600; color: var(--ink) !important; }

/* --- section and company pages ------------------------------------------- */
.sec-hero { background: var(--patina); color: var(--band-ink); padding-block: 34px 30px; position: relative; overflow: hidden; }
.sec-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--copper-hi), var(--copper-lo)); }
.sec-hero h1 { margin: 6px 0 6px; font: 800 clamp(36px, 5vw, 60px)/1 var(--brand); font-stretch: 72%; letter-spacing: -.01em; }
.crumb { margin: 0; font-size: 13px; color: var(--band-muted); }
.crumb a:hover { color: var(--band-ink); text-decoration: underline; }
.sec-standfirst { margin: 0; max-width: 62ch; color: var(--band-muted); font-size: 16px; }
.sec-markets + .desk { padding-top: 0; }

/* Company pages still use these. */
.sec { display: flex; flex-direction: column; gap: 18px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; }
.sec-head h2 { margin: 0; font: 800 26px/1.1 var(--brand); font-stretch: 75%; }
.sec-head span { font-size: 13px; color: var(--muted); }
.latest { list-style: none; margin: 0; padding: 0; }
.latest li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding-block: 12px; border-top: 1px solid var(--rule); font: 600 16px/1.3 var(--head); }
.latest li:first-child { border-top: 0; }
.latest time { font: 600 12px/1.7 var(--ui); color: var(--muted); }
.latest a:hover { color: var(--copper-text); }
.sp-tag { font: 700 11px var(--ui); color: var(--copper-text); border: 1px solid currentColor; padding: 1px 7px; border-radius: 999px; }
.disclose { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- footer -------------------------------------------------------------- */
.foot { background: var(--patina); color: var(--band-muted); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; padding-block: 40px 32px; }
.foot .logo-word { font-size: 24px; color: var(--band-ink); }
.foot .logo-word b { color: #f2c230; }
.foot .logo-word i { color: var(--band-muted); }
.foot-brand p { margin: 10px 0 0; font-size: 14px; max-width: 56ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; font-size: 14.5px; color: var(--band-ink); align-items: flex-start; }
.foot nav a:hover { color: #f2c230; }
.legal { grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .1); font-size: 12.5px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .desk-in { grid-template-columns: 300px minmax(0, 1fr); }
  .columns { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
}
@media (max-width: 900px) {
  .mast-in { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; margin-left: -12px; }
  .theme-btn { margin-left: auto; }
  .desk-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 22px 26px; }
  .desk-chart { min-height: 360px; }
  .desk-chart .tradingview-widget-container { height: 340px; }
  .top { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; }
  .columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .masthead { position: static; }
  .logo-word { font-size: 24px; }
  .logo-mark { width: 34px; height: 34px; }
  .lead-img { aspect-ratio: 4 / 5; }
  .lead-over { padding: 80px 18px 18px; }
  .lead-over p { font-size: 14.5px; }
  .lead-text { padding: 20px; gap: 14px; }
  .lt-lg { width: 52px; height: 52px; }
  .w { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .th { width: 56px; height: 56px; }
  .th-chip .lt { width: 40px; height: 40px; }
  .w h3 { font-size: 17px; }
  .find { max-width: none; flex-basis: 100%; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .plate-face::after { animation: none; }
  .ph img { transition: none; }
}
.tk-band { background: rgb(242 194 48 / .18); color: #f8d65a; font-size: 13px; padding: 3px 10px; }
.sec-hero .disclose { color: var(--band-muted); }
/* An iframe whose color-scheme differs from its parent's is painted opaque.
   TradingView's documents are light-scheme, so match them to keep the
   embeds transparent in dark mode. */
.tv iframe { color-scheme: light; }

/* --- article pages ------------------------------------------------------- */
.story-cols { padding-top: 28px; }
.story { min-width: 0; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(20px, 4vw, 44px); }
.story-crumb { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.story-crumb a:hover { color: var(--copper-text); text-decoration: underline; }
.story-head, .story-quotes, .story-body, .story-source, .story-fig { max-width: 720px; }
.story-head { padding-bottom: 20px; }
.story-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.story-kind { font: 700 13px var(--ui); color: var(--verdigris); }
.story h1 { margin: 0 0 14px; font-family: var(--head); font-weight: 600; letter-spacing: -.012em; line-height: 1.12; text-wrap: balance; }
.story h1.h-short { font-size: clamp(30px, 3.6vw, 44px); }
.story h1.h-mid { font-size: clamp(27px, 3vw, 36px); }
.story h1.h-long { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.18; }
.story-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 14px; color: var(--muted); }
.story-meta span::before { content: "via "; }
.story-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 14px 0 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.story-quotes .tv { min-height: 72px; border-radius: 8px; background: var(--page); padding: 4px 6px 0; }
.story-quotes .tv-wait { padding: 8px 6px; color: var(--muted); font-size: 12.5px; }
.story-quotes .tv-credit { display: none; } /* each quote carries TradingView's mark; the panel in the rail carries the credit line */
.story-stock .tv { min-height: 380px; }
.story-stock .tv-wait, .story-stock .tv-credit { color: var(--muted); }
.stock-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.story-fig { margin: 24px 0 0; border-radius: 10px; overflow: hidden; }
.story-fig img { display: block; width: 100%; height: auto; }
.story-body { padding-top: 24px; font: 400 18px/1.65 var(--head); color: var(--ink); overflow-wrap: anywhere; }
.story-body p { margin: 0 0 1.05em; }
.story-body h2, .story-body h3, .story-body h4 { margin: 1.6em 0 .5em; font: 800 22px/1.2 var(--brand); font-stretch: 80%; }
.story-body ul, .story-body ol { padding-left: 1.3em; margin: 0 0 1.05em; }
.story-body li { margin-bottom: .35em; }
.story-body a { color: var(--copper-text); text-decoration: underline; text-underline-offset: 2px; }
.story-body img { max-width: 100%; height: auto; border-radius: 6px; }
.story-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.2em; font: 14px/1.45 var(--ui); }
.story-body th, .story-body td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
.story-body th { background: var(--page); font-weight: 700; }
.story-body blockquote { margin: 0 0 1.05em; padding-left: 16px; border-left: 3px solid var(--copper); color: var(--ink-2); }
.story-source { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.story-source p { margin: 0 0 6px; }
.story-source a { color: var(--copper-text); text-decoration: underline; }
.story-price .tv-wait, .story-price .tv-credit { color: var(--muted); }
.related { list-style: none; margin: 0; padding: 0; }
.related li { padding-block: 11px; border-top: 1px solid var(--rule); font: 600 15.5px/1.3 var(--head); }
.related li:first-child { border-top: 0; padding-top: 0; }
.related a:hover { color: var(--copper-text); }
.related time { display: block; margin-top: 4px; font: 500 12.5px var(--ui); color: var(--muted); }
.related-more { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.related-more a { color: var(--copper-text); }
@media (max-width: 600px) {
  .story-body { font-size: 17px; }
}

/* --- home: lead + two secondary stories, so the column matches "Just in" -- */
.top-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.seconds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.top { align-items: start; }
.second { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.second .lt { width: 40px; height: 40px; }
.second h3 { margin: 0; font: 600 18px/1.25 var(--head); text-wrap: pretty; }
.second h3 a:hover { color: var(--copper-text); }
@media (max-width: 600px) { .seconds { grid-template-columns: minmax(0, 1fr); } }

/* rail follows the reader down a long wire */
@media (min-width: 901px) { .columns > .rail { align-self: start; position: sticky; top: 84px; } }

/* --- copper basics strip --------------------------------------------------- */
.basics { padding-bottom: 56px; }
.basics > h2 { margin: 0 0 14px; font: 800 26px/1.1 var(--brand); font-stretch: 75%; }
.basics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.basic { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.basic h2 { margin: 0 0 12px; font: 800 22px/1.1 var(--brand); font-stretch: 75%; }
.basic > p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; }
.venues { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; font-size: 14px; }
.venues dt { font: 800 15px var(--brand); font-stretch: 85%; color: var(--copper-text); }
.venues dd { margin: 0; color: var(--ink-2); }
@media (max-width: 1000px) { .basics-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- smaller quotes under the copper card --------------------------------- */
.plate-more { display: grid; gap: 8px; }
.plate-more .tv { min-height: 68px; border-radius: 10px; background: rgb(0 0 0 / .22); border: 1px solid rgb(255 255 255 / .06); padding: 2px 6px 0; }
.plate-more .tv-credit { display: none; }
.plate-more .tv-wait { padding: 8px; color: var(--band-muted); font-size: 12.5px; }

/* --- ranked tables: copper ETFs and copper stocks -------------------------- */
.sec-rank::after { background: linear-gradient(90deg, var(--copper-hi), var(--copper-lo)); }
.rank-page { padding-block: 24px 56px; }
.rank-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 0 0 12px; }
.rank-bar p { margin: 0; }
.rank-live { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.3 var(--ui); color: var(--ink); }
.rank-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--verdigris); box-shadow: 0 0 0 0 rgb(61 122 88 / .5); animation: rank-pulse 2s infinite; }
.rank-live[data-off] .dot { background: var(--muted); animation: none; }
@keyframes rank-pulse { 0% { box-shadow: 0 0 0 0 rgb(61 122 88 / .45); } 70% { box-shadow: 0 0 0 7px rgb(61 122 88 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 122 88 / 0); } }
@media (prefers-reduced-motion: reduce) { .rank-live .dot { animation: none; } }
.rank-src { font-size: 12.5px; color: var(--muted); }

.rank-wrap { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
table.rank { width: 100%; border-collapse: collapse; font-size: 15px; }
table.rank th, table.rank td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
table.rank tbody tr:last-child > * { border-bottom: 0; }
table.rank thead th { background: var(--patina); color: var(--band-ink); font: 700 11.5px/1.2 var(--ui); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; padding-block: 13px; }
table.rank .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rank tbody tr { transition: background-color .15s; }
table.rank tbody tr:hover > * { background: color-mix(in srgb, var(--copper-tint) 60%, transparent); }

table.rank .sym { white-space: nowrap; width: 1%; }
table.rank .rk { display: inline-block; width: 26px; vertical-align: top; padding-top: 2px; color: var(--copper-text); font: 700 12px/1 var(--ui); }
table.rank .sym-in { display: inline-block; vertical-align: top; }
table.rank .sym b { display: block; font: 800 16px/1.15 var(--brand); font-stretch: 85%; letter-spacing: .01em; color: var(--ink); }
table.rank .sym small { display: block; margin-top: 3px; font: 600 10.5px/1 var(--ui); letter-spacing: .06em; color: var(--muted); }
table.rank .nm-m { display: none; }
table.rank .nm { font-weight: 600; line-height: 1.3; }
table.rank .nm small { display: block; margin-top: 3px; font-weight: 400; font-size: 12.5px; color: var(--muted); }

table.rank .px { font-weight: 700; font-size: 15.5px; }
table.rank .px small { margin-left: 5px; font: 600 10.5px/1 var(--ui); letter-spacing: .05em; color: var(--muted); }
table.rank .sz { color: var(--ink-2); font-weight: 600; }
table.rank .na { color: var(--muted); font-weight: 400; }

/* Daily and YTD moves as tinted chips: arrow, sign and colour together. */
.chg { display: inline-flex; align-items: center; gap: 5px; min-width: 86px; justify-content: flex-end; padding: 5px 9px; border-radius: 999px; font: 700 13.5px/1 var(--ui); font-variant-numeric: tabular-nums; }
.chg i { font-style: normal; font-size: 9px; }
.chg.up { color: #2c6b48; background: #dcefe3; }
.chg.down { color: #a8311f; background: #fbe3de; }
.chg.flat { color: var(--muted); background: var(--page); }
.chg.na { background: none; min-width: 0; }
:root[data-theme="dark"] .chg.up { color: #8fd6ae; background: #123322; }
:root[data-theme="dark"] .chg.down { color: #ff9a85; background: #3a1812; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chg.up { color: #8fd6ae; background: #123322; }
  :root:not([data-theme="light"]) .chg.down { color: #ff9a85; background: #3a1812; }
}
/* A brief copper flash when a live update changes a price. */
table.rank td.flash { animation: rank-flash 1.2s ease-out; }
@keyframes rank-flash { from { background: var(--copper-tint); } to { background: transparent; } }

table.rank .short { display: none; }
.rank-notes { max-width: 78ch; margin-top: 22px; color: var(--ink-2); font-size: 14px; }
.rank-notes p { margin: 0 0 10px; }

/* Phones: the name moves under the ticker so five numeric-friendly columns fit. */
@media (max-width: 700px) {
  table.rank { font-size: 13.5px; }
  table.rank th, table.rank td { padding: 11px 6px; }
  table.rank th:first-child, table.rank td:first-child { padding-left: 12px; }
  table.rank th:last-child, table.rank td:last-child { padding-right: 12px; }
  table.rank thead th { font-size: 10.5px; letter-spacing: .04em; }
  table.rank .c-nm, table.rank .rk { display: none; }
  table.rank .sym { width: auto; white-space: normal; }
  table.rank .sym b { font-size: 14.5px; display: inline; }
  table.rank .sym small { display: inline; margin: 0 0 0 5px; font-size: 9.5px; }
  table.rank .nm-m { display: block; margin-top: 3px; max-width: 128px; font: 500 11.5px/1.25 var(--ui); color: var(--muted); }
  table.rank .px { font-size: 13.5px; }
  table.rank .px small { display: block; margin: 2px 0 0; font-size: 9.5px; }
  table.rank .long { display: none; }
  table.rank .short { display: inline; }
  .chg { min-width: 0; padding: 4px 6px; font-size: 12px; gap: 3px; }
  .chg i { display: none; }
}

/* --- the two streams on the home page --------------------------------------- */
.streams { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) 300px; gap: 36px; padding-block: 28px 56px; align-items: start; }
.stream { min-width: 0; }
.stream-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 3px solid var(--ink); }
.stream-copper .stream-head { border-bottom-color: var(--copper); }
.stream-head h2 { margin: 0; font: 800 26px/1.1 var(--brand); font-stretch: 75%; letter-spacing: -.005em; }
.stream-head h2 a:hover { color: var(--copper-text); }
.stream-more, .stream-foot { font: 600 13.5px var(--ui); color: var(--copper-text); }
.stream-more:hover, .stream-foot:hover { text-decoration: underline; }
.stream-sub { margin: 8px 0 2px; font-size: 13.5px; color: var(--muted); }
.stream-foot { display: inline-block; margin-top: 14px; }
.stream .w { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.stream .w .th { width: 56px; height: 56px; }
.stream .w h3 { font-size: 17.5px; }
.stream .w .dek { font-size: 14px; }

/* Copper News river: dense, Techmeme-style. */
.river { display: flex; flex-direction: column; }
.rv { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.rv-ic .lt { width: 22px; height: 22px; border-radius: 5px; font-size: 9px; box-shadow: inset 0 0 0 1px var(--rule); }
.rv-ic .lt img { padding: 2px; }
.rv h3 { margin: 0; font: 600 16px/1.3 var(--head); text-wrap: pretty; }
.rv h3 a:hover { color: var(--copper-text); }
.rv .dek { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.rv-src { font-weight: 700; color: var(--ink-2); }
.rv-src i { font-style: normal; color: var(--copper-text); }
.rv-src:hover { color: var(--copper-text); }
.rv .tk { font-size: 10.5px; }
.also { flex-basis: 100%; font-size: 12px; }
.also a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.also a:hover { color: var(--copper-text); }

/* The full stream pages. */
.stream-page { padding-block: 24px 56px; max-width: 920px; }
.stream-page .wire-head { justify-content: space-between; }
.river-full .rv { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.river-full .rv-ic .lt { width: 28px; height: 28px; }
.river-full .rv h3 { font-size: 18px; }
.stream-note { margin-top: 22px; font-size: 13px; color: var(--muted); max-width: 70ch; }
.sec-hero.sec-mining::after { background: linear-gradient(90deg, var(--copper-hi), var(--copper-lo)); }
.sec-hero.sec-company::after { background: linear-gradient(90deg, #b3a888, #4a4333); }

@media (max-width: 1180px) {
  .streams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .streams > .rail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  .streams { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .streams .river .rv:nth-child(n+16) { display: none; } /* 15 on a phone; the rest are a tap away */
  .streams > .rail { grid-template-columns: minmax(0, 1fr); }
}

/* --- newsletter: CTA band, form states, sticky bar, cookie banner ------------ */
.cta-band { background: linear-gradient(90deg, #4f3706, #7a5a00 55%, #8f6a00); color: #fff; } /* fixed in both themes: white text needs the dark ochre */
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 12px; }
.cta-copy { margin: 0; font-size: 15px; line-height: 1.4; max-width: 640px; }
.cta-copy b { font-weight: 800; }
.signup { position: relative; }
.signup-compact { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.signup-compact input { width: 260px; max-width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .5); background: #fff; color: #1d1a12; font: 500 15px var(--ui); }
.signup-compact button { height: 40px; padding: 0 16px; border-radius: 8px; border: 0; background: #1d1a12; color: #fff; font: 700 14.5px var(--ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.signup-compact button:hover { background: #000; }
.cta-band .signup-err, .cta-band .signup-msg { flex-basis: 100%; margin: 2px 0 0; color: #fff; font-weight: 600; font-size: 13.5px; }
.cta-band .signup-err { background: rgb(40 30 0 / .35); padding: 4px 8px; border-radius: 6px; }
.signup-err { margin: 8px 0 0; color: var(--down); font-size: 13.5px; font-weight: 600; }
.signup-msg { margin: 8px 0 0; color: var(--verdigris); font-size: 13.5px; font-weight: 600; }
.signup.has-error input { border-color: var(--down); box-shadow: 0 0 0 2px rgb(200 67 47 / .25); }
.signup button:disabled { opacity: .7; cursor: default; }
.btn-busy { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.signup.is-busy .btn-busy { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 16px; background: var(--patina); color: var(--band-ink); box-shadow: 0 -6px 20px rgb(0 0 0 / .25); }
.sticky-cta[hidden] { display: none; }
.sticky-cta p { margin: 0; flex: 1; font-size: 14px; }
.sticky-cta p span { color: var(--band-muted); }
.sticky-btn { padding: 9px 16px; border-radius: 8px; background: var(--copper); color: #fff; font: 700 14px var(--ui); }
.sticky-x { width: 32px; height: 32px; border: 0; background: none; color: var(--band-muted); font-size: 22px; line-height: 1; cursor: pointer; }
body.has-sticky { padding-bottom: 64px; }

.consent { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 12px 40px -8px rgb(0 0 0 / .35); }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 280px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.consent a { color: var(--copper-text); text-decoration: underline; }
.consent-btns { display: flex; gap: 8px; }
.btn-solid, .btn-ghost { height: 38px; padding: 0 16px; border-radius: 8px; font: 700 14px var(--ui); cursor: pointer; }
.btn-solid { border: 0; background: var(--copper); color: #fff; }
.btn-ghost { border: 1px solid var(--rule); background: transparent; color: var(--ink); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.foot-legal a, .linkish { color: var(--band-muted); }
.foot-legal a:hover, .linkish:hover { color: var(--band-ink); text-decoration: underline; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

@media (max-width: 700px) {
  .cta-in { padding-block: 10px; }
  .cta-copy { font-size: 13.5px; }
  .signup-compact { width: 100%; }
  .signup-compact input { flex: 1; width: auto; min-width: 0; }
}

/* --- plain content pages: 404, thanks, privacy, terms, contact --------------- */
.doc { max-width: 760px; padding-block: 32px 64px; }
.doc h2 { margin: 32px 0 8px; font: 800 24px/1.15 var(--brand); font-stretch: 80%; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.doc a { color: var(--copper-text); text-decoration: underline; }
.doc .updated { color: var(--muted); font-size: 14px; }
.doc .placeholder { background: #fff3c4; color: #5c4300; padding: 0 4px; border-radius: 4px; }
.doc-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 0; list-style: none; }
.doc-links a { display: inline-block; padding: 9px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-weight: 600; }
.doc-links a:hover { border-color: var(--copper); color: var(--copper-text); }

/* The section menu scrolls sideways on narrow screens; fade the right edge so
   it is obvious there is more. */
@media (max-width: 900px) {
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
}
/* Keep the band's form a fixed width so an error message wraps under the
   field instead of pushing the whole form onto a new line. */
@media (min-width: 701px) {
  .cta-band .signup-compact { flex: 0 1 420px; justify-content: flex-end; }
  .cta-band .signup-compact input { flex: 1; width: auto; }
}

/* Article pages: links to the company's stock channel on CEO.CA. */
.ceo-chat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ceo-chat span { margin-right: 2px; }
.ceo-tk { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font: 700 13px var(--ui); letter-spacing: .01em; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.ceo-tk:hover { border-color: var(--copper); color: var(--copper-text); }

/* --- house ads: CEO.CA and CEO.CA Plus -------------------------------------- */
:root { --ceo-red: #c4161c; --ceo-ink: #111418; }
.ad { position: relative; }
.ad-label { display: block; margin-bottom: 8px; font: 600 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ceo-mark { font: 700 15px/1 "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .06em; color: var(--ceo-ink); }
.ceo-mark i { font-style: normal; color: var(--ceo-red); }
.ad-plus, .ad-community { padding: 18px 18px 16px; border-radius: var(--r); background: #fff; border: 1px solid #ece6d2; box-shadow: var(--shadow); color: var(--ceo-ink); }
.ad-plus { border-top: 4px solid var(--ceo-red); }
.ad-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ad-plus-tag { padding: 3px 7px; border-radius: 4px; background: var(--ceo-red); color: #fff; font: 800 10.5px/1 var(--ui); letter-spacing: .1em; }
.ad-head { margin: 0 0 10px; font: 800 21px/1.15 "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: -.01em; color: var(--ceo-ink); text-transform: none; }
.ad-head b { color: var(--ceo-red); }
.ad-body { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #453e2f; }
.ad-points { margin: 0 0 14px; padding: 0; list-style: none; }
.ad-points li { position: relative; padding: 0 0 7px 20px; font-size: 13.5px; line-height: 1.4; color: #453e2f; }
.ad-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ceo-red); font-weight: 800; }
.ad-btn { display: block; padding: 11px 14px; border-radius: 999px; background: var(--ceo-red); color: #fff; font: 800 14px/1 var(--ui); text-align: center; letter-spacing: .02em; }
.ad-btn:hover { background: #a50f14; }
/* The whole Plus / community card is the link: the button's ::after stretches
   over the card (.ad is position:relative), so a click on the logo, headline or
   text goes through too. Still one link, so screen readers and the GA ad_click
   event see a single ad. */
.ad-plus .ad-btn::after, .ad-community .ad-btn::after { content: ""; position: absolute; inset: 0; }
.ad-plus .ad-btn:focus-visible, .ad-community .ad-btn:focus-visible { outline: none; }
.ad-plus:has(.ad-btn:focus-visible), .ad-community:has(.ad-btn:focus-visible) { outline: 3px solid var(--ceo-red); outline-offset: 2px; }
.ad-plus:hover, .ad-community:hover { border-color: var(--ceo-red); }
.ad-fine { margin: 8px 0 0; font-size: 12px; color: #6b7280; text-align: center; }
.story .ad-community { margin: 28px 0 8px; max-width: 720px; }
.story .ad-community .ad-btn { display: inline-block; padding: 11px 20px; }

/* One-line version inside lists. */
.ad-inline { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ad-inline .ad-label { margin-bottom: 6px; }
.ad-inline-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #ece6d2; color: var(--ceo-ink); }
.ad-inline-link:hover { border-color: var(--ceo-red); }
.ad-inline-text { flex: 1; font-size: 13.5px; line-height: 1.4; color: #453e2f; }
.ad-inline-text b { color: var(--ceo-ink); }
.ad-inline-cta { flex: none; font: 800 13px var(--ui); color: var(--ceo-red); white-space: nowrap; }
.rank-page .ad-inline { margin-top: 18px; border-bottom: 0; }
@media (max-width: 520px) {
  .ad-inline-link { flex-wrap: wrap; gap: 6px 10px; }
  .ad-inline-text { flex-basis: 100%; order: 2; }
  .ad-inline-cta { order: 3; }
}

/* Owner's logo in the footer (EarthLabs, white version for the dark footer). */
.foot-owner { display: inline-flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.foot-owner span { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--band-muted); }
.foot-owner img { display: block; width: 200px; height: auto; opacity: .92; transition: opacity .15s; }
.foot-owner:hover img { opacity: 1; }

/* Honeypot field for bots; never visible. */
.signup .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* mining.com stories stand out in the Copper News lists. */
.rv.rv-mc { position: relative; margin: 4px 0; padding: 12px 12px 12px 14px; border: 1px solid #ead39d; border-left: 4px solid var(--copper); border-radius: 10px; background: linear-gradient(90deg, var(--copper-tint), color-mix(in srgb, var(--copper-tint) 35%, var(--card))); }
.rv.rv-mc + .rv:not(.rv-mc) { border-top: 0; }
.rv.rv-mc h3 { font-weight: 700; }
.rv.rv-mc .rv-src { color: var(--copper-text); }
.mc-badge { display: inline-block; margin-bottom: 4px; padding: 3px 7px 2px; border-radius: 4px; background: var(--copper); color: #fff; font: 800 10px/1 var(--ui); letter-spacing: .1em; }
:root[data-theme="dark"] .rv.rv-mc { border-color: #4d3a12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rv.rv-mc { border-color: #4d3a12; } }
.river-full .rv.rv-mc { padding: 14px 14px 14px 16px; }

/* CEO.CA logo: in the ads (always on white) and on article pages, where the
   page follows light/dark, so the pale-lettered version swaps in on dark. */
.ceo-logo { display: block; height: 18px; width: auto; }
.ad-inline .ceo-logo { height: 15px; flex: none; }
.ceo-chat-logo { display: inline-flex; align-items: center; margin-right: 4px; }
.ceo-chat-logo img { height: 14px; width: auto; }
.ceo-chat-logo .on-dark { display: none; }
:root[data-theme="dark"] .ceo-chat-logo .on-light { display: none; }
:root[data-theme="dark"] .ceo-chat-logo .on-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ceo-chat-logo .on-light { display: none; }
  :root:not([data-theme="light"]) .ceo-chat-logo .on-dark { display: inline; }
}

/* --- Copper on X ------------------------------------------------------------ */
.xposts { padding-bottom: 48px; }
.xposts .stream-head { margin-bottom: 16px; }
.xposts-sub { font-size: 13.5px; color: var(--muted); }
.xp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.xp { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); min-width: 0; }
.xp-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xp-av img, .xp-mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: linear-gradient(140deg, var(--copper-hi), var(--copper-lo)); color: #fff; font: 700 13px var(--ui); }
.xp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.xp-who b { font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-who span { font-size: 13px; color: var(--muted); }
.xp-who:hover b { text-decoration: underline; }
.xp-tick { display: none; }
.xp-x { flex: none; color: var(--ink); }
.x-logo { width: 18px; height: 18px; fill: currentColor; display: block; }
.xp-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.xp-text a { color: var(--copper-text); }
.xp-text a:hover { text-decoration: underline; }
.xp-foot { margin-top: auto; font-size: 12.5px; color: var(--muted); }
.xp-foot a:hover { color: var(--copper-text); }
@media (max-width: 1000px) { .xp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .xp-grid { grid-template-columns: minmax(0, 1fr); } .xp:nth-child(n+4) { display: none; } }

/* Compact CEO.CA Plus ad at the foot of "Just in". */
.featured .ad-plus-mini { margin-top: 16px; padding: 14px 16px; }
.ad-plus-mini .ad-brand { margin-bottom: 8px; }
.ad-mini-text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #453e2f; }
.ad-plus-mini .ad-btn { display: inline-block; padding: 10px 18px; }

/* --- Junior Gold Stocks: the bullion stripe ---------------------------------
   The one ornament on the site. A band of bar gold, dull at the edges and
   bright at the shoulder like light across an ingot, runs along the top of the
   price plate, the way an assay certificate carries a gold rule. */
:root { --core: repeating-linear-gradient(90deg,
  #8a6200 0, #c99a14 14px, #f2c230 34px, #fff0a0 48px, #f2c230 62px, #c99a14 82px, #8a6200 96px); }
.plate-face { padding-top: 26px; }
.plate-face::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--core);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .25); }
.plate-face::after { display: none; }
.el { border-color: rgb(242 194 48 / .7); color: #f8d65a; font-size: 20px; letter-spacing: .02em; }
.el small { color: var(--band-muted); }
.desk-quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* one per row: TradingView's quote needs ~300px to show a price whole */
.desk-quotes .tv { min-height: 0; border-radius: 6px; background: rgb(255 255 255 / .04); padding: 4px 6px 0; }
.desk-quotes .tv-credit { display: none; }
.logo-word b { color: var(--copper); }
.foot .logo-word b { color: #f2c230; }

/* Gold basics: the path from claim to mine, and the gram-metre sum. */
.stages { margin: 0; padding: 0; list-style: none; counter-reset: stage; display: grid; gap: 0; }
.stages li { counter-increment: stage; position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.4; }
.stages li:first-child { border-top: 0; }
.stages li::before { content: counter(stage); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 800 14px var(--brand); color: var(--copper-text); background: var(--copper-tint); }
.stages b { font: 700 14px var(--ui); color: var(--ink); }
.stages span { color: var(--muted); }
.basic > .gm-out { margin: 14px 0 0; font: 800 30px/1 var(--brand); font-variant-numeric: tabular-nums; color: var(--copper-text); }
.gm-out small { font: 500 13px var(--ui); color: var(--muted); margin-left: 6px; }
.basic > .gm-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- Release categories ------------------------------------------------------
   One quiet tag per release; drill results, the category readers come for,
   in green. The link row over a list scrolls sideways on a phone
   rather than wrapping into a wall of buttons. */
:root { --cat-bg: #1f1d17; --cat-ink: #c8c3b6; }
.tag-cat { background: var(--cat-bg); color: var(--cat-ink); }
.tag-cat-drill-results { background: var(--verdigris-tint); color: var(--verdigris); }
.cat-nav { display: flex; gap: 6px; margin: 2px 0 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.cat-nav a { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); font: 600 13.5px var(--ui); white-space: nowrap; }
.cat-nav a:hover { border-color: var(--copper); color: var(--ink); }
.cat-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.cat-n { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.stream-company .cat-nav { margin: 0 0 12px; }
@media (min-width: 900px) { .stream-page .cat-nav { flex-wrap: wrap; overflow: visible; } }

.feature-cat h2 a:hover { color: var(--copper-text); }
.fc-list { list-style: none; margin: 0; padding: 0; }
.fc-list li { display: grid; gap: 5px; padding-block: 11px; border-top: 1px solid var(--rule); }
.fc-list li:first-child { border-top: 0; padding-top: 0; }
.fc-list a { font: 600 15px/1.3 var(--head); }
.fc-list a:hover { color: var(--copper-text); }
.fc-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.fc-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--copper-text); }

/* --- The front page: one section per kind of release ------------------------
   Drill results lead, on the release's own figure, with the intercept set as
   the page's one display element (the number a drill release is judged by).
   Every other category is a section in a three-across grid, like a news
   site's front. Rules over section heads are ink; the lead's is ochre. */
.sect-bar { background: var(--card); border-bottom: 1px solid var(--rule); }
.sect-bar-in { display: flex; gap: 4px 22px; overflow-x: auto; padding-block: 9px; scrollbar-width: none; }
.sect-bar-in::-webkit-scrollbar { display: none; }
.sect-bar a { flex: none; font: 600 13.5px var(--ui); color: var(--ink-2); white-space: nowrap; }
.sect-bar a:hover, .sect-bar a[aria-current="page"] { color: var(--copper-text); }
.sect-bar a:first-child { color: var(--copper-text); }

.front { padding-block: 24px 8px; }
.front-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.front-main { min-width: 0; }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 9px; margin-bottom: 14px; border-top: 3px solid var(--ink); }
.sect-head h2 { margin: 0; font: 800 26px/1.05 var(--brand); text-transform: uppercase; letter-spacing: .01em; }
.sect-head h2 a:hover { color: var(--copper-text); }
.lead-cat > .sect-head { border-top-color: var(--copper); }
.lead-cat > .sect-head h2 { font-size: 30px; }
.sect-more { font: 600 13.5px var(--ui); color: var(--copper-text); white-space: nowrap; }
.sect-more:hover { text-decoration: underline; }
.sect-n { font: 500 12.5px var(--ui); color: var(--muted); white-space: nowrap; }
.sect-sub { margin: -6px 0 12px; font-size: 13.5px; color: var(--muted); }

/* Figures. Release figures are maps, sections and core photos: cropped to
   the frame like news photos. Underneath each sits a drawn core tray (rows of
   split core in a slate box), which shows when a release has no figure. */
.fig { position: relative; display: block; overflow: hidden; border-radius: 4px; background: var(--patina); aspect-ratio: 16 / 10; max-width: 100%; }
.fig img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.tray { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px 12px;
  background: #1a1710 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='320' height='200' fill='%2318232e'/%3E%3Cg fill='%233a4b5b'%3E%3Crect x='14' y='22' width='292' height='22' rx='11'/%3E%3Crect x='14' y='62' width='292' height='22' rx='11'/%3E%3Crect x='14' y='102' width='292' height='22' rx='11'/%3E%3Crect x='14' y='142' width='292' height='22' rx='11'/%3E%3C/g%3E%3Crect x='118' y='62' width='58' height='22' fill='%238c6a22'/%3E%3Cg stroke='%2318232e' stroke-width='2' fill='none'%3E%3Cpath d='M70 22l4 10-3 12M150 22l-3 22M230 22l5 9-2 13M44 62l3 22M118 62v22M176 62l-3 22M262 62l4 12-2 10M96 102l-3 22M188 102l4 11-3 11M250 102l-2 22M60 142l3 9-2 13M140 142l-3 22M214 142l4 22'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
.tray-tk { color: #f3eedd; font: 800 20px/1 var(--brand); letter-spacing: .04em; }
.fig-lead { aspect-ratio: 4 / 3; }
.fig-lead .tray-tk { font-size: 34px; }

.assay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; color: var(--copper-text); }
.assay b { font: 800 30px/.95 var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.assay span { font: 700 17px/1 var(--brand); letter-spacing: .02em; }
.assay-lg b { font-size: clamp(44px, 5vw, 64px); }
.assay-lg span { font-size: clamp(20px, 2vw, 26px); }

.lead-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lead-copy { min-width: 0; padding-top: 4px; }
.lead-copy h1 { margin: 0 0 12px; font: 600 clamp(25px, 2.6vw, 36px)/1.13 var(--head); letter-spacing: -.01em; text-wrap: balance; }
.lead-copy h1 a:hover { color: var(--copper-text); }
.lead-copy .dek { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.lead-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.card { min-width: 0; }
.card .fig { margin-bottom: 10px; }
.card h3, .sect-top h3 { margin: 0; font: 600 17px/1.25 var(--head); text-wrap: balance; }
.card h3 a:hover, .sect-top h3 a:hover, .sect-list a:hover, .ji-list a:hover, .notice-list a:hover { color: var(--copper-text); }
.fm { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

.just-in { min-width: 0; }
.ji-list { margin: 0 0 12px; padding: 0; list-style: none; }
.ji-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 10px; padding-block: 10px; border-top: 1px solid var(--rule); }
.ji-list li:first-child { border-top: 0; padding-top: 0; }
.ji-list time { grid-row: span 2; padding-top: 2px; font: 600 12px var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.ji-list a { font: 600 14.5px/1.3 var(--head); }
.ji-list .tag { justify-self: start; font-size: 11.5px; padding: 1px 8px; }

.sect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; margin-top: 40px; }
/* An odd section out takes the full width rather than leaving a hole. */
.sect-grid > .sect:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sect-grid > .sect:last-child:nth-child(odd) .sect-list { columns: 2; column-gap: 32px; }
.sect-grid > .sect:last-child:nth-child(odd) .sect-list li { break-inside: avoid; }
.sect { min-width: 0; display: flex; flex-direction: column; }
.sect-top .fig { margin-bottom: 10px; }
.sect-top h3 { font-size: 19px; line-height: 1.22; }
.sect-list { margin: 12px 0 10px; padding: 0; list-style: none; }
.sect-list li { padding-block: 10px; border-top: 1px solid var(--rule); }
.sect-list a { font: 600 15px/1.3 var(--head); }
.sect-list .fm { margin-top: 4px; }
.sect > .sect-more { margin-top: auto; padding-top: 4px; }

.desk-compact { margin-top: 40px; }
.industry { min-width: 0; }
.front-end { padding-top: 34px; }
/* Industry news in newspaper columns: each story keeps its own height, so
   the highlighted mining.com cards leave no gaps beside them. */
.front-lower { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.front-lower > .rail { display: grid; gap: 24px; min-width: 0; }
@media (min-width: 1101px) { .front-lower > .rail { position: sticky; top: 84px; } }
.river-cols { display: block; columns: 2 280px; column-gap: 30px; }
.river-cols .rv { break-inside: avoid; }
.notices { margin-top: 44px; }
.front-end .xposts, .front-end > section + section { margin-top: 44px; }
.notice-list { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 32px; }
.notice-list li { break-inside: avoid; padding-block: 9px; border-top: 1px solid var(--rule); }
.notice-list a { font: 600 14.5px/1.3 var(--head); color: var(--ink-2); }
.front .basics { margin-top: 44px; }

@media (max-width: 1100px) {
  /* One column: interleave the two, so the wire comes straight after the
     lead and the CEO.CA board after the sections, not all at the end. */
  .front-lower { grid-template-columns: minmax(0, 1fr); }
  .front-cols { display: flex; flex-direction: column; gap: 40px; }
  .front-cols > .front-main, .front-cols > .front-side { display: contents; }
  .front-main > .lead-cat { order: 1; }
  .front-side > .just-in { order: 2; }
  .front-main > .sect-grid { order: 3; margin-top: 0; }
  .front-side > .board { order: 4; }
  .front-side > * { order: 5; }
  .sect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notice-list { columns: 2; }
}
@media (max-width: 760px) {
  .lead-story { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fig-lead { aspect-ratio: 16 / 10; }
  .lead-more { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lead-more .card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; padding-block: 12px; border-top: 1px solid var(--rule); }
  .lead-more .card:first-child { border-top: 0; padding-top: 0; }
  .lead-more .card .fig { grid-row: span 3; margin: 0; aspect-ratio: 1; }
  .lead-more .card .tray-tk { font-size: 15px; padding: 3px 6px; }
  .lead-more .card .assay b { font-size: 22px; }
  .lead-more .card .assay span { font-size: 14px; }
  .lead-more .card h3 { font-size: 16px; }
  .sect-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .desk-compact .desk-chart { display: none; } /* the full chart is one tap away; on a phone the quotes are enough */
  .sect-grid > .sect:last-child:nth-child(odd) .sect-list { columns: 1; }
  .notice-list { columns: 1; }
}

.card-kicker { margin: 0 0 6px; }

/* --- CEO.CA boards (Most Active, TSXV Top Gainers) ----------------------------
   A ranked board: rank, $TICKER and company (a link to its CEO.CA channel),
   price, day move. Green rule over the head marks them as market data. */
.front-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; }
.front-side > * { min-width: 0; }
.board .sect-head { border-top-color: var(--verdigris); }
.board-sub { margin: -6px 0 10px; font-size: 13px; color: var(--muted); }
.mv-list li:nth-child(-n+3) .mv-rank { color: var(--verdigris); }
.ceo-busy { margin-left: 4px; font-size: 13px; color: var(--muted); }
.mv-list { margin: 0 0 10px; padding: 0; list-style: none; }
.mv-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding-block: 8px; border-top: 1px solid var(--rule); }
.mv-list li:first-child { border-top: 0; }
.mv-rank { font: 800 20px/1 var(--brand); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.mv-co { display: grid; min-width: 0; }
.mv-co b { font: 800 17px/1.1 var(--brand); letter-spacing: .02em; color: var(--ink); }
.mv-co span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-co:hover b { color: var(--copper-text); }
.mv-px { display: grid; justify-items: end; font: 600 14px var(--ui); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mv-px small { font-size: 11px; font-weight: 500; color: var(--muted); }
.mv-chg { min-width: 62px; padding: 3px 7px; border-radius: 4px; font: 700 14px var(--ui); font-variant-numeric: tabular-nums; text-align: right; }
.mv-chg.up { color: var(--verdigris); background: var(--verdigris-tint); }
.mv-chg.down { color: var(--down); background: rgb(196 68 46 / .12); }
.mv-chg.flat { color: var(--muted); background: var(--cat-bg); }
.mv-full { max-width: 760px; }
.mv-full li { grid-template-columns: 36px minmax(0, 1fr) auto auto; padding-block: 12px; }
.mv-full .mv-co b { font-size: 20px; }
.mv-full .mv-co span { font-size: 14px; }

/* ==========================================================================
   The magazine front (design concept, 26 Oct 2026)
   A dark business-magazine page: a date strip over a centred masthead, a
   hero drawn from the release's own figure with the intercept set huge, hairline-
   ruled sections, one gold accent. Display face is an industrial condensed
   sans (Big Shoulders), body a semi-condensed grotesk (Archivo), tickers and
   figures in mono. No ranking numbers anywhere: lists are newest first.
   ========================================================================== */
body { font: 400 16px/1.55 var(--ui); }
a:hover { color: var(--copper-hi); }
.wrap { max-width: 1320px; }
@media (min-width: 700px) { .wrap { padding-left: 28px; padding-right: 28px; } }
.eyebrow { font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }

/* date strip, masthead, menu */
.topbar { border-bottom: 1px solid var(--rule); }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 12px; font: 500 12.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.topbar-sub { border: 1px solid var(--copper); color: var(--copper); padding: 7px 14px; font-weight: 700; }
.topbar-sub:hover { background: var(--copper); color: #0a0a09; }
.masthead { position: static; background: transparent; border-bottom: 0; }
.mast-in { flex-direction: column; align-items: center; text-align: center; gap: 0; padding-block: 34px 0; }
.mast-in .logo { display: block; }
.mast-in .logo-mark { display: none; }
.logo-word { font: 900 clamp(40px, 7.2vw, 98px)/.86 var(--brand); font-stretch: 100%; text-transform: uppercase; letter-spacing: .005em; color: var(--ink); }
.logo-word b { color: var(--copper); font-weight: 900; }
.logo-word i { font-size: .26em; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-left: 4px; }
.mast-tag { margin: 16px 0 26px; font: 500 12.5px var(--mono); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.nav { width: 100%; justify-content: center; flex-wrap: wrap; margin: 0; gap: 4px 34px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 3px solid var(--ink); font: 700 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.mast-in { padding-bottom: 0; }
.masthead .nav a { padding: 0; border-radius: 0; background: none; color: var(--ink); }
.masthead .nav a:hover, .masthead .nav a[aria-current="page"] { color: var(--copper-hi); background: none; }
.masthead { border-bottom: 0; }
.tape { background: transparent; border-bottom: 1px solid var(--rule); }
.sect-bar { background: transparent; border-bottom: 1px solid var(--rule); }
.sect-bar-in { justify-content: center; flex-wrap: wrap; gap: 6px 26px; padding-block: 12px; }
.sect-bar a { font: 600 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sect-bar a:first-child { color: var(--ink-2); }
.sect-bar a:hover, .sect-bar a[aria-current="page"] { color: var(--copper-hi); }

/* ruled section heads */
.sect-head { padding-top: 12px; margin-bottom: 18px; border-top: 3px solid var(--ink); align-items: flex-end; }
.sect-head h2, .featured h2, .box h2, .stream-head h2 { font: 900 clamp(30px, 3.4vw, 46px)/.9 var(--brand); text-transform: uppercase; letter-spacing: .005em; }
.lead-cat > .sect-head { border-top-color: var(--ink); }
.lead-cat > .sect-head h2 { font-size: clamp(36px, 4.4vw, 60px); }
.sect-more, .stream-more, .stream-foot, .fc-more { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.sect-n, .sect-sub, .board-sub, .stream-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.stream-head { border-bottom-color: var(--ink); }

/* tickers, times, tags */
.tk { font: 700 12px var(--mono); letter-spacing: .02em; color: var(--copper); background: none; padding: 0; border-radius: 0; }
time, .fm time, .meta time { font: 500 12px var(--mono); color: var(--muted); }
.fm, .meta { gap: 5px 14px; }
.tag { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0; border-radius: 0; background: none; }
.tag-cat, .tag-cat-drill-results, .tag-markets { background: none; color: var(--copper); }
.tag:hover { text-decoration: underline; filter: none; }

/* figures: the release's own image, or its company logo, never a drawing */
.art { position: relative; overflow: hidden; background: #0e0e0c; border: 1px solid var(--rule); }
.art .fig { border-radius: 0; background: #0e0e0c; aspect-ratio: 16 / 9; }
.art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(0deg, rgb(10 10 9 / .88), rgb(10 10 9 / .0) 62%); }
.art-plain::after { background: none; }
.art-plain { min-height: 150px; background: var(--card-2); }
.art.fig-lead { aspect-ratio: auto; }
.fig-lead.art-plain { min-height: 280px; }
.art.fig-card, .art.fig-sect { aspect-ratio: auto; }
.fig-logo { position: absolute; inset: 0; display: grid; place-items: center; background: #f4f1e8; }
.fig-logo img { position: static; width: 56%; height: 56%; object-fit: contain; }
.art .assay { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 14px; margin: 0; color: var(--ink); flex-wrap: wrap; align-items: flex-end; gap: 0 14px; }
.art .assay b { font: 900 clamp(40px, 4.4vw, 60px)/.85 var(--brand); color: var(--ink); text-shadow: 0 2px 12px rgb(0 0 0 / .6); }
.art .assay span { font: 800 clamp(20px, 2vw, 28px)/.9 var(--brand); color: var(--copper-hi); text-shadow: 0 2px 10px rgb(0 0 0 / .7); letter-spacing: .02em; }
.fig-lead .assay { left: 28px; bottom: 22px; }
.fig-lead .assay b { font-size: clamp(76px, 11vw, 168px); }
.fig-lead .assay span { font-size: clamp(30px, 4vw, 58px); }
.fig-lead .fig { aspect-ratio: 16 / 9; }
.fig-sect.art { margin-bottom: 12px; }

/* hero */
.lead-story { display: block; }
.lead-copy { padding-top: 22px; }
.lead-copy h1 { margin: 0; max-width: 24ch; font: 800 clamp(32px, 3.6vw, 52px)/1 var(--brand); letter-spacing: .005em; text-wrap: balance; }
.lead-copy .dek { margin-top: 14px; max-width: 62ch; font-size: 17px; color: var(--ink-2); -webkit-line-clamp: 4; }
.lead-more { gap: 28px; margin-top: 30px; padding-top: 0; border-top: 0; }
.card { background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; min-width: 0; }
.card .art { border: 0; border-bottom: 1px solid var(--rule); }
.card > h3, .card > .fm, .card > .card-kicker { margin-left: 20px; margin-right: 20px; }
.card > h3 { margin-top: 18px; }
.card > .fm { margin-bottom: 20px; }
.card .art .assay b { font-size: clamp(38px, 3.6vw, 54px); }
.card h3, .sect-top h3 { font: 600 19px/1.28 var(--head); font-stretch: 92%; text-wrap: pretty; }
.card .fig { margin-bottom: 0; }

/* just in: newest first, time as the marker */
.just-in .sect-head, .board .sect-head { border-top: 0; border-bottom: 3px solid var(--ink); padding: 0 0 10px; }
.ji-list li { grid-template-columns: 64px minmax(0, 1fr); padding-block: 16px; border-top: 0; border-bottom: 1px solid var(--rule); }
.ji-list li:first-child { padding-top: 16px; }
.ji-list time { font: 500 12px var(--mono); color: var(--muted); }
.ji-list a { font: 600 16.5px/1.3 var(--head); font-stretch: 92%; }

/* sections */
.sect-grid { gap: 52px 40px; margin-top: 56px; }
.sect-list li { border-top: 0; border-bottom: 1px solid var(--rule); padding-block: 14px; }
.sect-list a, .notice-list a { font: 600 16px/1.3 var(--head); font-stretch: 92%; }
.sect-top h3 { font-size: 21px; }
.rv h3, .fc-list a, .row h3, .w h3 { font-family: var(--head); font-stretch: 92%; font-weight: 600; }

/* the money: the sum set large, newest first (never ranked) */
.money-sec { margin-top: 56px; }
.money { list-style: none; margin: 0; padding: 0; }
.money li { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.money .amt { font: 900 clamp(40px, 4.6vw, 62px)/.85 var(--brand); color: var(--copper); font-variant-numeric: tabular-nums; }
.money .amt.na { font-size: 26px; color: var(--ink-2); }
.money h3 { margin: 0; font: 600 19px/1.3 var(--head); font-stretch: 92%; }
.money .fm { flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
@media (max-width: 700px) { .money li { grid-template-columns: minmax(0, 1fr); } .money .fm { flex-direction: row; align-items: center; } }

/* CEO.CA boards: the order is CEO.CA's own; no rank numbers shown */
.mv-rank, .ceo-busy { display: none; }
.mv-list li, .mv-full li { grid-template-columns: minmax(0, 1fr) auto auto; }
.mv-co b { font: 800 17px/1.1 var(--brand); }
.mv-px { min-width: 66px; font-family: var(--mono); font-size: 13px; }
.mv-chg { border-radius: 0; font-family: var(--mono); font-size: 12.5px; }
.mv-head { display: grid; grid-template-columns: minmax(0, 1fr) 66px 62px; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mv-head span:first-child { display: none; }
.mv-head .mv-h-px, .mv-head .mv-h-chg { text-align: right; }
.mv-head span:nth-child(2) { grid-column: 1; }
.mv-head.mv-full { max-width: 760px; }

/* boxes and the widgets */
.box { border: 1px solid var(--rule); }
.board .sect-head { margin-bottom: 8px; }
.desk { background: radial-gradient(900px 420px at 18% -10%, rgb(201 161 74 / .16), transparent 60%), var(--patina); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.desk::before { opacity: .35; }
.plate-face { border-radius: 0; background: linear-gradient(160deg, #2a2312, #14120c); border: 1px solid var(--copper); box-shadow: none; }
.plate-face::after { display: none; }
.plate-screen, .desk-chart { border-radius: 0; background: #0e0e0c; }
.el { border-radius: 0; }
.cat-nav a { border-radius: 0; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* house ads: the CEO.CA cards stay light so they read as ads; the gold band */
.ad-plus, .ad-community, .ad-inline-link { border-radius: 0; }
.ad-label { font-family: var(--mono); }
.ad-band { background: var(--copper); color: #0a0a09; margin-top: 56px; }
.ad-band-in { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; padding-block: 48px; }
.ad-band .ad-label { color: #0a0a09; opacity: .7; margin-bottom: 10px; }
.ad-band-head { margin: 0; max-width: 22ch; font: 900 clamp(38px, 4.8vw, 66px)/.9 var(--brand); text-transform: uppercase; }
.ad-band-cta { display: inline-block; padding: 18px 28px; background: #0a0a09; color: var(--copper); font: 800 14px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.ad-band-cta:hover { background: #26241e; color: var(--copper-hi); }
.front + .ad-band { margin-top: 0; }

/* the newsletter, large, near the foot */
.letter { margin-top: 64px; border-top: 1px solid var(--rule); }
.letter-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; padding-block: 72px; }
.letter h2 { margin: 12px 0 0; font: 900 clamp(46px, 6vw, 84px)/.84 var(--brand); text-transform: uppercase; }
.letter h2 span { color: var(--copper); }
.letter p { margin: 16px 0 0; color: var(--ink-2); }
.letter .signup { display: flex; border: 1px solid var(--ink); }
.letter .signup input { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; color: var(--ink); font: 500 17px var(--ui); padding: 18px 20px; }
.letter .signup button { border: 0; border-radius: 0; background: var(--ink); color: #0a0a09; font: 800 14px var(--ui); letter-spacing: .12em; text-transform: uppercase; padding: 0 26px; }
.letter .signup button:hover { background: var(--copper); }
.letter .signup-err, .letter .signup-msg { position: absolute; left: 0; top: 100%; }
@media (max-width: 900px) { .letter-in { grid-template-columns: minmax(0, 1fr); padding-block: 48px; } }

/* inner pages and chrome */
.cta-band { background: var(--copper); color: #0a0a09; }
.cta-band .signup-err, .cta-band .signup-msg { color: #0a0a09; }
.signup-compact input, .signup-compact button, .btn-solid, .btn-ghost, .signup input, .signup button { border-radius: 0; }
.btn-solid, .sticky-btn { color: #0a0a09; }
.sec-hero { border-bottom: 1px solid var(--rule); background: var(--patina); }
.sec-hero::after { height: 3px; background: var(--copper); }
.sec-hero h1 { font: 900 clamp(40px, 6vw, 80px)/.9 var(--brand); font-stretch: 100%; text-transform: uppercase; }
.foot { border-top: 3px solid var(--ink); background: var(--page); }
.foot .logo-word { font-size: 40px; }
.story, .note, .second, .lead-text, .xp, .basic, .watch { border-radius: 0; }
.story-body { font-family: var(--ui); font-size: 17px; }
.story h1, .note h2 { font-family: var(--brand); font-weight: 800; letter-spacing: 0; }
.rv-ic .lt, .lt { border-radius: 4px; }

@media (max-width: 1040px) {
  .lead-more { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 4px 20px; font-size: 12px; }
}
@media (max-width: 760px) {
  .topbar-in span { display: none; } .topbar-in { justify-content: flex-end; }
  .mast-in { padding-top: 22px; }
  .lead-more .card { display: flex; padding: 0; border: 1px solid var(--rule); }
  .lead-more .card:first-child { padding-top: 0; }
  .lead-more .card .art { grid-row: auto; aspect-ratio: auto; }
  .fig-lead .assay { left: 18px; bottom: 14px; }
}

/* mining.com stories in the river: a plain row with a small mono badge */
.rv.rv-mc, .river-full .rv.rv-mc { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.rv.rv-mc h3 { font-weight: 600; }
.rv.rv-mc .rv-src { color: var(--copper); }
.mc-badge { padding: 0; border-radius: 0; background: none; color: var(--copper); font: 700 10.5px/1 var(--mono); letter-spacing: .12em; }
.rv-src { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.rv { padding-block: 13px; }
.box h2, .watch h2 { font-size: clamp(26px, 2.4vw, 32px); }
.basics > h2, .basic h2 { font: 900 clamp(28px, 3vw, 38px)/.95 var(--brand); text-transform: uppercase; font-stretch: 100%; }
.basic { border: 1px solid var(--rule); }
/* "From claim to mine" runs in order, but with no numerals: a plain gold marker */
.stages li::before { content: ""; width: 9px; height: 9px; margin: 6px 0 0 8px; border-radius: 50%; background: var(--copper); color: transparent; font-size: 0; display: block; }

/* narrow screens: the wordmark and menu fit the screen */
.logo { max-width: 100%; }
.logo-word { font-size: clamp(26px, 7.6vw, 98px); }
.mast-tag { max-width: 70ch; text-wrap: balance; letter-spacing: .08em; }
.masthead .nav { margin-left: 0; padding-right: 0; }
@media (max-width: 900px) { .masthead .nav { order: 0; } .mast-in { padding-inline: 0; } }
.foot .logo-word { font-size: clamp(24px, 7.4vw, 40px); }
@media (max-width: 1100px) { .front-main > .money-sec { order: 3; margin-top: 0; } }

/* --- release pictures above the fold ---------------------------------- */
.second.second-ph { flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
.second.second-ph > a { display: block; width: 100%; }
.second.second-ph .second-img { aspect-ratio: 16 / 9; }
.second.second-ph > div { padding: 14px 18px 18px; }
.photo-row { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.photo-row > a { flex: none; display: block; width: 116px; }
.photo-row .photo-img { aspect-ratio: 4 / 3; border-radius: var(--r); }
.photo-row h3 { margin: 0; font: 600 17.5px/1.25 var(--head); text-wrap: pretty; }
.photo-row h3 a:hover { color: var(--copper-text); }
.photo-row .dek { display: none; }

/* --- price desk in three columns: gold price | chart | CEO.CA top gainers - */
.desk-in { grid-template-columns: 300px minmax(0, 1fr) 330px; }
.desk-board { min-width: 0; background: #0e0e0c; border: 1px solid rgb(255 255 255 / .07); padding: 14px 16px; }
.desk-board .sect-head { margin: 0 0 6px; }
.desk-board .sect-head h2 { font-size: 26px; }
.desk-board .board-sub { margin: 0 0 6px; font-size: 12.5px; }
.desk-board .mv-head { display: none; }
.desk-board .mv-list li { grid-template-columns: minmax(0, 1fr) auto auto; padding-block: 6px; gap: 8px; }
.desk-board .mv-co b { font-size: 15px; }
.desk-board .mv-co span { font-size: 12px; }
.desk-board .mv-px { font-size: 13px; }
.desk-board .mv-chg { min-width: 54px; font-size: 13px; }
@media (max-width: 1250px) { .desk-in { grid-template-columns: 280px minmax(0, 1fr); } .desk-board { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .desk-in { grid-template-columns: minmax(0, 1fr); } }