/* Blog — design tokens + layout (mirrors landing.css) */
.landing-root {
  --c-coffee: #0F0D0B; --c-cocoa: #2B2521;
  --c-bone: #F8F4EC; --c-bone-2: #EFE7D6; --c-bone-3: #E5DAC4;
  --c-terracotta: #C2532A; --c-terracotta-deep: #9A4515;
  --c-honey: #E0A04A; --c-line: #DDD2BD;
  --c-mute: #7A6E5E; --c-ink-soft: #4A3F30;
  background: var(--c-bone); color: var(--c-coffee);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
.landing-root * { box-sizing: border-box; }
.landing-root ::selection { background: var(--c-terracotta); color: var(--c-bone); }
.landing-root a { color: inherit; text-decoration: none; }
.landing-root .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .landing-root .wrap { padding: 0 20px; } }

/* Nav */
.landing-root .nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(248, 244, 236, 0.72);
  border-bottom: 1px solid rgba(15, 13, 11, 0.06);
}
.landing-root .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.landing-root .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.landing-root .nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--c-ink-soft); }
.landing-root .nav-links a:hover { color: var(--c-coffee); }
.landing-root .nav-cta {
  background: var(--c-coffee); color: var(--c-bone);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--c-coffee); transition: transform .15s ease, background .15s ease;
  cursor: pointer; display: inline-block;
}
.landing-root .nav-cta:hover { transform: translateY(-1px); background: var(--c-terracotta); border-color: var(--c-terracotta); }
@media (max-width: 720px) { .landing-root .nav-links { display: none; } }

/* Section eyebrow */
.landing-root .sec-eyebrow {
  display: inline-block;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-terracotta);
}

/* Footer */
.landing-root footer { padding: 56px 0 36px; }
.landing-root .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 720px) { .landing-root .foot-grid { grid-template-columns: 1fr 1fr; } }
.landing-root .foot-grid .desc { font-family: 'Instrument Serif', serif; font-size: 15px; color: var(--c-ink-soft); line-height: 1.5; max-width: 32ch; margin-top: 14px; }
.landing-root .foot-col h5 { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-mute); margin: 0 0 16px; }
.landing-root .foot-col a { display: block; font-size: 14px; color: var(--c-coffee); margin-bottom: 10px; }
.landing-root .foot-col a:hover { color: var(--c-terracotta); }
.landing-root .foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--c-mute); letter-spacing: 0.06em; }

/* Blog prose */
.blog-prose { font-family: 'Instrument Serif', serif; font-size: 18px; line-height: 1.7; color: var(--c-ink-soft); }
.blog-prose h2 { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 28px; margin: 48px 0 16px; letter-spacing: -0.02em; color: var(--c-coffee); }
.blog-prose h3 { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 22px; margin: 36px 0 12px; color: var(--c-coffee); }
.blog-prose p { margin: 0 0 20px; }
.blog-prose a { color: var(--c-terracotta); text-decoration: underline; text-underline-offset: 3px; }
.blog-prose a:hover { color: var(--c-terracotta-deep); }
.blog-prose ul, .blog-prose ol { padding-left: 24px; margin: 0 0 20px; }
.blog-prose li { margin-bottom: 8px; }
.blog-prose blockquote { border-left: 3px solid var(--c-terracotta); padding-left: 20px; margin: 24px 0; font-style: italic; color: var(--c-mute); }
.blog-prose code { font-family: 'Geist Mono', monospace; font-size: 0.9em; background: var(--c-bone-2); padding: 2px 6px; border-radius: 4px; }
.blog-prose pre { background: var(--c-coffee); color: var(--c-bone); padding: 20px; border-radius: 12px; overflow-x: auto; margin: 24px 0; }
.blog-prose pre code { background: none; padding: 0; color: inherit; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; }
.blog-prose em { color: var(--c-terracotta); }
.blog-prose strong { color: var(--c-coffee); font-weight: 600; }
.blog-prose hr { border: none; border-top: 1px solid var(--c-line); margin: 40px 0; }

/* Blog navigation */
.blog-back { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-terracotta); display: inline-block; margin-bottom: 24px; }
.blog-back:hover { text-decoration: underline; }
.blog-title { font-family: 'Geist', sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; margin: 14px 0 0; }
.blog-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 500; color: var(--c-terracotta); }
.blog-description { font-family: 'Instrument Serif', serif; font-size: 20px; color: var(--c-ink-soft); margin: 16px 0 40px; max-width: 60ch; line-height: 1.5; }
.blog-byline { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: 0.04em; color: var(--c-mute); margin: 16px 0 40px; }

/* Blog listing */
.blog-list { display: flex; flex-direction: column; gap: 0; margin-top: 48px; max-width: 780px; }
.blog-card { padding: 28px 0; border-bottom: 1px solid var(--c-line); }
.blog-card:first-child { border-top: 1px solid var(--c-line); }
.blog-card-date { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--c-mute); text-transform: uppercase; }
.blog-card-title { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin: 8px 0 6px; }
.blog-card-title a { color: var(--c-coffee); }
.blog-card-title a:hover { color: var(--c-terracotta); }
.blog-card-desc { font-family: 'Instrument Serif', serif; font-size: 16px; color: var(--c-ink-soft); line-height: 1.5; }

/* Reset */
body { margin: 0; }