
:root{--navy:#07151F;--navy2:#0B1E2B;--brass:#CBA94E;--champagne:#E4CE97;--bone:#F6F1E6;
--paper:#FBF9F3;--ink:#14202A;--mute:#5A6B75;--rule:#D8CDB5;--line:#1d3340;
--head:'Spectral',Georgia,serif;--body:'Inter',Arial,sans-serif;--mono:'IBM Plex Mono',monospace}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.2;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.kick,.kicker{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass)}
.mono{font-family:var(--mono)}
.classbar{background:#000;color:#33FF00;font-family:var(--mono);font-size:11px;text-align:center;padding:4px;letter-spacing:1px}
.nav{position:sticky;top:0;z-index:50;background:rgba(7,21,31,.92);backdrop-filter:blur(8px);border-bottom:.5px solid var(--line)}
.nav .bar{max-width:1180px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo .word{font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:.5px}
.logo .word b{color:var(--bone);font-weight:600}.logo .word span{color:var(--brass)}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{color:#aebcc6;font-size:14px;font-weight:500}.navlinks a:hover{color:var(--bone)}
.btn{display:inline-block;border:1px solid var(--brass);color:var(--brass);padding:9px 16px;border-radius:4px;font-size:13px;font-weight:600;background:transparent}
.btn:hover{background:var(--brass);color:var(--navy)}.btn.solid{background:var(--brass);color:var(--navy)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.navtoggle span{display:block;width:24px;height:2px;background:var(--bone);margin:5px 0}
.pagehead{background:var(--navy);color:var(--bone);padding:64px 0 52px}
.pagehead h1{font-size:42px;color:var(--bone);margin:12px 0 10px}
.pagehead .dek{color:#b9c6cf;font-size:18px;font-family:var(--head);font-style:italic;max-width:660px}
.pagehead .meta{color:#8da0ab;font-family:var(--mono);font-size:12px;margin-top:14px}
main{padding:56px 0 72px}
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.post-card{background:#fff;border:.5px solid var(--rule);border-radius:10px;padding:24px;transition:all .2s;display:block}
.post-card:hover{border-color:var(--brass);transform:translateY(-3px)}
.post-card h2{font-size:21px;margin:6px 0 8px;color:var(--ink)}
.post-card p{font-size:14px;color:var(--mute)}
.post-card .meta{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:12px}
article.post{max-width:760px;margin:0 auto}
article.post .hero{width:100%;border-radius:12px;margin:0 0 24px}
article.post p,article.post li{font-size:17px;color:#2b3a44;margin:0 0 16px}
article.post h2{font-size:27px;margin:34px 0 12px}article.post h3{font-size:21px;margin:26px 0 10px}
article.post ul,article.post ol{padding-left:22px;margin-bottom:16px}
article.post pre{background:var(--navy);color:var(--bone);border-radius:8px;padding:16px;overflow:auto;font-size:14px}
article.post code{font-family:var(--mono);font-size:.92em}
article.post blockquote{border-left:3px solid var(--brass);margin:0 0 16px;padding:6px 18px;color:var(--mute);font-style:italic}
.tags{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;border:.5px solid var(--rule);border-radius:12px;padding:2px 10px;color:var(--mute)}
.back{font-size:13px;color:var(--mute)}
footer.site{background:#040E15;color:#8a9aa5;font-size:11.5px;font-family:var(--mono)}
footer.site .bar{max-width:1180px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer.site a:hover{color:var(--bone)}
@media(max-width:760px){.post-grid{grid-template-columns:1fr}.pagehead h1{font-size:32px}
.navlinks{position:fixed;top:64px;left:0;right:0;background:var(--navy);flex-direction:column;gap:0;padding:8px 0;border-bottom:.5px solid var(--line);display:none}
.navlinks.open{display:flex}.navlinks a{padding:12px 24px}.navtoggle{display:block}}
