/* McEwen Inc. investor deck, in McEwen's own brand (BRAND-SYSTEM.md): McEwen's deck structure (navy title band with
   the claim in white and a gold subtitle, a thin gold rule, white body, white cards with soft shadows, slide number
   bottom right), McEwen navy #0F4153, logo gold, copper for Los Azules, Montserrat light/black capitals.
   Slides are a fixed 1920x1080 layer scaled to the stage; the 3D Americas sit underneath and show on the cover and
   the map slides. */

:root {
  color-scheme: light;
  --navy: #0F4153; --teal: #004B62; --steel: #356279; --sand: #E5EADD; --rule: #D9DED4; --white: #FFFFFF; --text: #333333;
  --mint: #E9F5EB; --gold: #A29061; --gold-t: #9C863F; --gold-m: #C9A64A; --copper: #E7730E; --orange: #B04700; --cubox: #C0471B;
  --silver: #7F7F7F; --label: #FFF4D1; --green: #3FA34D; --muted: #6B767D;
  --metal: linear-gradient(180deg, #F3D57A 0%, #C9A64A 52%, #8C7434 100%);
  --metal-ink: linear-gradient(180deg, #CDAA4E 0%, #A98B3A 55%, #7E6729 100%);   /* the same metal, a step darker for white grounds */
  --shadow: 0 6px 24px rgba(15, 65, 83, .08), 0 1px 3px rgba(15, 65, 83, .06);
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0B2F3D; color: var(--text); overflow: hidden; }
body { font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#deck { position: fixed; inset: 0; display: grid; place-items: center; }
#stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); overflow: hidden; background: var(--white); transition: background-color .6s; }
#stage.navy { background: var(--navy); }
#stage.no3d .still { position: absolute; inset: 0; background: var(--still) center / cover no-repeat; z-index: 0; }

/* ---------- the Americas underneath ---------- */
.mux3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; z-index: 0; touch-action: none; }
#stage.live .mux3d-canvas { opacity: 1; }
#stage.flat .mux3d-canvas, #stage.flat .mux3d-labels { visibility: hidden; }
html.shot .mux3d-canvas { transition: none; }
.mux3d-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mux3d-canvas, .mux3d-labels { transform: translateY(var(--dy, 0px)); transition: transform .9s cubic-bezier(.3, .6, .2, 1), opacity 1.2s ease; }
html.shot .mux3d-canvas, html.shot .mux3d-labels { transition: none; }
/* map labels: engine/labels.css (McEwen's yellow label boxes, the copper box for McEwen Copper) */
#stage.flat .mux3d-label { transition: none; }

/* ---------- slides ---------- */
.slides { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; z-index: 2; pointer-events: none; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .55s ease .08s, visibility 0s; }
.slide[data-kind="white"] { background: var(--white); }
.slide[data-kind="navy"] { background: var(--navy); }
.slide > * { position: absolute; }
.slide .body > * { transition: transform .7s cubic-bezier(.2, .7, .2, 1) .12s, opacity .7s ease .12s; }
.slide:not(.on) .body > * { transform: translateY(14px); opacity: 0; }
.live-ui, .slide.on .live-ui { pointer-events: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* McEwen's title band: navy, the claim in white capitals (light/black), a gold subtitle, a thin gold rule */
.band { left: 0; right: 0; top: 0; height: 200px; padding: 0 330px 6px 96px; background: var(--navy); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--gold-m); }
.band.cu::after { background: linear-gradient(90deg, #C0471B, var(--copper)); }
.band .kick { font: 700 14px/1 var(--font); letter-spacing: .16em; color: var(--gold-m); }
.band h2 { font: 200 54px/1.0 var(--font); letter-spacing: .01em; color: var(--white); text-transform: none; }
.band h2 b { font-weight: 900; }
.band h2 .metal { font-size: 66px; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band .sub { font: 500 24px/1.3 var(--font); color: var(--gold-m); max-width: 1440px; }
.band.cu .sub { color: #E8A15E; }
.band .ico { left: auto; right: 64px; top: 50%; translate: 0 -50%; position: absolute; height: 82px; width: auto; }
.band .band-logo { position: absolute; right: 64px; top: 50%; translate: 0 -50%; width: 230px; height: auto; }
.body { left: 96px; right: 96px; top: 244px; bottom: 96px; }
.src { left: 96px; right: 220px; bottom: 26px; font: 400 14px/1.45 var(--font); color: var(--muted); }
.pg { right: 40px; bottom: 16px; font: 300 42px/1 var(--font); color: #8A959B; }
.slide[data-kind="navy"] .pg, .cover .pg { color: rgba(233, 245, 235, .5); }

.card { background: var(--white); border: 1px solid #E6EAE3; border-radius: 4px; box-shadow: var(--shadow); }
.ck { font: 700 14px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.big { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.big b { font: 800 52px/1 var(--font); color: var(--navy); letter-spacing: -.01em; }
.big span { font: 400 19px/1.35 var(--font); color: var(--text); }
.big.au b, .metal-t { background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big.cu b { color: var(--orange); }
.side { position: absolute; right: 0; top: 0; bottom: 0; width: 560px; display: flex; flex-direction: column; gap: 20px; }
.side > * { flex: 0 0 auto; }
.chart-card { position: absolute; left: 0; top: 0; bottom: 0; right: 600px; padding: 26px 30px 16px; }
.chart-card .chart { display: block; width: 100%; height: calc(100% - 24px); margin-top: 8px; overflow: visible; }
.photo { position: relative; overflow: hidden; padding: 0; flex: 1 1 auto !important; min-height: 0; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 10px; font: 500 14px/1.3 var(--font); color: #fff; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair .big b { font-size: 40px; }
.k-au, .k-cu { display: inline-block; width: 14px; height: 14px; border-radius: 2px; margin: 0 8px 0 22px; vertical-align: -1px; background: var(--metal); }
.k-cu { background: var(--copper); }
i.arr { flex: 0 0 auto; width: 56px; height: 40px; background: var(--gold-m); clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%); }

/* ---------- 1. cover: McEwen's own, navy with the gold left bar ---------- */
.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(180deg, #F3D57A, #C9A64A 50%, #A98B3A); }
.cover-l { left: 120px; top: 64px; width: 700px; }
.cover-logo { display: block; width: 640px; height: auto; }
.cover-x { margin-top: 18px; padding-top: 16px; border-top: 6px solid var(--gold-m); width: 640px; font: 600 30px/1 var(--font); letter-spacing: .04em; color: var(--gold-m); }
.mux { margin-top: 2px; font: 900 292px/.86 var(--font); letter-spacing: -.01em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metals { display: flex; gap: 30px; margin-top: 26px; font: 700 26px/1 var(--font); letter-spacing: .3em; }
.metals .au { color: #E2C26A; } .metals .ag { color: #C9CDD0; } .metals .cu { color: var(--copper); }
.cover-date { margin-top: 196px; font: 500 26px/1.3 var(--font); color: var(--mint); }
.cover h1 { left: 1010px; right: 80px; top: 84px; font: 300 64px/1.04 var(--font); color: #E2C26A; letter-spacing: .005em; }
.cover h1 b { display: block; font-weight: 900; }
.cover h1 span { display: block; margin-top: 8px; }
.cover-bars { left: 620px; top: 676px; width: 300px; height: auto; }
.cover::after { content: ""; position: absolute; left: 900px; right: 0; top: 0; height: 520px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, var(--navy) 0, var(--navy) 380px, rgba(15, 65, 83, 0) 500px); }
.cover-key { left: 1010px; bottom: 44px; font: 500 17px/1 var(--font); color: rgba(233, 245, 235, .8); }
.cover-key i:first-child { margin-left: 0; }

/* ---------- 2. the notice ---------- */
.notice .band h2 { font-size: 48px; }
.notice-cols { position: absolute; inset: 0 0 -40px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; font: 400 15.4px/1.55 var(--font); color: #3D474D; }
.notice-cols p + p { margin-top: 9px; }

/* ---------- 3. WHY OWN MUX ---------- */
.why { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.why li { flex: 1; display: grid; grid-template-columns: 96px 1fr 360px; align-items: center; gap: 28px; padding: 0 34px 0 0; background: #fff; border: 1px solid #E6EAE3; border-radius: 4px; box-shadow: var(--shadow); border-left: 10px solid var(--gold-m); }
.why li.cu { border-left-color: var(--copper); } .why li.nv { border-left-color: var(--navy); } .why li.or { border-left-color: var(--orange); }
.why i { font: 200 64px/1 var(--font); font-style: normal; color: var(--steel); text-align: center; }
.why h3 { font: italic 800 28px/1.1 var(--font); letter-spacing: .01em; color: var(--navy); }
.why p { margin-top: 8px; font: 400 19px/1.35 var(--font); color: var(--text); }
.why b { text-align: right; font: 800 44px/1 var(--font); color: var(--navy); }
.why b small { display: block; margin-top: 6px; font: 500 15px/1.2 var(--font); letter-spacing: .02em; color: var(--muted); }
.why li.au b { background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why li.au b small { -webkit-text-fill-color: var(--muted); }
.why li.cu b { color: var(--orange); }

/* ---------- 4. staircase ---------- */
.stair .seg { stroke: #fff; stroke-width: 1.5; }
.stair .tot { fill: var(--navy); }
.stair .tot-t { font: 700 19px var(--font); fill: #fff; }
.stair .axis { font: 500 18px var(--font); fill: var(--muted); }
.stair .band { fill: rgba(201, 166, 74, .14); }
.stair .band-l { stroke: var(--gold-m); stroke-dasharray: 6 6; stroke-width: 1.5; }
.stair .band-lab { font: 700 15px var(--font); letter-spacing: .08em; fill: var(--gold-t); }
.stair .leg { font: 500 15px var(--font); fill: var(--text); }
.base-line { stroke: #B9C2C6; stroke-width: 1.5; }
.arrow-card { padding: 26px 28px; display: flex; align-items: center; gap: 18px; justify-content: space-between; }
.arrow-card div { display: flex; flex-direction: column; gap: 6px; }
.arrow-card b { font: 800 40px/1 var(--font); color: var(--navy); white-space: nowrap; }
.arrow-card span { font: 400 16px/1.3 var(--font); color: var(--text); }
.mines26 { padding: 22px 28px; }
.mines26 ul { margin-top: 12px; }
.mines26 li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #EEF0EC; font: 400 18px/1.3 var(--font); }
.mines26 li b { font-weight: 800; color: var(--navy); }

/* ---------- 5. free cash flow ---------- */
.fcf .grid { stroke: #E8ECE6; }
.fcf .axis { font: 500 18px var(--font); fill: var(--muted); }
.fcf .ln { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fcf .ln.a5 { stroke: var(--gold-m); } .fcf .ln.a4 { stroke: var(--navy); }
.fcf .pt.a5 { fill: var(--gold-m); } .fcf .pt.a4 { fill: var(--navy); }
.fcf .pt { stroke: #fff; stroke-width: 3; }
.fcf .tag rect { fill: #fff; stroke-width: 2; }
.fcf .tag.a5 rect { stroke: var(--gold-m); } .fcf .tag.a4 rect { stroke: var(--navy); }
.fcf .tag text { font: 700 18px var(--font); fill: var(--navy); }
.fcf .leg { font: 600 17px var(--font); fill: var(--text); }
.r1b .side .big { flex: 1 1 0 !important; }
.r1b .big.nv b { color: var(--navy); }

/* ---------- 6, 7. map slides: the 3D Americas show through the body ---------- */
.map .mines { position: absolute; left: 0; top: 0; width: 470px; padding: 14px 0; }
.mines li { position: relative; padding: 14px 26px 14px 52px; border-left: 4px solid transparent; transition: background .4s, border-color .4s; }
.mines li::before { content: ""; position: absolute; left: 22px; top: 21px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-m); box-shadow: 0 0 0 3px rgba(201, 166, 74, .25); }
.mines li.cu::before { background: var(--cubox); box-shadow: 0 0 0 3px rgba(192, 71, 27, .25); }
.mines li b { display: block; font: 800 21px/1.2 var(--font); color: var(--navy); }
.mines li span { display: block; font: 400 15px/1.35 var(--font); color: var(--muted); }
.mines li em { display: block; margin-top: 3px; font: 600 16px/1.3 var(--font); font-style: normal; color: var(--gold-t); }
.mines li.cu em { color: var(--orange); }
.mines li.on { background: #FBF6E6; border-left-color: var(--gold-m); }
.mines li.cu.on { background: #FDF0E6; border-left-color: var(--cubox); }
.map-key { position: absolute; left: 0; top: 540px; padding: 10px 18px; background: rgba(255, 255, 255, .88); border-radius: 4px; font: 500 15px/1 var(--font); color: var(--text); }
.map-key i:first-child { margin-left: 0; }
.map .src { right: auto; max-width: 1500px; padding: 8px 12px; margin-left: -12px; background: rgba(255, 255, 255, .85); border-radius: 4px; }
.la-cards { position: absolute; left: 0; top: 0; width: 540px; display: flex; flex-direction: column; gap: 18px; }
.la-cards .big b { font-size: 50px; }
.la-cards .big { padding: 22px 28px; }

/* ---------- 8. the copper dial ---------- */
.readout { position: absolute; left: 0; right: 0; top: 0; height: 196px; display: grid; grid-template-columns: 360px 560px 1fr; gap: 22px; }
.readout .card { padding: 22px 28px; }
.ro-price { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; }
.ro-price b { font: 800 54px/1 var(--font); color: var(--orange); white-space: nowrap; }
.ro-price small { font: 500 18px var(--font); color: var(--muted); white-space: nowrap; }
.ro-tag { margin-top: 10px; min-height: 18px; font: 700 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-t); }
.ro-big { background: var(--navy) !important; border-color: var(--navy) !important; }
.ro-big .ck { color: var(--gold-m); }
.ro-big b { display: block; margin-top: 8px; font: 900 84px/1 var(--font); color: #FFB06A; letter-spacing: -.01em; }
.vs { margin-top: 10px; display: flex; align-items: center; gap: 10px; font: 500 16px/1 var(--font); color: var(--mint); }
.vs i { width: 34px; border-top: 3px dashed var(--mint); }
.ro-row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.ro-row div { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; border-left: 1px solid #EEF0EC; }
.ro-row div:first-child { border-left: 0; padding-left: 0; }
.ro-row b { font: 800 34px/1 var(--font); color: var(--navy); white-space: nowrap; }
.ro-row small { font: 500 15px/1.2 var(--font); color: var(--muted); }
.dial { position: absolute; left: 0; right: 0; top: 222px; bottom: 0; padding: 26px 0 0; }
.dial-bars { display: block; width: calc(100% - 120px); margin: 0 60px; height: 360px; overflow: visible; }
.dial-track { position: relative; height: 90px; margin: 22px calc((100% - 120px) / 14 + 60px) 0; cursor: pointer; outline: none; touch-action: none; }
.dial-track::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 8px; border-radius: 4px; background: #E7EAE4; }
.dial-fill { position: absolute; left: 0; top: 22px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #C0471B, var(--copper)); transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.dial-knob { position: absolute; top: 6px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFD2A8, var(--copper) 60%, #C0471B); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(15, 65, 83, .3); transition: left .35s cubic-bezier(.2, .7, .2, 1); }
.dial-track:focus-visible .dial-knob { box-shadow: 0 0 0 4px var(--navy); }
.dial-ticks { position: absolute; left: 0; right: 0; top: 54px; height: 40px; }
.dial-ticks li { position: absolute; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.dial-ticks b { font: 700 21px/1 var(--font); color: var(--muted); }
.dial-ticks small { font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-t); }
.dial-ticks li.on b { color: var(--orange); }
.dial-mark { position: absolute; top: -34px; margin: 0; translate: -50% 0; font: 600 14px/1 var(--font); letter-spacing: .04em; color: var(--steel); white-space: nowrap; }
.dial-mark::after { content: ""; position: absolute; left: 50%; top: 20px; width: 2px; height: 22px; background: var(--steel); }
.hint { position: absolute; right: 30px; top: 18px; font: 500 14px var(--font); color: var(--muted); }
.dial-bars .bar { fill: rgba(231, 115, 14, .22); cursor: pointer; transition: fill .3s; }
.dial-bars .bar.on { fill: url(#gCu); }
.dial-bars .val { font: 700 22px var(--font); fill: var(--muted); }
.dial-bars .val.on { fill: var(--orange); }
.dial-bars .mux-line { stroke: var(--navy); stroke-width: 2.5; stroke-dasharray: 9 7; }

/* ---------- 9. rare, de-risked, shovel ready (McEwen's slides 17 and 22) ---------- */
.esg { position: absolute; left: 0; top: 0; bottom: 0; width: 1020px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 22px; }
.esg .card { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 30px 34px 30px 40px; border-left: 12px solid var(--green); }
.esg .ic { width: 76px; height: 76px; fill: none; stroke: var(--copper); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.esg h3 { font: 800 32px/1.15 var(--font); color: var(--navy); }
.esg p { margin-top: 10px; font: 400 21px/1.45 var(--font); color: var(--text); }
.steps { display: flex; flex-direction: column; }
.r2c .steps { position: absolute; right: 0; top: 0; bottom: 0; width: 640px; padding: 18px 28px; justify-content: space-around; }
.steps li { position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 20px; }
.steps li i { width: 44px; height: 44px; border-radius: 50%; }
.steps li.done i { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.steps li.next i { border: 5px solid var(--gold-m); background: #fff; }
.steps li.next.cu i { border-color: var(--copper); }
.steps li b { display: block; font: 700 21px/1.25 var(--font); color: var(--navy); }
.steps li span { display: block; font: 400 16px/1.3 var(--font); color: var(--muted); }
.steps time { min-width: 150px; padding: 10px 16px; text-align: center; font: 700 19px/1 var(--font); color: var(--orange); background: #fff; box-shadow: var(--shadow); border-radius: 3px; }
.steps li.next time { color: #fff; background: var(--navy); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50%; height: 100%; width: 3px; background: #E3E7E1; z-index: -1; }
.steps { isolation: isolate; }

/* ---------- 10. resources ---------- */
.rr { position: absolute; left: 0; top: 0; bottom: 0; right: 600px; padding: 30px 34px; }
.rr table { width: 100%; margin-top: 20px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rr thead th { padding: 18px 16px; background: var(--steel); color: #fff; font: 700 18px/1.2 var(--font); text-align: right; }
.rr thead th:first-child { background: none; }
.rr tbody th { padding: 46px 16px; text-align: left; font: 800 30px/1 var(--font); color: var(--navy); border-bottom: 1px solid #E6EAE3; }
.rr tbody th small { display: block; margin-top: 6px; font: 500 15px var(--font); color: var(--muted); }
.rr td { padding: 46px 16px; text-align: right; font: 800 60px/1 var(--font); color: var(--navy); border-bottom: 1px solid #E6EAE3; }
.rr tr.au th { border-left: 8px solid var(--gold-m); } .rr tr.ag th { border-left: 8px solid #B9BDC0; } .rr tr.cu th { border-left: 8px solid var(--copper); }
.rr tr.au td { background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rr tr.cu td { color: var(--orange); } .rr tr.ag td { color: #5F6468; }
.rr .note { margin-top: 22px; font: 400 16px/1.4 var(--font); color: var(--muted); }
.drill { padding: 10px 28px; }
.drill li { padding: 12px 0; border-top: 1px solid #EEF0EC; display: flex; justify-content: space-between; gap: 12px; font: 400 18px/1.3 var(--font); }
.drill li:first-child { border-top: 0; }
.drill b { font-weight: 800; color: var(--navy); }

/* ---------- 11. Grey Fox ---------- */
.r3b .photo.tall { position: absolute; left: 0; top: 0; bottom: 0; right: 600px; }
.npv { padding: 24px 28px; }
.npv-row { display: grid; grid-template-columns: 150px 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; margin-top: 16px; }
.npv-row span { font: 500 16px var(--font); color: var(--muted); grid-row: 1 / 3; }
.npv-row i { grid-column: 2; height: 30px; width: calc(var(--w) * 100%); background: linear-gradient(90deg, #A98B3A, #E2C26A); border-radius: 2px; }
.npv-row:not(.hi) i { opacity: .55; }
.npv-row b { grid-column: 3; grid-row: 1; font: 800 30px/1 var(--font); color: var(--navy); }
.npv-row small { grid-column: 3; grid-row: 2; font: 500 14px var(--font); color: var(--muted); }

/* ---------- 12. Rob McEwen (McEwen's slide 4) ---------- */
.rob { position: absolute; left: 0; top: 0; bottom: 0; width: 470px; overflow: hidden; }
.rob img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 20%; }
.rob figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px; background: var(--navy); color: var(--mint); font: 500 17px/1.3 var(--font); }
.rob figcaption b { display: block; font: 800 26px/1.2 var(--font); color: #fff; }
.r4-r { position: absolute; left: 510px; right: 0; top: 0; bottom: 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trio .card { padding: 30px 24px; height: 236px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.trio b { font: 900 44px/1.05 var(--font); color: var(--navy); letter-spacing: -.01em; }
.trio span { font: 400 17px/1.35 var(--font); color: var(--text); }
hr.gold { margin: 30px 0 0; border: 0; height: 8px; background: var(--gold-m); }
.ptr { margin-top: 30px; font: 900 50px/1 var(--font); letter-spacing: .01em; background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checks { margin-top: 30px; display: flex; flex-direction: column; gap: 26px; }
.checks li { position: relative; padding-left: 62px; font: 400 23px/1.4 var(--font); color: var(--text); }
.checks li::before { content: ""; position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* ---------- 13. Gold for Free (McEwen's slide 8) ---------- */
.gff { position: absolute; left: 0; top: 0; bottom: 0; right: 620px; display: flex; flex-direction: column; gap: 14px; }
.gff-h { font: 900 34px/1 var(--font); letter-spacing: .02em; background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.box { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 34px; border-radius: 6px; border: 3px solid #EADFC4; background: #fff; box-shadow: var(--shadow); }
.box div b { display: block; font: 700 28px/1.2 var(--font); color: var(--navy); }
.box div span { display: block; margin-top: 4px; font: 400 19px/1.3 var(--font); color: #5A6469; }
.box strong { white-space: nowrap; font: 800 60px/1 var(--font); color: var(--navy); }
.box.cuB { background: #FDF1E7; border-color: #D9753A; }
.box.cuB span, .box.cuB strong { color: var(--orange); }
.box.roy { background: var(--orange); border-color: var(--orange); }
.box.roy b, .box.roy strong { color: #fff; } .box.roy span { color: var(--mint); }
.gff-k { margin-top: 8px; font: 700 14px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-t); }
.prod { display: flex; align-items: center; gap: 24px; }
.prod div { flex: 1; padding: 16px 26px; background: #FBF7EC; border: 2px solid #EAD9A6; border-top: 6px solid var(--gold-m); border-radius: 4px; }
.prod b { display: block; font: 800 34px/1.1 var(--font); color: var(--navy); }
.prod span { font: 400 16px var(--font); color: #5A6469; }
.prod em { font: 900 72px/1 var(--font); font-style: normal; color: var(--orange); }
.asof { font: 400 14px var(--font); color: var(--muted); }
.peer { padding: 22px 28px 12px; }
.peers { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.peers .nm { font: 700 18px var(--font); fill: var(--navy); }
.peers .b-mux { fill: var(--navy); } .peers .b-peer { fill: #B9C6CC; }
.peers .avg { stroke: var(--copper); stroke-width: 3; }
.peers .v { font: 700 17px var(--font); fill: var(--navy); }
.peers .up { font: 800 24px var(--font); fill: var(--orange); }
.peers .gap { stroke: var(--orange); stroke-width: 3; fill: none; }
.r5 .side .big { padding: 20px 28px; flex: 1 1 0 !important; } .r5 .side .big b { font-size: 46px; }

/* ---------- 14. catalysts ---------- */
.big-steps { position: absolute; inset: 0 640px 0 0; justify-content: space-between; padding: 4px 0; }
.cat-photos { position: absolute; right: 0; top: 0; bottom: 0; width: 580px; display: flex; flex-direction: column; gap: 22px; }
.big-steps li { grid-template-columns: 52px 1fr 170px; padding: 0 0 0 4px; }
.big-steps li i { width: 48px; height: 48px; }
.big-steps li:not(:last-child)::after { left: 26px; }
.big-steps li b { font-size: 23px; }
.big-steps li.done b { color: #4A5559; font-weight: 600; }
.big-steps time { font-size: 21px; }

/* ---------- 15. the button (McEwen's slide 24) ---------- */
.ask::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(180deg, #F3D57A, #C9A64A 50%, #A98B3A); }
.ask-logo { right: 80px; top: 56px; width: 300px; height: auto; }
.ask h2 { left: 120px; top: 92px; width: 1300px; font: 200 66px/1.02 var(--font); color: #fff; }
.ask h2 b { display: block; font-weight: 900; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ask-row { left: 120px; right: 120px; top: 300px; display: flex; align-items: center; gap: 48px; }
.qr-card { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 22px 16px; background: #fff; border-radius: 6px; text-decoration: none; }
.qr-card img { width: 220px; height: 220px; display: block; }
.qr-card p { font: 600 12px/1 var(--font); color: var(--navy); }
.ask-bars { order: 3; margin-left: auto; width: 420px; height: auto; }
.ask-lede { max-width: 760px; font: 400 30px/1.4 var(--font); color: var(--mint); }
.contacts { left: 120px; right: 120px; top: 650px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; }
.contacts div { display: flex; flex-direction: column; gap: 4px; padding-top: 22px; border-top: 8px solid; font: 400 21px/1.4 var(--font); color: var(--mint); }
.contacts .c1 { border-color: #0E7C8B; } .contacts .c2 { border-color: var(--gold-m); } .contacts .c3 { border-color: var(--cubox); }
.contacts b { font: 800 26px/1.3 var(--font); color: #fff; }
.contacts a { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(233, 245, 235, .35); align-self: flex-start; }
.ask-foot { left: 120px; bottom: 34px; font: 500 16px/1 var(--font); letter-spacing: .04em; color: rgba(233, 245, 235, .65); }
.ask-foot a { color: inherit; text-decoration: none; }

/* ---------- appendix ---------- */
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 22px; }
.thumbs figure { position: relative; aspect-ratio: 16 / 9; background: #fff; box-shadow: var(--shadow); border: 1px solid #E6EAE3; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs figcaption { position: absolute; right: 6px; bottom: 4px; font: 700 12px var(--font); color: var(--navy); background: rgba(255, 255, 255, .85); padding: 1px 6px; }
.appx { background: #fff; }
.appx figure { inset: 0; display: grid; place-items: center; }
.appx figure img { width: 1920px; height: 1080px; object-fit: contain; display: block; }
.appx figcaption { position: absolute; left: 24px; bottom: 8px; font: 500 12px var(--font); color: #9AA3A8; }

/* ---------- presenting controls ---------- */
.ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ui > * { opacity: 0; transition: opacity .4s; }
#stage.awake .ui > *, #stage.first .ui > .dl { opacity: 1; }
#stage.first .ui > .dl { transition: none; }   /* shows at once on the cover, also in a background tab */
.ui > .nav, .ui > .dl { pointer-events: none; }
#stage.awake .ui > .nav, #stage.awake .ui > .dl, #stage.first .ui > .dl { pointer-events: auto; }
.ui .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(15, 65, 83, .08); }
.ui .bar i { position: absolute; inset: 0; background: var(--gold-m); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s ease; }
.ui .count { position: absolute; right: 182px; bottom: 30px; margin: 0; font: 600 13px/1 var(--font); letter-spacing: .1em; color: var(--muted); }
.ui .nav { position: absolute; bottom: 16px; width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--rule); background: rgba(255, 255, 255, .92); color: var(--navy); font: 600 18px/1 var(--font); cursor: pointer; }
.ui .nav:hover { border-color: var(--navy); }
.ui .prev { right: 128px; } .ui .next { right: 76px; } .ui .full { right: 24px; }
.ui .dl { position: absolute; right: 20px; top: 16px; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 15px; border-radius: 4px;
  font: 700 14px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--navy); background: var(--gold-m); box-shadow: 0 4px 14px rgba(15, 65, 83, .25); }
.ui .dl::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 13.5h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 13.5h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ui .dl:hover { filter: brightness(1.06); }
html.shot .ui, html.film .ui, html.print .ui { display: none; }

/* ---------- the PDF: every slide a 1920x1080 page, its map as a still behind real text ---------- */
@page { size: 1920px 1080px; margin: 0; }
html.print, html.print body { height: auto; overflow: visible; background: #fff; }
html.print #deck { position: static; display: block; }
html.print #stage { width: 1920px; height: auto; overflow: visible; background: none; }
html.print .slides { position: static; width: 1920px; height: auto; transform: none !important; }
html.print .slide { position: relative; width: 1920px; height: 1080px; opacity: 1; visibility: visible; overflow: hidden; break-after: page; page-break-after: always; background-size: cover; background-position: center; }
html.print .slide.cover { background-color: var(--navy); }
html.print .slide .body > * { transform: none; opacity: 1; }
html.print *, html.print *::before, html.print *::after { transition: none !important; animation: none !important; text-shadow: none !important; box-shadow: none !important; }
html.print .card, html.print .box, html.print .why li, html.print .steps time, html.print .thumbs figure { border: 1px solid #D9DED4; }
html.print .hint { display: none; }
html.shot *, html.shot *::before, html.shot *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .slide, .slide .body > *, .dial-knob, .dial-fill { transition: none !important; } }

.r3b .side > .card { flex: 1 1 auto !important; }
.r3b .side .pair { flex: 1 1 auto; }
.r3b .npv { display: flex; flex-direction: column; justify-content: center; }
.r1b .side .big b { font-size: 60px; }
/* Chrome's PDF output paints background-clip:text on a block wider than its text as a solid box: in print, the
   block-level metallic words take solid McEwen gold */
.mux, .gff-h, .ptr, .ask h2 b { width: fit-content; }
html.print .mux, html.print .ask h2 b { background: none; color: #D9B95E; -webkit-text-fill-color: #D9B95E; }
html.print .gff-h, html.print .ptr { background: none; color: #A98B3A; -webkit-text-fill-color: #A98B3A; }