@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&family=Chakra+Petch:wght@400;600;700;800&display=swap');
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:#fff; color:#000; font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; font-size:13px; line-height:18px; }
a { color:#000; text-decoration: underline; text-underline-offset:2px; }
a:hover { background:#000; color:#fff; }
h1,h2,h3,h4 { font-family:"Chakra Petch", sans-serif; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; color:#000; margin:0 0 8px 0; }
h1 { font-size:22px; line-height:24px; border-bottom:3px solid #000; padding-bottom:6px; margin-top:18px; }
h2 { font-size:16px; line-height:18px; margin-top:28px; border-bottom:1.5px solid #000; padding-bottom:4px; }
h3 { font-size:13px; margin-top:18px; }
p { margin:8px 0; }
table { width:100%; border-collapse:collapse; margin:12px 0; border:1.5px solid #000; }
th,td { border:1px solid #000; padding:5px 6px; text-align:left; font-size:12px; line-height:14px; }
th { background:#000; color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; font-size:11px; }
tr:nth-child(even) td { background:#fff; }
blockquote { border-left:3px solid #000; margin:10px 0; padding:6px 10px; background:#fff; color:#000; }
code, pre { font-family:"JetBrains Mono", monospace; font-size:11px; background:#fff; color:#000; }
pre { border:1.5px solid #000; padding:10px; overflow:auto; }
hr { border:none; border-top:1.5px solid #000; margin:18px 0; }
ul,ol { margin:6px 0 6px 20px; }
li { margin:2px 0; }

/* Top bar - black, always */
.topbar { position:sticky; top:0; z-index:50; background:#000; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:6px 12px; font-family:"Chakra Petch", sans-serif; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; font-size:11px; }
.topbar a { color:#fff; text-decoration:none; }
.topbar a:hover { background:#fff; color:#000; }

.hdr{background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.78)), url('/assets/space-header.webp') center/cover no-repeat, #000;color:#fff;padding:24px 20px;font-family:'Chakra Petch',sans-serif;position:relative}
.hdr h1{font-size:28px;letter-spacing:.08em;margin:0;color:#fff;border:none;padding:0}
.hdr p{opacity:.85;font-size:13px;margin-top:6px;font-family:'JetBrains Mono',monospace;color:#fff}
.hdr a{color:#fff;border:none;text-decoration:none}
.hdr a:hover{background:transparent;color:#fff}

/* Horizontal

/* Horizontal nav - used on hub and story top */
.nav{display:flex;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:2px solid #000;background:#fff;position:sticky;top:0;z-index:10;align-items:center}
.nav a{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;padding:6px 10px;border:1.5px solid #000;text-decoration:none;color:#000}
.nav a:hover{background:#000;color:#fff}

/* Shell layout - sidebar + main (used by rules and story) */
.shell { display:flex; max-width:1200px; margin:0 auto; min-height:100vh; }
.shell .nav { width:260px; flex-shrink:0; border-right:1.5px solid #000; border-bottom:none; padding:10px 10px 40px 10px; background:#fff; position:sticky; top:28px; height:calc(100vh - 28px); overflow:auto; display:block; }
.shell .nav h3 { font-size:11px; margin:16px 0 6px 0; letter-spacing:0.12em; }
.shell .nav a { display:block; padding:3px 6px; font-size:11px; line-height:14px; border-left:2px solid transparent; border-top:none; border-right:none; border-bottom:none; text-decoration:none; }
.shell .nav a:hover { border-left-color:#000; background:#fff; color:#000; }
.shell .nav a.active { background:#000; color:#fff; border-left-color:#000; }
.main { flex:1; padding:18px 22px 40px 22px; max-width:880px; }
.container{max-width:980px;margin:0 auto;padding:22px 20px 60px}
.wrap{max-width:1100px;margin:0 auto;padding:24px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.card{border:2px solid #000;padding:18px;background:#fff}
.card h2{font-family:'Chakra Petch',sans-serif;font-size:18px;margin-bottom:6px;border:none}
.card p{font-size:12.5px;line-height:1.6}
.cardlink{border:1.5px solid #000;padding:14px;display:block;color:#000;text-decoration:none;background:#fff}
.cardlink:hover{background:#000;color:#fff}
.cardlink:hover *{color:#fff !important;border-color:#fff !important}
.meta{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;border:1px solid #000;display:inline-block;padding:2px 6px;margin:6px 0}
.kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.hero{border:3px solid #000;padding:18px 18px;background:#fff;margin:16px 0}
.hero h1{margin:0;border:none;padding:0;font-size:34px;line-height:.95;letter-spacing:-.02em}
.stamp{background:#000;color:#fff;padding:2px 8px;font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;display:inline-block}
.stamp-header { background:#000; color:#fdfbf7; font-family:"Chakra Petch", sans-serif; font-weight:800; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:5px 8px; display:flex; justify-content:space-between; align-items:center; border:1.5px solid #000; }
.stamp-header span:last-child { font-family:"JetBrains Mono", monospace; font-weight:400; font-size:9px; opacity:1; }
.toc { border:1.5px solid #000; padding:10px 12px; margin:12px 0 18px 0; background:#fff; }
.toc ul { margin:4px 0 0 16px; }
.small-label { font-size:8px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#000; }
.small{font-size:11px;opacity:.7;margin-top:24px;line-height:1.6}
.btn{display:inline-block;margin-top:10px;padding:6px 10px;border:1.5px solid #000;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;text-decoration:none;color:#000;background:#fff}
.btn:hover{background:#000;color:#fff}
::placeholder { color:#000 !important; opacity:1 !important; }
/* WCAG AA - no grey on white, pure black text */
body, div, span, p, li, td, th, a, h1,h2,h3,h4, .kicker, .meta, .small, .small-label { color:#000; }
.topbar, .topbar *, .stamp-header, .stamp-header *, th, th *, .hdr, .hdr * { color:#fff !important; }
a:hover, .shell .nav a.active, .cardlink:hover, .btn:hover { color:#fff !important; }
@media (max-width:800px){ .shell{flex-direction:column;} .shell .nav{width:auto; position:static; height:auto; border-right:none; border-bottom:1.5px solid #000;} }