/* pieces.css -- shared styling for the published pieces, the calls page and the scorecard.
   Same tokens as the rest of the site. */
:root{color-scheme:dark;
  --ink:#030407;--ink-2:#07090f;--ink-3:#11141d;--paper:#050609;--paper-2:#07080d;
  --brass:#00e676;--brass-soft:#69f0ae;--market:#22d3ee;
  --ink-text:#f2f4f8;--ink-muted:#b7c0d0;--paper-text:#e8ebf1;--paper-muted:#b9c2d2;
  --line-ink:rgba(255,255,255,.09);--line-paper:rgba(255,255,255,.08);
  --serif:"Space Grotesk","Inter",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --viz-a:#16a34a;--viz-b:#0284c7;--viz-c:#b45309}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--paper-text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.top{position:relative;color:var(--ink-text);overflow:hidden;background:radial-gradient(130% 120% at 20% -20%,rgba(0,230,118,.14) 0%,var(--ink) 55%) var(--ink);border-bottom:1px solid var(--line-ink)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
.nav .home{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;color:var(--ink-text);padding:8px 16px 8px 11px;border-radius:999px;border:1px solid var(--line-ink);background:rgba(255,255,255,.03)}
.nav .home svg{width:22px;height:22px}
.nav .links{display:flex;gap:6px;flex-wrap:wrap}
.nav .links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-decoration:none;color:var(--ink-muted);padding:8px 12px;border-radius:999px;border:1px solid transparent}
.nav .links a:hover,.nav .links a.on{color:var(--brass-soft);border-color:rgba(0,230,118,.35)}
.head{padding:36px 0 40px}
.head h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.06;margin:14px 0 14px;max-width:820px}
.head h1 em{font-style:normal;color:var(--brass-soft)}
.head .sub{max-width:680px;color:var(--ink-muted);font-size:17px}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-muted);margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-top:26px}
.stat{position:relative;background:var(--ink-2);border:1px solid var(--line-ink);border-radius:12px;padding:16px 18px 14px;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--brass);opacity:.6}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.stat .v{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.1vw,25px);letter-spacing:-.01em;margin-top:4px;color:var(--ink-text);overflow-wrap:anywhere}
.stat .n{font-size:12px;color:var(--ink-muted);margin-top:2px}
article{padding:44px 0 20px}
article h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,30px);margin:38px 0 12px;line-height:1.15}
article h3{font-family:var(--serif);font-weight:600;font-size:18px;margin:26px 0 8px}
article p{margin:0 0 16px;max-width:720px;font-size:16.5px}
article p.lead{font-size:18px;color:var(--paper-text)}
article ul{margin:0 0 16px 22px;max-width:700px}
article li{margin-bottom:8px}
article strong{color:var(--ink-text)}
.pull{border-left:3px solid var(--brass);padding:6px 0 6px 18px;margin:22px 0;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink-text);max-width:680px}
.figure{background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:18px 18px 12px;margin:24px 0}
.figure h4{font-family:var(--serif);font-weight:600;font-size:16px;margin:0 0 2px}
.figure .sub2{font-size:12.5px;color:var(--paper-muted);margin-bottom:10px;font-family:var(--mono)}
.figure .chart{width:100%;min-height:120px}
.figure .src{font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin-top:8px;letter-spacing:.02em}
.vaxis{font-family:var(--mono);font-size:10.5px;fill:var(--paper-muted)}
.vlabel{font-family:var(--mono);font-size:11px;fill:var(--ink-text)}
.vbar{transition:opacity .15s}.vbar.on{opacity:.75}
.vlegend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin:0 0 8px}
.vlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.viztip{position:absolute;z-index:50;background:#0d1119;border:1px solid var(--line-ink);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--ink-text);pointer-events:none;box-shadow:0 12px 30px -14px rgba(0,0,0,.9);max-width:280px}
.viztip b{display:block;margin-bottom:4px;color:var(--brass-soft)}
.viztip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.viztip .vnote{color:var(--paper-muted)}
details.tview{margin-top:8px}
details.tview summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--paper-muted);text-transform:uppercase}
.vtable,.dt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:8px}
.vtable th,.vtable td,.dt th,.dt td{padding:7px 8px;border-bottom:1px solid var(--line-paper);text-align:right;white-space:nowrap}
.vtable th:first-child,.vtable td:first-child,.dt th:first-child,.dt td:first-child{text-align:left}
.vtable th,.dt th{color:var(--paper-muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.dtwrap{overflow-x:auto;margin:18px 0}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:99px;border:1px solid var(--line-ink);color:var(--ink-muted);text-transform:uppercase}
.tag.hit{color:var(--brass-soft);border-color:rgba(0,230,118,.45)}
.tag.miss{color:#ff8a80;border-color:rgba(255,138,128,.45)}
.tag.open{color:var(--market);border-color:rgba(34,211,238,.4)}
.method{background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:20px 22px;margin:34px 0}
.method h3{margin-top:0}
.method p,.method li{font-size:14.5px;color:var(--paper-muted)}
.method code{font-family:var(--mono);font-size:12.5px;color:var(--ink-text);background:rgba(255,255,255,.05);padding:1px 6px;border-radius:5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:22px 0}
.card{display:block;text-decoration:none;background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:20px 22px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:rgba(0,230,118,.4)}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.card h3{font-family:var(--serif);font-size:19px;margin:8px 0 8px;line-height:1.2}
.card p{font-size:14px;color:var(--paper-muted);margin:0}
footer{border-top:1px solid var(--line-paper);padding:30px 0 40px;margin-top:40px}
.pillnav{display:flex;flex-wrap:wrap;gap:8px}
.pillnav a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-decoration:none;color:var(--paper-muted);padding:7px 12px;border-radius:999px;border:1px solid var(--line-paper)}
.pillnav a:hover{color:var(--brass-soft);border-color:rgba(0,230,118,.4)}
.disc{font-size:12.5px;color:var(--paper-muted);margin-top:16px;max-width:760px}
@media (max-width:640px){.head{padding:26px 0 30px}.stat .v{font-size:22px}article p{font-size:16px}.pull{font-size:18px}.nav .links a{padding:7px 9px}}

/* hero art: an image with an optional silent loop over it; the figure stays hidden until the poster loads */
.art{margin:0;padding:22px 0 0}
.art .frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-ink);background:var(--ink-2);aspect-ratio:16/9}
.art img,.art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art video{opacity:0;transition:opacity .8s ease}.art video.on{opacity:1}
.art .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,4,7,0) 55%,rgba(3,4,7,.55) 100%)}
.art figcaption{font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin-top:8px;letter-spacing:.02em}