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

:root {
  --black: #0a0a0a;
  --white: #f0ede8;
  --grey: #3a3a3a;
  --dim: rgba(240,237,232,0.35);
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --track: 0.12em;
}

html, body {
  width: 100%; height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* reusable underline hover */
.ul-hover {
  position: relative;
}
.ul-hover::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--white);
  transition: width 0.3s ease;
}
.ul-hover:hover::after { width: 100%; }
.ul-hover:hover { opacity: 0.5; }

/* fade-in utility */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}