/* Shared theme for the static content pages (how-it-works, methodology,
 meet-the-traders, notes, support). Warm-desk palette, mirrored from the app's
 styles.css :root. The dashboard SPA lives at / and ships its own CSS; these
 are plain documents that link here. */
:root {
 --bg: #15100b;
 --bg-2: #1a130c;
 --panel: #1e1710;
 --panel-2: #271d13;
 --line: rgba(255, 230, 196, 0.1);
 --line-bright: rgba(255, 230, 196, 0.2);
 --ink: #f7ece0;
 --ink-dim: #b8a489;
 --ink-faint: #806c57;
 --butter: #ffce7a;
 --gain: #5fd6a4;
 --loss: #ff7d6e;
 --sky: #7fc0ec;
 --orchid: #cda2e0;
 --accent-ink: #2a1c08;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(255, 206, 122, 0.06), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(255, 150, 90, 0.04), transparent 58%);
 --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
 --font-mono: "Spline Sans Mono", ui-monospace, monospace;
 --font-body: "IBM Plex Sans", system-ui, sans-serif;
 --radius: 14px;
}

/* Theme overrides. Mirror styles.css. Silks (sky/orchid) stay constant. */
[data-theme="phosphor"] {
 --bg: #07090c; --bg-2: #0a0e12; --panel: #0d1219; --panel-2: #121b24;
 --line: rgba(176, 214, 230, 0.1); --line-bright: rgba(176, 214, 230, 0.22);
 --ink: #e9f2f6; --ink-dim: #93a9b6; --ink-faint: #5d717e;
 --butter: #5fe9dd; --gain: #54e39a; --loss: #ff6b6b; --accent-ink: #042320;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(95, 233, 221, 0.07), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(80, 150, 220, 0.06), transparent 58%);
}
[data-theme="oxblood"] {
 --bg: #160a0c; --bg-2: #1c0d10; --panel: #231116; --panel-2: #2e171c;
 --line: rgba(240, 210, 200, 0.1); --line-bright: rgba(240, 210, 200, 0.2);
 --ink: #f4e5dd; --ink-dim: #c5a497; --ink-faint: #8c655a;
 --butter: #dca94e; --gain: #6dc79a; --loss: #ff7a6b; --accent-ink: #2a1206;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(220, 169, 78, 0.06), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(150, 40, 52, 0.12), transparent 58%);
}
[data-theme="broadsheet"] {
 color-scheme: light;
 --bg: #fdf1e3; --bg-2: #f7e9d8; --panel: #fff8f0; --panel-2: #f4e7d5;
 --line: rgba(40, 32, 24, 0.14); --line-bright: rgba(40, 32, 24, 0.26);
 --ink: #1d1714; --ink-dim: #5c5048; --ink-faint: #8a7c70;
 --butter: #0e6e63; --gain: #1f7a4d; --loss: #c0392b; --accent-ink: #fff8f0;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(14, 110, 99, 0.06), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(192, 57, 43, 0.05), transparent 58%);
}
[data-theme="evergreen"] {
 --bg: #0b140f; --bg-2: #0f1a13; --panel: #122018; --panel-2: #18291e;
 --line: rgba(206, 230, 214, 0.1); --line-bright: rgba(206, 230, 214, 0.22);
 --ink: #eef4ee; --ink-dim: #9db5a6; --ink-faint: #688274;
 --butter: #e0b85a; --gain: #5fd6a4; --loss: #ff7d6e; --accent-ink: #16210f;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(224, 184, 90, 0.06), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(40, 120, 82, 0.1), transparent 58%);
}
[data-theme="midnight"] {
 --bg: #0a1020; --bg-2: #0d1426; --panel: #111a2e; --panel-2: #16223a;
 --line: rgba(176, 196, 235, 0.1); --line-bright: rgba(176, 196, 235, 0.22);
 --ink: #e7eef8; --ink-dim: #93a4c0; --ink-faint: #5e6f8c;
 --butter: #5f93ff; --gain: #4fd6a0; --loss: #ff6f7d; --accent-ink: #060f1f;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(95, 147, 255, 0.08), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(120, 90, 230, 0.06), transparent 58%);
}
[data-theme="neon"] {
 --bg: #0c0a10; --bg-2: #110d16; --panel: #16111c; --panel-2: #1e1726;
 --line: rgba(230, 200, 226, 0.1); --line-bright: rgba(230, 200, 226, 0.22);
 --ink: #f3eaf3; --ink-dim: #b69fb6; --ink-faint: #7d6a82;
 --butter: #ff4d9d; --gain: #4fe0b0; --loss: #ff6b6b; --accent-ink: #2a0716;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(255, 77, 157, 0.09), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(80, 220, 230, 0.06), transparent 58%);
}
[data-theme="carbon"] {
 --bg: #0d0d0f; --bg-2: #121214; --panel: #161618; --panel-2: #1d1d21;
 --line: rgba(220, 220, 226, 0.1); --line-bright: rgba(220, 220, 226, 0.2);
 --ink: #ededee; --ink-dim: #9a9a9f; --ink-faint: #62626a;
 --butter: #e8e8ec; --gain: #5fce9a; --loss: #ff7d6e; --accent-ink: #0d0d0f;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(232, 232, 236, 0.04), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(255, 255, 255, 0.03), transparent 58%);
}
[data-theme="porcelain"] {
 color-scheme: light;
 --bg: #f4f6f9; --bg-2: #eef1f6; --panel: #ffffff; --panel-2: #eef2f8;
 --line: rgba(40, 52, 74, 0.14); --line-bright: rgba(40, 52, 74, 0.26);
 --ink: #1a2230; --ink-dim: #51607a; --ink-faint: #8492a8;
 --butter: #3b5bdb; --gain: #18794e; --loss: #c0392b; --accent-ink: #ffffff;
 --atmosphere:
 radial-gradient(1100px 560px at 80% -12%, rgba(59, 91, 219, 0.06), transparent 60%),
 radial-gradient(900px 520px at -10% 16%, rgba(30, 121, 78, 0.04), transparent 58%);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
 margin: 0;
 background: var(--atmosphere), var(--bg);
 color: var(--ink);
 font-family: var(--font-body);
 line-height: 1.65;
 -webkit-font-smoothing: antialiased;
}

/* -- top nav --------------------------------------------------------------- */
.site-head {
 position: sticky;
 top: 0;
 z-index: 10;
 display: flex;
 align-items: center;
 gap: 18px;
 flex-wrap: wrap;
 padding: 12px clamp(16px, 4vw, 40px);
 background: color-mix(in srgb, var(--bg) 88%, transparent);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--line);
}
.site-brand {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 17px;
 letter-spacing: 0.04em;
 color: var(--ink);
 text-decoration: none;
 white-space: nowrap;
}
.site-brand b { color: var(--butter); font-weight: 800; }
.site-brand .brand-vs { font-size: 0.7em; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--ink-faint); }
.site-nav {
 display: flex;
 gap: 16px;
 flex-wrap: wrap;
 margin-left: auto;
 font-family: var(--font-mono);
 font-size: 12px;
 letter-spacing: 0.04em;
 text-transform: uppercase;
}
.site-nav a { color: var(--ink-dim); text-decoration: none; }
.site-nav a:hover, .site-nav a.is-active { color: var(--butter); }

/* -- content --------------------------------------------------------------- */
main {
 max-width: 760px;
 margin: 0 auto;
 padding: 40px clamp(16px, 4vw, 24px) 96px;
}
.eyebrow {
 font-family: var(--font-mono);
 font-size: 12px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--ink-faint);
 margin: 0 0 8px;
}
h1 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(28px, 5vw, 40px);
 line-height: 1.1;
 letter-spacing: -0.01em;
 margin: 0 0 12px;
}
h2 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 21px;
 margin: 40px 0 10px;
 color: var(--ink);
}
h3 { font-size: 16px; margin: 24px 0 6px; color: var(--butter); }
p, li { color: var(--ink-dim); font-size: 16px; }
.lede { font-size: 18px; color: var(--ink); }
a { color: var(--butter); }
strong { color: var(--ink); }
code, .mono { font-family: var(--font-mono); color: var(--ink); font-size: 0.92em; }
ul { padding-left: 20px; }
li { margin: 5px 0; }
hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }

.callout {
 margin: 28px 0;
 padding: 16px 18px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-left: 3px solid var(--butter);
 border-radius: 10px;
}
.callout p { margin: 0; color: var(--ink-dim); }
.callout strong { color: var(--ink); }

table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
td { color: var(--ink-dim); }
td.num { font-family: var(--font-mono); text-align: right; }

.silk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; vertical-align: middle; margin-right: 7px; }
.s-gold { background: var(--butter); }
.s-sky { background: var(--sky); }
.s-orchid { background: var(--orchid); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 22px 0; }
.card {
 padding: 16px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.card h3 { margin-top: 0; }
.card p { font-size: 14px; }

.cta {
 display: inline-block;
 margin-top: 8px;
 font-family: var(--font-mono);
 font-size: 13px;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--accent-ink);
 background: var(--butter);
 border-radius: 999px;
 padding: 9px 16px;
 text-decoration: none;
 font-weight: 700;
}
.cta.ghost { background: none; color: var(--butter); border: 1px solid var(--line-bright); }

.note-list { list-style: none; padding: 0; }
.note-list li { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.note-list a { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.note-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* -- long-form article richness ------------------------------------------- */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin: 28px 0; }
.statrow .s { padding: 15px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: center; }
.statrow .s b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4vw, 28px); color: var(--butter); line-height: 1; }
.statrow .s span { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.pullquote { margin: 32px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--butter); font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3.4vw, 27px); line-height: 1.32; color: var(--ink); }
.source-note { font-size: 12.5px; color: var(--ink-faint); }
.source-note a { color: var(--ink-dim); }

/* -- footer ---------------------------------------------------------------- */
.site-foot {
 max-width: 760px;
 margin: 0 auto;
 padding: 24px clamp(16px, 4vw, 24px) 64px;
 border-top: 1px solid var(--line);
 font-size: 13px;
 color: var(--ink-faint);
}
.site-foot nav { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.site-foot nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink-dim); }
.site-foot p { margin: 0; font-style: italic; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* -- theme switcher (injected by pages.js) --------------------------------- */
.site-theme { position: relative; }
.site-theme-btn {
 display: inline-flex; align-items: center; gap: 8px;
 font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
 color: var(--ink-dim); background: color-mix(in srgb, var(--ink) 6%, transparent);
 border: 1px solid var(--line-bright); border-radius: 999px; padding: 5px 11px 5px 8px; cursor: pointer;
 transition: border-color 0.16s ease, color 0.16s ease;
}
.site-theme-btn:hover { border-color: var(--butter); color: var(--ink); }
.site-theme-chips { display: inline-flex; }
.site-theme-chips i { width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid var(--panel); margin-left: -4px; }
.site-theme-chips i:first-child { margin-left: 0; }
.site-theme-pop {
 position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; width: 236px; padding: 8px;
 background: var(--panel-2); border: 1px solid var(--line-bright); border-radius: var(--radius);
 box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
 max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain;
}
.site-theme-head {
 margin: 4px 8px 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
 text-transform: uppercase; color: var(--ink-faint);
}
.site-theme-opt {
 display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px; border: 1px solid transparent;
 border-radius: 10px; background: none; cursor: pointer; text-align: left;
 transition: background 0.14s ease, border-color 0.14s ease;
}
.site-theme-opt:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.site-theme-opt.is-active { border-color: var(--butter); background: color-mix(in srgb, var(--butter) 12%, transparent); }
.site-theme-sw { display: inline-flex; flex: none; border-radius: 7px; overflow: hidden; border: 1px solid var(--line-bright); }
.site-theme-sw span { width: 16px; height: 26px; }
.site-theme-text { display: flex; flex-direction: column; min-width: 0; }
.site-theme-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); }
.site-theme-note { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.site-theme-check { margin-left: auto; color: var(--butter); font-size: 13px; opacity: 0; }
.site-theme-opt.is-active .site-theme-check { opacity: 1; }

/* -- buttery motion -------------------------------------------------------- */
.site-nav a,
.site-foot nav a,
.site-brand,
a.cta { transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
a.cta:hover { transform: translateY(-1px); }
@keyframes site-pop-in {
 from { opacity: 0; transform: translateY(-6px); }
 to { opacity: 1; transform: none; }
}
.site-theme-pop { animation: site-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both; }
/* staggered hero reveal on page load (compositor-only) */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main > .eyebrow { animation: page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
main > h1 { animation: page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
main > .lede { animation: page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
::view-transition-old(root),
::view-transition-new(root) {
 animation-duration: 200ms;
 animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
 .site-theme-pop,
 main > .eyebrow,
 main > h1,
 main > .lede { animation: none; }
 a.cta:hover { transform: none; }
 ::view-transition-old(root),
 ::view-transition-new(root) { animation: none !important; }
}