/* thelibrary.dev — dark-only, tokens borrowed from apps/web tokens.css */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-vf.woff2") format("woff2-variations");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* kept in step with apps/web/src/styles/tokens.css §2 by hand — this page
     duplicates the tokens rather than importing them. hero.js carries the
     same values again, as GLSL constants for the brass ramp. */
  /* the hero's ground: the app's --bg (#110e0a) taken down and warmed to sit
     under the lamplight tint. This page has no surface that is not the hero,
     so it is the only ground there is. hero.js carries the same value as its
     GLSL BG constant and the two must agree — the canvas is sized from the
     character grid and can fall a few pixels short of the viewport, and that
     sliver would band against the scene if it were a different colour. */
  --ground: #0f0b07;
  --surface: #191613;
  --line: #2a2521;
  --ink: #e7e2de;
  --ink-dim: #8d8a87;
  --hl: #daaf6b;
  --font-ui: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Bayer 50% threshold, black on transparent — the app's one texture
     primitive, used here to hold the hero back behind the masthead. No blur
     anywhere in the stacks. */
  --dither-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/svg%3E");
}

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

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  /* svh, not vh: on mobile vh is the tallest the viewport ever gets, so the
     page would run past the hero and show a band of ground under it */
  min-height: 100svh;
  overflow-x: hidden;
}

/* --- the hero -------------------------------------------------------------
   The canvas is sized from the character grid by hero.js, so it can fall a
   few pixels short of the viewport. It is centred and the shortfall shows
   --bg, which is the colour the scene fades to anyway. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px;
  overflow: hidden;
}

#hero {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  opacity: 0;
  transition: opacity 0.6s linear;
}

#hero.ready { opacity: 1; }

/* the scrim: dither, not a gradient. Sits over the scene and under the type */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dither-50);
  background-size: 2px 2px;
  image-rendering: pixelated;
  opacity: 0.5;
  pointer-events: none;
}

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stage > * { flex: 0 0 auto; }

h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tagline {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--ink);
}

.download {
  margin-top: 40px;
  display: inline-block;
  background: var(--hl);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 0;
}

.download:hover { filter: brightness(1.08); }

.meta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}

@media (max-width: 600px) {
  h1 { font-size: 27px; }
  .hero { padding: 72px 20px; }
}