@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #0b0f14; --panel: #121821; --ink: #e6edf3; --muted: #8b98a5;
  --neon: #22d3ee; --lime: #a3e635; --border: #1f2937;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px; opacity:.25; }
.mono { font-family:"IBM Plex Mono",ui-monospace,monospace; }
h1,h2 { font-family:"Chakra Petch",sans-serif; letter-spacing:-.01em; }
.container { max-width:1080px; margin:0 auto; padding:0 20px; position:relative; }

.site-header { display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px; border-bottom:1px solid var(--border); }
.logo { font-family:"Chakra Petch"; font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none; }
.cursor { color:var(--lime); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
nav a { margin-left:18px; color:var(--muted); text-decoration:none; font-size:.9rem; }
nav a:hover { color:var(--neon); }

.hero-card { display:block; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; margin-top:28px; text-decoration:none; color:inherit;
  transition:border-color .2s, box-shadow .2s; }
.hero-card:hover { border-color:var(--neon); box-shadow:0 0 24px rgba(34,211,238,.15); }
.hero-card img { width:100%; max-height:340px; object-fit:cover; display:block; }
.hero-card div { padding:22px 26px; }
.tagline { color:var(--lime); font-size:.8rem; margin:0 0 8px; }
h1 { font-size:clamp(1.6rem,4vw,2.6rem); margin:0 0 10px; }
.excerpt { color:var(--muted); margin:0; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:34px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  transition:border-color .2s, transform .2s; }
.card:hover { border-color:var(--lime); transform:translateY(-2px); }
.card a { display:block; text-decoration:none; color:inherit; }
.card img { width:100%; height:150px; object-fit:cover; display:block; }
.card h2 { font-size:1.05rem; margin:14px 16px 6px; line-height:1.35; }
.card .excerpt { padding:0 16px; font-size:.85rem; }
.card footer { display:flex; justify-content:space-between; gap:8px; padding:12px 16px 14px;
  color:var(--muted); font-size:.72rem; border-top:1px dashed var(--border); margin-top:12px; }
.card footer span { color:var(--neon); }

.pagination { display:flex; justify-content:space-between; margin:30px 0; color:var(--muted); font-size:.85rem; }
.pagination a { color:var(--neon); text-decoration:none; }

.post { padding-top:30px; }
.post .tagline { margin-bottom:10px; }
.hero-img { width:100%; max-height:420px; object-fit:cover; border-radius:12px; margin:18px 0; border:1px solid var(--border); }
.prose { font-size:1.05rem; }
.prose h2 { color:var(--neon); margin-top:1.6em; }
.prose pre { background:#0d1117; border:1px solid var(--border); border-radius:8px; padding:14px; overflow-x:auto;
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; }
.prose code { font-family:"IBM Plex Mono",monospace; background:#0d1117; padding:.1em .35em; border-radius:4px; }
.prose blockquote { border-left:3px solid var(--lime); margin:1.2em 0; padding:.2em 1em; color:var(--muted); }

.site-footer { margin-top:60px; padding-bottom:40px; color:var(--muted); font-size:.8rem; text-align:center; }

.tag-header { padding: 34px 0 4px; }
.tag-header h1 { margin-bottom: 6px; }
.prose a { color: var(--neon); }
.kg-width-wide { position: relative; width: 85vw; min-width: 100%; max-width: 1140px; margin: 2em auto; }
.kg-width-full { position: relative; width: 100vw; margin: 2em 0 2em calc(50% - 50vw); }
.kg-width-full img { width: 100%; }
.kg-image-card figcaption { color: var(--muted); font-size: .8rem; text-align: center; margin-top: 8px; }

nav ul { display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0; }
nav a { margin-left:0; }
.prose table th, .prose table td { word-break:break-word; }
@media (max-width:640px) {
  .site-header { padding:14px 16px; flex-wrap:wrap; gap:10px; }
  nav ul { gap:12px; }
  .container { padding:0 14px; }
  .prose { font-size:1rem; }
  .prose pre { font-size:.75rem; }
}
.site-footer a { color:var(--neon); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* left rail: post pages only, hidden under 1180px so the text column never shrinks */
.post-layout { display:grid; gap:28px; grid-template-columns:minmax(0,1fr); }
.x-rail { order:2; font-size:.82rem; }
.rail-card { border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:14px; }
.rail-title { color:var(--lime); margin:0 0 6px; }
.rail-card a { color:var(--neon); text-decoration:none; font-family:"IBM Plex Mono",monospace; }
.rail-card a:hover { text-decoration:underline; }
.rail-note { color:var(--muted); margin:6px 0 0; }
@media (min-width:1180px) {
  .post-layout { grid-template-columns:210px minmax(0,1fr); align-items:start; }
  .x-rail { order:0; position:sticky; top:20px; }
}

.rail-handle { display:block; margin-bottom:10px; }
.rail-feed { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.rail-feed li { padding:10px 0; border-bottom:1px solid var(--border); line-height:1.4; }
.rail-feed li:last-child { border-bottom:0; padding-bottom:0; }
.rail-feed a { font-family:inherit; color:var(--fg); }
.rail-feed a:hover { color:var(--neon); text-decoration:none; }
.rail-feed time { display:block; color:var(--muted); font-size:.72rem; margin-top:4px; }