/* Terrahail: shared stylesheet for the text pages (thanks, privacy, 404). No build step, so no imports.
   The homepage doesn't use it: index.html is self-contained. The fonts and colour tokens below are copied
   from index.html's <style> so these pages match it; change both together. */

/* Same files and weights as the homepage (see README, Fonts). */
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap; src: url(/assets/fonts/unbounded-800.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url(/assets/fonts/space-grotesk-400.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url(/assets/fonts/space-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-mono-700.woff2) format('woff2'); }

/* Colour tokens, named as in index.html. Every text/background pair here is >= 6:1 contrast. */
:root {
  color-scheme: dark;
  --bg: #07060d;
  --tx: #f4f1ff;
  --mut: #a9a4c4;
  --c: #3ef2e0;     /* cyan: links, section headings */
  --p: #ff3ea5;     /* pink */
  --lime: #d7ff3a;  /* the sign-up button */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 1.0625rem/1.6 'Space Grotesk', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* The homepage's faint grid, fading in towards the bottom. main and the footer are position: relative to sit above it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 80%);
  mask-image: linear-gradient(to bottom, transparent 30%, #000 80%);
}
a { color: var(--c); text-underline-offset: .15em; }
:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* The homepage header without its animation: the gradient it shows when WebGL can't run, and the same
   dark glow behind the logo so the logo stands out from the colours. Shorter, since these pages are about the text. */
.site-header {
  position: relative; display: grid; place-items: center;
  height: clamp(140px, 15vw, 210px); overflow: hidden;
  background: linear-gradient(135deg, #ff2d95, #7b2ff7, #00d4c8);
  border-bottom: 2px solid var(--c); box-shadow: 0 6px 30px -6px rgba(62,242,224,.6);
}
.site-header::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(7,6,13,.55), rgba(7,6,13,0) 42%); }
.site-header a { position: relative; z-index: 1; border-radius: 50%; }
.site-header img {
  display: block; height: clamp(116px, 12.6vw, 180px); width: auto;
  filter: drop-shadow(0 0 24px rgba(255,255,255,.35)) drop-shadow(0 0 60px rgba(255,62,165,.55));
}

/* One readable column, centred. */
.prose { position: relative; max-width: 46rem; margin: 0 auto; padding: 40px 24px 48px; }
.prose h1 {
  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 52px);
  line-height: 1.04; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 22px;
}
.prose h1 em { font-style: normal; background: linear-gradient(90deg, var(--c), var(--p), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Section headings in the style of the homepage's "EARLY ACCESS" label. */
.prose h2 {
  font-family: 'Space Mono', monospace; font-weight: 400; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c); margin: 2.25rem 0 .5rem;
}
.prose code { font-family: 'Space Mono', monospace; font-size: .9em; }
.prose small { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--mut); }

/* The homepage's lime sign-up button. */
.button {
  display: inline-block; padding: 17px 28px; border-radius: 14px;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: #07060d; background: var(--lime); text-decoration: none;
  box-shadow: 0 0 28px rgba(215,255,58,.4); transition: transform .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(215,255,58,.65); }

.site-footer { position: relative; text-align: center; font-family: 'Space Mono', monospace; font-size: 12px; color: var(--mut); padding: 10px 24px 40px; }