@font-face { font-family: 'm5x7'; src: url('../assets/fonts/m5x7.ttf') format('truetype'); font-display: swap; }
:root { --void:#0a0f0a; --night:#111a12; --panel:#16211a; --ink:#ece4d2; --ink-soft:#a3a08c; --gold:#e9c452; --ember:#d4763b; --leaf:#7dc47a; --line:#2f3d32; --paper:#f0e3bc; --moss:#2e5c33; }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ACCESSIBILITY (WCAG 2.1 AA, audited 2026-10-06) - keep these when editing: font sizes are
   rem; the header and side menu only stick on wide, tall screens; tables sit in .tw scroll
   boxes; the current page is aria-current; every page starts with a skip link. */
html { scroll-padding-top: 5.5rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
main:focus { outline: none; }
.skip { position: absolute; left: 10px; top: -80px; z-index: 10; background: var(--gold); color: #111a12; font-weight: bold; padding: 8px 14px; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 10px; }
body { background: var(--void); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; }
a { color: var(--ember); } a:hover { color: var(--gold); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding: 10px 26px; border-bottom: 2px solid var(--line); background: var(--night); position: sticky; top: 0; z-index: 5; }
header .home { font-size: .875rem; color: var(--ink-soft); text-decoration: none; display: inline-block; padding: 8px 0; }
header .brand { font-family: 'm5x7', monospace; font-size: 1.875rem; letter-spacing: 2px; color: var(--paper); }
header .brand span { color: var(--leaf); }
header .ver { margin-left: auto; font-size: .8125rem; color: var(--ink-soft); }
.wrap { display: grid; grid-template-columns: 230px 1fr; gap: 34px; max-width: 1240px; margin: 0 auto; padding: 28px 22px 60px; }
nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 76px; align-self: start; }
nav a { padding: 8px 12px; border: 2px solid transparent; border-radius: 5px; color: var(--ink); text-decoration: none; font-size: 1rem; }
nav a:hover { border-color: var(--line); background: var(--panel); }
nav a.on { border-color: var(--moss); background: var(--panel); color: var(--gold); }
main { min-width: 0; }
.kicker { font-family: 'm5x7', monospace; letter-spacing: 3px; color: var(--leaf); font-size: 1.125rem; }
h1 { font-family: 'm5x7', monospace; font-weight: normal; font-size: 3.375rem; line-height: 1; color: var(--paper); margin: 4px 0 8px; }
h2 { font-family: 'm5x7', monospace; font-weight: normal; font-size: 2.25rem; color: var(--gold); margin: 34px 0 10px; border-bottom: 2px solid var(--line); padding-bottom: 4px; }
h3 { font-family: 'm5x7', monospace; font-weight: normal; font-size: 1.875rem; color: var(--paper); margin: 28px 0 4px; }
h4 { font-family: 'm5x7', monospace; font-weight: normal; font-size: 1.5rem; color: var(--leaf); margin: 14px 0 4px; letter-spacing: 1px; }
p { margin: 0 0 12px; } ul { margin: 0 0 12px 22px; } li { margin-bottom: 4px; }
.intro { color: var(--ink-soft); font-size: 1.125rem; }
.blurb { color: var(--ink-soft); font-style: italic; }
.meta { color: var(--ink-soft); font-size: .9375rem; margin-top: -2px; }
.say { color: var(--paper); font-style: italic; }
.tw { overflow-x: auto; margin: 8px 0 14px; }
table { border-collapse: collapse; width: 100%; font-size: .96875rem; background: var(--panel); border: 2px solid var(--line); }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: 'm5x7', monospace; font-weight: normal; font-size: 1.25rem; letter-spacing: 1px; color: var(--leaf); background: var(--night); }
tr:last-child td { border-bottom: 0; }
table.facts th { display: none; } table.facts td:first-child { width: 130px; color: var(--ink-soft); }
.ic { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: -6px; margin-right: 4px; }
.tag { font-family: 'm5x7', monospace; font-size: 1rem; letter-spacing: 1px; padding: 1px 8px; border-radius: 4px; vertical-align: middle; }
.tag.in { background: var(--moss); color: var(--paper); } .tag.plan { background: #3b2a12; color: var(--gold); }
.toc { font-size: .9375rem; color: var(--ink-soft); margin: 8px 0 16px; line-height: 1.9; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.card { display: block; padding: 14px 16px; border: 2px solid var(--line); border-radius: 6px; background: var(--panel); text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--moss); } .card b { font-family: 'm5x7', monospace; font-weight: normal; font-size: 1.625rem; color: var(--gold); display: block; }
.card span { color: var(--ink-soft); font-size: .9375rem; }
.plan-note { border-left: 4px solid var(--gold); background: var(--panel); padding: 8px 14px; margin: 0 0 16px; color: var(--ink-soft); }
blockquote { border-left: 4px solid var(--moss); background: var(--panel); padding: 8px 14px; margin: 0 0 12px; color: var(--ink-soft); }
code { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace; font-size: .875rem; background: var(--night); padding: 1px 5px; border-radius: 3px; }
hr { border: 0; border-top: 2px solid var(--line); margin: 22px 0; }
.doclist { columns: 2; }
footer { margin-top: 40px; padding-top: 14px; border-top: 2px solid var(--line); color: var(--ink-soft); font-size: .875rem; }
@media (max-width: 820px) { .wrap { grid-template-columns: 1fr; } nav { position: static; flex-direction: row; flex-wrap: wrap; } .doclist { columns: 1; } h1 { font-size: 2.625rem; } }
/* a phone, a phone on its side, a laptop zoomed to 400%: nothing sticks, or the bars cover the page */
@media (max-width: 820px), (max-height: 500px) { header, nav { position: static; } html { scroll-padding-top: 1rem; } header .brand { font-size: 1.5rem; } header .ver { margin-left: 0; } }