:root {
  --bg: #121315;
  --stroke: #202123;
  --text: #F2F3F5;
  --text-2: #A1A2A4;
  --surface: #F7F8FA;
  --ghost: #1B1C1F;
  --accent: linear-gradient(180deg, #6BABFF 0%, #0051FF 100%); /* light at the top, deep at the bottom */
  --accent-solid: #367FFF; /* the gradient's midpoint, for small solid marks (squares, dashes) */
  --accent-deep: #0051FF;  /* the gradient's deep end, for hover fills */

  --columns: 4;
  --gutter: 2.75vw;
  --col: calc((100vw - 2 * var(--gutter)) / 4);
  --pad: clamp(20px, 2vw, 32px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Fixed background of evenly spaced vertical strokes */
.grid-lines {
  position: fixed;
  inset: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  border-right: 1px solid var(--stroke);
  pointer-events: none;
  z-index: 0;
}

.grid-lines span {
  border-left: 1px solid var(--stroke);
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 var(--gutter);
}