html {
  background: var(--paper);
  color: var(--ink);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-synthesis: none;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
}

body::before {
  animation: page-in var(--motion-page) var(--motion-ease) both;
  background: var(--paper);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: var(--z-modal);
}

body.home::before { background: var(--ink); }

main {
  display: block;
}

h1,
h2,
h3,
h4 {
	overflow-wrap: break-word;
  text-wrap: pretty;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

a:hover {
  transform: translateY(-2px);
}

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

::selection {
  background: var(--volt);
  color: var(--ink);
}

@keyframes page-in {
  from { opacity: 1; }
  to { opacity: 0; }
}