:root {
  --ground: #2B2724;
  --deep: #221F1C;
  --surface: rgba(244, 239, 232, .035);
  --hairline: rgba(244, 239, 232, .09);
  --ink: #F4EFE8;
  --ink-2: rgba(244, 239, 232, .75);
  --sage: #8FC6A6;
  --clay: #E6A784;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 "Public Sans", system-ui, -apple-system, sans-serif;
  padding-inline: 20px;
}
main { max-width: 640px; margin: 0 auto; padding-block: 64px 48px; }
.mono {
  font: 500 11px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
h1, h2 { font-family: "Newsreader", Georgia, serif; font-weight: 300; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 44px; margin: 12px 0 16px; }
h2 { font-size: 26px; margin: 40px 0 8px; }
p, li { color: var(--ink-2); }
strong { color: var(--ink); font-weight: 500; }
a { color: var(--sage); }
a:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.icon { width: 88px; height: 88px; border-radius: 20px; display: block; }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px 24px; margin: 24px 0; }
footer { max-width: 640px; margin: 0 auto; padding: 24px 0 48px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-2); }
footer a { margin-right: 18px; }