/* Integer Labs, on every page: Buero's drafting language turned to the
   night side. Black, hairlines, small type; the machine's cursor is orange,
   and what it measures is drawn on the app's own ramp. */
:root {
  --bg: #070707;
  --ink: #ededed;
  --muted: #8a8a8a;        /* 6:1 on the background */
  --hair: rgb(255 255 255 / 0.18);
  --accent: #f54e00;
  --col: min(976px, calc(100% - 32px));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.45 "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: 0; }

/* The header, as on www.buer0.com, on the night side: pure type, the name
   left and the links right, on the content column. As the page moves,
   assets/nav.js sets --p from 0 to 1 over the first 160px, and the bar steps
   down a size and takes on a dark veil. Scrolling back undoes it. The one
   underlined link is the way to Buero. */
.nav {
  --p: 0;
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(32px - 4px * var(--p));
  height: calc(80px - 20px * var(--p));
  padding-inline: calc((100% - var(--col)) / 2);
  font-size: calc(15px - 2px * var(--p));
  background: rgb(7 7 7 / calc(0.6 * var(--p)));
  -webkit-backdrop-filter: blur(calc(20px * var(--p)));
  backdrop-filter: blur(calc(20px * var(--p)));
}
.nav a { display: flex; align-items: baseline; flex: none; white-space: nowrap; text-decoration: none; }
.nav .home { align-items: center; align-self: center; gap: 0.42em; margin-right: auto; font-size: calc(19px - 3px * var(--p)); line-height: 1; font-weight: 500; letter-spacing: -0.045em; }
.nav .home svg { display: block; width: 0.8em; height: 0.8em; }
.nav .link { gap: 5px; }
.nav .link small { font: 0.7em/1 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.04em; color: var(--muted); transition: color 0.2s; }
@media (hover: hover) { .nav .link:hover small { color: var(--ink); } }
.nav .link[aria-current="page"] small { color: var(--accent); }
.nav .wait { align-items: center; gap: 5px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--accent); transition: box-shadow 0.2s; }
@media (hover: hover) { .nav .wait:hover { box-shadow: inset 0 -2px 0 var(--accent); } }
/* Buero is named by its wordmark (assets/buero-wordmark-white.svg, from
   buer0.com's brand files), never typed, wherever it is the link there. */
.bw { display: block; width: auto; height: 14px; }
@media (max-width: 480px) {
  .nav { gap: 18px; height: calc(64px - 8px * var(--p)); font-size: 14px; }
  .nav .home { font-size: 17px; }
  .nav .link small { display: none; }
}

/* A section boundary: a hairline, nothing on it. */
.rule { border-top: 0.5px solid var(--hair); }
.wrap { width: var(--col); margin-inline: auto; }
section[id] { scroll-margin-top: 80px; }

.intro { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 80px; }
h1, h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: 0; }
h1 .k, h2 .k { display: block; color: var(--muted); }
.intro p { margin: 0; max-width: 320px; color: var(--muted); text-wrap: pretty; }
.label { margin: 0 0 14px; font: 10px/1.6 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* A button: a hairline box that turns to ink under the pointer. */
.go { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; height: 40px; padding: 0 14px; border: 0.5px solid var(--hair); font-size: 12px; text-decoration: none; transition: background 0.2s, color 0.2s; }
@media (hover: hover) { a.go:hover { background: var(--ink); color: var(--bg); } }

/* ── Footer: the mark in CAD, grips on every vertex; who and where we
   are, and the links. ─────────────────────────────────────────────────── */
.art { display: block; width: 100%; height: 400px; }
.art .c { stroke: #1c1c1c; stroke-width: 0.75; }
.art .m { fill: #0e0e0e; stroke: #4a4a4a; stroke-width: 0.75; }
.art .g { fill: var(--bg); stroke: #6a6a6a; stroke-width: 0.75; }
.ft { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px 24px; padding: 24px 0 48px; }
.ft-id { display: flex; flex-direction: column; gap: 14px; font: 10px/1.6 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ft-id p { margin: 0; }
.ft-id .brand { display: flex; align-items: center; gap: 8px; font: 13px/1 "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.01em; text-transform: none; color: var(--ink); }
.ft-id .brand svg { width: 14px; height: 14px; }
.ft-links { display: grid; grid-template-columns: repeat(2, minmax(112px, auto)); gap: 28px 48px; }
.ft-links h2 { margin: 0 0 10px; font: 10px/1.6 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ft-links a { display: block; width: fit-content; padding: 3px 0; text-decoration: none; transition: color 0.2s; }
.ft-links .to-buero { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
@media (hover: hover) { .ft-links a:hover { color: var(--accent); } }

@media (max-width: 720px) {
  .intro { flex-direction: column; gap: 16px; margin-bottom: 48px; }
  .art { height: 300px; }
  .ft { flex-direction: column; }
  .ft-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; width: 100%; }
}