:root {
  color-scheme: light;
  background: #f6f5f2;
  color: #111110;
  font-family: Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; }
body { -webkit-font-smoothing: antialiased; }

.page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.light, .grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.light {
  background: radial-gradient(ellipse at 50% 42%, #fffefa 0%, #f8f7f4 43%, #eeede9 100%);
}

.grain {
  background-image: url("./assets/paper.svg");
  opacity: .035;
}

.identity {
  width: min(112px, 24vw, 32svh);
  animation: arrive 1.8s cubic-bezier(.16, 1, .3, 1) both;
}

h1 { margin: 0; font-size: 1rem; line-height: 0; }
.monogram { display: block; width: 100%; height: auto; }

@keyframes arrive {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}