/* ==========================================================================
   Yoga Bhawna Mission — Journal (blog listing + long-form article)
   Loaded by resources/views/blog/index.blade.php and blog/single.blade.php
   Everything is namespaced under .blogpage so it cannot collide with the
   globally-loaded header / footer stylesheets.
   ========================================================================== */

/* Site-standard reset — every page stylesheet here carries its own
   (see about.css / home.css); the shared layout ships none. */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;color:#181a17;background:#fff}
a{text-decoration:none;color:inherit}
img,iframe{max-width:100%}

.blogpage{
  /* brand tokens (green / gold / ink) — matched to the rest of the site */
  --green:#448c74;
  --green-deep:#2f6450;
  --gold:#e5c466;
  --gold-deep:#d3ad4d;
  --ink:#181a17;
  --muted:#5e6b62;
  --line:#e7ece8;
  --paper:#fff;
  --paper-2:#f5f9f6;
  --body-ink:#2e3833;          /* 12:1 on white — set for length, not for punch */

  /* type scale: 1.25-ish modular, fluid between 380px and 1440px */
  --fs-micro:12px;
  --fs-meta:13.5px;
  --fs-small:15px;
  --fs-body:clamp(17px, 0.35vw + 15.6px, 19px);
  --fs-lede:clamp(19px, 0.5vw + 17px, 22.5px);
  --fs-h3:clamp(19px, 0.4vw + 17.5px, 22px);
  --fs-h2:clamp(24px, 1vw + 20px, 31px);
  --fs-h1:clamp(30px, 4.2vw, 52px);

  --headH:86px;                /* fixed site header */
  --read:0;                    /* 0 → 1, written by the article script */

  overflow-x:clip;             /* clip, not hidden — keeps position:sticky alive */
  color:var(--ink);
}
.blogpage *{box-sizing:border-box}
.blogpage img,.blogpage iframe{max-width:100%}

/* --- focus: never removed, always on brand ------------------------------- */
.blogpage a:focus-visible,
.blogpage button:focus-visible,
.blogpage input:focus-visible,
.blogpage summary:focus-visible,
.blogpage [tabindex]:focus-visible{
  outline:3px solid var(--green-deep);
  outline-offset:3px;
  border-radius:4px;
}
.blogpage .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.blogpage .skip{
  position:absolute;left:16px;top:-60px;z-index:960;
  background:var(--green-deep);color:#fff;font-family:'Sora',sans-serif;
  font-size:14px;font-weight:600;padding:12px 20px;border-radius:0 0 12px 12px;
  transition:top .18s;
}
.blogpage .skip:focus{top:0}

/* ==========================================================================
   Page banner — shared, follows the site convention (fixed header overlays it)
   ========================================================================== */
.blogpage .pagebanner{
  position:relative;margin:0;padding-top:clamp(86px,8vw,112px);
  border-radius:0 0 26px 26px;overflow:hidden;
  min-height:min(46vh,360px);display:flex;align-items:flex-end;
  background:#1f2a25 center/cover no-repeat;color:#fff;
}
.blogpage .pagebanner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.72) 100%);
}
.blogpage .pb-inner{position:relative;z-index:2;padding:0 clamp(24px,5vw,70px) clamp(30px,4vw,52px);max-width:1000px}
.blogpage .pagebanner h1{
  font-family:'Sora',sans-serif;font-size:var(--fs-h1);font-weight:700;
  line-height:1.1;letter-spacing:-.01em;margin:0 0 14px;
  text-shadow:0 4px 26px rgba(0,0,0,.4);
}
.blogpage .pb-crumb{
  font-family:'Sora',sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;display:flex;flex-wrap:wrap;
  align-items:center;gap:9px;color:rgba(255,255,255,.9);margin:0;
}
.blogpage .pb-crumb .sep{color:var(--gold)}
.blogpage .pb-crumb a:hover{color:var(--gold)}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.blogpage .shell{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,46px)}

.blogpage .eyebrow{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;
}
.blogpage .cat-pill{
  display:inline-block;background:var(--green-deep);color:#fff;
  font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:6px 14px;border-radius:30px;white-space:nowrap;
}
a.cat-pill:hover{background:#25503f;color:#fff}

.blogpage .dot-sep{width:3px;height:3px;border-radius:50%;background:#b9c6bd;flex:0 0 3px}

.blogpage .meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  font-family:'Sora',sans-serif;font-size:var(--fs-meta);font-weight:500;
  color:var(--muted);margin:0;
}
.blogpage .meta-row b{font-weight:700;color:#39463f}

.blogpage .empty{
  border:1px dashed #cdd9d0;border-radius:20px;padding:70px 30px;text-align:center;
  color:var(--muted);font-family:'Sora',sans-serif;font-size:16px;
}
.blogpage .empty a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}

.blogpage .btn-gold{
  display:inline-flex;align-items:center;gap:10px;background:var(--gold);
  color:#3a2e10;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;
  border-radius:40px;transition:background .2s;min-height:46px;
}
.blogpage .btn-gold:hover{background:var(--gold-deep)}

/* ==========================================================================
   LISTING — category chips
   ========================================================================== */
.blogpage .chipbar{
  padding:clamp(28px,4vw,46px) 0 clamp(20px,2.5vw,30px);
  border-bottom:1px solid var(--line);
}
.blogpage .chipbar .chip-lbl{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 14px;
}
.blogpage .chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.blogpage .chips a{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Sora',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.02em;text-transform:capitalize;color:#39463f;
  background:var(--paper-2);border:1px solid var(--line);
  padding:9px 17px;border-radius:30px;transition:background .18s,color .18s,border-color .18s;
  min-height:40px;
}
.blogpage .chips a .n{font-size:11.5px;color:var(--muted);font-weight:500}
.blogpage .chips a:hover{border-color:var(--green);color:var(--green-deep)}
.blogpage .chips a[aria-current="page"]{
  background:var(--green-deep);border-color:var(--green-deep);color:#fff;
}
.blogpage .chips a[aria-current="page"] .n{color:rgba(255,255,255,.72)}

/* --- featured lead post --------------------------------------------------- */
.blogpage .lead{
  display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(24px,3.4vw,52px);
  align-items:center;padding:clamp(30px,4vw,54px) 0;
}
.blogpage .lead-fig{
  margin:0;border-radius:24px;overflow:hidden;background:#eef3ef;aspect-ratio:16/11;
}
.blogpage .lead-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blogpage .lead:hover .lead-fig img{transform:scale(1.035)}
.blogpage .lead-txt .eyebrow{margin-bottom:16px}
.blogpage .lead-txt h2{
  font-family:'Sora',sans-serif;font-size:clamp(26px,2.3vw,38px);font-weight:700;
  line-height:1.16;letter-spacing:-.015em;margin:0 0 16px;color:var(--ink);
}
.blogpage .lead:hover .lead-txt h2{color:var(--green-deep)}
.blogpage .lead-txt .standfirst{
  font-family:'Sora',sans-serif;font-weight:400;font-size:clamp(16px,.7vw + 14px,18.5px);
  line-height:1.6;color:#3c4a42;margin:0 0 22px;max-width:44ch;
}
.blogpage .lead-txt .meta-row{margin-bottom:24px}
.blogpage .lead .rm{
  display:inline-flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-deep);
}
.blogpage .lead .rm .arw{transition:transform .22s}
.blogpage .lead:hover .rm .arw{transform:translateX(5px)}
.blogpage .lead-mark{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep);
}
.blogpage .lead-mark::before{content:"";width:26px;height:2px;background:var(--gold-deep);border-radius:2px}

/* ==========================================================================
   LISTING — grid + sidebar
   ========================================================================== */
.blogpage .wrap{
  max-width:1360px;margin:0 auto;
  padding:clamp(34px,4vw,56px) clamp(16px,3vw,46px) clamp(50px,6vw,86px);
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(32px,4vw,64px);
  border-top:1px solid var(--line);
}
.blogpage .sec-h{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 22px;display:flex;align-items:center;gap:12px;
}
.blogpage .sec-h::after{content:"";flex:1;height:1px;background:var(--line)}

.blogpage .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(22px,2.4vw,34px)}
.blogpage .card{
  display:flex;flex-direction:column;background:var(--paper);
  border-radius:18px;transition:transform .22s ease;
}
.blogpage .card .thumb{aspect-ratio:16/10;overflow:hidden;background:#eef3ef;border-radius:16px;margin-bottom:16px}
.blogpage .card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blogpage .card:hover .thumb img{transform:scale(1.045)}
.blogpage .card .meta-row{font-size:12.5px;margin-bottom:10px}
.blogpage .card h3{
  font-family:'Sora',sans-serif;font-size:19.5px;font-weight:700;line-height:1.28;
  letter-spacing:-.005em;margin:0 0 9px;color:var(--ink);
}
.blogpage .card:hover h3{color:var(--green-deep)}
.blogpage .card p{font-size:14.8px;line-height:1.65;color:#4a564e;margin:0 0 14px}
.blogpage .card .rm{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:'Sora',sans-serif;font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-deep);
}
.blogpage .card .rm .arw{transition:transform .22s}
.blogpage .card:hover .rm .arw{transform:translateX(4px)}

/* --- sidebar -------------------------------------------------------------- */
.blogpage .side{position:sticky;top:calc(var(--headH) + 16px);align-self:start}
.blogpage .side .box{border:1px solid var(--line);border-radius:20px;padding:26px;margin-bottom:22px}
.blogpage .side h4{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px;
  display:flex;align-items:center;gap:10px;color:var(--ink);
}
.blogpage .side h4::before{content:"";width:18px;height:2px;background:var(--gold-deep);border-radius:2px;flex:0 0 18px}
.blogpage .box.green{background:var(--green-deep);border-color:var(--green-deep)}
.blogpage .box.green h4{color:#fff}
.blogpage .search{display:flex;background:#fff;border-radius:40px;overflow:hidden;padding:5px}
.blogpage .search input{
  flex:1;min-width:0;border:none;outline:none;padding:12px 16px;
  font-family:'Poppins',sans-serif;font-size:14.5px;background:transparent;color:var(--ink);
}
.blogpage .search button{
  border:none;background:var(--gold);color:#3a2e10;width:44px;height:44px;
  border-radius:50%;cursor:pointer;flex:0 0 44px;
}
.blogpage .search button:hover{background:var(--gold-deep)}

.blogpage .recent{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.blogpage .recent:first-of-type{padding-top:0}
.blogpage .recent:last-child{border-bottom:none;padding-bottom:0}
.blogpage .recent img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 64px}
.blogpage .recent .rt{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.blogpage .recent:hover .rt{color:var(--green-deep)}
.blogpage .recent .rd{font-family:'Sora',sans-serif;font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:5px;text-transform:uppercase}

.blogpage .cat-list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;
  text-transform:capitalize;color:var(--ink);
}
.blogpage .cat-list a:last-child{border-bottom:none}
.blogpage .cat-list a .nm{display:flex;align-items:center;gap:10px}
.blogpage .cat-list a .nm::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 6px}
.blogpage .cat-list a:hover,.blogpage .cat-list a[aria-current="page"]{color:var(--green-deep)}
.blogpage .cat-list a[aria-current="page"] .nm::before{background:var(--gold-deep)}
.blogpage .cat-list a .n{color:var(--muted);font-weight:500;font-size:12.5px}

.blogpage .cta-card{background:var(--green-deep);color:#fff;border-radius:20px;padding:32px 26px;text-align:center}
.blogpage .cta-card .lotus{font-size:38px;color:var(--gold);margin-bottom:14px;line-height:1}
.blogpage .cta-card h3{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;line-height:1.22;margin:0 0 10px}
.blogpage .cta-card p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.84);margin:0 0 20px}
.blogpage .cta-card .ph{
  display:inline-flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;
  font-weight:600;font-size:15px;color:#fff;margin-bottom:18px;
}
.blogpage .cta-card .ph i{color:var(--gold)}
.blogpage .cta-card .ph:hover{text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   ARTICLE
   ========================================================================== */

/* reading progress — hairline at the top of the viewport (narrow screens) */
.blogpage .read-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:950;
  pointer-events:none;background:rgba(47,100,80,.1);
}
.blogpage .read-bar i{
  display:block;height:100%;width:calc(var(--read) * 100%);
  background:linear-gradient(90deg,var(--green),var(--gold-deep));
  transition:width .12s linear;
}

/* article header — shares the article's grid column, so it can never drift
   out of alignment with the body measure */
.blogpage .post-head{padding-bottom:clamp(26px,3vw,38px)}
.blogpage .post-head .standfirst{
  font-family:'Sora',sans-serif;font-weight:400;font-size:var(--fs-lede);
  line-height:1.52;letter-spacing:-.005em;color:#37443d;margin:0 0 26px;
}
.blogpage .post-head .byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:'Sora',sans-serif;font-size:var(--fs-meta);color:var(--muted);
}
.blogpage .post-head .byline b{font-weight:700;color:#2f3b34}
.blogpage .post-head .byline .rt{
  display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-weight:600;
}

/* three-column shell: contents rail | article | optical balance.
   The middle track is the measure — 690px cap ≈ 72 characters at 19px,
   632px ≈ 66 characters at a 1280px viewport. */
.blogpage .post-shell{
  max-width:1360px;margin:0 auto;
  padding:clamp(32px,4vw,52px) clamp(16px,3vw,46px) 0;
  display:grid;
  grid-template-columns:minmax(0,230px) minmax(0,690px) minmax(0,230px);
  column-gap:clamp(28px,3.4vw,48px);
  justify-content:center;align-items:start;
}
.blogpage .post-head{grid-column:2;grid-row:1;min-width:0}
.blogpage .rail{grid-column:1;grid-row:2}
.blogpage .post-col{grid-column:2;grid-row:2;min-width:0}
.blogpage .post-balance{grid-column:3;grid-row:2}

/* --- the contents rail (signature element) ------------------------------- */
.blogpage .rail{
  position:sticky;top:calc(var(--headH) + 22px);align-self:start;
  max-height:calc(100vh - var(--headH) - 46px);overflow-y:auto;
  scrollbar-width:thin;padding-right:6px;
}
.blogpage .toc[hidden]{display:none}
.blogpage .toc-h{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;
}
.blogpage .toc-list{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
/* the thread: unread track … */
.blogpage .toc-list::before{
  content:"";position:absolute;left:5px;top:.55em;bottom:.55em;width:2px;
  background:var(--line);border-radius:2px;
}
/* … and the read length, filled by --read */
.blogpage .toc-list::after{
  content:"";position:absolute;left:5px;top:.55em;width:2px;border-radius:2px;
  height:calc((100% - 1.1em) * var(--read));
  background:linear-gradient(180deg,var(--green),var(--gold-deep));
  transition:height .14s linear;
}
.blogpage .toc-list li{margin:0 0 15px}
.blogpage .toc-list li:last-child{margin-bottom:0}
.blogpage .toc-list a{
  position:relative;display:block;
  font-family:'Sora',sans-serif;font-size:13px;font-weight:500;line-height:1.4;
  color:var(--muted);transition:color .18s;
}
.blogpage .toc-list a::before{
  content:"";position:absolute;left:-26px;top:.28em;width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid #d5dfd8;
  box-shadow:0 0 0 4px #fff;transition:border-color .18s,background .18s;
}
.blogpage .toc-list a:hover{color:var(--green-deep)}
.blogpage .toc-list a:hover::before{border-color:var(--green)}
.blogpage .toc-list a[aria-current="true"]{color:var(--ink);font-weight:700}
.blogpage .toc-list a[aria-current="true"]::before{border-color:var(--gold-deep);background:var(--gold)}

/* ==========================================================================
   ARTICLE BODY — the long read
   ========================================================================== */
.blogpage .post-body{
  font-family:'Poppins',sans-serif;
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--body-ink);
  letter-spacing:.002em;
}
.blogpage .post-body > *:first-child{margin-top:0}
.blogpage .post-body p{margin:0 0 1.1em}

/* drop cap — only when the article opens on prose */
.blogpage .post-body > p:first-child::first-letter{
  font-family:'Sora',sans-serif;font-weight:700;font-size:4.1em;line-height:.82;
  float:left;color:var(--green-deep);margin:.07em .1em 0 0;
}

.blogpage .post-body h2{
  font-family:'Sora',sans-serif;font-size:var(--fs-h2);font-weight:700;
  line-height:1.2;letter-spacing:-.018em;color:var(--ink);
  margin:2.1em 0 .55em;scroll-margin-top:calc(var(--headH) + 28px);
}
.blogpage .post-body h2::before{
  content:"";display:block;width:26px;height:2px;background:var(--gold-deep);
  border-radius:2px;margin-bottom:.55em;
}
.blogpage .post-body h3{
  font-family:'Sora',sans-serif;font-size:var(--fs-h3);font-weight:600;
  line-height:1.32;color:var(--green-deep);
  margin:1.85em 0 .5em;scroll-margin-top:calc(var(--headH) + 28px);
}
.blogpage .post-body h4{
  font-family:'Sora',sans-serif;font-size:1.02em;font-weight:700;
  letter-spacing:.02em;color:var(--ink);margin:1.6em 0 .45em;
}

.blogpage .post-body a{
  color:var(--green-deep);text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.blogpage .post-body a:hover{text-decoration-color:var(--green-deep)}
.blogpage .post-body strong,.blogpage .post-body b{font-weight:600;color:var(--ink)}
/* Poppins ships no true italic here, so Sanskrit terms get colour + tracking
   as well as slant — otherwise a synthesised oblique alone reads as noise. */
.blogpage .post-body em,.blogpage .post-body i,.blogpage .post-body cite{
  font-style:italic;color:var(--green-deep);letter-spacing:.014em;
}
.blogpage .post-body em strong,.blogpage .post-body strong em{color:var(--green-deep)}

/* lists */
.blogpage .post-body ul{list-style:none;margin:0 0 1.4em;padding:0}
.blogpage .post-body ul li{position:relative;padding-left:1.65em;margin:0 0 .6em}
.blogpage .post-body ul li::before{
  content:"";position:absolute;left:.2em;top:.66em;width:7px;height:7px;
  background:var(--green);border-radius:2px;transform:rotate(45deg);
}
.blogpage .post-body ol{list-style:none;counter-reset:ybm;margin:0 0 1.4em;padding:0}
.blogpage .post-body ol li{position:relative;padding-left:1.9em;margin:0 0 .6em;counter-increment:ybm}
.blogpage .post-body ol li::before{
  content:counter(ybm) ".";position:absolute;left:0;top:.03em;
  font-family:'Sora',sans-serif;font-weight:700;font-size:.86em;color:var(--green);
}
.blogpage .post-body li > ul,.blogpage .post-body li > ol{margin:.55em 0 0}
.blogpage .post-body li p{margin:0 0 .5em}

/* blockquote — classical citations break the measure to the left */
.blogpage .post-body blockquote{
  margin:2em 0 2em -1.55em;padding:.15em 0 .15em 1.5em;
  border-left:2px solid var(--gold-deep);
  font-family:'Sora',sans-serif;font-weight:400;font-size:1.14em;
  line-height:1.56;letter-spacing:-.008em;color:var(--ink);
}
.blogpage .post-body blockquote p{margin:0 0 .55em}
.blogpage .post-body blockquote p:last-child{margin-bottom:0}
.blogpage .post-body blockquote em,.blogpage .post-body blockquote i{color:var(--green-deep)}
.blogpage .post-body blockquote cite,
.blogpage .post-body blockquote footer{
  display:block;margin-top:.95em;font-family:'Sora',sans-serif;font-size:12px;
  font-style:normal;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.blogpage .post-body blockquote cite::before,
.blogpage .post-body blockquote footer::before{content:"— "}

/* figures, images, rules, tables */
.blogpage .post-body figure{margin:1.9em 0}
.blogpage .post-body img{display:block;width:100%;height:auto;border-radius:16px;margin:1.6em 0}
.blogpage .post-body figure img{margin:0}
.blogpage .post-body figcaption{
  margin-top:12px;font-family:'Sora',sans-serif;font-size:12.5px;line-height:1.5;
  color:var(--muted);
}
.blogpage .post-body hr{
  border:0;height:2px;width:64px;background:var(--line);border-radius:2px;
  margin:2.6em auto;
}
.blogpage .post-body table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.9em}
.blogpage .post-body th,.blogpage .post-body td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;
}
.blogpage .post-body th{font-family:'Sora',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.blogpage .post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--paper-2);padding:2px 6px;border-radius:5px;
}

/* ==========================================================================
   ARTICLE FOOT
   ========================================================================== */
.blogpage .post-foot{margin-top:clamp(40px,5vw,64px)}
.blogpage .filed{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:34px}
.blogpage .filed .lbl{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:4px;
}
.blogpage .filed a{
  font-family:'Sora',sans-serif;font-size:12.5px;font-weight:600;color:#39463f;
  background:var(--paper-2);border:1px solid var(--line);padding:7px 15px;
  border-radius:30px;text-transform:capitalize;transition:.18s;
}
.blogpage .filed a:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

.blogpage .post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;margin-bottom:34px;
}
.blogpage .post-nav .lbl{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.blogpage .post-nav a{
  font-family:'Sora',sans-serif;font-weight:700;font-size:15px;line-height:1.32;color:var(--ink);
}
.blogpage .post-nav a:hover{color:var(--green-deep)}
.blogpage .post-nav .nx{text-align:right}
.blogpage .post-nav .nx .lbl{justify-content:flex-end}

.blogpage .author-box{
  display:flex;gap:22px;align-items:center;background:var(--green-deep);color:#fff;
  border-radius:22px;padding:30px 32px;
}
.blogpage .author-box .av{
  width:88px;height:88px;border-radius:50%;background:#fff;display:grid;
  place-items:center;flex:0 0 88px;border:3px solid var(--gold);
}
.blogpage .author-box .av img{width:66px;height:auto}
.blogpage .author-box .who{
  font-family:'Sora',sans-serif;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 7px;
}
.blogpage .author-box h4{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin:0 0 8px}
.blogpage .author-box p{font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.86);margin:0}

/* --- keep reading + closing CTA (replaces the article sidebar) ------------ */
/* padding-top only — .shell owns the horizontal padding */
.blogpage .more{
  margin-top:clamp(52px,6vw,86px);padding-top:clamp(44px,5vw,68px);
  border-top:1px solid var(--line);
}
.blogpage .more .grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(40px,4.5vw,58px)}
.blogpage .closing{
  background:var(--green-deep);color:#fff;border-radius:26px;
  padding:clamp(34px,4vw,52px) clamp(24px,4vw,56px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:26px;margin-bottom:clamp(50px,6vw,84px);
}
.blogpage .closing h3{font-family:'Sora',sans-serif;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.22;margin:0 0 9px;max-width:22ch}
.blogpage .closing p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.84);margin:0;max-width:46ch}
.blogpage .closing .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.blogpage .closing .ph{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;color:#fff}
.blogpage .closing .ph i{color:var(--gold)}
.blogpage .closing .ph:hover{text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ≤1200px — the rail cannot live in the margin any more: it becomes a
   collapsible panel above the article, and progress moves to the top hairline */
@media (max-width:1200px){
  .blogpage .post-shell{grid-template-columns:minmax(0,690px);justify-content:center}
  .blogpage .post-head,.blogpage .rail,.blogpage .post-col{grid-column:1;grid-row:auto}
  .blogpage .post-balance{display:none}
  .blogpage .rail{
    position:static;max-height:none;overflow:visible;padding:0;
    margin-bottom:clamp(28px,3.5vw,40px);
  }
  .blogpage .toc{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:var(--paper-2)}
  .blogpage .toc-h{margin-bottom:14px}
  .blogpage .toc-list{padding-left:22px}
  .blogpage .toc-list::after{background:var(--green)}
  .blogpage .toc-list a::before{left:-22px;box-shadow:0 0 0 4px var(--paper-2)}
  .blogpage .toc-list li{margin-bottom:11px}
  .blogpage .post-body blockquote{margin-left:0}
}
@media (min-width:1201px){
  .blogpage .read-bar{display:none}
}

@media (max-width:1024px){
  .blogpage .pagebanner{padding-top:clamp(74px,12vw,96px);min-height:min(40vh,310px)}
  .blogpage .wrap{gap:40px}
  .blogpage .lead{gap:28px}
}

@media (max-width:900px){
  .blogpage{--headH:74px}
  .blogpage .wrap{grid-template-columns:minmax(0,1fr);gap:44px}
  .blogpage .side{position:static}
  .blogpage .lead{grid-template-columns:1fr;gap:24px;padding-bottom:8px}
  .blogpage .lead-fig{aspect-ratio:16/9}
  .blogpage .lead-txt .standfirst{max-width:none}
  .blogpage .more .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blogpage .closing{flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){
  .blogpage .pagebanner{border-radius:0 0 20px 20px;min-height:min(38vh,270px)}
  .blogpage .pb-crumb{font-size:11px;letter-spacing:.1em;gap:7px}
  .blogpage .grid,.blogpage .more .grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .blogpage .side .box{padding:22px}
  .blogpage .post-nav{grid-template-columns:1fr;gap:24px}
  .blogpage .post-nav .nx{text-align:left}
  .blogpage .post-nav .nx .lbl{justify-content:flex-start}
  .blogpage .author-box{flex-direction:column;text-align:center;gap:16px;padding:28px 24px}
  .blogpage .post-body > p:first-child::first-letter{font-size:3.5em;margin-right:.09em}
}

@media (max-width:420px){
  .blogpage .pagebanner{min-height:min(34vh,230px)}
  .blogpage .pb-inner{padding-left:18px;padding-right:18px}
  .blogpage .toc{padding:17px 18px}
  .blogpage .cta-card,.blogpage .closing{padding-left:22px;padding-right:22px}
  .blogpage .post-body blockquote{padding-left:1.15em}
  .blogpage .chips a{padding:8px 14px}
}

/* --- motion + print ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .blogpage *,.blogpage *::before,.blogpage *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .blogpage .card:hover .thumb img,
  .blogpage .lead:hover .lead-fig img{transform:none}
}

@media print{
  .blogpage .read-bar,.blogpage .rail,.blogpage .more,
  .blogpage .post-nav,.blogpage .skip{display:none !important}
  .blogpage .pagebanner{min-height:0;padding-top:0;color:#000;background:none}
  .blogpage .pagebanner::after{display:none}
  .blogpage .pagebanner h1{color:#000;text-shadow:none}
  .blogpage .post-shell{display:block}
  .blogpage .post-body{max-width:none;font-size:11.5pt;line-height:1.6;color:#000}
  .blogpage .author-box{background:none;color:#000;border:1px solid #999}
}