*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(2.2rem,5.4vw,4.2rem); line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem,3.6vw,2.8rem); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 1.3rem; line-height: 1.25; }
h4 { font-size: 1.05rem; }

em.it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); }

::selection { background: var(--accent); color: #fff; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }