/* StrictTools — fonts and base element styles. The sharp-corner reset, the
   vendored three-font system, native-control elimination, focus rings and the
   page-level layers (dot grid background, CRT overlay). Requires tokens.css.
   Adapted from tinymoon's base.css for a scrolling landing page: the body
   scrolls and text is selectable. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Plex";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
}

/* ---------- reset ---------- */

* { box-sizing: border-box; border-radius: 0 !important; }
button, input, textarea, select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  font-family: inherit;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--input-bg) inset;
  -webkit-text-fill-color: var(--text);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-weight: var(--weight-normal);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
  letter-spacing: -0.01em;
}
h5, h6 {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
p { margin: 0 0 var(--space-12); }
/* A link answers the pointer with a rule under it, never with a change of
   colour: contrast is the same before and after the pointer arrives. */
a { color: var(--accent-hi); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
}
code {
  font-size: 0.92em;
  background: var(--surface-2);
  border: var(--line-w) solid var(--border);
  padding: var(--space-1) var(--space-4);
  color: var(--text);
}
pre {
  margin: 0;
  padding: var(--space-14);
  background: var(--surface);
  border: var(--line-w) solid var(--border-2);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text);
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }

hr { border: none; border-top: var(--line-w) solid var(--border-2); margin: var(--space-24) 0; }

/* ---------- focus ---------- */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ---------- accessibility helpers ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.st-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: var(--space-8) var(--space-14);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  transform: translateY(-120%);
}
.st-skip:focus { transform: none; }

/* ---------- page layers ---------- */

/* The dot grid: a fixed layer behind everything. parallax.js moves its
   background-position by --dot-parallax x scrollY on capable devices; on
   every device it is a static grid. */
.st-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent calc(var(--dot-size) + 0.5px));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0;
}
.st-bg-layer {
  position: absolute;
  inset: -20% 0;
  pointer-events: none;
  will-change: transform;
}

/* CRT scanlines: a fixed overlay above everything. Lines only, so text keeps
   its contrast; the vignette darkens the corners. Both are token-driven. */
.st-crt {
  position: fixed;
  inset: 0;
  z-index: var(--z-crt);
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, var(--crt-opacity)) 0 1px, transparent 1px var(--crt-line));
}
.st-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, var(--crt-vignette)) 100%);
}

/* Heavy layers exist only on capable devices; the markup is always present so
   a page never depends on script to look finished. */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .st-crt { display: none; }
}
/* The review override (?motion=force): on a pointing device the overlay comes
   back, so the page under review is the page a reader with motion allowed
   sees. */
@media (pointer: fine) {
  .st-motion-force .st-crt { display: block; }
}