* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--color-paper);
  color: var(--color-ink);
}

body {
  margin: 0;
  font-family: var(--font-serif);
  background: var(--color-paper);
  line-height: 1.75;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: repeating-linear-gradient(105deg, transparent 0 10px, rgba(92, 70, 40, .05) 11px);
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { outline-offset: .25rem; }
:focus-visible { outline: .15rem solid var(--color-seal); }

main,
.site-header,
.site-footer {
  width: min(calc(100% - 2rem), var(--content-width));
  margin-inline: auto;
}

.page-section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--color-line);
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 12ch;
  font-size: clamp(2.65rem, 5vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: .03em;
}
h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.2; }
.eyebrow {
  font: 600 .72rem/1.4 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .58;
}
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }