:root {
  --paper: #F4EEE2; --paper2: #EDE5D5; --ink: #2B2722; --ink2: #5A5346; --ink3: #8A8070;
  --hairline: #D9CCB4; --river: #5C7A99; --clay: #B8714F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17150F; --paper2: #201D16; --ink: #EFE6D4; --ink2: #C9BDA6; --ink3: #8F8574;
    --hairline: #2E2A22; --river: #8FAACB; --clay: #D4906C;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: var(--paper); color: var(--ink);
  line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased;
}
.serif, h1, h2, .brand { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; }
.nav {
  max-width: 680px; margin: 0 auto; padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 0.5px solid var(--hairline);
}
.brand { font-size: 20px; font-weight: 600; }
.brand a { color: var(--ink); text-decoration: none; }
.links a { margin-left: 18px; font-size: 14px; color: var(--ink3); text-decoration: none; }
.links a:hover { color: var(--ink); }
.page { max-width: 680px; margin: 0 auto; padding: 56px 20px 88px; }
.label { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
h1 { font-weight: 500; font-size: 40px; line-height: 1.15; margin: 10px 0 14px; }
h2 { font-weight: 500; font-size: 23px; line-height: 1.3; margin: 42px 0 10px; }
p { margin: 0 0 16px; }
ul { padding-left: 22px; } li { margin-bottom: 8px; }
a { color: var(--river); text-underline-offset: 3px; }
hr { border: none; border-top: 0.5px solid var(--hairline); margin: 40px 0; }
.muted { color: var(--ink3); }
.updated { color: var(--ink3); font-size: 14px; margin-bottom: 30px; }
.card { background: var(--paper2); border: 0.5px solid var(--hairline); border-radius: 16px; padding: 20px 22px; margin: 16px 0; }
.shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
@media (max-width: 560px) { .shapes { grid-template-columns: 1fr; } h1 { font-size: 34px; } }
.shapes .card { margin: 0; }
.shapes .k { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
.shapes .v { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600; margin: 4px 0 2px; }
.badge { display: inline-block; margin-top: 8px; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
footer {
  max-width: 680px; margin: 0 auto; padding: 26px 20px 48px; border-top: 0.5px solid var(--hairline);
  color: var(--ink3); font-size: 13px; text-align: center;
}
footer a { color: var(--ink3); margin: 0 6px; }