*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
:root{
  --bg:#FAFAF7;--fg:#0B0B0C;--fg-2:#3D3D3F;--fg-3:#757579;
  --line:#0B0B0C14;--line-strong:#0B0B0C22;
  --accent-1:#6FD5D0;--accent-2:#0E3F55;
  --sans:'Geist',sans-serif;--mono:'JetBrains Mono',monospace;--serif:'Instrument Serif',serif;
  --page-pad:clamp(20px,5vw,80px);
}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}

/* NAV */
nav.top{position:sticky;top:0;z-index:100;backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);background:color-mix(in oklab,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;padding:14px var(--page-pad);max-width:1600px;margin:0 auto;gap:16px}
nav.top a{color:inherit;text-decoration:none}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-sym{width:26px;height:26px}
.logo-word{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-0.01em}
.logo-word em{font-style:normal;color:var(--fg-3);font-weight:400;margin-left:6px;font-size:12px}
.nav-right{display:flex;align-items:center;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.nav-cta{padding:10px 14px;border:1px solid var(--fg);border-radius:2px;transition:background .2s,color .2s}
.nav-cta:hover{background:var(--fg);color:var(--bg)}

/* ARTICLE LAYOUT */
.article-hero{padding:clamp(48px,8vw,100px) var(--page-pad) clamp(32px,4vw,60px);max-width:1600px;margin:0 auto}
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.article-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--accent-1);color:var(--fg);padding:4px 10px;border-radius:2px}
.article-date,.article-read{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
h1.article-title{font-size:clamp(28px,5vw,56px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;margin:0 0 24px;max-width:22ch}
.article-lede{font-size:clamp(16px,1.6vw,20px);color:var(--fg-2);line-height:1.6;max-width:60ch;margin:0}

/* ARTICLE BODY */
.article-body{max-width:720px;margin:0 auto;padding:0 var(--page-pad) 80px}
.article-body h2{font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-0.02em;margin:48px 0 16px;line-height:1.2}
.article-body h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:32px 0 12px}
.article-body p{font-size:17px;color:var(--fg-2);line-height:1.7;margin:0 0 20px}
.article-body ul,.article-body ol{padding-left:24px;margin:0 0 20px}
.article-body li{font-size:17px;color:var(--fg-2);line-height:1.65;margin-bottom:8px}
.article-body strong{color:var(--fg);font-weight:600}
.article-body a{color:var(--fg);border-bottom:1px solid var(--line-strong);text-decoration:none;transition:border-color .2s}
.article-body a:hover{border-color:var(--fg)}
.article-body .callout{background:color-mix(in oklab,var(--accent-1) 12%,var(--bg));border-left:3px solid var(--accent-1);padding:20px 24px;border-radius:0 2px 2px 0;margin:32px 0}
.article-body .callout p{margin:0;font-size:16px}
.article-body hr{border:none;border-top:1px solid var(--line-strong);margin:48px 0}

/* CTA BLOCK */
.article-cta{background:var(--fg);color:var(--bg);padding:48px;border-radius:4px;margin:48px 0;display:flex;flex-direction:column;gap:16px}
.article-cta h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--bg)}
.article-cta p{margin:0;font-size:15px;color:color-mix(in oklab,var(--bg) 70%,transparent)}
.article-cta a{display:inline-block;background:var(--accent-1);color:var(--fg);padding:12px 24px;border-radius:2px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:none;transition:opacity .2s}
.article-cta a:hover{opacity:.85}

/* FOOTER */
.blog-footer{border-top:1px solid var(--line-strong);padding:24px var(--page-pad);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);flex-wrap:wrap;gap:12px}
.blog-footer a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}

/* BLOG INDEX */
.blog-hero{padding:clamp(60px,8vw,120px) var(--page-pad) clamp(32px,4vw,60px);max-width:1600px;margin:0 auto}
.blog-hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}
.blog-hero h1{font-size:clamp(32px,5vw,60px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;margin:0 0 16px}
.blog-hero p{font-size:17px;color:var(--fg-2);max-width:54ch;margin:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin:0 0 80px}
.blog-card{background:var(--bg);padding:36px;display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit;transition:background .2s}
.blog-card:hover{background:color-mix(in oklab,var(--fg) 3%,var(--bg))}
.blog-card .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--accent-1);color:var(--fg);padding:3px 8px;border-radius:2px;align-self:flex-start}
.blog-card h2{font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.25;margin:0}
.blog-card p{font-size:14px;color:var(--fg-2);line-height:1.6;margin:0;flex:1}
.blog-card .meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);display:flex;gap:16px;border-top:1px solid var(--line);padding-top:16px}
.blog-card .arr{font-size:16px;align-self:flex-end;transition:transform .25s}
.blog-card:hover .arr{transform:translate(4px,-4px)}

@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.article-cta{padding:32px}}

/* STICKY CTA */
.sticky-cta{
  position:fixed;bottom:24px;right:24px;z-index:90;
  background:var(--fg);color:var(--bg);
  padding:14px 22px;border-radius:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 4px 24px rgba(0,0,0,.18);
  opacity:0;transform:translateY(12px);
  transition:opacity .35s,transform .35s;
  pointer-events:none;
}
.sticky-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.sticky-cta:hover{background:color-mix(in oklab,var(--fg) 85%,var(--accent-2))}
@media(max-width:600px){.sticky-cta{bottom:16px;right:16px;padding:12px 18px;font-size:10px}}

/* MID-ARTICLE CTA */
.mid-cta{margin:40px 0}
.mid-cta h3{font-size:18px}
.mid-cta p{font-size:14px}