/* Shared styles for every blog article and the blog index.
   Extracted so a new post is content only, not a copy of 60 lines of CSS.
   Values mirror the tokens in index.html — keep them in sync by hand if the
   brand palette ever changes. */

:root {
  --amber: #C8762A;
  --amber-faint: #FEF7ED;
  --ink: #1A1208;
  --ink-mid: #5C4F3D;
  --ink-light: #8C7D6E;
  --bg-warm: #F7F5F2;
  --border: #E4DCD0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: 'Fraunces', Georgia, serif; }
.text-amber { color: var(--amber); }
.text-ink-mid { color: var(--ink-mid); }
.text-ink-light { color: var(--ink-light); }
.bg-warm { background: var(--bg-warm); }
.bg-amber-faint { background: var(--amber-faint); }

/* Article typography. Generous line-height and measure, because this is
   long-form reading rather than marketing copy. */
.article h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 2.75rem 0 0.875rem;
}
.article h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}
.article p, .article li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-mid);
}
.article p { margin-bottom: 1.25rem; }
.article ul, .article ol { margin: 0 0 1.25rem 1.25rem; }
.article li { margin-bottom: 0.625rem; }
.article ul li { list-style: disc; }
.article ol li { list-style: decimal; }
.article strong { color: var(--ink); font-weight: 600; }
.article a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Product callout mid-article. Warm tint so it reads as an aside rather
   than body copy, without shouting. */
.callout {
  background: var(--amber-faint);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* Numbered walkthroughs. Tighter than prose lists so a sequence of taps
   reads as one block rather than separate paragraphs. */
.steps { margin: 0 0 1.5rem; }
.steps li { margin-bottom: 0.5rem; line-height: 1.7; }

/* Blog index cards */
.post-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  transition: border-color 0.15s ease;
  display: block;
}
.post-card:hover { border-color: var(--amber); }

/* Article hero. 1200x630 source cropped to a banner in-page; the same file
   is the post's Open Graph image, so each post has a distinct social card
   rather than all ten sharing one. */
.hero-img {
  width: 100%;
  height: clamp(150px, 26vw, 240px);
  object-fit: cover;
  object-position: center 30%;
  border-radius: 16px;
  display: block;
  margin: 0 0 2.5rem;
  background: var(--bg-warm);
}

/* Thumbnail on the blog index cards */
.post-card { overflow: hidden; padding: 0; }
.post-card .thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  background: var(--bg-warm);
}
.post-card .card-body { padding: 1.5rem 1.75rem 1.75rem; }