/* Ledger theme overlay for /blog/ pages — loaded after tailwind.css.
   Remaps existing Tailwind utility classes to the site's ledger palette
   so article markup/copy doesn't need to change per-post. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#12211F; --paper:#F6F1E6; --paper-2:#EEE6D4;
  --deep:#0D2321; --deep-2:#12312E;
  --brass:#C6963E; --brass-light:#E8C77E; --teal:#3F6E64; --white:#FDFBF5;
  --line: rgba(246,241,230,0.14); --line-dark: rgba(18,33,31,0.12);
  --rust:#A8572C;
}

body.bg-white{ background:var(--paper) !important; color:var(--ink) !important; font-family:'Inter',sans-serif !important; }

h1,h2,h3{ font-family:'Fraunces',serif !important; }

a{ text-decoration:none; }

/* brand wordmark, used in place of the old <img> logo */
.brand{ font-family:'Fraunces',serif; font-weight:600; font-size:20px; letter-spacing:.01em; color:var(--white); }
.brand span{ color:var(--brass-light); }

/* minimal article nav */
.blog-nav{ position:sticky; top:0; z-index:50; background:var(--deep); border-bottom:1px solid var(--line); }
.blog-nav-inner{ max-width:1120px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; }
.blog-nav-links{ display:flex; align-items:center; gap:22px; }
.blog-nav-links a{ color:rgba(253,251,245,.72); font-size:13.5px; font-weight:500; }
.blog-nav-links a:hover{ color:var(--brass-light); }
.blog-nav-links .btn-small{ display:inline-flex; align-items:center; gap:10px; background:var(--brass); color:var(--deep); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; padding:10px 10px 10px 18px; border-radius:2px; transition:background .15s ease, transform .15s ease; }
.blog-nav-links .btn-small:hover{ background:var(--brass-light); color:var(--deep); transform:translateY(-1px); }
.blog-nav-links .btn-small .arrow{ background:var(--ink); color:var(--brass); width:22px; height:22px; flex-shrink:0; border-radius:1px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; line-height:1; }

/* article footer */
.blog-footer{ background:#0A1917; color:rgba(253,251,245,.55); padding:44px 0; font-size:13px; margin-top:64px !important; }
.blog-footer-inner{ max-width:1120px; margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.blog-footer-inner a:hover{ color:var(--white); }

/* eyebrow / category label */
.text-brand-500{ color:var(--brass) !important; font-family:'IBM Plex Mono',monospace; }
.text-brand-600{ color:var(--brass) !important; }
a.text-brand-600:hover, .hover\:text-brand-600:hover{ color:var(--brass-light) !important; }

/* dark ink / deep-teal blocks (TL;DR box, numbered badges) */
.text-navy-900{ color:var(--ink) !important; }
.bg-navy-900{ background:var(--deep) !important; }
.bg-navy-950{ background:#0A1917 !important; }
.hover\:bg-navy-950:hover{ background:#0A1917 !important; }
.hover\:text-navy-900:hover{ color:var(--ink) !important; }

/* brass accents */
.bg-brand-500{ background:var(--brass) !important; }
.hover\:bg-brand-600:hover{ background:var(--brass-light) !important; }
.bg-brand-50{ background:rgba(198,150,62,.10) !important; }
.border-brand-500\/20{ border-color:rgba(198,150,62,.30) !important; }

/* muted ink tones in place of gray scale */
.text-gray-400{ color:rgba(18,33,31,.5) !important; }
.text-gray-500{ color:rgba(18,33,31,.62) !important; }
.text-gray-600{ color:rgba(18,33,31,.74) !important; }
.text-gray-800{ color:var(--ink) !important; }
.bg-gray-50{ background:var(--paper-2) !important; }
.border-gray-100, .border-gray-200{ border-color:var(--line-dark) !important; }

/* soft "what it can't do" negative markers, retoned to fit the palette */
.bg-red-100{ background:rgba(168,87,44,.12) !important; }
.text-red-600{ color:var(--rust) !important; }

/* white text inside dark cards stays legible */
.text-white\/80{ color:rgba(253,251,245,.8) !important; }

@media print{
  .blog-nav, .blog-footer{ background:none !important; }
}