/* ============================================================================
   BLOG - index grid, filtering UI, article layout, TOC, share & author.
   Extends assets/css/main.css. All text is navy or a navy tint - never black.
   ========================================================================== */

/* ---- 1. READING PROGRESS BAR --------------------------------------------- */
.read-progress{
  position:fixed;top:0;left:0;right:0;z-index:150;
  height:3px;pointer-events:none;
  background:rgba(25,36,81,.06);
  opacity:0;transition:opacity var(--t-med);
}
.read-progress.show{opacity:1}
.read-progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);
  box-shadow:0 0 12px rgba(96,36,149,.45);
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  .read-progress{transition:none}
}

/* ---- 2. BLOG HERO (editorial) --------------------------------------------- */
.blog-hero{
  position:relative;overflow:clip;
  padding:calc(var(--header-h) + clamp(1.2rem,2.5vw,2rem)) 0 clamp(2rem,4vw,3rem);
  background:var(--bg-cream);
}
.blog-hero>*{position:relative;z-index:1}
.blog-hero>.container{position:relative;z-index:1}
.blog-hero h1{max-width:18ch}
.blog-hero .lead{max-width:58ch;margin-top:1.1rem}
.blog-hero-grid{display:grid;gap:2rem;align-items:end}
@media(min-width:900px){
  .blog-hero-grid{grid-template-columns:1.35fr .65fr;gap:3rem}
}
.blog-hero-aside{
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.4rem 1.5rem;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.blog-hero-aside p{font-size:var(--fs-small);line-height:1.6}
.blog-hero-aside .byline{
  display:flex;align-items:center;gap:.75rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.blog-hero-aside .byline img{width:46px;height:46px;flex:none}
.blog-hero-aside .byline b{display:block;font-size:var(--fs-small);color:var(--ink)}
.blog-hero-aside .byline span{display:block;font-size:var(--fs-tiny);color:var(--ink-faint)}

/* ---- 3. TOOLBAR: SEARCH + CATEGORY PILLS ---------------------------------- */
.blog-toolbar{
  position:relative;z-index:2;
  display:grid;gap:1.1rem;
  padding-block:clamp(1.6rem,3vw,2.2rem);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.blog-toolbar-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
}
.blog-search{position:relative;flex:1 1 320px;max-width:30rem}
.blog-search svg{
  position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-faint);pointer-events:none;
}
.blog-search input{
  width:100%;padding:.92rem 2.9rem .92rem 3rem;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:1rem;color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.blog-search input::placeholder{color:var(--ink-faint)}
.blog-search input:focus{
  outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(96,36,149,.12);
}
.blog-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.blog-search-clear{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;display:none;place-items:center;
  background:var(--bg-soft);color:var(--ink-soft);
  transition:background-color var(--t-fast),color var(--t-fast);
}
.blog-search-clear svg{position:static;transform:none;width:14px;height:14px;color:inherit}
.blog-search-clear:hover{background:var(--purple-tint);color:var(--purple)}
.blog-search.has-value .blog-search-clear{display:grid}

.cat-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1.05rem;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid var(--line-strong);
  font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);
  transition:border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.cat-pill:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cat-pill[aria-pressed="true"]{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(96,36,149,.26);
}
.cat-pill[aria-pressed="true"]:hover{color:#fff}
.cat-pill .n{
  font-size:.72rem;font-weight:700;padding:.1rem .42rem;border-radius:var(--r-pill);
  background:rgba(25,36,81,.07);color:var(--ink-soft);
}
.cat-pill[aria-pressed="true"] .n{background:rgba(255,255,255,.22);color:#fff}

.blog-count{
  font-size:var(--fs-small);color:var(--ink-faint);font-weight:500;margin:0;
}
.blog-count b{color:var(--ink);font-weight:650}

/* ---- 4. POST CARDS -------------------------------------------------------- */
.post-grid{
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20.5rem),1fr));
}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(96,36,149,.2)}
.post-card__media{position:relative;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/10}
.post-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-card__body{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:1.5rem 1.5rem 1.6rem}
.post-card h3{font-size:1.22rem;line-height:1.25;margin:0}
.post-card:hover h3{color:var(--purple)}
.post-card p{font-size:var(--fs-small);line-height:1.6;margin:0}
.post-card__foot{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin-top:auto;padding-top:1.1rem;
  font-size:var(--fs-tiny);color:var(--ink-faint);font-weight:550;
}
.post-card__foot .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);opacity:.6}
.post-card__arrow{
  margin-left:auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--purple-tint);color:var(--purple);
  transition:transform .35s var(--ease-spring),background-color var(--t-fast),color var(--t-fast);
}
.post-card__arrow svg{width:14px;height:14px}
.post-card:hover .post-card__arrow{background:var(--grad);color:#fff;transform:translate(3px,-2px)}

/* category chip */
.post-cat{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .72rem;border-radius:var(--r-pill);
  background:var(--purple-tint);color:var(--purple);
}
.post-cat--blue{background:var(--blue-tint);color:var(--blue-dark)}
.post-cat--light{background:rgba(255,255,255,.16);color:#fff}

/* ---- 5. FEATURED (wide card) ---------------------------------------------- */
.post-feature{
  display:grid;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
@media(min-width:860px){
  .post-feature{grid-template-columns:1.05fr .95fr;align-items:stretch}
}
.post-feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:rgba(96,36,149,.2)}
.post-feature__media{position:relative;overflow:hidden;background:var(--bg-soft);min-height:16rem}
.post-feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post-feature:hover .post-feature__media img{transform:scale(1.04)}
.post-feature__flag{
  position:absolute;top:1.1rem;left:1.1rem;z-index:1;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .85rem;border-radius:var(--r-pill);
  background:rgba(25,36,81,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.post-feature__flag svg{width:13px;height:13px}
.post-feature__body{
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;
  padding:clamp(1.8rem,3.4vw,2.8rem);
}
.post-feature__body h2{font-size:clamp(1.6rem,2.7vw,2.15rem);margin:0}
.post-feature:hover .post-feature__body h2{color:var(--purple)}
.post-feature__body p{margin:0}
.post-feature__foot{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin-top:auto;padding-top:1.2rem;width:100%;
  font-size:var(--fs-tiny);color:var(--ink-faint);font-weight:550;
}
.post-feature__foot .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);opacity:.6}
.post-feature .btn--ghost{margin-top:.3rem}

/* ---- 6. EMPTY / NO-RESULTS ------------------------------------------------ */
.blog-empty{
  display:grid;justify-items:center;text-align:center;gap:.7rem;
  padding:clamp(3rem,7vw,5rem) 1.5rem;
  background:var(--bg-soft);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
}
.blog-empty .ic{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--purple-tint);color:var(--purple);margin-bottom:.4rem;
}
.blog-empty .ic svg{width:26px;height:26px}
.blog-empty h3{margin:0}
.blog-empty p{max-width:38ch;margin:0}
.blog-empty .btn{margin-top:.8rem}
[hidden]{display:none !important}

/* ---- 7. ARTICLE HERO ------------------------------------------------------ */
.article-hero{
  position:relative;overflow:clip;
  padding:calc(var(--header-h) + clamp(1rem,2vw,1.6rem)) 0 clamp(1.8rem,3.5vw,2.6rem);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),var(--bg-cream);
}
.article-hero>.container{position:relative;z-index:1}
.article-hero h1{max-width:20ch;margin-top:1rem;font-size:clamp(2.05rem,4.1vw,3.05rem)}
.article-hero .lead{max-width:56ch;margin-top:1.15rem}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-top:1.6rem;font-size:var(--fs-small);color:var(--ink-faint);font-weight:550;
}
.article-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);opacity:.6}
.article-meta time{color:var(--ink-soft)}
.article-meta .by{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft)}
.article-meta .by img{width:30px;height:30px;flex:none}
.article-meta .by b{font-weight:650;color:var(--ink)}

.article-figure{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  background:var(--bg-soft);aspect-ratio:16/7;
}
.article-figure img{width:100%;height:100%;object-fit:cover}

/* ---- 8. ARTICLE LAYOUT (prose + sticky TOC) -------------------------------- */
.article-layout{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
@media(min-width:1000px){
  .article-layout{grid-template-columns:minmax(0,1fr) 17rem}
}
.article-body{min-width:0}
.article-body .prose{max-width:44rem}
.article-body .prose>*:first-child{margin-top:0}
.article-body .prose h2{scroll-margin-top:7.5rem}
.article-body .prose h3{scroll-margin-top:7.5rem}
.article-body .prose li{color:var(--ink-soft)}
.article-body .prose li>strong{color:var(--ink)}
.article-body .prose .pill-note{margin:1.7rem 0}
.article-body .prose hr.fancy{margin:2.2rem 0}
.article-body .prose table th,.article-body .prose table td{font-size:var(--fs-small)}
.article-body .prose .table-wrap{margin:1.6rem 0}

/* intro paragraph gets a touch more presence */
.prose .lede{font-size:1.15rem;line-height:1.65;color:var(--ink-soft)}

/* pull quote */
.prose blockquote.pull-quote{
  position:relative;
  margin:2.2rem 0;padding:1.6rem 1.7rem 1.6rem 3.4rem;
  border-left:0;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(96,36,149,.07),rgba(56,145,254,.07));
  font-size:1.22rem;line-height:1.45;
}
.prose blockquote.pull-quote::before{
  content:"\201C";position:absolute;left:1.1rem;top:.55rem;
  font-family:var(--font-display);font-size:3.4rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.prose blockquote.pull-quote cite{
  display:block;margin-top:.8rem;font-style:normal;font-family:var(--font-body);
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);
}

/* table of contents */
.toc{position:sticky;top:7rem}
@media(max-width:999px){
  .toc{position:static;top:auto;margin-bottom:.5rem}
}
.toc-inner{
  padding:1.3rem 1.4rem;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
}
.toc-title{
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--fs-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.9rem;
}
.toc-title svg{width:15px;height:15px;color:var(--purple)}
.toc-list{display:grid;gap:.1rem;max-height:min(62vh,34rem);overflow-y:auto}
.toc-list a{
  display:block;position:relative;
  padding:.42rem .2rem .42rem .95rem;
  font-size:.885rem;line-height:1.45;color:var(--ink-soft);font-weight:500;
  border-radius:.35rem;
  transition:color var(--t-fast),background-color var(--t-fast);
}
.toc-list a::before{
  content:"";position:absolute;left:0;top:.62rem;bottom:.62rem;width:2px;border-radius:2px;
  background:var(--line-strong);transition:background var(--t-fast),top var(--t-fast),bottom var(--t-fast);
}
.toc-list a:hover{color:var(--purple);background:rgba(96,36,149,.05)}
.toc-list a.is-current{color:var(--purple);font-weight:650}
.toc-list a.is-current::before{background:var(--grad);top:.3rem;bottom:.3rem}
.toc-foot{
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.5;
}
.toc-foot a{color:var(--purple);font-weight:600}

/* ---- 9. SHARE ROW --------------------------------------------------------- */
.share-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.share-row .share-label{
  font-size:var(--fs-tiny);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:.3rem;
}
.share-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.05rem;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid var(--line-strong);
  font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.share-btn svg{width:16px;height:16px}
.share-btn:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.share-btn.is-copied{border-color:var(--success);color:var(--success)}
.share-toast{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-tiny);font-weight:600;color:var(--success);
  opacity:0;transform:translateY(4px);transition:opacity var(--t-fast),transform var(--t-fast);
}
.share-toast svg{width:14px;height:14px}
.share-toast.show{opacity:1;transform:none}

/* ---- 10. AUTHOR BOX ------------------------------------------------------- */
.author-box{
  display:grid;gap:1.3rem;align-items:start;
  margin-top:2.4rem;padding:clamp(1.5rem,3vw,2rem);
  background:var(--bg-lavender);border:1px solid var(--line);border-radius:var(--r-xl);
}
@media(min-width:640px){
  .author-box{grid-template-columns:auto 1fr;gap:1.6rem}
}
.author-box__photo{
  width:118px;height:118px;border-radius:var(--r-lg);object-fit:cover;object-position:center 22%;
  border:3px solid #fff;box-shadow:var(--shadow-md);
}
.author-box__eyebrow{
  font-size:var(--fs-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);display:block;margin-bottom:.35rem;
}
.author-box h3{margin:0 0 .15rem}
.author-box .role{font-size:var(--fs-small);color:var(--ink-faint);font-weight:550;margin:0 0 .7rem}
.author-box p{font-size:var(--fs-small);line-height:1.65;margin:0 0 1rem}
.author-box__actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---- 11. RELATED POSTS ---------------------------------------------------- */
.related-grid{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));
}
.related-card{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.4rem 1.5rem 1.5rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.related-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:rgba(96,36,149,.2)}
.related-card h3{font-size:1.08rem;line-height:1.3;margin:0}
.related-card:hover h3{color:var(--purple)}
.related-card p{font-size:var(--fs-small);line-height:1.55;margin:0}
.related-card .related-meta{
  margin-top:auto;padding-top:.9rem;
  font-size:var(--fs-tiny);color:var(--ink-faint);font-weight:550;
  display:flex;align-items:center;gap:.5rem;
}
.related-card .related-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);opacity:.6}