:root { --ink: #000000; --paper: #ffffff; }
* { box-sizing: border-box; }
html { background: #f4ecdf; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8f2e8 45%, #f4ecdf 100%) fixed;
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  text-transform: lowercase;
}
main { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 20px;
  letter-spacing: -0.03em; text-decoration: none;
}
.mark svg { width: 22px; height: 21px; }
h1 {
  font-family: "Unbounded", sans-serif; font-weight: 900;
  font-size: clamp(34px, 9vw, 56px); line-height: 1; letter-spacing: -0.03em;
  margin: 56px 0 16px;
}
h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  margin: 40px 0 8px;
}
p, ul, ol { margin: 0 0 12px; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 6px; }
code { font-family: inherit; font-weight: 700; }
.lead { font-size: 20px; }
.button {
  display: inline-block; margin: 16px 0 8px; padding: 14px 22px;
  background: var(--ink); color: var(--paper);
  font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 16px;
  text-decoration: none;
}
.button:hover { outline: 3px solid var(--ink); outline-offset: 3px; }
footer { margin-top: 56px; display: flex; gap: 20px; font-size: 15px; font-weight: 700; }
.updated { font-size: 15px; font-weight: 700; }