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

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: clamp(16px, 0.9rem + 0.25vw, 19px);
  line-height: 1.6;
  font-feature-settings: "onum", "pnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.11; mix-blend-mode: screen; }
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-weight: 600; }
h3, h4 { font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 600; color: var(--c-ink); }

a {
  color: var(--c-link);
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 160ms ease, background-size 200ms ease, background-position 200ms ease;
}
a:hover { color: var(--c-link-h); background-size: 100% 2px; }
a:focus-visible {
  outline: 2px solid var(--c-coral);
  outline-offset: 3px;
  background-image: none;
}

::selection { background: var(--c-amber); color: var(--c-night); }

.skip {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 8px 14px;
  z-index: 300;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.skip:focus { left: 16px; top: 16px; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}