/* ──────────────────────────────────────────────────────────────────────────
   BizBook2U blog — extends brand.css ("Receipt + Stamp").
   Shared nav/footer (kept in sync with home.html) + blog index + article prose.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Nav (mirrors home.html) ──────────────────────────────────────────── */
.nav{padding:18px 0;border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.nav__inner{display:flex;align-items:center;justify-content:space-between;max-width:1140px;margin:0 auto;padding:0 24px;gap:16px}
.nav__links{display:flex;align-items:center;gap:22px}
.nav__link{color:var(--ink-soft);font-weight:500;font-size:14px;text-decoration:none}
.nav__link:hover{color:var(--ink);text-decoration:none}
.nav__link--active{color:var(--ink);font-weight:600}
.nav__cta{padding:9px 18px;background:var(--ink);color:#fff;border-radius:var(--r);font-weight:600;font-size:14px;text-decoration:none;font-family:inherit;transition:background .15s ease;white-space:nowrap}
.nav__cta:hover{background:#1f1f1f;color:#fff;text-decoration:none}
@media(max-width:560px){.nav__links{display:none}}

/* ── Footer (mirrors home.html) ───────────────────────────────────────── */
.foot{padding:36px 0;text-align:center;color:var(--grey);font-size:13px;border-top:1px solid var(--rule);font-family:var(--font-mono);letter-spacing:.01em}
.foot a{color:var(--grey)}
.foot__links{margin-bottom:10px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.foot__links a{color:var(--ink-soft);text-decoration:none}
.foot__links a:hover{color:var(--stamp)}

/* ── Blog index ───────────────────────────────────────────────────────── */
.blog-head{padding:64px 0 24px;text-align:center}
.blog-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0 0 14px}
.blog-head p{color:var(--grey);font-size:18px;max-width:560px;margin:0 auto;line-height:1.55}

.post-list{max-width:820px;margin:0 auto;padding:32px 24px 72px;display:grid;gap:20px}
.post-card{
  display:block;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .05s ease;
}
.post-card:hover{text-decoration:none;border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-1px)}
.post-card__cat{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stamp);font-weight:600;
}
.post-card__title{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:10px 0 10px;color:var(--ink)}
.post-card__excerpt{color:var(--ink-soft);font-size:16px;line-height:1.55;margin:0 0 16px}
.post-card__meta{font-family:var(--font-mono);font-size:12px;color:var(--grey);display:flex;gap:10px;align-items:center}
.post-card__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--grey-soft)}
.post-card__more{color:var(--stamp);font-weight:600;font-size:14px}

/* ── Article ──────────────────────────────────────────────────────────── */
.article{max-width:700px;margin:0 auto;padding:56px 24px 24px}
.article__cat{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stamp);font-weight:600;
}
.article h1{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-.03em;margin:14px 0 18px;color:var(--ink)}
.article__meta{font-family:var(--font-mono);font-size:13px;color:var(--grey);display:flex;gap:10px;align-items:center;margin-bottom:8px}
.article__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--grey-soft)}
.article__lead{font-size:20px;line-height:1.5;color:var(--ink-soft);margin:20px 0 8px;font-weight:400}
.article__rule{border:0;border-top:1px solid var(--rule);margin:28px 0}

.prose{font-size:17.5px;line-height:1.7;color:var(--ink)}
.prose > p{margin:0 0 20px}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:40px 0 14px;color:var(--ink)}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:20px;margin:28px 0 10px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin:0 0 9px}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--stamp);font-weight:500}
.prose blockquote{
  margin:24px 0;padding:14px 22px;border-left:3px solid var(--stamp);
  background:var(--stamp-bg);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:18px;line-height:1.55;color:var(--ink-soft);
}
.prose blockquote p{margin:0}

/* Receipt-style callout box */
.callout{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:22px 24px;margin:26px 0;box-shadow:var(--shadow-sm);
}
.callout__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:8px}
.callout p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}

/* Inline CTA block inside/after articles */
.cta-band{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:32px 30px;margin:40px 0 8px;text-align:center;
}
.cta-band h3{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.2;margin:0 0 8px;color:#fff}
.cta-band p{margin:0 auto 20px;color:#C9C9C4;font-size:15.5px;max-width:440px;line-height:1.55}
.cta-band .btn--stamp{background:var(--stamp)}
.cta-band .btn--stamp:hover{background:var(--stamp-dk)}
.cta-band small{display:block;margin-top:12px;color:#9CA3AF;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em}

/* Related posts */
.related{max-width:700px;margin:0 auto;padding:8px 24px 72px}
.related__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:600;margin:0 0 16px}
.related__grid{display:grid;gap:14px}
.related__item{
  display:block;padding:18px 20px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.related__item:hover{border-color:var(--ink);text-decoration:none}
.related__item span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);font-weight:600}
.related__item strong{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;margin-top:6px;line-height:1.25}

.back-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13px;color:var(--grey);text-decoration:none;margin-bottom:4px}
.back-link:hover{color:var(--stamp);text-decoration:none}
