*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(at 20% 0%, var(--bg-radial-1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, var(--bg-radial-2) 0px, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-blue); text-decoration: none; }
a:hover { color: var(--brand-blue-d); text-decoration: underline; }

img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: var(--r-sm); }

.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;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }