@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --surface: #0c0b09;
  --text: #e9e2d3;
  --text-2: #a39a88;
  /* drv0.js sets these from the pixel grid, so the text lines up with the wordmark's cells.
     The values here are the layout before the script runs, or if it never does. */
  --p: 15px;
  --left: max(16px, calc(100vw / 12));
  --tag-top: 52vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--surface);
  color: var(--text);
  font-family: "Departure Mono", ui-monospace, monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow: hidden;
}

#disk {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
}

main, footer { position: fixed; left: var(--left); right: 16px; }

/* The wordmark is drawn on the canvas. The heading stays in the document for screen readers and search. */
.mark-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main { top: var(--tag-top); }

.tagline {
  font-size: 22px;
  line-height: 33px;
  text-wrap: balance;
}

footer { bottom: calc(var(--p) * 2); }

.copyright {
  font-size: 22px;
  line-height: 22px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 0.35em;
}

/* Departure Mono's own copyright sign breaks up at this size, so the page draws one on a 9 by 9 grid. */
.c-mark { width: 18px; height: 18px; flex: none; }

@media (min-width: 900px) {
  .tagline { font-size: 33px; line-height: 44px; }
}