/* copypump blog + traders — the /data branding: blue page for the hubs, ink page
   for the long reads, dark cards everywhere, one pill button. the chrome stays
   lowercase (brand), the prose does not (1500 words in lowercase is a wall). */
:root{
  --blue:#516af6;--ink:#0b0b10;--ink-70:rgba(11,11,16,.72);
  --card:#0d1020;--card-2:#151a30;--line:#1f2440;
  --paper:#fff;--paper-85:rgba(255,255,255,.85);--paper-60:rgba(255,255,255,.6);--paper-35:rgba(255,255,255,.35);
  --green:#21c95e;--loss:#ff622e;--bar:#8fa1ff;--radius:22px;
  /* aliases kept for the article markup and the traders build */
  --surface:var(--card);--soft:var(--card-2);--mute:var(--paper-60);--acc:var(--bar);--acc2:var(--bar);--red:var(--bar);
  --profit:var(--green);--edge:var(--line);--prose:var(--paper-85);
  --f:"General Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  /* page-level roles : blue page everywhere, long reads sit in a dark card */
  --page:var(--blue);--fg:var(--ink);--fg-2:var(--ink-70);--h-em:#fff;
  --nav-fg:var(--ink);--nav-link:var(--ink-70);--mark-bg:var(--ink);
  --btn-bg:var(--ink);--btn-fg:#fff;--foot-line:rgba(11,11,16,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
img,svg,table{max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--paper);font-family:var(--f);font-size:16px;line-height:1.5;
 -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.lc{text-transform:lowercase}
.data,.data *{text-transform:none}
.num{font-variant-numeric:tabular-nums}

/* watermark, hubs only */
.wm{position:fixed;right:-8vw;top:-8vw;width:50vw;max-width:760px;opacity:.13;pointer-events:none;z-index:0}
.wm svg{width:100%;height:auto;display:block;animation:breathe 14s ease-in-out infinite;transform-origin:50% 50%}
@keyframes breathe{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(3deg) scale(1.06)}}

/* ---------- chrome, same as the home ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-transform:lowercase;
 background:var(--btn-bg);color:var(--btn-fg);border-radius:999px;padding:12px 22px;font-size:15px;font-weight:600;border:0;
 cursor:pointer;font-family:var(--f);white-space:nowrap;position:relative;overflow:hidden;
 transition:transform .15s,background .15s;-webkit-tap-highlight-color:transparent}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .5s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{left:130%}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid currentColor;opacity:.85}
.btn.ghost:hover{opacity:1}
.btn.light{background:#fff;color:var(--ink)}

nav.top{position:relative;z-index:1;text-transform:lowercase}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:22px;padding-bottom:0}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--nav-fg)}
.mark{width:40px;height:40px;border-radius:11px;background:var(--mark-bg);display:grid;place-items:center;flex:none;
 transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mark svg{width:27px;height:18px;display:block}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand b{font-size:24px;font-weight:700;letter-spacing:-.03em}
nav.top .links{display:flex;gap:20px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--nav-link)}
nav.top .links a{position:relative;padding-bottom:2px;transition:color .2s}
nav.top .links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;
 transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
nav.top .links a:hover,nav.top .links a.on{color:var(--nav-fg)}
nav.top .links a:hover::after,nav.top .links a.on::after{transform:scaleX(1);transform-origin:left}
@media(max-width:1000px){nav.top .links{display:none}}
@media(max-width:760px){nav.top .btn span:first-child{display:none}}

footer{position:relative;z-index:1;margin-top:112px;text-transform:lowercase}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-70);
 padding-top:16px;padding-bottom:24px;border-top:1px solid var(--foot-line)}
footer b{color:var(--fg);font-weight:600}
footer .fl{display:flex;gap:14px;flex-wrap:wrap}
footer a{border-bottom:1px solid currentColor;transition:color .2s}
footer a:hover{color:var(--fg)}
footer .disc{width:100%;font-size:12px;line-height:1.65;opacity:.85}
@media(max-width:760px){footer{margin-top:64px}footer .wrap{flex-direction:column;gap:8px}}

/* ---------- hub head ---------- */
.hubhead{position:relative;z-index:1;padding:88px 0 0}
.eyebrow{font-size:13px;font-weight:600;color:var(--ink-70);text-transform:lowercase}
h1{font-size:clamp(38px,4.8vw,62px);font-weight:700;letter-spacing:-.045em;line-height:.96;color:var(--fg);
 margin:14px 0 18px;overflow-wrap:break-word;text-transform:lowercase}
h1 em{font-style:normal;color:var(--h-em)}
.lede{font-size:clamp(15px,1.3vw,18px);line-height:1.4;font-weight:500;color:var(--ink);max-width:560px}
main{position:relative;z-index:1}

/* the cards */
.card,.pcard,.stat,.toc,.note,.cta,.relg a,.scroll{background:var(--card);border-radius:var(--radius);
 box-shadow:0 18px 50px -24px rgba(0,0,0,.6);min-width:0}
/* nested inside the reading card : one step lighter */
.col .stat,.col .note,.col .scroll,.col .relg a,.col .cta,.col .toc{background:var(--card-2);box-shadow:none}

/* blog hub */
.plist{display:grid;gap:20px;padding:56px 0 10px}
.pcard{display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:start;padding:30px 34px;
 transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(143,161,255,.18)}
.pcard.feat{background:var(--card-2)}
.pcard h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.035em;line-height:1.1;margin:10px 0 10px;
 text-transform:lowercase;color:#fff}
.pcard h2 em{font-style:normal;color:var(--bar)}
.pcard p{color:var(--paper-60);font-size:14.5px;line-height:1.5;max-width:64ch}
.pmeta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--paper-60);font-weight:500;text-transform:lowercase;flex-wrap:wrap}
.pmeta .tag{color:#fff;font-weight:600}
.pcard .go{grid-column:2;grid-row:1/span 3;align-self:center;color:var(--paper-35);font-size:22px;transition:.25s}
.pcard:hover .go{color:#fff;transform:translateX(4px)}
@media(max-width:620px){.pcard{grid-template-columns:1fr;padding:22px 20px}.pcard .go{display:none}}

/* ---------- article / profile ---------- */
.crumb{position:relative;z-index:1;padding:32px 0 0;font-size:12.5px;color:var(--ink-70);text-transform:lowercase}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.5;margin:0 7px}
.post{position:relative;z-index:1;padding:22px 0 0}
.postgrid{max-width:730px}
.post h1{margin:14px 0 20px;font-size:clamp(34px,4.6vw,58px)}
.post .byline{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-70);
 padding-bottom:26px;text-transform:lowercase}
.post .byline b{color:var(--ink);font-weight:600}
.post .byline .sep{opacity:.4}

.toc{padding:22px 26px;margin:30px 0 6px}
.toc b{display:block;font-size:14px;color:var(--paper-60);font-weight:600;margin-bottom:12px;text-transform:lowercase}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:9px}
.toc li{counter-increment:t;font-size:15px;color:var(--paper-60);padding-left:28px;position:relative;line-height:1.45}
.toc li:before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:1px;font-size:11.5px;font-weight:600;color:var(--paper-35);font-variant-numeric:tabular-nums}
.toc a{transition:color .2s}.toc a:hover{color:#fff}

@media(min-width:1080px){
  .postgrid{max-width:none;display:grid;align-items:start;grid-template-columns:minmax(0,730px) minmax(190px,270px);gap:0 60px}
  .phead{grid-column:1;grid-row:1}
  .post .col{grid-column:1;grid-row:2;min-width:0}
  .toc{grid-column:2;grid-row:1/span 2;position:sticky;top:24px;align-self:start;margin:6px 0 0;padding:22px 26px;
   background:var(--card);max-height:calc(100vh - 48px);overflow-y:auto}
  .toc li{font-size:14px}
}

.post .col{background:var(--card);border-radius:var(--radius);padding:34px 38px 40px;box-shadow:0 18px 50px -24px rgba(0,0,0,.6);margin-top:8px}
.body{color:var(--prose);font-size:clamp(16.5px,1.15vw + 14px,17.5px);line-height:1.72;padding-top:0}
.body>:first-child{margin-top:0}
.body h2:first-child{margin-top:0}
.body>*{margin-top:22px}
.body h2{color:#fff;font-size:clamp(24px,4.4vw,32px);font-weight:700;letter-spacing:-.04em;line-height:1.1;margin-top:56px;
 scroll-margin-top:40px;text-transform:lowercase;overflow-wrap:break-word}
.body h2 em{font-style:normal;color:var(--bar)}
.body h3{color:#fff;font-size:clamp(18px,3vw,21px);font-weight:600;letter-spacing:-.02em;margin-top:36px;scroll-margin-top:40px;text-transform:lowercase}
.body a{color:#fff;border-bottom:1px solid rgba(143,161,255,.6);transition:.18s}
.body a:hover{border-bottom-color:#fff}
.body strong{color:#fff;font-weight:600}
.body ul,.body ol{padding-left:22px;display:grid;gap:11px}
.body li{padding-left:4px}
.body li::marker{color:var(--paper-35)}
.body blockquote{border-left:2px solid var(--bar);padding:2px 0 2px 20px;color:#fff;font-size:1.04em;line-height:1.6}
.body hr{border:0;border-top:1px solid var(--line);margin:46px 0}
.body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.87em;background:var(--card-2);
 border-radius:6px;padding:2px 6px;text-transform:none;overflow-wrap:break-word;color:#fff}
.body figcaption{color:var(--paper-60);font-size:13.5px;margin-top:10px;line-height:1.55}

/* pull-out numbers, same tiles as /data */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.stat{padding:22px 24px;border-radius:18px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.stat:hover{transform:translateY(-4px)}
.stat b{display:block;font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
.stat b.up{color:var(--green)}.stat b.dn{color:var(--loss)}
.stat span{display:block;font-size:12.5px;color:var(--paper-60);margin-top:10px;line-height:1.45}
@media(max-width:640px){.stats{grid-template-columns:1fr}}

.note{border-radius:18px;padding:20px 24px;font-size:15.5px;line-height:1.65;color:var(--prose);border-left:3px solid var(--bar)}
.note b{color:#fff}
.note.warn{border-left-color:var(--loss)}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 10px}
table.t{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
table.t th{text-align:left;font-size:11.5px;letter-spacing:.04em;color:var(--paper-35);font-weight:600;
 padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap;text-transform:lowercase}
table.t td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--prose);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr,table.t tr{transition:background .2s}
table.t tr:hover td{background:rgba(143,161,255,.05)}
table.t .num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:#fff}

/* faq */
.faq{margin-top:16px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:flex-start;gap:14px;
 color:#fff;padding:18px 0;min-height:62px;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";margin-left:auto;color:var(--paper-35);font-size:22px;line-height:1;flex:none}
.faq details[open] summary{padding-bottom:4px;min-height:0}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--paper-60);font-size:15.5px;margin-top:8px;padding-bottom:20px;line-height:1.62}

/* cta card */
.cta{padding:40px 34px;text-align:center;margin-top:52px}
.cta h3{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.05;text-transform:lowercase;margin-bottom:12px;color:#fff}
.cta h3 em{font-style:normal;color:var(--bar)}
.cta p{color:var(--paper-60);font-size:15px;max-width:440px;margin:0 auto 22px;line-height:1.55}
.cta .btn{background:#fff;color:var(--ink)}
@media(max-width:620px){.cta{padding:32px 20px}.cta .btn{width:100%}}

.rel{margin-top:56px;border-top:1px solid var(--line);padding-top:34px}
.rel b{font-size:14px;color:var(--paper-60);font-weight:600;text-transform:lowercase}
.relg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.relg a{padding:22px 24px;display:block;border-radius:18px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.relg a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(143,161,255,.18)}
.relg .rt{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3;text-transform:lowercase;color:#fff}
.relg .rd{color:var(--paper-60);font-size:13.5px;margin-top:7px;line-height:1.5}
@media(max-width:640px){.relg{grid-template-columns:1fr}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:620px){
  .wrap{padding:0 22px}
  .hubhead{padding:48px 0 0}
  .plist{padding:34px 0 4px;gap:14px}
  .post{padding:16px 0 0}
  .post .col{padding:22px 20px 26px;border-radius:18px}
  .body>*{margin-top:20px}
  .body h2{margin-top:42px}
  .toc{padding:18px 18px}
  .note{padding:18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
 html{scroll-behavior:auto}.reveal{opacity:1;transform:none}}