/* Tokens from docs/DESIGN.md, light and dark. */
/* Bricolage Grotesque is served from this site (OFL, fonts/OFL.txt): no request to Google from the privacy pages. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url("/fonts/BricolageGrotesque_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("/fonts/BricolageGrotesque_700Bold.ttf") format("truetype"); }
:root { --ground: #F5F5F2; --surface: #FFFFFF; --surface2: #ECECE8; --ink: #141414; --ink2: #6B6B66; --on-ink: #FFFFFF; --accent: #507600; --hairline: rgba(20,20,20,0.12); }
@media (prefers-color-scheme: dark) {
  :root { --ground: #0F0F10; --surface: #18181A; --surface2: #222225; --ink: #F2F1ED; --ink2: #8E8D88; --on-ink: #0F0F10; --accent: #D8FF3E; --hairline: rgba(242,241,237,0.14); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.5 -apple-system, "SF Pro Text", system-ui, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 48px 20px 64px; }
h1, h2, .word { font-family: "Bricolage Grotesque", -apple-system, system-ui, sans-serif; letter-spacing: -0.02em; }
h1 { font-size: 40px; line-height: 1.05; margin: 0 0 12px; }
h2 { font-size: 22px; line-height: 1.2; margin: 32px 0 8px; }
p, li { margin: 0 0 12px; }
ol, ul { padding-left: 22px; }
a { color: var(--ink); }
.meta { color: var(--ink2); }
.word { font-size: 28px; font-weight: 700; margin: 0 0 40px; display: block; text-decoration: none; }
.button { display: inline-block; padding: 14px 24px; border-radius: 999px; background: var(--ink); color: var(--on-ink); text-decoration: none; font-weight: 600; }
.button.secondary { background: var(--surface2); color: var(--ink); }
.stack { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.card { background: var(--surface); border-radius: 20px; padding: 24px; margin: 24px 0; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--ink2); font-size: 14px; }
footer a { color: var(--ink2); margin-right: 16px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 300px; margin: 0 0 32px; transform: rotate(-4deg); }
.tiles div { aspect-ratio: 1; border-radius: 14px; }