/* Shared design tokens for blog pages */
:root{
  --cream:#FAFAF8;
  --cream-2:#F0F0ED;
  --ink:#111214;
  --ink-2:#373737;
  --orange:#2EC2DB;
  --orange-deep:#1FA8C0;
  --green:#355E6E;
  --green-2:#2A4C5A;
  --blue:#2A8FA6;
  --lime:#2EC2DB;
}
html,body{ background:var(--cream); color:var(--ink);}
body{
  font-family:'Inter', system-ui, sans-serif;
  font-feature-settings:"ss01","cv11";
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect x='4' y='4' width='10' height='10' fill='%23111214'/></svg>") 9 9, default;
}
a, button, [role=button], .interactive{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><rect x='2' y='2' width='18' height='18' fill='%232EC2DB'/><rect x='5' y='5' width='12' height='12' fill='%23FAFAF8'/></svg>") 11 11, pointer;
}
.font-display{ font-family:'Space Grotesk', system-ui, sans-serif; letter-spacing:-0.02em;}
.font-mono{ font-family:'JetBrains Mono', ui-monospace, monospace;}
.font-pixel{ font-family:'VT323', monospace;}

.hs{ box-shadow: 6px 6px 0 0 var(--ink); }
.hs-sm{ box-shadow: 3px 3px 0 0 var(--ink); }
.hs-orange{ box-shadow: 6px 6px 0 0 var(--orange); }
.hs-green{ box-shadow: 6px 6px 0 0 var(--green); }
.hs-cream{ box-shadow: 6px 6px 0 0 var(--cream); }
.border-ink{ border-color: var(--ink);}
.bg-cream{ background: var(--cream);}
.bg-cream-2{ background: var(--cream-2);}
.bg-ink{ background: var(--ink);}
.bg-orange{ background: var(--orange);}
.bg-green{ background: var(--green);}
.bg-blue{ background: var(--blue);}
.bg-lime{ background: var(--lime);}
.text-cream{ color: var(--cream);}
.text-ink{ color: var(--ink);}
.text-ink-2{ color: var(--ink-2);}
.text-orange{ color: var(--orange);}
.text-green{ color: var(--green);}
.text-blue{ color: var(--blue);}

.pixelated{ image-rendering: pixelated; image-rendering: crisp-edges;}

.btn-chunky{ transition: transform .12s ease, box-shadow .12s ease;}
.btn-chunky:hover{ transform: translate(2px,2px); box-shadow: 3px 3px 0 0 var(--ink);}
.btn-chunky:active{ transform: translate(5px,5px); box-shadow: 1px 1px 0 0 var(--ink);}
.btn-chunky-cream:hover{ box-shadow: 3px 3px 0 0 var(--cream);}
.btn-chunky-cream:active{ box-shadow: 1px 1px 0 0 var(--cream);}

.arr{ display:inline-block; transition: transform .2s ease;}
.group:hover .arr, a:hover .arr, button:hover .arr{ transform: translateX(6px);}

.pix-div{
  height:8px;
  background-image: linear-gradient(to right, var(--ink) 0 8px, transparent 8px 16px);
  background-size: 16px 8px;
  background-repeat: repeat-x;
}

@keyframes blink{ 50%{ opacity:0;}}
.caret{ animation: blink 1s steps(2) infinite;}

*:focus-visible{ outline: 3px solid var(--orange); outline-offset: 2px;}
::selection{ background: var(--orange); color: var(--ink);}

/* article-specific styles */
.article-prose{
  font-family:'Inter', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
}
.article-prose p{ margin: 0 0 1.4em 0;}
.article-prose p.lede{ font-size: 22px; line-height: 1.55; color: var(--ink-2); margin-bottom: 1.6em;}
.article-prose h2{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing:-0.02em;
  font-size: 32px;
  line-height: 1.15;
  margin: 2.4em 0 .8em;
}
.article-prose h3{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 2em 0 .5em;
}
.article-prose ul, .article-prose ol{ margin: 0 0 1.4em 1.2em; }
.article-prose ul li{ list-style: none; position:relative; padding-left:1.4em; margin-bottom:.5em;}
.article-prose ul li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background: var(--orange);}
.article-prose ol{ list-style: decimal; padding-left:1.2em;}
.article-prose ol li{ margin-bottom:.5em;}
.article-prose blockquote{
  border-left: 4px solid var(--orange);
  background: var(--cream-2);
  padding: 1em 1.2em;
  margin: 1.6em 0;
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing:-0.01em;
}
.article-prose strong{ font-weight: 700; color: var(--ink);}
.article-prose code{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: .92em;
  background: var(--cream-2);
  padding: 1px 6px;
  border: 1px solid var(--ink);
}
.article-prose hr{
  border: 0; height: 8px;
  background-image: linear-gradient(to right, var(--ink) 0 8px, transparent 8px 16px);
  background-size: 16px 8px;
  background-repeat: repeat-x;
  margin: 2.4em 0;
}
.article-prose .pull-stat{
  display:block;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: 6px 6px 0 0 var(--orange);
  padding: 1.4em 1.6em;
  margin: 2em 0;
}
.article-prose .pull-stat .num{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing:-0.03em;
  color: var(--ink);
}
.article-prose .pull-stat .label{
  display:block;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: .5em;
}