/* blog.css — /blog index + posts. Shared with campaign pages' tokens.css.
   Long-form reading: 68ch measure, white+gold brand, zero raster images. */

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: var(--color-paper); color: var(--color-ink); }
.container { max-width: 1180px; margin-inline: auto; padding-inline: var(--space-4xl); }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xl) 0; }
.nav__brand { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; color: var(--color-ink); }
.nav__brand svg { width: 30px; height: 30px; }
.nav__wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); }
.nav__link { font-size: var(--text-sm); color: var(--color-ink-dim); text-decoration: none; }
.nav__link:hover { color: var(--color-ink); }

.hero { padding: calc(var(--space-6xl) + 3rem) 0 var(--space-2xl); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 var(--space-lg); }
.hero__sub { font-size: var(--text-lg); color: var(--color-ink-dim); margin: 0; max-width: 62ch; line-height: 1.55; }

/* post cards */
.posts { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-6xl); }
.post-card { display: block; background: var(--color-paper-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-3xl); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.post-card:hover { border-color: #c9a227; transform: translateY(-2px); }
.post-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-ink-muted); margin-bottom: var(--space-md); }
.post-card h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 var(--space-md); }
.post-card p { font-size: var(--text-sm); color: var(--color-ink-dim); line-height: 1.65; margin: 0; max-width: 72ch; }
.post-card__more { display: inline-block; margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 700; color: #a5811f; }

/* article */
.article { max-width: 68ch; margin-inline: auto; padding: calc(var(--space-6xl) + 3rem) 0 var(--space-6xl); }
.article__meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-ink-muted); margin-bottom: var(--space-lg); }
.article h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 var(--space-lg); }
.article .dek { font-size: var(--text-lg); color: var(--color-ink-dim); line-height: 1.55; margin: 0 0 var(--space-3xl); }
.article h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.015em; margin: var(--space-3xl) 0 var(--space-lg); }
.article p { font-size: var(--text-md, 1.02rem); line-height: 1.75; margin: 0 0 var(--space-xl); color: var(--color-ink); }
.article ul { line-height: 1.75; margin: 0 0 var(--space-xl); padding-left: 1.4em; }
.article li { margin-bottom: var(--space-sm); }
.article a { color: #a5811f; text-decoration: underline; text-underline-offset: 2px; }
.article blockquote { margin: var(--space-2xl) 0; padding-left: var(--space-xl); border-left: 3px solid #c9a227; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-dim); }
.article .src-note { font-size: var(--text-xs); color: var(--color-ink-muted); border-top: 1px solid var(--color-border); margin-top: var(--space-3xl); padding-top: var(--space-lg); line-height: 1.7; }
.article-nav { max-width: 68ch; margin-inline: auto; padding-bottom: var(--space-4xl); }
.article-nav a { font-size: var(--text-sm); color: var(--color-ink-dim); text-decoration: none; }
.article-nav a:hover { color: var(--color-ink); }

.cta-strip { background: var(--color-paper-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-3xl) 0; margin: 0; }
.cta-strip .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.cta-strip h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.4rem; font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-md); background: #c9a227; color: #111113; text-decoration: none; }
.btn-cta:hover { background: #d9b33a; }

.footer { border-top: 1px solid var(--color-border); padding: var(--space-2xl) 0; font-size: var(--text-xs); color: var(--color-ink-muted); }
.footer__inner { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; text-align: center; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--color-ink); }

@media (max-width: 640px) {
  .container { padding-inline: var(--space-xl); }
  .post-card { padding: var(--space-xl); }
}