/* ============================================================
   blog.css — wheretoemigrate.io
   Editorial overlay for /blog/ posts.

   Loaded order in templates/blog/blog-passthrough.html:
     1. design-system.final8.css   (tokens)
     2. country-base.css           (article skeleton)
     3. country-redesign.css       (Fraunces + cream + accent)
     4. blog.css                   (THIS FILE — blog-only finishes)

   Why this file exists:
   country-redesign.css covers the article-* classes shared with
   /countries/. The blog-only patterns below are NOT in that file:
     - .hero-blog (short-post variant)
     - .article-author (inline-styled by builder)
     - .related-articles / .related-grid / .related-card
     - .affiliate-tools / .affiliate-grid / .aff-card / .aff-tag
     - .data-sources / .sources
     - .faq-section / .faq-list (long-post FAQ variant)
     - .cta / .cta-secondary / .btn-primary (long-post bottom CTA)
     - .flag-img / .hero-img / .data-table

   Plus a small set of structural unifiers so all 3 hero patterns
   and 3 body wrappers produce the same reading width + rhythm.

   Conventions:
   - Use !important where defeating an inline style; not otherwise.
   - All colors via tokens (var(--cream), var(--ink), var(--accent),
     var(--paper), var(--grey-700), var(--grey-500), var(--grey-100)).
   - max-width: 720px for body prose; 1100px for grids and CTAs.
   ============================================================ */


/* ============================================================
   1.  STRUCTURAL UNIFIERS
   Three hero patterns + three body wrappers all roll up to the
   same reading width and vertical rhythm.
   ============================================================ */

main#main {
  background: var(--cream, #F5F1E8);
  padding-bottom: 96px;
}

/* Hero variants — give each the same outer container behaviour */
.hero-blog,
.article-header,
main#main > header:not(.site-header) {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  text-align: left;
}
@media(max-width:640px){
  .hero-blog,
  .article-header,
  main#main > header:not(.site-header) {
    padding: 32px 20px 16px;
  }
}

/* Bare H1 in long-post header (no .article-header class) */
main#main > header:not(.site-header) h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #0C2E2B);
  text-wrap: balance;
  margin: 0 0 16px;
}

/* Body wrapper unifier — the three patterns are:
     <article class="article-body">       (short)
     <article class="container article-body">  (medium)
     <article>                              (long, no class)
   All should sit in the same column. */
main#main > .container,
main#main > article,
main#main article.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
}
main#main > .container > article.article-body,
main#main > .container > .article-body {
  max-width: none;
  padding: 0;
}
@media(max-width:640px){
  main#main > .container,
  main#main > article,
  main#main article.article-body {
    padding: 0 20px;
  }
}

/* Long-post bare <article> still needs the body type rules */
main#main > article > h2,
main#main > article > p,
main#main > article > ul,
main#main > article > ol {
  max-width: 720px;
}
main#main > article {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--grey-700, #3D4451);
  line-height: 1.7;
}
main#main > article > p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 18px;
}
main#main > article > h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 56px 0 16px;
}
main#main > article > h2 em {
  font-style: italic;
  color: var(--accent, #B5521F);
}
main#main > article > h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
}


/* ============================================================
   2.  HERO-BLOG VARIANT (short-post pattern)
   <section class="hero-blog">
     <div class="container">
       <span class="tag">…</span>
       <h1>…</h1>
       <div class="article-author">…</div>
       <div class="meta"><span>…</span><span>…</span></div>
     </div>
   </section>
   ============================================================ */
.hero-blog {
  background: transparent;
}
.hero-blog > .container {
  max-width: none;
  padding: 0;
}
.hero-blog .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--paper, #FFFFFF);
  color: var(--accent, #B5521F);
  border: 1px solid rgba(12, 46, 43, 0.1);
  font: 600 11px/1 var(--font-body, 'Inter');
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero-blog h1 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #0C2E2B);
  text-wrap: balance;
  margin: 0 0 16px;
}
.hero-blog h1 em {
  font-style: italic;
  color: var(--accent, #B5521F);
}
.hero-blog .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-body, 'Inter');
  font-size: 13px;
  color: var(--grey-500, #6B7280);
  margin-top: 4px;
}
.hero-blog .meta span {
  position: relative;
}
.hero-blog .meta span + span::before {
  content: '·';
  position: absolute;
  left: -12px;
  color: var(--grey-300, #C8CCD2);
}


/* ============================================================
   3.  FLAG IMAGE IN H1 (medium-post pattern)
   <h1><img class="flag-img" …/>Banking in Kuwait …</h1>
   ============================================================ */
h1 .flag-img,
.article-header h1 .flag-img {
  display: inline-block;
  vertical-align: middle;
  width: 38px;
  height: 28px;
  margin-right: 14px;
  margin-bottom: 6px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.15);
  object-fit: cover;
}


/* ============================================================
   4.  HERO IMAGE (long-post pattern)
   <img class="hero-img" …/>
   ============================================================ */
.hero-img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 8px auto 40px;
  border-radius: 14px;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(12, 46, 43, 0.06);
}
@media(max-width:640px){
  .hero-img {
    border-radius: 10px;
    margin: 4px auto 28px;
  }
}


/* ============================================================
   5.  ARTICLE AUTHOR BLOCK
   Builder emits inline-styled grey panel. Defeat with !important.
   <div class="article-author" style="background:#F9FAFB; …">
     <img …/>
     <div>
       <p>By <a>Antonio Mira</a></p>
       <p>Founder · Tracks visa policy …</p>
     </div>
   </div>
   ============================================================ */
.article-author {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 18px 0 28px !important;
  padding: 14px 18px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(12, 46, 43, 0.02);
}
.article-author > img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--cream, #F5F1E8);
}
.article-author > div {
  flex: 1;
  min-width: 0;
}
.article-author p,
.article-author > div > p {
  margin: 0 !important;
  font-family: var(--font-body, 'Inter') !important;
}
.article-author > div > p:first-child {
  font: 600 14px/1.3 var(--font-body, 'Inter') !important;
  color: var(--ink, #0C2E2B) !important;
}
.article-author > div > p:first-child a {
  color: var(--ink, #0C2E2B) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.25) !important;
  padding-bottom: 1px;
}
.article-author > div > p:first-child a:hover {
  border-bottom-color: var(--accent, #B5521F) !important;
  color: var(--accent, #B5521F) !important;
}
.article-author > div > p:nth-child(2),
.article-author > div > p + p {
  font: 400 12px/1.5 var(--font-body, 'Inter') !important;
  color: var(--grey-500, #6B7280) !important;
  margin-top: 2px !important;
}


/* ============================================================
   6.  KEY-TAKEAWAY — defeat pre-redesign blue inline styles
   Long post emits:
     <div class="key-takeaway" style="background:var(--primary-light,#e8f5e9);
       border-left:4px solid var(--primary,#2563EB);…">
   The inline border-left:4px var(--primary,#2563EB) bypasses
   country-redesign.css. Force the brand orange.
   ============================================================ */
.key-takeaway[style] {
  background: var(--paper, #FFFFFF) !important;
  border: none !important;
  border-left: 3px solid var(--accent, #B5521F) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 32px !important;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04) !important;
}
.key-takeaway[style] strong {
  color: var(--accent, #B5521F) !important;
  font: 600 11px/1 var(--font-body, 'Inter') !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}


/* ============================================================
   7.  DATA TABLE (medium-post variant)
   <table class="data-table">
     <thead><tr><th>Feature</th><th>Details</th></tr></thead>
     <tbody>…</tbody>
   </table>
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(12, 46, 43, 0.04);
}
.data-table th {
  background: var(--cream, #F5F1E8);
  font: 600 11px/1.3 var(--font-body, 'Inter');
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-700, #3D4451);
  padding: 14px;
  text-align: left;
  border-bottom: 2px solid rgba(12, 46, 43, 0.1);
}
.data-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06);
  color: var(--ink, #0C2E2B);
  vertical-align: top;
  line-height: 1.5;
}
.data-table tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   8.  FAQ — long-post variant (.faq-section + .faq-list)
   Long post emits <details> with hardcoded inline styles. Strip
   them and re-style to match the redesigned .faq-item pattern.
   ============================================================ */
.faq-section,
section.faq-section {
  margin: 56px auto !important;
  max-width: 720px;
  padding: 0 24px;
}
.faq-section > h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.faq-list {
  border-top: 1px solid rgba(12, 46, 43, 0.08);
}
.faq-list > details[style] {
  border: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.08) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.faq-list > details[style] > summary[style] {
  padding: 22px 0 !important;
  font: 500 17px/1.3 var(--font-display, 'Fraunces', Georgia, serif) !important;
  color: var(--ink, #0C2E2B) !important;
  letter-spacing: -0.01em !important;
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
.faq-list > details[style] > summary[style]::-webkit-details-marker {
  display: none;
}
.faq-list > details[style] > summary[style]::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--accent, #B5521F);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-list > details[open][style] > summary[style]::after {
  content: '\2212';
}
.faq-list > details[style] > summary[style]:hover {
  color: var(--accent, #B5521F) !important;
}
.faq-list > details[style] > p,
.faq-list > details[style] > div {
  font-family: var(--font-body, 'Inter') !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--grey-700, #3D4451) !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
}


/* ============================================================
   9.  RELATED ARTICLES / RELATED PAGES
   <section class="related-articles"> or <div class="related-articles">
     <h3>…</h3>
     <div class="related-grid">
       <a class="related-card" href="…">
         <span class="related-card__title">…</span>
         <span class="related-card__arrow">→</span>
       </a>
     </div>
   </section>
   ============================================================ */
.related-articles,
.related-pages {
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 24px;
}
.related-articles h3,
.related-pages h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.related-card {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.08);
  border-radius: 10px;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(12, 46, 43, 0.08) !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.related-card:hover {
  border-color: var(--accent, #B5521F) !important;
  background: rgba(181, 82, 31, 0.02);
  transform: translateY(-1px);
}
.related-card__title {
  font: 500 14px/1.4 var(--font-body, 'Inter');
  color: var(--ink, #0C2E2B);
  flex: 1;
}
.related-card__arrow {
  font-size: 18px;
  color: var(--accent, #B5521F);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.related-card:hover .related-card__arrow {
  transform: translateX(2px);
}

/* Related-pages list variant */
.related-pages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}
.related-pages li {
  margin: 0;
}
.related-pages a {
  display: block;
  padding: 10px 14px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 8px;
  font: 500 13px/1.4 var(--font-body, 'Inter');
  color: var(--ink, #0C2E2B);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06);
}
.related-pages a:hover {
  border-color: var(--accent, #B5521F);
  color: var(--accent, #B5521F);
}


/* ============================================================
   10.  AFFILIATE TOOLS (long-post)
   <div class="affiliate-tools">
     <h3>Tools we recommend</h3>
     <p>…</p>
     <div class="affiliate-grid">
       <a class="aff-card" href="…">
         <strong>Wise</strong>
         <span>…</span>
         <div class="aff-tag">Money transfers</div>
       </a>
     </div>
     <p class="aff-disc">Affiliate disclosure: …</p>
   </div>
   ============================================================ */
.affiliate-tools {
  max-width: 720px;
  margin: 56px auto;
  padding: 28px 24px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 14px;
}
.affiliate-tools > h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.affiliate-tools > p {
  font-size: 14px;
  color: var(--grey-500, #6B7280);
  margin: 0 0 20px;
}
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.aff-card {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--cream, #F5F1E8);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color 0.15s, transform 0.15s;
  border-bottom: 1px solid rgba(12, 46, 43, 0.06) !important;
}
.aff-card:hover {
  border-color: var(--accent, #B5521F) !important;
  transform: translateY(-1px);
}
.aff-card strong {
  font: 600 14px/1 var(--font-body, 'Inter');
  color: var(--ink, #0C2E2B);
}
.aff-card span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-700, #3D4451);
}
.aff-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.08);
  border-radius: 999px;
  font: 500 11px/1.4 var(--font-body, 'Inter');
  color: var(--grey-500, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aff-disc {
  font: 400 12px/1.5 var(--font-body, 'Inter');
  color: var(--grey-500, #6B7280);
  margin: 0;
  font-style: italic;
}


/* ============================================================
   11.  DATA SOURCES BLOCK
   Builder emits inline-styled grey #F2F3F5 box. Quiet it.
   <div class="data-sources" style="background:#F2F3F5">
   ============================================================ */
.data-sources[style] {
  margin: 32px auto !important;
  max-width: 720px;
  padding: 22px 24px !important;
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 12px !important;
  font-family: var(--font-body, 'Inter') !important;
  font-size: 13px !important;
  color: var(--grey-700, #3D4451) !important;
}
.data-sources h3,
.data-sources[style] h3 {
  font: 600 11px/1 var(--font-body, 'Inter') !important;
  color: var(--accent, #B5521F) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 10px !important;
}
.data-sources ul,
.data-sources[style] ul {
  margin: 0 !important;
  padding-left: 18px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.data-sources a,
.data-sources[style] a {
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25);
}
.data-sources p,
.data-sources[style] p {
  font-size: 12px !important;
  color: var(--grey-500, #6B7280) !important;
  margin: 8px 0 0 !important;
}


/* ============================================================
   12.  OFFICIAL SOURCES (long-post)
   <section class="sources">
     <h2>Official Sources</h2>
     <ul>…</ul>
   </section>
   ============================================================ */
section.sources {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 24px;
}
section.sources h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #0C2E2B);
  margin: 0 0 16px;
}
section.sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
section.sources li {
  padding: 10px 14px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(12, 46, 43, 0.06);
  border-radius: 8px;
  font-size: 14px;
}
section.sources a {
  color: var(--accent, #B5521F);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25);
}


/* ============================================================
   13.  SECONDARY CTA (long-post)
   <section class="cta">
     <h2>Find Your Best Country to Emigrate</h2>
     <p>…</p>
     <a class="btn-primary" href="/assess">Get Your Free Verdict</a>
     <p class="cta-secondary">Already completed …</p>
   </section>
   ============================================================ */
section.cta {
  max-width: 1100px;
  margin: 56px auto;
  padding: 48px 36px;
  background: var(--ink, #0C2E2B);
  border-radius: 14px;
  text-align: center;
  color: var(--paper, #FFFFFF);
}
section.cta h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(24px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--paper, #FFFFFF) !important;
  margin: 0 0 12px !important;
  text-align: center !important;
}
section.cta > p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 22px;
}
section.cta .btn-primary,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--accent, #B5521F);
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none !important;
  font: 600 15px/1 var(--font-body, 'Inter');
  transition: background 0.15s, transform 0.15s;
  border-bottom: none !important;
}
section.cta .btn-primary:hover,
.btn-primary:hover {
  background: var(--accent-hover, #9A4519);
  transform: translateY(-1px);
}
.cta-secondary {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.cta-secondary a {
  color: var(--paper, #FFFFFF) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding-bottom: 1px;
  text-decoration: none !important;
}
.cta-secondary a:hover {
  border-bottom-color: var(--paper, #FFFFFF) !important;
}


/* ============================================================
   14.  ARTICLE-CTA — defeat long-post inline override
   Long post forces:
     <div class="article-cta" style="background:var(--primary,#1A5C50);…">
       <a class="btn" style="background:#fff;color:var(--primary,#1A5C50)">
   country-redesign.css already sets .article-cta but inline wins.
   ============================================================ */
.article-cta[style] {
  background: var(--ink, #0C2E2B) !important;
  border-radius: 14px !important;
  padding: 44px 36px !important;
  margin: 48px auto !important;
  max-width: 1100px !important;
  text-align: center !important;
  color: var(--paper, #FFFFFF) !important;
}
.article-cta[style] h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--paper, #FFFFFF) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
}
.article-cta[style] p {
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 0 22px !important;
  font-size: 15px !important;
}
.article-cta[style] .btn,
.article-cta[style] a.btn[style] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  background: var(--accent, #B5521F) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font: 600 15px/1 var(--font-body, 'Inter') !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: background 0.15s, transform 0.15s !important;
}
.article-cta[style] .btn:hover,
.article-cta[style] a.btn[style]:hover {
  background: var(--accent-hover, #9A4519) !important;
  transform: translateY(-1px) !important;
}


/* ============================================================
   15.  INLINE "RELATED" FOOTER STRIP
   Short post emits <div style="background:#f9fafb"><strong>Related:</strong> …</div>
   Quiet the inline grey, reuse cream + accent.
   ============================================================ */
main#main article.article-body > div[style*="background:#f9fafb"],
main#main article.article-body > div[style*="background:#F9FAFB"] {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid rgba(12, 46, 43, 0.06) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  margin: 32px 0 0 !important;
}
main#main article.article-body > div[style*="background:#f9fafb"] a,
main#main article.article-body > div[style*="background:#F9FAFB"] a {
  color: var(--accent, #B5521F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181, 82, 31, 0.25);
}


/* ============================================================
   16.  SHARE ROW (long-post inline) — hide
   <div style="display:flex;gap:8px;margin-top:32px;padding-top:16px;border-top:1px solid rgba(0,0,0,0.1)"><span>Share:</span>…</div>
   We chose not to support share buttons in v1 (audit decision).
   Hide the row visually but keep DOM intact in case JS hooks
   exist somewhere.
   ============================================================ */
main#main > article > div[style*="border-top:1px solid rgba(0,0,0,0.1)"]:has(> span:first-child) {
  display: none !important;
}


/* ============================================================
   17.  PROSE POLISH — first paragraph emphasis + blockquote
   ============================================================ */
main#main article.article-body > p:first-of-type,
main#main > article > p:first-of-type {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink, #0C2E2B);
}
main#main article.article-body blockquote,
main#main > article blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent, #B5521F);
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink, #0C2E2B);
}
main#main article.article-body ul,
main#main article.article-body ol,
main#main > article > ul,
main#main > article > ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
main#main article.article-body li,
main#main > article > ul li,
main#main > article > ol li {
  margin-bottom: 6px;
  line-height: 1.65;
}


/* ============================================================
   18.  META LINE ("Last updated…")
   ============================================================ */
main#main > article p.meta,
.article-body p.meta {
  font: 400 13px/1.5 var(--font-body, 'Inter');
  color: var(--grey-500, #6B7280);
  margin: 0 0 24px;
  font-style: italic;
}


/* ============================================================
   19.  MOBILE FINISHES
   ============================================================ */
@media(max-width:640px) {
  .hero-blog h1,
  main#main > header:not(.site-header) h1 {
    font-size: 28px;
  }
  main#main > article > h2 {
    font-size: 22px;
    margin: 40px 0 12px;
  }
  .article-author {
    flex-direction: row !important;
    padding: 12px 14px !important;
  }
  .article-author > div > p:first-child {
    font-size: 13px !important;
  }
  .article-author > div > p:nth-child(2) {
    font-size: 11px !important;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  section.cta,
  .article-cta[style] {
    padding: 32px 22px !important;
  }
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2026-05-07 — extracted from /blog/index.html inline styles (was 1180+ inline duplicates) */
.bcat-group{margin-bottom:16px;border:1px solid rgba(12,46,43,0.08);border-radius:8px;padding:16px 20px;background:var(--cream,#F5F1E8)}
.bcat-summary{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink);cursor:pointer;list-style:revert}
.bcat-count{color:var(--grey-500);font-weight:400;font-size:14px;font-family:var(--font-body)}
.bcat-grid{list-style:none;padding:16px 0 0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px}
.bcat-li{margin-bottom:6px}
.bcat-link{font:400 13px/1.4 var(--font-body);color:var(--ink);text-decoration:none;display:block;padding:4px 0;border-bottom:1px dotted rgba(12,46,43,0.08)}
.bcat-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.bcat-topic-link{font:500 14px/1.5 var(--font-body),system-ui,sans-serif;color:var(--primary);text-decoration:none}
.bcat-topic-link:hover{color:var(--accent)}