/* =========================================================
   Founder Built - blog stylesheet.
   Self-contained: carries the same warm-greige tokens, nav,
   footer and buttons as the landing (index.html keeps its own
   inline copy; typography stays synced via {{__typography__}}),
   plus blog-only styles for the index grid and the article page.
   Linked by templates/blog.html and templates/blog/item.html.
   ========================================================= */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/fonts/inter.woff2') format('woff2');
}

:root {
  --p50:#FCFDFD; --p100:#F3F2EB; --p200:#E8E6D9; --p300:#DCD9C9;
  --p400:#C5C1AF; --p500:#A9A593; --p600:#8C8976; --p700:#6F6C5B;
  --p800:#545244; --p900:#3B392F; --p950:#26251E;
  --warm:#C15B2E;
  --paper: var(--p50);
  --ink: var(--p950);
  --muted: var(--p700);
  --faint: var(--p600);
  --line: var(--p200);
  --tint: var(--p100);
  --card:#FFFFFF;
  --r:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(38,37,30,.05), 0 8px 24px -16px rgba(38,37,30,.24);
  --sh:0 30px 60px -30px rgba(38,37,30,.28);
  --maxw:1120px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font);
  font-size:18px; line-height:1.6; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; }
::selection { background:#E7E3D3; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

h1,h2,h3 { font-weight:500; letter-spacing:-0.025em; margin:0; text-wrap:balance; color:var(--ink); }
h1 { font-size:clamp(37px,5.2vw,62px); line-height:1.04; }
h2 { font-size:clamp(24px,3vw,34px); line-height:1.12; }
h3 { font-size:clamp(20px,2.2vw,25px); font-weight:600; letter-spacing:-0.02em; }
p { margin:0 0 18px; }
.lead { font-size:clamp(18px,1.9vw,21px); color:var(--muted); max-width:56ch; }
.muted { color:var(--muted); }
.eyebrow { font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--faint); margin:0 0 18px; }

/* buttons - dark ink pill */
.btn {
  display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:16px; line-height:1;
  padding:14px 22px; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .1s ease; font-family:inherit; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--ink); color:var(--p50); }
.btn-primary:hover { background:var(--p900); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--p300); }
.btn-ghost:hover { border-color:var(--p600); }
.btn-sm { padding:10px 16px; font-size:14.5px; }
.arrow { transition:transform .15s ease; }
.btn:hover .arrow { transform:translateX(3px); }

/* nav - floating frosted pill (matches landing) */
header.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:center; padding:16px 20px; pointer-events:none; }
.navbar {
  pointer-events:auto; width:100%; max-width:920px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:color-mix(in srgb, var(--p100) 60%, transparent); backdrop-filter:saturate(1.3) blur(12px);
  border:1px solid color-mix(in srgb, var(--p300) 55%, transparent); border-radius:999px;
  padding:9px 9px 9px 20px; transition:background .3s ease;
}
.navbar:hover { background:var(--p100); }
.wordmark { font-weight:600; letter-spacing:-0.03em; font-size:18px; text-decoration:none; }
.wordmark .dot { color:var(--warm); }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a.lnk { text-decoration:none; font-size:14.5px; font-weight:500; color:var(--p900); padding:9px 14px; border-radius:999px; transition:background .15s; }
.nav-links a.lnk:hover, .nav-links a.lnk[aria-current="page"] { background:var(--p200); }
.nav-links .btn-sm { margin-left:6px; }
@media (max-width:720px){ .nav-links a.lnk.hide-sm { display:none; } }

footer { border-top:1px solid var(--line); padding:40px 0 60px; color:var(--faint); font-size:14.5px; margin-top:80px; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer a { color:inherit; text-decoration:none; }
footer a:hover { color:var(--muted); }

/* ---------- page header (index) ---------- */
.blog-head { padding:calc(90px + clamp(30px,7vh,60px)) 0 12px; background:linear-gradient(180deg, var(--p200) 0%, var(--paper) 100%); }
.blog-head .eyebrow .pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--warm); margin-right:8px; vertical-align:middle; }
.blog-head h1 { max-width:20ch; }
.blog-head .lead { margin-top:18px; }

/* ---------- index grid ---------- */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:26px; padding:44px 0 20px; }
.blog-card {
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover { transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:var(--p300); }
.blog-card-img { display:block; width:100%; aspect-ratio:8/5; object-fit:cover; background:var(--p100); border-bottom:1px solid var(--line); }
.blog-card-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta { font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--faint); margin:0 0 10px; }
.blog-card-title { font-size:20px; font-weight:600; letter-spacing:-0.02em; line-height:1.2; margin:0 0 10px; }
.blog-card-excerpt { font-size:15px; color:var(--muted); line-height:1.55; margin:0 0 18px; }
.blog-card-link { margin-top:auto; font-size:14.5px; font-weight:600; color:var(--ink); }
.blog-card-link .arrow { display:inline-block; transition:transform .15s ease; }
.blog-card:hover .blog-card-link .arrow { transform:translateX(3px); }

/* future (dripped) posts are hidden until their date passes; JS reveals them */
.blog-card[data-publish].pending { display:none; }
.blog-empty { padding:60px 0 40px; color:var(--muted); font-size:17px; }
.blog-empty.hide { display:none; }

/* ---------- article page ---------- */
.article { max-width:720px; margin:0 auto; padding:calc(90px + clamp(30px,7vh,56px)) 24px 20px; }
.article-badge { display:inline-block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--warm); margin:0 0 14px; }
.article-title { font-size:clamp(30px,4.4vw,46px); line-height:1.06; margin:0 0 16px; }
.article-meta { color:var(--faint); font-size:14.5px; margin:0 0 30px; }
.article-cover { display:block; width:100%; aspect-ratio:8/5; object-fit:cover; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--p100); margin:0 0 38px; }
.article-body { font-size:18px; line-height:1.7; color:var(--p900); }
.article-body h2 { font-size:clamp(22px,2.6vw,28px); margin:38px 0 14px; }
.article-body p { margin:0 0 20px; }
.article-body ul { margin:0 0 20px; padding-left:22px; }
.article-body li { margin:0 0 8px; }
.article-body strong { font-weight:600; color:var(--ink); }
.article-body a { color:var(--warm); text-decoration:underline; text-underline-offset:2px; }
.article-body blockquote {
  margin:26px 0; padding:16px 22px; border-left:3px solid var(--p300);
  background:var(--tint); border-radius:0 var(--r) var(--r) 0; color:var(--p800); font-size:17px;
}
/* the "Tell your AI:" prompts read as pull-quotes without extra markup */
.article-body p:has(> :first-child) { }

.article-cta { margin:44px 0 10px; padding:30px 28px; background:var(--ink); color:var(--p100); border-radius:var(--r-lg); text-align:center; }
.article-cta h2 { color:var(--p50); font-size:22px; margin:0 0 8px; }
.article-cta p { color:var(--p400); font-size:15.5px; margin:0 0 20px; }
.article-cta .btn-primary { background:var(--p50); color:var(--ink); }
.article-cta .btn-primary:hover { background:var(--p200); }
.article-back { margin:30px 0 0; }
.article-back a { color:var(--warm); font-weight:600; text-decoration:none; }

/* direct-hit guard for a not-yet-live post */
.article.pending .article-cover,
.article.pending .article-body,
.article.pending .article-cta { display:none; }
.article-soon { display:none; margin:24px 0; padding:22px 24px; border:1px dashed var(--p400); border-radius:var(--r); color:var(--muted); background:var(--tint); }
.article.pending .article-soon { display:block; }

@media (max-width:640px) {
  .blog-head { padding-top:calc(80px + 6vh); }
  .blog-grid { grid-template-columns:1fr; gap:20px; padding-top:32px; }
  .article { padding-left:20px; padding-right:20px; }
}