/* =========================================================================
   Shiv Shakti — the journal (/blog and /blog/{slug})

   Builds only on the tokens in css/common.css and the page furniture in
   css/pages.css (.pg-hero, .pg-sec, .prose, .qa, .pill, .reveal). Nothing
   here is needed by any other page, so it is loaded only on the two blog
   views.

   Pair with:  <link rel="stylesheet" href="/css/pages.css">
               <link rel="stylesheet" href="/css/blog.css">
               <script src="/js/pages.js" defer></script>   (reveal + TOC spy)
               <script src="/js/blog.js"  defer></script>   (progress + share)
   ========================================================================= */

/* ===================== Topic bar ===================== */
.blog-bar{
  position:relative; z-index:5;
  background:var(--cream-050); border-bottom:1px solid var(--line);
}
.blog-bar-in{
  display:flex; align-items:center; gap:18px;
  padding:14px 0; min-width:0;
}
.blog-chips{
  display:flex; gap:9px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none; padding:2px 0;
}
.blog-chips::-webkit-scrollbar{display:none;}
.blog-chip{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  border:1px solid var(--line); background:var(--cream-050); color:var(--ink-soft);
  padding:9px 16px; border-radius:999px; font-size:.82rem; font-weight:600; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--pg-ease);
}
.blog-chip i{font-size:.76rem; color:var(--gold-600); transition:color .25s;}
.blog-chip .n{
  font-size:.7rem; font-weight:700; color:#a99b8f;
  background:var(--paper); border-radius:999px; padding:1px 7px;
}
.blog-chip:hover{border-color:var(--gold-500); color:var(--maroon-700); transform:translateY(-2px);}
.blog-chip.is-on{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--cream-100);}
.blog-chip.is-on i{color:var(--gold-300);}
.blog-chip.is-on .n{background:rgba(255,255,255,.16); color:var(--gold-200,#f3e2b4);}

.blog-search{position:relative; flex:none; width:250px;}
.blog-search > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#a08a72; font-size:.82rem;}
.blog-search input{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:11px 16px 11px 40px;
  font-family:inherit; font-size:.85rem; background:var(--paper); color:var(--ink);
}
.blog-search input:focus{border-color:var(--maroon-500); background:var(--cream-050); outline:none;}

/* ===================== Featured (lead) post ===================== */
.blog-lead{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,3.6vw,56px); align-items:center;
  padding:clamp(30px,3.4vw,44px);
  background:linear-gradient(150deg,var(--maroon-950),var(--maroon-800) 62%,var(--maroon-900));
  border:1px solid rgba(217,176,74,.3); border-radius:var(--radius-l);
  position:relative; overflow:hidden; isolation:isolate;
}
.blog-lead::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:radial-gradient(circle at 88% 14%,rgba(232,200,118,.24),transparent 52%);
}
.blog-lead-media{position:relative;}
.blog-lead-media .in{
  position:relative; overflow:hidden; border-radius:calc(var(--radius-l) - 4px);
  border:1px solid rgba(217,176,74,.4); background:var(--maroon-900);
}
.blog-lead-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/11; transition:transform 1.1s var(--pg-ease);}
.blog-lead:hover .blog-lead-media img{transform:scale(1.04);}
.blog-lead-media .in::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,transparent 52%,rgba(40,5,9,.55));
}
.blog-lead-ribbon{
  position:absolute; z-index:2; top:16px; left:16px;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); color:var(--maroon-950);
  font-size:.74rem; font-weight:700; letter-spacing:.04em;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);
}
.blog-lead-copy .kicker{
  font-family:var(--serif); font-style:italic; color:var(--gold-300); font-size:1.02rem; margin:0 0 10px;
}
.blog-lead-copy h2{
  font-family:var(--display); font-weight:600; line-height:1.18; margin:0 0 14px;
  font-size:clamp(1.5rem,2.7vw,2.15rem); color:#f6e8c4; text-wrap:balance;
}
.blog-lead-copy h2 a:hover{color:var(--gold-300);}
.blog-lead-copy p{color:#d9c6ad; font-size:.96rem; line-height:1.8; margin:0 0 22px; max-width:56ch;}
.blog-lead-copy .btn{margin-top:4px;}

/* ===================== List + sidebar ===================== */
.blog-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 322px;
  gap:clamp(28px,3.4vw,52px); align-items:start;
}
.blog-layout > *{min-width:0;}

.blog-head-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px;
  margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.blog-head-row h2{font-family:var(--display); font-size:1.32rem; color:var(--ink); margin:0;}
.blog-head-row .count{font-size:.84rem; color:var(--ink-soft);}

.post-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2vw,28px);}
.post-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ===================== Post card ===================== */
.post-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l);
  transition:transform .4s var(--pg-ease), box-shadow .4s, border-color .4s;
}
.post-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background:linear-gradient(90deg,var(--gold-500),var(--maroon-600));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--pg-ease);
}
.post-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(58,10,17,.55); border-color:rgba(217,176,74,.7);}
.post-card:hover::before{transform:scaleX(1);}

.post-thumb{position:relative; background:var(--paper);}
.post-thumb-link{display:block; overflow:hidden;}
.post-thumb img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; transition:transform .8s var(--pg-ease);}
.post-card:hover .post-thumb img{transform:scale(1.06);}
.post-thumb::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(190deg,transparent 58%,rgba(40,5,9,.42));
}
.post-cat{
  position:absolute; z-index:2; left:14px; bottom:14px; max-width:calc(100% - 28px);
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:rgba(40,5,9,.72); border:1px solid rgba(217,176,74,.45); color:#f3e2b4;
  font-size:.71rem; font-weight:600; letter-spacing:.03em;
  backdrop-filter:blur(3px);
  transition:background .3s, color .3s;
}
.post-cat i{font-size:.68rem; color:var(--gold-300);}
.post-cat:hover{background:var(--gold-400); color:var(--maroon-950); border-color:var(--gold-400);}
.post-cat:hover i{color:var(--maroon-950);}

.post-body{display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1;}
.post-body h3{font-family:var(--display); font-size:1.1rem; line-height:1.34; color:var(--ink); margin:0;}
.post-body h3 a:hover{color:var(--maroon-700);}
.post-body p{font-size:.87rem; color:var(--ink-soft); line-height:1.72; margin:0;}
.post-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--line);
  font-size:.75rem; color:#8a7461;
}
.post-meta .avatar{
  width:28px; height:28px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; font-size:.66rem; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(160deg,var(--maroon-700),var(--maroon-900)); color:var(--gold-300);
}
.post-meta .avatar img{width:100%; height:100%; object-fit:cover;}
.post-meta .who{color:var(--ink); font-weight:600;}
.post-meta .dot{color:#c9b79a;}
.post-meta .mins{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--maroon-700); font-weight:600;}
.post-meta .mins i{color:var(--gold-600);}

/* wide variant, used for the list rows on a topic page */
.post-card.row{flex-direction:row;}
.post-card.row .post-thumb{width:40%; flex:none;}
.post-card.row .post-thumb-link{height:100%;}
.post-card.row .post-thumb img{height:100%; aspect-ratio:auto;}

.blog-empty{
  text-align:center; padding:56px 24px; color:var(--ink-soft); font-size:.94rem; line-height:1.8;
  border:1px dashed var(--line); border-radius:var(--radius-l); background:var(--cream-050);
}
.blog-empty i{display:block; font-size:1.8rem; color:var(--gold-600); margin-bottom:14px;}
.blog-empty a{color:var(--maroon-700); font-weight:600; text-decoration:underline; text-underline-offset:3px;}

/* ===================== Sidebar ===================== */
.blog-side{position:sticky; top:104px; display:grid; gap:20px;}
.side-card{
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l); padding:24px 22px;
}
.side-card > h3{
  font-family:var(--display); font-size:1rem; color:var(--maroon-700); margin:0 0 16px;
  display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.side-card > h3 i{color:var(--gold-600); font-size:.88rem;}
.side-card.dark{
  background:linear-gradient(150deg,var(--maroon-900),var(--maroon-950));
  border-color:rgba(217,176,74,.3); color:var(--cream-100);
}
.side-card.dark > h3{color:#f3e2b4; border-bottom-color:rgba(217,176,74,.24);}
.side-card.dark > h3 i{color:var(--gold-400);}
.side-card.dark p{color:#d2bfa6; font-size:.86rem; line-height:1.72; margin:0 0 16px;}

.side-topics{display:grid; gap:2px;}
.side-topics a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  font-size:.86rem; color:var(--ink-soft); transition:background .25s, color .25s;
}
.side-topics a i{color:var(--gold-600); font-size:.8rem; width:16px; text-align:center;}
.side-topics a .n{margin-left:auto; font-size:.72rem; color:#a99b8f;}
.side-topics a:hover{background:rgba(217,176,74,.14); color:var(--maroon-700);}
.side-topics a.is-on{background:var(--maroon-700); color:var(--cream-100);}
.side-topics a.is-on i, .side-topics a.is-on .n{color:var(--gold-300);}

.side-posts{display:grid; gap:16px;}
.side-post{display:flex; gap:13px; align-items:flex-start;}
.side-post .thumb{
  width:74px; height:60px; flex:none; border-radius:10px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line);
}
.side-post .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--pg-ease);}
.side-post:hover .thumb img{transform:scale(1.08);}
.side-post h4{font-family:var(--display); font-size:.9rem; line-height:1.38; color:var(--ink); margin:0 0 5px;}
.side-post:hover h4{color:var(--maroon-700);}
.side-post span{font-size:.72rem; color:#8a7461; display:inline-flex; align-items:center; gap:6px;}
.side-post span i{color:var(--gold-600); font-size:.68rem;}

.side-products{display:grid; gap:14px;}
.side-product{display:flex; gap:13px; align-items:center;}
.side-product .thumb{width:60px; height:60px; flex:none; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--paper);}
.side-product .thumb img{width:100%; height:100%; object-fit:cover;}
.side-product h4{font-family:var(--display); font-size:.9rem; color:var(--ink); margin:0 0 4px; line-height:1.34;}
.side-product:hover h4{color:var(--maroon-700);}
.side-product b{font-family:var(--display); color:var(--maroon-700); font-size:1rem;}
.side-product s{font-size:.78rem; color:#a99b8f; margin-left:6px;}

.tag-cloud{display:flex; flex-wrap:wrap; gap:8px;}
.tag-cloud a{
  font-size:.76rem; padding:7px 13px; border-radius:999px; color:var(--ink-soft);
  border:1px solid var(--line); background:var(--paper);
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--pg-ease);
}
.tag-cloud a::before{content:"#"; color:var(--gold-600); margin-right:3px;}
.tag-cloud a:hover{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--cream-100); transform:translateY(-2px);}
.tag-cloud a:hover::before{color:var(--gold-300);}
.tag-cloud a.is-on{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--cream-100);}
.tag-cloud a.is-on::before{color:var(--gold-300);}

/* ===================== Article — reading progress ===================== */
.art-progress{
  position:fixed; z-index:60; left:0; top:0; height:3px; width:100%;
  background:transparent; pointer-events:none;
}
.art-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300),var(--gold-500));
  box-shadow:0 0 12px rgba(217,176,74,.7);
  transition:width .12s linear;
}

/* ===================== Article — hero ===================== */
.art-hero{padding-bottom:clamp(96px,11vw,150px);}     /* room for the cover to sit over the edge */
.art-hero .pg-hero-in{max-width:880px;}
.art-pill{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 16px;
  padding:7px 15px; border-radius:999px; font-size:.76rem; font-weight:600; letter-spacing:.03em;
  background:rgba(217,176,74,.14); border:1px solid rgba(217,176,74,.45); color:#f3e2b4;
  transition:background .3s, color .3s;
}
.art-pill i{color:var(--gold-300); font-size:.72rem;}
.art-pill:hover{background:var(--gold-400); color:var(--maroon-950); border-color:var(--gold-400);}
.art-pill:hover i{color:var(--maroon-950);}
.art-hero h1{font-size:clamp(1.85rem,3.5vw,2.85rem); margin-bottom:16px; text-wrap:balance;}

.art-byline{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  margin-top:28px; padding-top:22px; border-top:1px solid rgba(217,176,74,.26);
  font-size:.83rem; color:#c8b193;
}
.art-byline .who{display:flex; align-items:center; gap:12px;}
.art-byline .avatar{
  width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--gold-400),var(--gold-600)); color:var(--maroon-950);
  font-family:var(--display); font-weight:700; font-size:.95rem;
  border:2px solid rgba(217,176,74,.5);
}
.art-byline .avatar img{width:100%; height:100%; object-fit:cover;}
.art-byline .who b{display:block; font-family:var(--display); font-size:.98rem; color:#f3e2b4; font-weight:600;}
.art-byline .who span{font-size:.76rem; color:#c8b193;}
.art-byline .meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-left:auto;}
.art-byline .meta em{font-style:normal; display:inline-flex; align-items:center; gap:7px;}
.art-byline .meta i{color:var(--gold-400); font-size:.8rem;}

/* ===================== Article — cover ===================== */
.art-cover-wrap{margin-top:clamp(-130px,-9vw,-80px); position:relative; z-index:2;}
.art-cover{
  position:relative; border-radius:var(--radius-l); padding:10px;
  background:linear-gradient(150deg,rgba(217,176,74,.55),rgba(217,176,74,.14));
  box-shadow:0 36px 70px -40px rgba(40,5,9,.8);
}
.art-cover .in{position:relative; overflow:hidden; border-radius:calc(var(--radius-l) - 5px); background:var(--maroon-900);}
.art-cover img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:21/9;}
.art-cover figcaption{
  margin:14px 4px 0; font-size:.78rem; color:var(--ink-soft); font-style:italic; text-align:center;
}

/* ===================== Article — layout ===================== */
.art-layout{
  display:grid; grid-template-columns:238px minmax(0,1fr);
  gap:clamp(28px,4vw,62px); align-items:start;
}
.art-layout > *{min-width:0;}
.art-rail{position:sticky; top:104px; display:grid; gap:24px;}
.art-rail h4{
  font-family:var(--display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--maroon-700); margin:0 0 12px;
}
.art-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; gap:2px;}
.art-toc li{counter-increment:toc;}
.art-toc a{
  display:block; position:relative; padding:9px 12px 9px 34px; border-radius:9px;
  font-size:.84rem; line-height:1.45; color:var(--ink-soft);
  transition:background .25s, color .25s;
}
.art-toc a::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute; left:10px; top:9px; font-size:.68rem; font-weight:700; color:#b9a487;
}
.art-toc a:hover{background:rgba(217,176,74,.14); color:var(--maroon-700);}
.art-toc a.is-on{background:var(--maroon-700); color:var(--cream-100);}
.art-toc a.is-on::before{color:var(--gold-300);}

/* ===================== Article — share ===================== */
.art-share{display:flex; flex-wrap:wrap; gap:9px;}
.art-share a, .art-share button{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:.88rem;
  border:1px solid var(--line); background:var(--cream-050); color:var(--maroon-700);
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--pg-ease);
}
.art-share a:hover, .art-share button:hover{
  background:var(--maroon-700); border-color:var(--maroon-700); color:var(--gold-300); transform:translateY(-3px);
}
.art-share .copied{
  background:var(--gold-500); border-color:var(--gold-500); color:var(--maroon-950);
}

/* ===================== Article — body extras ===================== */
.art-body{max-width:none;}
.art-body > p:first-of-type{font-size:1.04rem; color:var(--ink); line-height:1.85;}
.art-body > p:first-of-type::first-letter{
  float:left; font-family:var(--display); font-size:3.3rem; line-height:.86; font-weight:700;
  color:var(--maroon-700); margin:4px 12px 0 0;
}
.art-body h2{scroll-margin-top:110px;}
.art-body img{border-radius:var(--radius-m); margin:0 0 18px;}
.art-body figure{margin:0 0 22px;}
.art-body figure img{margin:0 0 10px;}
.art-body figcaption{font-size:.79rem; color:#8a7461; font-style:italic; text-align:center;}
.art-body blockquote{
  position:relative; margin:0 0 22px; padding:4px 0 4px 26px;
  border-left:3px solid var(--gold-500);
  font-family:var(--serif); font-style:italic; font-size:1.16rem; line-height:1.66; color:var(--ink);
}
.art-body blockquote cite{
  display:block; margin-top:10px; font-family:var(--sans); font-style:normal;
  font-size:.78rem; color:var(--ink-soft);
}
.art-body .inline-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  margin:0 0 24px; padding:20px 24px; border-radius:var(--radius-m);
  background:linear-gradient(140deg,rgba(217,176,74,.16),rgba(217,176,74,.06));
  border:1px solid rgba(217,176,74,.45);
}
.art-body .inline-cta p{margin:0; flex:1 1 280px; font-size:.9rem; color:var(--ink-soft); line-height:1.7;}
.art-body .inline-cta b{color:var(--ink);}
.art-body .inline-cta .btn{flex:none; padding:11px 22px; font-size:.82rem;}

.art-takeaways{
  position:relative; margin:0 0 34px; padding:26px 28px;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--maroon-600);
  border-radius:var(--radius-m);
}
.art-takeaways h2{
  font-family:var(--display); font-size:1rem; color:var(--maroon-700); margin:0 0 14px; padding:0;
  display:flex; align-items:center; gap:10px; letter-spacing:.03em;
}
.art-takeaways h2 i{color:var(--gold-600); font-size:.9rem;}
.art-takeaways ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.art-takeaways li{position:relative; padding-left:30px; font-size:.9rem; color:var(--ink-soft); line-height:1.7;}
.art-takeaways li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.58rem;
  position:absolute; left:0; top:.25em; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(217,176,74,.2); border:1px solid rgba(217,176,74,.5); color:var(--maroon-700);
}
.art-takeaways li b{color:var(--ink);}

.art-tags{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin:36px 0 0; padding-top:26px; border-top:1px solid var(--line);
}
.art-tags > span{font-size:.78rem; color:#8a7461; margin-right:4px;}

.art-foot-share{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:26px; padding:18px 22px; border-radius:var(--radius-m);
  background:var(--cream-050); border:1px solid var(--line);
}
.art-foot-share p{margin:0; font-size:.86rem; color:var(--ink-soft);}
.art-foot-share p b{color:var(--ink);}

/* ===================== Article — author card ===================== */
.art-author{
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start;
  margin-top:34px; padding:28px 30px; border-radius:var(--radius-l);
  background:linear-gradient(150deg,var(--maroon-900),var(--maroon-950));
  border:1px solid rgba(217,176,74,.28); color:var(--cream-100);
}
.art-author .avatar{
  width:78px; height:78px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--gold-400),var(--gold-600)); color:var(--maroon-950);
  font-family:var(--display); font-size:1.5rem; font-weight:700;
  border:2px solid rgba(217,176,74,.5);
}
.art-author .avatar img{width:100%; height:100%; object-fit:cover;}
.art-author .who{flex:1 1 260px;}
.art-author .who b{display:block; font-family:var(--display); font-size:1.12rem; color:#f3e2b4;}
.art-author .who .role{font-size:.79rem; color:var(--gold-300); margin-bottom:10px; display:block;}
.art-author .who p{font-size:.88rem; color:#d2bfa6; line-height:1.75; margin:0 0 14px;}
.art-author .who .links{display:flex; flex-wrap:wrap; gap:10px 18px; font-size:.82rem;}
.art-author .who .links a{color:#e6d4b6; text-decoration:underline; text-underline-offset:3px;}
.art-author .who .links a:hover{color:var(--gold-300);}

/* ===================== Article — shop the ritual ===================== */
.art-shop-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:26px;
}
.art-shop-head h2{font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink); margin:0 0 6px;}
.art-shop-head p{margin:0; font-size:.88rem; color:var(--ink-soft); max-width:60ch;}
.art-shop .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ===================== Article — prev / next ===================== */
.art-next{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:6px;}
.art-next a{
  display:flex; gap:16px; align-items:center; padding:18px 20px; border-radius:var(--radius-l);
  background:var(--cream-050); border:1px solid var(--line);
  transition:transform .35s var(--pg-ease), border-color .35s, box-shadow .35s;
}
.art-next a:hover{transform:translateY(-4px); border-color:rgba(217,176,74,.7); box-shadow:0 20px 40px -28px rgba(58,10,17,.5);}
.art-next a.next{text-align:right; flex-direction:row-reverse;}
.art-next .arr{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); color:var(--maroon-700); font-size:.82rem;
}
.art-next a:hover .arr{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--gold-300);}
.art-next a > div{min-width:0;}
.art-next a > div > span{display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#a99b8f; margin-bottom:5px;}
.art-next b{font-family:var(--display); font-size:.96rem; color:var(--ink); font-weight:600; line-height:1.4; display:block;}

/* ===================== Newsletter band ===================== */
.blog-news{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,3.4vw,50px);
  align-items:center; padding:clamp(30px,3.6vw,48px);
  border-radius:var(--radius-l); position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--maroon-800),var(--maroon-950));
  border:1px solid rgba(217,176,74,.3); color:var(--cream-100);
}
.blog-news::after{
  content:""; position:absolute; right:-70px; top:-70px; width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,176,74,.32),transparent 70%); pointer-events:none;
}
.blog-news h2{font-family:var(--display); font-size:clamp(1.35rem,2.3vw,1.8rem); margin:0 0 10px; color:#f6e8c4;}
.blog-news p{margin:0; color:#d2bfa6; font-size:.92rem; line-height:1.75; max-width:52ch;}
.blog-news form{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1;}
.blog-news input{
  flex:1 1 220px; min-width:0; border:1px solid rgba(217,176,74,.4); border-radius:999px;
  padding:14px 20px; font-family:inherit; font-size:.88rem;
  background:rgba(255,255,255,.07); color:var(--cream-100);
}
.blog-news input::placeholder{color:#b49d84;}
.blog-news input:focus{outline:none; border-color:var(--gold-400); background:rgba(255,255,255,.12);}
.blog-news .hint{font-size:.76rem; color:#b49d84; margin-top:12px;}

/* ===================== Responsive ===================== */
@media (max-width:1080px){
  .blog-layout{grid-template-columns:minmax(0,1fr);}
  .blog-side{position:static; grid-template-columns:repeat(2,minmax(0,1fr)); display:grid;}
  .art-layout{grid-template-columns:minmax(0,1fr);}
  .art-rail{position:static; grid-template-columns:minmax(0,1fr); display:grid;}
  .art-toc ol{display:flex; flex-wrap:wrap; gap:6px;}
  .art-toc a{border:1px solid var(--line); background:var(--cream-050); padding:8px 14px 8px 32px;}
  .art-toc a::before{top:8px;}
  .art-shop .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .blog-lead{grid-template-columns:minmax(0,1fr);}
  .blog-news{grid-template-columns:minmax(0,1fr);}
  .art-shop .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .post-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .blog-bar-in{flex-direction:column; align-items:stretch; gap:12px;}
  .blog-search{width:100%;}
  .art-cover-wrap{margin-top:-56px;}
  .art-cover img{aspect-ratio:16/10;}
  .art-byline .meta{margin-left:0; width:100%;}
}
@media (max-width:620px){
  .post-grid, .post-grid.c3{grid-template-columns:minmax(0,1fr);}
  .blog-side{grid-template-columns:minmax(0,1fr);}
  .post-card.row{flex-direction:column;}
  .post-card.row .post-thumb{width:100%;}
  .post-card.row .post-thumb img{aspect-ratio:16/10;}
  .art-next{grid-template-columns:minmax(0,1fr);}
  .art-next a.next{text-align:left; flex-direction:row;}
  .art-shop .prod-grid{grid-template-columns:minmax(0,1fr);}
  .art-body > p:first-of-type::first-letter{font-size:2.8rem;}
}

@media (prefers-reduced-motion:reduce){
  .post-card:hover, .art-next a:hover, .blog-chip:hover, .tag-cloud a:hover, .art-share a:hover{transform:none;}
  .post-card:hover .post-thumb img, .blog-lead:hover .blog-lead-media img, .side-post:hover .thumb img{transform:none;}
  .art-progress i{transition:none;}
}