/* ab-blog.css v1 (11 Oct 2026) - 4AB group-blog design. Own code, modelled on the look of the old
   Elfsight Blog widget (simple / grid / list). Colours inherit from the page; accent per group via --abb-a. */
.abb{--abb-a:#2563eb;--abb-r:16px;--abb-ratio:16/9;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;color:inherit;max-width:1200px;margin:0 auto;padding:0 16px 40px;box-sizing:border-box;min-height:70vh}
.abb *,.abb *::before,.abb *::after{box-sizing:border-box}
.abb a{color:inherit;text-decoration:none}
.abb-bar{display:flex;align-items:center;gap:20px;padding:18px 0 14px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent);margin-bottom:8px}
.abb-brand{font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap;display:flex;gap:8px;align-items:center}
.abb-brand i{font-style:normal;width:30px;height:30px;border-radius:9px;background:var(--abb-a);color:#fff;display:grid;place-items:center;font-size:15px}
.abb-nav{display:flex;gap:4px 18px;overflow-x:auto;scrollbar-width:none;margin-left:auto;font-size:14.5px;opacity:.82}
.abb-nav::-webkit-scrollbar{display:none}
.abb-nav button{all:unset;cursor:pointer;white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent}
.abb-nav button:hover,.abb-nav button[aria-pressed=true]{opacity:1;border-color:var(--abb-a);color:var(--abb-a)}
.abb-head{text-align:center;padding:34px 0 18px;max-width:760px;margin:0 auto}
.abb-head h2{margin:0 0 10px;font-size:clamp(28px,5vw,42px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.abb-head p{margin:0;font-size:17px;opacity:.78}
.abb-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 6px}
.abb-search{flex:1 1 240px;max-width:420px;position:relative}
.abb-search input{width:100%;font:inherit;font-size:15px;padding:11px 14px 11px 40px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;color:inherit}
.abb-search input:focus{outline:2px solid var(--abb-a);outline-offset:1px}
.abb-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;opacity:.55}
.abb-views{display:flex;gap:4px;margin-left:auto}
.abb-views button{all:unset;cursor:pointer;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.abb-views button[aria-pressed=true]{background:var(--abb-a);border-color:var(--abb-a);color:#fff}
.abb-views svg{width:18px;height:18px}
.abb-chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:8px 0 14px;scrollbar-width:none}
.abb-chips::-webkit-scrollbar{display:none}
.abb-chip{all:unset;cursor:pointer;white-space:nowrap;font-size:13.5px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.abb-chip b{font-weight:600;opacity:.6;margin-left:5px}
.abb-chip[aria-pressed=true]{background:var(--abb-a);border-color:var(--abb-a);color:#fff}
.abb-chip[aria-pressed=true] b{opacity:.85}
.abb-chip:focus-visible,.abb-nav button:focus-visible,.abb-views button:focus-visible,.abb-more:focus-visible{outline:2px solid var(--abb-a);outline-offset:2px}
.abb-count{font-size:13.5px;opacity:.65;margin:2px 0 10px}
.abb-grid{display:grid;gap:34px 26px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px}
.abb-card{display:flex;flex-direction:column;min-width:0}
.abb-cover{display:block;aspect-ratio:var(--abb-ratio);border-radius:var(--abb-r);overflow:hidden;background:color-mix(in srgb,var(--abb-a) 16%,transparent);position:relative}
.abb-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.abb-card:hover .abb-cover img{transform:scale(1.035)}
.abb-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--abb-a) 78%,#000),var(--abb-a) 60%,color-mix(in srgb,var(--abb-a) 60%,#fff))}
.abb-ph i{font-style:normal;font-size:34px;line-height:1;opacity:.92}
.abb-ph span{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.88}
.abb-cat{display:block;margin:14px 0 6px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:500}
.abb-t{margin:0 0 8px;font-size:20px;line-height:1.28;font-weight:750;letter-spacing:-.01em}
.abb-t a:hover{color:var(--abb-a)}
.abb-i{margin:0 0 10px;font-size:15.5px;opacity:.82;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.abb-by{margin-top:auto;font-size:14px;opacity:.68}
.abb-by span+span::before{content:"\00b7";margin:0 7px}
.abb-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:26px 0 38px}
.abb-hero .abb-body{order:1}
.abb-hero .abb-cover{order:2}
.abb-hero .abb-t{font-size:clamp(26px,3.4vw,38px);line-height:1.18;font-weight:800}
.abb-hero .abb-i{-webkit-line-clamp:4;font-size:16.5px}
.abb-hero .abb-cat{margin-top:0}
.abb-list .abb-grid{grid-template-columns:1fr;gap:26px}
.abb-list .abb-card{flex-direction:row;gap:22px;align-items:flex-start}
.abb-list .abb-cover{flex:0 0 min(34%,300px)}
.abb-list .abb-body{flex:1;min-width:0}
.abb-list .abb-cat{margin-top:0}
.abb-more{all:unset;cursor:pointer;display:block;margin:38px auto 0;padding:13px 30px;border-radius:999px;background:var(--abb-a);color:#fff;font-weight:650;font-size:15px;text-align:center}
.abb-more:hover{filter:brightness(1.08)}
.abb-empty{text-align:center;padding:50px 0;opacity:.7}
/* hide the generator's old listing once the widget is up (it stays in the DOM for crawlers) */
html.abb-js[data-abb=calc][data-abb-page=index] main>h1,html.abb-js[data-abb=calc][data-abb-page=index] main>ul,
html.abb-js[data-abb=home-tutor][data-abb-page=index] main>header.ph,html.abb-js[data-abb=home-tutor][data-abb-page=index] main>section.sec,
html.abb-js[data-abb=abc][data-abb-page=index] main>header.ph,html.abb-js[data-abb=abc][data-abb-page=index] main>section.sec,html.abb-js[data-abb=abc][data-abb-page=index] main>p.blog-all-link,
html.abb-js[data-abb=hindu-gods][data-abb-page=index] .portal-main>*:not(#abb-root){display:none!important}
/* popup post view (data-view=popup) */
.abb-pop{position:fixed;inset:0;z-index:2147483000;background:rgba(10,12,20,.62);display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:4vh 12px}
.abb-pop-in{background:#fff;color:#14161c;border-radius:20px;max-width:960px;width:100%;padding:34px clamp(18px,5vw,60px) 44px;position:relative;line-height:1.7}
.abb-pop-in img{max-width:100%;height:auto;border-radius:12px}
.abb-pop-x{all:unset;cursor:pointer;position:sticky;float:right;top:0;width:38px;height:38px;border-radius:50%;background:#eceef3;display:grid;place-items:center;font-size:20px}
@media(max-width:899px){.abb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.abb-hero{grid-template-columns:1fr;gap:16px}.abb-hero .abb-cover{order:0}.abb-hero .abb-body{order:1}}
@media(max-width:599px){.abb-grid{grid-template-columns:1fr}.abb-bar{flex-wrap:wrap;gap:8px}.abb-nav{margin-left:0;width:100%}.abb-list .abb-card{flex-direction:column}.abb-list .abb-cover{flex:none;width:100%}.abb-views{margin-left:0}.abb-search{max-width:none}}
@media(prefers-reduced-motion:reduce){.abb-cover img{transition:none}}
/* ---------- post page extras: progress bar, share, related ---------- */
.abb-prog{position:fixed;left:0;top:0;height:3px;width:0;background:var(--abb-a,#2563eb);z-index:2147482000}
.abb-share{--abb-a:#2563eb;max-width:860px;margin:34px auto 10px;padding:16px;border-top:1px solid rgba(128,128,128,.28);display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:600 14px system-ui,sans-serif}
.abb-share span{opacity:.7;margin-right:4px}
.abb-share a,.abb-share button{all:unset;cursor:pointer;font:600 13.5px system-ui,sans-serif;padding:8px 14px;border-radius:999px;border:1px solid rgba(128,128,128,.4);color:inherit}
.abb-share a:hover,.abb-share button:hover{background:var(--abb-a);border-color:var(--abb-a);color:#fff}
.abb-share a:focus-visible,.abb-share button:focus-visible{outline:2px solid var(--abb-a);outline-offset:2px}
.abb-rel{--abb-a:#2563eb;--abb-r:14px;--abb-ratio:16/9;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;max-width:1200px;margin:10px auto 0;padding:10px 16px 30px;color:inherit}
.abb-rel h2{font-size:24px;margin:8px 0 18px;font-weight:800;letter-spacing:-.01em}
.abb-rel a{color:inherit;text-decoration:none}
.abb-rel .abb-grid{gap:26px 22px}
.abb-rel .abb-t{font-size:17px}
/* page themes style h2/h3 and p globally; keep the widget's own type scale */
.abb h2,.abb h3,.abb-rel h2,.abb-rel h3{font-family:inherit;text-transform:none;letter-spacing:-.01em;color:inherit;margin-top:0;padding:0;border:0;background:none}
.abb h2::before,.abb h2::after,.abb h3::before,.abb h3::after{content:none}
.abb p,.abb-rel p{max-width:none}
.abb-t{font-weight:750}
.abb-hero .abb-t{font-weight:800}
.abb-head h2{font-weight:800}
.abb button,.abb input{font-family:inherit}
.abb .abb-t,.abb .abb-head h2,.abb-rel h2,.abb-rel .abb-t{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif!important;font-weight:760!important;text-transform:none!important;letter-spacing:-.012em!important;color:inherit!important;line-height:1.25}
.abb .abb-hero .abb-t{font-size:clamp(26px,3.4vw,38px)!important;font-weight:800!important;line-height:1.16}
.abb .abb-head h2{font-size:clamp(28px,5vw,42px)!important;font-weight:800!important}
.abb .abb-t{font-size:20px}
.abb-rel .abb-t{font-size:17px!important}
/* /blog/<site>/ : widget replaces the PHP grid + pager for the four widget-backed blogs */
html.abb-js[data-abb-hub] .bwrap>.bgrid,html.abb-js[data-abb-hub] .bwrap>.bpager{display:none!important}
html.abb-js[data-abb-hub] .bwrap>.bhead{margin-bottom:0}
#abb-root{min-width:0;width:100%}.abb{overflow-x:clip}
html[data-abb=hindu-gods] .portal-main{min-width:0}
.abb .abb-t a,.abb-rel .abb-t a{color:inherit!important;text-decoration:none!important}
.abb .abb-t a:hover,.abb-rel .abb-t a:hover{color:var(--abb-a)!important}
.abb-pop-full{display:inline-block;margin-top:24px;font-weight:600;color:var(--abb-a,#2563eb)}
.abb-pop-in:focus{outline:none}
.abb-pop-x:focus-visible,.abb-pop-full:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(max-width:600px){.abb-pop{padding:0}.abb-pop-in{border-radius:0;min-height:100%}}
@media(min-width:900px){.abb[data-cols="2"] .abb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.abb[data-cols="4"] .abb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:600px) and (max-width:899px){.abb[data-cols="3"] .abb-grid,.abb[data-cols="4"] .abb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ======== POST VIEW (Elfsight-style) - only active on html[data-abb-page=post] body (added by ab-blog-apply.py) ======== */
html[data-abb=abc]{--pa:#1d4ed8}html[data-abb=calc]{--pa:#2563eb}html[data-abb=home-tutor]{--pa:#d97706}html[data-abb=hindu-gods]{--pa:#b02e0c}
html[data-abb-page=post] body{--pw:720px;--pc:960px;--pline:rgba(128,128,128,.28);--pfont:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Noto Sans Devanagari",sans-serif}
/* cover tile: reserves 16:9 immediately (no layout shift); image from --abb-cover, else gradient */
html[data-abb-page=post] body header.ph::before,html[data-abb=hindu-gods][data-abb-page=post] body .hero::before{
  content:"";display:block;box-sizing:border-box;width:100%;max-width:var(--pc);aspect-ratio:16/9;border-radius:20px;margin:0 auto 28px;
  background-color:var(--pa);background-size:cover;background-position:center;
  background-image:var(--abb-cover,linear-gradient(135deg,color-mix(in srgb,var(--pa) 78%,#000),var(--pa) 60%,color-mix(in srgb,var(--pa) 55%,#fff)))}
html[data-abb=abc][data-abb-page=post] body header.ph::before{display:none}
/* ---- shared header (abc, home-tutor) ---- */
html[data-abb-page=post] body article>header.ph,html[data-abb-page=post] body main>header.ph{display:flex;flex-direction:column;background:none;border:0;box-shadow:none;border-radius:0;padding:8px 0 0;margin:0 auto;max-width:var(--pc);width:100%;color:inherit}
html[data-abb-page=post] body header.ph::before{order:-5}
html[data-abb-page=post] body header.ph>.eyebrow{order:-2;display:block;max-width:var(--pw);width:100%;margin:0 auto 10px;font:700 13px/1.2 var(--pfont);letter-spacing:.1em;text-transform:uppercase;color:var(--pa)}
html[data-abb-page=post] body header.ph>.eyebrow a{color:var(--pa);text-decoration:none}
html[data-abb-page=post] body header.ph>.eyebrow i{font-style:normal;margin-right:6px}
html[data-abb-page=post] body header.ph>h1,html[data-abb-page=post] body article>h1{font:800 clamp(30px,5.2vw,46px)/1.14 var(--pfont);letter-spacing:-.02em;text-transform:none;max-width:var(--pw);width:100%;margin:0 auto 14px;color:inherit;padding:0;border:0}
html[data-abb-page=post] body header.ph>.lede{font:400 19px/1.55 var(--pfont);max-width:var(--pw);width:100%;margin:0 auto 14px;opacity:.78}
html[data-abb-page=post] body .postmeta,html[data-abb-page=post] body article>.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font:500 14px/1.4 var(--pfont);color:inherit;max-width:var(--pw);width:100%;margin:0 auto 26px;padding-bottom:22px;border-bottom:1px solid var(--pline)}
html[data-abb-page=post] body .postmeta>*{opacity:.72}
html[data-abb-page=post] body .postmeta>span+span::before{content:"\00b7";margin:0 8px}
html[data-abb-page=post] body .postmeta>span:first-child{opacity:1;font-weight:600;display:inline-flex;align-items:center}
html[data-abb-page=post] body .postmeta>span:first-child::before,html[data-abb-page=post] body article>.meta::before{content:"AB";display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;margin-right:10px;background:var(--pa);color:#fff;font:700 13px/1 var(--pfont);letter-spacing:.02em;flex:none}
html[data-abb-page=post] body article>.meta{display:block}
html[data-abb-page=post] body article>.meta::before{display:inline-grid;vertical-align:middle}
/* ---- reading column ---- */
html[data-abb-page=post] body .post,html[data-abb-page=post] body .article{background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:0 auto;max-width:var(--pw);width:100%;font:400 18px/1.78 var(--pfont);color:inherit}
html[data-abb-page=post] body .post>*,html[data-abb-page=post] body .article>*,html[data-abb-page=post] body article>*:not(header):not(figure.hero){max-width:var(--pw);margin-left:auto;margin-right:auto}
html[data-abb-page=post] body .post p,html[data-abb-page=post] body .article p,html[data-abb-page=post] body article>p{font-size:18px;line-height:1.78;margin:0 0 1.25em}
html[data-abb-page=post] body .post h2,html[data-abb-page=post] body .article h2,html[data-abb-page=post] body article>h2{font:780 clamp(24px,3.6vw,30px)/1.25 var(--pfont);letter-spacing:-.015em;text-transform:none;margin:2.1em auto .6em;padding:0;border:0;background:none;color:inherit}
html[data-abb-page=post] body .post h3,html[data-abb-page=post] body .article h3,html[data-abb-page=post] body article>h3{font:720 clamp(20px,3vw,23px)/1.3 var(--pfont);letter-spacing:-.01em;text-transform:none;margin:1.7em auto .5em;color:inherit}
html[data-abb-page=post] body .post h2::before,html[data-abb-page=post] body .post h2::after,html[data-abb-page=post] body .article h2::before,html[data-abb-page=post] body .article h2::after{content:none}
html[data-abb-page=post] body .post :is(ul,ol),html[data-abb-page=post] body .article :is(ul,ol),html[data-abb-page=post] body article>:is(ul,ol){padding-left:1.4em;margin-bottom:1.25em}
html[data-abb-page=post] body .post li,html[data-abb-page=post] body .article li,html[data-abb-page=post] body article li{margin:.4em 0;line-height:1.7}
html[data-abb-page=post] body :is(.post,.article,article) li::marker{color:var(--pa)}
html[data-abb-page=post] body :is(.post,.article,article) a:not(.calcbtn):not(.btn):not(.cta-primary){color:var(--pa);text-underline-offset:3px}
html[data-abb-page=post] body :is(.post,.article,article) blockquote{margin:1.6em auto;padding:.2em 0 .2em 1.3em;border-left:4px solid var(--pa);font-size:1.12em;font-style:italic;opacity:.92}
html[data-abb-page=post] body :is(.post,.article,article) img{max-width:100%;height:auto;border-radius:14px}
html[data-abb-page=post] body :is(.post,.article,article) figure{margin:1.8em auto}
html[data-abb-page=post] body :is(.post,.article,article) figcaption{font-size:14px;opacity:.7;text-align:center;margin-top:8px}
html[data-abb-page=post] body :is(.post,.article,article) hr{border:0;border-top:1px solid var(--pline);margin:2.4em auto}
/* cover image already in the page (abc post-hero, calc figure.hero): same big rounded 16:9 cover */
html[data-abb-page=post] body img.post-hero{order:-4;width:100%;max-width:var(--pc);aspect-ratio:16/9;height:auto;max-height:none;object-fit:cover;border-radius:20px;margin:0 auto 28px;display:block}
html[data-abb-page=post] body article>figure.hero{order:-4;max-width:var(--pc)!important;width:100%;margin:8px auto 28px!important}
html[data-abb-page=post] body article>figure.hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;display:block}
html[data-abb=calc][data-abb-page=post] body article{display:flex;flex-direction:column;padding:0 16px;min-width:0;box-sizing:border-box}
html[data-abb=calc][data-abb-page=post] body article>*{min-width:0;box-sizing:border-box}
html[data-abb=calc][data-abb-page=post] body article{overflow-x:clip}
html[data-abb=calc][data-abb-page=post] body article>h1{order:-2}html[data-abb=calc] html[data-abb-page=post] body article>.meta{order:-1}
/* ---- tables: styled, and they scroll sideways on phones ---- */
html[data-abb-page=post] body :is(.post,.article,article) :is(.tablewrap,.dht-tablewrap,.table-wrap){overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:1.6em auto;border:1px solid var(--pline);border-radius:12px}
html[data-abb-page=post] body :is(.post,.article,article) table{border-collapse:collapse;font:400 15.5px/1.5 var(--pfont);width:100%;margin:0}
html[data-abb-page=post] body :is(.post,.article,article)>table{display:block;overflow-x:auto;max-width:100%;margin:1.6em auto;border:1px solid var(--pline);border-radius:12px}
html[data-abb-page=post] body :is(.post,.article,article) :is(th,td){padding:10px 14px;border:0;border-bottom:1px solid var(--pline);text-align:left;vertical-align:top}
html[data-abb-page=post] body :is(.post,.article,article) th{font-weight:700;background:color-mix(in srgb,var(--pa) 8%,transparent);color:inherit}
html[data-abb-page=post] body :is(.post,.article,article) tr:last-child :is(th,td){border-bottom:0}
html[data-abb-page=post] body :is(.post,.article,article) :is(.tablewrap,.dht-tablewrap) table{min-width:480px}
/* callouts */
html[data-abb-page=post] body :is(.post,.article,article) :is(.side-cta,.dht-answer,.dht-note,.formula,.example,.mistake,.cta,.callout){border-radius:14px;border:1px solid var(--pline);border-left:4px solid var(--pa);background:color-mix(in srgb,var(--pa) 6%,transparent);padding:16px 20px;margin:1.6em auto;box-shadow:none;color:inherit}
html[data-abb-page=post] body :is(.post,.article,article) :is(.side-cta,.dht-answer,.dht-note,.example,.mistake) p:last-child{margin-bottom:0}
html[data-abb-page=post] body :is(.post,.article,article) .formula{overflow-x:auto}
/* share + keep-reading (from ab-blog.js) lined up with the column */
html[data-abb-page=post] body .abb-share{max-width:var(--pw);margin:40px auto 10px;padding:18px 0 0}
html[data-abb-page=post] body .abb-rel{max-width:1100px;margin-top:30px}
html[data-abb-page=post] body .abb-prog{background:var(--pa)}
html[data-abb-page=post] body article>.related{border-top:1px solid var(--pline);margin-top:2.4em;padding-top:1.2em}
html[data-abb-page=post] body article>.related h2{margin-top:0}
/* ---- gods ---- */
html[data-abb=hindu-gods][data-abb-page=post] body .hero::before{position:static!important;inset:auto!important;opacity:1!important;filter:none!important;transform:none!important;z-index:auto!important;height:auto!important}
html[data-abb=hindu-gods][data-abb-page=post] body .hero{display:block!important;background:none!important;color:inherit;padding:28px 16px 0;text-align:left}
html[data-abb=hindu-gods][data-abb-page=post] body .hero .container,html[data-abb=hindu-gods][data-abb-page=post] body .hero-grid{max-width:var(--pw);margin:0 auto;display:block}
html[data-abb=hindu-gods][data-abb-page=post] body .hero h1{font:800 clamp(28px,5vw,42px)/1.2 var(--pfont);color:inherit;letter-spacing:-.01em;margin:0 0 10px}
html[data-abb=hindu-gods][data-abb-page=post] body .hero h2{font:500 18px/1.4 var(--pfont);opacity:.75;color:inherit;margin:0 0 12px}
html[data-abb=hindu-gods][data-abb-page=post] body .hero p{font:400 18px/1.7 var(--pfont);color:inherit;opacity:.85}
html[data-abb=hindu-gods][data-abb-page=post] body .hero-fact{background:color-mix(in srgb,var(--pa) 10%,transparent);color:inherit;border:0;border-radius:999px;padding:5px 12px;font-size:13px}
html[data-abb=hindu-gods][data-abb-page=post] body .portal-wrap{display:flex;flex-direction:column;max-width:var(--pw);margin:0 auto;padding:0 16px}
html[data-abb=hindu-gods][data-abb-page=post] body .portal-main{order:1;width:100%;max-width:none;font:400 18px/1.78 var(--pfont)}
html[data-abb=hindu-gods][data-abb-page=post] body .portal-sidebar{order:2;position:static;width:100%;max-width:none;margin-top:30px}
html[data-abb=hindu-gods][data-abb-page=post] body .portal-main p{font-size:18px;line-height:1.78}
html[data-abb=hindu-gods][data-abb-page=post] body details.category-dropdown{border:0;border-bottom:1px solid var(--pline);background:none;box-shadow:none;border-radius:0;margin:0;padding:0}
html[data-abb=hindu-gods][data-abb-page=post] body .category-summary{padding:22px 0 8px;background:none}
html[data-abb=hindu-gods][data-abb-page=post] body .category-summary .section-icon{display:none}
html[data-abb=hindu-gods][data-abb-page=post] body .category-info h3{font:780 clamp(22px,3.4vw,28px)/1.25 var(--pfont);color:inherit;margin:0}
html[data-abb=hindu-gods][data-abb-page=post] body .category-info small{font-size:14px;opacity:.65}
html[data-abb=hindu-gods][data-abb-page=post] body .story-meta{margin:6px 0 18px}
html[data-abb=hindu-gods][data-abb-page=post] body .portal-main .topic-body{padding:0!important}
@media(max-width:600px){
 html[data-abb-page=post] body .post,html[data-abb-page=post] body .article,html[data-abb-page=post] body .post p,html[data-abb-page=post] body .article p,html[data-abb-page=post] body article>p{font-size:17px}
 html[data-abb-page=post] body article>header.ph,html[data-abb-page=post] body main>header.ph{padding-left:0;padding-right:0}
 html[data-abb-page=post] body img.post-hero,html[data-abb-page=post] body header.ph::before{border-radius:14px}
}
html[data-abb=calc][data-abb-page=post] body article{background:none;border:0;border-radius:0;box-shadow:none;text-align:left}
html[data-abb=calc][data-abb-page=post] body article :is(h1,h2,h3){text-align:left}
html[data-abb=calc][data-abb-page=post] body article>:not(figure.hero){margin-left:auto;margin-right:auto}

/* ======== DIRECTORY GROUPS + PRESETS (11 Oct 2026) - gjobs / exnews / ctutors / coupons, presets A-D for every group ======== */
html[data-abb=gjobs]{--pa:#166534}html[data-abb=exnews]{--pa:#be123c}html[data-abb=ctutors]{--pa:#0e7490}html[data-abb=coupons]{--pa:#c026d3}
/* original listings stay in the DOM for crawlers, hidden once the widget is up */
html.abb-js[data-abb=gjobs][data-abb-page=index] main #closing-soon,html.abb-js[data-abb=gjobs][data-abb-page=index] main #open,
html.abb-js[data-abb=exnews][data-abb-page=index] main section.ab-s.ab-wrap,
html.abb-js[data-abb=ctutors][data-abb-page=index] #abb-root~section.ab-s,
html.abb-js[data-abb=coupons][data-abb-page=index] main>section.section.container{display:none!important}
.abb-bd{font-style:normal;font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.01em;word-break:break-word;opacity:1}
.abb-xr{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px;font-size:13px}
.abb-x{opacity:.72}
.abb-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent}
.abb-pill.is-open{background:color-mix(in srgb,#16a34a 14%,transparent);color:#15803d;border-color:color-mix(in srgb,#16a34a 35%,transparent)}
.abb-pill.is-soon{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309;border-color:color-mix(in srgb,#f59e0b 45%,transparent)}
.abb-pill.is-closed{background:color-mix(in srgb,currentColor 8%,transparent);opacity:.7}
.abb-go{display:inline-block;margin-top:12px;padding:9px 18px;border-radius:999px;background:var(--abb-a);color:#fff!important;font-weight:700;font-size:14px;text-decoration:none!important;align-self:flex-start}
.abb-go:hover{filter:brightness(1.1)}
.abb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.abb-pills span{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.55);font-size:13.5px}

/* ---- GJOBS: notice board - compact rows, green stripe, org badge, deadline pill ---- */
.abb[data-g=gjobs]:not([data-preset]) .abb-grid{gap:12px;margin-top:6px}
.abb[data-g=gjobs]:not([data-preset]) .abb-card:not(.abb-hero){flex-direction:row;align-items:center;gap:16px;padding:14px 16px 14px 14px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-left:5px solid var(--abb-a);border-radius:14px;background:color-mix(in srgb,currentColor 3%,transparent)}
.abb[data-g=gjobs]:not([data-preset]) .abb-card:not(.abb-hero):hover{background:color-mix(in srgb,var(--abb-a) 7%,transparent)}
.abb[data-g=gjobs]:not([data-preset]) .abb-cover{flex:0 0 78px;width:78px;aspect-ratio:1/1;border-radius:12px}
.abb[data-g=gjobs]:not([data-preset]) .abb-ph{padding:6px;align-items:center;justify-content:center;text-align:center;gap:2px}
.abb[data-g=gjobs]:not([data-preset]) .abb-ph i,.abb[data-g=gjobs]:not([data-preset]) .abb-ph span{display:none}
.abb[data-g=gjobs]:not([data-preset]) .abb-bd{font-size:15px;letter-spacing:.02em}
.abb[data-g=gjobs]:not([data-preset]) .abb-cat{margin:0 0 4px;color:var(--abb-a);opacity:1;font-weight:700}
.abb[data-g=gjobs]:not([data-preset]) .abb-t{font-size:17.5px}
.abb[data-g=gjobs]:not([data-preset]) .abb-i{-webkit-line-clamp:2;font-size:14.5px;margin-bottom:4px}
html[data-abb=gjobs][data-abb-page=index] .jb-hero .ab-hero__panel{box-shadow:inset 0 -6px 0 #166534}

/* ---- EXNEWS: newsroom - hairline rows, serif headlines, crimson kicker, thumbnail right ---- */
.abb[data-g=exnews]:not([data-preset]) .abb-tools{border-top:3px solid var(--abb-a);padding-top:16px;margin-top:6px}
.abb[data-g=exnews]:not([data-preset]) .abb-grid{gap:0}
.abb[data-g=exnews]:not([data-preset]) .abb-card:not(.abb-hero){flex-direction:row-reverse;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.abb[data-g=exnews]:not([data-preset]) .abb-cover{flex:0 0 132px;width:132px;border-radius:6px}
.abb[data-g=exnews]:not([data-preset]) .abb-ph{padding:8px;align-items:flex-start;justify-content:center;gap:0}
.abb[data-g=exnews]:not([data-preset]) .abb-ph i,.abb[data-g=exnews]:not([data-preset]) .abb-ph span{display:none}
.abb[data-g=exnews]:not([data-preset]) .abb-bd{font-size:17px}
.abb[data-g=exnews]:not([data-preset]) .abb-cat{margin:0 0 6px;color:var(--abb-a);opacity:1;font-weight:800;letter-spacing:.12em;font-size:11.5px}
.abb[data-g=exnews]:not([data-preset]) .abb-cat::before{content:"\25cf";margin-right:6px;font-size:9px;vertical-align:1px}
.abb[data-g=exnews]:not([data-preset]) .abb .abb-t,.abb[data-g=exnews]:not([data-preset]) .abb-t{font-family:Georgia,"Times New Roman",serif!important;font-size:21px;font-weight:700!important;letter-spacing:0!important}
.abb[data-g=exnews]:not([data-preset]) .abb-i{-webkit-line-clamp:2}
html[data-abb=exnews][data-abb-page=index] main>header.ab-hero .ab-hero__panel{border-top:6px double #be123c}

/* ---- CTUTORS: directory tiles - rounded tiles with a big count, cyan ---- */
.abb[data-g=ctutors]:not([data-preset]) .abb-card:not(.abb-hero){border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:20px;overflow:hidden;background:color-mix(in srgb,currentColor 2.5%,transparent);transition:transform .2s,border-color .2s}
.abb[data-g=ctutors]:not([data-preset]) .abb-card:not(.abb-hero):hover{transform:translateY(-3px);border-color:var(--abb-a)}
.abb[data-g=ctutors]:not([data-preset]) .abb-cover{border-radius:0}
.abb[data-g=ctutors]:not([data-preset]) .abb-ph{align-items:flex-start;justify-content:center;padding:14px 18px;gap:2px;background:linear-gradient(150deg,color-mix(in srgb,var(--abb-a) 70%,#000),var(--abb-a))}
.abb[data-g=ctutors]:not([data-preset]) .abb-ph i{position:absolute;right:14px;top:10px;font-size:38px;opacity:.35}
.abb[data-g=ctutors]:not([data-preset]) .abb-bd{font-size:48px;line-height:1}
.abb[data-g=ctutors]:not([data-preset]) .abb-body{padding:6px 18px 18px}
.abb[data-g=ctutors]:not([data-preset]) .abb-cat{color:var(--abb-a);opacity:1;font-weight:700}
.abb[data-g=ctutors]:not([data-preset]) .abb-t{font-size:17px}
.abb[data-g=ctutors]:not([data-preset]) .abb-i{-webkit-line-clamp:3;font-size:14px}
.abb[data-g=ctutors]:not([data-preset]) .abb-grid{gap:20px}
@media(min-width:1100px){.abb[data-g=ctutors]:not([data-preset]):not([data-cols]) .abb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
html[data-abb=ctutors][data-abb-page=index] .ct-hero .ab-hero__panel{box-shadow:inset 0 -6px 0 #0e7490}

/* ---- COUPONS: tickets with a stub, dashed tear line and notches ---- */
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-card:not(.abb-hero){flex-direction:row;min-height:168px;background:color-mix(in srgb,var(--abb-a) 6%,transparent);border-radius:16px;
  -webkit-mask:radial-gradient(circle 10px at 124px 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 124px 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 10px at 124px 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 124px 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-cover{flex:0 0 124px;width:124px;aspect-ratio:auto;border-radius:0}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-ph{align-items:center;justify-content:center;text-align:center;padding:10px;gap:6px;background:linear-gradient(160deg,color-mix(in srgb,var(--abb-a) 75%,#000),var(--abb-a))}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-ph i{font-size:30px}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-bd{font-size:17px;letter-spacing:.04em}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-ph span{display:none}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-body{padding:16px 18px 16px 22px;border-left:2px dashed color-mix(in srgb,var(--abb-a) 55%,transparent);display:flex;flex-direction:column}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-cat{margin:0 0 4px;color:var(--abb-a);opacity:1;font-weight:700}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-t{font-size:18px}
.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-i{-webkit-line-clamp:3;font-size:14px}
html[data-abb=coupons][data-abb-page=index] main>section.hero.container{padding-bottom:6px}
@media(max-width:899px){.abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-grid{grid-template-columns:1fr}}
@media(max-width:599px){
 .abb[data-g=gjobs]:not([data-preset]) .abb-card:not(.abb-hero){flex-direction:row;align-items:flex-start}
 .abb[data-g=gjobs]:not([data-preset]) .abb-cover{flex-basis:56px;width:56px}
 .abb[data-g=gjobs]:not([data-preset]) .abb-bd{font-size:12px}
 .abb[data-g=exnews]:not([data-preset]) .abb-cover{flex-basis:92px;width:92px}
 .abb[data-g=exnews]:not([data-preset]) .abb-list .abb-card,.abb[data-g=exnews]:not([data-preset]) .abb-card:not(.abb-hero){flex-direction:row-reverse}
 .abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-card:not(.abb-hero){flex-direction:row}
 .abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-cover{flex-basis:96px;width:96px}
 .abb[data-g=coupons][data-kind=o]:not([data-preset]) .abb-card:not(.abb-hero){-webkit-mask:radial-gradient(circle 9px at 96px 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 96px 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 9px at 96px 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 96px 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
 .abb[data-g=ctutors]:not([data-preset]) .abb-grid{grid-template-columns:1fr 1fr;gap:12px}
 .abb[data-g=ctutors]:not([data-preset]) .abb-bd{font-size:34px}
 .abb[data-g=ctutors]:not([data-preset]) .abb-i{display:none}
}

/* ---- PRESETS (master.4ab.in/blog-design; ?abbpreset=A..D previews any index) ---- */
/* A: Elfsight grid = the plain grid. B: list = plain list. */
/* C: magazine, featured first: full-bleed lead story, sturdy rules above the rest */
.abb[data-preset=C] .abb-hero{display:block;position:relative;overflow:hidden;border-radius:var(--abb-r);margin:22px 0 40px;min-height:clamp(300px,42vw,460px);color:#fff;background:#111}
.abb[data-preset=C] .abb-hero .abb-cover{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;order:0}
.abb[data-preset=C] .abb-hero .abb-body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit;padding:clamp(20px,4vw,44px);background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.82));order:0}
.abb[data-preset=C] .abb-hero .abb-t,.abb[data-preset=C] .abb-hero .abb-t a{color:#fff!important}
.abb[data-preset=C] .abb-hero .abb-cat,.abb[data-preset=C] .abb-hero .abb-by,.abb[data-preset=C] .abb-hero .abb-i{color:#fff;opacity:.9}
.abb[data-preset=C] .abb-grid{gap:30px 22px}
.abb[data-preset=C] .abb-card:not(.abb-hero){border-top:4px solid var(--abb-a);padding-top:14px}
.abb[data-preset=C] .abb-card:not(.abb-hero) .abb-cover{order:2;margin-top:12px}
.abb[data-preset=C] .abb-card:not(.abb-hero) .abb-body{order:1}
.abb[data-preset=C] .abb-card:not(.abb-hero) .abb-cat{margin-top:0;color:var(--abb-a);opacity:1;font-weight:700}
.abb[data-preset=C] .abb-card:not(.abb-hero) .abb-t{font-family:Georgia,"Times New Roman",serif!important;font-weight:700!important}
/* D: "top class" (the Hindu Gods blog look): accent band header with pills, big lead story, roomy cards */
.abb[data-preset=D] .abb-bar{border:0;padding-bottom:0}
.abb[data-preset=D] .abb-head{max-width:none;text-align:left;margin:10px 0 0;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px);border-radius:22px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--abb-a) 62%,#000),var(--abb-a) 70%,color-mix(in srgb,var(--abb-a) 70%,#f59e0b))}
.abb[data-preset=D] .abb-head h2{color:#fff!important;font-size:clamp(32px,6vw,56px)!important}
.abb[data-preset=D] .abb-head p{color:#fff;opacity:.9;max-width:62ch}
.abb[data-preset=D] .abb-hero .abb-t{font-size:clamp(28px,4vw,44px)!important}
.abb[data-preset=D] .abb-tools{margin-top:26px}
.abb[data-preset=D] .abb-card:not(.abb-hero) .abb-body{padding:2px 2px 0}

/* ======== POST VIEW for directory items (gjobs vacancy pages, exam pages, city/area pages, coupon guides) ======== */
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=exnews],[data-abb=ctutors],[data-abb=coupons]) body{--pline:rgba(128,128,128,.28);--pfont:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif}
/* cover tile on top of the title block: reserved space (no shift), image from --abb-cover else gradient */
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=ctutors]) main .ab-hero__panel::before,
html[data-abb-page=post][data-abb=exnews] main .exn-title::before,
html[data-abb-page=post][data-abb=coupons] main article.article::before{content:"";display:block;box-sizing:border-box;width:100%;aspect-ratio:16/6;border-radius:16px;margin:0 0 20px;background-color:var(--pa);background-size:cover;background-position:center;
  background-image:var(--abb-cover,linear-gradient(135deg,color-mix(in srgb,var(--pa) 78%,#000),var(--pa) 60%,color-mix(in srgb,var(--pa) 55%,#fff)))}
html[data-abb-page=post][data-abb=coupons] main article.article::before{aspect-ratio:16/7;max-width:960px;margin:8px auto 24px}
html[data-abb-page=post][data-abb=exnews] main .exn-title::before{aspect-ratio:16/5}
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=exnews],[data-abb=ctutors],[data-abb=coupons]) .abb-share{max-width:860px;margin:40px auto 10px}
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=exnews],[data-abb=ctutors],[data-abb=coupons]) .abb-rel{max-width:1100px;margin-top:30px}
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=exnews],[data-abb=ctutors],[data-abb=coupons]) .abb-prog{background:var(--pa)}
/* group accents inside the item pages */
html[data-abb-page=post][data-abb=gjobs] main .ab-hero__panel{box-shadow:inset 0 -6px 0 #166534}
html[data-abb-page=post][data-abb=gjobs] main .ab-hero__title{font-size:clamp(26px,4.4vw,44px)}
html[data-abb-page=post][data-abb=exnews] main .exn-title{font-family:Georgia,"Times New Roman",serif;letter-spacing:0}
html[data-abb-page=post][data-abb=exnews] main .ab-wrap>nav+.exn-title,html[data-abb-page=post][data-abb=exnews] main .exn-subtitle{border-left:0}
html[data-abb-page=post][data-abb=ctutors] main .ab-hero__panel{box-shadow:inset 0 -6px 0 #0e7490}
html[data-abb-page=post][data-abb=coupons] body article.article{max-width:860px;margin:0 auto;padding:0 16px}
html[data-abb-page=post][data-abb=coupons] body article.article .meta{display:flex;flex-wrap:wrap;gap:6px 14px;opacity:.75;font-size:14px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--pline)}
html[data-abb-page=post][data-abb=coupons] body article.article h1{font:800 clamp(30px,5vw,44px)/1.15 var(--pfont);letter-spacing:-.02em;margin:0 0 12px}
html[data-abb-page=post][data-abb=coupons] body article.article .lede{font:400 19px/1.55 var(--pfont);opacity:.8}
html[data-abb-page=post][data-abb=coupons] body article.article #articleBody{font:400 18px/1.78 var(--pfont)}
html[data-abb-page=post][data-abb=coupons] body article.article #articleBody h2{font:780 clamp(24px,3.6vw,30px)/1.25 var(--pfont);margin:1.8em 0 .5em}
html[data-abb-page=post][data-abb=coupons] body article.article a{color:var(--pa)}
@media(max-width:600px){html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=exnews],[data-abb=ctutors]) main .ab-hero__panel::before{aspect-ratio:16/8}}

.abb-bs{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.abb[data-g=ctutors]:not([data-preset]) .abb-ph span{display:none}
/* cover tile: glyph + tighter ratio (v11b) */
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=ctutors]) main .ab-hero__panel::before,
html[data-abb-page=post][data-abb=exnews] main .exn-title::before,
html[data-abb-page=post][data-abb=coupons] main article.article::before{display:grid;place-items:center;font:700 clamp(40px,8vw,72px)/1 system-ui,sans-serif;color:rgba(255,255,255,.42)}
html[data-abb-page=post][data-abb=gjobs] main .ab-hero__panel::before{content:"\2605";aspect-ratio:16/5}
html[data-abb-page=post][data-abb=ctutors] main .ab-hero__panel::before{content:"\2316";aspect-ratio:16/5}
html[data-abb-page=post][data-abb=exnews] main .exn-title::before{content:"\25c9";aspect-ratio:16/4}
html[data-abb-page=post][data-abb=coupons] main article.article::before{content:"%";aspect-ratio:16/6}
html[data-abb-page=post][style*="--abb-cover"] main :is(.ab-hero__panel,.exn-title,article.article)::before{color:transparent}
@media(max-width:600px){html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=ctutors]) main .ab-hero__panel::before{aspect-ratio:16/7}html[data-abb-page=post][data-abb=exnews] main .exn-title::before{aspect-ratio:16/6}}

/* ======== INFO CARD (11 Oct): "Exam at a glance" replaces the illustration hero on gjobs vacancy + exnews exam pages ======== */
html[data-abb-page=post]:is([data-abb=gjobs],[data-abb=exnews]) main :is(.ab-hero__panel,.exn-title)::before{display:none!important;content:none!important}
.abi{--ia:#166534;--ib:#f0fdf4;--ik:#0b1b33;--il:rgba(22,101,52,.22);box-sizing:border-box;width:calc(100% - 32px);max-width:1100px;margin:16px auto 26px;padding:16px 16px 14px;border:1px solid var(--il);border-left:6px solid var(--ia);border-radius:14px;background:var(--ib);color:var(--ik);font:400 15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif}
.abi--exnews{--ia:#b91c1c;--ib:#fef2f2;--il:rgba(185,28,28,.22)}
html[data-theme=dark] .abi,html[data-hs-theme=dark] .abi{--ib:#10211a;--ik:#e8eef5;--il:rgba(134,239,172,.25)}
html[data-theme=dark] .abi--exnews,html[data-hs-theme=dark] .abi--exnews{--ib:#26141a;--il:rgba(252,165,165,.28)}
.abi *{box-sizing:border-box}
.abi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:30px}
.abi-tag{font:800 12px/1 system-ui,sans-serif;letter-spacing:.12em;color:var(--ia)}
html[data-theme=dark] .abi-tag,html[data-hs-theme=dark] .abi-tag{color:#86efac}
html[data-theme=dark] .abi--exnews .abi-tag,html[data-hs-theme=dark] .abi--exnews .abi-tag{color:#fca5a5}
.abi-chip{display:inline-block;min-width:104px;text-align:center;font:700 13px/1 system-ui,sans-serif;padding:8px 12px;border-radius:999px;background:#166534;color:#fff}
.abi-chip--urgent{background:#c2410c}.abi-chip--closed{background:#6b7280}
.abi-org{margin:8px 0 0;font:800 clamp(19px,3.2vw,26px)/1.25 system-ui,sans-serif}
.abi-sub{margin:4px 0 0;opacity:.8;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.abi-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin:14px 0 0;padding:0}
.abi-t{margin:0;padding:10px 12px;border-radius:10px;background:rgba(128,128,128,.12);border:1px solid var(--il)}
.abi-t dt{font:600 12px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.abi-t dd{margin:4px 0 0;font:800 clamp(18px,2.6vw,22px)/1.2 system-ui,sans-serif;overflow-wrap:anywhere}
.abi-t--hot{background:var(--ia);border-color:var(--ia);color:#fff}.abi-t--hot dt{opacity:.9}
.abi-h{margin:16px 0 6px;font:800 14px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ia)}
html[data-theme=dark] .abi-h,html[data-hs-theme=dark] .abi-h{color:#86efac}
html[data-theme=dark] .abi--exnews .abi-h,html[data-hs-theme=dark] .abi--exnews .abi-h{color:#fca5a5}
.abi-list{margin:0;padding:0;border-top:1px solid var(--il)}
.abi-r{display:grid;grid-template-columns:minmax(104px,34%) 1fr;gap:4px 12px;padding:8px 2px;border-bottom:1px solid var(--il)}
.abi-r dt{font-weight:700;opacity:.8}.abi-r dd{margin:0;overflow-wrap:anywhere}
.abi-r--hot dd{font-weight:800;color:#b91c1c}
html[data-theme=dark] .abi-r--hot dd,html[data-hs-theme=dark] .abi-r--hot dd{color:#fdba74}
.abi-r--long dd{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.abi-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.abi-b{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:10px;font:700 14px/1.2 system-ui,sans-serif;text-decoration:none;border:2px solid var(--ia)}
.abi-b--gold{background:var(--ia);color:#fff}.abi-b--line{background:transparent;color:var(--ia)}
html[data-theme=dark] .abi-b--line,html[data-hs-theme=dark] .abi-b--line{color:#e8eef5;border-color:#86efac}
.abi-note{margin:12px 0 0;font-size:12.5px;opacity:.7}
@media(max-width:480px){.abi{width:calc(100% - 24px);padding:14px 12px}.abi-r{grid-template-columns:minmax(96px,38%) 1fr;font-size:14px}.abi-b{flex:1 1 100%;justify-content:center}}
/* 11 Oct owner: never crop a cover/poster - show the whole image in its box */
html[data-abb-page=post] body img.post-hero,html[data-abb-page=post] body article>figure.hero img{aspect-ratio:auto!important;height:auto!important;max-height:80vh;object-fit:contain!important;background:#eef2fb}
.abb-cover img{object-fit:contain!important;background:#eef2fb}
/* compact hero on vacancy/exam pages so the info card is on the first screen */
html[data-abb-page=post][data-abb=gjobs] main .jb-hero .ab-hero__panel{padding-top:20px;padding-bottom:20px}
html[data-abb-page=post][data-abb=gjobs] main .ab-hero__title{font-size:clamp(20px,4.6vw,32px)!important;line-height:1.25}
html[data-abb-page=post][data-abb=gjobs] main .ab-hero__lede{margin-top:8px}
@media(max-width:600px){html[data-abb-page=post][data-abb=gjobs] main .ab-hero__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* ======== img-3fmt (11 Oct 2026): per-device cover versions. Only active where the builder emitted p.f / apply.py set data-abb-f3 (published phases). ======== */
.abb .abb-cover.abb-contain img{object-fit:contain}
@media(min-width:601px) and (max-width:1024px){
  .abb .abb-cover.abb-f3[data-f3*=t]{aspect-ratio:4/3}
  html[data-abb-f3*=t][data-abb-page=post] body header.ph::before,html[data-abb-f3*=t][data-abb=hindu-gods][data-abb-page=post] body .hero::before{aspect-ratio:4/3;background-image:var(--abb-cover-t)}
}
@media(max-width:600px){
  .abb .abb-cover.abb-f3[data-f3*=m]{aspect-ratio:1/1}
  html[data-abb-f3*=m][data-abb-page=post] body header.ph::before,html[data-abb-f3*=m][data-abb=hindu-gods][data-abb-page=post] body .hero::before{aspect-ratio:1/1;background-image:var(--abb-cover-m)}
}

/* responsive-pass 2026-10-11 */
/* all blogs: images never exceed the column */
html[data-abb-page=post] body img{max-width:100%}
/* shell chrome inside blog pages: 12px floor everywhere */
html[data-abb] .ab-lang-b .g,html[data-abb] .pcard .cat,html[data-abb] .side-card .chk,html[data-abb] .story-meta .badge{font-size:12px}
/* 44px tap targets on touch / <=1024px */
@media (pointer:coarse),(max-width:1024px){
  /* footer links keep the compact footer height; 44px tap area comes from an invisible ::after (no layout cost) */
  html[data-abb] .f3-by a,html[data-abb] .f3-tel a,html[data-abb] .f3-mail a{position:relative}
  html[data-abb] .f3-by a::after,html[data-abb] .f3-tel a::after,html[data-abb] .f3-mail a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  html[data-abb] header.site a,html[data-abb] .abb-related a,html[data-abb] .related a,html[data-abb] .related-links a{display:inline-flex;align-items:center;min-height:44px}
  html[data-abb] .abb-nav a,html[data-abb] .abb-pager a,html[data-abb] .abb-tabs a,html[data-abb] .abb-chip{min-height:44px;display:inline-flex;align-items:center}
}

/* responsive-pass-2 2026-10-11 */
@media (pointer:coarse),(max-width:1024px){
  html[data-abb] .ab-catnav a,html[data-abb] .site-header .brand{display:inline-flex;align-items:center;min-height:44px}
}

/* Gemini article block 12 Oct */
.abx-article{max-width:760px;margin:22px auto;padding:0 16px;font-size:17px;line-height:1.7}.abx-article h2{margin:1.3em 0 .4em;font-size:1.25em}.abx-article ul{padding-left:1.2em}.abx-article li{margin:.25em 0}

/* abx responsive 12 Oct: Gemini article block is optimised for phone, tablet and desktop from the start */
.abx-article{overflow-wrap:anywhere;hyphens:auto}
.abx-article h2{font-size:clamp(1.15rem,1rem + 1.2vw,1.6rem);line-height:1.3}
.abx-article h3{font-size:clamp(1.02rem,.95rem + .8vw,1.25rem)}
.abx-article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:14px 0}
.abx-article th,.abx-article td{border:1px solid #d9e3f7;padding:8px 10px;text-align:left;vertical-align:top;min-width:96px}
.abx-article th{background:#eef4ff;font-weight:700}
.abx-article a{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.abx-article a:focus-visible{outline:3px solid #60a5fa;outline-offset:2px;border-radius:3px}
@media (pointer:coarse),(max-width:1024px){.abx-article a{display:inline-block;min-height:44px;line-height:44px;padding:0 2px}.abx-article li{margin:.5em 0}.abx-article{padding:0 14px}}
@media (min-width:1025px){.abx-article{padding:0 8px}}

/* social image always on top of the page (12 Oct) */
.abx-hero{max-width:900px;margin:14px auto 18px;padding:0 14px}.abx-hero img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:14px;box-shadow:0 6px 22px rgba(22,34,77,.15);background:#eef2fb}

.abx-note{margin:22px 0 8px;padding:12px 14px;border-left:4px solid #1d4ed8;background:#eef4ff;border-radius:8px;font-size:14.5px;line-height:1.6}

/* 12 Oct owner: ONE language switch at the top (the header EN/हिं chip); hide the extra globe pill. Official-notice buttons: white text on navy, always. */
/* (12 Oct hide rule removed 15 Oct ux: the top chip is now THE switch) */
html[data-abb] a.jb-act--gold,html[data-abb] .abb a.jb-act--gold,html[data-abb] .abb-card a.jb-act--gold,html[data-abb] a.jb-act--gold:visited{color:#fff!important}
html[data-abb] a.jb-act--gold:hover{color:#fff!important}

/* abx layout 12 Oct: image, info card and article share ONE column on phone, tablet and desktop; readable writing style */
html[data-abb] .abx-hero,html[data-abb] .abi,html[data-abb] .abx-article{box-sizing:border-box!important;width:calc(100% - 32px)!important;max-width:860px!important;margin-left:auto!important;margin-right:auto!important}
html[data-abb] .abx-hero{padding:0!important}
html[data-abb] .abx-article{padding:0!important;font-family:Georgia,"Noto Serif",Cambria,"Times New Roman",serif;font-size:17.5px;line-height:1.75;color:#1b2540;text-wrap:pretty}
html[data-abb] .abx-article p{margin:0 0 1.05em}
html[data-abb] .abx-article h2{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;letter-spacing:-.01em;margin:1.7em 0 .55em;padding-bottom:.3em;border-bottom:2px solid #dbe7ff}
html[data-abb] .abx-article h3{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;margin:1.3em 0 .4em}
html[data-abb] .abx-article ul,html[data-abb] .abx-article ol{margin:0 0 1.1em;padding-left:1.3em}
html[data-abb] .abx-article li{margin:.4em 0}
@media (min-width:1025px){html[data-abb] .abx-article{font-size:18.5px;line-height:1.8}}
@media (max-width:600px){html[data-abb] .abx-article{font-size:17px;line-height:1.7}html[data-abb] .abx-article h2{font-size:1.2em}}

/* title once 12 Oct: the title is shown in the image; the page H1 stays in the DOM (visually hidden) and the info card does not repeat org/title */
html[data-abb=gjobs] h1.ab-hero__title,html[data-abb=exnews] h1.exn-title{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
html[data-abb] .abi .abi-org,html[data-abb] .abi .abi-sub{display:none!important}
.abi-fig{box-sizing:border-box;width:calc(100% - 32px);max-width:1100px;margin:16px auto 0}.abi-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#eef1f5}
.abi-fig+.abi{margin-top:12px}
@media(max-width:480px){.abi-fig{width:calc(100% - 24px)}}

/* infographic 3 formats (15 Oct) */
@media(max-width:1024px){.abi-fig--t img{aspect-ratio:4/3}}
@media(max-width:600px){.abi-fig--m img{aspect-ratio:4/5}}

/* infographic single image (15 Oct) */
.abi-fig img{max-width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}

/* 15 Oct 2026 owner: blog posts too narrow on desktop (720px text / 960px image left lots of blank space) -> wider on large screens only; mobile/tablet untouched. Undo: delete this block or restore ab-blog.css.bak-wide-20261015 */
@media (min-width:1100px){html[data-abb-page=post] body{--pw:900px;--pc:1200px}}
@media (min-width:1500px){html[data-abb-page=post] body{--pw:1040px;--pc:1360px}}

/* 15 Oct 2026 wide post layout: article column + sticky right aside (contents / related / contact). >=1100px only; phones+tablets unchanged. Undo: restore ab-blog.css.bak-polish-20261015 */
.abw-aside{display:none}
@media (min-width:1100px){
html[data-abb-page=post] body{--pw:min(860px,100%);--pc:100%}
html.abw{scroll-behavior:smooth}
html.abw [id]{scroll-margin-top:84px}
html[data-abb-page=post] main.abw-root{position:relative;box-sizing:border-box;max-width:1400px!important;width:100%;margin-left:auto!important;margin-right:auto!important;padding-left:16px!important;padding-right:380px!important}
html[data-abb-page=post] main.abw-root>article,html[data-abb-page=post] main.abw-root>.article{min-width:0;flex:1 1 auto}
html.abw main.abw-root>.abw-aside{display:block;position:absolute;top:0;bottom:0;right:16px;width:340px;font:400 15px/1.5 var(--pfont,system-ui,sans-serif);color:inherit}
.abw-in{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:2px}
.abw-box{border:1px solid var(--pline,rgba(128,128,128,.28));border-radius:14px;padding:16px 18px;background:color-mix(in srgb,currentColor 4%,transparent)}
.abw-box[hidden]{display:none}
.abw-h{font-weight:800;font-size:15px;letter-spacing:.02em;margin:0 0 10px;color:var(--pa,inherit)}
.abw-toc{margin:0;padding:0;list-style:none;max-height:34vh;overflow-y:auto}
.abw-toc li{margin:0}
.abw-toc a,.abw-rl a{color:inherit;text-decoration:none}
.abw-toc a{display:block;padding:7px 8px;border-radius:8px;font-size:14px;line-height:1.4;opacity:.86}
.abw-toc a:hover,.abw-toc a:focus-visible,.abw-rl a:hover .abw-t,.abw-rl a:focus-visible .abw-t{color:var(--pa,inherit);text-decoration:underline}
.abw-toc a:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.abw-rl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.abw-rl a{display:flex;gap:10px;align-items:center}
.abw-rl img,.abw-ph{flex:none;width:72px;height:54px;border-radius:8px;object-fit:cover;background:color-mix(in srgb,var(--pa,#888) 18%,transparent)}
.abw-t{font-size:14px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.abw-cta p{margin:0 0 12px;font-size:14px;opacity:.82}
.abw-btn{display:block;text-align:center;padding:12px 14px;min-height:44px;box-sizing:border-box;border-radius:10px;background:var(--pa,#2563eb);color:#fff!important;font-weight:700;text-decoration:none!important}
.abw-btn2{margin-top:8px;background:transparent;color:inherit!important;border:1.5px solid var(--pa,#2563eb)}
.abw-btn:focus-visible,.abw-tel:focus-visible,.abw-toc a:focus-visible,.abw-rl a:focus-visible{outline:3px solid var(--pa,#2563eb);outline-offset:2px}
.abw-tel{display:block;text-align:center;margin-top:10px;padding:10px;font-weight:700;color:inherit;text-decoration:none}
}
@media (max-width:1099.98px){.abw-aside{display:none!important}}
html[data-abb=hindu-gods][data-abb-page=post] body .hero .cta-secondary{color:inherit;border:1.5px solid var(--pa);background:transparent}

/* 15 Oct polish: phone tap targets >=44px */
@media (max-width:600px){
.abb-nav button,.abb-bar>a,.abb-brand{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
.abb-views button{min-height:44px;min-width:44px}
.abb-share a,.abb-share button{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
}

/* 15 Oct polish: chip row must scroll inside its box, never widen the page (coupons index overflowed 65-108px) */
.abb,.abb-chips{min-width:0;max-width:100%}

/* 15 Oct polish: coupons pages - a decorative hero pseudo-element pushed the page 65-108px wider than the screen */
html[data-abb=coupons] main,html[data-abb=coupons] .hero{overflow-x:clip}

/* 15 Oct polish: chips/filters >=44px tall on phones */
@media (max-width:600px){.abb-chip,.abb-filters button,.abb-filters select{min-height:44px;box-sizing:border-box}}

/* ===== 15 Oct 2026 blog UX (task: related-category block, wide index pages, top language switch). Undo: restore ab-blog.css.bak-ux-20261015 ===== */
/* -- menus-rule RULE 4 (owner 16 Oct 2026): the top language chip rules were DELETED; the footer globe is the only switch -- */
/* -- related high-value category block (calc posts; injected by ab_cat.py) -- */
.abcat{margin:26px 0 8px;padding:18px 18px 16px;border:1px solid var(--line,rgba(128,128,128,.3));border-left:4px solid var(--brand,#4f46e5);border-radius:12px;background:var(--accent,color-mix(in srgb,currentColor 5%,transparent));color:var(--ink,inherit)}
.abcat-chip{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--brand,#4f46e5);color:#fff!important;font:700 12.5px/1.2 system-ui,Arial,sans-serif;text-decoration:none;letter-spacing:.02em}
.abcat-h{margin:12px 0 4px;font:800 1.15rem/1.3 system-ui,Arial,sans-serif;color:var(--brand2,inherit)}
.abcat-p{margin:0 0 12px;font-size:.95rem;line-height:1.55;color:var(--muted,inherit)}
.abcat-row{display:flex;flex-wrap:wrap;gap:10px}
.abcat-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;box-sizing:border-box;border-radius:10px;border:1.5px solid var(--brand,#4f46e5);color:var(--brand,#4f46e5)!important;background:transparent;font-weight:700;font-size:.95rem;text-decoration:none}
.abcat-btn--p{background:var(--brand,#4f46e5);color:#fff!important}
.abcat-btn:hover,.abcat-btn:focus-visible,.abcat-chip:hover,.abcat-chip:focus-visible{filter:brightness(1.08);text-decoration:underline}
.abcat-more{display:inline-block;margin-top:12px;font-size:.88rem;font-weight:600;min-height:24px}
@media (max-width:520px){.abcat-btn{flex:1 1 100%}}
/* -- wide desktop layout for blog INDEX pages (same approach as posts); phones/tablets unchanged -- */
@media (min-width:1100px){
html[data-abb-page=index] :is(main,div,section,article):has(#abb-root):not(.hs-box):not(.hs-shell):not(#hs-box){max-width:min(1560px,100%)!important}
html[data-abb-page=index] .abb{max-width:min(1560px,100%)}
}
@media (min-width:1500px){
html[data-abb-page=index] .abb:not([data-preset]):not([data-cols]) .abb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-abb-page=index] .abb.abb-list .abb-grid,html[data-abb-page=index] .abb-list .abb-grid{grid-template-columns:1fr}
}

/* ===== 15 Oct 2026 design2 (Fable, owner-approved): WIDE INDEX LAYOUT for the widget-backed blog indexes
   (calc, abc, home-tutor, hindu-gods, gjobs, exnews, ctutors, coupons). CSS only - the widget DOM is untouched:
   wrap > .abb-bar, .abb-head, .abb-tools, .abb-chips, .abb-count, <div> (hero + .abb-grid), .abb-more.
   >=1100px: container up to 1400px, the category chips become a STICKY side panel (left), cards 3-up (4-up >=1700px).
   <1100px: nothing changes (single column, chip row as before). Undo: restore ab-blog.css.bak-design2-20261015 ===== */
@media (min-width:1100px){
html[data-abb-page=index] .abb{max-width:min(1400px,100%)}
html[data-abb-page=index] .abb>div{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:28px;align-items:start}
html[data-abb-page=index] .abb>div>.abb-bar,html[data-abb-page=index] .abb>div>.abb-head{grid-column:1/-1}
html[data-abb-page=index] .abb>div>.abb-chips{grid-column:1;grid-row:span 8;position:sticky;top:16px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;overflow:visible;overflow-y:auto;max-height:calc(100vh - 32px);overscroll-behavior:contain;margin:0;padding:12px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:16px;background:color-mix(in srgb,currentColor 3.5%,transparent)}
html[data-abb-page=index] .abb>div>.abb-chips::before{content:"Categories";display:block;padding:4px 12px 10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
html[lang^=hi][data-abb-page=index] .abb>div>.abb-chips::before{content:"श्रेणियाँ";text-transform:none;letter-spacing:0;font-size:13px}
html[data-abb-page=index] .abb>div>.abb-chips .abb-chip{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:0;border-radius:10px;white-space:normal;text-align:left;line-height:1.3}
html[data-abb-page=index] .abb>div>.abb-chips .abb-chip:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
html[data-abb-page=index] .abb>div>.abb-chips .abb-chip[aria-pressed=true]{background:var(--abb-a);color:#fff}
html[data-abb-page=index] .abb>div>.abb-chips .abb-chip b{margin:0;flex:none;min-width:26px;text-align:right}
html[data-abb-page=index] .abb>div>.abb-tools,html[data-abb-page=index] .abb>div>.abb-count,html[data-abb-page=index] .abb>div>div:not([class]),html[data-abb-page=index] .abb>div>.abb-more{grid-column:2;min-width:0}
html[data-abb-page=index] .abb>div>.abb-tools{margin-top:0}
html[data-abb-page=index] .abb>div>.abb-more{justify-self:center}
html[data-abb-page=index] .abb:not([data-preset]):not([data-cols]):not(.abb-list):not([data-g=coupons]) .abb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1500px){
html[data-abb-page=index] .abb:not([data-preset]):not([data-cols]):not(.abb-list):not([data-g=coupons]) .abb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1700px){
html[data-abb-page=index] .abb:not([data-preset]):not([data-cols]):not(.abb-list):not([data-g=coupons]) .abb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* owner (16 Oct, rule 4): the FOOTER language switch is the ONLY one */
html[data-abb] .hs-foot .ab-lang{display:inline!important}
html[data-abb] .ab-lang.ab-lang-abs{display:inline!important}
/* design2 fix: list layouts (gjobs/exnews rows) must stay ONE column at every width - the 15 Oct ux 4-col rule at >=1500px was winning over .abb-list */
@media (min-width:1100px){html[data-abb-page=index] .abb.abb-list:not([data-preset]):not([data-cols]) .abb-grid{grid-template-columns:1fr!important}}

/* five-each-c (15 Oct 2026): static posts of bpsugar/property/puja/aniket - 16:9 cover on top of article.abp */
html[data-abb=bpsugar]{--pa:#be123c}html[data-abb=property]{--pa:#0f766e}html[data-abb=puja]{--pa:#c2410c}html[data-abb=aniket]{--pa:#4338ca}
html[data-abb-page=post]:is([data-abb=bpsugar],[data-abb=property],[data-abb=puja],[data-abb=aniket]) main article.abp::before{content:"";display:block;box-sizing:border-box;width:100%;aspect-ratio:16/9;border-radius:16px;margin:0 0 20px;background-color:var(--pa);background-size:cover;background-position:center;background-image:var(--abb-cover,linear-gradient(135deg,color-mix(in srgb,var(--pa) 78%,#000),var(--pa)))}