:root {
  --ink: #0a0a0c;
  --ink-2: #0e0e13;
  --cobalt: #2b43ff;
  --cobalt-soft: #5b6bff;
  --bone: #edeae2;
  --mist: #9a9db0;
  --line: rgba(237, 234, 226, 0.12);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.7;
}
a { color: var(--cobalt-soft); text-decoration: none; }
a:hover { color: var(--bone); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1100px; }

header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-family: 'Clash Display', sans-serif; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); font-size: 18px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #36e27e; margin-right: 9px; vertical-align: middle; }
.cta {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--cobalt); color: #fff; padding: 11px 18px; border-radius: 100px; white-space: nowrap;
}
.cta:hover { background: #3a51ff; color: #fff; }

.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mist); }
h1 { font-family: 'Clash Display', sans-serif; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3.1rem); margin: 0.4em 0 0.3em; }
h2 { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.55rem; margin: 1.9em 0 0.5em; letter-spacing: -0.01em; }
h3 { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 1.2rem; margin: 1.6em 0 0.4em; }
p { margin: 0 0 1.1em; color: #d6d3ca; }
ul, ol { color: #d6d3ca; padding-left: 1.2em; margin: 0 0 1.1em; }
li { margin: 0.4em 0; }
strong { color: var(--bone); }
article { padding: 44px 0 8px; }
.meta { color: var(--mist); font-size: 14px; font-family: 'JetBrains Mono', monospace; }
.lead { font-size: 1.18rem; color: var(--bone); }
blockquote { border-left: 2px solid var(--cobalt); margin: 1.5em 0; padding: 0.1em 0 0.1em 1.2em; color: var(--bone); font-style: italic; }

.posts { padding: 24px 0 8px; }
.card { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; margin: 16px 0; transition: border-color 0.3s, transform 0.3s; }
.card:hover { border-color: rgba(237, 234, 226, 0.28); transform: translateY(-2px); }
.card h2 { margin: 0.3em 0 0.3em; font-size: 1.35rem; color: var(--bone); }
.card p { margin: 0; color: var(--mist); }

.endcta { border: 1px solid var(--line); border-radius: 16px; padding: 34px; margin: 44px 0; text-align: center; background: rgba(255,255,255,0.015); }
.endcta h2 { margin: 0.1em 0 0.5em; }
.endcta p { color: var(--mist); max-width: 44ch; margin: 0 auto 1.4em; }

footer.site { border-top: 1px solid var(--line); margin-top: 36px; padding: 30px 0; color: var(--mist); font-size: 13px; font-family: 'JetBrains Mono', monospace; }
footer.site .bar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.back { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); }