/* ==========================================================================
   Verbatio Blog — shared stylesheet
   Rebuilt directly from the site's real index.html: same @font-face
   declarations, same :root palette, same nav/footer/button/card
   components. Blog-only additions are marked below.
   Used by /blog/index.html and every post in /blog/posts/.
   ========================================================================== */

/* Font paths are relative to THIS file (blog/assets/blog.css), which is
   two levels below the repo root — hence ../../assets/fonts/... */
@font-face{
  font-family:'Source Serif 4'; src: url('../../assets/fonts/SourceSerif4-Regular.ttf') format('truetype');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family:'Inter'; src: url('../../assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family:'IBM Plex Mono'; src: url('../../assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family:'IBM Plex Mono'; src: url('../../assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root{
  /* ---- identical to the main site's palette ---- */
  --ink:#1B2420; --ink-raised:#222D27; --ink-line: rgba(244,239,227,0.09);
  --parchment:#F4EFE3; --parchment-dim:#AEB6A9;
  --paper:#FBF6EC; --paper-ink:#262E2A; --paper-ink-dim:#6E7268; --paper-line: rgba(38,46,42,0.12);
  --brass:#C79552; --brass-strong:#D6A356; --brass-soft: rgba(199,149,82,0.14);
  --teal:#4C6B62; --red:#C1443C;
  --font-display:'Source Serif 4',serif; --font-ui:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--parchment);
  font-family: var(--font-ui); line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{ max-width:1080px; margin:0 auto; padding: 0 28px; }

/* ---------- NAV (copied from the main site) ---------- */
nav{
  position:sticky; top:0; z-index:20;
  background: rgba(27,36,32,0.88); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--ink-line);
}
nav .container{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:32px; height:32px; border-radius:8px; }
.brand span{ font-family: var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.01em; }
.navlinks{ display:flex; gap:32px; font-size:14px; }
.navlinks a{ text-decoration:none; color: var(--parchment-dim); transition: color .15s; }
.navlinks a:hover{ color: var(--parchment); }
.navlinks a.current{ color: var(--parchment); }
.nav-cta{
  background: var(--brass); color:#20160A; padding:10px 20px; border-radius:22px;
  font-weight:600; font-size:13.5px; text-decoration:none; white-space:nowrap;
}

/* ---------- EYEBROW (copied) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--brass); background: var(--brass-soft); border:1px solid rgba(199,149,82,0.3);
  padding:7px 14px; border-radius:20px; margin-bottom:22px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); }

/* ---------- BUTTONS (copied) ---------- */
.btn-primary{
  background: var(--brass); color:#20160A; padding:16px 30px; border-radius:28px;
  font-weight:700; font-size:15px; text-decoration:none; box-shadow: 0 14px 34px rgba(199,149,82,0.24);
  display:inline-flex; align-items:center; gap:10px;
}
.btn-ghost{
  border:1.5px solid var(--ink-line); color:var(--parchment); padding:16px 26px; border-radius:28px;
  font-weight:500; font-size:15px; text-decoration:none;
}

/* ---------- SIGNATURE WAVE DIVIDER (copied) ---------- */
.wave-divider{ display:flex; align-items:flex-end; justify-content:center; gap:5px; height:20px; margin: 60px 0 0 0; opacity:0.5; }
.wave-divider span{ display:block; width:3.5px; background: var(--brass); border-radius:3px; }

/* ---------- PRICING / CTA (copied) ---------- */
.cta-section{ padding: 90px 0 110px 0; text-align:center; }
.section-head{ text-align:center; max-width:560px; margin:0 auto 40px auto; }
.section-label{
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--brass); margin-bottom:14px;
}
h2{ font-family: var(--font-display); font-weight:600; font-size:34px; letter-spacing:-0.01em; margin:0; }
.price-card{
  max-width:420px; margin:0 auto; background: var(--ink-raised); border:1px solid var(--ink-line);
  border-radius:24px; padding: 40px 34px;
}
.price-card .price{ font-family: var(--font-display); font-weight:600; font-size:32px; margin-bottom:6px; }
.price-card .price-note{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.06em; color: var(--parchment-dim); margin-bottom:26px; }
.price-card .btn-primary{ width:100%; justify-content:center; margin-bottom:14px; }
.price-card .fine{ font-size:12.5px; color: var(--parchment-dim); }

/* ---------- FOOTER (copied) ---------- */
footer{ border-top:1px solid var(--ink-line); padding: 40px 0; }
footer .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
footer .fbrand{ display:flex; align-items:center; gap:10px; }
footer .fbrand img{ width:22px; height:22px; border-radius:6px; }
footer .fbrand span{ font-family: var(--font-mono); font-size:12px; color: var(--parchment-dim); }
.flinks{ display:flex; gap:26px; font-size:13px; }
.flinks a{ text-decoration:none; color: var(--parchment-dim); }
.flinks a:hover{ color: var(--parchment); }


/* ==========================================================================
   BLOG-SPECIFIC ADDITIONS BELOW
   Everything above this line mirrors the main site exactly, so the two
   font families, palette, nav, and footer are pixel-consistent.
   ========================================================================== */

/* ---------- Blog listing hero ---------- */
.blog-hero{ padding: 76px 0 30px 0; text-align:center; }
.blog-hero-inner{ max-width:620px; margin:0 auto; }
.blog-hero h1{
  font-family: var(--font-display); font-weight:600; font-size:42px; line-height:1.15;
  letter-spacing:-0.015em; margin:0 0 16px 0;
}
.blog-hero p.sub{ font-size:17px; color: var(--parchment-dim); max-width:480px; margin:0 auto; }

/* ---------- Post list ---------- */
.post-list{ padding: 50px 0 100px 0; }
.post-list-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.post-card{
  display:block; background: var(--ink-raised); border:1px solid var(--ink-line); border-radius:20px;
  padding: 28px 30px; text-decoration:none; transition: border-color .15s;
}
.post-card:hover{ border-color: rgba(199,149,82,0.4); }
.post-card-meta{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:#9C6E30; margin-bottom:10px;
}
.post-card h3{
  font-family: var(--font-display); font-weight:600; font-size:22px; letter-spacing:-0.005em;
  margin:0 0 8px 0; color: var(--parchment);
}
.post-card p{ color: var(--parchment-dim); font-size:14.5px; margin:0; }

/* ---------- Single post hero ---------- */
.post-hero{ padding: 64px 0 0 0; }
.post-hero-inner{ max-width:680px; margin:0 auto; text-align:center; }
.back-link{
  display:inline-block; font-family: var(--font-mono); font-size:12px; letter-spacing:0.04em;
  color: var(--parchment-dim); text-decoration:none; margin-bottom:26px;
}
.back-link:hover{ color: var(--parchment); }
.post-hero h1{
  font-family: var(--font-display); font-weight:600; font-size:40px; line-height:1.18;
  letter-spacing:-0.015em; margin:0 0 18px 0;
}
.post-hero p.dek{ font-size:17px; color: var(--parchment-dim); margin:0 auto 22px auto; }
.post-hero .meta{
  font-family: var(--font-mono); font-size:12px; color: var(--parchment-dim); opacity:0.85;
  display:flex; gap:16px; justify-content:center;
}

/* ---------- The post "document" — styled like the app's own generated
   meeting-minutes card (.minutes-doc on the main site), enlarged into a
   reading surface. This is the blog's one deliberate signature move:
   every post reads as if Verbatio itself produced it. ---------- */
.doc-section{ padding: 46px 0 90px 0; }
.post-doc{
  max-width:720px; margin:0 auto; background: var(--paper); color: var(--paper-ink);
  border-radius:24px; padding: 50px 56px 44px 56px; box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.06);
}
.post-doc .doc-label{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:#9C6E30; margin-bottom:8px;
}

.post-doc h2{
  font-family: var(--font-display); font-weight:600; font-size:24px; color: var(--paper-ink);
  letter-spacing:-0.005em; margin: 42px 0 6px 0; display:flex; align-items:baseline; gap:12px;
}
.post-doc h2:first-of-type{ margin-top:8px; }
.post-doc h2 .kicker{
  font-family: var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:0.08em;
  color:#9C6E30; text-transform:uppercase;
}
.post-doc h3{
  font-family: var(--font-display); font-weight:600; font-size:16.5px; color:#2B322D;
  margin: 22px 0 6px 0;
}
.post-doc p{ font-size:15.5px; color:#3A4038; margin:12px 0; }
.post-doc p.intro{ font-size:16.5px; color: var(--paper-ink); }

.post-doc ul{ list-style:none; padding:0; margin: 14px 0; }
.post-doc ul.checklist li{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:11px; font-size:14.5px; color:#3A4038;
}
.post-doc ul.checklist .chk{
  width:20px; height:20px; border-radius:6px; background: var(--brass-soft); color:var(--brass-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; margin-top:1px;
}

/* ---------- Table — same visual language as the homepage action-table ---------- */
.doc-table-wrap{ overflow-x:auto; margin: 18px 0 8px 0; }
table.doc-table{ width:100%; border-collapse:collapse; }
table.doc-table th{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:#8A8F82; text-align:left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--paper-line);
  white-space:nowrap;
}
table.doc-table td{
  font-family: var(--font-ui); font-size:13.5px; color:#2B322D;
  padding: 12px 12px 12px 0; border-bottom: 1px solid var(--paper-line); vertical-align:top;
}
table.doc-table td strong{ color:#1B2420; }
.status-pill{
  display:inline-block; font-family: var(--font-mono); font-size:10px; letter-spacing:0.04em;
  padding:2px 9px; border-radius:10px; background: rgba(76,107,98,0.14); color:#3C544D;
}

/* ---------- Stat row ---------- */
.stat-row{ display:flex; gap:26px; flex-wrap:wrap; margin: 20px 0 6px 0; }
.stat{ flex:1 1 150px; border-top:2px solid var(--brass); padding-top:10px; }
.stat .num{ font-family: var(--font-display); font-weight:600; font-size:26px; color: var(--paper-ink); }
.stat .label{ font-size:12.5px; color: var(--paper-ink-dim); margin-top:4px; line-height:1.5; }

/* ---------- Callout ---------- */
.callout{
  background: var(--brass-soft); border:1px solid rgba(199,149,82,0.3); border-radius:14px;
  padding: 20px 24px; margin: 26px 0;
}
.callout .callout-label{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:#9C6E30; margin-bottom:6px;
}
.callout p{ margin:0; color:#3A4038; font-size:14.5px; }

/* ---------- Sources / footnote ---------- */
.post-sources{
  max-width:720px; margin: 0 auto; padding: 26px 28px 0 28px; font-size:12.5px; color: var(--parchment-dim);
  line-height:1.6;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .navlinks{ display:none; }
  .blog-hero h1{ font-size:32px; }
  .post-hero h1{ font-size:30px; }
  .post-doc{ padding: 36px 26px 32px 26px; border-radius:18px; }
  .post-doc h2{ font-size:20px; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }