/* ==========================================================================
   Horsewood — blog styles (loads after style.css)
   ========================================================================== */

/* Reading progress */
.progress{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:5px; background:transparent; pointer-events:none;
}
.progress__bar{
  height:100%; width:0;
  background:var(--grad-cta);
  transition:width .08s linear;
}

/* Breadcrumbs */
.crumbs{ padding-block:var(--s-3); border-bottom:1px solid var(--border); background:var(--paper-soft); }
.crumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-size:var(--fs-small); font-weight:500;
}
.crumbs li{ display:flex; align-items:center; gap:9px; margin:0; }
.crumbs a{ color:var(--ink); text-decoration:none; font-weight:600; }
.crumbs a:hover{ color:var(--accent-deep); text-decoration:underline; }
.crumbs [aria-current="page"]{ font-weight:500; }
.crumbs svg{ color:var(--ink); flex:none; }

/* Post header */
.post-head{ padding-block:var(--s-6) var(--s-4); }
.post-head h1{ font-size:clamp(30px,4.4vw,48px); margin-bottom:var(--s-3); }
.post-head .lead{ margin-bottom:var(--s-3); }
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 20px;
  font-size:var(--fs-small); font-weight:500;
  padding-top:var(--s-3); border-top:1px solid var(--border);
}
.post-meta span{ display:inline-flex; align-items:center; gap:9px; }
.post-meta svg{ color:var(--accent-deep); flex:none; }

.post-hero{ margin-bottom:var(--s-5); }
.post-hero img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); }

/* Table of contents */
.toc{
  background:var(--paper-soft);
  border:1px solid var(--border);
  border-left:5px solid var(--accent);
  border-radius:var(--radius);
  padding:var(--s-4);
  margin-bottom:var(--s-5);
}
.toc h2{ font-size:20px; margin-bottom:var(--s-2); }
.toc ol{ margin:0; padding-left:1.35em; }
.toc li{ margin-bottom:7px; }
.toc a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:var(--fs-small); }
.toc a:hover{ color:var(--accent-deep); text-decoration:underline; }

/* Article body */
.prose{ max-width:var(--wrap-narrow); margin-inline:auto; }
.prose h2{
  font-size:clamp(26px,3.2vw,34px);
  margin-top:var(--s-6); margin-bottom:var(--s-3);
  scroll-margin-top:140px;
}
.prose h3{ font-size:22px; margin-top:var(--s-4); margin-bottom:12px; }
.prose p,.prose li{ font-size:var(--fs-body); line-height:var(--lh); }
.prose ul,.prose ol{ margin-bottom:var(--s-3); }
.prose li{ margin-bottom:12px; }
.prose img{ border-radius:var(--radius); box-shadow:var(--shadow); margin-block:var(--s-4); }

.prose blockquote{
  margin:var(--s-4) 0; padding:var(--s-3) var(--s-4);
  background:var(--paper-soft);
  border-left:5px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-weight:500;
}
.prose blockquote p{ margin-bottom:0; }

.keytake{
  background:var(--tint);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:var(--s-4);
  margin-block:var(--s-5);
}
.keytake h3{ margin-top:0; display:flex; align-items:center; gap:12px; }
.keytake h3 svg{ color:var(--accent-deep); flex:none; }
.keytake ul{ margin:0; padding-left:1.3em; }
.keytake li{ font-size:var(--fs-small); font-weight:500; margin-bottom:9px; }
.keytake li:last-child{ margin-bottom:0; }

.factbox{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--s-4);
  background:var(--paper);
  box-shadow:var(--shadow);
  margin-block:var(--s-4);
}
.factbox h3{ margin-top:0; }
.factbox table{ width:100%; border-collapse:collapse; }
.factbox th,.factbox td{
  text-align:left; padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:var(--fs-small);
}
.factbox th{ font-weight:700; }
.factbox tr:last-child th,.factbox tr:last-child td{ border-bottom:0; }
.factbox td{ text-align:right; font-weight:600; }

/* In-article CTA */
.post-cta{
  background:var(--grad-dark);
  color:var(--ink-invert);
  border-radius:var(--radius);
  padding:var(--s-5) var(--s-4);
  text-align:center;
  margin-block:var(--s-6);
}
.post-cta h2{ color:var(--ink-invert); margin-top:0; font-size:clamp(25px,3.2vw,34px); }
.post-cta p{ color:var(--ink-invert); }
.post-cta img{
  width:min(220px,60%); margin:0 auto var(--s-3);
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));
  border-radius:0; box-shadow:none;
}
.post-cta__note{ font-size:var(--fs-small); margin-top:var(--s-3); margin-bottom:0; }

/* Prev / next */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3);
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--border);
}
@media (max-width: 700px){ .pager{ grid-template-columns:1fr; } }
.pager a{
  display:block; padding:var(--s-3) var(--s-4);
  border:1px solid var(--border); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); background:var(--paper);
  box-shadow:var(--shadow);
}
.pager a:hover{ border-color:var(--accent); color:var(--ink); }
.pager__dir{
  display:flex; align-items:center; gap:9px;
  font-size:17px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); margin-bottom:9px; line-height:1.5;
}
.pager__next{ text-align:right; }
.pager__next .pager__dir{ justify-content:flex-end; }
.pager__title{ font-weight:700; font-size:var(--fs-small); line-height:1.5; }
.pager__empty{
  padding:var(--s-3) var(--s-4);
  border:1px dashed var(--border); border-radius:var(--radius);
  font-size:var(--fs-small); font-weight:500;
  display:flex; align-items:center;
}

/* Blog index hero */
.blog-hero{ text-align:center; padding-block:var(--s-6); }
.blog-hero h1{ margin-bottom:var(--s-3); }
.blog-hero p{ max-width:680px; margin-inline:auto; }

/* Author / disclosure strip */
.byline{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--s-3) var(--s-4);
  margin-top:var(--s-5);
}
.byline__badge{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:var(--grad-cta); color:var(--ink-invert);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.byline p{ font-size:var(--fs-small); margin:0; }
.byline strong{ display:block; margin-bottom:4px; }