:root {
--bg: #0b0b0c; /* near-black */
--fg: #f5f7fa; /* soft white */
--muted: #b7c0cc;
--accent: #e11d48; /* ninja red */
--card: #121316; /* dark panel */
--ring: #202127; /* subtle outline */
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: radial-gradient(1200px 600px at 20% -10%, rgba(225,29,72,0.08), transparent),
radial-gradient(1000px 500px at 110% 10%, rgba(225,29,72,0.06), transparent),
var(--bg);
color: var(--fg);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.container { max-width: 880px; margin: 0 auto; padding: 2rem 1.2rem 4rem; }


/* Header */
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--ring); background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--fg); font-weight: 800; letter-spacing: 0.2px; }
.wordmark { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1.1rem; }


.site-nav a { color: var(--muted); text-decoration: none; margin-left: 1rem; font-weight: 600; }
.site-nav a:hover { color: var(--fg); }


/* Logo SVG styling */
.logo svg { width: 36px; height: 36px; display: block; }
.logo-ring { fill: none; stroke: var(--ring); stroke-width: 2; }
.logo-band { fill: var(--accent); }
.logo-eye { fill: var(--bg); stroke: var(--fg); stroke-width: 2; }
.logo-katana { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; opacity: 0.9; }


/* Cards & posts */
.post-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0)); border: 1px solid var(--ring); border-radius: 16px; padding: 1.25rem; margin: 1rem 0; transition: transform 120ms ease, border-color 120ms ease; }
.post-card:hover { transform: translateY(-2px); border-color: rgba(225,29,72,0.5); }
.post-card h2 { margin: 0 0 0.25rem; font-size: 1.4rem; }
.post-card h2 a { color: var(--fg); text-decoration: none; border-bottom: 2px solid transparent; }
.post-card h2 a:hover { border-bottom-color: var(--accent); }
.post-card .meta { color: var(--muted); margin: 0.25rem 0 0.5rem; font-size: 0.95rem; }
.post-card .tags { color: var(--accent); font-weight: 700; }


.post h1 { font-size: 2.1rem; margin-bottom: 0.25rem; }
.post .meta { color: var(--muted); margin-top: 0; }
.post .content { margin-top: 1rem; }
.post .content h2, .post .content h3 { margin-top: 1.4rem; }
.post .content a { color: var(--fg); border-bottom: 2px solid var(--accent); text-decoration: none; }
.post .content a:hover { color: var(--accent); }
.post .content code, pre { background: #0f1115; color: #f1f1f1; border: 1px solid var(--ring); border-radius: 10px; }
.post .content code { padding: 0.15rem 0.35rem; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.95rem; }
.post .content pre { padding: 1rem; overflow: auto; }


.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--fg); border-bottom: 1px dashed var(--accent); }


/* Footer */
.site-footer { border-top: 1px solid var(--ring); color: var(--muted); font-size: 0.95rem; padding: 2rem 1.2rem; text-align: center; }


/* Accessibility & motion */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }