:root { --bg: #fff; --bg-2: #f4f4f4; --ink: #111; --accent: #2a37ff; --border: 1px solid #111; --subtext: #555; --subtext-2: #666; --muted: #777; }
[data-theme="dark"] { --bg: #0a0a0a; --bg-2: #181818; --ink: #f1f1ed; --border: 1px solid #555; --subtext: #bbb; --subtext-2: #aaa; --muted: #999; }
* { box-sizing: border-box; }
a { color: inherit; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
.field-article { max-width: 1040px; padding: 48px 32px 80px; margin: auto; }
.field-article a { color: inherit; text-underline-offset: 4px; }
.field-article header { max-width: 820px; margin-bottom: 40px; }
.article-meta { font-family: 'Space Mono', monospace; font-size: 12px; margin: 32px 0 20px; }
.field-article h1 { font-size: 56px; line-height: 1.06; letter-spacing: 0; margin: 0 0 28px; overflow-wrap: anywhere; }
.article-lede { font-size: 22px; line-height: 1.5; }
.article-image { display: block; width: 100%; height: auto; max-height: 500px; object-fit: cover; }
.article-copy { max-width: 740px; margin: 48px auto; font-size: 18px; line-height: 1.75; }
.article-copy h2 { font-size: 28px; line-height: 1.2; margin-top: 40px; letter-spacing: 0; }
.article-copy blockquote { margin: 32px 0; border-left: 3px solid var(--accent); padding-left: 24px; }
.article-related { display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid currentColor; padding-top: 24px; }
@media (max-width: 600px) { .field-article { padding: 32px 24px 48px; } .field-article h1 { font-size: 36px; } .article-lede { font-size: 19px; } .article-copy { font-size: 17px; } }