/* The footer, on every page: the troupe on the hairline where a page has
   one, who and where we are, the links, and the wordmark "buero" at the
   very end, as wide as the column. */
.ft { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px 24px; padding: 28px 0 0; }
.ft-id { display: flex; flex-direction: column; gap: 14px; font: 10px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ft-id p { margin: 0; }
.ft-id b { font-weight: 400; color: var(--ink); }
.ft-links { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, auto); gap: 28px 48px; }
.ft-links h2 { margin: 0 0 10px; font: 10px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ft-links a { display: block; width: fit-content; padding: 3px 0; font-size: 13px; text-decoration: none; transition: color 0.2s; }
@media (hover: hover) { .ft-links a:hover { color: var(--accent); } }
/* The language the page is in, beside the one it is not. */
.ft-links a[aria-current] { color: var(--muted); pointer-events: none; }

/* overflow: the glyphs' inline box keeps the font's full ascent and
   descent (1.3em), far taller than the line, so clip it to the column. */
.wm { container-type: inline-size; overflow: hidden; margin-top: clamp(48px, 8vw, 112px); padding: 8px 0 clamp(16px, 2.2vw, 32px); }
/* Geist 500, measured: at -0.07em the ink of "buero" runs from 0.075em to
   2.36em and the b reaches 0.71em above the baseline; the font's ascent is
   1.005em. So 100cqw / 2.285 fills the column, the margin moves the ink
   onto its left edge, and line-height 0.71 makes the box hug the ink. */
.wm p {
  margin: 0 0 0 -0.075em;
  font: 500 calc(100cqw / 2.285)/0.71 "Geist", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.07em;
  white-space: nowrap;
  color: var(--ink);
  user-select: none;
}

@media (max-width: 720px) {
  .ft { flex-direction: column; }
  .ft-links { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; width: 100%; }
}