:root {
  --paper: #f6f1e8;
  --ink: #171512;
  --measure: 38rem;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #f8f4ec 0%, #f3ede2 48%, #eee6d8 100%);
  background-color: var(--paper);
  background-repeat: no-repeat;
  color: var(--ink);
}

body.site-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 1.5rem;
  font-family: "Newsreader", Georgia, serif;
  text-rendering: optimizeLegibility;
}

main {
  width: min(100%, 72rem);
}

.masthead {
  margin-bottom: 3rem;
}

h1,
p {
  margin: 0;
}

h1 {
  max-width: 10ch;
  font-size: clamp(3.8rem, 11vw, 8rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.essay {
  max-width: calc(var(--measure) + 8rem);
}

.essay p {
  max-width: var(--measure);
  font-size: clamp(1.42rem, 2.2vw, 1.78rem);
  line-height: 1.6;
}

.essay p + p {
  margin-top: 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  body.site-body {
    padding: 3rem 1rem;
  }

  .essay p {
    font-size: clamp(1.24rem, 5vw, 1.46rem);
  }
}