:root {
  --ground: #FBFAF8; --ink: #17191C; --petrol: #0F7E78;
  --fg-secondary: #3B3F44; --fg-muted: #6B7177;
  --border: #E7E3DD; --surface-sunken: #F4F2EE;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, monospace;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--petrol); }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; padding: 8px 16px; background: var(--petrol); color: #fff; z-index: 100; text-decoration: none; }
header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,248,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
nav { max-width: 1120px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; }
.prose { max-width: 720px; margin: 0 auto; padding: clamp(48px,6vw,80px) 32px clamp(64px,8vw,120px); }
.prose h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,4vw,40px); letter-spacing: -.025em; margin-bottom: 8px; }
.prose .meta { font-size: 13px; color: var(--fg-secondary); margin-bottom: 40px; font-family: var(--font-mono); }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; margin: 36px 0 8px; }
.prose p { color: var(--fg-secondary); margin-bottom: 16px; }
.prose ul { color: var(--fg-secondary); padding-left: 24px; margin-bottom: 16px; }
.prose li { margin-bottom: 6px; }
footer { padding: clamp(32px,4vw,48px) 32px; border-top: 1px solid var(--border); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
footer > div { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Shared logo + footer link utilities (used in header/footer of prose pages) */
.logo-link     { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-icon     { display: inline-flex; color: var(--petrol); }
.logo-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
footer a       { color: inherit; text-decoration: none; }
.footer-link   { margin-right: 16px; }