:root {
  --paper: #f8f5ef;
  --ink: #1a1a1a;
  --slate: #5b5b5b;
  --green: #2c6e49;
  --rule: #d9d5cd;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: "Spline Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
main { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 40px; margin: 0 0 8px; letter-spacing: -0.01em; }
h1 .dot { color: var(--green); }
h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; margin: 40px 0 12px; }
p, li { font-size: 16px; color: var(--ink); }
p.lede { color: var(--slate); font-size: 17px; margin-bottom: 32px; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green); }
.card-list { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 16px; }
.card { display: block; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; text-decoration: none; }
.card:hover { border-color: var(--green); }
.card .title { font-family: "Fraunces", Georgia, serif; font-size: 19px; margin: 0 0 4px; color: var(--ink); }
.card .desc { font-size: 14px; color: var(--slate); margin: 0; }
.foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--slate); font-size: 13px; }
.mono { font-family: "Spline Sans Mono", ui-monospace, monospace; }