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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--wall);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
}

/* Light ------------------------------------------------------------ */

.sun-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.sun-canvas.is-ready {
  opacity: 1;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(30, 20, 10, var(--vignette, 0.14)) 100%);
  mix-blend-mode: multiply;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--grain, 0.16);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Copy sits on the wall like paint: it darkens with the shade and catches the light. */
.page {
  position: relative;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Entrance --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sun-canvas {
    transition: none;
  }
}

/* Without WebGL, a CSS approximation of the stripes. */
.no-webgl body {
  background:
    repeating-linear-gradient(-16deg, rgba(255, 236, 200, 0.55) 0 14px, transparent 14px 40px) 60% 20% / 70% 70% no-repeat,
    var(--wall);
}