/* chain ink: shared styles */
:root{--blue:#2B3FB0;--ink:#0A1250;--cream:#EDEBE6;--text:#111111;--muted:#3A3A40}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--text);font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%}
a{color:var(--text)}a:hover{color:var(--muted)}
button{font:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:24px 20px 40px}
.hand{font-family:'Gochi Hand',cursive;font-weight:400}
.mono{font-family:'Space Mono',monospace}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px dashed var(--blue);outline-offset:3px}

/* nav */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.nav nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;font-size:15px;font-weight:500}
.nav nav a{text-decoration:none;padding:10px 0}
.nav .pill{border-radius:999px;padding:0 18px;min-height:44px;display:inline-flex;align-items:center}
.on-blue .nav nav a{color:#FFFFFF}
.on-blue .nav .pill{background:#FFFFFF;color:var(--blue)}
.on-cream .nav nav a{color:#111111}
.on-cream .nav .pill{background:var(--blue);color:#FFFFFF}

/* buttons */
.btn{font-size:16px;font-weight:600;text-decoration:none;border-radius:999px;padding:0 26px;min-height:52px;display:inline-flex;align-items:center;box-sizing:border-box}
.btn-white{background:#FFFFFF;color:var(--blue)}
.btn-ghost-white{color:#FFFFFF;border:1.5px solid #FFFFFF}
.btn-blue{background:var(--blue);color:#FFFFFF}
.btn-ghost-blue{color:var(--blue);border:1.5px solid var(--blue)}
.btn-white:hover{color:var(--blue)}.btn-ghost-white:hover,.btn-blue:hover{color:#FFFFFF}.btn-ghost-blue:hover{color:var(--blue)}

/* social circles */
.soc{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue);background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;padding:0;transition:background .2s,color .2s,transform .2s}
.soc:hover{background:var(--blue);color:#FFFFFF;transform:translateY(-2px) rotate(-6deg)}
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:36px 4px 0;font-family:'Space Mono',monospace;font-size:12px;color:var(--muted)}

/* loader */
.loader{position:fixed;inset:0;z-index:9999;background:var(--blue);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .55s ease}
.show-loader .loader{display:flex}
.loader.fade{opacity:0;pointer-events:none}
.loader .pct{margin:0;font-family:'Gochi Hand',cursive;font-size:34px;line-height:1;color:#FFFFFF}
.loader .msg{margin:0;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;color:#FFFFFF;opacity:.75}
.loader .level{transition:transform .25s ease-out}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(104px)}}
.inkwave{animation:wave 1.6s linear infinite}
@keyframes bub{0%{transform:translateY(0);opacity:0}30%{opacity:.6}100%{transform:translateY(-26px);opacity:0}}
.bub{animation:bub 1.8s ease-in infinite}.b2{animation-delay:.6s}.b3{animation-delay:1.1s}
@keyframes bottlebob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.bottlebob{animation:bottlebob 2.4s ease-in-out infinite;transform-origin:50% 90%}

/* intro animations wait until the page is ready */
html:not(.ready) .wait,html:not(.ready) .wait *{animation-play-state:paused !important}

/* shared doodle animations */
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.draw{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s .4s ease-out forwards}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bob{animation:bob 4s ease-in-out infinite}
.card-lift{transition:transform .2s ease}
.card-lift:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .inkspill{display:none}
}