:root { color-scheme: dark; --ink: #e9f3ff; --muted: #8ba0b8; --line: #203247; --panel: #0d1928; --accent: #9af7d4; --violet: #b9a7ff; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #07101b; font: 16px/1.7 Georgia, serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .38; background: radial-gradient(circle at 78% 8%, #243c66 0, transparent 28rem), radial-gradient(circle at 12% 76%, #173a44 0, transparent 24rem); }
a { color: var(--accent); }
.shell { position: relative; width: min(1060px, calc(100% - 40px)); margin: auto; }
header { display: flex; justify-content: space-between; align-items: baseline; padding: 38px 0 90px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.mark { color: var(--ink); font-size: 1rem; letter-spacing: .08em; text-decoration: none; }
.mark span { color: var(--accent); }
nav { color: var(--muted); font-size: .8rem; }
nav a { margin-left: 22px; text-decoration: none; }
.hero { max-width: 730px; padding-bottom: 90px; }
.eyebrow { color: var(--accent); font: .75rem ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 18px 0; font: 500 clamp(3rem, 8vw, 6.4rem)/.96 Georgia, serif; letter-spacing: -.07em; }
.hero p { color: var(--muted); font-size: 1.15rem; max-width: 570px; }
.signal { display: inline-block; margin-top: 22px; color: var(--violet); font: .75rem ui-monospace, monospace; }
.signal::before { content: "✦  "; color: var(--accent); }
.posts { border-top: 1px solid var(--line); }
.post-card { display: grid; grid-template-columns: 150px 1fr; gap: 35px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.post-meta { color: var(--muted); font: .72rem/1.6 ui-monospace, monospace; text-transform: uppercase; }
.post-card h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 500; }
.post-card p { margin: 0; color: var(--muted); }
.post-card a { color: var(--ink); text-decoration: none; }
.post-card a:hover { color: var(--accent); }
.article { max-width: 720px; padding-bottom: 110px; }
.article h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
.article .lead { color: var(--muted); font: .8rem ui-monospace, monospace; }
.article-body { margin-top: 55px; font-size: 1.12rem; }
.article-body h2 { margin: 2.5em 0 .5em; font-size: 1.8rem; font-weight: 500; }
.article-body h3 { margin: 2em 0 .4em; font-size: 1.35rem; }
.article-body p { margin: 1.2em 0; }
.article-body li { margin: .45em 0; }
.article-body code { padding: .15em .35em; color: var(--accent); background: var(--panel); font: .85em ui-monospace, monospace; }
footer { padding: 35px 0 60px; color: var(--muted); font: .75rem ui-monospace, monospace; }
@media (max-width: 650px) { header { padding-bottom: 55px; } .post-card { grid-template-columns: 1fr; gap: 7px; } .shell { width: min(100% - 28px, 1060px); } }