/* =====================================================================
   Timeless Market Theory — shared stylesheet for the whole site.
   Every page links this file. Add new pages by reusing these classes;
   don't write per-page <style> blocks, so the look stays consistent.
   © 2026 Jarrett A. Hyder.
   ===================================================================== */
:root{
  --ink:#11161d; --muted:#4a5663; --faint:#8a96a3;
  --blue:#1763d6; --blue-d:#0f4aa6; --green:#0fa36b; --green-d:#0a7c52;
  --red:#d64545; --red-d:#b5342f; --gold:#b5862a;
  --bg:#f6f7f9; --card:#ffffff; --line:#e4e8ee;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}

/* containers — default wide; reading pages (profiles, playbooks) are narrower */
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
body.reading .wrap{max-width:860px}

/* top bar */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:62px;max-width:none;padding:16px 44px 10px}
/* keep the nav bar full-width even on narrow reading pages so it doesn't wrap/clip the CTA */
body.reading .topbar .wrap{max-width:none}
.topnav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.brand{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;text-decoration:none;color:var(--ink);
  --logo-line:#c2ccd8;--logo-tick:#c2ccd8;--logo-node:#2f9e6f}
.brand .lk1,.brand .lk2{font-family:Cinzel,Georgia,serif;color:inherit;white-space:nowrap;text-align:center;text-transform:uppercase}
.brand .lk1{font-size:1.42rem;font-weight:500;letter-spacing:.1em;text-indent:.1em}
.brand .lk2{font-size:.7rem;font-weight:400;letter-spacing:.28em;text-indent:.28em;margin-top:.55em}
.brand .lk-tl{display:block;width:100%;height:auto;margin:5px 0 4px}
.brand .lk-line{stroke:var(--logo-line);stroke-width:1.4;stroke-linecap:round;fill:none}
.brand .lk-ticks line{stroke:var(--logo-tick);stroke-width:1.2;stroke-linecap:round}
.brand .lk-node{fill:var(--logo-node)}
.brand .lk-tag{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--logo-node);text-align:center;margin:6px 0 0}
body.home .brand,body.dim .brand{--logo-line:#56677c;--logo-tick:#56677c;--logo-node:#5fd0a0}
.topnav a{margin-left:18px;color:var(--muted);font-weight:600;font-size:.92rem}
.topnav a:hover{color:var(--ink)}
.topnav .cta{background:var(--blue);color:#fff;padding:8px 14px;border-radius:8px;margin-left:18px}

/* ---- site search ---- */
.site-search-btn{display:inline-flex;align-items:center;gap:6px;margin-left:18px;padding:6px 10px;
  background:var(--surface-2,#f0f2f5);border:1px solid var(--line,#e4e8ee);border-radius:8px;
  color:var(--muted,#4a5663);font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;line-height:1}
.site-search-btn:hover{border-color:var(--blue);color:var(--ink)}
.site-search-btn .ssb-mag{font-size:.9em}
.site-search-btn .ssb-key{display:inline-block;min-width:16px;padding:1px 5px;border:1px solid var(--line,#e4e8ee);
  border-radius:5px;background:#fff;color:var(--faint,#8a96a3);font-size:.74rem;text-align:center}
@media(max-width:760px){.site-search-btn .ssb-label,.site-search-btn .ssb-key{display:none}.site-search-btn{padding:6px 9px}}

.ss-overlay{position:fixed;inset:0;z-index:50;background:rgba(15,23,34,.5);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.ss-overlay[hidden]{display:none}
.ss-panel{width:100%;max-width:600px;background:#fff;border:1px solid var(--line,#e4e8ee);
  border-radius:14px;box-shadow:0 24px 60px rgba(15,23,34,.28);overflow:hidden;display:flex;flex-direction:column;max-height:74vh}
.ss-inputrow{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line,#e4e8ee)}
.ss-mag{font-size:1.05rem;opacity:.7}
.ss-input{flex:1;border:0;outline:0;font:inherit;font-size:1.05rem;color:var(--ink,#11161d);background:transparent}
.ss-esc{font-size:.72rem;color:var(--faint,#8a96a3);border:1px solid var(--line,#e4e8ee);border-radius:5px;padding:2px 6px}
.ss-results{overflow-y:auto;padding:6px}
.ss-hint{padding:18px 14px;color:var(--faint,#8a96a3);font-size:.92rem}
.ss-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;text-decoration:none;color:inherit}
.ss-item.sel,.ss-item:hover{background:var(--surface-2,#f0f2f5)}
.ss-badge{flex:none;margin-top:1px;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  color:#0f4aa6;background:#e8f0fd;border-radius:5px;padding:3px 7px}
.ss-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ss-text b{font-weight:700;color:var(--ink,#11161d);font-size:.95rem}
.ss-desc{font-size:.82rem;color:var(--muted,#4a5663);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* hero — base is left-aligned; modifiers for centered (home) and split (profile w/ portrait) */
.hero{background:linear-gradient(180deg,#0f1722,#16202e);color:#fff;padding:46px 0 40px}
.hero--center{padding:62px 0 56px;text-align:center}
.hero--split .wrap{display:flex;gap:30px;align-items:center}
.hero .kicker{color:#7fb0ff;font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.hero h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:2.5rem;line-height:1.06;margin:.3em 0 .2em;letter-spacing:-.01em}
.hero--split h1{font-size:2.8rem}
.hero--center h1{font-size:3.1rem;margin:0 0 .25em}
.hero .life{color:#aab6c4;font-size:1rem;margin:0 0 16px}
.hero .known{font-size:1.15rem;color:#e8eef5;max-width:620px;margin:0}
.hero .sub{color:#cdd9e6;font-size:1.08rem;margin:0 0 18px;max-width:640px}
.hero .from{color:#8aa0b6;font-size:.9rem}
.hero .from a{color:#9fc1ff}
.hero--center p{font-size:1.2rem;color:#d3dde8;max-width:640px;margin:0 auto 28px}
.hero-text{flex:1;min-width:0}
.hero .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:700;font-size:1rem}
.btn.primary{background:#2f7bf0;color:#fff}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25)}
.hero .pills{margin-top:26px;color:#9fb1c6;font-size:.86rem;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.hero .pills span::before{content:"✓ ";color:#5fd0a0}
.tags{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.tag{background:rgba(255,255,255,.1);color:#dce6f1;border:1px solid rgba(255,255,255,.18);padding:5px 11px;border-radius:999px;font-size:.8rem;font-weight:600}
.portrait{margin:0;flex:0 0 170px;text-align:center}
.portrait img,.portrait .mono{width:170px;height:214px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 28px rgba(0,0,0,.4)}
.portrait img{display:block}
.portrait .mono{display:none;place-items:center;background:#1f2c3b;color:#7fb0ff;font-family:Fraunces,Georgia,serif;font-size:3.4rem;font-weight:700}
.portrait figcaption{color:#8aa0b6;font-size:.68rem;margin-top:8px;line-height:1.35}
.specs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.spec{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:8px 12px;font-size:.82rem;color:#dce6f1}
.spec b{display:block;color:#7fb0ff;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:1px}

/* disclaimer banner (playbooks) */
.disclaimer{background:#fff8e8;border-bottom:1px solid #ecd9a6;color:#6b551f;font-size:.84rem;padding:10px 0}
.disclaimer .wrap{display:flex;gap:10px;align-items:flex-start}

/* sections + typography */
section{padding:34px 0;border-bottom:1px solid var(--line)}
body.home section{border-bottom:0;padding:54px 0}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--blue-d);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px}
.eyebrow .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#e8f0fd;color:var(--blue);font-size:.8rem}
h2{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.6rem;margin:.1em 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:1.07rem}

/* home: section heads, path, category cards, featured, spotlight, values */
.sec-head{text-align:center;max-width:620px;margin:0 auto 30px}
.sec-head .kick{color:var(--blue-d);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.sec-head h2{font-size:2rem;margin:.2em 0 .3em}
.sec-head p{color:var(--muted);margin:0}
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pstep{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center}
.pstep .pn{width:30px;height:30px;border-radius:50%;background:#e8f0fd;color:var(--blue);font-weight:800;display:grid;place-items:center;margin:0 auto 8px}
a.pstep{color:var(--ink)}
a.pstep:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(17,22,29,.08)}
.pstep h4{margin:0 0 .2em;font-size:.98rem}
.pstep p{margin:0;font-size:.82rem;color:var(--faint)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;transition:transform .12s,box-shadow .12s;display:block;color:inherit}
.cat:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(17,22,29,.08)}
.cat .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:12px}
.cat h3{margin:0 0 .3em;font-size:1.18rem;display:flex;align-items:center;gap:8px}
.cat p{margin:0;color:var(--muted);font-size:.95rem}
.cat .more{color:var(--blue);font-weight:600;font-size:.9rem;margin-top:10px;display:inline-block}
.i-blue{background:#e8f0fd;color:var(--blue)} .i-green{background:#e4f6ee;color:var(--green-d)}
.i-gold{background:#fbf1da;color:var(--gold)} .i-red{background:#fdecec;color:var(--red)}
.i-slate{background:#eef1f5;color:#42526b} .i-violet{background:#eee9fb;color:#6b4bd6}
.i-teal{background:#e2f5f3;color:#0a8d80}
.badge-soon{font-size:.62rem;font-weight:700;letter-spacing:.06em;background:#eef1f5;color:#8a96a3;border-radius:5px;padding:2px 6px;text-transform:uppercase}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block;color:inherit}
.fcard:hover{box-shadow:0 12px 28px rgba(17,22,29,.08)}
.fcard .ftop{padding:8px 16px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.fcard .ftop.t1{background:#16202e} .fcard .ftop.t2{background:#0f4aa6}
.fcard .fbody{padding:18px}
.fcard h3{margin:.1em 0 .3em;font-family:Fraunces,Georgia,serif;font-size:1.35rem}
.fcard p{margin:0 0 .6em;color:var(--muted);font-size:.95rem}
.spot{background:linear-gradient(120deg,#0f4aa6,#1763d6);color:#fff;border-radius:16px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.spot h2{font-size:1.7rem;margin:0 0 .25em;color:#fff}
.spot p{margin:0;color:#dce8fb;max-width:520px}
.spot .btn.primary{background:#fff;color:var(--blue-d)}
.values{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.vgrid .v h4{margin:.2em 0 .2em;font-size:1rem}
.vgrid .v p{margin:0;font-size:.85rem;color:var(--faint)}
.vgrid .v .e{font-size:1.5rem}

/* profile: big idea, rules, quotes, books, resources, sources */
.idea{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:20px 22px}
.idea h3{margin:.1em 0 .3em;font-size:1.15rem}
.rules{display:grid;gap:12px;margin-top:6px}
.rule{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.rule .ic{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#eef4fd;color:var(--blue);font-weight:800}
.rule h4{margin:.1em 0 .2em;font-size:1.02rem}
.rule p{margin:0;color:var(--muted);font-size:.96rem}
figure{margin:22px 0 6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
figure svg{display:block;width:100%;height:auto}
figure img.chart-img{display:block;width:100%;height:auto;border-radius:8px}
figure img.chart-img + img.chart-img{margin-top:12px}
figcaption{color:var(--muted);font-size:.86rem;margin-top:8px;padding:0 4px}
.vids{display:flex;flex-direction:column;gap:10px}
.vid{display:flex;gap:12px;align-items:center;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;transition:border-color .15s,transform .15s}
.vid:hover{border-color:var(--blue);transform:translateY(-1px)}
.vthumb{position:relative;flex:0 0 128px;width:128px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b0f14}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.vmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.vtype{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.vmeta b{font-size:.9rem;line-height:1.25;color:var(--ink);font-weight:600}
.vchan{font-size:.78rem;color:var(--muted)}
.quote{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:0 0 14px}
.quote blockquote{margin:0;font-family:Fraunces,Georgia,serif;font-size:1.22rem;line-height:1.4;color:var(--ink)}
.quote cite{display:block;margin-top:10px;font-style:normal;color:var(--faint);font-size:.88rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.embed{background:#0f1722;border-radius:12px;aspect-ratio:16/9;display:grid;place-items:center;color:#9fb1c6;text-align:center;padding:18px;font-size:.9rem;border:1px dashed #2b3a4d}
.reads{list-style:none;margin:0;padding:0}
.reads li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.reads li:last-child{border:0}
.reads .badge{font-size:.72rem;font-weight:700;color:var(--green-d);background:#e4f6ee;border-radius:5px;padding:2px 7px;margin-right:7px}
.src{font-size:.9rem;color:var(--muted)}
.src ol{margin:.4em 0 0;padding-left:1.2em}
.src li{margin:.3em 0}
sup a{text-decoration:none;color:var(--blue);font-weight:700;font-size:.72em;padding:0 1px}
.note{background:#fff8e8;border:1px solid #ecd9a6;border-radius:10px;padding:12px 16px;font-size:.9rem;color:#6b551f;margin:14px 0 0}
.books{display:grid;gap:16px;margin-top:6px}
.book{background:var(--card);border:1px solid var(--line);border-radius:12px;border-top:4px solid var(--gold);padding:18px 20px}
.book .bk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.book h3{margin:0;font-size:1.14rem}
.book .by{color:var(--faint);font-size:.84rem}
.book ul{margin:.3em 0 0;padding-left:0;list-style:none}
.book li{padding:9px 0;border-top:1px solid var(--line);font-size:.96rem;color:var(--muted)}
.book li:first-child{border-top:0}
.book li b{color:var(--ink)}
.book .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:.86rem;font-weight:600}
.book .acts .muted{color:var(--faint);font-weight:600}
.book .acts .buy{margin-left:auto;color:var(--green-d)}
.cat-row{margin:6px 0 14px}
.cat-row h2{margin:0}
.cat-row .kick{color:var(--blue-d);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.try{background:#eef4fd;border:1px solid #cfe0fb;border-radius:12px;padding:18px 20px}
.try h3{margin:.1em 0 .4em;color:var(--blue-d)}

/* playbook: panels, checklist, steps, trade table, callouts, mistakes */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.panel.good{border-left:4px solid var(--green)}
.panel.bad{border-left:4px solid var(--red)}
.panel h4{margin:.1em 0 .5em;font-size:1rem}
.panel ul{margin:0;padding-left:1.1em}
.panel li{margin:.34em 0;color:var(--muted);font-size:.95rem}
.check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.check li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;font-size:.97rem}
.check .box{flex:0 0 22px;height:22px;border-radius:6px;background:#e4f6ee;color:var(--green-d);display:grid;place-items:center;font-weight:800;font-size:.8rem}
.check b{color:var(--ink)} .check span.d{color:var(--muted)}
.steps{display:grid;gap:12px}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px}
.step .num{flex:0 0 30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}
.step h4{margin:.1em 0 .25em;font-size:1.02rem}
.step p{margin:0;color:var(--muted);font-size:.96rem}
.step .formula,.callout .formula{margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;background:#f0f3f8;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:#11161d}
table.trade{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.95rem}
table.trade td{padding:10px 14px;border-top:1px solid var(--line)}
table.trade tr:first-child td{border-top:0}
table.trade td:first-child{color:var(--muted);width:52%}
table.trade td:last-child{text-align:right;font-weight:600}
.r-pos{color:var(--green-d)} .r-neg{color:var(--red-d)}
.callout{border-radius:12px;padding:18px 20px;border:1px solid var(--line)}
.callout.blue{background:#eef4fd;border-color:#cfe0fb}
.callout.blue h3{margin:.1em 0 .4em;color:var(--blue-d)}
.callout .formula{background:#fff}
.mistakes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mistakes li{background:#fdf1f1;border:1px solid #f1cfcf;border-radius:10px;padding:11px 14px;font-size:.95rem;color:#7d3030}
.mistakes li b{color:var(--red-d)}

/* glossary */
.gloss-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.gloss-nav a{font-weight:700;font-size:.82rem;color:var(--blue);padding:4px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}
.gloss-nav a:hover{background:#eef4fd}
.gletter{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.5rem;color:var(--blue-d);margin:26px 0 4px;padding-bottom:4px;border-bottom:2px solid var(--line)}
.gloss dl{margin:0}
.gterm{padding:13px 0;border-bottom:1px solid var(--line)}
.gterm dt{font-weight:700;font-size:1.03rem;color:var(--ink)}
.gterm dd{margin:.2em 0 0;color:var(--muted);font-size:.97rem}

/* simple "coming soon" stub pages */
.stub{text-align:center;padding:70px 0}
.stub .e{font-size:2.6rem}
.stub h1{font-family:Fraunces,Georgia,serif;font-size:2.1rem;margin:.3em 0 .2em}
.stub p{color:var(--muted);max-width:520px;margin:0 auto 1em}

footer{padding:30px 0 50px;color:var(--faint);font-size:.86rem;text-align:center}
footer .mission{color:var(--muted);max-width:560px;margin:0 auto 12px}
.foot-nav{margin:0 0 12px}
.foot-nav a{color:var(--muted);font-weight:600;margin:0 3px}
.foot-nav a:hover{color:var(--ink)}
.prose{max-width:680px;margin:0 auto}
.prose h2{margin-top:26px}

@media(max-width:820px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .path{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .hero--center h1{font-size:2.3rem}
}
@media(max-width:640px){
  .cols,.two{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .hero--split .wrap{flex-direction:column-reverse;align-items:flex-start}
  .portrait{flex:none}
}

/* =====================================================================
   Visual refresh (2026): deeper navy, line-icon system, refined
   buttons/cards/callouts. White + blue + Fraunces, leveled up.
   ===================================================================== */
:root{--navy:#0f1b2d;--navy-2:#16263b;--line-2:#eef1f5}

/* cooler, deeper headings + brand */
.brand{color:var(--navy)}
h2,.fcard h3,.cat h3,.rule h4,.step h4,.book h3,.panel h4,.idea h3,.gterm dt{color:var(--navy)}
.hero{background:linear-gradient(180deg,#0d1828,#16263b)}

/* line-icon system — inherits size (1em) + color (currentColor) from the wrapper */
.ic-glyph{display:inline-block;width:1em;height:1em;vertical-align:-.06em;stroke-width:1.75;flex:none}
.cat .ico .ic-glyph{width:24px;height:24px}
.rule .ic .ic-glyph{width:20px;height:20px}
.check .box .ic-glyph{width:14px;height:14px;stroke-width:2.25}
.vplay .ic-glyph{width:22px;height:22px;stroke-width:2}
.disc-ico{display:inline-flex;color:var(--gold)}.disc-ico .ic-glyph{width:16px;height:16px;stroke-width:2}
.ssb-mag .ic-glyph{width:15px;height:15px}.ss-mag .ic-glyph{width:18px;height:18px}

/* refined buttons — one brand blue, smooth hover, real states */
.btn{transition:background .15s,transform .15s,box-shadow .15s;border:1px solid transparent}
.btn.primary{background:var(--blue)}
.btn.primary:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,99,214,.25)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.spot .btn.primary{background:#fff;color:var(--blue-d)}
.spot .btn.primary:hover{background:#eaf1fb;color:var(--blue-d)}
.topnav .cta{transition:background .15s}
.topnav .cta:hover{background:var(--blue-d);color:#fff}

/* slightly softer, more even cards + consistent hover lift */
.cat,.fcard,.rule,.pstep,.book,.panel,.idea,.quote,.vid,.check li{border-color:var(--line-2)}
.fcard{transition:transform .12s,box-shadow .12s}
.fcard:hover{transform:translateY(-3px)}

/* refined disclaimer: calmer, icon-led */
.disclaimer{background:#fcf7ea;border-bottom-color:#ecdcae;color:#6b551f}
.disclaimer .wrap{align-items:center}

/* a11y: visible focus rings */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* screen-reader only helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* =====================================================================
   HOME PAGE — dark theme all the way down (scoped to body.home only;
   inner reading pages stay light). Flips the surface variables so every
   card/section inherits the dark treatment, then re-asserts a few spots.
   ===================================================================== */
body.home{background:#0c1726;color:#e9eef5;
  --card:#15243a;--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.08);
  --ink:#f2f6fb;--muted:#a6b6c8;--faint:#8496ab;--navy:#f2f6fb}
/* dark sticky nav to match */
body.home .topbar{background:#0b1422;border-bottom-color:rgba(255,255,255,.08)}
body.home .brand{color:#fff}
body.home .topnav a{color:#fff}
body.home .topnav a:hover{color:#cfe0f5}
body.home .site-search-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#eaf0f7}
body.home .site-search-btn:hover{border-color:#7fb0ff;color:#fff}
body.home .site-search-btn .ssb-key{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#9fb1c6}
/* headings + eyebrows go light/blue */
body.home h2,body.home h3,body.home h4,body.home .sec-head h2{color:var(--ink)}
body.home .sec-head .kick,body.home .cat-row .kick{color:#7fb0ff}
body.home .sec-head p{color:var(--muted)}
/* links and "more" affordances lighten */
body.home .cat .more,body.home .browse-all a,body.home a.more{color:#7fb0ff}
body.home .foot-nav a{color:#9fb1c6}body.home .foot-nav a:hover{color:#fff}
body.home footer{color:#8496ab}body.home footer .mission{color:#a6b6c8}
/* values band: drop the white background so it blends into the dark page */
body.home .values{background:transparent;border-color:var(--line)}
/* card hover borders a touch brighter on dark */
body.home .cat:hover,body.home .rstep:hover,body.home .mcard:hover{border-color:rgba(255,255,255,.22)}
/* keep icon chips legible on dark cards (slightly translucent) */
body.home .cat .ico,body.home .pstep .pn,body.home .ocard .oico{filter:saturate(1.05)}

/* ---- non-linear "path" flow (titles only, staggered) ---- */
.pathflow{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;align-items:stretch;margin-top:14px}
.pnode{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 14px;color:inherit;transition:transform .15s,border-color .15s}
.pnode:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24)}
.pnode h4{margin:0;font-size:1rem;letter-spacing:-.01em}
.pnode:not(:last-child)::after{content:"";position:absolute;top:50%;right:-26px;width:26px;height:2px;background:#2f7bf0;transform:translateY(-50%);z-index:1}
@media(max-width:760px){.pathflow{grid-template-columns:1fr 1fr}.pnode:not(:last-child)::after{display:none}}

/* ---- Home: neutral-grey balance (dial back the blue, add a second neutral) ---- */
body.home{background:#10141a;
  --card:#1b212b;            /* neutral slate cards (was blue navy) */
  --line:rgba(202,211,224,.16);  /* light-grey hairline borders */
  --line-2:rgba(202,211,224,.10);
  --muted:#a9b2bf;--faint:#8b95a3}
body.home .hero{background:linear-gradient(180deg,#141923,#1d2530)}   /* slate, not blue */
body.home .chartcard{background:transparent;border:0;box-shadow:none;padding:0}
body.home .chartcard figcaption{color:#9aa6b4}
body.home .trust{background:#161c24;border-top-color:rgba(202,211,224,.10)}
body.home .values{background:#161c24;border-color:var(--line)}
/* alternating lighter-grey bands for rhythm/contrast */
body.home > section:nth-of-type(even){background:#151a22}
/* a touch more separation on the trust numbers strip */
body.home .trust .ts{border-right-color:rgba(202,211,224,.12)}
/* explore hub visual */
.explore-viz{max-width:620px;margin:8px auto 24px;background:transparent;border:0;padding:0;box-shadow:none}
.explore-viz svg{display:block;width:100%;height:auto}

/* =====================================================================
   "DIM" theme — a softer, lighter dark used for the Traders section.
   Same family as the home dark theme but a clear step lighter, so the
   section feels related to the homepage without being identical.
   ===================================================================== */
body.dim{background:#212c3a;color:#eef2f7;
  --card:#2d3a4b;--line:rgba(206,216,228,.16);--line-2:rgba(206,216,228,.10);
  --ink:#f4f7fb;--muted:#b2bccb;--faint:#8d99a8;--navy:#f4f7fb}
body.dim .topbar{background:#1b2734;border-bottom-color:rgba(206,216,228,.10)}
body.dim .brand{color:#fff}
body.dim .topnav a{color:#fff}
body.dim .topnav a:hover{color:#cfe0f5}
body.dim .site-search-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#eaf0f7}
body.dim .site-search-btn:hover{border-color:#7fb0ff;color:#fff}
body.dim .site-search-btn .ssb-key{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#aeb9c6}
body.dim h2,body.dim h3,body.dim h4,body.dim .sec-head h2{color:var(--ink)}
body.dim .sec-head .kick,body.dim .cat-row .kick{color:#8fc0ff}
body.dim .sec-head p,body.dim .cat-row + p{color:var(--muted)}
body.dim .hero{background:linear-gradient(180deg,#25303f,#2f3c4d)}
body.dim .cat .more,body.dim .browse-all a,body.dim a.more{color:#8fc0ff}
body.dim .foot-nav a{color:#aeb9c6}body.dim .foot-nav a:hover{color:#fff}
body.dim footer{color:#8d99a8}body.dim footer .mission{color:#b2bccb}
body.dim .cat:hover,body.dim .mcard:hover{border-color:rgba(206,216,228,.30)}
/* trader profile bits on dim */
body.dim .quote blockquote,body.dim .idea h3{color:var(--ink)}
body.dim .src,body.dim .reads li{color:var(--muted)}
/* era timeline card on dim era pages */
.era-viz{max-width:760px;margin:6px auto 26px;background:transparent;border:0;padding:0}
.era-viz svg{display:block;width:100%;height:auto}
/* big era cards on the traders hub */
.eras{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
@media(max-width:720px){.eras{grid-template-columns:1fr}}
.era-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 24px 20px;color:inherit;transition:transform .14s,border-color .14s}
.era-card:hover{transform:translateY(-3px);border-color:rgba(206,216,228,.34)}
.era-card .ek{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fc0ff}
.era-card h3{margin:.35em 0 .3em;font-family:Fraunces,Georgia,serif;font-size:1.5rem}
.era-card p{margin:0 0 .7em;color:var(--muted);font-size:.95rem}
.era-card .names{color:var(--faint);font-size:.86rem;margin:0 0 .8em}
.era-card .ecount{display:inline-block;font-size:.74rem;font-weight:700;color:#8fc0ff;background:rgba(143,192,255,.12);border-radius:6px;padding:3px 9px;margin-right:8px}
.era-card .more{color:#8fc0ff;font-weight:600;font-size:.92rem}