:root {
  --page-bg: #030e18;
  --header-bg: #041727;
  --page-fg: #d2e6f8;
  --page-cream: #e3f7f0;
  --page-muted: #7a9bb8;
  --page-accent: #00c0ff;
  --page-cyan: #7ff0f0;
  --page-pink: #ffc0d1;
  --max-width: 80ch;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
          "Fira Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--page-accent); text-decoration: none; }

.site-header {
  padding: 1rem 0;
  background: var(--header-bg);
}
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--page-muted);
  font-weight: 600;
}
.site-banner-wrap { display: inline-flex; }
.site-banner {
  /* Classic 88x31 web-button banner; rendered at native size with no
     smoothing so small bitmap-style art stays crisp. */
  width: 88px;
  height: 31px;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.site-name {
  font-family: var(--sans);
  font-size: 1.52em;
  font-weight: 300;
  color: var(--page-muted);
}

.site-main {
  max-width: var(--max-width);
  margin: 2.5rem auto 5rem;
  padding: 0 2rem;
}