/* LSJC on screen — the base every page under public/ links first: the
   self-hosted faces, the screen palette (tokens.css) and the ambient grid.
   This file is the source of truth for the fonts; the pages add only their
   own layout. */
@import url(/css/tokens.css);

/* --- Type system (three families, echoing the card) -----------------------
   Elms Sans      → the name (front hero on the card)
   Space Grotesk  → contact lines / buttons (variable file, covers 400–500)
   Hanken Grotesk → the LSJC wordmark (back of the card; variable file) */
@font-face {
  font-family: 'Elms Sans';
  font-style: normal;
  font-weight: 400 700; /* variable file */
  font-display: swap;
  src: url(/fonts/elms-sans-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin.woff2) format('woff2');
}
/* Leckerli One → the single glyph the Reductable mark is built from (an R in this
   face, counter closed in the app icon). Used only for the "R" of the Reductable
   product link, so a scan of the card ties straight back to the app's logo. */
@font-face {
  font-family: 'Leckerli One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/leckerli-one-latin.woff2) format('woff2');
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Ambient texture, ported from reductable-www (global.css) --------------
   A faint 48px neon grid, radially masked so it's strongest up top and fades
   toward the edges. Fixed + behind content (z-index:-1), pointer-events:none.
   Pure CSS, no motion. Grid line = 204 255 0 (the neon accent #ccff00). */
body::before { /* ambient grid */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgb(204 255 0 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(204 255 0 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 95% 55% at 50% 0%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 95% 55% at 50% 0%, #000 25%, transparent 75%);
}