:root {
  --ink: #1a1c19;
  --muted: #5a6158;
  --line: #d5d8d1;
  --paper: #f3f1eb;
  --wash: #e4e9df;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(70% 50% at 100% 0%, var(--wash), transparent 55%),
    linear-gradient(180deg, #f7f5f0 0%, var(--paper) 100%);
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 36rem;
  padding: clamp(2rem, 7vw, 4.5rem);
}

.brand {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  max-width: 16ch;
}

h1 em {
  font-style: italic;
  font-weight: 400;
}

.lede {
  margin: 1.35rem 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;
}

.aside {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 32ch;
}