@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/space-grotesk/400.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/space-grotesk/500.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/space-grotesk/700.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono/400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono/500.woff2') format('woff2'); } :root { --bg: #fffe00; --surface: #ffffff; --fg: #000000; --muted: #333333; --rule: #000000; --accent: #ff3b00; --accent-fg: #ffffff; --radius: 0px; --border-width: 4px; --font-display: 'Space Grotesk', 'Inter Tight', system-ui, sans-serif; --font-body: 'Space Grotesk', 'Inter Tight', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; --grid-width: 1280px; --content-width: 760px; } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --surface: #0d0d0d; --fg: #fffe00; --muted: #a8a800; --rule: #fffe00; --accent-fg: #000000; } } * { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.s-8b7 { margin: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } a { color: var(--fg); text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: var(--accent-fg); } img { max-width: 100%; display: block; } .w-15d { max-width: var(--grid-width); margin: 0 auto; padding: 1rem 1.5rem; } .s-2e9 { border-bottom: var(--border-width) solid var(--rule); background: var(--bg); padding: 0.5rem 0; } .s-2e9 .m-95b { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; } .brutalist-mark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--fg); } .mark-bar { display: inline-block; width: 24px; height: 24px; background: var(--accent); border: 2px solid var(--rule); flex-shrink: 0; } .mark-bar--sm { width: 14px; height: 14px; border-width: 1px; } .mark-text { font: 800 24px/1 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; } .mark-text--sm { font-size: 14px; font-weight: 700; } .s-2e9 .masthead-meta { margin: 0; font: 500 12px/1 var(--font-mono); color: var(--fg); text-transform: uppercase; letter-spacing: 0.06em; justify-self: start; } .s-2e9 .m-2ea ul, .s-2e9 .w-d8a { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; } .s-2e9 .m-2ea a { display: inline-block; padding: 0.5rem 0.9rem; font: 700 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg); border: 2px solid var(--rule); background: var(--bg); margin-right: -2px; } .s-2e9 .m-2ea a:hover { background: var(--fg); color: var(--bg); } .w-97e { padding: 0; } .hero-block { background: var(--accent); color: var(--accent-fg); border-bottom: var(--border-width) solid var(--rule); padding: 4rem 0 3rem; cursor: default; } .hero-block--static { padding: 3rem 0 2rem; } .index-hero { background: var(--bg); color: var(--fg); } .hero-eyebrow { font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 1.5rem; color: inherit; } .hero-eyebrow time { font-variant-numeric: tabular-nums; } .hero-title { font: 800 clamp(48px, 9vw, 128px)/0.92 var(--font-display); letter-spacing: -0.04em; text-transform: uppercase; margin: 0 0 1.5rem; text-wrap: balance; } .hero-dek { font: 500 22px/1.4 var(--font-body); margin: 0 0 2rem; max-width: 760px; text-wrap: pretty; } .hero-meta { font: 700 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: inherit; margin: 0; opacity: 0.85; } .article-body-wrap { padding: 3rem 1.5rem; } .prose-brutalist { font: 400 18px/1.6 var(--font-body); color: var(--fg); max-width: var(--content-width); } .prose-brutalist p { margin: 0 0 1.3em; text-wrap: pretty; } .prose-brutalist h2 { font: 800 32px/1.1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; margin: 2.2em 0 0.6em; text-wrap: balance; } .prose-brutalist h3 { font: 700 22px/1.3 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; margin: 1.8em 0 0.5em; } .prose-brutalist blockquote { margin: 2em 0; padding: 1.5rem 1.5rem; background: var(--accent); color: var(--accent-fg); border: var(--border-width) solid var(--rule); font: 800 26px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; } .prose-brutalist a { color: var(--fg); background: var(--accent); color: var(--accent-fg); padding: 0 4px; font-weight: 700; } .prose-brutalist a:hover { background: var(--fg); color: var(--bg); } .prose-brutalist code { font-family: var(--font-mono); background: var(--surface); padding: 1px 6px; border: 2px solid var(--rule); font-size: 0.92em; font-weight: 500; } .prose-brutalist pre { font-family: var(--font-mono); font-size: 14px; background: var(--surface); border: var(--border-width) solid var(--rule); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.6em 0; } .prose-brutalist pre code { background: transparent; border: 0; padding: 0; } .prose-brutalist ul, .prose-brutalist ol { padding-left: 1.4em; margin: 0 0 1.4em; } .prose-brutalist li { margin: 0.4em 0; } .prose-brutalist hr { border: 0; border-top: var(--border-width) solid var(--rule); margin: 2em 0; } .prose-brutalist strong, .prose-brutalist b { font-weight: 700; } .index-wrap { padding: 0 1.5rem 4rem; max-width: var(--grid-width); } .index-stack { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .stack-block { border-left: var(--border-width) solid var(--rule); border-right: var(--border-width) solid var(--rule); border-bottom: var(--border-width) solid var(--rule); background: var(--bg); } .stack-block:first-child { border-top: var(--border-width) solid var(--rule); } .stack-link { display: block; padding: 1.5rem 1.5rem; color: var(--fg); transition: background 0.1s ease, color 0.1s ease; } .stack-link:hover { background: var(--accent); color: var(--accent-fg); } .stack-link:hover .stack-meta { color: inherit; } .stack-meta { font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.8rem; } .stack-title { font: 800 clamp(28px, 4vw, 48px)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 0.6rem; text-wrap: balance; } .stack-dek { font: 500 16px/1.4 var(--font-body); margin: 0; text-wrap: pretty; } .t-c9c { margin-top: 2rem; padding: 1.2rem; border: var(--border-width) solid var(--rule); background: var(--surface); color: var(--fg); } .t-c9c .w-868 { font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.6rem; } .t-c9c .t-0ca { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 14px; font-weight: 500; } .s-61e { border-top: var(--border-width) solid var(--rule); margin-top: 0; padding: 1.5rem 0; background: var(--bg); } .s-61e .m-95b { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; } .footer-mark { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; } .s-61e .t-0ca, .s-61e .w-d8a { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; font: 700 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; } .s-61e .t-0ca a { display: inline-block; padding: 0.4rem 0.8rem; border: 2px solid var(--rule); margin-right: -2px; color: var(--fg); } .s-61e .t-0ca a:hover { background: var(--fg); color: var(--bg); } .colophon { font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); margin: 0; justify-self: end; } @media (max-width: 800px) { .s-2e9 .m-95b { grid-template-columns: 1fr; gap: 0.6rem; } .s-2e9 .masthead-meta { justify-self: start; } .s-2e9 .m-2ea ul { flex-wrap: wrap; } .hero-block { padding: 2.5rem 0 2rem; } .stack-link { padding: 1.2rem; } .s-61e .m-95b { grid-template-columns: 1fr; gap: 0.6rem; } .s-61e .t-0ca { flex-wrap: wrap; } .colophon { justify-self: start; } }