/* RAW Protocol blog theme — matches the main rawproto.com design system */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
@font-face{font-family:'Geist';font-weight:100 900;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');}
@font-face{font-family:'GeistMono';font-weight:100 900;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');}

:root{
  --tx:#f5f5f5;--tx2:#d4d4d4;--tx-sub:#9a9a9a;--tx-m:#6b6b6b;--tx-d:#3a3a3a;
  --bd:rgba(255,255,255,0.1);--bd2:rgba(255,255,255,0.16);
  --accent:#B8C97A;--bg:#000;--bg3:#0a0a0a;
  --mono:'JetBrains Mono',monospace;
  --sans:'Geist','JetBrains Mono',sans-serif;
  --gmono:'GeistMono','JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ambient vertical grid lines — same as main site */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-size:1px 100%,1px 100%,1px 100%,1px 100%;background-repeat:no-repeat;background-position:25% 0,50% 0,75% 0,90% 0;background-image:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.05) 20%,transparent 80%),linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.05) 20%,transparent 80%),linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.05) 20%,transparent 80%),linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.05) 20%,transparent 80%);}

/* ── Nav (matches site) ── */
.site-nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 56px;height:64px;background:rgba(0,0,0,0.94);border-bottom:1px solid var(--bd);backdrop-filter:blur(20px)}
.site-logo{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:8px;color:var(--tx)}
.nav-links{display:flex;gap:0;list-style:none}
.nav-links a{font-family:var(--gmono);font-size:11px;color:var(--tx-sub);text-decoration:none;padding:8px 16px;text-transform:uppercase;letter-spacing:.5px;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--tx)}
.nav-cta{font-family:var(--gmono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#000;background:var(--accent);padding:9px 22px;border-radius:3px;transition:opacity .2s;white-space:nowrap}
.nav-cta:hover{opacity:.85}

/* ── Main ── */
.site-main{position:relative;z-index:2;width:100%;max-width:880px;margin:0 auto;padding:72px 24px;flex:1 0 auto}

/* ── Index header ── */
.blog-header{margin-bottom:52px;padding-bottom:32px;border-bottom:1px solid var(--bd)}
.blog-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:block}
.blog-title{font-family:var(--sans);font-weight:200;font-size:clamp(34px,5vw,52px);letter-spacing:-2px;line-height:1.05;color:var(--tx)}
.blog-desc{color:var(--tx-sub);margin-top:14px;font-weight:300;max-width:600px;font-size:15px;line-height:1.8}

/* ── Post feed cards (matches .card treatment) ── */
.post-feed{display:grid;gap:22px}
.post-card{position:relative;border-radius:20px;background:rgba(255,255,255,0.025);box-shadow:0 4px 20px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.03) inset;transition:transform .28s ease,box-shadow .28s ease,background .28s ease}
.post-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.05) 45%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.post-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.038);box-shadow:0 14px 38px rgba(0,0,0,0.68),0 0 34px rgba(184,201,122,0.045)}
.post-card:hover::before{background:linear-gradient(135deg,rgba(255,255,255,0.22) 0%,rgba(184,201,122,0.09) 42%,transparent 100%)}
.post-card-link{display:block;padding:28px}
.post-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:20px}
.post-card-label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx-m);margin-bottom:12px;display:block}
.post-card-title{font-family:var(--sans);font-size:22px;font-weight:450;letter-spacing:-.3px;line-height:1.3;color:var(--tx);transition:color .2s}
.post-card-excerpt{color:var(--tx-sub);margin-top:10px;font-size:14.5px;line-height:1.75;font-weight:300}
.post-card-link:hover .post-card-title{color:var(--accent)}

/* ── Single post ── */
.post{position:relative;z-index:2;max-width:740px;margin:0 auto}
.post-header{margin-bottom:8px}
.post-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:block}
.post-title{font-family:var(--sans);font-size:clamp(32px,4.5vw,50px);font-weight:200;letter-spacing:-2px;line-height:1.08;color:var(--tx)}
.post-meta{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--tx-m);text-transform:uppercase;letter-spacing:1px}
.post-image{width:100%;border-radius:16px;margin:36px 0;border:1px solid var(--bd)}

/* ── Content typography ── */
.post-content{margin-top:32px;color:var(--tx2);font-size:16.5px;line-height:1.85}
.post-content h2{font-family:var(--sans);font-weight:300;font-size:28px;letter-spacing:-.8px;color:var(--tx);margin:48px 0 16px}
.post-content h3{font-family:var(--sans);font-weight:400;font-size:21px;letter-spacing:-.3px;color:var(--tx);margin:36px 0 12px}
.post-content p{margin:0 0 22px}
.post-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-content strong{color:var(--tx);font-weight:600}
.post-content em{color:var(--tx)}
.post-content img{max-width:100%;border-radius:12px;margin:28px 0}
.post-content figure{margin:28px 0}
.post-content figcaption{font-family:var(--mono);font-size:11px;color:var(--tx-m);text-align:center;margin-top:10px;text-transform:uppercase;letter-spacing:.5px}
.post-content blockquote{border-left:2px solid var(--accent);padding:4px 0 4px 24px;margin:28px 0;color:var(--tx-sub);font-style:italic}
.post-content ul,.post-content ol{margin:0 0 22px 24px}
.post-content li{margin:0 0 8px}
.post-content hr{border:none;border-top:1px solid var(--bd);margin:40px 0}
.post-content pre{background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;margin:28px 0;line-height:1.6}
.post-content code{font-family:var(--mono);font-size:.88em;background:var(--bg3);padding:2px 6px;border-radius:4px;color:var(--accent)}
.post-content pre code{background:none;padding:0;color:var(--tx2)}

/* Ghost Koenig card widths */
.kg-width-wide{margin-left:calc(50% - 50vw + 24px);margin-right:calc(50% - 50vw + 24px);width:auto;max-width:1080px}
.kg-width-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
.kg-width-full img{border-radius:0}

/* ── Pagination ── */
.pagination{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:740px;margin:64px auto 0;padding-top:28px;border-top:1px solid var(--bd);font-family:var(--gmono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx-sub)}
.pagination a{transition:color .2s}
.pagination a:hover{color:var(--accent)}
.pagination .page-number{color:var(--tx-d)}

/* ── Footer (matches site) ── */
.site-footer{position:relative;z-index:2;flex-shrink:0;border-top:1px solid var(--bd);padding:24px 56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;background:#000}
.footer-logo{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:6px;color:var(--tx-d)}
.footer-links{display:flex;gap:20px;list-style:none;flex-wrap:wrap}
.footer-links a{font-family:var(--gmono);font-size:10px;color:var(--tx-d);text-transform:uppercase;letter-spacing:.5px;transition:color .2s}
.footer-links a:hover{color:var(--tx-sub)}
.footer-copy{font-family:var(--mono);font-size:10px;color:var(--tx-d)}

/* ── Responsive ── */
@media (max-width:760px){
  .site-nav{padding:0 20px}
  .nav-links{display:none}
  .site-main{padding:48px 20px}
  .post-card-link{padding:22px}
  .site-footer{padding:24px 20px;flex-direction:column;gap:14px;text-align:center}
}