@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  --bg: #F3F1EA;
  --ink: #15171A;
  --muted: #6E6F6B;
  --accent: #FF4F00;
  --sheet: #F3F1EA;
  --rule: #15171A;
  --rule-soft: #D9D6CC;
  --zebra: transparent;
  --chip: transparent;
  --chip-ink: #15171A;
  --chip-on: #15171A;
  --chip-on-ink: #F3F1EA;
  --code-bg: #ECE9E0;
  --byte-a: #D3CFC3;
  --byte-b: #A9A497;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --display-weight: 600;
  --brand-size: 22px;
  --brand-track: 0.5px;
}
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(21, 23, 26, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 26, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(21, 23, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 26, 0.025) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.brand, h1, h2 { font-stretch: 75%; text-transform: uppercase; }
h1 { font-size: 30px; letter-spacing: 0.5px; }
h2 { font-size: 17px; letter-spacing: 1px; }
h2::before { content: attr(data-n); color: var(--accent); margin-right: 10px; font-family: var(--mono); font-size: 12px; font-weight: 400; }
.sheet { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; }
.nav a { font-family: var(--display); font-stretch: 75%; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; border: 1px solid var(--ink); }
.nav a .i { color: var(--accent); margin-right: 5px; font-family: var(--mono); font-size: 10px; }
table.kv td, table.kv th { border-color: var(--rule-soft); }
table.kv thead th { border-bottom: 1px solid var(--ink); text-transform: uppercase; font-family: var(--display); font-stretch: 75%; letter-spacing: 1px; }
.hatch { fill: url(#hatch); }