/* Ramp's palette, the way ramp.com uses it: a white page, near-black ink, warm greys,
   and Ramp lime ("solar") only in small places: a fill with black text, a marker, a line on a black card.
   Lime almost vanishes on white, so there it never stands alone: lime lines get a dark core,
   lime shapes a dark edge, lime text turns dark on a lime marker (assets/lime.js, and .c-acc below).
   Spring, blaze and smolder are the supporting colours, so scenes are not greyscale.

   Token names are a contract with every section script. Values are always #rrggbb:
   some scripts add a 2-digit alpha to them. */
:root{
  color-scheme:light dark;
  --ink:#0c0a08; --ink-hover:#000; --on-ink:#fff; --body:#57534f; --muted:#6e6a68;
  --page:#ffffff; --surface:#ffffff; --soft:#faf9f7; --sunken:#f4f2f0; --hair:#d2cecb;
  --accent:#e4f222; --on-lime:#0c0a08; --lime-core:#0c0a08; --grey:#8f8a86; --shadow:12 10 8;
  --lime-soft:#f5ff78; --spring:#5683d2; --spring-soft:#e4ebf6; --blaze:#e96516; --blaze-soft:#fde9dc;
  --smolder:#17332d; --smolder-soft:#e1ebe7;
  --lime-halo:1; /* how strong the lime layer under a line is: full under a dark core, a soft glow where lime reads by itself */
  --panel:#141312; /* the dark of a Ramp card: the meter, the Ramp card in s6d and s7a */
  --sans:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --hand:"Shantell Sans",cursive;
  --measure:55ch; --ease:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){:root{
  --ink:#f4f2f0; --ink-hover:#fff; --on-ink:#0c0a08; --body:#b3aeaa; --muted:#99948f;
  --page:#0c0a08; --surface:#1a1919; --soft:#141210; --sunken:#221f1d; --hair:#34302d;
  --grey:#8f8a86; --shadow:255 255 255; --lime-core:#e4f222; --lime-halo:.28;
  --lime-soft:#3d4214; --spring:#7fa3e6; --spring-soft:#1c2638; --blaze:#f07e3a; --blaze-soft:#33200f;
  --smolder:#8fcfb3; --smolder-soft:#16302a;
  --panel:#1c1b1a;
}}

/* lime in small places outside the charts */
::selection{background:var(--accent);color:var(--on-lime)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--body);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
figure{margin:0}

.wordmark{position:absolute;top:20px;left:16px;display:block;line-height:0}
.wordmark img{height:24px;width:auto}
.subscribe{position:fixed;top:16px;right:16px;z-index:50;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:9999px;
  background:var(--accent);color:var(--on-lime);font:500 14px/1 var(--sans);text-decoration:none;box-shadow:inset 0 0 0 1px rgb(12 10 8/.14),0 4px 12px -4px rgb(var(--shadow)/.18);
  transition:filter 150ms var(--ease),transform 150ms var(--ease)}
.subscribe::after{content:"";position:absolute;inset:-6px}
.subscribe:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.subscribe:hover{filter:brightness(.95)}}
@media (max-width:639px){.subscribe{top:12px;right:12px}.wordmark{top:16px}}

main{padding:92px 16px 64px}
@media (max-width:1023px){main{padding-top:72px}}
.col{max-width:var(--measure);margin:0 auto;position:relative}
h1,h2{color:var(--ink);font-weight:500;text-wrap:balance;margin:0}
h1{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin:0 0 16px}
h2{font-size:20px;line-height:1.25;padding:64px 0 8px}
p{margin:12px 0;text-wrap:pretty}
.wide{margin:24px 0}
@media (min-width:1024px){.wide{margin-left:-32px;margin-right:-32px}}
.later{color:var(--muted)}
/* links in the text: dark words on a lime underline, like a marker */
.col p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:3px;transition:text-decoration-color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.col p a:hover{text-decoration-color:var(--ink)}}

/* hand-drawn charts */
.host{position:relative;width:100%}
.ch{display:block;overflow:visible;max-width:100%}
.ch text{font-family:var(--hand)}
.c-ink{color:var(--ink)} .c-grey{color:var(--grey)}
.c-acc{color:var(--lime-core)} .c-lime{color:var(--accent)}
.ch .c-lime{opacity:var(--lime-halo)}
/* supporting colours */
.c-spring{color:var(--spring)} .c-blaze{color:var(--blaze)} .c-smolder{color:var(--smolder)}
/* soft fills for boxes (rect.head); the text halo takes the fill colour */
.ch .f-spring{--fill:var(--spring-soft)} .ch .f-blaze{--fill:var(--blaze-soft)} .ch .f-smolder{--fill:var(--smolder-soft)}
.ch .f-sunken{--fill:var(--sunken)} .ch .f-ink{--fill:var(--ink)}
.ch :is(.f-spring,.f-blaze,.f-smolder,.f-sunken,.f-ink) rect.head{fill:var(--fill)}
.ch :is(.f-spring,.f-blaze,.f-smolder,.f-sunken,.f-ink).it text{stroke:var(--fill)}
.ch .f-ink.it text{fill:var(--on-ink)}
.ch .it.c-spring text.co{fill:var(--ink)}
.ch .cur{fill:var(--accent);stroke:var(--lime-core);stroke-width:1.5px}
.ch .c-acc path[fill="currentColor"]{fill:var(--accent)}
.ch .hl{fill:var(--accent)} .ch .it.c-acc text.big{fill:var(--on-lime);stroke:none}
.ch .c-acc rect.head{fill:var(--accent)}
/* lime text: dark letters on a lime marker, on any background (like ramp.com's lime buttons) */
.ch g.c-acc text{fill:var(--on-lime);stroke:var(--accent);stroke-width:7px;stroke-linejoin:round;paint-order:stroke}
.ch .pt{fill:currentColor}
.ch .tick{fill:var(--muted)}
.ch .lab{opacity:0;transition:opacity 260ms var(--ease)}
.ch .lab.on{opacity:1}
.ch .lab text{fill:currentColor;paint-order:stroke;stroke:var(--page);stroke-width:5px;stroke-linejoin:round}
.ch .bub{transition:opacity 260ms var(--ease)}
.ch .bub rect.fill{fill:var(--surface)}
.ch .bub text{fill:var(--ink)}
.ch .bub text,.ch .bub .c-ink{transition:fill 260ms var(--ease),color 260ms var(--ease)}
/* dimmed cards stay solid, so overlapping cards never show through each other */
.ch .bub.dim text{fill:var(--hair)} .ch .bub.dim .c-ink{color:var(--hair)}
.ch .me text{fill:var(--ink)} .ch .me{transition:opacity 260ms var(--ease)} .ch .me.off{opacity:0}
.ch .pop{animation:pop 260ms var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.96)}}
.ch .head{fill:var(--page)}
.ch .axl text{fill:var(--muted)}
.ch .it{opacity:0;transform:translateY(-6px);transition:opacity 220ms var(--ease),transform 280ms var(--ease),color 220ms var(--ease)}
.ch .it.on{opacity:1;transform:none}
.ch .it text{fill:currentColor;paint-order:stroke;stroke:var(--page);stroke-width:5px;stroke-linejoin:round}
.ch .it text.cat{fill:var(--body)}
.ch .it text.swap{transition:opacity 200ms var(--ease)}
.ch .it text.off,.ch .it .hl.off{opacity:0}
.ch .it .hl{transition:opacity 200ms var(--ease)}
#s3.scrolly{height:480vh;height:480svh}
#s4.scrolly{height:460vh;height:460svh}
#s4b.scrolly{height:440vh;height:440svh}
#s4c.scrolly{height:480vh;height:480svh}
#s4d.scrolly{height:440vh;height:440svh}
#s4e.scrolly{height:400vh;height:400svh}
#s4f.scrolly{height:420vh;height:420svh}
#s4g.scrolly{height:440vh;height:440svh}
#s5a.scrolly{height:460vh;height:460svh}
#s5b.scrolly{height:480vh;height:480svh}
#s5c.scrolly{height:440vh;height:440svh}
#s6a.scrolly{height:540vh;height:540svh}
#s6b.scrolly{height:420vh;height:420svh}
#s6c.scrolly{height:440vh;height:440svh}
#s7a.scrolly{height:520vh;height:520svh}
#s8a.scrolly{height:460vh;height:460svh}
#s8b.scrolly{height:440vh;height:440svh}
#s8c.scrolly{height:440vh;height:440svh}
#s9.scrolly{height:620vh;height:620svh}
.zc{display:block;width:100%}
.ch .trail{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round;transition:opacity 220ms var(--ease)}
.scrolly + .scrolly{margin-top:64px}

/* a section whose drawing pins while the page scrolls past it */
.scrolly{position:relative;height:380vh;height:380svh}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center}
.pin .wide{margin-top:0;margin-bottom:0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}