/* bitwerk news – the field manual look (bitwerk docs/brand.md): a black field, white type, 1 px hairlines,
   lower-case mono labels. Colours are the bitwerk tokens (brand/tokens.css in the bitwerk repo); keep the
   values in sync with it. Black and white only; red only for errors. */

@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  --bw-bg: #0c0e11;            /* graphite 950 */
  --bw-surface: #121418;       /* graphite 900 */
  --bw-border: #262a31;        /* graphite 700, hairlines */
  --bw-border-control: #8a919e;/* graphite 400, outlines of controls */
  --bw-text: #f4f5f7;          /* graphite 50 */
  --bw-text-secondary: #b4bac4;/* graphite 300 */
  --bw-text-muted: #8a919e;    /* graphite 400 */
  --bw-danger: #f2545b;        /* red 400 */
  --bw-font-display: "Space Grotesk", system-ui, sans-serif;
  --bw-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bw-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bw-text-xs: 0.75rem;
  --bw-text-sm: 0.8125rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bw-bg); }
body {
  margin: 0 auto;
  max-width: 52rem;
  padding: 0 1rem 3rem;
  background: var(--bw-bg);
  color: var(--bw-text-secondary);
  font: 1rem/1.65 var(--bw-font-body);
}
a { color: var(--bw-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--bw-text); outline-offset: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bw-text); color: var(--bw-bg); padding: 0.25rem 0.5rem; }

/* header and footer: mono, lower case, hairlines */
.top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--bw-border); }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { display: block; height: 28px; width: auto; }
.brand-sub { font: 500 var(--bw-text-sm) var(--bw-font-mono); color: var(--bw-text-muted); }
.top ul, .bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.top a, .bottom a { font: var(--bw-text-sm) var(--bw-font-mono); color: var(--bw-text-secondary); text-decoration: none; }
.top a:hover, .bottom a:hover, .top a[aria-current="page"] { color: var(--bw-text); text-decoration: underline; }
.bottom { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--bw-border); }
.imprint { margin: 0.75rem 0 0; font: var(--bw-text-xs) var(--bw-font-mono); color: var(--bw-text-muted); }

/* type */
.label { margin: 2.5rem 0 0.5rem; font: 500 var(--bw-text-sm) var(--bw-font-mono); color: var(--bw-text-muted);
  text-transform: lowercase; }
.label a, a.label { color: inherit; text-decoration: none; }
.label a:hover { color: var(--bw-text); }
.page-title { margin: 0.5rem 0 0.5rem; font: 700 clamp(2rem, 6vw, 3rem)/1.05 var(--bw-font-display);
  letter-spacing: -0.03em; color: var(--bw-text); }
main > .page-title:first-child { margin-top: 2.5rem; }
.page-lead { margin: 0 0 1.5rem; max-width: 40rem; font-size: 1.125rem; color: var(--bw-text-secondary); }
.actions { font: var(--bw-text-sm) var(--bw-font-mono); }
.empty { color: var(--bw-text-muted); font: var(--bw-text-sm) var(--bw-font-mono); }

/* the section index: numbered rows */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bw-border); }
.index li { display: grid; grid-template-columns: 2.5rem 11rem 1fr; gap: 0.25rem 1rem; padding: 0.75rem 0;
  border-bottom: 1px solid var(--bw-border); align-items: baseline; }
.index .num { font: var(--bw-text-xs) var(--bw-font-mono); color: var(--bw-text-muted); }
.index a { font: 500 1rem var(--bw-font-mono); }
.index .desc { color: var(--bw-text-muted); font-size: 0.9375rem; }

/* post lists */
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bw-border); }
.posts li { display: grid; grid-template-columns: 7rem 1fr; gap: 0.25rem 1rem; padding: 1rem 0;
  border-bottom: 1px solid var(--bw-border); }
.posts time { font: var(--bw-text-sm)/1.9 var(--bw-font-mono); color: var(--bw-text-muted); }
.posts .label { display: block; margin: 0; }
.posts h3 { margin: 0; font: 500 1.25rem/1.3 var(--bw-font-display); letter-spacing: -0.01em; }
.posts h3 a { text-decoration: none; }
.posts h3 a:hover { text-decoration: underline; }
.posts .lead { margin: 0.25rem 0 0; color: var(--bw-text-muted); }

@media (max-width: 40rem) {
  .index li { grid-template-columns: 2rem 1fr; }
  .index .desc { grid-column: 2; }
  .posts li { grid-template-columns: 1fr; }
}

/* post bodies */
.prose { max-width: 40rem; color: var(--bw-text-secondary); }
.prose h2 { margin: 2.5rem 0 0.75rem; font: 500 1.375rem/1.3 var(--bw-font-display); color: var(--bw-text);
  letter-spacing: -0.01em; }
.prose h3 { margin: 2rem 0 0.5rem; font: 500 var(--bw-text-sm) var(--bw-font-mono); color: var(--bw-text);
  text-transform: lowercase; }
.prose strong { color: var(--bw-text); }
.prose li { margin: 0.25rem 0; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--bw-border); }
.prose code { font: 0.875em var(--bw-font-mono); color: var(--bw-text); }
.prose pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--bw-border); background: var(--bw-surface); }
.prose blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 1px solid var(--bw-border-control); }
.prose table { border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 0.375rem 0.75rem 0.375rem 0; border-bottom: 1px solid var(--bw-border); text-align: left; }
.prose th { font: 500 var(--bw-text-xs) var(--bw-font-mono); color: var(--bw-text-muted); text-transform: lowercase; }
.prose hr { border: 0; border-top: 1px solid var(--bw-border); margin: 2rem 0; }

/* forms: outlined controls, one inverted main button per view */
.form { max-width: 36rem; margin: 1rem 0 2rem; }
.form fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.form legend { margin: 0 0 0.5rem; padding: 0; }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bw-border); }
.checks li { border-bottom: 1px solid var(--bw-border); }
.checks label { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.75rem 0; cursor: pointer; }
.checks input { margin: 0.3rem 0 0; width: 1.125rem; height: 1.125rem; accent-color: var(--bw-text); flex: none; }
.checks strong { display: block; font: 500 1rem var(--bw-font-mono); color: var(--bw-text); }
.checks .desc { display: block; color: var(--bw-text-muted); font-size: 0.9375rem; }
.field { display: block; margin: 0 0 1rem; }
.field .label { display: block; margin: 0 0 0.375rem; }
.field input { width: 100%; padding: 0.625rem 0.75rem; font: 1rem var(--bw-font-mono); color: var(--bw-text);
  background: var(--bw-bg); border: 1px solid var(--bw-border-control); border-radius: 0; }
.consent { font-size: 0.875rem; color: var(--bw-text-muted); }
.button { display: inline-block; padding: 0.625rem 1.25rem; font: 500 var(--bw-text-sm) var(--bw-font-mono);
  color: var(--bw-bg); background: var(--bw-text); border: 1px solid var(--bw-text); border-radius: 0; cursor: pointer; }
.button:hover { background: var(--bw-text-secondary); }
a.button { text-decoration: none; }
.button-secondary { color: var(--bw-text); background: transparent; border-color: var(--bw-border-control); }
.button-secondary:hover { background: var(--bw-surface); }
.error { color: var(--bw-danger); font: var(--bw-text-sm) var(--bw-font-mono); }
.danger-zone { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--bw-border); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.topics { margin: 0; padding: 0; list-style: none; }
.topics li { padding: 0.35rem 0; border-top: 1px solid var(--bw-border); }