:root {
  color-scheme: dark;
  --ink: #f4f0e7;
  --muted: #aaa69d;
  --line: rgba(244, 240, 231, 0.14);
  --accent: #d8ff62;
  --surface: #11120f;
}

* { box-sizing: border-box; }
html { background: #090a08; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 72% 4%, rgba(216,255,98,.09), transparent 32rem), #090a08; }
a { color: inherit; text-underline-offset: .2em; }
.shell { width: min(70rem, calc(100% - 2rem)); margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; border-bottom: 1px solid var(--line); }
.brand { font-weight: 720; letter-spacing: -.04em; text-decoration: none; }
nav { display: flex; gap: 1.2rem; color: var(--muted); font-size: .88rem; }
main { padding: clamp(4rem, 10vw, 9rem) 0 6rem; }
.eyebrow { margin: 0 0 1.4rem; color: var(--accent); font: 650 .72rem/1 ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 8vw, 6.8rem); line-height: .95; letter-spacing: -.065em; }
.lead { max-width: 40rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 5rem; background: var(--line); border: 1px solid var(--line); }
.card { min-height: 15rem; padding: 1.6rem; background: var(--surface); }
.card span { color: var(--accent); font: .72rem ui-monospace, monospace; }
.card h2 { margin: 3.8rem 0 .8rem; font-size: 1.25rem; }
.card p, .prose p, .prose li { color: var(--muted); line-height: 1.65; }
.prose { max-width: 46rem; }
.prose h1 { max-width: none; font-size: clamp(2.7rem, 7vw, 5rem); }
.prose h2 { margin-top: 3rem; font-size: 1.35rem; }
.meta { margin: 1.2rem 0 3rem; color: var(--muted); }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } nav { gap: .8rem; } footer { flex-direction: column; } }