/* Tokens, reset, page ground. */

:root {
  --ink:   #fafafa;
  --bg:    #0a0a0a;
  --line:  #2a2a2a;
  --line2: #3a3a3a;
  --line3: #4a4a4a;
  --dim:   #a3a3a3;
  --meta:  #8f8f8f;
  --sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Discord status hues - the only colour on the page, kept because these
     four are a convention users already recognise. */
  --dc-online:  #23a55a;
  --dc-idle:    #f0b232;
  --dc-dnd:     #f23f43;
  --dc-offline: #4a4a4a;
  --gutter: 24px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }

/* An author-origin `display` beats the UA sheet's [hidden] rule, so any
   component with its own display value would still lay out while hidden. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--gutter) 96px;
}

/* dotted field, fading out toward the footer */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  opacity: .07;
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

a { color: var(--ink); text-decoration: none; }

::selection { background: var(--ink); color: var(--bg); }
::-webkit-scrollbar { height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); }