/* NETZ — one page. Wordmark centered on Court-Schwarz with the green net grid. */

@import url("assets/fonts/instrument-serif.css");
@import url("brand/tokens.css");

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  /* Court net: a rotated square lattice, drawn crisp in CSS (vector, no raster).
     Two perpendicular gradient families (11deg + 101deg) -> tilted grid. */
  --grid-cell: clamp(120px, 15vw, 220px);
  --grid-w: 1.5px;
  --grid-line: rgba(49, 209, 92, 0.22);
  background-color: var(--black);
  background-image:
    repeating-linear-gradient(101deg, transparent 0 var(--grid-cell),
      var(--grid-line) var(--grid-cell) calc(var(--grid-cell) + var(--grid-w))),
    repeating-linear-gradient(11deg, transparent 0 var(--grid-cell),
      var(--grid-line) var(--grid-cell) calc(var(--grid-cell) + var(--grid-w)));
}

main {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dtext);
  font-size: clamp(96px, 26vw, 320px);
}

.wordmark .dot { color: var(--green); }