/* ==========================================================
   Blog post · reading first. Builds on main.css tokens.
   ========================================================== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- post head ---------- */
.post-head{display:grid;gap:var(--gap)}
.post-hero{padding:26px 20px 28px;display:grid;gap:18px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--green)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green-ink);border-radius:999px;padding:5px 11px;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.chip [lang="ml"]{font-family:var(--f-ml-head);text-transform:none;letter-spacing:0;font-size:13px;line-height:1}
.post-title{margin:0;font-weight:800;font-stretch:78%;font-size:clamp(38px,9vw,76px);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.post-title:lang(ml){font-family:var(--f-ml-head);font-stretch:92%;font-weight:700;font-size:clamp(30px,6.6vw,56px);line-height:1.38;letter-spacing:0}
.dek{margin:0;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.dek:lang(ml){font-family:var(--f-ml-body);font-size:18px;line-height:1.85}
.byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.who{display:flex;align-items:center;gap:12px}
.who img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--bg)}
.who b{display:block;font-size:15px;font-weight:700}
.who span{font-family:var(--f-mono);font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.03em}
.who span [lang="ml"],.who span:lang(ml){font-family:var(--f-ml-body);text-transform:none;letter-spacing:0;font-size:13px}
.lang-switch{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .2s,color .2s}
.lang-switch:hover{background:var(--ink);color:var(--tile)}
.lang-switch [lang="ml"]{font-family:var(--f-ml-head)}

/* ---------- cover illustration ---------- */
.cover{padding:0;background:#E3E1DA;min-height:300px;display:grid;place-items:center}
.cover svg{width:100%;height:auto;display:block}

/* ---------- article layout ---------- */
.post-body{display:grid;gap:var(--gap)}
.article{padding:30px 20px 34px}
.prose{max-width:680px;margin:0 auto;font-size:18.5px;line-height:1.72;color:#1E1D1A}
.prose:lang(ml){font-family:var(--f-ml-body);font-size:18.5px;line-height:1.95}
.prose > *{margin:0 0 1.15em}
.prose h2{font-weight:800;font-stretch:84%;font-size:clamp(26px,5vw,34px);line-height:1.1;letter-spacing:-.005em;margin:1.9em 0 .6em;text-wrap:balance;scroll-margin-top:96px}
.prose:lang(ml) h2{font-family:var(--f-ml-head);font-stretch:94%;font-weight:700;font-size:clamp(23px,4.6vw,29px);line-height:1.5}
.prose h3{font-weight:700;font-size:20px;margin:0 0 .5em}
.prose:lang(ml) h3{font-family:var(--f-ml-head);font-size:20px;line-height:1.5}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{color:var(--green);text-underline-offset:3px}
.prose ol,.prose ul{padding-left:1.25em}
.prose li{margin:.45em 0;padding-left:.2em}
.prose ol li::marker{font-weight:800;color:var(--green)}
.prose > p:first-of-type{font-size:1.12em;line-height:1.6;color:var(--ink)}
.prose:lang(ml) > p:first-of-type{line-height:1.9}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* pull quote */
.pull{margin:1.8em 0;padding:4px 0 4px 22px;border-left:4px solid var(--green);font-weight:700;font-stretch:90%;font-size:clamp(22px,4.4vw,28px);line-height:1.3;color:var(--ink)}
.pull p{margin:0}
.prose:lang(ml) .pull{font-family:var(--f-ml-head);font-size:clamp(20px,4vw,24px);line-height:1.6;font-stretch:96%}

/* checklist */
.checklist{background:var(--green);color:#EEF4F0;border-radius:18px;padding:22px 22px 10px;margin:1.8em 0}
.checklist h3{color:#fff;margin-bottom:.8em}
.checklist ul{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:0 0 .9em 34px;margin:0}
.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.checklist li::after{content:"";position:absolute;left:6px;top:calc(.35em + 5px);width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* figures */
.fig{margin:1.9em 0;padding:18px;border-radius:18px;background:var(--bg)}
.fig figcaption{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);margin-top:12px}
.fig figcaption:lang(ml),.fig figcaption [lang="ml"]{font-family:var(--f-ml-body);text-transform:none;letter-spacing:0;font-size:13.5px}
.fig-title{font-weight:800;font-stretch:88%;font-size:19px;margin:0 0 14px;line-height:1.2}
.prose:lang(ml) .fig-title{font-family:var(--f-ml-head);font-weight:700;font-size:18px;line-height:1.5}
.guards{display:grid;gap:10px}
.guard{background:var(--tile);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.guard .n{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--tile);font-weight:800;font-size:15px}
.guard b{font-weight:700;font-size:16px;line-height:1.3}
.guard span{font-size:14.5px;line-height:1.5;color:var(--mute)}
.prose:lang(ml) .guard b{font-family:var(--f-ml-head);font-size:16px;line-height:1.5}
.prose:lang(ml) .guard span{font-size:14.5px;line-height:1.75}
.flip{display:grid;gap:10px}
.lane{background:var(--tile);border-radius:14px;padding:14px}
.lane.now{background:var(--ink);color:var(--tile)}
.lane h4{margin:0 0 10px;font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:500;color:var(--mute)}
.lane.now h4{color:#B9D1C5}
.prose:lang(ml) .lane h4{font-family:var(--f-ml-head);text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.steps li{margin:0;padding:9px 12px;border-radius:10px;background:var(--bg);font-size:15px;line-height:1.4;position:relative}
.lane.now .steps li{background:rgba(255,255,255,.08)}
.steps li+li::before{content:"↓";position:absolute;left:50%;top:-12px;transform:translateX(-50%);font-size:12px;color:var(--mute);line-height:1}
.steps li.hot{background:var(--green-soft);color:var(--green-ink);font-weight:700}
.lane.now .steps li.hot{background:#E9C46A;color:#2A2108}
.prose:lang(ml) .steps li{font-size:15px;line-height:1.65}

/* ---------- after the article ---------- */
.inspired{max-width:680px;margin:2.2em auto 0;padding-top:16px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.inspired:lang(ml){font-family:var(--f-ml-body);text-transform:none;letter-spacing:0;font-size:13.5px}
.tags-row{max-width:680px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:6px}
.tags-row span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mute)}

/* share */
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;text-decoration:none;border:0;cursor:pointer;padding:11px 15px;border-radius:999px;background:var(--bg);color:var(--ink);transition:background .2s,transform .2s}
.share a:hover,.share button:hover{background:var(--green-soft)}
.share .wa{background:#1F7A4D;color:#fff}
.share .wa:hover{background:#17603C}
.share svg{width:17px;height:17px;flex:none}
.share-tile{display:grid;gap:14px}
.share-tile h2{margin:0;font-weight:800;font-stretch:80%;font-size:clamp(28px,5vw,40px);line-height:1;text-transform:uppercase}
.share-tile h2:lang(ml){font-family:var(--f-ml-head);text-transform:none;font-stretch:94%;font-size:clamp(24px,4.4vw,32px);line-height:1.4}

/* author */
.author{display:grid;gap:18px}
.author .top{display:flex;gap:16px;align-items:center}
.author .top img{width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--bg)}
.author h2{margin:0;font-weight:800;font-stretch:90%;font-size:24px;line-height:1.1}
.author p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:56ch}
.author p:lang(ml){font-family:var(--f-ml-body);line-height:1.85}
.v-logos{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;padding-top:14px;border-top:1px solid var(--line)}
.v-logos img{height:22px;width:auto;opacity:.85;filter:grayscale(1);transition:opacity .2s,filter .2s}
.v-logos a:hover img{opacity:1;filter:none}
.v-logos img.tall{height:30px}
.v-logos img.sq{height:30px;border-radius:6px}

/* mobile share bar */
.share-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:8px;justify-content:space-between;align-items:center;background:rgba(18,18,18,.94);backdrop-filter:blur(10px);color:var(--tile);border-radius:999px;padding:7px 7px 7px 18px;transform:translateY(140%);transition:transform .4s var(--ease)}
.share-bar.on{transform:none}
.share-bar span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#B3B2AC}
.share-bar span:lang(ml){font-family:var(--f-ml-body);text-transform:none;letter-spacing:0;font-size:13px}
.share-bar .icons{display:flex;gap:6px}
.share-bar a,.share-bar button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer}
.share-bar a.wa{background:#1F7A4D}
.share-bar svg{width:18px;height:18px}

/* table of contents (desktop) */
.toc{display:none}

@media (min-width:720px){
  .post-hero{padding:34px 30px}
  .article{padding:44px 30px 46px}
  .fig{padding:22px}
  .prose:lang(en) .guards{grid-template-columns:repeat(3,1fr)}
  .prose:lang(en) .guard{grid-template-columns:1fr;gap:8px}
  .prose:lang(en) .guard .n{grid-row:auto}
  .flip{grid-template-columns:1fr 1fr}
}
@media (min-width:1080px){
  .post-hero{padding:44px 44px 36px}
  .share-bar{display:none}
  .post-body{grid-template-columns:repeat(12,minmax(0,1fr))}
  .article{grid-column:1/10}
  .toc{display:block;grid-column:10/13;align-self:start;position:sticky;top:96px}
  .toc ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px;counter-reset:t}
  .toc a{display:block;text-decoration:none;font-size:14px;line-height:1.4;padding:8px 10px;border-radius:10px;color:var(--mute);transition:background .2s,color .2s}
  .toc a:lang(ml),.toc:lang(ml) a{font-family:var(--f-ml-body);font-size:14px;line-height:1.6}
  .toc a:hover{background:var(--bg);color:var(--ink)}
  .toc a.on{background:var(--green-soft);color:var(--green-ink);font-weight:600}
}
@media (prefers-reduced-motion:reduce){.share-bar{transition:none}}

/* Malayalam details on shared tiles */
.post-page .k:lang(ml){font-family:var(--f-ml-body);text-transform:none;letter-spacing:0;font-size:13px}
.post-page .news h2:lang(ml){font-family:var(--f-ml-head);text-transform:none;font-stretch:94%;font-weight:700;font-size:clamp(30px,5vw,44px);line-height:1.3}
.post-page .btn:lang(ml),.post-page .share button:lang(ml){font-family:var(--f-ml-head)}
.other-title{margin:0;font-weight:800;font-stretch:88%;font-size:clamp(24px,3.4vw,30px);line-height:1.15;color:var(--green-ink);text-wrap:balance}
.other-title:lang(ml){font-family:var(--f-ml-head);font-weight:700;font-stretch:94%;font-size:clamp(21px,3vw,26px);line-height:1.5}
.post-page .soft .more{color:var(--green-ink)}

/* stats figure */
.stat-row{display:grid;gap:10px}
.stat{background:var(--tile);border-radius:14px;padding:16px 18px;display:grid;gap:4px}
.stat b{font-weight:800;font-stretch:72%;font-size:44px;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.prose:lang(ml) .stat b{font-family:var(--f-display)}
.stat span{font-size:14.5px;line-height:1.5;color:var(--mute)}
.stat.dark{background:var(--ink)}
.stat.dark b{color:#D7E5DD}
.stat.dark span{color:#B3B2AC}
@media (min-width:720px){.stat-row{grid-template-columns:repeat(3,1fr)}}

/* English blocks inside a Malayalam page keep the English typeface */
.post-page [lang="en"]{font-family:var(--f-display)}
.post-page .k[lang="en"]{font-family:var(--f-mono)}
.stat b{white-space:nowrap}
.prose:lang(ml) .stat b{font-size:36px}

/* in short box */
.inshort{max-width:680px;margin:0 auto 2em;background:var(--bg);border-radius:16px;padding:18px 22px}
.inshort ul{margin:10px 0 0;padding-left:1.1em;display:grid;gap:6px}
.inshort li{font-size:16px;line-height:1.55;color:var(--ink-2)}
.inshort li:lang(ml),.post-page[lang="ml"] .inshort li{font-family:var(--f-ml-body);line-height:1.8}
.inshort li::marker{color:var(--green)}

/* photo cover uploaded from admin */
.photo-cover{min-height:0}
.photo-cover img{width:100%;height:auto;max-height:640px;object-fit:cover}
.prose img{border-radius:14px;width:100%;height:auto;margin:1.4em 0}

/* blog index */
.index-hero{padding:28px 22px;display:grid;gap:16px}
.index-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.index-title:lang(ml),.blog-index[lang="ml"] .index-title{font-family:var(--f-ml-head);text-transform:none;font-stretch:94%;font-size:clamp(32px,6vw,58px);line-height:1.3}
.cats a[aria-current="page"]{background:var(--ink);color:var(--tile);box-shadow:none}
.post-list .card{display:grid;padding:0;text-decoration:none;color:inherit}
.card-cover{background:#E3E1DA;overflow:hidden}
.card-cover svg,.card-cover img{display:block;width:100%;height:auto}
.card-body{padding:22px;display:grid;gap:10px;align-content:start}
.card-title{margin:0;font-weight:800;font-stretch:84%;font-size:clamp(24px,4vw,34px);line-height:1.1}
.card-title:lang(ml),.blog-index[lang="ml"] .card-title{font-family:var(--f-ml-head);font-weight:700;font-stretch:94%;font-size:clamp(22px,3.4vw,30px);line-height:1.45}
.card-body p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6}
.card-body .chip{justify-self:start}
@media (min-width:1080px){
  .index-hero{padding:40px 44px}
  .post-list .featured{grid-template-columns:1.1fr 1fr;align-items:center}
  .post-list .featured .card-body{padding:36px}
}